/* ============================================================
   1. DESIGN TOKENS  (the brand, as variables)
   Change a value here and it updates everywhere.
   ============================================================ */
:root{
  /* Palette — from Brand/03-visual-identity.md */
  --bone:   #ECE4D3; /* space — primary background */
  --stone:  #C7BAA3; /* bridge — surfaces, dividers */
  --sage:   #6E7560; /* ground — supporting green */
  --sprout: #82A24A; /* change — ACCENT ONLY: links, CTAs, highlights */
  --ochre:  #BC8A45; /* warmth — occasional emphasis */
  --soil:   #2F2A23; /* anchor — text + logo */

  /* A couple of derived tints for soft surfaces */
  --bone-deep: #E4D9C4;
  --soil-80: rgba(47,42,35,.80);
  --soil-60: rgba(47,42,35,.60);

  /* Type */
  --display: 'GT Canon','Playfair Display',Georgia,serif;
  --body: 'GT America','Inter',system-ui,sans-serif;

  /* Rhythm */
  --maxw: 1200px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(3rem, 6vw, 5.25rem);

  /* Motion */
  --ease: cubic-bezier(.22,1,.36,1);   /* a soft, confident ease-out */
  --slow: .9s;
}

/* ============================================================
   1b. FONTS — GT Canon (display)
   Real headline face, replacing the Playfair stand-in.
   NOTE: this is the TRIAL version (fine for this private preview).
   Buy the licensed web font from Grilli Type before public launch
   and swap the file in /fonts. Body stays Inter until GT America
   is licensed too.
   ============================================================ */
@font-face{
  font-family:'GT Canon';
  src:url('fonts/GT-Canon-Trial-VF.ttf') format('truetype-variations'),
      url('fonts/GT-Canon-Trial-VF.ttf') format('truetype');
  font-weight:100 900;          /* variable font — all weights in one file */
  font-style:normal;
  font-display:swap;
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{
  font-family:var(--body);
  font-weight:400;
  color:var(--soil);
  background:var(--bone);
  line-height:1.6;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{ font-family:var(--display); font-weight:500; line-height:1.12; letter-spacing:-.01em; }
h1{ font-size:clamp(2.6rem, 7vw, 5.4rem); }
h2{ font-size:clamp(2rem, 4.5vw, 3.4rem); }
h3{ font-size:clamp(1.3rem, 2.2vw, 1.7rem); }
p{ max-width:60ch; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.eyebrow{
  font-family:var(--body); font-size:.8rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sage);
}
.lede{ font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--soil-80); }

/* The single accent colour — used sparingly, on purpose */
.accent{ color:var(--sprout); }

/* ============================================================
   3. BUTTONS / LINKS
   ============================================================ */
.btn{
  --bg:var(--soil); --fg:var(--bone);
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:500; font-size:.98rem;
  padding:.85em 1.5em; border-radius:0;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bg);
  cursor:pointer; position:relative;
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn:hover .arr{ transform:translateX(4px); }
/* Primary CTA = the one place Sprout leads */
.btn--cta{ --bg:var(--sprout); --fg:#1c2410; border-color:var(--sprout); }
.btn--ghost{ --bg:transparent; --fg:var(--soil); border-color:var(--soil); }
.btn--ghost:hover{ background:var(--soil); color:var(--bone); }

.txtlink{
  color:var(--soil); font-weight:500; position:relative;
}
.txtlink::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background:var(--sprout); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.txtlink:hover::after{ transform:scaleX(1); }

/* ============================================================
   4. HEADER + NAV
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--gutter);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
/* Solid state after scrolling past the hero */
.site-header.scrolled{
  background:rgba(236,228,211,.88);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 1px 0 rgba(47,42,35,.08);
  padding-top:.75rem; padding-bottom:.75rem;
}
.brand-lockup{ display:flex; align-items:center; gap:.7rem; }
.brand-lockup .mark{ width:38px; height:38px; flex:none; }
.brand-lockup .wordmark{ font-family:var(--display); font-size:1.35rem; font-weight:600; letter-spacing:-.01em; }

/* Nav */
.nav{ display:flex; align-items:center; gap:.15rem; }
.nav a.navlink, .nav button.navlink{
  font-family:var(--body); font:inherit; font-size:.92rem; font-weight:500;
  color:var(--soil); background:none; border:0; cursor:pointer;
  padding:.5rem .62rem; border-radius:0; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.3rem;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav a.navlink:hover, .nav button.navlink:hover{ color:var(--sage); }
.nav a.navlink[aria-current="page"]{ color:var(--sage); }
.nav .nav-cta{ margin-left:.45rem; }
/* slightly smaller CTA in the busier nav */
.nav .nav-cta{ padding:.7em 1.15em; font-size:.9rem; }

/* Over a dark hero (inner-page tops) before scroll → flip header to light.
   Wordmark, logo mark and the mobile menu bars flip at every width; the
   nav links only flip on the desktop bar, because on mobile they live in
   a light slide-in panel where dark text is correct. */
.site-header.over-dark .wordmark{ color:var(--bone); }
.site-header.over-dark .mark circle,
.site-header.over-dark .mark path{ stroke:var(--bone); }
.site-header.over-dark .menu-toggle span{ background:var(--bone); }
@media (min-width:1025px){
  .site-header.over-dark a.navlink,
  .site-header.over-dark button.navlink{ color:var(--bone); }
  .site-header.over-dark a.navlink:hover,
  .site-header.over-dark button.navlink:hover{ color:var(--sprout); }
  .site-header.over-dark a.navlink[aria-current="page"]{ color:var(--sprout); }
}

/* Dropdown */
.has-drop{ position:relative; }
.drop-caret{ transition:transform .3s var(--ease); }
.has-drop[aria-expanded="true"] .drop-caret{ transform:rotate(180deg); }
.dropdown{
  position:absolute; top:calc(100% + .4rem); left:50%; transform:translateX(-50%) translateY(8px);
  min-width:260px; background:var(--bone); border:1px solid rgba(47,42,35,.1);
  border-radius:0; padding:.6rem; box-shadow:0 18px 50px -20px rgba(47,42,35,.4);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.has-drop[aria-expanded="true"] .dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.dropdown .drop-head{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage); padding:.5rem .8rem .3rem; }
.dropdown a{
  display:block; padding:.7rem .8rem; border-radius:0;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.dropdown a strong{ font-weight:500; display:block; }
.dropdown a span{ font-size:.85rem; color:var(--soil-60); }
.dropdown a:hover{ background:var(--bone-deep); transform:translateX(3px); }

/* Mobile menu button (hidden on desktop) */
.menu-toggle{ display:none; }

/* ============================================================
   5. HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:6rem; padding-bottom:4rem; overflow:hidden;
  color:var(--bone);
  /* Montana photo under soil gradients: a top band keeps the (light) nav
     legible against the bright sky, and a left-to-right wash keeps the
     headline crisp while letting the landscape read through on the right. */
  background-image:
    linear-gradient(to bottom, rgba(34,30,24,.55) 0%, rgba(34,30,24,0) 24%),
    linear-gradient(100deg, rgba(34,30,24,.88) 0%, rgba(34,30,24,.66) 50%, rgba(34,30,24,.42) 100%),
    url('img/hero.jpg');
  background-size:cover; background-position:center;
}
.hero h1{ color:var(--bone); }
.hero .lede{ color:rgba(236,228,211,.92); }
.hero .txtlink{ color:var(--bone); }
/* Big faint gate-ring motif, parallaxed — light over the photo */
.hero-motif{
  position:absolute; right:0; top:50%; translate:0 -50%;
  width:min(58vw,680px); aspect-ratio:1; z-index:0;
  color:var(--bone); opacity:.16; pointer-events:none;
  will-change:transform;
}
.hero .wrap{ position:relative; z-index:2; }
.hero-brandline{ margin-bottom:1.4rem; }
.hero h1{ max-width:16ch; }
/* padding-bottom keeps descenders (g, y, p) from being clipped by the
   overflow:hidden reveal; the negative margin keeps the visual spacing. */
.hero h1 .line{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.hero h1 .line > span{ display:block; will-change:transform; }
.hero-sub{ margin-top:1.6rem; max-width:48ch; }
.hero-actions{ margin-top:2.4rem; display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; }

/* Scroll cue */
.scroll-cue{
  position:absolute; left:var(--gutter); bottom:1.6rem; z-index:2;
  display:flex; align-items:center; gap:.6rem; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--soil-60);
}
.scroll-cue .dot{ width:8px; height:8px; border-radius:50%; background:var(--sprout); animation:cue 1.8s var(--ease) infinite; }
@keyframes cue{ 0%,100%{ transform:translateY(0); opacity:1 } 50%{ transform:translateY(6px); opacity:.4 } }

/* ============================================================
   6. SECTIONS / LAYOUT HELPERS
   ============================================================ */
section{ position:relative; }
.section{ padding-block:var(--section-y); }
.section--soil{ background:var(--soil); color:var(--bone); }
.section--soil .eyebrow{ color:var(--stone); }
.section--soil .lede{ color:rgba(236,228,211,.82); }
.section--sage{ background:var(--sage); color:var(--bone); }
.section--sage .eyebrow{ color:rgba(236,228,211,.8); }
.section--stone{ background:var(--stone); }

.section-head{ max-width:760px; margin-bottom:clamp(2.5rem,5vw,4rem); }
.section-head h2{ margin-top:.8rem; }
.section-head p{ margin-top:1.2rem; }

/* "What we name" — the honest hook */
.problem h2{ max-width:18ch; }
.problem .big{ font-family:var(--display); font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.3; max-width:24ch; }
.problem .big .accent{ font-style:italic; }

/* How we work — three steps with a flowing thread */
.steps{ display:grid; gap:2rem; grid-template-columns:repeat(3,1fr); margin-top:3rem; position:relative; }
.thread{ position:absolute; inset:0 0 auto 0; top:34px; width:100%; height:60px; z-index:0; pointer-events:none; overflow:visible; }
.step{ position:relative; z-index:1; }
.step .num{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:1.4rem; color:var(--bone);
  background:var(--sage); margin-bottom:1.3rem;
}
.step:nth-child(3) .num{ background:var(--soil); }       /* the resolution step grounds in Soil */
.step h3{ margin-bottom:.5rem; }
.step p{ color:var(--soil-80); }

/* Pillars */
.pillars{ display:grid; gap:1px; grid-template-columns:repeat(2,1fr); background:rgba(236,228,211,.16); border:1px solid rgba(236,228,211,.16); border-radius:0; overflow:hidden; margin-top:1rem; }
.pillar{ background:var(--soil); padding:clamp(1.6rem,3vw,2.6rem); transition:background .4s var(--ease); }
.pillar:hover{ background:#37322a; }
.pillar .idx{ color:var(--sprout); font-family:var(--display); font-size:1.1rem; }
.pillar h3{ margin:.8rem 0 .6rem; }
.pillar p{ color:rgba(236,228,211,.72); }

/* "What I bring" — the four pillars folded compactly into How I work.
   Lightweight row on the light surface, divided from the steps above. */
.brings{ display:grid; gap:1.6rem 2rem; grid-template-columns:repeat(4,1fr); margin-top:3rem; padding-top:2.6rem; border-top:1px solid rgba(47,42,35,.12); }
.bring .idx{ font-family:var(--display); color:var(--sprout); font-size:1rem; }
.bring h3{ font-size:1.12rem; margin:.4rem 0 .45rem; }
.bring p{ color:var(--soil-80); font-size:.92rem; }
@media (max-width:880px){ .brings{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .brings{ grid-template-columns:1fr; } }

/* Audience router — quick self-select doors near the top of home.
   Four equal doors (no implied ranking); each lifts and inverts to
   Soil on hover, with the brand corner-mark picking up the Sprout accent. */
.router{ display:grid; gap:1rem; grid-template-columns:repeat(4,1fr); margin-top:1rem; }
.door{
  display:flex; flex-direction:column; gap:.55rem;
  padding:1.7rem 1.55rem; border-radius:0;
  background:var(--bone-deep); border:1px solid rgba(47,42,35,.08);
  color:var(--soil);
  transition:transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
}
.door:hover{ transform:translateY(-4px); background:var(--soil); color:var(--bone); box-shadow:0 20px 44px -24px rgba(47,42,35,.55); }
.door .door-mark{ width:30px; height:30px; color:var(--sage); transition:color .35s var(--ease); }
.door:hover .door-mark{ color:var(--sprout); }
.door h3{ font-size:1.15rem; }
.door p{ font-size:.92rem; color:var(--soil-80); flex:1; transition:color .35s var(--ease); }
.door:hover p{ color:rgba(236,228,211,.8); }
.door .door-go{ font-size:.86rem; font-weight:500; color:var(--sage); display:inline-flex; align-items:center; gap:.4rem; transition:color .35s var(--ease); }
.door:hover .door-go{ color:var(--sprout); }
.door:hover .door-go .arr{ transform:translateX(4px); }
.door .door-go .arr{ transition:transform .35s var(--ease); }
@media (max-width:880px){ .router{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .router{ grid-template-columns:1fr; } }

/* Audiences — photo-forward */
.audiences{ display:grid; gap:1.6rem; grid-template-columns:repeat(3,1fr); margin-top:1rem; }
.aud{ display:flex; flex-direction:column; }
.photo-ph{
  position:relative; aspect-ratio:4/5; border-radius:0; overflow:hidden;
  background:linear-gradient(160deg,var(--stone),var(--bone-deep));
  display:flex; align-items:flex-end; padding:1rem;
  border:1px solid rgba(47,42,35,.08);
}
.photo-ph::before{
  content:"PHOTO"; position:absolute; top:14px; left:14px;
  font-size:.66rem; letter-spacing:.16em; color:var(--soil-60);
  border:1px solid var(--soil-60); border-radius:0; padding:.25em .7em;
}
.photo-ph .ph-note{ font-size:.8rem; color:var(--soil-80); background:rgba(236,228,211,.7); padding:.4em .7em; border-radius:0; }
.aud h3{ margin:1.1rem 0 .4rem; }
.aud p{ color:var(--soil-80); font-size:.98rem; }
.aud .txtlink{ margin-top:.8rem; display:inline-block; font-size:.9rem; }

/* Trajectory — where it's headed */
.traj{ display:grid; gap:1.4rem; grid-template-columns:repeat(3,1fr); margin-top:2.5rem; }
.traj .stage{ padding:1.8rem; border-radius:0; background:rgba(236,228,211,.5); border:1px solid rgba(47,42,35,.08); }
.traj .stage .tag{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ochre); font-weight:500; }
.traj .stage.is-now{ background:var(--soil); color:var(--bone); }
.traj .stage.is-now .tag{ color:var(--sprout); }
.traj .stage h3{ margin:.7rem 0 .5rem; }
.traj .stage p{ font-size:.95rem; color:var(--soil-80); }
.traj .stage.is-now p{ color:rgba(236,228,211,.75); }

/* Proof / testimonials — quote cards on the light bone surface */
.quotes{ display:grid; gap:1.4rem; grid-template-columns:repeat(3,1fr); margin-top:1rem; }
.quote{
  display:flex; flex-direction:column; gap:1.2rem;
  padding:1.8rem 1.7rem; border-radius:0;
  background:rgba(236,228,211,.5); border:1px solid rgba(47,42,35,.08);
  position:relative;
}
.quote::before{
  content:"\201C"; font-family:var(--display); color:var(--sprout);
  font-size:3.2rem; line-height:.6; height:.5em;
}
.quote blockquote{ font-size:1.02rem; color:var(--soil); line-height:1.5; flex:1; }
.quote figcaption{ display:flex; flex-direction:column; gap:.15rem; }
.quote .q-name{ font-weight:500; }
.quote .q-meta{ font-size:.85rem; color:var(--soil-60); }
@media (max-width:880px){ .quotes{ grid-template-columns:1fr; } }

/* Partners — companies/products backed across the system */
.partner-grid{ display:grid; gap:1.4rem; grid-template-columns:repeat(2,1fr); margin-top:1rem; }
.partner-grid--3{ grid-template-columns:repeat(3,1fr); }
/* Rotator: stack cards in one grid cell and fade through them one at a time */
.partner-rotator{ display:grid; margin-top:1rem; }
.partner-rotator > .partner{ grid-area:1/1; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .8s var(--ease), visibility .8s, transform .35s var(--ease); }
.partner-rotator > .partner.is-active{ opacity:1; visibility:visible; pointer-events:auto; }
@media (prefers-reduced-motion: reduce){ .partner-rotator > .partner{ transition:none; } }
.partner{
  display:flex; flex-direction:column; gap:.7rem;
  padding:1.9rem 1.8rem; border-radius:0;
  background:var(--bone-deep); border:1px solid rgba(47,42,35,.08); color:var(--soil);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.partner:hover{ transform:translateY(-4px); box-shadow:0 20px 44px -24px rgba(47,42,35,.5); }
.partner-tag{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ochre); font-weight:500; }
.partner h3{ font-size:1.5rem; }
/* Venture logos: sit in the card's h3 slot. Images get a uniform height;
   Nutrax is a typeset wordmark (all-caps Montserrat, bold X). */
.partner-name{ margin:0; min-height:40px; display:flex; align-items:center; }
/* Sized so the LETTERFORMS land at ~22px across all four, not the raw boxes
   (PROOF's glyphs fill its box; ProAgni's wordmark is only ~⅔ of its canvas
   because of the droplet icon). Tweak these four values together to scale. */
img.partner-logo{ display:block; width:auto; max-width:85%; }
img.partner-logo[alt="PROOF"]{ height:23px; }
img.partner-logo[alt="ProAgni"]{ height:32px; }
img.partner-logo[alt="Nutrax"]{ height:22px; }
img.partner-logo[alt="JustPicked"]{ height:22px; }
.partner p{ color:var(--soil-80); font-size:.96rem; flex:1; }
.partner-go{ font-size:.88rem; font-weight:500; color:var(--sage); display:inline-flex; align-items:center; gap:.4rem; transition:color .35s var(--ease); }
.partner:hover .partner-go{ color:var(--sprout); }
@media (max-width:980px){ .partner-grid--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){ .partner-grid, .partner-grid--3{ grid-template-columns:1fr; } }

/* Newsletter band — copy beside the official Substack embed */
.newsletter-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.newsletter-embed{ display:flex; justify-content:center; }
.newsletter-embed iframe{ width:480px; max-width:100%; }
@media (max-width:880px){ .newsletter-grid{ grid-template-columns:1fr; } }

/* CTA band — every block element centers (p has a max-width, so without
   margin-inline:auto the eyebrow/lede sit off-center-left of the heading) */
.cta-band{ text-align:center; }
.cta-band h2{ max-width:20ch; margin-inline:auto; margin-bottom:2rem; }
.cta-band p{ margin-inline:auto; }
.cta-band .lede{ margin:1.2rem auto 2.2rem; }
/* Homepage foodshed band — a little breathing room from the hero above it */
.foodshed-band{ margin-top:clamp(1.5rem,4vw,3.5rem); }

/* ============================================================
   7. FOOTER
   ============================================================ */
.site-footer{ background:var(--soil); color:var(--bone); padding-block:clamp(3rem,6vw,5rem) 2rem; }
.footer-grid{ display:grid; gap:2.5rem; grid-template-columns:1.4fr 1fr 1fr; }
.site-footer .brand-lockup .wordmark{ color:var(--bone); }
.footer-brandline{ margin-top:1.2rem; color:rgba(236,228,211,.7); max-width:34ch; }
.foot-col h4{ font-family:var(--body); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); margin-bottom:1rem; }
.foot-col a{ display:block; color:rgba(236,228,211,.85); padding:.32rem 0; transition:color .2s var(--ease); }
.foot-col a:hover{ color:var(--sprout); }
.signup{ margin-top:1.6rem; }
.signup .btn{ margin-top:1rem; }
.footer-news{ color:rgba(236,228,211,.7); font-size:.92rem; max-width:32ch; margin:.5rem 0 1rem; }
.signup form{ display:flex; gap:.5rem; max-width:340px; margin-top:.7rem; }
.signup input{
  flex:1; font:inherit; padding:.7em 1em; border-radius:0;
  border:1px solid rgba(236,228,211,.3); background:rgba(236,228,211,.06); color:var(--bone);
}
.signup input::placeholder{ color:rgba(236,228,211,.5); }
.signup button{ padding:.7em 1.3em; }
.footer-base{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(236,228,211,.14);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.85rem; color:rgba(236,228,211,.6); }

/* ============================================================
   8. SCROLL-REVEAL  (added by JS when an element enters view)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal.in{ opacity:1; transform:none; }
/* stagger children */
.stagger > *{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.stagger.in > *{ opacity:1; transform:none; }
.stagger.in > *:nth-child(2){ transition-delay:.08s; }
.stagger.in > *:nth-child(3){ transition-delay:.16s; }
.stagger.in > *:nth-child(4){ transition-delay:.24s; }

/* ============================================================
   9. RESPONSIVE
   ============================================================ */
/* Content grids collapse on smaller screens */
@media (max-width:880px){
  .steps,.audiences,.traj{ grid-template-columns:1fr; }
  .pillars{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .thread{ display:none; }
}

/* Nav switches to a slide-in menu earlier (1024px) because there are now
   seven top-level items — keeps the desktop bar from crowding. */
@media (max-width:1024px){
  .menu-toggle{
    display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.5rem;
  }
  .menu-toggle span{ width:26px; height:2px; background:var(--soil); transition:transform .3s var(--ease), opacity .3s var(--ease); }
  body.menu-open .menu-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.menu-open .menu-toggle span:nth-child(2){ opacity:0; }
  body.menu-open .menu-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .nav{
    position:fixed; inset:0; flex-direction:column; justify-content:center; gap:.3rem;
    background:var(--bone); padding:2rem; overflow-y:auto;
    transform:translateX(100%); transition:transform .45s var(--ease);
  }
  body.menu-open .nav{ transform:translateX(0); }
  .nav a.navlink, .nav button.navlink{ font-size:1.3rem; font-family:var(--display); }
  .nav .nav-cta{ margin:1rem 0 0; font-size:1rem; }
  /* Dropdown becomes inline on mobile */
  .dropdown{ position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    box-shadow:none; border:0; background:transparent; min-width:0; text-align:center; }
  .has-drop:not([aria-expanded="true"]) .dropdown{ display:none; }
  .dropdown a span{ display:none; }
}

/* ============================================================
   10. REDUCED MOTION  (respect the visitor's OS setting)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal,.stagger > *{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   11. INNER PAGES  (About, What we do, Contact, Resources)
   Added when the site grew past one page.
   ============================================================ */

/* Page header band — a calmer hero for interior pages */
.page-head{
  position:relative; padding-top:9rem; padding-bottom:clamp(2.5rem,6vw,4.5rem);
  overflow:hidden;
}
.page-head .wrap{ position:relative; z-index:2; }
.page-head h1{ font-size:clamp(2.4rem,5.5vw,4.2rem); max-width:18ch; margin-top:.7rem; }
.page-head .lede{ margin-top:1.4rem; max-width:54ch; }
/* faint corner motif, top-right — hidden on interior page-heads per
   feedback (kept only on the homepage hero, which uses its own motif). */
.page-head .head-motif{
  display:none;
  position:absolute; top:50%; translate:0 -50%; right:3vw; width:min(38vw,360px); aspect-ratio:1;
  color:var(--stone); opacity:.5; z-index:0; pointer-events:none;
}
.page-head.on-soil{ background:var(--soil); color:var(--bone); }
.page-head.on-soil .eyebrow{ color:var(--stone); }
.page-head.on-soil .lede{ color:rgba(236,228,211,.82); }
.page-head.on-sage{ background:var(--sage); color:var(--bone); }
.page-head.on-sage .eyebrow{ color:rgba(236,228,211,.8); }
.page-head.on-sage .lede{ color:rgba(236,228,211,.85); }
/* Photo page-heads — same treatment as the homepage hero. Set the image
   per page with style="--ph-img:url('img/NAME.jpg')". Placed after .on-soil
   so it wins the background tie; keeps soil as the colour fallback. */
.page-head.page-head--photo{
  background-color:var(--soil);
  background-image:
    linear-gradient(to bottom, rgba(34,30,24,.55) 0%, rgba(34,30,24,0) 32%),
    linear-gradient(105deg, rgba(34,30,24,.86) 0%, rgba(34,30,24,.62) 55%, rgba(34,30,24,.42) 100%),
    var(--ph-img);
  background-size:cover; background-position:center;
}
.page-head--photo .head-motif{ color:var(--bone); opacity:.14; }

/* Generic two-column layout (text + media/aside) */
.cols{ display:grid; gap:clamp(2rem,5vw,4.5rem); grid-template-columns:1.1fr .9fr; align-items:start; }
.cols.flip{ grid-template-columns:.9fr 1.1fr; }
.cols--narrow{ grid-template-columns:1fr 1fr; }
@media (max-width:880px){ .cols,.cols.flip,.cols--narrow{ grid-template-columns:1fr; } }

/* Article prose (for story sections, resource intros) */
.prose p{ margin-bottom:1.1rem; color:var(--soil-80); }
.prose p.lead{ font-size:clamp(1.1rem,1.6vw,1.35rem); color:var(--soil); }
.prose h3{ margin:2rem 0 .6rem; }

/* Convictions / value list */
.beliefs{ display:grid; gap:1.2rem; grid-template-columns:repeat(2,1fr); margin-top:2rem; }
@media (max-width:760px){ .beliefs{ grid-template-columns:1fr; } }
.belief{ display:flex; gap:1rem; }
.belief .b-num{ font-family:var(--display); color:var(--sprout); font-size:1.1rem; line-height:1.2; flex:none; width:2ch; }
.belief p{ color:var(--soil-80); }

/* Wide photo placeholder (landscape) */
.photo-ph.wide{ aspect-ratio:3/2; }
.photo-ph.tall{ aspect-ratio:3/4; }
.photo-ph.square{ aspect-ratio:1; }
/* Real photos — drop into the same footprint as the .photo-ph placeholders */
.photo{ display:block; width:100%; height:auto; object-fit:cover; border-radius:0; border:1px solid rgba(47,42,35,.08); }
.photo.wide{ aspect-ratio:3/2; }
.photo.tall{ aspect-ratio:3/4; }

/* Quote / pull statement */
.pull{ font-family:var(--display); font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.3; max-width:24ch; }
.pull .accent{ font-style:italic; }

/* "Coming soon" / placeholder content blocks for resource skeletons */
.placeholder-card{
  border:1.5px dashed rgba(47,42,35,.28); border-radius:0;
  padding:clamp(1.4rem,3vw,2rem); background:rgba(236,228,211,.4);
}
.placeholder-card .soon{
  display:inline-block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ochre); border:1px solid var(--ochre); border-radius:0; padding:.25em .7em; margin-bottom:.9rem;
}
.placeholder-card h3{ margin-bottom:.5rem; }
.placeholder-card p{ color:var(--soil-80); }
.res-grid{ display:grid; gap:1.4rem; grid-template-columns:repeat(2,1fr); margin-top:1rem; }
@media (max-width:760px){ .res-grid{ grid-template-columns:1fr; } }

/* Resource quick-links to the other audiences */
.audience-switch{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.audience-switch a{
  font-size:.9rem; font-weight:500; padding:.5em 1em; border-radius:0;
  border:1px solid rgba(47,42,35,.2); transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.audience-switch a:hover{ background:var(--soil); color:var(--bone); border-color:var(--soil); }
.audience-switch a[aria-current="page"]{ background:var(--sprout); color:#1c2410; border-color:var(--sprout); }

/* ---- Contact form ---- */
.contact-grid{ display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1.1fr .9fr; align-items:start; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }
.form{ display:grid; gap:1.1rem; }
.field{ display:grid; gap:.4rem; }
.field label{ font-size:.85rem; font-weight:500; }
.field .req{ color:var(--sprout); }
.field input, .field select, .field textarea{
  font:inherit; color:var(--soil); background:var(--bone);
  border:1px solid rgba(47,42,35,.25); border-radius:0; padding:.8em 1em;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--sprout); box-shadow:0 0 0 3px rgba(130,162,74,.2);
}
.field textarea{ min-height:140px; resize:vertical; }
.form .btn{ justify-self:start; margin-top:.4rem; }
.contact-aside{ background:var(--soil); color:var(--bone); border-radius:0; padding:clamp(1.6rem,3vw,2.4rem); }
.contact-aside h3{ margin-bottom:.8rem; }
.contact-aside p{ color:rgba(236,228,211,.8); margin-bottom:1.2rem; }
.contact-aside a.txtlink{ color:var(--bone); }
.contact-aside a.txtlink::after{ background:var(--sprout); }
.contact-meta{ display:grid; gap:.9rem; margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid rgba(236,228,211,.16); }
.contact-meta .row{ display:flex; flex-direction:column; gap:.15rem; font-size:.95rem; color:rgba(236,228,211,.85); }
.contact-meta .row b{ color:var(--bone); font-weight:500; }

/* ============================================================
   12. RESTRUCTURE (2026-06-09): personal practice + 3 arms
   Consulting offerings, Think Tank / Fund initiative pages,
   merged Resources & Solutions.
   ============================================================ */

/* Small status / development banner */
.note-banner{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.85rem; color:var(--soil-80);
  background:rgba(188,138,69,.14); border:1px solid rgba(188,138,69,.4);
  border-radius:0; padding:.5em 1em; margin-bottom:1.4rem;
}
.note-banner .dotw{ width:8px; height:8px; border-radius:50%; background:var(--ochre); flex:none; }
.section--soil .note-banner, .section--sage .note-banner, .on-soil .note-banner, .on-sage .note-banner{
  color:rgba(236,228,211,.9); background:rgba(236,228,211,.1); border-color:rgba(236,228,211,.3);
}

/* "A Qorner initiative" badge */
.initiative-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  color:var(--sage); margin-bottom:1rem;
}
.initiative-badge svg{ width:18px; height:18px; }
.on-soil .initiative-badge, .on-sage .initiative-badge{ color:var(--stone); }

/* Outbound-link button (for when TT/Fund move to their own sites) */
.btn--out{ --bg:transparent; --fg:currentColor; border-color:currentColor; }
.btn--out .arr{ font-size:1.1em; }

/* Offerings / service cards */
.offerings{ display:grid; gap:1.6rem; grid-template-columns:repeat(3,1fr); margin-top:1rem; }
@media (max-width:880px){ .offerings{ grid-template-columns:1fr; } }
.offer{
  background:rgba(236,228,211,.5); border:1px solid rgba(47,42,35,.1);
  border-radius:0; padding:clamp(1.5rem,3vw,2.1rem);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.offer:hover{ transform:translateY(-4px); box-shadow:0 22px 50px -28px rgba(47,42,35,.5); border-color:rgba(47,42,35,.2); }
.offer .o-icon{ width:46px; height:46px; color:var(--sage); margin-bottom:1rem; }
.offer h3{ margin-bottom:.5rem; }
.offer p{ color:var(--soil-80); font-size:.97rem; }

/* Feature / checklist list */
.feature-list{ list-style:none; display:grid; gap:.7rem; margin-top:1rem; }
.feature-list li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--soil-80); }
.feature-list li::before{
  content:""; flex:none; width:20px; height:20px; margin-top:.15rem; border-radius:50%;
  background:var(--sprout) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2410' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.section--soil .feature-list li, .section--sage .feature-list li{ color:rgba(236,228,211,.85); }

/* Stat band (e.g. fund thesis figures) */
.stats{ display:grid; gap:1.5rem; grid-template-columns:repeat(3,1fr); margin-top:2rem; }
@media (max-width:760px){ .stats{ grid-template-columns:1fr; } }
.stat .num{ font-family:var(--display); font-size:clamp(2.2rem,4vw,3rem); line-height:1; color:var(--sprout); }
.stat p{ margin-top:.6rem; color:var(--soil-80); font-size:.95rem; }
.section--soil .stat p, .section--sage .stat p{ color:rgba(236,228,211,.8); }

/* The three arms (homepage) */
.arms{ display:grid; gap:1.4rem; grid-template-columns:repeat(3,1fr); margin-top:2.5rem; }
@media (max-width:880px){ .arms{ grid-template-columns:1fr; } }
.arm{
  display:flex; flex-direction:column; padding:clamp(1.5rem,3vw,2.1rem);
  border-radius:0; background:rgba(236,228,211,.5); border:1px solid rgba(47,42,35,.1);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.arm:hover{ transform:translateY(-4px); box-shadow:0 22px 50px -28px rgba(47,42,35,.5); }
.arm .arm-tag{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ochre); font-weight:500; }
.arm h3{ margin:.7rem 0 .5rem; }
.arm p{ color:var(--soil-80); font-size:.96rem; flex:1; }
.arm .txtlink{ margin-top:1rem; font-size:.92rem; }
.arm.is-lead{ background:var(--soil); color:var(--bone); }
.arm.is-lead .arm-tag{ color:var(--sprout); }
.arm.is-lead p{ color:rgba(236,228,211,.78); }
.arm.is-lead .txtlink{ color:var(--bone); }
.arm.is-lead .txtlink::after{ background:var(--sprout); }

/* ============================================================
   13. CONTACT FORM — AJAX states (success / error)
   ============================================================ */
[hidden]{ display:none !important; }
.form-wrap{ width:100%; }
.form-error{
  color:#7a2e2e; background:rgba(188,69,69,.1); border:1px solid rgba(188,69,69,.4);
  border-radius:0; padding:.7em 1em; font-size:.9rem;
}
.form-success{
  background:rgba(130,162,74,.12); border:1px solid var(--sprout);
  border-radius:0; padding:clamp(1.6rem,3vw,2.2rem);
}
.form-success .fs-icon{
  width:48px; height:48px; border-radius:50%; background:var(--sprout); color:#1c2410;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700;
  margin-bottom:1.1rem;
}
.form-success h3{ margin-bottom:.5rem; }
.form-success p{ color:var(--soil-80); }

/* ============================================================
   14. RESOURCES HUB + AUDIENCE LIBRARIES (2026-06-10)
   The hub (resources/index.html) organizes three things: guides
   by audience (reuses the .door/.router pattern), coming-soon
   tools (.tool-feature), and the newsletter (reuses .newsletter).

   The audience pages hold "shelves": .lib > .lib-cat > .lib-list.
   FILTER-READY: every .lib-cat carries data-cat and every
   .lib-item carries data-type (guide / grant / directory /
   network / data / newsletter / initiative). When the libraries
   grow past a screenful, a small filter UI can show/hide items
   by those attributes — no markup changes needed.
   ============================================================ */

/* The shelves — categories stacked with room to breathe */
.lib{ display:grid; gap:clamp(2.6rem,5vw,4rem); }
.lib-cat-head{ max-width:640px; }
.lib-cat-head h3{ font-size:clamp(1.25rem,2vw,1.55rem); }
.lib-cat-head p{ margin-top:.4rem; color:var(--soil-80); font-size:.95rem; }

/* Entry rows — a list, not cards, so a shelf can hold dozens
   without shouting. Row = type chip | title + one-liner | source. */
.lib-list{ list-style:none; margin-top:1.1rem; border-top:1px solid rgba(47,42,35,.16); }
.lib-item{ border-bottom:1px solid rgba(47,42,35,.16); }
.lib-item > a, .lib-item > .lib-row{
  display:grid; grid-template-columns:7.5rem 1fr auto; gap:1.2rem; align-items:start;
  padding:1.1rem .6rem; border-radius:0;
  transition:background .25s var(--ease);
}
.lib-item > a:hover{ background:rgba(236,228,211,.65); }
.lib-chip{
  justify-self:start; margin-top:.2rem; white-space:nowrap;
  font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  color:var(--sage); border:1px solid rgba(110,117,96,.5);
  border-radius:0; padding:.3em .8em;
}
.lib-body strong{ font-weight:500; display:block; }
.lib-body span{ display:block; font-size:.92rem; color:var(--soil-60); max-width:58ch; margin-top:.15rem; }
.lib-src{
  margin-top:.25rem; font-size:.82rem; color:var(--soil-60); white-space:nowrap;
  display:inline-flex; align-items:center; gap:.35rem;
}
.lib-src .arr{ transition:transform .3s var(--ease); }
.lib-item > a:hover .lib-src{ color:var(--sage); }
.lib-item > a:hover .lib-src .arr{ transform:translateX(3px); }

/* A shelf slot that isn't stocked yet — honest, quiet */
.lib-item.is-soon .lib-chip{ color:var(--ochre); border-color:rgba(188,138,69,.55); }
.lib-item.is-soon .lib-body span{ color:var(--soil-60); }

/* "Send me what's missing" line under the shelves */
.lib-suggest{ margin-top:2.4rem; color:var(--soil-80); font-size:.95rem; }

/* Featured-tool spotlight — a live tool promoted to the top of an
   audience page. A Soil card with a small "sample output" preview,
   the whole card a single link. (First use: Producers → Grazing Calculator.) */
/* Band wrapper: pulls the card up so it sits right on top of the
   following section (a deliberate overlap onto the next section's top). */
.tool-spotlight-band{ padding-top:clamp(1.5rem,3vw,2.5rem); padding-bottom:0; margin-bottom:clamp(-4rem,-6vw,-2rem); }
.tool-spotlight{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.35fr .9fr; gap:clamp(1.6rem,4vw,3rem);
  align-items:center;
  background:var(--soil); color:var(--bone);
  border-radius:0; padding:clamp(1.8rem,4vw,3rem);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tool-spotlight:hover{ transform:translateY(-4px); box-shadow:0 28px 60px -32px rgba(47,42,35,.6); }
.tool-spotlight .eyebrow{ color:var(--sprout); }
.tool-spotlight h2{ font-size:clamp(1.8rem,3.2vw,2.6rem); margin:.6rem 0 .9rem; }
.tool-spotlight .spot-main p{ color:rgba(236,228,211,.82); max-width:46ch; }
.tool-spotlight .btn{ margin-top:1.6rem; pointer-events:none; }
.tool-spotlight:hover .btn{ transform:translateY(-2px); }
.tool-spotlight:hover .btn .arr{ transform:translateX(4px); }
/* the little sample-output card */
.spot-preview{
  border:1px solid rgba(236,228,211,.22); background:rgba(236,228,211,.06);
  border-radius:0; padding:1.2rem 1.3rem;
}
.spot-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.6rem 0; border-bottom:1px solid rgba(236,228,211,.14);
  font-size:.92rem; color:rgba(236,228,211,.7);
}
.spot-row strong{ font-weight:500; color:var(--bone); font-size:1.05rem; }
.spot-verdict{
  margin-top:1rem; text-align:center;
  font-family:var(--display); font-size:1.15rem; color:var(--sprout);
  border:1px solid rgba(130,162,74,.45); border-radius:0; padding:.5rem 1rem;
}
@media (max-width:760px){
  .tool-spotlight{ grid-template-columns:1fr; }
}

@media (max-width:680px){
  .lib-item > a, .lib-item > .lib-row{ grid-template-columns:1fr; gap:.5rem; padding:1rem .3rem; }
  .lib-chip{ margin-top:0; }
  .lib-src{ margin-top:0; }
}

/* ============================================================
   15. CONSULTING — ENGAGEMENT PROCESS + FAQ (2026-06-10)
   The named four-step process (no prices — tags instead) and a
   plain accordion FAQ built on native <details>/<summary>, so it
   needs no JavaScript and stays accessible by default.
   ============================================================ */

/* Four named steps — the practical twin of the 3-step philosophy */
.process{ display:grid; gap:2rem 1.8rem; grid-template-columns:repeat(4,1fr); margin-top:2.6rem; }
@media (max-width:980px){ .process{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .process{ grid-template-columns:1fr; } }
.p-step .p-num{ font-family:var(--display); font-size:2.4rem; line-height:1; color:var(--sprout); }
.p-step .p-tag{
  display:inline-block; margin-top:.9rem;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--ochre);
}
.p-step h3{ font-size:1.18rem; margin:.45rem 0 .5rem; }
.p-step p{ color:var(--soil-80); font-size:.95rem; }

/* FAQ accordion */
.faq{ max-width:820px; border-top:1px solid rgba(47,42,35,.16); }
.faq details{ border-bottom:1px solid rgba(47,42,35,.16); }
.faq summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  padding:1.25rem .2rem; font-weight:500; font-size:1.04rem;
  transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--sage); }
.faq .f-caret{ flex:none; transition:transform .3s var(--ease); color:var(--sage); }
.faq details[open] .f-caret{ transform:rotate(180deg); }
.faq .f-a{ padding:0 .2rem 1.35rem; color:var(--soil-80); max-width:62ch; }

/* Featured coming-soon tool on the hub (sits on a Soil section) */
.tool-feature{
  max-width:780px; border-radius:0;
  border:1px solid rgba(236,228,211,.22); background:rgba(236,228,211,.06);
  padding:clamp(1.7rem,3.5vw,2.6rem);
}
.tool-feature h3{ font-size:clamp(1.5rem,2.6vw,2rem); margin:.2rem 0 .7rem; }
.tool-feature p{ color:rgba(236,228,211,.8); }
.tool-feature .txtlink{ display:inline-block; margin-top:1.3rem; color:var(--bone); }
.tool-feature .btn{ margin-top:1.4rem; }
/* status pill — ochre "In the works", sprout "Live now" */
.tool-feature .soon{
  display:inline-block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ochre); border:1px solid rgba(188,138,69,.6); border-radius:0;
  padding:.25em .7em; margin-bottom:.9rem;
}
.tool-feature .soon.is-live{ color:var(--sprout); border-color:rgba(130,162,74,.6); }
/* Two tools side by side (stacks on narrow screens) */
.tool-grid{ display:grid; gap:1.4rem; grid-template-columns:1fr 1fr; align-items:start; }
@media (max-width:760px){ .tool-grid{ grid-template-columns:1fr; } }
.tool-note{ margin-top:1.5rem; font-size:.9rem; color:rgba(236,228,211,.55); max-width:56ch; }