/* ==========================================================================
   Dubb Horticulture Limited - design system
   Single accent (leaf green, sampled from the logo), single radius (4px),
   one theme lock per page with light/dark token sets. No build step.
   ========================================================================== */

/* ---------- Fonts (self-hosted; no third-party request) ---------- */
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight:400 800; font-stretch:62% 125%; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight:400 800; font-stretch:62% 125%; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root{
  --paper:#F5F3EC; --surface:#FFFFFF; --surface-2:#EAE7DB;
  --ink:#16211B; --ink-2:#4C5A51; --line:#D9D5C6; --line-strong:#C4BFAC;
  --accent:#4F7A22; --accent-hover:#436819; --accent-ink:#FFFFFF;
  --canopy:#12291B; --forest:#1B4430;
  --on-canopy:#F5F3EC; --on-canopy-2:#B6C4B4; --on-canopy-accent:#9ED45B; --on-canopy-line:#2B4433;
  --shade:rgba(18,41,27,.10); --shade-2:rgba(18,41,27,.16);

  --r:4px;
  --hdr-h:96px;
  --wrap:1220px; --gutter:clamp(20px,5vw,56px);
  --sp-section:clamp(72px,9vw,132px);
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.55s;

  --step--1:clamp(.8rem,.77rem + .12vw,.86rem);
  --step-0:clamp(1rem,.96rem + .18vw,1.09rem);
  --step-1:clamp(1.18rem,1.1rem + .38vw,1.42rem);
  --step-2:clamp(1.45rem,1.3rem + .74vw,2.05rem);
  --step-3:clamp(1.85rem,1.55rem + 1.45vw,3.05rem);
  --step-4:clamp(2.3rem,1.75rem + 2.6vw,4.4rem);
  --step-5:clamp(2.7rem,1.8rem + 4.1vw,5.6rem);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#0E1611; --surface:#15201A; --surface-2:#1C2A22;
  --ink:#E9EEE7; --ink-2:#A3B0A6; --line:#2A3830; --line-strong:#3A4B41;
  --accent:#9ED45B; --accent-hover:#B0E070; --accent-ink:#0A100C;
  --canopy:#0A100C; --forest:#16241C;
  --on-canopy:#E9EEE7; --on-canopy-2:#A3B0A6; --on-canopy-accent:#9ED45B; --on-canopy-line:#2A3830;
  --shade:rgba(0,0,0,.4); --shade-2:rgba(0,0,0,.55);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E1611; --surface:#15201A; --surface-2:#1C2A22;
    --ink:#E9EEE7; --ink-2:#A3B0A6; --line:#2A3830; --line-strong:#3A4B41;
    --accent:#9ED45B; --accent-hover:#B0E070; --accent-ink:#0A100C;
    --canopy:#0A100C; --forest:#16241C;
    --on-canopy:#E9EEE7; --on-canopy-2:#A3B0A6; --on-canopy-accent:#9ED45B; --on-canopy-line:#2A3830;
    --shade:rgba(0,0,0,.4); --shade-2:rgba(0,0,0,.55);
    color-scheme:dark;
  }
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Archivo',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--step-0); line-height:1.62; font-weight:420;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
::selection{background:var(--accent); color:var(--accent-ink)}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--accent); color:var(--accent-ink); padding:12px 20px; font-weight:650}
.skip:focus{left:12px; top:12px}

h1,h2,h3,h4{margin:0 0 .5em; font-weight:680; line-height:1.05; letter-spacing:-.028em; font-stretch:104%}
h1{font-size:var(--step-5)}
h2{font-size:var(--step-4)}
h3{font-size:var(--step-2); letter-spacing:-.02em}
h4{font-size:var(--step-1); letter-spacing:-.015em; font-weight:650}
p{margin:0 0 1.1em; max-width:66ch}
p:last-child{margin-bottom:0}
strong{font-weight:670}

.wrap{width:min(var(--wrap),100% - var(--gutter)*2); margin-inline:auto}
.wrap-wide{width:min(1480px,100% - var(--gutter)*2); margin-inline:auto}
.section{padding-block:var(--sp-section)}
.section-tight{padding-block:clamp(52px,6vw,84px)}
.lead{font-size:var(--step-1); line-height:1.5; color:var(--ink-2); font-weight:430; max-width:60ch}
.muted{color:var(--ink-2)}
.mono-num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}

.eyebrow{
  display:block; font-size:var(--step--1); text-transform:uppercase;
  letter-spacing:.16em; font-weight:680; color:var(--accent); margin-bottom:18px; font-stretch:112%;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em; white-space:nowrap;
  padding:15px 26px; border-radius:var(--r); border:1px solid transparent;
  font-weight:640; font-size:.97rem; letter-spacing:-.005em; cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .12s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-line{border-color:var(--line-strong); color:var(--ink); background:transparent}
.btn-line:hover{border-color:var(--ink); background:var(--surface)}
.btn-solid{background:var(--canopy); color:var(--on-canopy)}
.btn-solid:hover{background:var(--forest)}
/* on photographic / canopy grounds */
.on-dark .btn-line,.hero .btn-line{border-color:rgba(245,243,236,.5); color:#F5F3EC; background:rgba(10,16,12,.32); backdrop-filter:blur(6px)}
.on-dark .btn-line:hover,.hero .btn-line:hover{background:rgba(245,243,236,.14); border-color:#F5F3EC}
.on-dark .btn-primary,.hero .btn-primary{background:var(--on-canopy-accent); color:#0A100C}
.on-dark .btn-primary:hover,.hero .btn-primary:hover{background:#B0E070}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}

.tlink{
  display:inline-flex; align-items:center; gap:.5em; font-weight:620; color:var(--accent);
  border-bottom:1px solid currentColor; padding-bottom:2px; transition:gap .3s var(--ease)
}
.tlink:hover{gap:.85em}

/* ---------- Header ----------
   Every page opens on a full-bleed dark hero, so the bar starts transparent
   with light type sitting on the photograph, then becomes a solid paper bar
   once you scroll past it. Two states, each with its own contrast. */
.hdr{
  position:fixed; inset:0 0 auto; z-index:90;
  background:transparent; border-bottom:1px solid transparent;
  transition:transform .4s var(--ease),background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s;
}
.hdr::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:linear-gradient(to bottom,rgba(6,14,9,.62),rgba(6,14,9,0));
  opacity:1; transition:opacity .35s var(--ease)
}
.hdr.is-stuck{
  background:var(--paper); border-bottom-color:var(--line);
  backdrop-filter:saturate(160%) blur(14px);
}
.hdr.is-stuck::before{opacity:0}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr-in{display:flex; align-items:center; gap:clamp(14px,2vw,30px); height:var(--hdr-h)}

.brand{display:flex; align-items:center; flex:0 0 auto; margin-right:auto}
.brand img{height:68px; width:auto}
@media (max-width:1023px){.brand img{height:54px}}
/* over the hero the light lockup reads; once the bar is solid, the colour one does */
.brand .logo-light{display:none}
.brand .logo-dark{display:block}
.hdr.is-stuck .brand .logo-light{display:block}
.hdr.is-stuck .brand .logo-dark{display:none}
/* in dark theme the solid bar is dark too, so keep the light lockup throughout */
:root[data-theme="dark"] .hdr.is-stuck .brand .logo-light{display:none}
:root[data-theme="dark"] .hdr.is-stuck .brand .logo-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hdr.is-stuck .brand .logo-light{display:none}
  :root:not([data-theme="light"]) .hdr.is-stuck .brand .logo-dark{display:block}
}

.nav{display:flex; align-items:center; gap:clamp(12px,1.5vw,24px)}
.nav a{
  position:relative; font-size:clamp(.86rem,.72rem + .22vw,.93rem); font-weight:560; color:rgba(245,243,236,.82);
  padding:6px 0; white-space:nowrap; transition:color .2s;
  text-shadow:0 1px 12px rgba(6,14,9,.5)
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--on-canopy-accent);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)
}
.nav a:hover{color:#fff}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:#fff; font-weight:640}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr.is-stuck .nav a{color:var(--ink-2); text-shadow:none}
.hdr.is-stuck .nav a::after{background:var(--accent)}
.hdr.is-stuck .nav a:hover,.hdr.is-stuck .nav a[aria-current="page"]{color:var(--ink)}

.hdr-act{display:flex; align-items:center; gap:10px}
.icon-btn{
  display:grid; place-items:center; width:40px; height:40px; border-radius:var(--r);
  border:1px solid rgba(245,243,236,.34); background:rgba(6,14,9,.26); cursor:pointer; color:#F5F3EC;
  transition:border-color .2s,background .2s,color .2s
}
.icon-btn:hover{border-color:#F5F3EC; background:rgba(245,243,236,.16)}
.hdr.is-stuck .icon-btn{border-color:var(--line); background:transparent; color:var(--ink)}
.hdr.is-stuck .icon-btn:hover{border-color:var(--line-strong); background:var(--surface)}
.icon-btn svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.theme-btn .i-moon{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .i-sun{display:none}
  :root:not([data-theme="light"]) .theme-btn .i-moon{display:block}
}
.burger{display:none}

/* mobile drawer */
@media (max-width:1023px){
  :root{--hdr-h:76px}
  .hdr:has(.nav.is-open){background:var(--paper); border-bottom-color:var(--line)}
  .hdr:has(.nav.is-open)::before{opacity:0}
  .hdr:has(.nav.is-open) .brand .logo-light{display:block}
  .hdr:has(.nav.is-open) .brand .logo-dark{display:none}
  .hdr:has(.nav.is-open) .icon-btn{border-color:var(--line); background:transparent; color:var(--ink)}
  :root[data-theme="dark"] .hdr:has(.nav.is-open) .brand .logo-light{display:none}
  :root[data-theme="dark"] .hdr:has(.nav.is-open) .brand .logo-dark{display:block}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .hdr:has(.nav.is-open) .brand .logo-light{display:none}
    :root:not([data-theme="light"]) .hdr:has(.nav.is-open) .brand .logo-dark{display:block}
  }
  .nav{
    position:fixed; inset:var(--hdr-h) 0 auto; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:8px var(--gutter) 26px;
    max-height:calc(100dvh - var(--hdr-h)); overflow-y:auto;
    clip-path:inset(0 0 100% 0); transition:clip-path .45s var(--ease); visibility:hidden;
  }
  .nav.is-open{clip-path:inset(0 0 0 0); visibility:visible}
  .nav a{padding:15px 0; font-size:1.12rem; border-bottom:1px solid var(--line); color:var(--ink); text-shadow:none}
  .nav a::after{display:none}
  .nav a[aria-current="page"]{color:var(--accent)}
  .burger{display:grid}
  .burger .bar{display:block; width:18px; height:1.7px; background:currentColor; border-radius:2px; transition:transform .3s var(--ease),opacity .2s}
  .burger .bar+.bar{margin-top:5px}
  .burger[aria-expanded="true"] .bar:nth-child(1){transform:translateY(6.7px) rotate(45deg)}
  .burger[aria-expanded="true"] .bar:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-6.7px) rotate(-45deg)}
}

/* ==========================================================================
   HERO SLIDER (home)
   ========================================================================== */
.hero{
  position:relative; min-height:100dvh; display:flex; align-items:flex-end;
  padding-top:var(--hdr-h); overflow:hidden; background:var(--canopy); color:#F5F3EC; isolation:isolate;
}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-slide{position:absolute; inset:0; opacity:0; will-change:opacity}
.hero-slide:first-child{opacity:1}
.hero-slide img{width:100%; height:100%; object-fit:cover; will-change:transform}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg,rgba(6,14,9,.90) 0%,rgba(6,14,9,.76) 34%,rgba(6,14,9,.34) 66%,rgba(6,14,9,.18) 100%),
    linear-gradient(to top,rgba(6,14,9,.72) 0%,transparent 42%);
}
.hero-in{position:relative; z-index:2; width:min(var(--wrap),100% - var(--gutter)*2); margin-inline:auto; padding-block:clamp(48px,7vh,84px)}
.hero-copy{max-width:min(700px,92%)}
.hero .eyebrow{color:var(--on-canopy-accent)}
.hero h1{
  font-size:clamp(2.5rem,1.6rem + 4.3vw,5.1rem); margin-bottom:22px;
  text-shadow:0 2px 30px rgba(0,0,0,.3)
}
.hero h1 .accent{color:var(--on-canopy-accent)}
.hero-sub{font-size:var(--step-1); color:#DFE6DC; max-width:50ch; margin-bottom:6px; line-height:1.48}
/* per-slide swap targets */
.hero-txt{display:grid}
.hero-txt>*{grid-area:1/1}
.hero-panel{opacity:0; pointer-events:none; visibility:hidden}
.hero-panel.is-live{opacity:1; pointer-events:auto; visibility:visible}

.hero-foot{
  position:relative; margin-top:clamp(36px,6vh,64px); padding-top:22px;
  border-top:1px solid rgba(245,243,236,.22);
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.hero-dots{display:flex; gap:10px; margin-right:auto; flex-wrap:wrap}
/* the bar stays 3px, but the tappable area is 24px tall (WCAG 2.5.8) */
.hero-dot{
  position:relative; width:52px; height:24px; border:0; padding:0; cursor:pointer;
  background:transparent; border-radius:2px
}
.hero-dot::before{
  content:""; position:absolute; left:0; right:0; top:50%; margin-top:-1.5px; height:3px;
  background:rgba(245,243,236,.3); border-radius:2px
}
.hero-dot span{
  position:absolute; left:0; right:0; top:50%; margin-top:-1.5px; height:3px; border-radius:2px;
  background:var(--on-canopy-accent); transform-origin:left; transform:scaleX(0)
}
.hero-dot:hover::before{background:rgba(245,243,236,.5)}
.hero-dot[aria-selected="true"] span{transform:scaleX(1)}
.hero-count{font-size:var(--step--1); letter-spacing:.14em; font-weight:650; color:#C9D4C6; font-variant-numeric:tabular-nums}
.hero-label{font-size:var(--step--1); letter-spacing:.13em; text-transform:uppercase; font-weight:640; color:#C9D4C6}

/* ---------- Page hero (inner pages) ---------- */
.phero{
  position:relative; padding-top:calc(var(--hdr-h) + clamp(56px,9vh,110px)); padding-bottom:clamp(56px,8vh,104px);
  background:var(--canopy); color:var(--on-canopy); overflow:hidden; isolation:isolate;
}
.phero-bg{position:absolute; inset:0; z-index:0}
.phero-bg img{width:100%; height:100%; object-fit:cover}
.phero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg,rgba(6,14,9,.93),rgba(6,14,9,.74) 55%,rgba(6,14,9,.5))
}
.phero>.wrap{position:relative; z-index:2}
.phero .eyebrow{color:var(--on-canopy-accent)}
.phero h1{font-size:var(--step-4); max-width:17ch; margin-bottom:20px}
.phero p{color:#DAE2D8; font-size:var(--step-1); max-width:56ch; line-height:1.5}
.phero-meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px}
.tag{
  font-size:var(--step--1); font-weight:600; letter-spacing:.02em;
  padding:7px 14px; border-radius:var(--r); border:1px solid rgba(245,243,236,.28); color:#DAE2D8
}

/* ==========================================================================
   Layout families
   ========================================================================== */

/* A. Editorial split */
.split{display:grid; grid-template-columns:1fr; gap:clamp(32px,5vw,72px); align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
  .split.narrow-first{grid-template-columns:minmax(0,.92fr) minmax(0,1.2fr)}
  .split.wide-first{grid-template-columns:minmax(0,1.2fr) minmax(0,.92fr)}
  .split.top{align-items:start}
  .split.flip>*:first-child{order:2}
}

/* B. Figure / media */
.fig{position:relative; overflow:hidden; border-radius:var(--r); background:var(--surface-2)}
.fig img{width:100%; height:100%; object-fit:cover}
.fig-parallax img{will-change:transform; scale:1.16}
.fig-cap{margin-top:12px; font-size:var(--step--1); color:var(--ink-2)}
.ar-43{aspect-ratio:4/3}
.ar-32{aspect-ratio:3/2}
.ar-169{aspect-ratio:16/9}
.ar-11{aspect-ratio:1/1}
.ar-45{aspect-ratio:4/5}

/* C. Bento */
.bento{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:760px){.bento{grid-template-columns:repeat(6,1fr)}}
.cell{
  position:relative; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); padding:clamp(24px,2.6vw,34px); overflow:hidden;
  transition:border-color .3s var(--ease),transform .3s var(--ease)
}
.cell:hover{border-color:var(--line-strong)}
.cell h3{margin-bottom:10px}
.cell p{color:var(--ink-2); margin-bottom:0; font-size:.98rem}
.cell-media{padding:0; border:0; min-height:220px; background:var(--surface-2)}
.cell-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cell-media .cell-over{
  position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(24px,2.6vw,34px); color:#F5F3EC;
  background:linear-gradient(to top,rgba(6,14,9,.88) 0%,rgba(6,14,9,.34) 52%,rgba(6,14,9,.06) 100%)
}
.cell-media .cell-over h3{color:#F5F3EC}
.cell-media .cell-over p{color:#D5DED3}
.cell-tint{background:var(--canopy); border-color:transparent; color:var(--on-canopy)}
.cell-tint h3{color:var(--on-canopy)}
.cell-tint p{color:var(--on-canopy-2)}
.cell-accent{background:var(--forest); border-color:transparent; color:var(--on-canopy)}
.cell-accent h3{color:var(--on-canopy)} .cell-accent p{color:var(--on-canopy-2)}
@media (min-width:760px){
  .c2{grid-column:span 2} .c3{grid-column:span 3} .c4{grid-column:span 4}
  .c6{grid-column:span 6} .r2{grid-row:span 2}
}
.cell-idx{
  display:block; font-size:var(--step--1); font-weight:700; letter-spacing:.14em;
  color:var(--accent); margin-bottom:14px; font-variant-numeric:tabular-nums
}

/* D. Dark credential band */
.band{background:var(--canopy); color:var(--on-canopy)}
.band h2,.band h3{color:var(--on-canopy)}
.band p{color:var(--on-canopy-2)}
.band .eyebrow{color:var(--on-canopy-accent)}
.band .tlink{color:var(--on-canopy-accent)}
.facts{display:grid; grid-template-columns:1fr; gap:1px; background:var(--on-canopy-line); border-block:1px solid var(--on-canopy-line)}
@media (min-width:560px){.facts{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{background:var(--canopy); padding:clamp(24px,3vw,40px) clamp(18px,2vw,28px); min-width:0}
.fact-n{
  display:block; font-size:clamp(1.9rem,1.3rem + 2.4vw,3.2rem); font-weight:700; line-height:1;
  letter-spacing:-.035em; color:var(--on-canopy-accent); font-variant-numeric:tabular-nums;
  margin-bottom:12px; overflow-wrap:anywhere
}
/* long literal figures (the 13-digit NZBN) get their own step down so they
   never decide the width of the column */
.fact-n.is-long{font-size:clamp(1.35rem,.85rem + 1.7vw,2rem); letter-spacing:-.02em}
.fact-l{font-size:.94rem; color:var(--on-canopy-2); line-height:1.45; max-width:30ch}

/* E. Full-bleed statement */
.statement{position:relative; min-height:clamp(420px,62vh,620px); display:grid; align-items:center; overflow:hidden; isolation:isolate; background:var(--canopy)}
.statement-bg{position:absolute; inset:0; z-index:0}
.statement-bg img{width:100%; height:100%; object-fit:cover; will-change:transform}
.statement::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(95deg,rgba(6,14,9,.88),rgba(6,14,9,.55) 60%,rgba(6,14,9,.32))}
.statement-in{position:relative; z-index:2; width:min(var(--wrap),100% - var(--gutter)*2); margin-inline:auto; padding-block:clamp(56px,8vh,96px); color:#F5F3EC}
.statement h2{max-width:19ch; color:#F5F3EC}
.statement p{color:#D5DED3; max-width:52ch}

/* F. Ledger (label / value rows) */
.ledger{border-top:1px solid var(--line)}
.ledger-row{
  display:grid; grid-template-columns:1fr; gap:4px 32px; padding:20px 0; border-bottom:1px solid var(--line)
}
@media (min-width:680px){.ledger-row{grid-template-columns:minmax(150px,.4fr) 1fr; gap:32px; align-items:baseline}}
.ledger-k{font-size:var(--step--1); text-transform:uppercase; letter-spacing:.1em; font-weight:660; color:var(--ink-2)}
.ledger-v{font-weight:520; margin:0}
.band .ledger,.band .ledger-row{border-color:var(--on-canopy-line)}
.band .ledger-k{color:var(--on-canopy-2)}

/* G. Numbered steps */
.steps{counter-reset:s; display:grid; gap:0; border-top:1px solid var(--line)}
.step{
  counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:20px 24px;
  padding:26px 0; border-bottom:1px solid var(--line); align-items:start
}
.step::before{
  content:counter(s,decimal-leading-zero); font-size:var(--step--1); font-weight:700;
  letter-spacing:.1em; color:var(--accent); padding-top:.45em; font-variant-numeric:tabular-nums
}
.step h3{font-size:var(--step-1); margin-bottom:6px}
.step p{color:var(--ink-2); margin:0; font-size:.98rem}

/* H. Service rail (horizontal pan on desktop) */
.rail-sec{position:relative; background:var(--surface-2)}
.rail-head{width:min(var(--wrap),100% - var(--gutter)*2); margin-inline:auto; padding-top:var(--sp-section); padding-bottom:40px}
.rail-vp{overflow:hidden}
.rail{display:flex; gap:16px; padding:0 var(--gutter) var(--sp-section); align-items:stretch}
.rail-card{
  flex:0 0 min(370px,80vw); background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(26px,2.4vw,34px); display:flex; flex-direction:column; min-height:340px
}
.rail-card .cell-idx{margin-bottom:auto}
.rail-card h3{font-size:var(--step-2); margin:26px 0 12px}
.rail-card p{color:var(--ink-2); font-size:.98rem; margin:0}
.rail-card-media{padding:0; overflow:hidden; position:relative; border:0}
.rail-card-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.rail-card-media .cell-over{position:relative; z-index:1; height:100%}
@media (max-width:899px){
  .rail-vp{overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
  .rail{padding-inline:var(--gutter)}
  .rail-card{scroll-snap-align:start}
}
.rail-progress{position:relative; height:2px; background:var(--line); width:min(var(--wrap),100% - var(--gutter)*2); margin:0 auto clamp(40px,5vw,64px)}
.rail-progress i{position:absolute; inset:0; background:var(--accent); transform-origin:left; transform:scaleX(0); display:block}

/* I. Gallery */
.gallery{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:700px){.gallery{grid-template-columns:repeat(6,1fr)}}
.gitem{position:relative; overflow:hidden; border-radius:var(--r); background:var(--surface-2)}
.gitem img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.gitem:hover img{transform:scale(1.04)}
.gitem figcaption{
  position:absolute; inset:auto 0 0; padding:26px 22px 20px; color:#F5F3EC; font-size:.95rem; font-weight:560;
  background:linear-gradient(to top,rgba(6,14,9,.85),transparent)
}

/* J. Disclosure / vacancy */
.vac{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden}
.vac+.vac{margin-top:12px}
.vac-btn{
  width:100%; display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; text-align:left;
  padding:clamp(22px,2.4vw,30px); background:none; border:0; cursor:pointer
}
.vac-btn h3{margin:0 0 10px; font-size:var(--step-2)}
.vac-tags{display:flex; flex-wrap:wrap; gap:8px}
.vac-tags .tag{border-color:var(--line); color:var(--ink-2)}
.vac-ic{
  position:relative; width:38px; height:38px; border:1px solid var(--line); border-radius:var(--r); flex:0 0 auto
}
.vac-ic::before,.vac-ic::after{
  content:""; position:absolute; top:50%; left:50%; width:13px; height:1.6px; background:var(--ink);
  transform:translate(-50%,-50%); transition:transform .35s var(--ease)
}
.vac-ic::after{transform:translate(-50%,-50%) rotate(90deg)}
.vac-btn[aria-expanded="true"] .vac-ic::after{transform:translate(-50%,-50%) rotate(0)}
.vac-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease)}
.vac-body>div{overflow:hidden}
.vac[data-open="true"] .vac-body{grid-template-rows:1fr}
.vac-inner{padding:0 clamp(22px,2.4vw,30px) clamp(24px,2.6vw,32px); border-top:1px solid var(--line); padding-top:24px}

/* K. Notices */
.notice{
  border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--r);
  background:var(--surface); padding:20px 22px; font-size:.95rem; color:var(--ink-2); line-height:1.55
}
.notice+.notice{margin-top:12px}
.notice strong{color:var(--ink)}
.band .notice{background:rgba(245,243,236,.05); border-color:var(--on-canopy-line); border-left-color:var(--on-canopy-accent); color:var(--on-canopy-2)}
.band .notice strong{color:var(--on-canopy)}

/* L. Checklist */
.checks{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.checks li{display:grid; grid-template-columns:23px 1fr; gap:14px; align-items:start; color:var(--ink-2)}
.checks .ck{
  width:23px; height:23px; margin-top:1px; padding:5.5px; border-radius:50%; flex:0 0 auto;
  background:color-mix(in srgb,var(--accent) 15%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent);
  stroke:var(--accent); fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round
}
.band .checks li{color:var(--on-canopy-2)}

/* M. Quote */
.quote{
  border-left:3px solid var(--accent); padding:6px 0 6px 26px; margin:34px 0;
  font-size:var(--step-1); line-height:1.45; font-weight:540; color:var(--ink); max-width:46ch
}
.quote cite{display:block; margin-top:14px; font-size:.92rem; font-style:normal; font-weight:600; color:var(--ink-2); letter-spacing:.01em}

/* N. Two-audience split */
.paths{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
@media (min-width:860px){.paths{grid-template-columns:1fr 1fr}}
.path{background:var(--surface); padding:clamp(30px,3.4vw,52px); display:flex; flex-direction:column}
.path p{color:var(--ink-2); flex:1}
.path h3{font-size:var(--step-3); max-width:14ch}

/* ==========================================================================
   Forms
   ========================================================================== */
.formcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(26px,3vw,42px)
}
.fgrid{display:grid; grid-template-columns:1fr; gap:18px}
@media (min-width:620px){.fgrid{grid-template-columns:1fr 1fr}}
.field{display:grid; gap:7px}
.field.full{grid-column:1/-1}
.field label,.flabel{font-size:.87rem; font-weight:640; letter-spacing:.005em; color:var(--ink)}
.field .hint{font-size:.83rem; color:var(--ink-2); line-height:1.4}
.req{color:var(--accent); font-weight:700}
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--paper); color:var(--ink); transition:border-color .2s,box-shadow .2s; font-size:.98rem
}
:root[data-theme="dark"] .field input,:root[data-theme="dark"] .field select,:root[data-theme="dark"] .field textarea{background:var(--surface-2)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .field input,
  :root:not([data-theme="light"]) .field select,
  :root:not([data-theme="light"]) .field textarea{background:var(--surface-2)}
}
.field textarea{min-height:132px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-2); opacity:.85}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)
}
.field select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:40px}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea,.field[data-invalid="true"] .drop{border-color:#B4402B}
.err{font-size:.83rem; font-weight:600; color:#B4402B; display:none}
:root[data-theme="dark"] .err{color:#F09A86}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .err{color:#F09A86}}
.field[data-invalid="true"] .err{display:block}

.consent{display:grid; grid-template-columns:20px 1fr; gap:13px; align-items:start; font-size:.9rem; color:var(--ink-2); line-height:1.5; cursor:pointer}
.consent input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--accent); cursor:pointer}
.hpot{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}

/* dropzone */
.drop{
  position:relative; display:grid; place-items:center; gap:8px; text-align:center;
  padding:30px 22px; border:1.5px dashed var(--line-strong); border-radius:var(--r);
  background:var(--paper); cursor:pointer; transition:border-color .22s,background .22s
}
:root[data-theme="dark"] .drop{background:var(--surface-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .drop{background:var(--surface-2)}}
.drop:hover,.drop.is-over{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--paper))}
.drop input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%}
.drop svg{width:26px; height:26px; stroke:var(--accent); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.drop-t{font-weight:640; font-size:.96rem}
.drop-s{font-size:.84rem; color:var(--ink-2)}
.file-chip{
  display:none; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--line-strong);
  border-radius:var(--r); background:var(--surface); font-size:.92rem
}
.file-chip.is-on{display:flex}
.file-chip .fname{font-weight:620; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.file-chip .fsize{color:var(--ink-2); margin-left:auto; white-space:nowrap; font-variant-numeric:tabular-nums}
.file-chip button{background:none; border:0; cursor:pointer; color:var(--ink-2); padding:4px; display:grid; place-items:center; border-radius:3px}
.file-chip button:hover{color:#B4402B}
.file-chip button svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round}
.file-chip .fic{width:19px; height:19px; stroke:var(--accent); fill:none; stroke-width:1.6; flex:0 0 auto}

/* submit + status */
.fsubmit{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.btn[disabled],.btn[aria-busy="true"]{opacity:.62; pointer-events:none}
.spin{width:15px; height:15px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; display:none}
.btn[aria-busy="true"] .spin{display:block; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.progress{display:none; flex:1; min-width:130px; height:3px; background:var(--line); border-radius:2px; overflow:hidden}
.progress.is-on{display:block}
.progress i{display:block; height:100%; width:0; background:var(--accent); transition:width .25s linear}

.fstatus{display:none; margin-top:20px; padding:16px 18px; border-radius:var(--r); font-size:.94rem; line-height:1.5; border:1px solid}
.fstatus.is-on{display:block}
.fstatus[data-kind="ok"]{border-color:color-mix(in srgb,var(--accent) 46%,transparent); background:color-mix(in srgb,var(--accent) 11%,transparent); color:var(--ink)}
.fstatus[data-kind="err"]{border-color:#B4402B; background:color-mix(in srgb,#B4402B 9%,transparent); color:var(--ink)}
.fstatus strong{display:block; margin-bottom:4px}

/* success panel replaces the form */
.fdone{display:none; text-align:left; padding:clamp(30px,4vw,52px) 0}
.fdone.is-on{display:block}
.fdone-ic{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb,var(--accent) 16%,transparent); margin-bottom:22px}
.fdone-ic svg{width:24px; height:24px; stroke:var(--accent); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr{background:var(--canopy); color:var(--on-canopy); padding-top:clamp(56px,7vw,88px)}
.ftr-grid{display:grid; gap:40px clamp(28px,4vw,64px); grid-template-columns:1fr}
@media (min-width:700px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.ftr-grid{grid-template-columns:1.5fr 1fr 1fr 1.25fr}}
.ftr img.ftr-logo{height:118px; width:auto; margin-bottom:22px}
.ftr p{color:var(--on-canopy-2); font-size:.95rem; max-width:36ch}
.ftr-t{font-size:var(--step--1); text-transform:uppercase; letter-spacing:.13em; font-weight:680; color:var(--on-canopy); margin-bottom:18px}
.ftr-links{display:grid; gap:11px}
.ftr-links a,.ftr a.fmail{color:var(--on-canopy-2); font-size:.95rem; transition:color .2s; width:fit-content; border-bottom:1px solid transparent}
.ftr-links a:hover,.ftr a.fmail:hover{color:var(--on-canopy-accent); border-bottom-color:currentColor}
.ftr-c{display:grid; gap:16px; font-size:.95rem; color:var(--on-canopy-2)}
.ftr-c b{display:block; color:var(--on-canopy); font-weight:600; font-size:.83rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px}
.ftr-bot{
  margin-top:clamp(44px,5vw,64px); border-top:1px solid var(--on-canopy-line); padding:24px 0 28px;
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  font-size:.86rem; color:var(--on-canopy-2)
}

/* ==========================================================================
   Motion (all gated on prefers-reduced-motion)
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  [data-rv]{opacity:0}
  [data-rv="up"]{transform:translateY(26px)}
  [data-rv="fade"]{transform:none}
  .rv-wm{display:inline-block; overflow:hidden; vertical-align:top;
         padding-bottom:.14em; margin-bottom:-.14em}
  .rv-w{display:inline-block; will-change:transform}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
  .hero-slide{opacity:1!important}
  .hero-slide+.hero-slide{display:none}
  .hero-panel{position:static}
}

/* utility */
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.mt-s{margin-top:18px} .mt-m{margin-top:30px} .mt-l{margin-top:clamp(36px,4vw,56px)}
.maxw-58{max-width:58ch} .maxw-46{max-width:46ch}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
@media print{.hdr,.ftr,.hero-foot{display:none}}