/* ==========================================================================
   VM | European Market Entry
   Identity per "VM Brand Guide.md" (LOCKED). Mark per "VM Logo Master".
   Palette flips via <html data-brand="spectrum|aurora">. No raw hex below
   the token blocks. No external requests anywhere in this file.
   ========================================================================== */

/* --- Self-hosted fonts. Nothing is requested from Google. ---------------- */
@font-face{font-family:Jost;font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/jost-latin-ext-300-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Jost;font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/jost-latin-300-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:Jost;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/jost-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Jost;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/jost-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:Jost;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/jost-latin-ext-500-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Jost;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/jost-latin-500-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/ibm-plex-sans-latin-ext-300-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/ibm-plex-sans-latin-300-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ==========================================================================
   TOKENS
   To flip the palette, change data-brand on <html>. Nothing else.
   ========================================================================== */
:root{
  --font-display:Jost,"Helvetica Neue",Arial,sans-serif;
  --font-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --white:#FFFFFF;

  --step-display:clamp(2.25rem,1.5rem + 3vw,3.25rem);  /* 36 -> 52 */
  --step-h1:clamp(1.75rem,1.3rem + 1.9vw,2.25rem);     /* 28 -> 36 */
  --step-h2:clamp(1.25rem,1.1rem + .7vw,1.5rem);       /* 20 -> 24 */
  --step-h3:1.0625rem;                                  /* 17 */
  --step-lead:clamp(1.0625rem,1rem + .3vw,1.1875rem);  /* 17 -> 19 */
  --step-body:.9375rem;                                 /* 15 */
  --step-label:.6875rem;                                /* 11 */

  --sp-section:clamp(4rem,2.5rem + 6vw,7.5rem);        /* 64 -> 120 */
  --sp-panel:clamp(1.5rem,1rem + 2vw,2.5rem);          /* 24 -> 40 */
  --measure:68ch;
  --wrap:1180px;
  --radius:2px;
}

/* --- DIRECTION A, SPECTRUM ---------------------------------------------- */
[data-brand="spectrum"]{
  --grad-1:#4912AB; --grad-2:#6E13C4; --grad-3:#B823BE; --grad-4:#D767A7;
  --accent:#6E13C4;
  --tint:#D7B8E4;
  --ink:#16111F;
  --slate:#5A5266;
  --line:#D8CEE5;
  --paper:#F6F3FA;
  --gradient:linear-gradient(110deg,var(--grad-1),var(--grad-2) 30%,var(--grad-3) 64%,var(--grad-4));
  /* Small controls skip the near-black first stop. Brand guide 05 already
     says anything under 40px carries the solid accent, never the gradient.
     This is the middle road: the bright three quarters of the same ramp. */
  --gradient-btn:linear-gradient(110deg,var(--grad-2),var(--grad-3) 55%,var(--grad-4));
}

/* --- DIRECTION B, AURORA ------------------------------------------------ */
[data-brand="aurora"]{
  --grad-1:#06245E; --grad-2:#1D4FD7; --grad-3:#06A6D4; --grad-4:#10C7B2;
  --accent:#1D4FD7;
  --tint:#9FE3DC;
  --ink:#0C1420;
  --slate:#4A5666;
  --line:#CBD6DE;
  --paper:#F2F6F8;
  --gradient:linear-gradient(110deg,var(--grad-1),var(--grad-2) 34%,var(--grad-3) 70%,var(--grad-4));
  --gradient-btn:linear-gradient(110deg,var(--grad-2),var(--grad-3) 55%,var(--grad-4));
}

/* ==========================================================================
   BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:112.5%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}}
body{
  margin:0;background:var(--white);color:var(--ink);
  font:400 var(--step-body)/1.65 var(--font-body);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px;}
a:hover{text-decoration:none;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.15;margin:0;
  letter-spacing:-.005em;}
h1{font-weight:400;font-size:var(--step-h1);}
h2{font-size:var(--step-h2);}
h3{font-size:var(--step-h3);}
p{margin:0;}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,.5rem + 3vw,2.5rem);}
.section{padding-block:var(--sp-section);}
.lead{font-weight:300;font-size:var(--step-lead);line-height:1.55;max-width:var(--measure);color:var(--ink);}
.muted{color:var(--slate);}
.small{font-size:.8125rem;line-height:1.6;}

/* Section label, IBM Plex Mono 11px uppercase 0.22em */
.label{
  font:400 var(--step-label)/1.4 var(--font-mono);
  text-transform:uppercase;letter-spacing:.22em;color:var(--slate);
  display:flex;align-items:center;gap:.6rem;margin-bottom:1.25rem;
}
.label .peak{color:var(--accent);flex:none;}

/* Descriptor, Jost 300 uppercase 0.46em. Singular "Market", per brand guide. */
.descriptor{
  font:300 .625rem/1.25 var(--font-display);
  text-transform:uppercase;letter-spacing:.46em;color:currentColor;
}

/* ==========================================================================
   MOTIF, the open peak. Geometry copied verbatim from the locked master.
   ========================================================================== */
.peak{display:inline-block;width:.7rem;height:.44rem;vertical-align:baseline;}
.peak svg{display:block;overflow:visible;}
.rule-peak{display:flex;align-items:center;gap:1rem;color:var(--line);margin-block:var(--sp-panel);}
.rule-peak::before,.rule-peak::after{content:"";height:1px;background:var(--line);flex:1;}
.rule-peak .peak{color:var(--accent);}
.rule-left{display:flex;align-items:center;gap:.75rem;color:var(--line);}
.rule-left::after{content:"";height:1px;background:var(--line);flex:1;}

ul.peaks{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;}
ul.peaks li{display:grid;grid-template-columns:1rem 1fr;gap:.7rem;align-items:start;}
ul.peaks li .peak{color:var(--accent);margin-top:.55em;}

/* ==========================================================================
   LOGO LOCKUPS
   ========================================================================== */
.mark{display:block;color:inherit;}
.mark svg{display:block;overflow:visible;width:100%;height:auto;}
.lockup{display:inline-flex;align-items:center;gap:.85rem;text-decoration:none;color:inherit;}
.lockup .mark{width:52px;flex:none;}
.lockup .divider{width:1px;align-self:stretch;background:currentColor;opacity:.28;}
.lockup .desc{display:grid;gap:.18em;}
.lockup .desc span{font:300 .5625rem/1 var(--font-display);
  text-transform:uppercase;letter-spacing:.36em;white-space:nowrap;}

/* Gradient-stroked mark, used on the ink footer */
.mark--gradient svg{stroke:url(#vmGrad);}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--line);}
.site-header .bar{display:flex;align-items:center;gap:1.5rem;
  min-height:76px;padding-block:.75rem;}
.nav{display:flex;align-items:center;gap:1.6rem;margin-left:auto;}
.nav a{font-family:var(--font-body);font-size:.875rem;color:var(--ink);
  text-decoration:none;padding-block:.35rem;border-bottom:1px solid transparent;}
.nav a:hover{border-bottom-color:var(--accent);}
.nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:500 .875rem/1 var(--font-body);text-decoration:none;cursor:pointer;
  padding:.85rem 1.4rem;border-radius:999px;border:1px solid transparent;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;}
.btn:active{transform:translateY(1px);}
.btn--grad{background:var(--gradient-btn);color:var(--white);}
.btn--grad:hover{box-shadow:0 6px 22px -8px var(--grad-2);}
.btn--outline{background:transparent;color:var(--accent);border-color:var(--accent);}
.btn--outline:hover{background:var(--paper);}
.btn--ghost{background:transparent;color:var(--ink);padding-inline:0;}
.btn--sm{padding:.6rem 1.1rem;font-size:.8125rem;}

.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:var(--radius);padding:.5rem .7rem;cursor:pointer;color:var(--ink);
  font:400 .8125rem/1 var(--font-mono);text-transform:uppercase;letter-spacing:.1em;}

@media (max-width:900px){
  .nav-toggle{display:block;}
  .nav{position:absolute;inset:100% 0 auto 0;background:var(--white);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    gap:0;padding:.5rem 0 1rem;margin:0;display:none;}
  .nav[data-open="true"]{display:flex;}
  .nav a{padding:.85rem clamp(1.25rem,.5rem + 3vw,2.5rem);border-bottom:none;}
  .nav .btn{margin:.75rem clamp(1.25rem,.5rem + 3vw,2.5rem) 0;}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{padding-block:clamp(3.5rem,2rem + 6vw,6.5rem) var(--sp-section);}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:clamp(2rem,1rem + 4vw,4rem);align-items:start;}
/* Hero portrait: framed, with the name and credential line carried on the image,
   and 1px registration corners in the accent. Scrim uses rgba like the header
   and footer already do, it is not a brand colour and is identical in both palettes. */
.hero-side{justify-self:end;width:100%;max-width:320px;}
.hero-portrait{margin:0;width:100%;}
/* WeChat next to the photo: the Chinese-facing first step, above the fold.
   Rendered at 108px because the README records 116px as the size the code was
   verified to decode at, so this stays close to it. */
.hero-wechat{margin-top:1.15rem;display:flex;align-items:flex-start;gap:.9rem;}
.hero-wechat img{width:108px;height:108px;flex:none;display:block;
  background:var(--white);border:1px solid var(--line);padding:5px;}
.hero-wechat .k{display:block;font:400 var(--step-label)/1.4 var(--font-mono);
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink);}
.hero-wechat .v{display:block;margin-top:.4rem;font-size:.8125rem;line-height:1.5;
  color:var(--slate);}
.hero-portrait .frame{position:relative;border:1px solid var(--line);}
.hero-portrait img{display:block;width:100%;height:auto;}
.hero-portrait .frame::before,.hero-portrait .frame::after{content:"";position:absolute;
  width:22px;height:22px;pointer-events:none;}
.hero-portrait .frame::before{top:-9px;left:-9px;
  border-top:1px solid var(--accent);border-left:1px solid var(--accent);}
.hero-portrait .frame::after{bottom:-9px;right:-9px;
  border-bottom:1px solid var(--accent);border-right:1px solid var(--accent);}
.hero-portrait figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:3.25rem 1.1rem 1rem;color:var(--white);
  background:rgba(0,0,0,.66);
  background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,.55) 52%,rgba(0,0,0,0));}
.hero-portrait .who{font:500 .9375rem/1.3 var(--font-display);letter-spacing:.01em;}
.hero-portrait .cred{display:block;margin-top:.3rem;
  font:400 .6875rem/1.45 var(--font-mono);text-transform:uppercase;letter-spacing:.13em;
  color:rgba(255,255,255,.82);}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-side{justify-self:start;max-width:260px;margin-top:2.5rem;}
}

/* Results, grouped by employer */
.res-head{border-bottom:1px solid var(--line);padding-bottom:.9rem;margin-bottom:1.75rem;}
.res-head h2{font:500 1.5rem/1.15 var(--font-display);margin:0;}
.res-head .meta{display:block;margin-top:.45rem;
  font:400 var(--step-label)/1.5 var(--font-mono);text-transform:uppercase;
  letter-spacing:.16em;color:var(--slate);}
.reslist{display:grid;gap:1.75rem;}
.reslist .n{font:400 clamp(1.5rem,1.15rem + 1.1vw,1.95rem)/1 var(--font-display);color:var(--accent);}
.reslist .t{margin-top:.5rem;font-size:.9375rem;line-height:1.55;color:var(--slate);}
.reslist--headline{gap:1.5rem;}
.reslist--headline .n{font:500 clamp(1.75rem,1.35rem + 1.6vw,2.5rem)/1.15 var(--font-display);}

.band .meta{font:400 var(--step-label)/1.5 var(--font-mono);text-transform:uppercase;
  letter-spacing:.16em;color:rgba(255,255,255,.75);margin-top:1.25rem;}
/* Past-employer logo strip. Both marks are reproduced exactly as supplied,
   full colour, full opacity, no filter and no recolouring. The only processing
   was trimming the surrounding white and adding transparency, with the colour
   un-premultiplied so opaque pixels keep their exact RGB. Self-hosted, so
   nothing is requested off-domain. These are former employers, and the label
   has to keep saying so. */
.employers{margin-top:2.75rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;}
.employers .cap{font:400 var(--step-label)/1.5 var(--font-mono);text-transform:uppercase;
  letter-spacing:.16em;color:var(--slate);white-space:nowrap;}
.employers .rule{width:1px;align-self:stretch;background:var(--line);}
.employers .marks{display:flex;align-items:center;gap:2.25rem;}
.employers img{display:block;width:auto;}
.employers .l-keyence{height:22px;}
.employers .l-tescan{height:34px;}
@media (max-width:900px){
  .employers{gap:1rem;margin-top:2rem;}
  .employers .rule{display:none;}
  .employers .marks{gap:1.75rem;}
}
.hero h1{font-size:var(--step-display);max-width:16ch;}
/* Gradient text with a solid fallback for old WebViews, e.g. WeChat in-app. */
.grad-text{color:var(--accent);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grad-text{background:var(--gradient);-webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;}
}
.hero .lead{margin-top:1.5rem;}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:2.25rem;}

/* ==========================================================================
   PROOF STRIP
   ========================================================================== */
.proof{border-block:1px solid var(--line);background:var(--paper);}
/* Three pillars, not a metrics dump. Fixed at three columns: auto-fit used to
   leave an orphan empty cell whenever the count did not divide evenly. */
.proof .grid{display:grid;grid-template-columns:repeat(4,1fr);}
.proof .cell .n{color:var(--grad-2);}
@media (max-width:1000px){.proof .grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.proof .grid{grid-template-columns:1fr;}}
.proof .cell{padding:1.6rem 1.5rem;border-left:1px solid var(--line);}
.proof .cell:first-child{border-left:none;padding-left:0;}
@media (max-width:1000px){
  .proof .cell:nth-child(3){border-left:none;padding-left:0;}
  .proof .cell:nth-child(n+3){border-top:1px solid var(--line);}
}
@media (max-width:620px){
  .proof .cell{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-right:0;}
  .proof .cell:first-child{border-top:none;}
}
.proof .n{font:400 clamp(1.05rem,.92rem + .55vw,1.4rem)/1.3 var(--font-display);
  color:var(--accent);}
.proof .more{margin-top:.65rem;font-size:.9375rem;}

/* ==========================================================================
   CARDS
   ========================================================================== */
.cards{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.card{border:1px solid var(--line);background:var(--white);padding:1.75rem;
  display:flex;flex-direction:column;gap:.75rem;text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .15s ease;}
a.card:hover{border-color:var(--accent);transform:translateY(-2px);}
/* Service section marker on the services page, same six glyphs as the
   homepage cards, sized up so each section is identifiable at a glance. */
.svc-ico{width:30px;height:30px;color:var(--accent);margin:0 0 .95rem;}
.svc-ico svg{display:block;width:100%;height:100%;}
.card h3{font-size:var(--step-h3);display:flex;align-items:flex-start;gap:.65rem;}
/* Service icons. Not the open-peak primitive, so this extends the Brand Guide's
   motif system, but drawn in the same hand: no fill, currentColor, miter joins. */
.card h3 .ico{flex:none;width:23px;height:23px;margin-top:.12em;color:var(--accent);}
.card h3 .ico svg{display:block;width:100%;height:100%;}
.card p{color:var(--slate);font-size:.875rem;}
.card .more{margin-top:auto;font:400 var(--step-label)/1 var(--font-mono);
  text-transform:uppercase;letter-spacing:.18em;color:var(--accent);}

.panel{border:1px solid var(--line);background:var(--white);padding:var(--sp-panel);}
.panel--paper{background:var(--paper);}

/* ==========================================================================
   QUOTE
   ========================================================================== */
blockquote.quote{margin:0;border-left:2px solid var(--accent);padding-left:1.5rem;
  max-width:60ch;}
blockquote.quote p{font:300 var(--step-lead)/1.55 var(--font-display);}
blockquote.quote cite{display:block;margin-top:1rem;font-style:normal;
  font:400 .8125rem/1.5 var(--font-body);color:var(--slate);}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.band{
  color:var(--white);
  background:
    linear-gradient(90deg,var(--ink) 0%,color-mix(in srgb,var(--ink) 62%,transparent) 40%,
      color-mix(in srgb,var(--ink) 12%,transparent) 66%,transparent 82%),
    linear-gradient(104deg,var(--grad-1) 0%,var(--grad-2) 36%,var(--grad-3) 72%,var(--grad-4) 100%);
}
.band h2{color:var(--white);max-width:22ch;}
.band p{color:rgba(255,255,255,.9);max-width:52ch;margin-top:1rem;}
.band .btn--solid{background:var(--white);color:var(--ink);}
.band .inner{padding-block:clamp(2rem,1.4rem + 2.4vw,3.1rem);}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--ink);color:var(--white);}
.site-footer a{color:rgba(255,255,255,.82);text-decoration:none;}
.site-footer a:hover{color:var(--white);text-decoration:underline;}
.site-footer .cols{display:grid;gap:2.5rem;padding-block:var(--sp-section);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.site-footer h4{font:400 var(--step-label)/1.4 var(--font-mono);
  text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.55);
  margin-bottom:1rem;}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.875rem;}
.site-footer .qr{width:104px;height:104px;background:rgba(255,255,255,.08);
  border:1px dashed rgba(255,255,255,.3);display:grid;place-items:center;
  font:400 .625rem/1.4 var(--font-mono);color:rgba(255,255,255,.5);text-align:center;padding:.5rem;}
.site-footer .base{border-top:1px solid rgba(255,255,255,.14);padding-block:1.5rem;
  display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;
  font-size:.8125rem;color:rgba(255,255,255,.6);}
.site-footer .base .spacer{margin-left:auto;}

/* ==========================================================================
   PLACEHOLDERS, swapped for real assets later
   ========================================================================== */
.ph{background:var(--paper);border:1px dashed var(--line);display:grid;place-items:center;
  color:var(--slate);font:400 var(--step-label)/1.5 var(--font-mono);
  text-transform:uppercase;letter-spacing:.16em;text-align:center;padding:1rem;}
.ph--portrait{aspect-ratio:4/5;}
.ph--wide{aspect-ratio:16/9;}
.ph--square{aspect-ratio:1;}

/* ==========================================================================
   FORMS
   ========================================================================== */
.field{display:grid;gap:.4rem;margin-bottom:1.25rem;}
.field label{font:500 .8125rem/1.4 var(--font-body);}
.field .help{font:400 .8125rem/1.5 var(--font-body);color:var(--slate);}
.field input,.field select,.field textarea{
  font:400 .9375rem/1.5 var(--font-body);color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:.75rem .85rem;width:100%;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);}
.field textarea{min-height:8rem;resize:vertical;}
.fieldgroup{padding-bottom:1rem;margin-bottom:1.5rem;border-bottom:1px solid var(--line);}
.fieldgroup:last-of-type{border-bottom:none;}
.consent{display:grid;grid-template-columns:1.15rem 1fr;gap:.75rem;align-items:start;
  font-size:.8125rem;line-height:1.6;color:var(--slate);margin-bottom:1rem;}
.consent input{margin:.2rem 0 0;width:1.15rem;height:1.15rem;accent-color:var(--accent);}
/* Honeypot. Invisible to people, catches bots. No third-party captcha, so it
   keeps working behind the Great Firewall. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.notice{border:1px solid var(--line);background:var(--paper);padding:1rem 1.15rem;
  font-size:.8125rem;line-height:1.6;color:var(--slate);border-radius:var(--radius);}
.notice--ok{border-color:var(--accent);}

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.prose{max-width:var(--measure);}
.prose h2{margin-top:2.5rem;margin-bottom:.75rem;}
.prose h3{margin-top:1.75rem;margin-bottom:.5rem;}
.prose p,.prose ul{margin-top:.75rem;}
.prose ul{padding-left:1.1rem;}
.prose li{margin-top:.4rem;}
.todo{background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-bottom:1px solid var(--accent);padding:0 .2em;font-family:var(--font-mono);
  font-size:.85em;white-space:nowrap;}

.tbl{width:100%;border-collapse:collapse;margin-top:1.5rem;font-size:.9375rem;}
.tbl th,.tbl td{text-align:left;padding:.65rem .85rem .65rem 0;border-bottom:1px solid var(--line);
  vertical-align:top;}
.tbl th{font:400 var(--step-label)/1.5 var(--font-mono);text-transform:uppercase;letter-spacing:.1em;
  color:var(--slate);border-bottom:1px solid var(--ink);}
.tbl td:first-child,.tbl th:first-child{font-weight:500;white-space:nowrap;}
@media (max-width:600px){.tbl{font-size:.875rem;}.tbl th,.tbl td{padding:.5rem .5rem .5rem 0;}
  .tbl td:first-child,.tbl th:first-child{white-space:normal;}}

.deflist{display:grid;gap:0;border-top:1px solid var(--line);margin-top:1.5rem;}
.deflist div{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--line);}
.deflist dt{font:400 var(--step-label)/1.5 var(--font-mono);text-transform:uppercase;
  letter-spacing:.16em;color:var(--slate);margin:0;}
.deflist dd{margin:0;}
@media (max-width:600px){.deflist div{grid-template-columns:1fr;gap:.25rem;}}

/* ==========================================================================
   UTILITY
   ========================================================================== */
.grid-2{display:grid;gap:clamp(2rem,1rem + 4vw,4rem);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.grid-2--sidebar{grid-template-columns:minmax(0,1fr) minmax(0,320px);}
@media (max-width:820px){.grid-2--sidebar{grid-template-columns:1fr;}}
.stack{display:grid;gap:1.25rem;}
.stack-lg{display:grid;gap:2.5rem;}
.center{text-align:center;}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--white);
  padding:.75rem 1rem;border:1px solid var(--accent);}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.subnav{display:flex;flex-wrap:wrap;gap:.5rem .35rem;margin-top:2.25rem;}
.subnav a{font:400 .8125rem/1 var(--font-mono);text-transform:uppercase;letter-spacing:.12em;
  color:var(--slate);text-decoration:none;border:1px solid var(--line);
  padding:.6rem .85rem;border-radius:999px;background:var(--white);}
.subnav a:hover{border-color:var(--accent);color:var(--accent);}

.svc + .svc{border-top:1px solid var(--line);}

details.acc{border-bottom:1px solid var(--line);padding-block:1rem;}
details.acc:first-of-type{border-top:1px solid var(--line);margin-top:2rem;}
details.acc > summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:.75rem;
  font:500 .9375rem/1.4 var(--font-body);color:var(--ink);}
details.acc > summary::-webkit-details-marker{display:none;}
details.acc > summary::before{
  content:"";width:.55rem;height:.55rem;border-right:1.5px solid var(--accent);
  border-bottom:1.5px solid var(--accent);transform:rotate(-45deg);
  transition:transform .18s ease;flex:none;margin-left:.15rem;}
details.acc[open] > summary::before{transform:rotate(45deg);}
details.acc[open] > summary{margin-bottom:1rem;}
details.acc > *:not(summary){margin-left:1.3rem;}

/* ==========================================================================
   READINESS REVIEW
   ========================================================================== */
.rv{max-width:880px;margin-inline:auto;}
.rv-screen{animation:rvIn .22s ease both;}
@keyframes rvIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rv-q{font-size:clamp(1.35rem,1.1rem + 1.3vw,1.9rem);max-width:24ch;margin-top:.25rem;}
.rv-help{margin-top:1rem;max-width:56ch;color:var(--slate);font-size:1rem;}
.rv-screen h1,.rv-screen h2{outline:none;}

.rv-progress{height:2px;background:var(--line);margin-bottom:2rem;}
.rv-progress-bar{height:2px;background:var(--gradient-btn);transition:width .3s ease;}

.rv-stages{display:grid;gap:1rem;margin-top:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.rv-stage-card{border:1px solid var(--line);padding:1.25rem;font-size:.9375rem;}

.rv-options{display:grid;gap:.65rem;margin-top:2rem;}
.rv-option{display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.05rem 1.15rem;cursor:pointer;font:400 1rem/1.4 var(--font-body);color:var(--ink);
  transition:border-color .12s ease,background-color .12s ease;}
.rv-option:hover{border-color:var(--accent);}
.rv-option.is-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--white));}
.rv-key{flex:none;width:1.6rem;height:1.6rem;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--radius);
  font:400 .75rem/1 var(--font-mono);color:var(--slate);}
.rv-option.is-on .rv-key{border-color:var(--accent);color:var(--accent);}
.rv-box{flex:none;width:1.15rem;height:1.15rem;border:1px solid var(--line);border-radius:var(--radius);
  position:relative;}
.rv-option.is-on .rv-box{border-color:var(--accent);background:var(--accent);}
.rv-option.is-on .rv-box::after{content:"";position:absolute;inset:.2rem .18rem;
  border-right:2px solid var(--white);border-bottom:2px solid var(--white);
  transform:rotate(40deg) translate(-1px,-2px);}
.rv-none{margin-top:.5rem;color:var(--slate);}

.rv-regions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem;}
.rv-region{background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:.7rem 1.05rem;cursor:pointer;font:400 .875rem/1 var(--font-body);color:var(--ink);}
.rv-region:hover{border-color:var(--accent);}
.rv-region.is-on{border-color:var(--accent);background:var(--accent);color:var(--white);}

.rv-nav{display:flex;align-items:center;gap:1rem;margin-top:2rem;flex-wrap:wrap;}
.rv-nav .btn--grad{margin-left:auto;}
.rv-hint{font:400 var(--step-label)/1.5 var(--font-mono);color:var(--slate);
  text-transform:uppercase;letter-spacing:.14em;}
.rv-gate{margin-top:2rem;}

.rv-headline{display:flex;gap:2rem;flex-wrap:wrap;align-items:flex-start;
  justify-content:space-between;margin-top:.5rem;}
.rv-band{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.25rem);}
.rv-score{text-align:right;display:grid;gap:.25rem;}
.rv-score-n{font:400 clamp(2.5rem,2rem + 3vw,4rem)/1 var(--font-display);
  background:var(--gradient);-webkit-background-clip:text;background-clip:text;
  color:var(--accent);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .rv-score-n{color:transparent;-webkit-text-fill-color:transparent;}}

.rv-bars{display:grid;gap:1.25rem;margin:2.5rem 0 1rem;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.rv-bar-top{display:flex;justify-content:space-between;font:400 .8125rem/1.4 var(--font-body);
  margin-bottom:.5rem;}
.rv-bar-track{height:6px;background:var(--line);}
.rv-bar-fill{height:6px;background:var(--accent);}
.rv-bar.is-priority .rv-bar-fill{background:var(--gradient-btn);}
.rv-bar-tag{font:400 var(--step-label)/1.4 var(--font-mono);text-transform:uppercase;
  letter-spacing:.16em;color:var(--accent);margin-top:.5rem;}

.rv-list{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.5rem;font-size:.9375rem;}
.rv-list li{padding-left:1.4rem;position:relative;}
.rv-list.rv-yes li::before{content:"";position:absolute;left:.15rem;top:.45em;
  width:.45rem;height:.75rem;border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);transform:rotate(40deg);}
.rv-list.rv-no li{color:var(--slate);}
.rv-list.rv-no li::before{content:"";position:absolute;left:.1rem;top:.7em;
  width:.7rem;height:1px;background:var(--line);}

.rv-rec{border-color:var(--accent);}
.rv-cta{background:var(--paper);}
@media (max-width:600px){
  .rv-headline{flex-direction:column;}
  .rv-score{text-align:left;}
}

/* Sticky header is 76px, so anchored jumps and the review's own scrolling must
   clear it. */
html{scroll-padding-top:92px;}
.rv,.svc,[id]{scroll-margin-top:92px;}

/* ==========================================================================
   PORTRAIT
   ========================================================================== */
.portrait{margin:0;}
.portrait img{display:block;width:100%;height:auto;}
.portrait figcaption{
  font:400 var(--step-label)/1.5 var(--font-mono);text-transform:uppercase;
  letter-spacing:.16em;color:var(--slate);
  margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--line);}
.portrait--sm{max-width:300px;}

/* ==========================================================================
   WECHAT QR
   ========================================================================== */
.site-footer .qr{width:116px;height:116px;background:var(--white);
  border:none;padding:7px;display:block;}
.site-footer .qr img{width:100%;height:100%;display:block;}
.qr-panel{width:100%;max-width:200px;background:var(--white);
  border:1px solid var(--line);padding:10px;}
.qr-panel img{width:100%;height:auto;display:block;}

/* ==========================================================================
   READINESS REVIEW, THE MAP
   Inline SVG, 44 countries. No tile server, no external request, so it keeps
   working behind the Great Firewall. Every colour is a token, so it flips
   with the palette like everything else.
   ========================================================================== */
.rv-mapwrap{display:grid;gap:1.5rem;margin-top:2rem;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start;}
@media (max-width:820px){.rv-mapwrap{grid-template-columns:1fr;}}

.rv-mapbox{border:1px solid var(--line);background:var(--paper);overflow:hidden;}
.rv-mapbox svg{display:block;width:100%;height:auto;}
.rv-mapbox .ctx{fill:var(--line);opacity:.45;stroke:none;pointer-events:none;}
.rv-mapbox .cn{fill:var(--white);stroke:var(--line);stroke-width:1.6;
  stroke-linejoin:round;cursor:pointer;transition:fill .12s ease;}
.rv-mapbox .cn:hover{fill:color-mix(in srgb,var(--accent) 12%,var(--white));stroke:var(--accent);}
.rv-mapbox .cn.on{fill:var(--accent);stroke:var(--white);stroke-width:.7;}
.rv-mapbox .cn.on:hover{fill:var(--accent);opacity:.85;}

.rv-mapcol{display:grid;gap:.5rem;align-content:start;}
.rv-region--wide{border-style:dashed;}
.rv-mapsum{display:grid;gap:.35rem;border-top:1px solid var(--line);
  padding-top:.9rem;margin-top:.5rem;font-size:.875rem;}
.rv-listfall{margin-top:.5rem;}
.rv-listfall:first-of-type{border-top:none;margin-top:.5rem;}
.rv-listgrid{display:grid;gap:1rem;}
.rv-listgroup{display:grid;gap:.35rem;}
.rv-cboxes{display:flex;flex-wrap:wrap;gap:.35rem;}
.rv-cbox{font:400 .75rem/1 var(--font-body);color:var(--slate);cursor:pointer;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:.45rem .6rem;}
.rv-cbox:hover{border-color:var(--accent);color:var(--ink);}
.rv-cbox[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--white);}

/* The current-page rule must not repaint the gradient pill's label, or on the
   readiness review page the text turns accent-on-accent and disappears. */
.nav a.btn[aria-current="page"]{color:var(--white);border-bottom-color:transparent;}
.rv-mapbox .cn{-webkit-tap-highlight-color:transparent;}

/* The nav pill is an <a> inside .nav, so `.nav a{color:var(--ink)}` was beating
   `.btn--grad{color:var(--white)}` on specificity and painting the label black
   on the gradient. This raises specificity so the pill keeps its white label,
   current page or not. */
.nav a.btn{color:var(--white);border-bottom:none;}
.nav a.btn:hover{border-bottom:none;}

.svc h2{display:flex;align-items:center;gap:.7rem;}
.svc h2 .svc-ico{flex:none;width:clamp(22px,2.2vw,28px);height:clamp(22px,2.2vw,28px);margin:0;}

/* ==========================================================================
   INSTRUMENT MOTIF, factory automation and instrumentation line art
   Blueprint plates. Same hand as the service icons: no fill, miter joins,
   currentColor, and non-scaling hairline strokes so a 380px glyph keeps the
   same 2px line as a 24px one. Colour is inherited, so it flips with the
   palette like everything else. Decoration is cropped by the section edge,
   never centred, never complete, so it reads as a drawing under the page.
   ========================================================================== */
.instr{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.instr .ig{position:absolute;display:block;max-width:none;
  left:var(--x);top:var(--y);width:var(--s);height:var(--s);}
.instr .ig use{fill:none;stroke:currentColor;}
.has-instr{position:relative;isolation:isolate;}
.has-instr > .wrap{position:relative;z-index:1;}
@media (max-width:700px){.instr{display:none;}}

/* ==========================================================================
   LIT HERO, full gradient per brand guide 09, "Website hero / CTA"
   The ink scrim keeps body copy off the mid-tones of the gradient, which the
   colour rules forbid. Bright end of the ramp is confined to the right,
   behind the portrait, where no text sits.
   ========================================================================== */
.hero--lit{
  color:var(--white);
  background:
    linear-gradient(90deg,var(--ink) 0%,color-mix(in srgb,var(--ink) 62%,transparent) 40%,
      color-mix(in srgb,var(--ink) 12%,transparent) 66%,transparent 82%),
    linear-gradient(104deg,var(--grad-1) 0%,var(--grad-2) 36%,var(--grad-3) 72%,var(--grad-4) 100%);
}
.hero--lit .instr{color:rgba(255,255,255,.16);}
.hero--lit .employers .cap{color:rgba(255,255,255,.72);}
.hero--lit .employers .rule{background:rgba(255,255,255,.3);}
.hero--lit .portrait figcaption{color:rgba(255,255,255,.72);border-top-color:rgba(255,255,255,.28);}
/* Stacked contact list, for narrow sidebars */
.vcard{display:grid;gap:0;border-top:1px solid var(--line);margin-top:0;}
.vcard div{padding:.85rem 0;border-bottom:1px solid var(--line);}
.vcard dt{font:400 var(--step-label)/1.4 var(--font-mono);text-transform:uppercase;
  letter-spacing:.14em;color:var(--slate);}
.vcard dd{margin:.35rem 0 0;font-size:.9375rem;line-height:1.5;overflow-wrap:anywhere;}
.vcard dd a{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.45);}
.vcard dd a:hover{text-decoration-color:currentColor;}
.hero--lit .vcard{border-top-color:rgba(255,255,255,.28);}
.hero--lit .vcard div{border-bottom-color:rgba(255,255,255,.28);}
.hero--lit .vcard dt{color:rgba(255,255,255,.66);}
.hero--lit .vcard dd{color:var(--white);}
.hero--lit .label,.hero--lit .label .peak{color:var(--tint);}
.hero--lit .lead{color:rgba(255,255,255,.9);}
.hero--lit .muted{color:rgba(255,255,255,.74);}
.hero--lit .panel{color:var(--ink);}
.hero--lit .panel .muted{color:var(--slate);}
.hero--lit .panel .btn--outline{color:var(--accent);border-color:var(--accent);}
.hero--lit .panel .btn--outline:hover{background:var(--paper);}
.hero--lit .grad-text{background:none;color:var(--tint);-webkit-text-fill-color:var(--tint);}
.hero--lit .btn--grad{background:var(--white);color:var(--ink);}
.hero--lit .btn--grad:hover{box-shadow:0 6px 22px -8px rgba(0,0,0,.55);}
.hero--lit .btn--outline{color:var(--white);border-color:rgba(255,255,255,.5);}
.hero--lit .btn--outline:hover{background:rgba(255,255,255,.12);}
.hero--lit h1,.hero--lit h2{color:var(--white);}
.hero--lit .subnav a{color:var(--white);background:transparent;border-color:rgba(255,255,255,.45);}
.hero--lit .subnav a:hover{border-color:var(--white);background:rgba(255,255,255,.14);color:var(--white);}
.hero--lit .hero-wechat .k{color:var(--white);}
.hero--lit .hero-wechat .v{color:rgba(255,255,255,.74);}
.hero--lit .hero-portrait .frame{border-color:rgba(255,255,255,.34);}
.hero--lit .hero-portrait .frame::before{border-top-color:var(--tint);border-left-color:var(--tint);}
.hero--lit .hero-portrait .frame::after{border-bottom-color:var(--tint);border-right-color:var(--tint);}
.hero--lit :focus-visible{outline-color:var(--white);}

/* ==========================================================================
   COLOUR, THE RAMP AS A SYSTEM
   Stops of the active gradient carry the metrics and the service cards. The
   two bright stops are deepened against the ink so paragraph-scale text keeps
   its contrast on paper, exactly as the contrast rule requires.
   ========================================================================== */
:root{--ramp-3:#000;--ramp-4:#000;}
[data-brand]{ --ramp-3:color-mix(in srgb,var(--grad-3) 84%,var(--ink));
              --ramp-4:color-mix(in srgb,var(--grad-4) 66%,var(--ink));
              /* Text-safe variants. The bright stops keep their chroma on the
                 23px icons and the 2px card edges, which only need 3:1, while
                 anything at paragraph size drops to a deeper ramp step, per
                 the brand guide's contrast rule. */
              --ramp-3-ink:color-mix(in srgb,var(--grad-3) 62%,var(--ink));
              --ramp-4-ink:color-mix(in srgb,var(--grad-4) 52%,var(--ink));}

.proof .employers{margin-top:0;margin-bottom:1.75rem;}

.cards .card{--c:var(--accent);position:relative;}
.cards .card:nth-child(6n+1){--c:var(--grad-1);}
.cards .card:nth-child(6n+2){--c:var(--grad-2);}
.cards .card:nth-child(6n+3){--c:var(--ramp-3);}
.cards .card:nth-child(6n+4){--c:var(--ramp-4);}
.cards .card:nth-child(6n+5){--c:var(--grad-2);}
.cards .card:nth-child(6n+6){--c:var(--ramp-3);}
.cards .card::after{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--c);}
.cards .card h3 .ico{color:var(--c);}
.cards .card .more{color:var(--c-ink,var(--c));}
.cards .card:nth-child(6n+3),.cards .card:nth-child(6n+6){--c-ink:var(--ramp-3-ink);}
.cards .card:nth-child(6n+4){--c-ink:var(--ramp-4-ink);}
.cards a.card:hover{border-color:var(--c);}

/* The same six services on the services page, keyed by id, not position, so a
   navy card on the home page lands on a navy section. On the services page the
   hue rides the panels, the accordion markers and the section CTA, because the
   section header itself is now the lit gradient band. */
#exhibition{--c:var(--grad-1);--c-ink:var(--grad-1);}
#pipeline{--c:var(--grad-2);--c-ink:var(--grad-2);}
#positioning{--c:var(--ramp-3);--c-ink:var(--ramp-3-ink);}
#launch{--c:var(--ramp-4);--c-ink:var(--ramp-4-ink);}
#search{--c:var(--grad-2);--c-ink:var(--grad-2);}
#lead{--c:var(--ramp-3);--c-ink:var(--ramp-3-ink);}

/* ==========================================================================
   SERVICES, PER-SERVICE HUE
   The hue rides the section marker, the sidebar panels, the accordion markers
   and the section CTA, so a navy card on the home page lands on a navy
   section. 30px icons only need 3:1, so they keep the bright ramp steps;
   anything at text size uses the deepened -ink variant.
   ========================================================================== */
.svc .svc-ico{color:var(--c,var(--accent));}
.svc .panel--paper{position:relative;}
.svc .panel--paper::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;
  background:var(--c,var(--accent));}
.svc details.acc > summary::before{border-right-color:var(--c,var(--accent));
  border-bottom-color:var(--c,var(--accent));}
.svc .btn--outline{color:var(--c-ink,var(--accent));border-color:var(--c,var(--accent));}
.svc .notice a{color:var(--c-ink,var(--accent));}

/* Gradient ridge, the motif system's page edge. 2px, used where a section
   change deserves colour instead of a hairline. */
.ridge{height:2px;background:var(--gradient);}

.band .instr{color:rgba(255,255,255,.14);}
.site-footer .instr{color:rgba(255,255,255,.07);}

/* --- Results page, key numbers list ------------------------------------- */
.winlist{margin-top:2.5rem;border-top:1px solid var(--line)}
.win{display:grid;grid-template-columns:minmax(240px,310px) 1fr;gap:2.5rem;padding:1.9rem 0;
  border-bottom:1px solid var(--line);align-items:start}
.win-n{font:500 clamp(1.5rem,1.1rem + 1.4vw,2.1rem)/1.1 var(--font-display);letter-spacing:-.01em;
  color:var(--grad-2)}
.win-c{margin:0;font-size:1rem;line-height:1.6;color:var(--slate);max-width:58ch}
.win-t{margin-top:.75rem;font:500 var(--step-label)/1 var(--font-mono);letter-spacing:.14em;
  color:var(--ink);opacity:.55}
@media(max-width:900px){.win{grid-template-columns:1fr;gap:.75rem}}

/* --- Question and answer list (case studies) ----------------------------- */
.deflist--qa div{grid-template-columns:minmax(260px,1.1fr) 1fr;gap:1.75rem;}
.deflist--qa dt{font:400 var(--step-body)/1.55 var(--font-body);text-transform:none;
  letter-spacing:0;color:var(--ink);}
.deflist--qa dd{color:var(--slate);}
@media(max-width:700px){.deflist--qa div{grid-template-columns:1fr;gap:.35rem;}}

/* Header lockup, larger for visibility, with Chinese name */
.site-header .lockup .mark{width:64px;}
.site-header .lockup .desc span{font-size:.72rem;font-weight:400;letter-spacing:.3em;}
.site-header .lockup .divider{opacity:.45;}
.lockup .desc span.zh{font:400 .8rem/1 "PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  letter-spacing:.25em;text-transform:none;margin-top:.15em;color:var(--slate);}
.site-footer .lockup .desc span.zh{color:rgba(255,255,255,.62);}

/* Footer: wide brand column, two narrower columns */
.site-footer .cols{grid-template-columns:1.6fr 1fr 1fr;}
.site-footer li.muted{color:rgba(255,255,255,.55);}
@media (max-width:760px){.site-footer .cols{grid-template-columns:1fr;}}

/* Recommendation portraits: always perfect circles */
img[style*="border-radius:50%"]{aspect-ratio:1/1;height:auto!important;min-width:48px;object-fit:cover;flex:none;}
picture:has(> img[style*="border-radius:50%"]){flex:none;display:block;line-height:0;}


/* ==========================================================================
   LANGUAGE SWITCH (中文 | EN), both languages.
   Plain links, no script, no cookie, no storage. The current language is a
   <span>, the other is an <a>.
   ========================================================================== */
.lang{display:inline-flex;align-items:center;gap:.15rem;margin-left:.9rem;flex:none;
  border:1px solid var(--line);border-radius:999px;padding:.18rem;
  font:400 .8125rem/1 var(--font-body);}
.lang a,.lang .lang-cur{display:inline-block;padding:.45rem .8rem;border-radius:999px;
  line-height:1;text-decoration:none;}
.lang a{color:var(--slate);}
.lang a:hover{color:var(--accent);background:var(--paper);}
.lang .lang-cur{background:var(--accent);color:var(--white);}
.site-footer .base a.lang-link{color:rgba(255,255,255,.85);}
.lang-note{margin:1.25rem 0 0;}
@media (max-width:900px){
  .lang{order:1;margin-left:auto;}
  .nav-toggle{order:2;margin-left:.6rem;white-space:nowrap;}
}
/* Phones: the switch needs room in the header bar, so the lockup steps down to the
   footer size (52px mark, same proportions) and the bar tightens. */
@media (max-width:520px){
  .site-header .bar{gap:.5rem;}
  .site-header .lockup{gap:.6rem;}
  .site-header .lockup .mark{width:50px;}
  .site-header .lockup .desc span{font-size:.6rem;letter-spacing:.22em;}
  .site-header .lockup .desc span.zh{font-size:.7rem;letter-spacing:.2em;}
  .lang{margin-left:auto;padding:.14rem;}
  .lang a,.lang .lang-cur{padding:.4rem .6rem;font-size:.75rem;}
  .nav-toggle{margin-left:.4rem;padding:.5rem .55rem;font-size:.75rem;}
}
@media (max-width:380px){
  .site-header .bar{gap:.35rem;}
  .site-header .lockup .mark{width:42px;}
  .site-header .lockup .desc span{letter-spacing:.14em;}
  .lang a,.lang .lang-cur{padding:.4rem .5rem;}
}

/* ==========================================================================
   CHINESE TYPOGRAPHY (html lang="zh-Hans" only)
   System CJK fonts only: no font download, no external request. Latin and
   digits still use Jost and IBM Plex, Chinese falls through to the system face.
   ========================================================================== */
html[lang="zh-Hans"]{
  --font-display:Jost,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC","Helvetica Neue",Arial,sans-serif;
  --font-body:"IBM Plex Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",ui-monospace,SFMono-Regular,Menlo,monospace;
  --step-label:.75rem;
  --measure:42em;
}
html[lang="zh-Hans"] body{line-height:1.8;line-break:strict;word-break:normal;overflow-wrap:break-word;}
html[lang="zh-Hans"] h1,html[lang="zh-Hans"] h2,html[lang="zh-Hans"] h3,html[lang="zh-Hans"] h4{
  line-height:1.35;letter-spacing:0;}
html[lang="zh-Hans"] h1{font-weight:500;line-height:1.3;}
html[lang="zh-Hans"] .lead{line-height:1.75;font-weight:400;}
html[lang="zh-Hans"] .nav a{font-size:.9375rem;}
html[lang="zh-Hans"] .btn{letter-spacing:.02em;}
html[lang="zh-Hans"] .rv-q{max-width:22em;}
html[lang="zh-Hans"] .lang{font-family:var(--font-body);}
html[lang="zh-Hans"] .subnav a,html[lang="zh-Hans"] .deflist dt,html[lang="zh-Hans"] .label,
html[lang="zh-Hans"] figcaption,html[lang="zh-Hans"] .hero-wechat .k,html[lang="zh-Hans"] .vcard dt{text-transform:none;}
html[lang="zh-Hans"] h1,html[lang="zh-Hans"] h2,html[lang="zh-Hans"] h3{text-wrap:balance;}
html[lang="zh-Hans"] p,html[lang="zh-Hans"] li,html[lang="zh-Hans"] dd,html[lang="zh-Hans"] blockquote,
html[lang="zh-Hans"] figcaption{text-wrap:pretty;}
html[lang="zh-Hans"] .hero h1{font-size:clamp(1.9rem,1.2rem + 2.5vw,2.75rem);}
html[lang="zh-Hans"] .label{letter-spacing:.03em}
html[lang="zh-Hans"] .descriptor{letter-spacing:.03em}
html[lang="zh-Hans"] .nav-toggle{letter-spacing:.03em}
html[lang="zh-Hans"] .hero-wechat .k{letter-spacing:.03em}
html[lang="zh-Hans"] .hero-portrait .cred{letter-spacing:.03em}
html[lang="zh-Hans"] .res-head .meta{letter-spacing:.03em}
html[lang="zh-Hans"] .band .meta{letter-spacing:.03em}
html[lang="zh-Hans"] .employers .cap{letter-spacing:.03em}
html[lang="zh-Hans"] .hero h1{max-width:99.0em}
html[lang="zh-Hans"] .card .more{letter-spacing:.03em}
html[lang="zh-Hans"] blockquote.quote{max-width:37.2em}
html[lang="zh-Hans"] .band h2{max-width:13.6em}
html[lang="zh-Hans"] .band p{max-width:32.2em}
html[lang="zh-Hans"] .site-footer h4{letter-spacing:.03em}
html[lang="zh-Hans"] .ph{letter-spacing:.03em}
html[lang="zh-Hans"] .tbl th{letter-spacing:.03em}
html[lang="zh-Hans"] .deflist dt{letter-spacing:.03em}
html[lang="zh-Hans"] .subnav a{letter-spacing:.03em}
html[lang="zh-Hans"] .rv-q{max-width:14.9em}
html[lang="zh-Hans"] .rv-help{max-width:34.7em}
html[lang="zh-Hans"] .rv-hint{letter-spacing:.03em}
html[lang="zh-Hans"] .rv-bar-tag{letter-spacing:.03em}
html[lang="zh-Hans"] .portrait figcaption{letter-spacing:.03em}
html[lang="zh-Hans"] .vcard dt{letter-spacing:.03em}
html[lang="zh-Hans"] .win-c{max-width:36.0em}
html[lang="zh-Hans"] .win-t{letter-spacing:.03em}


/* WeChat ID as text (no QR code) */
.wid{font-family:var(--font-mono);letter-spacing:.02em;user-select:all;white-space:nowrap;}
.wid--lg{display:block;font-size:1.05rem;}