@charset "UTF-8";

/* ===========================================================================
   SUPPLY:LABS — landing page styles

   Built against STYLEGUIDE.md, which documents reflo.com's design system as
   measured from the live site (theme tokens + computed styles over CDP).

   The three things that make this read as Reflo:
     1. Colour SCHEMES, not one ground. Sections opt into light / alt / inverted
        and the whole component set re-colours from CSS custom properties —
        the same approach Reflo's Shopify theme uses.
     2. FULL-BLEED layout. No centred content column; sections run edge to edge
        with a 12px gutter and text blocks are constrained individually.
     3. TIGHT vertical rhythm. 48px top, 0 bottom. Imagery and scheme changes
        separate sections, not whitespace.

   Type matches reflo.com's Shopify theme — Syne (headings, uppercase, weight
   400) + Archivo (body, buttons, nav) — with monospace retained for the
   accent/detail labels. See the Fonts block below.
   Buttons are #0D0D0D with a 4px radius. Green is emphasis text only, never a
   button fill, never a large area.
   =========================================================================== */

/* ── Fonts ─────────────────────────────────────────────────────────────────
   Display and body follow reflo.com's Shopify theme, so this page and the main
   site are typographically consistent:
     Syne     — headings (theme --font-heading-family, uppercase, weight 400)
     Archivo  — body, buttons, nav (theme --font-body/button/header-menu-family)
   Both self-hosted variable fonts; one file covers each weight axis.

   Accent/detail stays MONOSPACE. Reflo's theme has no mono, so the stack names
   Suisse Int'l Mono — the brand spec for this role — with IBM Plex Mono
   (SIL OFL) bundled behind it. Suisse International is commercially licensed
   (Swiss Typefaces) and is not included; drop the kit in and uncomment below.

   Mono carries eyebrows, spec keys, stat labels, cert names, table headers and
   badges — the spec-sheet register a procurement buyer reads as technical. */

/*  ── Licensed brand mono — uncomment once the webfont kit is in place ──
@font-face {
  font-family: 'Suisse Intl Mono';
  src: url('/assets/fonts/suisse-intl-mono.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
*/

@font-face {
  font-family: 'Syne';
  src: url('/assets/fonts/syne-var.woff2') format('woff2-variations');
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SL Mono Sub';
  src: url('/assets/fonts/sub-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SL Mono Sub';
  src: url('/assets/fonts/sub-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* Reflo palette — measured values, not approximations.
     Their black is #0D0D0D and their white is #FFFFFF. */
  --ink: #0D0D0D;
  --paper: #FFFFFF;
  --paper-alt: #F5F5F5;
  --dark-2: #181818;
  --dark-3: #1F1F1F;
  --line-light: #E6E6E6;
  --line-dark: #535353;
  --green: #4bff87;
  --red: #E55050;

  /* Display + body match the Shopify theme. Mono names the brand face first. */
  --font-display: 'Syne', 'Futura', 'Century Gothic', sans-serif;
  --font-body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Suisse Intl Mono', 'SuisseIntlMono-Regular', 'SL Mono Sub', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* reflo.com: max-width 100%, padding-inline 12px. There is no centred column. */
  --gutter: 12px;
  --section-pad: 48px;
  /* Text blocks are constrained individually inside full-bleed sections. */
  --measure: 60ch;
  --radius-btn: 4px;
  --dur: 300ms;
  --nav-h: 68px;

  /* Scheme defaults. The nav, hero, split banners, sticky bar and footer all
     sit OUTSIDE a scheme container, so without these every var(--btn-bg),
     var(--line) etc. resolves to nothing — which silently strips the nav
     button's fill and every border on the page. */
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: #565656;
  --line: var(--line-light);
  --btn-bg: var(--ink);
  --btn-fg: #FFFFFF;
  --eyebrow: var(--ink);
}

/* ── Colour schemes ────────────────────────────────────────────────────────
   Every component below colours itself from these variables, so a section
   changes appearance purely by swapping its scheme class. */
.scheme-light  { --bg: var(--paper);     --fg: var(--ink);   --muted: #565656; --line: var(--line-light); --btn-bg: var(--ink);   --btn-fg: #FFFFFF; --eyebrow: var(--ink); }
.scheme-alt    { --bg: var(--paper-alt); --fg: var(--ink);   --muted: #545454; --line: #DCDCDC;           --btn-bg: var(--ink);   --btn-fg: #FFFFFF; --eyebrow: var(--ink); }
.scheme-invert { --bg: var(--ink);       --fg: #FFFFFF;      --muted: #ABABAB; --line: var(--line-dark);  --btn-bg: #FFFFFF;      --btn-fg: var(--ink); --eyebrow: var(--green); }
.scheme-dark-2 { --bg: var(--dark-2);    --fg: #FFFFFF;      --muted: #ABABAB; --line: var(--line-dark);  --btn-bg: #FFFFFF;      --btn-fg: var(--ink); --eyebrow: var(--green); }

/* The bright accent green (#4bff87) reads well on dark surfaces but washes out
   on white. So the contextual accent (--eyebrow) resolves to BLACK on light
   schemes and to the brand green on dark schemes. The green still appears on
   inverted bands, the finder cards' interactive fills, the map and the marks. */

.scheme-light, .scheme-alt, .scheme-invert, .scheme-dark-2 {
  background: var(--bg); color: var(--fg);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px; }
:target, section[id] { scroll-margin-top: calc(var(--nav-h) + 8px); }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-size: 0.94rem;      /* ~15px — Reflo runs 13.3px; nudged up for B2B copy */
  line-height: 1.5;
}

img { max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* ── Accessibility ─────────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 400;
  background: var(--ink); color: #fff; padding: 0.8rem 1.4rem;
  font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; font-weight: 500;
  border-radius: var(--radius-btn); transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px;
}

/* ── Layout primitives ─────────────────────────────────────────────────────── */
.band { padding: var(--section-pad) var(--gutter) 0; }
.band--tight  { padding-top: 24px; }
.band--closed { padding-bottom: var(--section-pad); }   /* when no image follows */
.band--flush  { padding: 0; }                            /* full-bleed media */

/* Text constrained individually — the SECTION stays full width. */
.measure { max-width: var(--measure); }
.band-head { padding-inline: clamp(0px, 4vw, 76px); margin-bottom: 32px; }
.band-head--split {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.pad-x { padding-inline: clamp(0px, 4vw, 76px); }

/* ── Type ──────────────────────────────────────────────────────────────────── */
/* Reflo sets headings at weight 400 and scales by size. 400 is deliberate —
   Syne's width carries the weight; going bolder fights the typeface. */
.h-display, .h-section, .h-sub {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0; line-height: 1;
}
.h-display { font-size: clamp(2.4rem, 5.6vw, 5rem); }      /* 80px @1440 */
.h-section { font-size: clamp(1.9rem, 4.7vw, 4.25rem); }   /* 68px @1440 */
.h-sub     { font-size: clamp(1.15rem, 1.8vw, 1.6rem); line-height: 1.05; }

.eyebrow {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--eyebrow);
  margin-bottom: 1rem;
}
.lead { font-size: 1rem; line-height: 1.65; color: var(--muted); }
.body-copy { color: var(--muted); line-height: 1.65; }
.body-copy strong { color: var(--fg); font-weight: 500; }
.body-copy + .body-copy, .body-copy p + p { margin-top: 1rem; }

/* ── Buttons ───────────────────────────────────────────────────────────────
   reflo.com: #0D0D0D fill, 4px radius, 11px/38px padding, 192px min-width,
   Archivo 12px/500 uppercase. Inverts on dark schemes. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  padding: 13px 38px; min-width: 192px; border-radius: var(--radius-btn);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn--primary:hover { background: var(--green); color: var(--ink); }
.btn--secondary { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn--secondary:hover { background: var(--fg); color: var(--bg); }
/* On imagery, where the underlying scheme can't be relied on */
.btn--on-media { background: #FFFFFF; color: var(--ink); }
.btn--on-media:hover { background: var(--green); }
.btn--ghost-media { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.btn--ghost-media:hover { background: #fff; color: var(--ink); }

/* ── Nav ───────────────────────────────────────────────────────────────────── */
body > nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter) 0 clamp(12px, 4vw, 76px);
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-light);
}
.nav-brand { display: flex; flex-direction: column; line-height: 1; text-decoration: none; }
.nav-logo {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.04em; color: var(--ink); line-height: 1;
}
.nav-logo span { color: var(--ink); }
.nav-powered { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.32rem; }
.nav-powered-label {
  font-family: var(--font-mono); font-size: 0.5rem; font-weight: 500;
  letter-spacing: 0.16em; color: #6A6A6A; text-transform: uppercase; line-height: 1;
}
.reflo-mark { width: 62px; height: auto; display: block; }
.reflo-mark--footer { width: 104px; }
.nav-links { display: flex; gap: 2.2rem; }
.nav-links a {
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  text-decoration: none; opacity: 0.72; transition: opacity var(--dur);
}
.nav-links a:hover { opacity: 1; }
.nav-reflo { color: var(--eyebrow) !important; opacity: 0.85 !important; }
.nav-right { display: flex; align-items: center; gap: 0.75rem; padding-right: clamp(0px, 3vw, 60px); }
.nav-cta { padding: 11px 26px; min-width: 0; font-size: 0.7rem; }

.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: 0.5rem; width: 42px; height: 38px;
  flex-direction: column; justify-content: center; gap: 5px;
}
.nav-toggle-bar { display: block; height: 1.5px; width: 22px; background: var(--ink); transition: transform 0.25s, opacity 0.2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 199;
  background: #fff; border-bottom: 1px solid var(--line-light);
  padding: 0.5rem clamp(12px, 4vw, 76px) 1.4rem;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  display: block; padding: 0.95rem 0;
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--line-light);
}
.mobile-menu li:last-child a { border-bottom: none; }

/* ── Hero — split: positioning (left) + programme finder (right) ────────────── */
#hero {
  position: relative; background: var(--ink);
  display: flex; align-items: center;
  min-height: min(100vh, 940px);
  padding: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3rem)) 0 clamp(2rem, 5vw, 4rem);
}
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media > img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* The qualifier card is opaque on the right, so the scrim only needs to carry
   the white headline on the left. Weighted left + bottom. */
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(13,13,13,0.34) 0%, rgba(13,13,13,0.14) 34%, rgba(13,13,13,0.78) 100%),
    linear-gradient(90deg, rgba(13,13,13,0.66) 0%, rgba(13,13,13,0.22) 52%, rgba(13,13,13,0.05) 100%);
}
.hero-grid {
  position: relative; z-index: 2; width: 100%;
  max-width: 1360px; margin: 0 auto;
  padding-inline: clamp(12px, 4vw, 76px);
  display: grid; grid-template-columns: 1fr minmax(370px, 440px);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.hero-copy { color: #fff; }
.hero-copy .eyebrow { color: var(--green); }
.hero-h1 { max-width: 15ch; margin-bottom: 1.25rem; }
.hero-sub { max-width: 42ch; color: rgba(255,255,255,0.88); font-size: 1rem; line-height: 1.6; margin-bottom: 1.75rem; }

/* ── Finder widget ─────────────────────────────────────────────────────────── */
.finder {
  border-radius: 10px; padding: clamp(1.25rem, 2.2vw, 1.9rem);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}
.finder-kicker { color: var(--eyebrow); margin-bottom: 0.5rem; }
.finder-title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: 1.4rem; line-height: 1; margin-bottom: 1rem;
}
.fw-go { width: 100%; margin-top: 1.2rem; }

/* Repeated standalone finder band */
.finder-band-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.finder-band-copy .lead { max-width: 40ch; }

.q-field { margin-bottom: 1rem; border: 0; padding: 0; min-width: 0; }
.q-label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 0.55rem;
}
.q-label output { color: var(--ink); font-weight: 700; }
legend.q-label { padding: 0; }

/* Range slider — grey track; thumb takes the contextual accent (black on the
   light finder cards, green on dark). */
.q-field input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px;
  background: transparent; cursor: pointer;
}
.q-field input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line); }
.q-field input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
.q-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px;
  border-radius: 50%; background: var(--eyebrow); border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}
.q-field input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--eyebrow);
  border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}
.q-field input[type="range"]:focus-visible { outline: none; }
.q-field input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ink); outline-offset: 2px; }
.q-field input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--ink); outline-offset: 2px; }
.q-scale {
  display: flex; justify-content: space-between; margin-top: 0.35rem;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.04em; color: var(--muted);
}

/* Segmented radio controls */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* "What do you need?" — 7 options, last spans the row. */
.seg--needs { margin-bottom: 1.1rem; }
.seg-opt--wide { grid-column: 1 / -1; }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.seg-opt span {
  display: block; text-align: center; padding: 0.62rem 0.5rem;
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  font-size: 0.76rem; color: var(--fg); line-height: 1.25; height: 100%;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur), background var(--dur), color var(--dur);
}
.seg-opt:hover span { border-color: var(--muted); }
.seg-opt input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.seg-opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Stats strip — sits directly under the hero, edge to edge */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }
.stat-item { padding: 1.6rem clamp(12px, 2.4vw, 32px); border-right: 1px solid var(--line); }
.stat-item:last-child { border-right: none; }
.stat-num { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.3rem); line-height: 1; }
.stat-label {
  display: block; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  margin-top: 0.45rem; line-height: 1.45;
}

/* ── Marquee ───────────────────────────────────────────────────────────────── */
.marquee-label {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase;
  text-align: center; margin-bottom: 1.6rem;
}
.marquee-viewport { overflow: hidden; }
.marquee-track { display: flex; align-items: center; gap: 4rem; width: max-content; animation: marquee 44s linear infinite; }
.marquee-track img { height: 26px; width: auto; flex-shrink: 0; transition: opacity var(--dur); }
/* Logos are supplied light-on-transparent; invert them for light schemes. */
.scheme-light .marquee-track img,
.scheme-alt .marquee-track img { filter: brightness(0); opacity: 0.55; }
.scheme-invert .marquee-track img { filter: brightness(0) invert(1); opacity: 0.75; }
.marquee-track img:hover { opacity: 1; }
.marquee-viewport:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Split media banner ────────────────────────────────────────────────────
   Reflo's signature device: two full-height images side by side with an
   overlaid headline. Appears twice on their homepage. */
/* DEFINITE height, not min-height. The supplied images are portrait (≈2:3), so
   at half-width they'd otherwise lay out ~1080px tall — the images "cover" a
   fixed band and crop instead. Rows stretch to this height so object-fit works. */
.split-banner { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: clamp(340px, 38vw, 520px); }
.split-banner figure { position: relative; overflow: hidden; min-height: 0; }
.split-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
/* Centre-weighted scrim behind the centred overlay copy. Kept moderate so it
   holds text over bright imagery (split 1's neon studio) without crushing
   already-dark imagery (split 2's olive-on-grass) into mud. */
.split-banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 72% at 50% 62%, rgba(13,13,13,0.62) 0%, rgba(13,13,13,0.22) 66%, rgba(13,13,13,0.05) 100%),
    linear-gradient(180deg, rgba(13,13,13,0.05) 0%, rgba(13,13,13,0.32) 100%);
}
.split-overlay {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 1rem; padding: 2rem clamp(12px, 4vw, 76px); color: #fff;
}
.split-overlay .eyebrow { color: var(--green); margin-bottom: 0; }
.split-overlay p.split-sub { max-width: 52ch; color: rgba(255,255,255,0.9); line-height: 1.6; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }

.card { background: var(--bg); }
.card-media { overflow: hidden; aspect-ratio: 4 / 3; }
.card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; transition: transform 600ms; }
.card:hover .card-media img { transform: scale(1.04); }
.card-body { padding: 1.6rem clamp(1rem, 2vw, 1.8rem) 2rem; }
.card-num {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--eyebrow);
  display: block; margin-bottom: 0.6rem;
}
.card-title { margin-bottom: 0.7rem; }
.card-desc { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }

/* ── Spec lists ────────────────────────────────────────────────────────────
   Reflo has no monospace, so the spec-sheet register comes from wide-tracked
   uppercase Archivo labels in a fixed column. */
.spec-card { background: var(--bg); padding: 2rem clamp(1rem, 2vw, 1.8rem) 2.4rem; }
.spec-row { display: grid; grid-template-columns: 88px 1fr; gap: 1rem; padding: 0.42rem 0; align-items: baseline; }
.spec-key {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--eyebrow);
}
.spec-val { font-size: 0.88rem; color: var(--muted); line-height: 1.5; }

/* ── Impact stats + certifications ─────────────────────────────────────────── */
.impact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); margin-top: 2rem; }
.impact-stat { background: var(--bg); padding: 1.6rem; }
.impact-num { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 2.6vw, 2.6rem); line-height: 1; }
.impact-label {
  display: block; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  margin-top: 0.5rem; line-height: 1.45;
}
.reloop-strip { margin-top: 2rem; padding: 1rem 1.4rem; border-left: 3px solid var(--eyebrow); background: color-mix(in srgb, var(--eyebrow) 7%, transparent); }
.reloop-text {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg);
}
.cert-item { display: flex; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.cert-item:first-child { padding-top: 0; }
.cert-pip { width: 6px; height: 6px; background: var(--eyebrow); flex-shrink: 0; margin-top: 0.45rem; }
.cert-name {
  display: block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg); margin-bottom: 0.3rem;
}
.cert-desc { font-size: 0.88rem; color: var(--muted); line-height: 1.55; }

/* ── Case studies ──────────────────────────────────────────────────────────── */
/* Two image-led hero case studies, then the rest as text cards below. */
.case-heroes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.case-hero { display: flex; flex-direction: column; background: var(--dark-2); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.case-hero-media { aspect-ratio: 4 / 3; overflow: hidden; }
.case-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms; }
.case-hero:hover .case-hero-media img { transform: scale(1.03); }
.case-hero-body { padding: 1.6rem clamp(1.2rem, 2vw, 1.8rem) 2rem; }
.case-hero .case-client { font-size: clamp(1.25rem, 1.7vw, 1.55rem); }
.case-rest { margin-top: 0; }
.case-card { background: var(--bg); padding: 1.9rem clamp(1rem, 2vw, 1.8rem) 2.2rem; }
.case-client { margin-bottom: 0.35rem; }
.case-sector {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--eyebrow);
  margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.case-metric { display: grid; grid-template-columns: 82px 1fr; gap: 0.8rem; padding: 0.3rem 0; align-items: baseline; }
.cm-key { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eyebrow); }
.cm-val { font-size: 0.86rem; color: var(--fg); }
.case-body { font-size: 0.86rem; color: var(--muted); line-height: 1.55; margin-top: 1rem; }
/* Staged, not yet used in the markup: the case cards are text-only until the
   per-client photography lands (IMAGE-BRIEF.md #7–12). Add a .case-photo figure
   above each .case-card body and the grid picks it up with no other change. */
.case-photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.case-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms; }
.case-photo:hover img { transform: scale(1.05); }
.case-photo-label {
  position: absolute; left: 1rem; bottom: 0.9rem; color: #fff;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

/* ── Capabilities table ────────────────────────────────────────────────────── */
.cap-table-wrap { overflow-x: auto; }
.cap-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cap-caption { caption-side: bottom; text-align: left; margin-top: 0.9rem; font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
.cap-table th {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--eyebrow);
  text-align: left; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--line);
}
.cap-table tbody th { color: var(--fg); font-size: 0.92rem; letter-spacing: 0; text-transform: none; font-weight: 400; }
.cap-table td { font-size: 0.9rem; color: var(--muted); padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.cap-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: var(--radius-btn);
  border: 1px solid var(--line); color: var(--fg);
}
.cap-badge.avail   { border-color: color-mix(in srgb, var(--eyebrow) 55%, transparent); }
.cap-badge.limited { border-color: color-mix(in srgb, var(--red) 60%, transparent); }

/* ── Intro (copy paired with imagery) ──────────────────────────────────────── */
/* Centred copy block - no imagery. Constrained to a readable measure and
   centred on the page, header and paragraphs aligned centre. */
.intro-centered { max-width: 60ch; margin-inline: auto; text-align: center; }
.intro-centered .eyebrow { display: block; }

/* ── Delivery ──────────────────────────────────────────────────────────────── */
.delivery-top { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.delivery-grid { gap: 1px; background: var(--line); }
.delivery-card { background: var(--bg); padding: 1.8rem clamp(1rem, 2vw, 1.6rem) 2rem; }
.delivery-copy { font-size: 0.9rem; color: var(--muted); line-height: 1.6; margin-top: 0.6rem; }

/* World map graphic - dark technical network panel */
.delivery-map {
  background: radial-gradient(130% 130% at 50% 30%, #0b2536 0%, #071825 48%, #040d15 100%), #040d15;
  border: 1px solid rgba(120, 200, 255, 0.14);
  border-radius: 10px;
  padding: clamp(0.9rem, 2.4vw, 1.9rem);
  overflow: hidden;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.55), 0 12px 40px rgba(4, 13, 21, 0.35);
}
.delivery-map svg { width: 100%; height: auto; display: block; }
/* Faint lat/long graticule for a technical grid feel */
.map-graticule { fill: none; stroke: #3a6a8a; stroke-opacity: 0.14; stroke-width: 0.6; }
/* Dotted continents (accurate Natural Earth geometry) - steel-blue landmass */
#sl-dots circle { fill: #5aa6d8; }
.map-dotfield { opacity: 0.85; }
.map-coast { fill: none; stroke: #7cc0ea; stroke-opacity: 0.26; stroke-width: 0.7; }
/* Glowing shipping routes */
.map-routes { filter: drop-shadow(0 0 2.5px rgba(75, 255, 135, 0.7)); }
.map-routes path { stroke: var(--green); stroke-width: 1; stroke-dasharray: 4 5; stroke-linecap: round; opacity: 0.85; animation: dashflow 5s linear infinite; }
/* Amber destination points */
.map-nodes { filter: drop-shadow(0 0 3px rgba(255, 170, 40, 0.8)); }
.map-dest { fill: #ffb42e; opacity: 0.9; }
/* Highlighted distribution hubs (UK, US, UAE, China) */
.map-hubs { filter: drop-shadow(0 0 5px rgba(255, 180, 50, 0.95)); }
.map-hub { fill: #ffd66b; }
.map-hub-halo { fill: none; stroke: #ffb42e; stroke-width: 4; stroke-opacity: 0.25; animation: hubpulse 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dashflow { to { stroke-dashoffset: -110; } }
@keyframes hubpulse { 0%, 100% { transform: scale(1); stroke-opacity: 0.28; } 50% { transform: scale(1.6); stroke-opacity: 0.05; } }

/* ── Brief section ─────────────────────────────────────────────────────────── */
.brief-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact-detail { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 2rem; }
.contact-item { display: grid; grid-template-columns: 92px 1fr; gap: 1rem; align-items: baseline; }
.contact-item-key { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--eyebrow); }
.contact-item-val { font-size: 0.9rem; color: var(--fg); }

/* ── Form ──────────────────────────────────────────────────────────────────── */
#brief-form { display: flex; flex-direction: column; gap: 0.9rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.form-field.full { grid-column: 1 / -1; }
.form-hint { font-size: 0.74rem; color: var(--muted); line-height: 1.45; }
/* Budget + compact co-brand checkbox share one full-width row */
.budget-check-row { display: flex; align-items: flex-end; gap: 1.5rem; }
.budget-check-row .budget-field { flex: 1; min-width: 0; }
.check-inline {
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--fg);
  padding-bottom: 0.85rem;
}
.check-inline input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; flex-shrink: 0; margin: 0; }

/* Tag input (products) */
.tags {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-btn);
  padding: 0.5rem 0.55rem; transition: border-color var(--dur);
}
.tags:focus-within { border-color: var(--fg); }
.tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--ink); color: #fff; border-radius: 3px;
  font-size: 0.8rem; padding: 0.3rem 0.55rem; line-height: 1;
}
.tag button {
  background: none; border: 0; color: rgba(255,255,255,0.7); cursor: pointer;
  font-size: 0.95rem; line-height: 1; padding: 0; margin: 0;
}
.tag button:hover { color: #fff; }
.tags-input {
  flex: 1; min-width: 8ch; border: 0 !important; background: transparent !important;
  padding: 0.3rem 0.25rem !important; font-size: 0.9rem; color: var(--fg); outline: none;
}
.tags.has-error, .form-field.has-error .tags { border-color: var(--red); }

.form-field label {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.11em; color: var(--muted); text-transform: uppercase;
}
.label-opt { color: var(--muted); opacity: 0.75; letter-spacing: 0.06em; }
.form-field :is(input, select, textarea) {
  background: var(--bg); border: 1px solid var(--line); color: var(--fg);
  font-family: var(--font-body); font-size: 0.95rem; padding: 0.8rem 0.9rem;
  border-radius: var(--radius-btn); outline: none; width: 100%;
  -webkit-appearance: none; appearance: none; transition: border-color var(--dur);
}
.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%230D0D0D'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.2rem;
}
.scheme-invert .form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}
.form-field :is(input, textarea)::placeholder { color: var(--muted); opacity: 0.65; }
.form-field :is(input, select, textarea):focus { border-color: var(--fg); }
.form-field textarea { resize: vertical; min-height: 118px; }
.form-field.has-error :is(input, select, textarea) { border-color: var(--red); }
.field-err { font-size: 0.72rem; color: #B3261E; line-height: 1.45; }
.scheme-invert .field-err { color: #FF9A93; }
.field-err[hidden] { display: none; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.form-submit { align-self: flex-start; margin-top: 0.4rem; }
.form-submit:disabled { opacity: 0.55; cursor: progress; }
.form-note { font-size: 0.74rem; color: var(--muted); line-height: 1.55; margin-top: 0.3rem; }
.form-result { padding: 1.8rem; border: 1px solid var(--line); border-radius: var(--radius-btn); }
.form-result[hidden] { display: none; }
.form-result.is-success { border-color: color-mix(in srgb, var(--eyebrow) 60%, transparent); }
.form-result.is-error { border-color: var(--red); }
.form-result-title { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; margin-bottom: 0.6rem; }
.form-result-body { font-size: 0.92rem; color: var(--muted); line-height: 1.6; }
.form-result-body a { color: var(--fg); text-decoration: underline; }

/* ── Sticky CTA ────────────────────────────────────────────────────────────── */
.sticky-cta {
  position: fixed; inset: auto 0 0 0; z-index: 150;
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  padding: 0.7rem var(--gutter);
  background: rgba(13, 13, 13, 0.96); backdrop-filter: blur(14px);
  transform: translateY(110%); transition: transform 0.35s ease;
}
.sticky-cta[hidden] { display: none; }
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta-text { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #ABABAB; }
.sticky-cta-text span { color: #fff; }
.sticky-cta-btn { background: #fff; color: var(--ink); padding: 11px 30px; min-width: 0; font-size: 0.7rem; }
.sticky-cta-btn:hover { background: var(--green); }

/* ── Consent ───────────────────────────────────────────────────────────────── */
.consent {
  position: fixed; inset: auto 0 0 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; gap: 1.6rem; flex-wrap: wrap;
  padding: 0.9rem clamp(12px, 4vw, 76px);
  background: var(--ink); color: #fff; border-top: 1px solid var(--line-dark);
}
.consent[hidden] { display: none; }
.consent-text { font-size: 0.82rem; color: #C4C4C4; line-height: 1.55; max-width: 640px; }
.consent-text a { color: #fff; }
.consent-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
.consent-btn { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.6rem 1.3rem; border-radius: var(--radius-btn); cursor: pointer; border: 1px solid rgba(255,255,255,0.4); background: transparent; color: #fff; }
.consent-reject:hover { border-color: #fff; }
.consent-accept { background: #fff; color: var(--ink); border-color: #fff; }
.consent-accept:hover { background: var(--green); }
body:has(.consent:not([hidden])) .sticky-cta.is-visible { transform: translateY(110%); }

/* ── Footer ────────────────────────────────────────────────────────────────── */
footer { background: var(--ink); color: #fff; padding: 3rem clamp(12px, 4vw, 76px); }
.footer-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.footer-logo { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.04em; line-height: 1; }
.footer-logo span { color: var(--green); }
.footer-sub { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
.footer-sub-label { font-family: var(--font-mono); font-size: 0.55rem; font-weight: 500; letter-spacing: 0.16em; color: #ABABAB; text-transform: uppercase; line-height: 1; }
.footer-tagline { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; color: #ABABAB; text-transform: uppercase; margin-top: 1.2rem; }
.footer-links { display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; }
.footer-links a { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #C4C4C4; text-decoration: none; transition: color var(--dur); }
.footer-links a:hover { color: #fff; }
.footer-copy { font-size: 0.72rem; color: #ABABAB; align-self: flex-end; }

/* ── Motion ────────────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.no-js .reveal { opacity: 1; transform: none; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat-item:nth-child(3) { border-right: none; }
}
/* Below ~1000px the 440px card + meaningful copy no longer share a row cleanly,
   so the hero stacks: positioning on top, finder card below. */
@media (max-width: 1000px) {
  #hero { min-height: 0; padding-top: calc(var(--nav-h) + 1.5rem); }
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-copy { order: -1; }
  .finder { width: 100%; max-width: 560px; }
  .finder-band-inner { grid-template-columns: 1fr; gap: 2rem; }
  .brief-grid { grid-template-columns: 1fr; gap: 2rem; }
  .delivery-grid { grid-template-columns: 1fr; }
  .delivery-top { grid-template-columns: 1fr; gap: 1.75rem; }
  .closing-inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
}
@media (max-width: 860px) {
  :root { --section-pad: 36px; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .band-head--split { grid-template-columns: 1fr; gap: 1.5rem; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .case-heroes { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat-item { border-right: none; border-bottom: 1px solid var(--line); }
  .split-banner { grid-template-columns: 1fr 1fr; height: clamp(300px, 56vw, 420px); }
  .form-row { grid-template-columns: 1fr; }
  .budget-check-row { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .check-inline { padding-bottom: 0; }
  .closing-btn { width: 100%; text-align: center; }
  .sticky-cta-text { display: none; }
  .sticky-cta-btn { width: 100%; }
  .consent-actions { width: 100%; }
  .consent-actions .consent-btn { flex: 1; }
  .footer-copy { align-self: flex-start; }
  .impact-grid { grid-template-columns: 1fr 1fr; }
  /* Narrower viewport - speed the logo marquee up so it doesn't crawl. */
  .marquee-track { animation-duration: 28s; }
}
@media (max-width: 520px) {
  .split-banner { grid-template-columns: 1fr; }
  .split-banner figure:last-child { display: none; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .marquee-track { animation-duration: 20s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .map-routes path { animation: none; }
  .map-hub-halo { animation: none; }
  .sticky-cta.is-visible { transform: translateY(0); }
}
@media print {
  body > nav, .mobile-menu, .sticky-cta, .consent, .skip-link { display: none !important; }
}