/* ==========================================================================
   AOS Pte Ltd design system v3
   --------------------------------------------------------------------------
   GOVERNING DOCUMENT: the official AOS Brand Kit V13 (22 Feb 2021).

   PALETTE (kit page 4). These four values, and nothing else:
     SALT         #FFFFFF
     SAND         #EDEDED
     OUTER SPACE  #082041
     SANGRIA      #FFD401

   Navy note: the kit's palette swatch names OUTER SPACE #082041, but every
   logo artwork in the kit, and assets/images/logo.png itself, is drawn in
   #00245D. Both official values are kept and used where each belongs, with
   nothing blended or averaged between them. #00245D is the primary brand
   navy that anything near the logo matches (header, headings, bands);
   #082041 is the deep field for the topbar and footer.

   KIT RULE APPLIED SHEET-WIDE: do not use tint or opacity. There is no
   rgba() colour, no lightened or desaturated navy or yellow, no gradient
   between brand colours, no filter and no opacity fade in this file.
   Lighter surfaces use SAND or SALT, which is what they are for. The only
   alpha values present are two restrained neutral-black UI shadows; the
   kit's shadow rule is scoped to logo use and does not cover those.

   TYPE: a DOCUMENTED DEVIATION from the kit, decided by Nick. The kit names
   Orbitron (page 9) as the brand face. Orbitron was built, reviewed live and
   rejected by Nick as "too scary, it looks like an alien". He nominated his
   own agency site, freemanslandcreatives.com, as the reference instead, so
   this site now uses BRICOLAGE GROTESQUE for headings, stat numerals and
   kicker labels, and PUBLIC SANS for body copy, nav, buttons, form labels and
   the MAXIGHT specification tables. Orbitron and Montserrat are both fully
   removed, files included. The deviation is deliberate and Nick owns it.
   ========================================================================== */

/* ---------- Fonts ----------
   Self-hosted woff2, latin subset only. Nothing is loaded from a third-party
   font CDN. Two weights per family, matching freemanslandcreatives.com:
   Bricolage Grotesque 500/600 for display, Public Sans 400/600 for text.
   Each family ships as one variable woff2, and the declared weight RANGE is
   deliberately clamped to those two values so an out-of-range weight snaps to
   the nearest real one instead of being faux-bolded by the browser. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-Variable-latin.woff2") format("woff2");
  font-weight: 500 600; font-stretch: 100%; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans-Variable-latin.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* The brand kit palette, verbatim */
  --salt: #FFFFFF;
  --sand: #EDEDED;
  --outer-space: #082041;
  --yellow: #FFD401;
  /* Primary brand navy: the colour the logo is actually drawn in */
  --navy: #00245D;

  /* Semantic aliases so the rest of the sheet reads plainly */
  --white: var(--salt);
  --paper: var(--sand);
  --line: var(--sand);
  --ink: #082041;              /* OUTER SPACE, used as body ink */
  --muted: #5A5A5A;            /* SAND at a lower lightness, pure neutral */
  --on-dark: #FFFFFF;
  --on-dark-muted: #EDEDED;
  --line-on-navy: #082041;     /* OUTER SPACE rule on a navy field */
  --line-on-space: #00245D;    /* navy rule on an OUTER SPACE field */

  /* Type */
  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
  --f-body: "Public Sans", system-ui, sans-serif;
  /* Rebalanced for Bricolage Grotesque, which is far narrower and shorter than
     the Orbitron build it replaced: every display size goes UP and every
     display line-height comes DOWN, or the headings read under-set. */
  --t-hero: clamp(38px, 5.6vw, 76px);
  --t-h1: clamp(34px, 4.6vw, 60px);
  --t-h2: clamp(27px, 3.4vw, 46px);
  --t-h3: clamp(19px, 1.5vw, 23px);
  --t-h4: 17px;
  --t-lede: clamp(17px, 1.25vw, 20px);
  --t-body: 16px;
  --t-sm: 14.5px;
  --t-micro: 12px;
  --t-stat: clamp(44px, 5.4vw, 78px);

  /* Space scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;
  /* Vertical rhythm. section padding applies top AND bottom, so the real gap
     between two blocks is roughly double these. A band already has a colour
     edge doing part of the separating work, so bands sit a step tighter. */
  --sec-y: clamp(56px, 5.6vw, 88px);
  --sec-y-band: clamp(50px, 5vw, 78px);
  --sec-y-tight: clamp(40px, 4vw, 64px);

  /* Shape */
  /* Two radii only, deliberately far apart: near-square surfaces set against
     fully round pills. A soft 14px corner on every single element is the
     default-template look, so the surfaces go nearly square instead. */
  --r-sm: 2px;
  --r: 4px;
  --r-lg: 6px;
  --lift: 0 22px 44px -30px rgba(0, 0, 0, 0.45);
  --maxw: 1200px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.66;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* height:auto is load-bearing. Every <img> carries width/height attributes
   (they reserve layout space and stop CLS), and without this the HTML height
   attribute wins as a presentational hint, so a 1500x950 photo set to
   width:100% still renders 950px tall and object-fit crops it vertically. */
img { max-width: 100%; height: auto; display: block; }
/* Form controls do not inherit the page font by default; without this the
   hamburger button falls back to the UA font (Arial on Windows Chrome). */
button, input, textarea, select { font: inherit; color: inherit; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* A yellow ring on a yellow button is invisible, which is an accessibility
   failure rather than a style preference, so those two swap to navy. */
.btn-primary:focus-visible,
.nav-flag:focus-visible,
.mx-eyebrow .flag:focus-visible { outline-color: var(--navy); }
/* ...but the ring is drawn OUTSIDE the button, on the FIELD, so the field is
   what it has to be seen against. The navy swap above is right on the white
   header and wrong everywhere the same yellow button sits on a dark band:
   #00245D on #082041 measures 1.10:1 and #00245D on #00245D is nothing at
   all. Verified on a rendered screenshot, not by reading the rule: the
   MAXIGHT hero CTA reported :focus-visible = true with no ring visible on
   screen, so a keyboard visitor had no idea where they were on the page's
   primary call to action. On a dark field the ring goes SALT, which is
   already in the kit and measures 12.6:1 against OUTER SPACE. */
.on-dark .btn-primary:focus-visible,
.band-navy .btn-primary:focus-visible,
.mxv-hero .btn-primary:focus-visible,
.mxv-rail .btn-primary:focus-visible,
.mxv-band-space .btn-primary:focus-visible { outline-color: var(--white); }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
@media (max-width: 560px) { .wrap { padding: 0 20px; } }
section { padding: var(--sec-y) 0; }
section.band-navy, section.band-paper { padding: var(--sec-y-band) 0; }
/* Heroes own their own vertical padding. This override is required because
   `section.band-navy` is more specific than `.hero`, so without it every hero
   silently gained a full section's padding on top of its own. */
section.hero, section.mx-hero { padding: 0; }
.section-tight,
section.band-navy.section-tight,
section.band-paper.section-tight { padding: var(--sec-y-tight) 0; }
.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;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--yellow); color: var(--navy);
  padding: 12px 20px; font-weight: 600; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Type ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  color: var(--navy);
  margin: 0 0 var(--sp-4);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.16;
}
h1 { font-size: var(--t-h1); letter-spacing: -0.032em; line-height: 1.02; }
h2 { font-size: var(--t-h2); letter-spacing: -0.03em; line-height: 1.06; }
h3 { font-size: var(--t-h3); line-height: 1.22; letter-spacing: -0.018em; }
h4 { font-size: var(--t-h4); line-height: 1.35; letter-spacing: -0.012em; }
p { margin: 0 0 var(--sp-4); color: var(--muted); }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 600; }

.kicker {
  display: block;
  font-family: var(--f-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 var(--sp-4);
}
/* On a light surface the accent cannot be yellow TEXT (it would fail contrast,
   and the kit forbids solving that by dulling the yellow), so the accent
   becomes a solid, full-strength yellow tick in front of navy type. */
.kicker::before {
  content: ""; display: block;
  width: 26px; height: 4px; margin-bottom: 13px;
  background: var(--yellow);
}
.on-dark .kicker::before, .hero .kicker::before,
.page-hero .kicker::before, .mx-hero .kicker::before { display: none; }
.lede { font-size: var(--t-lede); line-height: 1.6; color: var(--muted); max-width: 60ch; }

/* ---------- Asymmetric section head ---------- */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.88fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  position: relative;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.sec-head::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 84px; height: 3px; background: var(--yellow);
}
.sec-head h2 { margin-bottom: 0; }
.sec-head .sec-aside { padding-bottom: 5px; }
.sec-head .lede { max-width: 46ch; }
.sec-head--solo { grid-template-columns: minmax(0, 1fr); }
.on-dark .sec-head { border-top-color: var(--line-on-navy); }
.on-dark .sec-head h2, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }
.on-dark .kicker { color: var(--yellow); }
.on-dark p, .on-dark .lede { color: var(--on-dark-muted); }
@media (max-width: 820px) {
  .sec-head { grid-template-columns: 1fr; align-items: start; gap: var(--sp-5); }
}

/* ---------- Buttons (Public Sans: they are UI, not brand display) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border-radius: 999px;
  font-family: var(--f-body); font-weight: 600; font-size: 15px;
  letter-spacing: -0.012em; border: 2px solid transparent; cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-primary { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
.btn-primary:hover { background: var(--navy); color: var(--yellow); transform: translateY(-2px); }
.btn-navy { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-navy:hover { background: var(--outer-space); border-color: var(--outer-space); transform: translateY(-2px); }
.btn-outline { border-color: var(--white); color: var(--white); }
.btn-outline:hover { background: var(--white); color: var(--navy); transform: translateY(-2px); }
.btn-ghost { border-color: var(--navy); color: var(--navy); background: var(--white); }
.btn-ghost:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); }
/* Tertiary: no chrome at all. Weight, not colour, is what separates the tiers. */
.btn-text {
  padding: 15px 0; border: 0; border-radius: 0;
  color: var(--navy); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--yellow);
}
.btn-text:hover { box-shadow: inset 0 -2px 0 var(--navy); transform: none; }
.on-dark .btn-text { color: var(--white); box-shadow: inset 0 -2px 0 var(--yellow); }
.on-dark .btn-text:hover { box-shadow: inset 0 -2px 0 var(--white); }
.btn-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); }

.link-gold { color: var(--navy); font-weight: 600; border-bottom: 2px solid var(--yellow); padding-bottom: 1px; }
.link-gold:hover { border-bottom-color: var(--navy); }

/* ---------- Icons: one language, 24 grid, 1.6 stroke, round caps ---------- */
.ico {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-lg { width: 30px; height: 30px; stroke-width: 1.5; }

/* ---------- Topbar ---------- */
.topbar { background: var(--outer-space); color: var(--on-dark-muted); font-size: 13px; }
.topbar .wrap { display: flex; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
.topbar .ico { width: 16px; height: 16px; color: var(--yellow); }
.topbar a { color: var(--yellow); font-weight: 600; }
.topbar a:hover { color: var(--white); }
@media (max-width: 560px) { .topbar { font-size: 12px; } }

/* ---------- Header / nav ---------- */
header.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
/* Note: backdrop-filter is deliberately avoided here: it creates a new
   containing block for position:fixed descendants (the mobile nav drawer),
   which breaks its fixed-to-viewport positioning. */
/* The header is sticky, so an in-page jump scrolls the target to y=0 and the
   header then paints on top of it. Verified before this rule: clicking
   "See the four models" put the <h2 id="maxight-pro"> at top:0 with the
   header bottom at 89px, i.e. the heading the visitor asked for was fully
   hidden. Same class of bug on the privacy/terms sticky table of contents,
   whose targets are h2[id]. scroll-margin-top is the CSS-native fix and
   applies to smooth scrolling, :target and keyboard-triggered jumps alike. */
:target,
main[id],
section[id],
.wrap[id],
h2[id], h3[id], h4[id] { scroll-margin-top: 104px; }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: 10px 0; }
/* Brand kit exclusion zone: at least 0.5X of clear space on every side of the
   logo, where X is the character height of the smaller type in the lockup.
   The padding below reserves that zone so no nav item, button or edge can
   encroach on it. Placed top-left, as the kit specifies. */
.logo { display: block; padding: 12px 26px 12px 0; transition: transform .2s ease; }
.logo:hover { transform: translateY(-1px); }
.logo img { height: 44px; width: auto; }
nav.main-nav ul { list-style: none; display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; }
nav.main-nav a {
  position: relative; display: inline-block;
  font-size: 15px; font-weight: 600; color: var(--navy);
  padding: 8px 0; letter-spacing: -0.01em;
}
nav.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--yellow);
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
nav.main-nav a:hover::after, nav.main-nav a.active::after { transform: scaleX(1); }
nav.main-nav a.active { font-weight: 600; }
nav.main-nav .nav-flag {
  display: inline-block; margin-left: 7px; vertical-align: 2px;
  font-family: var(--f-display);
  font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy); background: var(--yellow); padding: 4px 7px; border-radius: 999px;
}
.nav-cta { display: flex; align-items: center; gap: var(--sp-4); }
.nav-cta .btn { padding: 12px 22px; font-size: 14px; }
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.hamburger span { width: 24px; height: 3px; background: var(--navy); border-radius: 2px; }

li.nav-cta-mobile { display: none; border-bottom: 0 !important; }
li.nav-cta-mobile a { display: inline-flex !important; }

@media (max-width: 1080px) {
  nav.main-nav ul { gap: 20px; }
  nav.main-nav a { font-size: 14px; }
  .logo { padding-right: 16px; }
}
@media (max-width: 940px) {
  /* top offset is set precisely by JS (main.js syncNavOffset) to match the
     real rendered height of the topbar + header, which varies with the
     topbar text wrapping at narrow widths; 110px is only the no-JS fallback */
  nav.main-nav {
    position: fixed; top: 110px; right: 0; bottom: 0; left: 0; z-index: 40;
    background: var(--white); transform: translateX(100%);
    transition: transform .26s ease; overflow-y: auto;
    border-top: 1px solid var(--line);
    /* transform alone only moves the drawer off-screen: its seven links stay
       focusable and stay in the accessibility tree. Verified before this
       rule: at 375px with the menu CLOSED, tab stops 4 to 10 were the nav
       links sitting at x=399 (past the right edge), so a keyboard user tabbed
       through seven invisible links with the focus ring drawn off-screen.
       visibility:hidden takes them out of the tab order and out of AT; the
       delayed visibility transition lets the slide-out animation finish
       before it applies. */
    visibility: hidden;
    transition: transform .26s ease, visibility 0s linear .26s;
  }
  nav.main-nav.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .26s ease;
  }
  /* The drawer's top offset is computed from the header's rendered bottom at
     the moment it opens (main.js syncNavOffset). The topbar is not sticky, so
     if the page behind scrolls while the drawer is open, the header shrinks,
     that offset goes stale, and a band of the page shows through the gap.
     Verified before this rule: opening the menu at the top of the page and
     then flicking down left "Three colour lens brands..." visible in a strip
     between the header and the drawer.
     The drawer is already its own scroll container (overflow-y:auto), so
     overscroll-behavior:contain stops a scroll that starts inside it from
     chaining to the page behind, which is what let the page move at all.
     NOTE for whoever touches this next: do NOT swap this for
     `overflow:hidden` on html/body. That was tried and measured here first,
     and it breaks position:sticky on .site-header (the header un-sticks and
     scrolls away, leaving a much worse gap). */
  nav.main-nav {
    overscroll-behavior: contain;
    /* Belt to the braces above: overscroll containment only applies while the
       drawer actually overflows, so on a tall phone where the six links fit,
       a flick still scrolls the page behind and the gap can still open. A
       box-shadow is not clipped by the drawer's own overflow, so this paints
       the drawer's white surface upward into any gap. Worst case the visitor
       sees more menu background, never a sliver of the page behind. 160px
       covers the tallest the topbar gets (it wraps to two lines on narrow
       phones). */
    box-shadow: 0 -160px 0 0 var(--white);
  }
  nav.main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 40px; }
  nav.main-nav li { border-bottom: 1px solid var(--line); }
  nav.main-nav a { display: block; padding: 18px 2px; font-size: 17px; font-weight: 600; }
  nav.main-nav a::after { display: none; }
  nav.main-nav a.active { color: var(--navy); box-shadow: inset 4px 0 0 var(--yellow); padding-left: 14px; }
  .hamburger { display: flex; }
  .nav-cta .btn-primary { display: none; }
  li.nav-cta-mobile { display: block; padding-top: var(--sp-6); }
  li.nav-cta-mobile a { padding: 15px 30px !important; font-size: 15px; }
  /* the hamburger must always paint above the fixed drawer so it stays
     visible + clickable (to close the menu) even if the drawer's top
     offset is ever slightly off; static siblings paint below positioned
     ones regardless of DOM order, so this needs an explicit stacking fix */
  .nav-cta { position: relative; z-index: 41; }
  /* The logo needs the identical fix and did not have it. The drawer is a
     DESCENDANT of .site-header, so the header's own z-index:50 does not lift
     the logo above it: inside the header's stacking context the positioned
     drawer (z-index:40) paints over the static logo. That was invisible until
     the drawer got a box-shadow above; verified live, the logo vanished while
     still being hit-testable at elementFromPoint. Same 41 as .nav-cta. */
  .logo { position: relative; z-index: 41; }
  /* Same root cause, one level further out: the drawer lives inside
     .site-header's z-index:50 stacking context, so it paints above every
     root-level element below 50 no matter what its own z-index says. The
     topbar carries the cs@ email, which is a live contact path, and the
     drawer's upward shadow was painting over it. 51 keeps it visible. The
     two never overlap geometrically (the topbar is always fully above the
     sticky header's top edge), so paint order between them is moot. */
  .topbar { position: relative; z-index: 51; }
}

/* ---------- Bands: flat brand colour, no gradients, no washes ---------- */
.band-navy { background: var(--navy); color: var(--on-dark); }
.band-paper { background: var(--sand); }

/* ---------- Home hero ----------
   Typographic, with no photograph. Every AOS photo in the library is between
   365px and 484px wide, which is not enough to carry a 1440px hero without
   visible upscaling, so the headline and the figures do the work instead.
   The tension is deliberate: the headline runs wider than the body beneath
   it, and the body column is offset against a right-hand figures column. */
.hero { padding: 0; }
.hero .wrap {
  padding-top: clamp(44px, 5.4vw, 82px);
  padding-bottom: clamp(30px, 3.4vw, 52px);
}
.hero h1 {
  color: var(--white); font-size: var(--t-hero);
  line-height: 1.0; letter-spacing: -0.035em;
  margin-bottom: clamp(28px, 3.4vw, 52px); max-width: 17ch;
}
.hero-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: end;
}
.hero h1 em { font-style: normal; color: var(--yellow); }
.hero .lede { color: var(--on-dark-muted); max-width: 44ch; }
.hero .kicker { color: var(--yellow); }
.hero-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }
.hero-meta { display: flex; flex-direction: column; gap: var(--sp-5); }
.hero-meta div {
  min-width: 0; padding-left: var(--sp-5);
  border-left: 4px solid var(--line-on-navy);
}
.hero-meta b {
  display: block; font-family: var(--f-display); font-weight: 600;
  font-size: 25px; color: var(--yellow);
  letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums;
}
.hero-meta span {
  display: block; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-dark-muted); margin-top: 5px;
}
.hero-art { position: relative; }
.hero-art .shot { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5 / 4; }
.hero-art .shot img { width: 100%; height: 100%; object-fit: cover; }
.hero-plate {
  position: absolute; left: -18px; bottom: -26px;
  background: var(--white); border-radius: var(--r);
  padding: 18px 22px; box-shadow: var(--lift);
  display: flex; align-items: center; gap: 14px; max-width: 84%;
}
.hero-plate .plate-num {
  font-family: var(--f-display); font-weight: 600; font-size: 32px; color: var(--navy);
  letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums;
}
.hero-plate .plate-txt { font-size: 12.5px; line-height: 1.35; color: var(--muted); max-width: 20ch; }
@media (max-width: 860px) {
  .hero .wrap { padding-top: 40px; padding-bottom: 48px; }
  .hero h1 { max-width: 20ch; }
  .hero-lower { grid-template-columns: 1fr; gap: var(--sp-7); align-items: start; }
  .hero-meta { flex-direction: row; flex-wrap: wrap; gap: var(--sp-5) var(--sp-6); }
  .hero-meta div { flex: 1 1 40%; }
}
@media (max-width: 560px) { .hero-meta b { font-size: 18px; } }

/* ---------- Inner page hero ---------- */
section.page-hero { padding: clamp(40px, 4.6vw, 72px) 0 clamp(38px, 4.2vw, 64px); }
.page-hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4vw, 60px); align-items: end;
}
.page-hero h1 { color: var(--white); margin-bottom: 0; max-width: 17ch; }
.page-hero .kicker { color: var(--yellow); }
.page-hero .lede { color: var(--on-dark-muted); padding-bottom: 6px; }
.page-hero--solo .wrap { grid-template-columns: 1fr; }
.breadcrumb {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-dark-muted); margin: 0 0 var(--sp-5);
}
.breadcrumb a { color: var(--yellow); }
.breadcrumb a:hover { color: var(--white); }
@media (max-width: 820px) { .page-hero .wrap { grid-template-columns: 1fr; align-items: start; } }

/* ---------- Stat band ---------- */
.stat-band { padding: clamp(48px, 5vw, 78px) 0; }
/* display:block is load-bearing, not cosmetic: both .hero .wrap and
   .page-hero .wrap are two-column grids, and the stat strip is also a .wrap
   inside them, so without this it inherits the parent grid and squeezes all
   four figures into the left column. */
.wrap.stat-band {
  display: block;
  padding: clamp(28px, 3vw, 44px) 24px clamp(6px, 1.2vw, 18px);
  border-top: 1px solid var(--line-on-navy);
}
@media (max-width: 560px) { .wrap.stat-band { padding-left: 20px; padding-right: 20px; } }
/* A hero that carries a stat strip does not also need its own bottom air. */
section.page-hero:has(.stat-band) { padding-bottom: clamp(24px, 2.6vw, 40px); }
.hero .wrap:has(+ .stat-band) { padding-bottom: clamp(24px, 2.6vw, 40px); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 2.6vw, 40px); }
.stat-cell {
  border-left: 3px solid var(--line-on-navy);
  padding: var(--sp-1) 0 var(--sp-1) clamp(16px, 2.2vw, 32px);
}
.stat-cell:first-child { border-left: 0; padding-left: 0; }
.stat-cell .v {
  display: block; font-family: var(--f-display); font-weight: 600;
  font-size: var(--t-stat); line-height: 0.98; letter-spacing: -0.04em;
  color: var(--white); font-variant-numeric: tabular-nums;
}
.stat-cell .v i { font-style: normal; color: var(--yellow); }
.stat-cell .k {
  display: block; margin-top: var(--sp-3);
  font-family: var(--f-display);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--yellow); font-weight: 600;
}
.stat-cell .d { display: block; margin-top: 7px; font-size: 13px; color: var(--on-dark-muted); line-height: 1.5; max-width: 28ch; }
@media (max-width: 900px) {
  .stat-grid { grid-template-columns: 1fr 1fr; row-gap: var(--sp-6); }
  .stat-cell:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 520px) {
  .stat-grid { grid-template-columns: 1fr; row-gap: var(--sp-5); }
  .stat-cell { border-left: 0; padding-left: 0; border-top: 3px solid var(--line-on-navy); padding-top: var(--sp-4); }
  .stat-cell:first-child { border-top: 0; padding-top: 0; }
}

/* ---------- Statement block: a section head with no aside column ----------
   Used where the section deliberately should NOT repeat the two-column
   sec-head skeleton, so the page does not march down in identical blocks. */
.statement { max-width: clamp(320px, 52vw, 720px); margin-bottom: clamp(32px, 4vw, 60px); }
.statement h2 { margin-bottom: 0; }
@media (max-width: 700px) { .statement { max-width: none; } }

/* ---------- Capability rows: hairlines, not boxes ---------- */
.cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(28px, 3.4vw, 56px); }
.cap-item {
  display: grid; grid-template-columns: 34px 1fr; gap: var(--sp-4);
  align-items: start; padding: var(--sp-5) 0; border-top: 1px solid var(--line);
}
.cap-grid .cap-item:nth-child(1),
.cap-grid .cap-item:nth-child(2),
.cap-grid .cap-item:nth-child(3) { border-top: 0; padding-top: 0; }
.cap-item .ico { color: var(--navy); margin-top: 2px; }
.cap-item h3 { margin: 0 0 5px; color: var(--navy); font-size: var(--t-h4); line-height: 1.35; letter-spacing: -0.012em; }
.on-dark .cap-item h3 { color: var(--white); }
.cap-item p { font-size: var(--t-sm); margin: 0; line-height: 1.55; }
.on-dark .cap-item { border-top-color: var(--line-on-navy); }
.on-dark .cap-item .ico { color: var(--yellow); }
@media (max-width: 900px) {
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-grid .cap-item:nth-child(3) { border-top: 1px solid var(--line); padding-top: var(--sp-5); }
}
@media (max-width: 600px) {
  .cap-grid { grid-template-columns: 1fr; }
  .cap-grid .cap-item:nth-child(2) { border-top: 1px solid var(--line); padding-top: var(--sp-5); }
}

/* ---------- THE card system (one, used everywhere) ---------- */
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--navy); }
.card .card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.card .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-media img { transform: scale(1.04); }
.card .card-body { padding: var(--sp-5) var(--sp-5) var(--sp-6); flex: 1; display: flex; flex-direction: column; }
.card .card-body h3 { margin-bottom: var(--sp-2); }
.card .card-body p { font-size: var(--t-sm); line-height: 1.6; }
.card .card-index {
  font-family: var(--f-display);
  font-weight: 600; font-size: 11.5px; letter-spacing: .14em;
  color: var(--navy); margin-bottom: var(--sp-3); font-variant-numeric: tabular-nums;
}
.card .card-ico {
  width: 52px; height: 52px; border-radius: 14px;
  border: 1px solid var(--line); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-5); transition: border-color .22s ease, background .22s ease;
}
.card:hover .card-ico { border-color: var(--yellow); background: var(--yellow); }
.card-foot {
  display: inline-flex; align-items: center; gap: 8px; line-height: 1;
  font-weight: 600; font-size: 13px; color: var(--navy); letter-spacing: -0.01em;
}
.card-foot .ico { width: 16px; height: 16px; transition: transform .22s ease; }
.card .card-foot { margin-top: auto; padding-top: var(--sp-5); }
.card:hover .card-foot .ico { transform: translateX(4px); }

/* Photo variant of THE SAME card: the caption sits on a SOLID navy panel,
   not a gradient scrim, so no opacity wash is used anywhere. */
.card--photo .card-media { aspect-ratio: 16 / 11; }
.card--photo .card-body { background: var(--navy); }
.card--photo h3 { color: var(--white); margin-bottom: var(--sp-2); }
.card--photo p { color: var(--on-dark-muted); }
.card--photo .card-foot { color: var(--yellow); }

/* Dark variant of the same card system */
.card--dark { background: var(--navy); border-color: var(--line-on-navy); }
.card--dark h3, .card--dark h4 { color: var(--white); }
.card--dark p { color: var(--on-dark-muted); }
.card--dark .card-ico { border-color: var(--line-on-navy); color: var(--yellow); }
.card--dark:hover { border-color: var(--yellow); }
.card--dark .card-foot, .card--dark .card-index { color: var(--yellow); }

/* Grids */
.grid { display: grid; gap: clamp(16px, 1.8vw, 26px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Brands: an editorial ROW, deliberately not a card ----------
   A brand is a mark plus a sentence, not a product tile. Treating it as a row
   also solves the partner-logo clash: ColorVue is pink and purple, ANILENS is
   pink and Maxim is a rainbow, and dropped in at native colour and size they
   fight navy and yellow badly. Each mark is contained in an identical SALT
   tile, optically normalised to the same visual mass, and held at greyscale
   at rest so the row reads as one system. Full colour returns on hover and on
   keyboard focus, so nothing is hidden from anyone. */
.brand-rows { border-top: 1px solid var(--line); }
.brand-row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 56px);
  align-items: center;
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--line);
}
.brand-row .mark {
  height: 92px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  padding: 18px 22px;
}
.brand-row .mark img {
  max-height: 40px; max-width: 168px; width: auto; object-fit: contain;
  filter: grayscale(100%);
  transition: filter .25s ease;
}
.brand-row:hover .mark img,
.brand-row:focus-within .mark img { filter: none; }
.brand-row .rw-body h3 { margin-bottom: 6px; }
.brand-row .rw-body p { font-size: var(--t-sm); margin: 0; max-width: 52ch; }
.brand-row .rw-tag {
  font-family: var(--f-display); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--navy);
  white-space: nowrap; display: flex; align-items: center; gap: 10px;
}
.brand-row .rw-tag::before { content: ""; width: 22px; height: 4px; background: var(--yellow); }
.brand-row .rw-tag.is-quiet { color: var(--muted); }
.brand-row .rw-tag.is-quiet::before { height: 1px; background: var(--navy); }
@media (max-width: 900px) {
  .brand-row { grid-template-columns: 168px minmax(0, 1fr); row-gap: var(--sp-4); }
  .brand-row .rw-tag { grid-column: 1 / -1; }
  .brand-row .mark { height: 76px; }
}
@media (max-width: 560px) {
  .brand-row { grid-template-columns: 1fr; }
  .brand-row .mark { height: 84px; justify-content: flex-start; }
}

/* ---------- Feature block: one oversized item against compact siblings ----
   Deliberate density variation so the page does not march down in identical
   uniform-height rows. */
.feature {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 3vw, 52px); align-items: stretch;
  margin-bottom: clamp(20px, 2.4vw, 34px);
}
.feature-media { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.feature-media img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.feature-copy { display: flex; flex-direction: column; justify-content: center; padding: var(--sp-4) 0; }
.feature-copy .card-index { margin-bottom: var(--sp-3); }
.feature-copy h3 { font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; margin-bottom: var(--sp-3); }
.feature-copy p { font-size: 15.5px; max-width: 46ch; }
@media (max-width: 820px) { .feature { grid-template-columns: 1fr; } }

/* ---------- Service rows (services.html) ----------
   Deliberately a different skeleton from the home page's card grid, so the two
   pages do not read as the same block repeated. It also keeps every AOS
   photograph at or below its native pixel width (the largest is 484px), which
   a half-width card would not. */
.svc-rows { border-top: 1px solid var(--line); }
.svc-row {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 60px); align-items: start;
  padding: var(--sp-7) 0; border-bottom: 1px solid var(--line);
}
.svc-row .shot { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--sand); }
.svc-row .shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.svc-row .rw-body { padding-top: var(--sp-1); }
.svc-row .rw-body h3 { font-size: clamp(21px, 2.1vw, 28px); font-weight: 600; margin-bottom: var(--sp-3); }
.svc-row .rw-body p { max-width: 62ch; }
.svc-row .rw-n {
  font-family: var(--f-display); font-weight: 600; font-size: 11px;
  letter-spacing: .16em; color: var(--navy); margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums; display: block;
}
@media (max-width: 780px) {
  .svc-row { grid-template-columns: 1fr; padding: var(--sp-6) 0; }
  .svc-row .shot { max-width: 340px; }
}

/* ---------- Editorial photo plate ----------
   Every AOS photograph is between 365px and 484px wide at source, so it is
   never rendered above its native width. The plate holds it at true size and
   lets whitespace, not upscaling, fill the column. */
.plate { max-width: 460px; }
.plate img { width: 100%; border-radius: var(--r); border: 1px solid var(--line); }
.plate figcaption {
  margin-top: 11px; font-family: var(--f-display); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.plate--right { margin-left: auto; }
.plate--pair { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
.plate--pair img:first-child { margin-top: var(--sp-7); }
@media (max-width: 900px) {
  .plate, .plate--right { max-width: 460px; margin-left: 0; }
  .plate--pair img:first-child { margin-top: 0; }
}

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 52px); }
.step { padding-top: var(--sp-5); border-top: 3px solid var(--line); position: relative; }
.step::before { content: ""; position: absolute; top: -3px; left: 0; width: 40%; height: 3px; background: var(--yellow); }
.step .step-n {
  display: block; font-family: var(--f-display); font-weight: 600;
  font-size: 40px; line-height: 1; letter-spacing: -0.035em;
  color: var(--navy); font-variant-numeric: tabular-nums; margin-bottom: var(--sp-4);
}
.step h3 { margin: 0 0 var(--sp-2); font-size: var(--t-h4); line-height: 1.35; letter-spacing: -0.012em; }
.step p { font-size: var(--t-sm); margin: 0; }
.on-dark .step { border-top-color: var(--line-on-navy); }
.on-dark .step .step-n { color: var(--yellow); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ---------- Proof rows ---------- */
.proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); }
.proof { display: grid; grid-template-columns: 30px 1fr; gap: var(--sp-4); padding: var(--sp-5) 0; border-top: 1px solid var(--line); }
.proof-grid .proof:nth-child(1), .proof-grid .proof:nth-child(2) { border-top: 0; padding-top: 0; }
.proof .ico { color: var(--navy); margin-top: 3px; }
.proof h4 { margin: 0 0 6px; }
.proof p { font-size: var(--t-sm); margin: 0; }
@media (max-width: 700px) {
  .proof-grid { grid-template-columns: 1fr; }
  .proof-grid .proof:nth-child(2) { border-top: 1px solid var(--line); padding-top: var(--sp-5); }
}

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4.6vw, 76px); align-items: center; }
.split + .split { margin-top: clamp(44px, 5vw, 78px); }
.split--reverse .split-copy { order: 2; }
.split--reverse .split-media { order: 1; }
.split-copy h2 { margin-bottom: var(--sp-5); }
.split-copy .btn-row { margin-top: var(--sp-6); }
.split-media { position: relative; }
.split-media img { width: 100%; border-radius: var(--r); object-fit: cover; }
.split-media .stack { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.split-media .stack img { aspect-ratio: 4 / 5; }
.split-media .stack img:first-child { margin-top: var(--sp-7); }
.split-media--single img { aspect-ratio: 4 / 3; }
.split-note { margin-top: var(--sp-5); padding-left: var(--sp-5); border-left: 4px solid var(--yellow); font-size: var(--t-sm); color: var(--muted); }
.on-dark .split-note { color: var(--on-dark-muted); }
@media (max-width: 900px) {
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .split-copy, .split--reverse .split-media { order: initial; }
  .split-media .stack img:first-child { margin-top: 0; }
}

/* ---------- Official company facts strip ---------- */
.facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); margin: 0; }
.fact { border-top: 3px solid var(--yellow); padding-top: var(--sp-4); }
.fact dt { font-family: var(--f-display); font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--navy); margin-bottom: 7px; }
.fact dd { margin: 0; font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-6); } }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band .wrap { max-width: 840px; }
.cta-band h2 { color: var(--white); margin-bottom: var(--sp-4); }
.cta-band .lede { color: var(--on-dark-muted); margin-left: auto; margin-right: auto; }
.cta-band .btn-row { justify-content: center; }
.cta-band .rule { width: 84px; height: 4px; background: var(--yellow); margin: 0 auto var(--sp-5); }
/* The light closing CTA sits on SALT, not SAND: on the home page it follows
   the SAND MAXIGHT band, and two same-coloured blocks in a row read as one
   long stretch of dead grey however the spacing is tuned. */
.cta-band--light { background: var(--white); }
.cta-band--light h2 { color: var(--navy); }
.cta-band--light .lede { color: var(--muted); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(28px, 3.6vw, 56px); align-items: start; }
.contact-aside { display: flex; flex-direction: column; gap: var(--sp-5); }
.contact-list { display: flex; flex-direction: column; }
.contact-row { display: grid; grid-template-columns: 26px 1fr; gap: var(--sp-4); align-items: start; padding: var(--sp-5) 0; border-top: 1px solid var(--line); }
.contact-list .contact-row:first-child { border-top: 0; padding-top: 0; }
.contact-row .ico { color: var(--navy); margin-top: 3px; }
.contact-row h3 { margin: 0 0 5px; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; color: var(--navy); line-height: 1.35; }
.contact-row p { margin: 0; color: var(--ink); font-weight: 500; font-size: 15px; }
.contact-row a:hover { border-bottom: 2px solid var(--yellow); }
.map-embed { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); min-height: 280px; }
.map-embed iframe { width: 100%; height: 100%; min-height: 280px; border: 0; display: block; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Enquiry form (markup + ids unchanged; backend untouched) ---------- */
.enquiry-form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 3vw, 40px); box-shadow: var(--lift); }
.enquiry-form-card h2 { margin-bottom: var(--sp-2); font-size: var(--t-h3); line-height: 1.22; letter-spacing: -0.018em; }
.enquiry-form-card > p { font-size: var(--t-sm); margin-bottom: var(--sp-6); }
.enquiry-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.enquiry-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.enquiry-form .field { display: flex; flex-direction: column; gap: 7px; }
.enquiry-form label { font-size: 11px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: .12em; }
.enquiry-form label .opt { font-weight: 500; text-transform: none; color: var(--muted); letter-spacing: 0; }
.enquiry-form input, .enquiry-form textarea {
  font-family: inherit; font-size: 15px; color: var(--ink); padding: 13px 15px;
  border-radius: var(--r-sm); border: 2px solid var(--sand); background: var(--white);
  transition: border-color .15s ease;
}
.enquiry-form input:focus, .enquiry-form textarea:focus { outline: none; border-color: var(--navy); }
.enquiry-form textarea { resize: vertical; min-height: 140px; }
.enquiry-form .btn { align-self: flex-start; margin-top: var(--sp-2); }
.enquiry-form .form-note { font-size: 13px; color: var(--muted); margin: 2px 0 0; line-height: 1.55; }
.enquiry-form .form-note.is-visible { color: var(--navy); font-weight: 600; }
.enquiry-form .form-note.is-visible.is-error { color: #C0281F; }
.enquiry-form .btn[disabled] { cursor: not-allowed; background: var(--sand); border-color: var(--sand); color: var(--muted); }
/* honeypot: hidden from sighted users and kept out of tab order, but still
   present in the DOM for simple bots that blindly fill every input */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) { .enquiry-form .form-row { grid-template-columns: 1fr; } }
/* On mobile, inputs must render at >=16px or iOS Safari zooms the viewport on
   focus (looks broken). Desktop keeps the tighter 15px for visual density. */
@media (max-width: 767px) { .enquiry-form input, .enquiry-form textarea { font-size: 16px; } }

/* ---------- Legal pages ---------- */
.legal-grid { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.legal-toc { position: sticky; top: 92px; border-top: 4px solid var(--yellow); padding-top: var(--sp-4); }
.legal-toc h2 { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--navy); margin-bottom: var(--sp-4); line-height: 1.35; }
.legal-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.legal-toc a { font-size: 13.5px; color: var(--muted); line-height: 1.4; display: block; }
.legal-toc a:hover { color: var(--navy); }
.legal-body { max-width: 74ch; }
.legal-body h2 { margin-top: var(--sp-7); font-size: clamp(19px, 1.7vw, 24px); padding-top: var(--sp-5); border-top: 1px solid var(--line); line-height: 1.2; }
.legal-body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal-body h3 { margin-top: var(--sp-6); font-size: 17px; }
.legal-body ul, .legal-body ol { color: var(--muted); padding-left: 22px; margin: 0 0 var(--sp-4); }
.legal-body li { margin-bottom: 10px; }
.legal-body a { color: var(--navy); font-weight: 600; border-bottom: 2px solid var(--yellow); }
.legal-meta { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--sp-5); margin-top: var(--sp-7); }
.notice-box { background: var(--sand); border-left: 4px solid var(--yellow); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--sp-5) var(--sp-6); font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--sp-6); }
.notice-box strong { color: var(--navy); }
@media (max-width: 860px) {
  .legal-grid { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .legal-toc ul { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
}

/* ==========================================================================
   MAXIGHT page
   ========================================================================== */
.mx-hero { padding: 0; }
.mx-hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(32px, 4.4vw, 64px); align-items: center;
  padding-top: clamp(40px, 5vw, 78px); padding-bottom: clamp(40px, 5vw, 78px);
}
.mx-badge {
  display: inline-flex; align-items: center; gap: 9px;
  border: 2px solid var(--yellow); border-radius: 999px;
  padding: 8px 18px 8px 14px; margin-bottom: var(--sp-5);
  font-family: var(--f-display);
  font-size: 10px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--yellow);
}
.mx-badge .ico { width: 15px; height: 15px; }
.mx-hero h1 { color: var(--white); font-size: clamp(32px, 4.4vw, 58px); line-height: 1.03; letter-spacing: -0.033em; max-width: 16ch; }
.mx-hero h1 em { font-style: normal; color: var(--yellow); }
.mx-hero .lede { color: var(--on-dark-muted); max-width: 48ch; }
/* The MAXIGHT hero reuses .hero-meta but reads as a horizontal figure strip
   under the buttons rather than the home page's stacked right-hand column. */
.mx-hero .hero-meta {
  flex-direction: row; flex-wrap: wrap; gap: clamp(20px, 2.6vw, 44px);
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--line-on-navy);
}
.mx-hero-art { border-radius: var(--r-lg); overflow: hidden; }
.mx-hero-art img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 940px) { .mx-hero .wrap { grid-template-columns: 1fr; } }

/* Attribution: everything MAXIGHT claims is labelled as theirs */
.attrib { font-size: 12.5px; line-height: 1.55; color: var(--muted); border-left: 3px solid var(--sand); padding-left: var(--sp-4); margin-top: var(--sp-5); max-width: 62ch; }
.on-dark .attrib { color: var(--on-dark-muted); border-left-color: var(--line-on-navy); }

.mx-product { padding-top: var(--sec-y-tight); padding-bottom: var(--sec-y-tight); }
.mx-product + .mx-product { border-top: 1px solid var(--line); }
.mx-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(28px, 3.6vw, 60px); align-items: start; }
.mx-grid--reverse .mx-visual { order: 2; }
.mx-grid--reverse .mx-info { order: 1; }
.mx-visual { position: relative; }
@media (min-width: 941px) { .mx-visual { position: sticky; top: 92px; } }
.mx-shot { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--sand); }
.mx-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mx-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-3); margin-top: var(--sp-3); }
.mx-thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--sand); }
/* Model + price index. The four model sections run 1,995px to 5,048px down
   this page at 1440 and much further at 375, and before this only ONE of the
   four carried an inbound link, so a buyer who wanted the Reader Edition had
   to scroll blind past three other models to find its price. This puts every
   model, its price and a jump link one tap from the top of the range. Built
   from THE card system's language (1px sand border, --r corner, lift + navy
   border on hover) rather than a new one. */
.mx-index {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4); margin-top: clamp(28px, 3vw, 44px);
}
.mx-index-item {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--sp-5);
  transition: transform .22s ease, border-color .22s ease;
}
.mx-index-item:hover { transform: translateY(-4px); border-color: var(--navy); }
.mx-index-top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.mx-index-top .n {
  font-family: var(--f-display); font-weight: 600; font-size: 12px;
  letter-spacing: .14em; color: var(--navy); font-variant-numeric: tabular-nums;
}
.mx-index-top .flag {
  font-family: var(--f-display); font-size: 9.5px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--navy);
  background: var(--yellow); padding: 5px 11px; border-radius: 999px;
}
.mx-index-name {
  font-family: var(--f-display); font-weight: 600; font-size: 18px;
  line-height: 1.2; letter-spacing: -0.018em; color: var(--navy);
}
.mx-index-price {
  font-family: var(--f-display); font-weight: 600; font-size: 26px;
  line-height: 1; letter-spacing: -0.03em; color: var(--navy);
  font-variant-numeric: tabular-nums;
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--line); width: 100%;
}
.mx-index-price i {
  font-style: normal; font-size: 12px; color: var(--muted);
  margin-right: 7px; letter-spacing: 0;
}
.mx-index-go {
  display: inline-flex; align-items: center; gap: 8px; line-height: 1;
  margin-top: var(--sp-4);
  font-weight: 600; font-size: 13px; color: var(--navy); letter-spacing: -0.01em;
}
.mx-index-go .ico { width: 16px; height: 16px; transition: transform .22s ease; }
.mx-index-item:hover .mx-index-go .ico { transform: translateX(4px); }
@media (max-width: 940px) { .mx-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mx-index { grid-template-columns: 1fr; } }

.mx-eyebrow { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.mx-eyebrow .n { font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: .14em; color: var(--navy); font-variant-numeric: tabular-nums; }
.mx-eyebrow .flag { font-family: var(--f-display); font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--navy); background: var(--yellow); padding: 6px 12px; border-radius: 999px; }
.mx-info h2 { font-size: clamp(24px, 2.7vw, 38px); margin-bottom: var(--sp-3); }
.mx-info .mx-fullname { font-size: 13.5px; color: var(--muted); margin-bottom: var(--sp-5); }
.mx-price { display: flex; align-items: baseline; gap: 10px; padding: var(--sp-5) 0; margin: var(--sp-5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mx-price .cur { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--muted); }
.mx-price .amt { font-family: var(--f-display); font-weight: 600; font-size: clamp(32px, 3.8vw, 52px); line-height: 1; letter-spacing: -0.04em; color: var(--navy); font-variant-numeric: tabular-nums; }
.mx-price .note { margin-left: auto; font-family: var(--f-display); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); font-weight: 600; }
.mx-points { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.mx-points li { display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-3); font-size: var(--t-sm); color: var(--muted); align-items: start; }
.mx-points .ico { width: 20px; height: 20px; color: var(--navy); margin-top: 1px; }
.mx-points b { color: var(--navy); font-weight: 600; }
@media (max-width: 940px) {
  .mx-grid, .mx-grid--reverse { grid-template-columns: 1fr; }
  .mx-grid--reverse .mx-visual, .mx-grid--reverse .mx-info { order: initial; }
}

/* Spec tables stay Public Sans throughout: dense, numeric, legibility first. */
.spec { margin-top: var(--sp-6); border-top: 4px solid var(--navy); }
.spec h3 { font-family: var(--f-display); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--navy); margin: var(--sp-4) 0; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { font-family: var(--f-body); text-align: left; vertical-align: top; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.55; }
.spec-table th { width: 34%; padding-right: var(--sp-5); font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }
.spec-table td { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .spec-table th, .spec-table td { display: block; width: 100%; padding-right: 0; }
  .spec-table th { border-bottom: 0; padding-bottom: 2px; }
}
.spec-empty { margin-top: var(--sp-5); padding: var(--sp-5); background: var(--sand); border-radius: var(--r-sm); font-size: 13px; color: var(--muted); }

.study { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-4); padding: var(--sp-5) 0; border-top: 1px solid var(--line-on-navy); }
.study:first-of-type { border-top: 0; padding-top: 0; }
.study .n { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--yellow); font-variant-numeric: tabular-nums; padding-top: 4px; }
.study h4 { font-family: var(--f-body); font-weight: 600; color: var(--white); margin: 0 0 8px; font-size: 16px; line-height: 1.45; letter-spacing: 0; }
.study p { color: var(--on-dark-muted); font-size: 13.5px; margin: 0; }

/* ---------- Footer ---------- */
footer.site-footer { background: var(--outer-space); color: var(--on-dark-muted); padding-top: clamp(48px, 5vw, 76px); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: clamp(28px, 3.2vw, 48px); padding-bottom: var(--sp-7); border-bottom: 1px solid var(--line-on-space); }
/* Kit: place the logo bottom-left in the first instance. The padding reserves
   the 0.5X exclusion zone on every side. */
.footer-logo { padding: 0 26px 12px 0; }
/* The kit forbids changing the logo's colour, so the footer does NOT invert it
   to white. The original navy-and-yellow lockup sits on its own SALT tile,
   which both preserves the artwork exactly and enforces the exclusion zone. */
.footer-logo .mark-tile {
  display: inline-block; background: var(--white);
  border-radius: var(--r); padding: 14px 20px; margin-bottom: var(--sp-5);
}
.footer-logo img { height: 40px; width: auto; }
.footer-grid p { color: var(--on-dark-muted); font-size: var(--t-sm); line-height: 1.65; max-width: 34ch; }
.footer-col h5 { font-family: var(--f-display); color: var(--yellow); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--sp-5); font-weight: 600; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: var(--t-sm); color: var(--on-dark-muted); transition: color .15s ease; }
.footer-col a:hover { color: var(--yellow); }
.footer-touch li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: var(--t-sm); line-height: 1.6; }
.footer-touch .ico { width: 17px; height: 17px; color: var(--yellow); margin-top: 3px; }
.footer-bottom { padding: var(--sp-5) 0 var(--sp-6); font-size: 12.5px; color: var(--on-dark-muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); }
.footer-bottom a { color: var(--yellow); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Motion ----------
   There is deliberately NO scroll-reveal animation on this site. Fading every
   section up on scroll at a single duration is the loudest generated-site
   tell there is, and it also risks leaving content invisible if the observer
   never fires. Motion here is limited to hover and focus, where it is
   feedback rather than decoration. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   MAXIGHT flagship page, v2 (scope: body.mxv-page)
   --------------------------------------------------------------------------
   ADDITIVE ONLY. Nothing above this line is edited. Every selector below is
   either prefixed .mxv- or scoped under .mxv-page, so no other page can be
   reached by it. The older .mx-* block above is left intact on purpose:
   another agent is editing the sibling pages in the same working tree, and
   deleting shared-looking rules mid-flight is how you break someone else's
   build.

   THE ARGUMENT THIS PAGE MAKES: the thing being sold is DISTANCE. A screen on
   the desk, an image six metres away. So the page is built dark and filmic,
   the way you would light a single object in a room, and the yellow is spent
   only where precision is being claimed: a rule, a numeral, one price.

   KIT RULES STILL APPLY, WITHOUT EXCEPTION. Four brand colours, flat, at full
   strength. No rgba brand colour, no tint, no opacity fade, no gradient, no
   filter, no scrim over any photograph or over the film. Where type needs a
   dark ground it gets a SOLID field beside the image, never a wash on top of
   it. That constraint is the reason the hero splits type and film instead of
   stacking them, and it is why the page reads as composed rather than
   layered.
   ========================================================================== */

/* ---------- Page-level fields ---------- */
.mxv-band-space { background: var(--outer-space); color: var(--on-dark); }
/* An OUTER SPACE field takes the navy hairline; a NAVY field takes the outer
   space hairline. Getting these the wrong way round is invisible on a mock
   and obvious on a screen. */
.mxv-band-space .attrib { border-left-color: var(--line-on-space); }

/* Sections that carry a full-bleed strip own their own vertical padding, so
   the strip can touch the section edge. */
section.mxv-band { padding: 0; }
.mxv-band > .wrap { padding-top: clamp(44px, 4.6vw, 72px); padding-bottom: clamp(44px, 4.6vw, 72px); }

/* ---------- Section head, page-local ----------
   Deliberately NOT .sec-head. That two-column head is the shape every other
   AOS section uses; repeating it eight times down the longest page on the
   site is exactly the march of identical blocks this rebuild exists to kill.
   This one is a single left-aligned column, and each section varies what
   sits under it. */
.mxv-head { max-width: 46ch; margin-bottom: clamp(28px, 3.2vw, 48px); }
.mxv-head h2 { font-size: clamp(28px, 3.6vw, 50px); letter-spacing: -0.034em; line-height: 1.02; margin-bottom: var(--sp-4); }
.mxv-head .lede { max-width: 54ch; }
.mxv-head--wide { max-width: 62ch; }

/* ==========================================================================
   1. Film hero
   ========================================================================== */
section.mxv-hero { padding: 0; background: var(--outer-space); color: var(--on-dark); }
.mxv-hero > .wrap { padding-top: clamp(22px, 2.8vw, 38px); padding-bottom: 0; }
.mxv-hero .breadcrumb { margin-bottom: clamp(16px, 1.8vw, 24px); }

.mxv-flag {
  display: inline-flex; align-items: center; gap: 10px;
  border: 2px solid var(--yellow); border-radius: 999px;
  padding: 8px 20px 8px 15px; margin-bottom: clamp(20px, 2.2vw, 30px);
  font-family: var(--f-display);
  font-size: 10.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--yellow); line-height: 1;
}
.mxv-flag { margin-bottom: clamp(16px, 1.9vw, 26px); }
.mxv-flag .ico { width: 15px; height: 15px; }

/* The headline is the largest type on the site by a wide margin. That is the
   point: this is the flagship page for a S$3,379 device, and a headline set
   at the same size as the About page's would tell the visitor it is not. */
.mxv-hero h1 {
  color: var(--white);
  font-size: clamp(36px, 5.4vw, 66px);
  line-height: 0.99; letter-spacing: -0.038em;
  max-width: 21ch; margin: 0 0 clamp(24px, 2.6vw, 36px);
}
.mxv-hero h1 em { font-style: normal; color: var(--yellow); }

.mxv-hero-lower {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px); align-items: end;
}
.mxv-hero-lower .lede { color: var(--on-dark-muted); max-width: 52ch; margin: 0; }
.mxv-hero-side { display: flex; flex-direction: column; gap: var(--sp-5); }
/* The one paragraph on the page that states distributor, model count and all
   three prices in a single sentence. It is set as a marked fact, not as body
   copy, because that is what it is: the line an answer engine should lift and
   the line a buyer scanning for a number should land on. */
.mxv-summary {
  margin: 0; max-width: 62ch;
  padding-left: var(--sp-5); border-left: 4px solid var(--yellow);
  font-size: 13.5px; line-height: 1.62; color: var(--on-dark-muted);
  font-variant-numeric: tabular-nums;
}
.mxv-hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: flex-start; }
@media (min-width: 941px) { .mxv-hero-actions { justify-content: flex-end; } }
@media (max-width: 940px) {
  .mxv-hero-lower { grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }
}

/* The film plate. It starts at the container's left edge and runs off the
   right edge of the viewport, so the frame reads as a window onto something
   larger rather than a video embedded in a page. */
/* The bleed has to clear the container gutter AND the container's own 24px
   padding, or the plate stops ~17px short of the glass and reads as a
   mistake. Verified with getBoundingClientRect, not by eye: the first
   version of this rule used (100vw - maxw) / -2 and measured 1272px wide
   inside a 1425px layout viewport. 100vw counts the classic scrollbar and the
   layout width does not, so on a scrollbar browser this now over-bleeds by
   half a scrollbar and body{overflow-x:hidden} clips the excess, which is
   exactly what a bleed should do. */
/* 100vw counts the scrollbar, so the full-bleed margins below can overshoot the
   layout viewport by the scrollbar width. Clip the sections that use them so the
   page can never scroll horizontally; clip (not hidden) keeps sticky working. */
.mxv-hero, .mxv-model, .mxv-band { overflow-x: clip; }
.mxv-film { margin-top: clamp(24px, 2.8vw, 40px); margin-right: calc((100vw - var(--maxw)) / -2 - 24px); }
@media (max-width: 1248px) { .mxv-film { margin-right: -24px; } }
@media (max-width: 560px)  { .mxv-film { margin-right: -20px; } }

.mxv-film-rule { display: flex; align-items: center; gap: 16px; row-gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.mxv-film-rule::before { content: ""; width: 56px; height: 4px; background: var(--yellow); flex: none; }
.mxv-film-rule span {
  font-family: var(--f-display); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted);
}
/* The pause control. Same micro-label vocabulary as the caption beside it and
   the same hover treatment as .mxv-rail-link, so it reads as part of the film
   plate rather than as a widget dropped on top of it. Yellow on OUTER SPACE,
   no tint, no new colour. Box is 24px tall at minimum, which is the 2.5.8
   target size, and it sits in the rule row rather than over the footage
   because nothing on this page is allowed to sit on top of a photograph.

   It follows the caption rather than being pushed right with margin-left:auto.
   That was the first version and it was wrong: .mxv-film-rule is a child of
   .mxv-film, which bleeds off the right edge of the viewport, so "auto" pushed
   the control into the bleed and it rendered half off-screen at 1440. Caught
   on the after screenshot. A divider carries the separation instead, the same
   way .mxv-rail-brand is divided from the rail links. */
.mxv-film-toggle {
  flex: none;
  background: none; border: 0; border-bottom: 2px solid transparent;
  border-left: 1px solid var(--line-on-space);
  padding: 6px 0 6px 16px; min-height: 24px; cursor: pointer;
  font-family: var(--f-display); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--yellow);
  line-height: 1; transition: border-color .18s ease;
}
.mxv-film-toggle[hidden] { display: none; }
.mxv-film-toggle:hover { border-bottom-color: var(--yellow); }
/* Once the row wraps, a left divider at the start of its own line reads as a
   stray mark rather than a separator, so it comes off. */
@media (max-width: 720px) {
  .mxv-film-toggle { padding-left: 0; border-left: 0; }
}
.mxv-film-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--navy);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.mxv-film-frame video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: var(--navy);
}
/* Honesty label. The footage is a motion study rendered from MAXIGHT's own
   product photograph, not a recording of a device in a room, and a page that
   sells a medical-adjacent product does not get to be vague about that. */
.mxv-film-cap {
  margin: 14px 0 0; max-width: 64ch;
  font-size: 12px; line-height: 1.55; color: var(--on-dark-muted);
}

/* Figure strip: three published numbers, on the navy, closing the hero. */
.mxv-figures { background: var(--navy); margin-top: clamp(34px, 4vw, 60px); }
.mxv-figures > .wrap { padding-top: clamp(26px, 2.8vw, 40px); padding-bottom: clamp(26px, 2.8vw, 40px); }
.mxv-figure-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 56px); }
.mxv-figure { border-left: 3px solid var(--line-on-navy); padding-left: clamp(16px, 2.2vw, 34px); }
.mxv-figure:first-child { border-left: 0; padding-left: 0; }
.mxv-figure .v {
  display: block; font-family: var(--f-display); font-weight: 600;
  font-size: clamp(34px, 4.2vw, 58px); line-height: 0.98; letter-spacing: -0.045em;
  color: var(--white); font-variant-numeric: tabular-nums;
}
.mxv-figure .v i { font-style: normal; color: var(--yellow); font-size: 0.44em; letter-spacing: -0.01em; margin-left: 5px; }
.mxv-figure .k {
  display: block; margin-top: var(--sp-3); font-family: var(--f-display);
  font-size: 11px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--yellow);
}
.mxv-figure .d { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.5; color: var(--on-dark-muted); max-width: 30ch; }
@media (max-width: 620px) {
  .mxv-figure-grid { grid-template-columns: 1fr; row-gap: var(--sp-5); }
  .mxv-figure { border-left: 0; padding-left: 0; border-top: 3px solid var(--line-on-navy); padding-top: var(--sp-4); }
  .mxv-figure:first-child { border-top: 0; padding-top: 0; }
}

/* ==========================================================================
   2. Sticky model rail
   --------------------------------------------------------------------------
   This page runs well past 9,000px at 1440. A buyer who scrolls into the
   Reader section and then wants the Pro price should not have to hunt for it,
   so the three models and their real prices ride along under the header.
   Desktop only: at 940 and below the nav becomes a fixed drawer at z-index 40
   and a second sticky bar would fight it for the same 60px of screen.
   ========================================================================== */
.mxv-rail { display: none; }
@media (min-width: 941px) {
  .mxv-rail {
    display: block; position: sticky; top: 89px; z-index: 40;
    background: var(--outer-space); border-bottom: 3px solid var(--yellow);
  }
  .mxv-rail > .wrap { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); height: 58px; }
  /* The header is sticky at 89px and the rail sits under it, so an in-page
     jump has to clear BOTH or it lands behind them. 89 + 58 + 5 of air. */
  .mxv-page section[id] { scroll-margin-top: 152px; }
  .mxv-page .wrap[id] { scroll-margin-top: 152px; }
  .mxv-page :target { scroll-margin-top: 152px; }
}
.mxv-rail-brand {
  font-family: var(--f-display); font-weight: 600; font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--yellow);
  padding-right: clamp(8px, 1vw, 18px); border-right: 1px solid var(--line-on-space);
}
.mxv-rail-link {
  display: inline-flex; align-items: baseline; gap: 9px;
  padding: 5px 0; border-bottom: 2px solid transparent;
  transition: border-color .18s ease;
}
.mxv-rail-link b { font-family: var(--f-display); font-weight: 600; font-size: 14px; letter-spacing: -0.015em; color: var(--white); }
.mxv-rail-link i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.mxv-rail-link:hover { border-bottom-color: var(--yellow); }
.mxv-rail-link:hover i { color: var(--yellow); }
.mxv-rail .btn { margin-left: auto; padding: 10px 22px; font-size: 13px; }

/* ==========================================================================
   3. Full-bleed strips
   --------------------------------------------------------------------------
   A direct child of <section>, never inside .wrap, so it is already the full
   viewport width without a 100vw trick that a scrollbar would break.
   ========================================================================== */
.mxv-strip { margin: 0; display: block; }
.mxv-strip img { width: 100%; display: block; object-fit: cover; }
.mxv-strip--optic img { height: clamp(190px, 26vw, 400px); object-position: center 46%; }
.mxv-strip--room  img { height: clamp(170px, 21vw, 320px); object-position: center 52%; }
.mxv-stripcap {
  font-size: 11.5px; letter-spacing: .04em; color: var(--muted);
  padding: 12px 24px 0; max-width: var(--maxw); margin: 0 auto;
}
.on-dark .mxv-stripcap { color: var(--on-dark-muted); }
@media (max-width: 560px) { .mxv-stripcap { padding-left: 20px; padding-right: 20px; } }

/* ---------- Numbered claim ledger (technology section) ---------- */
.mxv-claims {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(30px, 4vw, 72px);
}
.mxv-claims li {
  border-top: 1px solid var(--line-on-navy);
  padding: var(--sp-5) 0;
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: var(--sp-4);
}
.mxv-claims .n {
  font-family: var(--f-display); font-weight: 600; font-size: 20px;
  line-height: 1.1; letter-spacing: .02em; color: var(--yellow);
  font-variant-numeric: tabular-nums;
}
.mxv-claims h3 { color: var(--white); font-size: 19px; line-height: 1.24; margin: 0 0 7px; }
.mxv-claims p { color: var(--on-dark-muted); font-size: var(--t-sm); line-height: 1.55; margin: 0; }
@media (max-width: 760px) { .mxv-claims { grid-template-columns: 1fr; } }

/* ==========================================================================
   4. Statement band: a solid field beside a photograph, never on top of one
   ========================================================================== */
.mxv-split { padding: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.mxv-split-media { margin: 0; position: relative; }
.mxv-split-media img { width: 100%; height: 100%; min-height: clamp(300px, 38vw, 600px); object-fit: cover; display: block; }
.mxv-split-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 5vw, 88px) clamp(24px, 3.6vw, 72px);
}
/* Align the outer edge of the copy with the site's container edge so the band
   does not look like it drifted off the grid the rest of the page uses. */
.mxv-split--mediafirst .mxv-split-copy { padding-right: max(24px, calc((100vw - var(--maxw)) / 2 + 12px)); }
.mxv-split--copyfirst  .mxv-split-copy { padding-left:  max(24px, calc((100vw - var(--maxw)) / 2 + 12px)); order: 1; }
.mxv-split--copyfirst .mxv-split-media { order: 2; }
.mxv-split-copy h2 { font-size: clamp(28px, 3.5vw, 48px); line-height: 1.03; letter-spacing: -0.035em; max-width: 19ch; }
.mxv-split-copy h2 em { font-style: normal; color: var(--yellow); }
.mxv-split-copy .lede { max-width: 44ch; }
.mxv-figcap { margin-top: var(--sp-4); font-size: 11.5px; color: var(--on-dark-muted); }
@media (max-width: 900px) {
  .mxv-split { grid-template-columns: 1fr; }
  .mxv-split--copyfirst .mxv-split-copy { order: 2; }
  .mxv-split--copyfirst .mxv-split-media { order: 1; }
  .mxv-split-media img { min-height: 260px; max-height: 58vh; }
  .mxv-split-copy { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 560px) { .mxv-split-copy { padding-left: 20px; padding-right: 20px; } }

/* ==========================================================================
   5. The range: a magazine index, not a card grid
   --------------------------------------------------------------------------
   Nick has rejected the templated-box look on sight before. Three filled
   rectangles side by side is that look. This is thin rules, big numerals and
   whitespace, and the only thing that moves on hover is the rule going
   yellow, which is also the affordance.
   ========================================================================== */
.mxv-index { list-style: none; margin: 0; padding: 0; }
.mxv-index-row {
  display: grid;
  grid-template-columns: clamp(54px, 6vw, 82px) minmax(0, 1fr) auto 34px;
  gap: clamp(14px, 2vw, 32px); align-items: center;
  border-top: 1px solid var(--line);
  padding: clamp(20px, 2.4vw, 32px) 0;
  box-shadow: inset 0 4px 0 -4px var(--yellow);
  transition: box-shadow .2s ease;
}
.mxv-index li:last-child .mxv-index-row { border-bottom: 1px solid var(--line); }
.mxv-index-row:hover { box-shadow: inset 0 4px 0 0 var(--yellow); }
.mxv-index-n {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1;
  letter-spacing: -0.03em; color: var(--navy); font-variant-numeric: tabular-nums;
}
.mxv-index-name { font-family: var(--f-display); font-weight: 600; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.15; letter-spacing: -0.026em; color: var(--navy); }
.mxv-index-sub { display: block; margin-top: 7px; font-family: var(--f-body); font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.45; }
.mxv-index-sub .tag {
  display: inline-block; margin-left: 8px; vertical-align: 1px;
  font-family: var(--f-display); font-size: 9px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--navy); background: var(--yellow); padding: 4px 9px; border-radius: 999px;
}
.mxv-index-price {
  text-align: right; font-family: var(--f-display); font-weight: 600;
  font-size: clamp(20px, 2.2vw, 30px); line-height: 1; letter-spacing: -0.032em;
  color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mxv-index-price i { display: block; font-style: normal; font-family: var(--f-body); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.mxv-index-go { justify-self: end; color: var(--navy); }
.mxv-index-go .ico { width: 22px; height: 22px; transition: transform .2s ease; }
.mxv-index-row:hover .mxv-index-go .ico { transform: translateX(5px); }
@media (max-width: 720px) {
  .mxv-index-row { grid-template-columns: 46px minmax(0, 1fr) 26px; row-gap: var(--sp-4); }
  .mxv-index-price { grid-column: 2 / 4; text-align: left; }
  .mxv-index-go { grid-row: 1; grid-column: 3; align-self: start; }
}

/* ==========================================================================
   6. Model sections
   --------------------------------------------------------------------------
   Three models, three compositions, one shared vocabulary. Pro gets the
   gallery, the dark field and a full-width specification sheet because it is
   the flagship and the only one with published figures. Kid and Reader invert
   the layout against a lighter and a mid field so the page does not march.
   The eyebrow, price block, points list and buttons are identical by design:
   that is the system, not the skeleton.
   ========================================================================== */
.mxv-model { padding: clamp(50px, 5.4vw, 88px) 0; }
.mxv-model-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: clamp(20px, 2.2vw, 30px); }
.mxv-model-n {
  font-family: var(--f-display); font-weight: 600; font-size: clamp(26px, 3vw, 40px);
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--navy);
}
.on-dark .mxv-model-n { color: var(--yellow); }
.mxv-model-tag {
  font-family: var(--f-display); font-size: 9.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy); background: var(--yellow);
  padding: 6px 13px; border-radius: 999px; line-height: 1;
}
.mxv-model-rule { flex: 1 1 auto; height: 1px; background: var(--line); }
.on-dark .mxv-model-rule { background: var(--line-on-navy); }
.mxv-band-space .mxv-model-rule { background: var(--line-on-space); }

.mxv-model-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: clamp(28px, 3.6vw, 62px); align-items: start; }
.mxv-model-grid--copyfirst .mxv-model-copy { order: 1; }
.mxv-model-grid--copyfirst .mxv-model-media { order: 2; }

/* On the two inverted models the media column is 200 to 280px taller than the
   copy beside it, which left a dead rectangle under the buttons. Centring the
   copy against the taller column reads as composition instead of leftover.
   Where the copy is the taller of the two (Pro) this is a no-op. */
.mxv-model-copy { align-self: center; }
.mxv-model-copy h2 { font-size: clamp(26px, 3.1vw, 44px); letter-spacing: -0.034em; line-height: 1.02; margin-bottom: var(--sp-3); }
.mxv-fullname { font-size: 13px; line-height: 1.5; margin-bottom: var(--sp-5); }
.mxv-model-copy .lede { max-width: 40ch; }

/* Price block. One rule above, one below, tabular numerals, the currency set
   small in front of it: a price that is stated, not sold. */
.mxv-price { display: flex; align-items: baseline; gap: 11px; padding: var(--sp-5) 0; margin: var(--sp-5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.on-dark .mxv-price { border-top-color: var(--line-on-navy); border-bottom-color: var(--line-on-navy); }
.mxv-band-space .mxv-price { border-top-color: var(--line-on-space); border-bottom-color: var(--line-on-space); }
.mxv-price .cur { font-family: var(--f-display); font-weight: 600; font-size: 14px; letter-spacing: .04em; color: var(--muted); }
.on-dark .mxv-price .cur { color: var(--on-dark-muted); }
.mxv-price .amt { font-family: var(--f-display); font-weight: 600; font-size: clamp(34px, 4.2vw, 58px); line-height: 1; letter-spacing: -0.045em; color: var(--navy); font-variant-numeric: tabular-nums; }
.on-dark .mxv-price .amt { color: var(--white); }
.mxv-price .note { margin-left: auto; align-self: center; font-family: var(--f-display); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.on-dark .mxv-price .note { color: var(--yellow); }

.mxv-points { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.mxv-points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--sp-3); align-items: start; font-size: var(--t-sm); line-height: 1.55; color: var(--muted); }
.on-dark .mxv-points li { color: var(--on-dark-muted); }
.mxv-points .ico { width: 20px; height: 20px; color: var(--navy); margin-top: 2px; }
.on-dark .mxv-points .ico { color: var(--yellow); }
.mxv-points b { color: var(--navy); font-weight: 600; }
.on-dark .mxv-points b { color: var(--white); }

/* ---------- Galleries ---------- */
.mxv-shot { overflow: hidden; border-radius: var(--r-lg); background: var(--sand); }
.mxv-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mxv-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-3); margin-top: var(--sp-3); }
.mxv-thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); background: var(--sand); }
.mxv-stack { display: grid; gap: var(--sp-3); }
.mxv-stack img { width: 100%; border-radius: var(--r-lg); object-fit: cover; background: var(--sand); }
.mxv-stack img:first-child { aspect-ratio: 16 / 10; }
.mxv-stack img:last-child { aspect-ratio: 21 / 9; }
/* Bleed the media column off the page edge on the two inverted models, so
   they read as a different composition from Pro rather than a mirror of it. */
@media (min-width: 941px) {
  .mxv-bleed-right { margin-right: calc((100vw - var(--maxw)) / -2 - 24px); }
  .mxv-bleed-right .mxv-shot, .mxv-bleed-right .mxv-stack img { border-radius: var(--r-lg) 0 0 var(--r-lg); }
  .mxv-bleed-left { margin-left: calc((100vw - var(--maxw)) / -2 - 24px); }
  .mxv-bleed-left .mxv-shot, .mxv-bleed-left .mxv-stack img { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
  .mxv-model-media--sticky { position: sticky; top: 164px; }
}
@media (max-width: 1248px) and (min-width: 941px) {
  .mxv-bleed-right { margin-right: -24px; }
  .mxv-bleed-left { margin-left: -24px; }
}
@media (max-width: 940px) {
  .mxv-model-grid, .mxv-model-grid--copyfirst { grid-template-columns: 1fr; }
  .mxv-model-grid--copyfirst .mxv-model-copy, .mxv-model-grid--copyfirst .mxv-model-media { order: initial; }
}

/* ---------- Published specification ----------
   Pro's sheet is a white datasheet set into the dark field: the one place on
   the page where dense numbers are allowed to be dense. Kid and Reader get
   the SAME heading and the same frame with nothing in it, because MAXIGHT
   publishes nothing for them. Withheld on purpose reads very differently from
   forgotten, and the frame is what carries that difference. */
.mxv-sheet { margin-top: clamp(34px, 4vw, 60px); background: var(--white); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 46px); }
.mxv-sheet-head { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 4px solid var(--navy); }
.mxv-sheet-head h3 { font-family: var(--f-display); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); margin: 0; }
.mxv-sheet-head .src { margin-left: auto; font-size: 11.5px; letter-spacing: .04em; color: var(--muted); }
.mxv-spec { width: 100%; border-collapse: collapse; }
.mxv-spec th, .mxv-spec td { text-align: left; vertical-align: top; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.55; }
.mxv-spec tr:last-child th, .mxv-spec tr:last-child td { border-bottom: 0; }
.mxv-spec th { width: 26%; padding-right: var(--sp-6); font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }
.mxv-spec td { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .mxv-spec th, .mxv-spec td { display: block; width: 100%; padding-right: 0; }
  .mxv-spec th { border-bottom: 0; padding-bottom: 2px; }
}
/* The sheet is a WHITE panel that lives INSIDE an .on-dark section, so it
   inherits .on-dark p / .on-dark .attrib, which are near-white. Both rendered
   as almost invisible grey on white. Caught on a rendered screenshot, not in
   review; these three rules put the ink back. */
.mxv-sheet .attrib { margin-top: var(--sp-5); color: var(--muted); border-left-color: var(--sand); }
.mxv-empty { font-size: var(--t-sm); line-height: 1.62; color: var(--muted); max-width: 60ch; margin: 0; padding-left: var(--sp-5); border-left: 4px solid var(--yellow); }
.mxv-sheet .mxv-empty { color: var(--muted); }
.mxv-empty b { color: var(--navy); font-weight: 600; }
/* An empty state is still a sales moment: the one thing a visitor can do
   about a missing spec sheet sits right next to the sentence telling them it
   is missing. */
.mxv-sheet--empty .mxv-sheet-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 48px); align-items: center; }
.mxv-sheet--empty .btn { white-space: nowrap; }
@media (max-width: 760px) {
  .mxv-sheet--empty .mxv-sheet-body { grid-template-columns: 1fr; align-items: start; }
}

/* ==========================================================================
   7. Clinical research index
   ========================================================================== */
.mxv-studies { list-style: none; margin: 0; padding: 0; }
.mxv-studies li { display: grid; grid-template-columns: clamp(64px, 7vw, 96px) minmax(0, 1fr); gap: clamp(14px, 2vw, 28px); border-top: 1px solid var(--line); padding: clamp(22px, 2.6vw, 34px) 0; }
.mxv-studies .n { font-family: var(--f-display); font-weight: 600; font-size: clamp(26px, 3vw, 40px); line-height: 0.9; letter-spacing: -0.035em; color: var(--navy); font-variant-numeric: tabular-nums; }
.mxv-studies .n::after { content: ""; display: block; width: 26px; height: 4px; background: var(--yellow); margin-top: 14px; }
.mxv-studies h3 { font-family: var(--f-body); font-weight: 600; font-size: 17px; line-height: 1.45; letter-spacing: -0.005em; color: var(--navy); margin: 0 0 10px; max-width: 62ch; }
.mxv-studies p { font-size: var(--t-sm); line-height: 1.6; margin: 0; max-width: 72ch; }

/* ==========================================================================
   8. Singapore debut: typographic, no photograph, on purpose
   ========================================================================== */
.mxv-debut-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.84fr); gap: clamp(30px, 4.4vw, 84px); align-items: start; }
.mxv-bignum {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(66px, 9vw, 132px); line-height: 0.86; letter-spacing: -0.055em;
  color: var(--white); font-variant-numeric: tabular-nums; margin: 0 0 var(--sp-4);
}
.mxv-bignum i { font-style: normal; color: var(--yellow); }
.mxv-bigcap { font-family: var(--f-display); font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--yellow); margin: 0 0 var(--sp-6); }
.mxv-record { margin: 0; padding: 0; }
.mxv-record > div { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); gap: var(--sp-4); padding: 14px 0; border-top: 1px solid var(--line-on-space); font-size: var(--t-sm); line-height: 1.5; }
.mxv-record dt { font-family: var(--f-display); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); padding-top: 3px; }
.mxv-record dd { margin: 0; color: var(--on-dark-muted); }
@media (max-width: 860px) {
  .mxv-debut-grid { grid-template-columns: 1fr; }
  .mxv-record > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================================
   9. Closing panel: the page's single yellow field
   --------------------------------------------------------------------------
   Yellow is spent on hairlines and numerals for nine screens, then it takes a
   whole field once, at the only place the visitor is asked to do something.
   ========================================================================== */
.mxv-close-panel {
  background: var(--yellow); color: var(--ink);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 5vw, 88px) clamp(24px, 3.6vw, 72px);
  padding-right: max(24px, calc((100vw - var(--maxw)) / 2 + 12px));
}
.mxv-close-panel .rule { width: 84px; height: 4px; background: var(--navy); margin-bottom: var(--sp-5); }
.mxv-close-panel h2 { color: var(--navy); font-size: clamp(28px, 3.5vw, 48px); line-height: 1.03; letter-spacing: -0.035em; max-width: 16ch; }
.mxv-close-panel p, .mxv-close-panel .lede { color: var(--ink); max-width: 46ch; }
.mxv-close-panel .btn-ghost { background: transparent; border-color: var(--navy); color: var(--navy); }
.mxv-close-panel .btn-ghost:hover { background: var(--navy); color: var(--yellow); }
.mxv-close-panel .btn-navy:focus-visible, .mxv-close-panel .btn-ghost:focus-visible { outline-color: var(--navy); }
@media (max-width: 900px) { .mxv-close-panel { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .mxv-close-panel { padding-left: 20px; padding-right: 20px; } }

/* ---------- Motion, page-local ----------
   The film is the only moving thing on this site and it is decoration, not
   feedback, so it is opt-out by default for anyone who has asked their OS for
   less motion. The <source> is attached by script only after the window load
   event AND only when reduced motion is NOT requested: with no <source> the
   <video> paints its poster and downloads nothing, which is also the honest
   fallback when the network or the codec fails. */
@media (prefers-reduced-motion: reduce) {
  .mxv-index-row, .mxv-rail-link, .mxv-index-go .ico { transition: none; }
}