/* valleyeg.com — a copy of the Google Sites design it was built with: white
   tiles on a warm gray page, Roboto, a fixed white header whose current page is
   underlined in yellow, and a full-screen logo banner at the top of every page.
   Sizes are the Google Sites ones, measured at 1280px and 375px wide.
   On top of that copy: motion (see "Motion" at the end) — the excavator in the
   logo digs, the rule under the banner is moving caution tape, and sections
   make an entrance as they scroll into view. All of it is off for visitors
   whose device asks for reduced motion. */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #212121;
  --page: #f5f2f0;
  --tile: #ffffff;
  --accent: #ffd54f;
  --slate: #4b5667; /* the logo's gray */
  --header: 56px;
  --wrap: min(1154px, calc(100% - 32px));
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 17.3333px;
  line-height: 26.8667px;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--ink); color: #fff; padding: 8px 12px; text-decoration: none;
}
.skip:focus { top: 8px; }

/* ── Header ─────────────────────────────────────────────────────────── */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: var(--header);
  display: flex; align-items: center;
  padding: 0 58px 0 16px;
  background: #fff;
}
/* Google Sites draws a hairline under the header once the page scrolls. */
@supports (animation-timeline: scroll()) {
  .site-header {
    animation: header-line linear both;
    animation-timeline: scroll(root);
    animation-range: 0 8px;
  }
  @keyframes header-line { to { box-shadow: 0 1px 0 #cccccc; } }
}

.brand {
  display: flex; align-items: center;
  height: var(--header);
  color: var(--ink); text-decoration: none;
}
.brand img { width: 96px; height: 48px; object-fit: contain; }
.brand-name { margin-left: 12px; font-size: 20px; font-weight: 300; line-height: 20px; white-space: nowrap; }

.nav { margin-left: auto; display: flex; gap: 22px; height: var(--header); }
.nav-link {
  position: relative;
  display: flex; align-items: center;
  height: var(--header);
  padding: 0 2px;
  font-size: 16px; font-weight: 700; line-height: 28px;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
/* The yellow underline: full for the current page, a paler one on hover. */
.nav-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-link:hover::after { transform: none; opacity: 0.45; }
.nav-link[aria-current="page"]::after { transform: none; opacity: 1; }
.nav-link:focus-visible, .brand:focus-visible, .burger:focus-within { outline: 2px solid var(--ink); outline-offset: -4px; }

.burger { display: none; }

/* ── Hero: the logo banner ──────────────────────────────────────────── */

.hero {
  position: relative;
  display: grid; place-items: center;
  height: 100vh; height: 100svh;
  min-height: 420px;
  padding-bottom: 10px;
  overflow: hidden;
  background: #fff;
}
/* The yellow rule under the banner, striped as caution tape. */
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background-color: var(--accent);
  background-image: linear-gradient(135deg, var(--slate) 25%, transparent 25% 50%, var(--slate) 50% 75%, transparent 75%);
  background-size: 28px 28px;
}
.hero-stage { width: 100%; display: flex; justify-content: center; }
/* Sized like Google Sites' "cover" banner, whose picture was the logo with a
   20% white margin all round: 60% of the width or 120% of the height,
   whichever is larger — but never wider than 90% of the screen, where "cover"
   started cropping the logo on tall screens. */
.hero-logo {
  position: relative;
  width: min(max(60vw, 120vh), 90vw);
  width: min(max(60vw, 120svh), 90vw);
  aspect-ratio: 5001 / 2490;
}
.hero-base, .hero-arm { position: absolute; max-width: none; }
/* The arm sits BEHIND the rest of the logo, so a scooping bucket passes
   behind "E.G." and into the ground marks instead of covering them. */
.hero-base { inset: 0; width: 100%; height: 100%; z-index: 1; }
/* The arm-and-bucket layer's box within the logo, and its pivot — the boom
   pin — as measured when the logo was cut into layers. */
.hero-arm {
  left: 64.947%; top: 0; width: 35.053%; height: 83.494%;
  transform-origin: 5.857% 21.558%;
}
.hero-next {
  position: absolute; left: calc(50% - 24px); bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  color: rgba(0, 0, 0, 0.54);
}
.hero-next:hover { color: rgba(0, 0, 0, 0.8); }

main { display: block; padding-top: 24px; scroll-margin-top: var(--header); }

/* ── Tiles ──────────────────────────────────────────────────────────── */

.wrap { width: var(--wrap); margin: 0 auto; }
.tile { background: var(--tile); }

.text { margin-top: 48px; padding: 46px 8px 26px; }
.wrap > .text:first-child { margin-top: 0; }
.text h2 { margin: 0 0 16px; font-size: 37.3333px; font-weight: 700; line-height: 45.1733px; }
.text p { margin: 0 0 14px; }
.text p:last-child { margin-bottom: 0; }

.intro { padding: 44px 8px 50px; }
.lead { margin: 0; font-size: 21.3333px; font-weight: 700; line-height: 27.0933px; }

/* Home: three picture cards */
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 29px; }
.ph { overflow: hidden; }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.card-title {
  margin: 0; padding: 14px 8px 42px;
  background: var(--tile);
  font-size: 37.3333px; font-weight: 100; line-height: 45.1733px;
  text-align: center;
}

/* About: four credentials */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; row-gap: 48px; margin-top: 48px; }
.cred { display: flex; flex-direction: column; }
.cred-img { background: var(--tile); }
.cred-img img { width: 100%; }
.cred-body { flex: 1; padding: 14px 8px 22px; text-align: center; }
.thin { margin: 0 0 28px; font-size: 37.3333px; font-weight: 100; line-height: 45.1733px; }
.cred-body p { margin: 0; }

/* Services: picture left, title + text right, a rule between */
.svc-list { margin-top: 48px; }
.svc { display: grid; grid-template-columns: 464fr 661fr; column-gap: 29px; align-items: start; }
.svc-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.big { margin: 0; padding: 14px 8px; font-size: 49.3333px; font-weight: 100; line-height: 61.6667px; }
.svc-body p { margin: 0; padding: 17px 8px 30px; }
.rule { height: 0; margin: 33px 0 31px; border: 0; border-top: 3px solid #c9c6c4; }

/* Projects: four pictures with captions */
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 30px; row-gap: 32px; margin-top: 48px; }
.proj { margin: 0; }
.proj img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.proj figcaption { padding: 17px 8px 11px; text-align: center; }

/* ── Footer ─────────────────────────────────────────────────────────── */

.site-footer { width: var(--wrap); margin: 48px auto 25px; }
.foot { margin: 0; padding: 26px 8px; font-size: 12px; line-height: 14.4px; text-align: center; }

/* ── Tablet: the four project pictures go two by two ─────────────────── */

@media (max-width: 1023px) and (min-width: 768px) {
  .site-header { padding-right: 16px; }
  .nav { gap: 12px; }
  .cards3 { column-gap: 20px; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-title, .thin { font-size: 32px; line-height: 40px; }
  .big { font-size: 40px; line-height: 50px; }
}

/* ── Phone: one column, menu behind the button ─────────────────────── */

@media (max-width: 767px) {
  :root { --wrap: calc(100% - 37px); }
  .site-header { padding: 0 16px 0 0; }
  .burger {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: var(--header);
    color: rgba(0, 0, 0, 0.7); cursor: pointer;
  }
  .brand-name { display: none; }
  .nav {
    display: none;
    position: fixed; top: var(--header); left: 0; right: 0;
    flex-direction: column; gap: 0; height: auto;
    padding: 8px 0 12px;
    background: #fff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
  }
  .nav-toggle:checked ~ .nav { display: flex; }
  .nav-toggle:focus-visible + .burger { outline: 2px solid var(--ink); outline-offset: -6px; }
  .nav-link { height: 48px; padding: 0 24px; }
  .nav-link::after { top: 0; right: auto; width: 6px; height: auto; transform: scaleY(0); }

  .text { margin-top: 32px; padding: 30px 8px 24px; }
  .text h2 { font-size: 28px; line-height: 34px; }
  .intro { padding: 26px 8px 26px; }
  .lead { font-size: 20px; line-height: 25.4px; }
  .cards3, .grid2, .grid4 { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .grid2, .grid4, .svc-list { margin-top: 32px; }
  .card-title, .thin { font-size: 34.6667px; line-height: 43.3333px; }
  .svc { grid-template-columns: minmax(0, 1fr); }
  .big { font-size: 34.6667px; line-height: 43.3333px; }
  .rule { margin: 28px 0; }
  .site-footer { margin: 32px auto 24px; }
}

/* ── Motion ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  /* The banner: the logo settles in, then the excavator digs — reaches out,
     scoops, settles — on arrival and every ten seconds after. The caution
     tape crawls, the chevron nudges, and while the page scrolls the logo
     drifts down and fades (browsers with scroll-linked animation). */
  .hero-logo { animation: logo-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .hero-arm { animation: dig 10s cubic-bezier(0.45, 0, 0.25, 1) 1.1s infinite; }
  .hero::after { animation: tape 1.4s linear infinite; }
  .hero-next { animation: nudge 2.4s ease-in-out 2s infinite; }
  .nav-link[aria-current="page"]::after { animation: underline-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both; }
  @supports (animation-timeline: scroll()) {
    .hero-stage {
      animation: drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }

  /* Photos ease closer under the pointer. */
  .ph img { transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
  @media (hover: hover) {
    .card:hover .ph img, .svc:hover .ph img, .proj:hover .ph img { transform: scale(1.06); }
  }

  /* Entrances, played once when an element first scrolls into view: the
     class "motion" and each ".in" come from assets/motion.js, so without it
     nothing is ever hidden. "backwards" (not "both") hands each element
     back to its own styles afterwards, so the hover zoom still works. */
  .motion [data-reveal]:not(.in):not([data-reveal="uncover"]) { opacity: 0; }
  .motion [data-reveal="rise"].in { animation: rise 0.8s cubic-bezier(0.2, 0.75, 0.25, 1) var(--d, 0s) backwards; }
  .motion [data-reveal="left"].in { animation: from-left 0.9s cubic-bezier(0.2, 0.75, 0.25, 1) var(--d, 0s) backwards; }
  .motion [data-reveal="right"].in { animation: from-right 0.9s cubic-bezier(0.2, 0.75, 0.25, 1) var(--d, 0s) backwards; }
  /* About: each credential lands like a rubber stamp. */
  .motion [data-reveal="stamp"].in { animation: stamp 0.75s cubic-bezier(0.3, 1.3, 0.5, 1) calc(var(--d, 0s) + 0.3s) backwards; }
  /* Projects: each photo is dug out from the bottom up. */
  .motion [data-reveal="uncover"]:not(.in) .ph { clip-path: inset(100% 0 0 0); }
  .motion [data-reveal="uncover"]:not(.in) figcaption { opacity: 0; }
  .motion [data-reveal="uncover"].in .ph { animation: uncover 1.1s cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0s) backwards; }
  .motion [data-reveal="uncover"].in .ph img { animation: settle 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s) backwards; }
  .motion [data-reveal="uncover"].in figcaption { animation: rise 0.6s ease-out calc(var(--d, 0s) + 0.6s) backwards; }
}

@keyframes logo-in { from { opacity: 0; transform: translateY(28px) scale(0.97); } }
@keyframes dig {
  0%, 34%, 100% { transform: rotate(0deg); }
  8%, 14% { transform: rotate(-7deg); }
  23%, 27% { transform: rotate(3deg); }
}
@keyframes tape { to { background-position: 28px 0; } }
@keyframes nudge { 0%, 55%, 100% { transform: none; } 25% { transform: translateY(8px); } }
@keyframes underline-in { from { transform: scaleX(0); } }
@keyframes drift { to { transform: translateY(30%); opacity: 0.2; } }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }
@keyframes from-left { from { opacity: 0; transform: translateX(-64px); } }
@keyframes from-right { from { opacity: 0; transform: translateX(64px); } }
@keyframes stamp {
  0% { opacity: 0; transform: scale(1.45) rotate(-9deg); }
  55% { opacity: 1; transform: scale(0.95) rotate(1.5deg); }
  100% { transform: none; }
}
@keyframes uncover { from { clip-path: inset(100% 0 0 0); } }
@keyframes settle { from { transform: scale(1.18); } }