/* Confluence site components — home + redesigned inner pages, on top of tokens.css + chrome.css.
   Rules: values via var() only; motion = opacity / transform; terra once per region;
   deep bands: footer only. Photos stay in color (author, 2026-09-30).
   Legibility pass (author, 2026-10-01; DS v2.5.0 --site-*): reading text in --text (grey = labels and captions only),
   small terra text in --terra-deep, serif titles at --site-w-title, no forced antialiasing, line-height 1.8–1.9. */

:root{--t-body-v3:var(--site-t-body)}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body.v3{
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:var(--t-body-v3);
  line-height:1.85;
  letter-spacing:var(--tracking-body);
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:2px}
.en{letter-spacing:.08em}

/* ── Links ── */
.x-link{
  position:relative;display:inline-flex;align-items:center;gap:.6em;
  color:var(--terra-deep);font-weight:500;font-size:16px;letter-spacing:.14em;text-decoration:none;padding-block:6px;
}
.x-link::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.x-link i{font-style:normal;display:inline-block;transition:transform .5s var(--ease-out)}
.x-link:hover::after,.x-case:hover .x-link::after{transform:scaleX(1);transform-origin:left}
.x-link:hover i,.x-case:hover .x-link i{transform:translateX(6px)}

/* ── Type ────────────────────────────── */
.x-eyebrow,.x-kicker{font-size:var(--site-t-label);letter-spacing:var(--site-tracking-eyebrow);color:var(--terra-deep);font-weight:500;line-height:1.6}
.x-eyebrow .en,.x-kicker .en{letter-spacing:.12em}
.x-sec{font-size:var(--site-t-label);letter-spacing:var(--site-tracking-seclabel);color:var(--terra-deep);font-weight:500;display:flex;align-items:baseline;gap:1.1em}
.x-sec b{font-family:var(--serif);font-weight:var(--site-w-title);font-size:clamp(22px,2vw,28px);letter-spacing:0;line-height:1}
.x-display{
  font-family:var(--serif);font-weight:var(--site-w-title);color:var(--ink);
  font-size:clamp(36px,5.1vw,78px);line-height:1.32;letter-spacing:.02em;
}
.x-h2{font-family:var(--serif);font-weight:var(--site-w-title);color:var(--ink);font-size:clamp(34px,4.4vw,64px);line-height:1.35;letter-spacing:.02em}
.x-h3{font-family:var(--serif);font-weight:var(--site-w-title);color:var(--ink);font-size:clamp(30px,3.1vw,44px);line-height:1.4;letter-spacing:.02em}
.x-p{max-width:var(--measure);color:var(--text);line-height:1.85}
.x-p + .x-p{margin-top:1.1em}
[data-lines]{display:block}
[data-lines] .l{display:block}
.x-nb{white-space:nowrap}
@media (min-width:641px){[data-lines] .l > span{white-space:nowrap}}

/* ── Photo: color, no duotone (author 2026-09-30; pending DESIGN.md exception) ── */
.x-photo{position:relative;overflow:hidden;background:var(--paper-deep);isolation:isolate}
.x-photo img{width:100%;height:100%;object-fit:cover;transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1.1))}
.x-cap{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--faint);line-height:1.6;
}
.x-cap span:first-child{color:var(--muted)}

/* ── Hero ────────────────────────────── */
.x-hero{
  min-height:100svh;display:flex;flex-direction:column;
  padding:calc(var(--nav-h) + clamp(16px,3vh,40px)) 0 0;
}
.x-hero-grid{
  flex:1;width:var(--wrap-w);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:clamp(24px,4vw,64px);
}
.x-hero-copy .x-eyebrow{margin-bottom:clamp(22px,3.6vh,36px)}
.x-hero-note{
  margin-top:clamp(32px,5.6vh,56px);padding-top:26px;border-top:1px solid var(--hairline);
  max-width:30em;color:var(--text);line-height:1.85;
}
.x-hero-art{position:relative;justify-self:end;width:min(100%,440px);overflow:hidden;display:flex;justify-content:flex-end}
.x-hero-art img{width:auto;max-width:100%;max-height:min(56vh,600px);margin-left:auto;transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(to right,transparent,black 14%,black 74%,transparent),linear-gradient(to bottom,black 84%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,black 14%,black 74%,transparent),linear-gradient(to bottom,black 84%,transparent);mask-composite:intersect}
.x-ink-veil{position:absolute;inset:-2px;background:var(--paper);transform-origin:50% 100%;pointer-events:none}
.x-hero-foot{
  width:var(--wrap-w);margin:clamp(24px,4vh,48px) auto 0;
  display:flex;align-items:center;gap:clamp(24px,5vw,80px);
  padding-block:clamp(20px,3vh,30px);border-top:1px solid var(--hairline);
}
.x-logos-label{font-size:var(--site-t-label);letter-spacing:var(--site-tracking-seclabel);color:var(--muted);white-space:nowrap}
.x-logos{list-style:none;flex:1;display:flex;justify-content:space-between;align-items:center;gap:clamp(20px,4vw,56px)}
.x-logos li{display:flex;flex-direction:column;align-items:center;gap:8px}
.x-logos img{height:clamp(22px,2.1vw,30px);width:auto}
.x-logos img.tall{height:clamp(30px,2.9vw,42px)}
.x-logos span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--muted);line-height:1}

/* ── 壹 方法：thesis over ink-wash confluence (paper, not deep) ── */
.x-method{position:relative;padding-top:clamp(96px,11vw,200px);overflow:hidden}
.x-method-copy{position:relative;z-index:2}
.x-thesis{
  margin-top:clamp(28px,3.4vw,52px);
  font-family:var(--serif);font-weight:var(--site-w-title);color:var(--ink);
  font-size:clamp(34px,5.4vw,84px);line-height:1.34;letter-spacing:.02em;
}
.x-thesis-sub{margin-top:clamp(24px,2.8vw,40px);max-width:var(--measure);color:var(--text);line-height:1.85}
.x-method-art{position:relative;z-index:1;margin-top:calc(-1 * clamp(24px,6vw,180px));width:100%;aspect-ratio:2/1;overflow:hidden}
.x-method-art img{
  width:100%;height:100%;object-fit:cover;object-position:50% 35%;
  transform:scale(var(--ms,1));transform-origin:46% 55%;will-change:transform;
  -webkit-mask-image:linear-gradient(to bottom,transparent,black 30%,black 76%,transparent);
  mask-image:linear-gradient(to bottom,transparent,black 30%,black 76%,transparent);
}

/* ── Generic section ─────────────────── */
.x-sec-block{padding-block:clamp(96px,11vw,168px)}
.x-sec-head .x-link{color:var(--ink)}
.x-sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:clamp(48px,6vw,88px);padding-bottom:18px;border-bottom:1px solid var(--hairline)}

/* ── Split: fast / slow ──────────────── */
.x-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:center}
.x-split-copy .x-h3{margin-bottom:clamp(22px,2.6vw,34px)}
.x-split-copy .x-link{margin-top:clamp(22px,2.6vw,32px)}
.x-diagram{width:100%;height:auto;font-family:var(--sans);overflow:visible}
/* phones show the 480-wide drawing at about 70%, which puts its labels at 8–10px, so they grow by 30% there.
   The English drawing splits its long labels over two lines (taller viewBox) so the same rule fits it.
   Only below 480: wider than that the drawing is shown near full size and needs no help. */
@media (max-width:480px){
  .x-diagram text[font-size="15"]{font-size:19.5px}
  .x-diagram text[font-size="14"]{font-size:18px}
  .x-diagram text[font-size="13"]{font-size:17px}
  .x-diagram text[font-size="12"]{font-size:15.5px}
}

/* ── Offer rows ──────────────────────── */
.x-offer{background:var(--paper-deep)}
.x-offer-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px);align-items:center}
.x-offer-row + .x-offer-row{margin-top:clamp(80px,10vw,160px)}
.x-offer-media{grid-column:1 / span 7}
.x-offer-media .x-photo{aspect-ratio:3/2}
.x-offer-copy{grid-column:8 / span 5;padding-left:clamp(0px,2vw,32px)}
.x-offer-row.is-flip .x-offer-media{grid-column:6 / span 7;grid-row:1}
.x-offer-row.is-flip .x-offer-copy{grid-column:1 / span 5;grid-row:1;padding-left:0}
.x-offer-title{
  margin:clamp(16px,1.8vw,24px) 0 clamp(20px,2.2vw,30px);
  font-family:var(--serif);font-weight:var(--site-w-title);color:var(--ink);
  font-size:clamp(28px,2.6vw,38px);line-height:1.45;letter-spacing:.02em;
}

/* ── Cases ───────────────────────────── */
.x-case-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,88px)}
.x-case{display:flex;flex-direction:column;text-decoration:none;color:var(--text);border-top:var(--rule) solid var(--ink);padding-top:clamp(22px,2.4vw,32px)}
.x-case-label{font-size:var(--site-t-label);letter-spacing:var(--site-tracking-seclabel);color:var(--muted);font-weight:500}
.x-case-label .en{letter-spacing:.14em;text-transform:uppercase}
.x-case-brand{margin-top:14px;font-family:var(--serif);font-weight:var(--w-serif-sub);font-size:clamp(22px,2vw,28px);color:var(--ink);letter-spacing:.04em;line-height:1.4}
.x-case-stat{
  display:flex;align-items:baseline;gap:.1em;margin-top:clamp(20px,2.6vw,36px);
  font-family:var(--serif);font-weight:var(--site-w-title);color:var(--ink);
  font-size:clamp(112px,15vw,224px);line-height:.86;letter-spacing:-.02em;
}
.x-case-stat .num{font-variant-numeric:tabular-nums}
.x-case-stat small{font-family:var(--sans);font-weight:500;font-size:clamp(16px,1.35vw,19px);letter-spacing:.2em;color:var(--terra);line-height:1}
.x-case-cap{margin-top:clamp(18px,2vw,26px);padding-bottom:clamp(18px,2vw,26px);border-bottom:1px solid var(--hairline);font-size:15px;color:var(--muted);line-height:1.9}
.x-case-sum{margin:clamp(18px,2vw,26px) 0 clamp(16px,2vw,24px);max-width:28em;color:var(--text);line-height:1.85}
.x-case .x-link{margin-top:auto;align-self:flex-start}

/* ── Team ────────────────────────────── */
.x-team .x-sec{margin-bottom:clamp(28px,3.4vw,44px)}
.x-team-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(48px,6vw,88px)}
.x-people{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.2vw,32px);margin-bottom:clamp(40px,5vw,64px)}
.x-people a{display:block;text-decoration:none;color:inherit}
.x-people .ph{display:block;overflow:hidden;aspect-ratio:1;background:var(--paper-deep)}
.x-people img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.x-people a:hover img{transform:scale(1.04)}
.x-people .nm{display:block;margin-top:18px;font-family:var(--serif);font-weight:var(--w-serif-sub);font-size:clamp(20px,1.7vw,24px);color:var(--ink);letter-spacing:.08em;line-height:1.4}
.x-people .tg{display:block;margin-top:6px;font-size:13px;letter-spacing:.1em;color:var(--muted);line-height:1.8}

/* ── CTA ─────────────────────────────── */
.x-cta{border-top:1px solid var(--hairline)}
.x-cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,104px);align-items:center}
.x-cta-title{font-family:var(--serif);font-weight:var(--site-w-title);color:var(--ink);font-size:clamp(36px,4vw,60px);line-height:1.36;letter-spacing:.02em;margin-bottom:clamp(24px,3vw,40px)}
.x-cta-actions{margin-top:clamp(32px,3.6vw,48px);display:flex;align-items:center;flex-wrap:wrap;gap:18px 28px}
.x-mail{font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--hairline);padding-bottom:2px;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.x-mail:hover{color:var(--ink);border-color:var(--ink)}
.x-cta-fig .x-photo{aspect-ratio:3/2}

/* ── Motion (JS only; opacity / transform) ── */
.js [data-rise]{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1s var(--ease-out) var(--d,0s),transform 1.2s var(--ease-out) var(--d,0s)}
.js [data-rise].is-in{opacity:1;transform:none}
.js [data-lines] .l{overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.js [data-lines] .l > span{display:inline-block;transform:translate3d(0,108%,0);transition:transform 1.25s var(--ease-out);transition-delay:calc(var(--d,0s) + var(--li,0) * .11s)}
.js [data-lines].is-in .l > span{transform:none}
.js .x-photo img{transition:transform 1.6s var(--ease-out)}
.js [data-rise] .x-photo img{--ps:1.16}
.js [data-rise].is-in .x-photo img{--ps:1.08}
.js .x-hero-art img{transform:scale(1.05);transition:transform 2.4s var(--ease-out) .3s}
.js .x-ink-veil{transition:transform 1.9s cubic-bezier(.7,0,.2,1) .25s}
.js .is-loaded .x-hero-art img{transform:none}
.js .is-loaded .x-ink-veil{transform:scaleY(0)}

/* diagram */
.js [data-diagram] .d-dots circle{opacity:0;transition:opacity .5s var(--ease) calc(var(--i) * 12ms)}
.js [data-diagram] .d-hot circle,.js [data-diagram] .d-node,.js [data-diagram] .d-land{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;transition:opacity .4s var(--ease),transform .7s var(--ease-out)}
.js [data-diagram] .d-hot circle{transition-delay:.7s}
.js [data-diagram] .d-links line{opacity:0;transition:opacity .6s var(--ease) 1s}
.js [data-diagram] .d-node{transition-delay:1.25s}
.js [data-diagram] .d-drop{opacity:0;transform:translate3d(0,-26px,0);transition:opacity .6s var(--ease) 1.5s,transform 1s var(--ease-out) 1.5s}
.js [data-diagram] .d-land{transition-delay:2.05s}
.js [data-diagram] .d-note{opacity:0;transition:opacity .8s var(--ease) 1.7s}
.js [data-diagram].is-in .d-dots circle,.js [data-diagram].is-in .d-links line,.js [data-diagram].is-in .d-note{opacity:1}
.js [data-diagram].is-in .d-hot circle,.js [data-diagram].is-in .d-node,.js [data-diagram].is-in .d-land,.js [data-diagram].is-in .d-drop{opacity:1;transform:none}

/* ── Responsive ──────────────────────── */
@media (max-width:1100px){
  .x-hero-art{width:min(100%,360px)}
  .x-offer-media{grid-column:1 / span 6}.x-offer-copy{grid-column:7 / span 6}
  .x-offer-row.is-flip .x-offer-media{grid-column:7 / span 6}.x-offer-row.is-flip .x-offer-copy{grid-column:1 / span 6}
}
@media (max-width:900px){
  .x-hero{min-height:auto}
  .x-hero-grid{grid-template-columns:1fr;gap:clamp(28px,6vw,44px)}
  .x-hero-art{justify-self:end;width:52%;max-width:300px;order:2;margin-top:-8px}
  .x-hero-art img{max-height:none;width:100%}
  .x-hero-foot{flex-direction:column;align-items:flex-start;gap:24px}
  .x-logos{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:28px 16px}
  .x-method-art{aspect-ratio:5/4;margin-top:0}
  .x-method-art img{object-position:46% 60%;transform-origin:46% 60%;transform:scale(calc(var(--ms,1) * 1.7));
    -webkit-mask-image:linear-gradient(to bottom,transparent,black 16%,black 84%,transparent);mask-image:linear-gradient(to bottom,transparent,black 16%,black 84%,transparent)}
  .x-split{grid-template-columns:1fr}
  .x-offer-row,.x-offer-row.is-flip{grid-template-columns:1fr;row-gap:32px}
  .x-offer-media,.x-offer-copy,.x-offer-row.is-flip .x-offer-media,.x-offer-row.is-flip .x-offer-copy{grid-column:1;grid-row:auto}
  .x-case-grid{grid-template-columns:1fr;gap:72px}
  .x-team-head{grid-template-columns:1fr;gap:20px}
  .x-people{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .x-cta-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .x-eyebrow{letter-spacing:.3em}
  .x-hero-note br{display:none}
  .x-sec-head{flex-direction:column;align-items:flex-start;gap:8px}
  .x-cap{flex-direction:column;gap:2px}
}

/* ── Large screens (≥1800px): scale the layout up instead of leaving a narrow island ── */
@media (min-width:1800px){
  :root{--t-body-v3:clamp(20px,1.05vw,22px)}
  .x-eyebrow,.x-kicker,.x-sec,.x-logos-label,.x-case-label{font-size:16px}
  .x-sec b{font-size:34px}
  .x-link{font-size:18px}
  .x-display{font-size:min(4.35vw,116px)}
  .x-hero-art{width:min(100%,620px)}
  .x-hero-art img{max-height:min(64vh,860px)}
  .x-logos img{height:clamp(34px,1.7vw,46px)}
  .x-logos img.tall{height:clamp(48px,2.4vw,64px)}
  .x-logos span{font-size:13px}
  .x-thesis{font-size:min(4.6vw,120px)}
  .x-h2{font-size:min(3.6vw,92px)}
  .x-h3{font-size:min(2.5vw,60px)}
  .x-offer-title{font-size:min(2.1vw,52px)}
  .x-cta-title{font-size:min(3.4vw,86px)}
  .x-case-brand{font-size:34px}
  .x-case-stat{font-size:min(12vw,300px)}
  .x-case-stat small{font-size:22px}
  .x-case-cap{font-size:17px}
  .x-people .nm{font-size:30px}
  .x-people .tg{font-size:15px}
  .x-mail{font-size:16px}
  .x-diagram{max-width:680px;justify-self:end}
}

@media (prefers-reduced-motion:reduce){
  .js [data-rise],.js [data-lines] .l > span,.js .x-photo img,.js .x-hero-art img,.js [data-diagram] *{transition:none!important;opacity:1!important;transform:none!important}
  .js .x-ink-veil{display:none}
  .x-method-art img{transform:none!important}
}

/* ── English: no CJK letter-spacing, let long display lines wrap ── */
html[lang="en"] .x-eyebrow,html[lang="en"] .x-kicker{letter-spacing:.14em;text-transform:uppercase}
html[lang="en"] .x-sec,html[lang="en"] .x-logos-label,html[lang="en"] .x-case-label{letter-spacing:.16em;text-transform:uppercase}
@media (max-width:400px){html[lang="en"] .x-logos-label{white-space:normal}}  /* "Organizations we've worked with" is wider than a 320px screen */
html[lang="en"] .x-sec b{letter-spacing:0}
html[lang="en"] .x-logos span{letter-spacing:.08em}
html[lang="en"] [data-lines] .l > span{white-space:normal}
@media (min-width:901px){html[lang="en"] .x-hero-grid{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}}
html[lang="en"] .x-display{font-size:clamp(34px,4vw,62px);letter-spacing:0;line-height:1.2}
html[lang="en"] .x-thesis{font-size:clamp(32px,4.4vw,70px);letter-spacing:0;line-height:1.22}
html[lang="en"] .x-h2,html[lang="en"] .x-h3,html[lang="en"] .x-offer-title,html[lang="en"] .x-cta-title{letter-spacing:0;line-height:1.25}
html[lang="en"] .x-offer-title{font-size:clamp(24px,2.2vw,34px)}
html[lang="en"] .x-cta-title{font-size:clamp(32px,3.3vw,52px)}
@media (max-width:480px){html[lang="en"] .x-cta-title{font-size:min(7.4vw,32px)}}  /* each sentence on one line */
html[lang="en"] .x-h3{font-size:clamp(28px,2.7vw,40px)}
html[lang="en"] .x-hero-note,html[lang="en"] .x-p,html[lang="en"] .x-thesis-sub,html[lang="en"] .x-case-sum,html[lang="en"] .x-case-cap{letter-spacing:.005em;line-height:1.75}
html[lang="en"] .x-case-stat small{letter-spacing:.06em}
html[lang="en"] .x-people .nm{letter-spacing:.02em}
html[lang="en"] .x-people .tg{letter-spacing:.02em}
html[lang="en"] .x-link{letter-spacing:.04em}
@media (min-width:1800px){
  html[lang="en"] .x-display{font-size:min(3.7vw,100px)}
  html[lang="en"] .x-thesis{font-size:min(3.8vw,100px)}
}

/* ═══════════════ Inner pages (services / approach / cases / team) ═══════════════ */
body.x-page{background:var(--paper);color:var(--text);font-family:var(--sans);font-size:var(--t-body-v3);line-height:1.85;letter-spacing:var(--tracking-body);font-synthesis:none;overflow-x:hidden}
.x-page b,.x-page strong{font-weight:500;color:var(--ink)}

/* page head */
.x-phead{padding:calc(var(--nav-h) + clamp(56px,11vh,150px)) 0 clamp(56px,7vw,120px)}
.x-phead .x-eyebrow{margin-bottom:clamp(22px,3vh,34px)}
.x-ptitle{font-family:var(--serif);font-weight:var(--site-w-title);color:var(--ink);font-size:clamp(36px,5vw,76px);line-height:1.32;letter-spacing:.02em}
.x-lede{margin-top:clamp(28px,3.4vw,52px);padding-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--hairline);max-width:40em;font-size:clamp(16px,1.25vw,19px);line-height:1.9;color:var(--text)}
.x-lede.is-wide{max-width:none;columns:2 22em;column-gap:clamp(32px,5vw,80px)}

/* section rhythm */
.x-section{padding-block:clamp(72px,9vw,150px)}
.x-section + .x-section{border-top:1px solid var(--hairline)}
.x-section.is-tint{background:var(--paper-deep);border-top:0}
.x-section.is-tint + .x-section{border-top:0}
.x-section > .x-wrap > .x-sec,.x-section .x-sec-head{margin-bottom:clamp(40px,5vw,80px)}

/* stance: bold statement left, explanation right */
.x-stance{display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);gap:clamp(28px,4vw,64px);align-items:start;padding-top:clamp(24px,2.6vw,36px);border-top:var(--rule) solid var(--ink)}
.x-stance h2{font-family:var(--serif);font-weight:var(--w-serif-sub);color:var(--ink);font-size:clamp(24px,2.2vw,34px);line-height:1.45;letter-spacing:.04em}
.x-stance p{color:var(--text);max-width:36em;line-height:1.85}

/* numbered steps (01 02 = sequence) */
.x-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,44px);counter-reset:none}
.x-steps li{border-top:var(--rule) solid var(--ink);padding-top:clamp(18px,1.8vw,26px)}
.x-steps .n{display:block;font-family:var(--serif);font-weight:var(--site-w-title);color:var(--ink);font-size:clamp(44px,4.4vw,76px);line-height:1;letter-spacing:-.01em}
.x-steps h3{margin-top:clamp(18px,2vw,30px);font-family:var(--serif);font-weight:var(--w-serif-sub);color:var(--ink);font-size:clamp(20px,1.6vw,25px);letter-spacing:.08em;line-height:1.5}
.x-steps p{margin-top:10px;color:var(--text);font-size:.94em;line-height:1.8}
.x-after-link{margin-top:clamp(32px,3.6vw,52px)}

/* offer spec: pitch left, ruled facts right */
.x-offerspec{display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);gap:clamp(28px,4vw,64px);padding-top:clamp(28px,3vw,44px);border-top:var(--rule) solid var(--ink)}
.x-offerspec + .x-offerspec{margin-top:clamp(72px,9vw,140px)}
.x-offerspec-pitch{position:sticky;top:calc(var(--nav-h) + 32px);align-self:start}
.x-offerspec-pitch .x-offer-title{margin-top:clamp(14px,1.4vw,20px)}
/* just above the two-column breakpoint the left column is under 300px: an 11-character title line would be clipped at the 28px floor */
@media (min-width:901px) and (max-width:960px){html:not([lang="en"]) .x-offerspec-pitch .x-offer-title{font-size:25.5px}}
.x-facts{margin:0}
.x-facts > div{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:18px;padding-block:clamp(24px,2.4vw,36px);border-bottom:1px solid var(--hairline)}
.x-facts > div:first-child{padding-top:0}
.x-facts dt{font-size:var(--site-t-label);letter-spacing:var(--site-tracking-seclabel);color:var(--muted);font-weight:500;padding-top:.35em}
.x-facts dd{margin:0;color:var(--text);line-height:1.8}
.x-facts ul{list-style:none;display:grid;gap:clamp(10px,1vw,14px)}
.x-facts li{position:relative;padding-left:22px;color:var(--text);line-height:1.8}
.x-facts li::before{content:"";position:absolute;left:0;top:.95em;width:9px;height:1px;background:var(--ink)}
.x-facts li b{display:block;color:var(--ink);margin-bottom:6px}
.x-facts li:only-child::before,.x-facts li.is-lead::before{background:var(--terra)}
.x-note{margin-top:clamp(56px,6vw,96px);padding:clamp(18px,1.8vw,26px) clamp(20px,2.4vw,36px);border:1px solid var(--hairline);border-left:2px solid var(--terra);max-width:52em;font-family:var(--serif);font-weight:var(--w-serif-sub);font-size:clamp(18px,1.4vw,22px);line-height:1.85;color:var(--ink);letter-spacing:.03em}

/* proof band */
.x-proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px)}
.x-proof h3{font-size:var(--site-t-label);letter-spacing:var(--site-tracking-seclabel);color:var(--muted);font-weight:500;margin-bottom:18px}
.x-proof ul{list-style:none;border-top:var(--rule) solid var(--ink)}
.x-proof li{display:flex;justify-content:space-between;gap:20px;padding-block:14px;border-bottom:1px solid var(--hairline)}
.x-proof li a,.x-proof li > span:first-child{color:var(--ink);text-decoration:none;font-weight:500}
.x-proof li a:hover{color:var(--terra)}
.x-proof li span + span{color:var(--muted);text-align:right;font-size:.92em}
.x-cred{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;padding-top:18px;border-top:var(--rule) solid var(--ink)}
.x-cred img{width:56px;height:56px;border-radius:50%;box-shadow:var(--shadow-badge)}
.x-cred b{display:block;font-size:var(--site-t-label);letter-spacing:var(--site-tracking-seclabel);color:var(--ink);margin-bottom:6px}
.x-cred p{color:var(--text);line-height:1.8}

/* closing CTA band (paper) */
.x-close{padding-block:clamp(96px,11vw,180px);border-top:1px solid var(--hairline)}
.x-close-inner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,110px);align-items:end}
.x-close-line{font-family:var(--serif);font-weight:var(--site-w-title);color:var(--ink);font-size:clamp(28px,3vw,48px);line-height:1.5;letter-spacing:.03em}
.x-close .x-cta-actions{margin-top:0;justify-content:flex-end}

/* essay (approach): sticky index + reading column */
.x-essay{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(32px,6vw,120px)}
.x-toc{position:sticky;top:calc(var(--nav-h) + 40px);align-self:start;list-style:none;border-top:var(--rule) solid var(--ink)}
.x-toc a{display:block;padding-block:12px;border-bottom:1px solid var(--hairline);color:var(--muted);text-decoration:none;font-size:15px;line-height:1.6;transition:color var(--dur) var(--ease)}
.x-toc a:hover,.x-toc a.is-on{color:var(--ink)}

.x-prose{max-width:36em;font-size:clamp(17px,1.25vw,19px);line-height:1.9}
.x-prose h2{font-family:var(--serif);font-weight:var(--w-serif-sub);color:var(--ink);font-size:clamp(26px,2.3vw,36px);line-height:1.45;letter-spacing:.04em;margin:clamp(64px,7vw,110px) 0 clamp(20px,2vw,30px);scroll-margin-top:calc(var(--nav-h) + 32px)}
.x-prose h2:first-child{margin-top:0}
.x-prose p{color:var(--text)}
.x-prose p + p{margin-top:1.15em}
.x-prose figure{margin:clamp(40px,4.4vw,64px) 0;padding:clamp(24px,2.6vw,40px) 0;border-block:1px solid var(--hairline)}
.x-prose .x-diagram{max-width:560px}

/* case list */
.x-caserow{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);padding-block:clamp(32px,3.6vw,52px) clamp(56px,6vw,96px);border-top:var(--rule) solid var(--ink);text-decoration:none;color:var(--text)}
.x-caserow .x-case-stat{margin-top:0}
.x-caserow .x-case-stat + .x-case-cap{border-bottom:0}
.x-caserow h2{margin:14px 0 clamp(18px,2vw,26px);font-family:var(--serif);font-weight:var(--w-serif-sub);color:var(--ink);font-size:clamp(24px,2.2vw,34px);line-height:1.5;letter-spacing:.03em;transition:color var(--dur) var(--ease)}
.x-caserow:hover h2{color:var(--primary)}
.x-caserow p{color:var(--text);max-width:36em;line-height:1.85}
.x-caserow .x-link{margin-top:clamp(18px,2vw,28px)}
.x-caserow:hover .x-link::after{transform:scaleX(1);transform-origin:left}
.x-caserow:hover .x-link i{transform:translateX(6px)}
.x-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,110px)}
.x-pair > div{border-top:1px solid var(--ink);padding-top:clamp(18px,1.8vw,26px)}
.x-pair h3{font-family:var(--serif);font-weight:var(--w-serif-sub);color:var(--ink);font-size:clamp(20px,1.6vw,25px);letter-spacing:.06em;line-height:1.5;margin-bottom:10px}
.x-pair p{color:var(--text)}

/* team roster */
.x-roster{list-style:none}
.x-member{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);padding-block:clamp(36px,4vw,60px);border-top:1px solid var(--hairline)}
.x-member:first-child{border-top:var(--rule) solid var(--ink)}
.x-member-ph{position:relative;width:min(100%,340px);align-self:start}
.x-member-ph .ph{display:block;aspect-ratio:1;overflow:hidden;background:var(--paper-deep)}
.x-member-ph img.face{width:100%;height:100%;object-fit:cover}
.x-member-ph .cert{position:absolute;right:-14px;bottom:-14px;width:64px;height:64px;border-radius:50%;box-shadow:var(--shadow-badge);transition:transform .5s var(--ease-out)}
.x-member-ph .cert:hover{transform:scale(1.06)}
.x-member-ph .cert img{width:100%;height:100%;border-radius:50%}
.x-member h2{font-family:var(--serif);font-weight:var(--site-w-title);color:var(--ink);font-size:clamp(32px,3vw,48px);line-height:1.3;letter-spacing:.08em}
.x-member h2 .en{font-family:var(--sans);font-weight:400;font-size:.36em;letter-spacing:.08em;color:var(--muted);margin-left:.8em;vertical-align:.4em}
.x-member .tags{margin-top:12px;font-size:var(--site-t-label);letter-spacing:var(--site-tracking-seclabel);color:var(--ink);font-weight:500}
.x-member .cred{margin-top:10px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);line-height:1.7}
.x-member .bio{margin-top:clamp(18px,2vw,26px);max-width:36em;color:var(--text);line-height:1.85}
.x-member .x-link{margin-top:18px}

@media (max-width:900px){
  .x-lede.is-wide{columns:auto}
  .x-stance,.x-offerspec,.x-proof,.x-close-inner,.x-essay,.x-caserow,.x-pair,.x-member{grid-template-columns:1fr}
  .x-steps{grid-template-columns:1fr 1fr;row-gap:40px}
  .x-offerspec-pitch{position:static}
  .x-toc{display:none}
  .x-close .x-cta-actions{justify-content:flex-start}
  .x-member-ph{width:min(62%,260px)}
}
@media (max-width:640px){
  .x-steps{grid-template-columns:1fr}
  .x-facts > div{grid-template-columns:1fr;gap:6px}
  .x-proof li{flex-direction:column;gap:2px}
  .x-proof li span + span{text-align:left}
}
@media (min-width:1800px){
  .x-ptitle{font-size:min(4.2vw,112px)}
  .x-lede{font-size:21px}
  .x-stance h2,.x-caserow h2{font-size:40px}
  .x-steps h3,.x-pair h3{font-size:28px}
  .x-steps .n{font-size:88px}
  .x-facts dt,.x-proof h3,.x-cred b,.x-member .tags,.x-stays-h{font-size:16px}
  .x-offerspec .x-kicker{font-size:18px}
  .x-note{font-size:25px}
  .x-close-line{font-size:min(2.8vw,64px)}
  .x-prose{font-size:21px}
  .x-prose h2{font-size:42px}
  .x-toc a{font-size:17px}
  .x-member-ph{width:min(100%,420px)}
  .x-member h2{font-size:56px}
  .x-member .cred{font-size:14px}
}

/* English inner */
html[lang="en"] .x-ptitle{letter-spacing:0;line-height:1.2;font-size:clamp(34px,4.3vw,66px)}
html[lang="en"] .x-lede,html[lang="en"] .x-stance p,html[lang="en"] .x-steps p,html[lang="en"] .x-facts dd,html[lang="en"] .x-facts li,html[lang="en"] .x-proof,html[lang="en"] .x-cred p,html[lang="en"] .x-prose,html[lang="en"] .x-caserow p,html[lang="en"] .x-pair p,html[lang="en"] .x-member .bio{letter-spacing:.005em;line-height:1.8}
html[lang="en"] .x-stance h2,html[lang="en"] .x-steps h3,html[lang="en"] .x-note,html[lang="en"] .x-close-line,html[lang="en"] .x-prose h2,html[lang="en"] .x-caserow h2,html[lang="en"] .x-pair h3,html[lang="en"] .x-member h2{letter-spacing:0;line-height:1.3}
html[lang="en"] .x-facts dt,html[lang="en"] .x-proof h3,html[lang="en"] .x-cred b,html[lang="en"] .x-member .tags{letter-spacing:.14em;text-transform:uppercase}
@media (min-width:641px){html[lang="en"] .x-facts > div{grid-template-columns:7em minmax(0,1fr)}}
html[lang="en"] .x-member h2 .en{font-family:var(--serif);font-size:.5em;letter-spacing:.12em;vertical-align:.2em}
@media (min-width:1800px){html[lang="en"] .x-ptitle{font-size:min(3.6vw,96px)}}
.x-method-art.is-page{margin-top:0}
.x-stance.is-plain{border-top:0;padding-top:0}
.x-ptitle,.x-caserow h2,.x-close-line,.x-offer-title,.x-stance h2{text-wrap:balance}
/* client and product names in a case title stay on one line ("SO NICE × nice ioi" used to split before the ×) */
.x-caserow h2 .brand{white-space:nowrap}
@media (max-width:640px){.x-ptitle{font-size:clamp(28px,7.8vw,36px)}}

/* ═══════════════ Services page: offer details (2026-10-01) ═══════════════ */
/* which offer this is: one step above a plain label */
.x-offerspec .x-kicker{font-size:clamp(15px,1.15vw,17px)}

/* what stays: full width under the workshop card, two by two.
   Keep it a SIBLING of .x-offerspec, never a child: the card's left column is sticky and would slide over it. */
.x-stays{margin-top:clamp(40px,5vw,72px)}
.x-stays + .x-offerspec{margin-top:clamp(72px,9vw,140px)}
.x-stays-h{font-size:var(--site-t-label);letter-spacing:var(--site-tracking-seclabel);color:var(--muted);font-weight:500;margin-bottom:clamp(18px,2vw,28px)}
.x-stays .x-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,3.6vw,56px) clamp(32px,5vw,80px)}
@media (min-width:901px){.x-stays.is-3 .x-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.x-stays .x-steps h3{margin-top:0}
.x-stays .x-steps p{font-size:1em}

/* spec numbers under an offer title (DS Stats: rule on top, serif numeral, small unit) */
.x-specs{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);margin-top:clamp(24px,2.6vw,36px)}
.x-specs li{border-top:var(--rule) solid var(--ink);padding-top:12px}
.x-specs .num{display:block;font-family:var(--serif);font-weight:var(--site-w-title);color:var(--ink);font-size:clamp(34px,3.4vw,52px);line-height:1.1;letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.x-specs .num small{font-family:var(--sans);font-weight:500;font-size:.32em;letter-spacing:.12em;color:var(--terra-deep);margin-left:.35em}
.x-specs .cap{display:block;margin-top:6px;font-size:var(--site-t-label);color:var(--muted);letter-spacing:.06em;line-height:1.5}

/* scene image under a statement: a real capture on a screen; the desk around it is illustrative and the caption says so */
.x-shot{margin-top:clamp(24px,3vw,40px)}
/* square corners like .x-photo; the hairline keeps the edge visible where the photo is as light as the paper */
.x-shot img{display:block;width:100%;height:auto;outline:var(--hairline-w) solid color-mix(in srgb,var(--ink) 16%,transparent);outline-offset:calc(-1 * var(--hairline-w))}
/* soft-edged photos: the fade is baked into the image (alpha). The image is wider than the column by --bleed on each side,
   so the part you can actually see lines up with the column while the faded surroundings spill into the gutters */
.x-shot.is-fade{margin-top:0;--bleed:6%}
.x-shot.is-fade.is-wide{--bleed:12.4%}
.x-shot.is-fade img{outline:0;width:calc(100% + 2 * var(--bleed));max-width:none;margin-inline:calc(-1 * var(--bleed));pointer-events:none}
.x-shot.is-fade figcaption{margin-top:0}
@media (max-width:900px){.x-shot{max-width:520px}.x-shot.is-fade,.x-shot.is-fade.is-wide{--bleed:5%}}
/* Claude ecosystem picture: official logo in the hub, the three tools we teach on the inner ring, the rest of the family on the outer ring.
   Icons are our own line drawings. Positions are % of a square stage, so it scales with the column. */
.x-eco{margin-top:clamp(24px,3vw,40px);max-width:520px}
/* the picture sits in its own row under the three points, beside the paragraph that explains it */
.x-stance-eco{margin-top:clamp(44px,5.5vw,84px);align-items:center}
.x-stance-eco .x-eco{margin-top:0}
.x-page .x-eco-k{font-size:var(--site-t-label);letter-spacing:var(--site-tracking-seclabel);color:var(--terra-deep);font-weight:500}
.x-eco-stage{position:relative;aspect-ratio:1;margin:46px 0 54px;container-type:inline-size}
.x-eco-ring{position:absolute;left:50%;top:50%;width:70%;aspect-ratio:1;transform:translate(-50%,-50%);border:var(--hairline-w) solid var(--ink);border-radius:50%}
.x-eco-ring.is-out{width:100%;border:var(--hairline-w) dashed var(--muted);opacity:.8}
.x-eco-hub{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--paper-lift);border:var(--hairline-w) solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8%}
.x-eco-hub img{display:block;width:72%;height:auto}
.x-eco-hub small{font-size:10.5px;font-size:clamp(10.5px,2.7cqw,11px);letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.x-eco-node{position:absolute;transform:translate(-50%,-50%);width:20%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:var(--hairline-w) solid var(--ink);color:var(--ink)}
.x-eco-node svg{width:52%;height:52%}
.x-eco-node.is-a{left:50%;top:15%;width:23%;background:var(--terra-deep);border-color:var(--terra-deep);color:var(--paper)}
.x-eco-node.is-b{left:25.25%;top:74.75%}
.x-eco-node.is-c{left:74.75%;top:74.75%}
.x-page .x-eco-lab{position:absolute;z-index:1;font-weight:500;color:var(--ink);font-size:.92em;line-height:1.3;white-space:nowrap}
.x-eco-lab i{font-style:normal;font-size:max(11px,.8em);letter-spacing:.2em;color:var(--terra-deep);margin-left:.7em}
.x-eco-lab.is-a{left:50%;top:-1%;transform:translate(-50%,-100%)}
/* the two lower names sit in the bottom corners, outside the dashed ring; their size follows the stage so they stay clear of the line at every width */
.x-page .x-eco-lab.is-b,.x-page .x-eco-lab.is-c{top:99%}
.x-page .x-eco-lab{font-size:max(12px,min(3.65cqw,.92em))}
.x-eco-lab.is-b{left:0}
.x-eco-lab.is-c{right:0;text-align:right}
/* ring tags: say what each ring is, sitting on the line itself (vertical, right-hand side, a gap in the line behind the text) */
.x-eco-tag{position:absolute;z-index:1;top:50%;transform:translate(-50%,-50%);writing-mode:vertical-rl;background:var(--paper);padding:.6em 0;font-size:clamp(11px,2.8cqw,12px);line-height:1;letter-spacing:.22em;white-space:nowrap}
.x-eco-tag.is-in{left:85%;color:var(--ink);font-weight:500}
.x-eco-tag.is-out{left:100%;color:var(--muted)}
html[lang="en"] .x-eco-tag{letter-spacing:.16em}
/* outer-ring entries: the dot is centred exactly on the dashed ring (-135deg, -45deg, 90deg); its label sits outside the ring so the line never runs through text */
.x-eco-min{position:absolute;width:0;height:0}
.x-eco-min{--d:clamp(11px,3.3cqw,15px)}
.x-eco-min::before{content:"";position:absolute;left:calc(var(--d) / -2);top:calc(var(--d) / -2);width:var(--d);height:var(--d);border-radius:50%;background:var(--muted)}
.x-eco-min em{position:absolute;font-style:normal;font-size:12px;font-size:clamp(10px,2.9cqw,12px);color:var(--muted);letter-spacing:.04em;white-space:nowrap;line-height:1.35}
.x-eco-min.is-1{left:14.645%;top:14.645%}
.x-eco-min.is-1 em{right:0;bottom:13px;text-align:right}
.x-eco-min.is-2{left:85.355%;top:14.645%}
.x-eco-min.is-2 em{left:0;bottom:13px}
.x-eco-min.is-3{left:50%;top:100%}
.x-eco-min.is-3 em{left:0;bottom:13px;transform:translateX(-50%)}  /* above the dot, between the two rings: beside the bottom labels it read as one line with them */
html[lang="en"] .x-eco-lab i{letter-spacing:.14em}
/* outer-ring names: 11px is the largest that clears every neighbour, and only between these widths
   (below 370 the names run off screen; around 901 the two-column layout squeezes the ring). Tested at 14 widths, zh + en. */
@media (min-width:370px) and (max-width:900px){.x-eco-min em{font-size:clamp(11px,2.9cqw,12px)}}
.x-shot figcaption{margin-top:10px;font-size:var(--site-t-label);color:var(--muted);line-height:1.6;letter-spacing:.04em}

/* labelled steps: the words live inside the shape. dashed grey = before / outside class, filled = where it ends up */
.x-flow{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 8px;margin-top:clamp(22px,2.4vw,32px);font-size:.86em;line-height:1.5}
.x-flow li{display:flex;align-items:center;gap:8px}
/* arrow leads the next step, so a wrapped or stacked flow still reads in order */
.x-flow li:not(:first-child)::before{content:"→";color:var(--ink)}
.x-flow.is-old li:not(:first-child)::before{color:var(--muted)}
.x-flow.is-new li:not(:first-child)::before{color:var(--terra-deep)}
.x-chip{display:inline-flex;align-items:baseline;gap:.6em;padding:.42em .9em;border:1px solid var(--ink);border-radius:var(--radius-sm);color:var(--ink);background:var(--paper-lift);white-space:nowrap}
.x-chip b{font-weight:500;white-space:nowrap}
.x-chip.is-old{border-style:dashed;border-color:var(--muted);color:var(--muted);background:transparent}
.x-page .x-chip.is-old b{color:var(--muted)}
.x-chip.is-on{background:var(--terra-deep);border-color:var(--terra-deep);color:var(--paper);font-weight:500}
.x-page .x-chip.is-on b{color:var(--paper)}

/* evidence card: one published result, as a headline, two bars, and a before / after flow.
   Terra here means "after"; it appears more than once per region on purpose (author, 2026-10-01). */
.x-evi{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(40px,5vw,72px);padding:clamp(24px,3vw,44px);background:var(--paper-lift);border:1px solid var(--hairline);border-radius:var(--radius-md)}
.x-evi-k{font-size:var(--site-t-label);letter-spacing:var(--site-tracking-seclabel);color:var(--muted);font-weight:500}
.x-evi-k.is-on{color:var(--terra-deep)}
.x-evi-h{margin-top:10px;font-family:var(--serif);font-weight:var(--site-w-title);color:var(--terra-deep);font-size:clamp(28px,2.8vw,42px);line-height:1.25;letter-spacing:.02em;text-wrap:balance}
.x-evi-h i{font-style:normal;font-family:var(--sans);margin-inline:.2em}
.x-evi-cap{margin-top:8px;max-width:28em;color:var(--text);font-size:.92em;line-height:1.7}
.x-bars{margin:clamp(18px,2vw,26px) 0 0;display:grid;gap:10px;font-size:.86em}
.x-bars > div{display:grid;grid-template-columns:4.4em minmax(0,1fr) 6.5em;align-items:center;gap:14px}
.x-bars dt{color:var(--muted)}
.x-bars dd{margin:0;display:contents}
.x-bars .bar{display:block;height:14px}
.x-bars .bar i{display:block;height:100%;width:var(--w,100%);min-width:3px;background:var(--faint);transform-origin:0 50%}
.x-bars b{font-weight:500;white-space:nowrap}
.x-page .x-bars b{color:var(--muted)}
.x-bars .is-on dt,.x-page .x-bars .is-on b{color:var(--terra-deep)}
.x-bars .is-on .bar i{background:var(--terra-deep)}
.x-evi .x-link{margin-top:clamp(14px,1.6vw,22px)}
.x-evi-flows{display:grid;gap:clamp(18px,2vw,28px)}
.x-evi .x-flow{margin-top:10px}

/* motion (opacity / transform only; visible without JS) */
.js .x-flow[data-rise] li,.js .x-evi[data-rise] .x-flow li{opacity:0;transform:translate3d(0,8px,0);transition:opacity .6s var(--ease-out) calc(.25s + var(--i,0) * .16s),transform .8s var(--ease-out) calc(.25s + var(--i,0) * .16s)}
.js .x-flow[data-rise].is-in li,.js .x-evi[data-rise].is-in .x-flow li{opacity:1;transform:none}
.js .x-evi[data-rise] .bar i{transform:scaleX(0);transition:transform 1.1s var(--ease-out) .45s}
.js .x-evi[data-rise].is-in .bar i{transform:none}
@media (prefers-reduced-motion:reduce){
  .js .x-flow li,.js .x-evi .bar i{transition:none!important;opacity:1!important;transform:none!important}
}
/* short windows: the left column would be taller than the screen while stuck */
@media (max-height:700px){.x-offerspec-pitch{position:static}}
/* English left column gets tall when the two-column layout is at its narrowest; let it scroll with the page there */
@media (min-width:901px) and (max-width:1000px){html[lang="en"] .x-offerspec-pitch{position:static}}
@media (max-width:900px){.x-evi{grid-template-columns:1fr}}
@media (max-width:640px){
  .x-stays .x-steps{grid-template-columns:1fr}
  .x-chip{white-space:normal}
  .x-bars > div{grid-template-columns:3.6em minmax(0,1fr) 5.4em;gap:10px}
}
html[lang="en"] .x-specs .num small,html[lang="en"] .x-specs .cap{letter-spacing:.02em}
html[lang="en"] .x-flow,html[lang="en"] .x-evi-cap,html[lang="en"] .x-bars{letter-spacing:.005em}
html[lang="en"] .x-chip{white-space:normal}
html[lang="en"] .x-evi-h{letter-spacing:0;font-size:clamp(26px,2.5vw,38px)}
html[lang="en"] .x-evi-k{letter-spacing:.14em;text-transform:uppercase}
html[lang="en"] .x-bars > div{grid-template-columns:5.6em minmax(0,1fr) 7.5em}