/* Layout concept: an engineering drawing sheet. A precise 12-column grid, a title-block
   feel for metadata (mono labels, stage numbers, units), and one cinematic moment:
   the camera walking through the isometric factory. Light, single-theme by choice. */
:root {
  color-scheme: light;
  --paper: #F4F6F9;
  --white: #FFFFFF;
  --ink: #0C1420;
  --graphite: #232D3B;
  --slate: #566273;
  --mute: #8691A0;
  --line: #DCE2EA;
  --line-2: #C9D2DD;
  --blue: #1D4ED8;
  --blue-ink: #0A1F4D;
  --blue-tint: #EAF0FD;
  /* industry system */
  --tech: #1D4ED8;      --tech-tint: #E8EEFC;
  --electric: #E9AE00;  --electric-ink: #7A5A00; --electric-tint: #FDF5D9;
  --water: #13A3D8;     --water-ink: #0B6688;    --water-tint: #E3F5FC;
  --health: #DD3F78;    --health-ink: #A3204F;   --health-tint: #FCE8F0;
  --fin: #17955C;       --fin-ink: #0E6A40;      --fin-tint: #E2F4EB;
  --brand-red: #D7141A;

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --hdr: 64px;
  --max: 1320px;
  --r: 14px;
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  background: var(--white); color: var(--ink);
  font-family: var(--f-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 70; background: var(--white); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--f-display); font-stretch: 100%; margin: 0; letter-spacing: -0.02em; text-wrap: balance; line-height: 1.05; font-weight: 650; }
p { margin: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut-r); }
@media (min-width: 900px) { .wrap { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); } }

.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; }
.eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.h-xl { font-size: clamp(40px, 5.6vw, 76px); font-weight: 680; letter-spacing: -0.035em; line-height: 0.98; font-stretch: 92%; }
.h-lg { font-size: clamp(32px, 4vw, 54px); letter-spacing: -0.03em; font-stretch: 94%; }
.h-md { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; }
.h-sm { font-size: 19px; letter-spacing: -0.01em; line-height: 1.2; }
.lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--slate); max-width: 62ch; }
.body { color: var(--slate); max-width: 64ch; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; white-space: nowrap; }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-ink); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: var(--white); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn .arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(3px); }
.link { color: var(--blue); font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; font-size: 15px; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Header */
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.hdr-in { height: var(--hdr); display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand img { height: 26px; width: auto; }
.brand span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); border-left: 1px solid var(--line-2); padding-left: 12px; line-height: 1.25; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--graphite); padding: 8px 11px; border-radius: 8px; }
.nav a:hover { background: var(--paper); }
.nav a[aria-current="page"] { color: var(--blue); }
.hdr .btn { height: 40px; padding: 0 16px; font-size: 14px; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--white); border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; }
.burger i { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.burger i::before, .burger i::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); }
.burger i::before { top: -6px; } .burger i::after { top: 6px; }
.drawer { position: fixed; inset: calc(var(--hdr) + env(safe-area-inset-top, 0px)) 0 0 0; z-index: 55; background: var(--white); padding: 18px var(--gut-r) 40px var(--gut); display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.drawer a { text-decoration: none; font-family: var(--f-display); font-size: 26px; font-weight: 600; padding: 12px 0; border-bottom: 1px solid var(--line); }
.drawer .btn { margin-top: 20px; align-self: flex-start; }
@media (max-width: 1180px) { .nav, .hdr .btn-cta { display: none; } .burger { display: inline-flex; } }
@media (max-width: 520px) { .brand span { display: none; } }

/* ============== CINEMATIC TOUR ============== */
.tour { position: relative; height: calc(var(--steps, 10) * 92vh + 8vh); background: var(--paper); }
.tour-sticky { position: sticky; top: calc(var(--hdr) + env(safe-area-inset-top, 0px)); height: calc(100vh - var(--hdr) - env(safe-area-inset-top, 0px)); height: calc(100svh - var(--hdr) - env(safe-area-inset-top, 0px)); overflow: hidden; }
.world { position: absolute; inset: 0; overflow: hidden;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    var(--paper);
}
.world::before { /* engineering grid */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse at 60% 50%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at 60% 50%, #000 30%, transparent 80%);
}
.world-inner { position: absolute; left: 0; top: 0; width: 2360px; height: 1400px; transform-origin: 0 0; will-change: transform; --inv: 1; }
.world-inner > img { width: 2360px; height: 1400px; max-width: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 40px 60px rgba(12,20,32,.18)); }
.spot { position: absolute; border-radius: calc(18px * var(--inv)); box-shadow: 0 0 0 4000px rgba(12, 22, 40, .30); opacity: 0; transition: opacity .5s, left .7s cubic-bezier(.6,0,.2,1), top .7s cubic-bezier(.6,0,.2,1), width .7s cubic-bezier(.6,0,.2,1), height .7s cubic-bezier(.6,0,.2,1); pointer-events: none; }
.spot.on { opacity: 1; }
.spot i { position: absolute; width: calc(26px * var(--inv)); height: calc(26px * var(--inv)); border: 0 solid var(--white); }
.spot i:nth-child(1) { left: 0; top: 0; border-left-width: calc(3px * var(--inv)); border-top-width: calc(3px * var(--inv)); }
.spot i:nth-child(2) { right: 0; top: 0; border-right-width: calc(3px * var(--inv)); border-top-width: calc(3px * var(--inv)); }
.spot i:nth-child(3) { left: 0; bottom: 0; border-left-width: calc(3px * var(--inv)); border-bottom-width: calc(3px * var(--inv)); }
.spot i:nth-child(4) { right: 0; bottom: 0; border-right-width: calc(3px * var(--inv)); border-bottom-width: calc(3px * var(--inv)); }
.spot b { position: absolute; left: 0; top: calc(-30px * var(--inv)); font: 500 calc(13px * var(--inv)) / 1 var(--f-mono); color: var(--white); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; background: var(--ink); padding: calc(5px * var(--inv)) calc(8px * var(--inv)); border-radius: calc(4px * var(--inv)); }
.pin { position: absolute; width: 0; height: 0; border: 0; padding: 0; background: none; cursor: pointer; z-index: 2; }
.pin span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(var(--inv)); transform-origin: 50% 50%; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--white); color: var(--blue); font: 600 12px/1 var(--f-mono); border: 2px solid var(--blue); box-shadow: 0 6px 16px rgba(12,20,32,.18); transition: background .3s, color .3s; }
.pin span::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--blue); opacity: 0; }
.pin.on span { background: var(--blue); color: var(--white); }
.pin.on span::after { animation: ping 1.8s ease-out infinite; }
.tour.at-stage .pin:not(.on) { opacity: .0; pointer-events: none; }
.pin { transition: opacity .4s; }
@keyframes ping { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }

.tour-panel { position: absolute; z-index: 5; left: max(40px, env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); width: min(470px, 36vw); max-height: calc(100% - 64px); }
.step { position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-46%); opacity: 0; visibility: hidden; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1), visibility 0s .45s; }
.step.on { opacity: 1; visibility: visible; transform: translateY(-50%); transition: opacity .5s ease .1s, transform .6s cubic-bezier(.2,.7,.2,1) .05s, visibility 0s; }
.step-hero { width: min(560px, 42vw); }
.step-hero .h-xl { margin: 18px 0 20px; }
.step-hero .lead { color: var(--graphite); }
.step-hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.step-hero .roles { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.step-hero .roles b { color: var(--ink); font-weight: 500; }
.scroll-cue { margin-top: 34px; display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 12px; color: var(--slate); letter-spacing: .06em; }
.scroll-cue i { width: 22px; height: 34px; border: 1.5px solid var(--line-2); border-radius: 12px; position: relative; }
.scroll-cue i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--blue); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

.card-stage { background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 80px rgba(12,20,32,.14), 0 2px 6px rgba(12,20,32,.05); padding: 26px 26px 22px; overflow: auto; max-height: calc(100vh - var(--hdr) - 80px); }
.card-stage .sn { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--f-mono); font-size: 12px; color: var(--slate); letter-spacing: .08em; text-transform: uppercase; }
.card-stage .sn strong { font-family: var(--f-display); font-size: 44px; font-weight: 300; color: var(--blue); letter-spacing: -0.03em; line-height: 1; }
.card-stage h3 { font-size: 24px; margin: 10px 0 10px; line-height: 1.1; }
.card-stage .does { color: var(--graphite); font-size: 15px; line-height: 1.55; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .02em; padding: 5px 9px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); color: var(--graphite); line-height: 1.3; }
.proof { margin-top: 16px; display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 12px; background: var(--blue-tint); }
.proof .ph { width: 76px; height: 76px; border-radius: 10px; background: var(--white); display: grid; place-items: center; overflow: hidden; }
.proof .ph img { max-width: 64px; max-height: 64px; object-fit: contain; }
.proof .ph img.cover { max-width: none; width: 100%; height: 100%; object-fit: cover; }
.proof .ph .spec-mini { font: 600 11px/1.1 var(--f-mono); color: var(--blue); text-align: center; padding: 6px; }
.proof small { display: block; font-family: var(--f-mono); font-size: 11px; color: var(--blue); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px; }
.proof p { font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.vi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.vi small { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
.vi p { font-size: 13px; line-height: 1.45; color: var(--graphite); }
.partners-line { margin-top: 12px; font-family: var(--f-mono); font-size: 11.5px; color: var(--slate); }
.partners-line b { color: var(--ink); font-weight: 500; }

.tour-rail { position: absolute; z-index: 6; right: max(28px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; }
.tour-rail button { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; background: none; border: 0; cursor: pointer; padding: 5px 0; font-family: var(--f-mono); font-size: 11px; color: var(--mute); letter-spacing: .06em; }
.tour-rail { background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.tour-rail button em { position: absolute; right: calc(100% + 10px); top: 50%; margin-top: -11px; pointer-events: none; font-style: normal; opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .25s; white-space: nowrap; background: var(--white); padding: 3px 7px; border-radius: 4px; border: 1px solid var(--line); color: var(--ink); }
.tour-rail button:hover em, .tour-rail button.on em { opacity: 1; transform: none; }
.tour-rail button i { width: 18px; height: 2px; background: var(--line-2); transition: width .3s, background .3s; }
.tour-rail button.on { color: var(--blue); }
.tour-rail button.on i { width: 34px; background: var(--blue); }
.tour-rail button.done i { background: var(--blue); opacity: .45; }
.tour-meta { position: absolute; z-index: 6; left: max(40px, env(safe-area-inset-left, 0px)); bottom: 14px; background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-family: var(--f-mono); font-size: 11px; color: var(--slate); letter-spacing: .08em; text-transform: uppercase; display: flex; gap: 18px; align-items: center; }
.tour-meta .bar { width: 160px; height: 2px; background: var(--line-2); position: relative; overflow: hidden; }
.tour-meta .bar i { position: absolute; inset: 0; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); }
.tour-skip { position: absolute; z-index: 6; right: max(28px, env(safe-area-inset-right, 0px)); bottom: 14px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; cursor: pointer; }

@media (max-width: 900px) {
  .tour { height: calc(var(--steps, 10) * 85vh + 15vh); }
  .tour-panel { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; height: 50%; max-height: none; }
  .step { top: auto; bottom: 0; transform: translateY(16px); left: 0; right: 0; width: auto; height: 100%; }
  .step.on { transform: none; }
  .step-hero { width: auto; }
  .step-hero > div { height: 100%; overflow: auto; background: var(--white); border-top: 1px solid var(--line); padding: 20px var(--gut-r) 24px var(--gut); }
  .step-hero .h-xl { font-size: clamp(34px, 9vw, 46px); margin: 10px 0 12px; }
  .step-hero .lead { font-size: 16px; }
  .step-hero .ctas { margin-top: 18px; }
  .step-hero .ctas .btn { height: 44px; padding: 0 18px; font-size: 14px; }
  .step-hero .roles, .scroll-cue { display: none; }
  .card-stage { height: 100%; max-height: none; border-radius: 18px 18px 0 0; border-width: 1px 0 0; box-shadow: 0 -12px 40px rgba(12,20,32,.12); padding: 18px var(--gut-r) 22px var(--gut); }
  .card-stage .sn strong { font-size: 32px; }
  .card-stage h3 { font-size: 21px; margin: 6px 0 8px; }
  .card-stage .does { font-size: 14.5px; }
  .tour-rail { top: 10px; right: auto; left: var(--gut); transform: none; flex-direction: row; gap: 3px; padding: 2px 8px; border-radius: 999px; }
  .tour-rail button { padding: 6px 0; }
  .tour-rail button i { width: 14px; }
  .tour-rail button.on i { width: 26px; }
  .tour-rail button span, .tour-rail { background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.tour-rail button em { display: none; }
  .tour-meta { display: none; }
  .tour-skip { top: 6px; bottom: auto; right: var(--gut-r); padding: 6px 10px; font-size: 10px; }
}

/* ============== SECTIONS ============== */
.sec { padding-block: clamp(72px, 9vw, 128px); }
.sec-paper { background: var(--paper); }
.sec-ink { background: var(--ink); color: var(--white); }
.sec-ink .body, .sec-ink .lead { color: #AEB8C6; }
.sec-ink .eyebrow { color: #7FA2FF; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head .h-lg { margin-top: 14px; }
.sec-head > div:last-child { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; } }
.q { font-family: var(--f-mono); font-size: 12px; color: var(--slate); letter-spacing: .04em; }
.q::before { content: "Q · "; color: var(--blue); }
.sec-ink .q { color: #AEB8C6; }

/* Proof band */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.14); }
.stat { padding: 28px 24px 4px 0; border-right: 1px solid rgba(255,255,255,.14); padding-left: 24px; }
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; }
.stat strong { display: block; font-family: var(--f-display); font-weight: 300; font-size: clamp(44px, 5vw, 72px); letter-spacing: -0.04em; line-height: 1; font-stretch: 90%; }
.stat span { display: block; margin-top: 12px; color: #AEB8C6; font-size: 14px; line-height: 1.45; max-width: 26ch; }
.stat small { display: block; margin-top: 8px; font-family: var(--f-mono); font-size: 11px; color: #6E7B8E; letter-spacing: .04em; }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr 1fr; } .stat { border-right: 0; padding-left: 0; border-bottom: 1px solid rgba(255,255,255,.14); padding-bottom: 24px; } }
@media (max-width: 460px) { .stats { grid-template-columns: 1fr; } }

/* Responsibility map */
.own { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); overflow: hidden; }
.own > div { padding: 28px; min-width: 0; }
.own > div + div { border-left: 1px solid var(--line); }
.own .mid { background: var(--blue-ink); color: var(--white); }
.own .mid .mono { color: #9DB5FF; }
.own h4 { font-size: 21px; margin: 10px 0 12px; }
.own ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.own li { font-size: 14.5px; display: flex; gap: 10px; align-items: baseline; }
.own li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 1px; background: var(--blue); transform: translateY(-2px); }
.own .mid li::before { background: #7FA2FF; }
.own .mid ul { grid-template-columns: 1fr 1fr; }
.own p.note { margin-top: 16px; font-size: 13px; color: var(--slate); }
.own .mid p.note { color: #AEB8C6; }
@media (max-width: 900px) { .own { grid-template-columns: 1fr; } .own > div + div { border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 420px) { .own .mid ul { grid-template-columns: 1fr; } }

/* Product showcase */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { border: 1px solid var(--line-2); background: var(--white); border-radius: 999px; padding: 8px 14px; font-size: 13.5px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.filters button i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--ink)); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.prod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
@media (max-width: 1000px) { .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .prod-grid { grid-template-columns: 1fr; } }
.prod { --c: var(--tech); --ct: var(--tech-tint); --ci: var(--tech); background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.prod .plate { aspect-ratio: 4 / 3; background: radial-gradient(circle at 50% 60%, var(--white) 0, var(--ct) 70%); display: grid; place-items: center; position: relative; border-bottom: 1px solid var(--line); }
.prod .plate img { max-width: 62%; max-height: 74%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(12,20,32,.18)); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.prod:hover .plate img { transform: translateY(-4px) scale(1.03); }
.prod .plate .fam { position: absolute; left: 14px; top: 14px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ci); background: var(--white); border-radius: 4px; padding: 4px 7px; display: flex; gap: 6px; align-items: center; }
.prod .plate .fam::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.prod .plate .tag { position: absolute; right: 14px; top: 14px; font-family: var(--f-mono); font-size: 10.5px; color: var(--graphite); }
.prod .specplate { width: 74%; font-family: var(--f-mono); font-size: 11.5px; color: var(--graphite); background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; box-shadow: 0 18px 30px rgba(12,20,32,.08); }
.prod .specplate b { display: block; font-family: var(--f-display); font-size: 20px; font-weight: 650; color: var(--ci); margin-bottom: 6px; letter-spacing: -.01em; }
.prod .specplate div { display: flex; justify-content: space-between; gap: 10px; border-top: 1px dashed var(--line); padding-top: 5px; margin-top: 5px; }
.prod .info { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.prod .info p { font-size: 14px; color: var(--slate); line-height: 1.5; }
.prod details { margin-top: auto; padding-top: 6px; }
.prod summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; }
.prod summary::-webkit-details-marker { display: none; }
.prod summary::after { content: "+"; font-family: var(--f-mono); }
.prod details[open] summary::after { content: "−"; }
.spec { margin: 10px 0 0; display: grid; gap: 0; font-size: 12.5px; }
.spec div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.spec dt { font-family: var(--f-mono); font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.spec dd { margin: 0; color: var(--graphite); }

/* tones */
.t-electric { --c: var(--electric); --ct: var(--electric-tint); --ci: var(--electric-ink); }
.t-water { --c: var(--water); --ct: var(--water-tint); --ci: var(--water-ink); }
.t-health { --c: var(--health); --ct: var(--health-tint); --ci: var(--health-ink); }
.t-fin { --c: var(--fin); --ct: var(--fin-tint); --ci: var(--fin-ink); }
.t-tech { --c: var(--tech); --ct: var(--tech-tint); --ci: var(--tech); }
.t-sys { --c: var(--blue-ink); --ct: #E6EAF2; --ci: var(--blue-ink); }

/* Capabilities */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cap { border-radius: var(--r); overflow: hidden; background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.cap .vis { aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: var(--ct, var(--blue-tint)); }
.cap .vis img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.cap:hover .vis img { transform: scale(1.04); }
.cap .vis .num { position: absolute; left: 14px; top: 12px; font-family: var(--f-mono); font-size: 12px; color: var(--white); background: rgba(12,20,32,.6); padding: 3px 8px; border-radius: 4px; }
.cap .vis svg { width: 100%; height: 100%; }
.cap .txt { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cap .txt .mono { color: var(--blue); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.cap .txt p { font-size: 14.5px; color: var(--slate); }
.cap .txt .val { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink); font-weight: 500; }
@media (max-width: 1000px) { .caps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .caps { grid-template-columns: 1fr; } }

/* Manufacturing mosaic */
.mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; }
.mosaic figure { margin: 0; position: relative; border-radius: 12px; overflow: hidden; background: var(--graphite); }
.mosaic figure img { width: 100%; height: 100%; object-fit: cover; }
.mosaic figcaption { position: absolute; left: 10px; bottom: 10px; right: 10px; font-family: var(--f-mono); font-size: 11px; color: var(--white); letter-spacing: .04em; text-shadow: 0 1px 8px rgba(0,0,0,.6); display: flex; justify-content: space-between; gap: 8px; }
.mosaic figcaption span:last-child { opacity: .75; }
.m1 { grid-column: span 4; grid-row: span 2; } .m2 { grid-column: span 2; grid-row: span 2; }
.m3 { grid-column: span 2; } .m4 { grid-column: span 2; } .m5 { grid-column: span 2; }
@media (max-width: 760px) { .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; } .m1 { grid-column: span 2; } .m2 { grid-column: span 1; grid-row: span 1; } .m3, .m4, .m5 { grid-column: span 1; } }
.gates { margin-top: 44px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.gate { padding: 16px 16px 0 0; position: relative; min-width: 0; }
.gate::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: 2px solid var(--ink); }
.sec-ink .gate::before { background: var(--ink); border-color: var(--white); }
.sec-ink .gates { border-top-color: var(--white); }
.gate b { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--blue); display: block; }
.sec-ink .gate b { color: #7FA2FF; }
.gate h4 { font-size: 17px; margin: 6px 0 6px; letter-spacing: -.01em; }
.gate p { font-size: 13px; color: var(--slate); line-height: 1.45; }
.sec-ink .gate p { color: #AEB8C6; }
@media (max-width: 900px) { .gates { grid-template-columns: 1fr 1fr; row-gap: 26px; } }
@media (max-width: 460px) { .gates { grid-template-columns: 1fr; } }
.mfg-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 36px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.mfg-facts div { padding: 20px 22px; border-right: 1px solid var(--line); }
.mfg-facts div:last-child { border-right: 0; }
.mfg-facts strong { display: block; font-family: var(--f-display); font-size: 30px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.mfg-facts span { display: block; font-size: 13px; color: var(--slate); margin-top: 6px; }
@media (max-width: 760px) { .mfg-facts { grid-template-columns: 1fr 1fr; } .mfg-facts div:nth-child(2) { border-right: 0; } .mfg-facts div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
.fineprint { margin-top: 14px; font-size: 12.5px; color: var(--mute); max-width: 90ch; }
.sec-ink .fineprint { color: #6E7B8E; }

/* Engagement matrix */
.matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.matrix { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 13px; }
.matrix th, .matrix td { padding: 14px 10px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.matrix thead th { font-family: var(--f-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .04em; color: var(--slate); text-transform: uppercase; line-height: 1.3; }
.matrix thead th b { display: block; color: var(--blue); font-size: 12px; margin-bottom: 4px; }
.matrix tbody th { text-align: left; padding-left: 20px; width: 290px; }
.matrix tbody th strong { font-family: var(--f-display); font-size: 20px; letter-spacing: -.01em; }
.matrix tbody th span { display: block; font-weight: 400; color: var(--slate); font-size: 12.5px; line-height: 1.4; margin-top: 3px; }
.matrix tr:last-child th, .matrix tr:last-child td { border-bottom: 0; }
.dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: middle; }
.d-o { background: var(--blue); }
.d-s { background: linear-gradient(90deg, var(--blue) 50%, var(--line-2) 50%); }
.d-p { background: var(--white); border: 2px solid var(--blue); }
.d-c { background: var(--line); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: 13px; color: var(--slate); }
.legend span { display: inline-flex; gap: 8px; align-items: center; }

/* Industries */
.inds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ind.ind-cta { background: var(--blue-ink); border-color: var(--blue-ink); color: var(--white); }
.ind-cta h3 { color: var(--white); }
.ind-cta .bd { padding: 26px 22px; }
.ind-cta p { color: #C9D4E6 !important; }
.ind .top { grid-template-columns: minmax(0,1fr) 84px !important; }
.ind .top img, .ind .top svg { width: 84px !important; height: 84px !important; }
@media (max-width: 1200px) { .inds { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ind-cta { grid-column: span 2; } }
.ind { position: relative; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; min-width: 0; text-decoration: none; transition: border-color .25s, transform .3s; }
.ind:hover { border-color: var(--c); transform: translateY(-2px); }
.ind .band { height: 6px; background: var(--c); }
.ind .top { display: grid; grid-template-columns: 1fr 96px; gap: 12px; padding: 22px 22px 0; align-items: start; }
.ind .top img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(12,20,32,.15)); }
.ind .lbl { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ci); }
.ind h3 { font-size: 22px; margin-top: 8px; line-height: 1.1; }
.ind .bd { padding: 14px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ind .bd p { font-size: 14px; color: var(--slate); }
.ind .pf { font-size: 13.5px; color: var(--ink); background: var(--ct); border-radius: 10px; padding: 12px 14px; margin-top: auto; }
@media (max-width: 1000px) { .inds { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .inds { grid-template-columns: 1fr; } }

/* Cases */
.cases { display: grid; gap: 18px; }
.case { display: grid; grid-template-columns: 300px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--white); }
.case .cv { background: radial-gradient(circle at 50% 55%, var(--white), var(--ct) 75%); display: flex; flex-direction: column; justify-content: space-between; padding: 22px; gap: 16px; border-right: 1px solid var(--line); }
.case .cv img { max-height: 170px; max-width: 80%; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 16px 22px rgba(12,20,32,.18)); }
.case .cv .met strong { display: block; font-family: var(--f-display); font-size: 40px; font-weight: 400; letter-spacing: -.04em; line-height: 1; color: var(--ci); }
.case .cv .met span { font-family: var(--f-mono); font-size: 11.5px; color: var(--graphite); }
.case .cb { padding: 26px 28px; min-width: 0; }
.case .cb h3 { font-size: 26px; margin: 8px 0 18px; }
.case .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.case .cols small { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.case .cols p { font-size: 14px; color: var(--graphite); line-height: 1.5; }
.case .cols div:last-child p { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) { .case { grid-template-columns: 1fr; } .case .cv { border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; align-items: center; } .case .cv img { max-height: 120px; max-width: 45%; margin: 0; } .case .cols { grid-template-columns: 1fr; gap: 14px; } }

/* Ecosystem */
.eco { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; }
.panel { border: 1px solid var(--line); border-radius: var(--r); padding: 26px; background: var(--white); min-width: 0; }
.panel h4 { font-size: 18px; margin-bottom: 14px; }
.lic { display: grid; gap: 0; }
.lic div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); align-items: baseline; }
.lic b { font-family: var(--f-display); font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.lic span { font-size: 14px; color: var(--slate); }
.principle { margin-top: 16px; font-size: 13px; color: var(--slate); background: var(--paper); border-radius: 10px; padding: 12px 14px; }
.certs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cert { border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: flex; gap: 12px; align-items: center; }
.cert .seal { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--blue); display: grid; place-items: center; font: 600 9.5px/1.05 var(--f-mono); color: var(--blue); text-align: center; position: relative; }
.cert .seal::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px dashed var(--blue); opacity: .45; }
.cert b { display: block; font-size: 14px; }
.cert span { display: block; font-size: 12.5px; color: var(--slate); line-height: 1.35; }
.clients { margin-top: 18px; }
.clients .row small { flex-basis: 100%; font-family: var(--f-mono); font-size: 10.5px; color: var(--mute); letter-spacing: .1em; text-transform: uppercase; }
.clients .row { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 10px; }
.clients .row span { font-family: var(--f-display); font-size: 19px; font-weight: 600; color: var(--graphite); letter-spacing: -.01em; }
@media (max-width: 900px) { .eco { grid-template-columns: 1fr; } .lic div { grid-template-columns: 1fr; gap: 4px; } }
@media (max-width: 460px) { .certs { grid-template-columns: 1fr; } }

/* Timeline */
.tl { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); row-gap: 40px; padding-bottom: 12px; }
.tl > div { border-top: 1px solid rgba(255,255,255,.2); }
.tl-paper > div { border-top-color: var(--line); }
@media (max-width: 700px) { .tl { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; } }
.tl > div { scroll-snap-align: start; padding: 22px 20px 0 0; position: relative; min-width: 0; }
.tl > div::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: #7FA2FF; border-radius: 50%; }
.tl .y { font-family: var(--f-display); font-size: 34px; font-weight: 300; letter-spacing: -.03em; color: var(--white); }
.tl h4 { font-size: 16px; margin: 8px 0 6px; letter-spacing: -.005em; line-height: 1.25; color: var(--white); }
.tl p { font-size: 13px; color: #AEB8C6; line-height: 1.45; }
.tl img { margin-top: 14px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; filter: saturate(.85); background: var(--white); }
.tl img.prod-img { object-fit: contain; padding: 10px; }
.tl-paper { border-top-color: var(--line); }
.tl-paper .y, .tl-paper h4 { color: var(--ink); }
.tl-paper p { color: var(--slate); }
.tl-paper > div::before { background: var(--blue); }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.form { background: var(--white); color: var(--ink); border-radius: 18px; padding: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .full { grid-column: 1 / -1; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; min-width: 0; }
.form input, .form select, .form textarea { font: inherit; font-weight: 400; font-size: 15px; border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 12px; background: var(--white); color: var(--ink); width: 100%; min-width: 0; }
.form textarea { min-height: 110px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.form fieldset { border: 0; padding: 0; margin: 0; }
.form legend { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { flex-direction: row; align-items: center; font-weight: 500; font-size: 13.5px; border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 13px; cursor: pointer; gap: 8px; }
.seg input { width: auto; accent-color: var(--blue); margin: 0; }
.seg label:has(input:checked) { border-color: var(--blue); background: var(--blue-tint); color: var(--blue-ink); }
.form .actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.form .actions small { color: var(--slate); font-size: 12.5px; }
.form .ok { grid-column: 1 / -1; background: var(--fin-tint); color: var(--fin-ink); border-radius: 10px; padding: 14px 16px; font-size: 14px; }
.addr { display: grid; gap: 18px; margin-top: 34px; }
.addr div small { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #6E7B8E; margin-bottom: 4px; }
.addr div p { color: var(--white); font-size: 15px; user-select: all; }
.addr div p.na { user-select: text; color: #CBD3DF; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; padding: 20px; } }

/* Page heroes (inner pages) */
.phero { padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px); background: var(--paper); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.phero .grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.phero .h-xl { margin-top: 18px; font-size: clamp(38px, 5vw, 68px); }
.phero .lead { margin-top: 20px; }
.phero .side { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.phero .art { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; background: var(--white); border: 1px solid var(--line); }
.phero .art img { width: 100%; height: 100%; object-fit: cover; }
.phero .art img.contain { object-fit: contain; }
.crumb { font-family: var(--f-mono); font-size: 12px; color: var(--slate); letter-spacing: .06em; }
.crumb a { text-decoration: none; color: var(--slate); } .crumb a:hover { color: var(--blue); }
@media (max-width: 860px) { .phero .grid { grid-template-columns: 1fr; } }

/* Capability detail rows (inner) */
.rows { display: grid; gap: 0; }
.row2 { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 36px 0; border-top: 1px solid var(--line); align-items: start; }
.row2 .n { font-family: var(--f-display); font-weight: 300; font-size: 44px; color: var(--blue); letter-spacing: -.03em; line-height: 1; }
.row2 h3 { font-size: 28px; margin-top: 6px; }
.row2 .mono { color: var(--slate); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
.row2 .val { margin-top: 14px; font-weight: 600; font-size: 14.5px; }
.row2 .stg { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 860px) { .row2 { grid-template-columns: 1fr; gap: 12px; } }

/* Industry deep sections */
.indd { padding-block: 56px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.indd .lbl { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ci); display: flex; gap: 10px; align-items: center; }
.indd .lbl::before { content: ""; width: 26px; height: 6px; border-radius: 3px; background: var(--c); }
.indd h2 { font-size: clamp(28px, 3.2vw, 42px); margin: 12px 0 14px; }
.indd .art { background: radial-gradient(circle at 50% 55%, var(--white), var(--ct) 72%); border-radius: 18px; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; gap: 6%; padding: 6%; border: 1px solid var(--line); }
.indd .art img { max-height: 78%; max-width: 46%; object-fit: contain; filter: drop-shadow(0 20px 26px rgba(12,20,32,.2)); }
.indd .pf { margin-top: 16px; padding: 14px 16px; background: var(--ct); border-radius: 10px; font-size: 14.5px; }
@media (max-width: 860px) { .indd { grid-template-columns: 1fr; gap: 24px; } }

/* About */
.statement { font-family: var(--f-display); font-size: clamp(26px, 3vw, 40px); line-height: 1.2; letter-spacing: -.02em; font-weight: 500; max-width: 26ch; }
.pvm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.pvm > div { padding: 22px 24px 0 0; min-width: 0; }
.pvm small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.pvm p { margin-top: 10px; font-family: var(--f-display); font-size: 21px; line-height: 1.3; letter-spacing: -.01em; }
@media (max-width: 860px) { .pvm { grid-template-columns: 1fr; gap: 22px; } }
.leaders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.leader { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--white); }
.leader .ph { aspect-ratio: 1 / 1; background: linear-gradient(180deg, #1A2433, var(--ink)); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.leader .ph img { height: 92%; width: auto; object-fit: contain; filter: grayscale(1) contrast(1.05); mix-blend-mode: normal; }
.leader .tx { padding: 18px 20px 22px; }
.leader h4 { font-size: 21px; }
.leader .mono { color: var(--blue); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; margin-top: 4px; display: block; }
.leader p { margin-top: 10px; font-size: 13.5px; color: var(--slate); }
@media (max-width: 860px) { .leaders { grid-template-columns: 1fr; } .leader { display: grid; grid-template-columns: 140px 1fr; } .leader .ph { aspect-ratio: auto; height: 100%; } }

/* Claims register */
.claims-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.claims { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 13.5px; }
.claims th, .claims td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.claims th { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); background: var(--paper); }
.st { font-family: var(--f-mono); font-size: 11px; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.st-Sourced { background: var(--fin-tint); color: var(--fin-ink); }
.st-Check { background: var(--electric-tint); color: var(--electric-ink); }
.st-Approval { background: var(--health-tint); color: var(--health-ink); }
.st-Replace { background: var(--tech-tint); color: var(--tech); }

/* CTA band */
.cta-band { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 32px; align-items: center; }
.cta-band .btns { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) { .cta-band { grid-template-columns: 1fr; } }

/* Footer */
.ftr { background: var(--ink); color: #AEB8C6; padding-block: 64px 36px; border-top: 1px solid rgba(255,255,255,.08); }
.ftr .top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.ftr img { height: 26px; width: auto; }
.ftr p { margin-top: 16px; font-size: 14px; max-width: 34ch; }
.ftr h5 { margin: 0 0 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6E7B8E; font-weight: 500; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.ftr a { text-decoration: none; color: #CBD3DF; } .ftr a:hover { color: var(--white); }
.ftr .bot { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-family: var(--f-mono); font-size: 11.5px; color: #6E7B8E; }
@media (max-width: 860px) { .ftr .top { grid-template-columns: 1fr 1fr; } .ftr .top > div:first-child { grid-column: 1 / -1; } }

/* Reveal (visible at rest; motion only enhances) */
.rv { transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s; }
.js .rv.pre { transform: translateY(18px); opacity: .001; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv.pre { transform: none; opacity: 1; }
}

/* Stage ownership */
.by { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.by span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .03em; padding: 4px 8px 4px 22px; border-radius: 999px; position: relative; line-height: 1.3; }
.by span::before { content: ""; position: absolute; left: 8px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; }
.b-tsm { background: var(--blue-ink); color: var(--white); }
.b-tsm::before { background: #7FA2FF; }
.b-par { background: var(--white); color: var(--graphite); border: 1px solid var(--line-2); }
.b-par::before { border: 2px solid var(--blue); box-sizing: border-box; }

/* Relationship map */
.rel { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.rel > div { padding: 22px; min-width: 0; }
.rel > div + div { border-left: 1px solid var(--line); }
.rel .mono { color: var(--blue); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.rel p { font-size: 13px; color: var(--slate); margin-top: 6px; }
.rel ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.rel li { font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--graphite); letter-spacing: -.01em; }
@media (max-width: 1000px) { .rel { grid-template-columns: 1fr 1fr; } .rel > div:nth-child(3) { border-left: 0; } .rel > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 560px) { .rel { grid-template-columns: 1fr; } .rel > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* Proposal */
.dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dl a { text-decoration: none; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; transition: border-color .2s; }
.dl a:hover { border-color: var(--blue); }
.dl b { font-family: var(--f-mono); font-size: 12px; color: var(--blue); font-weight: 500; }
.dl span { font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.dl em { font-style: normal; font-size: 12.5px; color: var(--slate); }
@media (max-width: 900px) { .dl { grid-template-columns: 1fr 1fr; } }
.sitemap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sitemap > div { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.sitemap > div.home { grid-row: span 3; background: var(--blue-ink); color: var(--white); border-color: var(--blue-ink); }
.sitemap b { font-family: var(--f-display); font-size: 18px; letter-spacing: -.01em; }
.sitemap ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; color: var(--slate); }
.sitemap .home ul { color: #C9D4E6; }
.sitemap li::before { content: "└ "; font-family: var(--f-mono); color: var(--mute); }
@media (max-width: 900px) { .sitemap { grid-template-columns: 1fr 1fr; } .sitemap > div.home { grid-row: auto; grid-column: 1 / -1; } }
@media (max-width: 520px) { .sitemap { grid-template-columns: 1fr; } }
.wf { display: grid; gap: 6px; max-width: 920px; }
.wf > div { border: 1.5px dashed var(--line-2); border-radius: 8px; padding: 12px 16px; display: grid; grid-template-columns: 230px 1fr; gap: 16px; align-items: center; background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(220,226,234,.35) 10px 11px); }
.wf b { font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; }
.wf span { font-size: 13.5px; color: var(--slate); }
.wf-h, .wf-s { min-height: 44px; } .wf-m { min-height: 70px; } .wf-l { min-height: 96px; } .wf-xl { min-height: 150px; border-color: var(--blue) !important; background: var(--blue-tint) !important; }
@media (max-width: 620px) { .wf > div { grid-template-columns: 1fr; gap: 4px; } }
.sb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sb article { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-width: 0; }
.sb-f { position: relative; }
.sb-f > span { position: absolute; left: 10px; top: 10px; font: 600 12px/1 var(--f-mono); background: var(--blue); color: var(--white); padding: 5px 8px; border-radius: 4px; }
.sb-thumb { aspect-ratio: 1 / 0.62; overflow: hidden; background: var(--paper); border-bottom: 1px solid var(--line); }
.sb-thumb img { max-width: none; display: block; }
.sb h4 { font-size: 17px; padding: 16px 18px 0; letter-spacing: -.01em; line-height: 1.2; }
.sb dl { margin: 10px 18px 18px; display: grid; gap: 0; }
.sb dl div { padding: 8px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 92px 1fr; gap: 10px; }
.sb dt { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.sb dd { margin: 0; font-size: 13px; color: var(--graphite); line-height: 1.45; }
@media (max-width: 1000px) { .sb { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .sb { grid-template-columns: 1fr; } }
.tech { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255,255,255,.14); }
.tech > div { padding: 24px 28px 24px 0; border-bottom: 1px solid rgba(255,255,255,.14); min-width: 0; }
.tech > div:nth-child(even) { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.14); }
.tech h4 { font-size: 18px; color: var(--white); letter-spacing: -.01em; }
.tech p { margin-top: 8px; font-size: 14.5px; color: #AEB8C6; line-height: 1.55; }
@media (max-width: 760px) { .tech { grid-template-columns: 1fr; } .tech > div:nth-child(even) { padding-left: 0; border-left: 0; } }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 24px; } }
.story b { color: var(--ink); font-weight: 600; }
.why { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.why > div { padding: 22px 22px 0 0; min-width: 0; }
.why > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.why span { font-family: var(--f-mono); font-size: 12px; color: var(--blue); }
.why h3 { font-size: 19px; margin: 10px 0 10px; line-height: 1.15; letter-spacing: -.01em; }
.why p { font-size: 14px; color: var(--slate); line-height: 1.5; }
@media (max-width: 1100px) { .why { grid-template-columns: 1fr 1fr; row-gap: 28px; } .why > div + div { border-left: 0; padding-left: 0; } .why > div { padding-right: 24px; } }
@media (max-width: 560px) { .why { grid-template-columns: 1fr; } }
.contrib { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); overflow: hidden; }
.contrib > div { padding: 26px 26px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.contrib > div:nth-child(3n) { border-right: 0; }
.contrib > div:nth-last-child(-n+3) { border-bottom: 0; }
.contrib .mono { color: var(--blue); }
.contrib h3 { font-size: 20px; margin: 10px 0 10px; line-height: 1.15; letter-spacing: -.01em; }
.contrib p { font-size: 14.5px; color: var(--slate); line-height: 1.55; }
@media (max-width: 900px) { .contrib { grid-template-columns: 1fr 1fr; } .contrib > div { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; } .contrib > div:nth-child(2n) { border-right: 0 !important; } .contrib > div:nth-last-child(-n+2) { border-bottom: 0 !important; } }
@media (max-width: 560px) { .contrib { grid-template-columns: 1fr; } .contrib > div { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; } .contrib > div:last-child { border-bottom: 0 !important; } }
@media (max-width: 1000px) { .ind-cta { grid-column: auto; } }

.world-fallback { position: absolute; right: 2%; top: 50%; transform: translateY(-50%); width: 62%; max-width: none; }
@media (max-width: 900px) { .world-fallback { left: 0; right: 0; top: 4%; transform: none; width: 100%; } }
.tour { height: calc(var(--steps, 10) * 100vh + 10vh); }
@media (max-width: 900px) {
  .tour-rail button span, .tour-rail button em { display: none !important; }
  .tour-rail { max-width: calc(100% - 140px); overflow: hidden; }
}

/* ---------- Manufacturing: readiness ramp + discipline tiles ---------- */
.ramp { margin-top: 8px; }
.ramp svg { width: 100%; height: auto; display: block; overflow: visible; }
.ramp .rb-tsm { fill: #1D4ED8; } .ramp .rb-trf { fill: #7FA2FF; } .ramp .rb-par { fill: rgba(255,255,255,.1); stroke: rgba(255,255,255,.35); stroke-dasharray: 4 4; }
.ramp .rbt { font: 500 12px var(--f-mono); fill: #fff; text-anchor: middle; letter-spacing: .04em; }
.ramp .rg { stroke: rgba(255,255,255,.07); } .ramp .rx { stroke: rgba(255,255,255,.3); }
.ramp .ra { fill: rgba(127,162,255,.12); } .ramp .rl { fill: none; stroke: #7FA2FF; stroke-width: 3; stroke-linecap: round; }
.ramp .rt { stroke: rgba(255,255,255,.18); stroke-dasharray: 3 5; }
.ramp .rd { fill: #0C1420; stroke: #fff; stroke-width: 3; } .ramp .rd-t { fill: #7FA2FF; }
.ramp .rk { font: 600 13px var(--f-mono); fill: #fff; text-anchor: middle; letter-spacing: .08em; }
.ramp .ry { font: 400 11px var(--f-mono); fill: #8C98AA; letter-spacing: .06em; text-transform: uppercase; }
.ramp-gates { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin-top: 18px; padding-left: 3.3%; padding-right: 2.5%; }
.ramp-gates h4 { font-size: 16px; color: #fff; letter-spacing: -.01em; }
.ramp-gates p { margin-top: 6px; font-size: 13px; color: #AEB8C6; line-height: 1.45; }
.sec:not(.sec-ink) .ramp-gates h4 { color: var(--ink); }
@media (max-width: 900px) { .ramp-gates { grid-template-columns: 1fr 1fr; padding: 0; } .ramp .rbt { font-size: 15px; } }
@media (max-width: 520px) { .ramp-gates { grid-template-columns: 1fr; } .ramp svg { min-width: 0; } }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 44px; }
.tiles figure { margin: 0; border-radius: 14px; overflow: hidden; background: #111a27; position: relative; aspect-ratio: 4 / 5; }
.tiles img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.tiles figure:hover img { transform: scale(1.05); }
.tiles figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8,13,22,.85)); }
.tiles figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; display: grid; gap: 2px; color: #fff; }
.tiles figcaption .mono { color: #9DB5FF; }
.tiles figcaption b { font-family: var(--f-display); font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.tiles figcaption span:last-child { font-size: 13px; color: #C9D4E6; }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr 1fr; } .tiles figure { aspect-ratio: 4 / 3; } }

/* ---------- Engagement models: segmented ownership bars ---------- */
.em-wrap { overflow-x: auto; }
.em { min-width: 820px; display: grid; gap: 10px; }
.em-head, .em-row { display: grid; grid-template-columns: 290px repeat(9, minmax(0, 1fr)) 150px; gap: 6px; align-items: center; }
.em-head span { font-family: var(--f-mono); font-size: 10.5px; color: var(--slate); letter-spacing: .03em; line-height: 1.3; }
.em-head b { display: block; color: var(--blue); font-weight: 500; font-size: 12px; }
.em-row { padding: 14px 0; border-top: 1px solid var(--line); }
.em-lbl strong { font-family: var(--f-display); font-size: 24px; font-weight: 650; letter-spacing: -.02em; display: block; line-height: 1; }
.em-lbl span { display: block; font-size: 12.5px; color: var(--blue); margin-top: 4px; font-weight: 500; }
.em-lbl p { font-size: 12.5px; color: var(--slate); margin-top: 4px; line-height: 1.4; padding-right: 14px; }
.oseg { display: block; height: 30px; border-radius: 7px; transition: transform .2s; }
.em-row:hover .oseg { transform: scaleY(1.12); }
.oseg-o { background: var(--blue); }
.oseg-s { background: repeating-linear-gradient(135deg, var(--blue) 0 5px, #9DB5FF 5px 10px); }
.oseg-p { background: var(--white); box-shadow: inset 0 0 0 2px var(--blue); }
.oseg-c { background: var(--line); }
.em-sum { font-family: var(--f-mono); font-size: 11.5px; color: var(--slate); padding-left: 10px; }
.em-legend .oseg { width: 26px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---------- Relationship logo wall ---------- */
.lic-logo { display: flex; align-items: center; min-height: 34px; }
.lic-logo img { max-height: 30px; max-width: 150px; width: auto; object-fit: contain; }
.rel2 { margin-top: 18px; display: grid; gap: 14px; }
.rel2 section { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.rel2 header .mono { color: var(--blue); }
.rel2 h4 { font-size: 18px; margin: 6px 0 6px; line-height: 1.2; }
.rel2 header p { font-size: 13px; color: var(--slate); line-height: 1.45; }
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; align-content: start; }
.lg { height: 70px; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 10px 14px; background: var(--white); transition: border-color .2s, box-shadow .2s; }
.lg:hover { border-color: var(--line-2); box-shadow: 0 8px 20px rgba(12,20,32,.06); }
.lg img { max-height: 38px; max-width: 100%; width: auto; object-fit: contain; }
.lg-t { flex-direction: column; text-align: center; gap: 2px; }
.lg-t b { font-family: var(--f-display); font-size: 14px; line-height: 1.15; }
.lg-t span { font-family: var(--f-mono); font-size: 10.5px; color: var(--slate); }
@media (max-width: 760px) { .rel2 section { grid-template-columns: 1fr; gap: 14px; } .logos { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } }

/* ---------- Contribution icons ---------- */
.contrib .ci { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--blue-tint); margin-bottom: 16px; }
.contrib .ci svg { width: 24px; height: 24px; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contrib .mono { display: block; }

/* ---------- Timeline track ---------- */
.tl3 { position: relative; }
.tl3-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 26px; font-family: var(--f-mono); font-size: 11.5px; color: #AEB8C6; }
.tl3-key span { display: inline-flex; gap: 8px; align-items: center; }
.tl3-key i, .tl3 .node i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); display: inline-block; }
.tl3 .t-sys { --c: #E9ECF0; }
.tl3-paper .t-sys { --c: var(--blue-ink); }
.tl3-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 22%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; position: relative; padding-bottom: 6px; }
.tl3-track::-webkit-scrollbar { display: none; }
.tl3-track article { scroll-snap-align: start; padding: 0 28px 0 0; position: relative; }
.tl3-track article::before { content: ""; position: absolute; left: 0; right: 0; top: 66px; height: 1px; background: rgba(255,255,255,.18); }
.tl3 .y { display: block; font-family: var(--f-display); font-weight: 200; font-size: 52px; letter-spacing: -.04em; line-height: 1; color: #fff; font-stretch: 90%; }
.tl3 .node { position: relative; z-index: 1; display: flex; gap: 4px; margin: 6px 0 0; height: 14px; align-items: center; }
.tl3 .node i { width: 13px; height: 13px; box-shadow: 0 0 0 4px var(--ink); }
.tl3 .tag { display: block; margin-top: 16px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #8C98AA; }
.tl3 h4 { font-size: 18px; color: #fff; margin: 8px 0 8px; line-height: 1.2; letter-spacing: -.01em; }
.tl3 p { font-size: 13.5px; color: #AEB8C6; line-height: 1.5; }
.tl3-nav { display: flex; gap: 8px; margin-top: 28px; }
.tl3-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; cursor: pointer; font-size: 16px; }
.tl3-nav button:hover { background: rgba(255,255,255,.08); }
.tl3-paper .tl3-key, .tl3-paper .tag { color: var(--slate); }
.tl3-paper .y, .tl3-paper h4 { color: var(--ink); }
.tl3-paper p { color: var(--slate); }
.tl3-paper .tl3-track article::before { background: var(--line-2); }
.tl3-paper .node i { box-shadow: 0 0 0 4px var(--paper); }
.tl3-paper .tl3-nav button { border-color: var(--line-2); color: var(--ink); }
@media (max-width: 700px) { .tl3-track { grid-auto-columns: 80%; } .tl3 .y { font-size: 42px; } .tl3-track article::before { top: 56px; } }

/* ---------- Glass contact form ---------- */
.glass-sec { position: relative; overflow: hidden; isolation: isolate; }
.glass-sec::before, .glass-sec::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.glass-sec::before { width: 620px; height: 620px; right: -120px; top: -140px; background: radial-gradient(circle, rgba(29,78,216,.75), transparent 65%); }
.glass-sec::after { width: 520px; height: 520px; right: 28%; bottom: -260px; background: radial-gradient(circle, rgba(19,163,216,.45), transparent 65%); }
.form.glass { color-scheme: dark; color: #fff; background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.04)); backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 40px 90px rgba(0,0,0,.35); border-radius: 24px; }
.form.glass label, .form.glass legend { color: #E6ECF5; }
.form.glass input, .form.glass select, .form.glass textarea { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: #fff; }
.form.glass input::placeholder, .form.glass textarea::placeholder { color: rgba(255,255,255,.45); }
.form.glass select option { color: var(--ink); background: #fff; }
.form.glass input:focus, .form.glass select:focus, .form.glass textarea:focus { outline: 2px solid #7FA2FF; border-color: #7FA2FF; background: rgba(255,255,255,.1); }
.form.glass .seg label { border-color: rgba(255,255,255,.22); color: #E6ECF5; }
.form.glass .seg label:has(input:checked) { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55); color: #fff; }
.form.glass .actions small { color: #AEB8C6; }
.form.glass .ok { background: rgba(23,149,92,.22); color: #C8F2DD; }

/* ---------- Partner-ecosystem facts ---------- */
.mfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
.mfacts article { border: 1px solid var(--line); border-radius: var(--r); background: var(--white); padding: 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mfacts .mono { color: var(--blue); text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; }
.mfacts strong { font-family: var(--f-display); font-weight: 300; font-size: 44px; letter-spacing: -.04em; line-height: 1; font-stretch: 90%; }
.mfacts strong small { display: block; margin-top: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; font-weight: 400; color: var(--slate); }
.mfacts p { font-size: 13px; color: var(--slate); line-height: 1.45; margin-top: auto; }
.mfacts-four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mfacts-four i { font-style: normal; font-family: var(--f-mono); font-size: 9.5px; text-align: center; padding: 8px 0; border-radius: 6px; background: var(--blue-tint); color: var(--blue-ink); }
.mfacts-bar { position: relative; height: 10px; border-radius: 5px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.mfacts-bar b { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--blue); }
.mfacts-bar b.rng { background: repeating-linear-gradient(135deg, var(--blue) 0 5px, #6F93FF 5px 10px); }
.mfacts-scale { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 9.5px; color: var(--mute); margin-top: -6px; }
.mfacts-route { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 10.5px; color: var(--ink); }
.mfacts-route i { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 10px); position: relative; }
.mfacts-route i::before, .mfacts-route i::after { content: ""; position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.mfacts-route i::before { left: -2px; } .mfacts-route i::after { right: -2px; background: var(--white); box-shadow: inset 0 0 0 2px var(--blue); }
@media (max-width: 1000px) { .mfacts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mfacts { grid-template-columns: 1fr; } }

/* ---------- Timeline journey motion ---------- */
.tl3-rail { position: absolute; left: 0; top: 65px; height: 3px; pointer-events: none; z-index: 0; }
.tl3-fill { position: absolute; left: 0; top: 0; height: 3px; width: 0; border-radius: 2px; background: linear-gradient(90deg, rgba(127,162,255,.15), #7FA2FF); transition: width 1.4s cubic-bezier(.65,0,.35,1); }
.tl3-dot { position: absolute; left: -9px; top: -8px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(127,162,255,.35), 0 0 24px rgba(127,162,255,.8); transition: transform 1.4s cubic-bezier(.65,0,.35,1); }
.tl3.playing .tl3-dot { animation: tlpulse 1.6s ease-in-out infinite; }
@keyframes tlpulse { 50% { box-shadow: 0 0 0 9px rgba(127,162,255,.12), 0 0 30px rgba(127,162,255,.9); } }
.tl3-track article { cursor: pointer; opacity: .5; transform: translateY(6px); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.tl3-track article.past { opacity: .62; transform: none; }
.tl3-track article.on { opacity: 1; transform: none; }
.tl3-track article .node { transition: transform .6s cubic-bezier(.2,.7,.2,1); transform-origin: 0 50%; }
.tl3-track article.on .node { transform: scale(1.45); }
.tl3-track article.on .y { color: #9DB5FF; }
.tl3-paper .tl3-track article.on .y { color: var(--blue); }
.tl3-paper .tl3-fill { background: linear-gradient(90deg, rgba(29,78,216,.1), var(--blue)); }
.tl3-paper .tl3-dot { background: var(--blue); box-shadow: 0 0 0 5px rgba(29,78,216,.18), 0 0 20px rgba(29,78,216,.45); }
.tl3-nav { align-items: center; }
.tl3-count { margin-left: 10px; font-family: var(--f-mono); font-size: 12px; color: #AEB8C6; letter-spacing: .06em; }
.tl3-paper .tl3-count { color: var(--slate); }
.tl3-play { font-size: 12px !important; letter-spacing: -1px; }
@media (max-width: 700px) { .tl3-rail { top: 55px; } }
@media (prefers-reduced-motion: reduce) { .tl3-track article { opacity: 1; transform: none; } }

/* =====================================================================
   Glass system (site-wide): frosted panels over soft light fields,
   matching the contact form. Light sections get two quiet colour glows;
   cards become translucent with blur, a light top edge and soft depth.
   ===================================================================== */
:root {
  --glass: rgba(255,255,255,.66);
  --glass-strong: rgba(255,255,255,.8);
  --glass-edge: rgba(255,255,255,.85);
  --glass-line: rgba(12,20,32,.07);
  --glass-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 50px rgba(12,32,80,.08), 0 2px 6px rgba(12,20,32,.04);
  --glass-dark: rgba(255,255,255,.06);
  --glass-dark-line: rgba(255,255,255,.14);
}
.sec, .phero { position: relative; isolation: isolate; overflow: hidden; }
.sec::before, .sec::after, .phero::before, .phero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(70px); }
.sec::before, .phero::before { width: 560px; height: 560px; right: -160px; top: -180px; background: radial-gradient(circle, rgba(29,78,216,.16), transparent 68%); }
.sec::after, .phero::after { width: 520px; height: 520px; left: -200px; bottom: -220px; background: radial-gradient(circle, rgba(19,163,216,.14), transparent 68%); }
.sec-paper::before { background: radial-gradient(circle, rgba(29,78,216,.14), transparent 68%); left: 30%; right: auto; }
.sec-paper::after { background: radial-gradient(circle, rgba(221,63,120,.08), transparent 68%); left: auto; right: -160px; }
.sec-ink::before { background: radial-gradient(circle, rgba(29,78,216,.45), transparent 66%); width: 640px; height: 640px; }
.sec-ink::after { background: radial-gradient(circle, rgba(19,163,216,.22), transparent 66%); }
.glass-sec::before { width: 620px; height: 620px; right: -120px; top: -140px; filter: blur(80px); background: radial-gradient(circle, rgba(29,78,216,.75), transparent 65%); }
.glass-sec::after { width: 520px; height: 520px; left: auto; right: 28%; bottom: -260px; filter: blur(80px); background: radial-gradient(circle, rgba(19,163,216,.45), transparent 65%); }

/* light glass cards */
.prod, .cap, .ind:not(.ind-cta), .case, .panel, .rel2 section, .contrib, .mfacts article, .leader, .sb article, .dl a, .sitemap > div:not(.home), .claims-wrap, .own, .lg, .cert, .filters button[aria-pressed="false"], .em-wrap {
  background: var(--glass) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-line) !important;
  box-shadow: var(--glass-shadow);
}
.em-wrap { border-radius: var(--r); padding: 6px 22px 10px; }
.lg { background: var(--glass-strong) !important; }
.contrib > div { border-color: var(--glass-line) !important; }
.own > div + div { border-color: var(--glass-line); }
.own .mid { background: linear-gradient(160deg, rgba(10,31,77,.94), rgba(29,78,216,.88)) !important; }
.prod .plate { border-bottom-color: var(--glass-line); }
.case .cv { border-right-color: var(--glass-line); }
/* over the live world: glass look without backdrop blur, so the animation keeps its frame rate */
.card-stage { background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,255,255,.86)); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 30px 80px rgba(12,32,80,.16), 0 2px 6px rgba(12,20,32,.05); }
.tour-rail, .tour-meta, .tour-skip { background: rgba(255,255,255,.9); }
.principle, .ind .pf, .proof, .indd .pf { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ind.ind-cta { background: linear-gradient(160deg, rgba(10,31,77,.95), rgba(29,78,216,.9)) !important; box-shadow: 0 20px 50px rgba(29,78,216,.25); }

/* dark glass on ink sections */
.sec-ink .stats { gap: 12px; border-top: 0; }
.sec-ink .stat { background: var(--glass-dark); border: 1px solid var(--glass-dark-line); border-radius: var(--r); padding: 24px 22px 20px !important; -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.sec-ink .ramp, .sec-ink .tech { background: var(--glass-dark); border: 1px solid var(--glass-dark-line); border-radius: 20px; padding: 26px 26px 24px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.sec-ink .tech { border-top: 1px solid var(--glass-dark-line); padding: 0 26px; }
.sec-ink .tl3 { background: var(--glass-dark); border: 1px solid var(--glass-dark-line); border-radius: 20px; padding: 26px 26px 22px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.sec-ink .tl3 .node i { box-shadow: 0 0 0 4px #141c29; }
.tl3-paper { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 20px; padding: 26px 26px 22px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--glass-shadow); }
.tl3-paper .node i { box-shadow: 0 0 0 4px #f7f9fc; }
.sec-ink .chip { background: rgba(255,255,255,.06); }
@media (max-width: 900px) { .sec-ink .stat { border-bottom: 1px solid var(--glass-dark-line); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .prod, .cap, .ind:not(.ind-cta), .case, .panel, .rel2 section, .contrib, .mfacts article, .leader, .sb article, .dl a, .sitemap > div:not(.home), .claims-wrap, .own, .em-wrap { background: rgba(255,255,255,.94) !important; }
}

/* ---------- Compact ecosystem: moving logo rails ---------- */
.eco2 { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 20px; padding: 18px 0 16px; box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
.eco2-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 22px 14px; border-bottom: 1px solid var(--glass-line); }
.eco2-tabs button { border: 1px solid transparent; background: transparent; border-radius: 999px; padding: 7px 13px; font-size: 13px; color: var(--slate); cursor: pointer; }
.eco2-tabs button:hover { color: var(--ink); background: rgba(12,20,32,.04); }
.eco2-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.eco2-rails { display: grid; gap: 10px; padding: 16px 0 6px; }
.mq { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 0; }
.mq-lbl { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); padding-left: 22px; }
.mq-win { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq-track { display: flex; gap: 10px; width: max-content; animation: mq-l 70s linear infinite; padding: 4px 0; }
.mq[data-dir="r"] .mq-track { animation-name: mq-r; animation-duration: 90s; }
.mq:hover .mq-track, .mq:focus-within .mq-track { animation-play-state: paused; }
@keyframes mq-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mq-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.mq-t { flex: none; width: 138px; height: 66px; border-radius: 12px; background: rgba(255,255,255,.88); border: 1px solid var(--glass-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 12px; position: relative; transition: transform .25s, box-shadow .25s; }
.mq-t:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(12,32,80,.1); }
.mq-t img { max-height: 30px; max-width: 100%; object-fit: contain; }
.mq-t small { font-family: var(--f-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.mq-txt b { font-family: var(--f-display); font-size: 13px; line-height: 1.1; text-align: center; }
.mq-txt span { font-family: var(--f-mono); font-size: 9.5px; color: var(--slate); }
.eco2-grid { padding: 16px 22px 4px; }
.eco2-grid > p { font-size: 13.5px; color: var(--slate); margin-bottom: 12px; }
.eco2-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.eco2-certs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 22px 0; padding-top: 14px; border-top: 1px solid var(--glass-line); }
.eco2-certs .mono { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-right: 8px; }
.cbadge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 11.5px; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.85); border: 1px solid var(--glass-line); color: var(--graphite); }
.cbadge i { width: 7px; height: 7px; border-radius: 50%; background: var(--fin); }
.eco2 .fineprint { margin: 12px 22px 0; }
@media (max-width: 700px) { .mq { grid-template-columns: 1fr; gap: 6px; } .mq-t { width: 116px; height: 58px; } }
@media (prefers-reduced-motion: reduce) { .mq-win { overflow-x: auto; } .mq-track { animation: none; } }

.mq-txt { width: auto; min-width: 138px; padding: 8px 16px; }
.mq-txt b { white-space: nowrap; }
@media (max-width: 700px) { .eco2-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .eco2-tabs::-webkit-scrollbar { display: none; } .eco2-tabs button { white-space: nowrap; } }

/* =====================================================================
   Motion & format layer (inspired by modern AI-lab sites, tuned to TSM):
   generous statement typography, reveal-on-scroll, word-by-word titles,
   horizontal product rail, auto-advancing capability viewer.
   ===================================================================== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* reveal */
.rv-on .rv { transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform 1s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), filter .9s ease var(--d, 0ms); }
.rv-on .rv:not(.in) { opacity: 0; transform: translateY(34px); filter: blur(6px); }
.rv-on .tiles figure.rv img { transform: scale(1.12); transition: transform 1.6s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
.rv-on .tiles figure.rv.in img { transform: scale(1); }
.rv-on .tiles figure.rv.in:hover img { transform: scale(1.05); }
/* word-by-word titles */
.rv-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.rv-words .w > span { display: inline-block; transition: transform 1s cubic-bezier(.2,.75,.2,1) calc(var(--wi) * 45ms), opacity .8s ease calc(var(--wi) * 45ms); }
.rv-on .rv-words:not(.in) .w > span { transform: translateY(105%); opacity: 0; }

/* statement */
.statement-sec { padding-block: clamp(96px, 14vw, 200px); background: var(--white); position: relative; isolation: isolate; overflow: hidden; }
.statement-sec::before { content: ""; position: absolute; z-index: -1; width: 700px; height: 700px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; filter: blur(90px); background: radial-gradient(circle, rgba(29,78,216,.12), transparent 65%); }
.say { margin-top: 26px; font-family: var(--f-display); font-weight: 500; font-size: clamp(32px, 5.2vw, 76px); line-height: 1.06; letter-spacing: -.035em; max-width: 19ch; font-stretch: 92%; text-wrap: balance; }
.say .w { display: inline; }
.say .w > span { transition: opacity .25s linear; }

/* horizontal product rail */
.car-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.car-nav { display: flex; gap: 8px; }
.car-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--glass-strong, #fff); cursor: pointer; font-size: 16px; transition: background .2s, border-color .2s; }
.car-nav button:hover { border-color: var(--ink); }
.prod-grid.car { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 6px 2px 24px; scrollbar-width: none; scroll-padding-left: 2px; }
.prod-grid.car::-webkit-scrollbar { display: none; }
.prod-grid.car .prod { flex: 0 0 min(360px, 82vw); scroll-snap-align: start; }
.prod-grid.car .prod[hidden] { display: none; }

/* capability viewer */
.cv2 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: stretch; }
.cv2-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cv2-list li { border-top: 1px solid var(--line-2); position: relative; }
.cv2-list li:last-child { border-bottom: 1px solid var(--line-2); }
.cv2-list button { width: 100%; display: flex; gap: 16px; align-items: baseline; background: none; border: 0; padding: 18px 0; cursor: pointer; text-align: left; }
.cv2-list button .mono { color: var(--mute); transition: color .3s; }
.cv2-list button b { font-family: var(--f-display); font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; letter-spacing: -.015em; color: var(--slate); transition: color .3s; }
.cv2-list li.on button b { color: var(--ink); }
.cv2-list li.on button .mono { color: var(--blue); }
.cv2-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.2,.7,.2,1); }
.cv2-body > div { overflow: hidden; min-height: 0; }
.cv2-list li.on .cv2-body { grid-template-rows: 1fr; }
.cv2-body { grid-template-columns: 1fr; }
.cv2-body h3, .cv2-body p { margin: 0; }
.cv2-body h3 { font-size: 15px; color: var(--blue); font-weight: 600; letter-spacing: 0; padding-left: 40px; }
.cv2-body p { font-size: 14.5px; color: var(--slate); padding: 6px 0 0 40px; max-width: 54ch; }
.cv2-body p.val { color: var(--ink); font-weight: 500; padding-bottom: 18px; }
.cv2-prog { position: absolute; left: 0; right: 0; top: -1px; height: 2px; overflow: hidden; }
.cv2-prog i { position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; }
.cv2-list li:not(.on) .cv2-prog { display: none; }
.cv2-media { position: relative; border-radius: 22px; overflow: hidden; min-height: 460px; background: var(--paper); box-shadow: var(--glass-shadow); border: 1px solid var(--glass-line); }
.cv2-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .9s ease, transform 6.5s linear; }
.cv2-media img.on { opacity: 1; transform: scale(1); }
.cv2-cap { position: absolute; left: 16px; bottom: 16px; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.9); padding: 7px 12px; border-radius: 999px; font-size: 11px; color: var(--ink); text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 900px) { .cv2 { grid-template-columns: 1fr; } .cv2-media { min-height: 0; aspect-ratio: 16 / 10; order: -1; } }

/* view change */
.view-in { animation: viewin .7s cubic-bezier(.2,.7,.2,1); }
@keyframes viewin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .rv-on .rv:not(.in), .rv-on .rv-words:not(.in) .w > span { opacity: 1 !important; transform: none !important; filter: none !important; }
  .cv2-media img { transition: none; }
}

/* ---------- Hero highlight ---------- */
.hl { background: linear-gradient(100deg, #1D4ED8 10%, #13A3D8 90%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Client strip (rotating logos) ---------- */
.clients { background: #05080D; padding-block: clamp(48px, 7vw, 92px); }
.clients-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; align-items: center; }
.cl-slot { position: relative; height: 54px; display: grid; place-items: center; }
.cl-slot img { position: absolute; height: var(--lh, 30px); max-height: 46px; max-width: 80%; width: auto; object-fit: contain; opacity: .92; transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1), filter .7s ease; }
.cl-slot img.out { opacity: 0; transform: translateY(-14px); filter: blur(6px); }
.cl-slot img.in-start { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: none; }
@media (max-width: 760px) { .clients-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; } .cl-slot:nth-child(n+4) { display: none; } .cl-slot img { max-height: 28px; } }

/* ---------- Case fan ---------- */
.fan { position: relative; height: 470px; display: flex; justify-content: center; align-items: flex-end; perspective: 1400px; }
.fcard { --rot: calc(var(--i) * 5deg); --x: calc(var(--i) * 200px); --y: calc((var(--i) * var(--i)) * 10px); position: absolute; bottom: 0; left: 50%; width: 330px; height: 420px; margin-left: -165px; border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--ink);
  background: radial-gradient(circle at 50% 30%, #fff, var(--ct) 75%); border: 4px solid #fff; box-shadow: 0 30px 60px rgba(12,32,80,.18), 0 2px 8px rgba(12,20,32,.08);
  transform: translateX(var(--x)) translateY(var(--y)) rotate(var(--rot)); transition: transform .8s cubic-bezier(.2,.7,.2,1), box-shadow .4s, filter .4s; z-index: calc(10 - var(--i) * var(--i)); }
.rv-on .fan:not(.in) .fcard { transform: translateX(0) translateY(40px) rotate(0deg); }
.fan:hover .fcard { filter: saturate(.7) brightness(.97); }
.fan .fcard:hover, .fan .fcard:focus-visible { transform: translateX(var(--x)) translateY(calc(var(--y) - 22px)) rotate(0deg) scale(1.03); z-index: 20; filter: none; box-shadow: 0 40px 80px rgba(12,32,80,.25); }
.fc-img { position: absolute; inset: 0 0 46% 0; display: grid; place-items: center; }
.fc-img img { max-width: 64%; max-height: 82%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(12,20,32,.2)); }
.fc-tag { position: absolute; left: 16px; top: 14px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ci); background: rgba(255,255,255,.85); padding: 4px 8px; border-radius: 4px; }
.fc-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 20px; background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.9); display: grid; gap: 2px; }
.fc-txt strong { font-family: var(--f-display); font-weight: 300; font-size: 38px; letter-spacing: -.04em; line-height: 1; color: var(--ci); }
.fc-txt small { font-family: var(--f-mono); font-size: 10.5px; color: var(--slate); }
.fc-txt b { font-family: var(--f-display); font-size: 17px; letter-spacing: -.01em; margin-top: 8px; line-height: 1.2; }
.fc-txt em { font-style: normal; font-size: 12.5px; color: var(--slate); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1100px) { .fcard { --x: calc(var(--i) * 150px); width: 290px; margin-left: -145px; height: 390px; } .fan { height: 440px; } }
@media (max-width: 760px) {
  .fan { height: auto; display: flex; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; perspective: none; padding-bottom: 10px; scrollbar-width: none; }
  .fan::-webkit-scrollbar { display: none; }
  .fcard, .rv-on .fan:not(.in) .fcard, .fan .fcard:hover { position: relative; left: auto; margin: 0; flex: 0 0 78%; height: 380px; transform: none; z-index: auto; scroll-snap-align: start; }
}

/* ---------- Readiness ramp: the line grows from EVT to mass production ---------- */
.ramp .rl { stroke-dasharray: 1; stroke-dashoffset: 0; }
.rv-on .ramp.rv .rl { stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s cubic-bezier(.45,0,.2,1) .35s; }
.rv-on .ramp.rv.in .rl { stroke-dashoffset: 0; }
.rv-on .ramp.rv .ra { opacity: 0; transition: opacity 1.2s ease 2.2s; }
.rv-on .ramp.rv.in .ra { opacity: 1; }
.ramp .rd { transform-box: fill-box; transform-origin: center; }
.rv-on .ramp.rv .rd { transform: scale(0); transition: transform .5s cubic-bezier(.3,1.6,.5,1) calc(.45s + var(--g) * .42s); }
.rv-on .ramp.rv.in .rd { transform: scale(1); }
.rv-on .ramp.rv .rb-tsm, .rv-on .ramp.rv .rb-trf, .rv-on .ramp.rv .rb-par { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.rv-on .ramp.rv .rb-trf { transition-delay: .9s; } .rv-on .ramp.rv .rb-par { transition-delay: 1.5s; }
.rv-on .ramp.rv.in .rb-tsm, .rv-on .ramp.rv.in .rb-trf, .rv-on .ramp.rv.in .rb-par { transform: scaleX(1); }
.rv-on .ramp.rv .rbt { opacity: 0; transition: opacity .6s ease 2s; } .rv-on .ramp.rv.in .rbt { opacity: 1; }

/* ---------- Mega menu navigation ---------- */
.nav { gap: 4px; }
.nav-item { position: static; }
.nav-top { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 14.5px; font-weight: 500; color: var(--graphite); padding: 8px 14px; border-radius: 999px; }
.nav-top::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; transition: transform .25s; }
.nav-item.open .nav-top, .nav-top:hover { background: rgba(12,20,32,.05); color: var(--ink); }
.nav-item.open .nav-top::after { transform: rotate(-135deg) translateY(-1px); }
.nav-top[aria-current="page"] { color: var(--blue); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: rgba(255,255,255,.985); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px rgba(12,32,80,.10); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s .25s; }
.nav-item.open .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .35s cubic-bezier(.2,.7,.2,1), visibility 0s; }
.mega-in { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; padding-block: 34px 38px; }
.mega-intro p:not(.eyebrow) { margin: 12px 0 14px; font-family: var(--f-display); font-size: 21px; line-height: 1.25; letter-spacing: -.015em; color: var(--ink); }
.mega-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; align-content: start; }
.mega-links.mega-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-links a { display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px; text-decoration: none; transition: background .2s; }
.mega-links a:hover { background: rgba(29,78,216,.06); }
.mega-links b { font-size: 15px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.mega-links span { font-size: 13px; color: var(--slate); line-height: 1.4; }
.dot-i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.hdr { position: sticky; }
.drawer details { border-bottom: 1px solid var(--line); }
.drawer summary { font-family: var(--f-display); font-size: 26px; font-weight: 600; padding: 12px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after { content: "+"; font-family: var(--f-mono); font-weight: 400; color: var(--slate); }
.drawer details[open] summary::after { content: "−"; }
.drawer details a { display: block; font-family: var(--f-body); font-size: 17px; font-weight: 500; padding: 10px 0 10px 4px; border: 0; color: var(--graphite); }
.drawer details[open] { padding-bottom: 10px; }
@media (max-width: 1180px) { .nav { display: none; } }

/* ---------- Compact ecosystem v3 ---------- */
.eco3 { display: grid; gap: 26px; justify-items: center; text-align: center; padding: 8px 0; }
.eco3-cap { color: var(--slate); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.cl-row { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; align-items: center; }
.cl-light .cl-slot img { filter: brightness(0); opacity: .78; }
.cl-light .cl-slot img.out { filter: brightness(0) blur(6px); opacity: 0; }
.cl-light .cl-slot img.in-start { filter: brightness(0) blur(6px); opacity: 0; }
.eco3-groups { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.eg { padding: 22px 18px; display: grid; gap: 14px; justify-items: center; }
.eg + .eg { border-left: 1px solid var(--line); }
.eg .mono { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.eg-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; }
.eg-row img { height: 22px; width: auto; max-width: 120px; object-fit: contain; filter: brightness(0); opacity: .72; }
.eg-t { font-family: var(--f-display); font-size: 14px; font-weight: 600; color: var(--graphite); display: grid; line-height: 1.15; }
.eg-t small { font-family: var(--f-mono); font-size: 10px; font-weight: 400; color: var(--mute); }
.eco3 .eco2-certs { border-top: 0; padding-top: 0; margin: 0; justify-content: center; }
@media (max-width: 760px) { .cl-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .eco3-groups { grid-template-columns: 1fr; } .eg + .eg { border-left: 0; border-top: 1px solid var(--line); } }

/* ---------- Manufacturing chapter on a full TSM-blue field ---------- */
.sec-blue { background: radial-gradient(120% 90% at 85% 0%, #2B5CE6 0%, transparent 55%), linear-gradient(165deg, #0A1F4D 0%, #12348F 55%, #1D4ED8 120%) !important; }
.sec-blue::before { background: radial-gradient(circle, rgba(127,162,255,.35), transparent 66%) !important; }
.sec-blue::after { background: radial-gradient(circle, rgba(19,163,216,.30), transparent 66%) !important; }
.sec-blue .lead, .sec-blue .body { color: #C9D7F5; }
.sec-blue .eyebrow { color: #B7CAFF; }
.sec-blue .ramp { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.sec-blue .ramp .rd { fill: #12348F; }
.sec-blue .ramp .rb-tsm { fill: #fff; } .sec-blue .ramp .rb-tsm + .rbt { fill: #0A1F4D; }
.sec-blue .ramp .rl { stroke: #fff; }
.sec-blue .ramp .ra { fill: rgba(255,255,255,.12); }
.sec-blue .ramp-gates p { color: #C9D7F5; }

/* ---------- Intelligent systems visual ---------- */
.indd .art:has(.sysviz) { padding: 4%; background: radial-gradient(circle at 50% 50%, #fff, #E6EAF2 80%); }
.sysviz { width: 100%; height: auto; display: block; }
.sysviz .sv-h { font: 500 10.5px var(--f-mono); letter-spacing: .12em; fill: #6B7686; }
.sysviz .sv-dev rect, .sysviz .sv-op rect { fill: rgba(255,255,255,.92); stroke: rgba(12,20,32,.08); filter: drop-shadow(0 6px 12px rgba(12,32,80,.08)); }
.sysviz .sv-n { font: 600 13px var(--f-body); fill: #0C1420; }
.sysviz .sv-s { font: 400 10.5px var(--f-mono); fill: #6B7686; }
.sysviz .sv-wire { fill: none; stroke: rgba(10,31,77,.14); stroke-width: 2; }
.sysviz .sv-flow { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 10 190; stroke-dashoffset: 200; animation: svflow 2.2s linear infinite; }
.sysviz .sv-out { stroke: #1D4ED8; }
@keyframes svflow { to { stroke-dashoffset: 0; } }
.sysviz .sv-ring { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: svpulse 2.4s ease-out infinite; }
@keyframes svpulse { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.sysviz .sv-core { fill: #fff; }
.sysviz .sv-ai { font: 700 11px var(--f-mono); fill: #0A1F4D; text-anchor: middle; }
.sysviz .sv-hn { font: 500 11px var(--f-mono); fill: #C9D7F5; text-anchor: middle; }
.sysviz .sv-spark { fill: none; stroke: #1D4ED8; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .sysviz .sv-flow, .sysviz .sv-ring { animation: none; } }

/* six-card fan on the case studies page */
.fan-6 .fcard { --x: calc(var(--i) * 170px); width: 300px; margin-left: -150px; height: 400px; }
.fan-6 { height: 470px; margin-top: 10px; }
@media (max-width: 1100px) { .fan-6 .fcard { --x: calc(var(--i) * 120px); width: 260px; margin-left: -130px; height: 370px; } .fan-6 { height: 430px; } }
@media (max-width: 760px) { .fan-6 { height: auto; } .fan-6 .fcard { margin: 0; width: auto; } }
.case { scroll-margin-top: 90px; }

/* certification badges */
.cert-logo { flex: none; width: 56px; height: 56px; object-fit: contain; }
.iso-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 26px; }
.iso-row img { width: 74px; height: 74px; object-fit: contain; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.iso-row img:hover { transform: translateY(-3px) scale(1.06); }
@media (max-width: 560px) { .iso-row img { width: 58px; height: 58px; } }
.protos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.protos .mono { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-right: 8px; }

/* contribution: evidence figure instead of icons */
.cfact { display: grid; gap: 6px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--glass-line); }
.cfact strong { font-family: var(--f-display); font-weight: 200; font-size: clamp(44px, 4.2vw, 60px); line-height: .95; letter-spacing: -.045em; font-stretch: 88%; background: linear-gradient(100deg, #0A1F4D, #1D4ED8 70%, #13A3D8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cfact span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; color: var(--slate); }

/* ---------- Purpose / Vision / Mission: large editorial rows on deep blue ---------- */
.pvm2 { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(80px, 11vw, 150px); color: #fff; background: linear-gradient(165deg, #06122E 0%, #0A1F4D 45%, #12348F 100%); }
.pvm2-bg { position: absolute; inset: 0; z-index: -1; opacity: .16; mix-blend-mode: screen; }
.pvm2-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2); }
.pvm2::after { content: ""; position: absolute; z-index: -1; width: 760px; height: 760px; right: -200px; top: -260px; border-radius: 50%; filter: blur(90px); background: radial-gradient(circle, rgba(29,78,216,.55), transparent 65%); }
.pvm2 .eyebrow { color: #9DB5FF; margin-bottom: 30px; }
.pvm2-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 48px; align-items: baseline; padding-block: clamp(30px, 4vw, 52px); border-top: 1px solid rgba(255,255,255,.16); position: relative; }
.pvm2-row::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: linear-gradient(90deg, #7FA2FF, #13A3D8); transition: width 1.6s cubic-bezier(.2,.7,.2,1) .2s; }
.pvm2-row.in::before, .pvm2-row:hover::before { width: 100%; }
.pvm2-k .mono { color: #9DB5FF; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.pvm2-k h3 { font-family: var(--f-display); font-weight: 200; font-size: clamp(56px, 8vw, 120px); line-height: .9; letter-spacing: -.05em; font-stretch: 85%; margin-top: 10px; color: transparent; -webkit-text-stroke: 1.2px rgba(255,255,255,.7); transition: color .6s ease, -webkit-text-stroke-color .6s; }
.pvm2-row:hover .pvm2-k h3, .pvm2-row.in .pvm2-k h3 { color: #fff; -webkit-text-stroke-color: transparent; }
.pvm2-row p { font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -.02em; font-weight: 400; color: #C9D7F5; max-width: 30ch; }
.pvm2-row p em { font-style: normal; color: #fff; background: linear-gradient(100deg, #fff, #9DB5FF); -webkit-background-clip: text; background-clip: text; }
@media (max-width: 860px) { .pvm2-row { grid-template-columns: 1fr; gap: 14px; } }
.rv-on .pvm2-row.rv:not(.in) .pvm2-k h3 { color: transparent; }

/* ---------- Why TSM: photo bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 260px; gap: 14px; }
.bt { position: relative; overflow: hidden; border-radius: 22px; background: #0A1F4D; isolation: isolate; }
.bt-0 { grid-column: span 4; grid-row: span 2; } .bt-1 { grid-column: span 2; } .bt-2 { grid-column: span 2; }
.bt-3 { grid-column: span 3; } .bt-4 { grid-column: span 3; }
.bt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.bt::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,18,46,.05) 25%, rgba(6,18,46,.88)); }
.bt:hover img { transform: scale(1.05); }
.bt-tx { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; color: #fff; display: grid; gap: 6px; }
.bt-tx .mono { color: #9DB5FF; font-size: 11px; letter-spacing: .1em; }
.bt-tx h3 { font-family: var(--f-display); font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.02em; line-height: 1.12; color: #fff; }
.bt-0 .bt-tx h3 { font-size: clamp(28px, 3vw, 42px); max-width: 16ch; }
.bt-tx p { font-size: 14px; color: #D3DCEC; line-height: 1.5; max-width: 48ch; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s ease, opacity .5s ease; }
.bt-0 .bt-tx p, .bt:hover .bt-tx p, .bt:focus-within .bt-tx p { max-height: 120px; opacity: 1; }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 240px; } .bt-0 { grid-column: span 2; grid-row: span 1; } .bt-1, .bt-2, .bt-3, .bt-4 { grid-column: span 1; } .bt-4 { grid-column: span 2; } .bt-tx p { max-height: 120px; opacity: 1; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .bt-0, .bt-1, .bt-2, .bt-3, .bt-4 { grid-column: span 1; } }
.leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }

/* ---------- Official TSM logo (Corporate Brand Guide): Red+Black on light header, Red+White on dark footer ---------- */
.brand img { height: 24px; width: auto; }
.ftr img { height: 26px; width: auto; }
@media (max-width: 520px) { .brand img { height: 22px; } }

/* ---------- Mobile & tablet polish (QA pass) ---------- */
@media (max-width: 900px) {
  /* stage rail: bigger tap targets without changing the look */
  .tour-rail button { padding: 12px 3px; margin: -6px 0; }
  .tour-skip { font-size: 11px; padding: 8px 12px; }
  .card-stage { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .sec-head { margin-bottom: 30px; }
  .h-lg { font-size: clamp(30px, 7.4vw, 44px); }
  .say { font-size: clamp(30px, 8.4vw, 46px); }
  .fan { padding-inline: 2px; }
}
@media (max-width: 560px) {
  .eg-t small, .mq-txt span, .lg-t span { font-size: 11px; }
  .chip { font-size: 12px; }
  .btn { min-height: 46px; }
  .hdr-in { gap: 12px; }
  .wrap { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
}
/* tablets: two-column grids instead of cramped three/four-up */
@media (min-width: 700px) and (max-width: 1100px) {
  .mfacts { grid-template-columns: 1fr 1fr; }
  .eco3-groups { grid-template-columns: 1fr; }
  .eg + .eg { border-left: 0; border-top: 1px solid var(--line); }
}
/* touch devices: show hover-only content */
@media (hover: none) {
  .bt-tx p { max-height: 140px; opacity: 1; }
  .mq-track { animation-duration: 55s; }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---------- Legal name & tagline (TSM Corporate Red #C40012 from the brand guide) ---------- */
:root { --tsm-red: #C40012; }
.red { color: var(--tsm-red); }
.tagline { font-family: var(--f-display); font-weight: 650; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -.015em; color: var(--ink); margin-top: 22px; }
.tagline .red { position: relative; }
.tagline-d { color: #fff; font-size: 17px; }
.tagline-d .red { color: #FF2A3A; }  /* lifted red so it stays legible on near-black, per the guide's contrast rule */
.ftr-co { color: #fff; font-size: 15px; line-height: 1.4; }
.ftr-co b { font-weight: 600; }
.brand span { text-transform: none; letter-spacing: .02em; font-size: 11.5px; font-family: var(--f-body); font-weight: 600; color: var(--graphite); line-height: 1.2; }
.step-hero .tagline { margin-top: 18px; }
.step-hero .roles { margin-top: 16px; }
@media (max-width: 900px) { .step-hero .tagline { font-size: 17px; margin-top: 12px; } }
@media (max-width: 380px) { .brand span { display: none; } }
@media (min-width: 381px) and (max-width: 520px) { .brand span { display: block; font-size: 10.5px; } }

/* ---------- National shift callout (Company story) ---------- */
.shift { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 30px 32px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); }
.shift .mono { color: var(--blue); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.shift-row { display: flex; align-items: center; gap: 22px; margin-top: 12px; flex-wrap: wrap; }
.shift-row strong { display: block; font-family: var(--f-display); font-weight: 200; font-size: clamp(48px, 6vw, 84px); letter-spacing: -.05em; line-height: .95; font-stretch: 88%; }
.shift-row strong.red { color: var(--tsm-red); }
.shift-row small { font-family: var(--f-mono); font-size: 11.5px; color: var(--slate); }
.shift-row i { font-style: normal; font-size: 28px; color: var(--mute); }
.shift > p { font-family: var(--f-display); font-size: clamp(18px, 1.8vw, 24px); line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
@media (max-width: 860px) { .shift { grid-template-columns: 1fr; padding: 24px; } }

/* ---------- Consortium scale band (Capabilities · manufacturing) ---------- */
.cons { margin-top: 40px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 36px; padding: 32px; border-radius: 22px; color: #fff; background: linear-gradient(160deg, #06122E, #0A1F4D 60%, #12348F); position: relative; overflow: hidden; }
.cons::after { content: ""; position: absolute; width: 520px; height: 520px; right: -180px; top: -220px; border-radius: 50%; filter: blur(80px); background: radial-gradient(circle, rgba(29,78,216,.5), transparent 65%); pointer-events: none; }
.cons-h .mono { color: #9DB5FF; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.cons-h h3 { font-size: clamp(24px, 2.4vw, 32px); margin: 10px 0 12px; color: #fff; line-height: 1.12; }
.cons-h p { font-size: 14.5px; color: #C9D7F5; line-height: 1.55; }
.cons-g { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255,255,255,.14); border-left: 1px solid rgba(255,255,255,.14); }
.cons-g > div { padding: 18px 16px; border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); min-width: 0; }
.cons-g strong { display: block; font-family: var(--f-display); font-weight: 300; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.03em; line-height: 1.05; color: #fff; }
.cons-g span { display: block; margin-top: 6px; font-size: 12.5px; color: #AEB8C6; line-height: 1.4; }
@media (max-width: 1000px) { .cons { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .cons { padding: 22px; } .cons-g { grid-template-columns: 1fr 1fr; } }

/* Partner logos supplied Nov 2026: BEXA, PT Sat Nusapersada Tbk (emblem + name where the wordmark would be too small) */
.lg.lg-mk { grid-column: span 2; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; justify-items: start; text-align: left; }
.lg.lg-mk img { grid-row: span 2; height: 38px; width: auto; max-height: none; }
.lg.lg-mk b { font-family: var(--f-display); font-size: 14px; line-height: 1.15; align-self: end; }
.lg.lg-mk span { font-family: var(--f-mono); font-size: 10.5px; color: var(--slate); align-self: start; }
.eg-t.eg-mk { grid-template-columns: auto auto; column-gap: 8px; align-items: center; text-align: left; }
.eg-t.eg-mk img { grid-row: span 2; height: 26px; width: auto; filter: brightness(0); opacity: .72; }
.cons-logo { display: block; height: 44px; width: auto; margin-bottom: 18px; opacity: .92; }

/* ===== Nov 2026 comment round ===== */
/* Header: logo centred, Capabilities + Solutions on the left, Customers + Company + CTA on the right */
.hdr-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; }
.hdr-in .brand { grid-column: 2; justify-self: center; }
.nav.nav-l { grid-column: 1; justify-self: start; margin-left: -14px; }
.hdr-r { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 14px; }
.nav.nav-r { margin-left: 0; }
@media (max-width: 1180px) {
  .hdr-in { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 12px; }
  .hdr-in .brand { grid-column: 2; }
  .hdr-r { grid-column: 3; }
}

/* Smartphone shift: two stacked bars on one scale */
.shift2 { margin-top: 48px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 40px; align-items: center; padding: 34px 36px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); }
.sh-h .mono { font-family: var(--f-mono); color: var(--blue); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.sh-h p { margin-top: 12px; font-family: var(--f-display); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
.sh-v { display: grid; gap: 16px; }
.sh-r { display: grid; grid-template-columns: 92px minmax(0, 1fr) 128px; align-items: center; gap: 18px; }
.sh-l { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.sh-b { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.sh-b i { display: block; height: 100%; width: var(--w); }
.sh-b i + i { border-left: 2px solid #fff; }
.imp { background: #9AA3B2; }
.loc { background: var(--tsm-red); }
.sh-n strong { display: block; font-family: var(--f-display); font-weight: 300; font-size: clamp(34px, 3.4vw, 46px); letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.sh-n strong.red { color: var(--tsm-red); }
.sh-n small { display: block; margin-top: 4px; font-family: var(--f-mono); font-size: 11px; color: var(--slate); }
.sh-k { display: flex; gap: 18px; padding-left: 110px; font-family: var(--f-mono); font-size: 11px; color: var(--slate); }
.sh-k span { display: inline-flex; align-items: center; gap: 7px; }
.sh-k i { width: 10px; height: 10px; border-radius: 3px; }
@media (max-width: 860px) {
  .shift2 { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
  .sh-r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l n" "b b"; gap: 8px 12px; }
  .sh-l { grid-area: l; } .sh-b { grid-area: b; } .sh-n { grid-area: n; text-align: right; }
  .sh-n strong { font-size: 32px; }
  .sh-k { padding-left: 0; }
}

/* Certification seals: one consistent mark per standard */
.seal2 { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-content: center; text-align: center; color: #fff; position: relative; background: var(--sc, var(--blue)); box-shadow: 0 6px 14px rgba(12,20,32,.12); }
.seal2::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); }
.seal2 b { font: 700 11.5px/1 var(--f-display); letter-spacing: .02em; font-size: 11.5px !important; color: #fff; }
.seal2 i { font: 500 7.5px/1 var(--f-mono); letter-spacing: .06em; margin-top: 3px; opacity: .9; font-style: normal; }
.sl-spln { --sc: linear-gradient(150deg, #E9AE00, #B98700); }
.sl-fda { --sc: linear-gradient(150deg, #DD3F78, #A3204F); }
.sl-tkdn { --sc: linear-gradient(150deg, #C40012, #8E000D); }
.sl-ce { --sc: linear-gradient(150deg, #1D4ED8, #0A1F4D); }
.seal2 { background: var(--sc); }

/* Protocols & standards: grouped by layer */
.protos2 { margin-top: 28px; }
.protos2 > .mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.pr-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--white); }
.pr { padding: 18px 16px 18px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); min-width: 0; }
.pr:last-child { border-right: 0; }
.pr-n { font-family: var(--f-mono); font-size: 10.5px; color: var(--mute); }
.pr b { font-family: var(--f-display); font-size: 16px; font-weight: 600; color: var(--ink); margin-top: 6px; }
.pr small { font-size: 12px; color: var(--slate); }
.pr div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.pr div span { font-family: var(--f-mono); font-size: 10.5px; padding: 4px 7px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); color: var(--graphite); }
@media (max-width: 1100px) { .pr-g { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pr { border-bottom: 1px solid var(--line); } .pr:nth-child(4n) { border-right: 0; } }
@media (max-width: 640px) { .pr-g { grid-template-columns: 1fr 1fr; } .pr:nth-child(4n) { border-right: 1px solid var(--line); } .pr:nth-child(2n) { border-right: 0; } }
.cert .seal2 { display: grid; color: #fff; font-size: 11px; line-height: 1; }
.cert .seal2 i { display: block; color: #fff; opacity: .92; font-size: 8px; margin-top: 4px; }
@media (max-width: 640px) { .pr:last-child:nth-child(odd) { grid-column: span 2; border-right: 0; } }

/* ===== Dropdowns anchored to their menu item (Nov 2026) ===== */
@media (min-width: 1181px) {
  .nav-item { position: relative; }
  .mega { top: calc(100% + 14px); width: min(600px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.985);
    box-shadow: 0 24px 60px rgba(12,32,80,.14), 0 2px 6px rgba(12,32,80,.06); transform: translateY(-6px); }
  .nav-l .mega { left: calc(-10px + var(--mx, 0px)); right: auto; }
  .nav-r .mega { right: calc(-10px - var(--mx, 0px)); left: auto; }
  .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
  .mega .wrap.mega-in { display: block; max-width: none; margin: 0; padding: 18px 16px 16px; }
  .mega-intro { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; padding: 0 12px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
  .mega-intro .eyebrow { flex: 0 0 100%; font-size: 11px; }
  .mega-intro p:not(.eyebrow) { flex: 1 1 300px; margin: 0; font-family: var(--f-body); font-size: 14px; line-height: 1.45; letter-spacing: 0; color: var(--slate); }
  .mega-intro .link { font-size: 13px; white-space: nowrap; }
  .mega-links, .mega-links.mega-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
  .mega-links a { padding: 10px 12px; }
  .mega-links b { font-size: 14.5px; }
  .mega-links span { font-size: 12.5px; }
}

/* ===== Outcome-led solutions (Nov 2026) ===== */
.sol-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.sol-jump a { text-decoration: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 14px; font-size: 13.5px; display: inline-flex; gap: 8px; align-items: center; background: var(--white); color: var(--ink); transition: border-color .2s, background .2s; }
.sol-jump a:hover { border-color: var(--c, var(--ink)); }
.sol-jump a i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.sol-jump a.sj-all { background: var(--ink); color: #fff; border-color: var(--ink); }
.sols-sec { padding-top: 24px; }
.sols { display: grid; gap: 28px; }
.sol { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 40px 48px; padding: 44px; border-radius: 26px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(12,32,80,.25); overflow: hidden; scroll-margin-top: calc(var(--hdr) + 20px); }
.sol::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); }
.sol-k { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ci); }
.sol-k i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.sol h2 { margin-top: 14px; font-family: var(--f-display); font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -.025em; color: var(--ink); }
.sol small { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.sol-ch { margin-top: 22px; }
.sol-ch p { font-size: 16.5px; line-height: 1.55; color: var(--slate); max-width: 56ch; }
.sol-ben { margin-top: 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sol-ben div { padding: 16px 16px 18px; border-radius: 14px; background: var(--paper); border-top: 2px solid var(--c); display: grid; gap: 6px; align-content: start; }
.sol-ben b { font-size: 15px; color: var(--ink); line-height: 1.25; }
.sol-ben span { font-size: 13.5px; line-height: 1.45; color: var(--slate); }
.sol-uses { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sol-uses small { flex: 0 0 100%; margin-bottom: 2px; }
.sol-uses span { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--graphite); background: var(--white); }
.sol-b { display: grid; gap: 14px; align-content: start; }
.sol-img { aspect-ratio: 16 / 10; border-radius: 18px; background: radial-gradient(circle at 50% 58%, #fff 0, var(--ct) 72%); display: grid; place-items: center; overflow: hidden; }
.sol-img img { max-width: 64%; max-height: 80%; object-fit: contain; filter: drop-shadow(0 22px 26px rgba(12,20,32,.22)); }
.sol-sys { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px 6px; }
.sol-sys div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); position: relative; }
.sol-sys div:first-of-type { border-top: 0; }
.sol-sys b { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ci); font-weight: 500; padding-top: 2px; }
.sol-sys span { font-size: 14px; line-height: 1.45; color: var(--ink); }
.sol-proof { display: flex; align-items: baseline; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--ct); }
.sol-proof strong { font-family: var(--f-display); font-weight: 300; font-size: 40px; letter-spacing: -.04em; line-height: 1; color: var(--ci); white-space: nowrap; }
.sol-proof span { font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.sol-p { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 26px; display: grid; gap: 4px; }
.sol-pl { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sp { border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.sp summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 12px 14px; }
.sp summary::-webkit-details-marker { display: none; }
.sp summary img, .sp-ph { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; background: var(--ct); padding: 6px; grid-row: span 2; }
.sp-ph { display: grid; place-items: center; font-family: var(--f-display); font-weight: 650; font-size: 12px; color: var(--ci); padding: 0; }
.sp summary > span b { display: block; font-size: 14.5px; color: var(--ink); }
.sp summary > span em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--slate); margin-top: 2px; }
.sp-more { grid-column: 2; font-style: normal; font-size: 12px; font-weight: 600; color: var(--ci); display: flex; justify-content: space-between; margin-top: 4px; }
.sp-more::after { content: "+"; font-family: var(--f-mono); }
.sp[open] .sp-more::after { content: "−"; }
.sp .spec { padding: 0 14px 12px; margin: 0; }
.psol { font-size: 12.5px; font-weight: 600; color: var(--ci); text-decoration: none; }
.psol:hover { text-decoration: underline; }
@media (max-width: 1000px) {
  .sol { grid-template-columns: 1fr; padding: 32px 28px; gap: 28px; }
  .sol-b { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sol-img { grid-row: span 2; aspect-ratio: auto; min-height: 220px; }
}
@media (max-width: 640px) {
  .sol { padding: 26px 18px; border-radius: 20px; }
  .sol-ben { grid-template-columns: 1fr; }
  .sol-b { grid-template-columns: 1fr; }
  .sol-img { aspect-ratio: 16 / 10; min-height: 0; }
  .sol-sys div { grid-template-columns: 1fr; gap: 2px; }
  .sol-pl { grid-template-columns: 1fr; }
  .sol-proof strong { font-size: 32px; }
}
.sol-a .sol-proof { margin-top: 26px; }
@media (max-width: 1000px) { .sol-b { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .sol-img { grid-row: auto; } }
@media (max-width: 640px) { .sol-b { grid-template-columns: 1fr; } }
/* Consistent product plates: same height on every card, image sized inside it */
.prod .plate { aspect-ratio: auto; height: 240px; }
.prod .plate img { max-width: 62%; max-height: 168px; }
.prod .specplate { max-height: 190px; overflow: hidden; }
@media (max-width: 640px) { .prod .plate { height: 210px; } .prod .plate img { max-height: 148px; } }

/* ===== Impact path (Utility → Social → Long-term growth) ===== */
.ipath { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr); align-items: stretch; }
.ip { --ip: var(--blue); position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; box-shadow: 0 24px 50px -36px rgba(12,32,80,.3); }
.ip::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--ip); }
.ip-electric { --ip: var(--electric); } .ip-health { --ip: var(--health); } .ip-tsm { --ip: var(--tsm-red); }
.ip-n { position: absolute; right: 22px; top: 14px; font-family: var(--f-display); font-weight: 200; font-size: 64px; letter-spacing: -.05em; line-height: 1; color: var(--ip); opacity: .22; }
.ip .mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.ip .mono::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ip); }
.ip h3 { font-family: var(--f-display); font-size: clamp(21px, 1.9vw, 26px); line-height: 1.15; letter-spacing: -.015em; color: var(--ink); max-width: 16ch; }
.ip p { font-size: 14.5px; line-height: 1.55; color: var(--slate); }
.ip ul { list-style: none; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.ip li { font-size: 13.5px; line-height: 1.45; color: var(--graphite); padding-left: 18px; position: relative; }
.ip li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--ip); opacity: .85; }
.ip-arr { align-self: center; justify-self: center; width: 22px; height: 22px; border-top: 2px solid var(--line-2); border-right: 2px solid var(--line-2); transform: rotate(45deg); margin-left: -8px; }
@media (max-width: 1000px) {
  .ipath { grid-template-columns: 1fr; gap: 4px; }
  .ip-arr { transform: rotate(135deg); margin: 4px auto 10px; width: 16px; height: 16px; }
}

/* ===== SDG alignment + ESG ===== */
.sdg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sdg article { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 18px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); align-items: start; }
.sdg-n { width: 64px; height: 64px; border-radius: 12px; background: var(--g); color: #fff; display: grid; place-content: center; text-align: center; }
.sdg-n b { font-family: var(--f-display); font-size: 28px; font-weight: 700; line-height: 1; }
.sdg-n span { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em; margin-top: 3px; }
.sdg h4 { font-size: 15px; color: var(--ink); line-height: 1.25; }
.sdg p { font-size: 13.5px; line-height: 1.45; color: var(--slate); margin-top: 5px; }
.sdg small { display: inline-block; margin-top: 9px; font-family: var(--f-mono); font-size: 10.5px; color: var(--graphite); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; }
.esg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.esg article { position: relative; padding: 24px 22px 22px 22px; border-radius: 18px; background: linear-gradient(160deg, #0A1F4D, #12348F); color: #fff; overflow: hidden; }
.esg-k { position: absolute; right: 16px; top: 4px; font-family: var(--f-display); font-weight: 200; font-size: 88px; line-height: 1; color: rgba(255,255,255,.12); }
.esg h4 { font-size: 18px; color: #fff; }
.esg ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 9px; }
.esg li { font-size: 13.5px; line-height: 1.45; color: #C9D7F5; padding-left: 16px; position: relative; }
.esg li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 1.5px; background: #7FA2FF; }
@media (max-width: 1000px) { .sdg { grid-template-columns: 1fr 1fr; } .esg { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sdg { grid-template-columns: 1fr; } .sdg article { grid-template-columns: 52px minmax(0, 1fr); } .sdg-n { width: 52px; height: 52px; } .sdg-n b { font-size: 22px; } }
.esg-k { top: auto; bottom: -14px; right: 14px; font-size: 96px; }
.esg article { padding-bottom: 34px; }
/* ISO badges with their title underneath */
.iso-row { gap: 20px 18px; align-items: flex-start; }
.iso-f { margin: 0; width: 118px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.iso-f figcaption b { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.iso-f figcaption span { display: block; font-size: 11.5px; line-height: 1.35; color: var(--slate); margin-top: 2px; }
.iso-f:hover img { transform: translateY(-3px) scale(1.06); }
@media (max-width: 560px) { .iso-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; } .iso-f { width: auto; } }

/* ===== SDG wheel + ESG (v2) ===== */
.esg-sec { position: relative; overflow: hidden; isolation: isolate; }
.esg-sec::before { content: ""; position: absolute; z-index: -1; width: 760px; height: 760px; left: -220px; top: 120px; border-radius: 50%; filter: blur(90px); background: radial-gradient(circle, rgba(29,78,216,.55), transparent 65%); }
.esg-sec::after { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -120px; bottom: -160px; border-radius: 50%; filter: blur(90px); background: radial-gradient(circle, rgba(76,159,56,.25), transparent 65%); }
.sdgw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; margin-top: 8px; }
.sdgw-wheel { position: relative; width: 100%; max-width: 480px; justify-self: center; aspect-ratio: 1; }
.sdgw-wheel svg { width: 100%; height: 100%; overflow: visible; }
.sw-ring { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 1; stroke-dasharray: 3 6; }
.sw-hub { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.14); }
.sw-seg { cursor: pointer; transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .35s; outline: none; }
.sw-seg path { transition: filter .35s; }
.sdgw.picked .sw-seg { opacity: .42; }
.sdgw.picked .sw-seg.on, .sw-seg:focus-visible { opacity: 1; transform: translate(var(--dx), var(--dy)); }
.sw-seg.on path { filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); }
.sw-num { font-family: var(--f-display); font-weight: 700; font-size: 30px; fill: #fff; text-anchor: middle; pointer-events: none; }
.sw-lbl { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .16em; fill: rgba(255,255,255,.85); text-anchor: middle; pointer-events: none; }
.sdgw-hub { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; gap: 10px; }
.sdgw-hub img { width: 104px; height: auto; margin: 0 auto; }
.sdgw-hub span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #AEB8C6; line-height: 1.5; }
.sdgw-panel { position: relative; min-height: 380px; }
.sdgw-card { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .55s cubic-bezier(.2,.7,.2,1); pointer-events: none; padding: 30px; border-radius: 24px; background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.sdgw-card::before { content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--g); }
.sdgw-card.on { opacity: 1; transform: none; pointer-events: auto; position: relative; }
.sdgw-top { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: center; }
.sdgw-card .sdg-n { width: 76px; height: 76px; border-radius: 16px; background: var(--g); color: #fff; display: grid; place-content: center; text-align: center; box-shadow: 0 16px 30px -12px var(--g); }
.sdgw-card .sdg-n b { font-family: var(--f-display); font-size: 34px; font-weight: 700; line-height: 1; }
.sdgw-card .sdg-n span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; margin-top: 3px; }
.sdgw-card small { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #9DB5FF; }
.sdgw-card h3 { margin-top: 6px; font-family: var(--f-display); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.sdgw-card > p { margin-top: 20px; font-size: 16.5px; line-height: 1.55; color: #C9D7F5; }
.sdgw-prod { margin-top: 24px; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; align-items: center; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.sdgw-prod img { width: 110px; height: 90px; object-fit: contain; border-radius: 14px; background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.95), rgba(255,255,255,.75)); padding: 8px; }
.sdgw-prod small { margin-bottom: 8px; color: #AEB8C6; }
.sdgw-prod span { display: inline-block; margin: 0 6px 6px 0; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); color: #fff; }
.sdgw-dots { display: flex; gap: 8px; margin-top: 18px; }
.sdgw-dots button { width: 26px; height: 6px; border-radius: 3px; border: 0; background: rgba(255,255,255,.18); cursor: pointer; padding: 0; transition: background .3s, width .3s; }
.sdgw-dots button[aria-current] { background: var(--g); width: 44px; }
.esg2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 64px; }
.esg2 article { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 24px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.esg2-k { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 300; font-size: 34px; color: #fff; background: linear-gradient(150deg, #1D4ED8, #0A1F4D); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.esg2 article:nth-child(1) .esg2-k { background: linear-gradient(150deg, #4C9F38, #1F5E1A); }
.esg2 article:nth-child(2) .esg2-k { background: linear-gradient(150deg, #DD3F78, #8E1F47); }
.esg2 article:nth-child(3) .esg2-k { background: linear-gradient(150deg, #C40012, #6E000A); }
.esg2 small { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #9DB5FF; }
.esg2 h4 { margin-top: 6px; font-size: 17px; line-height: 1.3; color: #fff; }
.esg2 ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 7px; }
.esg2 li { font-size: 13.5px; line-height: 1.45; color: #C9D7F5; padding-left: 16px; position: relative; }
.esg2 li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 1.5px; background: #7FA2FF; }
.esg-sec .fineprint { color: #8C97A8; }
@media (max-width: 1000px) {
  .sdgw { grid-template-columns: 1fr; gap: 28px; }
  .sdgw-wheel { max-width: 400px; }
  .esg2 { grid-template-columns: 1fr; margin-top: 40px; }
}
@media (max-width: 640px) {
  .sdgw-wheel { max-width: 300px; }
  .sw-num { font-size: 26px; }
  .sdgw-hub img { width: 76px; }
  .sdgw-hub span { font-size: 9.5px; }
  .sdgw-card { padding: 22px 18px; }
  .sdgw-card::before { left: 18px; right: 18px; }
  .sdgw-top { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; }
  .sdgw-card .sdg-n { width: 60px; height: 60px; }
  .sdgw-card .sdg-n b { font-size: 26px; }
  .sdgw-card > p { font-size: 15px; }
  .sdgw-prod { grid-template-columns: 84px minmax(0, 1fr); }
  .sdgw-prod img { width: 84px; height: 72px; }
  .esg2 article { grid-template-columns: 52px minmax(0, 1fr); padding: 20px 18px; }
  .esg2-k { width: 52px; height: 52px; font-size: 28px; }
}
/* Wheel caption above the diagram; clearer segments */
.sdgw-wheel { aspect-ratio: auto; display: grid; gap: 18px; }
.sdgw-wheel svg { aspect-ratio: 1; height: auto; }
.sdgw-cap { text-align: center; display: grid; gap: 6px; }
.sdgw-cap b { font-family: var(--f-display); font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.02em; color: #fff; }
.sdgw-cap span { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #C9D7F5; }
.sdgw-hub { inset: auto 0 0 0; aspect-ratio: 1; top: auto; }
.sdgw-hub img { width: 130px; }
.sdgw.picked .sw-seg { opacity: .68; }
.sw-lbl { font-size: 11px; fill: #fff; }
.sw-num { font-size: 34px; }
@media (max-width: 640px) { .sdgw-hub img { width: 92px; } .sw-num { font-size: 30px; } .sdgw-cap span { font-size: 11px; } }

/* ESG v3: photo-led pillars with a key figure */
.esg3-h { margin-top: 80px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.esg3-h small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: #9DB5FF; padding: 4px 10px; border: 1px solid rgba(157,181,255,.4); border-radius: 999px; }
.esg3-h h3 { font-family: var(--f-display); font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.02em; color: #fff; }
.esg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.e3 { --e: #4C9F38; position: relative; border-radius: 24px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .3s; }
.e3-soc { --e: #DD3F78; } .e3-gov { --e: #E3263A; }
.e3:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--e) 60%, transparent); }
.e3-media { position: relative; height: 210px; overflow: hidden; }
.e3-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transform: scale(1.02); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.e3:hover .e3-media img { transform: scale(1.08); }
.e3-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--e) 35%, transparent) 0%, rgba(10,16,30,.25) 45%, #0E1626 100%); mix-blend-mode: normal; }
.e3-k { position: absolute; z-index: 1; left: 22px; bottom: -18px; font-family: var(--f-display); font-weight: 700; font-size: 120px; line-height: 1; color: #fff; letter-spacing: -.04em; text-shadow: 0 10px 30px rgba(0,0,0,.35); }
.e3-k::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 30px; height: 6px; border-radius: 3px; background: var(--e); z-index: -1; opacity: .9; }
.e3-t { position: absolute; z-index: 1; right: 20px; top: 18px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff; padding: 6px 11px; border-radius: 999px; background: rgba(10,16,30,.45); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.e3-body { padding: 30px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.e3-fig { display: flex; align-items: baseline; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.e3-fig strong { font-family: var(--f-display); font-weight: 300; font-size: 44px; letter-spacing: -.04em; line-height: 1; color: var(--e); }
.e3-fig span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #AEB8C6; }
.e3 h4 { font-size: 19px; line-height: 1.3; color: #fff; }
.e3 ul { list-style: none; padding: 0; margin: 2px 0 0; display: grid; gap: 9px; }
.e3 li { font-size: 14px; line-height: 1.45; color: #C9D7F5; padding-left: 22px; position: relative; }
.e3 li::before { content: ""; position: absolute; left: 0; top: .2em; width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--e) 25%, transparent); box-shadow: inset 0 0 0 1.5px var(--e); }
.e3 li::after { content: ""; position: absolute; left: 4.5px; top: calc(.2em + 4px); width: 5px; height: 3px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg); }
@media (max-width: 1000px) { .esg3 { grid-template-columns: 1fr; } .e3 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .e3-media { height: auto; min-height: 240px; } }
@media (max-width: 640px) { .esg3-h { margin-top: 56px; } .e3 { display: flex; } .e3-media { height: 180px; min-height: 0; } .e3-k { font-size: 96px; } .e3-fig strong { font-size: 38px; } }
/* ESG illustrations: lighter overlay, focus on the scene */
.e3-media img { object-position: 50% 52%; filter: none; }
.e3-media::after { background: linear-gradient(180deg, rgba(10,16,30,0) 40%, #0E1626 100%); }
.e3-media { height: 250px; }
.e3-media img { transform: scale(1.32); transform-origin: 52% 40%; }
.e3:hover .e3-media img { transform: scale(1.4); }
@media (max-width: 640px) { .e3-media { height: 210px; } }
.e3-t { right: auto; left: 20px; }

/* Consortium: heading on top, figures stacked below */
.cons { grid-template-columns: 1fr; gap: 24px; }
.cons-h { position: relative; z-index: 1; }
.cons-h h3 { margin: 0; }
.cons-g > div:last-child:nth-child(odd) { grid-column: span 2; }

/* Header wordmark (replaces company-name text) */
.brand .brand-word { display: flex; align-items: center; align-self: stretch; padding-top: 0; padding-bottom: 0; }
.brand .brand-word img { height: 15px; width: auto; display: block; }
@media (max-width: 520px) { .brand .brand-word img { height: 12px; } }

/* Photo page hero: full-bleed, dark, clearly separated from the content below */
.phero.phero-img { background: #06122E; border-bottom: 0; min-height: clamp(460px, 62vh, 640px); display: flex; align-items: flex-end; padding-block: clamp(72px, 9vw, 120px) clamp(56px, 6vw, 88px); color: #fff; }
.phero.phero-img::before, .phero.phero-img::after { display: none; }
.phero-img .ph-bg { position: absolute; inset: 0; z-index: -1; }
.phero-img .ph-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; }
.phero-img .ph-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,18,46,.94) 0%, rgba(6,18,46,.82) 38%, rgba(10,31,77,.45) 70%, rgba(10,31,77,.2) 100%), linear-gradient(0deg, rgba(6,18,46,.6), transparent 45%); }
.phero-img .wrap { width: 100%; }
.phero-img .ph-copy { max-width: 760px; }
.phero-img .crumb, .phero-img .crumb a { color: rgba(255,255,255,.7); }
.phero-img .eyebrow { color: #9DB5FF; }
.phero-img .eyebrow::before { background: #9DB5FF; }
.phero-img .h-xl { color: #fff; }
.phero-img .lead { color: #C9D7F5; max-width: 640px; }
.phero-img .tagline { color: #fff; }
@media (max-width: 760px) {
  .phero.phero-img { min-height: 520px; }
  .phero-img .ph-bg::after { background: linear-gradient(0deg, rgba(6,18,46,.95) 0%, rgba(6,18,46,.85) 55%, rgba(10,31,77,.45) 100%); }
}

/* Parallax for photo backgrounds */
.phero-img .ph-bg { overflow: hidden; }
.phero-img .ph-bg img { position: absolute; left: 0; top: -20%; height: 140%; will-change: transform; }

/* SDG card sub-heading */
.sdgw-card h4 { margin: 18px 0 -6px; font-size: 17px; line-height: 1.3; color: #fff; }

/* Leader portraits: centred in the frame */
.leader .ph { justify-content: center; }
.leader .ph img { display: block; margin-inline: auto; max-width: 100%; object-position: 50% 100%; }
.leader .ph img { filter: none; }
.leaders { margin-inline: auto; }
@media (max-width: 860px) {
  .leaders { grid-template-columns: 1fr; max-width: 480px; }
  .leader { display: block; }
  .leader .ph { aspect-ratio: 4 / 3.4; height: auto; }
  .leader .ph img { height: 94%; }
}
#co-lead .sec-head { grid-template-columns: 1fr; justify-items: center; text-align: center; }
#co-lead .sec-head .eyebrow { justify-content: center; }
#co-lead .sec-head > div:last-child:empty { display: none; }

/* UN emblem inside the SDG caption */
.sdgw-cap b { display: inline-flex; align-items: center; justify-content: center; gap: .32em; }
.sdgw-cap .un-logo { height: 1.25em; width: auto; display: inline-block; }

/* Full-colour partner and customer logos */
.cl-light .cl-slot img, .eg-row img, .eg-t.eg-mk img { filter: none; opacity: 1; mix-blend-mode: multiply; }
.cl-light .cl-slot img.out { filter: blur(6px); opacity: 0; }
.cl-light .cl-slot img.in-start { filter: blur(6px); opacity: 0; }

/* Mobile header: logo lockup on the left, menu button on the right */
@media (max-width: 1180px) {
  .hdr-in { grid-template-columns: minmax(0, 1fr) auto; }
  .hdr-in .brand { grid-column: 1; justify-self: start; }
  .hdr-r { grid-column: 2; }
}

/* Mobile drawer: calmer type, full-width call to action */
.drawer { padding-top: 8px; gap: 0; }
.drawer > a:not(.btn), .drawer summary { font-size: 18px; font-weight: 600; padding: 14px 0; }
.drawer > a:not(.btn) { border-bottom: 1px solid var(--line); }
.drawer summary::after { font-size: 18px; }
.drawer details a { font-size: 15px; padding: 9px 0 9px 14px; color: var(--slate); }
.drawer details[open] { padding-bottom: 8px; }
.drawer .btn { font-family: var(--f-body); font-size: 15px; font-weight: 600; height: 48px; padding: 0 22px; border-bottom: 0; margin-top: 24px; align-self: stretch; justify-content: center; }

/* Case-study slider buttons (mobile only) */
.fan-nav { display: none; }
@media (max-width: 760px) {
  .fan-nav { display: flex; justify-content: flex-end; margin-top: 14px; }
  .fan-nav button.is-end { opacity: .35; }
}

/* Mobile case slider: room for card shadows so nothing is clipped */
@media (max-width: 760px) {
  .fan, .fan-6 { padding: 18px 20px 40px; margin: -18px -20px -26px; scroll-padding-inline: 20px; overflow-y: visible; }
  .fan:hover .fcard { filter: none; }
  .fcard { box-shadow: 0 14px 30px rgba(12,32,80,.12); }
}
.sdgw-cap b { gap: .5em; }
.sdgw-cap .un-sep { display: inline-block; width: 1px; height: 1.1em; background: rgba(255,255,255,.35); }

/* Skip tour: a clear, high-contrast control */
.tour-skip { background: var(--blue, #1D4ED8); color: #fff; border: 1px solid var(--blue, #1D4ED8); font-size: 12px; font-weight: 600; letter-spacing: .1em; padding: 11px 18px; box-shadow: 0 10px 24px rgba(29,78,216,.32); transition: background .2s, transform .2s, box-shadow .2s; }
.tour-skip:hover { background: #0A1F4D; border-color: #0A1F4D; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(10,31,77,.35); }
.tour-skip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--blue, #1D4ED8); }
@media (max-width: 760px) { .tour-skip { font-size: 11px; padding: 9px 14px; } }

/* Contact form validation */
.form input.is-invalid, .form textarea.is-invalid, .form select.is-invalid { border-color: #EF4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.22) !important; }
.form .f-err { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 500; color: #DC2626; }
.form.glass .f-err { color: #FCA5A5; }
.form .ok a { color: inherit; text-decoration: underline; }

/* Select arrow: custom chevron set in from the edge */
.form select { -webkit-appearance: none; appearance: none; padding-right: 44px; background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230C1420' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.form.glass select, .form.glass select:focus { background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23E6ECF5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Language toggle (EN / ID) */
.lang-tg { display: inline-flex; align-items: center; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--white, #fff); flex: none; }
.lang-tg button { appearance: none; border: 0; background: transparent; font: 600 12px/1 var(--f-body); letter-spacing: .04em; color: var(--slate); padding: 8px 10px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.lang-tg button:hover { color: var(--ink); }
.lang-tg button.on { background: var(--ink, #0C1420); color: #fff; }
.lang-tg button:focus-visible { outline: 2px solid var(--blue, #1D4ED8); outline-offset: 2px; }
@media (max-width: 1180px) { .hdr-r { gap: 10px; } .lang-tg button { padding: 8px 9px; font-size: 11.5px; } }
/* Desktop header with language toggle: keep the centred logo clear of the right-hand nav */
@media (min-width: 1181px) {
  .hdr-in { gap: 16px; }
  .hdr-r { gap: 8px; }
  .hdr .lang-tg button { padding: 7px 8px; font-size: 11.5px; }
  .hdr .btn-cta { padding-inline: 16px; }
}
@media (min-width: 1181px) and (max-width: 1500px) {
  .nav-top { padding: 8px 10px; font-size: 14px; }
  .hdr .btn-cta { font-size: 13.5px; padding-inline: 14px; }
  .brand .brand-word img { height: 13px; }
  .brand { gap: 9px; }
  .brand > img { height: 22px; }
}
@media (min-width: 1181px) {
  .hdr-in { grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; }
}

/* Cookie notice (bottom-left) */
.ck { position: fixed; z-index: 80; left: max(20px, env(safe-area-inset-left, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px)); width: min(400px, calc(100vw - 40px)); display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 18px 18px 18px 16px; border-radius: 18px; color: #E6ECF5; background: linear-gradient(160deg, rgba(6,18,46,.96), rgba(10,31,77,.96) 60%, rgba(18,52,143,.96)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 60px rgba(6,18,46,.35), inset 0 1px 0 rgba(255,255,255,.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transform: translateY(16px); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.ck.on { opacity: 1; transform: none; }
.ck-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #9DB5FF; background: rgba(157,181,255,.12); border: 1px solid rgba(157,181,255,.22); }
.ck-t { margin: 0; font-size: 14px; line-height: 1.55; color: #E6ECF5; }
.ck-more { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: #9DB5FF; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ck-more:hover { color: #fff; }
.ck-detail { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: #AEB8C6; }
.ck-btns { display: flex; gap: 10px; margin-top: 14px; }
.ck .btn { height: 40px; padding: 0 20px; font-size: 14px; }
.ck .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.28); }
.ck .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }
.ck button:focus-visible { outline: 2px solid #9DB5FF; outline-offset: 2px; }
@media (max-width: 520px) { .ck { left: 12px; right: 12px; bottom: 12px; width: auto; } .ck .btn { flex: 1; justify-content: center; } }

/* Skip tour: lifted off the bottom edge, gentle breathing glow */
@media (min-width: 761px) { .tour-skip { bottom: 40px; } }
@keyframes skipBreath {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 24px rgba(29,78,216,.32), 0 0 0 0 rgba(29,78,216,.38); }
  50% { transform: scale(1.04); box-shadow: 0 14px 30px rgba(29,78,216,.4), 0 0 0 10px rgba(29,78,216,0); }
}
.tour-skip { animation: skipBreath 2.8s ease-in-out infinite; }
.tour-skip:hover, .tour-skip:focus-visible { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .tour-skip { animation: none; } }
@media (min-width: 761px) { .tour-meta { bottom: 46px; } }