/* ==========================================================================
   APPLE PVC — Design System v4
   Manrope · brand palette (#009B4D / #123C2F / #17211D / #F6F8F5 / #E52B2B)
   One type scale · one spacing rhythm · one motion system
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* brand */
  --green:        #009B4D;   /* brand green — fills, marks, large display accents */
  --green-ink:    #007A3C;   /* AA text/CTA on light (5.4:1 with white) */
  --green-deep:   #00652F;   /* hover */
  --green-soft:   #E4F3EA;   /* tint */
  --green-glow:   #4CC98A;   /* accent on dark (AA on forest) */
  --forest:       #123C2F;
  --forest-2:     #0E3126;
  --graphite:     #17211D;
  --ivory:        #F6F8F5;
  --ivory-2:      #ECF0EA;
  --paper:        #FFFFFF;
  --red:          #E52B2B;

  /* text */
  --ink:          #17211D;
  --ink-2:        #3E4A44;   /* body */
  --ink-3:        #5C6862;   /* meta — 5.9:1 on white */
  --on-dark:      #FFFFFF;
  --on-dark-2:    rgba(255,255,255,.76);
  --on-dark-3:    rgba(255,255,255,.62);

  /* lines */
  --line:         rgba(23,33,29,.12);
  --line-2:       rgba(23,33,29,.07);
  --line-dark:    rgba(255,255,255,.14);

  /* spacing (8-pt) */
  --s-1:4px; --s0:8px; --s1:12px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:80px; --s8:96px; --s9:120px; --s10:144px;
  --sec: clamp(72px, 9vw, 144px);
  --sec-sm: clamp(56px, 6vw, 96px);
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1360px;

  /* radius — restrained: industrial, not bubbly */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;

  /* elevation */
  --e1: 0 1px 2px rgba(18,32,26,.06), 0 4px 14px rgba(18,32,26,.05);
  --e2: 0 2px 6px rgba(18,32,26,.06), 0 18px 44px -12px rgba(18,32,26,.18);
  --e3: 0 4px 10px rgba(18,32,26,.08), 0 40px 80px -24px rgba(18,32,26,.32);

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-micro: 180ms; --t-card: 320ms; --t-reveal: 720ms;

  /* type */
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --hdr-h: 80px;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 16px); }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:1rem; line-height:1.65; font-weight:450;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; padding:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,p,figure,dl,dd{ margin:0; }
::selection{ background:var(--green); color:#fff; }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:var(--r-xs); }
.dark :focus-visible{ outline-color:var(--green-glow); }
.skip{ position:absolute; left:16px; top:-60px; z-index:300; background:var(--graphite); color:#fff; padding:10px 16px; border-radius:var(--r-sm); font-weight:700; }
.skip:focus{ top:12px; }
[hidden]{ display:none!important; }
.vh{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ---------- 3. Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.sec{ padding-block:var(--sec); position:relative; }
.sec--sm{ padding-block:var(--sec-sm); }
.ivory{ background:var(--ivory); }
.dark{ background:var(--forest); color:var(--on-dark); }
.graphite{ background:var(--graphite); color:var(--on-dark); }

/* ---------- 4. Typography ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green-ink);
}
.eyebrow::before{ content:''; width:18px; height:2px; background:var(--red); border-radius:2px; }
.dark .eyebrow,.graphite .eyebrow{ color:var(--green-glow); }
.display{ font-size:clamp(2.75rem, 5.6vw, 5.75rem); font-weight:800; line-height:.98; letter-spacing:-.045em; }
.h2{ font-size:clamp(2rem, 4vw, 4rem); font-weight:800; line-height:1.02; letter-spacing:-.04em; }
.h3{ font-size:clamp(1.25rem, 2vw, 2rem); font-weight:750; line-height:1.15; letter-spacing:-.03em; }
.h4{ font-size:1.125rem; font-weight:750; line-height:1.3; letter-spacing:-.02em; }
.lede{ font-size:clamp(1rem, 1.2vw, 1.25rem); line-height:1.6; color:var(--ink-2); max-width:54ch; font-weight:500; }
.dark .lede,.graphite .lede{ color:var(--on-dark-2); }
.body{ font-size:1rem; color:var(--ink-2); }
.meta{ font-size:.8rem; font-weight:600; letter-spacing:.02em; color:var(--ink-3); }
.dark .meta,.graphite .meta{ color:var(--on-dark-3); }
.num{ font-variant-numeric:tabular-nums lining-nums; }
.soft{ color:var(--green-ink); }
.dark .soft,.graphite .soft{ color:var(--green-glow); }
.muted{ color:var(--ink-3); }

.shead{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:var(--s3) var(--s6); align-items:end; margin-bottom:clamp(36px,5vw,72px); }
.shead .h2{ margin-top:var(--s2); }
.shead__aside{ display:flex; flex-direction:column; gap:var(--s3); align-items:flex-start; }
.shead__aside .lede{ font-size:1.05rem; }
@media (max-width:900px){ .shead{ grid-template-columns:minmax(0,1fr); } }

/* ---------- 5. Buttons ---------- */
.btn{
  --bh:52px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--bh); padding:0 24px; border-radius:var(--r-pill);
  border:1.5px solid var(--ink); background:transparent; color:var(--ink);
  font-size:.94rem; font-weight:700; letter-spacing:-.005em; white-space:nowrap; line-height:1;
  transition:background var(--t-micro) var(--ease), color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease), box-shadow var(--t-card) var(--ease);
}
.btn:hover{ background:var(--ink); color:#fff; }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }
.btn .ic{ width:16px; height:16px; flex:none; transition:transform var(--t-micro) var(--ease); }
.btn:hover .ic--arrow{ transform:translateX(3px); }
.btn--primary{ background:var(--green-ink); border-color:var(--green-ink); color:#fff; }
.btn--primary:hover{ background:var(--green-deep); border-color:var(--green-deep); color:#fff; box-shadow:0 10px 24px -10px rgba(0,122,60,.6); }
.btn--light{ border-color:rgba(255,255,255,.45); color:#fff; }
.btn--light:hover{ background:#fff; color:var(--forest); border-color:#fff; }
.btn--white{ background:#fff; border-color:#fff; color:var(--forest); }
.btn--white:hover{ background:var(--green-glow); border-color:var(--green-glow); color:var(--graphite); }
.btn--sm{ --bh:44px; padding:0 18px; font-size:.875rem; }
.btn--block{ width:100%; }
.btn.is-loading{ color:transparent!important; pointer-events:none; }
.btn.is-loading::after{
  content:''; position:absolute; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); border-top-color:#fff; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.tlink{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.94rem; color:var(--green-ink); }
.tlink .ic{ width:15px; height:15px; transition:transform var(--t-micro) var(--ease); }
.tlink:hover .ic{ transform:translateX(3px); }
.dark .tlink,.graphite .tlink{ color:var(--green-glow); }

/* ---------- 6. Header ---------- */
.hdr{
  position:sticky; top:0; z-index:100; height:var(--hdr-h);
  background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:height var(--t-card) var(--ease), border-color var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease);
}
.hdr.is-compact{ --hdr-h:64px; border-color:var(--line-2); box-shadow:0 8px 28px -20px rgba(18,32,26,.35); }
.hdr__in{ height:100%; display:flex; align-items:center; gap:var(--s4); }
.brand{ flex:none; display:flex; align-items:center; }
.brand img{ height:38px; width:auto; transition:height var(--t-card) var(--ease); }
.hdr.is-compact .brand img{ height:32px; }
.nav{ display:flex; gap:4px; margin-left:auto; }
.nav a{ position:relative; padding:10px 14px; font-size:.92rem; font-weight:650; color:var(--ink-2); border-radius:var(--r-pill); transition:color var(--t-micro), background var(--t-micro); }
.nav a:hover{ color:var(--ink); background:var(--ivory); }
.nav a[aria-current="page"]{ color:var(--green-ink); }
.nav a[aria-current="page"]::after{ content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2px; background:var(--green); border-radius:2px; }
.hdr__cta{ display:flex; align-items:center; gap:8px; flex:none; }
.traybtn{ position:relative; display:inline-flex; align-items:center; gap:8px; }
.traybtn .count{
  min-width:22px; height:22px; padding:0 6px; border-radius:var(--r-pill); background:var(--green); color:#fff;
  font-size:.72rem; font-weight:800; display:inline-grid; place-items:center;
}
.traybtn .count[data-n="0"]{ background:var(--ivory-2); color:var(--ink-3); }
.burger{ display:none; width:48px; height:48px; border-radius:var(--r-pill); border:1.5px solid var(--line); align-items:center; justify-content:center; }
.burger span,.burger span::before,.burger span::after{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; position:relative; }
.burger span::before,.burger span::after{ content:''; position:absolute; left:0; }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
@media (max-width:1180px){ .nav a{ padding:10px 10px; font-size:.88rem; } }
@media (max-width:1060px){
  .nav,.hdr__cta .hide-m{ display:none; }
  .burger{ display:inline-flex; }
  .hdr__cta{ margin-left:auto; }
  :root{ --hdr-h:68px; }
  .brand img{ height:32px; }
}

/* drawer */
.drawer{
  position:fixed; inset:0; z-index:200; background:var(--forest); color:#fff;
  display:flex; flex-direction:column; padding:16px var(--gutter) max(24px, env(safe-area-inset-bottom));
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .28s var(--ease), transform .38s var(--ease-out), visibility 0s linear .38s;
  overflow-y:auto;
}
.drawer.is-open{ opacity:1; visibility:visible; transform:none; transition:opacity .28s var(--ease), transform .38s var(--ease-out); }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; height:52px; }
.drawer__top img{ height:30px; width:auto; }
.xbtn{ width:48px; height:48px; border-radius:var(--r-pill); border:1.5px solid var(--line-dark); display:grid; place-items:center; }
.drawer nav{ margin-top:var(--s5); display:grid; }
.drawer nav a{
  display:flex; align-items:baseline; gap:16px; padding:14px 0; border-bottom:1px solid var(--line-dark);
  font-size:clamp(1.6rem,7vw,2.2rem); font-weight:750; letter-spacing:-.035em;
  opacity:0; transform:translateY(10px); transition:opacity .4s var(--ease), transform .5s var(--ease-out);
}
.drawer.is-open nav a{ opacity:1; transform:none; }
.drawer nav a span{ font-size:.75rem; font-weight:700; color:var(--green-glow); letter-spacing:.12em; }
.drawer__cta{ margin-top:auto; padding-top:var(--s5); display:grid; gap:10px; }

/* ---------- 7. Hero ---------- */
.hero{ position:relative; padding-block:clamp(32px,5vw,72px) clamp(56px,7vw,112px); overflow:clip; }
.hero::before{ /* quiet surface plane */
  content:''; position:absolute; inset:auto 0 0 0; height:46%; background:linear-gradient(180deg, rgba(246,248,245,0), var(--ivory) 70%); z-index:-1;
}
.hero__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); grid-template-areas:"copy stage" "facts stage"; column-gap:clamp(24px,4vw,72px); align-items:center; }
.hero__copy{ grid-area:copy; align-self:end; } .hero__facts{ grid-area:facts; align-self:start; } .stage{ grid-area:stage; }
.hero h1{ margin-top:var(--s3); max-width:12ch; }
.hero h1 em{ font-style:normal; color:var(--green-ink); }
.hero .lede{ margin-top:var(--s3); max-width:44ch; }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s4); }
.hero__facts{ display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:var(--s2) clamp(20px,3vw,48px); margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--line); }
.hero__facts dt{ font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.hero__facts dd{ margin-top:4px; font-size:1.05rem; font-weight:750; letter-spacing:-.02em; }
.hero__facts dd b{ font-size:1.6rem; font-weight:800; letter-spacing:-.04em; margin-right:4px; }

/* 3D stage */
.stage{ position:relative; aspect-ratio:1/0.92; perspective:1400px; }
.stage__rig{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .6s var(--ease-out); will-change:transform; }
.stage__floor{
  position:absolute; left:4%; right:0; bottom:4%; height:36%;
  background:radial-gradient(60% 60% at 50% 40%, rgba(18,60,47,.10), rgba(18,60,47,0) 70%);
  transform:translateZ(-60px);
}
.stage__fan{ position:absolute; right:2%; top:4%; width:88%; height:88%; transform:translateZ(-30px); transform-style:preserve-3d; }
.stage__rolls{
  position:absolute; left:6%; bottom:2%; width:46%; transform:translateZ(80px);
  filter:drop-shadow(0 30px 30px rgba(18,32,26,.28)) drop-shadow(0 8px 10px rgba(18,32,26,.16));
}
.stage__shadow{ position:absolute; left:4%; bottom:0; width:52%; height:7%; border-radius:50%; background:radial-gradient(closest-side, rgba(18,32,26,.35), rgba(18,32,26,0)); transform:translateZ(40px); filter:blur(4px); }
.stage__tag{
  position:absolute; right:4%; bottom:9%; transform:translateZ(120px);
  display:flex; align-items:center; gap:12px; padding:10px 14px 10px 10px; border-radius:var(--r-md);
  background:rgba(255,255,255,.92); border:1px solid var(--line-2); box-shadow:var(--e2); backdrop-filter:blur(10px);
  font-size:.8rem; line-height:1.3; max-width:250px;
}
.stage__tag i{ width:44px; height:44px; border-radius:var(--r-sm); background-size:cover; background-position:center; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.stage__tag b{ display:block; font-weight:800; font-size:.92rem; letter-spacing:-.01em; }
.stage__tag span{ color:var(--ink-3); font-weight:600; }

/* chip — physical shade-card strip with punch hole (shared by hero fan, decks, preview) */
.chip{
  position:absolute; left:0; top:50%; width:100%; aspect-ratio:5/1; margin-top:-10%;
  border-radius:6px; background-size:cover; background-position:center; background-color:#ddd;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 -1px 0 rgba(0,0,0,.18) inset, 0 12px 24px -10px rgba(18,32,26,.45), 0 2px 4px rgba(18,32,26,.18);
  transform-origin:91% 50%;
  transition:transform .75s var(--ease-out), box-shadow var(--t-card) var(--ease);
  overflow:hidden;
}
.chip::before{ /* punch hole */
  content:''; position:absolute; right:7%; top:50%; width:5.2%; aspect-ratio:1; transform:translate(50%,-50%);
  border-radius:50%; background:var(--hole, #fff); box-shadow:inset 0 2px 3px rgba(0,0,0,.35);
}
.chip::after{ /* light pass */
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.22) 46%, rgba(255,255,255,0) 60%);
  transform:translateX(var(--sheen, -60%)); transition:transform 1.2s var(--ease-out);
  mix-blend-mode:soft-light;
}

@media (max-width:1000px){
  .hero__in{ grid-template-columns:minmax(0,1fr); grid-template-areas:"copy" "stage" "facts"; }
  .hero__facts{ margin-top:var(--s3); }
  .stage{ margin-top:var(--s4); }
  .stage{ max-width:620px; width:100%; margin-inline:auto; aspect-ratio:1/.86; margin-bottom:8px; }
  .stage__fan{ top:0; height:80%; width:84%; }
  .hero h1{ max-width:14ch; }
}
@media (max-width:560px){
  .hero__facts{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .hero__facts dd{ font-size:.9rem; }
  .hero__facts dd b{ font-size:1.25rem; display:block; }
  .hero__ctas .btn{ flex:1 1 100%; }
  .stage__tag{ right:10px; bottom:4%; max-width:200px; font-size:.74rem; }
  .stage__tag i{ width:36px; height:36px; }
}

/* ---------- 8. Series explorer ---------- */
.series{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(12px,1.6vw,24px); }
.scard{
  position:relative; grid-column:span 6; display:flex; flex-direction:column; min-height:560px;
  border-radius:var(--r-lg); background:var(--paper); border:1px solid var(--line); overflow:hidden; isolation:isolate;
  transition:box-shadow var(--t-card) var(--ease), transform var(--t-card) var(--ease), border-color var(--t-card);
}
.scard:hover{ box-shadow:var(--e3); border-color:transparent; }
.scard__deck{ position:relative; height:clamp(240px,26vw,330px); perspective:1100px; background:linear-gradient(180deg,var(--ivory),#fff); border-bottom:1px solid var(--line-2); overflow:hidden; }
.scard__fan{ position:absolute; left:8%; right:10%; top:10%; bottom:10%; transform-style:preserve-3d; transform:rotateX(14deg); }
.scard__fan .chip{ width:84%; left:4%; }
.scard__body{ padding:clamp(22px,2.4vw,36px); display:flex; flex-direction:column; gap:var(--s2); flex:1; }
.scard__top{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.scard__num{ font-size:clamp(2.6rem,4.4vw,4.2rem); font-weight:800; letter-spacing:-.05em; line-height:.9; }
.scard__count{ text-align:right; }
.scard__count b{ display:block; font-size:1.6rem; font-weight:800; letter-spacing:-.04em; line-height:1; }
.scard__fams{ display:flex; flex-wrap:wrap; gap:6px; }
.pill{ display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:0 12px; border-radius:var(--r-pill); background:var(--ivory); border:1px solid var(--line-2); font-size:.78rem; font-weight:700; color:var(--ink-2); }
.pill i{ width:10px; height:10px; border-radius:50%; background-size:cover; }
.scard__acts{ margin-top:auto; display:flex; flex-wrap:wrap; gap:10px; padding-top:var(--s2); }
.scard--wide{ grid-column:span 12; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.scard--wide .scard__deck{ height:auto; min-height:260px; border-bottom:0; border-right:1px solid var(--line-2); }
.custom-visual{ position:absolute; inset:0; display:grid; place-items:center; }
.custom-visual .board{ position:relative; width:62%; aspect-ratio:3/2; border-radius:4px; background:linear-gradient(135deg,#efe9dd,#d9cfbd); box-shadow:var(--e2); transform:rotateX(52deg) rotateZ(-28deg); transform-style:preserve-3d; }
.custom-visual .board::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:12px; transform-origin:bottom; transform:rotateX(-90deg); background:var(--edge, #b8a88c); border-radius:0 0 3px 3px; }
.custom-visual .board .ref{ position:absolute; left:10%; top:14%; width:30%; aspect-ratio:1; border-radius:3px; background-size:cover; box-shadow:0 6px 12px rgba(0,0,0,.18); transform:translateZ(6px); }
@media (hover:hover){ .scard:hover .chip{ --sheen:60%; } }
@media (max-width:900px){ .scard{ grid-column:span 12; min-height:0; } .scard--wide{ grid-template-columns:minmax(0,1fr); } .scard--wide .scard__deck{ border-right:0; border-bottom:1px solid var(--line-2); } }

/* ---------- 9. Shade explorer ---------- */
.lib{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:clamp(24px,3.5vw,56px); align-items:start; }
.lib__controls{ display:grid; gap:14px; margin-bottom:var(--s3); }
.seg{ display:inline-flex; flex-wrap:wrap; gap:6px; }
.seg button{
  min-height:40px; padding:0 16px; border-radius:var(--r-pill); border:1.5px solid var(--line-dark); color:var(--on-dark-2);
  font-size:.85rem; font-weight:700; transition:background var(--t-micro), color var(--t-micro), border-color var(--t-micro);
}
.seg button:hover{ border-color:rgba(255,255,255,.5); color:#fff; }
.seg button[aria-pressed="true"]{ background:#fff; color:var(--forest); border-color:#fff; }
.seg button .n{ margin-left:6px; font-weight:600; opacity:.6; font-size:.75rem; }
.light .seg button,.seg.light button{ border-color:var(--line); color:var(--ink-2); }
.light .seg button:hover,.seg.light button:hover{ border-color:var(--ink); color:var(--ink); }
.light .seg button[aria-pressed="true"],.seg.light button[aria-pressed="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }
.tones{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tones__lbl{ font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-3); margin-right:4px; }
.light .tones__lbl{ color:var(--ink-3); }
.tone{ width:30px; height:30px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); position:relative; transition:transform var(--t-micro) var(--ease); }
.tone:hover{ transform:scale(1.1); }
.tone[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--forest), 0 0 0 4px #fff; }
.light .tone[aria-pressed="true"]{ box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.lib__status{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.85rem; color:var(--on-dark-3); font-weight:600; margin-bottom:12px; }
.light .lib__status{ color:var(--ink-3); }
.lib__reset{ color:var(--green-glow); font-weight:700; }
.light .lib__reset{ color:var(--green-ink); }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; }
.sw{
  position:relative; aspect-ratio:1; border-radius:var(--r-sm); overflow:hidden; background:#2a3a33;
  transition:transform var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
}
.light .sw{ background:var(--ivory-2); }
.sw img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out); }
.sw:hover img{ transform:scale(1.08); }
.sw:hover{ transform:translateY(-2px); box-shadow:0 10px 20px -10px rgba(0,0,0,.5); }
.sw b{ position:absolute; left:6px; bottom:6px; padding:2px 7px; border-radius:var(--r-pill); background:rgba(17,24,21,.72); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.02em; }
.sw[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--forest), 0 0 0 4px var(--green-glow); }
.light .sw[aria-pressed="true"]{ box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--green); }
.sw .in-tray{ position:absolute; right:6px; top:6px; width:18px; height:18px; border-radius:50%; background:var(--green); color:#fff; display:none; place-items:center; }
.sw.is-tray .in-tray{ display:grid; }
.sw .in-tray svg{ width:10px; height:10px; }
.sw.is-hidden{ display:none; }
.lib__more{ margin-top:var(--s3); display:flex; justify-content:center; }
.empty{ padding:var(--s5) var(--s3); text-align:center; border:1px dashed var(--line-dark); border-radius:var(--r-md); color:var(--on-dark-2); }
.light .empty{ border-color:var(--line); color:var(--ink-3); }

/* preview */
.pv{ position:sticky; top:calc(var(--hdr-h) + 20px); border-radius:var(--r-lg); background:rgba(255,255,255,.04); border:1px solid var(--line-dark); padding:clamp(18px,2vw,28px); }
.light .pv{ background:#fff; border-color:var(--line); box-shadow:var(--e1); }
.pv__stage{ position:relative; height:clamp(180px,17vw,230px); perspective:900px; margin:-4px -4px var(--s3); border-radius:var(--r-md); background:radial-gradient(90% 80% at 50% 110%, rgba(0,0,0,.28), rgba(0,0,0,0) 60%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)); overflow:hidden; }
.light .pv__stage{ background:radial-gradient(90% 80% at 50% 110%, rgba(18,32,26,.12), rgba(0,0,0,0) 60%), var(--ivory); }
.pv__chip{ position:absolute; left:7%; right:7%; top:50%; transform-style:preserve-3d; transform:translateY(-50%) rotateX(22deg) rotateZ(-5deg); transition:transform .6s var(--ease-out); }
.pv__chip .chip{ position:relative; top:auto; margin:0; transform-origin:50% 50%; --hole: #1c4a3b; }
.light .pv__chip .chip{ --hole: var(--ivory); }
.pv__chip.is-swap .chip{ animation:chipIn .45s var(--ease-out); }
@keyframes chipIn{ from{ transform:translateY(14px) rotateX(-18deg); opacity:.3; } to{ transform:none; opacity:1; } }
.pv__macro{ position:absolute; right:5%; bottom:8%; width:26%; aspect-ratio:1; border-radius:var(--r-sm); background-size:cover; background-position:center; border:3px solid #fff; box-shadow:0 10px 24px -8px rgba(0,0,0,.5); transform:translateZ(0); }
.pv__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.pv__code{ font-size:clamp(2.2rem,3.2vw,3rem); font-weight:800; letter-spacing:-.05em; line-height:.9; }
.pv__name{ margin-top:6px; font-size:.95rem; font-weight:650; color:var(--on-dark-2); }
.light .pv__name{ color:var(--ink-2); }
.pv__rows{ margin:var(--s3) 0; border-top:1px solid var(--line-dark); }
.light .pv__rows{ border-color:var(--line); }
.pv__rows div{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-dark); font-size:.86rem; }
.light .pv__rows div{ border-color:var(--line); }
.pv__rows dt{ color:var(--on-dark-3); font-weight:600; }
.light .pv__rows dt{ color:var(--ink-3); }
.pv__rows dd{ font-weight:750; text-align:right; }
.pv__acts{ display:grid; gap:10px; }
.pv__note{ margin-top:var(--s2); font-size:.76rem; line-height:1.55; color:var(--on-dark-3); }
.light .pv__note{ color:var(--ink-3); }
@media (max-width:1000px){ .lib{ grid-template-columns:minmax(0,1fr); } .pv{ position:relative; top:auto; order:-1; } }
@media (max-width:560px){ .grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; } .sw b{ font-size:.62rem; left:4px; bottom:4px; padding:1px 5px; } .seg button{ min-height:40px; padding:0 13px; font-size:.8rem; } }

/* mobile: horizontal scroller for filters */
@media (max-width:560px){ .seg.scroll{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); } .seg.scroll::-webkit-scrollbar{ display:none; } .seg.scroll button{ flex:none; } }

/* ---------- 10. Sample tray ---------- */
.tray{
  position:fixed; right:clamp(12px,2vw,24px); bottom:clamp(12px,2vw,24px); z-index:120; width:min(380px, calc(100vw - 24px));
  background:var(--graphite); color:#fff; border-radius:var(--r-lg); box-shadow:var(--e3); padding:18px;
  transform:translateY(calc(100% + 40px)); visibility:hidden; transition:transform .45s var(--ease-out), visibility 0s linear .45s;
}
.tray.is-open{ transform:none; visibility:visible; transition:transform .45s var(--ease-out); }
.tray__head{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.tray__head b{ display:block; font-size:1.1rem; font-weight:800; letter-spacing:-.02em; }
.tray__k{ display:block; font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--green-glow); margin-bottom:2px; }
.tray__list{ display:grid; gap:6px; margin:14px 0; max-height:min(46vh,340px); overflow:auto; }
.tray__item{ display:grid; grid-template-columns:40px minmax(0,1fr) 32px; align-items:center; gap:12px; padding:6px; border-radius:var(--r-sm); background:rgba(255,255,255,.06); font-size:.86rem; }
.tray__item b{ font-weight:800; margin-right:4px; }
.tray__item small{ display:block; font-size:.74rem; color:var(--on-dark-3); font-weight:600; }
.tray__item i{ width:40px; height:40px; border-radius:6px; background-size:cover; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.tray__item button{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:var(--on-dark-2); }
.tray__item button:hover{ background:rgba(255,255,255,.14); color:#fff; }
.tray__acts{ display:grid; gap:8px; }
.tray__clear{ font-size:.8rem; font-weight:700; color:var(--on-dark-3); min-height:36px; text-decoration:underline; text-underline-offset:3px; }
.tray__clear:hover{ color:#fff; }
.tray__empty{ margin-top:14px; display:grid; gap:8px; justify-items:start; }
.tray__empty p:first-child{ font-weight:750; }
.traybtn.is-pulse .count{ animation:pulse .6s var(--ease-out); }
@keyframes pulse{ 0%{ transform:scale(1); } 40%{ transform:scale(1.45); background:var(--green); color:#fff; } 100%{ transform:scale(1); } }
@media (min-width:901px){ .tray{ top:calc(var(--hdr-h) + 8px); bottom:auto; transform:translateY(-12px); opacity:0; transition:transform .35s var(--ease-out), opacity .25s, visibility 0s linear .35s; }
  .tray.is-open{ transform:none; opacity:1; transition:transform .35s var(--ease-out), opacity .25s; } }
.tray .xbtn{ width:40px; height:40px; }
@media (max-width:900px){ .tray{ bottom:calc(76px + env(safe-area-inset-bottom)); } }

/* ---------- 11. Proof ---------- */
.proof{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,5vw,96px); align-items:start; }
.proof__statement{ font-size:clamp(1.8rem,3.4vw,3.25rem); font-weight:800; letter-spacing:-.04em; line-height:1.08; }
.proof__statement span{ color:var(--green-ink); }
.figs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); margin-top:var(--s5); }
.fig{ padding:var(--s3) var(--s3) var(--s3) 0; border-bottom:1px solid var(--line); }
.fig:nth-child(odd){ border-right:1px solid var(--line); }
.fig:nth-child(even){ padding-left:var(--s3); }
.fig b{ display:block; font-size:clamp(2.2rem,3.6vw,3.4rem); font-weight:800; letter-spacing:-.05em; line-height:1; }
.fig span{ display:block; margin-top:8px; font-size:.88rem; font-weight:600; color:var(--ink-3); max-width:26ch; }
.points{ display:grid; gap:0; border-top:1px solid var(--line); }
.point{ display:grid; grid-template-columns:48px 1fr; gap:16px; padding:22px 0; border-bottom:1px solid var(--line); }
.point__n{ font-size:.8rem; font-weight:800; color:var(--green-ink); letter-spacing:.06em; padding-top:3px; }
.point h3{ font-size:1.12rem; font-weight:750; letter-spacing:-.02em; }
.point p{ margin-top:6px; color:var(--ink-2); font-size:.95rem; }
.process{ margin-top:clamp(48px,6vw,96px); }
.process__head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:var(--s3); }
.steps{ position:relative; display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:0; counter-reset:s; }
.steps::before{ content:''; position:absolute; left:0; right:0; top:15px; height:2px; background:var(--line); }
.steps::after{ content:''; position:absolute; left:0; top:15px; height:2px; width:calc(var(--p,0) * 100%); background:var(--green); transition:width 1.6s var(--ease-out); }
.step{ position:relative; padding-right:12px; }
.step i{ position:relative; z-index:1; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#fff; border:2px solid var(--line); font-style:normal; font-size:.72rem; font-weight:800; color:var(--ink-3); transition:background .3s, border-color .3s, color .3s; }
.step.on i{ background:var(--green); border-color:var(--green); color:#fff; }
.step h4{ margin-top:14px; font-size:.9rem; font-weight:750; letter-spacing:-.01em; line-height:1.25; }
.step p{ margin-top:4px; font-size:.78rem; color:var(--ink-3); line-height:1.45; }
@media (max-width:1000px){ .proof{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:900px){
  .steps{ grid-template-columns:1fr; gap:0; }
  .steps::before,.steps::after{ left:15px; right:auto; top:0; bottom:0; width:2px; height:auto; }
  .steps::after{ height:calc(var(--p,0) * 100%); width:2px; }
  .step{ display:grid; grid-template-columns:32px 1fr; column-gap:16px; padding:0 0 18px; }
  .step h4{ margin-top:5px; } .step p{ grid-column:2; }
}

/* ---------- 12. Applications ---------- */
.apps{ border-top:1px solid var(--line-dark); }
.app{ position:relative; display:grid; grid-template-columns:72px minmax(0,1fr) minmax(0,1.1fr) 40px; gap:var(--s3); align-items:center; padding:clamp(18px,2.2vw,30px) 0; border-bottom:1px solid var(--line-dark); overflow:hidden; }
.app__n{ font-size:.8rem; font-weight:800; letter-spacing:.08em; color:var(--green-glow); }
.app h3{ font-size:clamp(1.35rem,2.6vw,2.4rem); font-weight:800; letter-spacing:-.04em; line-height:1.05; transition:transform var(--t-card) var(--ease); }
.app p{ color:var(--on-dark-2); font-size:.95rem; max-width:44ch; }
.app__strip{ position:absolute; right:0; top:50%; width:min(46%,560px); aspect-ratio:5/1; border-radius:6px; background-size:cover; background-position:center; transform:translate(20px,-50%) rotate(-2deg); opacity:0; transition:opacity var(--t-card) var(--ease), transform .5s var(--ease-out); pointer-events:none; box-shadow:0 20px 40px -12px rgba(0,0,0,.6); }
.app__arrow{ width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line-dark); display:grid; place-items:center; transition:background var(--t-micro), border-color var(--t-micro); }
.app__arrow svg{ width:16px; height:16px; }
@media (hover:hover) and (min-width:901px){
  .app:hover .app__strip{ opacity:1; transform:translate(0,-50%) rotate(-2deg); }
  .app:hover p{ opacity:0; }
  .app:hover h3{ transform:translateX(8px); }
  .app:hover .app__arrow{ background:#fff; border-color:#fff; color:var(--forest); }
  .app p{ transition:opacity var(--t-micro); }
}
.app__codes{ display:none; }
@media (max-width:900px){
  .app{ grid-template-columns:44px 1fr; gap:6px 12px; }
  .app p{ grid-column:2; }
  .app__arrow{ display:none; }
  .app__strip{ position:relative; grid-column:2; width:100%; transform:none; opacity:1; top:auto; margin-top:10px; box-shadow:none; aspect-ratio:8/1; }
}

/* ---------- 13. Technical ---------- */
.tech{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,5vw,96px); align-items:start; }
.cmp{ width:100%; border-collapse:collapse; font-size:.95rem; }
.cmp th,.cmp td{ text-align:left; padding:16px 12px 16px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.cmp thead th{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:800; padding-top:0; }
.cmp thead th b{ display:block; margin-top:6px; font-size:1.3rem; letter-spacing:-.03em; text-transform:none; color:var(--ink); }
.cmp tbody th{ font-weight:650; color:var(--ink-3); width:30%; font-size:.86rem; }
.cmp td{ font-weight:650; }
.cmp td small{ display:block; font-weight:500; color:var(--ink-3); font-size:.8rem; margin-top:2px; }
.chiprow{ display:flex; gap:4px; margin-top:8px; }
.chiprow i{ width:28px; height:14px; border-radius:2px; background-size:cover; background-position:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.tech__note{ margin-top:var(--s3); font-size:.85rem; color:var(--ink-3); max-width:60ch; }
@media (max-width:1000px){ .tech{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px){ .cmp{ font-size:.86rem; table-layout:fixed; } .cmp td,.cmp th{ overflow-wrap:anywhere; } .cmp tbody th{ width:34%; } }

/* ---------- 14. Resources ---------- */
.res{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(12px,1.6vw,24px); }
.rcard{ position:relative; display:flex; flex-direction:column; gap:12px; padding:clamp(22px,2.4vw,32px); border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); transition:box-shadow var(--t-card) var(--ease), transform var(--t-card) var(--ease); min-height:250px; }
.rcard:hover{ box-shadow:var(--e2); transform:translateY(-3px); }
.rcard .k{ font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--green-ink); }
.rcard h3{ font-size:1.3rem; font-weight:800; letter-spacing:-.03em; line-height:1.15; }
.rcard p{ color:var(--ink-2); font-size:.92rem; }
.rcard .tlink{ margin-top:auto; }
.rcard--feature{ background:var(--graphite); color:#fff; border-color:transparent; overflow:hidden; }
.rcard--feature p{ color:var(--on-dark-2); }
.rcard--feature .k{ color:var(--green-glow); }
.rcard--feature .tlink{ color:var(--green-glow); }
.rcard__book{ position:absolute; right:-6%; bottom:-12%; width:52%; aspect-ratio:3/4; perspective:800px; pointer-events:none; }
.rcard__book div{ position:absolute; inset:0; border-radius:4px; background:#fff; transform:rotateY(-24deg) rotateZ(8deg); box-shadow:-18px 24px 40px rgba(0,0,0,.4); display:grid; grid-template-rows:repeat(6,1fr); gap:3px; padding:10%; transition:transform .6s var(--ease-out); }
.rcard--feature:hover .rcard__book div{ transform:rotateY(-12deg) rotateZ(4deg) translateY(-6px); }
.rcard__book span{ border-radius:2px; background-size:cover; background-position:center; }
.rcard--feature .rcard__txt{ max-width:58%; display:flex; flex-direction:column; gap:12px; flex:1; }
@media (max-width:1000px){ .res{ grid-template-columns:1fr 1fr; } .rcard--feature{ grid-column:span 2; } }
@media (max-width:620px){ .res{ grid-template-columns:1fr; } .rcard--feature{ grid-column:auto; } .rcard--feature .rcard__txt{ max-width:64%; } }

/* ---------- 15. Enquiry / forms ---------- */
.enq{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,5vw,96px); align-items:start; }
.enq .h2{ margin-top:var(--s2); }
.enq__list{ margin-top:var(--s4); display:grid; gap:0; border-top:1px solid var(--line-dark); }
.enq__list li{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-dark); font-weight:650; color:var(--on-dark-2); }
.enq__list li svg{ width:20px; height:20px; flex:none; color:var(--green-glow); margin-top:2px; }
.form{ display:grid; gap:18px; }
.form--card{ background:#fff; color:var(--ink); border-radius:var(--r-lg); padding:clamp(20px,3vw,40px); box-shadow:var(--e3); }
.intent{ display:flex; flex-wrap:wrap; gap:6px; }
.intent label{ position:relative; }
.intent input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.intent span{ display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:var(--r-pill); border:1.5px solid var(--line); font-size:.85rem; font-weight:700; color:var(--ink-2); transition:all var(--t-micro); }
.intent input:checked + span{ background:var(--ink); border-color:var(--ink); color:#fff; }
.intent input:focus-visible + span{ outline:2px solid var(--green); outline-offset:2px; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:grid; gap:7px; }
.field label{ font-size:.8rem; font-weight:750; color:var(--ink-2); }
.field label i{ font-style:normal; color:var(--red); }
.field input,.field select,.field textarea{
  width:100%; min-height:50px; padding:0 14px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff; color:var(--ink);
  font-size:1rem; font-weight:550; transition:border-color var(--t-micro), box-shadow var(--t-micro);
}
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2317211D' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
.field textarea{ min-height:108px; padding:12px 14px; resize:vertical; line-height:1.55; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:rgba(23,33,29,.28); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 4px rgba(0,155,77,.14); }
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{ border-color:var(--red); box-shadow:0 0 0 4px rgba(229,43,43,.1); }
.field .err{ display:none; font-size:.78rem; font-weight:650; color:#B81E1E; }
.field.is-invalid .err{ display:block; }
.field .hint{ font-size:.76rem; color:var(--ink-3); }
.ctx{ display:none; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border-radius:var(--r-sm); background:var(--green-soft); font-size:.85rem; font-weight:650; color:var(--ink-2); }
.ctx.is-on{ display:flex; }
.ctx i{ width:34px; height:20px; border-radius:3px; background-size:cover; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.form__foot{ display:grid; gap:10px; }
.form__msg{ display:none; padding:12px 14px; border-radius:var(--r-sm); font-size:.88rem; font-weight:650; }
.form__msg.is-error{ display:block; background:#FDECEC; color:#8E1616; }
.form__note{ font-size:.76rem; color:var(--ink-3); }
.done{ display:none; text-align:center; padding:var(--s5) var(--s2); }
.done.is-on{ display:block; }
.done__ic{ width:64px; height:64px; margin:0 auto var(--s3); border-radius:50%; background:var(--green-soft); color:var(--green-ink); display:grid; place-items:center; }
.done__ic svg{ width:28px; height:28px; }
.done p{ margin:12px auto 0; color:var(--ink-2); max-width:40ch; }
.done .btn{ margin-top:var(--s3); }
@media (max-width:1000px){ .enq{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px){ .f2{ grid-template-columns:1fr; } }

/* ---------- 16. Footer ---------- */
.ft{ background:var(--graphite); color:var(--on-dark-2); padding-top:clamp(56px,7vw,112px); }
.ft__top{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:var(--s5) var(--s4); padding-bottom:var(--s6); }
.ft__brand img{ height:36px; width:auto; }
.ft__brand p{ margin-top:var(--s3); font-size:.92rem; max-width:36ch; color:var(--on-dark-3); }
.ft h2{ color:#fff; font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin-bottom:var(--s2); }
.ft__col a{ display:flex; align-items:center; min-height:40px; font-size:.92rem; font-weight:600; color:var(--on-dark-2); transition:color var(--t-micro); }
.ft__col a:hover{ color:#fff; }
.ft__bot{ display:flex; justify-content:space-between; gap:var(--s2); flex-wrap:wrap; padding-block:var(--s3) var(--s4); border-top:1px solid var(--line-dark); font-size:.8rem; color:var(--on-dark-3); }
@media (max-width:900px){ .ft__top{ grid-template-columns:1fr 1fr; } .ft__brand{ grid-column:span 2; } }
@media (max-width:480px){ .ft__top{ grid-template-columns:1fr; } .ft__brand{ grid-column:auto; } }

/* ---------- 17. Mobile conversion bar ---------- */
.mbar{ display:none; }
@media (max-width:900px){
  .mbar{
    position:fixed; left:0; right:0; bottom:0; z-index:110; display:flex; gap:8px;
    padding:10px var(--gutter) max(10px, env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line);
    transform:translateY(110%); transition:transform .4s var(--ease-out);
  }
  .mbar.is-on{ transform:none; }
  .mbar .btn{ --bh:48px; flex:1; padding:0 12px; font-size:.86rem; }
  .mbar .btn--icon{ flex:0 0 48px; padding:0; }
  body{ padding-bottom:calc(70px + env(safe-area-inset-bottom)); }
}

/* ---------- 18. Interior pages ---------- */
.phero{ padding-block:clamp(40px,6vw,96px) clamp(36px,5vw,72px); background:var(--ivory); border-bottom:1px solid var(--line-2); position:relative; overflow:hidden; }
.phero .h2{ margin-top:var(--s2); max-width:16ch; }
.phero .lede{ margin-top:var(--s3); }
.crumb{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:var(--s3); font-size:.82rem; font-weight:650; color:var(--ink-3); }
.crumb a{ min-height:32px; display:inline-flex; align-items:center; }
.crumb a:hover{ color:var(--green-ink); }
.phero__strips{ position:absolute; right:-4%; top:50%; width:min(44vw,620px); transform:translateY(-50%) rotate(-8deg); display:grid; gap:10px; opacity:.95; pointer-events:none; }
.phero__strips i{ display:block; aspect-ratio:7/1; border-radius:4px; background-size:cover; background-position:center; box-shadow:0 10px 20px -8px rgba(18,32,26,.35); }
.phero__strips i:nth-child(2){ margin-left:12%; } .phero__strips i:nth-child(3){ margin-left:4%; } .phero__strips i:nth-child(4){ margin-left:18%; }
@media (max-width:1000px){ .phero__strips{ display:none; } }

.anchor-nav{ position:sticky; top:var(--hdr-h); z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-2); transition:top var(--t-card) var(--ease); }
.anchor-nav .wrap{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }
.anchor-nav .wrap::-webkit-scrollbar{ display:none; }
.anchor-nav a{ flex:none; padding:14px 14px; font-size:.86rem; font-weight:700; color:var(--ink-3); border-bottom:2px solid transparent; }
.anchor-nav a:hover,.anchor-nav a.on{ color:var(--ink); border-color:var(--green); }

.famgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:clamp(12px,1.4vw,20px); }
.fam{ display:flex; flex-direction:column; border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden; background:#fff; transition:box-shadow var(--t-card), transform var(--t-card); }
.fam:hover{ box-shadow:var(--e2); transform:translateY(-3px); }
.fam__strips{ display:grid; gap:3px; padding:14px; background:var(--ivory); }
.fam__strips i{ display:block; aspect-ratio:9/1; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); background-size:cover; background-position:center; }
.fam__body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:6px; flex:1; }
.fam__body h3{ font-size:1.15rem; font-weight:800; letter-spacing:-.02em; }
.fam__body .tlink{ margin-top:auto; padding-top:10px; }

/* ply match */
.match{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:clamp(24px,3.5vw,56px); align-items:start; }
.boards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; }
.bd{ display:flex; align-items:center; gap:12px; min-height:52px; padding:8px 14px 8px 8px; border-radius:var(--r-sm); border:1.5px solid var(--line); background:#fff; text-align:left; font-size:.86rem; font-weight:650; color:var(--ink-2); transition:border-color var(--t-micro), background var(--t-micro); }
.bd:hover{ border-color:var(--ink); }
.bd[aria-pressed="true"]{ border-color:var(--green); background:var(--green-soft); color:var(--ink); }
.bd i{ width:36px; height:36px; border-radius:6px; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.mres{ border-radius:var(--r-lg); border:1px solid var(--line); background:#fff; padding:clamp(18px,2vw,28px); box-shadow:var(--e1); }
.mres__row{ display:grid; grid-template-columns:96px 1fr auto; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.mres__row:last-of-type{ border-bottom:0; }
.mres__row i{ display:block; aspect-ratio:3/1; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); background-size:cover; background-position:center; }
.mres__row b{ display:block; font-weight:800; }
.mres__row span{ font-size:.8rem; color:var(--ink-3); font-weight:600; }
.mres__row .q{ font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:var(--r-pill); background:var(--green-soft); color:var(--green-ink); }
.mres__row .q--far{ background:var(--ivory-2); color:var(--ink-3); }
@media (max-width:1000px){ .match{ grid-template-columns:minmax(0,1fr); } }

/* knowledge */
.kb{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:start; }
.kbnav{ position:sticky; top:calc(var(--hdr-h) + 24px); display:grid; border-top:1px solid var(--line); }
.kbnav a{ padding:12px 0; border-bottom:1px solid var(--line); font-size:.88rem; font-weight:650; color:var(--ink-3); transition:color var(--t-micro), padding var(--t-micro); }
.kbnav a:hover,.kbnav a.on{ color:var(--ink); padding-left:6px; }
.kart{ padding-block:var(--s6); border-bottom:1px solid var(--line); max-width:70ch; }
.kart:first-child{ padding-top:0; }
.kart h2{ margin-top:var(--s2); font-size:clamp(1.6rem,2.6vw,2.2rem); font-weight:800; letter-spacing:-.035em; line-height:1.1; }
.kart h3{ margin-top:var(--s4); font-size:1.08rem; font-weight:800; letter-spacing:-.015em; }
.kart p{ margin-top:var(--s2); color:var(--ink-2); font-size:1.02rem; line-height:1.75; }
.kart ul{ margin-top:var(--s2); display:grid; gap:10px; }
.kart li{ position:relative; padding-left:22px; color:var(--ink-2); line-height:1.7; }
.kart li::before{ content:''; position:absolute; left:0; top:12px; width:10px; height:2px; background:var(--green); }
.kart a{ color:var(--green-ink); text-decoration:underline; text-underline-offset:3px; font-weight:650; }
@media (max-width:1000px){ .kb{ grid-template-columns:minmax(0,1fr); } .kbnav{ position:static; display:flex; flex-wrap:wrap; gap:6px; border:0; } .kbnav a{ border:1.5px solid var(--line); border-radius:var(--r-pill); padding:8px 14px; } .kbnav a:hover{ padding-left:14px; } }

/* contact */
.ctc{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,96px); align-items:start; }
.info{ border-top:1px solid var(--line); }
.info > div{ padding:var(--s3) 0; border-bottom:1px solid var(--line); }
.info dt{ font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--green-ink); }
.info dd{ margin-top:8px; font-weight:750; font-size:1.02rem; }
.info dd small{ display:block; font-weight:500; color:var(--ink-3); font-size:.88rem; margin-top:4px; }
@media (max-width:1000px){ .ctc{ grid-template-columns:minmax(0,1fr); } }

/* final CTA band */
.band{ position:relative; overflow:hidden; background:var(--forest); color:#fff; }
.band__strips{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(14,1fr); opacity:.18; pointer-events:none; mask-image:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent); }
.band__strips i{ background-size:cover; background-position:center; }
.band__in{ position:relative; text-align:center; }
.band .display{ max-width:16ch; margin:var(--s2) auto 0; font-size:clamp(2.4rem,5vw,4.8rem); }
.band .lede{ margin:var(--s3) auto 0; }
.band__acts{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:var(--s5); }

/* ---------- 19. Reveal ---------- */
.js [data-rv]{ opacity:0; transform:translateY(24px); transition:opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease-out); }
.js [data-rv].in{ opacity:1; transform:none; }
.js [data-rv="2"]{ transition-delay:80ms; } .js [data-rv="3"]{ transition-delay:160ms; } .js [data-rv="4"]{ transition-delay:240ms; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; transition-delay:0ms!important; }
  .js [data-rv]{ opacity:1; transform:none; }
  .stage__rig{ transform:none!important; }
}

/* utilities */
.mt1{margin-top:var(--s1)} .mt2{margin-top:var(--s2)} .mt3{margin-top:var(--s3)} .mt4{margin-top:var(--s4)} .mt5{margin-top:var(--s5)}
.center{ text-align:center; }
.legend{ padding:0; margin-bottom:8px; font-size:.8rem; font-weight:750; color:var(--ink-2); }
.points--3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 var(--s4); margin-bottom:var(--s4); }
@media (max-width:900px){ .points--3{ grid-template-columns:minmax(0,1fr); } }

/* compact sticky preview on tablet/mobile */
@media (max-width:1000px){
  .pv{ position:sticky; top:calc(var(--hdr-h) + 8px); z-index:6; display:grid; grid-template-columns:minmax(96px,34%) 1fr; gap:10px 14px; align-items:center; padding:12px; background:rgba(18,60,47,.97); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 16px 30px -18px rgba(0,0,0,.6); }
  .light .pv{ background:rgba(255,255,255,.97); }
  .pv__stage{ grid-row:span 1; height:84px; margin:0; }
  .pv__macro,.pv__rows,.pv__note{ display:none; }
  .pv__code{ font-size:1.7rem; }
  .pv__name{ font-size:.8rem; margin-top:4px; }
  .pv__acts{ grid-column:1/-1; grid-template-columns:1fr 1fr; gap:8px; }
  .pv__acts .btn{ --bh:42px; padding:0 10px; font-size:.8rem; }
  .pv__acts .btn .ic{ display:none; }
}
@media (max-width:1000px){ body:has(.anchor-nav) .pv{ top:calc(var(--hdr-h) + 58px); } }

/* ---------- 20. Scroll story (home hero, desktop + motion allowed) ---------- */
.story,.story__macro{ display:none; }
.story-on .hero{ height:420vh; padding:0; overflow:visible; }
.story-on .hero::before{ display:none; }
.story-on .hero__pin{
  position:sticky; top:0; height:100vh; overflow:hidden;
  background:
    radial-gradient(70% 60% at 70% 60%, rgba(0,155,77,.07), rgba(0,155,77,0) 70%),
    linear-gradient(180deg, #fff 0%, var(--ivory) 62%, #E9EEE8 100%);
}
.story-on .hero__pin::after{ /* horizon line: the "table" the product sits on */
  content:''; position:absolute; left:0; right:0; top:74%; height:1px; background:linear-gradient(90deg,transparent,rgba(23,33,29,.10) 20%,rgba(23,33,29,.10) 80%,transparent);
}
.story-on .hero__in{ position:relative; z-index:3; height:100%; align-content:center; padding-top:var(--hdr-h); grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); pointer-events:none; }
.story-on .hero__copy,.story-on .hero__facts{ pointer-events:auto; will-change:opacity,transform; }
.story-on .stage{ position:absolute; inset:0; z-index:1; aspect-ratio:auto; max-width:none; margin:0; perspective:1600px; perspective-origin:50% 40%; grid-area:auto; }
.story-on .stage__rig{ transition:none; }
.story-on .stage__floor{ display:none; }
.story-on .stage__fan{ left:50%; top:50%; right:auto; width:var(--cw,560px); height:calc(var(--cw,560px) / 5); margin:calc(var(--cw,560px) / -10) 0 0 calc(var(--cw,560px) / -2); will-change:transform; }
.story-on .stage__fan .chip{ will-change:transform; }
.story-on .stage__rolls{ left:50%; top:50%; bottom:auto; width:min(21vw,300px); margin:calc(min(21vw,300px) * -.71) 0 0 calc(min(21vw,300px) / -2); will-change:transform,opacity; }
.story-on .stage__shadow{ left:50%; top:50%; bottom:auto; width:min(24vw,340px); height:36px; margin:-18px 0 0 calc(min(24vw,340px) / -2); }
.story-on .stage__tag{ right:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); bottom:14vh; }
.story-on .story__macro{
  display:block; position:absolute; left:50%; top:50%; width:min(24vmin,240px); aspect-ratio:1; margin:calc(min(24vmin,240px) / -2) 0 0 calc(min(24vmin,240px) / -2);
  border-radius:50%; background-size:240%; background-position:40% 50%; border:5px solid #fff; opacity:0; overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(18,32,26,.55), 0 0 0 1px rgba(18,32,26,.08);
}
.story__macro span{ position:absolute; inset:0; background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); transform:translateX(var(--sweep,-120%)); mix-blend-mode:soft-light; }

.story-on .story{ display:block; position:absolute; inset:0; z-index:4; pointer-events:none; }
.story__cap{ position:absolute; left:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); top:30vh; width:min(430px, 34vw); opacity:0; visibility:hidden; will-change:opacity,transform; }
.story__cap--c{ top:auto; bottom:18vh; pointer-events:auto; }
.story__k{ display:inline-flex; align-items:center; gap:10px; font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--green-ink); }
.story__k::before{ content:''; width:18px; height:2px; background:var(--red); border-radius:2px; }
.story__h{ margin-top:16px; font-size:clamp(2.4rem,4.2vw,4.4rem); font-weight:800; line-height:.98; letter-spacing:-.045em; color:var(--ink); }
.story__p{ margin-top:18px; font-size:1.08rem; line-height:1.6; color:var(--ink-2); font-weight:500; max-width:40ch; }
.story__cap .hero__ctas{ margin-top:24px; }
.story__rail{ position:absolute; left:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); bottom:28px; display:flex; gap:22px; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.story__rail li{ display:flex; align-items:center; gap:8px; transition:color .3s; }
.story__rail i{ width:22px; height:2px; background:var(--line); border-radius:2px; transition:background .3s, width .3s; }
.story__rail li.done i{ background:rgba(0,155,77,.45); }
.story__rail li.on{ color:var(--ink); }
.story__rail li.on i{ width:36px; background:var(--green); }
.story__cue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.story__cue span{ width:1.5px; height:34px; background:linear-gradient(var(--ink-3),transparent); animation:cue 1.8s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%{ transform:scaleY(0); opacity:1; } 60%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1); opacity:0; } }
.js [data-rv] .eyebrow::before{ width:0; transition:width .6s var(--ease-out) .25s; }
.js [data-rv].in .eyebrow::before{ width:18px; }
.story-on .stage__tag{ display:none; }
.story-on .hero__facts dd{ white-space:nowrap; }
.story-on .hero__in{ align-content:center; row-gap:0; padding-bottom:40px; }
.story-on .hero__copy{ align-self:auto; }
.story-on .hero h1{ font-size:clamp(2.75rem,4.8vw,5.25rem); margin-top:18px; }
.story-on .hero .lede{ margin-top:18px; font-size:1.08rem; max-width:40ch; }
.story-on .hero__ctas{ margin-top:26px; }
.story-on .hero__facts{ margin-top:28px; padding-top:18px; }
.story-on .hero__pin::after{ top:82%; }
.story-on .hero__in{ align-content:start; padding-top:calc(var(--hdr-h) + 9vh); }
.story-on .hero__in{ padding-top:8vh; }

/* ---------- 21. Edge Studio (3D preview inside the shade library) ---------- */
.lib--studio{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
.lib--studio > .pv{ order:-1; }
.lib--studio .grid{ grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); }
.studio{ position:relative; margin:-4px -4px var(--s3); border-radius:var(--r-md); overflow:hidden;
  background:radial-gradient(80% 70% at 50% 85%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%), linear-gradient(180deg, #1B4A3A 0%, #143D30 100%); }
.light .studio{ background:radial-gradient(80% 70% at 50% 85%, #fff, rgba(255,255,255,0) 60%), linear-gradient(180deg, #F3F5F1, #E6EBE4); }
.studio .pv__stage{ margin:0; height:clamp(300px,44vh,460px); border-radius:0; background:none; }
.studio__canvas{ position:absolute; inset:0; opacity:0; transition:opacity .6s var(--ease); touch-action:pan-y; cursor:grab; outline-offset:-3px; }
.studio__canvas:active{ cursor:grabbing; }
.studio__canvas canvas{ display:block; width:100%!important; height:100%!important; }
.studio.is-3d .studio__canvas{ opacity:1; }
.studio.is-3d .pv__stage > *{ opacity:0; transition:opacity .4s; }
.studio__top{ position:absolute; left:12px; right:12px; top:12px; display:flex; justify-content:space-between; align-items:center; gap:10px; pointer-events:none; opacity:0; transition:opacity .4s; }
.studio.is-3d .studio__top{ opacity:1; }
.studio__views{ display:inline-flex; padding:3px; border-radius:var(--r-pill); background:rgba(10,24,19,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); pointer-events:auto; }
.studio__views button{ min-height:34px; padding:0 14px; border-radius:var(--r-pill); font-size:.8rem; font-weight:750; color:rgba(255,255,255,.8); transition:background var(--t-micro), color var(--t-micro); }
.studio__views button[aria-pressed="true"]{ background:#fff; color:var(--forest); }
.light .studio__views{ background:rgba(255,255,255,.8); box-shadow:0 0 0 1px var(--line); }
.light .studio__views button{ color:var(--ink-2); }
.light .studio__views button[aria-pressed="true"]{ background:var(--ink); color:#fff; }
.studio__hint{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:var(--r-pill); background:rgba(10,24,19,.45); color:rgba(255,255,255,.82); font-size:.74rem; font-weight:700; transition:opacity .5s; }
.studio__hint svg{ width:18px; height:12px; }
.studio.is-touched .studio__hint{ opacity:0; }
.light .studio__hint{ background:rgba(255,255,255,.8); color:var(--ink-3); }
.studio__apply{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:8px 14px; border-radius:var(--r-pill); background:rgba(10,24,19,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#fff; font-size:.74rem; font-weight:750; white-space:nowrap; }
.studio__apply input{ width:min(200px,36vw); accent-color:var(--green-glow); }
.light .studio__apply{ background:rgba(255,255,255,.9); color:var(--ink-2); box-shadow:0 0 0 1px var(--line); }
.studio__loading{ position:absolute; right:14px; bottom:12px; display:flex; align-items:center; gap:8px; font-size:.74rem; font-weight:700; color:var(--on-dark-3); transition:opacity .4s; }
.studio__loading i{ width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; animation:spin .8s linear infinite; }
.studio.is-3d .studio__loading,.studio.no-3d .studio__loading{ opacity:0; pointer-events:none; }
.lib--studio .pv__rows{ display:grid; grid-template-columns:1fr 1fr; column-gap:18px; }
.lib--studio .pv__rows div:first-child{ border-top:0; }
.lib--studio .pv__acts{ grid-template-columns:1fr 1fr; }
@media (min-width:1001px){ .lib--studio .pv__note{ display:none; } }
@media (max-width:1000px){
  .lib--studio{ grid-template-columns:minmax(0,1fr); }
  .lib--studio .pv{ display:block; position:relative; top:auto; padding:12px; background:rgba(255,255,255,.04); box-shadow:none; }
  .lib--studio .studio{ margin:0 0 12px; }
  .lib--studio .studio .pv__stage{ height:clamp(260px,62vw,420px); }
  .lib--studio .pv__macro{ display:none; }
  .lib--studio .pv__rows{ display:none; }
  .lib--studio .pv__acts{ display:grid; }
}
@media (max-width:1000px){ .lib--studio .pv, body:has(.anchor-nav) .lib--studio .pv{ top:auto; background:#173F32; } .light.lib--studio .pv{ background:#fff; } }

/* ---------- 22. Hero film: "One roll. Every edge." (assets/js/sfilm.js) ---------- */
.sf{ --sf-bg:#0B0C0E; position:relative; margin-top:calc(-1 * var(--hdr-h)); background:var(--sf-bg); color:#fff; }
.sf__stage{ position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden; isolation:isolate; }
.sf__poster,.sf__still,.sf__v{ position:absolute; inset:0; width:100%; height:100%; }
.sf__poster img,.sf__still img{ width:100%; height:100%; object-fit:cover; }
.sf__v{ object-fit:cover; opacity:0; transition:opacity .6s var(--ease); }
.sf-ready .sf__v{ opacity:1; }
.sf__still{ display:none; }
.sf__shade{ position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(90deg, rgba(11,12,14,.72) 0%, rgba(11,12,14,.38) 34%, rgba(11,12,14,0) 58%), linear-gradient(0deg, rgba(11,12,14,.55) 0%, rgba(11,12,14,0) 32%); }
.sf__intro,.sf__caps,.sf__end,.sf__rail,.sf__load,.sf__cue{ position:absolute; z-index:2; }
.sf__intro{ left:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); top:50%; transform:translateY(-44%); max-width:560px; transition:opacity .7s var(--ease), transform .9s var(--ease); }
.sf__intro .eyebrow{ color:var(--green-glow); }
.sf__h{ margin-top:14px; font-size:clamp(3rem,7vw,6.6rem); font-weight:800; line-height:.94; letter-spacing:-.05em; color:#fff; }
.sf__p{ margin-top:20px; font-size:clamp(1rem,1.25vw,1.18rem); line-height:1.6; font-weight:500; color:rgba(255,255,255,.84); max-width:44ch; }
.sf__caps{ inset:0; pointer-events:none; }
.sf__cap{ position:absolute; left:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); bottom:clamp(96px,16vh,170px); max-width:30ch;
  font-size:clamp(1.3rem,2.3vw,2.1rem); font-weight:650; line-height:1.2; letter-spacing:-.025em; color:rgba(255,255,255,.92);
  opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .7s var(--ease); text-shadow:0 2px 24px rgba(0,0,0,.5); }
.sf__cap b{ display:block; margin-bottom:8px; font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--green-glow); text-shadow:none; }
.sf__cap.is-on{ opacity:1; transform:none; }
.sf__end{ left:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); bottom:clamp(96px,15vh,160px); max-width:560px; opacity:0; transform:translateY(20px); pointer-events:none; transition:opacity .7s var(--ease), transform .9s var(--ease); }
.sf__h2{ font-size:clamp(2rem,4vw,3.6rem); font-weight:800; line-height:1; letter-spacing:-.04em; color:#fff; }
.sf__end .hero__ctas{ margin-top:24px; }
.sf__play{ margin-top:16px; padding:0; border:0; background:none; font:inherit; font-size:.84rem; font-weight:750; color:rgba(255,255,255,.8); text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.sf__rail{ right:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); bottom:30px; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.sf__rail ol{ display:flex; gap:18px; margin:0; padding:0; list-style:none; }
.sf__rail li{ font-size:.66rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.36); transition:color .4s var(--ease); }
.sf__rail li.is-on{ color:#fff; }
.sf__bar{ display:block; width:100%; height:1px; background:rgba(255,255,255,.18); overflow:hidden; }
.sf__bar i{ display:block; height:100%; background:#fff; transform:scaleX(0); transform-origin:left; }
.sf__load{ left:0; right:0; top:0; height:2px; background:transparent; }
.sf__load i{ display:block; height:100%; background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .3s linear, opacity .6s; }
.sf-ready .sf__load i{ opacity:0; }
.sf__cue{ left:50%; bottom:28px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.68rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.62); transition:opacity .5s; }
.sf__cue span{ width:1.5px; height:38px; background:linear-gradient(rgba(255,255,255,.7),transparent); animation:cue 1.8s var(--ease) infinite; transform-origin:top; }

/* film mode: pinned, the scroll drives the film */
.sf-on .sf{ height:460vh; }
.sf-on .sf__stage{ position:sticky; top:0; }
.sf-on [data-sfilm].is-end .sf__end{ opacity:1; transform:none; pointer-events:auto; }
.sf-on [data-sfilm].is-end .sf__rail,.sf-on [data-sfilm].is-end .sf__cue{ opacity:0; }
.sf-on .sf__stage:has(.sf__cap.is-on) .sf__intro,.sf-on [data-sfilm].is-end .sf__intro{ opacity:0; transform:translateY(-56%); pointer-events:none; }

/* still mode (reduced motion, no film): the finished kitchen with the full message */
.sf-still .sf__poster,.sf-still .sf__v,.sf-still .sf__caps,.sf-still .sf__rail,.sf-still .sf__load,.sf-still .sf__cue{ display:none; }
.sf-still .sf__still{ display:block; }
.sf-still .sf__intro{ top:auto; bottom:clamp(110px,16vh,170px); transform:none; }
.sf-still .sf__end{ opacity:1; transform:none; pointer-events:auto; bottom:clamp(56px,8vh,90px); }
.sf-still .sf__end .sf__h2,.sf-still .sf__end .hero__ctas{ display:none; }
html:not(.sf-on):not(.sf-still) .sf__rail,html:not(.sf-on):not(.sf-still) .sf__caps,html:not(.sf-on):not(.sf-still) .sf__load{ display:none; }

@media (max-width:760px){
  .sf-on .sf{ height:380vh; }
  .sf__shade{ background:linear-gradient(0deg, rgba(11,12,14,.86) 0%, rgba(11,12,14,.45) 42%, rgba(11,12,14,0) 70%), linear-gradient(180deg, rgba(11,12,14,.5), rgba(11,12,14,0) 22%); }
  .sf__intro{ top:auto; bottom:clamp(120px,19vh,170px); transform:none; right:var(--gutter); }
  .sf__h{ font-size:clamp(2.7rem,13vw,3.6rem); }
  .sf__cap{ right:var(--gutter); bottom:clamp(130px,20vh,180px); font-size:1.35rem; }
  .sf__end{ right:var(--gutter); bottom:clamp(110px,17vh,150px); }
  .sf__end .hero__ctas{ display:grid; grid-template-columns:minmax(0,1fr); }
  .sf__rail{ bottom:calc(84px + env(safe-area-inset-bottom)); }
  .sf__rail li:not(.is-on){ display:none; }
  .sf__cue{ display:none; }
  .sf-still .sf__intro{ bottom:clamp(110px,16vh,160px); }
  .sf-still .sf__end{ bottom:clamp(56px,8vh,80px); }
  .sf-on .sf__stage:has(.sf__cap.is-on) .sf__intro{ transform:none; }
}

/* ---------- 23. Edge test (before / after) ---------- */
.et{ background:#0B0C0E; color:#fff; }
.et .h2{ color:#fff; } .et .lede{ color:rgba(255,255,255,.76); } .et .eyebrow{ color:var(--green-glow); }
.et__note{ margin-top:18px; font-size:.78rem; color:rgba(255,255,255,.5); }
.et__in{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:clamp(24px,4vw,64px); align-items:center; }
.et__box{ --cut:50%; position:relative; aspect-ratio:16/9; border-radius:var(--r-lg,18px); overflow:hidden; background:#111; user-select:none; touch-action:pan-y; box-shadow:0 30px 80px -40px rgba(0,0,0,.8); }
.et__box img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.et__after{ clip-path:inset(0 0 0 var(--cut)); }
.et__line{ position:absolute; top:0; bottom:0; left:var(--cut); width:2px; margin-left:-1px; background:#fff; pointer-events:none; box-shadow:0 0 18px rgba(0,0,0,.4); }
.et__line i{ position:absolute; top:50%; left:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.35); }
.et__line i::before,.et__line i::after{ content:''; position:absolute; top:50%; width:7px; height:7px; margin-top:-4px; border:solid var(--ink,#17211D); border-width:0 0 2px 2px; }
.et__line i::before{ left:12px; transform:rotate(45deg); } .et__line i::after{ right:12px; transform:rotate(-135deg); }
.et__tag{ position:absolute; top:16px; padding:6px 10px; border-radius:999px; background:rgba(11,12,14,.6); backdrop-filter:blur(6px); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.et__tag--l{ left:16px; } .et__tag--r{ right:16px; color:var(--green-glow); }
.et__box input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.et__box:has(input:focus-visible){ outline:2px solid var(--green-glow); outline-offset:4px; }
@media (max-width:900px){ .et__in{ grid-template-columns:minmax(0,1fr); } }

/* ---------- 24. v12 components ---------- */
.ico{ width:28px; height:28px; flex:none; color:var(--green-ink); }
.dark .ico,.graphite .ico{ color:var(--green-glow); }
.sf__h{ font-size:clamp(2.6rem,5.8vw,5.6rem); max-width:13ch; }
.sf__meta{ margin-top:14px; font-size:.82rem; font-weight:700; letter-spacing:.04em; color:rgba(255,255,255,.66); }
.sf__intro .hero__ctas{ margin-top:26px; }
@media (max-width:760px){ .sf__h{ font-size:clamp(2.2rem,10.5vw,3rem); } .sf__intro .hero__ctas{ display:grid; grid-template-columns:minmax(0,1fr); } .sf__meta{ font-size:.74rem; } }

/* form groups */
.fgroup{ display:grid; gap:18px; }
.f3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
@media (max-width:640px){ .f3{ grid-template-columns:minmax(0,1fr); } }
.field input[type=file]{ padding:10px; min-height:auto; font-size:.85rem; }
.form[data-intent] .intent span{ min-height:42px; }

/* specifications */
.specs{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-top:1px solid var(--line); }
.specs > div{ padding:16px 16px 16px 0; border-bottom:1px solid var(--line); }
.specs dt{ font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.specs dd{ margin-top:4px; font-weight:700; font-size:1rem; letter-spacing:-.01em; }
.sizes{ margin-top:var(--s4); border-radius:var(--r-lg); background:var(--ivory); padding:clamp(18px,2.4vw,28px); }
.ivory .sizes{ background:#fff; }
.sizes__head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:14px; }
.sizes__head h3{ font-size:1.05rem; font-weight:800; }
.sizes__list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-bottom:12px; }
.sizes__list li{ display:flex; align-items:baseline; gap:3px; padding:12px 14px; border-radius:var(--r-md); background:#fff; border:1px solid var(--line-2); }
.ivory .sizes__list li{ background:var(--ivory); }
.sizes__list b{ font-size:1.15rem; font-weight:800; letter-spacing:-.02em; }
.sizes__list span{ font-size:.75rem; font-weight:700; color:var(--ink-3); }
.sizes__list i{ font-style:normal; margin:0 6px; color:var(--green-ink); font-weight:800; }
@media (max-width:560px){ .specs{ grid-template-columns:minmax(0,1fr); } .sizes__list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* product range */
.prods{ display:grid; grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px); }
.prod{ display:flex; flex-direction:column; gap:10px; padding:clamp(20px,2.2vw,28px); border-radius:var(--r-lg); border:1px solid var(--line); background:#fff; transition:box-shadow var(--t-card), transform var(--t-card); }
.prod:hover{ box-shadow:var(--e2); transform:translateY(-3px); }
.prod h3{ font-size:1.2rem; font-weight:800; letter-spacing:-.02em; margin-top:8px; }
.prod p{ font-size:.94rem; color:var(--ink-2); }
.prod .tlink{ margin-top:auto; padding-top:8px; }
.prod .ico{ width:40px; height:40px; }
.prod--main{ padding:0; overflow:hidden; background:var(--graphite); color:#fff; border:0; }
.prod--main img{ aspect-ratio:16/9; object-fit:cover; width:100%; background:#fff; }
.prod--main .prod__txt{ padding:clamp(20px,2.2vw,28px); display:flex; flex-direction:column; gap:8px; flex:1; }
.prod--main p{ color:var(--on-dark-2); }
.prod--main .tlink{ color:var(--green-glow); }
.prod .k,.kbc .k,.fres__spec .k,.fres__shades .k{ font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--green-ink); }
.prod--main .k{ color:var(--green-glow); }
@media (max-width:1100px){ .prods{ grid-template-columns:repeat(2,minmax(0,1fr)); } .prod--main{ grid-column:1/-1; flex-direction:row; } .prod--main img{ width:50%; aspect-ratio:auto; } }
@media (max-width:760px){ .prods{ grid-template-columns:minmax(0,1fr); } .prod--main{ flex-direction:column; } .prod--main img{ width:100%; aspect-ratio:16/9; } }

.featbox{ margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line); }
.feats{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:var(--s3); }
.feats li{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:var(--r-md); background:var(--ivory); font-size:.88rem; font-weight:700; line-height:1.3; }
.ivory .feats li{ background:#fff; }
.feats .ico{ width:26px; height:26px; }
@media (max-width:1000px){ .feats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* transformation */
.tf{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px); counter-reset:tf; }
.tf__s{ position:relative; }
.tf__s figure{ border-radius:var(--r-md); overflow:hidden; aspect-ratio:16/10; background:#111; }
.tf__s img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.tf__s:hover img{ transform:scale(1.04); }
.tf__n{ display:inline-block; margin-top:16px; font-size:.78rem; font-weight:800; color:var(--green-glow); letter-spacing:.12em; }
.tf__s h3{ margin-top:4px; font-size:1.15rem; font-weight:800; letter-spacing:-.02em; color:#fff; }
.tf__s p{ margin-top:6px; font-size:.9rem; color:rgba(255,255,255,.7); }
.tf__s:not(:last-child)::after{ content:''; position:absolute; top:calc(31.25% - 1px); right:calc(-1 * clamp(12px,1.4vw,20px)); width:clamp(12px,1.4vw,20px); height:2px; background:var(--green-glow); opacity:.6; }
.et__stage{ margin-top:clamp(36px,5vw,64px); }
.et__stage .et__box{ aspect-ratio:21/9; }
@media (max-width:900px){ .tf{ grid-template-columns:repeat(2,minmax(0,1fr)); } .tf__s::after{ display:none; } .et__stage .et__box{ aspect-ratio:16/10; } }
@media (max-width:520px){ .tf{ grid-template-columns:minmax(0,1fr); } }

/* finder */
.finder-wrap{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:clamp(28px,4vw,72px); align-items:start; }
@media (max-width:1000px){ .finder-wrap{ grid-template-columns:minmax(0,1fr); } }
.finder{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--e2); padding:clamp(18px,2.6vw,34px); }
.finder__prog{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:24px; counter-reset:fp; }
.finder__prog li{ counter-increment:fp; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding-top:10px; border-top:3px solid var(--ivory-2); transition:all .3s; }
.finder__prog li::before{ content:counter(fp) '. '; }
.finder__prog li.is-done{ border-color:var(--green); color:var(--ink-2); }
.finder__prog li.is-on{ border-color:var(--green-ink); color:var(--ink); }
.finder__step{ border:0; margin:0; padding:0; min-width:0; }
.finder__step legend,.finder__step > h3{ margin-bottom:16px; font-size:1.3rem; font-weight:800; letter-spacing:-.02em; }
.finder__step legend:focus,.finder__step h3:focus{ outline:none; }
.finder__q{ margin:20px 0 10px; font-size:.8rem; font-weight:800; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; }
.fopts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.fopts--sm{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
.fo{ display:flex; align-items:center; gap:10px; min-height:56px; padding:10px 14px; border-radius:var(--r-md); border:1.5px solid var(--line); font-weight:750; font-size:.92rem; text-align:left; transition:border-color var(--t-micro), background var(--t-micro), transform var(--t-micro); }
.fo:hover{ border-color:var(--green); background:var(--green-soft); }
.fo[aria-pressed="true"]{ border-color:var(--green-ink); background:var(--green-soft); box-shadow:inset 0 0 0 1px var(--green-ink); }
.fo i{ width:34px; height:34px; border-radius:6px; flex:none; background-size:cover; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); }
@media (max-width:560px){ .fopts{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.finder__nav{ display:flex; gap:10px; margin-top:20px; }
.finder__reshead{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.finder__reshead .tones{ margin:0; }
.tone--all{ width:auto!important; padding:0 12px; border-radius:var(--r-pill)!important; font-size:.75rem; font-weight:800; background:var(--ivory)!important; }
.fres__spec{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.fres__spec > div{ padding:14px; border-radius:var(--r-md); background:var(--ivory); display:flex; flex-direction:column; gap:4px; }
.fres__spec b{ font-size:1.6rem; font-weight:800; letter-spacing:-.03em; }
.fres__spec small{ font-size:.78rem; color:var(--ink-3); font-weight:600; line-height:1.45; }
.fres__sizes{ display:flex; flex-wrap:wrap; gap:4px; margin:6px 0; }
.fres__sizes li{ font-size:.8rem; font-weight:750; padding:4px 8px; border-radius:6px; background:#fff; color:var(--ink-3); }
.fres__sizes li.is-fit{ color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--green); }
.fres__sizes li b{ margin-left:6px; font-size:.64rem; color:var(--green-ink); text-transform:uppercase; letter-spacing:.06em; }
.fres__shades{ margin-top:18px; }
.fres__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:10px; }
.fres__sw{ display:grid; gap:2px; font-size:.8rem; }
.fres__sw i{ aspect-ratio:1; border-radius:var(--r-sm); background-size:cover; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); margin-bottom:6px; }
.fres__sw b{ font-weight:800; }
.fres__sw span{ color:var(--ink-3); font-size:.72rem; line-height:1.3; }
.fres__add{ margin-top:6px; min-height:34px; border-radius:var(--r-pill); border:1.5px solid var(--line); font-size:.76rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; gap:4px; }
.fres__add svg{ width:12px; height:12px; }
.fres__add[aria-pressed="true"]{ background:var(--green-ink); border-color:var(--green-ink); color:#fff; }
.finder__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:22px 0 12px; }
.finder__restart{ font-size:.82rem; font-weight:700; color:var(--ink-3); text-decoration:underline; text-underline-offset:3px; min-height:40px; }
@media (max-width:760px){ .fres__spec{ grid-template-columns:minmax(0,1fr); } .fres__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* manufacturing rail */
.rail__track{ display:grid; grid-auto-flow:column; grid-auto-columns:clamp(250px,26vw,330px); gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:none; counter-reset:none; }
.rail__track::-webkit-scrollbar{ display:none; }
.mc{ scroll-snap-align:start; display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); }
.mc__media{ aspect-ratio:1; background:#0d1411; position:relative; overflow:hidden; }
.mc__media img,.mc__media video{ width:100%; height:100%; object-fit:cover; display:block; }
.mc__art{ position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(80% 80% at 30% 20%, rgba(0,155,77,.28), rgba(0,0,0,0) 70%), repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px); }
.mc__art span{ font-size:clamp(4rem,9vw,7rem); font-weight:800; letter-spacing:-.06em; color:rgba(255,255,255,.1); }
.mc__art--01{ background:radial-gradient(circle at 30% 30%, #E9E4D6 0 6px, transparent 7px) 0 0/28px 28px, radial-gradient(circle at 70% 60%, #D8D1BF 0 5px, transparent 6px) 0 0/34px 34px, #1a221e; }
.mc__art--02{ background:conic-gradient(from 20deg, #7a5a3a, #c9a57a, #e9e4d6, #4a4b4a, #7a2e24, #7a5a3a); filter:saturate(.8) brightness(.85); }
.mc__art--chips{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:18%; place-items:stretch; }
.mc__art--chips i{ border-radius:6px; background-size:cover; box-shadow:0 8px 16px -6px rgba(0,0,0,.6); }
.mc__txt{ padding:18px 20px 22px; }
.mc__n{ font-size:.78rem; font-weight:800; color:var(--green-glow); letter-spacing:.12em; }
.mc h3{ margin-top:4px; font-size:1.15rem; font-weight:800; letter-spacing:-.02em; color:#fff; }
.mc p{ margin-top:6px; font-size:.88rem; color:rgba(255,255,255,.68); }
.rail__ctrl{ display:flex; align-items:center; gap:10px; margin-top:22px; }
.rail__bar{ flex:1; height:2px; background:rgba(255,255,255,.14); overflow:hidden; border-radius:2px; }
.rail__bar i{ display:block; height:100%; background:var(--green-glow); transform-origin:left; transform:scaleX(.08); transition:transform .2s linear; }
.rail__btn{ width:48px; height:48px; border-radius:50%; border:1.5px solid rgba(255,255,255,.3); color:#fff; display:grid; place-items:center; transition:background var(--t-micro); }
.rail__btn svg{ width:16px; height:16px; }
.rail__btn:hover:not(:disabled){ background:#fff; color:var(--graphite); }
.rail__btn:disabled{ opacity:.3; cursor:default; }

/* trust */
.trust{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px); }
.trust--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.trust__c{ padding:clamp(18px,2vw,26px); border-radius:var(--r-lg); background:var(--ivory); display:flex; flex-direction:column; gap:8px; }
.trust__c h3{ font-size:1.05rem; font-weight:800; letter-spacing:-.02em; margin-top:6px; }
.trust__c p{ font-size:.9rem; color:var(--ink-2); }
.trust__c--big{ background:var(--forest); color:#fff; grid-row:span 2; justify-content:flex-end; }
.trust__c--big b{ font-size:clamp(3.4rem,6vw,5.6rem); font-weight:800; letter-spacing:-.06em; line-height:.9; }
.trust__c--big span{ font-size:.8rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--green-glow); }
.trust__c--big p{ color:var(--on-dark-2); }
@media (max-width:1000px){ .trust{ grid-template-columns:repeat(2,minmax(0,1fr)); } .trust__c--big{ grid-row:auto; grid-column:1/-1; } }
@media (max-width:520px){ .trust,.trust--2{ grid-template-columns:minmax(0,1fr); } }

/* applications */
.appg{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px); }
.appc{ position:relative; display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden; background:#fff; border:1px solid var(--line); transition:box-shadow var(--t-card), transform var(--t-card); }
.appc:hover{ box-shadow:var(--e2); transform:translateY(-3px); }
.appc img{ aspect-ratio:16/9; object-fit:cover; width:100%; transition:transform .8s var(--ease-out); }
.appc:hover img{ transform:scale(1.04); }
.appc > div{ padding:18px 20px 22px; }
.appc h3,.appc h2{ font-size:1.15rem; font-weight:800; letter-spacing:-.02em; }
.appc p{ margin-top:6px; font-size:.9rem; color:var(--ink-2); }
.appc__go{ position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:var(--e1); }
.appc__go .ic{ width:16px; height:16px; }
.appg--sm{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.appg--sm .appc > div{ padding:14px 16px; }
@media (max-width:1000px){ .appg{ grid-template-columns:repeat(2,minmax(0,1fr)); } .appg--sm{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .appg,.appg--sm{ grid-template-columns:minmax(0,1fr); } }
.who{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(10px,1.2vw,16px); }
.who__c{ display:flex; flex-direction:column; gap:8px; padding:20px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); transition:border-color var(--t-micro), transform var(--t-card); }
.who__c:hover{ border-color:var(--green); transform:translateY(-3px); }
.who__c h3{ font-size:1rem; font-weight:800; letter-spacing:-.02em; margin-top:4px; }
.who__c p{ font-size:.86rem; color:var(--ink-2); }
.who__c .tlink{ margin-top:auto; padding-top:6px; font-size:.86rem; }
@media (max-width:1100px){ .who{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .who{ grid-template-columns:minmax(0,1fr); } }
.mt5{ margin-top:var(--s6); }

/* factory */
.factory{ position:relative; min-height:clamp(520px,72vh,760px); display:flex; align-items:flex-end; color:#fff; overflow:hidden; isolation:isolate; }
.factory__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.factory::before{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(11,20,16,.86) 0%, rgba(11,20,16,.55) 45%, rgba(11,20,16,.05) 80%), linear-gradient(0deg, rgba(11,20,16,.6), rgba(11,20,16,0) 45%); }
.factory__in{ padding-block:clamp(56px,8vw,112px); }
.factory__txt{ max-width:620px; display:grid; gap:18px; justify-items:start; }
.factory .h2{ color:#fff; }
.factory .lede{ color:rgba(255,255,255,.82); }
.factory .eyebrow{ color:var(--green-glow); }
.factory .crumb,.factory .crumb a{ color:rgba(255,255,255,.72); }
.factory__tags{ display:flex; flex-wrap:wrap; gap:8px; }
.factory__tags li{ padding:8px 14px; border-radius:var(--r-pill); background:rgba(255,255,255,.12); backdrop-filter:blur(8px); font-size:.82rem; font-weight:750; }
.factory--hero{ margin-top:calc(-1 * var(--hdr-h)); padding-top:var(--hdr-h); min-height:clamp(560px,86vh,860px); }

/* knowledge cards */
.kbc{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(10px,1.2vw,16px); }
.kbc__c{ display:flex; flex-direction:column; gap:8px; padding:16px 16px 20px; border-radius:var(--r-lg); border:1px solid var(--line); background:#fff; transition:box-shadow var(--t-card), transform var(--t-card); }
.kbc__c:hover{ box-shadow:var(--e2); transform:translateY(-3px); }
.kbc__art{ display:grid; grid-template-columns:1fr 1fr; gap:4px; aspect-ratio:16/9; border-radius:var(--r-md); overflow:hidden; margin-bottom:8px; }
.kbc__art i{ background-size:cover; background-position:center; }
.kbc__c h3{ font-size:1.02rem; font-weight:800; letter-spacing:-.02em; line-height:1.25; }
.kbc__c .tlink{ margin-top:auto; padding-top:6px; font-size:.86rem; }
@media (max-width:1100px){ .kbc{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px){ .kbc{ grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:78%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; } .kbc__c{ scroll-snap-align:start; } }

/* finishes */
.fin{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.4vw,20px); }
.fin__c{ display:flex; align-items:center; gap:20px; padding:20px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); }
.fin__sw{ width:120px; aspect-ratio:1; border-radius:var(--r-md); flex:none; background-size:cover; position:relative; overflow:hidden; }
.fin__c--gloss .fin__sw::after{ content:''; position:absolute; inset:0; background:linear-gradient(125deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 60%); }
.fin__c--matt .fin__sw{ filter:saturate(.9) brightness(.97); }
.fin__c h3{ font-size:1.2rem; font-weight:800; }
.fin__c p{ margin-top:6px; font-size:.92rem; color:var(--ink-2); }
@media (max-width:700px){ .fin{ grid-template-columns:minmax(0,1fr); } .fin__sw{ width:84px; } }

/* page heroes with an image */
.phero--img .phero__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center; }
.phero__img{ border-radius:var(--r-lg); width:100%; object-fit:cover; box-shadow:var(--e2); }
@media (max-width:900px){ .phero--img .phero__grid{ grid-template-columns:minmax(0,1fr); } }
.aphero{ position:relative; margin-top:calc(-1 * var(--hdr-h)); min-height:clamp(520px,78vh,760px); display:flex; align-items:flex-end; color:#fff; isolation:isolate; overflow:hidden; }
.aphero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.aphero::before{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(11,12,14,.78), rgba(11,12,14,.35) 55%, rgba(11,12,14,.05)), linear-gradient(0deg, rgba(11,12,14,.55), transparent 50%); }
.aphero__in{ padding-block:calc(var(--hdr-h) + 40px) clamp(48px,7vw,96px); }
.aphero .h2{ color:#fff; max-width:18ch; margin-top:14px; }
.aphero .lede{ color:rgba(255,255,255,.84); margin-top:16px; }
.aphero .eyebrow{ color:var(--green-glow); }
.aphero .crumb,.aphero .crumb a{ color:rgba(255,255,255,.72); }
.shds{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.shd{ display:grid; gap:6px; font-size:.85rem; font-weight:800; }
.shd i{ aspect-ratio:1; border-radius:var(--r-md); background-size:cover; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); transition:transform var(--t-card); }
.shd:hover i{ transform:translateY(-3px); }

/* manufacturing + about */
.plant{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,4vw,72px); align-items:center; }
.plant__img{ border-radius:var(--r-lg); overflow:hidden; }
.plant__img img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
@media (max-width:900px){ .plant{ grid-template-columns:minmax(0,1fr); } }
.about{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(24px,4vw,72px); align-items:start; }
.about__txt{ display:grid; gap:18px; max-width:66ch; }
.about__txt p:not(.lede){ color:var(--ink-2); font-size:1.02rem; line-height:1.75; }
.about__facts{ display:grid; gap:12px; }
@media (max-width:900px){ .about{ grid-template-columns:minmax(0,1fr); } }

/* small bits */
.pv__quote{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; font-size:.84rem; font-weight:750; color:var(--green-glow); }
.light .pv__quote{ color:var(--green-ink); }
.pv__quote .ic{ width:14px; height:14px; }
.wa-help a{ display:inline-flex; align-items:center; gap:8px; min-height:40px; font-size:.88rem; font-weight:750; color:var(--green-ink); }
.dark .wa-help a{ color:var(--green-glow); }
.wa-help .ic{ width:14px; height:14px; }
.ft__web{ margin-top:10px; } .ft__web a{ font-weight:750; color:var(--green-glow); }
.et .shead .lede{ color:rgba(255,255,255,.76); }
.et .h2{ color:#fff; }

/* header over the film */
.hdr.hdr--film{ background:rgba(11,12,14,.42); border-color:transparent; box-shadow:none; }
.hdr.hdr--film .nav a{ color:rgba(255,255,255,.82); }
.hdr.hdr--film .nav a:hover{ background:rgba(255,255,255,.1); color:#fff; }
.hdr.hdr--film .brand img{ filter:brightness(0) invert(1); }
.hdr.hdr--film .traybtn{ border-color:rgba(255,255,255,.4); color:#fff; }
.hdr.hdr--film .burger{ border-color:rgba(255,255,255,.35); }
.hdr.hdr--film .burger span,.hdr.hdr--film .burger span::before,.hdr.hdr--film .burger span::after{ background:#fff; }

/* ================================================================
   25. v13 — stats band (every page), leadership (about), phone
   ================================================================ */
.stats{ position:relative; overflow:hidden; color:#fff; padding:clamp(72px,8vw,120px) 0 clamp(64px,7vw,104px);
  background:
    radial-gradient(60% 80% at 85% 0%, rgba(76,201,138,.22), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(0,155,77,.18), transparent 60%),
    linear-gradient(180deg, var(--forest) 0%, var(--forest-2) 100%); }
.stats::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 120px); }
.stats__strips{ position:absolute; left:0; right:0; top:0; height:8px; display:flex; }
.stats__strips i{ flex:1; background-size:cover; background-position:center; background-color:var(--green); }
.stats .wrap{ position:relative; z-index:1; }
.stats__head{ display:grid; grid-template-columns:1.2fr 1fr; gap:var(--s3) var(--s6); align-items:end; }
.stats__head .eyebrow{ color:var(--green-glow); grid-column:1/-1; }
.stats__head .h2{ color:#fff; max-width:none; }
.stats__em{ color:var(--green-glow); white-space:nowrap; }
.stats__head p{ color:var(--on-dark-2); font-size:1.05rem; line-height:1.6; max-width:42ch; justify-self:end; }
.stats__grid{ list-style:none; margin:clamp(40px,5vw,72px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-dark); }
.stat{ position:relative; padding:var(--s4) var(--s3) var(--s3) 0; }
.stat + .stat{ padding-left:var(--s3); border-left:1px solid var(--line-dark); }
.stat::before{ content:''; position:absolute; top:-1px; left:0; width:0; height:2px; background:var(--green-glow); transition:width 1.2s var(--ease); }
.stat + .stat::before{ left:var(--s3); }
.stats.is-in .stat::before{ width:48px; }
.stat__ic{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.07); border:1px solid var(--line-dark); color:var(--green-glow); }
.stat__ic svg{ width:20px; height:20px; }
.stat__n{ margin-top:var(--s3); font-size:clamp(2.6rem,5.2vw,4.6rem); font-weight:800; letter-spacing:-.045em; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums; }
.stat__n .num{ display:inline-block; text-align:left; }
.stat__u{ color:var(--green-glow); font-size:.6em; letter-spacing:-.02em; margin-left:2px; }
.stat__l{ margin-top:var(--s2); font-size:1.02rem; font-weight:750; color:#fff; }
.stat__d{ margin-top:6px; font-size:.9rem; line-height:1.5; color:var(--on-dark-3); max-width:26ch; }
.stats__cta{ margin-top:clamp(36px,4vw,56px); display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); }
.stats__tel{ display:inline-flex; align-items:center; gap:12px; color:#fff; text-decoration:none; min-height:48px; }
.stats__tel .ic{ width:44px; height:44px; padding:12px; border-radius:50%; border:1px solid var(--line-dark); color:var(--green-glow); transition:background .25s, border-color .25s; }
.stats__tel span{ display:grid; font-weight:800; font-size:1.1rem; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.stats__tel small{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-3); }
.stats__tel:hover .ic{ background:rgba(76,201,138,.14); border-color:var(--green-glow); }
.stats__tel:focus-visible{ outline:2px solid var(--green-glow); outline-offset:4px; border-radius:12px; }
@media (max-width:980px){
  .stats__head{ grid-template-columns:1fr; } .stats__head p{ justify-self:start; }
  .stats__grid{ grid-template-columns:1fr 1fr; }
  .stats__grid .stat:nth-child(odd){ border-left:0; padding-left:0; } .stats__grid .stat:nth-child(odd)::before{ left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line-dark); }
}
@media (max-width:420px){ .stat__n{ font-size:2.3rem; } .stat{ padding-right:var(--s2); } .stat + .stat{ padding-left:var(--s2); } .stat + .stat::before{ left:var(--s2); } }
@media (prefers-reduced-motion: reduce){ .stat::before{ transition:none; } }

.ft__tel{ margin-top:6px; } .ft__tel a{ font-weight:750; color:#fff; }

/* leadership */
.lead{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(32px,5vw,80px); align-items:center; }
.lead__fig{ margin:0; position:relative; }
.lead__fig img{ width:100%; height:auto; border-radius:var(--r-lg); box-shadow:0 30px 60px -30px rgba(18,32,26,.45); display:block; }
.lead__fig figcaption{ margin-top:var(--s2); font-size:.86rem; color:var(--ink-3); }
.lead__tag{ position:absolute; left:var(--s3); bottom:calc(var(--s3) + 2.4em); background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-radius:var(--r-md); padding:12px 16px; box-shadow:var(--e1); }
.lead__tag b{ display:block; font-size:1rem; } .lead__tag span{ font-size:.8rem; color:var(--ink-3); }
.lead__txt .h2{ margin-top:var(--s2); }
.lead__txt p{ margin-top:var(--s2); color:var(--ink-2); line-height:1.7; }
.people{ margin-top:var(--s4); display:grid; gap:var(--s2); }
.person{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; padding:var(--s3); border:1px solid var(--line); border-radius:var(--r-md); background:#fff; }
.person__av{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(135deg, var(--green), var(--forest)); letter-spacing:-.02em; }
.person h3{ font-size:1.05rem; font-weight:800; } .person .role{ display:block; margin-top:2px; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-ink); }
.person p{ margin-top:8px; font-size:.95rem; line-height:1.6; color:var(--ink-2); }
.md{ display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,56px); align-items:center; padding:clamp(28px,4vw,56px); border-radius:var(--r-lg); background:var(--forest); color:#fff; position:relative; overflow:hidden; }
.md::after{ content:''; position:absolute; right:-80px; top:-80px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(76,201,138,.28), transparent 70%); }
.md__av{ width:clamp(96px,12vw,140px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; font-size:clamp(2rem,4vw,3rem); font-weight:800; background:linear-gradient(135deg, var(--green-glow), var(--green)); color:var(--forest); }
.md .eyebrow{ color:var(--green-glow); }
.md h3{ margin-top:10px; font-size:clamp(1.5rem,2.6vw,2.2rem); font-weight:800; letter-spacing:-.03em; }
.md p{ margin-top:12px; color:var(--on-dark-2); line-height:1.7; max-width:62ch; position:relative; z-index:1; }
@media (max-width:900px){ .lead{ grid-template-columns:1fr; } .md{ grid-template-columns:1fr; } .lead__tag{ display:none; } }

/* v14: icons inside buttons never grow beyond their slot (fixes the oversized tick in "In your sample list") */
.btn svg{ width:16px; height:16px; flex:none; }
.pv__acts .btn{ white-space:nowrap; }

/* v14: shade tiles carry the shade-card name under the image */
.grid{ row-gap:12px; }
.sw{ aspect-ratio:auto; overflow:visible; background:none!important; display:flex; flex-direction:column; gap:5px; text-align:left; border-radius:0; }
.sw__im{ position:relative; display:block; aspect-ratio:1; border-radius:var(--r-sm); overflow:hidden; background:#2a3a33; transition:box-shadow var(--t-micro) var(--ease); }
.light .sw__im{ background:var(--ivory-2); }
.sw:hover{ transform:translateY(-2px); box-shadow:none; }
.sw:hover .sw__im{ box-shadow:0 10px 20px -10px rgba(0,0,0,.5); }
.sw[aria-pressed="true"]{ box-shadow:none; }
.sw[aria-pressed="true"] .sw__im{ box-shadow:0 0 0 2px var(--forest), 0 0 0 4px var(--green-glow); }
.light .sw[aria-pressed="true"]{ box-shadow:none; }
.light .sw[aria-pressed="true"] .sw__im{ box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--green); }
.sw__nm{ display:block; font-size:.7rem; font-weight:650; line-height:1.25; color:var(--on-dark-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.light .sw__nm{ color:var(--ink-3); }
.sw.is-hidden{ display:none; }
@media (max-width:560px){ .sw__nm{ font-size:.62rem; } }
.famgrid--list{ grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); }
/* tolerances, warranty, storage (brochure page 05) */
.tol{ grid-column:1/-1; margin-top:var(--s3); display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); padding:clamp(18px,2vw,28px); border-radius:var(--r-md); background:var(--ivory); border:1px solid var(--line-2); }
.tol h3{ font-size:1rem; font-weight:800; margin-bottom:10px; }
.tol table{ width:100%; border-collapse:collapse; margin-bottom:14px; font-size:.9rem; }
.tol caption{ text-align:left; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--green-ink); padding-bottom:6px; }
.tol th{ text-align:left; font-size:.78rem; color:var(--ink-3); font-weight:700; padding:6px 10px; background:#fff; border-bottom:1px solid var(--line); }
.tol td{ padding:7px 10px; border-bottom:1px solid var(--line-2); background:#fff; font-weight:700; }
.tol__n p{ font-size:.92rem; line-height:1.65; color:var(--ink-2); margin-bottom:14px; }
@media (max-width:760px){ .tol{ grid-template-columns:1fr; } }
/* 100% matching gallery (brochure page 06) */
.ematch{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,22px); }
.ematch__t{ margin:0; position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 20px 40px -28px rgba(18,32,26,.5); }
.ematch__t img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transition:transform .8s var(--ease-out); }
.ematch__t:hover img{ transform:scale(1.04); }
.ematch__t figcaption{ position:absolute; left:12px; bottom:12px; padding:5px 11px; border-radius:var(--r-pill); background:rgba(255,255,255,.92); font-size:.76rem; font-weight:750; color:var(--ink); }
@media (max-width:760px){ .ematch{ grid-template-columns:1fr 1fr; } }
.pv__quote{ white-space:nowrap; }