/* ==========================================================================
   AJRITHE AEROSPACE: site stylesheet (v3)
   Look: the engineering-sheet design from draft 1 (globe, plan views, title
   block, figure plates), in the brand colours and font from the client's
   logo document: white, red #FF0000, dark grey #7B7B7B, Aptos Display.
   ========================================================================== */

:root {
  --paper: #FFFFFF;
  --paper-2: #F4F4F4;
  --plate: #FFFFFF;
  --ink: #141414;
  --ink-2: #3B3B3B;
  --muted: #5C5C5C;             /* small secondary text (accessible on white) */
  --grey: #7B7B7B;              /* brand dark grey: rules, icons, large text */
  --rule: #DADADA;
  --rule-strong: #141414;
  --red: #FF0000;               /* brand red */
  --red-text: #D10000;          /* brand red, darkened for small text on white */
  --red-hover: #D80000;
  --band: #161616;              /* the one dark band */
  --band-2: #2A2A2A;
  --on-band: #F2F2F2;
  --on-band-2: #B8B8B8;
  --shadow: 0 18px 40px -24px rgba(0, 0, 0, .35);

  --f-display: "Aptos Display", "Aptos", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body: "Aptos", "Aptos Display", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --t-xs: .75rem;
  --t-sm: .875rem;
  --t-base: 1.0625rem;
  --t-md: 1.2rem;
  --t-lg: 1.55rem;
  --t-xl: clamp(1.9rem, 3.2vw, 2.7rem);
  --t-2xl: clamp(2.2rem, 4.6vw, 3.8rem);
  --t-hero: clamp(2.4rem, 5.2vw, 4.5rem);

  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1320px;
  --hdr-h: 76px;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: clamp(3.5rem, 7vw, 6rem);
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); }
/* No global smooth scroll: in-page jumps land instantly, which reads as faster.
   The slider still animates, because its script asks for it explicitly. */
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: var(--t-base); line-height: 1.62; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--red-text); }
h1, h2, h3 { margin: 0; font-family: var(--f-display); text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
::selection { background: var(--red); color: #fff; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; }
.skip:focus { top: 12px; }
.ic { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.15em; }
.pl { color: var(--ink); }

/* Mono utility labels */
.eyebrow, .fig-no, .crumbs, .toc-h, .ftr-h, .label, .count, .plat-n, .c-k {
  font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.eyebrow { color: var(--red-text); display: flex; align-items: center; gap: .75rem; margin-bottom: var(--sp-2); }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--red); }

/* Headings */
.h-sec { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.005em; line-height: 1.15; }
.h-big { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.015em; line-height: 1.08; }
.h-caps { text-transform: uppercase; letter-spacing: .01em; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 46px; padding: .6rem 1.2rem;
  font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s;
}
.btn .ic { transition: transform .18s; }
.btn:hover .ic { transform: translateX(3px); }
.btn-red { background: var(--red); border-color: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-hover); border-color: var(--red-hover); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-white { background: #fff; border-color: #fff; color: var(--ink); }
.btn-white:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-sm { min-height: 40px; padding: .45rem .9rem; font-size: var(--t-xs); }
.more {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--red); padding-bottom: 2px;
}
.more:hover { color: var(--red-text); }
.more .ic { width: 1em; height: 1em; transition: transform .18s; }
.more:hover .ic { transform: translateX(3px); }
.more-light { color: var(--on-band); }
.more-light:hover { color: #fff; }

/* ---------- Scroll progress (red top rule) ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
@supports (animation-timeline: scroll()) {
  .progress span { animation: progress-grow linear both; animation-timeline: scroll(root block); }
  @keyframes progress-grow { to { transform: scaleX(1); } }
}

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid transparent; transition: border-color .2s; }
.hdr.is-scrolled { border-bottom-color: var(--rule); }
.hdr-in { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--hdr-h); }

.brand { display: inline-flex; align-items: flex-end; gap: .5rem; margin-right: auto; flex: none; text-decoration: none; }
.brand-mark { width: auto; height: 34px; }
.brand-name { font-family: var(--f-display); font-weight: 700; font-size: 27px; line-height: .78; color: var(--red); white-space: nowrap; }
.brand-sm .brand-mark { height: 26px; }
.brand-sm .brand-name { font-size: 21px; }
@media (max-width: 520px) { .brand-mark { height: 24px; } .brand-name { font-size: 18px; } }

.nav { display: flex; align-items: center; gap: var(--sp-3); }
.nav-list { list-style: none; display: flex; align-items: center; gap: .1rem; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: .3rem; padding: .65rem .65rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-mono); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; color: var(--ink);
}
.nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--red-text); }
.nav-trigger[data-active="true"] { box-shadow: inset 0 -2px 0 var(--red); }
.ic-chev { width: .9em; height: .9em; transition: transform .2s; }
.nav-trigger[aria-expanded="true"] .ic-chev { transform: rotate(180deg); }
.nav-cta { display: flex; align-items: center; gap: var(--sp-2); }
.hdr-phone { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--f-mono); font-size: .8125rem; text-decoration: none; white-space: nowrap; }
.nav-toggle { display: none; }

.menu { display: none; }
.menu ul { list-style: none; }
.menu a { display: block; padding: .42rem 0; text-decoration: none; color: var(--ink); font-size: .95rem; line-height: 1.35; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--red-text); }
.menu-icons a { display: flex; align-items: center; gap: .75rem; }
.menu-icons .pl { width: 32px; height: 32px; }
.menu-all { display: inline-flex !important; align-items: center; gap: .45rem; margin-top: .75rem; padding-top: .75rem !important; border-top: 1px solid var(--rule); width: 100%; font-family: var(--f-mono); font-size: var(--t-xs) !important; letter-spacing: .06em; text-transform: uppercase; }

@media (min-width: 1181px) {
  .has-menu { position: relative; }
  .menu { position: absolute; top: calc(100% + 12px); left: 0; z-index: 40; min-width: 250px; padding: 1.1rem 1.3rem; background: #fff; border: 1px solid var(--rule-strong); box-shadow: var(--shadow); }
  .menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .menu-wide .menu ul:not(.menu-icons) { columns: 2; column-gap: 2rem; width: 560px; }
  .menu-wide .menu li { break-inside: avoid; }
  .nav-trigger[aria-expanded="true"] + .menu { display: block; }
}
@media (min-width: 1181px) and (hover: hover) {
  .has-menu:hover > .menu, .has-menu:focus-within > .menu { display: block; }
}
@media (max-width: 1180px) {
  .nav-toggle { display: inline-grid; place-items: center; width: 46px; height: 46px; background: none; border: 1px solid var(--ink); border-radius: 2px; cursor: pointer; }
  .nav-toggle .ic-close { display: none; }
  .nav-toggle[aria-expanded="true"] .ic-open { display: none; }
  .nav-toggle[aria-expanded="true"] .ic-close { display: inline; }
  .nav { display: none; position: fixed; left: 0; right: 0; top: var(--hdr-h); bottom: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-top: 1px solid var(--rule); overflow-y: auto; overscroll-behavior: contain; padding: .5rem var(--gutter) 2rem; }
  .nav.is-open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; }
  .nav-item { border-bottom: 1px solid var(--rule); }
  .nav-trigger { width: 100%; justify-content: space-between; padding: 1rem 0; font-size: .9rem; }
  .nav-trigger[data-active="true"] { box-shadow: none; color: var(--red-text); }
  .nav-trigger[aria-expanded="true"] + .menu { display: block; padding: 0 0 .9rem; }
  .nav-cta { flex-direction: column; align-items: stretch; margin-top: var(--sp-3); }
  .nav-cta .btn { justify-content: center; }
  .hdr-phone { padding: .6rem 0; font-size: var(--t-base); }
  body.nav-lock { overflow: hidden; }
}

/* ---------- Hero ---------- */
.hero { border-bottom: 1px solid var(--rule); overflow: hidden; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--sp-4); align-items: center; padding-block: clamp(2.5rem, 5.5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem); }
.hero-name { font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 600; letter-spacing: .1em; margin-bottom: 1.1rem; }
.hero-h { font-size: var(--t-hero); font-weight: 700; line-height: .98; letter-spacing: -.025em; display: grid; gap: .08em; }
.hero-line { display: block; }
.hero-end { white-space: nowrap; }
.hero-end::after { content: ""; display: inline-block; width: .16em; height: .16em; margin-left: .06em; background: var(--red); vertical-align: baseline; }
.hero-line:nth-child(2) { padding-left: .55em; }
.hero-line:nth-child(3) { padding-left: 1.1em; }
.hero-sectors { display: inline-block; margin-top: var(--sp-3); padding-top: .7rem; border-top: 2px solid var(--ink); font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.hero-sub { margin-top: .35rem; max-width: 50ch; color: var(--ink-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--sp-4); }
.hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--sp-5) 0 0; border-top: 1px solid var(--rule-strong); max-width: 440px; }
.hero-facts div { padding: .7rem .75rem 0 0; }
.hero-facts div + div { padding-left: .75rem; border-left: 1px solid var(--rule); }
.hero-facts dt { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hero-facts dd { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 2.3rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-globe { margin: 0; justify-self: end; width: 100%; max-width: 520px; }
.hero-globe figcaption { margin-top: .6rem; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }
@media (max-width: 960px) { .hero-in { grid-template-columns: 1fr; } .hero-globe { justify-self: center; max-width: 430px; } }
@media (max-width: 520px) { .hero-line:nth-child(2), .hero-line:nth-child(3) { padding-left: 0; } .hero-facts dd { font-size: 1.9rem; } }

/* Globe */
.globe { display: block; width: 100%; height: auto; overflow: visible; }
.gl-sea { fill: var(--paper-2); }
.gl-grat { fill: none; stroke: #D2D2D2; stroke-width: .8; }
.gl-eq { fill: none; stroke: var(--grey); stroke-width: .8; stroke-dasharray: 3 4; }
.gl-limb { fill: none; stroke: var(--ink); stroke-width: 1.3; }
.gl-ticks { fill: none; stroke: var(--grey); stroke-width: 1; }
.gl-route { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; }
.gl-route-3 { stroke: var(--grey); stroke-width: 1.4; stroke-dasharray: .012 .012; }
.gl-mover { fill: var(--red); }
.gl-dot { fill: var(--ink); stroke: var(--paper-2); stroke-width: 2; }
.gl-home .gl-dot { fill: var(--red); }
.gl-pulse { fill: none; stroke: var(--red); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.gl-code, .gl-city { paint-order: stroke; stroke: var(--paper-2); stroke-width: 4px; stroke-linejoin: round; }
.gl-code { font-family: var(--f-mono); font-size: 14px; font-weight: 600; letter-spacing: .06em; fill: var(--ink); }
.gl-home .gl-code { fill: var(--red-text); font-size: 16px; }
.gl-city { font-family: var(--f-mono); font-size: 10px; fill: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .gl-route-1, .gl-route-2 { stroke-dasharray: 1; stroke-dashoffset: 1; animation: route-draw 1.8s cubic-bezier(.6, 0, .2, 1) .3s forwards; }
  .gl-route-2 { animation-delay: .8s; }
  @keyframes route-draw { to { stroke-dashoffset: 0; } }
  .gl-pulse { animation: pulse 2.4s ease-out infinite; }
  @keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .gl-mover { display: none; } }

/* ---------- Section scaffolding ---------- */
.sec { padding-block: var(--sp-6); border-top: 1px solid var(--rule-strong); }
.sec-alt { background: var(--paper-2); }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4); }
.sec-note { max-width: 58ch; color: var(--ink-2); }

/* Platform strip */
.platstrip { padding-block: var(--sp-5); }
/* Columns follow the number of platforms rather than a fixed 5, so removing one
   does not leave a hole on the right. */
.plat-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.plat-grid > li + li { border-left: 1px solid var(--rule); }
.plat { display: flex; flex-direction: column; gap: .45rem; height: 100%; padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; text-decoration: none; color: var(--ink); }
.plat-grid > li + li .plat { padding-left: var(--sp-3); }
.plat-ic { width: 78px; height: 78px; margin-bottom: .75rem; transition: transform .35s cubic-bezier(.3, .7, .2, 1), color .2s; }
.plat:hover { color: var(--ink); }
.plat:hover .plat-ic { color: var(--red); transform: translateY(-4px) rotate(-4deg); }
.plat-t { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.plat-s { color: var(--muted); font-size: var(--t-sm); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.plat-n { margin-top: auto; padding-top: .75rem; color: var(--red-text); }
@media (max-width: 900px) {
  .plat-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(220px, 62%); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .plat-grid > li { scroll-snap-align: start; }
}

/* Offerings slider: one panel at a time, equal height */
.slider-bar { display: flex; align-items: center; gap: 1rem; }
.count { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
.count b { color: var(--ink); font-weight: 600; }
.slider-btn { width: 44px; height: 44px; display: grid; place-items: center; background: #fff; border: 1px solid var(--ink); border-radius: 2px; cursor: pointer; color: var(--ink); }
.slider-btn:hover { background: var(--ink); color: #fff; }
.slider {
  list-style: none; display: flex; gap: var(--sp-4);
  overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none;
  border-top: 1px solid var(--rule-strong);
}
.slider::-webkit-scrollbar { display: none; }
.slider:focus-visible { outline-offset: 4px; }
.slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-4); align-items: center; padding-top: var(--sp-4); }
.slide-fig { margin: 0; }
.slide-body { align-self: center; }
.slide-t { font-size: clamp(1.55rem, 2.5vw, 2.1rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.05; margin-bottom: 1rem; }
.slide-t a { text-decoration: none; }
.slide-t a:hover { color: var(--red-text); }
.slide-body p { color: var(--ink-2); max-width: 60ch; }
.slide-body p + p { margin-top: .6rem; }
.slide-body .list { margin-top: .9rem; font-size: .97rem; }
.slide-body .more { margin-top: 1.4rem; }
.slider-progress { height: 2px; background: var(--rule); margin-top: var(--sp-4); }
.slider-progress span { display: block; height: 100%; width: 0; background: var(--red); transition: width .4s; }
@media (max-width: 860px) { .slide { grid-template-columns: 1fr; gap: var(--sp-3); } .slide-t { font-size: 1.7rem; } }

/* All offerings index */
.all-off { margin-top: var(--sp-5); }
.all-off .label { color: var(--muted); display: block; margin-bottom: .75rem; }
.olist { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sp-4); border-top: 1px solid var(--rule); }
.olist a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-weight: 500; }
.olist .ic { color: var(--grey); transition: transform .2s, color .2s; }
.olist a:hover .ic { color: var(--red); transform: translateX(4px); }
@media (max-width: 900px) { .olist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .olist { grid-template-columns: 1fr; } }

/* Dark band: STC flowchart */
.band { background: var(--band); color: var(--on-band); padding-block: var(--sp-6); }
.band .eyebrow { color: #FF6666; }
.band .sec-note { color: var(--on-band-2); }
.steps-row { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-3); }
.steps-row .step { position: relative; border-top: 2px solid #3A3A3A; padding-top: var(--sp-3); }
.steps-row .step::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; background: var(--red); }
.step-no { display: block; font-family: var(--f-display); font-weight: 700; font-size: 2.2rem; line-height: 1; color: #FF4D4D; font-variant-numeric: tabular-nums; margin-bottom: .8rem; }
.steps-row .step-t { font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin-bottom: .5rem; }
.steps-row ul { list-style: none; display: grid; gap: .35rem; color: var(--on-band-2); font-size: var(--t-sm); line-height: 1.5; }
.steps-row li::before { content: "– "; color: #FF4D4D; }
.band .more { margin-top: var(--sp-4); }
@media (max-width: 1180px) { .steps-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-4); } }
@media (max-width: 640px) { .steps-row { grid-template-columns: 1fr; } }

/* Why us */
.why-title .q { color: var(--red); }
.pillars { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.pillar { border-top: 2px solid var(--rule-strong); padding-top: var(--sp-3); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 1.1rem; align-items: start; }
.pillar-body { min-width: 0; }
.pillar-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--red); color: var(--red); }
.pillar-ic .ic { width: 22px; height: 22px; }
.pillar-t { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; margin-bottom: .55rem; }
.pillar p { color: var(--ink-2); font-size: .98rem; }
.assure { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--sp-5); border-block: 1px solid var(--rule); }
.assure li { display: flex; gap: .9rem; align-items: flex-start; padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; }
.assure li + li { border-left: 1px solid var(--rule); padding-left: var(--sp-3); }
.assure .ic { width: 26px; height: 26px; color: var(--grey); margin-top: .1rem; }
.assure-t { display: block; font-weight: 700; }
.assure-d { display: block; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .03em; color: var(--muted); }
.tagline { margin-top: var(--sp-4); text-align: center; }
.tagline-1 { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; }
.tagline-2 { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: .35rem; }
.tagline-3 { margin-top: .55rem; font-family: var(--f-mono); font-size: clamp(.66rem, .95vw, .8rem); letter-spacing: .05em; color: var(--muted); }
@media (max-width: 1000px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .pillars, .assure { grid-template-columns: 1fr; }
  .assure li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
}

/* Markets rail */
.rail-ctl { display: flex; gap: .5rem; }
.rail { overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--grey) transparent; }
.rail-track { list-style: none; display: flex; gap: var(--sp-3); width: max-content; padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); padding-bottom: var(--sp-3); }
.rail-item { width: clamp(260px, 27vw, 360px); scroll-snap-align: start; scroll-margin-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
.mcard { display: flex; flex-direction: column; gap: .45rem; height: 100%; text-decoration: none; color: var(--ink); }
.mcard-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--plate); border: 1px solid var(--rule); margin-bottom: .5rem; max-width: 100%; }
.mcard-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s cubic-bezier(.3, .7, .2, 1); }
.mcard:hover img { transform: scale(1.04); }
.mcard-type { display: grid; place-items: center; height: 100%; padding: 1rem; background: var(--paper-2); color: var(--grey); font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; text-align: center; }
.mcard-t { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; }
.mcard:hover .mcard-t { color: var(--red-text); }
.mcard-s { color: var(--muted); font-size: var(--t-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Enquiry band */
.cta { background: var(--red); color: #fff; padding-block: var(--sp-5); }
.cta-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-4); align-items: end; }
.cta-h { font-family: var(--f-display); font-weight: 700; font-size: var(--t-xl); line-height: 1.1; letter-spacing: -.015em; max-width: 22ch; }
.cta-sub { margin-top: .6rem; font-weight: 600; font-size: 1.1rem; }
.cta-actions { display: grid; gap: .8rem; justify-items: start; }
.cta-line { display: inline-flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font-family: var(--f-mono); font-size: var(--t-base); font-weight: 600; }
.cta-line:hover { color: #fff; text-decoration: underline; }
@media (max-width: 800px) { .cta-in { grid-template-columns: 1fr; } }

/* ---------- Inner page head ---------- */
.phead { border-bottom: 1px solid var(--rule); }
.phead-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: var(--sp-4); padding-block: clamp(2rem, 4.5vw, 3.5rem); align-items: end; }
.phead-in:has(> .phead-main:only-child) { grid-template-columns: 1fr; }
.phead h1 { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.02; }
.phead .lead { margin-top: var(--sp-3); font-size: var(--t-md); line-height: 1.5; color: var(--ink-2); max-width: 64ch; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .6rem; margin-bottom: var(--sp-3); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: .6rem; color: var(--rule); }
.crumbs a { text-decoration: none; }
.crumbs [aria-current] { color: var(--red-text); }
.facts { margin: 0; border-left: 1px solid var(--rule-strong); }
.facts div { padding: .6rem 0 .6rem var(--sp-2); }
.facts dt { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: .35rem 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-block; padding: .2rem .55rem; border: 1px solid var(--ink); font-family: var(--f-mono); font-size: var(--t-xs); text-decoration: none; border-radius: 2px; }
.chip:hover { background: var(--ink); color: #fff; }
.plan-view { display: grid; justify-items: center; gap: .5rem; padding: var(--sp-3); border: 1px solid var(--rule);
  background: linear-gradient(var(--rule) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, var(--rule) 1px, transparent 1px) 0 0 / 20px 20px; }
.plan-ic { width: min(190px, 60vw); height: auto; aspect-ratio: 1; background: #fff; border-radius: 50%; padding: 8px; }
.plan-cap { font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; background: #fff; padding: .1rem .4rem; }
@media (max-width: 860px) { .phead-in { grid-template-columns: 1fr; } }

/* ---------- Document layout ---------- */
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-5); padding-block: var(--sp-5); align-items: start; }
.doc-single { grid-template-columns: minmax(0, 900px); }
.doc-main { min-width: 0; max-width: 880px; }
/* The sidebar holds two lists. Making each one sticky pinned them to the same
   offset so they scrolled on top of each other. The container sticks instead. */
.doc-side { position: sticky; top: calc(var(--hdr-h) + 24px); }
.toc { border-top: 1px solid var(--rule-strong); padding-top: .9rem; }
.toc-h { color: var(--muted); margin-bottom: .5rem; }
.toc ol { list-style: none; display: grid; }
.toc a { display: block; padding: .38rem 0 .38rem .75rem; border-left: 2px solid var(--rule); text-decoration: none; font-size: var(--t-sm); color: var(--muted); line-height: 1.35; }
.toc a:hover { color: var(--ink); }
.toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--red); font-weight: 600; }
.toc-sec { margin-top: var(--sp-4); }
@media (max-width: 960px) { .doc { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } .doc-side { order: 2; position: static; } .toc-page { display: none; } }

/* Content blocks (client text) */
.content > * + * { margin-top: 1.1rem; }
.content p { color: var(--ink-2); max-width: 70ch; }
.content strong { color: var(--ink); }
.content h2 { margin-top: var(--sp-5); font-size: var(--t-lg); font-weight: 700; letter-spacing: -.005em; padding-top: var(--sp-2); border-top: 1px solid var(--rule-strong); }
.content h3 { margin-top: var(--sp-4); font-size: 1.15rem; font-weight: 700; }
.content h2 + *, .content h3 + * { margin-top: .9rem; }
.content > :first-child { margin-top: 0; }
.list { list-style: none; display: grid; gap: .55rem; }
.list li { position: relative; padding-left: 1.2rem; color: var(--ink-2); }
.list li::before { content: ""; position: absolute; left: 0; top: .66em; width: 6px; height: 6px; background: var(--red); }
ol.list { counter-reset: n; }
ol.list li { padding-left: 2rem; counter-increment: n; }
ol.list li::before { content: counter(n, decimal-leading-zero); width: auto; height: auto; top: .1em; background: none; font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 600; color: var(--red-text); }
ol.list-alpha li::before { content: counter(n, upper-alpha); }
.fig { margin: var(--sp-4) 0 0; }
.fig-plate { background: var(--plate); border: 1px solid var(--rule); padding: clamp(6px, 1.2vw, 14px); }
/* Every content image is exactly 3:2, so the picture fills its plate edge to edge.
   No max-height and no object-fit, both of which letterboxed a mismatched shape
   and produced the small-picture-in-a-big-box look. */
.fig-plate img { display: block; width: 100%; height: auto; }
.fig figcaption { display: flex; gap: .6rem; margin-top: .55rem; font-size: var(--t-sm); color: var(--muted); line-height: 1.4; }
.fig-no { color: var(--red-text); white-space: nowrap; padding-top: .1em; }

/* Numbered flow (STC phases, MRO workflow) */
.steps { list-style: none; display: grid; }
.steps .step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--sp-2); padding-block: 1.1rem; border-top: 1px solid var(--rule); }
.steps .step:last-child { border-bottom: 1px solid var(--rule); }
.steps .step-no { font-size: 1.6rem; color: var(--red-text); margin: 0; }
.steps .step-t { font-size: 1.05rem !important; font-weight: 700; margin: 0 0 .35rem !important; padding: 0 !important; border: 0 !important; }
.steps ul { list-style: none; display: grid; gap: .3rem; color: var(--muted); font-size: .97rem; }
.steps ul li::before { content: "– "; color: var(--red-text); }

/* Boxes (2 x 2) */
.boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-4); }
.box { border-top: 2px solid var(--rule-strong); padding-top: var(--sp-2); }
.box h3 { margin: 0 0 .5rem !important; font-size: 1.1rem; }
@media (max-width: 700px) { .boxes { grid-template-columns: 1fr; } }

/* Placeholder */
.soon { border: 1px dashed var(--grey); background: var(--paper-2); padding: var(--sp-3); display: grid; gap: .25rem; }
.soon-t { font-family: var(--f-mono); font-size: var(--t-xs) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--red-text) !important; font-weight: 600; }
.soon-w { font-family: var(--f-display); font-weight: 700; color: var(--ink) !important; font-size: 1.1rem; }

/* Platform services */
.svc-list { list-style: none; border-top: 1px solid var(--rule-strong); margin-top: var(--sp-3) !important; }
.svc { position: relative; display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: .25rem var(--sp-3); padding: 1.1rem 2.5rem 1.1rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.svc-t { font-weight: 700; }
.svc-d { color: var(--ink-2); }
.svc-ic { position: absolute; right: 0; top: 1.25rem; color: var(--grey); transition: transform .2s, color .2s; }
.svc:hover { color: var(--ink); }
.svc:hover .svc-t { color: var(--red-text); }
.svc:hover .svc-ic { transform: translateX(4px); color: var(--red); }
@media (max-width: 640px) { .svc { grid-template-columns: 1fr; } }

/* Index cards */
.ocards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); padding-block: var(--sp-5); }
.ocard { display: flex; flex-direction: column; gap: .45rem; height: 100%; text-decoration: none; color: var(--ink); }
.ocard-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--plate); border: 1px solid var(--rule); margin-bottom: .5rem; max-width: 100%; }
.ocard-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s cubic-bezier(.3, .7, .2, 1); }
.ocard:hover img { transform: scale(1.03); }
.ocard-t { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
.ocard:hover .ocard-t { color: var(--red-text); }
.ocard-s { color: var(--muted); font-size: var(--t-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ocard .more { margin-top: auto; padding-top: .5rem; align-self: flex-start; }
.index-intro { padding-top: var(--sp-4); }
@media (max-width: 1000px) { .ocards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ocards { grid-template-columns: 1fr; } }

/* Leadership */
.leader { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.leader-card { position: sticky; top: calc(var(--hdr-h) + 24px); }
.photo-soon { display: grid; place-items: center; align-content: center; gap: .5rem; aspect-ratio: 3 / 4; background: var(--paper-2); border: 1px dashed var(--grey); color: var(--grey); text-align: center; }
.photo-soon .ic { width: 64px; height: 64px; }
.photo-soon span { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; }
/* No fixed aspect and no cropping: the frame takes the photograph as it is, so a
   portrait can never lose a chin to a square box again. */
.leader-photo { display: block; width: 100%; height: auto; }
.leader-name { font-size: var(--t-xl); font-weight: 700; margin-top: var(--sp-3); letter-spacing: -.015em; }
.leader-role { font-family: var(--f-mono); font-size: var(--t-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--red-text); margin-top: .5rem; }
.fn-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); border-top: 1px solid var(--rule-strong); margin-top: var(--sp-5) !important; }
.fn-list li { display: grid; gap: .15rem; padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; border-bottom: 1px solid var(--rule); }
.fn-role { font-weight: 700; }
.fn-soon { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 860px) { .leader { grid-template-columns: 1fr; } .leader-card { position: static; max-width: 300px; } }

/* Career */
.jobs { display: grid; margin-top: var(--sp-4) !important; border-top: 1px solid var(--rule-strong); }
.job { border-bottom: 1px solid var(--rule); }
.job summary { position: relative; display: grid; gap: .2rem; padding: 1.2rem 3rem 1.2rem 0; cursor: pointer; list-style: none; }
.job summary::-webkit-details-marker { display: none; }
.job-t { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; }
.job-sub { color: var(--ink-2); }
.job-loc { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.job-toggle { position: absolute; right: 0; top: 1.3rem; color: var(--red); transition: transform .2s; }
.job[open] .job-toggle { transform: rotate(45deg); }
.job-body { padding-bottom: var(--sp-4); }
.job-body > * + * { margin-top: .9rem; }
.job-body h3 { margin-top: var(--sp-3); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .1em; color: var(--red-text); font-weight: 600; }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--sp-5); padding-block: var(--sp-5); align-items: start; }
.c-lines { list-style: none; border-top: 1px solid var(--rule-strong); margin-top: var(--sp-3); }
.c-lines li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: var(--sp-2); padding-block: .9rem; border-bottom: 1px solid var(--rule); align-items: baseline; }
.c-k { color: var(--muted); }
.c-v { font-size: var(--t-md); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
a.c-v:hover { color: var(--red-text); }
.c-closing { margin-top: var(--sp-3); color: var(--ink-2); font-weight: 600; }
.contact-intro { font-family: var(--f-display); font-weight: 700; font-size: var(--t-lg); line-height: 1.2; margin-bottom: var(--sp-3); }
.cform { display: grid; gap: var(--sp-3); }
.f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.f { display: grid; gap: .4rem; }
.f label { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.req { color: var(--red-text); }
.f input, .f select, .f textarea { width: 100%; min-height: 48px; padding: .65rem .8rem; background: #fff; color: var(--ink); border: 1px solid #8A8A8A; border-radius: 2px; }
.f textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--ink); }
.f [aria-invalid="true"] { border: 2px solid var(--red-text); }
.f-err, .f-status { color: #B00000; font-size: var(--t-sm); font-weight: 600; }
.f-status:empty { display: none; }
.f-hint { color: var(--muted); }
.f-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { display: flex; gap: .75rem; align-items: center; padding: var(--sp-2) var(--sp-3); border: 1px solid; margin-bottom: var(--sp-3); font-weight: 600; }
.notice-ok { border-color: var(--ink); }
.notice-ok .ic { color: var(--red); }
.notice-err { border-color: #B00000; color: #B00000; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } .contact-main { order: -1; } }
@media (max-width: 560px) { .f-row { grid-template-columns: 1fr; } }

/* ---------- Footer & title block ---------- */
.ftr { background: var(--paper-2); border-top: 1px solid var(--rule-strong); padding-block: var(--sp-5) var(--sp-3); font-size: var(--t-sm); }
.ftr-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); }
.ftr-legal-name { margin-top: var(--sp-2); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .06em; font-weight: 600; }
.ftr-contact { list-style: none; display: grid; gap: .45rem; margin-top: var(--sp-2); }
.ftr-contact a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-family: var(--f-mono); overflow-wrap: anywhere; }
.ftr-contact .ic { color: var(--red); }
.ftr-h { color: var(--red-text); margin-bottom: .6rem; }
.ftr-nav ul { list-style: none; display: grid; gap: .3rem; }
.ftr-nav a { text-decoration: none; color: var(--ink-2); }
.ftr-nav a:hover { color: var(--red-text); }
.ftr-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-top: var(--sp-2); color: var(--muted); font-size: var(--t-xs); }
.ftr-legal a { color: var(--muted); }
@media (max-width: 1180px) { .ftr-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ftr-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .ftr-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- No scroll-linked motion ----------
   Cards, figures and steps used to rise 20px as they entered the screen. That made
   those sections travel faster than the scroll itself, so the page felt quick over
   them and normal elsewhere. Content now moves exactly with the scroll. */

@media print { .hdr, .progress, .cta, .slider-bar, .rail-ctl, .toc, .nav-toggle { display: none !important; } }
.mk-note { margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); }
.slider-btn:disabled { opacity: .35; cursor: default; background: #fff; color: var(--ink); }
.leader-bio .gap { margin-top: 1rem; }

/* ---------- v3.1 refinements ---------- */
/* Menus near the right edge open inwards so an open menu never widens the page. */
@media (min-width: 1181px) { .nav-item:nth-last-child(-n+2) .menu { left: auto; right: 0; } }

/* The footer title block is captioned so it reads as a drawing title block. */

/* Figures stay in proportion with the copy beside them; tall images letterbox on the plate. */

/* Offerings grouped under the client's own four-way description of the business. */
.ogroups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); }
.ogroup { min-width: 0; }
.ogroup-t { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--red-text); padding-bottom: .55rem; border-bottom: 2px solid var(--rule-strong); }
.olist-g { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 0; }
@media (max-width: 1000px) { .ogroups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ogroups { grid-template-columns: minmax(0, 1fr); } }

/* The globe keeps two animations running forever. Repainting an SVG that complex on
   every frame is felt as scroll lag, so it is parked whenever it is off screen.
   The script pauses the SMIL motion; this pauses the CSS half. */
.globe.is-paused .gl-pulse { animation-play-state: paused; }


/* Enquiry stored but delivery unconfirmed. Not an error, not a success either, so it
   must not look like either one. */
.notice-warn { border-color: var(--grey); }
.notice-warn .ic { color: var(--grey); }
.notice-warn a { font-weight: 700; }

/* Cards crop to a uniform shape, which is normal for a thumbnail grid. Full-width
   figures keep their own proportions instead, so nothing is padded with dead white.
   The one exception is a portrait image, which would otherwise run taller than the
   text it belongs to. */
.fig-plate img.is-portrait { max-width: min(100%, 330px); margin-inline: auto; }

/* A figure is supporting material, not the subject. Capping it well short of the
   text column keeps the reading line dominant and stops a single diagram eating a
   screenful. */
.doc-main .fig-plate { max-width: 620px; }
@media (max-width: 700px) { .doc-main .fig-plate { max-width: 100%; } }

/* A figure supports the text, so it is capped on both axes. Width alone is not
   enough: a tall diagram at full column width still runs most of a screen. */
.doc-main .fig-plate img { max-height: 46vh; width: auto; margin-inline: auto; }
.slide-fig .fig-plate img { max-height: 38vh; width: auto; margin-inline: auto; }
@media (max-width: 700px) { .doc-main .fig-plate img, .slide-fig .fig-plate img { max-height: 52vh; } }

/* The company name is the page heading and the tagline is a slogan, so the tags
   were swapped. These keep the appearance identical to before the swap. */
h1.hero-name { margin: 0 0 1.1rem; font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 600; letter-spacing: .1em; }
p.hero-h { margin: 0; }

/* Scroll consistency. On a mouse or trackpad, the offerings slider and the markets rail
   were live horizontal scroll areas. Any slightly diagonal trackpad gesture over them
   was captured as sideways scrolling, so the page stalled over those sections and ran
   normally elsewhere: fast in some places, slow in others. Those two already have
   arrow buttons, so on precise pointers they are driven by the buttons only and the
   wheel always scrolls the page. Touch screens keep swiping. */
@media (hover: hover) and (pointer: fine) {
  .slider, .rail { overflow-x: hidden; scroll-snap-type: none; }
}

/* Scroll containers must be the containing block for anything absolutely positioned
   inside them. Without this, the screen-reader text in each slide's "Learn more" link
   escaped the slider and stretched the home page to ~1900px on phones, so the page
   could be swiped sideways and zoomed out onto blank space. */
.slider, .rail, .plat-grid { position: relative; }

/* Each tagline line stays on one line, full stop included, at every width. The
   type scales with the hero column (not the window, since on desktop the column is
   only part of it). The longest line is about 10em, so 9.4cqi leaves a margin.
   Browsers without container units keep the fixed size above. */
.hero-copy { container-type: inline-size; }
.hero-h { font-size: min(var(--t-hero), 9.4cqi); }
.hero-line { white-space: nowrap; }

/* A horizontal scroller gets overflow-y: auto by default. If a slide or card is ever
   a pixel taller than its track, the wheel scrolls inside it first and then hands
   over to the page, which feels like a stall followed by a jump. These scroll
   sideways only. The hero clips without becoming a scroll container at all. */
.slider, .rail, .plat-grid { overflow-y: hidden; }
.hero { overflow: clip; }

/* Second and later leaders sit below the first, separated by a rule rather than a
   heading, since each already carries its own name and role. */
.leader-next { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--rule); }