/* joanai.io site styles (WO-WEB-C13): Direction 1, "Private Bank, Engineering Studio".
   Ported from overhaul-2026-09-29/direction-1/css/site.css (round 2), without the mockup's
   index-page rules. Warm ivory and deep evergreen, serif statements, thin-line isometric
   figures with one solid core. No dark bands (r4, 2026-09-29): Latif's "I don't like the dark color" is read as covering Direction 1's own
   deep evergreen bands too, so every full-width band is ivory, paper or bone; evergreen is kept for headings, rules,
   the solid middle in the drawings and a few small marks. Copper is the action colour; each industry's hue lives only
   in its emblem, chart and opening. Self-hosted fonts (public/fonts/, SIL Open Font License):
   Source Serif 4 and Source Sans 3. Loaded on every page of the one site shell, with
   joan-figures.css (generated label positions and chart sizes). */


@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-roman.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/fonts/source-sans-3.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }

:root {
  --ivory: #f5f1e9;
  --paper: #fbf8f2;
  --bone: #ebe4d6;
  --bone-2: #efe9dd;
  --ink: #151515;
  --ink-2: #2b2925;
  --muted: #47433d;
  --line: #d6ccb9;
  --line-soft: #e4dccd;
  --green: #244b42;
  --green-deep: #1c3b34;
  --green-ink: #10231e;
  --copper: #7a4226;
  --copper-hover: #633418;
  --copper-bright: #b0643a;
  --on-dark: #efe9dc;
  --serif: "Source Serif 4", "Iowan Old Style", Charter, Georgia, serif;
  --sans: "Source Sans 3", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 1240px;
  --gut: 32px;
  --hd-h: 76px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 1px 0 rgba(16, 35, 30, .04), 0 24px 48px -28px rgba(16, 35, 30, .35);
  --h: #244b42; --h2: #1c3b34; --h3: #4f7d70; --hink: #244b42; --tint: #e3ebe6;
}

/* industry hues: marks use --h, text uses --hink (7:1 or better on ivory) */
.ind-cw { --h: #244b42; --h2: #1c3b34; --h3: #4f7d70; --hink: #244b42; --tint: #e3ebe6; }
.ind-retail { --h: #b0643a; --h2: #8a4a27; --h3: #d99a70; --hink: #7a4226; --tint: #f3e6da; }
.ind-mfg { --h: #3f6f86; --h2: #2f5668; --h3: #79a2b5; --hink: #2a5163; --tint: #e0eaef; }
.ind-build { --h: #b38a50; --h2: #8e6c3c; --h3: #d6b684; --hink: #624a20; --tint: #efe6d3; }
.ind-tech { --h: #6f5aa8; --h2: #56448a; --h3: #a08fd0; --hink: #4d3b85; --tint: #e8e3f2; }
.ind-ps { --h: #2f8f95; --h2: #236e73; --h3: #6cbcc0; --hink: #1b5458; --tint: #dcecec; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hd-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 19px/1.6 var(--sans); font-feature-settings: "kern", "liga"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
html.menu-open body { overflow: hidden; }
img, svg { max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; } /* WO-WEB-C13 part 2: a control shown only with script (data-js-only) stays hidden without it */
/* Text links take the darker copper: 7:1 or better on ivory, bone and every industry tint (review of PR #39, r3; the mockup's copper read 6.3 to 6.6:1 off ivory). */
p a, .src a, .source a { display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--copper-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
p a:hover, .src a:hover, .source a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--copper-bright); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: 16px; top: -80px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 6px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); position: relative; }

/* ------------------------------------------------------------ type */
.display { font-family: var(--serif); font-weight: 420; font-size: clamp(40px, 4vw, 58px); line-height: 1.08; letter-spacing: -.022em; font-variation-settings: "opsz" 60; color: var(--ink); text-wrap: balance; }
.display .l1, .display .l2 { display: block; }
/* WO-WEB-C22 (Latif, 2026-10-03): no two-tone headlines. A headline's every word takes the heading's own colour; the
   coloured second halves (.display .l2, h2 .tone, the italic copper .tone of the bands and the close) are gone. */
h2 { font-family: var(--serif); font-weight: 440; font-size: clamp(34px, 3.5vw, 54px); line-height: 1.08; letter-spacing: -.016em; font-variation-settings: "opsz" 48; text-wrap: balance; }
h3 { font-family: var(--serif); font-weight: 500; font-size: 25px; line-height: 1.2; letter-spacing: -.008em; }
.lede { font-size: clamp(20px, 1.6vw, 23px); line-height: 1.5; color: var(--ink-2); max-width: 34em; margin-top: 26px; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 600 16px/1.3 var(--sans); letter-spacing: .01em; color: var(--green); margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 28px; height: 1.5px; background: var(--copper-bright); }
.meta { font: 600 15px/1.45 var(--sans); letter-spacing: .005em; color: #3a3631; }
.sec-lede { font-size: 20px; line-height: 1.55; color: var(--muted); max-width: 30em; }
.lead-line { font-family: var(--serif); font-size: 24px; line-height: 1.35; color: var(--ink); }

/* ------------------------------------------------------------ buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 6px; background: var(--copper); color: #fff; font: 600 17px/1.2 var(--sans); text-decoration: none; border: 0; cursor: pointer; transition: background .2s, transform .2s var(--ease), box-shadow .2s; box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 8px 18px -10px rgba(122, 66, 38, .7); }
.btn:hover { background: var(--copper-hover); transform: translateY(-1px); }
.btn .ar { transition: transform .25s var(--ease); }
.btn:hover .ar, a:hover .ar, a:focus-visible .ar { transform: translateX(4px); }
.ar { display: inline-block; transition: transform .25s var(--ease); }
.ar-down { transform: none; }
a:hover .ar-down { transform: translateY(3px); }
.btn-lg { min-height: 56px; padding: 14px 28px; font-size: 18px; }
.btn-block { width: 100%; }
.tlink, .tlink-fake { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--copper); font-weight: 600; font-size: 18px; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 2px no-repeat; transition: background-size .35s var(--ease); }
.tlink:hover, .tlink:focus-visible, a:hover .tlink-fake, a:focus-visible .tlink-fake { background-size: 100% 2px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 36px; }

/* ------------------------------------------------------------ header */
.hd { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); isolation: isolate; }
.hd::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(245, 241, 233, .94); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); }
.hd-in { display: flex; align-items: center; justify-content: space-between; min-height: var(--hd-h); gap: 24px; position: static; }
.brand { font: 700 22px/1 var(--sans); letter-spacing: .12em; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; min-height: 44px; }
.brand span { color: var(--copper-bright); }
.nav { display: flex; align-items: center; gap: 18px; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; font: 500 17px/1 var(--sans); color: var(--ink); text-decoration: none; border-radius: 6px; cursor: pointer; background: linear-gradient(var(--copper-bright), var(--copper-bright)) 14px calc(100% - 6px) / 0 2px no-repeat; transition: background-size .3s var(--ease), background-color .2s; }
.nav-link:hover, .nav-link:focus-visible { background-size: calc(100% - 28px) 2px; }
.nav-link[aria-current] { background-size: calc(100% - 28px) 2px; }
summary.nav-link { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }
.chev { width: 9px; height: 9px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease); }
details[open] > summary .chev { transform: translateY(2px) rotate(-135deg); }
.mega[open] > .nav-link { background-color: var(--bone); }
.btn-nav { min-height: 46px; padding: 10px 18px; font-size: 16px; }
.nav-mega, .mega { position: static; }

.mega-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(16, 35, 30, .45); }
.mega[open] .mega-panel { animation: drop .28s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mega-grid { display: grid; grid-template-columns: 1.05fr 1.35fr .9fr; gap: 44px; padding-top: 36px; padding-bottom: 28px; }
.mm-h { font: 600 15px/1.3 var(--sans); color: var(--muted); margin-bottom: 14px; }
.mm-feature { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 12px; background: var(--tint); text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s; }
.mm-feature:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.mm-txt { display: flex; flex-direction: column; gap: 4px; }
.mm-feature strong { font: 500 23px/1.2 var(--serif); }
.mm-txt > span { font-size: 16px; line-height: 1.4; color: var(--muted); }
.mm-aud { margin: 12px 0 0 16px; border-left: 1.5px solid var(--line); }
.mm-aud a { display: flex; align-items: center; min-height: 44px; padding: 4px 16px; font-size: 17px; text-decoration: none; color: var(--ink-2); border-radius: 0 8px 8px 0; transition: background .2s, color .2s; }
.mm-aud a:hover { background: var(--bone-2); color: var(--copper); }
.mm-list { display: grid; gap: 4px; }
.mm-ind { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 10px; text-decoration: none; min-height: 64px; transition: background .2s; }
.mm-ind:hover { background: var(--bone-2); }
.mm-ind strong { font: 600 18px/1.25 var(--sans); }
.mm-ind:hover strong { color: var(--copper); }
.mm-em { display: grid; place-items: center; }
.mm-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 14px; background: var(--bone-2); text-decoration: none; border: 1px solid var(--line-soft); transition: transform .25s var(--ease), box-shadow .25s; }
.mm-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.mm-thumb { width: 104px; display: block; margin-bottom: 4px; }
.mm-card strong { font: 500 22px/1.2 var(--serif); }
.mm-card > span:not(.meta):not(.mm-thumb) { font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.mega-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 10px; padding-bottom: 14px; border-top: 1px solid var(--line-soft); }
.mega-foot p { font-size: 17px; color: var(--muted); display: flex; align-items: center; gap: 10px; }

.mnav { display: none; }
.mnav-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 8px; font: 600 17px/1 var(--sans); cursor: pointer; background: var(--paper); }
.burger { display: grid; gap: 5px; width: 20px; }
.burger i { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease); }
.mnav[open] .burger i:first-child { transform: translateY(3.5px) rotate(45deg); }
.mnav[open] .burger i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mnav-panel { position: fixed; top: var(--hd-h); left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); border-top: 1px solid var(--line); padding: 12px 20px 48px; }
.mnav[open] .mnav-panel { animation: drop .25s var(--ease); }
.mn-sum { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font: 600 20px/1 var(--sans); cursor: pointer; border-bottom: 1px solid var(--line); }
.mn-inds { padding: 8px 0 12px; }
.mn-ind { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 4px; text-decoration: none; font-size: 18px; font-weight: 600; }
.mn-ind .mm-em { width: 44px; }
.mn-ind[aria-current] { color: var(--copper); }
.mn-aud { margin: 0 0 8px 62px; border-left: 1.5px solid var(--line); }
.mn-aud a { display: flex; align-items: center; min-height: 44px; padding: 4px 14px; font-size: 17px; text-decoration: none; color: var(--ink-2); }
.mn-all { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px; font-weight: 600; color: var(--copper); text-decoration: none; }
.mn-links { border-top: 1px solid var(--line); margin-bottom: 24px; }
.mn-links a { display: flex; align-items: center; justify-content: space-between; min-height: 58px; font: 600 20px/1 var(--sans); text-decoration: none; border-bottom: 1px solid var(--line-soft); }

@media (max-width: 1100px) {
  .nav { display: none; }
  .mnav { display: block; }
}

/* ------------------------------------------------------------ iso figures */
.iso { display: block; width: 100%; height: auto; overflow: visible; }
.iso path { stroke: #1d1b18; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.n-t { fill: var(--paper); } .n-l { fill: var(--bone); } .n-r { fill: #d9cfbc; }
.h-t { fill: var(--h3); } .h-l { fill: var(--h); } .h-r { fill: var(--h2); }
.d-t { fill: rgba(251, 248, 242, .92); } .d-l { fill: #efe8dc; } .d-r { fill: #e5ddce; }
.iso .d-t, .iso .d-l, .iso .d-r { stroke-dasharray: 4 3; stroke: #3d3832; }
.iso .ln { fill: none; }
.iso .ln-soft { stroke-opacity: .5; }
.iso .grid { fill: none; stroke: #d2c6af; stroke-width: 1; }
.iso .conn { fill: none; stroke: var(--copper-bright); stroke-width: 2; }
.iso .ring { fill: none; stroke: var(--h); stroke-dasharray: 5 4; stroke-width: 1.4; }
.iso .cell { fill: transparent; stroke: rgba(255, 255, 255, .35); transition: fill .3s; }
.emblem-xs { width: 40px; } .emblem-sm { width: 56px; } .emblem-md { width: 112px; } .emblem-lg { width: 230px; }
.emblem-hero { width: min(360px, 100%); margin: 0 auto; }

.fig-wrap { position: relative; margin: 0; }
.fig-stage { position: relative; }
.flabel { position: absolute; transform: translate(-50%, -50%); font: 600 15px/1.2 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; white-space: nowrap; box-shadow: 0 6px 14px -10px rgba(16, 35, 30, .5); pointer-events: none; }
.flabel.tool.to-up { transform: translate(-50%, -165%); }
.flabel.tool.to-left { transform: translate(-112%, -50%); }
.flabel.tool.to-right { transform: translate(12%, -50%); }
.flabel.tool.to-down { transform: translate(-50%, 70%); }
.flabel.core-l, .flabel.on-hue { background: var(--green-ink); color: var(--on-dark); border-color: var(--green-ink); }
.ind-retail .flabel.core-l { background: #5c301b; border-color: #5c301b; }
.flabel.core-l { transform: translate(-50%, 45%); }
.flabel.top-l { transform: translate(14px, -50%); }
.figcap { margin-top: 18px; font-size: 16px; line-height: 1.5; color: var(--muted); }

/* ------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; padding: 84px 0 0; background: var(--ivory); }
.rules { position: absolute; inset: 0; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: repeat(4, 1fr); pointer-events: none; }
.rules i { border-left: 1px solid var(--line-soft); }
.rules i:last-child { border-right: 1px solid var(--line-soft); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-bottom: 72px; }
.hero-copy { position: relative; }
.hero-fig { max-width: 660px; justify-self: end; width: 100%; margin-right: -12px; }
.proofline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 26px; padding-bottom: 26px; border-top: 1px solid var(--line); }
.proofline ul { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.proofline li { font: 500 20px/1.3 var(--serif); color: var(--ink); display: inline-flex; align-items: center; gap: 28px; }
.proofline li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--copper-bright); margin-left: -16px; margin-right: -14px; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 16px; color: var(--muted); margin-bottom: 26px; }
.crumbs a { min-width: 44px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--copper); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* industry hero */
.hero-ind { background: linear-gradient(180deg, var(--tint) 0%, var(--ivory) 100%); padding-top: 56px; }
.hero-ind .rules i { border-color: rgba(122, 66, 38, .1); }
.ind-eyebrow { color: var(--hink); }
.ind-eyebrow::before { display: none; }
.swatch { width: 14px; height: 14px; background: var(--h); transform: rotate(45deg); border-radius: 2px; }
.hero-ind .display { font-size: clamp(38px, 3.7vw, 54px); }
.ind-visual { position: relative; padding: 0 0 36px 36px; }
.ind-plinth { position: relative; background: radial-gradient(120% 90% at 60% 40%, var(--paper) 0%, var(--tint) 70%); border: 1px solid rgba(122, 66, 38, .16); border-radius: 22px; padding: 56px 48px 64px; }
.ind-plinth::after { content: ""; position: absolute; inset: 14px; border-radius: 14px; border: 1px dashed rgba(122, 66, 38, .2); pointer-events: none; }
.hero-stat { position: absolute; left: 0; bottom: 0; width: min(310px, 80%); background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px 18px; box-shadow: var(--shadow); }
.hs-n { font: 450 60px/1 var(--serif); color: var(--hink); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.hs-t { font-size: 17px; line-height: 1.45; margin-top: 10px; color: var(--ink-2); }
.src { font-size: 15px; line-height: 1.45; color: #3a3631; margin-top: 10px; }

/* hub hero */
.hero-hub .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.atlas-fig { width: 100%; }
.atlas .atlas-a { cursor: pointer; }
.atlas .lift { transition: transform .35s var(--ease); }
.atlas .atlas-a:hover .lift, .atlas .atlas-a:focus-visible .lift { transform: translateY(-8px); }
.atlas .atlas-a:focus-visible { outline: none; }
.atlas .atlas-a:focus-visible .lift path { stroke: var(--copper); stroke-width: 2; }
.atlas-fig .flabel { transform: translate(-50%, 18%); font-size: 15px; }

/* ------------------------------------------------------------ statement */
.statement { padding: 120px 0 112px; background: var(--ivory); border-top: 1px solid var(--line); }
.state { font: 400 clamp(30px, 3.7vw, 54px)/1.2 var(--serif); letter-spacing: -.012em; max-width: 1060px; color: var(--ink); font-variation-settings: "opsz" 48; }
.state em { color: var(--green); font-style: italic; }

/* ------------------------------------------------------------ sections */
.sec { padding: 112px 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 20px 56px; align-items: end; margin-bottom: 56px; }
.sec-head .sec-lede { justify-self: start; }

.otm { background: var(--paper); border-top: 1px solid var(--line); }
.otm-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.seg { position: relative; display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); gap: 2px; flex-wrap: wrap; }
.seg button { min-height: 44px; padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; font-weight: 600; font-size: 16px; cursor: pointer; color: var(--ink-2); transition: background .25s, color .25s; }
.seg button:hover { background: var(--bone-2); }
.seg button[aria-pressed="true"] { background: var(--green); color: #fff; }
.ind-retail .seg button[aria-pressed="true"] { background: var(--copper); }
.otm-copy .lead-line { margin-bottom: 18px; }
.owned li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 16px 12px 16px 0; border-top: 1px solid var(--line); font: 450 22px/1.3 var(--serif); border-radius: 0; }
.owned li:last-child { border-bottom: 1px solid var(--line); }
.owned li b { font-weight: 600; color: var(--green-deep); } /* WO-WEB-C18 review round 1: each part's label, for scanning */
.owned .n { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--green); color: var(--green); display: grid; place-items: center; font: 700 15px/1 var(--sans); }
.otm-copy > p:not(.lead-line) { margin-top: 24px; font-size: 19px; color: var(--ink-2); }
.partners { font-size: 17px; color: var(--muted); padding-top: 18px; border-top: 1px solid var(--line-soft); }

/* what we do */
.wwd { background: var(--ivory); border-top: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: s; position: relative; }
.step { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 28px 30px 32px; transition: transform .3s var(--ease), box-shadow .3s; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step-fig { height: 170px; display: grid; place-items: center; margin-bottom: 18px; background: var(--bone-2); border-radius: 12px; }
.step-fig .iso { width: auto; height: 130px; }
.step-n { display: flex; align-items: center; gap: 10px; font: 700 16px/1 var(--sans); color: var(--green); margin-bottom: 12px; }
.step-n .dot { counter-increment: s; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 13.5px; }
.step-n .dot::before { content: counter(s); font-size: 14px; }
.step h3 { margin-bottom: 10px; }
.step p:not(.step-n) { font-size: 18px; color: var(--ink-2); }

/* industries (home) */
.inds { background: var(--bone-2); border-top: 1px solid var(--line); }
.cw-feature { display: grid; grid-template-columns: 290px 1fr; gap: 40px; align-items: center; padding: 34px 40px; background: var(--tint); border: 1px solid #c8d6ce; border-radius: 20px; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; }
.cw-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.cw-feature:hover .iso { transform: translateY(-4px); }
.cw-feature .iso, .icard-ind .iso { transition: transform .35s var(--ease); }
.cwf-em { display: grid; place-items: center; }
.cwf-body { display: flex; flex-direction: column; gap: 8px; }
.cwf-body strong { font: 450 40px/1.1 var(--serif); letter-spacing: -.015em; }
.ic-line { font-size: 19px; line-height: 1.45; color: var(--ink-2); }
.ic-stat { font-size: 18px; line-height: 1.45; color: var(--ink-2); margin-top: 6px; max-width: 36em; }
.ic-stat b { font: 500 26px/1 var(--serif); color: var(--hink); margin-right: 4px; }
.cwf-aud { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.cwf-aud a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); text-decoration: none; font-size: 17px; font-weight: 600; transition: border-color .2s, color .2s; }
.cwf-aud a:hover { border-color: var(--copper); color: var(--copper); }
.ind-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.icard-ind { height: 100%; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.icard-ind:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--h); }
.icard-ind:hover .iso { transform: translateY(-5px); }
.ic-em { display: grid; place-items: center; height: 168px; background: var(--tint); border-bottom: 1px solid var(--line-soft); }
.ic-body { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px 22px; flex: 1; }
.ic-body strong { font: 500 26px/1.15 var(--serif); letter-spacing: -.01em; }
.ic-body .meta { margin-top: auto; padding-top: 8px; }
.ic-body .tlink-fake { align-self: flex-start; }
.icard-unsure { background: transparent; border-style: dashed; border-color: #b9ad97; justify-content: center; }
.icard-unsure .ic-body { justify-content: center; }
.icard-unsure:hover { border-color: var(--copper); }

/* feature bands: light (WO-WEB-C13 r4). Latif, 2026-09-29: "I don't like the dark color". The bands that were deep
   evergreen are bone with an evergreen rule on top, evergreen headings and copper accents. */
.band-feature, .close { position: relative; background: var(--bone); border-top: 3px solid var(--green); overflow: hidden; }
.dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(36, 75, 66, .16) 1px, transparent 1.5px); background-size: 18px 18px; mask-image: radial-gradient(90% 80% at 85% 20%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(90% 80% at 85% 20%, #000 0%, transparent 70%); pointer-events: none; }
.band-feature { padding: 112px 0; }
.band-feature h2, .close h2 { color: var(--green-deep); }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; }
.case { border-top: 1px solid var(--line); padding-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.case-name { font: 450 clamp(30px, 2.6vw, 40px)/1.1 var(--serif); color: var(--green-deep); letter-spacing: -.015em; }
.case p:not(.meta) { font-size: 20px; line-height: 1.55; color: var(--ink-2); max-width: 30em; }
.case .tlink { align-self: flex-start; }
.band-feature .platforms { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }

/* insights */
.insights { background: var(--paper); border-top: 1px solid var(--line); }
.icards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.icard { height: 100%; display: flex; flex-direction: column; text-decoration: none; background: var(--ivory); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.icard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.icard-cover { display: grid; place-items: center; height: 210px; background: linear-gradient(160deg, #e3ebe6, #d4e1da); border-bottom: 1px solid var(--line-soft); }
.icard-cover .iso { width: auto; height: 150px; transition: transform .4s var(--ease); }
.icard:hover .icard-cover .iso { transform: translateY(-5px) scale(1.02); }
.icard-body { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 22px; flex: 1; }
.icard-body strong { font: 500 26px/1.18 var(--serif); letter-spacing: -.01em; }
.icard-dek { font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.icard-body .tlink-fake { margin-top: auto; align-self: flex-start; }

/* close */
.close { padding: 104px 0; }
.close-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.close h2 { font-size: clamp(38px, 4vw, 60px); }
.close-body p { font-size: 20px; line-height: 1.55; color: var(--ink-2); margin-bottom: 28px; max-width: 30em; }

/* footer */
.ft { background: var(--ivory); border-top: 1px solid var(--line); padding: 72px 0 28px; }
.ft-grid { display: grid; grid-template-columns: 1.4fr 1.1fr 1fr .8fr; gap: 40px; }
.brand-lg { font-size: 26px; }
.ft-brand p { font-size: 17px; color: var(--muted); margin: 14px 0 22px; max-width: 22em; }
.ft-h { font: 700 16px/1.3 var(--sans); margin-bottom: 10px; }
.ft-col a { min-width: 44px; display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; color: var(--ink-2); text-decoration: none; }
.ft-col a:hover { color: var(--copper); text-decoration: underline; text-underline-offset: 3px; }
.ft-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 16px; color: var(--muted); }
.ft-base ul { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.ft-base a { min-width: 44px; justify-content: center; display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }

/* ------------------------------------------------------------ hub tiles */
.hub { background: var(--bone-2); border-top: 1px solid var(--line); padding-top: 88px; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tile { display: flex; flex-direction: column; gap: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 30px 32px 26px; position: relative; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; scroll-margin-top: calc(var(--hd-h) + 20px); }
.tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--h); }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--h); }
.tile:target { border-color: var(--h); box-shadow: 0 0 0 3px var(--h); }
.tile-wide { grid-column: 1 / -1; }
.tile-unsure { background: transparent; border-style: dashed; border-color: #b9ad97; justify-content: center; }
.tile-unsure::before { display: none; }
.tile-top { display: flex; gap: 22px; align-items: center; }
.tile-em { flex: 0 0 auto; display: grid; place-items: center; width: 132px; height: 120px; background: var(--tint); border-radius: 14px; }
.tile-em .iso { width: 96px; transition: transform .35s var(--ease); }
.tile:hover .tile-em .iso { transform: translateY(-5px); }
.tile-h { font-size: clamp(28px, 2.4vw, 34px); }
.tile-h a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.tile-h a:hover { color: var(--copper); }
.tile-head .ic-line { margin-top: 6px; }
.tile-data { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center; padding: 18px; background: var(--ivory); border-radius: 14px; border: 1px solid var(--line-soft); }
.tile-chart { background: var(--paper); border-radius: 10px; padding: 12px; }
.tile-stat { font-size: 18px; line-height: 1.45; color: var(--ink-2); }
.tile-stat b { display: block; font: 450 40px/1.05 var(--serif); color: var(--hink); letter-spacing: -.02em; margin-bottom: 6px; }
.tile-stat .src { display: block; }
.tile-cta { align-self: flex-start; margin-top: auto; }
.tile-wide .tile-data { grid-template-columns: 150px minmax(0, 1fr); max-width: 760px; }
.tile-aud { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tile-aud a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; background: var(--ivory); min-height: 64px; transition: border-color .2s, transform .25s var(--ease); }
.tile-aud a:hover { border-color: var(--copper); transform: translateY(-2px); }
.tile-aud b { font-size: 18px; }
.tile-aud span:not(.ar) { grid-column: 1; font-size: 16px; color: var(--muted); line-height: 1.4; }
.tile-aud .ar { grid-column: 2; grid-row: 1 / span 2; color: var(--copper); }
.hub-note { margin-top: 28px; font-size: 16px; color: var(--muted); }
.mini { display: block; width: 100%; height: auto; }
.mini .m-on { fill: var(--h); }
.mini .m-off { fill: #ddd4c3; }
.mini .m-axis { stroke: #b5aa96; stroke-width: 1.5; }
.mini .m-line { fill: none; stroke: var(--h); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.mini .m-dash { stroke: var(--h2); stroke-dasharray: 7 6; stroke-width: 3; }
.mini .hatch-bg { fill: var(--tint); }
.mini .hatch-ln { stroke: var(--h); stroke-width: 2.5; }
.mini .m-hatch { stroke: var(--h); stroke-width: 1.5; }
.same-idea { padding: 104px 0; }
.same-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 64px; align-items: center; }
.same-grid .sec-lede { margin: 20px 0 16px; }
.same-fig { background: var(--paper); border-radius: 20px; padding: 44px; }

/* ------------------------------------------------------------ industry page */
.probs { background: var(--ivory); }
.probs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.prob { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px 30px; transition: transform .3s var(--ease), box-shadow .3s; }
.prob:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ico { width: 40px; height: 40px; fill: none; stroke: var(--hink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prob .ico { margin-bottom: 18px; color: var(--hink); }
.prob h3 { font-size: 23px; margin-bottom: 8px; }
.prob p { font-size: 18px; color: var(--ink-2); }
.p-ind .ico { stroke: var(--hink); }

.insight { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.takeaway { font: 450 26px/1.35 var(--serif); color: var(--ink); }
.ins-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.ins-chart { background: var(--ivory); border: 1px solid var(--line); border-radius: 20px; padding: 36px; }
.grid100 { display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto; } /* WO-WEB-C19: wider, as the viewBox gained a left margin for "+$2.40" */
.grid100 .sq { fill: #e3dac9; }
.grid100 .rq { fill: var(--h); }
.grid100 .hatch-bg { fill: #efe8db; }
.grid100 .hatch-ln { stroke: #2b2925; stroke-width: 2.2; }
.grid100 .sh { stroke: #2b2925; stroke-width: 1; }
.grid100 .ret, .grid100 .shrink { transition: opacity .5s var(--ease); }
.grid100 .ret-online { opacity: 0; }
[data-view="online"] .grid100 .ret-all { opacity: 0; }
[data-view="online"] .grid100 .ret-online { opacity: 1; }
.v-online { display: none; }
[data-view="online"] .v-all { display: none; }
[data-view="online"] .v-online { display: inline; }
.big-n { font: 450 clamp(64px, 6vw, 88px)/1 var(--serif); color: var(--hink); letter-spacing: -.025em; margin-top: 30px; font-variant-numeric: lining-nums tabular-nums; }
.big-t { font-size: 20px; line-height: 1.5; margin-top: 12px; color: var(--ink-2); max-width: 28em; }
.legend { margin-top: 26px; display: grid; gap: 14px; }
.legend li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.key { width: 22px; height: 22px; border-radius: 4px; margin-top: 2px; }
.key-ret { background: var(--h); }
.key-sh { background: repeating-linear-gradient(45deg, #2b2925 0 2px, #efe8db 2px 6px); border: 1px solid #2b2925; }
.key-base { background: #e3dac9; }
.fraud-box { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.fraud { width: 100%; max-width: 330px; height: auto; display: block; margin-bottom: 12px; }
.fraud .fr rect, .fraud .fr path { fill: none; stroke: #5d574e; stroke-width: 1.5; stroke-linecap: round; }
.fraud .fr-on rect { fill: var(--h2); stroke: var(--h2); }
.fraud .fr-on path { stroke: #fff; }
.fraud-box p { font-size: 18px; color: var(--ink-2); }
.source { margin-top: 32px; font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 64em; }
.textver { margin-top: 14px; }
.textver summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 17px; color: var(--copper); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.textver p { font-size: 17px; color: var(--ink-2); max-width: 60em; padding: 8px 0 4px; }

.numbers { background: var(--ivory); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.stat { border-top: 3px solid var(--h); padding-top: 22px; }
.stat-n { font: 450 clamp(36px, 3vw, 46px)/1.05 var(--serif); color: var(--hink); letter-spacing: -.02em; margin-bottom: 12px; font-variant-numeric: lining-nums; }
.stat p:not(.stat-n):not(.src) { font-size: 18px; color: var(--ink-2); }

.vc { background: var(--bone-2); border-top: 1px solid var(--line); }
.vc-tabs { display: none; }
.js .vc-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; position: relative; margin-bottom: 20px; }
.js .vc-tabs::before { content: ""; position: absolute; left: 24px; right: 24px; top: 24px; border-top: 1.5px dashed #b5aa96; }
.vc-tabs button { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 4px 10px; align-items: center; text-align: left; padding: 0 10px 16px 0; min-height: 44px; border: 0; background: transparent; cursor: pointer; border-bottom: 3px solid transparent; transition: border-color .25s; }
.vc-tabs button:hover .vc-name { color: var(--copper); }
.vc-cube { grid-row: 1 / span 2; width: 48px; height: 48px; display: grid; place-items: center; background: var(--bone-2); border-radius: 10px; }
.vc-cube svg { width: 38px; height: 38px; transition: transform .3s var(--ease); }
.vc-cube path { stroke: #2b2925; stroke-width: 1.2; stroke-linejoin: round; }
.cube-t { fill: var(--paper); } .cube-l { fill: var(--bone); } .cube-r { fill: #d9cfbc; }
.vc-tabs button[aria-selected="true"] { border-bottom-color: var(--h); }
.vc-tabs button[aria-selected="true"] .cube-t { fill: var(--h3); }
.vc-tabs button[aria-selected="true"] .cube-l { fill: var(--h); }
.vc-tabs button[aria-selected="true"] .cube-r { fill: var(--h2); }
.vc-tabs button[aria-selected="true"] .vc-cube svg, .vc-tabs button:hover .vc-cube svg { transform: translateY(-3px); }
.vc-num { font: 700 14px/1.2 var(--sans); color: #3a3631; }
.vc-name { font: 600 17px/1.25 var(--sans); color: var(--ink); }
.vc-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.js .vc-panels { display: block; }
.vc-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 32px 36px 34px; }
.js .vc-panel { animation: fadein .35s var(--ease); }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vc-panel h3 { font-size: 30px; margin-bottom: 22px; display: flex; align-items: baseline; gap: 14px; }
.vc-panel h3 .vc-num { font-size: 16px; color: var(--hink); }
.vc-panel dl { display: grid; grid-template-columns: 1fr; gap: 16px; }
.js .vc-panel dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.vc-panel dt { font: 700 15px/1.3 var(--sans); color: var(--hink); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.vc-panel dt::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--h); }
.vc-slip dt::before { background: transparent; border: 1.5px dashed #5d574e; }
.vc-you dt::before { background: var(--green); border-radius: 50%; }
.vc-you dt { color: var(--green); }
.vc-panel dd { font-size: 19px; line-height: 1.5; color: var(--ink-2); }

.uses { background: var(--ivory); }
.uses-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.use { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 30px 30px 34px; transition: transform .3s var(--ease), box-shadow .3s; }
.use:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.use-ico { width: 64px; height: 64px; display: grid; place-items: center; background: var(--tint); border-radius: 50%; margin-bottom: 20px; }
.use-ico .ico { width: 34px; height: 34px; }
.use h3 { font-size: 25px; margin-bottom: 10px; }
.use p { font-size: 18px; color: var(--ink-2); }

.changes { background: var(--paper); border-top: 1px solid var(--line); }
.changes-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.one-fig { background: var(--tint); border-radius: 22px; padding: 36px 30px 26px; border: 1px solid rgba(122, 66, 38, .16); }
.checks { margin-top: 28px; }
.checks li { display: grid; grid-template-columns: 32px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line); font: 450 22px/1.35 var(--serif); }
.checks li:last-child { border-bottom: 1px solid var(--line); }
.checks .ico { width: 28px; height: 28px; stroke: var(--h); stroke-width: 2.6; margin-top: 2px; }

.others { background: var(--ivory); padding: 72px 0 88px; }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 48px; }
.pn-a { display: flex; flex-direction: column; gap: 6px; padding: 22px 26px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; background: var(--paper); transition: border-color .2s, transform .25s var(--ease); }
.pn-a:hover { border-color: var(--copper); transform: translateY(-2px); }
.pn-a strong { font: 500 24px/1.2 var(--serif); }
.pn-next { text-align: right; }
.others-h { font-size: 30px; margin-bottom: 20px; }
.orows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.orow { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); text-decoration: none; font-weight: 600; font-size: 18px; transition: border-color .2s, transform .25s var(--ease); }
.orow:hover { border-color: var(--h); transform: translateY(-2px); }
.orow .mm-em { width: 60px; height: 50px; flex: 0 0 auto; }
.orow .iso { width: auto; max-width: 60px; max-height: 50px; }
.orow-all { color: var(--copper); justify-content: center; border-style: dashed; }

/* ------------------------------------------------------------ motion (only when JS runs and motion is allowed) */
.js.motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js.motion [data-reveal].in { opacity: 1; transform: none; }
.js.motion .state .w { opacity: .22; transition: opacity .35s ease; }
.js.motion .state .w.on { opacity: 1; }

.js.motion [data-fig] .tile, .js.motion [data-fig] .core, .js.motion [data-fig] .top,
.js.motion [data-fig] .flabel, .js.motion [data-fig] .slab, .js.motion [data-fig] .plate { transition: opacity .8s var(--ease), transform .9s var(--ease); }
.js.motion [data-fig] .conn { stroke-dasharray: 1; transition: stroke-dashoffset .8s var(--ease) .55s; }
.js.motion [data-fig]:not(.in) .conn { stroke-dashoffset: 1; }
.js.motion [data-fig]:not(.in) .tile { opacity: 0; }
.js.motion [data-fig]:not(.in) .t0 { transform: translate(-34px, -30px); }
.js.motion [data-fig]:not(.in) .t1 { transform: translate(8px, -44px); }
.js.motion [data-fig]:not(.in) .t2 { transform: translate(40px, -24px); }
.js.motion [data-fig]:not(.in) .t3 { transform: translate(-44px, 20px); }
.js.motion [data-fig]:not(.in) .t4 { transform: translate(40px, 26px); }
.js.motion [data-fig] .t1 { transition-delay: .08s; } .js.motion [data-fig] .t2 { transition-delay: .16s; }
.js.motion [data-fig] .t3 { transition-delay: .24s; } .js.motion [data-fig] .t4 { transition-delay: .32s; }
.js.motion [data-fig]:not(.in) .core, .js.motion [data-fig]:not(.in) .slab { opacity: 0; transform: translateY(22px); }
.js.motion [data-fig] .core, .js.motion [data-fig] .slab { transition-delay: .9s; }
.js.motion [data-fig]:not(.in) .top, .js.motion [data-fig]:not(.in) .plate { opacity: 0; transform: translateY(-18px); }
.js.motion [data-fig] .top, .js.motion [data-fig] .plate { transition-delay: 1.15s; }
.js.motion [data-fig]:not(.in) .flabel { opacity: 0; }
.js.motion [data-fig] .flabel { transition-delay: 1.35s; }
.js.motion [data-fig] .ind-plinth .iso { transition: transform 1s var(--ease), opacity .8s; }
.js.motion [data-fig]:not(.in) .ind-plinth .iso { opacity: 0; transform: translateY(24px); }
.js.motion [data-fig] .hero-stat { transition: opacity .7s var(--ease) .6s, transform .8s var(--ease) .6s; }
.js.motion [data-fig]:not(.in) .hero-stat { opacity: 0; transform: translateY(16px); }
.js.motion .atlas .lift { transition: transform .35s var(--ease), opacity .7s; }
.js.motion [data-fig]:not(.in) .atlas .lift { opacity: 0; transform: translateY(-16px); }
.js.motion [data-grid100] .sq { transition: opacity .35s ease, transform .35s var(--ease); transform-box: fill-box; transform-origin: center; }
.js.motion [data-grid100]:not(.in) .sq { opacity: 0; transform: scale(.5); }
.js.motion [data-grid100]:not(.in) .ret-all, .js.motion [data-grid100]:not(.in) .shrink { opacity: 0; }
.js.motion [data-grid100].in .ret-all, .js.motion [data-grid100].in .shrink { transition-delay: 1.05s; }
.js.motion [data-grid100].in[data-view] .ret { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: 0s !important; animation-delay: 0s !important; }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .hero-grid, .hero-hub .hero-grid { grid-template-columns: 1fr; }
  .hero-fig { justify-self: start; max-width: 620px; }
  .mega-grid { grid-template-columns: 1fr 1fr; }
  .probs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .js .vc-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .js .vc-tabs::before { display: none; }
  .ins-grid, .changes-grid, .otm-grid, .same-grid { grid-template-columns: 1fr; gap: 44px; }
  .ft-grid { grid-template-columns: 1fr 1fr; }
  .ind-visual { max-width: 620px; }
}
@media (max-width: 860px) {
  :root { --gut: 20px; --hd-h: 68px; }
  body { font-size: 18px; }
  .sec, .band-feature { padding: 76px 0; }
  .statement { padding: 76px 0; }
  .sec-head { grid-template-columns: 1fr; margin-bottom: 36px; }
  .steps, .ind-cards, .icards, .uses-grid, .work-grid, .tiles, .orows { grid-template-columns: 1fr; }
  .cw-feature { grid-template-columns: 1fr; padding: 28px 24px; gap: 20px; }
  .cwf-em .iso { width: 190px; }
  .cwf-body strong { font-size: 34px; }
  .close-in { grid-template-columns: 1fr; }
  .rules { grid-template-columns: repeat(2, 1fr); }
  .rules i:nth-child(n+3) { display: none; }
  .rules i:nth-child(2) { border-right: 1px solid var(--line-soft); }
  .hero { padding-top: 48px; }
  .hero-grid { gap: 40px; padding-bottom: 48px; }
  .proofline li { font-size: 18px; }
  .tile { padding: 26px 22px 22px; }
  .tile-top { flex-direction: column; align-items: flex-start; }
  .tile-data { grid-template-columns: 110px 1fr; gap: 16px; padding: 14px; }
  .tile-wide .tile-data { grid-template-columns: 110px 1fr; }
  .tile-stat b { font-size: 32px; }
  .js .vc-panel dl { grid-template-columns: 1fr; gap: 18px; }
  .vc-panels { grid-template-columns: 1fr; }
  .vc-panel { padding: 26px 22px 28px; }
  .js .vc-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ins-chart { padding: 18px; }
  .pn { grid-template-columns: 1fr; }
  .pn-next { text-align: left; }
  .mega-grid { grid-template-columns: 1fr; }
  .ind-visual { padding: 0; }
  .hero-stat { position: relative; width: auto; margin-top: -40px; margin-left: 16px; margin-right: 16px; }
  .ind-plinth { padding: 36px 28px 60px; }
  .same-fig { padding: 28px; }
  .ft-grid { grid-template-columns: 1fr; gap: 28px; }
  .icard-cover { height: 180px; }
  .one-fig { padding: 26px 14px 20px; }
}
@media (max-width: 640px) {
  .hero-fig .flabel.tool, .one-fig .flabel.tool, .hero-fig .flabel.top-l, .one-fig .flabel.top-l { display: none; }
  .probs-grid, .stats { grid-template-columns: 1fr; }
  .proofline ul { flex-direction: column; gap: 6px; }
  .proofline li + li::before { display: none; }
  .flabel { font-size: 14px; padding: 4px 8px; }
  .atlas-fig .flabel { display: none; }
  .lead-line { font-size: 21px; }
  .owned li, .checks li { font-size: 20px; }
  .display { font-size: clamp(32px, 8.6vw, 40px); }
  .hero-ind .display { font-size: clamp(30px, 8.2vw, 38px); }
  .big-n { margin-top: 20px; }
  .step-fig { height: 150px; }
  .step-fig .iso { height: 112px; }
  .mega-foot { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================================
   Round 2 (2026-09-29): signature story, real industry pages, nav pages, full-size charts.
   ===================================================================================== */

/* ------------------------------------------------------------ shared */
.sec-side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.stretch { color: inherit; text-decoration: none; }
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.src a, .icard-ind .src a, .ccard .src a, .wcard a:not(.stretch) { position: relative; z-index: 2; }
.btn-ghost { background: transparent; color: var(--copper); border: 1.5px solid var(--copper); box-shadow: none; }
.btn-ghost:hover { background: var(--copper); color: #fff; }
.iso .handle { fill: none; stroke-width: 2.2; }
.iso .tick { fill: none; stroke: #fff; stroke-width: 2.6; }
.iso .ring-h { fill: none; stroke: var(--h); stroke-width: 1.6; stroke-dasharray: 5 4; }
.iso .wheel { stroke-width: 3.2; }
.st-em { width: auto; height: 64px; }
.st-em-lg { height: 108px; }

.platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: 17px; color: var(--ink-2); }
.platforms p { margin: 0; }
.badge { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-weight: 700; font-size: 16px; color: var(--ink); }
.badge .ico { width: 24px; height: 24px; stroke: var(--green); }

/* legend shown only on phones, where in-figure labels would crowd */
.fig-legend { display: none; margin-top: 14px; gap: 8px; }
.fig-legend li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.fig-legend i { width: 22px; height: 18px; margin-top: 2px; border-radius: 3px; }
.lg-dash { border: 1.5px dashed #3d3832; background: #f4efe6; }
.lg-core { background: var(--h); border: 1px solid #1d1b18; }
.lg-top { background: var(--paper); border: 1px solid #1d1b18; box-shadow: inset 0 -5px 0 var(--bone); }

/* ------------------------------------------------------------ home hero: larger, deeper figure */
.hero-home .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; padding-bottom: 56px; }
.hero-home .hero-fig { max-width: 840px; margin-right: -72px; }
.hero-glow { position: absolute; right: -8%; top: 4%; width: 64%; height: 88%; background: radial-gradient(closest-side, rgba(36, 75, 66, .16), rgba(36, 75, 66, .05) 60%, transparent); pointer-events: none; }
.hero-fig .core, .one-fig .core { filter: drop-shadow(0 22px 20px rgba(16, 35, 30, .26)); }
.hero-fig .flabel { font-size: 16px; }
.proof { display: grid; gap: 12px; padding-top: 26px; padding-bottom: 30px; border-top: 1px solid var(--line); }
.proof-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.proof-l { font: 700 15px/1.2 var(--sans); color: #3a3631; min-width: 92px; }
.proof-names { display: flex; flex-wrap: wrap; gap: 6px 40px; }
.proof-names li { font: 500 23px/1.3 var(--serif); color: var(--ink); }

/* people with heads (FINAL-SPEC 5.1): the body takes the bone fill, the head paper with an ink ring; .iso path strokes the body */
.iso .pb { fill: var(--bone); }
.iso .ph { fill: var(--paper); stroke: #1d1b18; stroke-width: 1.3; vector-effect: non-scaling-stroke; }

/* ------------------------------------------------------------ home industries: rich cards with labelled charts */
.ind-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 0; }
.icard-ind { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.icard-ind::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--h); z-index: 1; }
.icard-ind:hover, .icard-ind:focus-within { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--h); }
.icard-ind:focus-within { outline: 3px solid var(--copper-bright); outline-offset: 3px; }
.icard-ind .stretch:focus-visible { outline: none; }
.ic-chart { display: flex; align-items: center; min-height: 206px; padding: 26px 24px 20px; background: var(--tint); border-bottom: 1px solid var(--line-soft); }
.icard-ind .ic-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 20px; flex: 1; }
.ic-title { display: flex; align-items: center; gap: 12px; }
.ic-title .ic-em { display: grid; place-items: center; width: 46px; height: auto; background: none; border: 0; flex: none; }
.ic-title h3 { font: 500 25px/1.15 var(--serif); letter-spacing: -.01em; }
.icard-ind:hover .ic-title h3 { color: var(--copper); }
.icard-ind .ic-stat { font-size: 17px; }
.icard-ind .ic-stat b { font-size: 24px; }
.icard-ind .src { margin-top: 0; }
.icard-ind .tlink-fake { margin-top: auto; }
.cwf-aud-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 26px; }
.cwf-aud-row > p { font-weight: 700; font-size: 17px; }
.cwf-aud { margin: 0; }

/* card charts */
.cc { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 8px 18px; align-items: center; width: 100%; }
.cc .mini { width: 124px; }
.cc-h { grid-column: 1 / -1; font: 700 15px/1.35 var(--sans); color: var(--ink); }
.cc-key { display: grid; gap: 8px; }
.cc-key li { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.35; color: var(--ink-2); }
.cc-key b { color: var(--hink); }
.cc-key i, .tb-key i { flex: none; width: 14px; height: 14px; border-radius: 3px; }
.k-on, .k-solid { background: var(--h); }
.k-off { background: #d6ccb9; }
.k-hatch { background: repeating-linear-gradient(45deg, var(--h) 0 2px, var(--tint) 2px 5px); border: 1.5px solid var(--h); }
.cc-key .k-line, .lc-key .k-line { width: 24px; height: 3px; border-radius: 2px; background: var(--h); }
.cc-key .k-dash, .lc-key .k-dash { width: 24px; height: 0; border-radius: 0; border-top: 3px dashed var(--h2); background: none; }
.cc-note { grid-column: 1 / -1; font-size: 14px; color: #3a3631; }
.cc-mfg, .cc-build, .cc-tech { grid-template-columns: 1fr; }
.cc-lc { position: relative; padding-bottom: 22px; }
.cc-lc .mini { height: 96px; }
.cc-x { position: absolute; bottom: 0; font-size: 14px; font-weight: 600; color: #3a3631; }
.cc-x0 { left: 0; } .cc-x1 { right: 0; }
.mini .m-off { fill: #d6ccb9; }
.mini .m-line { vector-effect: non-scaling-stroke; stroke-width: 3.5; }
.mini .m-dash { stroke-width: 3; }
.mini .m-axis { vector-effect: non-scaling-stroke; }

/* horizontal bars (manufacturing) */
.hbars { display: grid; gap: 10px; width: 100%; }
.hb { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 15px; }
.hb-l { font-weight: 700; color: var(--ink-2); }
.hb-t { height: 20px; background: rgba(21, 21, 21, .06); border-radius: 4px; overflow: hidden; }
.hb-t i { display: block; height: 100%; background: #b9ad97; border-radius: 4px; transform-origin: left; }
.hb-on .hb-t i { background: var(--h); }
.hb b { font-weight: 700; font-size: 16px; color: var(--ink-2); }
.hb-on b { color: var(--hink); }

/* vertical trend bars (construction, AGC) */
.agc-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; height: 170px; width: 100%; }
.cc-build .agc-bars { height: 128px; }
.ag { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.ag b { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.ag-on b { color: var(--hink); }
.ag-t { position: relative; flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.ag-t i { display: block; width: 100%; max-width: 52px; background: #b9ad97; border-radius: 4px 4px 0 0; transform-origin: bottom; }
.ag-on .ag-t i { background: var(--h); }
.ag-y { font-size: 14px; font-weight: 600; color: #3a3631; }

/* developer week (technology) */
.days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dy { display: flex; flex-direction: column; gap: 8px; }
.dy-n { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.dy-short { display: none; }
.dy-b { height: 120px; border-radius: 8px; background: var(--h); transform-origin: bottom; }
.days-sm .dy-b { height: 64px; }
.dy-lost .dy-b { background: repeating-linear-gradient(45deg, var(--h) 0 3px, var(--tint) 3px 9px); border: 2px solid var(--h); }
.dy-lost .dy-n { color: var(--hink); }

/* ------------------------------------------------------------ home: work and steps */
.work-light { background: var(--paper); border-top: 1px solid var(--line); }
.work-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.wcard { position: relative; display: grid; grid-template-columns: 220px 1fr; background: var(--ivory); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.wcard:hover, .wcard:focus-within { transform: translateY(-3px); box-shadow: var(--shadow); }
.wcard-fig { display: grid; place-items: center; align-content: center; gap: 10px; background: var(--tint); padding: 20px; overflow: hidden; }
.wcard-fig .iso { width: 100%; max-width: 180px; }
.wcard-body { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; }
.wcard .case-name { font: 500 30px/1.12 var(--serif); color: var(--ink); }
.wcard:hover .case-name { color: var(--copper); }
.wcard-body p:not(.meta) { font-size: 18px; color: var(--ink-2); }
.step { position: relative; }
.step h3 a:hover { color: var(--copper); }
.dot-n::before { content: none !important; }
.dot-n { font: 700 14px/1 var(--sans); }

/* ------------------------------------------------------------ industry page */
.hero-ind .emblem-hero { width: min(400px, 100%); }
.jump { display: flex; flex-wrap: wrap; gap: 4px 6px; padding-top: 12px; padding-bottom: 12px; border-top: 1px solid rgba(21, 21, 21, .08); }
.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: 16px; color: var(--ink-2); text-decoration: none; transition: background .2s, color .2s; }
.jump a:hover { background: var(--paper); color: var(--copper); }
.hero-ind .hero-grid { padding-bottom: 56px; }

/* stage navigator with one emblem per stage */
.js .vc-tabs { gap: 10px; margin-bottom: 18px; }
.js .vc-n5 .vc-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.js .vc-n6 .vc-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.js .vc-tabs::before { display: none; }
.vc-tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 10px 14px; border: 1px solid transparent; border-radius: 16px; border-bottom-width: 1px; background: transparent; text-align: left; transition: background .25s, border-color .25s, box-shadow .25s; }
.vc-em { width: 100%; height: 92px; display: grid; place-items: center; margin-bottom: 8px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 12px; transition: background .25s; }
.vc-em .iso { transition: transform .3s var(--ease); }
.vc-tabs button:not([aria-selected="true"]):not(:hover) .vc-em .h-t { fill: var(--paper); }
.vc-tabs button:not([aria-selected="true"]):not(:hover) .vc-em .h-l { fill: var(--bone); }
.vc-tabs button:not([aria-selected="true"]):not(:hover) .vc-em .h-r { fill: #d9cfbc; }
.vc-tabs button:hover .vc-em .iso, .vc-tabs button[aria-selected="true"] .vc-em .iso { transform: translateY(-4px); }
.vc-tabs button[aria-selected="true"] { background: var(--paper); border-color: var(--h); box-shadow: var(--shadow); }
.vc-tabs button[aria-selected="true"] .vc-em { background: var(--tint); }
.vc-tabs button[aria-selected="true"] .vc-name { color: var(--hink); }
.vc-name { font: 600 17px/1.25 var(--sans); }
.vc-ph { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; }
.vc-pem { flex: none; display: grid; place-items: center; width: 150px; height: 124px; background: var(--tint); border-radius: 16px; }
.vc-panel h3 { margin: 0; flex-direction: column; align-items: flex-start; gap: 6px; }
.vc-fact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-top: 26px; padding: 18px 22px; background: var(--tint); border-left: 5px solid var(--h); border-radius: 12px; }
.vc-fn { font: 450 42px/1 var(--serif); color: var(--hink); letter-spacing: -.02em; white-space: nowrap; }
.vc-ft { flex: 1 1 18em; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.vc-ft .src { display: inline; margin: 0 0 0 4px; }
.vc-ex { display: block; }
.vc-exh { font: 700 15px/1.3 var(--sans); color: var(--hink); margin-bottom: 6px; }

/* proof strip on industries with no client work yet */
.proof-strip { background: var(--bone-2); border-top: 1px solid var(--line); padding: 64px 0; }
.proof-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) auto; gap: 28px 40px; align-items: center; }
.proof-h { font-size: clamp(26px, 2.3vw, 34px); }
.proof-list { display: grid; gap: 14px; }
.proof-list li { display: grid; gap: 2px; padding-left: 16px; border-left: 3px solid var(--green); }
.proof-list b { font: 500 22px/1.25 var(--serif); }
.proof-list span { font-size: 17px; color: var(--ink-2); }
/* Links inside a sentence here get a paragraph link's 44px tap height; inline padding leaves the line as it is (review of PR #39, r3). */
.proof-h a, .proof-list a { padding: 12px 0; }
.case-fig { display: grid; place-items: center; height: 220px; padding: 22px; background: var(--paper); border-radius: 16px; margin-bottom: 8px; }
.case-fig .iso { width: auto; height: 172px; }
.cw-aud { background: var(--bone-2); border-top: 1px solid var(--line); }
.tile-aud-lg { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tile-aud-lg a { min-height: 88px; padding: 18px 20px; background: var(--paper); }
.tile-aud-lg b { font: 500 22px/1.2 var(--serif); }
.pn-l { font-weight: 700; font-size: 15px; color: #3a3631; }
.pn-a { border-top: 4px solid var(--h); }

/* ------------------------------------------------------------ insight charts */
.ins-grid { align-items: start; }
.big-n { margin-top: 18px; }
.chip-callout { display: inline-block; padding: 8px 14px; border-radius: 8px; background: var(--paper); border: 2px solid var(--green); color: var(--green-deep); font-weight: 700; font-size: 17px; }
.key-part { background: linear-gradient(90deg, #e3dac9 0 40%, var(--h) 40% 100%); outline: 2px solid var(--h); outline-offset: -2px; }
.grid100 .part-ring { fill: none; stroke: var(--h2); stroke-width: 1.5; }
.grid100 .shrink .part-ring { stroke: #2b2925; }
.ret-online .part-ring { opacity: 1; }

/* capital & wealth: advisers */
.advisers { display: block; width: 100%; max-width: 460px; margin: 0 auto; }
.advisers .ad circle, .advisers .ad path { fill: none; stroke: #7d7467; stroke-width: 1.4; }
.advisers .ad-on circle, .advisers .ad-on path { fill: var(--h); stroke: var(--h); }
.assets-row { display: flex; align-items: center; gap: 22px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.assets { flex: none; }
.as-col { position: relative; width: 60px; height: 160px; border: 2px solid var(--h); border-radius: 6px; overflow: hidden; background: repeating-linear-gradient(45deg, var(--tint) 0 4px, var(--paper) 4px 9px); }
.as-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: var(--h); transform-origin: bottom; }
.as-n { font: 450 52px/1 var(--serif); color: var(--hink); letter-spacing: -.02em; }
.as-t { font-size: 18px; color: var(--ink-2); margin-top: 6px; }
.ribbon { margin-top: 24px; padding: 18px 22px; background: var(--tint); border-left: 5px solid var(--green); color: var(--ink-2); border-radius: 12px; font-size: 18px; line-height: 1.45; }
.ribbon b { font: 500 26px/1.2 var(--serif); color: var(--green-deep); }

/* manufacturing: the meter */
.mt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mt { display: flex; flex-direction: column; gap: 8px; padding: 26px 26px 22px; background: var(--ivory); border: 1px solid var(--line); border-radius: 18px; }
.mt-auto { padding-top: 20px; background: var(--paper); border: 2px solid var(--green); border-top-width: 8px; box-shadow: var(--shadow); }
.mt-auto .mt-name { color: var(--green-deep); }
.mt-name { font-weight: 700; font-size: 18px; }
.mt-n { font: 450 clamp(38px, 3.4vw, 54px)/1.05 var(--serif); color: var(--hink); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.mt-unit { font-size: 17px; color: var(--ink-2); }
.mt-bar { height: 12px; margin: 8px 0 4px; background: rgba(21, 21, 21, .07); border-radius: 6px; overflow: hidden; }
.mt-bar i { display: block; height: 100%; background: var(--h); border-radius: 6px; transform-origin: left; }
.mt-live { font-size: 16px; color: var(--ink-2); }
.mt-tick { display: block; font: 700 24px/1.25 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.mt-calc { font-size: 17px; padding-top: 10px; border-top: 1px solid var(--line); }
.mt-sum { font-weight: 700; font-variant-numeric: tabular-nums; }
.mt-slider { margin-top: 24px; padding: 22px 26px; background: var(--ivory); border: 1px solid var(--line); border-radius: 16px; }
.mt-slider label { font: 500 23px/1.3 var(--serif); }
.mt-slider output { font-weight: 700; color: var(--hink); }
.mt-slider input[type="range"] { display: block; width: 100%; height: 44px; margin: 8px 0; accent-color: var(--copper); cursor: pointer; }
.mt-note { font-size: 15px; color: #3a3631; }
.mt-foot { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px 40px; align-items: center; margin-top: 30px; padding: 24px 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--ivory); }
.mt-foot-h { font-size: 19px; color: var(--ink-2); }
.mt-foot-h b { color: var(--ink); }

/* construction: the week */
.ins-build .seg { margin-bottom: 28px; }
.ind-build .seg button[aria-pressed="true"], .ind-mfg .seg button[aria-pressed="true"], .ind-tech .seg button[aria-pressed="true"], .ind-ps .seg button[aria-pressed="true"] { background: var(--copper); }
.wk-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: 26px; }
.wk-total { font: 500 24px/1.2 var(--serif); }
.wk-lostsum { font-size: 19px; color: var(--ink-2); transition: opacity .4s; }
.wk-lostsum b { font: 500 32px/1.1 var(--serif); color: var(--hink); }
.week[data-week="full"] .wk-lostsum { opacity: .35; }
.wk-bar { display: flex; gap: 5px; height: 96px; }
.wk-seg { flex-basis: 0; min-width: 0; display: flex; align-items: flex-end; padding: 10px 12px; background: #d9cfbd; border-radius: 8px; transition: transform .6s var(--ease), background .45s; }
.wk-seg b { font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.week[data-week="lost"] .wk-lost { background: var(--h); transform: translateY(-18px); box-shadow: 0 16px 20px -14px rgba(16, 35, 30, .6); }
.week[data-week="lost"] .wk-seg:not(.wk-lost) { background: #e8e0d1; }
.js.motion .wk-s4 { transition-delay: .08s; } .js.motion .wk-s5 { transition-delay: .16s; }
.wk-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; margin-top: 22px; }
.wk-li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 17px; line-height: 1.4; color: var(--ink-2); }
.wk-li .key { width: 18px; height: 18px; margin-top: 3px; border-radius: 4px; background: #d9cfbd; }
.wk-li.is-lost .key { background: var(--h); }
.week[data-week="lost"] .wk-li.is-lost b { color: var(--hink); }
.agc-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px 44px; align-items: end; margin-top: 36px; padding: 26px 28px; background: var(--ivory); border: 1px solid var(--line); border-radius: 18px; }
.agc-h { font-size: 19px; color: var(--ink-2); }
.agc-h b { color: var(--ink); }

/* technology */
.tbars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.tb { padding: 30px 30px 26px; background: var(--ivory); border: 1px solid var(--line); border-radius: 20px; }
.tb-h { font: 500 25px/1.2 var(--serif); margin-bottom: 22px; }
.tb-key { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; font-size: 17px; color: var(--ink-2); }
.tb-key span { display: flex; align-items: center; gap: 10px; }
.tb-note { margin-top: 14px; font-size: 16px; color: #3a3631; }
.split { display: flex; gap: 6px; height: 146px; }
.sp { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-width: 0; padding: 14px; border-radius: 8px; transform-origin: left; }
.sp b { font: 500 34px/1 var(--serif); }
.sp span { font-size: 16px; line-height: 1.35; font-weight: 600; }
.sp-sell { flex: 30; background: var(--h); color: #fff; }
.sp-rest { flex: 70; background: repeating-linear-gradient(45deg, var(--tint) 0 5px, var(--paper) 5px 11px); border: 2px solid var(--h); color: var(--ink); }
.sp-rest b { color: var(--hink); }

/* professional services: line chart */
.lc-key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 18px; }
.lc-key li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--ink-2); }
.lc-plot { position: relative; aspect-ratio: 1.7 / 1; margin: 12px 124px 40px 46px; }
.lc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lc-grid { stroke: #d9cfbd; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lc-l { fill: none; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lc-solid { stroke: var(--h); }
.lc-dash { stroke: var(--h2); stroke-dasharray: 9 7; }
.yt { position: absolute; left: -46px; transform: translateY(-50%); font-size: 14px; font-weight: 600; color: #3a3631; }
.xt { position: absolute; top: 100%; transform: translate(-50%, 10px); font-size: 15px; font-weight: 600; color: var(--ink-2); }
.xs { display: none; }
.pt { position: absolute; width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--h); border: 2px solid var(--paper); }
.pt-o { background: var(--paper); border: 2.5px solid var(--h2); }
.endl { position: absolute; transform: translate(14px, -50%); font-size: 16px; line-height: 1.2; white-space: nowrap; color: var(--ink-2); }
.endl b { display: block; font: 500 24px/1 var(--serif); color: var(--hink); }
.ann { position: absolute; transform: translate(-20%, calc(-100% - 14px)); padding: 5px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--ink-2); box-shadow: 0 6px 14px -10px rgba(16, 35, 30, .5); }
.lc-axis { font-size: 15px; color: #3a3631; }
.ins-ps .ins-chart { padding: 30px 26px 24px; }

/* ------------------------------------------------------------ hub */
.jchips { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 44px; }
.jchip { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 6px 18px 6px 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 17px; transition: border-color .2s, transform .25s var(--ease); }
.jchip:hover { border-color: var(--h); transform: translateY(-2px); color: var(--hink); }
.jchip .mm-em { width: 40px; }
.jchips-lg .jchip { min-height: 64px; font-size: 18px; }
.tile-data { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; align-items: start; padding: 20px; }
.tile-wide .tile-data { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: none; }
.tile-chart { background: var(--tint); border-radius: 12px; padding: 16px 18px 18px; }
.tile-ct { font: 500 20px/1.2 var(--serif); margin-bottom: 12px; }
.tile-stat p { margin: 0; }
.tile-stat .src { margin-top: 10px; }
.atlas-fig .figcap { text-align: center; }

/* ------------------------------------------------------------ what we do */
.hero-copy-wide { max-width: 940px; }
.hero-wwd .display, .hero-work .display, .hero-ins .display { font-size: clamp(40px, 4vw, 58px); }
.proc-fig { padding: 36px 0 64px; }
.proc-fig .fig-stage { max-width: 1120px; margin: 0 auto; }
.proc-fig .flabel { transform: translate(-50%, 20%); font-size: 17px; background: var(--green-ink); color: #fff; border-color: var(--green-ink); }
.proc-fig .figcap { text-align: center; }
.js.motion [data-fig] .st { transition: opacity .7s var(--ease), transform .8s var(--ease); }
.js.motion [data-fig]:not(.in) .st { opacity: 0; transform: translateY(20px); }
.js.motion [data-fig] .st1 { transition-delay: .35s; } .js.motion [data-fig] .st2 { transition-delay: .7s; }
.offers { background: var(--paper); border-top: 1px solid var(--line); }
.offer { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; padding: 44px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--hd-h) + 20px); }
.offer:nth-child(even) .offer-fig { order: 2; }
.offer-fig { display: grid; place-items: center; height: 300px; background: var(--tint); border-radius: 22px; }
.offer-fig .iso { width: auto; height: 200px; }
.offer-h { font-size: clamp(30px, 3vw, 44px); margin: 4px 0 14px; }
.offer-body > p:not(.step-n) { font-size: 20px; color: var(--ink-2); max-width: 32em; }
.offer-list { margin-top: 18px; }
.offer-list li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 19px; }
.offer-list .ico { width: 24px; height: 24px; stroke: var(--green); stroke-width: 2.6; margin-top: 2px; }
.aip { scroll-margin-top: var(--hd-h); }
.split-head { display: grid; grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding-bottom: 12px; font-weight: 700; font-size: 16px; color: var(--green); }
.split-row { display: grid; grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; padding: 22px 0; border-top: 1px solid var(--line); }
.sr-ind { display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--green-deep); text-decoration: none; font: 500 22px/1.2 var(--serif); }
.sr-ind .mm-em { flex: none; width: 54px; height: 50px; background: var(--paper); border-radius: 10px; }
.sr-ind .iso { width: 40px; }
.sr-ind:hover { color: var(--copper-hover); }
.sr-ai, .sr-you { font-size: 18px; line-height: 1.5; color: var(--ink-2); padding-left: 18px; }
.sr-ai { border-left: 3px dashed #8a8276; }
.sr-you { border-left: 3px solid var(--green); }
.sr-l { display: none; }
.wwd-more { background: var(--ivory); }

/* ------------------------------------------------------------ work */
.stories { background: var(--paper); border-top: 1px solid var(--line); padding-top: 72px; }
.story-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; padding: 40px 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--hd-h) + 20px); }
.sc-fig { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 340px; background: var(--tint); border-radius: 22px; padding: 28px; }
.sc-fig .iso { width: auto; height: 240px; }
.sc-cap { font-size: 15px; color: #3a3631; }
.sc-name { font-size: clamp(36px, 3.6vw, 52px); margin: 8px 0 14px; }
.sc-lede { font: 450 24px/1.4 var(--serif); color: var(--ink); max-width: 26em; }
.sc-dl { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.sc-dl dt { font-weight: 700; font-size: 15px; color: #3a3631; }
.sc-dl dd { font-size: 18px; }
.sc-dl a { display: inline-flex; align-items: center; min-height: 44px; color: var(--copper); }
.stories .platforms { margin-top: 36px; }

/* ------------------------------------------------------------ how we build */
.hero-hwb .hero-grid { align-items: start; }
.otm-own { background: var(--paper); border-top: 1px solid var(--line); }
.otm-own .otm-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; }
.otm-own .sec-lede { margin-top: 18px; }
.otm-own .tlink { margin-top: 14px; } /* WO-WEB-C18: "How we build for data sovereignty" */
.owned-ico li { grid-template-columns: 52px 38px 1fr; }
.ow-ico { display: grid; place-items: center; width: 48px; height: 48px; background: var(--tint); border-radius: 12px; }
.ow-ico .ico { width: 30px; height: 30px; stroke: var(--green); }
.rent { background: var(--ivory); border-top: 1px solid var(--line); }
.rent-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.rent-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; border: 2px dashed #8a8276; border-radius: 18px; background: rgba(251, 248, 242, .6); }
.rent-card .ico { width: 48px; height: 48px; stroke: var(--ink-2); }
.rent-card b { font: 500 26px/1.2 var(--serif); }
.rent-card span { font-size: 18px; color: var(--ink-2); }
.rules3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.rules3 li { display: flex; flex-direction: column; gap: 10px; padding-top: 24px; border-top: 2px solid var(--green); }
.rules3 .ico { width: 44px; height: 44px; stroke: var(--green); }
.rules3 b { font: 450 26px/1.2 var(--serif); color: var(--green-deep); }
.rules3 span { font-size: 18px; color: var(--ink-2); }
.rules3 + .tlink { margin-top: 36px; } /* WO-WEB-C18: "Security and data sovereignty" */
.hwb-next { background: var(--ivory); }
.next-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ncard { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; }
.ncard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.ncard strong { font: 500 26px/1.2 var(--serif); }
.ncard > span:not(.meta):not(.tlink-fake) { font-size: 18px; color: var(--ink-2); }
.ncard .tlink-fake { margin-top: auto; }

/* ------------------------------------------------------------ insights */
.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 44px 0 72px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; }
.feat:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feat-cover { display: grid; place-items: center; min-height: 340px; background: linear-gradient(160deg, #e3ebe6, #cddcd4); }
.feat-cover .iso { width: auto; height: 220px; }
.feat-body { display: flex; flex-direction: column; gap: 14px; justify-content: center; padding: 40px 44px; }
.feat-body strong { font: 450 clamp(34px, 3.2vw, 48px)/1.1 var(--serif); letter-spacing: -.015em; }
.feat-body .tlink-fake { align-self: flex-start; }
.icards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.charts-sec { background: var(--bone-2); border-top: 1px solid var(--line); }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.fchips button { min-height: 44px; padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-weight: 600; font-size: 16px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.fchips button:hover { border-color: var(--copper); }
.fchips button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.ccards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ccard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 20px; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--h); border-radius: 18px; transition: transform .3s var(--ease), box-shadow .3s; }
.ccard:hover, .ccard:focus-within { transform: translateY(-4px); box-shadow: var(--shadow); }
.ccard[hidden] { display: none; }
.ccard h3 { font-size: 25px; }
.ccard:hover h3 { color: var(--copper); }
.cc-wrap { padding: 16px; background: var(--tint); border-radius: 12px; }
.ccard .ic-stat { font-size: 17px; margin: 0; }
.ccard .ic-stat b { font-size: 24px; }
.ccard .src { margin-top: 0; }
.ccard .tlink-fake { margin-top: auto; }

/* ------------------------------------------------------------ chart motion (once, on entering view) */
.js.motion [data-fig] .mt-bar i, .js.motion [data-fig] .hb-t i { transition: transform 1.1s var(--ease) .2s; }
.js.motion [data-fig]:not(.in) .mt-bar i, .js.motion [data-fig]:not(.in) .hb-t i { transform: scaleX(0); }
.js.motion [data-fig] .ag-t i { transition: transform .8s var(--ease); }
.js.motion [data-fig] .ag-2023 i { transition-delay: .12s; } .js.motion [data-fig] .ag-2024 i { transition-delay: .24s; } .js.motion [data-fig] .ag-2025 i { transition-delay: .36s; }
.js.motion [data-fig]:not(.in) .ag-t i { transform: scaleY(0); }
.js.motion [data-fig] .dy-b { transition: transform .6s var(--ease), opacity .6s; }
.js.motion [data-fig] .dy:nth-child(2) .dy-b { transition-delay: .1s; } .js.motion [data-fig] .dy:nth-child(3) .dy-b { transition-delay: .2s; }
.js.motion [data-fig] .dy:nth-child(4) .dy-b { transition-delay: .3s; } .js.motion [data-fig] .dy:nth-child(5) .dy-b { transition-delay: .65s; }
.js.motion [data-fig]:not(.in) .dy-b { transform: scaleY(0); }
.js.motion [data-fig]:not(.in) .dy-lost .dy-b { transform: none; opacity: 0; }
.js.motion [data-fig] .sp { transition: transform .9s var(--ease), opacity .6s; }
.js.motion [data-fig] .sp-rest { transition-delay: .4s; }
.js.motion [data-fig]:not(.in) .sp-sell { transform: scaleX(0); }
.js.motion [data-fig]:not(.in) .sp-rest { opacity: 0; }
.js.motion [data-fig] .lc-lines { transition: clip-path 1.6s var(--ease); clip-path: inset(0 0 0 0); }
.js.motion [data-fig]:not(.in) .lc-lines { clip-path: inset(0 100% 0 0); }
.js.motion [data-fig] .pt, .js.motion [data-fig] .endl, .js.motion [data-fig] .ann { transition: opacity .5s ease 1.3s; }
.js.motion [data-fig]:not(.in) .pt, .js.motion [data-fig]:not(.in) .endl, .js.motion [data-fig]:not(.in) .ann { opacity: 0; }
.js.motion [data-fig] .as-fill { transition: transform 1s var(--ease) 1.2s; }
.js.motion [data-fig]:not(.in) .as-fill { transform: scaleY(0); }
.js.motion [data-advisers] .ad-on circle, .js.motion [data-advisers] .ad-on path { transition: fill .3s ease, stroke .3s ease; }
.js.motion [data-advisers]:not(.in) .ad-on circle, .js.motion [data-advisers]:not(.in) .ad-on path { fill: transparent; stroke: #7d7467; }
.js.motion [data-reveal].icard-ind .ic-chart .mini, .js.motion .ccard .mini { transition: opacity .6s; }

/* ------------------------------------------------------------ responsive, round 2 */
@media (max-width: 1100px) {
  .hero-home .hero-fig { margin-right: 0; max-width: 700px; }
  .ind-cards, .ccards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-cards { grid-template-columns: 1fr; }
  .mt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  .mt-name, .mt-n, .mt-unit { grid-column: 1; }
  .mt-bar, .mt-live, .mt-calc { grid-column: 2; }
  .mt-bar { grid-row: 1; align-self: center; }
  .js .vc-n5 .vc-tabs, .js .vc-n6 .vc-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proof-in { grid-template-columns: 1fr; }
  .split-head { display: none; }
  .split-row { grid-template-columns: 1fr 1fr; }
  .sr-ind { grid-column: 1 / -1; }
  .sr-l { display: block; font: 700 15px/1.3 var(--sans); color: var(--green); margin-bottom: 4px; }
  .work-cards { grid-template-columns: 1fr; }
  .tile-data, .tile-wide .tile-data { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hero-home .hero-grid { gap: 8px; }
  .ind-cards, .ccards, .rent-cards, .rules3, .next-cards, .icards-2, .tbars { grid-template-columns: 1fr; }
  .offer { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
  .offer:nth-child(even) .offer-fig { order: 0; }
  .offer-fig { height: 230px; }
  .offer-fig .iso { height: 160px; }
  .story-card { grid-template-columns: 1fr; gap: 24px; }
  .sc-fig { height: 260px; }
  .sc-fig .iso { height: 170px; }
  .otm-own .otm-grid { grid-template-columns: 1fr; }
  .feat { grid-template-columns: 1fr; margin: 32px 0 48px; }
  .feat-cover { min-height: 220px; }
  .feat-cover .iso { height: 160px; }
  .feat-body { padding: 26px 24px 28px; }
  .agc-panel { grid-template-columns: 1fr; padding: 22px 20px; }
  .wk-legend { grid-template-columns: 1fr; }
  .mt-foot { grid-template-columns: 1fr; padding: 20px; }
  .vc-ph { gap: 16px; }
  .vc-pem { width: 104px; height: 92px; }
  .vc-pem .st-em-lg { height: 76px; }
  .vc-fn { font-size: 34px; }
  .lc-plot { margin-right: 10px; aspect-ratio: 1.25 / 1; }
  .endl, .ann { display: none; }
  .ins-ps .ins-chart { padding: 22px 16px 18px; }
  .wcard { grid-template-columns: 1fr; }
  .wcard-fig { height: 190px; }
  .wcard-fig .iso { max-width: 170px; }
  .case-fig { height: 190px; }
  .case-fig .iso { height: 150px; }
  .proof-strip { padding: 52px 0; }
  .split-row { grid-template-columns: 1fr; gap: 14px; }
  .jchips { padding-bottom: 32px; }
}
@media (max-width: 640px) {
  .fig-legend { display: grid; }
  .hero-fig .flabel.tool, .hero-fig .flabel.top-l, .one-fig .flabel.tool, .one-fig .flabel.top-l { display: none; }
  .hero-fig .flabel.core-l, .one-fig .flabel.core-l { font-size: 14px; }
  .proof-names li { font-size: 20px; }
  .proof-l { min-width: 0; width: 100%; }
  .js .vc-n5 .vc-tabs, .js .vc-n6 .vc-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-em { height: 76px; }
  .vc-em .st-em { height: 52px; }
  .wk-seg b { display: none; }
  .wk-bar { height: 72px; }
  .dy-long { display: none; }
  .dy-short { display: inline; }
  .dy-b { height: 90px; }
  .split { height: auto; min-height: 120px; }
  .sp b { font-size: 28px; }
  .sp span { font-size: 15px; }
  .sp-sell { flex: 34; }
  .sp-sell span { font-size: 14px; }
  .xl { display: none; }
  .xs { display: inline; }
  .lc-plot { margin-left: 40px; }
  .yt { left: -40px; }
  .cc { grid-template-columns: 104px minmax(0, 1fr); }
  .cc .mini { width: 104px; }
  .cc-lc .mini { width: 100%; }
  /* The one-column cards stay one column: this phone rule has the weight of theirs and comes later (review of PR #39, r3). */
  .cc-mfg, .cc-build, .cc-tech, .cc-ps { grid-template-columns: 1fr; }
  .mt { grid-template-columns: 1fr; }
  .mt-name, .mt-n, .mt-unit, .mt-bar, .mt-live, .mt-calc { grid-column: 1; grid-row: auto; }
  .as-n { font-size: 42px; }
  .ribbon b { font-size: 22px; }
  .jump a { padding: 0 10px; font-size: 15px; }
  .sc-lede { font-size: 21px; }
  .tile-aud-lg { grid-template-columns: 1fr; }
  .jchip { font-size: 16px; }
  .hero-hub .atlas-fig { display: none; }
}
.fchips[hidden], .mt-slider[hidden], .mt-live[hidden], .mt-calc[hidden] { display: none; }

/* ------------------------------------------------------------ round 2b: hero operating card, story badges */
.hero-home .hero-fig { width: 112%; max-width: none; margin-right: -12%; }
.hero-home .hero-fig .figcap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.op-card { position: absolute; left: 2%; bottom: 0; width: 300px; padding: 16px 18px 14px; background: rgba(251, 248, 242, .97); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 50px -28px rgba(16, 35, 30, .55), 0 2px 0 rgba(16, 35, 30, .04); }
.op-tag { display: inline-block; padding: 2px 8px; margin-bottom: 8px; border: 1px dashed #7d7467; border-radius: 4px; font-size: 14px; font-weight: 700; color: #3a3631; }
.op-h { font: 500 19px/1.25 var(--serif); margin-bottom: 10px; }
.op-list { display: grid; gap: 8px; }
.op-list li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font-size: 15px; line-height: 1.35; color: var(--ink-2); }
.op-list li::before { content: ""; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; }
.op-done::before { background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.6L13 6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.op-wait { font-weight: 700; color: var(--ink) !important; }
.op-wait::before { border: 2.5px solid var(--copper-bright); background: #f7e4d6; }
.js.motion [data-fig] .op-card { transition: opacity .7s var(--ease) 1.6s, transform .8s var(--ease) 1.6s; }
.js.motion [data-fig]:not(.in) .op-card { opacity: 0; transform: translateY(24px); }
.js.motion [data-fig] .op-list li { transition: opacity .4s ease; }
.js.motion [data-fig] .op-list li:nth-child(1) { transition-delay: 2.1s; } .js.motion [data-fig] .op-list li:nth-child(2) { transition-delay: 2.45s; } .js.motion [data-fig] .op-list li:nth-child(3) { transition-delay: 2.8s; }
.js.motion [data-fig]:not(.in) .op-list li { opacity: 0; }
@media (max-width: 1100px) {
  .hero-home .hero-grid { grid-template-columns: 1fr; }
  .hero-home .hero-fig { width: 100%; margin-right: 0; max-width: 720px; justify-self: start; }
}
@media (max-width: 640px) {
  .op-card { position: relative; left: auto; bottom: auto; width: auto; margin-top: 14px; }
}
.hero-home .hero-fig { margin-bottom: 84px; align-self: start; margin-top: 12px; }
.op-card { left: -3%; bottom: -92px; width: 276px; }
.js.motion [data-fig] .op-card { transition-delay: 1.1s, 1.1s; }
.js.motion [data-fig] .op-list li:nth-child(1) { transition-delay: 1.5s; } .js.motion [data-fig] .op-list li:nth-child(2) { transition-delay: 1.75s; } .js.motion [data-fig] .op-list li:nth-child(3) { transition-delay: 2s; }
@media (max-width: 1100px) { .hero-home .hero-fig { margin-bottom: 100px; } }
@media (max-width: 640px) { .hero-home .hero-fig { margin-bottom: 0; } .op-card { left: auto; bottom: auto; width: auto; } }
.step-n .dot-n { font-size: 14px; }
.cc-key li { display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: start; }
.cc-key li i { margin-top: 3px; }
.cc-key .k-line, .cc-key .k-dash { width: 14px; margin-top: 9px; }
.cc-ps { grid-template-columns: 1fr; }
.cc-ps .cc-lc .mini { width: 100%; height: 88px; }
.cc-ps .cc-key { grid-template-columns: 1fr 1fr; gap: 10px 16px; }
@media (max-width: 400px) { .cc-ps .cc-key { grid-template-columns: 1fr; } }
.tile:not(.tile-wide) .tile-data { grid-template-columns: 1fr; }
.tile-chart .cc { grid-template-columns: 150px minmax(0, 1fr); }
.tile-chart .cc .mini { width: 150px; }
.tile-chart .cc-mfg, .tile-chart .cc-build, .tile-chart .cc-tech, .tile-chart .cc-ps { grid-template-columns: 1fr; }
.tile-chart .cc-ps .mini { width: 100%; }
@media (max-width: 640px) {
  .tile-chart .cc { grid-template-columns: 104px minmax(0, 1fr); } .tile-chart .cc .mini { width: 104px; }
  .tile-chart .cc-mfg, .tile-chart .cc-build, .tile-chart .cc-tech, .tile-chart .cc-ps { grid-template-columns: 1fr; } .tile-chart .cc-ps .mini { width: 100%; }
}
.ins-ps { grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr); gap: 48px; }
.endl b { display: inline; font-size: 22px; margin-right: 4px; }
@media (max-width: 1100px) { .ins-ps { grid-template-columns: 1fr; } }
.offer:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } @media (max-width: 860px) { .offer:nth-child(even) { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .hero-glow { display: none; } }
.unsure-em { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; margin-bottom: 8px; }
.unsure-em span { display: grid; place-items: center; height: 64px; background: var(--tint); border-radius: 12px; }
.unsure-em .iso { width: 50px; }

/* WO-WEB-C13: the byline on the Insights index cards (Latif's decision of 25 September 2026). */
.icard-by { font: 600 15px/1.4 var(--sans); color: #3a3631; }

/* WO-WEB-C13 part 2: text links on the bone-coloured bands take the darker copper, so they read at 7:1 or better
   (the site copper on bone is 6.59:1). */
:is(.inds, .hub, .vc, .proof-strip, .cw-aud, .charts-sec, .aud-q, .band-feature, .close) :is(.tlink, .tile-aud .ar) { color: var(--copper-hover); }

/* ------------------------------------------------------------ client work and logos (WO-WEB-C14) */
/* Latif, 2026-09-30: every client named, with its logo. One treatment everywhere: logos in grey on paper at an even
   optical size (the width and height the page gives each image, config/work.js), colour on hover or focus; white
   logos are drawn dark and turn evergreen. No tile background colour but paper, no dark band. */
.logos { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logo-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); }
.lw { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 112px; padding: 24px 20px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.lw span, .sc-logo span, .wc-logo span, .pl-logo span { font: 600 18px/1.2 var(--sans); color: var(--ink-2); }
:is(.lw, .proof-logos li, .sc-logo, .wc-logo, .pl-logo) img { height: auto; max-width: 100%; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .8; transition: filter .35s var(--ease), opacity .35s; }
:is(.lw, .proof-logos li, .sc-logo, .wc-logo, .pl-logo).lw-white img { filter: brightness(0); opacity: .78; }
:is(.lw, .proof-logos li):hover img, .case-card:hover .sc-logo img, .flagship:hover .sc-logo img, .wcard:hover .wc-logo img, .wcard:focus-within .wc-logo img, .case:hover .wc-logo img, .proof-named li:hover .pl-logo img { filter: none; opacity: 1; }
:is(.lw, .proof-logos li).lw-white:hover img, .case-card:hover .sc-logo.lw-white img, .wcard:hover .wc-logo.lw-white img, .wcard:focus-within .wc-logo.lw-white img, .case:hover .wc-logo.lw-white img, .proof-named li:hover .pl-logo.lw-white img { filter: brightness(0) invert(23%) sepia(22%) saturate(1100%) hue-rotate(118deg); opacity: 1; }
.plat-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 40px; align-items: center; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.plat-l { font: 700 16px/1.3 var(--sans); color: var(--green); }
.plat-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 32px; }
.plat { display: flex; flex-direction: column; gap: 8px; }
.plat-mark { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.plat-mark img { height: auto; filter: grayscale(1) contrast(1.1); opacity: .82; transition: filter .35s var(--ease), opacity .35s; }
.plat:hover .plat-mark img { filter: none; opacity: 1; }
.plat-word { font: 600 25px/1 var(--sans); letter-spacing: -.01em; color: var(--ink-2); }
.plat-role { font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.plat-sec .plat-logos { margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }

/* The home page's proof strip: the six named clients' logos. */
.proof-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; }
.proof-logos li { display: flex; align-items: center; min-height: 44px; }

/* Case logos (Work, the home feature, the Capital & Wealth band, the industry proof). */
.sc-logo, .wc-logo, .pl-logo { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.pl-logo { margin-bottom: 6px; }
.status { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 12px; border: 1px solid var(--green); border-radius: 999px; color: var(--green); font: 600 15px/1.3 var(--sans); }

/* Work: the Floura & Co. flagship. */
.flagship { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--hd-h) + 20px); }
.fl-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.fl-fig { position: sticky; top: calc(var(--hd-h) + 32px); display: grid; place-items: center; min-height: 420px; padding: 36px; background: var(--tint); border-radius: 22px; }
.fl-fig .iso { width: 100%; max-width: 420px; }
.fl-body { display: flex; flex-direction: column; gap: 16px; }
.fl-h { font-size: clamp(32px, 3.2vw, 44px); line-height: 1.12; }
.fl-h .tone { display: block; } /* the case's title on its own line, in the heading's colour (WO-WEB-C22) */
.sc-ol { margin-top: 12px; font: 700 17px/1.3 var(--sans); color: var(--green); }
.fl-steps { position: relative; display: grid; gap: 22px; padding-left: 34px; }
.fl-steps::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; background: var(--copper-bright); }
.fl-steps li { position: relative; display: grid; gap: 4px; }
.fl-steps li::before { content: ""; position: absolute; left: -32px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--copper-bright); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--copper-bright); }
.fl-steps li.fl-next::before { background: var(--paper); border: 2px solid var(--copper-bright); box-shadow: none; }
.fl-when { font: 700 15px/1.3 var(--sans); color: var(--copper-hover); }
.fl-steps b { font: 500 22px/1.3 var(--serif); color: var(--ink); }
.fl-text { font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.guard { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.guard li { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; font: 600 15px/1.3 var(--sans); color: var(--ink-2); } /* WO-WEB-C19 (B2): a plain list with a check, not pills that look like buttons */
.guard li::before { content: ""; width: 10px; height: 6px; border: solid var(--green); border-width: 0 0 2px 2px; transform: translateY(-2px) rotate(-45deg); }
.sc-out { display: grid; gap: 10px; }
.sc-out li { position: relative; padding-left: 26px; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.sc-out li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 12px; height: 7px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.sc-plat { font-size: 16px; color: var(--ink-2); padding-top: 14px; border-top: 1px solid var(--line); }

/* Work: the five other named cases, two up; the last one, alone on its row, spans it with its drawing beside its story. */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.cases > .case-card:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 48px; align-items: start; }
.cases > .case-card:last-child:nth-child(odd) .cc-fig { height: 100%; min-height: 300px; margin-bottom: 0; }
.case-card { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; scroll-margin-top: calc(var(--hd-h) + 20px); }
.cc-fig { display: grid; place-items: center; height: 230px; padding: 22px; background: var(--tint); border-radius: 16px; margin-bottom: 4px; }
.cc-fig .iso { width: auto; height: 180px; max-width: 100%; }
.cc-body { display: flex; flex-direction: column; gap: 12px; }
.case-card .sc-name { font-size: clamp(30px, 2.6vw, 38px); margin: 0; }
.cc-lede { font: 450 20px/1.45 var(--serif); color: var(--ink); }

/* Home: the Floura & Co. feature. */
.wcard-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-bottom: 24px; }
.wcard-feature .wcard-fig .iso { max-width: 320px; }
.wcard-feature .case-name { font-size: 38px; }

/* How we build: the platform cards and the specialist work. Microsoft's card runs the full width, its security list
   beside its story; Google Cloud, Claude and OpenAI sit in one row below it. */
.plat-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-bottom: 40px; }
.plat-card { display: flex; flex-direction: column; gap: 12px; padding: 30px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; }
.plat-card-microsoft { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-auto-rows: min-content; column-gap: 48px; row-gap: 12px; align-content: start; }
.plat-card-microsoft > * { grid-column: 1; }
.plat-card-microsoft .pc-list { grid-column: 2; grid-row: 1 / span 4; align-self: start; }
.plat-card-microsoft .tlink { margin-top: 8px; justify-self: start; }
.pc-role { font: 700 15px/1.3 var(--sans); color: var(--green); }
.plat-card h3 { font: 500 28px/1.2 var(--serif); }
.plat-card p:not(.pc-role) { font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.pc-list { display: grid; gap: 10px; }
.pc-list li { font-size: 18px; line-height: 1.5; color: var(--ink-2); padding-left: 16px; border-left: 3px solid var(--green); }
.pc-list b { color: var(--ink); }
.plat-card .tlink { margin-top: auto; align-self: flex-start; color: var(--copper-hover); }
.spec-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; }
.spec-list li { display: grid; gap: 6px; padding-top: 18px; border-top: 2px solid var(--green); }
.spec-list b { font: 500 24px/1.25 var(--serif); }
.spec-list span { font-size: 18px; line-height: 1.55; color: var(--ink-2); }

/* The industry pages' named proof. */
.proof-named li { gap: 6px; }
.proof-named .tlink { align-self: flex-start; }

@media (max-width: 1100px) {
  .fl-grid { grid-template-columns: 1fr; gap: 32px; }
  .fl-fig { position: static; min-height: 0; }
  .plat-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plat-row { grid-template-columns: 1fr; }
  .plat-cards { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cases, .plat-cards, .spec-list { grid-template-columns: 1fr; }
  .cases > .case-card:last-child:nth-child(odd) { display: flex; }
  .cases > .case-card:last-child:nth-child(odd) .cc-fig { height: 230px; min-height: 0; margin-bottom: 4px; }
  .plat-card-microsoft { display: flex; }
  .wcard-feature { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lw { min-height: 92px; padding: 18px 12px; }
  .lw span { font-size: 16px; }
  .proof-logos { gap: 14px 28px; }
  .case-card { padding: 20px; }
  .cc-fig, .cases > .case-card:last-child:nth-child(odd) .cc-fig { height: 190px; }
  .cc-fig .iso { height: 150px; }
  .fl-fig { padding: 24px; }
  .plat-card { padding: 22px; }
  .plat-word { font-size: 22px; }
  .wcard-feature .case-name { font-size: 30px; }
}

/* ------------------------------------------------------------ security and data sovereignty (WO-WEB-C15) */
/* The industry bar: a slim paper row under the header, the six industries as direct links. Not sticky, so it never
   covers an anchor. On a desktop every link shows: the row wraps rather than hide one (review of PR #41, r1: from 861
   to about 1190px the last links were cut off), and from 861 to 1279px it is tightened so one row holds as long as it
   can (from 861 to 1099px the label gives its room to the links). On a phone it is one row of chips that scrolls
   sideways inside itself (the page does not), with no snapping, and joan-site.js brings a focused chip fully into
   view. */
.ibar { background: var(--paper); border-bottom: 1px solid var(--line); }
.ibar-in { display: flex; align-items: center; gap: 6px 18px; min-height: 52px; }
.ibar-l { flex: none; font: 700 15px/1.2 var(--sans); color: #3a3631; }
.ibar-list { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; min-width: 0; }
.ibar-list li { flex: none; }
.ibar-a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 12px; border-radius: 999px; font: 600 16px/1.2 var(--sans); color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.ibar-a .swatch { width: 9px; height: 9px; }
.ibar-a:hover { background: var(--bone-2); color: var(--copper-hover); }
.ibar-a[aria-current] { background: var(--tint); color: var(--hink); box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 861px) and (max-width: 1279px) {
  .ibar-in { gap: 4px 12px; }
  .ibar-a { gap: 7px; padding: 0 9px; font-size: 15px; }
}
@media (min-width: 861px) and (max-width: 1099px) {
  .ibar-l { display: none; }
}
@media (max-width: 860px) {
  .ibar-in { padding-left: 0; padding-right: 0; min-height: 0; }
  .ibar-l { display: none; }
  .ibar-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; gap: 8px; padding: 8px var(--gut); scroll-padding: 0 var(--gut); width: 100%; }
  .ibar-list::-webkit-scrollbar { display: none; }
  .ibar-a { background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); padding: 0 14px; }
}

/* The trust line: one verified sentence and a link to /security. */
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.trust-ico .ico { width: 34px; height: 34px; stroke: var(--green); }
.trust-t { font: 500 22px/1.35 var(--serif); color: var(--green-deep); }
.trust-band { background: var(--ivory); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; }
.comp .trust { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }

/* Questions and answers: the industry pages' compliance block and the /security page's questions. */
.comp { background: var(--paper); border-top: 1px solid var(--line); }
.qa-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.qa-list-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qa { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 28px; background: var(--ivory); border: 1px solid var(--line); border-top: 3px solid var(--green); border-radius: 14px; }
.qa h3 { font: 500 23px/1.25 var(--serif); color: var(--ink); }
.qa p { font-size: 18px; line-height: 1.55; color: var(--ink-2); }

/* The /security page. */
.hero-sec .hero-grid { align-items: center; }
.sov-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.sov-list li { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto 1fr; column-gap: 18px; row-gap: 6px; padding-top: 22px; border-top: 2px solid var(--green); }
.sov-ico { grid-row: span 2; width: 56px; height: 56px; display: grid; place-items: center; background: var(--tint); border-radius: 50%; }
.sov-ico .ico { width: 30px; height: 30px; stroke: var(--green); }
.sov-list b { font: 500 24px/1.25 var(--serif); }
.sov-list span:not(.sov-ico) { font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.sec-sov .sov-more { display: inline-flex; margin-top: 28px; } /* WO-WEB-C18: "What else stays yours" */
.notrain-in { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 32px; align-items: start; max-width: 1040px; }
.notrain-mark { width: 96px; height: 96px; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 50%; }
.notrain-mark .ico { width: 52px; height: 52px; stroke: var(--green); }
.band-feature h2.notrain-h { font-family: var(--serif); font-weight: 450; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.12; margin-bottom: 22px; }
.notrain-p { font-size: 20px; line-height: 1.55; color: var(--ink-2); max-width: 38em; }
.notrain-p + .notrain-p { margin-top: 14px; }
.ctl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ctl { display: flex; flex-direction: column; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 28px 28px 30px; }
.ctl-ico { width: 60px; height: 60px; display: grid; place-items: center; background: var(--tint); border-radius: 50%; margin-bottom: 8px; }
.ctl-ico .ico { width: 32px; height: 32px; stroke: var(--green); }
.ctl h3 { font-size: 24px; line-height: 1.25; }
.ctl p { font-size: 18px; color: var(--ink-2); }
.ctl .tlink { align-self: flex-start; margin-top: auto; }
.sec-own { background: var(--paper); border-top: 1px solid var(--line); }
/* If something goes wrong (WO-WEB-C16): the approved text in one readable column, light like the rest of the page. */
.sec-ir { background: var(--ivory); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-ir .sec-head { margin-bottom: 40px; }
.ir-list { display: grid; gap: 0; max-width: 50em; }
.ir-list li { padding: 22px 0 24px; border-top: 2px solid var(--green); }
.ir-list li + li { border-top: 1px solid var(--line); }
.ir-list p { font-size: 19px; line-height: 1.6; color: var(--ink-2); }
.ir-list p > b { font-family: var(--serif); font-weight: 600; font-size: 21px; color: var(--green-deep); }
.ir-mail { color: var(--copper); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.ir-mail:hover { color: var(--copper-hover); }
.ir-mail b { font-weight: 700; }
@media (max-width: 1100px) {
  .qa-list, .ctl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .qa-list, .qa-list-lg, .ctl-grid, .sov-list { grid-template-columns: 1fr; }
  .notrain-in { grid-template-columns: 1fr; gap: 20px; }
  .notrain-mark { width: 72px; height: 72px; }
  .notrain-mark .ico { width: 40px; height: 40px; }
}
@media (max-width: 640px) {
  .ir-list p { font-size: 18px; }
  .ir-list p > b { font-size: 20px; }
  .trust-t { font-size: 20px; }
  .qa { padding: 22px 20px 24px; }
  .qa h3 { font-size: 21px; }
  .ctl { padding: 22px; }
  .sov-list li { grid-template-columns: 48px 1fr; column-gap: 14px; }
  .sov-ico { width: 48px; height: 48px; }
}

/* ------------------------------------------------------------ the other visual audit fixes (WO-WEB-C19, FINAL-SPEC section 6) */
/* 6.1 Home, phones: the Floura feature drawing stays inside its card. It must come after `.wcard-feature .wcard-fig .iso`
   above, or that rule wins on source order. */
@media (max-width: 860px) {
  .wcard-fig { height: auto; min-height: 190px; }
  .wcard-feature .wcard-fig { height: auto; min-height: 220px; }
  .wcard-feature .wcard-fig .iso { max-width: min(240px, 100%); max-height: 200px; }
}
/* 6.2 the atlas names are links too (the drawing's own link stays the one the keyboard reaches) */
.atlas-fig .flabel { pointer-events: auto; cursor: pointer; text-decoration: none; }
.atlas-fig .flabel:hover { color: var(--copper); border-color: var(--copper-bright); }
/* 6.3 manufacturing: one cell per hour of the slider, and the running total promoted */
.mt-hours { display: flex; gap: 2px; margin-top: 10px; }
.mt-hours i { flex: 1 1 0; min-width: 3px; max-width: 14px; height: 56px; border-radius: 3px; background: var(--bone); } /* deviation 6: wider and taller than the spec's 8 x 14px, so the slider visibly fills each card */
.mt-hours i.on { background: var(--h); }
.js.motion .mt-hours i { transition: background-color .15s ease; }
.mt-calc b { display: block; margin-top: 2px; font: 500 34px/1.1 var(--serif); color: var(--copper-hover); } /* on its own line, so the card keeps its height as the slider moves */
/* 6.4 retail: the online view outlines the extra returns and says "+$2.40" */
.grid100 .rq-delta { fill: none; stroke: var(--copper-bright); stroke-width: 4; }
.grid100 .rd-bg { fill: var(--copper-hover); }
.grid100 .rd-t { font: 700 24px var(--sans); fill: #fff; }
.grid100 .ret-delta { opacity: 0; transition: opacity .4s ease; }
[data-view="online"] .grid100 .ret-delta { opacity: 1; }
.js.motion [data-view="online"] .grid100 .ret-delta { animation: rd-pulse .9s ease 1; }
@keyframes rd-pulse { 50% { opacity: .4; } }
/* 6.5 construction: a dashed line at half of contractors, and the 2025 note */
.ag-t::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: 50%; border-top: 2px dashed var(--h2); pointer-events: none; }
.ag-note { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% + 12px); font: 700 14px/1.2 var(--sans); color: var(--hink); text-align: center; }
.ag-key { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 600 14px/1.3 var(--sans); color: #3a3631; }
.ag-key i { width: 24px; border-top: 2px dashed var(--h2); }
/* 6.6 construction week: the full week keeps the lost hours marked, in the drawing and in its key */
.week[data-week="full"] .wk-lost { background: var(--tint); box-shadow: inset 0 0 0 2px var(--h); }
.week[data-week="full"] .wk-li.is-lost .key { background: var(--tint); box-shadow: inset 0 0 0 2px var(--h); }
/* 6.7 "Your people decide" above the plate, not on a tool tile */
.hero-fig .flabel.top-l, .one-fig .flabel.top-l { transform: translate(-50%, -100%); }
/* 6.9 the industry hero's stat card covers less of its drawing; the case drawings carry a one-line note */
@media (min-width: 1101px) {
  .hero-ind .hero-stat { left: -16px; bottom: -24px; width: min(280px, 64%); }
  .hero-ind .ind-plinth .emblem-hero { margin-left: 22%; }
}
.fig-note { font-size: 14px; line-height: 1.35; color: var(--muted); text-align: center; max-width: 30em; margin: 0 auto; }
/* WO-WEB-C22: an industry page's opening without its emblem (its product moment follows it) keeps its sourced key figure,
   as a card in the flow of its column, centred beside the headline; on a phone it follows the opening's text. */
.ind-visual.ind-visual--stat { padding: 0; align-self: center; }
.hero-ind .ind-visual--stat .hero-stat { position: relative; left: auto; bottom: auto; width: min(360px, 100%); margin: 0 auto; }
@media (max-width: 1100px) { .hero-ind .ind-visual--stat .hero-stat { margin: 0; } }
.cc-fig, .fl-fig, .case-fig { gap: 10px; align-content: center; }
.cc-fig { grid-template-rows: minmax(0, 1fr) auto; }
.cc-fig .iso { height: 100%; max-height: 180px; }
/* 6.12 a long tool name wraps instead of crossing the card's edge */
.flabel.wrap { white-space: normal; max-width: 6.5em; text-align: center; } /* 6.5em (spec 8.5em), so each long name wraps to two lines */
.flabel.tool.to-down.wrap { transform: translate(-72%, 70%); } /* a long name under the far-left tile leans out, clear of the block's label (deviation 11) */
@media (max-width: 640px) { .hero-fig .flabel.core-l, .one-fig .flabel.core-l { transform: translate(-78%, 45%); } } /* on a phone the block's label leans left, clear of the front-right tile */

/* ------------------------------------------------------------ print (review of PR #39, r3) */
/* Nothing waits at opacity 0 for a scroll that paper never makes. joan-site.js also turns motion off before
   printing, so every figure prints in its final state. */
@media print {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js.motion [data-reveal] { opacity: 1; transform: none; }
}