/* ── GEODECA design system ─────────────────────────────── */
:root {
  --ink: #17211C;
  --ink-2: #26332C;
  --paper: #F5F1E6;
  --paper-2: #ECE6D4;
  --sage: #A3C2B3;
  /* Accent metals, sampled from the GEODECA brush ring itself
     (reference/client-brief-20260905 + img/geodeca-logo.png, 2026-09-21):
       highlight #CB8F4F  → --gold      (default accent, per the 9/17 notes:
                                         "never orange, default to gold")
       midtone   #B7682B  → --copper
       shadow    #A15027  → --bronze    (secondary accent, hover/pressed)
     --metal is the three of them as a sheen, for surfaces that should read as
     brushed metal rather than a flat swatch. */
  --gold: #CB8F4F;
  --gold-soft: #DEAE73;
  --copper: #B7682B;
  --bronze: #A15027;
  --bronze-deep: #7E3E1E;
  --metal: linear-gradient(135deg, #DEAE73 0%, #CB8F4F 38%, #B7682B 72%, #A15027 100%);
  /* Leica instrument green (the total-station housing colour), used for the
     small live accents: nav underline, the coordinate blip, active states. */
  --leica: #4B6B3A;
  --leica-deep: #2F4A2A;
  --leica-light: #8FBF6A;
  /* legacy names still referenced by older rules — both now resolve to the
     metals so nothing on the site renders the retired flat orange */
  --orange: var(--gold);
  --orange-deep: var(--bronze);
  --line: rgba(23, 33, 28, .14);
  --muted: rgba(23, 33, 28, .55);
  --faint: rgba(23, 33, 28, .3);
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "Archivo", system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.mono { font-family: var(--mono); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

h1, h2 {
  font-weight: 550;
  font-stretch: 100%;
  line-height: 1.1;
  letter-spacing: -.018em;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); margin-bottom: 16px; }
h1 em, h2 em { font-style: normal; color: inherit; }
h3 { font-weight: 600; font-size: 1.18rem; letter-spacing: -.01em; }

/* reveal on scroll — only hides content once JS confirms it will un-hide it,
   so a blocked/broken script never leaves the page permanently blank */
.js-ready .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .ticker-track { animation: none !important; }
  .slide { transition: none !important; }
}

/* ── nav ─────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  padding: 14px 28px;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(12px);
  color: var(--paper);
  border-bottom: 1px solid rgba(245,241,230,.12);
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-stretch: 100%; font-size: 1.22rem; letter-spacing: .04em; }
/* their swish with its G bar, then their own logo lettering (no stand-in font) */
.nav-brand .mark { width: 34px; height: 29px; object-fit: contain; }
.nav-brand .wm-img { height: 18px; width: auto; display: block; }
.nav-brand small { align-self: flex-end; margin-bottom: 1px; }
.nav-brand small { font-family: var(--mono); font-weight: 400; font-size: .68rem; opacity: .7; letter-spacing: .06em; }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a {
  text-decoration: none; font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  opacity: .82; padding: 4px 0; border-bottom: 2px solid transparent; transition: .2s;
}
.nav-links a:hover, .nav-links a.active { opacity: 1; border-color: var(--leica-light, #8FBF6A); }
.nav-cta {
  font-family: var(--mono); font-weight: 500; font-size: .85rem; text-decoration: none;
  border: 1px solid rgba(245,241,230,.4); color: var(--paper); padding: 8px 16px; border-radius: 4px; transition: .2s;
}
.nav-cta:hover { background: var(--paper); color: var(--ink); }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-burger span { display: block; width: 24px; height: 2px; background: var(--paper); margin: 5px 0; }

/* ── hero ────────────────────────────────────────────── */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; color: var(--paper); overflow: hidden; isolation: isolate; }
.slides { position: absolute; inset: 0; z-index: -3; background: #0f1612; overflow: hidden; }

/* One long pre-blended panorama (img/hero-strip.webp, 5760x1080: four aerials
   cross-faded edge to edge, including the wrap seam) pans right to left. A single
   element carries the photo tiled with repeat-x and translates by exactly one
   tile width, so the pan never runs out. Sizing the tile in vh keeps it locked to
   the image's own 16:3 aspect at any viewport height. The survey web (.strip-web,
   inline SVG from build.py) lives INSIDE the same element, so the parcel lines
   move with the land they sit on; it is stamped three tiles wide and shifted one
   tile left so lines that cross the wrap point continue on the other side. */
.strip {
  --tile: 533.34vh;                   /* 5760/1080 = 5.3334 viewport heights */
  position: absolute; top: 0; bottom: 0; left: 0;
  width: calc(100% + var(--tile));
  background: url("/img/hero-strip.jpg") left center / auto 100% repeat-x;
  background-image: image-set(url("/img/hero-strip.webp") type("image/webp"), url("/img/hero-strip.jpg") type("image/jpeg"));
  animation: heroPan 140s linear infinite;
  will-change: transform;
}
/* The web sits ABOVE the scrim so its lines stay crisp; it rides a second
   .strip that shares the photo's tile width and animation, so both start on the
   same frame and pan in lock step. */
.hero-web { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.strip-lines { background: none; }
/* Black mask, darkest at the bottom and clearing toward the horizon. It sits over
   the linework too, so the survey web settles into the photo instead of glaring. */
.hero-web::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(6,8,7,.82) 0%, rgba(6,8,7,.55) 28%, rgba(6,8,7,.3) 55%, rgba(6,8,7,.08) 80%, rgba(6,8,7,0) 100%);
}
/* lift the copy off the wallpaper */
.hero-inner { text-shadow: 0 2px 4px rgba(0,0,0,.55), 0 6px 24px rgba(0,0,0,.55); }
.hero-wordmark .lockup-img { filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)) drop-shadow(0 12px 30px rgba(0,0,0,.45)); }
.hero-contours { position: absolute; inset: 0; width: 100%; height: 100%; }
.strip-web {
  position: absolute; top: 0; height: 100%;
  left: calc(var(--tile) * -1); width: calc(var(--tile) * 3);
  overflow: visible;
}
.strip-web .nd  { fill: #1c2a22; stroke: rgba(245,241,230,.7); stroke-width: 1.1px; vector-effect: non-scaling-stroke; }
@keyframes heroPan { to { transform: translateX(calc(var(--tile) * -1)); } }

@media (prefers-reduced-motion: reduce) { .strip { animation: none; } }
.hero-scrim { position: absolute; inset: 0; z-index: -2; background: linear-gradient(100deg, rgba(15,22,18,.78) 22%, rgba(15,22,18,.45) 58%, rgba(15,22,18,.25)), linear-gradient(180deg, rgba(15,22,18,.1) 0%, rgba(15,22,18,0) 55%, rgba(15,22,18,.6) 100%); }
.hero-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 140px 28px 120px; width: 100%; }
.kicker { font-size: .8rem; letter-spacing: .14em; color: var(--sage); margin-bottom: 22px; display: flex; align-items: center; gap: 10px; }
.blip { width: 8px; height: 8px; border-radius: 50%; background: #8FBF6A; box-shadow: 0 0 0 0 rgba(143,191,106,.5); animation: blip 2.6s infinite; }
@keyframes blip { 70% { box-shadow: 0 0 0 11px rgba(163,194,179,0); } 100% { box-shadow: 0 0 0 0 rgba(163,194,179,0); } }
.hero-sub { max-width: 560px; margin: 26px 0 34px; font-size: 1.12rem; color: rgba(245,241,230,.88); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 500; letter-spacing: .01em;
  padding: 14px 28px; border-radius: 4px; font-size: .98rem; transition: transform .18s, box-shadow .18s, background .18s;
  border: 0; cursor: pointer; font-family: var(--sans);
}
/* the primary button is brushed metal, not a flat swatch: gold highlight
   rolling to bronze, with a thin bronze keyline so it holds its edge on cream */
.btn-orange {
  background: var(--metal); color: #FBF7EC; border: 1px solid var(--bronze);
  text-shadow: 0 1px 1px rgba(60,30,10,.35); box-shadow: 0 6px 18px rgba(23,33,28,.16), inset 0 1px 0 rgba(255,240,220,.35);
}
.btn-orange:hover { filter: brightness(1.06) saturate(1.05); transform: translateY(-2px); }
.btn-ghost { border: 1.5px solid rgba(245,241,230,.5); color: var(--paper); }
.btn-ghost:hover { border-color: var(--paper); transform: translateY(-2px); }
.hero-stats { display: flex; gap: 44px; margin-top: 58px; flex-wrap: wrap; }
.hero-stats div { display: flex; align-items: center; gap: 12px; }
.hero-stats strong { font-size: 2.2rem; font-weight: 500; font-stretch: 100%; color: var(--paper); line-height: 1; }
.hero-stats span { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(245,241,230,.75); line-height: 1.5; }
.slide-meta { position: absolute; z-index: 2; right: 28px; bottom: 46px; display: flex; align-items: center; gap: 16px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(245,241,230,.6); }
.slide-meta .cap { color: rgba(245,241,230,.85); }
@media (max-width: 720px) { .slide-meta .cap { display: none; } }
.hero-ticker {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  background: rgba(15,22,18,.72); backdrop-filter: blur(6px); border-top: 1px solid rgba(245,241,230,.14);
  color: rgba(245,241,230,.7); overflow: hidden; font-size: .72rem; font-weight: 400; letter-spacing: .12em; padding: 10px 0;
}
.ticker-track { display: flex; white-space: nowrap; animation: tick 38s linear infinite; width: max-content; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ── sections ────────────────────────────────────────── */
.section { padding: 110px 0; }
/* GEODECA's own plat drawing, lifted from their original header art, sits
   behind the light sections at low contrast so it reads as paper, not wallpaper */
.section-paper {
  position: relative;
  background:
    linear-gradient(rgba(245,241,230,.88), rgba(236,230,212,.92)),
    url("/img/plat.jpg") center top / 1400px auto repeat;
}
/* the mark, very faint and oversized, sits behind the paper sections as a
   watermark — the way it would be embossed on a printed plat sheet */
.section-paper::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: url("/img/ring-mark.png") right -80px top 50% / auto 78% no-repeat;
  opacity: .05;
}
.section-paper > * { position: relative; z-index: 1; }
.section-dark {
  background:
    linear-gradient(rgba(20,28,23,.93), rgba(20,28,23,.965)),
    url("/img/okmap_web.jpg") center / cover;
  color: var(--paper); position: relative; overflow: hidden;
}
.section-dark .wrap { position: relative; z-index: 2; }
.dark-topo { position: absolute; inset: 0; width: 100%; height: 100%; }
.station { font-size: .72rem; letter-spacing: .18em; color: var(--muted); margin-bottom: 14px; }
.section-dark .station { color: rgba(163,194,179,.8); }
.lede { max-width: 620px; font-size: 1.15rem; color: color-mix(in srgb, currentColor 78%, transparent); margin-bottom: 54px; }

/* ── services ────────────────────────────────────────── */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 22px; }
.svc {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 30px 26px 24px; transition: transform .22s, box-shadow .22s;
}
.svc::before, .svc::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--faint);
  transition: .22s; opacity: 0;
}
.svc::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.svc::after { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }
.svc:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(23,33,28,.12); }
.svc:hover::before, .svc:hover::after { opacity: 1; }
.svc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.svc-head svg { width: 44px; height: 44px; color: var(--ink); flex: 0 0 auto; }
.svc ul { list-style: none; }
.svc li { padding: 7px 0 7px 22px; position: relative; border-bottom: 1px dashed var(--line); font-size: .96rem; }
.svc li:last-child { border-bottom: 0; }
.svc li::before { content: "·"; position: absolute; left: 6px; color: var(--faint); font-size: 1.1rem; line-height: 1.35; }
.svc-note { margin-top: 16px; font-size: .88rem; color: var(--muted); }

/* ── company ─────────────────────────────────────────── */
.company-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: start; }
.company-copy p { margin-bottom: 18px; color: rgba(245,241,230,.85); max-width: 540px; }
.mission { border-left: 2px solid rgba(163,194,179,.55); padding: 14px 0 14px 22px; margin-top: 30px; font-size: 1.05rem; color: var(--paper); }
.mission span { display: block; margin-top: 8px; font-size: .74rem; color: var(--sage); letter-spacing: .08em; }
.polaroid { background: var(--paper); padding: 12px 12px 10px; border-radius: 4px; transform: rotate(1.6deg); box-shadow: 0 22px 50px rgba(0,0,0,.4); }
.polaroid img { border-radius: 2px; aspect-ratio: 4/3; object-fit: cover; }
.polaroid figcaption { color: var(--ink); font-size: .68rem; letter-spacing: .14em; padding-top: 9px; text-align: center; }
.affils { margin-top: 36px; display: flex; flex-direction: column; gap: 10px; }
.affils-label { font-size: .7rem; letter-spacing: .16em; color: var(--sage); margin-bottom: 4px; }
.affils a {
  font-size: .88rem; text-decoration: none; padding: 11px 16px; border: 1px solid rgba(245,241,230,.22);
  border-radius: 5px; transition: .2s; color: rgba(245,241,230,.85);
}
.affils a:hover { border-color: rgba(163,194,179,.6); color: var(--paper); transform: translateX(4px); }

/* ── team ────────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 24px; }
.badge-card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  transition: transform .22s, box-shadow .22s; display: flex; flex-direction: column;
}
.badge-card:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 20px 44px rgba(23,33,28,.14); }
.badge-top {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--ink); color: var(--sage); font-size: .68rem; letter-spacing: .14em; padding: 10px 18px;
}
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.badge-body { display: flex; gap: 18px; padding: 24px 22px 6px; }
.badge-body img {
  width: 108px; height: 148px; object-fit: cover; border-radius: 4px;
  border: 3px solid var(--paper-2); outline: 1px solid var(--line); flex: 0 0 auto;
  filter: saturate(.92); background: var(--paper-2);
}
.crew-icon { width: 108px; height: 148px; flex: 0 0 auto; display: grid; place-items: center; background: var(--paper-2); border-radius: 4px; }
.crew-icon svg { width: 60px; height: 60px; color: var(--ink); }
.role { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 4px 0 14px; }
.spec div { margin-bottom: 9px; }
.spec dt { font-size: .62rem; letter-spacing: .12em; color: rgba(23,33,28,.5); }
.spec dd { font-size: .8rem; font-weight: 500; }
.badge-bio { padding: 16px 22px 26px; font-size: .95rem; color: rgba(23,33,28,.82); }

/* ── projects ────────────────────────────────────────── */
.proj-list { display: flex; flex-direction: column; }
.proj {
  display: grid; grid-template-columns: 70px 1fr auto; gap: 24px; align-items: center;
  padding: 26px 10px; border-bottom: 1px dashed rgba(23,33,28,.25); transition: background .2s, padding .2s;
}
.proj:first-child { border-top: 1px dashed rgba(23,33,28,.25); }
.proj:hover { background: rgba(23,33,28,.04); padding-left: 20px; }
.proj-no { font-size: 1.4rem; font-weight: 500; color: var(--faint); }
.proj h3 { margin-bottom: 4px; }
.proj p { font-size: .95rem; color: rgba(23,33,28,.75); max-width: 620px; }
.proj-tag { font-size: .66rem; letter-spacing: .12em; color: rgba(23,33,28,.55); text-align: right; }

/* ── fan mail ────────────────────────────────────────── */
.mail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 50px; }
.letter {
  position: relative; background: var(--paper); color: var(--ink); border-radius: 6px;
  padding: 40px 34px 30px; box-shadow: 0 24px 50px rgba(0,0,0,.35); transition: transform .22s;
}
.letter:nth-child(1) { transform: rotate(-.7deg); }
.letter:nth-child(2) { transform: rotate(.7deg); }
.letter:hover { transform: rotate(0) translateY(-6px); }
.letter blockquote { font-size: 1.06rem; line-height: 1.65; }
.letter mark { background: transparent; box-shadow: inset 0 -.55em 0 rgba(163,194,179,.4); padding: 0 2px; }
.letter figcaption { margin-top: 22px; font-size: .7rem; letter-spacing: .1em; color: rgba(23,33,28,.65); line-height: 1.7; }
.stamp { position: absolute; top: 16px; right: 16px; width: 52px; height: 52px; color: rgba(23,33,28,.4); transform: rotate(8deg); }
.mail-ps { margin-top: 38px; font-size: .8rem; letter-spacing: .08em; color: var(--sage); }

/* ── contact ─────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; align-items: stretch; }
.map-frame { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); min-height: 460px; box-shadow: 0 18px 40px rgba(23,33,28,.12); }
.map-frame iframe { width: 100%; height: 100%; min-height: 460px; border: 0; display: block; }
.map-pin {
  position: absolute; left: 14px; bottom: 14px; background: var(--ink); color: var(--paper);
  font-size: .72rem; letter-spacing: .1em; padding: 8px 14px; border-radius: 4px;
}
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 34px 32px; display: flex; flex-direction: column; gap: 8px; }
.contact-rows div { display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); align-items: baseline; }
.contact-rows dt { font-size: .68rem; letter-spacing: .14em; color: var(--muted); }
.contact-rows dd { font-size: .98rem; }
.contact-rows a { text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--faint); transition: .2s; }
.contact-rows a:hover { border-color: var(--ink); }
.quick-form { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.quick-form label { font-size: .66rem; letter-spacing: .14em; color: rgba(23,33,28,.6); margin-top: 8px; }
.quick-form input, .quick-form textarea {
  font-family: var(--sans); font-size: .95rem; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 5px; background: var(--paper); transition: border .2s; resize: vertical; width: 100%;
}
.quick-form input:focus, .quick-form textarea:focus { outline: none; border-color: var(--ink); }
.quick-form input:user-invalid, .quick-form textarea:user-invalid { border-color: #c0392b; }
.quick-form .btn { margin-top: 14px; }
.quick-form .btn:disabled { opacity: .65; cursor: default; transform: none; }
.qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qf-field { display: flex; flex-direction: column; }
.hp-field { position: absolute; left: -9999px; height: 0; width: 0; border: 0; padding: 0; }
.form-note { font-size: .66rem; letter-spacing: .06em; color: rgba(23,33,28,.55); text-align: center; }
.form-ok {
  display: none; align-items: flex-start; gap: 10px; margin-top: 4px;
  background: rgba(163,194,179,.16); border: 1px solid rgba(163,194,179,.55); border-radius: 5px;
  padding: 12px 14px; font-size: .85rem; color: var(--ink);
}
.form-ok.show { display: flex; }
.form-ok.is-error { background: rgba(192,57,43,.08); border-color: rgba(192,57,43,.4); }
.form-ok svg { flex: none; color: var(--orange-deep); margin-top: 2px; }
.form-ok.is-error svg { color: #c0392b; }
@media (max-width: 480px) { .qf-row { grid-template-columns: 1fr; } }

/* ── footer ──────────────────────────────────────────── */
.footer { background: var(--ink); color: var(--paper); padding: 44px 0; border-top: 1px solid rgba(245,241,230,.14); }
.footer-grid { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-nav { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.footer-nav a { text-decoration: none; color: rgba(245,241,230,.62); transition: .2s; }
.footer-nav a:hover { color: var(--paper); }
.footer-brand { font-weight: 600; font-stretch: 100%; font-size: 1.15rem; letter-spacing: .04em; display: flex; align-items: center; gap: 10px; }
.footer-mark { width: 30px; height: 26px; object-fit: contain; flex: none; }
.footer-brand .wm-img { height: 16px; width: auto; display: block; }
.footer-brand span { font-family: var(--mono); font-weight: 400; font-size: .68rem; opacity: .7; margin-left: 8px; letter-spacing: .08em; }
.footer-fine { font-size: .68rem; letter-spacing: .1em; color: var(--sage); margin-top: 6px; }
.footer-joke { font-size: .7rem; letter-spacing: .06em; color: rgba(245,241,230,.5); }
.footer-copy { font-size: .7rem; letter-spacing: .08em; color: rgba(245,241,230,.6); }

/* ── logo intro ───────────────────────────────────────
   Sequence lives in intro.js (timeline at the top of that file). CSS owns the
   field, the brush paint-in and the lettering fade; the cage is drawn per frame. */
@property --sw { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* hidden until JS confirms it can also take it away again: a broken script
   must never leave the site sitting behind a permanent cover */
.intro { display: none; }
.intro.ready {
  position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; align-content: center;
  gap: 0; cursor: pointer;
  background:
    radial-gradient(120% 90% at 50% 42%, #EFE6D2 0%, #DCCFB2 46%, #C3B291 78%, #A99878 100%);
  transition: opacity .7s ease, visibility .7s;
}
.intro::after {                                   /* grain, so the field is not flat */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
.intro.done { opacity: 0; visibility: hidden; transition: opacity .9s cubic-bezier(.4,0,.2,1), visibility .9s; }
.intro .gl-lockup { transition: transform .9s cubic-bezier(.4,0,.2,1); }
.intro.done .gl-lockup { transform: scale(1.04); }
.gl-sphere, .gl-swoosh { will-change: transform; }

/* The stage is the full lockup as the client's home-page mockup lays it out:
   the mark (540x462) at the left, the lettering running out past it to the
   right. Measured on WEBSITE HOME PAGE 1+00 .png as fractions of the swish
   bounding box: GEODECA left 25.1% / top 48.1% / width 140.3%, LAND SURVEYING
   COMPANY left 25.6% / top 73.8% / width 139.3%. The whole lockup is 1.654 x
   the mark's width, so the mark takes 60.46% of the stage and the stage keeps
   the lockup centred on screen at every viewport. */
.gl-lockup { position: relative; width: min(84vw, 662px); aspect-ratio: 1.933; }
.gl { position: absolute; left: 0; top: 0; width: 60.46%; aspect-ratio: 540 / 462; }

/* ── the brush mark ──
   The crisp mark is the client's file, untouched. It sits under a cover in the
   colour of the field (a conic mask, which is the same thing drawn cheaper)
   and a beacon sweeping counter-clockwise from just below due east (so the
   head of the G, its crossbar, paints first) removes the cover, ending on the tail. Conic gradients only
   run clockwise, so the visible wedge is the END of the gradient, growing
   backwards from 360deg as --sw rises. The
   edge of the beacon is a short soft band: a hard stop makes the browser
   rasterise the mask in coarse steps, which reads as the mark arriving in
   quarters. */
.gl-swoosh { position: absolute; inset: 0; }
.gl-swoosh img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gl-swoosh {
  -webkit-mask-image: conic-gradient(from 120deg at 47% 50%, transparent 0deg, transparent calc(360deg - var(--sw)), rgba(0,0,0,.35) calc(366deg - var(--sw)), #000 calc(376deg - var(--sw)), #000 360deg);
  mask-image: conic-gradient(from 120deg at 47% 50%, transparent 0deg, transparent calc(360deg - var(--sw)), rgba(0,0,0,.35) calc(366deg - var(--sw)), #000 calc(376deg - var(--sw)), #000 360deg);
  /* maskOff runs the angle past 360deg once the paint-on finishes, otherwise the
     soft trailing edge leaves a permanently faded wedge at the start angle */
}
/* every CSS part of the intro waits for .run, which intro.js adds on the first
   painted frame, so the brush, globe and lettering share one clock */
.intro.run .gl-swoosh {
  animation: reveal 2s cubic-bezier(.42,.05,.3,1) .3s forwards,
             maskOff .01s linear 2.4s forwards;
}
.no-houdini .gl-swoosh { -webkit-mask-image: none; mask-image: none; opacity: 0; }
.no-houdini .intro.run .gl-swoosh { animation: introFadeSoft 1.2s ease .3s forwards; }

/* ── the globe ──
   Real 3D latitude/longitude geometry projected per frame in intro.js
   (10 deg parallels, 12 deg meridians, pole leaned toward the viewer, as in
   the client's Globe+Logo art). The finished globe is the oval the client's
   home-page mockup draws around the G: measured on
   reference/client-brief-20260905/WEBSITE HOME PAGE 1+00 .png, the globe
   ellipse is 1.066 x the swish bounding-box width, 1.06 x its height, centred
   at 53.1% / 48.6% of that box. The box here is the mark file itself, so
   those fractions transfer directly, and the round SVG is stretched to the
   box (preserveAspectRatio none) to give the 1.16 wide-to-tall oval. Lines
   sit over the brush, as they cross the copper in the art. */
/* the sphere is R100 in a 208 viewBox (0.9615 of the box), so the box is the
   target ellipse divided by that: 1.066 / 0.9615 and 1.06 / 0.9615 */
.gl-sphere { position: absolute; left: -2.35%; top: -6.5%; width: 103.5%; height: 110.2%; }
.gl-wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gl-cage { transform-origin: 0 0; }
.gl-burst .gl-ln { stroke-opacity: .7; }
.gl-ln, .gl-limb {
  fill: none; stroke: #1E2620; stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round;
}
.gl-ln { stroke-opacity: .82; }
.gl-limb { stroke-width: 1.4; }

/* the lettering: the client's own artwork, never type set to match.
   logo-name-dark.png is logo-name-light.png with the cream flipped to ink;
   logo-subline-dark.png is rows 340-372 of geodeca-logo.png, its own kerning.
   GEODECA slides in from the right edge of the screen once the spin settles,
   LAND SURVEYING COMPANY follows the same way a beat later. */
.gl-name, .gl-sub { position: absolute; display: block; height: auto; opacity: 0; transform: translateX(56px); will-change: transform, opacity; }
.gl-name { left: 25.1%; top: 48.1%; width: 140.3%; }
.gl-sub  { left: 25.6%; top: 73.8%; width: 139.3%; }
/* a short glide with a long soft landing reads smoother than a whip across the
   whole screen, which the eye tracks in visible steps */
.intro.run .gl-name { animation: letterIn 1.1s cubic-bezier(.16,1,.3,1) 6.0s forwards; }
.intro.run .gl-sub  { animation: letterIn 1.1s cubic-bezier(.16,1,.3,1) 6.3s forwards; }

@keyframes letterIn { to { opacity: 1; transform: translateX(0); } }
@keyframes reveal { to { --sw: 360deg; } }
@keyframes maskOff { to { --sw: 420deg; } }
@keyframes introFadeSoft { from { opacity: 0; } to { opacity: 1; } }

/* the page itself fades up as the intro lifts, rather than being revealed
   fully formed underneath it. Applied by JS only, so no-JS is unaffected. */
.intro-active .nav, .intro-active .hero, .intro-active .section, .intro-active .footer { opacity: 0; }
/* keep the panning photo and the survey web from rendering behind the cover;
   they are the heaviest things on the page and competed with the globe */
.intro-active .slides, .intro-active .hero-web { visibility: hidden; }
.intro-active .strip { animation-play-state: paused; }
.nav, .hero, .section, .footer { transition: opacity .9s ease; }

@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ── subpage header ──────────────────────────────────── */
.page-head { padding: 150px 0 54px; border-bottom: 1px solid var(--line); }
.page-head h1 { max-width: 16ch; }
.page-head .lede { margin: 18px 0 0; }
.crumb { font-size: .72rem; letter-spacing: .16em; color: var(--muted); margin-bottom: 14px; }
.crumb a { text-decoration: none; border-bottom: 1px solid var(--faint); }
.crumb a:hover { border-color: var(--ink); }

/* ── home summaries ──────────────────────────────────── */
.sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sum {
  background: var(--paper); padding: 34px 30px 30px; display: flex; flex-direction: column;
  text-decoration: none; transition: background .2s;
}
.sum:hover { background: #fff; }
.sum h3 { margin-bottom: 10px; }
.sum p { font-size: .96rem; color: var(--muted); margin-bottom: 20px; }
.sum-go { margin-top: auto; font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.sum-go::after { content: "→"; transition: transform .2s; }
.sum:hover .sum-go::after { transform: translateX(4px); }
.sum-n { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; color: var(--faint); margin-bottom: 12px; }

/* ── pager ───────────────────────────────────────────── */
.pager { border-top: 1px solid var(--line); margin-top: 70px; padding-top: 26px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pager a { text-decoration: none; display: flex; flex-direction: column; gap: 4px; max-width: 46%; }
.pager .lbl { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; color: var(--muted); }
.pager .ttl { font-size: 1.1rem; font-weight: 550; }
.pager a:hover .ttl { text-decoration: underline; text-underline-offset: 4px; }
.pager .next { text-align: right; margin-left: auto; align-items: flex-end; }

/* ── person profile ──────────────────────────────────── */
.profile { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }
.profile-photo { border-radius: 6px; border: 1px solid var(--line); background: var(--paper-2); width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.profile-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 22px 22px 20px; margin-top: 18px; }
.profile-card dl div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); align-items: baseline; }
.profile-card dl div:last-child { border-bottom: 0; }
.profile-card dt { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; color: var(--muted); }
.profile-card dd { font-size: .92rem; }
.profile-card dd a { text-decoration: none; border-bottom: 1px solid var(--faint); }
.profile-card dd a:hover { border-color: var(--ink); }
.cred { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; list-style: none; }
.cred li { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; border: 1px solid var(--line); border-radius: 3px; padding: 6px 11px; color: var(--muted); }
.profile-body p { margin-bottom: 16px; max-width: 62ch; }
.profile-body h2 { margin-top: 38px; }
.does { list-style: none; columns: 2; column-gap: 34px; max-width: 62ch; }
.does li { padding: 7px 0 7px 18px; position: relative; font-size: .95rem; break-inside: avoid; border-bottom: 1px dashed var(--line); }
.does li::before { content: "·"; position: absolute; left: 4px; color: var(--faint); font-size: 1.1rem; line-height: 1.3; }

/* ── project record ──────────────────────────────────── */
.client { margin-bottom: 44px; }
.client h3 { padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.client-meta { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; color: var(--muted); margin-bottom: 12px; }
.client ul { list-style: none; }
.client li { padding: 10px 0 10px 20px; position: relative; border-bottom: 1px dashed var(--line); font-size: .96rem; }
.client li:last-child { border-bottom: 0; }
.client li::before { content: "·"; position: absolute; left: 5px; color: var(--faint); font-size: 1.1rem; line-height: 1.4; }
.client li b { font-weight: 600; }
.client li span { color: var(--muted); }

/* ── responsive ──────────────────────────────────────── */
@media (max-width: 980px) {
  .company-grid, .mail-grid, .contact-grid, .profile { grid-template-columns: 1fr; }
  .profile-photo { max-width: 300px; }
  .does { columns: 1; }
  .page-head { padding: 128px 0 44px; }
  .company-side { max-width: 460px; }
  .proj { grid-template-columns: 48px 1fr; }
  .proj-tag { grid-column: 2; text-align: left; }
}
@media (max-width: 820px) {
  .nav-links {
    position: fixed; top: 62px; right: 0; left: 0; flex-direction: column; gap: 0;
    background: var(--ink); border-bottom: 1px solid rgba(245,241,230,.12);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav-links.open { max-height: 360px; }
  .nav-links a { padding: 15px 28px; border-bottom: 1px solid rgba(245,241,230,.08); }
  .nav-burger { display: block; margin-left: auto; }
  .nav-cta { display: none; }
  .nav-brand small { display: none; }
  .section { padding: 80px 0; }
  .hero-inner { padding: 120px 28px 110px; }
  .hero-stats { gap: 26px; }
}

/* ── hero: wordmark, tagline, definition accordions ───────────────────────
   Client brief 2026-09-05. The three phrases open one compact panel in
   place; they never navigate or scroll. The panel is inside normal flow so
   opening it pushes the credentials down instead of overlapping them. */
.hero-wordmark { margin: 0; line-height: 0; }
.hero-wordmark .lockup-img { width: clamp(280px, 38vw, 520px); height: auto; display: block; }
.hero-tagline {
  margin-top: 16px; font-size: clamp(1.02rem, 2.1vw, 1.42rem);
  color: #F2EDE0; max-width: 46ch;
}

.hero-defs { margin-top: 26px; max-width: 760px; }
.def-links { display: flex; flex-wrap: wrap; gap: 30px; }
.def-link {
  appearance: none; background: none; border: 0; padding: 2px 0 5px;
  font-family: var(--sans); font-size: 1.02rem; color: #F2EDE0; cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 60%, transparent);
  transition: border-color .18s ease, color .18s ease;
}
.def-link:hover, .def-link:focus-visible { border-bottom-color: var(--gold-soft); color: #fff; }
.def-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.def-link[aria-expanded="true"] { border-bottom-color: var(--gold-soft); border-bottom-width: 2px; }

.def-panel {
  position: relative; margin-top: 18px; padding: 20px 46px 20px 22px; border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 74%, transparent);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border-left: 2px solid var(--orange); color: #EFEADC; max-width: 620px;
}
.def-panel[hidden] { display: none; }
.def-head { font-size: 1.16rem; font-weight: 600; letter-spacing: .01em; margin-bottom: 7px; color: #F6F2E6; }
.def-head .gold { color: var(--gold); }
.def-panel p { font-size: .97rem; line-height: 1.62; }
.def-close {
  position: absolute; top: 12px; right: 13px; width: 26px; height: 26px;
  appearance: none; background: none; border: 0; cursor: pointer;
  color: color-mix(in srgb, #EFEADC 72%, transparent); font-size: 1.28rem; line-height: 1;
}
.def-close:hover { color: #fff; }
.def-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 3px; }

.hero-creds {
  margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-family: var(--mono); font-size: .69rem; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(242,237,224,.62);
}

@media (max-width: 640px) {
  .def-links { flex-direction: column; gap: 14px; align-items: flex-start; }
  .def-panel { padding-right: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .def-link { transition: none; }
}

/* ── leadership cards (client brief 2026-09-05) ───────────────────────────
   Three equal editorial cards, not field badges. Portraits are manual
   galleries: click the photo, the dots, or use the arrow keys. Never
   auto-rotates, per the brief. Card and photo boxes are fixed so swapping
   an image cannot shift the page. */
.lead-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 8px;
}
.lead-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  padding: 18px 18px 22px; display: flex; flex-direction: column;
}
.lead-figure {
  position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--line); cursor: pointer;
}
.lead-figure:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.lead-figure img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .35s ease;
}
.lead-figure img.on { opacity: 1; }
.lead-expand {
  position: absolute; right: 9px; bottom: 9px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 62%, transparent); color: var(--paper);
  pointer-events: none;
}
.lead-expand svg { width: 13px; height: 13px; }
.lead-dots { display: flex; gap: 7px; justify-content: center; margin-top: 12px; }
.lead-dot {
  width: 7px; height: 7px; border-radius: 50%; padding: 0; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--ink) 26%, transparent);
}
.lead-dot.on { background: var(--metal); box-shadow: 0 0 0 1px var(--bronze); }
.lead-dot:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.lead-name { margin-top: 15px; font-size: 1.1rem; font-weight: 600; }
.lead-role {
  font-family: var(--mono); font-size: .71rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-top: 4px;
}
.lead-email {
  margin-top: 14px; font-family: var(--mono); font-size: .74rem; letter-spacing: .1em;
  text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; gap: 7px;
  border-bottom: 1px solid var(--line); padding-bottom: 3px; align-self: flex-start;
}
.lead-email:hover { border-bottom-color: var(--gold); color: var(--bronze); }

@media (max-width: 900px) { .lead-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .lead-figure img { transition: none; } }

/* ── company: licensing vs affiliations, rotating photo frame ─────────── */
.cred-group + .cred-group { margin-top: 20px; }
.cred-label {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 9px;
}
.cred-rows { display: flex; flex-direction: column; }
.cred-rows a, .cred-rows span {
  padding: 9px 0; border-top: 1px solid var(--line); font-size: .92rem;
  text-decoration: none; color: inherit;
}
.cred-rows a:hover { color: var(--orange-deep); }
.cred-rows :last-child { border-bottom: 1px solid var(--line); }

.polaroid { position: relative; }
.polaroid .frame-stack { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.polaroid .frame-stack img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.1s ease;
}
.polaroid .frame-stack img.on { opacity: 1; }
.frame-ctrl {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 28px; height: 28px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--paper);
  border: 0; border-radius: 50%; cursor: pointer; opacity: 0; transition: opacity .2s;
}
.polaroid:hover .frame-ctrl, .frame-ctrl:focus-visible { opacity: 1; }
.frame-prev { left: 8px; } .frame-next { right: 8px; }
@media (prefers-reduced-motion: reduce) { .polaroid .frame-stack img { transition: none; } }

/* Placeholder for a leader whose portrait the client has not supplied yet.
   Occupies the exact figure box so the card is the right size now and the
   layout does not move when the real photograph lands. */
.lead-placeholder {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-size: .64rem; letter-spacing: .16em; line-height: 1.8;
  color: var(--faint); background: var(--paper-2);
}
.lead-figure:not([data-gallery]) { cursor: default; }

/* ── links (STA 06+00) and client portal (STA 07+00) ──────────────────── */
.svc-expand { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; color: var(--muted); margin-top: 2px; }
.link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 44px 56px; }
.link-group h3 { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--gold); display: inline-block; }
.link-group .cred-rows a { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; }
.link-group .cred-rows a:last-child { border-bottom: 1px solid var(--line); }
.link-name { font-weight: 600; }
.link-name::after { content: " ↗"; font-family: var(--mono); font-size: .72rem; color: var(--gold); }
.link-desc { font-size: .88rem; color: var(--muted); }

.portal-copy p { max-width: 62ch; font-size: 1.08rem; }
.portal-copy p + p { margin-top: 24px; }
.portal-copy { margin-bottom: 56px; }
@media (min-width: 901px) and (max-width: 1100px) { .nav-links { gap: 16px; } .nav-links a { font-size: .72rem; } }

/* the company section is dark, so the shared cred/link styles (written for
   cream pages) need light-on-dark overrides here or the labels vanish */
.section-dark .cred-label { color: var(--sage); }
.section-dark .cred-rows a, .section-dark .cred-rows span { border-color: rgba(245,241,230,.16); }
.section-dark .cred-rows a:hover { color: var(--gold-soft); }
.section-dark .affils a { border-left: 0; transform: none; padding-left: 0; }
.section-dark .sum-go { color: var(--paper); }
.mission { border-left-color: var(--gold); }