/* ============================================================================
   CROP HOUSE — shared design system  ·  "The Editing Room"
   One stylesheet, linked by every page. No build step, no dependencies.
   Colour + type roles come straight from CH_BRANDGUIDE_2026.pdf (§3–5).
   ========================================================================= */

/* ---- Tokens ------------------------------------------------------------- */
:root{
  /* Brand palette (brand guide §3) */
  --forest:#0B2305;      /* Deep Forest  — dark sections, primary text on light */
  --green:#226214;       /* CROP Green   — CTAs, links, wordmark accent */
  --bright:#39AC20;      /* Bright Growth— accent ONLY (focus ring, tiny marks) */
  --leaf:#3AB021;        /* Vivid Leaf   — secondary accent */
  --sage:#617C62;        /* Muted Sage   — meta/label text, hairline dividers */
  --sprout:#EDF6EE;      /* Soft Sprout  — secondary panel background */
  --cream:#FFFDF6;       /* Warm Cream   — primary page background */
  --offwhite:#FBFBF9;    /* Off White    — alternate section background */
  --mahogany:#4E2D2D;    /* Deep Mahogany— secondary headings ONLY */

  --ink:#14210F;         /* near-forest body ink, softer than pure forest */
  --line:rgba(11,35,5,.14);
  --line-rev:rgba(255,253,246,.18);

  /* Type roles. --font-display fills Orpheus's editorial-serif role; if the
     client later licenses an Orpheus webfont it is a one-line swap here. */
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"EB Garamond",Georgia,serif;
  --font-gothic:"League Gothic","Oswald","Arial Narrow",sans-serif;
  --font-type:"Special Elite","Courier New",monospace;
  --font-script:"Purple Purse",cursive;

  /* Fluid type scale */
  --fs-hero:clamp(3rem,8.5vw,6.6rem);
  --fs-h1:clamp(2.6rem,6vw,4.6rem);
  --fs-h2:clamp(2rem,4.2vw,3.35rem);
  --fs-h3:clamp(1.35rem,2.4vw,1.9rem);
  --fs-lede:clamp(1.15rem,1.9vw,1.5rem);
  --fs-body:1.09rem;
  --fs-label:.74rem;

  /* Spacing scale (varied rhythm, not one flat gap) */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-5:3rem;
  --s-6:4.5rem; --s-7:6.5rem; --s-8:9rem;
  --pad-section:clamp(4rem,9vw,8.5rem);
  --wrap:1240px;
  --wrap-narrow:920px;

  --radius:14px;
  --radius-pill:100px;
  --arch:220px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.5s;
  --shadow:0 22px 60px -30px rgba(11,35,5,.5);
  --header-h:76px;
}

/* ---- Reset / base ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.72;
  font-feature-settings:"liga" 1,"kern" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.02;
  letter-spacing:-.012em;margin:0;color:var(--forest)}
p{margin:0 0 1.1em}
::selection{background:var(--bright);color:var(--forest)}

/* ---- Layout helpers ----------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.75rem)}
.wrap-narrow{max-width:var(--wrap-narrow)}
section{padding-block:var(--pad-section)}
.bg-forest{background:var(--forest);color:var(--cream)}
.bg-forest h1,.bg-forest h2,.bg-forest h3{color:var(--cream)}
.bg-sprout{background:var(--sprout)}
.bg-offwhite{background:var(--offwhite)}

/* Eyebrow / label — the typewriter voice, used as call-sheet annotations */
.eyebrow{
  font-family:var(--font-type);
  font-size:var(--fs-label);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--sage);
  display:inline-flex;align-items:center;gap:.6rem;
  margin:0 0 var(--s-3);
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.bg-forest .eyebrow{color:var(--leaf)}

/* The signature: struck-through "building in public" stamp */
.wip-stamp{
  font-family:var(--font-type);
  font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--sage);
  text-decoration:line-through;text-decoration-thickness:1.5px;
  text-decoration-color:var(--bright);
}

.lede{font-family:var(--font-display);font-size:var(--fs-lede);line-height:1.4;
  color:var(--forest);font-weight:500}
.italic-hl{font-style:italic;color:var(--green)}
.muted{color:var(--sage)}
/* script accent inside headings (Purple Purse). Hero/closer set their own sizes. */
.script{font-family:var(--font-script);font-weight:400;color:var(--green);letter-spacing:0}
.bg-forest .script{color:var(--leaf)}

/* ---- Wordmark ----------------------------------------------------------- */
.wordmark{display:inline-flex;align-items:baseline;gap:.06em;line-height:1;
  text-decoration:none;white-space:nowrap}
.wordmark:hover{text-decoration:none}
.wordmark .crop{font-family:var(--font-gothic);text-transform:uppercase;
  letter-spacing:.02em;color:var(--green);font-size:1.9em}
.wordmark .house{font-family:var(--font-script);color:var(--forest);
  font-size:1.55em;margin-left:.08em;position:relative;top:.06em}
.wordmark--rev .crop{color:var(--cream)}
.wordmark--rev .house{color:var(--sprout)}

/* ---- Buttons ------------------------------------------------------------ */
.btn{
  --bg:var(--green);--fg:var(--cream);--bd:var(--green);
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--font-gothic);text-transform:uppercase;letter-spacing:.06em;
  font-size:1.06rem;line-height:1;
  padding:.95em 1.5em;border-radius:var(--radius-pill);
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  cursor:pointer;transition:transform var(--dur) var(--ease),
    background var(--dur) var(--ease),color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
  text-decoration:none;
}
.btn:hover{text-decoration:none;transform:translateY(-2px);
  box-shadow:0 14px 30px -16px rgba(11,35,5,.6)}
.btn .arw{display:inline-block;transition:transform var(--dur) var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
.btn--outline{--bg:transparent;--fg:var(--green);--bd:var(--green)}
.btn--outline:hover{--bg:var(--green);--fg:var(--cream)}
.btn--light{--bg:var(--cream);--fg:var(--forest);--bd:var(--cream)}
.btn--light:hover{--bg:transparent;--fg:var(--cream)}
.btn--lightline{--bg:transparent;--fg:var(--cream);--bd:rgba(255,253,246,.55)}
.btn--lightline:hover{--bg:var(--cream);--fg:var(--forest);--bd:var(--cream)}
.btn--lg{font-size:1.2rem;padding:1.05em 1.8em}

/* ---- Skip link + focus -------------------------------------------------- */
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--forest);
  color:var(--cream);padding:.8em 1.2em;border-radius:0 0 8px 0;font-family:var(--font-gothic);
  letter-spacing:.06em;text-transform:uppercase}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--bright);outline-offset:3px;border-radius:2px}

/* ---- Header / nav ------------------------------------------------------- */
.site-head{position:sticky;top:0;z-index:100;background:rgba(255,253,246,.86);
  backdrop-filter:saturate(140%) blur(9px);border-bottom:1px solid var(--line);
  transition:background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.site-head.is-scrolled{background:rgba(255,253,246,.95);border-color:transparent;
  box-shadow:0 10px 30px -22px rgba(11,35,5,.55)}
.site-head__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:var(--s-3);min-height:var(--header-h);transition:min-height .35s var(--ease)}
.site-head.is-scrolled .site-head__row{min-height:60px}
.nav-info{display:flex;align-items:center;gap:clamp(.8rem,1.7vw,1.7rem);justify-self:start}
.nav-info a{font-family:var(--font-gothic);text-transform:uppercase;letter-spacing:.05em;
  font-size:1rem;color:var(--forest);position:relative;padding-block:.3em}
.nav-info a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:var(--green);transition:width var(--dur) var(--ease)}
.nav-info a:hover{text-decoration:none}
.nav-info a:hover::after,.nav-info a[aria-current="page"]::after{width:100%}
.nav-info a[aria-current="page"]{color:var(--green)}
.site-head .wordmark{justify-self:center;font-size:1.02rem}
.nav-cta{display:flex;align-items:center;gap:.7rem;justify-self:end}
.nav-cta .btn{font-size:.95rem;padding:.72em 1.15em}

/* hamburger */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.5em;
  justify-self:end;color:var(--forest)}
.nav-toggle svg{display:block}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:150;background:var(--forest);color:var(--cream);
  transform:translateY(-100%);transition:transform .55s var(--ease);
  display:flex;flex-direction:column;padding:clamp(1.5rem,5vw,3rem);
  visibility:hidden}
.drawer.open{transform:translateY(0);visibility:visible}
.drawer__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s-6)}
.drawer__close{background:none;border:0;color:var(--cream);cursor:pointer;padding:.4em}
.drawer nav{display:flex;flex-direction:column;gap:var(--s-3)}
.drawer nav a{font-family:var(--font-display);font-size:clamp(2rem,9vw,3rem);
  color:var(--cream);line-height:1.05}
.drawer nav a:hover{text-decoration:none;color:var(--leaf)}
.drawer__ctas{margin-top:auto;display:flex;flex-direction:column;gap:.8rem;padding-top:var(--s-5)}
.drawer__ctas .btn{justify-content:center}
.drawer__foot{margin-top:var(--s-4);font-family:var(--font-type);font-size:.78rem;
  letter-spacing:.12em;color:var(--leaf)}

/* ---- Arch frame (viewfinder) ------------------------------------------- */
.frame-arch{position:relative;border-radius:var(--arch) var(--arch) var(--radius) var(--radius);
  overflow:hidden;background:var(--sprout);box-shadow:var(--shadow)}
.frame-arch img{width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease)}
.frame-arch:hover img{transform:scale(1.04)}
/* stamp badge that overlaps a frame corner */
.stamp{position:absolute;display:inline-flex;flex-direction:column;gap:.15em;
  background:var(--cream);color:var(--forest);padding:.7em .95em;border-radius:10px;
  font-family:var(--font-type);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 10px 24px -14px rgba(11,35,5,.7);line-height:1.3}
.stamp b{color:var(--green);font-family:var(--font-gothic);font-size:1.05rem;letter-spacing:.04em}

/* ---- Reveal on scroll --------------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none}
}

/* ============================================================================
   HERO
   ========================================================================= */
.hero{padding-block:clamp(2.5rem,6vw,5rem) var(--pad-section)}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center}
.hero__kicker{display:flex;align-items:center;gap:1rem;margin-bottom:var(--s-4);flex-wrap:wrap}
.hero h1{font-size:var(--fs-hero);margin-bottom:var(--s-4)}
.hero h1 .script{font-family:var(--font-script);font-weight:400;color:var(--green);
  font-size:.86em;letter-spacing:0}
.hero__paths{font-family:var(--font-type);font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage);margin-bottom:var(--s-5);
  display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center}
.hero__paths b{color:var(--forest);font-weight:400}
.hero__paths .sep{width:6px;height:6px;background:var(--bright);border-radius:50%;display:inline-block}
.hero__actions{display:flex;gap:.9rem;flex-wrap:wrap}
.hero__media{position:relative}
.hero__media .frame-arch{aspect-ratio:3/4}
.hero__media .stamp{right:-14px;bottom:26px}
/* hero image pulls focus on load, like a lens finding the shot */
.hero__media .frame-arch img{animation:focusPull 1.5s var(--ease) both}
@keyframes focusPull{
  from{transform:scale(1.09);filter:saturate(.55) blur(3px)}
  to{transform:scale(1);filter:none}
}
@media (prefers-reduced-motion:reduce){
  .hero__media .frame-arch img{animation:none}
}

/* typewriter hero line animation (js adds .type-done when complete) */
.type-line{white-space:nowrap;overflow:hidden}

/* ============================================================================
   THE FORK — two doors (equal weight: both paths balanced, client decision #7)
   ========================================================================= */
.fork{padding:0}
.fork__grid{display:grid;grid-template-columns:1fr 1fr;min-height:min(78vh,680px)}
.door{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(2rem,4.5vw,4rem);text-decoration:none;overflow:hidden;
  transition:background var(--dur) var(--ease)}
.door:hover{text-decoration:none}
/* editorial "selected frame" that draws in on hover/focus */
.door::after{content:"";position:absolute;inset:clamp(1rem,2vw,1.6rem);border-radius:10px;
  border:1px solid transparent;pointer-events:none;
  transition:border-color var(--dur) var(--ease),inset var(--dur) var(--ease)}
.door--brands:hover::after,.door--brands:focus-visible::after{border-color:rgba(255,253,246,.16)}
.door--creatives:hover::after,.door--creatives:focus-visible::after{border-color:rgba(11,35,5,.14)}
.door h2{transition:transform var(--dur) var(--ease)}
.door:hover h2{transform:translateY(-3px)}
.door__num{position:absolute;top:clamp(1.6rem,3vw,2.6rem);left:clamp(2rem,4.5vw,4rem);
  font-family:var(--font-type);font-size:.72rem;letter-spacing:.2em}
.door__q{font-family:var(--font-type);font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:var(--s-3)}
.door h2{font-size:var(--fs-h2);margin-bottom:var(--s-3)}
.door p{max-width:34ch;margin-bottom:var(--s-4)}
.door__go{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-gothic);
  text-transform:uppercase;letter-spacing:.06em;font-size:1.15rem}
.door__go .arw{transition:transform var(--dur) var(--ease)}
.door:hover .door__go .arw{transform:translateX(6px)}
/* brands = the dark edit bay */
.door--brands{background:var(--forest);color:var(--cream)}
.door--brands h2{color:var(--cream)}
.door--brands .door__num,.door--brands .door__q{color:var(--leaf)}
.door--brands p{color:rgba(255,253,246,.82)}
.door--brands .door__go{color:var(--cream)}
.door--brands:hover{background:#0f2e07}
/* creatives = the open call, light */
.door--creatives{background:var(--sprout);color:var(--forest)}
.door--creatives .door__num,.door--creatives .door__q{color:var(--green)}
.door--creatives p{color:var(--ink)}
.door--creatives .door__go{color:var(--green)}
.door--creatives:hover{background:#e3f1e5}

/* ============================================================================
   INTRO + PILLARS
   ========================================================================= */
.intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.intro h2{font-size:var(--fs-h1)}
.intro__body p{font-size:var(--fs-lede);line-height:1.45;font-family:var(--font-display);
  color:var(--forest)}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-top:var(--s-6)}
.pillar{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.4rem);position:relative;transition:transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease)}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pillar__tag{font-family:var(--font-type);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sage);margin-bottom:var(--s-2)}
.pillar h3{font-size:var(--fs-h3);margin-bottom:var(--s-2);color:var(--forest)}
.pillar h3 .amp{font-family:var(--font-script);color:var(--green)}
.pillar p{margin-bottom:0;color:var(--ink)}
.pillar--network{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.pillar--network h3{color:var(--cream)}
.pillar--network .pillar__tag{color:var(--leaf)}
.pillar--network p{color:rgba(255,253,246,.82)}

/* ============================================================================
   WORK (featured / contact-sheet grid)
   ========================================================================= */
.work__head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--s-4);margin-bottom:var(--s-6);flex-wrap:wrap}
.work__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-3)}
.tile{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--forest);
  min-height:220px;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.tile:hover,.tile:focus-within{transform:translateY(-4px);box-shadow:var(--shadow)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);
  opacity:.96}
.tile:hover img{transform:scale(1.05)}
/* captions stay visible (reads as a real contact sheet, works on touch) */
.tile__meta{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.2rem 1.1rem;
  background:linear-gradient(to top,rgba(11,35,5,.92),rgba(11,35,5,.5) 55%,rgba(11,35,5,0));
  color:var(--cream);display:flex;flex-direction:column;gap:.15rem}
.tile__role{transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.tile:hover .tile__frame{color:var(--bright)}
.tile__frame{font-family:var(--font-type);font-size:.68rem;letter-spacing:.16em;color:var(--leaf);
  transition:color var(--dur) var(--ease)}
.tile__title{font-family:var(--font-display);font-size:1.35rem;line-height:1.1}
.tile__role{font-family:var(--font-type);font-size:.7rem;letter-spacing:.1em;
  color:rgba(255,253,246,.8);text-transform:uppercase}
.tile--tall{grid-column:span 5;aspect-ratio:4/5}
.tile--wide{grid-column:span 7;aspect-ratio:3/2}
.tile--sq{grid-column:span 4;aspect-ratio:1}
.tile--half{grid-column:span 6;aspect-ratio:16/10}
/* promo tile — the "still filling up" panel, typed on Soft Sprout */
.tile--promo{background:var(--sprout);border:1px dashed var(--sage);display:flex}
.tile__promo{margin:auto;display:flex;flex-direction:column;gap:var(--s-2);
  text-align:center;padding:1.4rem;align-items:center}
.tile__promo .tile__frame{color:var(--green)}
.tile__promo .tile__title{color:var(--forest);max-width:16ch}
.tile__promo .door__go{color:var(--green);margin-top:.4rem}

/* ============================================================================
   FOUNDER
   ========================================================================= */
.founder__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center}
.founder__media .frame-arch{aspect-ratio:4/5;max-width:420px}
.founder__media .stamp{left:-14px;bottom:30px}
.founder h2{font-size:var(--fs-h1);margin-bottom:var(--s-3)}
.founder .sig{font-family:var(--font-script);font-size:2.4rem;color:var(--green);line-height:1}

/* ============================================================================
   CLOSER (Deep Forest band)
   ========================================================================= */
.closer{position:relative;text-align:center;overflow:hidden}
.closer__flower{position:absolute;pointer-events:none;opacity:.13;
  width:min(46vw,520px);right:-6%;bottom:-14%;filter:saturate(1.1)}
.closer__flower--l{left:-9%;right:auto;top:-16%;bottom:auto;width:min(34vw,380px);opacity:.09}
.closer .wip-stamp{color:var(--leaf)}
.closer h2{font-size:var(--fs-h1);max-width:16ch;margin-inline:auto;margin-block:var(--s-3) var(--s-5)}
.closer h2 .script{font-family:var(--font-script);color:var(--leaf);font-weight:400}
.closer__actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}

/* ============================================================================
   FOOTER
   ========================================================================= */
.site-foot{background:var(--forest);color:var(--cream);padding-block:var(--s-7) var(--s-5)}
.site-foot__grid{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:clamp(2rem,5vw,4rem)}
.site-foot .wordmark{font-size:1.35rem;margin-bottom:var(--s-3)}
.site-foot__tag{font-family:var(--font-display);font-size:1.6rem;color:var(--sprout);
  max-width:20ch;line-height:1.15;margin-bottom:var(--s-3)}
.site-foot__loc{font-family:var(--font-type);font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--leaf)}
.foot-col h4{font-family:var(--font-type);font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--leaf);margin-bottom:var(--s-3);font-weight:400}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.foot-col a{color:var(--cream)}
.foot-col a:hover{color:var(--leaf);text-decoration:none}
.foot-note{font-family:var(--font-type);font-size:.74rem;letter-spacing:.08em;
  color:var(--leaf);margin-top:var(--s-3)}
.site-foot__base{display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;
  margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line-rev);
  font-family:var(--font-type);font-size:.72rem;letter-spacing:.1em;color:rgba(255,253,246,.6);
  text-transform:uppercase}

/* ============================================================================
   FORMS (used on Build / CROP IN / Contact)
   ========================================================================= */
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4) var(--s-3)}
.field{display:flex;flex-direction:column;gap:.5rem}
.field--full{grid-column:1/-1}
.field label{font-family:var(--font-type);font-size:.82rem;letter-spacing:.06em;color:var(--forest)}
.field input,.field textarea,.field select{
  font-family:var(--font-body);font-size:1.02rem;color:var(--forest);
  background:var(--cream);border:1.5px solid var(--line);border-radius:10px;
  padding:.85em 1em;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(57,172,32,.18)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{
  border-color:#a3341f;box-shadow:0 0 0 3px rgba(163,52,31,.14)}
.field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__submit{grid-column:1/-1;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.form__status{font-family:var(--font-type);font-size:.85rem}
.form__status[data-state="ok"]{color:var(--green)}
.form__status[data-state="err"]{color:#a3341f}

/* generic page hero for interior pages */
.page-hero{padding-block:clamp(3rem,7vw,6rem) clamp(2rem,4vw,3.5rem)}
.page-hero h1{font-size:var(--fs-h1);max-width:18ch}
.page-hero .lede{max-width:52ch;margin-top:var(--s-3)}

/* spec sheet — mission / vision as typed call-sheet rows */
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:var(--s-6);
  border-top:1px solid var(--line)}
.spec{padding:var(--s-4) var(--s-4) var(--s-4) 0}
.spec__k{font-family:var(--font-type);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sage);margin-bottom:var(--s-2)}
.spec__v{font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.15;
  color:var(--forest);margin:0}

/* process — the 3 steps on Build with CROP */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);margin-top:var(--s-6)}
.step{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.4rem);position:relative}
.step__n{font-family:var(--font-type);font-size:.78rem;letter-spacing:.18em;color:var(--green);
  margin-bottom:var(--s-3)}
.step h3{font-size:var(--fs-h3);margin-bottom:var(--s-2)}
.step p{margin:0;color:var(--ink)}

/* reasons — the What / Why / Why now on CROP In */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);margin-top:var(--s-6)}
.reason{padding:var(--s-4) 0;border-top:2px solid var(--green)}
.reason h3{font-size:var(--fs-h3);margin-bottom:var(--s-2)}
.reason p{margin:0;color:var(--ink)}

/* contact detail rows */
.contact-list{list-style:none;margin:var(--s-5) 0 0;padding:0;
  border-top:1px solid var(--line)}
.contact-list li{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:baseline;
  padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.contact-list .k{font-family:var(--font-type);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sage);min-width:9rem}
.contact-list .v{font-family:var(--font-display);font-size:1.5rem;color:var(--forest)}
.contact-list .v a{color:var(--green)}

/* form card wrapper */
.form-card{background:var(--offwhite);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.6rem,4vw,3rem)}

/* ============================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:var(--s-5)}
  .hero__media{order:-1;max-width:460px}
  .fork__grid{grid-template-columns:1fr}
  .fork__grid .door{min-height:auto;padding-block:clamp(2.4rem,7vw,3.4rem)}
  .intro__grid{grid-template-columns:1fr;gap:var(--s-5)}
  .pillars{grid-template-columns:1fr}
  .founder__grid{grid-template-columns:1fr;gap:var(--s-5)}
  .founder__media{order:-1;max-width:380px}
  .site-foot__grid{grid-template-columns:1fr 1fr}
  .tile--tall,.tile--wide,.tile--sq,.tile--half{grid-column:span 6}
  .specs{grid-template-columns:1fr 1fr}
  .steps,.reasons{grid-template-columns:1fr}
  .spec{border-top:1px solid var(--line)}
}
@media (max-width:720px){
  :root{--header-h:64px}
  .nav-info,.nav-cta{display:none}
  .nav-toggle{display:inline-flex}
  .site-head__row{grid-template-columns:auto 1fr auto}
  .site-head .wordmark{justify-self:start}
  .form{grid-template-columns:1fr}
  .site-foot__grid{grid-template-columns:1fr}
  .work__grid{gap:var(--s-2)}
}
@media (max-width:560px){
  .hero__actions .btn,.closer__actions .btn,.form__submit .btn{width:100%;justify-content:center}
  .tile--tall,.tile--wide,.tile--sq,.tile--half{grid-column:span 12}
  .site-foot__base{flex-direction:column;gap:.5rem}
  .specs{grid-template-columns:1fr}
}