/* ============================================================
   SA LABELS DESIGN TOKENS
   Core identity is blue / white / metallic grey — roughly 85-90%
   of the interface. CMYK is a PRINTING-PROCESS accent only: it may
   depict ink, registration, colour separation or layer assembly,
   and must never colour-code ordinary cards or buttons.
   ============================================================ */
:root {
  /* --- core palette: exact values from the 2026 Brand Guide / Design System --- */
  --sal-blue: #0c4482;        /* primary, dominant: headings, CTAs, nav, icons */
  --sal-grey: #a2a9ad;        /* secondary text, borders, supporting elements */
  --sal-mist: #f2f3f4;        /* light grey: panels, subtle section backgrounds */
  --sal-sky: #e8f0f8;         /* light blue: chips, highlight panels, table heads */
  --sal-ink: #1a1a1a;         /* body text and high-contrast headlines */
  --paper-w: #ffffff;

  /* Off-palette, kept deliberately. Navy is sanctioned by the Production Pack's
     style prefix ("deep navy-to-black studio background, brand blue accents")
     for the cinematic lane. Gold appears only on the awards page, where the
     medals in the photography are themselves gold. Both are flagged for review. */
  --sal-navy: #052f55;        /* cinematic sections, footer */
  --sal-navy-deep: #041f39;   /* deepest navy for layering */
  --sal-grey-d: #61696f;      /* dark grey for support lines: >=4.5:1 on white,
                                 light grey and light blue alike */
  --sal-gold: #c79a3b;        /* awards page only */

  /* --- printing-process accents (restricted use) --- */
  --ink-c: #00a9e8;
  --ink-m: #e6007e;
  --ink-y: #ffd400;
  --ink-k: #111318;

  /* --- film / cinematic surface --- */
  --carbon: #0a0b0d;
  --carbon-soft: #14161a;
  --paper: #f4f2ec;
  --alloy: #a9adb4;
  --accent: var(--ink-y);
  --signal: var(--ink-m);

  /* --- type: Arial / Helvetica everywhere, per the Brand Guide. All three
     tokens resolve to the same stack so the rule cannot drift back apart; they
     stay separate names because ~200 rules reference them by role. --- */
  --display: Arial, Helvetica, "Helvetica Neue", sans-serif;
  --sans: Arial, Helvetica, "Helvetica Neue", sans-serif;
  --data: Arial, Helvetica, "Helvetica Neue", sans-serif;

  /* --- layout & motion --- */
  --gutter: clamp(20px, 4.2vw, 72px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-hover: ease;
  --dur-hover: 180ms;
  --dur-press: 160ms;
  --line: rgba(244, 242, 236, .17);
  --nav-h: 78px;   /* drives BOTH the nav bar and body.page's top offset */
  --nav-pad: clamp(10px, 0.95vw, 15px);  /* nav link padding; the hover rule tracks it */
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--carbon);
  color: var(--paper);
  font-family: var(--display);
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--carbon);
  color: var(--paper);
  overflow-x: clip;
}

body.is-loading { overflow: hidden; }

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--ink-c); outline-offset: 3px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: max(24px, env(safe-area-inset-top)) var(--gutter) max(24px, env(safe-area-inset-bottom));
  background: var(--carbon);
  transition: clip-path 900ms var(--ease-out), visibility 900ms;
  clip-path: inset(0 0 0 0);
}

.loader.is-done {
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
}

.loader__mark {
  align-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.loader__number {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(92px, 22vw, 340px);
  font-weight: 780;
  letter-spacing: -.075em;
  line-height: .68;
}

.loader__meta,
.micro {
  font-family: var(--data);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.loader__meta { text-align: right; color: var(--alloy); }

.loader__foot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding-top: 22px;
}

.loader__track {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: rgba(244, 242, 236, .24);
}

.loader__fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  display: flex;
  align-items: center;
  min-height: 70px;
  padding: max(16px, env(safe-area-inset-top)) var(--gutter) 12px;
  pointer-events: none;
  transition: opacity 320ms ease;
}

/* the film's wordmark would otherwise float over the brochure, which
   carries its own logo — retire it once the brochure scrolls in */
.site-header.is-retired { opacity: 0; }

/* The header used to blend with mix-blend-mode: difference, which suited a plain
   text wordmark but would invert the logo's own colours against every frame of
   the film. The official mark goes on a white chip instead — no recolouring, and
   it holds up against any frame the film happens to be on. */
.site-header__logo {
  display: block;
  width: 124px;
  height: auto;
  /* the film runs light in places, so the mark keeps its own separation */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .65));
}

.sequence {
  position: relative;
  height: 650vh;
  background: var(--carbon);
}

.stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--carbon);
  isolation: isolate;
}

#film-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.stage__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(10, 11, 13, .66) 0%, rgba(10, 11, 13, .14) 34%, transparent 60%),
    linear-gradient(0deg, rgba(10, 11, 13, .74) 0%, transparent 36%);
  /* --scrim-opacity is rewritten every animation frame from the film's own
     smoothed progress; a transition on top of that could never settle and
     just added compositor work while lagging the film. */
  opacity: var(--scrim-opacity, .78);
  pointer-events: none;
}

.stage__grid {
  position: absolute;
  inset: 0 var(--gutter);
  z-index: 2;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(8.333% - 1px),
    rgba(244, 242, 236, .06) calc(8.333% - 1px),
    rgba(244, 242, 236, .06) 8.333%
  );
  mask-image: linear-gradient(180deg, transparent, black 14%, black 82%, transparent);
  opacity: .5;
  pointer-events: none;
}

.chapters {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.chapter {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-content: center;
  column-gap: clamp(10px, 1.2vw, 20px);
  padding: 96px var(--gutter) 118px;
  visibility: hidden;
}

.chapter.is-visible { visibility: visible; }

.chapter__copy {
  position: relative;
  align-self: center;
}

.chapter__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  color: var(--paper);
  text-shadow: 0 1px 10px rgba(10, 11, 13, .92);
}

.chapter__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 650ms 100ms var(--ease-out);
}

.chapter--m .chapter__eyebrow::before { background: var(--ink-m); }
.chapter--c .chapter__eyebrow::before { background: var(--ink-c); }
.chapter.is-visible .chapter__eyebrow::before { transform: scaleX(1); }

.reveal {
  overflow: hidden;
  padding-bottom: .08em;
}

.reveal > span {
  display: block;
  transform: translateY(112%);
  transition: transform 760ms var(--ease-out);
}

.reveal:nth-child(3) > span { transition-delay: 90ms; }
.reveal:nth-child(4) > span { transition-delay: 160ms; }
.chapter.is-visible .reveal > span { transform: translateY(0); }

.chapter__title {
  margin: 0;
  font-size: clamp(50px, 7.4vw, 118px);
  font-weight: 760;
  letter-spacing: -.055em;
  line-height: .86;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(10, 11, 13, .55);
}

.chapter__deck {
  max-width: 30rem;
  margin: 26px 0 0;
  font-size: clamp(17px, 1.55vw, 23px);
  font-weight: 460;
  line-height: 1.32;
  letter-spacing: -.02em;
  text-wrap: balance;
  text-shadow: 0 1px 16px rgba(10, 11, 13, .65);
}

.chapter__fact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: baseline;
  margin-top: 30px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--alloy);
  max-width: 28rem;
  text-shadow: 0 1px 12px rgba(10, 11, 13, .8);
}

.chapter--hero { align-content: end; }
.chapter--hero .chapter__copy { grid-column: 1 / 11; padding-bottom: 4vh; }
.chapter--hero .chapter__title { font-size: clamp(96px, 15.5vw, 250px); line-height: .72; letter-spacing: -.06em; }
.chapter--hero .chapter__deck { margin-left: .4vw; max-width: 27rem; }

/* --- hero call to action ------------------------------------------------
   The film owns the first 6.5 screens; without this the only route to a
   quote is the nav, which does not appear until past 0.55vh. --- */
.hero-cta { margin: 30px 0 0; }

.hero-cta > span {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* The whole .chapters layer is pointer-events: none, so that a drag or scroll
   anywhere over the film scrubs it instead of snagging on the hero copy. That
   inherited down to these two buttons and made them dead: the click landed on
   the canvas behind them. A descendant can opt back in, so they do. */
.hero-cta a { pointer-events: auto; }

.hero-cue {
  margin: 26px 0 0;
  color: var(--alloy);
  opacity: .85;
  text-shadow: 0 1px 12px rgba(10, 11, 13, .8);
}

.hero-cue::after {
  content: " ↓";
  display: inline-block;
  animation: hero-cue-drift 2.4s var(--ease-out) infinite;
}

@keyframes hero-cue-drift {
  0%, 70%, 100% { transform: translateY(0); opacity: .6; }
  35%           { transform: translateY(4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cue::after { animation: none; }
}

/* Short desktop viewports (laptops at 720–860px tall). The hero gained a CTA
   row and a scroll cue, which on a short screen pushes the copy block up into
   the corner logo. Give height back here rather than shrinking the wordmark
   everywhere — tall screens keep the full-scale type. */
@media (min-width: 861px) and (max-height: 880px) {
  .chapter--hero .chapter__title { font-size: clamp(76px, 11vw, 150px); }
  .chapter--hero .chapter__deck { margin-top: 18px; }
  .hero-cta { margin-top: 22px; }
  .hero-cue { margin-top: 16px; }
}

.chapter--right .chapter__copy { grid-column: 8 / 13; }
.chapter--left .chapter__copy { grid-column: 1 / 6; }

.chapter--final {
  align-content: end;
  background: linear-gradient(0deg, rgba(10, 11, 13, .88), rgba(10, 11, 13, 0) 62%);
}

.chapter--final .chapter__copy {
  grid-column: 1 / 13;
  padding-bottom: 3vh;
}

.chapter--final .chapter__title { max-width: 12ch; }

.cta {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-width: min(100%, 280px);
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid rgba(244, 242, 236, .56);
  background: rgba(10, 11, 13, .28);
  color: var(--paper);
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 250ms ease, background 250ms ease, border-color 250ms ease;
}

.cta::after { content: "↗"; font-size: 16px; }
.cta:hover { background: var(--accent); border-color: var(--accent); color: var(--carbon); }

.telemetry {
  position: absolute;
  inset: auto var(--gutter) max(18px, env(safe-area-inset-bottom));
  z-index: 8;
  display: grid;
  grid-template-columns: auto auto minmax(100px, 1fr) auto;
  align-items: center;
  gap: 16px;
  pointer-events: none;
}

.telemetry__chapter { min-width: 13ch; }
.telemetry__frame { color: var(--alloy); }

.inkbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.inkbar__seg {
  position: relative;
  height: 3px;
  overflow: hidden;
  background: rgba(244, 242, 236, .24);
}

.inkbar__seg i {
  position: absolute;
  inset: 0;
  display: block;
  transform: scaleX(var(--f, 0));
  transform-origin: left;
  will-change: transform;
}

.inkbar__seg--c i { background: var(--ink-c); }
.inkbar__seg--m i { background: var(--ink-m); }
.inkbar__seg--y i { background: var(--ink-y); }
/* K prints black; a 1px paper hairline travels with the fill so the ink stays
   visible against the dark stage. Scales with the fill, so at rest this
   segment is identical to C/M/Y. */
.inkbar__seg--k i {
  background: #000;
  border-bottom: 1px solid rgba(244, 242, 236, .6);
}

.inkbar__label { color: var(--alloy); }

/* ==========================================================
   BROCHURE SYSTEM — everything below the film follows the
   SAL Corporate Profile 2025 layout language:
   deep blue + grey on white, Poppins, two-tone headings,
   grey tab labels, blue rounded cards, hexagon imagery.
   ========================================================== */
/* Section register mark — the four process inks carried out of the film: cyan,
   magenta, yellow, key. It closes on black, not brand blue, so the strip is an
   accurate CMYK set and matches the film's own ink bar, whose K segment is
   already black. It reads as a print registration strip rather than decoration,
   which is the case for keeping it against the Brand Guide's "no neon" line.
   Blue still dominates every surface around it. */
:root {
  --ink-bar: linear-gradient(90deg,
    var(--ink-c) 0 25%, var(--ink-m) 25% 50%,
    var(--ink-y) 50% 75%, var(--ink-k) 75% 100%);
}

/* ---- section nav ------------------------------------------------- */
.salnav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  padding: 0 var(--gutter);
  min-height: var(--nav-h);
  background: rgba(12, 68, 130, .94);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid rgba(255, 255, 255, .14);
  font-family: var(--sans);
  transform: translateY(-104%);
  transition: transform 420ms var(--ease-out);
}

.salnav.is-on { transform: none; }

.salnav__brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  text-decoration: none;
  transition: opacity 200ms ease;
}

.salnav__brand:hover { opacity: .8; }

/* Official lockup, reversed for dark ground per the Brand Guide ("on dark or
   blue backgrounds, use the white / reversed version"). No official reversed
   master exists on the drive, so it is derived from Logo.png by mapping the blue
   ink to white and lifting the grey — geometry untouched, nothing cropped.

   NOTE — deliberate deviation: Logo Usage sets a 120px minimum on screen, but
   Logo.png is the STACKED lockup (505x319), so 120px wide is 76px tall and
   towers over a nav bar. Sized to the bar instead. The tagline is unreadable at
   either size, so the minimum buys nothing here; the real fix is the horizontal
   wordmark Logo Usage describes, which is not on the drive. */
.salnav__logo {
  display: block;
  width: 104px;
  height: auto;
}

.salnav__list {
  display: flex;
  flex: 1 1 auto;
  /* Without this the overflow-x never engages: a flex item defaults to
     min-width:auto, so the list refuses to shrink below its content width
     and the last links run underneath the fixed-width CTA. */
  min-width: 0;
  /* Spread the links across the bar instead of bunching them behind the logo.
     space-between, not space-evenly: when the list DOES overflow (narrow
     desktop, just above the 780px breakpoint) the space-* values that pad the
     leading edge push the first link to a negative offset, where no amount of
     scrolling can reach it. With no free space, space-between degrades to
     flex-start, so the overflow case keeps working. */
  justify-content: space-between;
  gap: clamp(4px, 1.2vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.salnav__list::-webkit-scrollbar { display: none; }

/* On a wide monitor, space-between hands every spare pixel to the gaps and the
   five links read as isolated words. Above 1100px there is no chance of the
   list overflowing, so the leading-edge risk that ruled out centred alignment
   at narrow widths does not apply: group the links at a fixed comfortable gap
   and let the spare space fall either side of the group instead. */
@media (min-width: 1100px) {
  .salnav__list {
    justify-content: center;
    gap: clamp(16px, 1.9vw, 32px);
  }
}

/* --- mobile menu -------------------------------------------------------
   Six nav items cannot share a phone header with a logo and a CTA: the list
   was being squeezed to 124px of usable width against 463px of content, so
   five of the six links were reachable only by swiping a strip that gave no
   hint it scrolled. Below 780px the list becomes a panel behind a toggle. */
.salnav__toggle { display: none; }

@media (max-width: 780px) {
  .salnav__toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    order: 3;
    min-height: 44px;            /* full touch target */
    padding: 0 14px;
    border: 1.5px solid rgba(255, 255, 255, .38);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  .salnav__bars,
  .salnav__bars::before,
  .salnav__bars::after {
    content: "";
    display: block;
    width: 16px;
    height: 2px;
    background: #fff;
    transition: transform 220ms var(--ease-out), opacity 160ms linear;
  }

  .salnav__bars { position: relative; }
  .salnav__bars::before { position: absolute; top: -5px; }
  .salnav__bars::after  { position: absolute; top: 5px; }

  /* bars fold into a cross while the panel is open */
  .salnav__toggle[aria-expanded="true"] .salnav__bars { background: transparent; }
  .salnav__toggle[aria-expanded="true"] .salnav__bars::before { transform: translateY(5px) rotate(45deg); }
  .salnav__toggle[aria-expanded="true"] .salnav__bars::after  { transform: translateY(-5px) rotate(-45deg); }

  .salnav { flex-wrap: wrap; row-gap: 0; }
  .salnav__brand { order: 1; }
  .salnav__cta   { order: 2; margin-left: auto; }

  .salnav__list {
    order: 4;
    flex: 1 0 100%;
    display: grid;
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    border-top: 1px solid transparent;
    transition: max-height 320ms var(--ease-out), margin-top 320ms var(--ease-out);
  }

  .salnav__list.is-open {
    max-height: 60vh;
    overflow-y: auto;
    margin-top: 10px;
    margin-bottom: 12px;
    border-top-color: rgba(255, 255, 255, .18);
  }

  .salnav__list li { width: 100%; }

  .salnav__list a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 50px;
    padding: 0 2px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    font-size: 16px;
  }

  /* the animated underline is a desktop hover affordance; on touch it just
     sits under a full-width row looking like a stray rule */
  .salnav__list a::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .salnav__list,
  .salnav__bars,
  .salnav__bars::before,
  .salnav__bars::after { transition: none; }
}

/* Sized up from 13.5px: with the sixth item gone, five small links spread
   across the bar read as gaps with words in them. Larger type and wider
   padding put the weight back into the links themselves, so space-between has
   less air left to distribute. Clamped, so it tracks the viewport rather than
   re-opening the gaps on a wide monitor. */
.salnav__list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--nav-pad);
  color: #cddcea;
  font-size: clamp(14.5px, 1.15vw, 17px);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 220ms ease;
}

.salnav__list a::after {
  content: "";
  position: absolute;
  /* tracks the link padding, so the rule sits under the word, not the gap */
  inset: auto var(--nav-pad) 12px;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease-out);
}

.salnav__list a:hover::after,
.salnav__list a.is-current::after { transform: scaleX(1); }
.salnav__list a.is-current { color: #fff; }

/* CMYK hover: each item takes the next ink, so running the cursor along the bar
   steps through the process colours like a press. Tints re-measured against the
   official blue bar (#1b4f8a effective): pure magenta is 1.84:1 there and cyan
   3.10:1, so the *text* uses lightened tints that clear 4.5:1 while the 2px rule
   carries the pure ink, where contrast minimums don't apply. K stays out — black
   on blue reads as the link vanishing. */
.salnav__list li:nth-child(3n + 1) a { --nav-ink: var(--ink-c); --nav-ink-text: #69ccf1; }
.salnav__list li:nth-child(3n + 2) a { --nav-ink: var(--ink-m); --nav-ink-text: #f6a8d3; }
.salnav__list li:nth-child(3n)     a { --nav-ink: var(--ink-y); --nav-ink-text: var(--ink-y); }

.salnav__list a:hover,
.salnav__list a:focus-visible { color: var(--nav-ink-text, #fff); }

/* Between the mobile breakpoint and ~900px the bar is at its tightest: logo,
   five links and a fixed-width CTA. The larger desktop type overflows here,
   which would hide the last link behind a scroll strip that gives no hint it
   scrolls — the very problem the mobile panel exists to avoid. Step back to the
   old 13.5px in this band only.

   This block has to sit BELOW the .salnav__list a rule above, not with the
   other nav media queries higher up the file: same specificity, so whichever
   comes last wins, and from up there the base clamp() overrode it. */
@media (min-width: 781px) and (max-width: 900px) {
  .salnav__list { gap: 4px; }
  .salnav__list a { font-size: 13.5px; padding: 0 7px; }
}

.salnav__list a:hover::after,
.salnav__list a:focus-visible::after,
.salnav__list a.is-current::after { background: var(--nav-ink, #fff); }

.salnav__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--sal-navy);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur-hover) var(--ease-hover),
              color var(--dur-hover) var(--ease-hover);
}

.brochure {
  position: relative;
  z-index: 10;
  background: var(--paper-w);
  color: var(--sal-ink);
  font-family: var(--sans);
}

/* keep anchored headings clear of the fixed nav */
.sal-h2, .sal-h3, .contact__title { scroll-margin-top: 88px; }

/* the seam: a full-bleed ink bar hands off from the film to the brochure */
.brochure::before {
  content: "";
  display: block;
  height: 7px;
  background: var(--ink-bar);
}

.band {
  padding: clamp(64px, 8vw, 118px) var(--gutter);
}

.band--grey {
  background:
    radial-gradient(78rem 34rem at 88% -8%, rgba(12, 68, 130, .06), transparent 70%),
    radial-gradient(64rem 30rem at 4% 108%, rgba(167, 175, 180, .16), transparent 70%),
    #eef0f1;
}

.band__inner { max-width: 1180px; margin: 0 auto; }

/* --- cinematic navy band -----------------------------------------------
   The handoff calls for deep navy sections alternating with white editorial
   ones. Without this the page falls straight off the dark press film into
   unbroken white, which throws away the film's momentum. Blue still leads. */
.band--ink {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70rem 32rem at 88% -10%, rgba(0, 169, 232, .12), transparent 68%),
    radial-gradient(62rem 30rem at 0% 112%, rgba(12, 68, 130, .62), transparent 70%),
    var(--sal-navy-deep);
  color: #fff;
}

/* hairline of CMYK at the top edge, tying the band back to the press film */
.band--ink::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--ink-bar);
  opacity: .9;
}

.band--ink .sal-h2 { color: #fff; }
.band--ink .sal-h2 span { color: var(--alloy); }
.band--ink .sal-sub,
.band--ink .sal-lede { color: rgba(255, 255, 255, .74); }

.band--ink .stats li {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
}

.band--ink .stats li::before { background: var(--ink-c); }
.band--ink .stats b { color: #fff; }
.band--ink .stats span { color: rgba(255, 255, 255, .68); }

/* The survive selector on ink. .spec is already navy, so on this band it
   would sink into the background — lift it onto a translucent surface
   instead. The white condition chips need no change; they read as physical
   objects against the dark, which suits a control you are meant to press. */
.band--ink .spec {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .17);
  backdrop-filter: blur(8px);
}

.band--ink .survive__legend { color: rgba(255, 255, 255, .72); }
.band--ink .spec__note { color: rgba(255, 255, 255, .58); }
.band--ink .gateway a { border-color: rgba(255, 255, 255, .18); }
.band--ink .gateway b { color: #fff; }
.band--ink .gateway span { color: rgba(255, 255, 255, .68); }
.band--ink .proof__clients { color: rgba(255, 255, 255, .78); }


/* two-tone heading: bold blue word + grey word, over a CMYK register mark */
.sal-h2 {
  margin: 0;
  font-family: var(--display);
  /* pushed up from a 68px ceiling: at editorial scale the headline carries
     the page instead of politely introducing it */
  font-size: clamp(42px, 6.8vw, 104px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
  text-wrap: balance;
  color: var(--sal-blue);
}

.sal-h2::before {
  content: "";
  display: block;
  width: 104px;
  height: 6px;
  margin-bottom: clamp(16px, 1.8vw, 24px);
  background: var(--ink-bar);
}

.sal-h2 span { color: var(--sal-grey); font-weight: 600; }

.sal-h3 { position: relative; }

.sal-sub {
  margin: 6px 0 0;
  font-size: clamp(17px, 2vw, 26px);
  font-weight: 600;
  color: var(--sal-grey-d);
}

/* Paragraph-length intro. .sal-sub is sized for a single short line and
   fights the h1 when a real sentence is put through it. */
.sal-lede {
  margin: 16px 0 0;
  max-width: 54rem;
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 450;
  line-height: 1.62;
  color: var(--sal-grey-d);
}

.sal-h3 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 740;
  line-height: 1.06;
  letter-spacing: -.032em;
  color: var(--sal-blue);
}

/* sub-headings get a single ink tick, so they read as a level below the
   four-ink register mark on the section headings */
.sal-h3::before {
  content: "";
  display: block;
  width: 34px;
  height: 4px;
  margin-bottom: 13px;
  background: var(--sal-grey);
}

.sal-p {
  margin: 0 0 15px;
  max-width: 62ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.62;
  color: var(--sal-blue);
}

.sal-p:last-child { margin-bottom: 0; }

/* tab label, brochure's rounded-right corner kept but lifted off the flat
   mid-grey, which was the muddiest thing on the page */
.sal-tab {
  display: inline-block;
  margin: 0 0 26px;
  padding: 11px 34px 11px 20px;
  border-left: 6px solid var(--sal-grey);
  border-radius: 0 26px 26px 0;
  background: #fff;
  box-shadow: 0 3px 16px rgba(12, 68, 130, .10);
  color: var(--sal-blue);
  font-size: clamp(15px, 1.5vw, 21px);
  font-weight: 700;
}



/* hexagon image + accent, as used beside each service heading */
.sal-lead {
  display: grid;
  grid-template-columns: clamp(210px, 21vw, 285px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 46px);
  align-items: center;
  margin-bottom: clamp(30px, 4vw, 52px);
}

.sal-lead img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- hexagon lead image ------------------------------------------------
   The hexagon used to be baked into the PNG, which locked the crop and the
   resolution into the file. It is a clip-path now, so the source stays a
   plain square photograph that can be swapped or re-shot freely. --- */
.sal-lead__media {
  position: relative;
  display: block;
  width: 100%;
}

.sal-lead__media img {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--sal-navy-deep);
}

/* the small solid hexagon that overlaps the foot of the main one */
.sal-lead__media::after {
  content: "";
  position: absolute;
  right: -4%;
  bottom: 4%;
  width: 32%;
  aspect-ratio: 1;
  background: var(--sal-blue);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* blue rounded list cards */
.sal-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  align-items: start;
}

.sal-card {
  position: relative;
  overflow: hidden;
  padding: 26px 22px 26px;
  border-radius: 18px;
  background: var(--sal-blue);
  color: #fff;
  transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover);
}

/* four cards, four inks — the separations that make every label */
.sal-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: rgba(255, 255, 255, .34);
}



.sal-card h4 {
  margin: 0 0 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 600;
  color: #cfd8de;
}

.sal-card li::marker { color: var(--sal-grey); }

.sal-card ul { margin: 0; padding-left: 17px; }

.sal-card li {
  margin-bottom: 7px;
  font-size: clamp(13px, 1vw, 14.5px);
  font-weight: 500;
  line-height: 1.38;
}

/* mission / vision pair */
.sal-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 84px);
  margin-top: clamp(38px, 5vw, 66px);
}

/* mission / vision as white cards. The brochure sets these in flat grey
   bars; on screen that grey reads muddy and only clears ~3.4:1 against the
   blue text, so they become cards with an ink edge instead. */
.sal-pair > div {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3vw, 40px);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 2px 18px rgba(12, 68, 130, .08);
}

.sal-pair > div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--sal-blue);
}

.sal-pair__head {
  display: block;
  margin-bottom: 14px;
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 31px);
  font-weight: 740;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--sal-blue);
}

.sal-pair > div:last-child .sal-pair__head { text-align: left; }
.sal-pair > div:last-child .sal-p { margin-left: 0; }

/* core values — grey bar with an ink hexagon marker, cycling the four inks */
.sal-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px) clamp(16px, 2vw, 28px);
  margin-top: clamp(38px, 5vw, 62px);
  padding: 0;
  list-style: none;
}

.sal-values li {
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 16px rgba(12, 68, 130, .07);
  transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover);
}



.sal-value__head {
  position: relative;
  display: block;
  margin-bottom: 9px;
  padding: 2px 0 0 38px;
  background: none;
  color: var(--sal-blue);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 700;
  line-height: 1.2;
}

.sal-value__head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 30px;
  background: var(--hex-ink, var(--sal-blue));
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  transform: none;
}



.sal-values p {
  margin: 0;
  padding: 0;
  font-size: clamp(13.5px, 1.05vw, 15.5px);
  line-height: 1.5;
  color: var(--sal-grey-d);
}

/* credential tiles — the strongest trust signals, pulled out of the prose */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  margin: clamp(34px, 4vw, 54px) 0 0;
  padding: 0;
  list-style: none;
}

.stats li {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 26px);
  border-radius: 16px;
  background: var(--sal-mist);
}

.stats li::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--sal-blue);
}

.stats b {
  display: block;
  font-family: var(--display);
  /* up from a 50px ceiling — these are the proof points, they should read
     as figures on a wall, not as caption text */
  font-size: clamp(38px, 5vw, 76px);
  font-weight: 850;
  line-height: .86;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  color: var(--sal-blue);
}

.stats span {
  display: block;
  margin-top: 9px;
  font-size: clamp(12.5px, 1.05vw, 14.5px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--sal-grey-d);
}

/* barcoding solution groups as cards rather than bare text columns */
.sal-grid--3 > li {
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: 16px;
  border-top: 4px solid var(--sal-blue);
  background: #fff;
  box-shadow: 0 2px 16px rgba(12, 68, 130, .07);
}



/* larger opening paragraph, so each section has a clear entry point */
.sal-p--lead {
  max-width: 56ch;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 450;
  line-height: 1.5;
}

/* icon/caption grids (design solutions, barcoding, other services) */
.sal-grid {
  display: grid;
  gap: clamp(20px, 2.6vw, 38px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sal-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sal-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sal-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sal-grid strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--sal-blue);
}

.sal-grid span {
  display: block;
  margin-top: 6px;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.5;
  color: var(--sal-grey-d);
}

.sal-grid--bar strong {
  padding: 13px 16px;
  border-radius: 12px;
  border-bottom: 4px solid rgba(255, 255, 255, .34);
  background: var(--sal-blue);
  color: #fff;
  transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover);
}





/* industries — blue panel inside a grey band, ruled off in ink */
.sal-industries {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px clamp(20px, 3vw, 48px);
  margin: clamp(26px, 3.4vw, 40px) 0 0;
  padding: clamp(28px, 3.6vw, 46px);
  border-radius: 20px;
  background:
    radial-gradient(46rem 22rem at 100% 0%, rgba(5, 47, 85, .55), transparent 68%),
    radial-gradient(40rem 20rem at 0% 100%, rgba(0, 169, 232, .10), transparent 66%),
    var(--sal-blue);
  list-style: none;
  overflow: hidden;
}

.sal-industries li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 600;
  color: #fff;
}

.sal-industries li:nth-last-child(-n+3) { border-bottom: 0; }

/* fixed box + contain, so wide icons (the car) and square ones
   (the wrench) read at a consistent optical size */
.sal-industries img {
  width: 36px;
  height: 31px;
  object-fit: contain;
}

/* --- breadcrumb ------------------------------------------------------- */
.crumb { margin: 0 0 18px; }

.crumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--sal-grey-d);
}

.crumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--sal-grey);
}

.crumb a { color: var(--sal-blue); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* --- full-bleed page hero ----------------------------------------------
   The sector and product images earn far more as a full-bleed cinematic
   plate with the headline set over them than as a tidy rounded box below
   the copy. Navy scrim keeps the white type at contrast whatever the
   photograph is doing underneath. --- */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* cancel body.page's nav offset so the plate bleeds up behind the nav —
     the bar is translucent blue over a blur, which reads well over a photo.
     The top padding below re-clears the nav for the content. */
  margin-top: calc(var(--nav-h) * -1);
  min-height: clamp(420px, 62vh, 660px);
  padding: calc(var(--nav-h) + clamp(34px, 5vh, 68px)) var(--gutter) clamp(44px, 5vw, 72px);
  overflow: hidden;
  background: var(--sal-navy-deep);
  color: #fff;
  isolation: isolate;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the parallax layer — transform only, so it stays on the compositor */
  will-change: transform;
}

/* Two-stop scrim: heavier at the foot where the type sits, lighter at the
   top so the photograph still reads. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(4, 31, 57, .94) 0%, rgba(4, 31, 57, .74) 38%, rgba(4, 31, 57, .34) 78%, rgba(4, 31, 57, .22) 100%),
    linear-gradient(105deg, rgba(12, 68, 130, .5), transparent 62%);
}

/* The trophy line-up is a bright, high-key photograph — a white factory wall
   and a pale bench — where every other page hero is a dark plate. The standard
   scrim only reaches .22 at the top, which over this image leaves the strip
   behind the translucent nav almost white and the white heading struggling. So
   this hero keeps the same blue hue but carries more of it, and holds a floor
   under the whole frame rather than only at the foot. */
/* On a phone the hero is taller than the photograph is proportioned, so cover
   crops the sides away and a centred crop lands on one glass trophy. Biasing
   left keeps the wooden line-up in frame, so it still reads as a row of awards.
   No effect on wide viewports, where the crop is vertical. */
.page-hero--trophies .page-hero__bg { object-position: 32% center; }

.page-hero--trophies::before {
  background:
    linear-gradient(to top, rgba(4, 31, 57, .95) 0%, rgba(4, 31, 57, .86) 40%, rgba(4, 31, 57, .70) 78%, rgba(4, 31, 57, .62) 100%),
    linear-gradient(105deg, rgba(12, 68, 130, .62), rgba(12, 68, 130, .28) 70%);
}

/* CMYK hairline along the foot, tying every page back to the press film */
.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--ink-bar);
}

.page-hero__inner {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.page-hero .sal-h2 { color: #fff; }
.page-hero .sal-h2 span { color: rgba(255, 255, 255, .58); }
.page-hero .sal-h2::before { background: var(--ink-bar); }
.page-hero .sal-lede { color: rgba(255, 255, 255, .82); max-width: 46rem; }

.page-hero .crumb ol { color: rgba(255, 255, 255, .62); }
.page-hero .crumb a { color: #fff; }
.page-hero .crumb li + li::before { color: rgba(255, 255, 255, .42); }

/* the sector icon sits on white here so it reads against the photograph */
.page-hero .sector__icon {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
}

/* No photograph behind it — used where no asset exists at a usable size.
   The awards page is the case: its only trophy shot is a 1189x248 strip
   that cannot fill a 16:9 plate without visible upscaling. */
.page-hero--plain {
  background:
    radial-gradient(64rem 30rem at 82% -12%, rgba(0, 169, 232, .16), transparent 66%),
    radial-gradient(58rem 28rem at 4% 112%, rgba(12, 68, 130, .68), transparent 70%),
    var(--sal-navy-deep);
  min-height: clamp(320px, 44vh, 460px);
}

@media (prefers-reduced-motion: reduce) {
  .page-hero__bg { will-change: auto; transform: none !important; }
}

/* --- industry sector cards --------------------------------------------
   Replaces the flat name-and-icon list. Each card carries the failure mode
   and the construction that answers it, so the page argues rather than
   just claiming coverage. --- */
.sector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  margin: clamp(26px, 3.4vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}

.sector__card {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.2vw, 30px);
  border: 1px solid rgba(162, 169, 173, .42);
  border-radius: 16px;
  background: var(--paper-w);
  transition: border-color var(--dur-hover) var(--ease-hover),
              transform   var(--dur-hover) var(--ease-hover),
              box-shadow  var(--dur-hover) var(--ease-hover);
}

.sector__card:hover {
  border-color: var(--sal-blue);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(12, 68, 130, .13);
}

/* The icon PNGs are white glyphs, drawn for a blue panel. On a white card
   they need their own blue tile or they disappear entirely. */
.sector__icon {
  width: 54px;
  height: 54px;
  padding: 13px;
  border-radius: 13px;
  background: var(--sal-blue);
  object-fit: contain;
}

.sector__name {
  margin: 18px 0 0;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sal-blue);
}

.sector__problem {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--sal-grey-d);
}

.sector__spec {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(162, 169, 173, .34);
}

.sector__spec > div {
  display: grid;
  grid-template-columns: 5.8rem 1fr;
  gap: 10px;
  padding: 5px 0;
  font-size: 13.5px;
}

.sector__spec dt { color: var(--sal-grey-d); }
.sector__spec dd { margin: 0; font-weight: 650; color: var(--sal-ink); }

.sector__cert {
  margin: 14px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--sal-sky);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--sal-blue);
}

/* pushes the certification chip to the card foot so cards of differing
   copy length still line their chips up */
.sector__cert:last-child { margin-top: auto; }

/* card link to the full sector page; sits at the foot whatever the copy length */
.sector__more {
  margin-top: auto;
  padding-top: 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sal-blue);
  text-decoration: none;
}

.sector__more b {
  display: inline-block;
  transition: transform var(--dur-hover) var(--ease-hover);
}

.sector__card:hover .sector__more b { transform: translateX(4px); }
.sector__more:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .sector__more b { transition: none; }
  .sector__card:hover .sector__more b { transform: none; }
}

.sector__note {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  max-width: 46rem;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--sal-grey-d);
}

/* two buttons sitting side by side in a paragraph */
.mt-1 .btn + .btn { margin-left: 10px; }

@media (max-width: 560px) {
  .sector { grid-template-columns: 1fr; }
  .mt-1 .btn + .btn { margin: 10px 0 0; }
  /* flex, not block: .btn uses gap to space its label from the ::after arrow,
     and gap does nothing on a block box — the arrow ends up jammed against
     the text ("Request a quote→"). */
  .mt-1 .btn { display: flex; width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sector__card { transition: border-color var(--dur-hover) var(--ease-hover); }
  .sector__card:hover { transform: none; }
}

/* accreditations */
.sal-award-note {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 3.6vw, 46px) clamp(26px, 3.4vw, 44px) clamp(26px, 3.4vw, 44px);
  border-radius: 20px;
  background:
    radial-gradient(44rem 20rem at 96% 4%, rgba(199, 154, 59, .16), transparent 66%),
    radial-gradient(38rem 18rem at 2% 96%, rgba(5, 47, 85, .55), transparent 66%),
    var(--sal-blue);
  color: #fff;
  margin-top: clamp(28px, 3.4vw, 42px);
}

.sal-award-note::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--sal-gold);
}

.sal-award-note h2 {
  margin: 0 0 12px;
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 700;
}

.sal-award-note h2 span { color: var(--sal-grey); }

.sal-award-note p {
  margin: 0;
  max-width: 90ch;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.62;
}

.sal-accred {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 3.4vw, 48px) clamp(30px, 5vw, 76px);
  margin: clamp(34px, 4.4vw, 58px) 0 0;
  padding: 0;
  list-style: none;
}

.sal-accred li {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding-top: 22px;
  border-top: 2px solid #dfe4e7;
}

.sal-accred img { width: 100%; height: auto; }

.sal-accred h4 {
  margin: 0;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--sal-blue);
}

.sal-accred em {
  display: block;
  margin: 2px 0 9px;
  font-size: clamp(12.5px, 1.05vw, 14px);
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--sal-grey);
}

.sal-accred p {
  margin: 0;
  font-size: clamp(13.5px, 1.05vw, 15px);
  line-height: 1.55;
  color: var(--sal-ink);
}

/* award winners table */
/* award winners as a 3-up card grid, matching the brochure page:
   year tab, client, product, then the product shot with its medal.
   The medal is in the artwork, so there is no separate chip. */
.sal-awards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 46px) clamp(20px, 2.6vw, 40px);
  margin: clamp(30px, 3.6vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.sal-awards li {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  padding-top: 16px;
  border-top: 3px solid var(--sal-gold);
  transition: transform var(--dur-hover) var(--ease-hover);
}



.sal-awards b {
  justify-self: start;
  padding: 4px 15px;
  border-radius: 4px;
  background: var(--sal-blue);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
}

.sal-awards strong {
  margin-top: 12px;
  font-family: var(--display);
  font-size: clamp(19px, 1.9vw, 27px);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--sal-grey);
}

.sal-awards span {
  margin-top: 3px;
  font-size: clamp(14.5px, 1.3vw, 18px);
  font-weight: 700;
  line-height: 1.22;
  color: var(--sal-blue);
}

.sal-awards img {
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 215px;
  height: auto;
  margin-top: 14px;
}

/* Scroll reveal. The hiding rules are scoped to .reveals-on, which only the
   script adds — so if JS never runs, nothing is ever left invisible. */
.reveals-on [data-reveal] {
  opacity: 0;
  /* 12px, not 18px: the Scroll Reveal preset calls for an 8-16px offset so the
     move reads as a fade rather than a slide. 380ms sits in its 300-400ms band. */
  transform: translateY(12px);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
}

.reveals-on [data-reveal].is-in { opacity: 1; transform: none; }

/* section rhythm — after the component rules so these win */
.mt-1 { margin-top: clamp(24px, 3vw, 36px); }
.mt-2 { margin-top: clamp(28px, 3.6vw, 46px); }
.mt-3 { margin-top: clamp(44px, 5.4vw, 72px); }

/* contact — the brochure's blue back page */
.contact {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 112px) var(--gutter) clamp(52px, 6vw, 86px);
  /* --sal-blue-bright was referenced but defined nowhere, which invalidated this
     whole background declaration and left the band white with invisible white
     text on it. Base is now the official blue; the second wash was process cyan,
     replaced with the palette's light blue. */
  background:
    radial-gradient(58rem 28rem at 92% 6%, rgba(5, 47, 85, .60), transparent 68%),
    radial-gradient(52rem 26rem at 6% 96%, rgba(232, 240, 248, .16), transparent 66%),
    var(--sal-blue);
  color: #fff;
  font-family: var(--sans);
}

.contact__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  margin-top: clamp(26px, 3vw, 38px);
  padding: 0 28px;
  border-radius: 999px;
  background: #fff;
  color: var(--sal-blue);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background 240ms ease, color 240ms ease,
              transform 240ms var(--ease-out), box-shadow 240ms ease;
}

.contact__cta::after { content: "→"; font-size: 19px; }

.contact__cta:hover {
  background: var(--sal-mist);
  color: var(--sal-navy);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .24);
}

.contact__list li { transition: transform var(--dur-hover) var(--ease-hover); }

.contact__list a:hover { border-bottom-color: var(--sal-gold); color: var(--sal-gold); }

.contact__inner { max-width: 1180px; margin: 0 auto; }

.contact__logo {
  display: block;
  width: min(340px, 70vw);
  height: auto;
  margin: 0 auto clamp(34px, 4.6vw, 58px);
}

.contact__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(32px, 4.6vw, 58px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.042em;
}

.contact__title span { color: #b9ccdd; font-weight: 500; }

.contact__rule {
  height: 4px;
  margin: 18px 0 24px;
  background: linear-gradient(90deg, var(--sal-gold) 0 22%, rgba(255,255,255,.28) 22%);
}

.contact__services {
  margin: 0 0 clamp(32px, 4vw, 48px);
  max-width: 74ch;
  font-size: clamp(14.5px, 1.2vw, 17px);
  font-weight: 600;
  line-height: 1.5;
  color: #e4edf4;
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 70px);
  align-items: start;
}

.contact__city {
  margin: 0 0 18px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
}

.contact__list { margin: 0; padding: 0; list-style: none; }

.contact__list li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 15px;
  font-size: clamp(14.5px, 1.2vw, 17px);
  line-height: 1.45;
}

.contact__list svg { width: 20px; height: 20px; fill: #fff; margin-top: 1px; }

.contact__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
}
.contact__list a:hover { border-bottom-color: #fff; }

.contact__aside {
  display: grid;
  justify-items: center;
  gap: 22px;
}

.contact__aside img { display: block; height: auto; background: #fff; }
.contact__qr { width: 132px; padding: 9px; border-radius: 8px; }
.contact__delivery { width: 210px; padding: 12px 14px; border-radius: 10px; }

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 24px var(--gutter) max(24px, env(safe-area-inset-bottom));
  border-top: 4px solid rgba(255, 255, 255, .16);
  background: var(--sal-blue);
  color: #cbd7e1;
  font-family: var(--sans);
  font-size: 13px;
}

.site-footer p { margin: 0; max-width: 60rem; }

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  text-underline-offset: 4px;
}

@media (max-width: 780px) {
  :root { --gutter: 20px; }

  .site-header { min-height: 58px; }
  .site-header__logo { width: 104px; }
  .sequence { height: 560vh; }

  .stage__scrim {
    background:
      linear-gradient(180deg, rgba(10, 11, 13, .66), rgba(10, 11, 13, .3) 18%, transparent 30%),
      linear-gradient(0deg, rgba(10, 11, 13, .88), transparent 34%);
  }

  .stage__grid { opacity: .28; }

  .chapter {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-content: end;
    padding: 76px var(--gutter) 112px;
  }

  .chapter__copy,
  .chapter--hero .chapter__copy,
  .chapter--right .chapter__copy,
  .chapter--left .chapter__copy,
  .chapter--final .chapter__copy {
    grid-column: 1 / 7;
  }

  .chapter__eyebrow { margin-bottom: 20px; }
  .chapter__title { font-size: clamp(42px, 12.5vw, 72px); line-height: .88; }
  .chapter__deck { max-width: 24rem; margin-top: 14px; font-size: 17px; }
  .chapter__fact { margin-top: 16px; }

  .chapter--hero { align-content: start; padding-top: 14vh; }
  .chapter--hero .chapter__copy { padding-bottom: 0; }
  .chapter--hero .chapter__eyebrow { margin-bottom: 30px; }
  .chapter--hero .chapter__title { font-size: clamp(72px, 24vw, 120px); line-height: .8; }
  .chapter--hero .chapter__deck { margin-left: 0; max-width: 18rem; }

  /* Full-width taps, and tighter spacing so the CTA still clears the fold
     on a small phone once the film has pushed the copy down. */
  .hero-cta { margin-top: 22px; }
  .hero-cta > span { gap: 10px; }
  .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
  .hero-cue { margin-top: 18px; }

  .chapter--final { align-content: end; }
  .chapter--final .chapter__title { max-width: none; }

  .telemetry {
    grid-template-columns: auto auto 1fr auto;
    gap: 10px;
  }

  .telemetry__chapter { min-width: 9ch; }

  .loader__mark { display: block; }
  .loader__number { font-size: 40vw; }
  .loader__meta { margin-top: 22px; text-align: left; }

  .salnav { gap: 10px; }
  .salnav__logo { width: 92px; }
  .salnav__list { gap: 2px; }
  /* the panel rows are full-width touch targets, so the desktop clamp doesn't
     apply here — 16px is set with the panel layout above */
  .salnav__list a { padding: 0 8px; }
  .salnav__cta { min-height: 44px; padding: 0 15px; font-size: 12.5px; }

  .stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stats li { padding: 18px 16px; }
  .sal-grid--3 { grid-template-columns: 1fr; }

  .sal-lead { grid-template-columns: 132px minmax(0, 1fr); gap: 18px; }
  .sal-cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .sal-pair { grid-template-columns: 1fr; }
  .sal-pair > div:last-child .sal-pair__head { border-radius: 0 26px 26px 0; text-align: left; }
  .sal-values { grid-template-columns: 1fr; }
  .sal-grid--4, .sal-grid--6 { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
  .sal-industries {
    grid-template-columns: 1fr 1fr;
    gap: 16px 14px;
    padding: 22px 18px;
  }

  .sal-industries li { grid-template-columns: 28px 1fr; gap: 10px; font-size: 13.5px; }
  .sal-industries img { width: 28px; height: 26px; }
  .sal-accred { grid-template-columns: 1fr; }
  .sal-awards { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .sal-awards strong { margin-top: 9px; font-size: 16px; }
  .sal-awards span { font-size: 13.5px; }
  .sal-awards b { padding: 3px 11px; font-size: 11.5px; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
  }
  .site-footer { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  /* Reduced motion means fewer and gentler animations, not none: colour and
     opacity feedback still helps comprehension, so only movement is removed. */
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, background-color, border-color, color, box-shadow !important;
    transition-duration: 160ms !important;
  }

  /* strip translation/scale, keep the element where it belongs */
  .reveals-on [data-reveal],
  .sal-card, .sal-values li, .proof li, .gateway a, .sal-awards li,
  .btn, .contact__list li, .sal-grid--bar strong {
    transform: none !important;
  }
  .sequence { height: 100svh; }
  .reveals-on [data-reveal] { opacity: 1; transform: none; transition: none; }
  .chapter:not(.chapter--hero) { display: none; }
  .chapter--hero { visibility: visible; }
  .chapter--hero .reveal > span { transform: translateY(0); }
  .chapter--hero .chapter__eyebrow::before { transform: scaleX(1); }
  .telemetry { display: none; }
}

/* ============================================================
   MULTI-PAGE LAYOUT
   Inner pages have no film above them, so the nav is always on
   and the page owns its own background and footer placement.
   ============================================================ */
body.page {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-top: var(--nav-h);  /* clears the fixed nav */
  background: var(--paper-w); /* html/body default is the film's carbon */
}

body.page > main {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

/* short pages still push the footer to the bottom */
body.page > main > .brochure,
body.page > main > .contact { flex: 1 0 auto; }

/* the seam bar exists to hand off from the film; inner pages already have the
   nav's own ink border doing that job */
body.page .brochure::before { display: none; }

body.page .brochure > .band:first-child { padding-top: clamp(44px, 5vw, 74px); }

@media (max-width: 780px) {
  :root { --nav-h: 68px; }
}

/* ============================================================
   TRUST & AUTHORITY HOME SECTIONS
   Section order per ui-ux-pro-max "Trust & Authority + Conversion":
   Hero -> Proof (certs, stats) -> Solution overview -> CTA path.
   The credentials used to live only on an inner page, which is the
   "hidden credentials" anti-pattern the same rules call out.
   ============================================================ */

/* shared button system: 44px targets, 200ms transitions */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease,
              border-color 200ms ease, transform 200ms var(--ease-out),
              box-shadow 200ms ease;
}



.btn--primary { background: var(--sal-blue); color: #fff; }
.btn--primary:hover { background: var(--sal-navy); }

/* on navy/cinematic backgrounds the primary action inverts */
.cta-band .btn--primary,
.contact .btn--primary { background: #fff; color: var(--sal-navy); }
.cta-band .btn--primary:hover,
.contact .btn--primary:hover { background: var(--sal-mist); }

.btn--ghost { border-color: rgba(12, 68, 130, .38); color: var(--sal-blue); }
.btn--ghost:hover { background: var(--sal-blue); border-color: var(--sal-blue); color: #fff; }

.btn--ghost-light { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--sal-blue); }

.btn::after { content: "→"; font-size: 17px; }
.btn--plain::after { content: none; }

/* ---- proof: certifications, always visible on the home page ---- */
.proof {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
  margin: clamp(30px, 3.6vw, 46px) 0 0;
  padding: 0;
  list-style: none;
}

.proof li {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: clamp(18px, 2vw, 26px) 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 16px rgba(12, 68, 130, .07);
  text-align: center;
  transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover);
}



.proof img { width: 58px; height: auto; }

.proof b {
  font-size: clamp(12.5px, 1.05vw, 14.5px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--sal-blue);
}

.proof span {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sal-grey-d);
}

.proof__clients {
  max-width: 70ch;
  margin: clamp(28px, 3.4vw, 40px) 0 0;
  font-size: clamp(15px, 1.2vw, 17.5px);
  line-height: 1.6;
  color: var(--sal-blue);
}

.proof__clients strong { font-weight: 700; }

/* ---- gateway: route into the section pages ---- */
.gateway {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  margin: clamp(30px, 3.6vw, 46px) 0 0;
  padding: 0;
  list-style: none;
}

.gateway a {
  position: relative;
  display: grid;
  align-content: start;
  gap: 9px;
  height: 100%;
  overflow: hidden;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: 18px;
  background: var(--sal-blue);
  color: #fff;
  text-decoration: none;
  transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover);
}

.gateway a::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: rgba(255, 255, 255, .34);
}



.gateway b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--display);
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 740;
  line-height: 1.08;
  letter-spacing: -.03em;
}

.gateway b::after {
  content: "→";
  font-size: 18px;
  color: var(--sal-grey);
  transition: transform 220ms var(--ease-out);
}

.gateway a:hover b::after { transform: translateX(5px); }

.gateway span {
  font-size: clamp(13.5px, 1.1vw, 15px);
  font-weight: 400;
  line-height: 1.5;
  color: #cfdcea;
}

/* ---- closing CTA ---- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 6vw, 88px) var(--gutter);
  background:
    radial-gradient(52rem 24rem at 92% 8%, rgba(5, 47, 85, .60), transparent 68%),
    radial-gradient(46rem 22rem at 4% 96%, rgba(0, 169, 232, .12), transparent 66%),
    var(--sal-blue);
  color: #fff;
  font-family: var(--sans);
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: rgba(255, 255, 255, .22);
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(22px, 3vw, 44px);
}

.cta-band__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.04em;
}

.cta-band__sub {
  margin: 10px 0 0;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.5;
  color: #cfdcea;
}

.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 1100px) {
  .proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gateway { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .proof img { width: 46px; }
  .gateway { grid-template-columns: 1fr; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { flex: 1 1 auto; }
}

/* ============================================================
   NARROW PHONES (<=560px)
   A 132px hexagon beside a 130px text column left both unreadable
   and pushed long words past the viewport, so these stack.
   ============================================================ */
@media (max-width: 560px) {
  .sal-lead { grid-template-columns: 1fr; gap: 16px; }
  .sal-lead img { width: min(168px, 46vw); }
  .sal-cards { grid-template-columns: 1fr; }
  .sal-awards { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .sal-industries { grid-template-columns: 1fr; }
}

/* ============================================================
   HOVER MOTION — pointer-gated
   Touch devices fire a synthetic :hover on tap, which left card
   lifts stuck until the next tap. Movement on hover is therefore
   restricted to real pointers; colour hovers stay unconditional.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .sal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(12, 68, 130, .26);
  }
  .sal-values li:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(12, 68, 130, .14);
  }
  .sal-grid--bar strong:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(12, 68, 130, .24);
  }
  .sal-awards li:hover { transform: translateY(-5px); }
  .proof li:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(12, 68, 130, .15);
  }
  .gateway a:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(12, 68, 130, .28);
  }
  .contact__list li:hover { transform: translateX(4px); }
  .btn:hover { transform: translateY(-2px); }
}

/* ============================================================
   PRESS FEEDBACK
   Every pressable surface acknowledges the press. Subtle scale
   (0.97) reads as physical without looking like a bounce.
   ============================================================ */
.btn:active,
.salnav__cta:active,
.contact__cta:active,
.gateway a:active,
.salnav__brand:active {
  transform: scale(.97);
  transition: transform var(--dur-press) var(--ease-hover);
}

@media (prefers-reduced-motion: reduce) {
  .btn:active, .salnav__cta:active, .contact__cta:active,
  .gateway a:active, .salnav__brand:active { transform: none; }
}

/* ============================================================
   SKIP INTRO
   The film gates ~5800px of scroll before any content. This gives
   an immediate way past it, and retires once the nav takes over.
   ============================================================ */
.skip-film {
  position: fixed;
  z-index: 210;
  top: max(14px, env(safe-area-inset-top));
  right: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(244, 242, 236, .45);
  border-radius: 999px;
  background: rgba(10, 11, 13, .55);
  backdrop-filter: blur(8px);
  color: var(--paper);
  font-family: var(--data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 200ms var(--ease-hover),
              background 200ms var(--ease-hover),
              color 200ms var(--ease-hover);
}

.skip-film::after { content: "\2193"; font-size: 14px; }
.skip-film:hover { background: var(--paper); color: var(--carbon); }

.skip-film.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   CROSS-PAGE TRANSITIONS
   Eight separate documents previously swapped with a hard cut.
   Progressive enhancement: unsupported browsers simply ignore it.
   ============================================================ */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation-duration: 130ms; }
::view-transition-new(root) { animation-duration: 190ms; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ============================================================
   SURVIVAL SELECTOR  —  "What must your label survive?"
   The site's one interactive teaching moment. Recommends a
   construction from SA Labels' real substrate / adhesive /
   finish range. Presented as guidance, never as a guarantee.
   ============================================================ */
.survive {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: start;
  margin-top: clamp(30px, 3.6vw, 48px);
}

.survive__legend {
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sal-grey-d);
}

.conditions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.conditions label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid #d5dbe0;
  border-radius: 999px;
  background: #fff;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--sal-ink);
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-hover),
              background var(--dur-hover) var(--ease-hover),
              color var(--dur-hover) var(--ease-hover);
}

.conditions input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.conditions label::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  border: 1.5px solid #c2cad1;
  border-radius: 4px;
  transition: background var(--dur-hover) var(--ease-hover),
              border-color var(--dur-hover) var(--ease-hover);
}

.conditions input:checked + span::before,
.conditions label:has(input:checked)::before {
  background: var(--sal-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color: var(--sal-blue);
}

.conditions label:has(input:checked) {
  border-color: var(--sal-blue);
  /* light blue is the Design System's chip / highlight-panel colour */
  background: var(--sal-sky);
  color: var(--sal-blue);
}

.conditions label:has(input:focus-visible) {
  outline: 3px solid var(--sal-blue);
  outline-offset: 3px;
}

/* --- result panel --- */
.spec {
  position: sticky
;  top: 92px;
  overflow: hidden;
  padding: clamp(24px, 2.8vw, 36px);
  border-radius: 20px;
  background: var(--sal-navy);
  color: #fff;
}

.spec::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--ink-bar);
}

.spec__head {
  margin: 0 0 4px;
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #93b2cc;
}

.spec__title {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: clamp(21px, 2.1vw, 28px);
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.spec__rows { margin: 0; padding: 0; list-style: none; }

.spec__rows > div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.spec__rows dt {
  font-family: var(--data);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #93b2cc;
  padding-top: 2px;
}

.spec__rows dd {
  margin: 0;
  font-size: clamp(14.5px, 1.2vw, 16.5px);
  font-weight: 600;
  line-height: 1.35;
}

.spec__why {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.spec__why li {
  margin-bottom: 7px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #cfdcea;
}

.spec__note {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #93b2cc;
}

.spec__actions { margin-top: 20px; }

@media (max-width: 980px) {
  .survive { grid-template-columns: 1fr; }
  .spec { position: static; }
}

/* ============================================================
   SITE FOOTER — trust block
   ============================================================ */
.site-footer {
  display: block;
  padding: clamp(48px, 5.5vw, 76px) var(--gutter) 0;
  border-top: 4px solid rgba(255, 255, 255, .16);
  background: var(--sal-navy);
  color: #b6c7d6;
  font-family: var(--sans);
  font-size: 14px;
}

.foot {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  max-width: 1180px;
  margin: 0 auto;
}

.foot h2 {
  margin: 0 0 16px;
  font-family: var(--data);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7f9bb4;
}

.foot__logo { display: block; width: 128px; height: auto; margin-bottom: 18px; }

.foot p { margin: 0 0 12px; line-height: 1.6; }

.foot ul { margin: 0; padding: 0; list-style: none; }

.foot li { margin-bottom: 2px; line-height: 1.5; }

.foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #dbe6ef;
  text-decoration: none;
  border-bottom: 1px solid rgba(219, 230, 239, .3);
  transition: color var(--dur-hover) var(--ease-hover),
              border-color var(--dur-hover) var(--ease-hover);
}

.foot a:hover { color: var(--sal-gold); border-bottom-color: var(--sal-gold); }

.foot__delivery { width: 168px; height: auto; margin-top: 8px; background: #fff; padding: 9px 11px; border-radius: 8px; }

/* ---- footer mini map -------------------------------------------------------
   A static OpenStreetMap plate baked into assets/, not a live embed: nothing
   third-party loads at runtime, it still renders offline from the zip, and it
   cannot hijack the page scroll the way an interactive map iframe does.
   Clicking hands off to Google Maps, which is what people actually want here. */
.foot__map { margin: 14px 0 4px; }

/* qualified with .foot so it outranks `.foot a`, which would otherwise force
   inline-flex and leave the 800px plate overflowing the column. */
.foot a.minimap {
  display: block;
  position: relative;
  width: min(100%, 320px);
  min-height: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sal-mist);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
  transition: transform var(--dur-hover) var(--ease-hover),
              box-shadow var(--dur-hover) var(--ease-hover);
}

.minimap img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.minimap__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 13px;
  background: var(--sal-blue);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.minimap__cta b { transition: transform var(--dur-hover) var(--ease-hover); }

/* .foot a turns gold on hover; gold on the blue bar is too low-contrast, so the
   card lifts and the arrow travels instead. */
.foot a.minimap:hover { color: var(--paper-w); }

@media (hover: hover) and (pointer: fine) {
  .minimap:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .38);
  }
  .minimap:hover .minimap__cta b { transform: translateX(4px); }
}

.minimap:active { transform: translateY(-1px); }

.minimap__credit {
  display: block;
  margin-top: 8px;
  font-size: .66rem;
  letter-spacing: .02em;
  color: rgba(219, 230, 239, .5);
}

.foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 1180px;
  margin: clamp(36px, 4vw, 56px) auto 0;
  padding: 20px 0 max(22px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 12.5px;
  color: #8aa4bb;
}

.foot__bar p { margin: 0; }
.foot__bar nav { display: flex; flex-wrap: wrap; gap: 18px; }
.foot__bar a { min-height: 44px; }

@media (max-width: 860px) {
  .foot { grid-template-columns: 1fr; gap: 30px; }
}

/* ============================================================
   SMART QUOTE — stepped enquiry builder
   Front-end only: there is no server, so the finished spec is
   handed off through the visitor's own email or WhatsApp client.
   ============================================================ */
.quote {
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 4px 30px rgba(5, 47, 85, .10);
  color: var(--sal-ink);
}

.quote__bar {
  display: flex;
  gap: 3px;
  padding: 0;
  background: var(--sal-mist);
}

.quote__bar span {
  flex: 1;
  height: 5px;
  background: #d7dee4;
  transition: background 260ms var(--ease-hover);
}

.quote__bar span.is-done { background: var(--sal-blue); }

.quote__body { padding: clamp(24px, 3vw, 40px); }

.quote__step { display: none; }
.quote__step.is-active { display: block; }

.quote__count {
  margin: 0 0 6px;
  font-family: var(--data);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sal-grey-d);
}

.quote__q {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: clamp(23px, 2.4vw, 33px);
  font-weight: 760;
  line-height: 1.06;
  letter-spacing: -.032em;
  color: var(--sal-blue);
}

.quote__field { margin-bottom: 18px; }

.quote__field > label,
.quote__field > .quote__label {
  display: block;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sal-ink);
}

.quote__hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--sal-grey-d);
}

.quote input[type="text"],
.quote input[type="email"],
.quote input[type="tel"],
.quote input[type="number"],
.quote input[type="date"],
.quote select,
.quote textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid #cfd7de;
  border-radius: 10px;
  background: #fff;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--sal-ink);
  transition: border-color var(--dur-hover) var(--ease-hover),
              box-shadow var(--dur-hover) var(--ease-hover);
}

.quote textarea { min-height: 96px; resize: vertical; }

.quote input:focus,
.quote select:focus,
.quote textarea:focus {
  border-color: var(--sal-blue);
  box-shadow: 0 0 0 3px rgba(0, 169, 232, .22);
  outline: none;
}

.quote__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid #e3e8ec;
}

.quote__err {
  margin: 12px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #b3123f;
}

.quote__err:empty { margin: 0; }

/* --- send status: announced to screen readers via role="status" --- */
.quote__status {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--sal-grey-d);
}

.quote__status:empty { margin: 0; }
.quote__status[data-tone="ok"]  { color: #0f7a4a; }
.quote__status[data-tone="bad"] { color: #b3123f; }

/* --- honeypot: off-screen rather than display:none, which some bots skip --- */
.quote__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- generated specification summary --- */
.quote__summary {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  border-top: 1px solid #e3e8ec;
}

.quote__summary div {
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr);
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid #e3e8ec;
}

.quote__summary dt {
  font-family: var(--data);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sal-grey-d);
  padding-top: 3px;
}

.quote__summary dd { margin: 0; font-size: 15px; font-weight: 600; }

.quote__send { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 620px) {
  .quote__summary div { grid-template-columns: 1fr; gap: 2px; }
  .quote__nav .btn, .quote__send .btn { flex: 1 1 auto; }
}

/* ============================================================
   LABEL BUILDER — embedded in the quote, and its material chooser.
   Ported from the Desktop build's quoting system.
   ============================================================ */
/* --- builder embedded inside the quote wizard --- */
/* It sits on the white form band and inside a stepped panel, so it stacks in
   one column (conditions, then the live spec) and drops the sticky behaviour. */
.quote__buildlead {
  margin: 22px 0 2px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--sal-ink);
}

.survive--quote {
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 14px;
}

.survive--quote .spec { position: static; top: auto; }

/* Survive tool — visitor material chooser (on the navy spec panel) */
.spec__pick{margin:2px 0 14px}
.spec__picklabel{margin:0 0 8px;font-size:.82rem;line-height:1.35;color:rgba(255,255,255,.66)}
.spec__chips{display:flex;flex-wrap:wrap;gap:8px}
.spec__chip{font:inherit;font-size:.86rem;font-weight:600;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.38);border-radius:999px;padding:8px 14px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.spec__chip:hover{border-color:#fff}
.spec__chip.is-active{background:#fff;color:var(--sal-navy);border-color:#fff;font-weight:700}
.spec__chip:focus-visible{outline:2px solid var(--ink-y);outline-offset:2px}