/* Montserrat, self-hosted (SIL OFL 1.1, fonts/OFL.txt) */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat Fallback';src:local('Arial'),local('Liberation Sans'),local('Helvetica Neue');size-adjust:112.83%;ascent-override:85.79%;descent-override:22.25%;line-gap-override:0%}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/montserrat-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/montserrat-latin-800-normal.woff2) format('woff2')}
/* G i18n tr 02/11/2026: latin-ext (ğ ş İ Ğ Ş …) downloaded only when a page uses those letters */@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/montserrat-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/montserrat-latin-ext-800-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* G i18n ar 02/11/2026: Arabic faces, used only by html:lang(ar) (Montserrat has no Arabic glyphs) */
/* Wizea — version E: the same house (version D palette and typography), alive inside.
   White · Montserrat headings in indigo · orange accent · thin-line illustration system */

:root{
  --indigo:#2E318F;
  --indigo-deep:#232670;
  --indigo-ink:#1C1E5A;
  --indigo-soft:#E9EAF6;
  --indigo-line:#C9CBE6;
  --orange:#EC731D;           /* brand orange: decorative accents, 3px+ lines, badges */
  --orange-btn:#BF540A;       /* button fill: white text 4.7:1 */
  --orange-btn-hover:#A84708;
  --orange-text:#B5500A;      /* orange labels / icons on white or grey: 5.1:1 */
  --orange-on-indigo:#F6A86E; /* orange text on indigo: 5.5:1 */
  --ink:#1E2033;
  --body:#3E4357;
  --muted:#5B607A;
  --line:#E2E4EE;
  --band:#F3F4F9;
  --ok:#1E6B3A;
  --err:#A3250F;
  --shadow:0 10px 30px rgba(46,49,143,.08),0 2px 6px rgba(46,49,143,.05);
  --shadow-lift:0 22px 44px rgba(46,49,143,.14),0 4px 10px rgba(46,49,143,.06);
  --radius:14px;
  --head:"Montserrat","Montserrat Fallback","Segoe UI",Arial,sans-serif;
  --text:"Montserrat","Montserrat Fallback","Segoe UI",Arial,sans-serif;
  --zh:"PingFang SC","Microsoft YaHei","Noto Sans SC","Hiragino Sans GB",var(--text);
  --wrap:1180px;
  --gutter:20px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-s:.4s; --dur-m:.65s; --dur-l:.9s;

  /* F-R04 tokens (dark mode). Light values = the literals they replaced; dark values in styles_dark.css */
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --hdr-glass:rgba(255,255,255,.88);
  --hdr-bg:#FFFFFF;
  --hdr-shadow:0 6px 24px rgba(28,30,90,.08);
  --fill:#2E318F;             /* indigo as a surface (bands, footer, buttons, table heads); --indigo is the text/line role */
  --fill-violet:#4B3C9A;
  --on-fill:#FFFFFF;          /* text and icons on --fill / photos */
  --chip-on-fill:#FFFFFF;     /* light chip or button sitting on a fill */
  --on-orange:#FFFFFF;        /* text on --orange-btn */
  --orange-tint:#FFF7F0;
  --orange-tint-2:#FFF4EA;
  --orange-tint-line:#F3C6A3;
  --box-tint:#FBF3EC;
  --field-bg:#FFFFFF;
  --field-line:#8A8EB5;
  --focus-halo:rgba(46,49,143,.12);
  --err-line:#C8321A;
  --err-halo:rgba(200,50,26,.12);
  --open-line:rgba(46,49,143,.3);
  --shadow-pop:0 10px 30px rgba(30,32,51,.12);
  --glow-indigo:rgba(46,49,143,.08);
  --map-land:#EEF0F8;
  --map-land-line:#9EA2CF;
  --map-dot:#C9CBE6;
  --flow-in:#F2B07D;
  --flow-out:#8E91C9;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;font-family:var(--text);font-size:16px;line-height:1.65;color:var(--body);background:var(--bg);overflow-x:hidden}
.js body{opacity:0;transition:opacity .18s linear}
.js body.ready{opacity:1}
.js body.leaving{opacity:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--indigo)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--orange-text);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--head);color:var(--indigo);line-height:1.15;margin:0 0 .5em;font-weight:700;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.8vw,3.5rem)}
h2{font-size:clamp(1.65rem,3.1vw,2.35rem)}
h3{font-size:1.2rem}
h4{font-size:1rem}
p{margin:0 0 1em}
ul,ol{padding-left:1.2em}
strong{color:var(--ink)}
hr{border:0;border-top:1px solid var(--line);margin:40px 0}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;background:var(--band);padding:1px 6px;border-radius:5px;color:var(--indigo)}
.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.wrap-n{width:min(860px,100% - 2*var(--gutter));margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--fill);color:var(--on-fill);padding:10px 14px;z-index:200;border-radius:6px}
.skip:focus{left:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-text);margin-bottom:12px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange);border-radius:2px}
.on-indigo .eyebrow,.eyebrow.light{color:var(--orange-on-indigo)}
.lead{font-size:1.12rem;color:var(--body)}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.sec{padding:88px 0}
.sec-tight{padding:56px 0}
.band{background:var(--band)}
.on-indigo{background:var(--fill);color:#DADBF2}
.on-indigo h1,.on-indigo h2,.on-indigo h3,.on-indigo h4{color:var(--on-fill)}
.on-indigo strong{color:var(--on-fill)}
.on-indigo a{color:var(--on-fill)}
.on-indigo a:focus-visible{outline-color:var(--orange-on-indigo)}
.sec-head{max-width:760px;margin:0 auto 46px;text-align:center}
.sec-head p{font-size:1.05rem}
.sec-head.left{margin-left:0;text-align:left}
.sec-head.left .eyebrow{justify-content:flex-start}
.grid{display:grid;gap:24px}
.grid>*,.steps>*,.g12>*{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g12{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.c7{grid-column:span 7}.c5{grid-column:span 5}.c6{grid-column:span 6}
@media (max-width:980px){.g3{grid-template-columns:repeat(2,1fr)}.g12{grid-template-columns:1fr}.c7,.c5,.c6{grid-column:auto}}
@media (max-width:640px){.g2,.g3{grid-template-columns:1fr}.sec{padding:62px 0}}
.prose{max-width:70ch}
.prose h2{margin-top:1.7em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose h3{margin-top:1.4em}
.prose ul li,.prose ol li{margin-bottom:.45em}
.prose figure{margin:28px 0}
.prose .lead{font-size:1.15rem;color:var(--ink)}
.prose blockquote{margin:24px 0;padding:18px 22px;border-left:4px solid var(--orange);background:var(--band);border-radius:0 12px 12px 0;color:var(--ink)}
.prose blockquote p:last-child{margin:0}
.answer{font-size:1.15rem;line-height:1.6;color:var(--ink);max-width:70ch}
.answer strong{color:var(--indigo)}
.notice{border:1px solid var(--indigo-line);background:var(--indigo-soft);border-radius:12px;padding:16px 20px;font-size:.95rem;color:var(--ink)}
.notice.warn{background:var(--orange-tint-2);border-color:var(--orange-tint-line)}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--indigo-line);border-radius:999px;padding:4px 12px;font-size:.78rem;font-weight:700;color:var(--indigo);letter-spacing:.03em;background:var(--surface)}
.pill.ok{color:var(--ok);border-color:#BFE0CB;background:#EEF8F1}
.chip{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.04em;padding:4px 10px;border-radius:7px;background:var(--indigo-soft);color:var(--indigo)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--head);font-weight:700;font-size:.95rem;padding:14px 26px;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s;line-height:1.1;min-height:46px}
.btn-orange{background:var(--orange-btn);color:var(--on-orange);box-shadow:0 8px 20px rgba(236,115,29,.26)}
.btn-orange:hover{background:var(--orange-btn-hover);transform:translateY(-2px);box-shadow:0 12px 26px rgba(236,115,29,.32)}
.btn-indigo{background:var(--fill);color:var(--on-fill)}
.btn-indigo:hover{background:var(--indigo-deep);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--indigo);border-color:var(--indigo)}
.btn-outline:hover{background:var(--fill);color:var(--on-fill)}
.btn-white:hover{background:#eef0ff;transform:translateY(-2px)}
.btn-ghost-white{background:transparent;color:var(--on-fill);border-color:rgba(255,255,255,.78)}
.btn-ghost-white:hover{background:var(--chip-on-fill);color:var(--fill)}
.btn svg{width:18px;height:18px;flex:none}
.btn-sm{padding:11px 18px;font-size:.85rem;min-height:44px}
.btn:disabled{opacity:.6;cursor:progress;transform:none}
.link-arrow{font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.link-arrow::after{content:"→";transition:transform .25s var(--ease)}
.link-arrow:hover::after{transform:translateX(4px)}
.link-arrow:hover{text-decoration:underline}

/* Header: white bar that solidifies; three disclosure menus; two fixed CTAs */
.site-header{position:sticky;top:0;z-index:100;background:var(--hdr-glass);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:background .3s,box-shadow .3s,border-color .3s}
.site-header.is-solid{background:var(--hdr-bg);box-shadow:var(--hdr-shadow);border-color:var(--line)}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:16px;height:78px}
.brand{display:inline-flex}
.brand img{width:148px;height:auto}
.nav{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.nav>li{position:relative}
.nav a,.nav button{font-family:var(--head);font-weight:600;font-size:.92rem;color:var(--indigo);text-decoration:none;padding:10px 12px;border-radius:8px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.nav a:hover,.nav button:hover,.nav button[aria-expanded="true"]{background:var(--band)}
.nav .caret{width:12px;height:12px;transition:transform .25s}
.nav button[aria-expanded="true"] .caret{transform:rotate(180deg)}
.dd{position:absolute;top:calc(100% + 8px);left:0;min-width:320px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lift);padding:8px;margin:0;list-style:none;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear .22s}
.dd.wide{min-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:0 6px}
.nav>li.open>.dd{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dd a{display:block;width:100%;padding:10px 12px;border-radius:9px;font-weight:600;font-size:.9rem;line-height:1.3;min-height:0}
.dd a small{display:block;font-weight:500;color:var(--muted);font-size:.78rem;margin-top:2px}
.dd a:hover{background:var(--band)}
.hdr-ctas{display:flex;gap:8px;align-items:center}
.menu-btn{display:none;background:none;border:2px solid var(--indigo);border-radius:10px;width:46px;height:44px;cursor:pointer;color:var(--indigo);align-items:center;justify-content:center}
.menu-btn svg{width:22px;height:22px}
.menu-btn .x{display:none}
.menu-btn[aria-expanded="true"] .x{display:block}
.menu-btn[aria-expanded="true"] .bars{display:none}
@media (max-width:1100px){.hdr-ctas .btn-outline{display:none}}
@media (max-width:980px){
  .hdr{height:68px}
  .brand img{width:124px}
  .nav,.hdr-ctas{display:none}
  .menu-btn{display:inline-flex}
}
.mobile-nav{background:var(--surface);border-top:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.mobile-nav.open{max-height:calc(100vh - 68px);overflow:auto}
@media (min-width:981px){.mobile-nav{display:none}}
.mobile-nav ul{list-style:none;margin:0;padding:10px 0 22px}
.mobile-nav li>span{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--orange-text);padding:16px 0 6px}
.mobile-nav a{display:block;padding:11px 0;font-weight:600;text-decoration:none;color:var(--indigo);border-bottom:1px solid var(--line);font-size:1rem}
.mobile-nav .mctas{display:flex;gap:10px;flex-wrap:wrap;padding-top:18px}
.mobile-nav .mctas a{border-bottom:0}
.mobile-nav ul li .btn{display:inline-flex;padding:13px 22px;border-radius:999px;border-bottom:0}
.mobile-nav ul li .btn-orange{color:var(--on-orange)}

/* Thin-line spots (inline SVG symbols; draw-on via inherited dash properties and pathLength="1") */
.spot{width:72px;height:72px;color:var(--indigo);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none;overflow:visible}
.spot.lg{width:120px;height:120px;stroke-width:1.6}
.spot.xl{width:min(100%,360px);height:auto;aspect-ratio:1;stroke-width:1.4}
.spot.sm{width:44px;height:44px;stroke-width:2.2}
.on-indigo .spot,.spot.light{color:var(--on-fill)}
.js .spot.draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--dur-l) var(--ease)}
.js .spot.draw.in,.js .in>.spot.draw,.js .in .spot.draw{stroke-dashoffset:0}
.js .spot.draw .acc{transition:opacity var(--dur-s) var(--ease) var(--dur-m);opacity:0}
.js .spot.draw.in .acc,.js .in .spot.draw .acc{opacity:1}

/* Hero (home): schematic animated map + headline in three beats */
.hero{position:relative;overflow:hidden;background:var(--bg);isolation:isolate}
.hero::before{content:"";position:absolute;inset:auto -10% -40% -10%;height:70%;background:radial-gradient(ellipse at 70% 100%,rgba(236,115,29,.10),transparent 60%),radial-gradient(ellipse at 20% 100%,var(--glow-indigo),transparent 55%);z-index:-1;pointer-events:none}
.hero h1{font-size:clamp(2.2rem,4.4vw,3.6rem);margin-bottom:20px}
.hero h1 .b{display:block}
.hero h1 .b2{color:var(--orange-text)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.map .land{fill:var(--map-land);stroke:var(--map-land-line);stroke-width:.7;stroke-linejoin:round}
.map .route{fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round}
.js .map .route{stroke-dasharray:1;stroke-dashoffset:1}
.js .map.go .route{animation:draw 2.4s var(--ease) forwards}
.js .map.go .route.r1{animation-delay:.3s;animation-duration:1.2s}
.js .map.go .route.r2{animation-delay:1.3s}
.js .map.go .route.r3{animation-delay:1.7s;animation-duration:2s}
@keyframes draw{to{stroke-dashoffset:0}}
@media (max-width:980px){.hero h1{font-size:clamp(2rem,8vw,2.6rem)}}

/* Credentials strip: enters as the last beat */
.cred{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cred ul{list-style:none;margin:0;padding:18px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px 24px}
.cred li{display:flex;align-items:center;gap:12px;min-width:0}
.cred .spot{width:40px;height:40px;stroke-width:2;color:var(--orange-text)}
.cred a{font-family:var(--head);font-weight:700;font-size:.9rem;color:var(--indigo);text-decoration:none;display:block;line-height:1.25}
.cred a:hover{text-decoration:underline}
.cred small{display:block;font-size:.74rem;color:var(--muted);font-weight:500;margin-top:2px;overflow-wrap:anywhere}
@media (max-width:980px){.cred ul{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cred ul{grid-template-columns:1fr;gap:10px}}

/* Method: five steps joined by a drawn line */
.method{position:relative}
.method-line{position:absolute;left:0;right:0;top:46px;height:4px;pointer-events:none}
.method-line svg{width:100%;height:4px;display:block;overflow:visible}
.method-line path{fill:none;stroke:var(--indigo-line);stroke-width:2}
.method-line path.prog{stroke:var(--orange);stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s var(--ease)}
.method.in .method-line path.prog{stroke-dashoffset:0}
.msteps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;list-style:none;margin:0;padding:0;counter-reset:ms}
.mstep{position:relative;padding-top:20px;display:flex;flex-direction:column;gap:10px}
.mstep .spotwrap{width:96px;height:96px;border-radius:50%;background:var(--surface);border:2px solid var(--indigo-line);display:grid;place-items:center;position:relative;z-index:1;margin-left:0;transition:border-color .5s,box-shadow .5s}
.mstep .spotwrap::after{counter-increment:ms;content:counter(ms);position:absolute;right:-6px;top:-6px;width:28px;height:28px;border-radius:50%;background:var(--orange-btn);color:var(--on-fill);font-family:var(--head);font-weight:800;font-size:.8rem;display:grid;place-items:center}
.mstep.in .spotwrap{border-color:var(--indigo);box-shadow:0 0 0 6px var(--indigo-soft)}
.mstep .spot{width:60px;height:60px}
.mstep h3{font-size:1.05rem;margin:6px 0 0}
.mstep .claim{font-weight:600;color:var(--ink);font-size:.95rem;margin:0}
.mstep .more{font-size:.88rem;margin:0;color:var(--body)}
.mstep .deliv{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;color:var(--indigo);background:var(--indigo-soft);border-radius:9px;padding:7px 10px;align-self:flex-start;opacity:0;transform:translateY(6px);transition:opacity var(--dur-s) var(--ease) .4s,transform var(--dur-s) var(--ease) .4s}
.mstep .deliv svg{width:16px;height:16px;flex:none}
.mstep.in .deliv{opacity:1;transform:none}
html:not(.js) .mstep .deliv{opacity:1;transform:none}
@media (max-width:980px){.msteps{grid-template-columns:1fr 1fr}.method-line{display:none}}
@media (max-width:600px){.msteps{grid-template-columns:1fr;gap:28px}.mstep{padding-top:0;padding-left:0}}

/* Anatomy of a quotation line */
.qline{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.qcell:last-child{border-right:0}
.qcell button::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-m) var(--ease)}
.qcell.lit button::before{transform:scaleX(1)}
.qcell button:hover{background:var(--band)}
@keyframes fadeUp{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:980px){.qcell:nth-child(3){border-right:0}.qcell:nth-child(-n+3) button{border-bottom:1px solid var(--line)}}

/* Numbers */
.num-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}

/* Service cards */
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}

/* Company story: indigo block (About) */
.story{position:relative;overflow:hidden}
.story .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding:30px 0}
.story p{font-size:1.15rem;line-height:1.6;color:#E6E7F7;max-width:52ch}
@media (max-width:900px){.story .wrap{grid-template-columns:1fr;gap:20px}}

/* Shenzhen band (deep indigo) */
.band-deep::after{content:"";position:absolute;right:-160px;top:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(236,115,29,.35),transparent 65%);pointer-events:none}
.changes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 28px;list-style:none;margin:30px 0 0;padding:0;counter-reset:ch}
.changes li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:18px 0;border-top:1px solid rgba(255,255,255,.18)}
.changes li::before{counter-increment:ch;content:"0" counter(ch);font-family:var(--head);font-weight:800;color:var(--orange-on-indigo);font-size:1.4rem;line-height:1}
.changes b{display:block;color:var(--on-fill);font-family:var(--head);margin-bottom:4px}
.changes p{margin:0;font-size:.95rem}
.band-deep .report-line::before{content:"";width:34px;height:3px;background:var(--orange)}
@media (max-width:760px){.changes{grid-template-columns:1fr}}

/* Photo frame with process caption (inner pages) */
.photo{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lift);background:var(--band);position:relative}
.photo img{width:100%;height:auto;display:block}
.photo.cover{aspect-ratio:4/3}
.photo.cover img{height:100%;object-fit:cover}
.photo figcaption{font-size:.84rem;color:var(--muted);padding:12px 16px;background:var(--surface);border-top:1px solid var(--line)}
.photo figcaption b{color:var(--indigo);font-weight:700;display:block;margin-bottom:2px}

/* Payment rules: three stamps */
.rules{background:var(--surface);border:2px solid var(--indigo);border-radius:var(--radius);padding:34px 32px;position:relative;box-shadow:var(--shadow)}
.rules .quote{font-family:var(--head);font-weight:700;color:var(--indigo);font-size:1.15rem;line-height:1.45;max-width:60ch;margin:0 0 26px}
.rules ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rule{border:2px solid var(--orange);border-radius:12px;padding:20px 20px 18px;position:relative;background:var(--surface)}
.rule .n{position:absolute;top:-14px;left:16px;background:var(--orange-btn);color:var(--on-fill);font-family:var(--head);font-weight:800;font-size:.78rem;letter-spacing:.1em;padding:4px 10px;border-radius:999px}
.rule b{display:block;font-family:var(--head);color:var(--indigo);font-size:1.02rem;margin:4px 0 6px}
.rule p{margin:0;font-size:.92rem}
.js .rule{opacity:0;transform:scale(1.18) rotate(-3deg);transition:opacity var(--dur-s) var(--ease),transform var(--dur-s) cubic-bezier(.3,1.4,.4,1)}
.js .in .rule{opacity:1;transform:none}
.js .in .rule:nth-child(2){transition-delay:.35s}.js .in .rule:nth-child(3){transition-delay:.7s}
.rules .after{margin:22px 0 0;font-size:.92rem}
@media (max-width:860px){.rules ol{grid-template-columns:1fr}.rules{padding:26px 20px}}

/* Suppliers band */
.supband .zh:hover{text-decoration:underline}

/* FAQ accordion with six-language question lines */
.faq{max-width:900px;margin:0 auto}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden;transition:box-shadow .3s}
.faq details[open]{box-shadow:var(--shadow);border-color:var(--open-line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 56px 16px 22px;font-family:var(--head);font-weight:700;color:var(--indigo);position:relative;font-size:1.02rem;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:24px;top:25px;width:9px;height:9px;border-right:2.5px solid var(--orange-text);border-bottom:2.5px solid var(--orange-text);transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg);top:32px}
.faq .langs{display:block;font-family:var(--text);font-weight:500;font-size:.78rem;color:var(--muted);margin-top:5px;line-height:1.5}
.faq .langs span{display:inline}
.faq .langs span+span::before{content:" · ";color:var(--indigo-line)}
.faq .ans{padding:0 22px 20px;color:var(--body);font-size:.97rem}
.faq .ans p:last-child{margin:0}
.faq details[open] .ans{animation:fadeUp .35s var(--ease)}
.faq-group{margin:0 0 44px}
.faq-group .faq{max-width:none}
.faq-group h2{font-size:1.4rem;padding-bottom:10px;border-bottom:2px solid var(--indigo-soft);margin-bottom:18px}
.faq-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 36px;padding:0;list-style:none}
.faq-nav a{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid var(--indigo-line);text-decoration:none;font-size:.84rem;font-weight:600;color:var(--indigo);background:var(--surface)}
.faq-nav a:hover{background:var(--fill);color:var(--on-fill)}

/* CTA band */
.cta{background:linear-gradient(120deg,var(--indigo-deep) 0%,var(--fill) 60%,var(--fill-violet) 100%);color:var(--on-fill);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(236,115,29,.45),transparent 65%)}
.cta .wrap{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:32px;padding:66px 0}
.cta h2{color:var(--on-fill);margin:0 0 8px;max-width:22ch}
.cta p{color:#DADBF2;margin:0;max-width:60ch}
.cta .acts{display:flex;gap:12px;flex-wrap:wrap}
.cta .acts .btn-ghost-white{flex-wrap:wrap;text-align:center}
@media (max-width:860px){.cta .wrap{grid-template-columns:1fr}}

/* Inner page banner: indigo with a large white-line spot */
.banner{position:relative;color:var(--on-fill);overflow:hidden;background:linear-gradient(100deg,var(--indigo-deep) 0%,var(--fill) 55%,var(--fill-violet) 100%)}
.banner::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 15% 110%,rgba(236,115,29,.28),transparent 55%);pointer-events:none}
.banner .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;align-items:center;padding:64px 0 56px}
.banner h1{color:var(--on-fill);margin-bottom:14px}
.banner .lead{color:#F1F1FB;font-size:1.1rem;max-width:62ch;margin:0}
.banner .crumbs{font-size:.8rem;color:#DADBF2;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:4px 8px;padding:0;list-style:none}
.banner .crumbs a{color:var(--on-fill);text-decoration:none}
.banner .crumbs a:hover{text-decoration:underline}
.banner .crumbs li+li::before{content:"/";margin-right:8px;color:#9EA2CF}
.banner .art{display:grid;place-items:center}
.banner .art .spot{width:min(100%,300px);height:auto;aspect-ratio:1;color:var(--on-fill);stroke-width:1.3;filter:drop-shadow(0 10px 30px rgba(0,0,0,.25))}
.banner .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.banner .meta .pill{background:rgba(255,255,255,.1);color:var(--on-fill);border-color:rgba(255,255,255,.35)}
@media (max-width:900px){.banner .wrap{grid-template-columns:1fr;padding:44px 0 36px}.banner .art{order:-1;justify-content:flex-start}.banner .art .spot{width:120px}}

/* Guide template: 7/5 with sticky "How Wizea does it" */
.guide{display:grid;grid-template-columns:8fr 4fr;gap:44px;align-items:start}
.guide .body .tbl-wrap table{font-size:.86rem}
.guide .body .tbl-wrap th,.guide .body .tbl-wrap td{padding:10px 10px}
.guide .body{max-width:70ch}
.guide .body h2{margin-top:1.8em;font-size:1.5rem}
.guide .body h2:first-child{margin-top:0}
.guide .body h3{margin-top:1.4em;font-size:1.15rem}
.howbox{position:sticky;top:98px;background:var(--fill);color:#DADBF2;border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow-lift)}
.howbox h2,.howbox h3{color:var(--on-fill);font-size:1.1rem;margin:0 0 12px;display:flex;align-items:center;gap:10px}
.howbox h2::before,.howbox h3::before{content:"";width:22px;height:3px;background:var(--orange)}
.howbox ul{margin:0;padding-left:1.1em}
.howbox li{margin-bottom:.6em;font-size:.93rem}
.howbox li::marker{color:var(--orange-on-indigo)}
.howbox .btn{margin-top:14px}
.howbox a:not(.btn){color:var(--on-fill)}
.reviewed{font-size:.82rem;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;margin:0 0 28px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.toc{background:var(--band);border-radius:12px;padding:18px 22px;margin:0 0 30px;font-size:.92rem}
.toc b{display:block;color:var(--indigo);font-family:var(--head);margin-bottom:6px;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.toc ol{margin:0;padding-left:1.2em}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
@media (max-width:980px){.guide{grid-template-columns:1fr;gap:28px}.howbox{position:static}}
.guide-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.gcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--indigo-line)}
.gcard .spot{width:56px;height:56px}
.gcard .k{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--orange-text)}
.gcard h3{font-size:1rem;margin:0}
.gcard p{margin:0;font-size:.86rem;color:var(--muted);flex:1}
.gcard .link-arrow{font-size:.86rem}
@media (max-width:980px){.guide-cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.guide-cards{grid-template-columns:1fr}}

/* Comparison tables: sticky header, scroll indicator on mobile */
.tbl-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin:16px 0 28px;-webkit-overflow-scrolling:touch}
.tbl-wrap table{width:100%;min-width:620px;border-collapse:separate;border-spacing:0;font-size:.92rem}
.tbl-wrap th,.tbl-wrap td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl-wrap thead th{position:sticky;top:0;background:var(--fill);color:var(--on-fill);font-family:var(--head);font-size:.82rem;letter-spacing:.03em;z-index:1}
.tbl-wrap thead th:first-child{border-top-left-radius:11px}
.tbl-wrap thead th:last-child{border-top-right-radius:11px}
.tbl-wrap tbody th{font-weight:700;color:var(--indigo);background:var(--band);white-space:nowrap}
.tbl-wrap tbody tr:last-child td,.tbl-wrap tbody tr:last-child th{border-bottom:0}
.tbl-wrap td.w{background:var(--orange-tint)}
.tbl-wrap .tick{color:var(--ok);font-weight:700}
.tbl-wrap.can-scroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:48px;background:linear-gradient(90deg,transparent,var(--surface));pointer-events:none;border-radius:0 12px 12px 0}
.tbl-wrap.can-scroll.at-end::after{opacity:0}
.scroll-hint{display:none;font-size:.78rem;color:var(--muted);margin:-20px 0 24px;align-items:center;gap:6px}
.scroll-hint svg{width:16px;height:16px}
.tbl-wrap.can-scroll + .scroll-hint{display:flex}
.tbl-wrap.sticky-left tbody th,.tbl-wrap.sticky-left thead th:first-child{position:sticky;left:0;z-index:2}
.tbl-wrap.sticky-left thead th:first-child{z-index:3}

/* Steps (generic), values, cards */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
.step{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 24px;position:relative;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.step .num{width:44px;height:44px;border-radius:50%;background:var(--orange-btn);color:var(--on-fill);font-family:var(--head);font-weight:800;display:grid;place-items:center;font-size:1.05rem;margin-bottom:14px}
.step h3{font-size:1.02rem}
.step p{margin:0;font-size:.93rem}
@media (max-width:640px){.steps{grid-template-columns:1fr}}
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 26px}
.card h3{font-size:1.05rem}
.card .spot{width:56px;height:56px;margin-bottom:12px}
.card p:last-child{margin:0}
.val{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 24px;border-left:4px solid var(--orange);transition:transform .3s var(--ease)}
.val:hover{transform:translateY(-4px)}
.val h3{font-size:1.02rem;margin-bottom:6px}
.val p{margin:0;font-size:.93rem}
.val .practice{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--orange-text);margin-top:10px}

/* Timeline / flow (how we work) */
.flow::before{content:"";position:absolute;left:27px;top:8px;bottom:8px;width:2px;background:var(--indigo-line)}
.flow>li::before{content:counter(fl);position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;background:var(--surface);border:2px solid var(--indigo);color:var(--indigo);font-family:var(--head);font-weight:800;display:grid;place-items:center;font-size:1.05rem;z-index:1;transition:background .5s,color .5s,box-shadow .5s}
.js .flow>li.in::before{background:var(--fill);color:var(--on-fill);box-shadow:0 0 0 6px var(--indigo-soft)}
@media (max-width:600px){.flow::before{left:19px}.flow>li::before{width:40px;height:40px;font-size:.9rem}}

/* Report mock (inspection report format) */
.report{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);font-size:.88rem;overflow:hidden;max-width:620px}
.report .rh{display:flex;justify-content:space-between;gap:10px;padding:12px 16px;background:var(--band);border-bottom:1px solid var(--line);font-family:var(--head);font-weight:700;color:var(--indigo);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.report dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;padding:14px 16px}
.report dt{color:var(--muted)}
.report dd{margin:0;color:var(--ink)}
.report .stamp{display:inline-block;border:2px solid var(--ok);color:var(--ok);font-family:var(--head);font-weight:800;letter-spacing:.14em;font-size:.72rem;padding:4px 8px;border-radius:6px;transform:rotate(-4deg)}
.report .foot{padding:10px 16px;border-top:1px dashed var(--line);font-size:.78rem;color:var(--muted)}

/* Certificates */
.cert{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 28px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}
.cert .badge{width:84px;height:84px;border-radius:50%;background:var(--fill);color:var(--on-fill);display:grid;place-items:center;text-align:center;font-family:var(--head);font-weight:800;line-height:1.05;font-size:.74rem;border:4px solid var(--orange)}
.cert .badge span{display:block;font-size:.95rem}
.cert dl{margin:10px 0 16px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.9rem}
.cert dt{color:var(--muted)}
.cert dd{margin:0;color:var(--ink);font-weight:500;word-break:break-word}
.cert .acts{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:560px){.cert{grid-template-columns:1fr}}

/* Facts block */
.facts{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:6px 0}
.facts dl{margin:0;display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:0}
.facts dt{padding:12px 20px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--indigo);border-bottom:1px solid var(--line);background:var(--band)}
.facts dd{margin:0;padding:12px 20px;border-bottom:1px solid var(--line);font-size:.93rem;color:var(--ink);overflow-wrap:anywhere}
.facts dt:last-of-type,.facts dd:last-of-type{border-bottom:0}
@media (max-width:560px){.facts dl{grid-template-columns:1fr}.facts dt{border-bottom:0;padding-bottom:2px}}

/* Hubs */
.hubs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:980px){.hubs{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.hubs{grid-template-columns:1fr}}
.netmap{margin:0;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.netmap svg{width:100%;height:auto;display:block;overflow:visible}

/* Glossary */
.gloss{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 40px;margin:0}
.gloss div{padding:16px 0;border-bottom:1px solid var(--line)}
.gloss dt{font-family:var(--head);font-weight:700;color:var(--indigo);font-size:1rem}
.gloss dt .zh{font-family:var(--zh);font-weight:500;color:var(--muted);font-size:.9rem;margin-left:6px}
.gloss dd{margin:4px 0 0;font-size:.93rem}
.gloss dd a{font-weight:600}
.alpha{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 30px;padding:0;list-style:none}
.alpha a{display:inline-grid;place-items:center;min-width:36px;height:36px;border-radius:8px;border:1px solid var(--indigo-line);text-decoration:none;font-weight:700;font-size:.85rem}
.alpha a:hover{background:var(--fill);color:var(--on-fill)}
@media (max-width:760px){.gloss{grid-template-columns:1fr}}

/* Forms */
.form-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lift);padding:36px 32px}
@media (max-width:640px){.form-card{padding:26px 20px}}
.field label{display:block;font-weight:600;font-size:.88rem;color:var(--indigo);margin-bottom:6px}
.field label .req{color:var(--orange-text)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:.95rem;padding:12px 14px;border:1.5px solid var(--field-line);border-radius:10px;background:var(--field-bg);color:var(--ink);transition:border-color .2s,box-shadow .2s;min-height:46px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--indigo);box-shadow:0 0 0 4px var(--focus-halo);outline:none}
.field textarea{min-height:130px;resize:vertical}
.field .hint{font-size:.8rem;color:var(--muted);margin-top:5px}
.field .err{display:none;font-size:.82rem;color:var(--err);margin-top:6px;font-weight:600}
.field .warn{display:none;font-size:.82rem;color:#7A4A12;margin-top:6px;font-weight:600}
.field.warned .warn{display:block}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--err-line);box-shadow:0 0 0 4px var(--err-halo)}
.field.invalid .err{display:block}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem}
.check input{width:20px;height:20px;min-height:0;margin:2px 0 0;flex:none;accent-color:var(--indigo)}
.check label{font-weight:500;color:var(--body);margin:0}
.field.invalid .check label{color:var(--err)}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px 16px}
.checks .check{font-size:.88rem}
.form-ok[hidden]{display:none}
.form-ok{text-align:center;padding:30px 10px}
.form-ok .spot{width:84px;height:84px;margin:0 auto 14px;color:var(--ok)}
.progress{height:8px;background:var(--band);border-radius:999px;overflow:hidden;margin:14px 0;display:none}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--indigo),var(--orange));transition:width .25s linear}
.progress.show{display:block}
.form-status{font-size:.86rem;color:var(--muted);min-height:1.2em}
/* Upload zone */
.drop{border:2px dashed var(--field-line);border-radius:12px;padding:20px;background:var(--band);text-align:center;transition:border-color .2s,background .2s;position:relative}
.drop.over{border-color:var(--indigo);background:var(--indigo-soft)}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;min-height:0}
.drop .spot{width:40px;height:40px;margin:0 auto 8px;color:var(--indigo)}
.drop b{display:block;color:var(--indigo);font-family:var(--head);font-size:.92rem}
.drop span{display:block;font-size:.8rem;color:var(--muted);margin-top:4px}
.drop input:focus-visible ~ b{outline:3px solid var(--orange-text);outline-offset:6px;border-radius:4px}
.thumbs{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.thumbs li{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface);font-size:.72rem}
.thumbs li .im{height:80px;background:var(--band);display:grid;place-items:center;color:var(--indigo);overflow:hidden}
.thumbs li img{width:100%;height:100%;object-fit:cover}
.thumbs li .im .spot{width:30px;height:30px}
.thumbs li .nm{padding:6px 8px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumbs li .sz{padding:0 8px 6px;color:var(--muted)}
.thumbs li .rm{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(28,30,90,.85);color:var(--on-fill);cursor:pointer;font-size:.8rem;line-height:1;display:grid;place-items:center}
.thumbs li.bad{border-color:var(--err-line)}
.thumbs li.bad .sz{color:var(--err);font-weight:700}

/* Contact cards */
.ccard a:hover{text-decoration:underline}

/* Chinese block */
.zh-block{font-family:var(--zh);background:var(--surface);border:1px solid var(--indigo-line);border-left:5px solid var(--orange);padding:26px 28px;border-radius:0 14px 14px 0;font-size:1.02rem;color:var(--ink);line-height:1.9;box-shadow:var(--shadow)}
.zh-block h2{font-family:var(--zh);font-size:1.35rem;margin-bottom:10px}
.zh-block p{margin:0 0 .6em}
.zh-block p:last-child{margin:0}

/* Stages table (supplier) */
.stages{list-style:none;margin:0;padding:0;counter-reset:st}
.stages li{display:grid;grid-template-columns:48px 1fr auto;gap:16px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line);counter-increment:st}
.stages li::before{content:counter(st);width:40px;height:40px;border-radius:50%;background:var(--indigo-soft);color:var(--indigo);font-family:var(--head);font-weight:800;display:grid;place-items:center}
.stages b{display:block;color:var(--indigo);font-family:var(--head)}
.stages p{margin:2px 0 0;font-size:.9rem}
.stages .when{font-size:.8rem;font-weight:700;color:var(--orange-text);white-space:nowrap;padding-top:10px}
@media (max-width:560px){.stages li{grid-template-columns:40px 1fr}.stages .when{grid-column:2;padding-top:0}}

/* Footer: indigo, big white logo, fact block, languages line */
.site-footer{background:var(--fill);color:#DADBF2;padding:70px 0 30px;position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;left:-120px;bottom:-200px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(236,115,29,.28),transparent 65%)}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:40px;position:relative}
.foot .brand img{width:210px}
.foot p{font-size:.92rem;margin:18px 0 0;max-width:360px}
.foot .tag{font-family:var(--head);font-weight:700;color:var(--on-fill);margin-top:14px;font-size:.95rem}
.foot h4{color:var(--on-fill);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin:6px 0 16px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px;font-size:.92rem}
.foot a{color:var(--on-fill);text-decoration:none}
.foot a:hover{text-decoration:underline;color:var(--orange-on-indigo)}
.foot address{font-style:normal;font-size:.92rem;line-height:1.6}
.certs{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.certs a,.certs span{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:6px 12px;font-size:.72rem;font-weight:700;color:var(--on-fill);letter-spacing:.03em;text-decoration:none}
.certs i{width:8px;height:8px;border-radius:50%;background:var(--orange);display:inline-block}
.foot-facts{margin-top:44px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:repeat(4,1fr);gap:18px 28px;font-size:.84rem;position:relative}
.foot-facts b{display:block;color:var(--on-fill);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.legal{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;font-size:.82rem;position:relative}
.legal a{color:var(--on-fill);text-decoration:none;margin-left:18px}
.legal a:hover{text-decoration:underline}
@media (max-width:980px){.foot{grid-template-columns:1fr 1fr}.foot-facts{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.foot{grid-template-columns:1fr;gap:28px}.foot-facts{grid-template-columns:1fr}.legal a{margin-left:0;margin-right:16px}}

/* Reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity var(--dur-m) var(--ease),transform var(--dur-m) var(--ease)}
.js .rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}.rv-d4{transition-delay:.4s}.rv-d5{transition-delay:.5s}
.js .stagger>*{opacity:0;transform:translateY(18px);transition:opacity var(--dur-m) var(--ease),transform var(--dur-m) var(--ease)}
.js .stagger.in>*{opacity:1;transform:none}
.js .stagger.in>*:nth-child(2){transition-delay:.12s}.js .stagger.in>*:nth-child(3){transition-delay:.24s}.js .stagger.in>*:nth-child(4){transition-delay:.36s}.js .stagger.in>*:nth-child(5){transition-delay:.48s}.js .stagger.in>*:nth-child(6){transition-delay:.6s}.js .stagger.in>*:nth-child(n+7){transition-delay:.7s}

/* 404 */
.nf{min-height:60vh;display:grid;place-items:center;text-align:center;padding:60px 0}
.nf .spot{width:140px;height:140px;margin:0 auto 20px}

/* Print */
@media print{.site-header,.site-footer,.cta{display:none}.howbox{position:static;background:none;color:inherit;border:1px solid #999}}

/* Reduced motion: everything static and complete */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;animation-delay:0s!important}
  .js body{opacity:1}
  .js .rv,.js .stagger>*,.js .rule,.js .spot.draw .acc{opacity:1;transform:none}
  .js .spot.draw,.js .map .route{stroke-dasharray:none;stroke-dashoffset:0}
  .method-line path.prog{stroke-dashoffset:0}
  .mstep .deliv{opacity:1;transform:none}
  .qcell button::before{transform:none}
}

/* Mobile density (home must stay under 9,000 px tall): horizontal scroll-snap rows instead of long stacks */
@media (max-width:640px){
  .sec{padding:48px 0}
  .sec-head{margin-bottom:28px}
  .sec-head p{font-size:.98rem}
  .answer{font-size:1.02rem}
  .cred ul{grid-template-columns:1fr 1fr;gap:8px 12px;padding:12px 0}
  .cred li{gap:8px}
  .cred .spot{width:28px;height:28px}
  .cred a{font-size:.78rem}
  .cred small{font-size:.66rem}
  .mstep .spotwrap{width:76px;height:76px}
  .mstep .spot{width:46px;height:46px}
  .mstep .more{display:none}
  .story .wrap{padding:0}
  .story p{font-size:1rem}
  .changes{gap:0;margin-top:18px}
  .changes li{padding:12px 0;gap:10px}
  .changes p{font-size:.88rem}
  .rules{padding:22px 16px}
  .rules .quote{font-size:1rem;margin-bottom:22px}
  .rules ol{gap:22px}
  .rule{padding:16px 14px 14px}
  .faq summary{padding:14px 48px 13px 16px;font-size:.95rem}
  .cta .wrap{padding:48px 0}
  .site-footer{padding:48px 0 24px}
  .foot{grid-template-columns:1fr 1fr;gap:22px}
  .foot>div:first-child,.foot>div:last-child{grid-column:1/-1}
  .foot .brand img{width:170px}
  .foot li{margin-bottom:6px;font-size:.86rem}
  .foot-facts{display:none}
}
@media (max-width:640px){
  .sec{padding:40px 0}
  .sec-tight{padding:30px 0}
  .answer{font-size:.98rem;line-height:1.55}
  .changes b{font-size:.95rem}.changes p{font-size:.84rem}
  .rules{border-width:1.5px}
  .rules ol{gap:18px}
  .rule p{font-size:.86rem}
  .cta .wrap{padding:40px 0;gap:20px}
  .cta p{font-size:.95rem}
  .foot>div:nth-child(2),.foot>div:nth-child(3){display:none}
  .foot{grid-template-columns:1fr;gap:18px}
  .foot p{font-size:.86rem;margin-top:12px}
}
@media (max-width:640px){
  .hero h1{font-size:clamp(1.9rem,7.6vw,2.4rem)}
  .answer{font-size:.94rem}
  .faq summary{padding:12px 44px 11px 14px;font-size:.92rem}
  .faq details{margin-bottom:8px}
  .cta .wrap{padding:34px 0}
  .cta h2{font-size:1.5rem}
}
@media (max-width:640px){
  .qcell:nth-child(3){border-right:0}
  .qcell:nth-child(-n+3) button{border-bottom:1px solid var(--line)}
  .qline .qhead span:last-child{display:none}
  .foot .certs{display:none}

  .sec-head{margin-bottom:22px}
  .site-footer{padding:40px 0 20px}
  .legal{margin-top:18px;padding-top:16px}
}
.deliv svg{width:16px;height:16px;flex:none}
.band blockquote{background:var(--surface)}
.guide>*,.guide .body,.guide .body>*{min-width:0;max-width:100%}
@media (max-width:560px){.stages .when{white-space:normal}}
.stages>li>div{min-width:0}

/* ===== Review E R01 (31/10/2026): photographic moments, Why Hong Kong, touch targets ===== */
/* Answer block + Why Hong Kong + harbour image (illustrative) */
.whyhk li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--orange)}

/* Shenzhen band with an illustrative factory photograph (W01) */
.band-deep.has-photo::after{display:none}
.bd-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#1C1E5A 0%,rgba(28,30,90,.90) 26%,rgba(28,30,90,.48) 60%,rgba(28,30,90,.2) 100%),linear-gradient(0deg,#1C1E5A 0%,rgba(28,30,90,.65) 30%,rgba(28,30,90,0) 70%)}
@media (max-width:760px){
  .bd-photo::after{background:linear-gradient(180deg,rgba(28,30,90,.66) 0%,rgba(28,30,90,.84) 40%,#1C1E5A 100%)}
}

/* Touch targets >= 44 px on small screens (WCAG 2.5.5 target used as the brief's rule) */
@media (max-width:640px){
  .toc a,nav.toc a{display:inline-flex;align-items:center;min-height:44px}
  .faq-nav a{min-height:44px;display:inline-flex;align-items:center}
  .alpha a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .gloss dd a,.glossary dd a{display:inline-flex;align-items:center;min-height:44px}
  .link-arrow{min-height:44px;display:inline-flex;align-items:center}
  .brand{min-height:44px;display:inline-flex;align-items:center}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .faq summary{min-height:48px}
  .cred a{display:inline-flex;align-items:center;min-height:44px}
}
/* Mobile density, review E R01: keep the home under 9,000 px with Montserrat after adding the photographic band and Why Hong Kong */
@media (max-width:640px){
  h2{font-size:1.5rem}
  .hero-actions{gap:10px}
  .hero-actions .btn{padding:12px 18px;font-size:.9rem}
  .site-footer .foot>div:first-child>p:not(.tag){display:none}
  .whyhk li::before{display:none}
}
@media (max-width:640px){
  .sec{padding:36px 0}
  .sec-head{margin-bottom:22px}
  .qline::after{content:"Tap a field to see why it is there.";display:block;padding:10px 14px 12px;font-size:.75rem;color:var(--muted);border-top:1px solid var(--line)}
  .sec[aria-labelledby="num-h"] .eyebrow{display:none}
  .mstep .spotwrap{width:62px;height:62px}
  .mstep .spot{width:40px;height:40px}
  .rules .quote{margin-bottom:16px}
}
@media (max-width:640px){
  .cta .wrap{padding:34px 0;gap:14px}
}
@media (min-width:981px){.sec{padding:80px 0}}
/* Review E R01: 12 px floor for all visible text (memo 6.3) */
.gcard .k,.certs a,.certs span,.foot-facts b,.cred small,.practice,.mobile-nav li>span,.val .practice,.cert .badge,.report .stamp{font-size:.75rem}
@media (max-width:640px){
  .faq summary{padding:11px 46px 10px 16px}
}

/* ===== Images phase 2 (illustrative imagery + silent loops) ===== */
picture{display:contents}
.photo picture img,.photo img{width:100%;height:auto;display:block}
/* video loop layer: poster always rendered; the video fades in only once playing */
.vloop{position:absolute;inset:0;overflow:hidden;background:#1C1E5A}
.vloop img,.vloop video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vloop video{opacity:0;transition:opacity .9s var(--ease)}
.vloop.playing video{opacity:1}
.vpause{position:absolute;z-index:3;top:14px;right:14px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(28,30,90,.78);color:var(--on-fill);border:1px solid rgba(255,255,255,.55);cursor:pointer;padding:0}
.vpause svg{width:18px;height:18px;grid-area:1/1}
.vpause .i-play,.vpause[aria-pressed="true"] .i-pause{display:none}
.vpause[aria-pressed="true"] .i-play{display:block}
.vpause:hover{background:var(--fill)}
.vpause:focus-visible{outline:3px solid #F6A86E;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.vloop video{display:none}}

/* Home: Why Hong Kong over the harbour loop */
.hkband .vloop::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,30,90,.95) 0%,rgba(28,30,90,.9) 40%,rgba(28,30,90,.5) 66%,rgba(28,30,90,.12) 100%)}
.hkband .whyhk li::before{background:#F6A86E}
@media (max-width:640px){
  .hkband .vloop::after{background:linear-gradient(180deg,rgba(28,30,90,.78) 0%,rgba(28,30,90,.9) 55%,rgba(28,30,90,.94) 100%)}
}

/* Home: services with a photographic header */
.svc.has-ph:hover .svc-ph img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.svc.has-ph:hover .svc-ph img{transform:none}}

/* Media band (inner pages): a contained panel with a loop or a still behind a short text */
.mband .vloop::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,30,90,.94) 0%,rgba(28,30,90,.86) 42%,rgba(28,30,90,.35) 72%,rgba(28,30,90,.1) 100%)}
@media (max-width:640px){.mband .vloop::after{background:rgba(28,30,90,.86)}}

/* Full-bleed 21:9 band (About) */
.wideband{margin:0;position:relative;height:clamp(220px,34vw,460px);overflow:hidden;background:#1C1E5A}
.wideband img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;display:block}
.wideband figcaption{position:absolute;right:16px;bottom:12px;font-size:.75rem;font-weight:600;color:var(--on-fill);background:rgba(28,30,90,.78);padding:4px 9px;border-radius:6px}

/* Tile strip (factory sourcing families) */

/* Two illustrative photos side by side */

/* Guide cover photo beside the spot in the banner */
.banner .art.has-cover{position:relative;justify-content:flex-end}
.gcover{margin:0;position:relative;width:min(340px,100%)}
.gcover img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;border-radius:14px;display:block;box-shadow:0 18px 40px rgba(10,12,50,.35)}
.gcover figcaption{margin-top:8px;font-size:.75rem;color:#DADBF2;text-align:right}
.banner .art.has-cover>.spot{position:absolute;left:-10px;bottom:22px;width:104px;height:104px;padding:14px;background:var(--fill);border-radius:50%;box-shadow:0 10px 26px rgba(10,12,50,.35);z-index:1}
@media (max-width:900px){.banner .art.has-cover>.spot{display:none}.gcover{width:100%;max-width:420px}.gcover img{aspect-ratio:16/7}.gcover figcaption{text-align:left}}
.vpause[hidden]{display:none}
.gcover>.spot{position:absolute;left:-34px;bottom:12px;width:96px;height:96px;padding:14px;background:var(--fill);border-radius:50%;box-shadow:0 10px 26px rgba(10,12,50,.35);color:var(--on-fill)}
@media (max-width:900px){.gcover>.spot{display:none}}
.banner .art .gcover>.spot{width:96px;height:96px;max-width:none}
@media (max-width:640px){
  .mband .vloop::after{background:linear-gradient(180deg,rgba(28,30,90,.2) 0%,rgba(28,30,90,.88) 120px,rgba(28,30,90,.94) 100%)}
}

/* Images phase 3: captioned loop figure (16:9) */
.vfig .vbox{position:relative;aspect-ratio:16/9;overflow:hidden;background:#1C1E5A}
.vfig .vbox .vloop{position:absolute;inset:0}
.vfig .vbox .vloop img{height:100%}
.vfig .vpause{top:12px;right:12px}

/* Cleanup I (31/10/2026): after the owner's review */
.wideband.soft{height:clamp(130px,16vw,220px);margin:28px 0 0;border-radius:14px;background:#C9CCE0}
.wideband.soft img{filter:saturate(.55) blur(1.5px) brightness(1.04);transform:scale(1.04);object-position:50% 60%}
.wideband.soft::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(243,244,249,.10),rgba(46,49,143,.22));pointer-events:none}
.wideband.soft figcaption{z-index:1}
@media (max-width:640px){.wideband.soft{margin-top:20px;border-radius:12px}.wideband.soft figcaption{font-size:.66rem;padding:3px 7px;right:8px;bottom:8px}}
.faq-narrow{max-width:860px;margin-inline:auto}
.report .foot{display:block}

/* ===== E2 (01/11/2026): new copy line + owner-approved photography ===== */
/* Hero: three-beat process headline */
.hero h1{font-size:clamp(2.1rem,3.7vw,3.2rem);letter-spacing:-.018em}
.hero h1 .b2{color:var(--orange-text)}
.hero h1 .b3{color:var(--indigo)}

/* Photo badges (AI → Illustrative image; photos → short caption) */
.ph-badge{position:absolute;z-index:2;right:12px;bottom:12px;font-size:.72rem;font-weight:600;color:var(--on-fill);background:rgba(28,30,90,.82);padding:4px 9px;border-radius:6px;line-height:1.3;max-width:calc(100% - 24px)}

/* Inner banner with a strong header photograph */
.banner.has-photo .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;padding:56px 0 52px}
.bphoto{margin:0;position:relative;width:100%;aspect-ratio:4/3;border-radius:18px;overflow:hidden;box-shadow:0 24px 50px rgba(10,12,50,.38);background:#1C1E5A}
.bphoto img{width:100%;height:100%;object-fit:cover;display:block}
.banner.has-photo .art{display:block}
.banner .link-arrow.on-dark{color:var(--on-fill)}
@media (max-width:900px){
  .banner.has-photo .wrap{grid-template-columns:1fr;gap:20px;padding:30px 0 30px}
  .banner.has-photo .art{order:2}
  .bphoto{aspect-ratio:16/8;border-radius:14px}
}
@media (max-width:640px){.bphoto{aspect-ratio:16/9}.banner h1{font-size:clamp(1.8rem,7.4vw,2.3rem)}.banner .lead{font-size:1rem}}

/* Generic photo figures */
.photo picture img{transition:transform 1.2s var(--ease)}
.vcenter{align-items:center}
.h-sm{font-size:clamp(1.3rem,2vw,1.6rem)}
.howbox.static{position:static}
.statement{border-color:var(--indigo-line)}

/* Home: From Shenzhen to your door — photo mosaic + six-step route */
.mosaic figure:hover img{transform:scale(1.03)}
.route{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;margin:0;padding:0}
.route.four{grid-template-columns:repeat(4,1fr);margin-top:34px}
.rstep:first-child .rn{background:var(--orange-btn)}
.points{margin:26px 0 0;padding:14px 18px;border-radius:12px;background:var(--band);font-size:.92rem;color:var(--ink)}
.points strong{color:var(--indigo)}
@media (max-width:980px){.route,.route.four{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .points{font-size:.84rem;padding:12px 14px;margin-top:14px}
}

/* Shenzhen band: six points over a city photograph */
.changes.six{grid-template-columns:repeat(3,1fr);gap:6px 30px}
@media (max-width:980px){.changes.six{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.changes.six{grid-template-columns:1fr}}
.changes.light{color:var(--body);margin-top:0}
.changes.light li{border-top-color:var(--line)}
.changes.light li::before{color:var(--orange-text)}
.changes.light b{color:var(--indigo)}

/* Global network: points, follow-up band */
.pband::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,30,90,.94) 0%,rgba(28,30,90,.86) 45%,rgba(28,30,90,.25) 100%);z-index:0}
@media (max-width:640px){.pband::after{background:linear-gradient(180deg,rgba(28,30,90,.55) 0%,rgba(28,30,90,.92) 110px,rgba(28,30,90,.95) 100%)}}

/* Contact */

/* Footer lines (certificates + payment security) and cookie line */
.foot-lines{grid-template-columns:1fr 1fr}
.cookie-line{position:relative;margin:14px 0 0;font-size:.78rem;color:#C9CBE6}
.cookie-line a{color:var(--on-fill)}
@media (max-width:640px){.cookie-line{font-size:.72rem}}

/* Mobile home density for the new sections */
@media (max-width:640px){
  .hero h1{font-size:clamp(1.75rem,7.2vw,2.2rem)}
}
@media (prefers-reduced-motion:reduce){.photo picture img{transition:none!important;transform:none!important}}
@media (max-width:640px){.foot>div:nth-child(4){display:none}}
.tbl-wrap.cols2 table{min-width:0}
.tbl-wrap.cols2 tbody th{white-space:normal;width:34%}
@media (min-width:981px){.foot{grid-template-columns:1.45fr .9fr 1.1fr .85fr 1.3fr;gap:32px}}
.banner .crumbs{align-items:baseline}
.banner .crumbs a{min-height:0;display:inline}
@media (max-width:900px){.banner .art.has-cover{order:2;justify-content:flex-start}}
@media (min-width:761px){.sz-band .bd-photo::after{background:linear-gradient(90deg,#1C1E5A 0%,rgba(28,30,90,.9) 30%,rgba(28,30,90,.5) 62%,rgba(28,30,90,.22) 100%),linear-gradient(0deg,#1C1E5A 0%,rgba(28,30,90,.82) 42%,rgba(28,30,90,0) 78%)}}
/* ===== K — image × content alignment (01/11/2026) ===== */
/* route cards: the photo of that step sits on top of its card, 16:10 */
/* how-we-work: the step photo sits under "What you do", 4:3 */
/* factory families: six tiles, one per row of the table, 3 × 2 */
/* representation categories: tiles under the table */
/* hard-to-find layers: photos under layers 2 and 3, 3:2 */
.layer-duo>figure:first-child{grid-column:2}
@media (max-width:980px){.layer-duo>figure:first-child{grid-column:auto}}
/* procurement industrial: two stacked 3:2 photos */
.photo.r32 img{aspect-ratio:3/2;object-fit:cover}
.gcover figcaption b{font-weight:600}.gcover figcaption b::after{content:" · "}

/* ===================================================================
   Version F (01/11/2026) — same house, simpler rooms.
   Menu by need · eight-block home · one message per block · more white.
   =================================================================== */
:root{--sec-f:96px}
.sec{padding:var(--sec-f) 0}
@media (max-width:700px){:root{--sec-f:60px}.sec-tight{padding:36px 0}}

/* Header: five links + Company dropdown, two buttons; on phones a compact Quote button stays visible */
.nav-f{gap:2px}
.nav-f>li>a{font-weight:600}
.nav-f>li>a[aria-current="page"],.nav-f>li.is-cur>button{color:var(--orange-text);box-shadow:inset 0 -2px 0 var(--orange)}
.nav-f .dd a small{display:block;font-weight:500;color:var(--muted);font-size:.78rem;margin-top:2px}
.hdr-ctas .btn[aria-current="page"]{background:var(--fill);color:var(--on-fill)}
.hdr-quote{display:none}
@media (max-width:1180px){.nav-f a,.nav-f button{padding:10px 8px;font-size:.88rem}}
@media (max-width:980px){.hdr-quote{display:inline-flex;margin-left:auto;margin-right:8px;padding:10px 16px}}
.mobile-nav a[aria-current="page"]{color:var(--orange-text)}

/* ---------------- HOME 1 · hero with the network ---------------- */
.hero-f{padding:56px 0 40px;background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 62%,var(--band) 100%);overflow:hidden}
.hero-f-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:center}
@media (min-width:1200px){.net{margin-right:calc((1180px - 100vw)/2 + 8px);margin-left:-20px}}
.hero-copy h1{font-size:clamp(2.4rem,4.6vw,3.5rem);line-height:1.04;margin:0 0 14px;letter-spacing:-.025em}
.hero-copy h1 span{display:block}
.hero-copy h1 .o{color:var(--orange-text)}
.slogan{font-family:var(--head);font-weight:600;font-size:1.25rem;color:var(--indigo);margin:0 0 18px;letter-spacing:-.005em}
.hero-copy .lead{max-width:34em;margin:0 0 26px}
.hero-f .eyebrow{margin-bottom:18px}
.net{margin:0;position:relative}
.wnet{width:100%;height:auto;display:block;overflow:visible}
.wnet .dots{fill:none;stroke:var(--map-dot);stroke-width:3.4;stroke-linecap:round}
.wnet .fb{fill:none;stroke-width:1.2;opacity:.75}
.wnet .fb.in{stroke:var(--flow-in)}
.wnet .fb.out{stroke:var(--flow-out)}
.wnet .pk{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:.05 1;stroke-dashoffset:.05;opacity:0}
.wnet .pk.in{stroke:var(--orange)}
.wnet .pk.out{stroke:var(--indigo)}
.wnet .rg{font:600 15px var(--head);fill:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.wnet .core{fill:var(--orange);stroke:var(--bg);stroke-width:3}
.wnet .pulse{fill:none;stroke:var(--orange);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.wnet .hubt{font:700 17px var(--head);fill:var(--indigo)}
.wnet .hubs{font:600 13px var(--head);fill:var(--orange-text)}
.js .net.go .pk{animation:pk 4s linear infinite;opacity:1}
.js .net.go .pulse{animation:pulse 2.6s ease-out infinite}
.js .net.go .pulse.p2{animation-delay:1.3s}
.js .net.paused .pk,.js .net.paused .pulse{animation-play-state:paused}
@keyframes pk{from{stroke-dashoffset:1.05}to{stroke-dashoffset:0}}
@keyframes pulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.net figcaption{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.8rem;color:var(--muted);margin-top:6px;align-items:center}
.net .lg{display:inline-flex;align-items:center;gap:8px}
.net .lg i{width:18px;height:3px;border-radius:2px;background:var(--orange)}
.net .lg i.out{background:var(--fill)}
.net .sch{margin-left:auto;font-style:italic}
.netpause{position:absolute;right:0;top:0}
@media (max-width:980px){
  .hero-f{padding:28px 0 28px}
  .hero-f-grid{grid-template-columns:1fr;gap:18px}
  .net{margin:0 -8px}
  .net .sch{margin-left:0}
  .wnet .rg{font-size:20px}
}
@media (max-width:560px){
  .hero-copy h1{font-size:2.35rem}
  .slogan{font-size:1.08rem;margin-bottom:12px}
  .hero-copy .lead{font-size:1rem;margin-bottom:18px}
  .hero-f .hero-actions{gap:10px}
  .hero-f .hero-actions .btn{padding:13px 20px}
  .net figcaption{font-size:.75rem;gap:4px 12px}
}

/* numbers strip (inside the hero) */
.nums-f-wrap{margin-top:34px;border-top:1px solid var(--line);padding-top:24px}
.nums-f{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.nums-f.nums-3{grid-template-columns:repeat(3,1fr)}
.nums-f.nums-5{grid-template-columns:repeat(5,1fr);gap:18px}
@media (max-width:1100px) and (min-width:701px){.nums-f.nums-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.nums-f.nums-5{grid-template-columns:1fr 1fr;gap:16px 14px}.nums-f.nums-5 li:last-child{grid-column:1 / -1}}
.nums-f li{display:flex;flex-direction:column;gap:4px}
.nums-f .n{font-family:var(--head);font-weight:700;color:var(--indigo);font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.nums-f .l{font-size:.86rem;color:var(--body);line-height:1.4;max-width:18em}
.nums-note{font-size:.75rem;color:var(--muted);margin:12px 0 0}
@media (max-width:700px){.nums-f,.nums-f.nums-3{grid-template-columns:1fr 1fr;gap:16px 14px}.nums-f-wrap{margin-top:22px;padding-top:18px}.nums-f .l{font-size:.8rem}}

/* four doors */
.doors-wrap{margin-top:34px}
.doors-h{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-text);margin:0 0 12px}
.doors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.door{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 18px 16px;text-decoration:none;height:100%;box-sizing:border-box;transition:border-color .2s,box-shadow .25s var(--ease),transform .25s var(--ease)}
.door:hover,.door:focus-visible{border-color:var(--orange);box-shadow:var(--shadow);transform:translateY(-2px)}
.door .spot{grid-row:1/3;width:44px;height:44px;color:var(--indigo)}
.door .dt{font-family:var(--head);font-weight:700;color:var(--indigo);font-size:1rem;line-height:1.25}
.door .dt::after{content:" →";color:var(--orange-text)}
.door .dl{font-size:.86rem;color:var(--body);line-height:1.4;margin-top:4px}
.first-link{margin:14px 0 0;font-size:.92rem}
@media (max-width:980px){.doors{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.doors{gap:10px}.door{grid-template-columns:1fr;padding:14px}.door .spot{grid-row:auto;width:34px;height:34px;margin-bottom:6px}.door .dl{display:none}.door .dt{font-size:.92rem}.doors-wrap{margin-top:24px}}

/* ---------------- HOME 2 · proof strip ---------------- */
.proof-f{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.proof-f ul{list-style:none;margin:0;padding:18px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.proof-f li{display:flex;gap:12px;align-items:center}
.proof-f .spot{width:34px;height:34px;flex:none;color:var(--indigo)}
.proof-f a{text-decoration:none;display:flex;flex-direction:column}
.proof-f b{font-family:var(--head);color:var(--indigo);font-size:.9rem}
.proof-f small{font-size:.76rem;color:var(--muted)}
@media (max-width:900px){.proof-f ul{grid-template-columns:1fr 1fr;gap:12px}}
@media (max-width:560px){.proof-f .spot{display:none}.proof-f ul{padding:14px 0}}

/* ---------------- HOME 3 · ONE ---------------- */
.one-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:center;margin-bottom:44px}
.one-top h2{font-size:clamp(2rem,4vw,3rem)}
.kitfig{margin:0}
.kitsvg{width:100%;height:auto;display:block}
.kitsvg .row rect{fill:var(--surface);stroke:var(--indigo-line);stroke-width:1.5}
.kitsvg .row text{font:600 13px var(--head);fill:var(--indigo)}
.kitsvg .ln{fill:none;stroke:var(--indigo-line);stroke-width:1.4}
.kitsvg .dot{fill:none;stroke:var(--orange);stroke-width:4;stroke-linecap:round;stroke-dasharray:.04 1;stroke-dashoffset:.04;opacity:0}
.kitsvg .src circle{fill:var(--fill)}
.kitsvg .src text{font:700 13px var(--head);fill:var(--on-fill)}
.kitsvg .bx{fill:var(--box-tint);stroke:var(--indigo);stroke-width:2;stroke-linejoin:round}
.kitsvg .lid{fill:var(--surface);stroke:var(--indigo);stroke-width:2;stroke-linejoin:round;transform-box:fill-box;transform-origin:50% 100%}
.kitsvg .tape{fill:none;stroke:var(--orange);stroke-width:5;stroke-linecap:round}
.kitsvg .stamp rect{fill:var(--fill)}
.kitsvg .stamp text{font:700 14px var(--head);fill:var(--on-fill)}
.js .kitfig.go .row rect{animation:rowlit 6s var(--ease) infinite}
.js .kitfig.go .dot{opacity:1;animation:kdot 6s var(--ease) infinite}
.js .kitfig.go .lid{animation:lid 6s var(--ease) infinite}
.js .kitfig.go .stamp{animation:stamp 6s var(--ease) infinite}
.js .kitfig.paused *{animation-play-state:paused!important}
.kitsvg .r1 rect,.kitsvg .a1,.kitsvg .b1{animation-delay:.25s!important}
.kitsvg .r2 rect,.kitsvg .a2,.kitsvg .b2{animation-delay:.5s!important}
.kitsvg .r3 rect,.kitsvg .a3,.kitsvg .b3{animation-delay:.75s!important}
.kitsvg .r4 rect,.kitsvg .a4,.kitsvg .b4{animation-delay:1s!important}
.kitsvg .r5 rect,.kitsvg .a5,.kitsvg .b5{animation-delay:1.25s!important}
@keyframes rowlit{0%,4%{stroke:var(--indigo-line);fill:var(--surface)}10%,30%{stroke:var(--orange);fill:var(--orange-tint-2)}45%,100%{stroke:var(--indigo-line);fill:var(--surface)}}
@keyframes kdot{0%,8%{stroke-dashoffset:1.04;opacity:0}9%{opacity:1}42%{stroke-dashoffset:0;opacity:1}46%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes lid{0%,50%{transform:translateY(-12px) rotate(-8deg)}60%,100%{transform:none}}
@keyframes stamp{0%,62%{opacity:.25}70%,94%{opacity:1}100%{opacity:.25}}
.kit-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8rem;color:var(--muted);margin:8px 0 0}
.kit-legend b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--fill);color:var(--on-fill);font-size:.7rem;margin-right:6px}
.one-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.one-grid li{display:flex;gap:14px;padding:22px 20px 22px 0;border-bottom:1px solid var(--line)}
.one-grid .spot{width:36px;height:36px;flex:none;color:var(--indigo)}
.one-grid h3{font-size:1.1rem;margin:0 0 4px}
.one-grid h3 span{color:var(--orange-text)}
.one-grid p{margin:0;font-size:.92rem;line-height:1.5}
.targets{margin:26px 0 0;font-size:1.05rem;color:var(--ink);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline}
@media (max-width:900px){.one-top{grid-template-columns:1fr;gap:20px;margin-bottom:24px}.one-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.one-grid li{padding:14px 10px 14px 0;gap:10px}.one-grid .spot{display:none}.one-grid h3{font-size:1rem}.one-grid p{font-size:.84rem}}

/* ---------------- HOME 4 · solutions ---------------- */
.sols{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sol{display:flex;flex-direction:column;height:100%;background:var(--surface);border-radius:var(--radius);overflow:hidden;text-decoration:none;box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.sol:hover,.sol:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.sol .ph{aspect-ratio:16/9;overflow:hidden;background:var(--indigo-soft)}
.sol .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.sol:hover .ph img{transform:scale(1.04)}
.sol .tx{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.sol h3{margin:0;font-size:1.2rem}
.sol p{margin:0;font-size:.95rem;flex:1}
.sol .link-arrow{color:var(--orange-text)}
@media (max-width:900px){.sols{grid-template-columns:1fr;gap:14px}.sol{flex-direction:row}.sol .ph{aspect-ratio:auto;width:34%;flex:none}.sol .tx{padding:14px 16px}.sol p{font-size:.86rem}.sol h3{font-size:1.02rem}}

/* ---------------- HOME 5 · four steps (also supplier steps) ---------------- */
.steps-f{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s}
.steps-f li{position:relative;padding-top:6px}
.steps-f .sn{position:absolute;top:0;left:52px;font:700 .8rem var(--head);color:var(--orange-text)}
.steps-f .spot{width:44px;height:44px;color:var(--indigo);margin-bottom:12px}
.steps-f h3{font-size:1.1rem;margin:0 0 6px}
.steps-f p{margin:0;font-size:.94rem}
.steps-f li:not(:last-child)::after{content:"";position:absolute;top:22px;left:60px;right:-14px;height:2px;background:linear-gradient(90deg,var(--orange) 0 30%,var(--line) 30%)}
.center{text-align:center}
@media (max-width:900px){.steps-f{grid-template-columns:1fr 1fr;gap:20px}.steps-f li::after{display:none}}
@media (max-width:560px){.steps-f .spot{width:32px;height:32px;margin-bottom:6px}.steps-f .sn{left:40px}.steps-f p{font-size:.86rem}.steps-f h3{font-size:1rem}}

/* ---------------- HOME 6 · Shenzhen band ---------------- */
.sz-f{position:relative;min-height:440px;display:flex;align-items:center;padding:72px 0;overflow:hidden;background:var(--indigo-ink)}
.sz-bg{position:absolute;inset:0}
.sz-bg img{width:100%;height:100%;object-fit:cover;display:block}
.sz-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,30,90,.92) 0%,rgba(28,30,90,.82) 50%,rgba(28,30,90,.2) 100%)}
.sz-f .wrap{position:relative}
.sz-card{max-width:560px;color:#E6E7F7}
.sz-card .eyebrow{color:var(--orange-on-indigo)}
.sz-card h2{color:var(--on-fill)}
.sz-card p{font-size:1.08rem;margin:0}
@media (max-width:700px){.sz-f{min-height:0;padding:56px 0}.sz-bg::after{background:rgba(28,30,90,.8)}.sz-card p{font-size:.98rem}}

/* ---------------- HOME 7 · built for ---------------- */
.profiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.profiles a,.profiles li>div{display:block;height:100%;box-sizing:border-box;background:var(--surface);border-radius:var(--radius);padding:22px;text-decoration:none;border:1px solid var(--line);transition:border-color .2s,transform .25s var(--ease)}
.profiles a:hover,.profiles a:focus-visible{border-color:var(--orange);transform:translateY(-2px)}
.profiles .spot{width:40px;height:40px;color:var(--indigo);margin-bottom:10px}
.profiles h3{font-size:1.02rem;margin:0 0 6px}
.profiles p{margin:0;font-size:.9rem}
.profiles.wide{grid-template-columns:repeat(2,1fr)}
.profiles.wide li{scroll-margin-top:100px}
.reorder{text-align:center;margin:28px 0 0;font-family:var(--head);font-weight:600;color:var(--indigo);font-size:1.1rem}
@media (max-width:900px){.profiles{grid-template-columns:1fr 1fr;gap:12px}}
@media (max-width:560px){.profiles:not(.wide) a{padding:14px}.profiles:not(.wide) .spot{width:30px;height:30px;margin-bottom:6px}.profiles:not(.wide) p{font-size:.82rem}.profiles:not(.wide) h3{font-size:.92rem}.profiles.wide{grid-template-columns:1fr}}

/* ---------------- HOME 8 · payment, short answers, suppliers ---------------- */
.close-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.pay-rules{font-family:var(--head);font-weight:600;color:var(--indigo);font-size:1.2rem;line-height:1.45;margin:0 0 28px;padding-left:18px;border-left:3px solid var(--orange)}
.sup-strip{background:var(--band);border-radius:var(--radius);padding:22px}
.sup-strip p{margin:0 0 12px}
.close-f .faq{max-width:none;margin:0 0 14px}
.close-f h2{font-size:1.6rem}
@media (max-width:900px){.close-grid{grid-template-columns:1fr;gap:30px}.pay-rules{font-size:1.05rem}}

/* ---------------- Inner pages (F) ---------------- */
.banner-f .hero-actions{margin-top:24px}
.banner-f .art .kitfig{background:var(--surface);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-lift)}
.banner-f .art .kit-legend{color:var(--muted)}
.flow-f{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.flow-f li{display:grid;grid-template-columns:auto 44px 1fr;gap:16px;align-items:start;background:var(--surface);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow)}
.flow-f .sn{font:700 1.4rem var(--head);color:var(--orange-text);line-height:1;min-width:1.2em}
.flow-f .spot{width:44px;height:44px;color:var(--indigo)}
.flow-f h3{margin:0 0 4px;font-size:1.1rem}
.flow-f .claim{font-weight:600;color:var(--ink);margin:0 0 4px}
.flow-f p{margin:0 0 8px;font-size:.94rem}
.flow-f .you{color:var(--muted)}
.flow-f .you b{color:var(--indigo);margin-right:4px}
.flow-f.four{grid-template-columns:1fr 1fr}
@media (max-width:800px){.flow-f.four{grid-template-columns:1fr}.flow-f li{grid-template-columns:auto 1fr;padding:18px}.flow-f .spot{display:none}}
.fams{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fam{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.fam picture,.fam .fam-sp{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--indigo-soft)}
.fam img{width:100%;height:100%;object-fit:cover;display:block}
.fam .fam-sp{display:grid;place-items:center;color:var(--indigo)}
.fam .fam-sp .spot{width:64px;height:64px}
.fam div:last-child{padding:16px 18px}
.fam h3{font-size:1rem;margin:0 0 4px}
.fam p{margin:0;font-size:.88rem}
@media (max-width:900px){.fams{grid-template-columns:1fr 1fr;gap:12px}}
@media (max-width:520px){.fams{grid-template-columns:1fr}.fam{flex-direction:row}.fam picture,.fam .fam-sp{width:36%;flex:none;aspect-ratio:auto}}
.dev-list{list-style:none;margin:0;padding:0;counter-reset:d;border-left:2px solid var(--line)}
.dev-list li{counter-increment:d;position:relative;padding:0 0 22px 30px}
.dev-list li::before{content:counter(d);position:absolute;left:-14px;top:0;width:26px;height:26px;border-radius:50%;background:var(--surface);border:2px solid var(--orange);color:var(--orange-text);font:700 .78rem var(--head);display:grid;place-items:center}
.dev-list b{display:block;font-family:var(--head);color:var(--indigo)}
.dev-list span{font-size:.94rem}
.note{font-size:.94rem;color:var(--muted);margin-top:18px}
.qline-f{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);border-top:3px solid var(--orange);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.qline-f li{padding:18px 16px;border-right:1px solid var(--line)}
.qline-f li:last-child{border-right:0}
.qline-f b{display:block;font-family:var(--head);color:var(--indigo);margin-bottom:4px}
.qline-f span{font-size:.88rem}
@media (max-width:900px){.qline-f{grid-template-columns:1fr 1fr}.qline-f li{border-bottom:1px solid var(--line)}}
.rules-f{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rules-f li{background:var(--surface);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);position:relative}
.rules-f .sn{font:700 .8rem var(--head);color:var(--orange-text)}
.rules-f h3{margin:4px 0 6px;font-size:1.05rem}
.rules-f p{margin:0;font-size:.92rem}
@media (max-width:800px){.rules-f{grid-template-columns:1fr}}
.photo.r32 img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto}
.g12 .c6 .vfig,.g12 .c6 .photo{margin-top:18px}

/* Request a quote: upload first, four paths */
.rfq-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:32px;align-items:start}
.rfq-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:96px}
.rfq-side .howbox{margin:0}
.after-f{list-style:none;margin:0;padding:0;counter-reset:a}
.after-f li{counter-increment:a;padding:0 0 10px 30px;position:relative;font-size:.9rem}
.after-f li::before{content:counter(a);position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--fill);color:var(--on-fill);font:700 .7rem var(--head);display:grid;place-items:center}
.after-f b{display:block;color:var(--ink);font-weight:600}
.after-f span{color:var(--muted);font-size:.84rem}
.ch-list{list-style:none;margin:0 0 8px;padding:0;font-size:.9rem}
.ch-list li{padding:6px 0;border-bottom:1px solid var(--line)}
.ch-list b{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--orange-text)}
.paths{border:0;padding:0;margin:0}
.paths legend{font-weight:600;font-size:.88rem;color:var(--indigo);margin-bottom:8px;padding:0}
.path-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.path{display:block;position:relative;border:2px solid var(--line);border-radius:12px;padding:14px 14px 14px 44px;cursor:pointer;background:var(--surface);transition:border-color .2s,background .2s}
.path input{position:absolute;left:14px;top:16px;width:18px;height:18px;accent-color:var(--orange-btn);margin:0}
.path .pt{display:block;font-family:var(--head);font-weight:700;color:var(--indigo);font-size:.95rem}
.path .ph{display:block;font-size:.8rem;color:var(--muted);line-height:1.35;margin-top:2px}
.path:has(input:checked){border-color:var(--orange);background:var(--orange-tint)}
.path:has(input:focus-visible){outline:3px solid var(--orange-text);outline-offset:2px}
.paths.invalid .path-grid{outline:2px solid var(--err);outline-offset:4px;border-radius:12px}
.cond.two{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.wz-t .cond[hidden]{display:none!important}
@media (max-width:900px){.rfq-grid{grid-template-columns:1fr}.rfq-side{position:static}}
@media (max-width:560px){.path-grid{grid-template-columns:1fr}.cond.two{grid-template-columns:1fr}}

/* For suppliers: EN / 中文 toggle, tabs, two-step form */
html:not(.wz-t) .langtog{display:none}
[data-lang="en"] .l-zh{display:none!important}
[data-lang="zh"] .l-en{display:none!important}
html:not([data-lang]) .l-zh:is(span){margin-left:.4em}
html:not([data-lang]) p.l-zh{margin-top:-.4em}
.l-zh,.zh{font-family:var(--zh)}
.zh{font-weight:500;color:var(--muted);font-size:.9em;margin-left:4px}
.tablist{display:none;gap:8px;margin:0 auto 26px;justify-content:center}
.wz-t .tablist{display:flex}
.wz-t .nojs-h{display:none}
.tablist button{font:700 .95rem var(--head);color:var(--indigo);background:var(--surface);border:2px solid var(--indigo-line);border-radius:999px;padding:11px 22px;cursor:pointer;min-height:44px}
.tablist button[aria-selected="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.tabpan{margin-bottom:24px}
.wz-t .tabpan[hidden]{display:none}
.pts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pts li{background:var(--surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.pts p{margin:0;font-size:.95rem}
.pts strong{display:block;color:var(--indigo);font-family:var(--head);margin-bottom:4px}
.pts.small{grid-template-columns:1fr;gap:8px}
.pts.small li{box-shadow:none;padding:0 0 8px;border-bottom:1px solid var(--line);border-radius:0;background:none}
.pts.small p{font-size:.88rem}
@media (max-width:700px){.pts{grid-template-columns:1fr}}
.stepper{display:flex;align-items:center;gap:10px;font-size:.84rem;color:var(--muted);margin:0 0 14px;flex-wrap:wrap}
.stepper>span:not([class^="l-"]){display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--indigo-line);font:700 .8rem var(--head);color:var(--indigo)}
.stepper>span.on{background:var(--orange-btn);border-color:var(--orange-btn);color:var(--on-orange)}
.sup-hero .l-zh{display:block}
[data-lang="en"] .sup-hero .l-zh{display:none}

/* Footer F */
.foot-f{grid-template-columns:1.5fr 1fr 1fr 1.2fr 1.4fr}
.site-footer .slogan{font-family:var(--head);font-weight:600;color:var(--on-fill);font-size:1.1rem;margin:14px 0 6px}
@media (max-width:1100px){.foot-f{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-f{grid-template-columns:1fr}}

/* Reduced motion: every F animation shows its final frame */
@media (prefers-reduced-motion:reduce){
  .js .net.go .pk,.js .net.go .pulse,.js .kitfig.go *{animation:none!important}
  .wnet .pk{opacity:0}
  .kitsvg .dot{opacity:0}
  .kitsvg .stamp{opacity:1}
}

/* F review 1: body colour inside link cards; mobile density (home < 7,000 px) */
.sol p,.profiles p,.door .dl{color:var(--body)}
@media (max-width:700px){
  :root{--sec-f:48px}
  .sec-head{margin-bottom:26px}
  .proof-f small{display:none}
  .proof-f b{font-size:.82rem}
  .proof-f ul{gap:8px 12px}
  .one-top .lead{font-size:1rem}
  .one-top h2{font-size:2rem}
  .kit-legend{font-size:.75rem;gap:4px 10px}
  .targets{font-size:.95rem;margin-top:18px}
  .sz-f{padding:44px 0}
  .reorder{font-size:1rem;margin-top:18px}
  .close-grid{gap:22px}
  .pay-rules{margin-bottom:18px}
  .hero-f .eyebrow{margin-bottom:10px}
  .sol .link-arrow{display:none}
}
/* F review 2: side boxes on RFQ and supplier pages are white cards (dark text keeps 4.5:1) */
.rfq-side .howbox,#zh .howbox{background:var(--surface);color:var(--body);box-shadow:var(--shadow);border:1px solid var(--line)}
.rfq-side .howbox h3,#zh .howbox h3{color:var(--indigo)}
.rfq-side .howbox a:not(.btn),#zh .howbox a:not(.btn){color:var(--indigo)}
#zh .howbox + .howbox{margin-top:16px}

/* F review 3: doors directly under the hero copy (persona re-test), numbers after them */
.doors-wrap{margin-top:22px}
@media (min-width:981px){.hero-f{padding-top:40px}.hero-f .eyebrow{margin-bottom:12px}.hero-copy .lead{margin-bottom:22px}}

/* ===== Languages (F R01): switcher (hidden while English is the only language) + first-visit suggestion bar ===== */
.langsw[hidden]{display:none!important}
.langsw ul{list-style:none;margin:0;padding:0}
.langsw-hdr{position:relative;margin-right:4px}
.langsw-hdr summary{cursor:pointer;list-style:none;font-weight:700;font-size:.82rem;letter-spacing:.06em;color:var(--indigo);padding:8px 10px;border-radius:8px;border:1px solid var(--indigo-line)}
.langsw-hdr summary::-webkit-details-marker{display:none}
.langsw-hdr ul{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--indigo-line);border-radius:10px;box-shadow:var(--shadow-pop);padding:6px;min-width:150px;z-index:60}
.langsw-hdr a{display:block;padding:8px 10px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:.9rem}
.langsw-hdr a:hover,.langsw-hdr a:focus-visible{background:var(--indigo-soft)}
.langsw a[aria-current="true"]{font-weight:700}
.langsw-mobile{margin-top:14px}
.langsw-mobile ul,.langsw-footer ul{display:flex;flex-wrap:wrap;gap:6px 14px}
.langsw-footer{display:inline}
.langsw-footer ul{display:inline-flex}
.foot-lang a{color:var(--on-fill);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.45)}
.foot-lang a:hover{text-decoration-color:#fff}
.foot-lang .langsw-footer a{text-decoration:none}
.lang-suggest{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:440px;margin-left:auto;display:flex;align-items:center;gap:10px;
  background:var(--surface);color:var(--ink);border:1px solid var(--indigo-line);border-radius:12px;box-shadow:var(--shadow-pop);padding:12px 12px 12px 16px;font-size:.95rem}
.lang-suggest p{margin:0;flex:1 1 auto;min-width:0}
.lang-suggest .ls-x{background:none;border:0;font-size:1.4rem;line-height:1;color:var(--ink);cursor:pointer;padding:6px 8px;border-radius:6px}
.lang-suggest .ls-x:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
@media print{.lang-suggest,.langsw{display:none!important}}

/* F-R02 (01/11/2026): owner-approved 3D packaging/logistics images. Aspect ratio + focal point per component (focal point = inline object-position from image_map.json). */
.kitphoto{margin:0}
.kitphoto img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}
.widephoto{margin-top:36px}
.widephoto img{aspect-ratio:21/9;object-fit:cover;width:100%;height:auto}
.photo.r32 img{aspect-ratio:3/2}
.f-band{height:clamp(220px,32vw,480px)}
.f-band figcaption{font-weight:600}
@media (max-width:700px){.kitphoto img{aspect-ratio:3/2}.widephoto{margin-top:24px}.widephoto img{aspect-ratio:16/9}.f-band{height:clamp(200px,56vw,260px)}}

/* ===== F-R04 (01/11/2026): theme switch Auto / Light / Dark + logo pair (dark values in styles_dark.css) ===== */
html{background:var(--bg)}
.logo-d{display:none}
.brand img.logo-d{width:148px}
@media (max-width:980px){.brand img.logo-d{width:124px}}
.theme-btn{display:none;align-items:center;justify-content:center;gap:10px;width:42px;height:42px;padding:0;border-radius:999px;border:1px solid var(--indigo-line);background:transparent;color:var(--indigo);cursor:pointer;flex:none;font:600 .95rem var(--head);transition:background .2s,border-color .2s}
.wz-t .theme-btn{display:inline-flex}
.theme-btn:hover{background:var(--band);border-color:var(--indigo)}
.theme-btn svg{width:20px;height:20px;flex:none}
.theme-btn .ti{display:none}
:root:not([data-theme]) .theme-btn .ti-auto,:root[data-theme="light"] .theme-btn .ti-light,:root[data-theme="dark"] .theme-btn .ti-dark{display:block}
.theme-btn .tt{display:none}
.theme-btn .tt b{font-weight:700}
.theme-mob{width:auto;height:44px;padding:0 18px 0 14px;margin:6px 0 22px}
.theme-mob .tt{display:inline}
@media (max-width:980px){.theme-hdr{display:none!important}}
@media print{.theme-btn{display:none!important}}
/* F-R04 fix (both themes): the radio inside a path card no longer inherits the text-field box (min-height/padding/halo drew a tall frame behind it) */
.field .path input,.path input{min-height:0;height:18px;padding:0;border:0;box-shadow:none;background:none}
input[type=checkbox],input[type=radio]{accent-color:var(--orange-btn)}

/* G6: logo never shrinks (header fit: styles_g.css G6 block) */
.site-header .brand,.brand{flex:0 0 auto}
.brand img{flex:0 0 auto;max-width:none}

/* G8 (02/11): longer translated strings must never widen the hero on phones */
.hero-copy,.hero-copy>*{min-width:0}
.hero-copy .eyebrow,.hero .eyebrow{white-space:normal;flex-wrap:wrap}
@media (max-width:640px){
  .hero-copy .btn,.hero .btn{white-space:normal;text-align:center;max-width:100%}
  .hero-copy h1 span{overflow-wrap:break-word}
}
@media (max-width:640px){ html body .hero-f .hero-copy .eyebrow{flex-wrap:wrap!important;white-space:normal!important;row-gap:4px} }

/* ===================================================================
   Version G · round 1 (01/11/2026) — factory-direct first, honest forms,
   UX fixes (D10) and a progressive "extraordinary" layer (D11).
   Colours only through the F-R04 tokens, so dark mode follows automatically.
   =================================================================== */

/* ---------- D11 · cross-document View Transitions (unsupported browsers just navigate) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .site-header{view-transition-name:site-header}
  main h1{view-transition-name:page-title}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.24s}
  ::view-transition-group(page-title){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
}
.js body.leaving{opacity:1}

.nw{white-space:nowrap}

/* ---------- D10 · header: labels never wrap 1024–1920; compact layout below 1280 ---------- */
.nav-f>li>a,.nav-f>li>button,.hdr-ctas .btn{white-space:nowrap}
@media (min-width:981px) and (max-width:1279px){
  .hdr{gap:10px}
  .nav-f a,.nav-f button{padding:10px 7px;font-size:.84rem}
  .hdr-ctas{gap:6px}
  .hdr-ctas .btn-outline{display:none}
  .hdr-ctas .btn-sm{padding:10px 14px;font-size:.84rem}
  .brand img{width:118px;height:auto}
}
@media (min-width:1280px) and (max-width:1400px){.nav-f a,.nav-f button{padding:10px 9px;font-size:.88rem}.hdr-ctas .btn-sm{padding:10px 16px}}

/* ---------- D10 · mobile menu: scroll lock; contained height; no-JS fallback ---------- */
html.menu-open{overflow:hidden}html.menu-open body{overflow:visible} /* R4: body must not become its own scroll container while the viewport is locked */
.mobile-nav{overscroll-behavior:contain}
.mobile-nav.open{max-height:calc(100dvh - 68px)}
/* no-JS fallback keyed on the head boot class (set before first paint), so JS pages never flash the static nav (R3: CLS) */
html:not(.wz-t) .menu-btn{display:none!important}
@media (max-width:980px){
  html:not(.wz-t) .mobile-nav{display:block;max-height:none;overflow:visible;border-top:1px solid var(--line)}
  html:not(.wz-t) .mobile-nav ul{display:flex;flex-wrap:wrap;gap:0 18px;padding:6px 0 12px}
  html:not(.wz-t) .mobile-nav li>span,html:not(.wz-t) .mobile-nav .mctas,html:not(.wz-t) .mobile-nav .theme-btn{display:none}
  html:not(.wz-t) .mobile-nav a{border:0;padding:8px 0;font-size:.9rem}
  html:not(.wz-t) .site-header{position:static}
}

/* ---------- D10 · footer: accordion on phones, certificates visible, larger targets ---------- */
.foot-acc>summary{list-style:none;cursor:default}
.foot-acc>summary::-webkit-details-marker{display:none}
.foot-acc>summary .foot-h{margin:6px 0 16px}
@media (max-width:640px){
  .site-footer .foot>div.fcol{display:block!important}
  .foot{gap:0!important}
  .foot>div:first-child{margin-bottom:18px}
  .foot>div:last-child{margin-top:18px}
  .foot-acc{border-top:1px solid rgba(255,255,255,.16)}
  .foot-acc>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between}
  .foot-acc>summary .foot-h{margin:0}
  .foot-acc>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--on-fill);border-bottom:2px solid var(--on-fill);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
  .foot-acc[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
  .foot-acc ul{padding:0 0 14px}
  .foot-acc li{margin:0}
  .foot-acc li a{display:block;padding:9px 0}
  .site-footer .foot .certs{display:flex!important;margin-top:16px}
}
.legal a,.site-footer address a{display:inline-block;padding:4px 0;min-height:24px}

/* ---------- D10 · back to top ---------- */
.to-top{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:90;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:var(--fill);color:var(--on-fill);box-shadow:var(--shadow-lift);display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;pointer-events:none}
.to-top svg{width:22px;height:22px}
.to-top.on{opacity:1;transform:none;pointer-events:auto}
.to-top:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}

/* ---------- D10 · tables become stacked cards on phones ---------- */
@media (max-width:640px){
  .tbl-wrap.tbl-stack{overflow:visible;border:0;background:none}
  .tbl-stack table{min-width:0!important;display:block}
  .tbl-stack thead{display:none}
  .tbl-stack tbody{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
  .tbl-stack th{white-space:normal!important}
  .tbl-stack td,.tbl-stack th{overflow-wrap:anywhere}
  .tbl-stack tr{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
  .tbl-stack th,.tbl-stack td{display:grid;grid-template-columns:minmax(6.5rem,34%) 1fr;gap:10px;padding:5px 0!important;border:0!important;background:none!important;text-align:left;position:static!important;font-size:.9rem}
  .tbl-stack td::before,.tbl-stack th::before{content:attr(data-label);font-weight:700;color:var(--muted);font-size:.76rem;letter-spacing:.02em;text-transform:uppercase;padding-top:2px}
  .tbl-stack tr>:first-child{display:block;font-family:var(--head);font-weight:700;color:var(--indigo);font-size:1rem;padding-bottom:6px!important}
  .tbl-stack tr>:first-child::before{content:none}
  .tbl-stack tr>:first-child:empty{display:none}
  .tbl-stack + .scroll-hint{display:none!important}
}

/* ---------- D10 · hero visual never above the H1 on phones; empty art hidden ---------- */
@media (max-width:900px){.banner .art{order:2;justify-content:flex-start}.banner .art:empty{display:none}}
.banner .art:empty{display:none}
.banner-f .wrap:has(> .art:empty){grid-template-columns:minmax(0,1fr)}

/* ---------- D10 · real tablet layout (761–1099) ---------- */
@media (min-width:761px) and (max-width:1099px){
  .hero-f-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px}
  .banner .wrap,.banner.has-photo .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;padding:48px 0 44px}
  .banner .art{order:0}
  .banner .art .spot{width:min(100%,220px)}
  .g12{grid-template-columns:repeat(12,1fr)}
  .c7,.c6,.c5{grid-column:span 6}
  .g3{grid-template-columns:repeat(2,1fr)}
  .profiles{grid-template-columns:repeat(2,1fr)}
  .sols{grid-template-columns:repeat(3,1fr)!important}.sol{flex-direction:column!important}.sol .ph{width:auto!important;aspect-ratio:16/10!important}
  .fams{grid-template-columns:repeat(2,1fr)}
  .flow-f.four{grid-template-columns:1fr 1fr}
  .rfq-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)!important}
  .foot-f{grid-template-columns:1.4fr 1fr 1fr!important}
  .foot-f>div:first-child{grid-column:1/-1}
  .photo img,.widephoto img{max-height:420px;object-fit:cover}
  .xcards{grid-template-columns:1fr!important}
}

/* ---------- home hero tuning ---------- */
.hero-f .eyebrow{flex-wrap:wrap;row-gap:4px}
.doors .door-1{border-color:var(--orange);background:linear-gradient(135deg,var(--surface),var(--orange-tint))}
.nums-f .n,.nums-f [data-count]{font-variant-numeric:tabular-nums}

/* ---------- D11 · interactive hero map ---------- */
.net-regions{margin-top:10px}
.rchips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rchip{font:600 .84rem/1 var(--head);color:var(--indigo);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 14px;min-height:36px;cursor:pointer;transition:border-color .2s,background .2s}
.rchip:hover,.rchip:focus-visible,.rchip[aria-pressed="true"]{border-color:var(--orange);background:var(--orange-tint)}
html:not(.wz-t) .rchips{display:none}
.rdetail{min-height:1.4em;margin:8px 0 0;font-size:.88rem;color:var(--body)}
.rdetail:empty{display:none}
.net-list{margin-top:6px;font-size:.86rem}
.net-list summary{cursor:pointer;color:var(--muted);font-weight:600;font-size:.8rem;padding:6px 0;min-height:24px}
.net-list ul{margin:6px 0 0;padding-left:18px}
.net-list li{margin:4px 0}
.wnet .fb,.wnet .rg{transition:opacity .25s,stroke-width .25s}
.net[data-hl] .wnet .fb{opacity:.12}
.net[data-hl] .wnet .rg{opacity:.35}
.net[data-hl="eu"] .wnet .r-eu,.net[data-hl="na"] .wnet .r-na,.net[data-hl="la"] .wnet .r-la,.net[data-hl="as"] .wnet .r-as{opacity:1;stroke-width:2.2}
.net[data-hl="eu"] .wnet text.r-eu,.net[data-hl="na"] .wnet text.r-na,.net[data-hl="la"] .wnet text.r-la,.net[data-hl="as"] .wnet text.r-as{fill:var(--orange-text);opacity:1}
.net[data-hl] .wnet .pk:not(.r-eu):not(.r-na):not(.r-la):not(.r-as){opacity:0}
.net[data-hl="eu"] .wnet .pk:not(.r-eu),.net[data-hl="na"] .wnet .pk:not(.r-na),.net[data-hl="la"] .wnet .pk:not(.r-la),.net[data-hl="as"] .wnet .pk:not(.r-as){visibility:hidden}
@media (max-width:640px){.wnet text{display:none}}
:root[data-theme="dark"] .wnet .rg{fill:#C5C8FF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wnet .rg{fill:#C5C8FF}}

/* ---------- D1 · programme cards + D11 12-month calendar ---------- */
.prog-sec .hero-actions{justify-content:center}
.prog-sec .sec-head p{max-width:62ch;margin-left:auto;margin-right:auto}
.profiles.prog{grid-template-columns:repeat(5,1fr);gap:14px}
.profiles.prog.six{grid-template-columns:repeat(3,1fr)}
.profiles.prog li>div{padding:18px}
.profiles.prog .spot{width:34px;height:34px}
.profiles.prog h3{font-size:.98rem}
.profiles.prog p{font-size:.86rem}
@media (max-width:1099px){.profiles.prog{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.profiles.prog,.profiles.prog.six{grid-template-columns:1fr}.profiles.prog li>div{display:grid;grid-template-columns:34px 1fr;column-gap:12px;padding:14px}.profiles.prog .spot{grid-row:1/3;margin:0}}
.pcal{margin:40px 0 0;padding:22px 22px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pcal-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;position:relative}
.pcal-track::before{content:"";position:absolute;left:4px;right:4px;top:39px;height:2px;background:var(--line);transform-origin:left}
.pcal li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.pcal .m{font:700 .7rem/1 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.pcal .pill{position:relative;z-index:1;width:100%;height:16px;border-radius:999px;background:var(--orange);box-shadow:0 0 0 3px var(--surface)}
.pcal .k-qualify .pill{background:var(--surface);border:2px solid var(--indigo)}
.pcal .k-first .pill{background:var(--indigo)}
.pcal .k-review .pill::after{content:"";position:absolute;right:-3px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--fill);border:2px solid var(--surface)}
.pcal .t{font-size:.76rem;line-height:1.35;color:var(--body)}
.pcal figcaption{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:.84rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.pcal .tag{font:700 .68rem/1 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--orange-text);border:1px solid var(--orange-tint-line);border-radius:999px;padding:5px 9px}
.pcal-key{display:inline-flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin-left:auto}
.pcal-key i{display:inline-block;width:18px;height:9px;border-radius:999px;margin-right:4px;vertical-align:middle}
.pcal-key .kq{border:2px solid var(--indigo);background:var(--surface)}.pcal-key .kf{background:var(--indigo)}.pcal-key .kl{background:var(--orange)}.pcal-key .kr{width:9px;background:var(--fill);border:1px solid var(--indigo)}
@media (max-width:1099px){.pcal-track{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:20px}.pcal-track::before{display:none}}
@media (max-width:560px){.pcal{padding:16px 14px}.pcal-track{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}.pcal-key{margin-left:0}}
@media (prefers-reduced-motion:no-preference){
  .js .pcal .pill{transition:transform .4s var(--ease),opacity .4s var(--ease);transition-delay:calc(var(--i) * 90ms)}
  .js .pcal .t{transition:opacity .4s var(--ease);transition-delay:calc(var(--i) * 90ms + 120ms)}
  .js .pcal-track::before{transition:transform 1.1s var(--ease)}
  .js .pcal:not(.in) .pill{transform:scaleX(.2);opacity:.25}
  .js .pcal:not(.in) .t{opacity:0}
  .js .pcal:not(.in) .pcal-track::before{transform:scaleX(0)}
}

/* ---------- D2 · programme examples ---------- */
.xcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.xcards li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;position:relative;overflow:hidden}
.xcards .xh{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.xcards .spot{width:32px;height:32px;color:var(--indigo)}
.xcards h3{font-size:.98rem;margin:0 0 6px}
.xcards p{margin:0;font-size:.86rem}
.xnote{text-align:center;margin:22px auto 0;color:var(--muted);font-size:.86rem;max-width:60ch}
@media (max-width:1099px){.xcards{grid-template-columns:1fr}}
@media (max-width:560px){.xcards{grid-template-columns:1fr}}

/* ---------- D11 · card micro-interactions (fine pointers only) ---------- */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .door,.sol,.profiles li>a,.profiles li>div,.xcards li,.val,.gcard{background-image:radial-gradient(320px circle at var(--mx,50%) var(--my,-40%),var(--orange-tint),transparent 62%)}
  .xcards li,.profiles.prog li>div,.val{transition:transform .25s var(--ease),border-color .2s,box-shadow .25s}
  .xcards li:hover,.profiles.prog li>div:hover,.val:hover{transform:translateY(-3px);border-color:var(--indigo-line);box-shadow:var(--shadow)}
  .door:hover .spot,.profiles a:hover .spot{transform:translateX(2px)}
  .door .spot,.profiles .spot{transition:transform .25s var(--ease)}
}

/* ---------- D11 · BOM kit assembly ---------- */
.kasm-fig{margin:0}
.kasm-svg{width:100%;height:auto;display:block;overflow:visible}
.kasm-svg .lc{fill:var(--fill)}
.kasm-svg .ll{font:800 20px var(--head);fill:var(--on-fill)}
.kasm-svg .ln{font:700 15px var(--head);fill:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.kasm-svg .ghost{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 4}
.kasm-svg .guide{fill:none;stroke:var(--indigo-line);stroke-width:1.4;stroke-dasharray:3 6}
.kasm-svg .chip{fill:var(--surface);stroke:var(--indigo-line);stroke-width:1.6}
.kasm-svg .ct{font:600 18px var(--head);fill:var(--indigo)}
.kasm-svg .pallet rect{fill:var(--indigo-line)}
.kasm-svg .cf{fill:#D9A877;stroke:#9C6B3D;stroke-width:1.5}
.kasm-svg .cs{fill:#B98455;stroke:#9C6B3D;stroke-width:1.5}
.kasm-svg .ctop{fill:#C99566}
.kasm-svg .cl{fill:#E2B585;stroke:#9C6B3D;stroke-width:1.5}
.kasm-svg .tape{fill:rgba(255,255,255,.55)}
.kasm-svg .lbl{fill:#fff;stroke:#9C6B3D}
.kasm-svg .lbl-l{stroke:#2E318F;stroke-width:3;stroke-linecap:round}
.kasm-svg .stampk rect{fill:var(--orange)}
.kasm-svg .stampk text{font:800 13px var(--head);fill:#14164A;letter-spacing:.04em}
.kasm-svg .kcap{font:700 19px var(--head);fill:var(--indigo)}
.kasm-svg .mv{transform-box:view-box}
.kasm .kit-legend{margin-top:18px}
@media (prefers-reduced-motion:no-preference){
  @keyframes kmove{0%{transform:none;opacity:1}80%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.35);opacity:0}}
  @keyframes klid{from{transform:translateY(-46px);opacity:0}to{transform:none;opacity:1}}
  @keyframes kstamp{from{transform:scale(1.8);opacity:0}to{transform:none;opacity:1}}
  .kasm-svg .lid,.kasm-svg .stampk{transform-box:fill-box;transform-origin:center}
  @supports (animation-timeline: view()){
    .wz-t .kasm-stage{height:190vh;view-timeline-name:--kasm}
    .wz-t .kasm-sticky{position:sticky;top:76px;min-height:calc(100vh - 76px);display:grid;align-content:center}
    .js .kasm-svg .mv{animation:kmove linear both;animation-timeline:--kasm;animation-range:contain calc(4% + var(--i) * 5%) contain calc(40% + var(--i) * 5%)}
    .js .kasm-svg .lid{animation:klid linear both;animation-timeline:--kasm;animation-range:contain 70% contain 80%}
    .js .kasm-svg .stampk{animation:kstamp linear both;animation-timeline:--kasm;animation-range:contain 80% contain 88%}
  }
  @supports not (animation-timeline: view()){
    .js .kasm-fig:not(.in) .lid,.js .kasm-fig:not(.in) .stampk{opacity:0}
    .js .kasm-fig.in .mv{animation:kmove 1.3s cubic-bezier(.5,0,.6,1) both;animation-delay:calc(.3s + var(--i) * .18s)}
    .js .kasm-fig.in .lid{animation:klid .5s var(--ease) 2.5s both}
    .js .kasm-fig.in .stampk{animation:kstamp .4s var(--ease) 3s both}
  }
}
@media (max-width:980px){.js .kasm-stage{height:auto!important}.js .kasm-sticky{position:static!important;min-height:0!important}}
@media (max-width:980px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .js .kasm-svg .mv{animation-timeline:view();animation-range:cover 25% cover 55%}
    .js .kasm-svg .lid{animation-timeline:view();animation-range:cover 56% cover 64%}
    .js .kasm-svg .stampk{animation-timeline:view();animation-range:cover 64% cover 72%}
  }
}

/* ---------- contact: honest e-mail hand-off + smart BOM preview ---------- */
.rfq-f .form-how{margin-top:12px}
.form-ok{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.form-ok h2{font-size:1.3rem}
.copyline{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:1.05rem}
.copyline .addr{font-family:var(--head);color:var(--indigo);user-select:all}
.linkbtn{background:none;border:0;padding:0;color:var(--indigo);text-decoration:underline;font:inherit;cursor:pointer;min-height:24px}
.bom-peek{border:1px dashed var(--indigo-line);border-radius:12px;padding:14px 16px;background:var(--band);font-size:.88rem}
.bom-peek .bp-h{margin:0 0 10px}
.bom-peek .bp-h b{font-family:var(--head);color:var(--indigo)}
.bp-tbl{overflow-x:auto}
.bp-tbl table{border-collapse:collapse;font-size:.8rem;min-width:100%}
.bp-tbl th,.bp-tbl td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;white-space:nowrap;max-width:16em;overflow:hidden;text-overflow:ellipsis}
.bp-tbl th{color:var(--muted);font-weight:700}
.bp-note{margin:10px 0 0;color:var(--muted);font-size:.8rem}

/* ---------- hard-to-find: inspection box + experience ---------- */
.ship-box{background:var(--fill);color:var(--on-fill);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-lift)}
.ship-box h2{color:var(--on-fill)}
.ship-box p{color:var(--on-fill);margin:0}
.ship-box .eyebrow{color:var(--orange-on-indigo)}
.xp-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.xp-list li{display:grid;grid-template-columns:9.5rem 1fr;gap:14px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
.xp-list b{font-family:var(--head);font-size:1.15rem;color:var(--orange-text)}
@media (max-width:560px){.xp-list li{grid-template-columns:1fr;gap:4px}}

/* ---------- about: story arc ---------- */
.story .wrap>.g12{grid-column:1/-1}
.story .wrap:has(>.g12){display:block}
.story .pull{margin:28px 0 0;padding-left:20px;border-left:3px solid var(--orange)}
.story .pull p{font:600 1.25rem/1.45 var(--head);color:var(--on-fill);margin:0}
.story .pull footer{margin-top:8px;font:500 .9rem/1 var(--head);color:var(--orange-on-indigo)}
.prose.ticks li::marker{color:var(--orange)}

/* ---------- supplier terms: Chinese jump ---------- */
.zh-jump{display:inline-block;margin-left:8px;color:var(--on-fill);font-weight:700;font-family:var(--zh,inherit)}

/* ---------- guides: TOC numbering read once; How-Wizea box links ---------- */
.toc ol{list-style:none;padding-left:0}
.howbox p{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}

/* ---------- dark: calmer photographs ---------- */
:root[data-theme="dark"] main picture img{filter:brightness(.86) contrast(1.04)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) main picture img{filter:brightness(.86) contrast(1.04)}}

/* owner update 22:30: proof for factory-direct (complementary to the customer's own team) */
.prog-proof{margin:30px auto 0;max-width:820px;padding:20px 24px 20px 26px;border-left:4px solid var(--orange);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;box-shadow:var(--shadow)}
.prog-proof p{margin:0;font-size:1rem;line-height:1.6;color:var(--body)}
.rfq-f .field.full .check{margin:4px 0}
@media (min-width:561px){.one-grid.three{grid-template-columns:repeat(3,1fr)}}

/* =================== G · round 2 (01/11/2026) =================== */
:root{--ease-out:cubic-bezier(.2,.7,.2,1);--ease-io:cubic-bezier(.65,0,.35,1);--t-slow:.7s}

/* footer headings are h2 now (A-2), styled as before */
.foot .foot-h{color:var(--on-fill);font-family:var(--head);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin:6px 0 16px;line-height:1.3}
/* header logo target ≥24px (A-5) */
.site-header .brand{display:inline-flex;align-items:center;min-height:44px;padding-block:2px}

/* U-2 · answer band with "On this page" */
.answer-band{padding:30px 0 28px!important}
.answer-g{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:40px;align-items:start}
.onpage{border-left:3px solid var(--orange);padding:4px 0 4px 18px}
.onpage b{display:block;font:700 .72rem/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-text);margin-bottom:10px}
.onpage ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.onpage a{display:block;padding:6px 0;min-height:24px;color:var(--indigo);font-weight:600;font-size:.92rem;text-decoration:none}
.onpage a:hover{color:var(--orange-text)}
.onpage a::after{content:" ↓";color:var(--orange-text)}
.answer-band + .sec{padding-top:56px}
@media (max-width:900px){.answer-g{grid-template-columns:1fr;gap:18px}.onpage ul{grid-template-columns:1fr 1fr;column-gap:16px}}
@media (max-width:420px){.onpage ul{grid-template-columns:1fr}}

/* E2 · cards: neutral line-of-work chip, grey context */
.xcards .xl{font:700 .66rem/1 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--indigo);background:var(--band);border:1px solid var(--line);border-radius:999px;padding:5px 8px;white-space:nowrap}
.xcards .xc{margin-top:10px!important;font-size:.78rem!important;color:var(--muted)}
.prog-sec .hero-actions{margin-top:28px}
.prog-proof + .hero-actions{margin-top:28px}
.profiles.prog.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1099px){.profiles.prog.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.profiles.prog.four{grid-template-columns:1fr}}

/* V-1 · illustration panel for families without photo */
.fam .fam-ill{position:relative;background:linear-gradient(135deg,var(--fill) 0%,var(--fill-violet) 100%);color:var(--on-fill)}
.fam .fam-ill svg{width:62%;height:auto}
.fam .fam-ill svg .acc{stroke:var(--orange-on-indigo)}
.fam .fam-ill svg .tie{stroke-width:5;stroke:var(--orange-on-indigo)}
.fam .fam-ill span{position:absolute;right:8px;bottom:6px;font:600 .62rem/1 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--on-fill);opacity:.8}

/* E5 · families list */
.fam-list{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fam-list li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-weight:600;color:var(--indigo);font-family:var(--head);font-size:.92rem;position:relative;padding-left:32px}
.fam-list li::before{content:"";position:absolute;left:14px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--orange)}
@media (max-width:560px){.fam-list{grid-template-columns:1fr}}

/* A-1 · three layers stacked on phones (no swipe region); plain outcome chips (R09) */
@media (max-width:640px){.msteps{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;gap:26px}.msteps .mstep{flex:none!important;width:auto!important}}
.deliv.plain{padding-left:12px}
.deliv.plain::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);display:inline-block;margin-right:4px}

/* guides: services links */
.svc-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:.88rem}
.svc-links b{width:100%;font:700 .72rem/1.2 var(--head);letter-spacing:.12em;text-transform:uppercase;color:inherit}
.faq-more{margin:6px 0 34px}

/* A-6 · legible SVG text: hide in-SVG map labels below 1100 px; calendar months 12 px */
@media (max-width:1099px){.wnet text{display:none}}
.wnet .rg{font-size:17px}
.wnet .hubs{font-size:15px}
.pcal .m{font-size:.75rem}
/* V-4 · stronger map in light */
.wnet .fb{opacity:.9}
.wnet .fb.out{stroke:#6E72B8}
.wnet .rg{fill:#4A4E8C}
.wnet .core{filter:drop-shadow(0 0 6px rgba(236,115,29,.55))}
:root[data-theme="dark"] .wnet .fb.out{stroke:var(--flow-out)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wnet .fb.out{stroke:var(--flow-out)}}

/* U-3 eyebrow one line; U-4 orphan stat centred; U-6 tighter bands */
.hero-f .eyebrow{white-space:nowrap}
@media (max-width:360px){.hero-f .eyebrow{letter-spacing:.08em;font-size:.7rem}}
@media (max-width:700px){.nums-f.nums-5 li:last-child{text-align:center;border-top:1px solid var(--line);padding-top:12px}}
#examples.sec,#examples + .sec,.sec:has(> .wrap > .steps-f){padding-top:64px;padding-bottom:64px}

/* U-5 · tablet header (800–980): primary links visible, compact */
@media (min-width:800px) and (max-width:980px){
  .hdr{gap:8px}
  .brand{flex:none}
  .hdr .nav{display:flex!important}
  .nav-f a,.nav-f button{padding:8px 4px;font-size:.72rem;min-height:40px;gap:3px}
  .nav-f>li:last-child .dd{left:auto;right:0}
  .nav-f{gap:0}
  .menu-btn{display:none!important}
  .mobile-nav{display:none!important}
  .hdr-quote{margin-left:4px;margin-right:0;padding:9px 14px}
  .hdr-ctas{display:flex!important;margin-left:auto}
  .hdr-ctas .btn{display:none!important}
  .theme-hdr{display:inline-flex!important}
  .brand img{width:104px!important}
}

/* contact (R07): on phones the request type comes before the upload */
@media (max-width:640px){.rfq-f .grid2>.paths{order:-1}}
.rfq-f .path:has(input:checked){border-color:var(--orange)}

/* supplier (S01): Chinese first in 中文 mode; H1 keeps words together */
html[data-lang="zh"] .sup-f label,html[data-lang="zh"] .sup-f legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
html[data-lang="zh"] .sup-f .zh{order:-1;font-size:1em;color:var(--indigo);font-weight:700}
html[data-lang="zh"] .sup-f .len{font-size:.82em;font-weight:500;color:var(--muted)}
html[data-lang="zh"] .sup-f .req{order:-1}
.sup-hero h1 [lang="zh-Hans"]{word-break:keep-all;line-break:strict}
.wechat-path{display:none}
html[data-lang="zh"] .wechat-path{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.9rem}

/* E9 · motion polish: one easing family, consistent stagger, hero entrance */
.js .rv{transform:translateY(16px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.js .stagger>*{transform:translateY(14px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.js .stagger.in>*:nth-child(2){transition-delay:.07s}.js .stagger.in>*:nth-child(3){transition-delay:.14s}.js .stagger.in>*:nth-child(4){transition-delay:.21s}.js .stagger.in>*:nth-child(5){transition-delay:.28s}.js .stagger.in>*:nth-child(6){transition-delay:.35s}.js .stagger.in>*:nth-child(n+7){transition-delay:.42s}
.door,.profiles a,.sol,.xcards li,.btn{transition-timing-function:var(--ease-out)!important}
@media (prefers-reduced-motion:no-preference){
  @keyframes wz-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes wz-fade{from{opacity:0}to{opacity:1}}
  @keyframes wz-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .js .hero-copy>.eyebrow{animation:wz-up var(--t-slow) var(--ease-out) both}
  .js .hero-copy>.slogan{animation:wz-up var(--t-slow) var(--ease-out) .12s both}
  .js .hero-copy>.lead{animation:wz-up var(--t-slow) var(--ease-out) .2s both}
  .js .hero-copy>.hero-actions{animation:wz-up var(--t-slow) var(--ease-out) .28s both}
  .js .hero-copy>.first-link{animation:wz-fade var(--t-slow) var(--ease-out) .4s both}
  .js .hero-f .net{animation:wz-fade 1s var(--ease-out) .15s both}
  .js .hero-f .doors li{animation:wz-up var(--t-slow) var(--ease-out) both}
  .js .hero-f .doors li:nth-child(1){animation-delay:.36s}.js .hero-f .doors li:nth-child(2){animation-delay:.42s}.js .hero-f .doors li:nth-child(3){animation-delay:.48s}.js .hero-f .doors li:nth-child(4){animation-delay:.54s}
  .js .hero-copy>.eyebrow::before{transform-origin:left;animation:wz-draw .6s var(--ease-out) .1s both}
  .js .banner .lead,.js .banner .hero-actions{animation:wz-up var(--t-slow) var(--ease-out) .12s both}
  .js .banner .hero-actions{animation-delay:.2s}
  .js .banner .art{animation:wz-fade .9s var(--ease-out) .1s both}
  ::view-transition-old(root){animation:.22s var(--ease-io) both vt-out}
  ::view-transition-new(root){animation:.32s var(--ease-out) both vt-in}
  @keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
  @keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
}
.hero-f .eyebrow{flex-wrap:nowrap!important}
@media (max-width:480px){.hero-f .eyebrow{font-size:.68rem;letter-spacing:.07em;gap:8px}.hero-f .eyebrow::before{width:16px}}

/* =================== G · round 3 (02/11/2026) =================== */
/* F6 · one spacing scale and one card token set */
:root{--s5:40px;--s6:48px;--s8:64px;--card-r:16px;--card-sh:0 10px 30px rgba(28,30,90,.08)}
.door,.sol,.profiles a,.profiles li>div,.xcards li,.val,.gcard,.ship-box,.pcal,.form-card,.howbox,.report,.cert,.fam,.card{border-radius:var(--card-r)}
.door,.sol,.xcards li,.val,.gcard,.pcal,.form-card,.cert,.fam{box-shadow:var(--card-sh)}
.sec{padding:var(--s8) 0}
@media (max-width:700px){.sec{padding:var(--s6) 0}}
.sec-head{margin-bottom:var(--s5)}
/* F6 · identical hero image treatment on inner pages */
.bphoto,.banner.has-photo .bphoto{aspect-ratio:16/10;border-radius:var(--card-r);box-shadow:0 18px 50px rgba(0,0,0,.28);background:transparent}
.bphoto img{width:100%;height:100%;object-fit:cover;display:block}
.bphoto::after{content:"";position:absolute;inset:0;border-radius:var(--card-r);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);pointer-events:none}
@media (max-width:640px){.bphoto,.banner.has-photo .bphoto{aspect-ratio:16/9}}

/* A-7 */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* U-7 · legible eyebrow and chips on phone */
.eyebrow{font-size:.75rem;letter-spacing:.08em}
@media (max-width:480px){.hero-f .eyebrow{font-size:.72rem;letter-spacing:.06em}}
.xcards .xl{font-size:.72rem}
.pcal .m{font-size:.76rem}

/* U-8 · tablet nav ≥13 px (800–980) */
@media (min-width:800px) and (max-width:980px){
  .nav-f a,.nav-f button{font-size:.8125rem;padding:8px 4px;min-height:40px;letter-spacing:-.01em}
  .brand img{width:96px!important}
  .hdr-quote{padding:8px 12px;font-size:.82rem}
  .theme-hdr{width:36px;height:36px}
  .nav .caret{width:10px;height:10px}
}

/* U-9 · hub sub-label ≥12 px at 1440 (viewBox scale ≈ .68) */
.wnet .hubs{font-size:18px}
.wnet .hubt{font-size:20px}
/* V-7 · map contrast and a quieter pause button */
.wnet .fb{opacity:.95}
.wnet .fb.in{stroke:#E39A5E}
.wnet .fb.out{stroke:#5F63B0}
:root[data-theme="dark"] .wnet .rg,:root[data-theme="dark"] .wnet .hubt{fill:#C5C8FF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wnet .rg,:root:not([data-theme="light"]) .wnet .hubt{fill:#C5C8FF}}
:root[data-theme="dark"] .wnet .fb.out{stroke:#8F93D6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wnet .fb.out{stroke:#8F93D6}}
.netpause{top:auto;bottom:0;right:0;width:32px;height:32px}
.netpause svg{width:14px;height:14px}

/* U-10 · full-width hero CTAs on phone; U-11 · single-column ONE grid; U-12 · five stats from 760 */
@media (max-width:640px){.hero-f .hero-actions{display:grid;grid-template-columns:1fr;gap:10px}.hero-f .hero-actions .btn{width:100%;justify-content:center}.one-grid,.one-grid.three{grid-template-columns:1fr}.one-grid li{padding:16px 0}}
@media (min-width:760px) and (max-width:1100px){.nums-f.nums-5{grid-template-columns:repeat(5,1fr)!important;gap:14px 10px}.nums-f.nums-5 .n{font-size:1.6rem}.nums-f.nums-5 .l{font-size:.78rem}}

/* U-13 · hard-to-find: inspection card stretches; V-8 · phone dead band */
.ship-box{height:100%;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}
.ship-box ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:6px;font-size:.9rem;color:var(--on-fill)}
.ship-box ul li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange-on-indigo);margin-right:8px;vertical-align:middle}
@media (max-width:640px){#examples + .sec{padding-top:var(--s5)}.one-sec{padding-top:var(--s5)}}

/* F3 · About: timeline collapsed on phone with "show more" */
.story .more-wrap[hidden]{display:none}
.story .show-more{background:none;border:1px solid rgba(255,255,255,.4);color:var(--on-fill);border-radius:999px;padding:10px 18px;font:700 .88rem var(--head);cursor:pointer;margin-top:14px}
@media (min-width:641px){.story .show-more{display:none}.story .more-wrap[hidden]{display:block}}

/* F2 · hard-to-find line rows */
.lines-f{border:0;padding:0;margin:0}
.lines-f legend{font-weight:600;font-size:.88rem;color:var(--indigo);margin-bottom:8px;padding:0}
.lines-f .hint-i{font-weight:500;color:var(--muted)}
.line-row{display:grid;grid-template-columns:1.6fr .7fr 1fr auto;gap:10px;align-items:end;margin-bottom:10px}
.line-row .field{margin:0}
.line-row label{font-size:.8rem}
.rm-line{width:40px;height:44px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);font-size:1.2rem;cursor:pointer;align-self:end}
.rm-line:hover{border-color:var(--err-line);color:var(--err)}
.add-line{margin:4px 0 6px}
@media (max-width:640px){.line-row{grid-template-columns:1fr 1fr;grid-template-areas:"a a" "b c" "d d"}.line-row .field:nth-child(1){grid-area:a}.line-row .field:nth-child(2){grid-area:b}.line-row .field:nth-child(3){grid-area:c}.rm-line{grid-area:d;width:100%;height:40px}}

/* E9 follow-up · one signature moment per page: card spotlight only on home */
body:not(:has(.hero-f)) .door,body:not(:has(.hero-f)) .sol,body:not(:has(.hero-f)) .profiles li>a,body:not(:has(.hero-f)) .profiles li>div,body:not(:has(.hero-f)) .xcards li,body:not(:has(.hero-f)) .val,body:not(:has(.hero-f)) .gcard{background-image:none!important}
html:not(.wz-t) .story .more-wrap[hidden]{display:block}
html:not(.wz-t) .story .show-more{display:none}

/* R3 · compact "how it works" line on home */
.steps-line{display:grid;gap:14px;padding:24px 0 8px;border-top:1px solid var(--line)}
.steps-line h2{font-size:1.25rem;margin:0}
.steps-mini{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px 22px;counter-reset:sm}
.steps-mini li{position:relative;padding-left:34px;font-size:.9rem;line-height:1.45}
.steps-mini li::before{counter-increment:sm;content:counter(sm);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--orange);color:#14164A;font:800 .78rem/24px var(--head);text-align:center}
.steps-mini b{display:block;font-family:var(--head);color:var(--indigo)}
@media (max-width:900px){.steps-mini{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.steps-mini{grid-template-columns:1fr}}

/* ---- G R4 ---- */
/* V-6: 8 family cards → 4 columns from 981px (4+4), 2 columns 521–980 (2×4), 1 column on phones: never a short last row */
@media (min-width:981px){.fams{grid-template-columns:repeat(4,1fr);gap:16px}.fam picture,.fam .fam-sp,.fam .fam-ill{aspect-ratio:4/3}}
@media (min-width:761px) and (max-width:980px){.fams{grid-template-columns:repeat(2,1fr)}}
/* R3-01: the menu panel is anchored below the sticky header (absolute inside it = fixed to the viewport while open), so
   opening it deep in a page never scrolls to the top; html.menu-open already locks page scroll. No-JS keeps the static list. */
@media (max-width:980px){
  html.wz-t .site-header{position:sticky}
  html.wz-t .mobile-nav{position:absolute;left:0;right:0;top:100%;z-index:99;box-shadow:0 18px 40px -24px rgba(20,22,74,.35)}
  html.wz-t .mobile-nav.open{max-height:calc(100dvh - 68px);height:calc(100dvh - 68px);overflow:auto;padding-bottom:env(safe-area-inset-bottom,0)}
}
/* K-8: the home's three programme cards sit in one row down to 521px */
.profiles.prog.three{grid-template-columns:repeat(3,1fr)}
@media (min-width:521px) and (max-width:980px){.profiles.prog.three{grid-template-columns:repeat(3,1fr);gap:10px}}
@media (max-width:520px){.profiles.prog.three{grid-template-columns:1fr}}
/* U-7b: eyebrows, chips and tags never below 12px (.75rem); A-9: footer small print never below 12.5px (.78rem) */
.eyebrow,.hero-f .eyebrow,.pill,.chip,.xcards .xl,.pcal .tag,.pcal .m,.kit-legend,.kit-legend b,.onpage b,.svc-links b,.gcard .k,.ph-badge,.fam .fam-ill span,.nums-note,.proof-f small,.mobile-nav li>span{font-size:.75rem}
@media (max-width:480px){.eyebrow,.hero-f .eyebrow,.xcards .xl{font-size:.75rem}}
.site-footer .certs a,.site-footer .certs span,.site-footer .foot-facts b,.site-footer .cookie-line,.site-footer small,.site-footer .legal{font-size:.78rem}
/* U-14: region chips 2×2 below 900px */
@media (max-width:900px){.rchips{display:grid;grid-template-columns:1fr 1fr;gap:8px}.rchips .rchip{justify-content:center;text-align:center}}
/* V-9 (G6): dark home hero. The first screen sits on the indigo fill in both themes; tokens are re-scoped so every child
   (eyebrow, slogan, lead, outline button, map labels, region chips, legend) keeps its contrast pair. Doors and numbers stay on the page background. */
.hero-f{padding-top:0}
.hero-dark{--bg:var(--fill);--surface:rgba(255,255,255,.08);--line:rgba(255,255,255,.34);--indigo:#FFFFFF;--body:#DADBF2;--muted:#C9CBEA;--orange-text:var(--orange-on-indigo);--orange-tint:rgba(255,255,255,.14);--map-dot:rgba(255,255,255,.32);--flow-in:#F2B07D;--flow-out:#A4A7E0;--band:var(--fill);
  background:linear-gradient(160deg,var(--fill) 0%,var(--fill-violet) 100%);color:var(--body);padding:52px 0 44px;margin-bottom:34px;position:relative;overflow:hidden}
.hero-dark::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:rgba(255,255,255,.12)}
.hero-dark h1,.hero-dark .slogan{color:#FFFFFF}
.hero-dark .hero-copy h1 .o{color:var(--orange-on-indigo)}
.hero-dark .eyebrow{color:var(--orange-on-indigo)}
.hero-dark .eyebrow::before{background:var(--orange-on-indigo)}
.hero-dark .lead{color:#DADBF2}
.hero-dark .btn-outline{color:#FFFFFF;border-color:rgba(255,255,255,.75)}
.hero-dark .btn-outline:hover,.hero-dark .btn-outline:focus-visible{background:rgba(255,255,255,.12);color:#FFFFFF}
.hero-dark .link-arrow{color:#FFFFFF}
.hero-dark .wnet .core{stroke:var(--fill)}
.hero-dark .wnet .rg{fill:#C9CBEA}
.hero-dark .wnet .hubt{fill:#FFFFFF}
.hero-dark .wnet .hubs{fill:var(--orange-on-indigo)}
.hero-dark .wnet .pk.out{stroke:#FFFFFF}
.hero-dark .net figcaption{color:#C9CBEA}
.hero-dark .net .lg .out{background:#FFFFFF}
.hero-dark .rchip{color:#FFFFFF}
.hero-dark .rchip:hover,.hero-dark .rchip:focus-visible,.hero-dark .rchip[aria-pressed="true"]{border-color:var(--orange-on-indigo);background:rgba(255,255,255,.14)}
.hero-dark .rdetail{color:#DADBF2}
.hero-dark .vpause{color:#FFFFFF;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08)}
.hero-dark .net-list summary,.hero-dark .net-list{color:#DADBF2}
.hero-dark .net-list a{color:#FFFFFF}
@media (max-width:980px){.hero-dark{padding:32px 0 30px;margin-bottom:26px}}
@media (min-width:981px){.hero-dark{padding:44px 0 40px}}
.hero-dark .net .lg i.out{background:#FFFFFF}
.hero-f{padding-top:0!important}
@media (max-width:980px){.hero-f{padding-top:0}}
/* K-9: FAQ topic tabs (JS); without JS the list stays a set of jump links above the stacked topics */
.faq-nav-wrap{position:sticky;top:68px;z-index:5;background:var(--band);padding:6px 0;margin:0 0 10px}
@media (min-width:981px){.faq-nav-wrap{top:78px}}
.faq-tabbed .faq-nav{display:flex;flex-wrap:wrap;gap:8px}
.faq-tabbed .faq-nav a{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--indigo);font:600 .88rem var(--head);text-decoration:none}
.faq-tabbed .faq-nav a[aria-selected="true"]{background:var(--fill);color:var(--on-fill);border-color:var(--fill)}
.faq-tabbed .faq-nav a:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.faq-tabbed .faq-group[hidden]{display:none}
.faq-tabbed .faq-group[hidden="until-found"]{display:block;content-visibility:hidden}
.faq-tabbed .faq-group{padding-top:10px}
@media (max-width:600px){.faq-nav-wrap{position:static}.faq-tabbed .faq-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px;-webkit-overflow-scrolling:touch}.faq-tabbed .faq-nav a{white-space:nowrap;flex:none}}
/* G6 signature motion · hard-to-find: a tracer travels the counterfeit-avoidance line (source → inspect → test) as the
   section scrolls; how-we-work: a four-node rail draws itself ahead of the steps. Scroll-driven where supported, a timed
   reveal (IO, .in) elsewhere, and the finished state when motion is reduced. */
.method-line .tracer{position:absolute;top:-6px;left:4.07%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px var(--bg),0 0 0 6px var(--orange);opacity:0}
.method.in .method-line .tracer{opacity:1;left:87.7%;transition:left 2.6s var(--ease),opacity .3s}
.flow-wrap{position:relative}
.flow-rail{margin:0 0 18px}
.flow-rail svg{display:block;width:100%;height:32px;overflow:visible}
.flow-rail .base{fill:none;stroke:var(--indigo-line);stroke-width:2}
.flow-rail .prog{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--ease)}
.flow-rail .n{fill:var(--surface);stroke:var(--indigo-line);stroke-width:2;transition:fill .3s,stroke .3s}
.flow-wrap.in .flow-rail .prog{stroke-dashoffset:0}
.flow-wrap.in .flow-rail .n{fill:var(--orange);stroke:var(--orange)}
.flow-wrap.in .flow-rail .n2{transition-delay:.6s}.flow-wrap.in .flow-rail .n3{transition-delay:1.3s}.flow-wrap.in .flow-rail .n4{transition-delay:2s}
@media (max-width:800px){.flow-rail{display:none}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .wz-t .method{view-timeline-name:--mline;view-timeline-axis:block}
    .wz-t .method .method-line path.prog{transition:none;animation:wz-line linear both;animation-timeline:--mline;animation-range:entry 25% contain 70%}
    .wz-t .method .method-line .tracer{transition:none;opacity:1;animation:wz-trace linear both;animation-timeline:--mline;animation-range:entry 25% contain 70%}
    .wz-t .flow-wrap{timeline-scope:--flow}
    .wz-t .flow-wrap .flow-f{view-timeline-name:--flow;view-timeline-axis:block}
    .wz-t .flow-wrap .flow-rail .prog{transition:none;animation:wz-line linear both;animation-timeline:--flow;animation-range:entry 0% contain 60%}
    .wz-t .flow-wrap .flow-rail .n{transition:none;animation:wz-node linear both;animation-timeline:--flow}
    .wz-t .flow-wrap .flow-rail .n1{animation-range:entry 0% entry 10%}
    .wz-t .flow-wrap .flow-rail .n2{animation-range:entry 30% entry 45%}
    .wz-t .flow-wrap .flow-rail .n3{animation-range:entry 60% entry 80%}
    .wz-t .flow-wrap .flow-rail .n4{animation-range:entry 95% contain 60%}
  }
}
@keyframes wz-line{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes wz-trace{from{left:4.07%}to{left:87.7%}}
@keyframes wz-node{from{fill:var(--surface);stroke:var(--indigo-line)}to{fill:var(--orange);stroke:var(--orange)}}
@media (prefers-reduced-motion:reduce){
  .method-line .tracer{opacity:1;left:87.7%;transition:none}
  .flow-rail .prog{stroke-dashoffset:0;transition:none}.flow-rail .n{fill:var(--orange);stroke:var(--orange);transition:none}
}
/* U-15: a static poster (the kit's final frame, faint) sits behind the pinned track, so the stage never reads as blank in
   full-page captures or for fast scrollers; the scrubbed animation plays over it. Hidden where the stage is not pinned. */
.kasm-stage{position:relative}
.kasm-poster{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none}
.kasm-poster svg{position:absolute;right:4%;bottom:4vh;width:min(46vw,760px);height:auto;opacity:.09}
.kasm-poster .mv{transform:translate(var(--dx),var(--dy)) scale(.35);opacity:0;animation:none!important}
.kasm-poster .lid,.kasm-poster .stampk{opacity:1;animation:none!important;transform:none}
@media (min-width:981px) and (prefers-reduced-motion:no-preference){@supports (animation-timeline: view()){.wz-t .kasm-poster{display:block}}}
.kasm-sticky{position:relative;z-index:1}

/* V-6 (home examples, 5 cards): one card per row between 561 and 1099px, laid out as a two-column strip, so no row is short */
@media (min-width:561px) and (max-width:1099px){
  .xcards li{display:grid;grid-template-columns:minmax(200px,.9fr) minmax(0,2fr);grid-template-areas:"h p" "t p" "t c";column-gap:22px;row-gap:4px;align-items:start}
  .xcards .xh{grid-area:h;justify-content:flex-start;gap:10px;margin-bottom:4px}
  .xcards h3{grid-area:t}.xcards li>p:not(.xc){grid-area:p}.xcards .xc{grid-area:c;margin-top:0!important}
}
.faq-tabbed .faq-group details,.faq-tabbed .faq-group h2{scroll-margin-top:200px}
@media (max-width:600px){.faq-tabbed .faq-group details,.faq-tabbed .faq-group h2{scroll-margin-top:84px}}
.faq-nav-wrap .faq-nav{margin:0}
.faq-tabbed .faq-nav{gap:6px}
.faq-tabbed .faq-nav a{min-height:36px;padding:6px 12px;font-size:.82rem}
.faq-tabbed .faq-group details,.faq-tabbed .faq-group h2{scroll-margin-top:170px}

/* R5 · U-16a: tab bar sticky on phones too, with a right-edge fade and snap; V-10: About three cards stay 3-up from 640px;
   V-11: fifth stat spans the row and aligns left; V-12: cooler light bands and crisp card borders (dark tokens untouched); K-10: hero eyebrow separators */
@media (max-width:600px){.faq-nav-wrap{position:sticky;top:68px;z-index:5;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}.faq-tabbed .faq-nav{scroll-snap-type:x proximity;padding-right:40px}.faq-tabbed .faq-nav li{scroll-snap-align:start}}
@media (min-width:640px) and (max-width:1024px){.grid.g3,.g3{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.nums-f.nums-5>li:last-child{grid-column:1/-1;text-align:left}}
:root[data-theme="light"],:root:not([data-theme="dark"]){--band:#EEF1F8;--line:#D5DAE6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--band:#10133F;--line:#2C3069}}
.hero-f .eyebrow .sep{margin:0;opacity:.7}
.brand img{aspect-ratio:148/40}
.xintro{max-width:60ch;margin:-6px auto 22px;text-align:center;font-weight:600;color:var(--indigo)}
/* G i18n: the header language switcher shows from 981px; on tablets and phones the menu and the footer carry it */
/* (G i18n: the header globe stays visible on phones, see the selector block) */
/* G i18n: longer translated header labels fit the 761–980px header */
@media (min-width:761px) and (max-width:980px){.hdr-quote{padding-left:12px;padding-right:12px}}
@media (min-width:761px) and (max-width:980px){html:lang(pt) .hdr{gap:5px}html:lang(pt) .hdr-quote{padding-left:10px;padding-right:10px}}
@media (min-width:761px) and (max-width:860px){html:lang(pt) .nav-f>li>a,html:lang(pt) .nav-f>li>button{letter-spacing:-.025em;padding-left:3px;padding-right:3px}}

/* ---- G6 · header fit, both languages, 981–1920 px (gate g1qa/hdr6.js: logo ≥ 110 px, no overflow, one-line labels) ----
   The header row may use more width than the 1180 px content column on large screens; nav padding and gaps are tokens per
   band; the outline "For suppliers" button only shows when there is room (it stays in the Company menu and the footer). */
@media (min-width:981px){
  .site-header .hdr{gap:8px}
  .site-header .brand img,.site-header .brand img.logo-d{width:124px;height:auto}
  .nav-f>li>a,.nav-f>li>button{padding-left:6px;padding-right:6px}
  .langsw-hdr summary{padding:8px 8px}
}
@media (min-width:1180px){
  .site-header .wrap.hdr{width:min(1340px,100% - 2*var(--gutter))}
  .site-header .hdr{gap:12px}
  .site-header .brand img,.site-header .brand img.logo-d{width:148px}
  .nav-f>li>a,.nav-f>li>button{padding-left:8px;padding-right:8px}
}
@media (max-width:1279px){.hdr-ctas .btn-outline{display:none}}
@media (max-width:1439px){html:lang(pt) .hdr-ctas .btn-outline{display:none}}
/* 981–1099 px: the short "Quote" button replaces "Request a quote" so the full nav still fits on one line */
@media (min-width:981px) and (max-width:1099px){.hdr-ctas .btn-orange{display:none}.site-header .hdr-quote{display:inline-flex;margin:0;padding:9px 14px}}
@media (min-width:981px) and (max-width:1060px){.site-header .hdr{gap:5px}.site-header .brand img,.site-header .brand img.logo-d{width:112px}.nav-f>li>a,.nav-f>li>button{padding-left:4px;padding-right:4px}}

/* G i18n · translated legal pages: English-prevails note (top of page) and the one-line footer note; English: "Also available in" */
.legal-note{margin:0 0 26px;padding:14px 18px 14px 16px;border:1px solid var(--line);border-left:4px solid var(--indigo);border-radius:0 var(--radius) var(--radius) 0;background:var(--band);color:var(--body);font-size:.92rem;line-height:1.55;max-width:860px}
.legal-note p{margin:0}.legal-note p+p{margin-top:6px}
.legal-note a{color:var(--indigo);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.legal-alt{margin:0 0 22px;font-size:.88rem;color:var(--muted)}
.legal-alt a{font-weight:600}
.site-footer .legal-footnote{margin:8px 0 0;font-size:.8rem;line-height:1.5;opacity:.92}
.site-footer .legal-footnote a{color:inherit;text-decoration:underline}
.legal-note .legal-note-h{margin:0 0 4px;color:var(--indigo)}

/* ---- G i18n · Simplified Chinese typography (html lang="zh-Hans") ----
   Montserrat has no CJK glyphs: Latin letters and digits stay in Montserrat, Chinese falls to the platform CJK faces.
   No uppercase or tracking tricks on Chinese; looser leading; strict line breaking so punctuation never starts a line. */
html:lang(zh){
  --text:"Montserrat","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,sans-serif;
  --head:"Montserrat","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,sans-serif;
  --zh:var(--text)
}
html:lang(zh) body{line-height:1.75;line-break:strict;word-break:normal;overflow-wrap:break-word;text-autospace:normal;font-feature-settings:"palt" 0}
html:lang(zh) h1,html:lang(zh) h2,html:lang(zh) h3,html:lang(zh) h4,html:lang(zh) .slogan{letter-spacing:0;line-height:1.35;font-weight:700}
html:lang(zh) .hero-copy h1{line-height:1.2}
html:lang(zh) .eyebrow,html:lang(zh) .pill,html:lang(zh) .xcards .xl,html:lang(zh) .xcards .xr,html:lang(zh) .svc .tag,html:lang(zh) .mobile-nav li>span,html:lang(zh) .dd .dd-head,html:lang(zh) .ph-badge,html:lang(zh) .fam .fam-ill span,html:lang(zh) .wnet .rg,html:lang(zh) .kasm-svg .ln,html:lang(zh) .foot-facts b,html:lang(zh) .langs-line b{text-transform:none;letter-spacing:0}
html:lang(zh) .eyebrow{font-size:.82rem}
html:lang(zh) p,html:lang(zh) li,html:lang(zh) dd,html:lang(zh) td{text-align:start;hanging-punctuation:none}
html:lang(zh) .nav-f>li>a,html:lang(zh) .nav-f>li>button,html:lang(zh) .btn{letter-spacing:0;white-space:nowrap}
html:lang(zh) em,html:lang(zh) i{font-style:normal}
html:lang(zh) em{text-emphasis:none;font-weight:700}
/* zh-Hans WeChat copy button on the indigo footer / dark bands */
.site-footer .copy-btn,.cta .copy-btn,.hero-dark .copy-btn{color:#fff;border-color:rgba(255,255,255,.75);background:transparent}
.site-footer .copy-btn:hover,.site-footer .copy-btn:focus-visible{background:rgba(255,255,255,.12);color:#fff}
.site-footer .wx-num{white-space:nowrap}
/* G i18n · long-word languages: hyphenate running text (not headings, nav, buttons, tables of codes) */
html:lang(de) .prose p,html:lang(de) .answer p,html:lang(de) .lead,html:lang(de) .ans p,html:lang(de) dd,html:lang(de) td,html:lang(de) .profiles p,html:lang(de) .xcards p,html:lang(de) .door .dt,
html:lang(fr) .ans p,html:lang(fr) td,html:lang(it) td{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
html:lang(de) h1,html:lang(de) h2,html:lang(de) h3{overflow-wrap:break-word;hyphens:manual}
html:lang(fr) main .btn,html:lang(de) main .btn{white-space:normal;text-align:center}

/* ---- G i18n · language selector (LANGUAGE_STRATEGY §4.3) ---- */
.lang-suggest{bottom:calc(16px + env(safe-area-inset-bottom,0px));flex-wrap:wrap;max-width:520px}
.lang-suggest p{flex:1 1 100%}
.lang-suggest .ls-x{position:absolute;top:4px;right:4px}
.lang-suggest{position:fixed;padding-right:44px}
body.has-lang-suggest .to-top{bottom:calc(132px + env(safe-area-inset-bottom,0px))}
@media (max-width:520px){body.has-lang-suggest .to-top{bottom:calc(150px + env(safe-area-inset-bottom,0px))}}
.langsw-hdr summary{display:inline-flex;align-items:center;gap:6px;min-height:40px}
.langsw-hdr .ico-globe{width:18px;height:18px;flex:none}
.langsw-hdr a[aria-current="true"]::after{content:" ✓";color:var(--orange-text)}
/* phone/tablet top bar: compact globe (44×44) next to the menu button; the full list stays at the top of the menu */
@media (max-width:980px){
  .site-header .langsw-hdr{display:block!important;margin:0 4px 0 0}
  .site-header .langsw-hdr summary{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:10px}
  .site-header .langsw-hdr summary .lc{display:none}
  .site-header .langsw-hdr ul{right:-52px}
  .site-header .hdr-quote{margin-right:4px}
}
@media (max-width:359px){.site-header .hdr-quote{padding-left:12px;padding-right:12px}}
@media (max-width:980px){
  .site-header .brand{order:0}.site-header .hdr .nav{order:1}.site-header .hdr-ctas{order:2}
  .site-header .hdr-quote{order:3;margin-left:auto}.site-header .langsw-hdr{order:4;margin:0 6px}.site-header .menu-btn{order:5}
}
@media (min-width:800px) and (max-width:980px){
  .site-header .langsw-hdr{order:2;margin:0 2px}
  .site-header .langsw-hdr summary{width:36px;height:36px;min-height:36px}
  .site-header .hdr-ctas{order:3;margin-left:0}.site-header .hdr-quote{order:4;margin-left:2px}
}
@media (max-width:399px){.site-header .langsw-hdr summary{width:40px;height:40px;min-height:40px}.site-header .langsw-hdr{margin:0 4px}.site-header .brand img,.site-header .brand img.logo-d{width:104px}}
@media (max-width:379px){.site-header .hdr{gap:4px}.site-header .brand img,.site-header .brand img.logo-d{width:92px}.site-header .hdr-quote{padding:8px 10px;font-size:.8rem;margin-right:2px}.site-header .langsw-hdr{margin:0 2px}.site-header .langsw-hdr summary{width:38px;height:38px;min-height:38px}.menu-btn{width:42px;height:42px}}
@media (min-width:521px) and (max-width:679px){.profiles.prog.three{grid-template-columns:1fr}}
.profiles.prog h3,.profiles.prog p{overflow-wrap:break-word;hyphens:auto}
body.has-lang-suggest .to-top{bottom:calc(var(--ls-h,110px) + 28px + env(safe-area-inset-bottom,0px))!important}
/* zh-Hant: Traditional glyph forms (HK first, then TW) — never the Simplified fonts */
html:lang(zh-Hant){
  --text:"Montserrat","PingFang HK","PingFang TC","Microsoft JhengHei","Noto Sans TC","Source Han Sans TC",system-ui,sans-serif;
  --head:"Montserrat","PingFang HK","PingFang TC","Microsoft JhengHei","Noto Sans TC","Source Han Sans TC",system-ui,sans-serif;
  --zh:var(--text)
}
/* Spanish: long words in running text */
html:lang(es) .prose p,html:lang(es) .answer p,html:lang(es) .lead,html:lang(es) .ans p,html:lang(es) dd,html:lang(es) td,html:lang(es) .profiles p,html:lang(es) .xcards p{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
html:lang(es) main .btn{white-space:normal;text-align:center}
/* tablet 800–879: room for the globe next to the full nav (nav labels stay 13 px) */
@media (min-width:800px) and (max-width:879px){.site-header .brand img,.site-header .brand img.logo-d{width:100px}.site-header .langsw-hdr summary{width:32px;height:32px;min-height:32px}.site-header .langsw-hdr{margin:0}.site-header .hdr-quote{padding:8px 10px}.site-header .hdr{gap:4px}.site-header .theme-hdr{width:32px;height:32px}}
/* French / Italian running text, German narrow cards and headings */
html:lang(fr) .prose p,html:lang(fr) .answer p,html:lang(fr) .lead,html:lang(fr) dd,html:lang(fr) .profiles p,html:lang(fr) .xcards p,
html:lang(it) .prose p,html:lang(it) .answer p,html:lang(it) .lead,html:lang(it) .ans p,html:lang(it) dd,html:lang(it) .profiles p,html:lang(it) .xcards p{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
html:lang(de) .door h3,html:lang(de) .profiles h3,html:lang(de) .xcards h3,html:lang(de) .fam h3,html:lang(de) .one-grid h3,html:lang(de) .steps-f h3,html:lang(de) .flow-f h3,html:lang(de) .val h3,html:lang(de) .faq summary{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
html:lang(it) main .btn{white-space:normal;text-align:center}
/* G i18n tr 02/11/2026: Turkish runs ~20% longer and agglutinative (NOTES_tr C3); uppercase is correct (i → İ) because <html lang="tr"> */
html:lang(tr) .prose p,html:lang(tr) .answer p,html:lang(tr) .lead,html:lang(tr) .ans p,html:lang(tr) dd,html:lang(tr) td,html:lang(tr) .profiles p,html:lang(tr) .xcards p{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
html:lang(tr) .door h3,html:lang(tr) .profiles h3,html:lang(tr) .xcards h3,html:lang(tr) .one-grid h3,html:lang(tr) .faq summary{overflow-wrap:break-word}
html:lang(tr) main .btn{white-space:normal;text-align:center}
/* G i18n 02/11/2026: long compounds in certificate cards (de "Umweltmanagementsystem" at 820) */
.cert>div{min-width:0}html:lang(de) .cert h3,html:lang(tr) .cert h3,html:lang(de) .cert dd{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}

/* G i18n batch 2 (02/11/2026): Japanese and Korean typography, same rules as Chinese with their own font stacks */
html:lang(ja){--text:"Montserrat","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans JP",system-ui,sans-serif;--head:var(--text);--zh:var(--text)}
html:lang(ko){--text:"Montserrat","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;--head:var(--text);--zh:var(--text)}
html:lang(ja) body{line-height:1.75;line-break:strict;word-break:normal;overflow-wrap:break-word;text-autospace:normal;font-feature-settings:"palt" 0}
html:lang(ja) h1,html:lang(ja) h2,html:lang(ja) h3,html:lang(ja) h4,html:lang(ja) .slogan{letter-spacing:0;line-height:1.35;font-weight:700}
html:lang(ja) .hero-copy h1{line-height:1.2}
html:lang(ja) .eyebrow,html:lang(ja) .pill,html:lang(ja) .xcards .xl,html:lang(ja) .xcards .xr,html:lang(ja) .svc .tag,html:lang(ja) .mobile-nav li>span,html:lang(ja) .dd .dd-head,html:lang(ja) .ph-badge,html:lang(ja) .fam .fam-ill span,html:lang(ja) .wnet .rg,html:lang(ja) .kasm-svg .ln,html:lang(ja) .foot-facts b,html:lang(ja) .langs-line b{text-transform:none;letter-spacing:0}
html:lang(ja) .eyebrow{font-size:.82rem}
html:lang(ja) p,html:lang(ja) li,html:lang(ja) dd,html:lang(ja) td{text-align:start;hanging-punctuation:none}
html:lang(ja) .nav-f>li>a,html:lang(ja) .nav-f>li>button,html:lang(ja) .btn{letter-spacing:0;white-space:nowrap}
html:lang(ja) em,html:lang(ja) i{font-style:normal}
html:lang(ja) em{text-emphasis:none;font-weight:700}
html:lang(ko) body{line-height:1.75;line-break:strict;word-break:normal;overflow-wrap:break-word;text-autospace:normal;font-feature-settings:"palt" 0}
html:lang(ko) h1,html:lang(ko) h2,html:lang(ko) h3,html:lang(ko) h4,html:lang(ko) .slogan{letter-spacing:0;line-height:1.35;font-weight:700}
html:lang(ko) .hero-copy h1{line-height:1.2}
html:lang(ko) .eyebrow,html:lang(ko) .pill,html:lang(ko) .xcards .xl,html:lang(ko) .xcards .xr,html:lang(ko) .svc .tag,html:lang(ko) .mobile-nav li>span,html:lang(ko) .dd .dd-head,html:lang(ko) .ph-badge,html:lang(ko) .fam .fam-ill span,html:lang(ko) .wnet .rg,html:lang(ko) .kasm-svg .ln,html:lang(ko) .foot-facts b,html:lang(ko) .langs-line b{text-transform:none;letter-spacing:0}
html:lang(ko) .eyebrow{font-size:.82rem}
html:lang(ko) p,html:lang(ko) li,html:lang(ko) dd,html:lang(ko) td{text-align:start;hanging-punctuation:none}
html:lang(ko) .nav-f>li>a,html:lang(ko) .nav-f>li>button,html:lang(ko) .btn{letter-spacing:0;white-space:nowrap}
html:lang(ko) em,html:lang(ko) i{font-style:normal}
html:lang(ko) em{text-emphasis:none;font-weight:700}
html:lang(ja) body{line-break:strict;word-break:auto-phrase}
html:lang(ja) .hero-copy h1,html:lang(ja) h2,html:lang(ja) h3{word-break:auto-phrase;text-wrap:balance}
html:lang(ko) body{word-break:keep-all;overflow-wrap:anywhere;line-height:1.7}
html:lang(ko) h1,html:lang(ko) h2,html:lang(ko) h3{word-break:keep-all}
/* Polish: long compounds in narrow cards */
html:lang(pl) .prose p,html:lang(pl) .answer p,html:lang(pl) .lead,html:lang(pl) .ans p,html:lang(pl) dd,html:lang(pl) td,html:lang(pl) .profiles p,html:lang(pl) .xcards p{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
html:lang(pl) .door h3,html:lang(pl) .profiles h3,html:lang(pl) .xcards h3,html:lang(pl) .one-grid h3,html:lang(pl) .cert h3,html:lang(pl) .faq summary{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
html:lang(pl) main .btn{white-space:normal;text-align:center}
/* G i18n ar 02/11/2026 (NOTES_ar §3 typography): Arabic faces with Montserrat for Latin runs, joined script = no tracking,
   no uppercase, no italics; taller line height; no hyphenation. Mirroring itself comes from styles-rtl.css (rtlcss). */
html:lang(ar){--text:"Noto Sans Arabic","Montserrat","Segoe UI",Tahoma,system-ui,sans-serif;--head:"Noto Kufi Arabic","Noto Sans Arabic","Montserrat","Segoe UI",Tahoma,system-ui,sans-serif}
html:lang(ar) body{line-height:1.8;font-size:1.03em}
html:lang(ar) *{letter-spacing:0!important}
html:lang(ar) h1,html:lang(ar) h2,html:lang(ar) h3,html:lang(ar) h4{line-height:1.4}
html:lang(ar) .eyebrow,html:lang(ar) .pill,html:lang(ar) .btn,html:lang(ar) .xcards .xl,html:lang(ar) .xcards .xr,html:lang(ar) .svc .tag,html:lang(ar) .mobile-nav li>span,html:lang(ar) .dd .dd-head,html:lang(ar) .ph-badge,html:lang(ar) .fam .fam-ill span,html:lang(ar) .foot-facts b,html:lang(ar) .langs-line b,html:lang(ar) .nav-f>li>a,html:lang(ar) .nav-f>li>button{text-transform:none}
html:lang(ar) em,html:lang(ar) i{font-style:normal;font-weight:700}
html:lang(ar) p,html:lang(ar) li,html:lang(ar) dd,html:lang(ar) td{text-align:start;hyphens:manual}
html:lang(ar) bdi{unicode-bidi:isolate;font-family:"Montserrat","Segoe UI",Tahoma,sans-serif}
html[dir=rtl] input[type=email],html[dir=rtl] input[type=tel],html[dir=rtl] input[type=url],html[dir=rtl] input[name*=uscc]{direction:ltr;text-align:end}
html[dir=rtl] .link-arrow::after{content:"←"}
html[dir=rtl] .door .dt::after{content:" ←"}
/* kit sequence and assembly line run right-to-left; their labels are flipped back so they stay readable */
html[dir=rtl] .kitsvg,html[dir=rtl] .kasm-svg{transform:scaleX(-1)}
html[dir=rtl] .kitsvg text,html[dir=rtl] .kasm-svg text{transform:scaleX(-1);transform-box:fill-box;transform-origin:center}
/* G i18n ar: directional arrow icons point to the reading direction */
html[dir=rtl] svg:has(> path[d="M5 12h14M13 6l6 6-6 6"]){transform:scaleX(-1)}
html:lang(ar) *{font-style:normal!important}
html:lang(ar) .site-header .hdr-quote{white-space:nowrap}
html[dir=rtl] .kasm-svg text,html[dir=rtl] .kitsvg text{direction:ltr}
html:lang(ar) .kasm-svg .ct{font:600 12px var(--text)}
html:lang(ar) .kasm-svg .ln{font:700 14px var(--text)}
html:lang(ar) .kitsvg text{font-family:var(--text)}
/* owner media 02/11/2026: a photo and a loop stacked in one column; band loop over the H2 poster */
.c6 > figure + figure{margin-top:24px}
.vband .vloop img,.vband .vloop video{object-position:50% 55%}
.vband .vpause{top:14px;right:14px}

@media (prefers-color-scheme:dark){
/* ===== F-R04 · Dark mode (01/11/2026) =====
   Written once; build_f.py expands :root:not([data-theme="light"]) twice:
     @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) … }   → Auto follows the device
     :root[data-theme="dark"] …                                               → explicit choice
   Night indigo backgrounds, near-white text, brand orange for accents and buttons (dark ink on orange: 5.6:1). */
:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0B0D33;
  --band:#10133F;
  --surface:#1B1E4A;
  --hdr-glass:rgba(11,13,51,.84);
  --hdr-bg:#0D0F3B;
  --hdr-shadow:0 1px 0 rgba(167,170,203,.12),0 8px 26px rgba(0,0,0,.38);
  --indigo:#C5C8FF;            /* text, icons and lines in the indigo role */
  --indigo-deep:#151858;
  --indigo-ink:#0E1043;
  --indigo-soft:#262A68;
  --indigo-line:#3D4189;
  --fill:#252A80;
  --fill-violet:#382C82;
  --on-fill:#F4F5FF;
  --chip-on-fill:#ECEEFE;
  --orange:#EC731D;
  --orange-btn:#EC731D;
  --orange-btn-hover:#F68B3E;
  --on-orange:#14164A;
  --orange-text:#F59C59;
  --orange-on-indigo:#F6A86E;
  --ink:#F4F5FF;
  --body:#DFE1F6;
  --muted:#A7AACB;
  --line:#2C3069;
  --ok:#6AD49A;
  --err:#FF9A85;
  --err-line:#FF7D63;
  --err-halo:rgba(255,125,99,.2);
  --orange-tint:#2C2347;
  --orange-tint-2:#35284B;
  --orange-tint-line:#8C5634;
  --box-tint:#2A2249;
  --field-bg:#11143F;
  --field-line:#7478B2;
  --focus-halo:rgba(197,200,255,.2);
  --open-line:rgba(197,200,255,.34);
  --shadow:0 0 0 1px rgba(167,170,203,.10),0 10px 30px rgba(0,0,0,.30);
  --shadow-lift:0 0 0 1px rgba(167,170,203,.12),0 22px 44px rgba(0,0,0,.42);
  --shadow-pop:0 0 0 1px rgba(167,170,203,.16),0 14px 34px rgba(0,0,0,.48);
  --glow-indigo:rgba(120,126,255,.12);
  --map-land:#1A1D52;
  --map-land-line:#41458F;
  --map-dot:#33377F;
  --flow-in:#A35E2F;
  --flow-out:#5A5FB0;
}
:root:not([data-theme="light"]) .logo-l{display:none}
:root:not([data-theme="light"]) .logo-d{display:block}
/* photos and video loops: unchanged, only 4 % quieter so they do not glare on the night background */
:root:not([data-theme="light"]) main img,:root:not([data-theme="light"]) main video{filter:brightness(.96)}
:root:not([data-theme="light"]) ::selection{background:#3D4189;color:#F4F5FF}
/* footer: a step deeper than the page, separated by a hairline */
:root:not([data-theme="light"]) .site-footer{background:linear-gradient(180deg,#12154C 0%,#0A0C2E 100%);border-top:1px solid var(--line)}
/* indigo bands and banners keep the brand gradient, a touch deeper */
:root:not([data-theme="light"]) .on-indigo{background:#1A1E66}
/* the light hero fade ends on the band colour; keep it subtle */
:root:not([data-theme="light"]) .hero-f{background:radial-gradient(ellipse 70% 60% at 78% 40%,rgba(90,95,200,.16),transparent 70%),linear-gradient(180deg,var(--bg) 0%,var(--bg) 62%,var(--band) 100%)}
/* network map: Shenzhen node keeps its halo against the night */
:root:not([data-theme="light"]) .wnet .core{filter:drop-shadow(0 0 6px rgba(236,115,29,.55))}
:root:not([data-theme="light"]) .wnet .fb{opacity:.85}
/* kit illustration: card behind it in the banner */
:root:not([data-theme="light"]) .banner-f .art .kitfig{background:var(--surface)}
:root:not([data-theme="light"]) .kitsvg .src circle{fill:#3A3F9E}
:root:not([data-theme="light"]) .kitsvg .stamp rect{fill:#3A3F9E}
/* buttons: orange with dark ink; outline buttons in lavender */
:root:not([data-theme="light"]) .btn-orange{box-shadow:0 8px 22px rgba(236,115,29,.22)}
:root:not([data-theme="light"]) .btn-orange:hover{box-shadow:0 12px 28px rgba(236,115,29,.30)}
:root:not([data-theme="light"]) .btn-outline:hover,:root:not([data-theme="light"]) .hdr-ctas .btn[aria-current="page"]{background:var(--indigo);color:var(--bg);border-color:var(--indigo)}
:root:not([data-theme="light"]) .tablist button[aria-selected="true"]{background:var(--indigo);border-color:var(--indigo);color:var(--bg)}
:root:not([data-theme="light"]) .tablist button{background:transparent}
/* forms */
:root:not([data-theme="light"]) .field input::placeholder,:root:not([data-theme="light"]) .field textarea::placeholder{color:#8F93BF;opacity:1}
:root:not([data-theme="light"]) .field select option{background:#1B1E4A;color:#F4F5FF}
:root:not([data-theme="light"]) .path:has(input:checked){background:var(--orange-tint)}
/* tables: header row stays indigo, zebra and hover readable */
:root:not([data-theme="light"]) .tbl-wrap thead th{background:#262A80}
/* language suggestion bar and dropdowns float above the page */
:root:not([data-theme="light"]) .lang-suggest,:root:not([data-theme="light"]) .dd,:root:not([data-theme="light"]) .langsw-hdr ul{background:#20245A;border-color:var(--indigo-line)}
/* small white chips on photos stay legible */
:root:not([data-theme="light"]) .photo .frame-note{background:rgba(236,238,254,.94);color:#252A80}
/* video pause button hover */
:root:not([data-theme="light"]) .vpause:hover{background:#3A3F9E}
:root:not([data-theme="light"]) fieldset{border-color:var(--indigo-line)}

}
/* ===== F-R04 · Dark mode (01/11/2026) =====
   Written once; build_f.py expands :root[data-theme="dark"] twice:
     @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) … }   → Auto follows the device
     :root[data-theme="dark"] …                                               → explicit choice
   Night indigo backgrounds, near-white text, brand orange for accents and buttons (dark ink on orange: 5.6:1). */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B0D33;
  --band:#10133F;
  --surface:#1B1E4A;
  --hdr-glass:rgba(11,13,51,.84);
  --hdr-bg:#0D0F3B;
  --hdr-shadow:0 1px 0 rgba(167,170,203,.12),0 8px 26px rgba(0,0,0,.38);
  --indigo:#C5C8FF;            /* text, icons and lines in the indigo role */
  --indigo-deep:#151858;
  --indigo-ink:#0E1043;
  --indigo-soft:#262A68;
  --indigo-line:#3D4189;
  --fill:#252A80;
  --fill-violet:#382C82;
  --on-fill:#F4F5FF;
  --chip-on-fill:#ECEEFE;
  --orange:#EC731D;
  --orange-btn:#EC731D;
  --orange-btn-hover:#F68B3E;
  --on-orange:#14164A;
  --orange-text:#F59C59;
  --orange-on-indigo:#F6A86E;
  --ink:#F4F5FF;
  --body:#DFE1F6;
  --muted:#A7AACB;
  --line:#2C3069;
  --ok:#6AD49A;
  --err:#FF9A85;
  --err-line:#FF7D63;
  --err-halo:rgba(255,125,99,.2);
  --orange-tint:#2C2347;
  --orange-tint-2:#35284B;
  --orange-tint-line:#8C5634;
  --box-tint:#2A2249;
  --field-bg:#11143F;
  --field-line:#7478B2;
  --focus-halo:rgba(197,200,255,.2);
  --open-line:rgba(197,200,255,.34);
  --shadow:0 0 0 1px rgba(167,170,203,.10),0 10px 30px rgba(0,0,0,.30);
  --shadow-lift:0 0 0 1px rgba(167,170,203,.12),0 22px 44px rgba(0,0,0,.42);
  --shadow-pop:0 0 0 1px rgba(167,170,203,.16),0 14px 34px rgba(0,0,0,.48);
  --glow-indigo:rgba(120,126,255,.12);
  --map-land:#1A1D52;
  --map-land-line:#41458F;
  --map-dot:#33377F;
  --flow-in:#A35E2F;
  --flow-out:#5A5FB0;
}
:root[data-theme="dark"] .logo-l{display:none}
:root[data-theme="dark"] .logo-d{display:block}
/* photos and video loops: unchanged, only 4 % quieter so they do not glare on the night background */
:root[data-theme="dark"] main img,:root[data-theme="dark"] main video{filter:brightness(.96)}
:root[data-theme="dark"] ::selection{background:#3D4189;color:#F4F5FF}
/* footer: a step deeper than the page, separated by a hairline */
:root[data-theme="dark"] .site-footer{background:linear-gradient(180deg,#12154C 0%,#0A0C2E 100%);border-top:1px solid var(--line)}
/* indigo bands and banners keep the brand gradient, a touch deeper */
:root[data-theme="dark"] .on-indigo{background:#1A1E66}
/* the light hero fade ends on the band colour; keep it subtle */
:root[data-theme="dark"] .hero-f{background:radial-gradient(ellipse 70% 60% at 78% 40%,rgba(90,95,200,.16),transparent 70%),linear-gradient(180deg,var(--bg) 0%,var(--bg) 62%,var(--band) 100%)}
/* network map: Shenzhen node keeps its halo against the night */
:root[data-theme="dark"] .wnet .core{filter:drop-shadow(0 0 6px rgba(236,115,29,.55))}
:root[data-theme="dark"] .wnet .fb{opacity:.85}
/* kit illustration: card behind it in the banner */
:root[data-theme="dark"] .banner-f .art .kitfig{background:var(--surface)}
:root[data-theme="dark"] .kitsvg .src circle{fill:#3A3F9E}
:root[data-theme="dark"] .kitsvg .stamp rect{fill:#3A3F9E}
/* buttons: orange with dark ink; outline buttons in lavender */
:root[data-theme="dark"] .btn-orange{box-shadow:0 8px 22px rgba(236,115,29,.22)}
:root[data-theme="dark"] .btn-orange:hover{box-shadow:0 12px 28px rgba(236,115,29,.30)}
:root[data-theme="dark"] .btn-outline:hover,:root[data-theme="dark"] .hdr-ctas .btn[aria-current="page"]{background:var(--indigo);color:var(--bg);border-color:var(--indigo)}
:root[data-theme="dark"] .tablist button[aria-selected="true"]{background:var(--indigo);border-color:var(--indigo);color:var(--bg)}
:root[data-theme="dark"] .tablist button{background:transparent}
/* forms */
:root[data-theme="dark"] .field input::placeholder,:root[data-theme="dark"] .field textarea::placeholder{color:#8F93BF;opacity:1}
:root[data-theme="dark"] .field select option{background:#1B1E4A;color:#F4F5FF}
:root[data-theme="dark"] .path:has(input:checked){background:var(--orange-tint)}
/* tables: header row stays indigo, zebra and hover readable */
:root[data-theme="dark"] .tbl-wrap thead th{background:#262A80}
/* language suggestion bar and dropdowns float above the page */
:root[data-theme="dark"] .lang-suggest,:root[data-theme="dark"] .dd,:root[data-theme="dark"] .langsw-hdr ul{background:#20245A;border-color:var(--indigo-line)}
/* small white chips on photos stay legible */
:root[data-theme="dark"] .photo .frame-note{background:rgba(236,238,254,.94);color:#252A80}
/* video pause button hover */
:root[data-theme="dark"] .vpause:hover{background:#3A3F9E}
:root[data-theme="dark"] fieldset{border-color:var(--indigo-line)}