/* ════════════════════════════════════════════════════════════
   01 — DESIGN TOKENS  ·  Natural / Organic / Clean BtoB
   Green ramp is sampled from the Naturalink logo:
   leaf highlight #98D91A · brand green #1AA423 · deep forest #02372B
   ════════════════════════════════════════════════════════════ */
:root{
  /* organic green scale */
  --green-050:#f2f9ec;
  --green-100:#e3f2d6;
  --green-200:#c4e4ab;
  --green-300:#98d91a;
  --green-400:#5fbb2a;
  --green-500:#1aa423;
  --green-600:#158a2a;
  --green-700:#0f6b2c;
  --green-800:#0a4f2c;
  --green-900:#02372b;

  /* restrained gold / earth accent — keeps a sense of quality */
  --gold-100:#f6f0e2;
  --gold-200:#eadfc4;
  --gold-300:#d8c08a;
  --gold-400:#b99a55;
  --gold-500:#96793c;
  --earth:#8a7a5c;

  /* clean neutrals */
  --paper:#ffffff;
  --ivory:#fafaf7;
  --ivory-2:#f5f5f0;
  --sand:#efede4;
  --ink:#1b2620;
  --ink-2:#2b3a32;
  --muted:#5a6a60;
  --muted-2:#8a968e;
  --line:rgba(2,55,43,.11);
  --line-2:rgba(2,55,43,.06);
  --line-green:rgba(26,164,35,.24);

  /* per-channel brand colour, overridden inline on contact cards */
  --brand:var(--green-500);

  /* spacing scale */
  --s-2:0.375rem;
  --s-1:0.625rem;
  --s0:1rem;
  --s1:1.5rem;
  --s2:2.5rem;
  --s3:4rem;
  --s4:6.5rem;
  --gap-section:clamp(3.75rem,8.4vw,8rem);
  --gap-card:clamp(1.5rem,2.6vw,2.25rem);

  /* type */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;

  /* geometry */
  --wrap:1240px;
  --r-s:10px;
  --r-m:16px;
  --r-l:22px;
  --r-xl:28px;

  /* motion */
  --ease:cubic-bezier(.22,.72,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* soft, clean elevation — sm / md / lg */
  --sh-sm:0 1px 2px rgba(2,55,43,.05),0 4px 12px rgba(2,55,43,.05);
  --sh-md:0 2px 6px rgba(2,55,43,.05),0 14px 32px rgba(2,55,43,.08);
  --sh-lg:0 4px 12px rgba(2,55,43,.06),0 30px 66px rgba(2,55,43,.12);
  --sh-green:0 14px 34px -14px rgba(21,138,42,.5);
}

/* ════════════════════════════════════════════════════════════
   02 — RESET & BASE
   ════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  letter-spacing:-.004em;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-bottom:86px;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
::selection{background:var(--green-200);color:var(--green-900)}
:focus-visible{outline:2px solid var(--green-500);outline-offset:3px;border-radius:4px}
section[id]{scroll-margin-top:96px}

/* ════════════════════════════════════════════════════════════
   03 — LAYOUT & CANVASES
   ════════════════════════════════════════════════════════════ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,44px)}
.section{position:relative;padding-block:var(--gap-section)}
.section--half{padding-block:clamp(3rem,6vw,5.5rem)}
.section__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.section>.wrap{position:relative;z-index:1}

/* soft organic light pools */
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.blob--leaf{background:radial-gradient(circle,rgba(152,217,26,.30),transparent 68%)}
.blob--green{background:radial-gradient(circle,rgba(26,164,35,.20),transparent 68%)}
.blob--sand{background:radial-gradient(circle,rgba(185,154,85,.18),transparent 68%)}

.canvas-ivory{
  background:
    radial-gradient(90% 60% at 50% 0%,rgba(152,217,26,.10) 0%,transparent 62%),
    linear-gradient(180deg,var(--ivory-2) 0%,var(--ivory) 100%);
}
.canvas-forest{
  color:#fff;
  background:
    radial-gradient(112% 74% at 50% -10%,rgba(152,217,26,.20) 0%,rgba(26,164,35,.08) 40%,transparent 68%),
    radial-gradient(76% 58% at 94% 106%,rgba(26,164,35,.12) 0%,transparent 62%),
    linear-gradient(180deg,#053b2e 0%,var(--green-900) 100%);
}
.canvas-forest .lead{color:rgba(255,255,255,.68)}

.hairline{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* ════════════════════════════════════════════════════════════
   04 — TYPOGRAPHY
   ════════════════════════════════════════════════════════════ */
.display{font-family:var(--sans);font-weight:600;line-height:1.12;letter-spacing:-.032em;text-wrap:balance}
.h1{font-size:clamp(2.3rem,5.6vw,3.9rem)}
.h2{font-size:clamp(1.85rem,4vw,2.85rem);line-height:1.15}
.h3{font-size:clamp(1.25rem,2.2vw,1.55rem);line-height:1.25;letter-spacing:-.018em}
.display em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.012em;color:var(--green-600)}
.canvas-forest .display em{color:var(--green-300)}
.lead{font-size:clamp(1rem,1.35vw,1.09rem);line-height:1.82;color:var(--muted);max-width:64ch;text-wrap:pretty}
.center{text-align:center}
.center .lead{margin-inline:auto}
.stack>*+*{margin-top:var(--s1)}

.kicker{
  display:inline-flex;align-items:center;gap:12px;
  font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--green-600);margin-bottom:var(--s1);
}
.canvas-forest .kicker{color:var(--green-300)}
.kicker::before{content:"";width:28px;height:1px;background:currentColor;opacity:.55}
.kicker--center::after{content:"";width:28px;height:1px;background:currentColor;opacity:.55}
.kicker b{font-weight:700;opacity:.5}

/* ════════════════════════════════════════════════════════════
   05 — BUTTONS
   ════════════════════════════════════════════════════════════ */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:999px;
  font-size:13.5px;font-weight:600;letter-spacing:.02em;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),color .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease);
}
.btn svg{width:18px;height:18px;flex:none}
.btn::after{
  content:"";position:absolute;top:0;left:-140%;width:58%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-22deg);transition:left .8s var(--ease-out);
}
.btn:hover::after{left:150%}

.btn--green{background:linear-gradient(135deg,var(--green-500) 0%,var(--green-600) 55%,var(--green-700) 100%);color:#fff;box-shadow:var(--sh-green)}
.btn--green:hover{transform:translateY(-3px);box-shadow:0 22px 46px -16px rgba(21,138,42,.62)}
.btn--forest{background:var(--green-900);color:#fff;box-shadow:var(--sh-md)}
.btn--forest:hover{transform:translateY(-3px);background:var(--green-800);box-shadow:var(--sh-lg)}
.btn--outline{border:1px solid var(--line);color:var(--ink);background:rgba(255,255,255,.72)}
.btn--outline:hover{border-color:var(--green-400);color:var(--green-700);background:#fff;transform:translateY(-3px);box-shadow:var(--sh-md)}
.btn--ghost{border:1px solid rgba(255,255,255,.26);color:#fff;backdrop-filter:blur(6px)}
.btn--ghost:hover{border-color:var(--green-300);color:var(--green-300);transform:translateY(-3px)}
.btn--block{width:100%}
@media(max-width:600px){
  .btn{padding:15px 20px;font-size:12.6px;white-space:nowrap}
  .btn svg{width:17px;height:17px}
}

/* ════════════════════════════════════════════════════════════
   06 — HEADER
   ════════════════════════════════════════════════════════════ */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:101;
  background:linear-gradient(90deg,var(--green-600),var(--green-300))}
.site-header{position:fixed;inset:0 0 auto 0;z-index:90;transition:background .45s var(--ease),box-shadow .45s var(--ease)}
.site-header::before{content:"";position:absolute;inset:0;border-bottom:1px solid transparent;transition:border-color .45s var(--ease)}
.site-header.is-stuck,.site-header.is-open{
  background:rgba(255,255,255,.86);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
  box-shadow:0 1px 30px rgba(2,55,43,.07);
}
.site-header.is-stuck::before,.site-header.is-open::before{border-bottom-color:var(--line-2)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px;transition:height .45s var(--ease)}
@media(min-width:1024px){.header-inner{height:94px}.is-stuck .header-inner{height:78px}}

/* brand lockup — the official logo, cropped to its leaf mark, plus a set wordmark */
.brand{display:flex;align-items:center;gap:11px;color:var(--green-900)}
.brand__mark{position:relative;flex:none;width:60px;height:38px;overflow:hidden}
.brand__mark img{position:absolute;top:0;left:-6.4%;width:109%;max-width:none;height:auto;
  transition:transform .7s var(--ease-out)}
.brand:hover .brand__mark img{transform:scale(1.05)}
.brand__name{font-family:var(--sans);font-size:17px;line-height:1;letter-spacing:.13em;font-weight:700}
.brand__sub{display:block;font-size:7.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--green-600);margin-top:6px}
@media(max-width:479px){.brand__name{font-size:15px}.brand__mark{width:52px;height:33px}}

.nav{display:none}
@media(min-width:1024px){
  .nav{display:flex;align-items:center;gap:clamp(16px,1.7vw,26px)}
  .nav a{position:relative;font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--muted);padding-block:8px;transition:color .35s var(--ease)}
  .nav a::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:1.5px;background:var(--green-500);border-radius:2px;transition:width .45s var(--ease-out)}
  .nav a:hover{color:var(--green-700)}
  /* the contact link is a destination, not a section — mark it as one */
  .nav__contact{padding:8px 15px!important;border-radius:999px;
    border:1px solid var(--line-green);background:rgba(152,217,26,.10);color:var(--green-700)!important}
  .nav__contact::after{display:none}
  .nav__contact:hover{border-color:var(--green-400);background:rgba(152,217,26,.2)}
  .nav a:hover::after{width:100%}
}
.header-cta{display:none}
@media(min-width:1024px){.header-cta{display:inline-flex;padding:12px 24px;font-size:12.5px}}

.burger{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;border-radius:50%}
@media(min-width:1024px){.burger{display:none}}
.burger span{display:block;width:20px;height:1.8px;background:var(--green-900);border-radius:2px;transition:transform .45s var(--ease-out),opacity .3s}
.is-open .burger span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.is-open .burger span:nth-child(2){opacity:0}
.is-open .burger span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:74px 0 auto 0;z-index:89;
  background:rgba(255,255,255,.94);backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);
  border-bottom:1px solid var(--line);box-shadow:0 26px 54px -28px rgba(2,55,43,.35);
  transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease-out),visibility .4s;
}
.mobile-nav.is-open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
.mobile-nav ul{padding:var(--s-1) clamp(20px,5vw,44px) var(--s2)}
.mobile-nav li+li{border-top:1px solid var(--line-2)}
.mobile-nav a{display:flex;align-items:center;justify-content:space-between;padding:16px 2px;font-size:15.5px;font-weight:500;transition:padding-left .35s var(--ease),color .35s}
.mobile-nav a:hover{padding-left:9px;color:var(--green-700)}
.mobile-nav a span{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--green-400)}

/* ════════════════════════════════════════════════════════════
   07 — HERO
   ════════════════════════════════════════════════════════════ */
.hero{position:relative;overflow:hidden;padding:calc(74px + var(--s2)) 0 var(--s2);
  background:
    radial-gradient(76% 56% at 88% 6%,rgba(152,217,26,.15) 0%,transparent 62%),
    radial-gradient(56% 46% at 76% 48%,rgba(211,186,146,.15) 0%,transparent 68%),
    radial-gradient(70% 50% at 2% 86%,rgba(26,164,35,.09) 0%,transparent 60%),
    linear-gradient(180deg,#ffffff 0%,#fbfaf6 58%,var(--ivory-2) 100%)}
@media(min-width:1024px){.hero{padding:calc(94px + var(--s3)) 0 var(--s3)}}
.hero__bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero__leaf{position:absolute;width:min(120vw,900px);aspect-ratio:1;right:-24%;top:-34%;
  background:radial-gradient(circle at 50% 50%,rgba(152,217,26,.24) 0%,rgba(152,217,26,.06) 38%,transparent 66%);
  animation:drift 24s ease-in-out infinite alternate}
.hero__leaf--2{left:-36%;right:auto;top:auto;bottom:-40%;width:min(100vw,760px);
  background:radial-gradient(circle at 50% 50%,rgba(26,164,35,.16) 0%,transparent 64%);animation-duration:30s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-4%,3%,0) scale(1.08)}}
.hero__grid{position:absolute;inset:0;opacity:.7;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 24%,#000 18%,transparent 76%);
  mask-image:radial-gradient(120% 90% at 50% 24%,#000 18%,transparent 76%)}
.hero__inner{position:relative;z-index:2;display:grid;gap:var(--s2)}
@media(min-width:1024px){.hero__inner{grid-template-columns:1fr 1.06fr;align-items:center;gap:var(--s3)}}
@media(min-width:1280px){.hero__inner{gap:calc(var(--s3) + var(--s1))}}
.hero h1{margin-bottom:var(--s1)}
.hero__lead{max-width:50ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s2)}
/* single column: lift the range shot up under the headline so the breadth of
   formats is visible without scrolling past the whole intro */
@media(max-width:1023px){
  .hero__inner{gap:0}
  .hero__inner > div:first-child{display:contents}
  .hero__pills{order:1}
  .hero h1{order:2;margin-bottom:0}
  .hero__visual{order:3;margin:var(--s1) 0 var(--s2)}
  .hero__lead{order:4}
  .hero__actions{order:5}
}
.hero__actions .btn{flex:1 1 auto;min-width:min(100%,236px)}
@media(min-width:560px){.hero__actions .btn{flex:0 0 auto}}
.hero__pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s1)}
.pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;
  border:1px solid var(--line-green);background:rgba(152,217,26,.10);
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-700);
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease-out);
}
.pill:hover{border-color:var(--green-400);background:rgba(152,217,26,.18);transform:translateY(-2px)}
.pill--gold{border-color:rgba(185,154,85,.34);background:rgba(185,154,85,.09);color:var(--gold-500)}
.pill--gold:hover{border-color:var(--gold-400);background:rgba(185,154,85,.16)}
.pill svg{width:13px;height:13px}

/* hero showcase — one frame carrying the whole product range */
.hero__visual{position:relative}
/* warm daylight halo: lets the shot sit in light rather than on a hard edge */
.hero__visual::before{
  content:"";position:absolute;z-index:0;inset:-14% -9% -16%;pointer-events:none;
  background:
    radial-gradient(56% 52% at 52% 46%,rgba(255,255,255,.94) 0%,rgba(255,255,255,0) 72%),
    radial-gradient(62% 56% at 26% 82%,rgba(152,217,26,.15) 0%,transparent 72%),
    radial-gradient(52% 48% at 84% 14%,rgba(185,154,85,.13) 0%,transparent 70%);
  filter:blur(8px);
}
.showcase{
  position:relative;z-index:1;margin:0;overflow:hidden;border-radius:var(--r-l);
  background:var(--paper);
  border:1px solid var(--line-2);
  box-shadow:var(--sh-lg);
  transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out);
}
/* hairline of white inside the frame — stops the photo looking pasted on */
.showcase::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.62);
  background:linear-gradient(192deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 36%);
}
.showcase img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center;
  transition:transform 1.4s var(--ease-out)}
.showcase:hover{transform:translateY(-5px);
  box-shadow:0 6px 18px rgba(2,55,43,.07),0 40px 84px rgba(2,55,43,.14)}
.showcase:hover img{transform:scale(1.035)}
.showcase__badge{
  position:absolute;z-index:2;left:14px;bottom:14px;
  display:flex;align-items:center;gap:9px;padding:7px 13px 7px 11px;border-radius:999px;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 2px 8px rgba(2,55,43,.07),0 12px 30px rgba(2,55,43,.10);
}
.showcase__badge b{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1;color:var(--green-600)}
.showcase__badge span{font-size:8px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;line-height:1.5;color:var(--muted)}
@media(min-width:480px){.showcase__badge{left:16px;bottom:16px;gap:11px;padding:9px 16px 9px 14px}
  .showcase__badge b{font-size:26px}.showcase__badge span{font-size:9px;letter-spacing:.15em}}
@media(min-width:640px){.showcase__badge{left:20px;bottom:20px;padding:10px 18px 10px 16px}
  .showcase__badge b{font-size:30px}.showcase__badge span{font-size:9.5px}}
.gallery__note{margin-top:16px;font-size:11.5px;line-height:1.75;letter-spacing:.02em;color:var(--muted-2);text-align:center}
.gallery__note b{display:inline-block;margin-bottom:2px;color:var(--green-700);font-weight:700;letter-spacing:.03em}

.hero__cue{display:none}
@media(min-width:1024px){
  .hero__cue{display:flex;align-items:center;gap:12px;position:absolute;left:clamp(20px,5vw,44px);bottom:22px;z-index:3;
    font-size:9.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--muted-2)}
  .hero__cue i{display:block;width:1px;height:42px;background:linear-gradient(rgba(26,164,35,.05),var(--green-500));animation:cue 2.6s var(--ease) infinite}
}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* KPI row */
.stats{position:relative;z-index:2;margin-top:var(--s3);padding-top:var(--s2);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2) var(--s1)}
@media(min-width:820px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat__num{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,4.6vw,3rem);line-height:1;color:var(--green-600)}
.stat__num small{font-size:.4em;letter-spacing:.02em;margin-left:3px;color:var(--green-500)}
.stat__label{margin-top:10px;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);line-height:1.75}

/* ════════════════════════════════════════════════════════════
   08 — MARQUEE
   ════════════════════════════════════════════════════════════ */
.strip{position:relative;background:var(--green-900);padding:18px 0;overflow:hidden}
.strip::before,.strip::after{content:"";position:absolute;top:0;bottom:0;width:14vw;z-index:2;pointer-events:none}
.strip::before{left:0;background:linear-gradient(90deg,var(--green-900),transparent)}
.strip::after{right:0;background:linear-gradient(270deg,var(--green-900),transparent)}
.strip__row{display:flex;align-items:center;gap:48px;white-space:nowrap;animation:slide 42s linear infinite;width:max-content}
.strip__row span{display:inline-flex;align-items:center;gap:13px;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.strip__row span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green-300);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ════════════════════════════════════════════════════════════
   09 — GRIDS & CARDS
   ════════════════════════════════════════════════════════════ */
.grid{display:grid;gap:var(--s0)}
@media(min-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}.grid{gap:var(--s1)}}
@media(min-width:980px){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}}

.card{
  position:relative;overflow:hidden;border-radius:var(--r-l);
  padding:var(--gap-card);
  background:#fff;
  border:1px solid var(--line-2);
  box-shadow:var(--sh-sm);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s var(--ease);
}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--green-300),var(--green-500));
  opacity:0;transition:opacity .5s var(--ease)}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--line-green)}
.card:hover::before{opacity:1}
.card__icon{width:42px;height:42px;margin-bottom:var(--s1);color:var(--green-500);transition:transform .6s var(--ease-out)}
.card:hover .card__icon{transform:translateY(-3px) scale(1.05)}
.card h3{font-family:var(--sans);font-size:1.18rem;font-weight:700;line-height:1.32;letter-spacing:-.018em;margin-bottom:var(--s-1)}
.card p{font-size:14.5px;line-height:1.8;color:var(--muted);text-wrap:pretty}
.card__index{position:absolute;top:var(--s1);right:var(--s1);font-family:var(--serif);font-size:2.6rem;line-height:1;color:rgba(2,55,43,.06);pointer-events:none;transition:color .5s}
.card:hover .card__index{color:rgba(185,154,85,.30)}

/* ════════════════════════════════════════════════════════════
   10 — VIDEO / FACTORY TOUR
   ════════════════════════════════════════════════════════════ */
.video-card{margin:var(--s3) auto 0;max-width:940px}
.video-frame{
  position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(160deg,#ffffff 0%,var(--ivory-2) 60%,var(--sand) 100%);
  border:1px solid var(--line-2);
  box-shadow:var(--sh-lg);
}
/* the real embed, once the client supplies it */
.video-media{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;display:block}
.video-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;padding:var(--s1);
}
.video-placeholder::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(60% 60% at 50% 42%,rgba(152,217,26,.20),transparent 70%),
    repeating-linear-gradient(135deg,rgba(2,55,43,.028) 0 1px,transparent 1px 13px);
}
.video-play{
  position:relative;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:#fff;border:1px solid var(--line-green);
  box-shadow:0 14px 34px -12px rgba(21,138,42,.4);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out);
}
.video-frame:hover .video-play{transform:scale(1.06);box-shadow:0 20px 44px -12px rgba(21,138,42,.5)}
.video-play::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid var(--line-green);opacity:.6;animation:pulse 3s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.65}70%{transform:scale(1.14);opacity:0}100%{opacity:0}}
.video-play svg{width:26px;height:26px;color:var(--green-600);margin-left:4px}
.video-placeholder b{position:relative;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.video-placeholder p{position:relative;font-size:13px;line-height:1.75;color:var(--muted);max-width:44ch}
.video-badge{position:relative;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  border:1px dashed var(--line-green);background:rgba(255,255,255,.7);
  font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--green-600)}
/* the frame stays a true 16:9 for the real embed, so the placeholder
   content has to scale down inside it on narrow screens */
@media(max-width:640px){
  .video-placeholder{gap:10px;padding:12px}
  .video-play{width:54px;height:54px}
  .video-play::after{inset:-10px}
  .video-play svg{width:19px;height:19px;margin-left:3px}
  .video-placeholder b{font-size:13px;line-height:1.35}
  .video-placeholder p{display:none}
  .video-badge{font-size:8.5px;letter-spacing:.16em;padding:5px 11px}
}
@media(max-width:400px){
  .video-play{width:46px;height:46px}
  .video-play svg{width:17px;height:17px}
  .video-placeholder b{font-size:12px}
}
.video-card figcaption{margin-top:var(--s1);display:grid;gap:6px;text-align:center}
.video-card figcaption b{font-size:14.5px;font-weight:700;color:var(--ink)}
.video-card figcaption p{font-size:13.5px;line-height:1.8;color:var(--muted);max-width:62ch;margin-inline:auto}

/* ════════════════════════════════════════════════════════════
   10b — PRODUCTION PROCESS SLIDESHOW  (6 steps, autoplay + tabs)
   ════════════════════════════════════════════════════════════ */
.tour{margin:var(--s3) auto 0;max-width:1080px}

/* progress step bar */
.tour__steps{--p:0;position:relative;display:grid;grid-template-columns:repeat(6,1fr);list-style:none;margin:0 0 var(--s1)}
.tour__steps::before,.tour__steps::after{content:"";position:absolute;top:21px;left:calc(100% / 12);height:2px;border-radius:2px;pointer-events:none}
.tour__steps::before{right:calc(100% / 12);background:var(--line)}
.tour__steps::after{width:calc((100% - 100% / 6) * var(--p));background:linear-gradient(90deg,var(--green-300),var(--green-500));
  transition:width .7s var(--ease-out)}
.tour__steps li{position:relative;z-index:1;display:flex;justify-content:center}
.tour__tab{display:flex;flex-direction:column;align-items:center;gap:9px;padding:0 4px;min-width:44px;
  color:var(--muted-2);transition:color .4s var(--ease)}
.tour__dot{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  font-size:12.5px;font-weight:700;letter-spacing:.04em;
  background:#fff;border:1px solid var(--line);color:var(--muted);
  box-shadow:0 1px 2px rgba(2,55,43,.04);
  transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease),transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.tour__label{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.35;text-align:center}
.tour__tab:hover .tour__dot{border-color:var(--green-400);color:var(--green-700);transform:translateY(-2px)}
.tour__tab:hover{color:var(--green-700)}
.tour__tab.is-done .tour__dot{border-color:var(--line-green);background:var(--green-050);color:var(--green-700)}
.tour__tab.is-active{color:var(--green-700)}
.tour__tab.is-active .tour__dot{background:var(--green-600);border-color:var(--green-600);color:#fff;
  box-shadow:0 0 0 5px rgba(152,217,26,.22),0 10px 22px -10px rgba(21,138,42,.6);transform:scale(1.06)}
@media(max-width:639px){
  .tour__steps::before,.tour__steps::after{top:17px}
  .tour__dot{width:36px;height:36px;font-size:11px}
  .tour__label{display:none}
  .tour__tab{min-width:44px;min-height:44px}
}

/* stage */
.tour__stage{position:relative;overflow:hidden;border-radius:var(--r-xl);background:#fff;
  border:1px solid var(--line-2);box-shadow:var(--sh-lg)}
.tour__slides{display:grid}
.tour__slide{grid-area:1/1;display:grid;opacity:0;visibility:hidden;
  transition:opacity .8s var(--ease),visibility 0s linear .8s}
.tour__slide.is-active{opacity:1;visibility:visible;transition:opacity .8s var(--ease),visibility 0s}
@media(min-width:860px){.tour__slide{grid-template-columns:1.18fr 1fr}}
.tour__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ivory-2)}
@media(min-width:860px){.tour__media{aspect-ratio:auto;min-height:420px}}
.tour__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.06);transition:transform 6s var(--ease-out)}
.tour__slide.is-active .tour__media img{transform:scale(1)}
.tour__copy{display:flex;flex-direction:column;justify-content:center;padding:var(--s1) var(--gap-card) var(--s1)}
@media(min-width:860px){.tour__copy{padding:var(--s2) var(--s2) calc(var(--s2) + 40px)}}
.tour__step{font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--green-600)}
.tour__step i{font-style:normal;opacity:.5}
.tour__copy h3{margin-top:12px;font-family:var(--sans);font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:700;line-height:1.25;letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.tour__copy p{margin-top:var(--s0);font-size:14.5px;line-height:1.85;color:var(--muted);text-wrap:pretty}
.tour__slide.is-active .tour__copy>*{animation:tourIn .8s var(--ease-out) both}
.tour__slide.is-active .tour__copy h3{animation-delay:.08s}
.tour__slide.is-active .tour__copy p{animation-delay:.16s}
@keyframes tourIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* controls */
.tour__controls{display:flex;align-items:center;gap:var(--s0);padding:12px var(--gap-card) 16px;border-top:1px solid var(--line-2)}
@media(min-width:860px){.tour__controls{position:absolute;right:0;bottom:0;width:calc(100% / 2.18);border-top:0;padding:0 var(--s2) var(--s1)}}
.tour__count{flex:none;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--muted-2)}
.tour__count b{color:var(--green-700);font-weight:700}
.tour__timer{position:relative;flex:1 1 auto;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.tour__timer i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--green-300),var(--green-500))}
.tour__btns{flex:none;display:flex;gap:8px}
.tour__btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--green-700);
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease),transform .4s var(--ease-out)}
.tour__btn:hover{border-color:var(--green-400);background:var(--green-050);transform:translateY(-2px)}
.tour__btn svg{width:18px;height:18px}
.tour__ico-play{display:none}
.tour.is-paused .tour__ico-play{display:block}
.tour.is-paused .tour__ico-pause{display:none}
@media(prefers-reduced-motion:reduce){.tour__slide.is-active .tour__copy>*{animation:none}.tour__media img{transform:none}}

/* ════════════════════════════════════════════════════════════
   11 — CERTIFICATION
   ════════════════════════════════════════════════════════════ */
.certs__veil{position:absolute;inset:0;opacity:.5;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 76%);
  mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 76%)}
.cert-grid{display:grid;gap:var(--s1);margin-top:var(--s3)}
@media(min-width:640px){.cert-grid{grid-template-columns:repeat(2,1fr)}}
/* four seals: 2x2 on tablet, a single row on wide desktop — never a stranded card */
@media(min-width:1100px){
  .cert-grid{grid-template-columns:repeat(4,1fr)}
  .cert{padding:var(--s2) var(--s1)}
  .cert__badge{width:min(152px,54vw)}
  .cert h3{font-size:1.15rem}
  .cert p{font-size:13.2px;line-height:1.78}
}

.cert{
  position:relative;text-align:center;border-radius:var(--r-xl);
  padding:var(--s2) var(--gap-card);
  background:#fff;
  border:1px solid var(--line-2);
  box-shadow:var(--sh-sm);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),border-color .6s var(--ease);
  overflow:hidden;
}
.cert::before{
  content:"";position:absolute;left:50%;top:4%;width:76%;aspect-ratio:1;transform:translateX(-50%) scale(.72);
  background:radial-gradient(circle,rgba(152,217,26,.28) 0%,rgba(152,217,26,.06) 44%,transparent 68%);
  opacity:.5;transition:opacity .7s var(--ease),transform .9s var(--ease-out);pointer-events:none;
}
.cert:hover{transform:translateY(-6px);border-color:var(--line-green);box-shadow:var(--sh-md)}
.cert:hover::before{opacity:1;transform:translateX(-50%) scale(1)}
.cert__badge{position:relative;width:min(178px,54vw);height:auto;margin:0 auto var(--s1);
  transition:transform 1s var(--ease-out)}
.cert:hover .cert__badge{transform:rotate(-2deg) scale(1.04)}
.ring-dash{transform-origin:100px 100px;transition:transform 1.4s var(--ease-out)}
.cert:hover .ring-dash{transform:rotate(48deg)}
.cert h3{position:relative;font-family:var(--sans);font-size:clamp(1.2rem,2.1vw,1.4rem);font-weight:700;letter-spacing:-.018em;line-height:1.3}
.cert__tag{position:relative;display:block;font-size:9.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-500);margin:10px 0 var(--s0)}
.cert p{position:relative;font-size:14px;line-height:1.82;color:var(--muted);text-wrap:pretty}

/* the three-line contact summary, on the forest canvas */
.contact__lines{margin:var(--s2) auto 0;text-align:center;
  font-size:15px;line-height:2.05;letter-spacing:.01em;color:rgba(255,255,255,.74)}
.contact__lines strong{color:#fff;font-weight:700}
.contact__lines a{color:var(--green-300);font-weight:600;transition:color .35s var(--ease)}
.contact__lines a:hover{color:#fff;text-decoration:underline}

.qa-list{display:grid;gap:var(--s1);margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--line)}
@media(min-width:768px){.qa-list{grid-template-columns:repeat(2,1fr);gap:var(--s1) var(--s3)}}
.qa-list li{display:flex;gap:14px;align-items:flex-start;font-size:14px;line-height:1.8;color:var(--muted)}
.qa-list strong{color:var(--ink);font-weight:700}
.qa-list svg{width:20px;height:20px;flex:none;margin-top:5px;color:var(--green-500)}

/* ════════════════════════════════════════════════════════════
   12 — FORMATS & PACKAGING GALLERY
   ════════════════════════════════════════════════════════════ */
.grid--6{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:720px){.grid--6{grid-template-columns:repeat(4,1fr);gap:var(--s0)}}
.format{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:var(--s1) var(--s0);border-radius:var(--r-m);
  background:#fff;border:1px solid var(--line-2);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .45s var(--ease);
}
.format:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line-green)}
.format svg{width:50px;height:50px;color:var(--green-500);transition:transform .6s var(--ease-out)}
.format:hover svg{transform:scale(1.08) rotate(-3deg)}
.format b{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.format span{font-size:11.5px;letter-spacing:.04em;color:var(--muted-2)}

/* ── packaging line-up ─────────────────────────────────────
   Drawn specimens, not product photography: every format is an
   inline line-art silhouette, so nothing on this page can be
   traced back to a real customer's packaging design.
   ───────────────────────────────────────────────────────── */
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:var(--s2)}
@media(min-width:600px){.spec-grid{grid-template-columns:repeat(3,1fr);gap:var(--s0)}}
@media(min-width:1080px){.spec-grid{grid-template-columns:repeat(4,1fr);gap:var(--s1)}}
.spec{
  position:relative;margin:0;display:flex;flex-direction:column;
  border-radius:var(--r-m);overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line-2);
  box-shadow:0 1px 2px rgba(2,55,43,.03);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s var(--ease);
}
.spec:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line-green)}

/* the specimen plate — a drawn silhouette resting on soft, paper-like ground */
.spec__plate{
  position:relative;display:grid;place-items:center;aspect-ratio:5/4;
  background:
    radial-gradient(70% 60% at 50% 32%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 74%),
    linear-gradient(158deg,#fbfaf4 0%,#f5f8ee 56%,#eff5e5 100%);
  border-bottom:1px solid var(--line-2);
}
/* hairline ring — a quiet catalogue motif behind the specimen */
.spec__plate::before{
  content:"";position:absolute;left:50%;top:53%;width:60%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(26,164,35,.10);
}
.spec__plate svg{position:relative;width:66%;max-width:136px;height:auto;
  color:var(--green-600);transition:transform .7s var(--ease-out)}
.spec:hover .spec__plate svg{transform:translateY(-3px) scale(1.04)}
/* serif index — reads as a specimen catalogue rather than a product shot */
.spec__no{position:absolute;top:10px;right:13px;
  font-family:var(--serif);font-weight:400;font-size:19px;line-height:1;
  color:rgba(2,55,43,.15);transition:color .5s var(--ease)}
.spec:hover .spec__no{color:rgba(21,138,42,.34)}

.spec__body{flex:1 1 auto;padding:15px 16px 17px}
@media(min-width:600px){.spec__body{padding:18px 19px 20px}}
.spec__body b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em;line-height:1.4;color:var(--ink)}
.spec__body span{display:block;margin-top:7px;font-size:12px;line-height:1.72;letter-spacing:.01em;color:var(--muted)}

.spec-note{
  max-width:76ch;margin:var(--s2) auto 0;padding-top:var(--s2);
  border-top:1px solid var(--line-2);
  text-align:center;font-size:13px;line-height:1.95;color:var(--muted);text-wrap:pretty;
}
.spec-note b{color:var(--green-700);font-weight:700}

/* ════════════════════════════════════════════════════════════
   12c — PRODUCT DEVELOPMENT EXAMPLES
   ════════════════════════════════════════════════════════════ */
.pdx-grid{display:grid;gap:var(--s1);margin-top:var(--s3)}
@media(min-width:680px){.pdx-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.pdx-grid{grid-template-columns:repeat(3,1fr);gap:var(--gap-card)}}
.pdx{
  display:flex;flex-direction:column;margin:0;overflow:hidden;text-align:center;
  border-radius:var(--r-l);background:var(--paper);
  border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(2,55,43,.03);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s var(--ease);
}
.pdx:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--line-green)}
.pdx__media{position:relative;aspect-ratio:113/100;overflow:hidden;background:var(--ivory-2)}
.pdx__media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform 1.2s var(--ease-out)}
.pdx:hover .pdx__media img{transform:scale(1.05)}
.pdx__body{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;
  padding:var(--s1) var(--gap-card) var(--gap-card);background:linear-gradient(180deg,#fff 0%,var(--ivory) 100%)}
.pdx__body h3{font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,1.65rem);font-weight:400;line-height:1.25;letter-spacing:-.01em;color:var(--green-900)}
.pdx__sub{margin-top:6px;font-family:var(--serif);font-size:1.12rem;line-height:1.4;color:var(--green-700)}
.pdx__text{margin-top:12px;font-size:14px;line-height:1.8;color:var(--muted);max-width:34ch;text-wrap:pretty}
.pdx__tag{display:inline-block;margin-top:auto;padding:7px 20px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green-800);background:rgba(152,217,26,.13);border:1px solid var(--line-green)}
.pdx__text+.pdx__tag{margin-top:var(--s1)}
.pdx-note{margin:var(--s2) auto var(--s1);text-align:center;font-size:12px;line-height:1.75;letter-spacing:.01em;color:var(--muted-2)}

/* ════════════════════════════════════════════════════════════
   12d — FAQ  (native <details>, no JS needed)
   ════════════════════════════════════════════════════════════ */
.faq-list{max-width:860px;margin:var(--s3) auto 0;display:grid;gap:12px}
.faq{
  border-radius:var(--r-m);background:var(--paper);
  border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(2,55,43,.03);
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease-out);
}
.faq[open],.faq:hover{border-color:var(--line-green);box-shadow:var(--sh-sm)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s1);
  padding:var(--s1) var(--gap-card);cursor:pointer;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--green-400);outline-offset:3px;border-radius:var(--r-m)}
.faq__q{font-size:15px;font-weight:700;letter-spacing:-.012em;line-height:1.55;color:var(--ink);text-wrap:pretty}
/* plus that becomes a minus */
.faq__icon{position:relative;flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;
  background:rgba(152,217,26,.13);transition:background .4s var(--ease),transform .5s var(--ease-out)}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.6px;
  border-radius:2px;background:var(--green-700);transform:translate(-50%,-50%);transition:transform .45s var(--ease-out)}
.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq[open] .faq__icon{background:rgba(152,217,26,.26)}
.faq[open] .faq__icon::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq__a{padding:0 var(--gap-card) var(--s1)}
.faq__body{padding-top:var(--s0);border-top:1px solid var(--line-2)}
.faq__body p{font-size:14px;line-height:1.9;color:var(--muted);text-wrap:pretty}
.faq__body p+p,.faq__body .faq-flow+p{margin-top:12px}
.faq-sub{margin-top:var(--s0);font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2vw,1.35rem);line-height:1.4;color:var(--green-600)}

/* step flow — pills joined by arrows, wraps on narrow screens */
.faq-flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 8px;margin-top:var(--s1);
  padding:14px 16px;border-radius:var(--r-m);background:rgba(152,217,26,.07);border:1px solid var(--line-2);list-style:none}
.faq-flow li{position:relative;display:inline-flex;align-items:center;padding:7px 13px;border-radius:999px;
  background:#fff;border:1px solid var(--line-green);
  font-size:11.5px;font-weight:700;letter-spacing:.04em;line-height:1.3;color:var(--green-800)}
.faq-flow li:last-child{background:var(--green-600);border-color:var(--green-600);color:#fff}
.faq-flow li+li{margin-left:22px}
.faq-flow li+li::before{display:block;content:"→";position:absolute;left:-21px;top:50%;transform:translateY(-50%);
  font-size:13px;font-weight:600;color:var(--green-500)}
/* lighter, inline variant inside an answer */
.faq-flow--inline{margin:12px 0 0;padding:0;background:none;border:0;gap:8px 6px}
.faq-flow--inline li{padding:5px 11px;font-size:11px;font-weight:600;color:var(--green-700);background:var(--ivory-2);border-color:var(--line-2)}
.faq-flow--inline li:last-child{background:var(--ivory-2);border-color:var(--line-green);color:var(--green-700)}
.faq-flow--inline li+li{margin-left:18px}
.faq-flow--inline li+li::before{left:-17px;font-size:12px}

.faq-cta{max-width:860px;margin:var(--s2) auto 0;padding:var(--s2) var(--gap-card);text-align:center;
  border-radius:var(--r-l);background:#fff;border:1px solid var(--line-green);box-shadow:var(--sh-sm)}
.faq-cta h3{font-family:var(--sans);font-size:clamp(1.25rem,2.2vw,1.5rem);font-weight:700;letter-spacing:-.018em;line-height:1.3;color:var(--ink)}
.faq-cta p{margin:12px auto var(--s1);max-width:58ch;font-size:14.5px;line-height:1.85;color:var(--muted);text-wrap:pretty}
.faq[open] .faq__a{animation:faqIn .5s var(--ease-out) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.faq[open] .faq__a{animation:none}}

/* ════════════════════════════════════════════════════════════
   13 — FLOW
   ════════════════════════════════════════════════════════════ */
.flow-grid{display:grid;gap:var(--s0);margin-top:var(--s3)}
@media(min-width:980px){.flow-grid{grid-template-columns:repeat(3,1fr);gap:var(--s1)}}
.step{
  position:relative;padding:var(--gap-card);padding-top:calc(var(--gap-card) + 14px);
  border-radius:var(--r-l);
  background:#fff;border:1px solid var(--line-2);
  box-shadow:var(--sh-sm);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s var(--ease);
}
.step:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--line-green)}
.step__num{
  position:absolute;top:calc(-1 * var(--s0));left:var(--gap-card);
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;font-weight:700;letter-spacing:.04em;
  color:var(--green-600);background:#fff;
  border:1px solid var(--line-green);
  box-shadow:0 8px 20px -10px rgba(21,138,42,.5);
  transition:transform .5s var(--ease-out),background .5s var(--ease),color .5s,border-color .5s;
}
.step:hover .step__num{transform:translateY(-3px) scale(1.05);background:var(--green-600);color:#fff;border-color:transparent}
.step h3{font-family:var(--sans);font-size:1.15rem;font-weight:700;line-height:1.34;letter-spacing:-.018em;margin:var(--s0) 0 var(--s-1)}
.step p{font-size:14.5px;line-height:1.8;color:var(--muted);text-wrap:pretty}
@media(min-width:980px){
  .step::before{content:"";position:absolute;top:calc(-1 * var(--s0) + 25px);left:calc(var(--gap-card) + 58px);right:-24px;height:1px;
    background:linear-gradient(90deg,var(--line-green),rgba(26,164,35,.05));pointer-events:none}
  .step:nth-child(3n)::before{display:none}
}

/* ════════════════════════════════════════════════════════════
   14 — CONTACT
   ════════════════════════════════════════════════════════════ */
.chat-grid{display:grid;gap:var(--s1);margin-top:var(--s3)}
@media(min-width:860px){.chat-grid{grid-template-columns:repeat(2,1fr)}}
.chat-card{
  position:relative;display:flex;flex-direction:column;gap:var(--s1);
  padding:var(--gap-card);border-radius:var(--r-xl);
  background:linear-gradient(158deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 40px 84px -60px #000;
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out);
  overflow:hidden;
}
.chat-card::before{content:"";position:absolute;inset:-1px -1px auto -1px;height:3px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);opacity:.9}
.chat-card::after{content:"";position:absolute;right:-18%;top:-22%;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 30%,transparent),transparent 66%);
  filter:blur(20px);opacity:.5;transition:opacity .7s var(--ease),transform .9s var(--ease-out);pointer-events:none}
.chat-card:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 50px 96px -58px color-mix(in srgb,var(--brand) 55%,#000)}
.chat-card:hover::after{opacity:.85;transform:scale(1.1)}
.chat-card__head{display:flex;align-items:center;gap:15px;position:relative;z-index:1}
.chat-card__logo{width:56px;height:56px;border-radius:17px;display:grid;place-items:center;flex:none;
  background:var(--brand);box-shadow:0 12px 28px -12px color-mix(in srgb,var(--brand) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .6s var(--ease-out)}
.chat-card:hover .chat-card__logo{transform:translateY(-3px) rotate(-4deg)}
.chat-card__logo svg{width:31px;height:31px;color:#fff}
.chat-card__head h3{font-family:var(--sans);font-size:1.1rem;font-weight:700;letter-spacing:-.018em;color:#fff;line-height:1.3}
.chat-card__head p{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.58)}

.id-field{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 17px;border-radius:var(--r-m);
  background:rgba(2,55,43,.34);border:1px dashed rgba(152,217,26,.34)}
.id-field__label{display:block;font-size:9px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--green-300);margin-bottom:5px}
.id-field__value{font-size:1.25rem;font-weight:700;line-height:1.15;letter-spacing:-.012em;color:#fff;user-select:all;word-break:break-word}
.copy-btn{display:inline-flex;align-items:center;gap:7px;flex:none;padding:10px 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);
  font-size:11.5px;font-weight:600;color:rgba(255,255,255,.85);
  transition:.35s var(--ease)}
.copy-btn svg{width:14px;height:14px}
.copy-btn:hover{border-color:var(--green-300);color:var(--green-300);background:rgba(152,217,26,.14)}
.copy-btn.is-done{background:var(--green-500);border-color:var(--green-500);color:#fff}

.qr-wrap{position:relative;z-index:1;display:flex;align-items:center;gap:17px;
  padding:15px;border-radius:var(--r-m);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}
.qr-wrap svg{width:100px;height:100px;flex:none;border-radius:10px}
.qr-wrap p{font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.58)}
.qr-wrap b{display:block;font-size:13px;font-weight:700;color:#fff;margin-bottom:4px}

.chat-card__foot{position:relative;z-index:1;margin-top:auto;display:grid;gap:12px}
.btn--brand{background:var(--brand);color:#fff;box-shadow:0 14px 34px -16px color-mix(in srgb,var(--brand) 90%,transparent)}
.btn--brand:hover{transform:translateY(-3px);box-shadow:0 22px 48px -16px color-mix(in srgb,var(--brand) 90%,transparent)}
.chat-card__note{font-size:11.5px;letter-spacing:.03em;color:rgba(255,255,255,.45);text-align:center}

.contact__alt{margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid rgba(255,255,255,.11);
  display:grid;gap:var(--s1);text-align:center}
@media(min-width:768px){.contact__alt{grid-template-columns:repeat(3,1fr);text-align:left;gap:var(--s2)}}
.alt-item span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--green-300);margin-bottom:9px}
.alt-item a,.alt-item p{font-size:15px;color:rgba(255,255,255,.88);word-break:break-word;transition:color .35s}
.alt-item a:hover{color:var(--green-300)}

/* ════════════════════════════════════════════════════════════
   15 — COMPANY
   ════════════════════════════════════════════════════════════ */
.company__inner{display:grid;gap:var(--s3);align-items:center}
@media(min-width:980px){.company__inner{grid-template-columns:1fr 1.02fr;gap:var(--s4)}}
.profile-table{width:100%;border-collapse:collapse;margin-top:var(--s2)}
.profile-table tr{transition:background .4s var(--ease)}
.profile-table tr:hover{background:rgba(152,217,26,.06)}
.profile-table th,.profile-table td{text-align:left;padding:16px 6px;border-bottom:1px solid var(--line-2);vertical-align:top}
.profile-table th{width:34%;font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);padding-top:21px}
.profile-table td{font-size:14.5px;line-height:1.75;color:var(--ink)}
.map-card{position:relative;padding:var(--s1);border-radius:var(--r-xl);
  background:#fff;border:1px solid var(--line-2);box-shadow:var(--sh-md)}
.map-card svg{width:100%;height:auto;border-radius:var(--r-m)}
/* Google Maps embed — the office pin, above the reach diagram */
.map-embed{position:relative;aspect-ratio:16/11;border-radius:var(--r-m);overflow:hidden;
  border:1px solid var(--line-2);background:var(--ivory-2)}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.map-card__addr{margin:14px 2px 0;font-size:12.5px;line-height:1.75;color:var(--muted)}
.map-card__addr b{display:block;font-size:13.5px;color:var(--ink);font-weight:700;margin-bottom:3px}
.map-card__addr span{display:block;color:var(--muted-2);font-size:12px}
.map-card__addr a{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;
  letter-spacing:.04em;color:var(--green-600);transition:color .35s var(--ease)}
.map-card__addr a:hover{color:var(--green-800)}
.map-card__rule{margin:var(--s1) 0;border:0;border-top:1px solid var(--line-2)}
.map-card__cap{margin-top:var(--s1);padding:0 var(--s0) var(--s-1);font-size:12.5px;line-height:1.8;color:var(--muted);text-align:center}
.map-card__cap b{color:var(--ink);font-weight:700}

/* ════════════════════════════════════════════════════════════
   15b — LEGAL PAGES  (privacy policy, terms)
   ════════════════════════════════════════════════════════════ */
.legal{padding-top:calc(74px + var(--s3))}
@media(min-width:1024px){.legal{padding-top:calc(94px + var(--s3))}}
.legal__wrap{display:grid;gap:var(--s2)}
@media(min-width:980px){
  .legal__wrap{grid-template-columns:minmax(0,1fr) 260px;
    grid-template-areas:"head head" "body toc";
    align-items:start;gap:var(--s3) var(--s4)}
  .legal__head{grid-area:head}.legal__body{grid-area:body}.legal__toc{grid-area:toc}
}
.legal__head{max-width:62ch}
.legal__meta{margin-top:var(--s1);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2)}
.legal__notice{margin-top:var(--s1);padding:14px 18px;border-radius:var(--r-m);
  border:1px solid rgba(185,154,85,.34);background:rgba(185,154,85,.09);
  font-size:13px;line-height:1.8;color:var(--muted)}
.legal__notice b{display:block;font-size:9.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-500);margin-bottom:5px}

/* sticky table of contents */
.legal__toc{padding:var(--s1);border-radius:var(--r-m);
  background:var(--paper);border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(2,55,43,.03)}
@media(min-width:980px){.legal__toc{position:sticky;top:104px}}
.legal__toc h2{font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:var(--s0)}
.legal__toc ol{list-style:none;display:grid;gap:9px}
.legal__toc a{font-size:12.5px;line-height:1.5;color:var(--muted);transition:color .35s var(--ease),padding-left .35s var(--ease-out)}
.legal__toc a:hover{color:var(--green-700);padding-left:4px}

.legal__body{max-width:72ch}
.legal__sec + .legal__sec{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line-2)}
.legal__sec h2{font-family:var(--sans);font-size:clamp(1.05rem,1.8vw,1.22rem);font-weight:700;
  letter-spacing:-.018em;line-height:1.35;color:var(--ink);scroll-margin-top:110px}
.legal__sec p{margin-top:var(--s0);font-size:14.5px;line-height:1.95;color:var(--muted);text-wrap:pretty}
.legal__sec p b{color:var(--ink);font-weight:700}
.legal__sec strong{color:var(--ink);font-weight:700}
.legal__sec a{color:var(--green-600);font-weight:600;transition:color .35s var(--ease)}
.legal__sec a:hover{color:var(--green-800);text-decoration:underline}

/* ════════════════════════════════════════════════════════════
   16 — FOOTER
   ════════════════════════════════════════════════════════════ */
.footer{position:relative;color:rgba(255,255,255,.6);padding:var(--s3) 0 var(--s1);font-size:14px;overflow:hidden}
.footer__top{display:grid;gap:var(--s2)}
@media(min-width:768px){.footer__top{grid-template-columns:1.5fr 1fr 1fr}}
@media(min-width:1024px){.footer__top{grid-template-columns:1.8fr 1fr 1fr 1fr;gap:var(--s2)}}
.footer__logo{width:168px;height:auto;margin-bottom:var(--s1);
  padding:14px 16px;border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-sm)}
.footer__about{font-size:13.5px;line-height:1.85;max-width:36ch;color:rgba(255,255,255,.55)}
.footer h4{font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-300);margin-bottom:var(--s1)}
.footer li+li{margin-top:12px}
.footer a{font-size:13.5px;color:rgba(255,255,255,.6);transition:color .3s var(--ease),padding-left .3s var(--ease);display:inline-block}
.footer li a:hover{padding-left:6px}
.footer a:hover{color:var(--green-300)}
.footer__bottom{margin-top:var(--s3);padding-top:var(--s1);border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:center;font-size:11.5px}
.footer__legal{display:flex;flex-wrap:wrap;gap:10px 24px}
.footer__legal a{font-size:11.5px;letter-spacing:.04em}

/* ════════════════════════════════════════════════════════════
   17 — STICKY CTA
   ════════════════════════════════════════════════════════════ */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  padding:11px clamp(14px,3vw,24px) calc(11px + env(safe-area-inset-bottom));
  box-shadow:0 -16px 44px -28px rgba(2,55,43,.5);
  border-top:1px solid var(--line);
}
.sticky-cta__inner{display:flex;align-items:center;gap:10px;max-width:var(--wrap);margin-inline:auto}
.sticky-cta__label{display:none}
@media(min-width:768px){
  .sticky-cta__label{display:block;flex:1;min-width:0}
  .sticky-cta__label b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.018em;line-height:1.3;color:var(--ink)}
  .sticky-cta__label span{font-size:11.5px;letter-spacing:.03em;color:var(--muted-2)}
}
.sticky-btn{
  position:relative;overflow:hidden;isolation:isolate;
  flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:12px 14px;border-radius:14px;
  font-size:13.5px;font-weight:700;color:#fff;background:var(--brand);
  box-shadow:0 10px 26px -14px color-mix(in srgb,var(--brand) 90%,transparent),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),filter .4s;
}
@media(min-width:768px){.sticky-btn{flex:0 0 auto;min-width:214px;border-radius:999px}}
.sticky-btn::after{content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.36),transparent);transform:skewX(-22deg);transition:left .8s var(--ease-out)}
.sticky-btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 18px 40px -16px color-mix(in srgb,var(--brand) 90%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
.sticky-btn:hover::after{left:150%}
.sticky-btn:active{transform:scale(.98)}
.sticky-btn svg{width:21px;height:21px;flex:none}
.sticky-btn span{text-align:left;line-height:1.25}
.sticky-btn small{display:block;font-size:10px;font-weight:500;opacity:.85}

/* toast */
.toast{position:fixed;left:50%;bottom:110px;transform:translate(-50%,16px) scale(.96);z-index:120;
  padding:13px 24px;border-radius:999px;font-size:13px;font-weight:500;color:#fff;white-space:nowrap;
  background:rgba(2,55,43,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(152,217,26,.3);box-shadow:0 24px 52px -22px rgba(2,55,43,.8);
  opacity:0;visibility:hidden;transition:all .45s var(--ease-out)}
.toast.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}

/* ════════════════════════════════════════════════════════════
   18 — MOTION
   ════════════════════════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease-out),transform .95s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.40s}
.reveal[data-d="6"]{transition-delay:.48s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}