/* ============================================================
   DutchGreenhouses design system
   Tokens + components ported from the approved dg-design concept
   ============================================================ */

@font-face{font-family:"ABCFavorit";src:url("/assets/fonts/ABCFavoritExpandedVariable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/Poppins-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/Poppins-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --dg-forest:#061f13;      /* dominant dark green */
  --dg-green:#719b50;       /* brand green — CTAs, accents */
  --dg-green-dark:#5d8340;
  --dg-navy:#001527;
  --dg-mist:#ebedec;        /* light sections */
  --dg-sky:#7bb0e2;         /* chart: solar */
  --dg-sun:#ffb67b;         /* chart: temperature */
  --dg-white:#ffffff;
  /* Chart series + chrome tokens. studio-charts.js emits every stroke/fill/axis colour as one of
     these vars, so a chart re-themes purely in CSS. The DEFAULTS below are the ORIGINAL report
     palette — the print A4 report and the free climate report resolve byte-identically. Only the
     studio dashboard (`.studio-dash`, studio-dash.css §6) overrides them; because the print report
     `.rpt` is a sibling of `.studio-dash`, print output never sees the override. */
  --chart-temp:var(--dg-sun);
  --chart-temp-band:rgba(255,182,123,.35);
  --chart-solar:var(--dg-sky);
  --chart-solar-band:rgba(123,176,226,.35);
  --chart-green:var(--dg-green);
  --chart-ref:rgba(255,255,255,.7);
  --chart-axis:rgba(255,255,255,.35);
  --chart-axis-text:rgba(255,255,255,.75);
  --chart-flag:#e8735a;
  --radius-card:24px;
  --radius-tile:20px;
  --radius-pill:100px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Poppins",sans-serif;font-weight:300;color:var(--dg-forest);background:var(--dg-white);line-height:1.65;font-size:16px}
h1,h2,h3,.display{font-family:"ABCFavorit","Poppins",sans-serif;font-weight:500;line-height:1.12;letter-spacing:-.01em}
img{display:block;max-width:100%;height:auto}
/* Images are wrapped in <picture> whenever a .webp sibling exists (browser-side
   format choice — the origin no longer Accept-negotiates). display:contents makes
   the wrapper generate no box at all, so the <img> stays the flex/grid item and
   the abspos child it already was: layout is byte-identical with or without the
   wrapper. Structural selectors still see <picture>, so never target images with
   :first-child/:last-child — use a class (see .intro-main/.intro-inset). */
picture{display:contents}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.wrap.narrow{max-width:860px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:500;font-size:15px;padding:15px 30px;border-radius:var(--radius-pill);transition:.25s;cursor:pointer;border:0;max-width:100%;text-align:center;line-height:1.25}
.btn svg{flex-shrink:0}
.btn-green{background:var(--dg-green);color:#fff}
.btn-green:hover{background:var(--dg-green-dark)}
.btn-ghost{border:1px solid rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--dg-green);margin-bottom:18px}

/* ---------- header ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(6,31,19,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.nav img{height:34px;filter:invert(1) brightness(2)}
.nav .btn{padding:11px 24px;font-size:14px}

/* ---------- navigation (dropdown / mega / accordion) ---------- */
.nav-root{display:flex;gap:4px;list-style:none;font-size:15px;color:#fff;align-items:center}
.nav-root>li{position:relative;display:flex;align-items:center}
.nav-root>li>a{opacity:.85;padding:10px 12px;border-radius:10px;transition:.2s}
.nav-root>li>a:hover,.nav-root>li>a.active{opacity:1;color:var(--dg-green)}
.sub-toggle{background:none;border:0;color:#fff;opacity:.55;cursor:pointer;padding:6px 4px;display:inline-flex;transition:.25s}
.sub-toggle svg{transition:.25s}
.has-sub:hover .sub-toggle,.has-sub.open .sub-toggle{opacity:1;color:var(--dg-green)}
.has-sub:hover .sub-toggle svg,.has-sub.open .sub-toggle svg{transform:rotate(180deg)}
.sub-title{display:flex;align-items:center;gap:9px;font-family:"ABCFavorit","Poppins",sans-serif;font-weight:500;font-size:14.5px;color:#fff;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12)}
.sub-title svg{opacity:0;transform:translateX(-4px);transition:.25s}
.sub-title:hover{color:var(--dg-green)}
.sub-title:hover svg{opacity:1;transform:none}
.sub-link{display:block;font-size:13.5px;opacity:.72;padding:5px 0;transition:.2s}
.sub-link:hover,.sub-link.active{opacity:1;color:var(--dg-green);padding-left:4px}

@media(min-width:1025px){
  .sub{position:absolute;top:100%;left:50%;transform:translate(-50%,10px);opacity:0;visibility:hidden;transition:.28s cubic-bezier(.2,.7,.3,1);padding-top:16px;z-index:60}
  .has-sub:hover .sub,.has-sub.open .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
  .sub-inner{background:rgba(4,22,13,.97);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.12);border-radius:20px;box-shadow:0 34px 80px rgba(0,0,0,.5);padding:28px 32px;display:flex;gap:46px;width:max-content}
  .sub-col{min-width:170px;display:flex;flex-direction:column}
  /* mega: full-width panel under the header */
  .is-mega .sub{position:fixed;left:0;right:0;top:78px;transform:translateY(10px);padding-top:0}
  .has-sub.is-mega:hover .sub,.has-sub.is-mega.open .sub,.has-sub.is-mega:focus-within .sub{transform:translateY(0)}
  /* flex-wrap is the ceiling remover. .sub-col has min-width:170px and never
     shrinks, so a mega that outgrows the 1200px of usable panel width used to
     overflow the rounded panel rather than reflow. Five columns fit (5x170 +
     4x46 = 1034); six do not (1250). The crop menu is going to keep growing —
     ornamentals alone are another group — so let a sixth column drop to a
     second row instead of breaking the panel. Nothing about today's 5-column
     menus changes: wrap only engages once the columns no longer fit. */
  .is-mega .sub-inner{width:auto;max-width:1280px;margin:0 auto;border-radius:0 0 26px 26px;border-top:0;justify-content:space-between;flex-wrap:wrap;row-gap:30px;padding:34px 40px}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;overflow:hidden;transform:scale(1.04)}
/* The hero photo is an <img> inside .hero-bg, not a background-image — only real
   markup can carry a <picture>/<source> (and only markup is preload-scannable).
   picture{display:contents} means the wrapper generates no box, so the <img>
   itself must be the positioned layer. object-fit:cover + object-position:center
   reproduce the old background-size:cover + background-position:center exactly;
   the height:100% overrides the global img{height:auto} on specificity. */
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* ::after is the last child of .hero-bg, so it still paints OVER the photo */
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,31,19,.94) 0%,rgba(6,31,19,.72) 45%,rgba(6,31,19,.25) 100%)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center;padding-top:130px;padding-bottom:90px}
.hero h1{font-size:clamp(30px,4.6vw,64px);margin-bottom:26px;overflow-wrap:break-word;hyphens:auto;max-width:100%}
.hero h1 .city{color:var(--dg-green);overflow-wrap:break-word}
/* long resolved place names: JS adds .long → step the headline down a size */
.hero h1.long{font-size:clamp(26px,3.4vw,46px)}
.hero h1.long .city{font-size:.92em}
.hero p.lead{font-size:18px;max-width:46ch;opacity:.88;margin-bottom:36px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- climate card ---------- */
.climate-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-card);backdrop-filter:blur(18px);padding:34px 34px 28px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.cc-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px}
.cc-top .loc{font-family:"ABCFavorit";font-size:20px}
.cc-top .change{font-size:12.5px;opacity:.65;border-bottom:1px dotted rgba(255,255,255,.5);cursor:pointer}
.cc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}
.stat{background:rgba(6,31,19,.45);border-radius:16px;padding:16px 14px;text-align:center}
.stat .num{font-family:"ABCFavorit";font-size:24px;font-weight:500;color:#fff}
.stat .num small{font-size:12px;font-weight:300;opacity:.7}
.stat .lbl{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.65;margin-top:4px}
.cc-chart{margin-bottom:22px}
.cc-chart .legend{display:flex;gap:18px;font-size:11.5px;opacity:.7;margin-top:8px}
/* The legend layout rule above is scoped to .cc-chart (blocks.js:113, the marketing chart block),
   so it reached NEITHER climate report: both emit .cr-chart, and the studio's B.9 zone legends are
   a bare .legend inside .cr-card. Their spans are joined with no whitespace, so without a layout
   rule seven entries run together as one line of inline text — and the legend is the only key that
   decodes four heatmaps. Screen AND print: deliberately outside @media print. */
.cr-chart .legend,.cr-card .legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:11.5px;margin-top:8px}
.legend i{display:inline-block;width:16px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
/* .legend i is a 16x3 LINE key — right for a line chart's 2-entry legend, wrong as the FILL key of
   a 7-zone raster. The zone legends (and only those) get a fill-sized swatch. */
.cr-card .legend i{width:14px;height:14px;border-radius:3px}
.cc-profile{display:flex;align-items:center;gap:14px;background:rgba(113,155,80,.18);border:1px solid rgba(113,155,80,.4);border-radius:16px;padding:14px 18px;margin-bottom:22px}
.cc-profile .dot{width:10px;height:10px;border-radius:50%;background:var(--dg-green);box-shadow:0 0 12px var(--dg-green)}
.cc-profile b{font-weight:500}
.cc-profile span{font-size:13.5px;opacity:.8}
.cc-tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.cc-tags a{font-size:13px;padding:8px 16px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.25);opacity:.9}
.cc-tags a:hover{border-color:var(--dg-green);color:var(--dg-green)}
.cc-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cc-cta .btn{padding:13px 26px;font-size:14px}
.cc-src{font-size:10.5px;opacity:.45}

/* ---------- intro ---------- */
.intro{padding:120px 0}
.intro .wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.intro h2{font-size:clamp(28px,3vw,40px);margin-bottom:24px}
.intro p{margin-bottom:18px;color:#31463a}
.intro .btn{margin-top:12px}
.intro .imgs{position:relative}
.intro .imgs .intro-main{border-radius:var(--radius-card)}
.intro .imgs .intro-inset{position:absolute;width:46%;bottom:-48px;left:-48px;border-radius:18px;border:6px solid #fff;box-shadow:0 24px 60px rgba(6,31,19,.25)}

/* ---------- tech showcase (scroll-driven horizontal track) ---------- */
.techsc{position:relative;background:var(--dg-forest)}
.techsc-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--dg-forest);color:#fff}
.techsc-stage{width:100%;padding:0 clamp(24px,5vw,80px)}
.techsc-track{display:flex;gap:24px;align-items:stretch;will-change:transform}
.techsc-intro{flex:0 0 min(480px,80vw);display:flex;flex-direction:column;justify-content:center;padding-right:24px}
.techsc-intro h2{font-size:clamp(30px,3.4vw,46px);margin-bottom:18px}
.techsc-intro h2 span{color:var(--dg-green)}
.techsc-intro p{opacity:.75;max-width:38ch;margin-bottom:30px}
.techsc-scrollhint{display:inline-flex;align-items:center;gap:12px;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;font:inherit;font-weight:500;font-size:14.5px;padding:13px 26px;border-radius:var(--radius-pill);cursor:pointer;transition:.3s;align-self:flex-start}
.techsc-scrollhint:hover{border-color:var(--dg-green);color:var(--dg-green)}
.techsc-card{position:relative;flex:0 0 min(400px,78vw);border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:.35s;height:min(72vh,620px);align-self:center}
.techsc-card:hover{transform:translateY(-6px);border-color:rgba(113,155,80,.6)}
.techsc-media{display:block;height:58%;overflow:hidden}
.techsc-media img{width:100%;height:100%;object-fit:cover;transition:.5s}
.techsc-card:hover .techsc-media img{transform:scale(1.06)}
.techsc-body{display:flex;flex-direction:column;gap:8px;padding:26px 28px 28px;flex:1}
.techsc-kicker{font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dg-green)}
.techsc-body h3{font-size:23px}
.techsc-body p{font-size:14.5px;opacity:.75}
.techsc-cta{margin-top:auto;display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:14.5px;color:var(--dg-green)}
.techsc-cta svg{transition:.3s}
.techsc-card:hover .techsc-cta svg{transform:translateX(6px)}
.techsc .match{position:absolute;z-index:2;top:16px;left:16px;font-size:11px;font-weight:500;letter-spacing:.05em;background:var(--dg-green);padding:6px 12px;border-radius:var(--radius-pill)}
.techsc-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(6,31,19,.6);backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.25s}
.techsc-btn:hover:not(:disabled){background:var(--dg-green);border-color:var(--dg-green)}
.techsc-btn:disabled{opacity:.25;cursor:default}
.techsc-prev{left:22px}
.techsc-next{right:22px}
/* native mode: mobile + prefers-reduced-motion */
.techsc-native .techsc-sticky{position:relative;height:auto;padding:90px 0}
.techsc-native .techsc-stage{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.techsc-native .techsc-stage::-webkit-scrollbar{display:none}
.techsc-native .techsc-track{transform:none!important;transition:none}
.techsc-native .techsc-card{scroll-snap-align:center;height:auto;min-height:480px}
.techsc-native .techsc-intro{scroll-snap-align:start}
.techsc-native .techsc-scrollhint svg{transform:none}

/* ---------- growpro ---------- */
.growpro{padding:120px 0}
.growpro .head{display:flex;justify-content:space-between;align-items:end;margin-bottom:54px;gap:40px}
.growpro h2{font-size:clamp(28px,3vw,40px)}
.gp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.gp-card{border:1px solid #dfe4e1;border-radius:var(--radius-card);overflow:hidden;transition:.3s;position:relative}
.gp-card:hover{box-shadow:0 24px 60px rgba(6,31,19,.14);transform:translateY(-4px)}
.gp-card img{height:220px;width:100%;object-fit:cover}
.gp-card .body{padding:28px}
.gp-card .tier{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dg-green);margin-bottom:8px}
.gp-card h3{font-size:21px;margin-bottom:10px}
.gp-card p{font-size:14.5px;color:#4a5c52;margin-bottom:18px}
.gp-card .link{font-weight:500;font-size:14.5px;color:var(--dg-green)}
.gp-card.reco{border:2px solid var(--dg-green)}
.gp-card .flag{position:absolute;z-index:2;top:16px;right:16px;background:var(--dg-green);color:#fff;font-size:11px;font-weight:500;padding:6px 13px;border-radius:var(--radius-pill);letter-spacing:.05em}

/* ---------- project ---------- */
.project{background:var(--dg-mist);padding:120px 0}
.project .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
.project img{border-radius:28px;object-fit:cover}
.project h2{font-size:clamp(28px,3vw,40px);margin-bottom:22px}
.project p{color:#31463a;margin-bottom:18px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px 28px;margin:26px 0 34px;align-items:start}
.kpis .k .num{font-family:"ABCFavorit";font-size:clamp(24px,2.3vw,32px);color:var(--dg-forest);white-space:nowrap;line-height:1.15}
.kpis .k .lbl{font-size:12.5px;color:#5c6f64;margin-top:4px;letter-spacing:.03em}
.kpis .k .sub{font-size:12px;color:#7b8a81;margin-top:3px}
@media(max-width:560px){.kpis{grid-template-columns:1fr 1fr}}
/* unit & currency toggle */
.unit-toggle{display:inline-flex;align-items:center;gap:6px;margin-top:22px;background:#fff;border:1px solid rgba(6,31,19,.12);border-radius:100px;padding:4px}
.unit-toggle button{border:0;background:none;font:inherit;font-size:12.5px;font-weight:500;color:#5c6f64;padding:7px 14px;border-radius:100px;cursor:pointer;transition:.2s}
.unit-toggle button.on{background:var(--dg-green);color:#fff}
.unit-toggle .ut-sep{width:1px;height:18px;background:rgba(6,31,19,.15)}

/* ---------- cta banner ---------- */
.cta{background:var(--dg-forest);color:#fff;padding:110px 0;text-align:center}
.cta h2{font-size:clamp(30px,3.4vw,46px);max-width:22ch;margin:0 auto 20px}
.cta h2 [data-dg="city"]{color:var(--dg-green)}
.cta p{opacity:.75;margin-bottom:36px}

/* ---------- interior pages ---------- */
.page-header{background:var(--dg-forest);color:#fff;padding:190px 0 90px}
.page-media{margin-top:44px}
.page-media img{width:100%;max-height:480px;object-fit:cover;border-radius:var(--radius-card)}
/* media reveal: curtain clip + settle, triggered on scroll (dg-reveal.js) */
.media-reveal{clip-path:inset(10% 7% 10% 7% round var(--radius-card));transform:scale(1.045) translateY(14px);opacity:.35;transition:clip-path 1.1s cubic-bezier(.2,.7,.25,1),transform 1.1s cubic-bezier(.2,.7,.25,1),opacity .8s ease}
.media-reveal.in{clip-path:inset(0 0 0 0 round var(--radius-card));transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){.media-reveal{clip-path:none;transform:none;opacity:1;transition:none}}
.page-header h1{font-size:clamp(34px,4vw,56px);margin-bottom:20px}
.page-header .lead{font-size:18px;max-width:52ch;opacity:.85}
.richtext{padding:90px 0}
.richtext h2{font-size:clamp(26px,2.8vw,36px);margin-bottom:22px}
.richtext p{margin-bottom:18px;color:#31463a;font-size:17px;max-width:72ch}
/* Adjacent richtext sections are ONE piece of writing, not separate bands. The
   CMS keeps them as separate sections (that is the editing unit); the page must
   not: 90+90 = 180px of dead white between paragraphs of the same article, worst
   on the crop pages where a section is often a single paragraph. Collapse the
   seam to an in-article gap, and step the following h2s down from display scale
   (36px over three lines of 17px body is a billboard, not a subhead). A solo or
   first richtext keeps the display h2 — it is a band heading there. */
.richtext:has(+ .richtext){padding-bottom:0}
.richtext + .richtext{padding-top:clamp(40px,5vw,54px)}
.richtext + .richtext h2{font-size:clamp(21px,2.2vw,27px)}
/* Standfirst → body: when the opening section carries no heading of its own (the
   crop pages after the duplicate-h2 cleanup), the first paragraph is the way in —
   give it intro weight instead of dropping straight to body size. */
.page-header + .richtext .wrap > p:first-child{font-size:19px;line-height:1.6;color:var(--dg-forest)}

/* ---------- glossary & term links ---------- */
a.dg-term{color:inherit;border-bottom:1.5px dotted var(--dg-green);transition:.2s}
a.dg-term:hover{color:var(--dg-green)}
.tech a.dg-term,.cta a.dg-term,.hero a.dg-term{border-bottom-color:rgba(113,155,80,.8)}
.glossary{padding:90px 0}
.glossary dl{margin:0}
.g-item{border-bottom:1px solid #dfe4e1;padding:26px 0}
.g-item dt{font-family:"ABCFavorit","Poppins",sans-serif;font-weight:500;font-size:19px;margin-bottom:8px}
.g-item dt a:hover{color:var(--dg-green)}
.g-item dd{margin:0;color:#31463a}
.term{padding:90px 0}
.term .lead-def{font-size:19px;color:var(--dg-forest);margin-bottom:24px}
.term p{margin-bottom:18px;color:#31463a}
.term .term-nav{margin-top:36px}
.term .term-nav a{color:var(--dg-green);font-weight:500}
.page-header .eyebrow a{color:var(--dg-green)}

/* ---------- updates / articles ---------- */
.updates{padding:90px 0}
.u-item{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start;border-bottom:1px solid #dfe4e1;padding:36px 0}
.u-item img{border-radius:16px;aspect-ratio:16/10;object-fit:cover}
.u-item .u-date{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#7b8a81;margin-bottom:8px}
.u-item h2{font-size:23px;margin-bottom:10px}
.u-item h2 a:hover{color:var(--dg-green)}
.u-item p{color:#31463a;margin-bottom:12px}
.u-item .u-more{color:var(--dg-green);font-weight:500}
.post{padding:70px 0 90px}
.post .post-hero{border-radius:20px;margin-bottom:36px}
.post p{margin-bottom:18px;color:#31463a;font-size:17px}
.post h2{font-size:clamp(22px,2.4vw,30px);margin:38px 0 16px}
.post .byline{border-top:1px solid #dfe4e1;margin-top:44px;padding-top:20px;display:flex;gap:28px;flex-wrap:wrap;font-size:14px;color:#5c6f64}
.post .byline a{color:var(--dg-green);font-weight:500}
@media(max-width:700px){.u-item{grid-template-columns:1fr}}

/* ---------- person / bio ---------- */
.person{padding:90px 0}
.person .portrait{width:220px;border-radius:24px;margin-bottom:32px}
.person p{margin-bottom:18px;color:#31463a}
.person h2{font-size:22px;margin:36px 0 14px}
.person ul.knows{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0}
.person ul.knows li{font-size:13.5px;padding:8px 16px;border-radius:100px;border:1px solid #c8d0cb}
.person ul.profiles{list-style:none;padding:0}
.person ul.profiles li{margin-bottom:8px}
.person ul.profiles a{color:var(--dg-green)}

/* ---------- 3D scroll build ---------- */
.build3d{position:relative;background:var(--dg-forest);color:#fff}
/* fallback / mobile: stacked stage cards, no canvas */
.build3d .b3-canvas{display:none}
.build3d .b3-sticky{padding:100px clamp(24px,5vw,80px)}
.b3-head .eyebrow{margin-bottom:14px}
.b3-head h2{font-size:clamp(28px,3.2vw,44px);margin-bottom:40px;max-width:24ch}
.b3-stage{border-left:2px solid rgba(255,255,255,.16);padding:6px 0 26px 24px;max-width:56ch}
.b3-num{font-family:"ABCFavorit","Poppins",sans-serif;font-size:13px;color:var(--dg-green);letter-spacing:.12em;margin-bottom:8px}
.b3-stage h3{font-size:21px;margin-bottom:8px}
.b3-stage p{opacity:.78;font-size:15px;margin-bottom:10px}
.b3-bar{display:none}
/* enhanced: pinned viewport, canvas behind, one stage at a time */
.build3d.b3-on .b3-sticky{position:sticky;top:0;height:100vh;padding:0;overflow:hidden}
.build3d.b3-on .b3-canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.build3d.b3-on .b3-head{position:absolute;top:96px;left:clamp(24px,5vw,80px);z-index:2;max-width:420px}
.build3d.b3-on .b3-head h2{margin-bottom:0}
.build3d.b3-on .b3-panel{position:absolute;z-index:2;right:clamp(24px,5vw,80px);bottom:12vh;width:min(400px,80vw)}
.build3d.b3-on .b3-stage{position:absolute;inset:auto 0 0 0;opacity:0;transform:translateY(14px);transition:.45s cubic-bezier(.2,.7,.3,1);pointer-events:none;background:rgba(4,22,13,.72);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);border-left:3px solid var(--dg-green);border-radius:16px;padding:22px 26px;max-width:none}
.build3d.b3-on .b3-stage.active{opacity:1;transform:none;pointer-events:auto}
.build3d.b3-on .b3-bar{display:block;position:absolute;z-index:2;left:clamp(24px,5vw,80px);bottom:12vh;top:auto;width:3px;height:26vh;background:rgba(255,255,255,.15);border-radius:3px}
.build3d.b3-on .b3-bar i{display:block;width:100%;height:100%;background:var(--dg-green);border-radius:3px;transform:scaleY(0);transform-origin:top}
@media(max-width:1024px){
  .build3d.b3-on .b3-head{top:70px}
  .build3d.b3-on .b3-panel{left:24px;right:24px;width:auto;bottom:8vh}
}

/* ---------- climate report (lead gen) ---------- */
.cr-head .cr-loc{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;max-width:640px}
.cr-head .cr-loc input{flex:1;min-width:220px;padding:14px 18px;border-radius:100px;border:0;font:inherit;font-size:15px}
.cr-hint{margin-top:14px;font-size:13.5px;opacity:.7;min-height:1em}
.cr-report{padding:70px 0 100px;background:var(--dg-mist)}
.cr-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;margin-bottom:34px}
.cr-top h2{font-size:clamp(26px,3vw,38px)}
.cr-desc{color:#31463a;max-width:52ch;margin-top:8px}
.cr-source{font-size:12px;color:#7b8a81;text-align:right;flex-shrink:0}
.cr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
.cr-stats .stat{background:var(--dg-forest);color:#fff;border-radius:18px;padding:22px;text-align:center}
.cr-stats .num{font-family:"ABCFavorit","Poppins",sans-serif;font-size:30px}
.cr-stats .num small{font-size:14px;opacity:.7;font-weight:300}
.cr-stats .lbl{font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-top:6px}
.cr-chart{background:var(--dg-forest);color:#fff;padding:24px 26px;margin-bottom:26px}
.cr-chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.cr-chart-head h3{font-size:17px}
.cr-svg{width:100%;height:220px}
/* WIDE-SCREEN CHART FIX (Climate Design Studio only, SCREEN ONLY). The 720x220 viewBox meets its
   box, so at a fixed 220px height a very wide `.cr-chart` letterboxes the chart into a small centred
   island in a huge dark card. Inside the studio (`.rpt` = the report, `.studio-dash` = the
   dashboard) let the SVG keep the viewBox aspect and scale with width, and cap the card so an
   ultra-wide viewport does not stretch one chart absurdly — centring the section instead. Scoped so
   the free climate report (its own `.cr-svg`, painted client-side) is untouched.
   WRAPPED IN @media screen: the A4 report's print pagination depends on the chart's fixed 220px
   height (studio-report.css), so print MUST keep the original box — this fix is screen-only. */
@media screen{
  .rpt .cr-svg,.studio-dash .cr-svg{height:auto;aspect-ratio:720/220}
  .rpt .cr-chart,.studio-dash .cr-chart{max-width:1120px;margin-left:auto;margin-right:auto}
}
.cr-premium{position:relative}
.cr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cr-card{background:#fff;border-radius:18px;padding:24px}
.cr-ic{font-size:26px;margin-bottom:10px}
.cr-card .cr-k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dg-green);font-weight:500}
.cr-card .cr-v{font-family:"ABCFavorit","Poppins",sans-serif;font-size:26px;margin:4px 0 8px}
.cr-card p{font-size:13.5px;color:#4a5c52;line-height:1.6}
/* gate: blur the premium cards until unlocked */
.cr-premium .cr-grid,.cr-premium .cr-deep{filter:blur(9px);pointer-events:none;user-select:none;transition:filter .5s}
.cr-premium.unlocked .cr-grid,.cr-premium.unlocked .cr-deep{filter:none;pointer-events:auto;user-select:auto}
.cr-gate{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:20px}
.cr-gate-inner{position:sticky;top:120px}
.cr-premium.unlocked .cr-gate{display:none}
.cr-gate-inner{background:rgba(4,22,13,.94);backdrop-filter:blur(4px);color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:40px 44px;max-width:520px;text-align:center;box-shadow:0 40px 90px rgba(0,0,0,.4)}
.cr-lock{font-size:34px;margin-bottom:10px}
.cr-gate-inner h3{font-size:24px;margin-bottom:12px}
.cr-gate-inner>p{opacity:.8;font-size:14.5px;margin-bottom:24px}
.cr-lead .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cr-lead input{width:100%;padding:13px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:15px;margin-bottom:12px}
.cr-lead input::placeholder{color:rgba(255,255,255,.5)}
.cr-lead input:focus{outline:2px solid var(--dg-green);border-color:transparent}
.cr-lead .hp{position:absolute;left:-9999px}
.cr-lead button{width:100%;justify-content:center;margin-top:4px}
.cr-lead .form-note{font-size:12px;opacity:.6;margin-top:14px}
/* hourly deep-dive upsell */
.cr-upsell{background:var(--dg-forest);color:#fff;border-radius:24px;padding:44px 46px;margin-top:30px}
.cr-upsell-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:46px;align-items:center}
.cr-upsell h3{font-size:clamp(21px,2.4vw,30px);margin-bottom:14px}
.cr-upsell p{opacity:.82;font-size:14.5px;max-width:58ch}
.cr-upsell-list{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px}
.cr-upsell-list li{font-size:14px;opacity:.9}
.cr-upsell-list b{font-weight:500}
.cr-upsell-cta{text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:30px 26px}
.cr-price{font-family:"ABCFavorit","Poppins",sans-serif;font-size:40px;color:var(--dg-green)}
.cr-price small{font-size:14px;opacity:.7;font-weight:300;color:#fff}
.cr-upsell-cta p{font-size:13.5px;margin:6px 0 18px}
.cr-upsell-cta .btn{width:100%}
.cr-upsell-cta .note{font-size:12px;opacity:.6;margin:14px 0 0}
@media(max-width:860px){.cr-upsell{padding:32px 26px}.cr-upsell-grid{grid-template-columns:1fr;gap:26px}}

/* deep-dive order popup */
.cr-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.cr-modal[hidden]{display:none}
.cr-modal-backdrop{position:absolute;inset:0;background:rgba(4,22,13,.7);backdrop-filter:blur(6px)}
.cr-modal-box{position:relative;background:rgba(4,22,13,.97);color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:40px 44px;max-width:540px;width:100%;box-shadow:0 40px 90px rgba(0,0,0,.5);max-height:90vh;overflow-y:auto}
.cr-modal-box h3{font-size:23px;margin:8px 0 10px}
.cr-modal-box>div>p,.cr-modal-box [data-cr="orderformwrap"]>p{opacity:.8;font-size:14.5px;margin-bottom:22px}
.cr-modal-close{position:absolute;top:14px;right:18px;background:none;border:0;color:#fff;opacity:.6;font-size:26px;cursor:pointer;line-height:1}
.cr-modal-close:hover{opacity:1}
.cr-order-success{text-align:center;padding:10px 0}
.cr-order-check{width:56px;height:56px;border-radius:50%;background:var(--dg-green);color:#fff;font-size:28px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.cr-order-success p{opacity:.8;font-size:14.5px;margin:10px 0 22px}
@media(max-width:560px){.cr-modal-box{padding:30px 24px}}

.cr-cta{text-align:center;background:var(--dg-forest);color:#fff;border-radius:24px;padding:48px 30px;margin-top:30px}
.cr-cta h3{font-size:clamp(22px,2.6vw,32px);margin-bottom:10px}
.cr-cta h3 [data-cr]{color:var(--dg-green)}
.cr-cta p{opacity:.8;margin-bottom:24px}
@media(max-width:860px){.cr-grid,.cr-stats{grid-template-columns:1fr}.cr-top{flex-direction:column}.cr-source{text-align:left}}

/* climate report deep-dive (ported from the climate-insights app) */
.cr-deep{margin-top:34px}
.cr-deep-title{font-size:clamp(20px,2.2vw,27px);margin-bottom:18px}
.cr-charts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.cr-charts .cr-chart{margin-bottom:0;border-radius:18px}
.cr-calc{background:#fff;border-radius:18px;padding:24px 26px;margin-bottom:18px}
.cr-calc-head h3{font-size:17px;margin-bottom:6px}
.cr-calc-head p{font-size:13px;color:#4a5c52;max-width:70ch;margin-bottom:16px}
.cr-params{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.cr-params label{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dg-green);font-weight:500;display:flex;flex-direction:column;gap:6px}
.cr-params input{padding:11px 14px;border:1px solid #dfe4e1;border-radius:12px;font:inherit;font-size:15px;color:var(--dg-forest);width:100%}
.cr-params input:focus{outline:2px solid var(--dg-green);border-color:transparent}
.cr-calc-out{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cr-calc-out .stat{background:var(--dg-forest);color:#fff;border-radius:16px;padding:16px 14px;text-align:center}
.cr-calc-out .num{font-family:"ABCFavorit","Poppins",sans-serif;font-size:21px}
.cr-calc-out .num small{font-size:11px;opacity:.7;font-weight:300}
.cr-calc-out .lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.65;margin-top:5px}
@media(max-width:860px){.cr-params,.cr-calc-out{grid-template-columns:1fr 1fr}}
.cr-table{background:#fff;border-radius:18px;padding:24px 26px}
.cr-table h3{font-size:17px;margin-bottom:14px}
.cr-table-scroll{overflow-x:auto}
.cr-table table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.cr-table th{text-align:right;font-weight:500;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dg-green);padding:8px 10px;border-bottom:1px solid #dfe4e1}
.cr-table th:first-child,.cr-table td:first-child{text-align:left;font-weight:500}
.cr-table td{text-align:right;padding:7px 10px;border-bottom:1px solid #eef1ef;color:#31463a}
.cr-table tr:last-child td{border-bottom:0}
.cr-actions{margin-top:22px;text-align:right}
@media(max-width:860px){.cr-charts{grid-template-columns:1fr}}
@media print{
  header,footer,.cr-head form,.cr-hint,.cr-gate,.cr-cta,.cr-upsell,.cr-actions,.cr-empty{display:none!important}
  .cr-head{padding-top:20px}
  .cr-report{background:#fff;padding:10px 0}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cr-charts{grid-template-columns:1fr 1fr}
  .cr-chart,.cr-card,.cr-table{break-inside:avoid;box-shadow:none}
}

/* B.9's heatmap scale (WR-04). A GRID, not flexbox: the hour ticks must span exactly the image's
   row, and in a flex row they would stretch to include the month strip below it — putting every
   percentage-positioned hour label off by the strip's height.
   Ticks are positioned in per cent of the image box, so they track it at any width (the image is
   width:100% in print and fluid on screen) without the stylesheet knowing the day count. */
/* minmax(0,1fr), NOT 1fr: a grid track's automatic minimum is its content's min-content size, so a
   1464px map would blow the column out to 1464px and `max-width:100%` on the image would have
   nothing smaller to resolve against. */
.hm-plot{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:6px;margin-top:10px}
.hm-hours{position:relative;font-size:9px;line-height:1;color:#7b8a81}
.hm-hours span{position:absolute;right:0;transform:translateY(-50%);white-space:nowrap}
.hm-months{grid-column:2;position:relative;height:13px;font-size:9px;line-height:1;color:#7b8a81}
.hm-months span{position:absolute;top:3px;transform:translateX(-50%);white-space:nowrap}
/* The map had no screen rule at all: at the 4x supersample a 366-day map is a 1464px image inside
   a 1280px column, so it overflowed. The print block's own .hm rule still governs paper. */
.hm{max-width:100%;height:auto;display:block}

/* The studio report's SCREEN box (VIZ-03). renderStudioRun appends reportBody() after its
   </section>, so `.rpt` is a direct child of <main> — and <main> has no CSS. Every other section on
   the site puts its content in `.wrap`, so without this the whole report (cover, echo-back, seven
   chart cards, four heatmaps, Section C) ran edge-to-edge with no max-width, while the
   .page-header directly above it stayed in the site's 1280px column.
   `.rpt` carries its own box rather than being wrapped at the call site, so the element stays
   self-contained; studio-report.css's print block resets the padding, and the A4 content width is
   far under this max-width, so neither reaches the printed page. */
.rpt{max-width:1280px;margin:0 auto;padding:0 40px 80px}
@media(max-width:860px){.rpt{padding:0 20px 60px}}

/* --- Climate Design Studio hover interactivity (studio-hover.js) ------------
   SCREEN-ONLY progressive enhancement over the server-rendered charts and heatmaps: a floating
   tooltip, a hovered-cell outline, and an in-SVG highlight the enhancer injects. Every element here
   is pointer-events:none (it never intercepts a scroll or a click) and is hidden in @media print, so
   it can never reach the A4 PDF — the printed report is identical with or without JS. */
.dgcs-tip{position:fixed;z-index:300;pointer-events:none;max-width:280px;
  background:rgba(4,22,13,.96);color:#fff;border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:10px 12px;font-size:12.5px;line-height:1.45;
  box-shadow:0 18px 44px rgba(0,0,0,.4);backdrop-filter:blur(4px)}
.dgcs-tip[hidden]{display:none}
.dgcs-tip-h{font-weight:600;margin-bottom:5px;letter-spacing:.01em}
.dgcs-tip-row{display:flex;align-items:center;gap:7px;white-space:nowrap}
.dgcs-tip-row i{display:inline-block;width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.dgcs-tip-lab{opacity:.78}
.dgcs-tip-val{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:500}
.dgcs-cell{position:fixed;z-index:299;pointer-events:none;border:1.5px solid rgba(255,255,255,.92);
  box-shadow:0 0 0 1px rgba(0,0,0,.55)}
.dgcs-cell[hidden]{display:none}
.dgcs-hl-line{stroke:rgba(255,255,255,.55);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
.dgcs-hl-dot{stroke:#0b1f14;stroke-width:1.2;pointer-events:none}
@media print{.dgcs-tip,.dgcs-cell,.dgcs-hl{display:none!important}}

/* The Climate Design Studio's print block lives in its OWN stylesheet —
   public/assets/css/studio-report.css, linked only by render.js's studioShell. It was here, and it
   could not be: `@page` cannot be scoped by any selector, so an A4/14mm page box in this file —
   which shell() links from every page of the site — overrode the reader's own paper size on every
   marketing page. See that file's header. */

/* ---------- article carousel ---------- */
.artcar{background:var(--dg-mist);padding:90px 0}
.artcar-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.artcar-head h2{font-size:clamp(24px,2.8vw,36px)}
.artcar-sub{color:#31463a;max-width:56ch;margin-top:8px}
.artcar-nav{display:flex;gap:10px;flex-shrink:0}
.artcar-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(6,31,19,.25);background:#fff;color:var(--dg-forest);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.25s}
.artcar-btn:hover:not(:disabled){background:var(--dg-green);border-color:var(--dg-green);color:#fff}
.artcar-btn:disabled{opacity:.3;cursor:default}
.artcar-viewport{overflow:hidden}
.artcar-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.artcar-track::-webkit-scrollbar{display:none}
.artcar-card{flex:0 0 min(340px,82vw);scroll-snap-align:start;background:#fff;border-radius:var(--radius-tile);overflow:hidden;display:flex;flex-direction:column;transition:.3s;border:1px solid rgba(6,31,19,.08)}
.artcar-card:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(6,31,19,.14)}
.artcar-media{height:180px;overflow:hidden}
.artcar-media img{width:100%;height:100%;object-fit:cover;transition:.5s}
.artcar-card:hover .artcar-media img{transform:scale(1.05)}
.artcar-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.artcar-tags{display:flex;gap:6px;flex-wrap:wrap}
.artcar-tags span{font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dg-green);background:rgba(113,155,80,.12);padding:4px 10px;border-radius:100px}
.artcar-body h3{font-size:18px;line-height:1.25}
.artcar-body p{font-size:13.5px;color:#4a5c52;flex:1}
.artcar-more{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:13.5px;color:var(--dg-green);margin-top:4px}
.artcar-more svg{transition:.3s}
.artcar-card:hover .artcar-more svg{transform:translateX(5px)}
@media(max-width:640px){.artcar{padding:64px 0}.artcar-head{flex-direction:column;align-items:flex-start}}

/* article page — meta byline, TOC, sign-off */
.post-intro p{font-size:19.5px;line-height:1.6;color:var(--dg-forest);margin-bottom:30px}
.post h2{scroll-margin-top:100px}
.post-meta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:18px}
.post-author{display:inline-flex;align-items:center;gap:10px;font-size:14px}
.post-author b{font-weight:500}
.post-author:hover b{color:var(--dg-green)}
.post-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;background:#fff;flex-shrink:0}
.post-meta .post-labels{margin-top:0}
.post-toc{background:var(--dg-mist);border-radius:var(--radius-tile);padding:22px 26px;margin-bottom:34px}
.post-toc-title{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dg-green);margin-bottom:10px}
.post-toc ol{list-style:none;counter-reset:toc}
.post-toc li{counter-increment:toc;margin:7px 0;font-size:14.5px}
.post-toc li::before{content:counter(toc,decimal-leading-zero);font-family:"ABCFavorit","Poppins",sans-serif;font-size:11px;color:var(--dg-green);margin-right:10px}
.post-toc a:hover{color:var(--dg-green)}
.post-signoff{display:flex;align-items:center;gap:22px;border:1px solid rgba(6,31,19,.1);border-radius:var(--radius-tile);padding:26px 30px;margin-top:48px;background:#fff;box-shadow:0 16px 40px rgba(6,31,19,.06)}
.post-signoff-photo{width:76px;height:76px;border-radius:50%;overflow:hidden;flex-shrink:0;display:block;background:var(--dg-mist)}
.post-signoff-photo img{width:100%;height:100%;object-fit:cover}
.post-signoff-photo.is-logo{display:flex;align-items:center;justify-content:center;padding:14px;border:1px solid rgba(6,31,19,.1)}
.post-signoff-photo.is-logo img{object-fit:contain}
.post-signoff-initial{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-family:"ABCFavorit","Poppins",sans-serif;font-size:30px;color:var(--dg-green)}
.post-signoff-k{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dg-green)}
.post-signoff-name{display:inline-block;font-family:"ABCFavorit","Poppins",sans-serif;font-size:21px;margin:3px 0 2px}
.post-signoff-name:hover{color:var(--dg-green)}
.post-signoff-role{font-size:13.5px;color:#5c6f64;margin-bottom:8px}
.post-signoff-bio{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--dg-green)}
.post-signoff-bio svg{transition:.3s}
.post-signoff-bio:hover svg{transform:translateX(5px)}
@media(max-width:560px){.post-signoff{flex-direction:column;text-align:center;align-items:center}}

/* post page label chips */
.post-labels{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.post-labels a{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dg-green);border:1px solid rgba(113,155,80,.4);padding:5px 12px;border-radius:100px}
.post-labels a:hover{background:var(--dg-green);color:#fff}

/* small screens: compact, consistent buttons */
@media(max-width:480px){
  .btn{padding:13px 22px;font-size:14px}
  .nav .btn{padding:10px 18px;font-size:13.5px}
  .cr-loc .btn{flex:1 1 auto;min-width:150px}
  .cr-cta .btn,.cr-actions .btn{width:100%;max-width:340px}
  .cr-actions{text-align:center}
}

/* ---------- faq ---------- */
.faq{padding:90px 0}
.faq h2{font-size:clamp(26px,2.8vw,36px);margin-bottom:28px}
.faq details{border:1px solid #dfe4e1;border-radius:14px;margin-bottom:12px;padding:0 22px;background:#fff}
.faq summary{cursor:pointer;font-weight:500;font-size:16px;padding:18px 0;list-style:none;position:relative}
.faq summary::after{content:"+";position:absolute;right:0;top:14px;font-size:22px;color:var(--dg-green);transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;color:#31463a}

/* ---------- footer ---------- */
footer{background:#04160d;color:#fff;padding:64px 0 40px;font-size:14px}
footer .cols{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:44px}
footer img{height:30px;filter:invert(1) brightness(2);margin-bottom:16px}
footer .muted{opacity:.55}
footer address{font-style:normal;white-space:pre-line}
footer ul{list-style:none}
footer li{margin-bottom:8px;opacity:.75}
footer li a:hover{color:var(--dg-green)}

/* Google Preferred Sources deeplink — footer, post sign-off, glossary term */
.g-pref{font-size:14px;text-decoration:underline;text-underline-offset:3px}
.g-pref:hover{color:var(--dg-green)}
footer .footer-follow{margin-bottom:12px}
footer .g-pref{opacity:.75}
footer .g-pref:hover{opacity:1}
.post-follow,.term-follow{margin-top:28px}
.post-follow .g-pref,.term-follow .g-pref{opacity:.65}
.post-follow .g-pref:hover,.term-follow .g-pref:hover{opacity:1}

/* ---------- feature rows ---------- */
.features{padding:100px 0}
.features>.wrap>h2{font-size:clamp(28px,3vw,40px);margin-bottom:16px}
.features .f-intro{color:#31463a;max-width:70ch;margin-bottom:30px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:44px 0;border-bottom:1px solid #eef1ef}
.f-row:last-child{border-bottom:0}
.f-row.flip .f-img{order:2}
.f-img img{border-radius:20px;aspect-ratio:16/11;object-fit:cover;width:100%}
.f-txt h3{font-size:24px;margin-bottom:14px}
.f-txt p{color:#31463a;margin-bottom:14px}
.f-link{color:var(--dg-green);font-weight:500}

/* ---------- link cards ---------- */
.linkcards{padding:90px 0;background:var(--dg-mist)}
.linkcards h2{font-size:clamp(26px,2.8vw,36px);margin-bottom:34px}
.lc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.lc-card{background:#fff;border-radius:18px;overflow:hidden;transition:.3s;display:block}
.lc-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(6,31,19,.14)}
.lc-card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.lc-body{padding:18px 20px 20px}
.lc-body h3{font-size:16.5px;margin-bottom:6px}
.lc-body p{font-size:13.5px;color:#5c6f64}

/* ---------- contact form ---------- */
.contactform{padding:90px 0}
.contactform h2{font-size:clamp(26px,2.8vw,36px);margin-bottom:14px}
.contactform .f-intro{color:#31463a;margin-bottom:30px}
.lead-form label{display:block;font-size:13px;font-weight:500;margin:18px 0 6px;color:#3c4f45}
.lead-form input,.lead-form textarea{width:100%;padding:13px 15px;border:1px solid #c8d0cb;border-radius:12px;font:inherit;font-size:15px;background:#fff}
.lead-form input:focus,.lead-form textarea:focus{outline:2px solid var(--dg-green);border-color:var(--dg-green)}
.lead-form textarea{min-height:140px}
.lead-form .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.lead-form button{margin-top:26px}
.lead-form .hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.form-note{font-size:12.5px;color:#7b8a81;margin-top:14px}
.form-success{background:rgba(113,155,80,.14);border:1px solid var(--dg-green);border-radius:14px;padding:20px 24px;font-weight:500;margin-bottom:20px}

/* ---------- Climate Studio run form ---------- */
.studio-form{background:var(--dg-mist);padding:0 0 100px}
.studio-form .wrap{max-width:960px}
.sform{background:#fff;border-radius:var(--radius-card);box-shadow:0 30px 80px rgba(6,31,19,.14);padding:46px 48px;margin-top:-56px;position:relative;z-index:2}
.sform-group{border:0;margin:0 0 30px;padding:0}
.sform-group legend{display:block;width:100%;font-family:"ABCFavorit","Poppins",sans-serif;font-weight:500;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dg-green);padding:0 0 12px;margin-bottom:20px;border-bottom:1px solid #e3e8e4}
.sform-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 24px}
.sform-grid-ov{grid-template-columns:repeat(3,1fr);gap:18px 22px}
.sform-field{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:500;color:#3c4f45}
.sform-span2{grid-column:1/-1}
.sform-field .sform-unit,.sform-field .opt{font-weight:300;color:#9aa69d;font-size:12px}
.sform-field input,.sform-field select{width:100%;padding:13px 15px;border:1px solid #c8d0cb;border-radius:12px;font:inherit;font-size:15px;font-weight:300;background:#fff;color:var(--dg-forest)}
.sform-field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23719b50' stroke-width='1.6'/></svg>");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.sform-field input:focus,.sform-field select:focus{outline:2px solid var(--dg-green);border-color:var(--dg-green)}
.sform-field input::placeholder{color:#aab4ac}
.sform-geo{display:flex;gap:10px}
.sform-geo input{flex:1 1 auto;min-width:0}
.sform-geo-btn{flex:0 0 auto;padding:0 22px;font-size:14px;white-space:nowrap}
.sform-geo-status{min-height:1.25em;font-size:12.5px;font-weight:300;color:#6f7d73}
.sform-geo-status.ok{color:var(--dg-green-dark)}
.sform-geo-status.err{color:#b4442f}
.sform-adv{border:1px solid #e3e8e4;border-radius:14px;margin-bottom:16px;background:#fbfcfb;overflow:hidden}
.sform-adv>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;padding:16px 20px;font-weight:500;font-size:14.5px;color:var(--dg-forest)}
.sform-adv>summary::-webkit-details-marker{display:none}
.sform-adv>summary:hover{color:var(--dg-green)}
.sform-adv>summary::after{content:"+";margin-left:8px;font-size:20px;line-height:1;color:var(--dg-green);font-weight:500}
.sform-adv[open]>summary::after{content:"\2013"}
.sform-adv-hint{margin-left:auto;font-weight:300;font-size:12.5px;color:#9aa69d}
.sform-adv .form-note{padding:0 20px;margin-top:2px}
.sform-adv .sform-grid-ov{padding:14px 20px 20px}
.sform-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px;padding-top:28px;border-top:1px solid #e3e8e4}
.sform-actions .btn-ghost{border-color:#c8d0cb;color:var(--dg-forest)}
.sform-actions .btn-ghost:hover{background:var(--dg-mist);border-color:var(--dg-green);color:var(--dg-green-dark)}
@media(max-width:720px){
  .sform{padding:32px 22px;margin-top:-40px}
  .sform-grid,.sform-grid-ov{grid-template-columns:1fr}
  .sform-geo{flex-direction:column}
  .sform-geo-btn{padding:13px 22px}
}

/* ---------- search ---------- */
.searchbar{display:flex;gap:12px;max-width:560px;margin-top:26px}
.searchbar input{flex:1;padding:13px 17px;border-radius:100px;border:0;font:inherit;font-size:15px}
.searchresults{padding:70px 0 90px}
.searchresults h2{font-size:19px;margin:32px 0 14px;color:var(--dg-green)}
.s-hit{border-bottom:1px solid #eef1ef;padding:16px 0}
.s-hit a{font-family:"ABCFavorit","Poppins",sans-serif;font-weight:500;font-size:17px}
.s-hit a:hover{color:var(--dg-green)}
.s-hit p{font-size:14px;color:#5c6f64;margin-top:4px}

/* ---------- mobile nav ---------- */
.nav-right{display:flex;align-items:center;gap:16px}
.nav-search{display:inline-flex;color:#fff;opacity:.85;padding:6px}
.nav-search:hover{opacity:1;color:var(--dg-green)}
.lang-switch{display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:600;letter-spacing:.02em}
.lang-switch a{color:#fff;opacity:.6;padding:4px 6px;border-radius:6px;text-decoration:none;transition:.2s}
.lang-switch a:hover{opacity:1;color:var(--dg-green)}
.lang-switch a.on{opacity:1;color:#fff;background:rgba(255,255,255,.14);cursor:default}
.lang-menu{display:none}  /* desktop: only the top-bar switcher shows */
.nav-extra{display:none}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-burger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:.25s}
body.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-burger span:nth-child(2){opacity:0}
body.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1024px){
  .hero .wrap{grid-template-columns:1fr;gap:48px}
  .intro .wrap,.project .wrap{grid-template-columns:1fr}
  .gp-grid{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr;gap:26px;padding:32px 0}
  .f-row.flip .f-img{order:0}
  .lc-grid{grid-template-columns:repeat(2,1fr)}
  .lead-form .two{grid-template-columns:1fr}
  .nav-burger{display:flex}
  /* absolute (not fixed): the blurred header is a containing block for fixed
     descendants (backdrop-filter spec), which collapsed the fixed panel to the
     header's own 78px box on Chrome/new Safari. The header itself is fixed, so
     absolute below it is viewport-identical — in every browser. */
  #mainnav{position:absolute;top:78px;left:0;right:0;height:calc(100vh - 78px);height:calc(100dvh - 78px);background:rgba(4,22,13,.98);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transform:translateX(105%);transition:.32s cubic-bezier(.2,.7,.3,1);overflow-y:auto;overscroll-behavior:contain;padding-bottom:40px}
  body.nav-open #mainnav{transform:none}
  body.nav-open{overflow:hidden}
  .nav-root{flex-direction:column;align-items:stretch;gap:0;padding:14px 0}
  .nav-root>li{flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-root>li>a{flex:1;padding:16px 28px;font-size:17px;opacity:1}
  .sub-toggle{padding:16px 26px}
  .sub-toggle svg{width:16px;height:16px}
  /* accordion submenus */
  .sub{flex-basis:100%;display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
  .has-sub.open .sub{grid-template-rows:1fr}
  .sub-inner{overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:0 28px}
  .has-sub.open .sub-inner{padding:4px 28px 22px}
  .sub-col{margin-top:10px}
  .sub-title{font-size:15px}
  .sub-link{font-size:15px;padding:7px 0 7px 12px;border-left:2px solid rgba(255,255,255,.14)}
  .sub-link:hover,.sub-link.active{border-left-color:var(--dg-green);padding-left:14px}
  /* language switcher moves out of the crowded top bar into the hamburger panel */
  .lang-top{display:none}
  .lang-menu{display:flex;gap:6px;padding:24px 28px 8px;margin-top:6px;border-top:1px solid rgba(255,255,255,.1)}
  .lang-menu a{font-size:16px;padding:9px 14px;opacity:.7}
  .lang-menu a.on{opacity:1}
}
@media(max-width:600px){
  .wrap{padding:0 20px}
  .cr-head .cr-loc input{min-width:0}
  .cr-gate-inner{padding:30px 22px}
  .cr-lead .two{grid-template-columns:1fr}
}
@media(max-width:560px){
  .lc-grid{grid-template-columns:1fr}
  .nav .btn{display:none}
}

/* ---- GrowPro section ribbon (sticky glass sub-nav, /greenhouses) ---------- */
.snav{position:sticky;top:78px;z-index:40;margin-top:78px;background:rgba(6,31,19,.72);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.snav .wrap{display:flex;align-items:center;gap:4px;min-height:56px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.snav .wrap::-webkit-scrollbar{display:none}
.snav-root{font-family:"ABCFavorit","Poppins",sans-serif;font-weight:500;font-size:14.5px;color:#fff;padding:7px 14px 7px 0;margin-right:8px;border-right:1px solid rgba(255,255,255,.16);white-space:nowrap;transition:.2s}
.snav-root:hover,.snav-root.on{color:var(--dg-green)}
.snav-items{display:flex;align-items:center;gap:2px}
.snav a.item{font-size:14px;color:#fff;opacity:.8;padding:7px 14px;border-radius:var(--radius-pill);white-space:nowrap;transition:.2s}
.snav a.item:hover{opacity:1;color:var(--dg-green)}
.snav a.item.on{opacity:1;background:var(--dg-green);color:#fff;font-weight:500}
.snav-kids{display:flex;align-items:center;gap:2px;margin-left:10px;padding-left:14px;border-left:1px solid rgba(255,255,255,.16)}
.snav a.kid{font-size:13px;color:#fff;opacity:.65;padding:6px 12px;border-radius:var(--radius-pill);white-space:nowrap;transition:.2s}
.snav a.kid:hover{opacity:1;color:var(--dg-green)}
.snav a.kid.on{opacity:1;border:1px solid rgba(255,255,255,.4);color:#fff}
/* the ribbon already clears the fixed header, so the dark page-header
   underneath needs less of its own clearance */
.has-rail .page-header{padding-top:70px}

/* ---- interactive data tables (markdown tables, enhanced by dg-tables.js) -- */
.dt{overflow-x:auto;margin:28px 0;border-radius:16px;background:#fff;box-shadow:0 2px 20px rgba(6,31,19,.09)}
.dt table{width:100%;border-collapse:collapse;font-size:14.5px}
.dt th,.dt td{text-align:left;padding:14px 18px;border-bottom:1px solid #eef1ef;vertical-align:top}
.dt thead th{background:var(--dg-forest);color:#fff;font-weight:500;font-size:13.5px;letter-spacing:.02em;white-space:nowrap}
.dt tbody td{color:#31463a}
.dt tbody td:first-child{font-weight:500;color:var(--dg-forest)}
.dt tbody tr:last-child td{border-bottom:0}
.dt tbody tr{transition:background .15s}
.dt tbody tr:hover{background:rgba(113,155,80,.08)}
.dt-sortable thead th{padding:0}
.dt-sort{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:14px 18px;cursor:pointer;font:inherit;color:inherit}
.dt-sort:hover,.dt-sort:focus-visible{color:var(--dg-green)}
.dt-arrow::after{content:"\2195";font-size:11px;opacity:.45}
th[aria-sort="ascending"] .dt-sort{color:var(--dg-green)}
th[aria-sort="descending"] .dt-sort{color:var(--dg-green)}
th[aria-sort="ascending"] .dt-arrow::after{content:"\2191";opacity:1}
th[aria-sort="descending"] .dt-arrow::after{content:"\2193";opacity:1}
.snav a.kid-parent{opacity:.95;font-weight:500;color:var(--dg-green);padding-right:12px;margin-right:4px;border-right:1px solid rgba(255,255,255,.16);border-radius:0}

/* ---- reading navigation (prev / next under content pages) ---------------- */
.rnav{padding:8px 0 96px}
.rnav .wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* a tree root only points forward, so its single control sits on the right */
.rnav.rnav-root .wrap{grid-template-columns:1fr}
.rnav.rnav-root .rnav-link{justify-self:end;max-width:520px}
.rnav-link{display:flex;align-items:center;gap:14px;padding:20px 24px;border:1px solid rgba(6,31,19,.14);border-radius:14px;background:var(--dg-white);text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s}
.rnav-link:hover{border-color:var(--dg-green);transform:translateY(-2px);box-shadow:0 10px 28px rgba(6,31,19,.10)}
.rnav-next{grid-column:2;justify-content:flex-end;text-align:right}
.rnav-prev{grid-column:1}
/* when only a Next exists on a non-root page, keep it in the right-hand column */
.rnav:not(.rnav-root) .rnav-link:only-child.rnav-next{grid-column:2}
.rnav-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.rnav-dir{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6b7a70;font-weight:600}
.rnav-title{font-family:"ABCFavorit","Poppins",sans-serif;font-size:17px;font-weight:500;color:var(--dg-forest);line-height:1.3}
.rnav-arrow{flex:0 0 auto;font-size:20px;line-height:1;color:var(--dg-green);transition:transform .2s}
.rnav-link:hover .rnav-arrow{transform:translateX(3px)}
.rnav-prev:hover .rnav-arrow{transform:translateX(-3px)}
.rnav-link:focus-visible{outline:2px solid var(--dg-green);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .rnav-link,.rnav-arrow{transition:none}
  .rnav-link:hover{transform:none}
  .rnav-link:hover .rnav-arrow,.rnav-prev:hover .rnav-arrow{transform:none}
}
@media(max-width:760px){
  .rnav{padding-bottom:64px}
  .rnav .wrap,.rnav.rnav-root .wrap{grid-template-columns:1fr}
  .rnav-prev,.rnav-next,.rnav:not(.rnav-root) .rnav-link:only-child.rnav-next{grid-column:1}
  .rnav.rnav-root .rnav-link{justify-self:stretch;max-width:none}
}

/* ---- crop fact card -------------------------------------------------------
   The data plate at the foot of a /crops/* page. Ported from
   .planning/crop-layer/fact-card.css. Contrast on the forest plate was computed,
   not eyeballed: every text alpha here clears 4.5:1, and the footnote meta and use
   limitation were raised from .42/.38 (3.4:1) to .55/.52 for that reason.
   Superscripts are real anchors to the footnote list, so provenance is reachable
   by keyboard and screen reader, not only by eye. The print rule inverts the plate
   — this card is the part of a crop page somebody actually prints. */
/* Crop fact card — a data plate near the page footer.
   Tokens are the site's own (main.css :root). Nothing here invents a colour.
   Ported into public/assets/css/main.css by Claude Code; kept separate here so the
   prototype is reviewable on its own. */

/* Same 90px section rhythm as richtext/nutri/faq — the card sat at 0/4, the only
   element on the page outside the rhythm, which read as an afterthought. Top stays
   0: the preceding section's 90 bottom supplies the gap. */
.crop-facts{padding:0 0 90px}

/* Crop fact card — a compact data plate, deliberately NOT the centre of the page.
   Redesigned 2026-08-10: it was a full-bleed forest block with a lead paragraph, a
   confidence pill on every group and a two-column evidence register printed open —
   visually the biggest thing on a crop page. It is a detail. It now reads as one:
   hairline panel, small type, three dense columns, sources folded away.
   A crop with nothing publishable renders no card at all (see blocks.js). */

.crop-facts__plate{
  border:1px solid var(--dg-line,rgba(6,31,19,.14));
  border-left:3px solid var(--dg-green);
  border-radius:var(--radius-tile);
  padding:18px 22px 14px;
  background:rgba(6,31,19,.015);
}
.crop-facts__h{
  font-family:"ABCFavorit","Poppins",sans-serif;font-weight:500;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dg-forest);margin:0 0 14px;
}
.crop-facts__h span{
  text-transform:none;letter-spacing:0;font-weight:300;
  color:rgba(6,31,19,.5);margin-left:8px;font-size:12px;
}

/* ---- three dense columns; groups flow, they do not stack full width ---- */

/* Grid, not CSS columns: a group must never be split down the middle, and a card
   with one group should fill the panel rather than leave two empty tracks. */
.crop-facts__cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:4px 34px;align-items:start;
}
.crop-facts__group{margin:0 0 8px}
.crop-facts__gh{
  display:flex;align-items:baseline;gap:6px;
  font-family:"ABCFavorit","Poppins",sans-serif;font-weight:500;
  font-size:11.5px;letter-spacing:.02em;color:var(--dg-forest);
  margin:0 0 5px;padding-bottom:4px;
  border-bottom:1px solid rgba(6,31,19,.1);
}
.crop-facts__cite{margin-left:auto;white-space:nowrap}
/* practice-group attribution — sits where an evidence group's citations sit.
   Whose numbers these are, stated once; green because it is the house's own. */
.crop-facts__dg{
  margin-left:auto;white-space:nowrap;
  font-family:"Poppins",sans-serif;font-weight:400;
  font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dg-green);
}
.crop-facts__rows{margin:0}
.crop-facts__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:2.5px 0;
}
.crop-facts__row dt{font-size:11.5px;line-height:1.35;color:rgba(6,31,19,.62);margin:0}
.crop-facts__row dd{margin:0;font-size:11.5px;color:var(--dg-forest);white-space:nowrap}
.crop-facts__row dd b{
  font-family:"ABCFavorit","Poppins",sans-serif;font-weight:500;font-size:12.5px;
}
.crop-facts__u{color:rgba(6,31,19,.45);font-size:10.5px;margin-left:2px}

/* ---- superscript citations ------------------------------------------- */

.crop-facts sup{
  font-size:8.5px;line-height:0;margin-left:2px;
  color:rgba(6,31,19,.3);letter-spacing:.06em;
}
.crop-facts sup a{color:var(--dg-green);text-decoration:none}
.crop-facts sup a:hover,.crop-facts sup a:focus{text-decoration:underline}

/* ---- sources, folded ---------------------------------------------------
   A fragment target inside <details> opens it, so a superscript still reaches
   its note by keyboard and by link. */

.crop-facts__notes{border-top:1px solid rgba(6,31,19,.1);margin-top:6px;padding-top:8px}
.crop-facts__notes summary{
  cursor:pointer;list-style:none;
  font-family:"ABCFavorit","Poppins",sans-serif;font-weight:500;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(6,31,19,.5);
}
.crop-facts__notes summary::-webkit-details-marker{display:none}
.crop-facts__notes summary::after{content:"+";margin-left:6px;font-weight:400}
.crop-facts__notes[open] summary::after{content:"–"}
.crop-facts__notes summary:hover{color:var(--dg-forest)}
.crop-facts__notes summary span{
  letter-spacing:0;color:rgba(6,31,19,.35);margin-left:4px;
}
.crop-facts__notes ol{
  margin:10px 0 0;padding:0 0 0 1.2em;
  columns:2;column-gap:34px;
}
.crop-facts__notes li{
  font-size:10.5px;line-height:1.45;color:rgba(6,31,19,.55);
  margin:0 0 6px;break-inside:avoid;
}
.crop-facts__notes li a{color:var(--dg-forest);text-decoration:underline;text-underline-offset:2px}
.crop-facts__notes li a:hover{color:var(--dg-green)}
.crop-facts__meta{color:rgba(6,31,19,.38);font-size:9.5px;margin-left:3px}

.crop-facts__foot{
  margin:8px 0 0;font-size:10.5px;line-height:1.5;color:rgba(6,31,19,.42);
}

/* ---- responsive ------------------------------------------------------- */

@media (max-width:640px){
  .crop-facts__cols{grid-template-columns:1fr}
  .crop-facts__notes ol{columns:1}
  .crop-facts__plate{padding:16px 16px 12px}
}

/* Nutrition label — the classic food-pack plate, kept deliberately true to the
   genre: heavy rules, dense rows, narrow column. A smartly applied gimmick that
   reads instantly BECAUSE it looks like the real thing. Site tokens, no pure black. */

.nutri{padding:90px 0}   /* the site's section rhythm — richtext, faq, linkcards and artcar all use it */

/* Two columns: the argument on the left, the plate right-aligned beside it.
   Tried as a floated inset inside the body copy first — it read as a stray
   graphic. A section carrying prose AND the figures is a statement, which is
   what the content is. */
.nutri__cols{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:34px;
  align-items:start;
}
.nutri__copy h2{
  font-family:"ABCFavorit","Poppins",sans-serif;font-weight:500;
  font-size:26px;line-height:1.15;margin:0 0 14px;color:var(--dg-forest);
}
.nutri__copy p{font-size:15.5px;line-height:1.65;margin:0 0 14px;color:var(--dg-forest)}
.nutri__copy p:last-child{margin-bottom:0}
.nutri__aside{justify-self:end}

@media (max-width:860px){
  .nutri__cols{grid-template-columns:1fr;gap:24px}
  .nutri__aside{justify-self:start}
}
.nutri__plate{
  max-width:340px;
  border:2px solid var(--dg-forest);
  border-radius:2px;
  padding:10px 14px 8px;
  background:#fff;
}
.nutri__h{
  font-family:"ABCFavorit","Poppins",sans-serif;font-weight:500;
  font-size:22px;letter-spacing:-.01em;line-height:1.05;
  margin:0 0 2px;color:var(--dg-forest);
}
.nutri__sub{margin:0;font-size:11.5px;color:rgba(6,31,19,.7)}
.nutri__basis{
  margin:2px 0 0;padding:0 0 4px;font-size:11px;font-weight:600;color:var(--dg-forest);
  border-bottom:8px solid var(--dg-forest);
}
.nutri__rows{margin:0}
.nutri__row{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:3px 0;border-bottom:1px solid rgba(6,31,19,.25);
  font-size:12px;color:var(--dg-forest);
}
.nutri__row dt{margin:0}
.nutri__row dd{margin:0;white-space:nowrap;font-weight:600}
.nutri__row dd span{font-weight:400;color:rgba(6,31,19,.55);font-size:11px}
.nutri__row--sub{padding-left:14px}
.nutri__row--sub dt{color:rgba(6,31,19,.65)}
.nutri__b{font-weight:700}
.nutri__rows .nutri__row:last-child{border-bottom:4px solid var(--dg-forest)}
.nutri__src{
  margin:6px 0 0;font-size:9.5px;line-height:1.4;color:rgba(6,31,19,.5);
}
.nutri__src a{color:rgba(6,31,19,.65);text-decoration:underline;text-underline-offset:2px}
.nutri__src a:hover{color:var(--dg-green)}
@media print{.nutri__plate{border-color:#061f13}}

/* ---- print ------------------------------------------------------------ */

@media print{
  .crop-facts__plate{background:#fff;border-color:#061f13}
  .crop-facts__notes[open] ol,.crop-facts__notes ol{display:block}
  .crop-facts__row dt,.crop-facts__foot{color:#33443b}
}

/* ============================================================ GrowPro model pages (.gpm-) ==
   The Expert-1-Acre sheet design, generalised to all nine models. Rendered by
   the growpro_* blocks; every figure is a server-rendered dual span pair.
   NOTE: .gp- is taken (growpro hub cards) — everything here is .gpm-. */

/* IBM Plex Mono: the technical/dimension register of the model sheets.
   Self-hosted latin subsets (the Poppins pattern); no preload — below the fold. */
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/IBMPlexMono-400.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2013-2033,U+00B2,U+00B7}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/IBMPlexMono-500.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+2013-2033,U+00B2,U+00B7}

/* ---- unit/currency literal spans: CSS is the switch, dg-units.js the state.
   Server default (and no-JS reading): metric + EUR visible. */
[data-i],[data-usd]{display:none}
html[data-dg-units="imperial"] [data-m]{display:none}
html[data-dg-units="imperial"] [data-i]{display:inline}
html[data-dg-currency="USD"] [data-eur]{display:none}
html[data-dg-currency="USD"] [data-usd]{display:inline}

/* ---- shared section rhythm ---- */
.gpm-sec{padding:90px 0}
.gpm-sec--tight{padding:64px 0}
.gpm-sub{font-size:18px;color:#5c6f64;max-width:56ch;margin:0 0 34px}
.gpm-note{font-size:14.5px;color:#5c6f64;max-width:62ch;margin-top:24px}
.gpm-note--small{font-size:13px;margin:18px 0 0}
.gpm-note strong{color:var(--dg-forest);font-weight:500}
.gpm-book{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:#7b8a81;margin-top:14px;letter-spacing:.02em}
.gpm-dim{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;fill:#061f13}
.gpm-dim--soft{fill:#7b8a81}
.gpm-dim--green{fill:#5d8340}
.gpm-plan-t{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:26px;fill:rgba(255,255,255,.75)}
.gpm-plan-t--soft{font-size:22px;fill:rgba(255,255,255,.55)}
.gpm-plan-t--faint{font-size:22px;fill:rgba(255,255,255,.45)}

/* ---- sticky toolbar ---- */
.gpm-toolbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #eef1ef}
.gpm-toolbar.is-stuck{box-shadow:0 6px 24px -18px rgba(6,31,19,.35)}
.gpm-tb-inner{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:10px clamp(20px,5vw,40px);max-width:1120px;margin:0 auto}
.gpm-tb-note{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7b8a81;margin-right:auto}
.gpm-seg{display:inline-flex;border:1px solid #dfe4e1;border-radius:100px;padding:3px;background:#fff}
.gpm-seg button{font-size:12.5px;font-weight:500;letter-spacing:.04em;border:0;cursor:pointer;background:transparent;color:#5c6f64;padding:8px 16px;border-radius:100px;transition:background .2s ease,color .2s ease}
.gpm-seg button:hover{color:var(--dg-forest)}
.gpm-seg button.on{background:var(--dg-forest);color:#fff}
@media(max-width:560px){.gpm-tb-note{display:none}.gpm-tb-inner{justify-content:center}}

/* ---- dark illustration bands ---- */
.gpm-plx{position:relative;min-height:clamp(380px,58vh,620px);display:grid;place-items:center;background:var(--dg-forest);color:#fff;overflow:hidden;padding:0}
.gpm-plx-bg{position:absolute;inset:0;background-image:radial-gradient(ellipse 120% 80% at 50% 8%,rgba(113,155,80,.30),transparent 62%),linear-gradient(168deg,#0b2a1a 0%,#061f13 52%,#04170e 100%)}
.gpm-plx-grid{position:absolute;inset:0;opacity:.5;background-image:repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.06) 79px 80px),repeating-linear-gradient(0deg,transparent 0 79px,rgba(255,255,255,.05) 79px 80px)}
.gpm-plx-inner{position:relative;width:100%;max-width:1120px;padding:64px clamp(20px,5vw,40px);text-align:center}
.gpm-plx .eyebrow{color:var(--dg-green)}
.gpm-plx h2{color:#fff;margin:0 auto 18px;max-width:22ch}
.gpm-plx p{color:rgba(255,255,255,.78);max-width:56ch;margin:0 auto}
.gpm-plx-cap{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;line-height:1.7;color:rgba(255,255,255,.52)!important;margin:18px auto 0!important;max-width:60ch;letter-spacing:.02em}
.gpm-scene{display:block;width:100%;height:auto;border-radius:var(--radius-card);border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px -28px rgba(0,0,0,.6)}
.gpm-scene-light{display:block;width:100%;height:auto;border-radius:var(--radius-card);border:1px solid #dfe4e1;background:#f7f9f8}

/* ---- scroll-driven build ---- */
.gpm-build-track{height:430vh;position:relative;background:#fff}
.gpm-build-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column}
.gpm-build-head{width:100%;max-width:1120px;margin:0 auto;padding:64px clamp(20px,5vw,40px) 0}
.gpm-build-head h2{margin-bottom:8px}
.gpm-build-canvas{flex:1;width:100%;display:block;min-height:0}
.gpm-build-caps{position:absolute;left:clamp(20px,5vw,40px);bottom:clamp(24px,7vh,64px);width:min(430px,86vw);pointer-events:none}
.gpm-bcap{position:absolute;bottom:0;left:0;width:100%;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid #dfe4e1;border-radius:14px;padding:18px 22px}
.gpm-bcap.on{opacity:1;transform:none}
.gpm-bcap .k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dg-green-dark);display:block;margin-bottom:9px}
.gpm-bcap p{font-size:15px;line-height:1.55;color:#31463a;margin:0;max-width:none}
.gpm-bcap p strong{font-weight:500;color:var(--dg-forest)}
.gpm-build-dots{position:absolute;right:clamp(16px,4vw,34px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.gpm-build-dots i{width:7px;height:7px;border-radius:50%;background:#dfe4e1;transition:background .3s ease,transform .3s ease}
.gpm-build-dots i.on{background:var(--dg-green-dark);transform:scale(1.35)}
.gpm-build-note{position:absolute;right:clamp(16px,4vw,34px);bottom:clamp(16px,4vh,30px);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;line-height:1.6;letter-spacing:.06em;color:#7b8a81;text-align:right}
/* reduced motion / static fallback: no track, captions stacked, canvas gone */
@media(prefers-reduced-motion:reduce){
  .gpm-build-track{height:auto}
  .gpm-build-stage{position:static;height:auto;overflow:visible}
  .gpm-build-canvas,.gpm-build-dots,.gpm-build-note{display:none}
  .gpm-build-caps{position:static;width:auto;max-width:640px;margin:24px auto 64px;pointer-events:auto}
  .gpm-bcap{position:static;opacity:1;transform:none;margin-bottom:14px}
}
.gpm-build--static .gpm-build-canvas{display:none}

/* ---- KPI band ---- */
.gpm-band{background:var(--dg-mist);padding:90px 0}
.gpm-band .wrap>h2,.gpm-band-inner h2{margin-bottom:24px}
.gpm-band-inner{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center;max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
@media(max-width:840px){.gpm-band-inner{grid-template-columns:1fr;gap:34px}}
.gpm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px 28px;margin:26px 0 34px}
.gpm-kpis .num{font-family:var(--font-display,"ABCFavorit","Poppins",sans-serif);font-weight:500;font-size:29px;line-height:1.1;color:var(--dg-forest);letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.gpm-kpis .lbl{font-size:13.5px;line-height:1.45;color:#5c6f64;margin-top:5px}

/* ---- pull quote ---- */
.gpm-quote-sec{padding:64px 0}
.gpm-quote{border-left:3px solid var(--dg-green);padding:6px 0 6px 30px;max-width:760px;margin:0}
.gpm-quote p{font-family:"ABCFavorit","Poppins",sans-serif;font-weight:500;letter-spacing:-.015em;font-size:clamp(24px,3.3vw,38px);line-height:1.24;color:var(--dg-forest);margin:0 0 20px;text-wrap:balance}
.gpm-quote cite{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dg-green-dark);font-style:normal}

/* ---- drawings & tables ---- */
.gpm-draw{width:100%;height:auto;display:block;background:#fff;border:1px solid #dfe4e1;border-radius:var(--radius-card)}
.gpm-sec figure{margin:0}
.gpm-sec figcaption{font-size:14px;line-height:1.6;color:#5c6f64;margin-top:16px;max-width:62ch}
.gpm-grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:840px){.gpm-grid2{grid-template-columns:1fr}}
.gpm-tablecard{background:#fff;border-radius:var(--radius-card);padding:24px 26px;border:1px solid #dfe4e1;overflow-x:auto}
.gpm-tablecard table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums;min-width:380px}
.gpm-tablecard th{text-align:right;font-weight:500;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dg-green-dark);padding:8px 10px;border-bottom:1px solid #dfe4e1}
.gpm-tablecard th:first-child,.gpm-tablecard td:first-child{text-align:left}
.gpm-tablecard td{text-align:right;padding:9px 10px;border-bottom:1px solid #eef1ef;color:#31463a}
.gpm-tablecard tbody tr:hover{background:#f7f9f8}
.gpm-tablecard tbody tr:last-child td{border-bottom:0}
.gpm-tablecard td.alt{color:#7b8a81}
.gpm-bar{width:38%}
.gpm-bar i{display:block;height:7px;border-radius:100px;background:var(--dg-green)}
.gpm-bar i.rate{background:#7b8a81;opacity:.42}

/* ---- yields ---- */
.gpm-yield{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:16px}
.gpm-ycard{background:#fff;border:1px solid #dfe4e1;border-radius:var(--radius-card);padding:22px 24px;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.gpm-ycard:hover{transform:translateY(-3px);border-color:var(--dg-green);box-shadow:0 14px 34px -18px rgba(6,31,19,.25)}
.gpm-ycard .crop{font-size:14.5px;line-height:1.4;color:#5c6f64;margin-bottom:10px}
.gpm-ycard .n{font-family:"ABCFavorit","Poppins",sans-serif;font-weight:500;font-size:31px;line-height:1;color:var(--dg-forest);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gpm-ycard .u{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:#7b8a81;margin-top:7px}

/* ---- price card ---- */
.gpm-price{background:var(--dg-mist);border-radius:var(--radius-card);padding:clamp(28px,4vw,44px);margin-top:34px}
.gpm-price .lbl{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dg-green-dark);display:block;margin-bottom:16px}
.gpm-price .amt{font-family:"ABCFavorit","Poppins",sans-serif;font-weight:500;font-size:clamp(38px,6vw,62px);line-height:1;letter-spacing:-.03em;color:var(--dg-forest);display:block;font-variant-numeric:tabular-nums}
.gpm-price .per{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:15px;line-height:1.6;color:#5c6f64;margin-top:14px;display:block}
.gpm-paid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
@media(max-width:700px){.gpm-paid{grid-template-columns:1fr}}
.gpm-paid>div{background:#fff;border-radius:14px;padding:18px 20px;border:1px solid #dfe4e1}
.gpm-paid .pk{display:block;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#7b8a81;margin-bottom:7px}
.gpm-paid .pv{display:block;font-family:"ABCFavorit","Poppins",sans-serif;font-weight:500;font-size:20px;color:var(--dg-forest);font-variant-numeric:tabular-nums}
.gpm-paid small{display:block;font-size:12.5px;line-height:1.55;color:#5c6f64;margin-top:6px}

/* ---- gated download centre ---- */
.gpm-docs-wrap{display:grid;grid-template-columns:1.6fr 1fr;gap:26px;align-items:stretch}
@media(max-width:900px){.gpm-docs-wrap{grid-template-columns:1fr}}
.gpm-doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-content:start;align-items:start}
@media(max-width:560px){.gpm-doc-grid{grid-template-columns:1fr}}
.gpm-doc-card{background:#fff;border:1px solid #dfe4e1;border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.gpm-doc-card:hover{transform:translateY(-3px);border-color:var(--dg-green);box-shadow:0 16px 38px -20px rgba(6,31,19,.28)}
.gpm-doc-thumb{position:relative;aspect-ratio:4/3;background:#f7f9f8;overflow:hidden}
.gpm-doc-thumb>svg:not(.gpm-doc-lock svg){position:absolute;inset:-4%;width:108%;height:108%;filter:blur(5px) saturate(.9);transform:scale(1.03);transition:filter .4s ease}
.gpm-doc-card:hover .gpm-doc-thumb>svg:not(.gpm-doc-lock svg){filter:blur(3.5px) saturate(1)}
.gpm-doc-card.is-open .gpm-doc-thumb>svg:not(.gpm-doc-lock svg){filter:none;transform:none}
.gpm-doc-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5))}
.gpm-doc-card.is-open .gpm-doc-thumb::after{background:none}
.gpm-doc-lock{position:absolute;top:12px;right:12px;z-index:2;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.9);backdrop-filter:blur(4px);border:1px solid #dfe4e1;border-radius:100px;padding:6px 12px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#5c6f64}
.gpm-doc-lock svg{width:11px;height:13px;flex:none}
.gpm-doc-card.is-open .gpm-doc-lock{color:var(--dg-green-dark);border-color:var(--dg-green)}
.gpm-doc-meta{padding:16px 18px 18px}
.gpm-doc-meta h3{font-size:16.5px;margin-bottom:5px}
.gpm-doc-meta p{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;line-height:1.6;color:#7b8a81;margin:0}
.gpm-doc-dl{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:500;color:var(--dg-green-dark)}
.gpm-gate{background:var(--dg-forest);border-radius:var(--radius-card);color:#fff;padding:clamp(26px,3.4vw,38px);display:flex;flex-direction:column}
.gpm-gate h3{color:#fff;font-size:clamp(21px,2.2vw,26px);margin-bottom:12px;text-wrap:balance}
.gpm-gate>p{color:rgba(255,255,255,.75);font-size:14.5px;margin-bottom:24px}
.gpm-gate label{display:block;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 7px}
.gpm-gate input{width:100%;background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:10px;font-size:15px;line-height:1.4;padding:12px 14px;margin-bottom:16px}
.gpm-gate input::placeholder{color:rgba(255,255,255,.35)}
.gpm-gate input:focus-visible{outline:2px solid var(--dg-green);outline-offset:1px}
.gpm-gate .btn{border:0;cursor:pointer;width:100%;text-align:center;margin-top:4px}
.gpm-gate-fine{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.5);margin:16px 0 0}
.gpm-gate-msg{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;line-height:1.6;color:var(--dg-green);margin:14px 0 0}
.gpm-gate .gpm-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.gpm-gate.is-done input,.gpm-gate.is-done label{opacity:.45;pointer-events:none}

/* ---- 3D viewer ---- */
.gpm-viewer{position:relative;border-radius:var(--radius-card);overflow:hidden;border:1px solid #dfe4e1;background:#e8efec}
.gpm-viewer-stage{aspect-ratio:16/9;min-height:320px}
.gpm-viewer-stage canvas{display:block;width:100%;height:100%}
.gpm-viewer-bar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:6px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border:1px solid #dfe4e1;border-radius:100px;padding:5px}
.gpm-viewer-bar button{font-size:12.5px;font-weight:500;border:0;cursor:pointer;background:transparent;color:#31463a;padding:8px 13px;border-radius:100px}
.gpm-viewer-bar button:hover{background:var(--dg-mist)}
.gpm-viewer-bar button.on{background:var(--dg-forest);color:#fff}
.gpm-viewer-bar button:disabled{opacity:.4;cursor:default}
.gpm-viewer-status{position:absolute;left:16px;top:12px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:#5c6f64;background:rgba(255,255,255,.85);border-radius:8px;padding:6px 10px;margin:0}
.gpm-viewer-help{position:absolute;right:16px;top:12px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:#5c6f64;background:rgba(255,255,255,.85);border-radius:8px;padding:6px 10px;margin:0}
@media(max-width:700px){.gpm-viewer-bar{flex-wrap:wrap;border-radius:16px;justify-content:center;max-width:92%}}

/* ============================================================
   /psychro — the live instrument (16.1)
   ============================================================
   The .psy-* layer ONLY, appended in 16.1-02. HARD RULES:
   - The :root block at the top of this file is NOT edited. server/lib/
     psychro-og.js resolves the studio COLORS var() tokens against a table
     restating exactly those :root defaults, with throw-on-unknown — a
     moved default silently recolors every OG card while the page chart
     follows the stylesheet. test/psychro-page-css.test.mjs quotes the
     token lines verbatim and holds them here.
   - No existing selector above is modified. Every rule below is a pure
     addition anchored on a .psy-* class: directly, as an ancestor, or —
     for the /psychro prose section, which carries no class of its own —
     via `.psy-rail ~ .prose` (state views) and `.prose:has(.psy-provenance)`
     (the landing too; :is() keeps the fallback alive where :has is not
     supported). No other page emits those hooks, so no other page matches.
   - Nothing in this block is ever display-hidden: the caveat, the
     scrubber's convention and cost-basis sentences and every stated
     absence are server contracts — the suite scans this block for the
     hiding token. The live hint dims in and out by opacity only, as the
     plan specifies.
   The composition: the chart is the hero on the forest band, full-width,
   the glass readout floating beside it (the homepage hero + climate-card
   grammar); the slider rail is a light instrument band with 28px thumbs,
   44px chips and the hour scrubber demoted to the rail's fourth row; the
   prose argument gets the site's card, pill and table grammar. */

/* -- the hero: the chart full-width on the forest band ------------------ */
/* The two figures the hero's geometry is built from live here as custom
   properties, not as three copies of the same number: the readout column's
   width and the column gap. The EMPTY hero (the landing, which has no
   readout to put in the second column) derives its single column from them
   by subtraction, so the chart is exactly the same width with a state and
   without one — the instrument does not change size when a state arrives. */
.psy-hero{--psy-readout-w:380px;--psy-hero-gap:48px;background:var(--dg-forest);color:#fff;padding:0 0 90px}
.psy-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) var(--psy-readout-w);gap:22px var(--psy-hero-gap);align-items:center}
.psy-hero .wrap>h2{grid-column:1/-1;font-family:"Poppins",sans-serif;font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--dg-green);margin:0 0 4px}
/* the landing: one column, the chart centred at the state view's own width */
.psy-hero-empty .wrap{grid-template-columns:minmax(0,calc(100% - var(--psy-readout-w) - var(--psy-hero-gap)));justify-content:center}
/* the chart panel goes transparent: the hero band IS the dark panel now */
.psy-hero .cr-chart{background:none;padding:0;margin:0}
/* the responsive viewBox does its work — the studio's screen-fix grammar.
   720/520 is PSY_VIEW in server/lib/psychro-page.js: the near-square box the
   psychrometric plane needs, where both axes carry a physical quantity. */
.psy-hero .cr-svg{height:auto;aspect-ratio:720/520}
.psy-hero .cr-chart .legend{margin-top:14px;opacity:.85}
.psy-hero .chart-point-label{transition:opacity .25s}

/* -- the floating readout: climate-card glass grammar ------------------- */
.psy-readout{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-card);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);padding:26px 28px 22px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.psy-readout h2{font-size:19px;margin:0 0 4px}
.psy-readout p{font-size:12.5px;opacity:.75;margin:0 0 14px}
.psy-readout-field{display:flex;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.psy-readout-field:last-of-type{border-bottom:0}
.psy-readout-label{font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;opacity:.65}
.psy-live-val{font-family:"ABCFavorit","Poppins",sans-serif;font-weight:500;font-size:21px;line-height:1.2;margin-left:auto;font-variant-numeric:tabular-nums}
.psy-readout-unit{font-size:11.5px;font-weight:300;opacity:.7}
/* the live hint: present in the markup always, revealed by opacity under
   .is-live (wave 3 toggles the class; the words are the server's) */
.psy-live-hint{display:block;font-size:12.5px;color:var(--dg-green);min-height:1.4em;margin-top:12px;opacity:0;transition:opacity .25s}
.is-live .psy-live-hint{opacity:1}
/* mid-drag the settled statements dim — stale until release, never hidden */
.is-live .psy-verdict{opacity:.45}
.is-live .chart-point-label{opacity:.25}

/* -- the rail: the instrument band ------------------------------------- */
.psy-rail{background:var(--dg-mist);padding:64px 0 72px}
.psy-rail .wrap>h2{font-size:clamp(21px,2.2vw,26px);margin:0 0 24px}
/* the controls form — shared with the landing (the :has hook); a white
   instrument card, label + number input beside a full-width slider row */
:is(.psy-rail,.prose:has(.psy-provenance)) form.controls{background:#fff;border:1px solid #dfe4e1;border-radius:var(--radius-card);padding:26px 30px;display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:18px 30px;align-items:center;margin:0 0 18px}
:is(.psy-rail,.prose:has(.psy-provenance)) form.controls label{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13.5px;font-weight:500;color:#3c4f45}
:is(.psy-rail,.prose:has(.psy-provenance)) form.controls input[type="number"]{padding:11px 14px;border:1px solid #c8d0cb;border-radius:12px;font:inherit;font-size:15px;font-weight:300;width:120px;background:#fff;color:var(--dg-forest)}
:is(.psy-rail,.prose:has(.psy-provenance)) form.controls input[type="number"]:focus{outline:2px solid var(--dg-green);border-color:transparent}
/* alt as the compact stepper */
:is(.psy-rail,.prose:has(.psy-provenance)) form.controls input[name="alt"]{width:104px}
:is(.psy-rail,.prose:has(.psy-provenance)) form.controls button[type="submit"],.psy-rail .scrubber-form button[type="submit"]{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-family:inherit;font-weight:500;font-size:14.5px;padding:12px 28px;border-radius:var(--radius-pill);border:0;background:var(--dg-green);color:#fff;cursor:pointer;transition:.25s}
:is(.psy-rail,.prose:has(.psy-provenance)) form.controls button[type="submit"]:hover,.psy-rail .scrubber-form button[type="submit"]:hover{background:var(--dg-green-dark)}
:is(.psy-rail,.prose:has(.psy-provenance)) form.controls button[type="submit"]{grid-column:2;justify-self:start}

/* -- the sliders: full-width rail, 28px touch thumbs -------------------- */
.psy-slider,.psy-rail .scrubber-form input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;accent-color:var(--dg-green);cursor:pointer;margin:0}
.psy-slider::-webkit-slider-runnable-track,.psy-rail .scrubber-form input[type="range"]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:rgba(6,31,19,.16)}
.psy-slider::-webkit-slider-thumb,.psy-rail .scrubber-form input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:var(--dg-green);border:4px solid #fff;box-shadow:0 2px 10px rgba(6,31,19,.35);margin-top:-10px;cursor:grab}
.psy-slider::-moz-range-track,.psy-rail .scrubber-form input[type="range"]::-moz-range-track{height:8px;border-radius:4px;background:rgba(6,31,19,.16)}
.psy-slider::-moz-range-thumb,.psy-rail .scrubber-form input[type="range"]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--dg-green);border:4px solid #fff;box-shadow:0 2px 10px rgba(6,31,19,.35)}
.psy-slider:focus-visible,.psy-rail .scrubber-form input[type="range"]:focus-visible{outline:2px solid var(--dg-green);outline-offset:4px}

/* -- the strategy toggles as chips (CSS-only — the markup is frozen) ---- */
.psy-rail .controls+p{font-size:13px;color:#5c6f64;margin:0 0 10px}
.psy-rail .strategy-toggles{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0}
.psy-rail .strategy-toggles li{margin:0}
.psy-rail .strategy-toggles li a{display:inline-flex;align-items:center;min-height:44px;padding:10px 22px;border-radius:var(--radius-pill);border:1px solid rgba(6,31,19,.25);background:#fff;font-size:14px;font-weight:500;color:var(--dg-forest);transition:.2s}
.psy-rail .strategy-toggles li a:hover{border-color:var(--dg-green);color:var(--dg-green)}

/* -- the hour scrubber: the rail's fourth row, demoted not hidden ------- */
.psy-rail .scrubber{margin-top:28px;padding-top:26px;border-top:1px solid rgba(6,31,19,.12)}
.psy-rail .scrubber h2{font-family:"Poppins",sans-serif;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dg-green);margin:0 0 10px}
/* the convention and cost-basis sentences: small and muted, always visible */
.psy-rail .scrubber p{font-size:13px;color:#5c6f64;max-width:82ch;margin:0 0 8px}
.psy-rail .scrubber .hour-readout{font-size:15.5px;font-weight:500;color:var(--dg-forest);margin:0 0 10px}
.psy-rail .scrubber-form{display:flex;align-items:center;gap:20px;margin-top:14px}
.psy-rail .scrubber-form label{flex:1 1 auto;display:flex;align-items:center;gap:16px;font-size:13.5px;font-weight:500;color:#3c4f45}
.psy-rail .scrubber-form input[type="range"]{flex:1 1 auto}

/* -- the crop chips: big, tappable, wrapping ---------------------------- */
.psy-chips{display:flex;flex-wrap:wrap;gap:10px}
.psy-chips-crop{margin-top:30px}
.psy-chip{display:inline-flex;align-items:center;min-height:44px;padding:11px 24px;border-radius:var(--radius-pill);border:1px solid rgba(6,31,19,.25);background:#fff;font-size:14.5px;font-weight:500;color:var(--dg-forest);transition:.2s}
a.psy-chip:hover{border-color:var(--dg-green);color:var(--dg-green)}
.psy-chip-active{background:var(--dg-green);border-color:var(--dg-green);color:#fff}
/* The family -> variety drill-down: the variety row sits UNDER its family row and reads as the
   subordinate step (tighter gap, smaller chips, indented rule), so the two rows are one control
   rather than two competing ones. The trailing .psy-chip-id is the active crop's raw id — the URL
   grammar's own vocabulary, kept visible because the readable label deliberately hides it. */
.psy-chips-family{margin-top:30px}
.psy-chips-family+.psy-chips-variety{margin-top:10px}
.psy-chips-variety{margin-top:10px;padding-left:14px;border-left:2px solid rgba(6,31,19,.12);gap:8px}
.psy-chips-variety .psy-chip{min-height:38px;padding:8px 18px;font-size:13.5px}
.psy-chip-id{display:inline-flex;align-items:center;font-size:12px;letter-spacing:.06em;color:rgba(6,31,19,.55)}

/* -- the prose argument: /psychro's own section rhythm ------------------ */
:is(.psy-rail~.prose,.prose:has(.psy-provenance)){padding:70px 0 90px}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) h2{font-size:clamp(23px,2.4vw,30px);margin:54px 0 16px}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) .wrap>h2:first-child{margin-top:0}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) h3{font-size:19px;margin:28px 0 10px}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) p{margin:0 0 15px;color:#31463a;font-size:16px}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) :is(p,td) a{color:var(--dg-green);font-weight:500}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) .strategy-toggles{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:8px 18px}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) .strategy-toggles a{color:var(--dg-green);font-weight:500}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) code{font-size:13px;background:rgba(6,31,19,.06);padding:2px 7px;border-radius:6px}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) em.provisional{font-style:normal;font-size:12px;color:var(--dg-green-dark);border:1px solid rgba(113,155,80,.5);border-radius:var(--radius-pill);padding:1px 8px;margin-left:2px;white-space:nowrap}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) .tiers{padding-left:20px;margin:10px 0 26px}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) .tiers li{margin-bottom:10px;color:#31463a;font-size:15px}

/* -- the data tables: full-width, generous rows, zebra tint ------------- */
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) :is(.air-state,.recipe,.examples){width:100%;border-collapse:collapse;margin:6px 0 30px;font-size:14.5px}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) :is(.air-state,.recipe,.examples) th{text-align:left;font-weight:500;padding:11px 14px;border-bottom:1px solid #eef1ef;color:var(--dg-forest)}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) :is(.air-state,.recipe,.examples) td{text-align:left;padding:11px 14px;border-bottom:1px solid #eef1ef;color:#31463a}
/* zebra via nth-of-type, deliberately NOT nth-child: test/studio-report.test.mjs
   WR-06 couples any nth-child striping token in this file to the studio print
   block's preserve list — a coupling for REPORT tables. This rule is fenced to
   /psychro's prose (psy-anchored scope) and can never match the report DOM;
   inside tbody every child is a tr, so nth-of-type(odd) is row-identical. */
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) :is(.air-state,.recipe) tbody tr:nth-of-type(odd){background:rgba(6,31,19,.03)}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) .examples thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dg-green)}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) .examples .example-note td{font-size:13px;color:#5c6f64;padding-top:2px}

/* -- the verdict statement card ----------------------------------------- */
.psy-verdict{border:1px solid #dfe4e1;border-radius:var(--radius-card);background:#fff;padding:28px 32px;margin:40px 0;transition:opacity .25s}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) .psy-verdict h2{margin:0 0 16px;font-size:22px}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) .psy-verdict h3{font-size:20px;margin:18px 0 8px}
/* the hour emphasis: the queried hour's context, led by the green rule —
   emphasis only; both verdict columns stay rendered */
.psy-verdict .hour-context{border-left:3px solid var(--dg-green);background:rgba(113,155,80,.1);padding:10px 16px;border-radius:0 10px 10px 0}

/* -- the strategy ladder as rung cards, the recommended rung leading ---- */
.psy-ladder .rungs{list-style:none;padding:0;margin:8px 0 30px;display:grid;gap:14px}
.psy-ladder .rungs>li{border:1px solid #dfe4e1;border-radius:var(--radius-card);background:#fff;padding:22px 26px;font-size:14.5px;line-height:1.65;color:#31463a;margin:0}
.psy-ladder .rungs>li strong{font-family:"ABCFavorit","Poppins",sans-serif;font-weight:500;font-size:16px;color:var(--dg-forest)}
.psy-ladder .rungs>li.psy-rung-reco{border:2px solid var(--dg-green);background:rgba(113,155,80,.06);box-shadow:0 18px 44px rgba(6,31,19,.1)}
/* the side-effects ledger as worded tag pills — text untouched */
.psy-ladder .ledger{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:14px 0 0}
.psy-ladder .ledger li{border:1px solid rgba(6,31,19,.16);border-radius:var(--radius-pill);background:rgba(6,31,19,.03);padding:6px 14px;font-size:12.5px;line-height:1.5;color:#31463a;margin:0}

/* -- provenance: the document footer it is ------------------------------ */
.psy-provenance{display:block;border-top:1px solid #dfe4e1;margin-top:56px;padding-top:36px}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) .psy-provenance h2{font-family:"Poppins",sans-serif;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dg-green);margin:0 0 16px}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) .psy-provenance p{font-size:13.5px;color:#5c6f64;margin:0 0 8px}
/* the caveat blockquote: the page's signature — left rule, italic off */
.psy-provenance blockquote{margin:22px 0 0;padding:14px 20px;border-left:3px solid var(--dg-green);background:rgba(113,155,80,.07);border-radius:0 12px 12px 0}
:is(.psy-rail~.prose,.prose:has(.psy-provenance)) .psy-provenance blockquote p{font-style:normal;font-size:14.5px;color:var(--dg-forest);margin:0}

/* -- mobile: everything reflows, nothing hides -------------------------- */
@media(max-width:760px){
  .psy-hero{padding:0 0 60px}
  .psy-hero .wrap{grid-template-columns:1fr;gap:26px;padding:0 20px}
  /* the empty hero collapses to the same single column — its derived width
     is a desktop rule only, and the subtraction would go negative here */
  .psy-hero-empty .wrap{grid-template-columns:1fr;justify-content:stretch}
  .psy-rail{padding:46px 0 54px}
  .psy-rail .wrap{padding:0 20px}
  :is(.psy-rail~.prose,.prose:has(.psy-provenance)){padding:52px 0 64px}
  :is(.psy-rail~.prose,.prose:has(.psy-provenance)) .wrap{padding:0 20px}
  :is(.psy-rail,.prose:has(.psy-provenance)) form.controls{grid-template-columns:1fr;padding:22px 20px}
  :is(.psy-rail,.prose:has(.psy-provenance)) form.controls label{flex-wrap:wrap}
  :is(.psy-rail,.prose:has(.psy-provenance)) form.controls button[type="submit"]{grid-column:1;justify-self:stretch}
  .psy-rail .scrubber-form{flex-direction:column;align-items:stretch;gap:12px}
  .psy-rail .scrubber-form label{flex-wrap:wrap}
  .psy-verdict{padding:22px 20px}
  .psy-ladder .rungs>li{padding:18px}
}