/* =====================================================================
   ASB Freight — the home screen (prototype 2026)
   One pinned screen over the live Colombo harbour (scene.js, full bleed),
   that plays in three steps while it is scrolled (hero.js drives them):
     1  "Serving all continents with care" in a frosted glass card, with three
        floating number cards tied by thin lines to harbour landmarks
     2  the glass card shrinks into a small headline pill at the top, the
        welcome panel comes in and the cards fly in and dock as its three
        number tiles, while the camera moves in on the cranes
     3  the registrations panel takes over while the camera rises above
        Colombo and hands over to the globe, where the lanes draw to the six
        continents
   Desktop: the card and panels on the left, the harbour fills the screen.
   Phones: the harbour high in the frame, the card or panel low. Without
   JavaScript, in print, on very short screens and when a panel cannot fit,
   the three steps simply stack.

   Loaded after home.css (equal selectors here win) and before fx.css (so
   rules that must beat fx.css's panel looks are scoped under .hero).
   README rule kept: no transform, filter, perspective or overflow on an
   ancestor of .hero__pin; the motion sits on its children only.
   ===================================================================== */

/* ---- the pinned screen ---------------------------------------------------- */
.hero { height: 460vh; }                         /* scroll room for the three steps and the globe's lanes */
.hero__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  --hx: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));   /* the page's left text edge */
}
.hero__inner { position: relative; display: grid; gap: 22px; padding-top: calc(var(--nav-h) + 12px); }
.hero__lead { max-width: 34ch; }

/* ---- step 1's frosted glass card (white glass over the bright harbour; every text on it is AA) ----
   hero.js draws the glass as its own element (.hero__glass), so it can shrink into the small headline
   pill of steps 2 and 3; until hero.js runs, and when the steps stack, the card carries the glass itself */
.hero__glass, html.js .hero:not(.is-stepped) .hero__inner, html.stage-live .hero.hero--stacked .hero__inner {
  border-radius: 28px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.93), rgba(250, 251, 253, 0.86) 60%, rgba(246, 249, 252, 0.88));
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, 0.55), 0 40px 90px -40px rgba(20, 32, 58, 0.55), 0 2px 8px rgba(20, 32, 58, 0.08);
}
.hero__glass { display: none; }
html.js .hero.is-stepped:not(.hero--stacked) .hero__glass {
  display: block; position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  transform-origin: 0 0;
}
html.stage-lite .hero__glass, html.stage-lite.js .hero:not(.is-stepped) .hero__inner, html.stage-lite .hero.hero--stacked .hero__inner { -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); }
html.js .hero:not(.hero--stacked) .hero__inner {
  box-sizing: border-box; width: min(580px, 46vw); max-width: none;
  margin: 0 0 0 var(--hx); padding: clamp(24px, 3.4vh, 38px) clamp(24px, 2.6vw, 40px);
  gap: clamp(14px, 2.2vh, 20px);
}
html.js .hero:not(.hero--stacked) .hero__pin { padding-top: calc(var(--nav-h) + 20px); }
/* the scroll anchors for steps 2 and 3 (hero.js sets their top so a jump lands mid-step) */
.hero__anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }
.hero__anchor--credentials { top: 50%; }

/* ---- the headline ----------------------------------------------------- */
.hero__title {
  position: relative; z-index: 0;                /* keeps the warmth behind the words, above the page */
  max-width: 12ch; min-height: 0;
  font-size: clamp(42px, min(5.4vw, 9.4vh), 92px);
  font-weight: 400; letter-spacing: -0.04em; line-height: 0.98;
  transform-origin: 0 0;
}
.hero__hl { color: var(--navy); }
/* a quiet navy-to-blue sweep across the words (both ends are AA on paper: 14.7:1 and 7.3:1) */
/* (a block, because Safari can drop clipped text on an inline element that wraps across lines) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__hl {
    display: block;
    background: linear-gradient(105deg, var(--navy) 0%, var(--navy) 38%, var(--blue) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
/* "with care": a deep ASB orange. On the glass card over the harbour it measures 3.6:1 or more (the glass
   lets a little of the blue sea through, so the paper tone --orange-text would only just reach 3:1);
   the large-text minimum is 3:1 */
.hero__hl em, .hero__mini em {
  position: relative; display: inline-block; white-space: nowrap;
  font-style: normal; font-weight: 500;
  --care: #b95c0c;
  color: var(--care); -webkit-text-fill-color: var(--care);
}
/* the rule under it: draws in, a light runs along it twice, then it rests ("with care" has no
   descenders, so the rule never sits behind a letter) */
.hero__hl em::after {
  content: ""; position: absolute; left: 0.04em; right: 0.02em; bottom: -0.035em; height: 0.07em;
  border-radius: 1em;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange) 40%, #ffd4a3 50%, var(--orange) 60%, var(--orange) 100%) 100% 0 / 260% 100% no-repeat;
  box-shadow: 0 0 0.28em rgba(245, 131, 31, 0.5), 0 0.06em 0.5em -0.1em rgba(245, 131, 31, 0.55);
  transform-origin: left center;
  animation: hl-draw 1.1s var(--ease) 0.55s both, hl-glint 1.8s ease-in-out 1.7s 2 both;
}
/* a soft orange warmth behind the words, kept faint so the orange text stays above 3:1 */
.hero__hl em::before {
  content: ""; position: absolute; inset: 8% -6% -12% -6%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(245, 131, 31, 0.09), rgba(245, 131, 31, 0));
}
@keyframes hl-draw { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes hl-glint { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* ---- the two site lines as a ticker strip ------------------------------- */
.hero__lines {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 0; width: fit-content; max-width: 100%;
  margin: 0.35em 0 0; padding: 9px 18px 9px 14px;
  font: 600 12px/1.25 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(20, 32, 58, 0.1); border-radius: var(--pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 28px -16px rgba(20, 32, 58, 0.35);
}
.hero__lines::before {                 /* status light: pings three times on load, then glows steadily */
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 12px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 3px rgba(245, 131, 31, 0.18), 0 0 10px rgba(245, 131, 31, 0.6);
  animation: hl-ping 1.6s ease-out 1s 3;
}
.hero__lines span { white-space: nowrap; }
.hero__lines span + span::before {     /* separator: the ASB diamond */
  content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 14px 0 14px; vertical-align: 0.1em;
  background: var(--orange); border-radius: 1px; transform: rotate(45deg);
}
@keyframes hl-ping {
  0% { box-shadow: 0 0 0 0 rgba(245, 131, 31, 0.55), 0 0 10px rgba(245, 131, 31, 0.6); }
  100% { box-shadow: 0 0 0 10px rgba(245, 131, 31, 0), 0 0 10px rgba(245, 131, 31, 0.6); }
}

/* ---- the small headline line of steps 2 and 3 (made by hero.js) ---------- */
.hero__mini {
  position: absolute; left: var(--hx); top: calc(var(--nav-h) + 30px); z-index: 4; margin: 0;
  padding: 10px 20px 11px; border-radius: var(--pill);
  font: 400 clamp(22px, 2.1vw, 30px)/1.15 var(--font-display); letter-spacing: -0.025em; color: var(--navy);
  opacity: 0; pointer-events: none; white-space: nowrap;
}
.hero__mini em { font-weight: 500; }

/* ---- the step panels -------------------------------------------------------- */
/* glass on paper, with a blue-to-orange hairline round the edge and a light that sweeps across on entry */
.hero__step {
  position: relative; box-sizing: border-box;
  padding: clamp(22px, 3.4vh, 34px) clamp(22px, 2.4vw, 34px);
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.93), rgba(251, 252, 254, 0.82) 55%, rgba(244, 247, 252, 0.86));
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(20, 32, 58, 0.06), 0 50px 100px -44px rgba(20, 32, 58, 0.5), 0 0 0 1px rgba(20, 32, 58, 0.04);
  color: var(--ink-2);
}
.hero__step::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(31, 78, 156, 0.55), rgba(31, 78, 156, 0) 34%, rgba(245, 131, 31, 0) 66%, rgba(245, 131, 31, 0.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.hero__step::after {                   /* the entry sweep: a thin band of light that crosses the panel once */
  content: ""; position: absolute; top: 8%; bottom: 8%; width: 2px; pointer-events: none; border-radius: 2px;
  left: calc(var(--sweep, 1) * 100%); opacity: calc((1 - var(--sweep, 1)) * 1.6);
  background: linear-gradient(transparent, rgba(245, 131, 31, 0.9) 30%, rgba(140, 175, 255, 0.9) 70%, transparent);
  box-shadow: 0 0 18px 4px rgba(245, 131, 31, 0.35);
}
.hero__step h2 { color: var(--navy); }
.hero__welcome .eyebrow { color: var(--orange-deep); }
.hero__welcome h2 { margin: 14px 0 12px; font-size: clamp(32px, min(3.2vw, 5.6vh), 54px); line-height: 1.04; }
.hero .welcome__grade { margin: 0 0 10px; font-size: clamp(15px, 2.1vh, 18px); line-height: 1.45; color: var(--navy); }
.hero .welcome__grade strong { font-weight: 600; }
.hero__welcome > p:not(.eyebrow):not(.welcome__grade) { margin: 0; font-size: clamp(14px, 1.85vh, 16px); line-height: 1.6; }

html.stage-lite .hero__step { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }   /* lighter on the lite tier */

/* ---- the number tiles, and the floating cards that dock as them ------------- */
/* a card is drawn exactly like its tile (hero.js sizes it to the tile and scales it), so the dock is seamless */
.hero .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: clamp(16px, 2.6vh, 24px) 0 0; }
.hero .fact, .hero__card {
  position: relative; display: block; box-sizing: border-box; margin: 0;
  padding: clamp(14px, 2vh, 20px) 18px clamp(14px, 1.9vh, 18px);
  border-radius: 18px;
  background: linear-gradient(165deg, #fff, rgba(246, 248, 252, 0.96));
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(20, 32, 58, 0.06), 0 1px 2px rgba(20, 32, 58, 0.06), 0 26px 50px -30px rgba(20, 32, 58, 0.5);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hero .fact::before, .hero__card::before {    /* hairline, blue to orange */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(31, 78, 156, 0.5), rgba(31, 78, 156, 0) 40%, rgba(245, 131, 31, 0) 60%, rgba(245, 131, 31, 0.75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.hero .fact__n, .hero__card b {
  display: block; margin: 0;
  font: 300 clamp(34px, min(3vw, 5.4vh), 46px)/1 var(--font-display); letter-spacing: -0.03em; color: var(--navy);
  text-shadow: none; white-space: nowrap;
}
.hero .fact__n small, .hero__card b small { margin-left: 4px; font-size: 0.4em; letter-spacing: 0; font-weight: 500; color: var(--orange-deep); }
.hero .fact dd, .hero__card span {
  display: block; position: relative; margin: 12px 0 0; padding: 10px 0 0;
  font: 400 13px/1.4 var(--font-body); color: var(--ink-2); max-width: none;
}
.hero .fact dd::before, .hero__card span::before {   /* the instrument line between number and label */
  content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
}
.hero .fact dd { padding-left: 0; }
.hero .fact dd::before { bottom: auto; }

/* the floating cards: positioned every frame by hero.js (pinned screen only) */
.hero__cards { display: none; }
.hero__card {
  position: absolute; left: 0; top: 0; will-change: transform, opacity;
  transform-origin: 50% 50%;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(20, 32, 58, 0.06), 0 30px 60px -26px rgba(20, 32, 58, 0.55), 0 0 40px -14px rgba(31, 78, 156, 0.35);
}
.hero__card b { display: block; }
.hero__card span { display: block; }
/* their leader lines and the pinging anchor dots on the harbour landmarks */
.hero__leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero__leads line { stroke: #fff; stroke-opacity: 0.95; stroke-width: 1.25; stroke-dasharray: 4 3; }
.hero__leads .hero__lead-under { stroke: var(--navy); stroke-opacity: 0.3; stroke-width: 3.5; stroke-dasharray: none; stroke-linecap: round; }
.hero__leads circle { fill: var(--orange); stroke: #fff; stroke-width: 1.5; }
.hero__leads .hero__lead-ring { fill: none; stroke: var(--orange); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: hero-ring 2.2s ease-out infinite; }
.hero__cards.is-still .hero__lead-ring { animation: none; opacity: 0.5; }
@keyframes hero-ring { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(1.6); opacity: 0; } }

/* ---- step 3: Registrations & Affiliations --------------------------------------- */
.hero__creds h2 { margin: 0 0 clamp(14px, 2.2vh, 20px); font-size: clamp(26px, min(2.5vw, 4.4vh), 38px); line-height: 1.05; }
.hero .badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.hero .badges li {
  position: relative; display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 6px;
  padding: 10px 8px 12px; border-radius: 16px; text-align: center;
  font: 500 12px/1.3 var(--font-body); color: var(--ink-2);
  background: #fff; border: 1px solid rgba(20, 32, 58, 0.08);
  box-shadow: 0 1px 2px rgba(20, 32, 58, 0.05), 0 18px 34px -26px rgba(20, 32, 58, 0.45);
  transition: border-color 0.3s, box-shadow 0.4s var(--ease);
}
.hero .badges li::before { display: none; }
.hero .badges li:hover { transform: none; border-color: rgba(245, 131, 31, 0.5); box-shadow: 0 1px 2px rgba(20, 32, 58, 0.05), 0 22px 40px -24px rgba(31, 78, 156, 0.5); }
.hero .badges .badge--wide { grid-column: span 2; }
.hero .badges img { width: 100%; height: clamp(46px, 7.4vh, 70px); object-fit: contain; background: none; padding: 0; border-radius: 0; box-shadow: none; }
.hero .badges span { align-self: center; padding: 0 2px; }
.hero .networks {
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
  margin: clamp(12px, 2vh, 18px) 0 0; padding: clamp(10px, 1.6vh, 14px) 0 0; border-radius: 0;
  border-top: 1px solid rgba(20, 32, 58, 0.1); background: none; box-shadow: none;
}
.hero .networks::before { display: none; }
.hero .networks__title { margin: 0; font: 600 11px/1.2 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.hero .networks__title::before { width: 7px; height: 7px; margin: -0.1em 8px 0 0; border: 0; border-radius: 1px; background: var(--orange); box-shadow: none; transform: rotate(45deg); }
.hero .networks__logos { display: flex; gap: 10px; flex-wrap: nowrap; justify-content: flex-start; flex: 1; }
.hero .networks__logos img {
  transition: box-shadow 0.4s var(--ease);
  width: auto; height: clamp(40px, 6vh, 54px); max-width: 48%; padding: 4px 8px; border-radius: 10px; background: #fff;
  border: 1px solid rgba(20, 32, 58, 0.08); box-shadow: 0 14px 28px -22px rgba(20, 32, 58, 0.5);
}
.hero .networks__logos img:hover { transform: none; box-shadow: 0 0 0 1px rgba(245, 131, 31, 0.45), 0 14px 28px -20px rgba(31, 78, 156, 0.5); }

/* ---- the continents (lit one by one by main.js as the lanes draw) ------------------ */
.continents {
  position: absolute; left: 0; right: 0; bottom: 36px;
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 auto;
}
.continents li {
  padding: 8px 13px 8px 28px; position: relative;
  font: 600 13px/1 var(--font-body); letter-spacing: 0.02em; color: var(--ink-3);
  /* (near-opaque, so the unlit grey words keep 4.5:1 over the flat picture's blue sea and the dark globe) */
  background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(20, 32, 58, 0.08); border-radius: var(--pill);
  transition: color 0.4s, background 0.4s, border-color 0.4s;
}
.continents li::before { content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--line); transition: background 0.4s, box-shadow 0.4s; }
.continents li.is-on { color: var(--navy); background: #fff; border-color: rgba(245, 131, 31, 0.5); }
.continents li.is-on::before { background: var(--orange); box-shadow: 0 0 0 4px rgba(245, 131, 31, 0.2); }

/* ---- scroll cue, step rail and the pause control ----------------------------- */
/* (a small pill beside the pause button, so it reads over the harbour) */
.scroll-cue {
  position: absolute; right: var(--gutter); bottom: 34px; z-index: 4; display: inline-flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 14px 0 13px; border-radius: var(--pill);
  font: 600 10.5px/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy);
  background: rgba(255, 255, 255, 0.86); box-shadow: 0 6px 18px -10px rgba(20, 32, 58, 0.35);
}
.scroll-cue span { width: 1px; height: 18px; background: linear-gradient(var(--ink-3), transparent); position: relative; overflow: hidden; }
.scroll-cue span::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--orange); animation: cue 2s var(--ease) 2 both; }   /* plays twice, then rests (WCAG 2.2.2) */
@keyframes cue { to { top: 110%; } }
.nav.is-compact ~ main .scroll-cue { visibility: hidden; }

/* 01 · 02 · 03, the same glass rail as the services' (made by hero.js; decoration) */
.hero__rail {
  position: absolute; right: max(18px, calc((100% - var(--max)) / 2 + 18px)); top: 50%; z-index: 3;
  display: flex; gap: 12px; align-items: stretch; padding: 13px 11px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-1);
  translate: 0 -50%;
}
.hero__rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.hero__rail li { font: 600 12px/1 var(--font-body); letter-spacing: 0.1em; color: var(--ink-3); transition: color 0.3s; }
.hero__rail li.is-on { color: var(--navy); }
.hero__rail li.is-current { color: #9a4b00; }        /* a deeper ASB orange: 5:1 on the rail's glass over the harbour */
.hero__rail-fill { width: 2px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; }
.hero__rail-fill i { position: absolute; inset: 0; background: var(--orange); transform-origin: 50% 0; transform: scaleY(0); }

/* pause control (WCAG 2.2.2) for all of the home screen's motion (the live harbour, or the cards' float and
   their pinging anchors without it): shown whenever the pinned steps play; reduced motion already keeps
   everything still, so it is hidden there (hero.js toggles it, scene.js reads it) */
.hero__motion { display: none; }
html.js .hero.is-stepped:not(.hero--stacked) .hero__motion, html.stage-live .hero.hero--stacked .hero__motion {
  position: absolute; right: calc(var(--gutter) + 104px); bottom: 34px; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 12px;
  font: 600 12px/1 var(--font-body); color: var(--navy); cursor: pointer;
  background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(20, 32, 58, 0.14); border-radius: var(--pill);
  box-shadow: 0 6px 18px -10px rgba(20, 32, 58, 0.35);
  transition: background-color 0.2s, border-color 0.2s;
}
html.js .hero.is-stepped:not(.hero--stacked) .hero__motion:hover, html.stage-live .hero.hero--stacked .hero__motion:hover { background: #fff; border-color: rgba(20, 32, 58, 0.3); }
/* over the harbour the usual blue focus ring would sink into the sea: a navy ring with a white halo */
html.js .hero.is-stepped:not(.hero--stacked) .hero__motion:focus-visible, html.stage-live .hero.hero--stacked .hero__motion:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: 0 0 0 7px #fff; }
.hero__motion-icon { width: 10px; height: 11px; box-sizing: border-box; border-left: 3px solid var(--navy); border-right: 3px solid var(--navy); }
.hero__motion[data-paused] .hero__motion-icon { width: 0; height: 0; border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent var(--navy); }

/* ---- a flat picture of Colombo harbour (made by hero.js): without the 3D (the cards then keep their landmarks
   on it), and as the placeholder while three.js loads (no cards yet). It fades out over the live harbour as that
   fades in (the canvas takes 0.8s, home.css), so the page paper never shows between them ---- */
.hero__postcard { display: none; }
html.js .hero.is-stepped:not(.hero--stacked) .hero__postcard {
  display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity 0.7s var(--ease) 0.3s, visibility 0s linear 1s;
}
html.js:not(.stage-live) .hero.is-stepped:not(.hero--stacked) .hero__postcard { opacity: 1; visibility: visible; transition: none; }
.hero__postcard svg { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) {
  /* phones: the picture fills the room above the card (hero.js sizes it); the sea runs on under the card */
  html.js .hero.is-stepped:not(.hero--stacked) .hero__postcard { bottom: auto; }
  html.js .hero.is-stepped:not(.hero--stacked) .hero__pin { transition: background-color 0.7s var(--ease) 0.3s; }
  html.js:not(.stage-live) .hero.is-stepped:not(.hero--stacked) .hero__pin { background-color: #155d96; transition: none; }
}

/* =====================================================================
   OFFICES MAP: the numbered labels over the 3D pins (made from the office list's
   words and placed every frame by scene.js; decoration, the list is the content)
   ===================================================================== */
.offices__map { position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none; visibility: hidden; }
.offices__map.is-live { visibility: visible; }
html.no-webgl .offices__map { display: none; }          /* the 3D went away (lost context): no pins, so no labels */
.offices__leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.offices__leaders line { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; stroke-dasharray: 2 3; transition: stroke 0.25s; }
.map-label {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 7px; border-radius: 14px; pointer-events: auto; cursor: default; white-space: nowrap;
  color: #fff; background: rgba(12, 22, 43, 0.72); border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.7);
  transition: background-color 0.25s, border-color 0.25s, box-shadow 0.3s;
}
.map-label__n {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font: 700 12px/1 var(--font-body); color: var(--navy); background: #fff;
}
.map-label__txt { display: grid; gap: 2px; }
.map-label__name { font: 600 12.5px/1.15 var(--font-body); }
.map-label__place { font: 400 11.5px/1.15 var(--font-body); color: rgba(255, 255, 255, 0.75); }
/* Head Office in ASB orange (navy text on orange: 7.4:1) */
.map-label--hq { background: var(--orange); border-color: rgba(255, 255, 255, 0.4); color: var(--navy); box-shadow: 0 14px 30px -14px rgba(245, 131, 31, 0.7); }
.map-label--hq .map-label__place { color: rgba(20, 32, 58, 0.82); }
.map-label--hq .map-label__n { background: var(--navy); color: #fff; }
/* the office being pointed at (in the list or on the map): its label lights, the others step back */
.offices__map.has-focus .map-label:not(.is-focus) { opacity: 0.45 !important; }
.map-label.is-focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(245, 131, 31, 0.35), 0 18px 34px -14px rgba(245, 131, 31, 0.6); }
.office-list li.is-focus { border-color: var(--orange); background: rgba(255, 255, 255, 0.12); }
.offices__leaders line.is-focus { stroke: var(--orange); stroke-dasharray: none; stroke-width: 1.5; }
/* the labels sit under the offices' copy grid, which spans the page: let the pointer through its empty column */
.offices__grid { pointer-events: none; }
.offices__grid > .offices__copy { pointer-events: auto; }
.office-list li { cursor: default; }
@media (max-width: 900px) {
  /* phones: number and place only ("1 Colombo 05") */
  .map-label { gap: 7px; padding: 4px 10px 4px 4px; border-radius: 11px; }
  .map-label__n { width: 20px; height: 20px; font-size: 11px; }
  .map-label__name { display: none; }
  .map-label__place { font: 600 11.5px/1.1 var(--font-body); color: #fff; }
  .map-label--hq .map-label__place { color: var(--navy); }
}
@media print { .offices__map { display: none !important; } }

/* =====================================================================
   THE PINNED STEPS (JavaScript on). hero.js sets .is-stepped once it runs;
   until then only step 1 shows, so nothing flashes on load.
   ===================================================================== */
html.js .hero__step { position: absolute; z-index: 2; left: var(--hx); top: calc(var(--nav-h) + 104px); width: min(560px, 44vw); opacity: 0; }
html.js .hero__cards { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
html.js .continents { left: var(--hx); right: auto; max-width: min(780px, 64vw); bottom: 34px; margin: 0; padding: 0; opacity: 0; z-index: 2; }
html.js .hero__inner { z-index: 3; }      /* above the panels, so the headline stays crisp as it flies up into the small line */
html.js .hero:not(.is-stepped) .hero__cards { visibility: hidden; }
/* hero.js measures the steps at rest */
.hero.is-measuring .hero__pin * { transform: none !important; translate: none !important; transition: none !important; }

/* ---- sizes ----------------------------------------------------------- */
@media (min-width: 901px) {
  .hero__inner { padding-top: calc(var(--nav-h) + 12px); }
}
@media (min-width: 901px) and (max-height: 800px) {
  .hero__title { font-size: min(5.2vw, 9.2vh); }
  html.js .hero:not(.hero--stacked) .hero__inner { gap: 14px; }
  html.js .hero__step { top: calc(var(--nav-h) + 86px); }
  .hero__mini { top: calc(var(--nav-h) + 24px); padding: 8px 18px 9px; }
}
@media (min-width: 901px) and (max-height: 700px) {
  html.js .hero__step { top: calc(var(--nav-h) + 68px); }
  .hero__mini { top: calc(var(--nav-h) + 18px); font-size: 22px; }
  .hero .badges img { height: 40px; }
  html.js .continents { bottom: 18px; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  html.js .hero__step { width: min(520px, 50vw); }
}

/* phones and tablets: the scene on top, the step's words or panel below it */
@media (max-width: 900px) {
  .hero { height: 400vh; }
  .hero__pin { justify-content: flex-end; padding-bottom: 22px; }
  .hero__inner { padding-top: 0; }
  /* the glass card sits low, the harbour shows above it */
  html.js .hero:not(.hero--stacked) .hero__pin { padding-top: 0; }
  html.js .hero:not(.hero--stacked) .hero__inner { width: auto; margin: 0 var(--gutter); padding: 18px 18px 20px; gap: 12px; }
  .hero__glass, html.js .hero:not(.is-stepped) .hero__inner, html.stage-live .hero.hero--stacked .hero__inner { border-radius: 22px; }
  /* (phones: the card sits over the deep blue sea, so the glass is a little more opaque) */
  .hero__glass { background: linear-gradient(165deg, rgba(255, 255, 255, 0.95), rgba(250, 251, 253, 0.9) 60%, rgba(246, 249, 252, 0.92)); }
  .hero__mini { padding: 7px 14px 8px; }
  .hero__lines { padding: 8px 14px 8px 12px; font-size: 11px; letter-spacing: 0.14em; }
  .hero__lines span + span::before { margin: 0 10px; }
  /* phones: a round icon button in the top right corner (its words stay for screen readers) */
  html.js .hero.is-stepped:not(.hero--stacked) .hero__motion, html.stage-live .hero.hero--stacked .hero__motion { right: var(--gutter); bottom: auto; top: calc(var(--nav-h) + 22px); width: 34px; min-height: 34px; padding: 0; justify-content: center; }
  .hero__motion-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .scroll-cue, .hero__rail { display: none; }
  .hero__mini { left: var(--gutter); top: calc(var(--nav-h) + 18px); font-size: 17px; }
  .hero__mini em { --care: #9a4b00; }       /* small text here: a deeper orange keeps it above 4.5:1 on the pill */
  html.js .hero__step { left: var(--gutter); right: var(--gutter); top: auto; bottom: 14px; width: auto; padding: 18px 18px 16px; border-radius: 22px; }
  html.js .continents { left: var(--gutter); right: var(--gutter); max-width: none; top: calc(var(--nav-h) + 52px); bottom: auto; gap: 6px; }
  .continents li { padding: 6px 9px 6px 22px; font-size: 11.5px; }
  .continents li::before { left: 9px; width: 7px; height: 7px; margin-top: -3.5px; }
  .hero__welcome h2 { margin: 10px 0 8px; font-size: clamp(26px, 7.4vw, 34px); }
  .hero .welcome__grade { font-size: 14.5px; margin-bottom: 6px; }
  .hero__welcome > p:not(.eyebrow):not(.welcome__grade) { font-size: 13.5px; line-height: 1.5; }
  .hero .facts { gap: 8px; margin-top: 12px; }
  .hero .fact, .hero__card { padding: 12px 11px 11px; border-radius: 14px; }
  .hero .fact__n, .hero__card b { font-size: 27px; }
  .hero .fact dd, .hero__card span { margin-top: 8px; padding-top: 7px; font-size: 11px; line-height: 1.35; }
  .hero .fact dd::before, .hero__card span::before { width: 20px; }
  .hero__creds h2 { font-size: clamp(24px, 6.6vw, 30px); margin-bottom: 12px; }
  .hero .badges { gap: 6px; }
  .hero .badges li { padding: 7px 4px 8px; gap: 4px; font-size: 10.5px; line-height: 1.25; border-radius: 12px; }
  .hero .badges img { height: 42px; }
  .hero .networks { gap: 8px 12px; margin-top: 10px; padding-top: 10px; }
  .hero .networks__logos img { height: 40px; }
}
@media (max-width: 600px) {
  .hero__title { font-size: 42px; max-width: none; }
  .hero__inner { gap: 12px; }
  .hero__lead { margin-bottom: 0; font-size: 16px; }
  .hero .btn-row { flex-wrap: nowrap; gap: 8px; }
  .hero .btn { height: 46px; padding-left: 16px; gap: 8px; font-size: 14px; }
  .hero .btn .arrow { width: 32px; height: 32px; }
  /* too narrow for one row: two rows, each with its own diamond */
  .hero__lines { flex-direction: column; align-items: flex-start; gap: 7px; padding: 10px 16px 10px 14px; border-radius: 14px; }
  .hero__lines::before { display: none; }
  .hero__lines span::before, .hero__lines span + span::before {
    content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 0 0; vertical-align: 0.1em;
    background: var(--orange); border-radius: 1px; transform: rotate(45deg);
  }
}
/* short phones: smaller words, so the live harbour keeps a real share of the screen */
@media (max-width: 600px) and (max-height: 740px) {
  .hero__title { font-size: 34px; }
  .hero__inner { gap: 10px; }
  .hero__lead { font-size: 14.5px; line-height: 1.45; }
  .hero .btn { height: 42px; }
  .hero__welcome > p:not(.eyebrow):not(.welcome__grade) { font-size: 12.5px; line-height: 1.45; }
  .hero__welcome h2 { font-size: 24px; }
  .hero .welcome__grade { font-size: 13px; }
  .hero .fact__n, .hero__card b { font-size: 23px; }
  html.js .hero__step { padding: 14px 14px 12px; }
}
@media (max-width: 360px) {
  .hero__title { font-size: 36px; }
  .hero__lines { font-size: 10px; letter-spacing: 0.1em; }
}
/* short phones wide enough for it (the row is about 310px inside the card, so 375px and up): the two lines in one row, one diamond between
   them; narrower ones keep the two rows, each with its own diamond */
@media (min-width: 375px) and (max-width: 600px) and (max-height: 740px) {
  .hero__lines { flex-direction: row; flex-wrap: nowrap; gap: 0; padding: 7px 10px; font-size: 10px; letter-spacing: 0.02em; border-radius: var(--pill); }
  .hero__lines span::before { display: none; }
  .hero__lines span + span::before { display: inline-block; margin: 0 8px; }
}
/* phones without the 3D: no room is kept for a scene that is not there (the flat harbour picture takes it once hero.js runs) */
@media (max-width: 900px) {
  html.no-webgl .hero:not(.is-stepped) .hero__pin { justify-content: center; padding-bottom: 40px; }
}

/* =====================================================================
   STACKED: the three steps one after another in normal flow. Used without
   JavaScript, on very short screens (or 200% zoom), when a panel cannot fit
   the screen (hero.js), and in print.
   ===================================================================== */
html:not(.js) .hero, .hero.hero--stacked { height: auto; }
html:not(.js) .hero__pin, .hero.hero--stacked .hero__pin {
  position: relative; height: auto; min-height: 100vh; overflow: visible;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; gap: 24px clamp(20px, 3vw, 40px);
  padding: calc(var(--nav-h) + 56px) var(--hx) 64px;
}
html:not(.js) .hero__inner, .hero.hero--stacked .hero__inner { grid-column: 1 / -1; padding: 0 0 4vh; min-height: calc(70vh - var(--nav-h)); align-content: center; }
html.stage-live .hero.hero--stacked .hero__inner { min-height: 0; max-width: 640px; margin: 0; padding: 28px 30px; }
html:not(.js) .hero__step, .hero.hero--stacked .hero__step { position: relative; left: auto; top: auto; bottom: auto; width: auto; opacity: 1 !important; transform: none !important; }
html:not(.js) .continents, .hero.hero--stacked .continents { grid-column: 1 / -1; position: relative; left: auto; bottom: auto; top: auto; opacity: 1 !important; max-width: none; padding: 0; }
html:not(.js) .hero__cards, .hero.hero--stacked .hero__cards, .hero.hero--stacked .hero__mini, .hero.hero--stacked .hero__rail, .hero.hero--stacked .hero__glass,
html:not(.js) .scroll-cue, .hero.hero--stacked .scroll-cue { display: none; }
.hero.hero--stacked .hero__inner > *, .hero.hero--stacked .hero__title, .hero.hero--stacked .fact, .hero.hero--stacked .badges li, .hero.hero--stacked .networks { opacity: 1 !important; transform: none !important; }
@media (max-width: 900px) {
  html:not(.js) .hero__pin, .hero.hero--stacked .hero__pin { grid-template-columns: minmax(0, 1fr); padding: calc(var(--nav-h) + 40px) var(--gutter) 40px; }
  html:not(.js) .hero__pin { padding-top: calc(var(--nav-h) + 124px); }    /* the menu bar wraps to two rows without JavaScript */
  html:not(.js) .hero__inner, .hero.hero--stacked .hero__inner { min-height: 0; padding-bottom: 8px; }
}
/* very short windows (or 200% zoom): no pinned home screen, so nothing is clipped */
@media (max-height: 560px) {
  .hero { height: auto; }
  .hero__pin { position: relative; height: auto; min-height: 100vh; overflow: visible; }
}

/* ---- loading: the words fade in with CSS alone, so they never stay hidden if scripts are slow or off ---- */
/* (backwards only: once it has played, hero.js's step motion owns the same elements) */
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } }
.hero__inner > * { animation: hero-in 0.9s var(--ease) backwards; }
.hero__inner > :nth-child(2) { animation-delay: 0.08s; } .hero__inner > :nth-child(3) { animation-delay: 0.16s; } .hero__inner > :nth-child(4) { animation-delay: 0.24s; } .hero__inner > :nth-child(5) { animation-delay: 0.32s; }

/* ---- motion, colour modes and print ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero__hl em::after, .hero__lines::before, .hero__inner > * { animation: none; }
  html.js .hero.is-stepped:not(.hero--stacked) .hero__motion, html.stage-live .hero.hero--stacked .hero__motion { display: none; }
  .hero__leads .hero__lead-ring { animation: none; opacity: 0.5; }
  /* the steps swap with a short cross-fade: nothing flies or slides */
  html.js .hero__step, .hero__mini, .hero__title, .hero__inner > *, .hero .fact, .hero__card, .continents { transition: opacity 0.35s linear; }
  .hero__step::after { display: none; }
}
@media (forced-colors: active) {
  .hero__hl, .hero__hl em, .hero__mini em { background: none; -webkit-text-fill-color: currentColor; }
  .hero__hl em::after { background: CanvasText; box-shadow: none; }
}
@media print {
  .hero { height: auto !important; }
  .hero__pin { position: static !important; height: auto !important; display: block !important; overflow: visible !important; padding: 24px 0 !important; }
  .hero__step, .hero__inner > *, .hero__title, .hero .fact, .hero .badges li, .hero .networks { position: static !important; opacity: 1 !important; transform: none !important; width: auto !important; margin-bottom: 16px; box-shadow: none !important; }
  .hero__cards, .hero__mini, .hero__rail, .hero__glass, .hero__postcard, .scroll-cue, .continents { display: none !important; }
  .hero__hl, .hero__hl em { background: none; -webkit-text-fill-color: currentColor; }
  .hero__hl em::before, .hero__hl em::after, .hero__lines::before, .hero__step::after { display: none; }
  .hero__lines { border: 0; box-shadow: none; padding: 0; background: none; }
  .hero__motion, html.js .hero.is-stepped:not(.hero--stacked) .hero__motion, html.stage-live .hero.hero--stacked .hero__motion { display: none; }
}