/* BUILD 10 · 15 Oct 2026 (launch) — every page loads this file as ?v=10. If a page looks wrong, open this file in the browser: if this line isn't here, the server or browser is handing out an old copy. */
/* =====================================================================
   CYPRESS PATHWAYS — style.css
   ---------------------------------------------------------------------
   Organised in two halves:  ===== DESKTOP =====  then  ===== MOBILE =====
   Breakpoints: ≤640px = phones (MOBILE half). 641–1024px tablets use the
   desktop rules. Colours come only from the tokens; tints use
   color-mix() on a token. Knobs are commented after each rule.
   ===================================================================== */

/* ============ TOKENS (palette, shape, type) ============ */
:root {
  /* Core */
  --egg:#f6f7f1; --forest:#253d28; --forest-mid:#3a5c3e; --pine:#1e3120; --ink:#111411;
  --stone:#7a8a78; --light-text:#4e5e4c; --card:#ecede6; --card2:#e2e6db;
  /* Accents */
  --sky:#00a8e8;       /* Research (Due Diligence) */
  --amber:#fb8c00;     /* Sourcing (Project Sourcing) */
  --brick:#af4345;     /* Project Management */
  --goldenrod:#dbb42c; /* Stewardship (Portfolio Stewardship) — New England's autumn goldenrod */
  /* System */
  --radius:14px;   /* house shape */
  --reveal-distance:60px;  /* how far reveals travel (nested reveals travel a third of this) */
  --reveal-speed:.8s;      /* how long the on-load intro and each scroll reveal take */
  --serif:'Cormorant Garamond',serif;
  --sans:'DM Sans',sans-serif;
}


/* =====================================================================
   ===============================  DESKTOP  ===========================
   ===================================================================== */

/* ---- BASE ---- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; } /* KNOB: smooth jumps to in-page links | delete for instant jumps */
body { background:var(--egg); color:var(--ink); font-family:var(--sans); font-weight:300; line-height:1.7; overflow-x:hidden; } /* KNOB: line-height = body text leading */
img { max-width:100%; } /* no image can ever be wider than its container */

/* ---- SKIP LINK (hidden until a keyboard user presses Tab; jumps past the nav to <main id="main">) ---- */
.skip-link { position:fixed; top:12px; left:12px; z-index:300; padding:10px 16px; border-radius:calc(var(--radius) - 4px); background:var(--forest); color:var(--egg); font-size:13px; font-weight:500; letter-spacing:.06em; text-decoration:none; transform:translateY(-200%); transition:transform .2s ease; }
.skip-link:focus { transform:none; outline:2px solid var(--egg); outline-offset:2px; }
main:focus { outline:none; } /* the skip link moves focus here; no box drawn around the whole page */

/* ---- COLOUR CHAPTERS (data-chapter="forest" | "ink" on a section; opacity set by script.js) ---- */
.chapter-bg { position:fixed; top:0; left:0; right:0; height:100vh; height:100lvh; z-index:-1; opacity:0; pointer-events:none; will-change:opacity; } /* full-screen colour layer behind the page | 100lvh = as tall as the screen with the phone's address bar hidden, so no egg sliver shows while the bar slides | will-change keeps the fade on the graphics chip (no full-screen repaint per frame) */
.chapter-bg.forest { background:var(--forest); }
.chapter-bg.ink { background:var(--ink); }
body:is(.on-forest, .on-ink) .nav-links a { color:color-mix(in srgb, var(--egg) 80%, transparent); } /* KNOB: link brightness on a dark chapter */
body:is(.on-forest, .on-ink) .nav-links a:hover, body:is(.on-forest, .on-ink) .nav-links a[aria-current="page"] { color:var(--egg); }
body:is(.on-forest, .on-ink).scrolled .nav-links { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; } /* no frosted box on dark chapters */
body:is(.on-forest, .on-ink) .ham span { background:var(--egg); }
.nav-links a, .ham span { transition:color .4s ease, background .4s ease, transform .3s ease, opacity .3s ease; }

/* ---- SECTION WRAPPER ---- */
.section { max-width:1140px; margin:0 auto; padding:72px 40px; } /* KNOB: content grid | vertical rhythm / side gutters */
.section-label { font-size:11.2px; font-weight:500; letter-spacing:3.5px; text-transform:uppercase; color:var(--forest-mid); margin-bottom:11.2px; }
.section h2 { font-family:var(--serif); font-size:clamp(30.4px,3.8vw,48px); font-weight:400; line-height:1.14; color:var(--ink); margin-bottom:9.6px; } /* KNOB: heading size range */
.lede { max-width:560px; color:var(--light-text); margin-bottom:38.4px; } /* KNOB: intro line length */
.lede a { color:var(--forest-mid); }
.h1-kicker { display:block; margin-bottom:14px; font-family:var(--sans); font-size:11.2px; font-weight:500; line-height:1.4; letter-spacing:3.5px; text-transform:uppercase; color:var(--forest-mid); white-space:normal; } /* the small keyword line inside each page's h1 */

/* ---- NAV ---- */
#siteNav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px 40px; background:transparent; transition:padding .35s ease; pointer-events:none; } /* KNOB: bar height at the top | the invisible bar never blocks taps */
#siteNav > * { pointer-events:auto; } /* only the links and the hamburger catch taps */
body.scrolled #siteNav { padding:14.4px 40px; } /* KNOB: bar height once scrolled */
.nav-links { display:flex; gap:32px; list-style:none; padding:8.8px 22.4px; border-radius:var(--radius); transition:background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease; } /* KNOB: link spacing | frosted box size */
body.scrolled .nav-links { background:color-mix(in srgb, var(--egg) 50%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 6px 24px color-mix(in srgb, var(--forest) 8%, transparent); } /* KNOB: glass opacity | frost | shadow */
.nav-links a { font-size:12.8px; letter-spacing:1.6px; text-transform:uppercase; color:var(--light-text); text-decoration:none; transition:color .2s; }
.nav-links a:hover { color:var(--forest); }

/* -- Section dropdowns (built by script.js from NAV_SECTIONS) -- */
.nav-links > li { position:relative; }
.nav-sub { position:absolute; top:calc(100% + 16px); left:50%; min-width:210px; padding:8px; display:flex; flex-direction:column; background:color-mix(in srgb, var(--egg) 85%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-radius:var(--radius); box-shadow:0 12px 32px color-mix(in srgb, var(--forest) 14%, transparent); opacity:0; visibility:hidden; transform:translateX(-50%) translateY(6px); transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:120; } /* KNOB: glass opacity | gap below the link */
.nav-sub::before { content:''; position:absolute; left:0; right:0; top:-16px; height:16px; } /* invisible bridge so the panel doesn't close while the mouse crosses the gap */
.has-sub:hover .nav-sub, .has-sub:focus-within .nav-sub { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-links .nav-sub a.nav-sub-link { padding:9px 14px; border-radius:calc(var(--radius) - 6px); font-family:var(--serif); font-size:17px; letter-spacing:0; text-transform:none; white-space:nowrap; color:var(--forest); }
.nav-links .nav-sub a.nav-sub-link:hover, .nav-links .nav-sub a.nav-sub-link:focus-visible { background:color-mix(in srgb, var(--forest) 8%, transparent); color:var(--forest); outline:none; } /* KNOB: hover tint */

/* -- Hamburger (shown on phones) -- */
.ham { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; background:none; border:none; z-index:130; } /* KNOB: gap = space between bars */
.ham span { display:block; width:22px; height:2px; background:var(--forest); border-radius:2px; transition:transform .3s ease, opacity .3s ease, background .3s ease; } /* KNOB: bar size */
.ham.active span { background:var(--egg); } /* X turns egg on the forest overlay */
.ham.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); } /* 7px = bar height + gap */
.ham.active span:nth-child(2) { opacity:0; }
.ham.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* -- Mobile menu overlay: fades and settles into place, links rise in one after another -- */
.mobile-nav { position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px; background:var(--forest); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-12px); transition:opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1), visibility 0s linear .4s; } /* KNOB: overlay colour | link spacing | -12px = how far it settles | .3s/.4s = speed (opacity + movement stay smooth on phones) */
.mobile-nav.open { opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1), visibility 0s; }
.mobile-nav a { font-family:var(--serif); font-size:32px; font-weight:300; color:var(--egg); text-decoration:none; opacity:0; transform:translateY(12px); transition:opacity .2s ease, transform .25s ease; } /* KNOB: menu link size | rise distance */
.mobile-nav a[aria-current="page"] { font-style:italic; font-weight:600; } /* the current page: bold italic */
.mobile-nav.open a { opacity:1; transform:none; transition:opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.mobile-nav.open a:nth-child(1) { transition-delay:.08s; } /* KNOB: stagger = +.05s per link */
.mobile-nav.open a:nth-child(2) { transition-delay:.13s; }
.mobile-nav.open a:nth-child(3) { transition-delay:.18s; }
.mobile-nav.open a:nth-child(4) { transition-delay:.23s; }
@media (prefers-reduced-motion:reduce) {
  .mobile-nav, .mobile-nav.open, .mobile-nav a, .mobile-nav.open a { transition:none; transition-delay:0s; }
}

/* ---- LOGO TRANSITION ---- */
.brand-full { position:fixed; top:80px; left:50%; width:78vw; max-width:1100px; z-index:90; opacity:calc(1 - var(--p, 0)); transform:translateX(-50%) translateY(calc(var(--p, 0) * -30px)) scale(calc(1 - var(--p, 0) * .08)); pointer-events:none; will-change:opacity, transform; } /* KNOB: top | size | rise | shrink | will-change = the fade moves a ready-made layer instead of repainting the big logo */
.brand-full img { width:100%; height:auto; display:block; }
.brand-mark { position:fixed; top:9.6px; left:40px; width:46px; opacity:var(--p, 0); pointer-events:none; z-index:101; will-change:opacity; } /* KNOB: corner position | mark size */
.brand-mark img { width:100%; height:auto; display:block; transition:opacity .4s ease; }
.brand-mark .mark-light { position:absolute; inset:0; opacity:0; } /* the white mark, stacked on the dark one */
body:is(.on-forest, .on-ink) .brand-mark img:not(.mark-light), body:has(.mobile-nav.open) .brand-mark img:not(.mark-light) { opacity:0; }
body:is(.on-forest, .on-ink) .brand-mark .mark-light, body:has(.mobile-nav.open) .brand-mark .mark-light { opacity:1; } /* white mark on dark chapters and over the open menu */
body.scrolled .brand-mark, body:has(.mobile-nav.open) .brand-mark { pointer-events:auto; }
body:has(.mobile-nav.open) .brand-mark { opacity:1; } /* the white mark (→ home) always shows over the open menu, even at the top of Home */

/* ---- HERO ---- */
.hero { position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:300px 0 48px; } /* KNOB: where the photos start | gap below them */
.hero-inner { max-width:600px; margin-left:max(40px, calc((100vw - 1140px) / 2 + 40px)); padding-right:40px; position:relative; z-index:2; } /* KNOB: text column width */
.hero-media { position:absolute; top:300px; bottom:48px; left:25%; right:0; display:flex; flex-direction:column-reverse; z-index:1; overflow:hidden; } /* KNOB: top/bottom MUST equal .hero padding | left:25% = where the photos start */
.hero-media img { flex:1; min-height:0; width:100%; object-fit:cover; display:block; }
.hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(to right, var(--egg) 35%, transparent 100%); } /* KNOB: 35% = where the egg starts fading */
.hero-eyebrow { padding-top:50px; font-size:11.5px; letter-spacing:3.8px; text-transform:uppercase; color:var(--forest-mid); margin-bottom:20.8px; }
.hero h1 { font-family:var(--serif); font-size:clamp(41.6px,2vw,76.8px); font-weight:300; line-height:1.08; color:var(--ink); margin-bottom:24px; } /* KNOB: raise 2vw to ~4.4vw to let it scale */
.hero h1 .hero-eyebrow { display:block; font-family:var(--sans); font-weight:400; line-height:1.4; white-space:normal; }
.hero h1 em { font-style:italic; color:var(--forest); }
.hero-sub { max-width:460px; font-size:16.3px; color:var(--light-text); margin-bottom:32px; }

/* ---- HERO BUTTONS (also used by the team teaser) ---- */
.hero-ctas { display:flex; flex-wrap:wrap; gap:12px; }
.hero-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 30px; border-radius:var(--radius); font-family:var(--sans); font-size:12.8px; font-weight:500; letter-spacing:1.6px; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:background .25s, color .25s, border-color .25s, translate .25s, box-shadow .25s; }
.hero-btn:focus-visible { outline:2px solid var(--forest); outline-offset:3px; }
.hero-btn-primary { background:var(--forest); color:var(--egg); border:1.5px solid var(--forest); box-shadow:0 6px 18px color-mix(in srgb, var(--forest) 18%, transparent); }
.hero-btn-primary::after { content:'\2192'; display:inline-block; transition:translate .25s; }
.hero-btn-outline { background:color-mix(in srgb, var(--egg) 55%, transparent); color:var(--forest); border:1.5px solid color-mix(in srgb, var(--forest) 35%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
@media (hover:hover) {
  .hero-btn-primary:hover { background:var(--pine); border-color:var(--pine); translate:0 -2px; box-shadow:0 12px 28px color-mix(in srgb, var(--forest) 28%, transparent); }
  .hero-btn-primary:hover::after { translate:4px 0; }
  .hero-btn-outline:hover { background:var(--egg); border-color:var(--forest); translate:0 -2px; }
}

/* ---- WHAT WE DO ---- */
#what-we-do { overflow-x:clip; padding-top:160px; }

/* =====================================================================
   TIMELINE "Where we plug in" (build 10 — Home + Connect)
   Every word and every bar's placement lives in data.js → timeline.
   script.js draws it. Connect also shows the service cards (.lane-details).
   ===================================================================== */

/* -- Lane toggle (script.js builds the buttons from the lanes in data.js) -- */
.client-toggle { display:inline-flex; gap:6.4px; background:var(--card); border-radius:var(--radius); padding:5.6px; margin-bottom:18px; } /* KNOB: gap to the hint line */
.client-toggle button { border:none; background:transparent; font-family:var(--sans); font-size:12.5px; letter-spacing:1px; text-transform:uppercase; color:var(--light-text); padding:9.6px 19.2px; border-radius:calc(var(--radius) - 4px); cursor:pointer; transition:background .25s, color .25s; }
.client-toggle button.active { background:var(--forest); color:var(--egg); }
@media (hover:hover) {
  .client-toggle button:not(.active):hover { background:color-mix(in srgb, var(--forest) 8%, transparent); color:var(--forest); } /* invites the first click */
}

/* -- Hint line: "Choose a lane…" until a lane is picked -- */
.tap-hint { display:block; font-size:12.5px; color:var(--light-text); font-style:italic; margin-bottom:64px; transition:opacity .3s ease; } /* KNOB: gap to the timeline | --light-text (was --stone) clears 4.5:1 contrast */
.has-lane .tap-hint { opacity:0; } /* desktop: fades away (keeps its space, so nothing jumps) */

/* -- The line (draws itself once when it comes into view: the script adds .drawn) -- */
.timeline { position:relative; padding:132px 0 40px; } /* KNOB: 132 − 80 = room between the spine and the milestone names (the dotted Technical Assistance line sits in it) */
.spine { position:absolute; left:0; right:0; top:80px; height:2px; background:linear-gradient(90deg, color-mix(in srgb, var(--forest) 8%, transparent), color-mix(in srgb, var(--forest) 30%, transparent) 14%, color-mix(in srgb, var(--forest) 35%, transparent) 86%, color-mix(in srgb, var(--forest) 8%, transparent)); transform-origin:left center; transform:scaleX(0); transition:transform 1.2s cubic-bezier(.65,0,.35,1); } /* KNOB: faint at both ends | 1.2s = how long the line takes to draw */
.timeline.drawn .spine { transform:scaleX(1); }

/* -- Bars (one per service in the chosen lane) -- */
.brackets { position:absolute; left:0; right:0; top:80px; height:0; } /* KNOB: must match .spine top */
.bracket { position:absolute; height:8px; border-radius:var(--radius); transform:translateY(-4px); transition:left .35s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1), top .35s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1), opacity .2s ease; cursor:pointer; } /* KNOB: 8px = bar thickness | .35s = how long a bar takes to grow, shrink or slide (keep equal to LANE_STEP_MS in script.js) */
.bracket.is-out { opacity:0; pointer-events:none; } /* a bar shrinking away (the new lane doesn't use it) */
.bracket::before, .bracket::after { content:''; position:absolute; top:-7px; width:3px; height:22px; background:inherit; border-radius:3px; } /* KNOB: end-cap size */
.bracket::before { left:0; }
.bracket::after { right:0; }

/* -- Changing lanes (script.js → renderLanes): step 1, bars the new lane doesn't use shrink back to their start
      (left on desktop, top on phones) and bars it keeps trim to their shared stretch; step 2, kept bars slide or
      grow into place and new bars grow out from their start, one after another. Bars never overlap. -- */

/* -- Technical Assistance: a dotted line under the spine, available at any stage (draws in with the spine) -- */
.ta-line { position:absolute; left:0; right:0; top:100px; height:18px; cursor:pointer; transform-origin:left center; transform:scaleX(0); transition:transform 1.2s cubic-bezier(.65,0,.35,1); } /* KNOB: 100px = where the dotted line sits (spine is at 80px) | 18px = its hover/tap area */
.ta-line::before { content:''; position:absolute; left:0; right:0; top:8px; border-top:2px dotted color-mix(in srgb, var(--stone) 80%, transparent); } /* KNOB: 80% = dot strength */
.timeline.drawn .ta-line { transform:none; }
@media (prefers-reduced-motion:reduce) { .spine, .ta-line, .milestone, .bracket { transition:none; } }

/* -- Service colours (bars, legend swatches, Connect cards) -- */
.b-src { background:var(--amber); }      /* Sourcing (Project Sourcing) */
.b-dd  { background:var(--sky); }        /* Research (Due Diligence) */
.b-pm  { background:var(--brick); }      /* Project Management */
.b-paa { background:var(--forest-mid); } /* Public Advisory (Public Agency Advisory) */
.b-stw { background:var(--goldenrod); }  /* Stewardship (Portfolio Stewardship) */
.b-ta  { background:none; border-top:2px dotted color-mix(in srgb, var(--stone) 80%, transparent); } /* Technical Assistance (a dotted swatch) */

/* -- Milestones -- */
.milestones { position:relative; display:grid; grid-template-columns:repeat(5,1fr); } /* KNOB: 5 = number of milestones in data.js */
.milestone { position:relative; text-align:center; opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); } /* each fades up as the line reaches it */
.timeline.drawn .milestone { opacity:1; transform:none; }
.timeline.drawn .milestone:nth-child(1) { transition-delay:.15s; } /* KNOB: delays follow the line (keep in step with the 1.2s above) */
.timeline.drawn .milestone:nth-child(2) { transition-delay:.35s; }
.timeline.drawn .milestone:nth-child(3) { transition-delay:.55s; }
.timeline.drawn .milestone:nth-child(4) { transition-delay:.75s; }
.timeline.drawn .milestone:nth-child(5) { transition-delay:.95s; }
.milestone .m-name { font-family:var(--serif); font-size:18.4px; color:var(--ink); }
.milestone .m-sub { font-size:12.2px; color:var(--light-text); }

/* -- Tooltip (desktop: dark card above the bar)
      --tip-at = where along its bar it sits (0 = start, .5 = middle, 1 = end) — set per bar with tipAt in data.js
      --tip-shift = written by script.js so a card near the window edge slides inward instead of being cut off -- */
.tip { position:absolute; bottom:30px; left:calc(var(--tip-at, .5) * 100%); margin-left:var(--tip-shift, 0px); transform:translateX(-50%) translateY(6px); width:230px; background:var(--ink); color:var(--egg); border-radius:var(--radius); padding:16px 17.6px; opacity:0; visibility:hidden; transition:opacity .2s, transform .2s; z-index:10; pointer-events:none; } /* KNOB: 230px = tooltip width (wider = fewer lines) | 30px = height above the bar */
.ta-line .tip { bottom:24px; }
.bracket.open, .ta-line.open { z-index:5; }
.bracket.open .tip, .ta-line.open .tip { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
@media (hover:hover) {
  .bracket:hover, .ta-line:hover { z-index:5; }
  .bracket:hover .tip, .ta-line:hover .tip { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
}
.tip .t-name { font-family:var(--serif); font-size:16.8px; margin-bottom:4.8px; }
.tip .t-body { font-size:12.8px; line-height:1.55; color:color-mix(in srgb, var(--egg) 80%, transparent); }
.tip::after { content:''; position:absolute; top:100%; left:calc(50% - var(--tip-shift, 0px)); transform:translateX(-50%); border:7px solid transparent; border-top-color:var(--ink); } /* the arrow stays over the bar when the card slides */

/* -- Legend (script.js builds it from the chosen lane) -- */
.legend { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:56px; }
.legend span { display:flex; align-items:center; gap:8px; font-size:13.1px; color:var(--light-text); }
.legend i { flex:none; width:16px; height:8px; border-radius:4px; display:inline-block; }
.legend i.b-ta { height:0; border-radius:0; } /* the dotted swatch is a line, not a pill */

/* -- Service cards (Connect only: one card per bar, then Technical Assistance) -- */
.lane-details { margin-top:56px; } /* the heading stays put when the lane changes; only its words and the cards below it change */
.lane-details[hidden] { display:none; }
.ld-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:16px; } /* KNOB: 250px = narrowest card before the row wraps */
.svc-card { background:var(--card); border:1px solid transparent; border-radius:var(--radius); padding:22px 22px 24px; transition:background .25s ease, border-color .25s ease; animation:svc-in .45s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i, 0) * 70ms); } /* KNOB: .45s = how long each card takes to rise in | 70ms = gap between cards (--i = the card's place, set by script.js) */
@keyframes svc-in { from { opacity:0; transform:translateY(14px); } } /* KNOB: 14px = how far each card rises */
.svc-card.is-lit { background:var(--card2); border-color:color-mix(in srgb, var(--forest) 30%, transparent); } /* the card for the bar that was just tapped */
.svc-swatch { display:block; width:32px; height:8px; border-radius:4px; margin-bottom:16px; } /* KNOB: swatch size */
.svc-swatch.b-ta { height:0; border-radius:0; margin-top:4px; margin-bottom:20px; }
.svc-range { font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--forest-mid); }
.svc-name { font-family:var(--serif); font-size:23px; font-weight:400; line-height:1.2; color:var(--ink); margin:4px 0 8px; }
.svc-long { font-size:14.5px; line-height:1.65; color:var(--light-text); }
@media (prefers-reduced-motion:reduce) { .svc-card { transition:none; animation:none; } }

/* -- How We Serve (.serve — .diff kept as an alias so either markup works) -- */
.serve, .diff { background:var(--card2); border-radius:var(--radius); padding:48px; margin-top:64px; scroll-margin-top:88px; }
.serve h3, .diff h3 { font-family:var(--serif); font-size:clamp(24px,2.6vw,30px); font-weight:400; line-height:1.2; color:var(--ink); margin-bottom:25.6px; }
.serve-grid, .diff-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25.6px; }
.serve-item h4, .diff-item h4 { font-size:11.5px; letter-spacing:2.6px; text-transform:uppercase; color:var(--forest); margin-bottom:8px; }
.serve-item p, .diff-item p { font-size:14.4px; color:var(--light-text); }

/* ---- TEAM TEASER (home) ---- */
#team-teaser { padding-top:120px; margin:96px auto; } /* KNOB: 96px = extra egg space above and below the forest chapter, so neighbouring blocks are off-screen while the colour turns */
.tt { position:relative; display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center; }
.tt-copy h2 { max-width:520px; }
.tt-copy p { max-width:480px; color:var(--light-text); margin:16px 0 28px; }
.tt-leads { display:none; } /* phones only */
.tt-faces { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:18px 14px; padding:12px 0 40px; }
.tt-person { position:relative; display:flex; flex-direction:column; align-items:center; outline:none; } /* arrives with data-reveal="pop" (see SCROLL REVEAL) */
.tt-person:hover, .tt-person:focus { z-index:100; }
.tt-person:nth-child(even):not(.is-lead) { margin-top:40px; }
.tt-face { display:block; width:84px; aspect-ratio:1; border-radius:50%; overflow:hidden; background:var(--card2); border:3px solid var(--egg); box-shadow:0 10px 24px color-mix(in srgb, var(--forest) 14%, transparent); transition:border-color .2s ease; }
.tt-person.is-lead .tt-face { width:148px; border-width:4px; }
.tt-face img { width:100%; height:100%; object-fit:cover; display:block; }
.tt-face.is-mark img { object-fit:contain; padding:16px; background:var(--egg); }
.tt-tag { position:absolute; top:calc(100% + 8px); left:50%; z-index:100; display:flex; flex-direction:column; align-items:center; gap:1px; padding:7px 12px; white-space:nowrap; text-align:center; font-size:11.5px; letter-spacing:.04em; color:var(--light-text); background:color-mix(in srgb, var(--egg) 85%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-radius:calc(var(--radius) - 4px); box-shadow:0 8px 20px color-mix(in srgb, var(--forest) 14%, transparent); opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%, 4px); transition:opacity .2s ease, transform .2s ease, visibility .2s; }
.tt-tag b { font-family:var(--serif); font-size:16px; font-weight:500; letter-spacing:0; color:var(--ink); }
.tt-person:hover .tt-tag, .tt-person:focus .tt-tag { opacity:1; visibility:visible; transform:translate(-50%, 0); }
.tt-person:hover .tt-face, .tt-person:focus .tt-face { border-color:var(--forest); }
.tt-person.is-lead .tt-tag { position:static; margin-top:10px; padding:0; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; opacity:1; visibility:visible; transform:none; }
.tt-person.is-lead .tt-tag b { font-size:18px; }

/* -- Team teaser text while Home turns forest (desktop; on phones the teaser is a light card) -- */
@media (min-width:641px) {
  #team-teaser .section-label, #team-teaser h2, #team-teaser .tt-copy p, #team-teaser .tt-tag, #team-teaser .tt-tag b { transition:color .4s ease; }
  body.on-forest #team-teaser .section-label { color:color-mix(in srgb, var(--egg) 60%, transparent); } /* 60% clears 4.5:1 contrast */
  body.on-forest #team-teaser h2 { color:var(--egg); }
  body.on-forest #team-teaser .tt-copy p { color:color-mix(in srgb, var(--egg) 82%, transparent); }
  body.on-forest #team-teaser .tt-person.is-lead .tt-tag { color:color-mix(in srgb, var(--egg) 72%, transparent); }
  body.on-forest #team-teaser .tt-person.is-lead .tt-tag b { color:var(--egg); }
  body.on-forest #team-teaser .hero-btn-primary { background:var(--egg); color:var(--forest); border-color:var(--egg); box-shadow:none; } /* the button flips to egg on forest */
}

/* ---- CTA ---- */
/* Home (.is-mini): one column — "I am [roller]", the line, one button.
   Connect: two columns — the roller and its line on the left, the form on the right. */
.cta { background:var(--ink); border-radius:var(--radius); padding:56px; color:var(--egg); overflow:hidden; } /* KNOB: panel padding */
.cta .eyebrow { font-size:11.2px; letter-spacing:3.5px; text-transform:uppercase; color:var(--stone); margin-bottom:20px; }
@media (min-width:1100px) { /* KNOB: below 1100px wide (e.g. a half-screen window) the Connect CTA stacks, so the roller always has room */
  .cta:not(.is-mini) { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); grid-template-rows:auto auto 1fr; grid-template-areas:"eye form" "iam form" "tail form"; column-gap:64px; align-items:start; } /* KNOB: 1fr 1.15fr = left / form split | 64px = gap | the send button now sits inside the form */
  .cta:not(.is-mini) .eyebrow { grid-area:eye; }
  .cta:not(.is-mini) .i-am { grid-area:iam; }
  .cta:not(.is-mini) .tailored { grid-area:tail; }
  .cta:not(.is-mini) .cta-form { grid-area:form; margin:0; }
}
.cta:not(.is-mini) .cta-form { max-width:640px; } /* KNOB: field width when stacked */

/* -- "I am [roller]" line -- */
.i-am { display:flex; align-items:center; gap:12px; margin-bottom:22px; } /* "I am", roller and arrows on one line | KNOB: gap */
.i-am .fixed { flex:none; font-family:var(--serif); font-size:clamp(26px,2.6vw,36px); font-weight:300; line-height:1; white-space:nowrap; } /* KNOB: keep equal to .roller .role font-size */
.roller { position:relative; flex:1 1 auto; min-width:200px; max-width:420px; height:124px; overflow:hidden; border-radius:calc(var(--radius) - 2px); background:linear-gradient(180deg, var(--ink) 0%, var(--pine) 26%, var(--forest) 50%, var(--pine) 74%, var(--ink) 100%); box-shadow:inset 0 10px 14px -10px color-mix(in srgb, var(--ink) 90%, transparent), inset 0 -10px 14px -10px color-mix(in srgb, var(--ink) 90%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--egg) 6%, transparent); cursor:ns-resize; touch-action:none; outline:none; -webkit-user-select:none; user-select:none; } /* KNOB: 124px = drum height (shows the choice + one above and below) | the dark-light-dark gradient gives the drum its curve | min-width keeps the choice visible in narrow windows */
.roller::after { content:''; position:absolute; left:10px; right:10px; top:50%; height:52px; margin-top:-26px; border-top:1px solid color-mix(in srgb, var(--egg) 10%, transparent); border-bottom:1px solid color-mix(in srgb, var(--egg) 10%, transparent); pointer-events:none; } /* the selection band | KNOB: 52px = keep equal to .role height | 10% = line strength */
.roller:focus-visible { box-shadow:inset 0 10px 14px -10px color-mix(in srgb, var(--ink) 90%, transparent), inset 0 -10px 14px -10px color-mix(in srgb, var(--ink) 90%, transparent), 0 0 0 2px var(--egg); }
.roller-track { position:absolute; inset:0; -webkit-mask-image:linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image:linear-gradient(transparent, #000 16%, #000 84%, transparent); } /* KNOB: 16%/84% = only the drum's outer edges fade, so the chosen option's descenders are never touched */
.roller .role { position:absolute; top:50%; left:18px; right:18px; height:52px; margin-top:-26px; display:flex; align-items:center; font-family:var(--serif); font-size:clamp(26px,2.6vw,36px); font-weight:300; font-style:italic; line-height:1.25; color:var(--egg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transform-origin:left center; cursor:pointer; transition:transform .38s cubic-bezier(.2,.7,.2,1), opacity .38s ease; } /* KNOB: height = spacing between options (the script reads it) | line-height 1.25 leaves room for descenders (p, y, g) */
.roller.is-spinning .role { transition-duration:.14s; transition-timing-function:linear; } /* KNOB: .14s = how crisply each option ticks past while the drum spins (the final stop uses the .38s above) */
.roller .role.current { font-weight:400; } /* KNOB: chosen option slightly heavier */
.roller-hint { display:none; } /* old markup, unused */
.roller-arrows { flex:none; display:flex; flex-direction:column; gap:4px; }
.roller-btn { position:relative; width:32px; height:28px; display:grid; place-items:center; padding:0; background:none; border:none; font-size:0; color:color-mix(in srgb, var(--egg) 55%, transparent); cursor:pointer; transition:color .2s, translate .15s; } /* plain arrows, no button shape | KNOB: 32×28 = tap area | 55% = resting brightness | font-size:0 hides the old ▲▼ characters */
.roller-btn::before { content:''; width:10px; height:10px; border-left:1.75px solid currentColor; border-top:1.75px solid currentColor; transform:translateY(2px) rotate(45deg); } /* up chevron | KNOB: 10px = arrow size | 1.75px = line weight */
.roller-btn[data-step="1"]::before { transform:translateY(-2px) rotate(-135deg); } /* down chevron */
.roller-btn[data-step="-1"]:active { translate:0 -2px; } /* a small nudge in the direction it turns */
.roller-btn[data-step="1"]:active { translate:0 2px; }
.roller-btn:focus-visible { outline:1.5px solid color-mix(in srgb, var(--egg) 60%, transparent); outline-offset:0; border-radius:6px; color:var(--egg); }
@media (hover:hover) {
  .roller-btn:hover { color:var(--egg); }
}
@media (prefers-reduced-motion:reduce) { .roller .role { transition:none; } }

/* -- Tailored line + form -- */
.tailored { max-width:520px; margin:0 0 28px; font-size:16px; line-height:1.6; color:color-mix(in srgb, var(--egg) 72%, transparent); transition:opacity .2s; } /* KNOB: line length | the script reserves room for the longest line, so the form never moves */
.cta.is-mini .tailored { min-height:0; margin-bottom:26px; }
.cta-form { display:flex; flex-direction:column; gap:14.4px; margin-bottom:28.8px; }
.cf-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14.4px; }
.cta-form label { display:block; margin-bottom:5.6px; font-size:10.6px; letter-spacing:2.2px; text-transform:uppercase; color:var(--stone); }
.cta-form input, .cta-form textarea { width:100%; background:color-mix(in srgb, var(--egg) 6%, transparent); border:1px solid color-mix(in srgb, var(--egg) 14%, transparent); border-radius:calc(var(--radius) - 4px); padding:12.8px 14.4px; color:var(--egg); font-family:var(--sans); font-size:14.4px; }
.cta-form input::placeholder, .cta-form textarea::placeholder { color:color-mix(in srgb, var(--egg) 35%, transparent); }
.cta-form input:focus, .cta-form textarea:focus { outline:none; border-color:color-mix(in srgb, var(--egg) 55%, transparent); }
.cta-form textarea { resize:vertical; min-height:110px; }

/* -- Optional property fields (developer / property owner) — ease open and closed -- */
.cf-extra { display:grid; grid-template-rows:0fr; opacity:0; margin-top:-14.4px; transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1), opacity .25s ease, margin-top .45s cubic-bezier(.4,0,.2,1); } /* KNOB: .45s = open/close speed | -14.4px cancels the form's gap while closed (keep equal to .cta-form gap) */
.cf-extra.is-open { grid-template-rows:1fr; opacity:1; margin-top:0; transition-delay:0s, .12s, 0s; } /* the space opens first, then the fields fade in */
.cf-extra-inner { min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:14.4px; padding:2px 1px; } /* padding keeps focus borders from being clipped */
.cf-extra-label { margin:6px 0 -2px; font-size:10.6px; letter-spacing:2.2px; text-transform:uppercase; color:var(--egg); } /* "About the property (optional)" */
.cf-extra-label span { text-transform:none; letter-spacing:0; color:var(--stone); }
.cf-trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* honeypot field: off-screen for people, visible to bots */
@media (prefers-reduced-motion:reduce) { .cf-extra, .cf-extra.is-open { transition:none; } }
.cta-form select { width:100%; appearance:none; -webkit-appearance:none; background-color:color-mix(in srgb, var(--egg) 6%, transparent); background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position:calc(100% - 19px) 55%, calc(100% - 14px) 55%; background-size:5px 5px; background-repeat:no-repeat; border:1px solid color-mix(in srgb, var(--egg) 14%, transparent); border-radius:calc(var(--radius) - 4px); padding:12.8px 36px 12.8px 14.4px; color:var(--egg); font-family:var(--sans); font-size:14.4px; cursor:pointer; }
.cta-form select:focus { outline:none; border-color:color-mix(in srgb, var(--egg) 55%, transparent); }
.cta-form select option { background:var(--ink); color:var(--egg); }

/* -- Actions -- */
.actions { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.cta-form .actions { margin-top:10px; } /* Connect: the send button is inside the form, so the browser checks the fields before anything is sent | KNOB: gap above it */
.btn-send { background:var(--egg); color:var(--ink); padding:15.2px 35.2px; border:none; border-radius:var(--radius); font-size:12.8px; font-weight:500; letter-spacing:1.6px; text-transform:uppercase; cursor:pointer; transition:transform .25s, background .25s; font-family:var(--sans); }
.btn-send:hover { transform:translateY(-2px); background:var(--card); }
.btn-send:disabled { cursor:default; transform:none; opacity:.7; }
a.btn-send { display:inline-block; text-decoration:none; } /* the Home CTA uses a link styled as the send button */
.link-quiet { color:var(--stone); font-size:13.6px; text-decoration:none; }
.link-quiet:hover { color:var(--egg); }

/* ---- PROJECTS + ARTICLES GALLERY ---- */
.wall { display:flex; flex-direction:column; gap:72px; }
.row { display:grid; gap:32px; align-items:end; }
.row.one { grid-template-columns:1fr; }
.row.two-lr { grid-template-columns:1.7fr 1fr; }
.row.two-rl { grid-template-columns:1fr 1.7fr; }
.work { position:relative; display:block; min-width:0; color:inherit; }
.media-link, .work-link { display:block; color:inherit; text-decoration:none; }
.work-link:focus-visible { outline:2px solid var(--forest); outline-offset:4px; }
.work .media { width:100%; display:block; border-radius:0; object-fit:cover; transition:opacity .3s ease; }
.work.tall .media { aspect-ratio:3/2.2; }
.work.short .media { aspect-ratio:3/2; }
.work.wide .media { aspect-ratio:16/7; }
.work .maptile { position:relative; overflow:hidden; background:var(--card2); display:flex; align-items:center; justify-content:center; text-align:center; color:var(--stone); font-size:12.8px; letter-spacing:.6px; } /* holds the project's map (or its place name until the map draws) */
.work .maptile .maplibregl-ctrl-attrib { font-size:10px; background:color-mix(in srgb, var(--egg) 85%, transparent); }
.work .name { font-family:var(--serif); font-size:22.4px; color:var(--forest-mid); margin-top:16px; transition:color .3s ease; }
.work .meta { font-size:13.1px; color:var(--light-text); margin-top:2.4px; }
.work:hover .media { opacity:.94; }
.work:hover .name { color:var(--forest); }
@media (min-width:641px) {
  .wall { margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:0 40px; } /* KNOB: full window width | 40px = edge margin */
}

/* ---- PHOTO CAROUSEL (Home gallery cards + Projects frames) ---- */
.car { position:relative; overflow:hidden; }
.car-track { display:flex; width:100%; height:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior-x:contain; }
.car-track::-webkit-scrollbar { display:none; }
.car-slide { position:relative; flex:0 0 100%; width:100%; height:100%; scroll-snap-align:start; display:block; overflow:hidden; }
.car-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.car-btn { position:absolute; top:50%; z-index:2; width:38px; height:38px; margin-top:-19px; display:grid; place-items:center; padding:0; border-radius:50%; border:1px solid color-mix(in srgb, var(--egg) 40%, transparent); background:color-mix(in srgb, var(--egg) 72%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); cursor:pointer; opacity:0; transition:opacity .2s ease, background .2s ease; }
.car-btn::before { content:''; width:8px; height:8px; border-left:1.5px solid var(--forest); border-bottom:1.5px solid var(--forest); }
.car-btn.prev { left:12px; }
.car-btn.prev::before { transform:translateX(2px) rotate(45deg); }
.car-btn.next { right:12px; }
.car-btn.next::before { transform:translateX(-2px) rotate(-135deg); }
.car:hover .car-btn, .car:focus-within .car-btn { opacity:1; }
.car-btn:hover { background:var(--egg); }
.car-btn:focus-visible { outline:2px solid var(--forest); outline-offset:2px; }
@media (hover:none) { .car-btn { display:none; } }
.car-dots { position:absolute; left:0; right:0; bottom:10px; z-index:2; display:flex; justify-content:center; gap:6px; pointer-events:none; }
.car-dots i { width:6px; height:6px; border-radius:50%; background:color-mix(in srgb, var(--egg) 55%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent); transition:background .2s, transform .2s; }
.car-dots i.on { background:var(--egg); transform:scale(1.3); }
@media (prefers-reduced-motion:reduce) { .car-track { scroll-behavior:auto; } }

/* ---- FOOTER ---- */
footer { background:var(--card); border-top:1px solid color-mix(in srgb, var(--forest) 12%, transparent); padding:48px 40px 28px; }
.ft-inner { max-width:1140px; margin:0 auto; padding-bottom:26px; display:grid; grid-template-columns:1fr auto auto; gap:40px; align-items:center; border-bottom:1px solid color-mix(in srgb, var(--forest) 10%, transparent); }
.ft-brand { display:flex; align-items:center; gap:14px; }
.ft-mark { width:34px; height:auto; }
footer .motto { font-family:var(--serif); font-size:26px; font-style:italic; color:var(--forest); }
.ft-links { display:flex; gap:28px; }
.ft-links a { font-size:12.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--light-text); text-decoration:none; transition:color .2s; }
.ft-links a:hover { color:var(--forest); }
.ft-social { display:flex; gap:10px; }
.ft-social a { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1px solid color-mix(in srgb, var(--forest) 20%, transparent); color:var(--forest); transition:background .2s, color .2s, border-color .2s; }
.ft-social a:focus-visible, .ft-links a:focus-visible { outline:.5px solid var(--forest); outline-offset:.5px; }
.ft-icon { width:18px; height:18px; background:currentColor; }
.ft-icon.ig { -webkit-mask:url(img/icons/instagram.svg) center / contain no-repeat; mask:url(img/icons/instagram.svg) center / contain no-repeat; }
.ft-icon.li { -webkit-mask:url(img/icons/linkedin.svg) center / contain no-repeat; mask:url(img/icons/linkedin.svg) center / contain no-repeat; }
@media (hover:hover) {
  .ft-social a:hover { background:var(--forest); border-color:var(--forest); color:var(--egg); }
}
footer .fine { max-width:1140px; margin:18px auto 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; font-size:12.5px; color:var(--light-text); }
footer .fine a { color:var(--forest-mid); text-decoration:none; }

/* ---- SCROLL REVEAL (time-based: script.js adds .is-in once, the browser plays the animation) ----
   data-reveal="up | left | right | in | pop". The start line, stagger and play-once settings are in script.js
   (SCROLL REVEALS); speed and distance are the tokens above. Nothing is hidden when "reduce motion" is on,
   because .reveal-on is never added. */
.reveal-on [data-reveal]:not(.is-in) { opacity:0; } /* waiting below the start line */
.reveal-on [data-reveal].is-in { animation:reveal-up var(--reveal-speed) cubic-bezier(.2,.6,.2,1) backwards; } /* KNOB: easing | backwards = holds the start pose during a cascade delay, then lets go entirely (no transform left behind) */
.reveal-on [data-reveal="right"].is-in { animation-name:reveal-right; }
.reveal-on [data-reveal="left"].is-in  { animation-name:reveal-left; }
.reveal-on [data-reveal="in"].is-in    { animation-name:reveal-in; }
.reveal-on [data-reveal="pop"].is-in   { animation-name:reveal-pop; } /* team faces */
.reveal-on [data-reveal] :is([data-reveal="up"], [data-reveal="left"], [data-reveal="right"]).is-in { animation-name:reveal-settle; } /* a reveal inside a reveal only settles a short way, so the two moves don't add up */
@keyframes reveal-up     { from { opacity:0; transform:translateY(var(--reveal-distance)); } }
@keyframes reveal-right  { from { opacity:0; transform:translateX(var(--reveal-distance)); } }
@keyframes reveal-left   { from { opacity:0; transform:translateX(calc(var(--reveal-distance) * -1)); } }
@keyframes reveal-in     { from { opacity:0; transform:scale(.94); } } /* KNOB: .94 = starting size */
@keyframes reveal-pop    { from { opacity:0; transform:translateY(calc(var(--reveal-distance) / 2)) scale(.8); } } /* KNOB: .8 = starting size of each face */
@keyframes reveal-settle { from { opacity:0; transform:translateY(calc(var(--reveal-distance) / 3)); } }

/* ---- INTRO (on-load, above-the-fold) ---- */
@keyframes intro-up { from { opacity:0; transform:translateY(var(--reveal-distance)); } }
[data-intro] { animation:intro-up var(--reveal-speed) cubic-bezier(.2,.6,.2,1) .15s both; }
@media (prefers-reduced-motion:reduce) { [data-intro] { animation:none; } }


/* =====================================================================
   ===============================  MOBILE  ============================
   (≤640px — phones)
   ===================================================================== */
@media (max-width:640px) {

  /* -- TYPE (phones): one scale for every page — the body prefix outranks page-level rules -- */
  body :is(.about-head, .connect-head, .articles-head, .projects-head, .disc-head) h1 { font-size:clamp(38px, 11vw, 46px); line-height:1.05; }
  body .section h2, body :is(.mission-band, .pathfinder, .substack-band, .projects-cta, .q-band, .about-cta) h2 { font-size:clamp(26px, 7.4vw, 30px); line-height:1.15; }
  body :is(.serve h3, .diff h3, .reader-inner h2, .p-body h2, .bio-panel .b-name) { font-size:clamp(21px, 6vw, 24px); line-height:1.2; }
  body :is(.lede, .about-head .lead, .connect-head .lead, .articles-head .lead, .projects-head .lead, .disc-head .lead, .team-intro p, .tt-copy p, .pf-desc, .sb-desc, .p-body p, .reader-preview, .prose-2 p, .mission-band p) { font-size:16px; line-height:1.65; }
  body :is(.serve-item p, .diff-item p, .a-excerpt, .role-sub, .role-detail li, .d-card p, .bio-panel .b-body, .tailored, .svc-long) { font-size:15px; line-height:1.6; }
  body :is(.by-date, .pf-note, .sb-note, footer .fine, .work .meta, .person-card .p-title, .milestone .m-sub, .link-quiet) { font-size:13px; }
  body :is(.section-label, .h1-kicker, .a-tag, .reader-tag, .role-badge, .cta .eyebrow, .cta-form label) { font-size:11px; }

  /* -- Forms: 16px text stops phones zooming in when a field is tapped (and staying zoomed after a refresh) -- */
  body :is(.cta-form, .pf-form, form) :is(input, select, textarea) { font-size:16px; }

  /* -- Reveals: sideways slides rise instead on phones (a slide from the side briefly makes the page wider, which lets an iPhone wobble sideways) -- */
  .reveal-on :is([data-reveal="left"], [data-reveal="right"]).is-in { animation-name:reveal-up; } /* KNOB: delete to keep sideways slides on phones */

  /* -- Base -- */
  .section { padding:48px 24px; }
  #what-we-do { padding-top:96px; }

  /* -- Nav + logo -- */
  #siteNav { justify-content:flex-end; height:64px; padding:0 14px; } /* KNOB: the hamburger centres at 32px */
  body.scrolled #siteNav { height:64px; padding:0 14px; }
  .nav-links { display:none; }
  .nav-sub { display:none; }
  .ham { display:flex; width:44px; height:44px; align-items:center; justify-content:center; padding:0; }
  .brand-full { top:56px; width:86vw; transform:translateX(-50%) translateY(calc(var(--p, 0) * -20px)); }
  .brand-mark { left:24px; right:auto; top:32px; transform:translateY(-50%); width:40px; }

  /* -- Hero -- */
  .hero { padding-top:96px; padding-bottom:64px; } /* KNOB: text sits a little higher (bigger bottom = higher) */
  .hero-media { top:96px; bottom:-32px; left:0; -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); }
  .hero-media img { filter:saturate(.55); }
  .hero-media::after { background:color-mix(in srgb, var(--egg) 85%, transparent); }
  .hero-eyebrow { padding-top:0; margin-bottom:18px; font-size:10.5px; letter-spacing:3px; } /* KNOB: spacing between the hero lines (fills the screen) */
  .hero-inner { margin-left:24px; padding-right:24px; }
  .hero h1 { font-size:clamp(26px,8.6vw,40px); white-space:nowrap; margin-bottom:22px; }
  .hero-sub { font-size:15px; line-height:1.75; margin-bottom:34px; }
  .hero-ctas { flex-direction:column; gap:12px; }
  .hero-btn { width:100%; padding:13px 20px; }

  /* -- Timeline: lane toggle as a 2 × 2 grid (so "Non-Profit" and "Public Agency" never break mid-word), vertical line -- */
  .client-toggle { display:grid; grid-template-columns:1fr 1fr; width:100%; margin-bottom:12px; }
  .client-toggle button { padding:10px 6px; font-size:11px; line-height:1.25; }
  .tap-hint { margin-bottom:24px; }
  .has-lane .tap-hint { opacity:1; } /* phones keep the hint (it now says "Tap a milestone…") */
  .timeline { padding:0; }
  .spine { top:0; bottom:0; left:8px; right:auto; width:2px; height:auto; background:linear-gradient(180deg, color-mix(in srgb, var(--forest) 8%, transparent), color-mix(in srgb, var(--forest) 30%, transparent) 12%, color-mix(in srgb, var(--forest) 35%, transparent) 88%, color-mix(in srgb, var(--forest) 8%, transparent)); transform-origin:center top; transform:scaleY(0); } /* draws downward on phones */
  .timeline.drawn .spine { transform:scaleY(1); }
  .brackets { top:0; bottom:0; left:9px; right:auto; width:0; height:auto; }
  .bracket { left:0; width:8px; transform:translateX(-4px); }
  .bracket::before, .bracket::after { left:-7px; right:auto; width:22px; height:3px; }
  .bracket::before { top:0; }
  .bracket::after { top:auto; bottom:0; }
  .ta-line { top:0; bottom:0; left:24px; right:auto; width:18px; height:auto; z-index:2; transform-origin:center top; transform:scaleY(0); } /* KNOB: 24px = gap between the spine and the dotted line | z-index lets it catch taps */
  .ta-line::before { left:8px; right:auto; top:0; bottom:0; border-top:0; border-left:2px dotted color-mix(in srgb, var(--stone) 80%, transparent); }
  .timeline.drawn .ta-line { transform:none; }
  .milestones { grid-template-columns:1fr; grid-auto-rows:auto; }
  .milestone { text-align:left; padding:10px 0 10px 54px; cursor:pointer; } /* KNOB: row breathing room | 54px = text start (clears the dotted line) */
  .milestone .m-name { font-size:17px; line-height:1.25; }
  .milestone .m-sub { line-height:1.4; }

  /* -- Tooltip: frosted glass that grows out of its bar (tipAt in data.js moves it up or down the bar) -- */
  .tip { top:calc(var(--tip-at, .5) * 100%); bottom:auto; left:26px; margin-left:0; width:calc(100vw - 120px); max-width:260px; background:color-mix(in srgb, var(--card2) 92%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:var(--ink); border:1px solid color-mix(in srgb, var(--forest) 20%, transparent); box-shadow:0 10px 30px color-mix(in srgb, var(--forest) 18%, transparent); transform-origin:left center; transform:translateY(-50%) scale(.85); transition:opacity .22s ease, transform .24s cubic-bezier(.2,.7,.3,1.2); } /* KNOB: 260px = widest tooltip on phones */
  .ta-line .tip { left:24px; bottom:auto; }
  .bracket.open .tip, .bracket:hover .tip, .ta-line.open .tip { transform:translateY(-50%) scale(1); }
  .tip .t-name { color:var(--forest); }
  .tip .t-body { color:var(--light-text); }
  .tip::after { top:50%; left:auto; right:100%; transform:translateY(-50%); border:7px solid transparent; border-right-color:color-mix(in srgb, var(--card2) 92%, transparent); }

  /* -- Legend + service cards: one column -- */
  .legend { flex-direction:column; flex-wrap:nowrap; gap:6px; margin-top:30px; }
  .legend span { font-size:12.5px; }
  .lane-details { margin-top:36px; }
  .ld-grid { grid-template-columns:1fr; gap:12px; }

  /* -- How We Serve -- */
  .serve, .diff { padding:28px 22px; }
  .serve h3, .diff h3 { margin-bottom:18px; }
  .serve-grid, .diff-grid { grid-template-columns:1fr; gap:22px; }

  /* -- Team teaser: one card -- */
  #team-teaser { padding-top:72px; margin:56px auto; } /* KNOB: extra space around the forest chapter on phones */
  .tt { display:block; background:var(--card); border-radius:var(--radius); padding:28px 22px 30px; }
  .tt-leads { display:flex; justify-content:center; gap:22px; margin:22px 0 20px; }
  .tt-copy p { margin:0 0 22px; }
  .tt-faces { justify-content:center; gap:12px 10px; margin-top:26px; padding:24px 0 0; border-top:1px solid color-mix(in srgb, var(--forest) 10%, transparent); }
  .tt-faces .is-lead { display:none; }
  .tt-person:nth-child(even):not(.is-lead) { margin-top:0; }
  .tt-face { width:56px; border-width:2px; }
  .tt-person.is-lead .tt-face { width:104px; border-width:3px; }
  .tt-person.is-lead .tt-tag b { font-size:15px; }

  /* -- CTA: one column on phones -- */
  .cta { padding:32px 20px; }
  .cta:not(.is-mini) { display:block; }
  .i-am { gap:8px; }
  .i-am .fixed, .roller .role { font-size:clamp(19px,5.4vw,24px); } /* KNOB: roller text on phones */
  .roller { min-width:0; max-width:none; height:90px; border-radius:calc(var(--radius) - 4px); } /* KNOB: drum height on phones */
  .roller .role { left:12px; right:12px; height:36px; margin-top:-18px; } /* KNOB: option spacing on phones (the script reads it) */
  .roller::after { height:36px; margin-top:-18px; } /* selection band = .role height */
  .roller-btn { width:26px; height:22px; }
  .tailored { max-width:none; margin-bottom:22px; }
  .cf-row { grid-template-columns:1fr; }
  .btn-send { width:100%; }

  /* -- Gallery -- */
  .wall { gap:48px; }
  .row, .row.two-lr, .row.two-rl { grid-template-columns:1fr; gap:40px; }

  /* -- Footer -- */
  footer { padding:24px 24px 18px; } /* KNOB: footer padding on phones */
  .ft-inner { grid-template-columns:1fr auto; grid-template-areas:"brand social" "links links"; gap:14px 12px; padding-bottom:16px; } /* brand + icons on one line, links under them */
  .ft-brand { grid-area:brand; gap:10px; }
  .ft-mark { width:24px; }
  footer .motto { font-size:20px; } /* KNOB: motto size on phones */
  .ft-social { grid-area:social; gap:8px; }
  .ft-social a { width:34px; height:34px; }
  .ft-icon { width:15px; height:15px; }
  .ft-links { grid-area:links; gap:22px; }
  footer .fine { margin-top:12px; flex-direction:column; gap:2px; }
}


/* ---- REDUCE MOTION: the big logo only fades (no rise or shrink) ---- */
@media (prefers-reduced-motion:reduce) {
  .brand-full { transform:translateX(-50%); }
}