/* Veg Allies 素食聯盟 -- design system
   深森綠 + 萊姆. Grid-line separation instead of card shadows: that is where
   the industrial / manufacturing read comes from. See 設計規劃.md section 4.

   Webfont slot: a single subset variable Latin face (<25KB) goes here once the
   file is in /assets/font/. Until then the system stack below carries it; do
   NOT add a hosted-CDN font, it costs a third-party connection on LCP.
   @font-face{font-family:VA;src:url(/assets/font/va.woff2)format('woff2');
              font-display:swap;unicode-range:U+0000-00FF}
*/

:root{
  --deep:#12312a;
  --green:#1f5c46;
  --lime:#b8d75f;
  --paper:#f3f0e8;
  --ink:#13251d;
  --muted:#55645b;
  --line:rgba(19,37,29,.15);
  --line-d:rgba(255,255,255,.16);
  /* Shell caps the layout on wide screens; --pad is the minimum side gutter.
     Everything uses --gut, which is whichever is larger, so the reading area
     never stretches edge to edge on a 27-inch monitor. --read caps running
     prose independently of the shell. Mirrors the 廣薪 1360/880 pairing. */
  --shell:1360px;
  --read:880px;
  --pad:6vw;
  --gut:max(var(--pad),calc((100% - var(--shell)) / 2));
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",
         Inter,Roboto,"Helvetica Neue",Arial,"Noto Sans TC","PingFang TC",
         "Microsoft JhengHei",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
svg{fill:none;stroke:currentColor;stroke-width:1.8;width:20px;flex:none}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

/* clip-path rather than left:-9999px: an off-canvas box still participates in
   layout and shows up as horizontal overflow on phones. */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;
      clip-path:inset(50%);white-space:nowrap;background:var(--lime);
      color:var(--ink);z-index:200}
.skip:focus{position:fixed;left:0;top:0;width:auto;height:auto;
      clip-path:none;padding:12px 18px}
:focus-visible{outline:3px solid var(--lime);outline-offset:2px}

/* ---------- header ---------- */
.site-header{height:84px;padding:0 var(--gut);display:flex;align-items:center;
  justify-content:space-between;gap:28px;background:#f7f5ef;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.brand{display:flex;align-items:center;gap:11px;letter-spacing:.11em;font-size:17px}
.brand b{font-weight:800}
.brand small{display:block;font-size:10px;letter-spacing:.28em;color:var(--green);
  margin-top:3px;font-weight:600}
.mark{width:34px;height:34px;stroke:var(--green);stroke-width:2.3}
.mainnav>ul{display:flex;gap:6px}
.mainnav li{position:relative}
.nav-top{display:block;padding:31px 15px;font-size:14px;font-weight:600}
.nav-top:after{content:"";position:absolute;left:15px;right:15px;bottom:24px;
  height:1px;background:var(--green);transform:scaleX(0);transition:.22s;
  transform-origin:left}
.mainnav li:hover .nav-top:after,.nav-top[aria-current]:after{transform:scaleX(1)}
.mega{position:absolute;top:100%;left:0;min-width:270px;background:#fff;
  border:1px solid var(--line);border-top:2px solid var(--lime);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s;
  box-shadow:0 22px 44px rgba(18,49,42,.13)}
.mainnav li:hover .mega,.mainnav li:focus-within .mega{opacity:1;visibility:visible;
  transform:none}
.mega-inner{display:flex;flex-direction:column;padding:10px 0}
/* span as well as a: an item without a page yet renders as a span, and if it
   does not inherit the same box it visibly breaks the menu alignment. */
.mega a,.mega span{display:block;padding:11px 22px;font-size:13.5px;
  color:var(--muted);transition:.18s;white-space:nowrap}
.mega a:hover{background:var(--paper);color:var(--ink);padding-left:28px}
.mega a[aria-current]{color:var(--ink);font-weight:700;
  box-shadow:inset 3px 0 0 var(--lime)}
.soon{opacity:.45;cursor:default}
/* A pillar with no children has no panel to open. */
.mainnav li.no-mega .nav-top:after{bottom:24px}

/* Product case gallery. The captions are product names, which is the point:
   this block answers "what can you actually make for me". */
.fig-gallery{margin:48px 0}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.gal-grid>figure{margin:0;background:var(--paper);display:flex;
  flex-direction:column}
.gal-grid picture{display:block}
.gal-grid img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  display:block}
.gal-grid figcaption{padding:14px 16px 16px;font-size:14.5px;
  font-weight:600;color:var(--deep);line-height:1.5;border:0;margin:0}
.blk.tone .gal-grid>figure,.blk.deep .gal-grid>figure{background:#f3f0e8}
@media(max-width:900px){.gal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gal-grid{grid-template-columns:1fr}}
.header-right{display:flex;align-items:center;gap:16px}
.lang{font-size:12px;letter-spacing:.14em;font-weight:700;padding:9px 13px;
  border:1px solid var(--line)}
.lang:hover{background:var(--deep);color:#fff;border-color:var(--deep)}
.btn-line{display:inline-flex;align-items:center;gap:12px;background:var(--deep);
  color:#fff;padding:15px 20px;font-size:13.5px;font-weight:600;transition:.22s}
.btn-line svg{width:17px;transition:.22s}
.btn-line:hover{background:var(--green)}
.btn-line:hover svg,.inline-link:hover svg{transform:translateX(4px)}
.btn-line.big{background:var(--lime);color:var(--ink);padding:19px 26px;
  font-size:15px;font-weight:700}
.btn-line.big:hover{background:#c9e372}
.burger{display:none;width:44px;height:38px;background:none;border:1px solid var(--line);
  flex-direction:column;justify-content:center;gap:6px;align-items:center;cursor:pointer}
.burger span{width:19px;height:1.6px;background:var(--ink);transition:.2s}

/* ---------- shared section furniture ---------- */
/* Direct children of main only. An unscoped `section` selector also hit the
   <section> elements nested inside .g-prose, giving every paragraph group
   110px of top padding and an extra left indent. */
main>section{padding:110px var(--gut)}
.g-prose>section{padding:0}
.sec-label{font-size:11px;letter-spacing:.2em;font-weight:700;color:var(--muted)}
.sec-label span{color:var(--green);margin-right:13px}
h2{font-size:clamp(33px,4vw,60px);line-height:1.18;letter-spacing:-.042em}
h2 span{color:var(--green)}
.tier-h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:54px 0 20px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.inline-link{display:inline-flex;align-items:center;gap:12px;font-size:14px;
  font-weight:700;border-bottom:1px solid var(--ink);padding-bottom:7px;
  margin-top:46px}
.inline-link svg{width:17px;transition:.22s}
.inline-link.light{border-color:var(--lime);color:var(--lime)}
.round{border:1px solid var(--line);border-radius:50%;width:40px;height:40px;
  display:grid;place-items:center;flex:none;transition:.22s}
.round svg{width:16px}

/* ---------- 01 hero ---------- */
.hero{height:calc(100vh - 84px);min-height:660px;max-height:940px;padding:0;
  position:relative;color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 1px,
      transparent 1px 46px),
    radial-gradient(120% 90% at 78% 18%,#2c6b52 0%,transparent 58%),
    linear-gradient(155deg,#0d2620 0%,#12312a 44%,#1b4636 100%)}
/* The hero photograph is generated deliberately low-key, but the h1 sits on
   top of it so readability cannot rest on the image alone. Three layers do
   the work: the photo, a filter that pulls saturation and brightness down
   further, and the veil. shot.py measures the actual rendered luminance
   behind the headline rather than trusting any of it. */
.hero-media picture,.hero-img{position:absolute;inset:0;display:block;
  width:100%;height:100%}
.hero-img img,.hero-media img{width:100%;height:100%;object-fit:cover;
  object-position:65% center;filter:saturate(.55) brightness(.62)}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(6,20,16,.93) 0%,rgba(6,20,16,.7) 46%,
    rgba(6,20,16,.2) 78%),
  linear-gradient(0deg,rgba(6,20,16,.72),transparent 48%)}
.hero-body{position:absolute;left:var(--gut);top:50%;
  transform:translateY(-56%);max-width:min(900px,var(--read))}
.eyebrow{font-size:11.5px;letter-spacing:.22em;font-weight:700;color:var(--lime)}
.hero h1{font-size:clamp(44px,6vw,88px);line-height:1.07;letter-spacing:-.05em;
  margin:26px 0 24px}
.hero h1 span{color:var(--lime)}
.hero-lead{font-size:17px;line-height:1.85;color:rgba(255,255,255,.8);max-width:680px}
.hero-cta{display:flex;align-items:center;gap:28px;margin-top:38px;flex-wrap:wrap}
.text-link{font-size:14px;border-bottom:1px solid rgba(255,255,255,.35);
  padding:15px 0}
.text-link span{margin-left:11px}
.hero-proof{position:absolute;right:var(--gut);bottom:0;left:auto;display:grid;
  grid-template-columns:repeat(4,minmax(120px,168px));
  background:rgba(11,34,27,.92);backdrop-filter:blur(9px)}
.hero-proof div{padding:24px 22px;border-left:1px solid var(--line-d)}
.hero-proof strong{display:block;font-size:26px;color:var(--lime);
  letter-spacing:-.03em}
.hero-proof span{display:block;font-size:11.5px;margin-top:6px;
  color:rgba(255,255,255,.72);line-height:1.5}

/* ---------- 02 certifications ---------- */
.certs{background:#eeece3}
.certs-head{display:grid;grid-template-columns:1.2fr .8fr;gap:8vw;
  align-items:end;margin-top:44px}
.certs-head p{color:var(--muted);font-size:15px;line-height:1.95}
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cert-big{padding:36px 34px 40px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);background:#fff;min-height:230px}
.cert-big h3{font-size:23px;letter-spacing:-.02em;color:var(--deep);
  padding-bottom:18px;border-bottom:2px solid var(--lime);display:inline-block}
.cert-big p{margin-top:20px;font-size:14px;line-height:1.9;color:var(--muted)}
.cert-list{display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cert-list li{padding:22px 20px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.cert-list b{display:block;font-size:14px;line-height:1.5;color:var(--ink)}
.cert-list span{display:block;margin-top:9px;font-size:12px;color:var(--muted)}

/* ---------- 03 approach ---------- */
.approach-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:8vw;margin-top:50px}
.approach-grid p{color:var(--muted);font-size:16px;line-height:2}

/* ---------- 04 services ---------- */
.services{background:var(--deep);color:#fff}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:30px}
.services .sec-label{color:rgba(255,255,255,.6)}
.services .sec-label span{color:var(--lime)}
.sec-head>p{font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.45)}
h2.on-dark{margin-top:38px}
h2.on-dark span{color:var(--lime)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:58px;
  border-top:1px solid var(--line-d);border-left:1px solid var(--line-d)}
.svc{display:grid;grid-template-columns:44px 1fr;gap:20px;min-height:262px;
  padding:36px 32px;border-right:1px solid var(--line-d);
  border-bottom:1px solid var(--line-d);transition:.26s;position:relative}
.svc:hover{background:#1b4636}
.svc-no{color:var(--lime);font-size:12px;font-weight:700}
.svc small{color:rgba(255,255,255,.44);font-size:10px;letter-spacing:.16em;
  font-weight:700}
.svc h3{font-size:24px;margin:14px 0 16px;letter-spacing:-.025em}
.svc p{font-size:14px;line-height:1.9;color:rgba(255,255,255,.66)}
.svc .round{position:absolute;right:30px;bottom:30px;border-color:var(--line-d)}
.svc:hover .round{background:var(--lime);color:var(--ink);border-color:var(--lime)}

/* ---------- 05 HPP ---------- */
.hpp h2{margin-top:34px}
.answer{margin-top:26px;max-width:var(--read);font-size:18px;line-height:1.95;
  color:var(--ink);border-left:3px solid var(--lime);padding-left:24px}
.hpp-grid{display:grid;grid-template-columns:1fr 1fr;gap:5vw;margin-top:58px;
  align-items:start}
.cmp{width:100%;border-collapse:collapse;font-size:14px}
.cmp caption{text-align:left;font-size:11px;letter-spacing:.2em;font-weight:700;
  color:var(--muted);padding-bottom:16px;text-transform:uppercase}
.cmp th,.cmp td{padding:15px 14px;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top}
.cmp thead th{font-size:11px;letter-spacing:.1em;color:var(--muted);
  border-bottom:1px solid var(--ink)}
.cmp thead th:nth-child(2){color:var(--green)}
.cmp tbody th{font-weight:600;color:var(--muted);width:31%}
.cmp td.yes{color:var(--deep);font-weight:700;background:rgba(184,215,95,.16)}
.chart{margin:0}
.chart svg{width:100%;height:auto}
/* Sizes are viewBox units, not CSS px: the 880-unit chart renders around
   two thirds width in the two-column grid, so 21 units lands near 14px. */
.chart .pl{font:600 21px var(--sans);fill:var(--ink);stroke:none}
.chart .pv{font:700 19px var(--sans);fill:var(--muted);stroke:none}
.chart figcaption{margin-top:22px;font-size:12.5px;line-height:1.85;
  color:var(--muted);border-top:1px solid var(--line);padding-top:16px}

/* ---------- 06 certification consulting ---------- */
.consult{background:var(--green);color:#fff}
.consult .sec-label{color:rgba(255,255,255,.66)}
.consult .sec-label span{color:var(--lime)}
.consult h2{margin-top:36px;max-width:900px}
.consult h2 span{color:var(--lime)}
.consult>.consult-body>p{margin-top:26px;max-width:760px;font-size:17px;
  line-height:1.95;color:rgba(255,255,255,.82)}
.steps{margin-top:52px;border-top:1px solid var(--line-d);
  display:grid;grid-template-columns:repeat(5,1fr);
  border-left:1px solid var(--line-d)}
.steps li{padding:26px 22px 32px;border-right:1px solid var(--line-d);
  border-bottom:1px solid var(--line-d)}
.steps b{color:var(--lime);font-size:11px;font-weight:700}
.steps strong{display:block;font-size:18px;margin:40px 0 11px;letter-spacing:-.02em}
.steps span{font-size:13px;line-height:1.8;color:rgba(255,255,255,.7)}

/* ---------- 07 products ---------- */
.products h2{margin-top:34px}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:54px;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.prod{padding:34px 28px 90px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);position:relative;transition:.24s;
  min-height:250px}
.prod:hover{background:#eae8df}
.prod h3{font-size:22px;letter-spacing:-.025em}
.prod p{margin-top:16px;font-size:14px;line-height:1.9;color:var(--muted)}
.prod .round{position:absolute;left:28px;bottom:30px}
.prod:hover .round{background:var(--deep);color:#fff;border-color:var(--deep)}

/* ---------- 08 process ---------- */
.process{background:#eeece3}
.process h2{margin-top:34px}
.flow{display:grid;grid-template-columns:repeat(6,1fr);margin-top:56px;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.flow>div{min-height:210px;padding:26px 22px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.flow b{font-size:11px;color:var(--green);font-weight:700}
.flow strong{display:block;font-size:17px;margin:44px 0 10px;letter-spacing:-.02em}
.flow span{font-size:12.5px;line-height:1.75;color:var(--muted)}

/* ---------- 09 channels ---------- */
.ch-head{display:grid;grid-template-columns:1.25fr .75fr;gap:8vw;margin:44px 0 54px;
  align-items:end}
.ch-head p{color:var(--muted);font-size:15px;line-height:1.95}
.ch-list{border-top:1px solid var(--line)}
.ch-list>div{display:grid;grid-template-columns:74px 1fr 28px;align-items:center;
  border-bottom:1px solid var(--line);padding:25px 8px;font-size:20px;
  letter-spacing:-.02em;transition:.22s;cursor:default}
.ch-list>div:hover{padding-left:26px;background:#eae8df}
.ch-list span{font-size:11px;color:var(--green);font-weight:700}

/* ---------- 10 logistics ---------- */
.logistics{display:grid;grid-template-columns:38% 62%;padding:0;
  background:#e9e7de}
.log-media{min-height:640px;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 62px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 62px),
    linear-gradient(200deg,#16413a 0%,#0f2c25 62%,#1f5c46 100%)}
.log-body{padding:108px var(--gut) 100px 5vw}
.log-body h2{margin-top:34px}
.log-body>p{margin-top:26px;font-size:16px;line-height:2;color:var(--muted);
  max-width:var(--read)}
.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line)}
.zones article{background:#e9e7de;padding:22px 20px}
.zones h3{font-size:19px;color:var(--deep)}
.zones p{margin-top:10px;font-size:13px;line-height:1.75;color:var(--muted)}
.docs{display:flex;flex-wrap:wrap;gap:10px}
.docs li{border:1px solid var(--line);padding:11px 16px;font-size:13px;
  background:#f3f0e8}
.mkts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);margin-top:34px}
.mkts>div{background:var(--deep);color:#fff;padding:22px 20px}
.mkts b{display:block;font-size:11px;letter-spacing:.2em;color:var(--lime);
  font-weight:700}
.mkts span{display:block;margin-top:12px;font-size:15px;line-height:1.6}

/* ---------- 11 clients ---------- */
.clients h2{margin-top:34px}
.who-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:54px;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.who-grid article{padding:32px 26px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);min-height:190px}
.who-grid h3{font-size:19px;letter-spacing:-.02em;color:var(--deep)}
.who-grid p{margin-top:14px;font-size:13.5px;line-height:1.9;color:var(--muted)}

/* ---------- 12 statement ---------- */
.statement{background:#d5dfbd;text-align:center;padding:104px var(--gut)}
.statement p{font-size:11.5px;letter-spacing:.22em;font-weight:700;
  color:var(--green)}
.statement h2{margin:26px auto 0;max-width:1020px;line-height:1.42;
  font-size:clamp(28px,3.6vw,54px)}

/* ---------- 13 faq ---------- */
.faq h2{margin-top:34px}
.faq-list{margin-top:48px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;gap:16px;padding:25px 6px;
  cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+";color:var(--green);font-size:20px;
  font-weight:700;width:20px;flex:none}
.faq details[open] summary:before{content:"\2212"}
.faq summary h3{font-size:19px;letter-spacing:-.02em;font-weight:600}
.faq details p{padding:0 6px 28px 42px;max-width:var(--read);font-size:15px;
  line-height:1.95;color:var(--muted)}

/* ---------- 14 cta ---------- */
.cta{background:var(--deep);color:#fff;display:flex;align-items:flex-end;
  justify-content:space-between;gap:50px;padding:96px var(--gut)}
.cta p{font-size:11.5px;letter-spacing:.22em;font-weight:700;color:var(--lime)}
.cta h2{margin-top:22px;line-height:1.28}
.cta-round{width:196px;height:196px;border-radius:50%;background:var(--lime);
  color:var(--ink);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;font-weight:700;font-size:15px;flex:none;
  text-align:center;transition:.28s;padding:20px}
.cta-round svg{width:22px}
.cta-round:hover{transform:scale(1.045)}

/* ---------- footer ---------- */
footer{background:#0a201a;color:#fff;padding:74px var(--gut) 26px}
.foot-top{display:grid;grid-template-columns:26% 74%;gap:5vw;
  padding-bottom:48px;border-bottom:1px solid var(--line-d)}
.foot-brand span{font-size:18px;letter-spacing:.11em}
.foot-brand b{font-weight:800}
.foot-brand p{margin-top:14px;font-size:13px;line-height:1.85;
  color:rgba(255,255,255,.5);max-width:250px}
.foot-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:26px}
.foot-nav h3{font-size:11px;letter-spacing:.18em;color:var(--lime);
  margin-bottom:16px;font-weight:700}
.foot-nav a{display:block;font-size:13px;padding:6px 0;
  color:rgba(255,255,255,.66)}
.foot-nav a:hover{color:#fff}
.foot-contact{display:flex;align-items:center;flex-wrap:wrap;gap:16px 30px;
  padding:34px 0;border-bottom:1px solid var(--line-d)}
.foot-contact h3{font-size:11px;letter-spacing:.18em;color:var(--lime);
  font-weight:700}
.foot-contact a{font-size:14px;font-weight:600;border-bottom:1px solid var(--lime);
  padding-bottom:3px}
.foot-contact span{font-size:13px;color:rgba(255,255,255,.55)}
footer small{display:block;margin-top:24px;font-size:10.5px;letter-spacing:.12em;
  color:rgba(255,255,255,.34)}

/* ---------- responsive ---------- */
/* ---------- long-form article layout ---------- */
/* One reading column with the headings inside it, a sticky rail carrying the
   page TL;DR and its table of contents, and figures breaking out wider than
   the text. The banded-section layout put every h2 on a full-width colour
   band, which fragments the reading line; this is the 廣薪 pattern instead. */
.art{display:grid;grid-template-columns:250px minmax(0,1fr);gap:5vw;
  padding:78px var(--gut) 96px;align-items:start}

.art-rail{position:sticky;top:106px;align-self:start;font-size:13px}
.rail-take{border-top:2px solid var(--green);padding-top:18px}
.art-rail b{display:block;font-size:10.5px;letter-spacing:.18em;
  font-weight:700;color:var(--green)}
.rail-take ul{margin-top:16px}
.rail-take li{font-size:13px;line-height:1.75;color:var(--muted);
  padding:10px 0 10px 16px;position:relative;
  border-bottom:1px solid var(--line)}
.rail-take li:before{content:"";position:absolute;left:0;top:17px;width:6px;
  height:6px;background:var(--lime)}
.rail-take li:last-child{border-bottom:0}
.rail-toc{margin-top:34px;border-top:1px solid var(--line);padding-top:18px}
.rail-toc ol{margin-top:12px;counter-reset:toc}
.rail-toc li{counter-increment:toc}
.rail-toc a{display:block;padding:7px 0 7px 22px;position:relative;
  font-size:13px;line-height:1.6;color:var(--muted);transition:.18s}
.rail-toc a:before{content:counter(toc,decimal-leading-zero);
  position:absolute;left:0;top:8px;font-size:10px;font-weight:700;
  color:var(--green)}
.rail-toc a:hover{color:var(--ink)}
.rail-toc a[aria-current]{color:var(--ink);font-weight:700}

/* The body column runs full width and the TEXT children are what gets
   capped at --read. Capping .art-body itself also caps the figures, so the
   breakout silently did nothing: the figure measured the same 880px as the
   paragraph beside it. */
.art-body{max-width:none}
.art-body>p,.art-body>h2,.art-body>h3,.art-body>blockquote,
.art-body>.art-list,.art-body>.g-callout{max-width:var(--read)}
.art-answer{font-size:19px;line-height:1.9;border-left:3px solid var(--lime);
  padding-left:24px;margin-bottom:8px;max-width:var(--read)}
.art-body h2{font-size:clamp(24px,2.4vw,33px);line-height:1.28;
  letter-spacing:-.03em;margin:64px 0 20px;scroll-margin-top:104px}
.art-body h3{font-size:19px;letter-spacing:-.02em;color:var(--deep);
  margin:40px 0 14px}
.art-body p{font-size:16px;line-height:2.05;color:#37443c}
.art-body p+p{margin-top:18px}
.art-body h2+p,.art-body h3+p{margin-top:0}
.art-body blockquote{margin:38px 0;padding:0 0 0 26px;
  border-left:3px solid var(--green);font-size:19px;line-height:1.75;
  letter-spacing:-.02em;color:var(--deep);font-weight:600}
.art-list{margin:26px 0}
.art-list li{padding:15px 0 15px 20px;border-bottom:1px solid var(--line);
  position:relative}
.art-list li:before{content:"";position:absolute;left:0;top:24px;width:7px;
  height:7px;background:var(--lime)}
.art-list b{display:block;font-size:15.5px;color:var(--deep);
  margin-bottom:6px}
.art-list span{font-size:15px;line-height:1.9;color:var(--muted)}
.art-body .g-callout{margin:40px 0}

/* The breakout: figures run to the full body column, wider than the text.
   The rail sits to the left so the extra width is taken on the right, which
   keeps the text block and the figure sharing a left edge. */
.breakout{max-width:none;width:100%;margin:44px 0}
.fig-h{display:block;font-size:10.5px;letter-spacing:.16em;font-weight:700;
  color:var(--green);margin-bottom:18px}
.fig-table,.fig-grid{margin:48px 0}
.fig-table .g-spec,.fig-table .g-cmp{margin-top:0}
.fig-table .tbl-scroll{margin-top:0}
.fig-grid .g-grid{margin-top:0}
.fig-grid .fg-t{display:block;font-size:16.5px;letter-spacing:-.02em;
  color:var(--deep);font-weight:700;line-height:1.4}
.fig-grid .g-grid article{min-height:0;padding:24px 22px}
.fig-grid .g-grid p{margin-top:12px;font-size:13.5px;line-height:1.85}
.breakout figcaption,.fig-table figcaption{margin-top:18px;font-size:12.5px;
  line-height:1.85;color:var(--muted);border-top:1px solid var(--line);
  padding-top:14px}
.breakout .chart.wide{margin:0}

@media(max-width:1080px){
  /* minmax(0,1fr), not 1fr. A bare 1fr resolves its minimum to min-content,
     so the chart's min-width:620px expanded the whole track and pushed the
     page sideways instead of scrolling inside its own box. */
  .art{grid-template-columns:minmax(0,1fr);gap:0;padding-top:56px}
  .art-rail{position:static;margin-bottom:44px;max-width:var(--read)}
  .rail-toc{display:none}
  .art-body{max-width:none}
}
@media(max-width:760px){
  .art{padding:44px var(--pad) 64px}
  .art-answer{font-size:16.5px;padding-left:18px}
  .art-body h2{font-size:23px;margin:48px 0 16px}
  .art-body h3{font-size:17px;margin:32px 0 12px}
  .art-body p{font-size:15.5px;line-height:1.95}
  .art-body blockquote{font-size:17px;padding-left:18px}
}

/* ---------- inner pages ---------- */
.crumbs{padding:22px var(--gut);background:#eeece3;
  border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.crumbs li:not(:last-child):after{content:"/";margin-left:10px;
  color:rgba(19,37,29,.3)}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

.page-hero{background:var(--deep);color:#fff;padding:96px var(--gut) 88px;
  position:relative;overflow:hidden}
.page-hero:before{content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 1px,
      transparent 1px 46px),
    radial-gradient(90% 120% at 88% 0%,#2c6b52 0%,transparent 60%)}
.page-hero>*{position:relative}
/* With a photo the hero splits: copy left, image right on desktop. The image
   is a real <img> in a <picture>, not a background, so it can be lazy-tuned,
   srcset-served and given alt text. */
/* Vertical padding moves onto the copy column so the photo fills the band's
   full height instead of floating inside it. Both sides keep the shell
   gutter: the photo stopping at the same line as the body text is what makes
   the page read as a laid-out document rather than a full-bleed slide. */
.page-hero.has-photo{display:grid;grid-template-columns:1.02fr .98fr;
  gap:4vw;align-items:stretch;padding:0 var(--gut)}
.page-hero.has-photo .page-hero-copy{padding:96px 0 88px;align-self:center}
.hero-photo{position:relative;overflow:hidden;min-height:420px;display:flex}
.hero-photo picture{display:block;width:100%;height:100%}
.hero-photo img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.68) contrast(1.04)}
/* Fades the photo into the deep-green copy column on its left edge, so the
   two halves read as one field rather than a pasted-in rectangle. */
.hero-photo:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(13,38,32,.96) 0%,
    rgba(13,38,32,.34) 26%,transparent 58%)}
.page-hero h1{font-size:clamp(34px,4.6vw,68px);line-height:1.12;
  letter-spacing:-.045em;margin:26px 0 0;max-width:1080px}
.page-hero h1 span{color:var(--lime)}
.page-lead{margin-top:28px;max-width:min(720px,var(--read));font-size:17px;line-height:1.9;
  color:rgba(255,255,255,.8);border-left:2px solid var(--lime);padding-left:24px}

/* Real bottom padding. This used to be 0 on the assumption that the next
   block supplied the gap; with alternating grounds it put the paragraph hard
   against the edge of the colour band below it. */
.page-answer{padding:84px var(--gut)}
.page-answer p{max-width:var(--read);font-size:19px;line-height:1.9;
  border-left:3px solid var(--lime);padding-left:26px}

/* Full padding on every block. The earlier `.blk+.blk{padding-top:0}` was
   written when all blocks shared one ground colour and reading as a
   continuous column was correct. Once the grounds alternate it put the
   kicker hard against the top edge of each colour band. */
.blk{padding:84px var(--gut)}
.blk>h2{font-size:clamp(26px,3vw,42px);margin-top:30px}
.blk-note{margin-top:22px;max-width:var(--read);font-size:15.5px;line-height:1.95;
  color:var(--muted)}

.g-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:46px;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.g-grid article{padding:30px 26px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);min-height:196px}
.g-grid h3{font-size:19px;letter-spacing:-.02em;color:var(--deep)}
.g-grid p{margin-top:14px;font-size:14px;line-height:1.9;color:var(--muted)}

.g-steps{margin-top:46px;border-top:1px solid var(--line)}
.g-steps li{display:grid;grid-template-columns:64px 240px 1fr;gap:24px;
  padding:24px 6px;border-bottom:1px solid var(--line);align-items:baseline}
.g-steps b{font-size:11px;color:var(--green);font-weight:700}
.g-steps strong{font-size:17px;letter-spacing:-.02em}
.g-steps span{font-size:14px;line-height:1.9;color:var(--muted)}

.g-spec{width:100%;border-collapse:collapse;margin-top:46px;font-size:14.5px}
.g-spec th,.g-spec td{padding:17px 16px;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top}
.g-spec th{width:32%;font-weight:600;color:var(--muted)}
.g-spec tr:first-child th,.g-spec tr:first-child td{border-top:1px solid var(--ink)}

.g-pills{display:flex;flex-wrap:wrap;gap:11px;margin-top:44px}
.g-pills li{border:1px solid var(--line);padding:13px 19px;font-size:14px;
  background:#fff}

.g-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.g-grid.cols-4{grid-template-columns:repeat(4,1fr)}

/* prose: the depth block.
   Two columns. The paragraph column stays capped at --read because a 1360px
   measure is unreadable, and the space that cap leaves over is given to a
   sticky key-points card rather than left empty -- an empty right third
   reads as "something is missing here". */
.prose-wrap{display:grid;grid-template-columns:minmax(0,var(--read)) 1fr;
  gap:4vw;margin-top:40px;align-items:start}
.g-prose{max-width:var(--read)}
.prose-aside{position:sticky;top:108px;align-self:start;
  border-top:2px solid var(--green);padding-top:20px}
.prose-aside b{display:block;font-size:10.5px;letter-spacing:.18em;
  font-weight:700;color:var(--green)}
.prose-aside ul{margin-top:18px}
.prose-aside li{font-size:13.5px;line-height:1.8;color:var(--muted);
  padding:11px 0 11px 18px;position:relative;
  border-bottom:1px solid var(--line)}
.prose-aside li:before{content:"";position:absolute;left:0;top:19px;
  width:7px;height:7px;background:var(--lime)}
.prose-aside li:last-child{border-bottom:0}
.blk.deep .prose-aside{border-top-color:var(--lime)}
.blk.deep .prose-aside b{color:var(--lime)}
.blk.deep .prose-aside li{color:rgba(255,255,255,.74);
  border-bottom-color:var(--line-d)}
.g-prose>section+section{margin-top:40px;padding-top:36px;
  border-top:1px solid var(--line)}
.g-prose h3{font-size:21px;letter-spacing:-.02em;color:var(--deep);
  margin-bottom:16px}
.g-prose p{font-size:15.5px;line-height:2.05;color:#3f4c44}
.g-prose p+p{margin-top:16px}

/* numbers: a breather between two dense blocks. */
.g-nums{display:grid;grid-template-columns:repeat(4,1fr);margin-top:44px;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.g-nums>div{padding:28px 24px 30px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.g-nums strong{display:block;font-size:44px;line-height:1;letter-spacing:-.05em;
  color:var(--green)}
.g-nums b{display:block;margin-top:8px;font-size:11px;letter-spacing:.16em;
  color:var(--muted)}
.g-nums span{display:block;margin-top:14px;font-size:13.5px;line-height:1.8;
  color:var(--muted)}

.tbl-scroll{margin-top:44px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.g-cmp{width:100%;border-collapse:collapse;font-size:14.5px}
.g-cmp th,.g-cmp td{padding:16px 14px;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top}
.g-cmp thead th{font-size:11px;letter-spacing:.12em;color:var(--muted);
  border-bottom:1px solid var(--ink);font-weight:700}
.g-cmp tbody th{font-weight:600;color:var(--muted);width:30%}
.g-cmp td.ok{color:var(--green);font-weight:800;font-size:17px}
.g-cmp td.no{color:#c0392b;font-weight:800;font-size:17px}
.g-cmp td.val{color:var(--ink)}
.g-cmp tbody tr:hover{background:#eeece3}

.g-callout{margin-top:36px;max-width:var(--read);border-left:3px solid var(--lime);
  background:#eeece3;padding:26px 30px}
.g-callout b{display:block;font-size:11px;letter-spacing:.18em;
  color:var(--green);font-weight:700}
.g-callout p{margin-top:14px;font-size:15.5px;line-height:2;color:#3f4c44}

/* Inline call to action inside an article. Deep ground so it reads as an
   interruption rather than another paragraph, and it stays inside the reading
   column: a full-bleed band here would compete with the closing CTA. */
.art-cta{margin-top:40px;max-width:var(--read);background:var(--deep);
  padding:30px 34px;display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap}
.art-cta p{font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.82);
  max-width:26em}
.art-cta .btn{display:inline-flex;align-items:center;gap:12px;flex:none;
  background:var(--lime);color:var(--deep);font-weight:700;font-size:15px;
  padding:15px 26px;letter-spacing:-.01em;transition:.2s}
.art-cta .btn svg{width:18px}
.art-cta .btn:hover{background:#fff}

/* Dark-ground blocks. Alternating the ground colour is most of what makes a
   long page feel composed rather than endless. */
.blk.deep{background:var(--deep);color:#fff}
/* Distinctly darker than --paper (#f3f0e8). The first attempt used #eeece3,
   which is so close to the page ground that the band was invisible and the
   alternation did no work at all. */
.blk.tone{background:#e6e3d7}
.blk.tone .g-pills li{background:#f3f0e8}
.blk.tone .g-callout{background:#dedbcd}
.blk.tone .g-cmp tbody tr:hover,.blk.tone .prod:hover{background:#dcd9cb}
.blk.deep .sec-label{color:rgba(255,255,255,.6)}
.blk.deep .sec-label span{color:var(--lime)}
.blk.deep h2 span{color:var(--lime)}
.blk.deep .blk-note{color:rgba(255,255,255,.72)}
.blk.deep .g-grid{border-color:var(--line-d)}
.blk.deep .g-grid article{border-color:var(--line-d)}
.blk.deep .g-grid h3{color:#fff}
.blk.deep .g-grid p{color:rgba(255,255,255,.66)}
.blk.deep .g-steps,.blk.deep .g-steps li{border-color:var(--line-d)}
.blk.deep .g-steps b{color:var(--lime)}
.blk.deep .g-steps strong{color:#fff}
.blk.deep .g-steps span{color:rgba(255,255,255,.7)}
.blk.deep .g-spec th,.blk.deep .g-spec td{border-color:var(--line-d)}
.blk.deep .g-spec th{color:rgba(255,255,255,.6)}
.blk.deep .g-spec td{color:#fff}
.blk.deep .g-pills li{background:rgba(255,255,255,.06);border-color:var(--line-d);
  color:rgba(255,255,255,.86)}
.blk.deep .g-nums{border-color:var(--line-d)}
.blk.deep .g-nums>div{border-color:var(--line-d)}
.blk.deep .g-nums strong{color:var(--lime)}
.blk.deep .g-nums span,.blk.deep .g-nums b{color:rgba(255,255,255,.66)}
.blk.deep .g-prose h3{color:#fff}
.blk.deep .g-prose p{color:rgba(255,255,255,.74)}
.blk.deep .g-prose>section+section{border-color:var(--line-d)}

/* Charts are authored in a 1000-unit viewBox and capped at 1000px, so one
   viewBox unit renders as one pixel and the sizes below are literal. Without
   the cap a full-width chart scaled its viewBox up by about 1.3x inside the
   1360px shell, which enlarged every label with it: 20 units became 26px
   against 14px body text. */
.chart.wide{margin:44px 0 0;max-width:1000px}
.chart.wide svg{width:100%;height:auto;overflow:visible}
.chart .dl{font:600 15px var(--sans);fill:var(--ink);stroke:none}
.chart .dlb{font:700 15.5px var(--sans);fill:var(--ink);stroke:none}
.chart .dlw{font:700 15px var(--sans);fill:#c0392b;stroke:none}
.chart .ds{font:500 13px var(--sans);fill:var(--muted);stroke:none}
.chart .dk{font:700 11px var(--sans);fill:var(--muted);stroke:none;
  letter-spacing:.14em}
.chart .dkw{font:700 11px var(--sans);fill:#c0392b;stroke:none;
  letter-spacing:.14em}
.chart .dw{font:500 14px var(--sans);fill:rgba(255,255,255,.86);stroke:none}
.chart .dwb{font:700 15.5px var(--sans);fill:#fff;stroke:none}
.chart .dws{font:600 11px var(--sans);fill:rgba(255,255,255,.5);stroke:none;
  letter-spacing:.12em}
/* Ink on the lime fill. Same sizes as .dwb/.dws so a highlighted node in a
   flow keeps the same optical weight as the deep-green ones. */
.chart .dib{font:700 15.5px var(--sans);fill:var(--deep);stroke:none}
.chart .dis{font:600 11px var(--sans);fill:rgba(18,49,42,.6);stroke:none;
  letter-spacing:.12em}
.chart .dwarn{font:700 12px var(--sans);fill:#c0392b;stroke:none;
  letter-spacing:.1em}
.chart .dwarn2{font:700 13.5px var(--sans);fill:#c0392b;stroke:none}
.chart .dgood{font:500 13.5px var(--sans);fill:var(--green);stroke:none}
.chart .dbad{font:500 13.5px var(--sans);fill:#a5432f;stroke:none}
.blk.deep .chart .dl,.blk.deep .chart .dlb{fill:#fff}
.blk.deep .chart .ds,.blk.deep .chart .dk{fill:rgba(255,255,255,.6)}
.blk.deep .chart figcaption{color:rgba(255,255,255,.7);
  border-color:var(--line-d)}

.related{background:#eeece3;padding:84px var(--gut)}
.related h2{font-size:clamp(24px,2.6vw,34px);margin-top:26px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);margin-top:40px;border:1px solid var(--line)}
.rel-grid a{background:#eeece3;padding:28px 24px 64px;position:relative;
  transition:.22s;display:block}
.rel-grid a:hover{background:#e3e0d5}
.rel-grid b{display:block;font-size:10.5px;letter-spacing:.16em;
  color:var(--green);font-weight:700}
.rel-grid strong{display:block;margin-top:12px;font-size:19px;
  letter-spacing:-.02em}
.rel-grid .round{position:absolute;left:24px;bottom:22px}
.rel-grid a:hover .round{background:var(--deep);color:#fff;
  border-color:var(--deep)}

@media(max-width:1180px){
  /* Below this the two prose columns would both be too narrow, so the card
     drops under the text and stops being sticky. */
  .prose-wrap{grid-template-columns:1fr;gap:40px}
  .prose-aside{position:static;max-width:var(--read)}
  .g-grid,.g-grid.cols-4,.rel-grid{grid-template-columns:repeat(2,1fr)}
  .g-steps li{grid-template-columns:50px 190px 1fr;gap:16px}
  .g-nums{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  /* Diagrams stop scaling usefully below roughly 620px: the type inside the
     viewBox becomes unreadable. Below that they scroll horizontally inside
     their own box rather than shrinking the whole page. */
  .chart.wide{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .chart.wide svg{min-width:620px}
}
@media(max-width:900px){
  /* Stack, photo first: a 40vh band above the headline reads better than a
     half-width sliver beside it. */
  .page-hero.has-photo{grid-template-columns:1fr;gap:0;padding:0}
  .page-hero.has-photo .page-hero-copy{padding:56px var(--pad) 60px;
    order:2}
  .hero-photo{order:1;min-height:0;height:38vh}
  .hero-photo:after{background:linear-gradient(0deg,rgba(13,38,32,.9) 0%,
    rgba(13,38,32,.25) 44%,transparent 78%)}
}
@media(max-width:760px){
  .page-hero{padding:64px var(--pad) 56px}
  .page-hero h1{font-size:31px}
  .page-lead{font-size:15.5px;padding-left:16px}
  .page-answer{padding:60px var(--pad) 0}
  .page-answer p{font-size:16.5px;padding-left:18px}
  .blk{padding:60px var(--pad)}
  .g-grid,.g-grid.cols-2,.g-grid.cols-4,.rel-grid,.g-nums{
    grid-template-columns:1fr}
  .g-grid article{min-height:0}
  .g-nums strong{font-size:36px}
  .g-prose p{font-size:15px;line-height:1.95}
  .g-callout{padding:22px 20px}
  .g-cmp{font-size:13.5px;min-width:520px}
  .g-cmp th,.g-cmp td{padding:12px 8px}
  .g-cmp tbody th{width:34%}
  .g-steps li{grid-template-columns:1fr;gap:8px;padding:20px 4px}
  .g-spec th{width:auto}
  .g-spec,.g-spec tbody,.g-spec tr,.g-spec th,.g-spec td{display:block}
  .g-spec th{padding-bottom:4px;border:0}
  .g-spec tr{border-bottom:1px solid var(--line);padding:12px 0}
  .g-spec td{border:0;padding-top:0}
  .related{padding:60px var(--pad)}
}

@media(max-width:1180px){
  .svc-grid,.who-grid,.prod-grid{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(3,1fr)}
  .steps,.cert-list{grid-template-columns:repeat(2,1fr)}
  .logistics{grid-template-columns:1fr}
  .log-media{min-height:340px}
  .log-body{padding:88px var(--pad)}
  .hpp-grid{grid-template-columns:1fr;gap:60px}
}
@media(max-width:1024px){
  .mainnav{display:none}
  .burger{display:flex}
  .cert-grid{grid-template-columns:1fr}
  .certs-head,.ch-head,.approach-grid{grid-template-columns:1fr;gap:30px}
  .foot-top{grid-template-columns:1fr;gap:40px}
  .foot-nav{grid-template-columns:repeat(2,1fr)}
  body.nav-open .mainnav{display:block;position:fixed;inset:84px 0 0;
    background:var(--paper);overflow-y:auto;z-index:99;padding:20px var(--pad) 60px}
  body.nav-open .mainnav>ul{flex-direction:column;gap:0}
  body.nav-open .nav-top{padding:20px 0;font-size:18px;
    border-bottom:1px solid var(--line)}
  body.nav-open .nav-top:after{display:none}
  body.nav-open .mega{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-left:2px solid var(--lime);margin:8px 0 18px}
  body.nav-open{overflow:hidden}
}
@media(max-width:760px){
  :root{--pad:22px;--read:100%}
  section{padding:78px var(--pad)}
  /* The zh header carries brand + sub-line + lang + CTA + burger. At 390px
     that overflowed by 25px, so the CTA collapses to its arrow (the label
     stays in the accessibility tree) and the gaps tighten. */
  .site-header{height:72px;gap:10px}
  .header-right{gap:9px}
  .brand{font-size:14px;letter-spacing:.07em}
  .brand small{font-size:8.5px;letter-spacing:.2em}
  .mark{width:27px;height:27px}
  .lang{font-size:10.5px;letter-spacing:.08em;padding:8px 9px}
  .site-header .btn-line{font-size:0;gap:0;padding:12px 13px}
  .site-header .btn-line svg{width:19px}
  .burger{width:38px;height:34px}
  .hero{height:auto;min-height:0;max-height:none;padding:118px 0 0}
  /* relative + z-index, not static: .hero-veil is absolutely positioned and
     would otherwise paint over in-flow content and hide the h1 entirely. */
  .hero-body{position:relative;z-index:1;transform:none;
    padding:0 var(--pad) 56px}
  .hero h1{font-size:40px}
  .hero-lead br{display:none}
  .hero-proof{position:static;grid-template-columns:repeat(2,1fr)}
  .hero-proof div:nth-child(-n+2){border-top:1px solid var(--line-d)}
  .svc-grid,.who-grid,.prod-grid,.flow,.steps,.cert-list,.zones,.mkts{
    grid-template-columns:1fr}
  .svc{min-height:0;padding:28px 22px 76px}
  .prod{min-height:0;padding:28px 22px 84px}
  .flow>div,.who-grid article{min-height:0}
  .flow strong,.steps strong{margin-top:20px}
  .cta{flex-direction:column;align-items:flex-start;gap:40px}
  .cta-round{width:158px;height:158px;font-size:14px}
  .art-cta{padding:26px 22px;align-items:stretch}
  .art-cta .btn{justify-content:center}
  .answer{font-size:16px;padding-left:18px}
  .ch-list>div{grid-template-columns:52px 1fr 24px;font-size:17px;padding:20px 4px}
  .foot-nav{grid-template-columns:1fr}
  .zones{gap:0}
  .zones article{border-bottom:1px solid var(--line)}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}