/* ============================================================
   1. DESIGN TOKENS  —  change brand values here only
   ============================================================ */
:root{
  --navy:#0A2540;          /* headlines, dark bands */
  --navy-deep:#071B2F;     /* footer */
  --blue:#29ABE2;          /* logo cyan — accents, icons, rules */
  --blue-ink:#1E5FD9;      /* interactive blue for buttons/links */
  --light-bg:#EEF3F8;      /* pale section wash */
  --panel:#FFFFFF;
  --border:#DCE4EC;
  --text:#0A2540;
  --text-muted:#5A6B7B;
  --text-on-navy:#AFC0D6;

  --font-display:'Poppins','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-body:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;

  --wrap:1240px;
  --radius:8px;
  --shadow:0 1px 3px rgba(10,37,64,.06);
}

/* ============================================================
   2. RESET + BASE
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  color:var(--text);
  line-height:1.55;
  font-size:15px;
  background:var(--panel);
}
h1,h2,h3,h4,h5{font-family:var(--font-display);line-height:1.15;font-weight:600}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul{list-style:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Image slots: keep layout intact while artwork is still being dropped in.
   The tinted box behind each <img> is what you see if a file is missing. */
.slot{background:linear-gradient(135deg,#E9EEF4,#D6DFE9);border-radius:var(--radius);overflow:hidden}
.slot img{width:100%;height:100%;object-fit:cover}
.slot--contain img{object-fit:contain}

/* ============================================================
   3. HEADER / NAV
   ============================================================ */
header.site-header{
  background:var(--panel);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1000;
}
.nav-bar{
  max-width:var(--wrap);margin:0 auto;padding:16px 28px;
  display:flex;align-items:center;gap:28px;
}
.brand{flex:0 0 auto}
.brand img{height:44px;width:auto}
.main-nav{display:flex;align-items:center;gap:26px;margin:0 auto}
.main-nav a{
  font-family:var(--font-display);font-size:12.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy);white-space:nowrap;
}
.main-nav a:hover{color:var(--blue-ink)}
.btn-partner{
  background:var(--navy);color:#fff;padding:13px 24px;border-radius:4px;
  font-family:var(--font-display);font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;transition:background .2s ease;
}
.btn-partner:hover{background:var(--blue-ink)}
.nav-toggle{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  padding:8px;flex-direction:column;gap:5px;
}
.nav-toggle span{display:block;width:24px;height:2.5px;background:var(--navy);border-radius:2px}

/* ============================================================
   4. HERO
   ============================================================ */
/* The homepage hero is its own layout: centred copy, then the photograph edge
   to edge. It runs the full viewport width deliberately — the image carries
   the page, and a symmetric full-bleed reads as intentional in a way the
   earlier one-sided version did not. Inner pages use the two-column .page-hero
   instead. */
.hero{background:var(--light-bg);overflow:hidden;padding:60px 0 0}
.hero-copy{
  max-width:var(--wrap);margin:0 auto;padding:0 28px 44px;text-align:center;
}
/* The one large headline per page is set in caps. Caps need positive tracking
   and slightly less weight than sentence case or they read as a wall. */
.hero-copy h1{
  font-size:clamp(28px,3.4vw,46px);font-weight:600;letter-spacing:.012em;
  text-transform:uppercase;margin-bottom:20px;line-height:1.2;
}
/* .lede forces a line break at a chosen word rather than leaving it to the
   wrapping algorithm, which lands it somewhere different at every width.
   Used on headlines across the site, so it is a plain utility. */
.lede{display:block}
.hero-copy p{
  color:#40536A;margin:0 auto 26px;font-size:15px;line-height:1.65;max-width:78ch;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-copy .hero-actions{justify-content:center}
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:4px;
  font-family:var(--font-display);font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;
  transition:background .2s ease,color .2s ease;
}
.btn-primary{background:var(--blue-ink);color:#fff}
.btn-primary:hover{background:var(--navy)}
.btn-outline{border:2px solid var(--blue-ink);color:var(--blue-ink);background:transparent}
.btn-outline:hover{background:var(--blue-ink);color:#fff}
/* Inner page heroes are navy, so the outline button needs a light edge there. */
.page-hero .btn-outline{border-color:rgba(255,255,255,.55);color:#fff}
.page-hero .btn-outline:hover{background:#fff;color:var(--navy);border-color:#fff}

/* ---- the page hero image slot ------------------------------------------
   16:9 on every page, so a single export size fits all of them:
   2400 x 1350 px. The box takes the image's own ratio, so nothing is cropped.
   ---------------------------------------------------------------------- */
.hero-figure{position:relative;width:100%}
.hero-figure .slot,.page-hero-figure .slot{
  position:static;width:100%;aspect-ratio:16/9;overflow:hidden;
}
/* The homepage hero swaps to a 9:16 portrait file on phones, so the slot has to
   change shape with it, or object-fit:cover crops the tall image to its middle
   band. Rather than hard-coding a second ratio, the box is released and the
   image's own dimensions drive the height — that stays correct even if the
   portrait file is re-exported at a different shape.
   .hero-figure is needed in both selectors: the rules they override are two
   classes deep, and a single-class selector loses on specificity. */
@media (max-width:640px){
  .hero-figure .slot--hero-home{aspect-ratio:auto}
  .hero-figure .slot--hero-home img{height:auto;object-fit:contain}
}
/* Full bleed: no radius and no shadow — there is no edge for either to sit on. */
.hero-figure .slot{background:#DDE5EE;border-radius:0}
.page-hero-figure .slot{border-radius:var(--radius)}
/* Inner heroes sit on navy, where a shadow does nothing — a light edge reads better. */
.page-hero-figure .slot{background:rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.hero-figure .slot img,.page-hero-figure .slot img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Empty state, for pages still waiting on artwork. */
.hero-slot--empty{
  aspect-ratio:16/9;border:1px dashed rgba(255,255,255,.32);border-radius:var(--radius);
  background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:20px;
}
.hero-slot--empty span{
  font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.52);line-height:1.7;
}

/* ============================================================
   5. STATS BAR
   ============================================================ */
.stats{background:var(--navy);padding:34px 0}
.stats-grid{
  display:grid;grid-template-columns:repeat(6,1fr);
}
.stat{
  text-align:center;color:#fff;padding:6px 16px;
  border-left:1px solid rgba(255,255,255,.16);
}
.stat:first-child{border-left:0}
.stat svg{width:34px;height:34px;margin:0 auto 10px;stroke:#fff;fill:none;stroke-width:1.4}
.stat-value{font-family:var(--font-display);font-size:26px;font-weight:600;line-height:1.1}
.stat-label{
  font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:#fff;margin-top:8px;line-height:1.35;
}
.stat-sub{font-size:10px;letter-spacing:.04em;color:var(--text-on-navy);margin-top:5px}

/* ============================================================
   6. PROCESS FLOW  ("100% Under Our Control")
   ============================================================ */
.control{background:var(--light-bg);padding:56px 0 52px;text-align:center}
.control h2{font-size:clamp(24px,2.4vw,31px);margin-bottom:14px}
.control .intro{
  color:var(--text-muted);max-width:760px;margin:0 auto 40px;font-size:14px;
}
/* 3x3, so each step gets real size rather than nine items crammed in a row. */
.flow{
  display:grid;grid-template-columns:repeat(3,1fr);gap:44px 28px;
  max-width:840px;margin:0 auto;
}
.flow-step{display:flex;flex-direction:column;align-items:center;gap:16px}
.flow-icon{
  width:104px;height:104px;border-radius:50%;background:var(--panel);
  border:1.5px solid var(--blue);display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease,box-shadow .2s ease;
}
.flow-step:hover .flow-icon{transform:translateY(-3px);box-shadow:0 8px 20px rgba(41,171,226,.18)}
.flow-icon svg{width:50px;height:50px;stroke:var(--blue);fill:none;stroke-width:1.35}
.flow-step span{
  font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.045em;
  text-transform:uppercase;color:var(--navy);line-height:1.4;max-width:15ch;
}

/* ============================================================
   7. DIRECT CONTROL / MAP
   ============================================================ */
.direct{background:var(--light-bg);padding:0 0 52px}
.direct-panel{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:38px 40px 34px;
}
.direct-top{display:grid;grid-template-columns:.82fr 1.9fr;gap:42px;align-items:center}
.direct-panel h3{font-size:25px;line-height:1.25;margin-bottom:14px}
.direct-intro p{font-size:14px;color:var(--text-muted)}
.map-slot{background:none;border-radius:0}
.map-slot img{width:100%;height:auto;object-fit:contain}
/* The six commitments, given their own band rather than a side column —
   they're the substance of the claim the heading makes. */
.direct-points{
  margin-top:34px;padding-top:30px;border-top:1px solid var(--border);
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px 36px;
}
.point{display:flex;gap:15px;align-items:flex-start}
.point svg{
  flex:0 0 auto;width:36px;height:36px;stroke:var(--blue);fill:none;stroke-width:1.5;
}
.point p{font-size:13.5px;color:#334A63;line-height:1.45}
.map-flags{
  display:flex;gap:30px;justify-content:center;margin-top:18px;flex-wrap:wrap;
  font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--navy);
}
.map-flags span{display:inline-flex;align-items:center;gap:7px}
.map-flags img{width:26px;height:18px;object-fit:cover;border-radius:2px}
.checklist li{
  position:relative;padding-left:26px;margin-bottom:13px;font-size:13.5px;color:#334A63;
}
.checklist li:last-child{margin-bottom:0}
.checklist li::before{
  content:"";position:absolute;left:2px;top:5px;width:11px;height:7px;
  border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(-45deg);
}

/* ============================================================
   8. VALUE-ADDED SERVICES
   ============================================================ */
.services{background:var(--light-bg);padding:0 0 56px}
.services-panel{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:34px 20px 38px;
}
.services-panel h2{text-align:center;font-size:clamp(21px,2.1vw,27px);margin-bottom:30px}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.service{
  display:flex;gap:16px;padding:4px 26px;
  border-left:1px solid var(--border);
}
.service:first-child{border-left:0}
.service svg{
  flex:0 0 auto;width:38px;height:38px;stroke:var(--blue);fill:none;stroke-width:1.4;
}
.service h4{
  font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:8px;line-height:1.3;
}
.service p{font-size:12.5px;color:var(--text-muted);line-height:1.5}

/* ============================================================
   9. BRAND PORTFOLIO
   ============================================================ */
.brands{padding:52px 0 56px;text-align:center;background:var(--panel)}
.brands h2{font-size:clamp(24px,2.4vw,31px);margin-bottom:28px}
/* Flex rather than a fixed grid: brands get added and removed, and a 6-then-7
   split meant the two rows had different card widths. This keeps every card the
   same size at any count, and centres a short final row instead of leaving a
   ragged gap. */
.brand-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:18px;
}
.brand-card{
  flex:0 0 calc((100% - 4 * 18px) / 5);
  border:1px solid var(--border);border-radius:8px;background:var(--panel);
  padding:22px 16px 18px;display:flex;flex-direction:column;gap:14px;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.brand-card:hover{border-color:#C3D2E0}
.brand-card:hover{box-shadow:0 6px 18px rgba(10,37,64,.10);transform:translateY(-2px)}
.brand-logo{height:72px;display:flex;align-items:center;justify-content:center}
/* Each logo carries its own width/height, set so all thirteen read at the same
   optical weight despite a 10:1 spread in proportion. Files are 2x for retina. */
.brand-logo img{max-width:100%;height:auto}
.brand-cat{
  font-family:var(--font-display);font-size:10.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--navy);line-height:1.45;min-height:30px;
}
.brand-shot{height:92px;border-radius:4px}
.view-all{
  display:inline-flex;align-items:center;gap:8px;border:2px solid var(--blue-ink);
  color:var(--blue-ink);padding:12px 26px;border-radius:4px;
  font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin-top:26px;
}
.view-all:hover{background:var(--blue-ink);color:#fff}

/* ============================================================
   10. OMNI-CHANNEL / RETAILERS
   ============================================================ */
.omni{background:var(--light-bg);padding:52px 0 56px}
/* Matches the brand grid: centred heading, then equal tiles in a flex wrap so
   a short final row centres instead of sitting ragged. */
.omni-copy{max-width:64ch;margin:0 auto 36px;text-align:center}
/* Same headline and body sizes as the Direct Control panel, so the two
   sections read as siblings. */
.omni-copy h3{font-size:clamp(23px,2.5vw,32px);line-height:1.25;margin-bottom:14px}
.omni-copy p{font-size:15px;color:var(--text-muted);line-height:1.65}
.retailers{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.retailer{flex:0 0 calc((100% - 5 * 18px) / 6)}
.retailer{
  background:var(--panel);border:1px solid var(--border);border-radius:6px;
  height:96px;display:flex;align-items:center;justify-content:center;padding:14px;
}
/* Each logo carries its own width/height, set so all twelve read at the same
   optical weight. Files are 2x for retina; these rules just keep them from
   overflowing a narrow tile. */
.retailer img{max-width:100%;height:auto;border-radius:3px}
.retailer span{
  font-family:var(--font-display);font-size:9.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--navy);text-align:center;line-height:1.3;
}

/* ============================================================
   11. FOOTER
   ============================================================ */
footer.site-footer{background:var(--navy-deep);color:#fff;padding:44px 0 0}
.footer-top{display:grid;grid-template-columns:1fr 2.1fr;gap:40px;align-items:start}
.footer-lead h4{font-size:21px;line-height:1.25;margin-bottom:12px}
.footer-lead p{font-size:12.5px;color:var(--text-on-navy);max-width:420px}
.footer-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.pillar svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.4;margin-bottom:12px}
.pillar h5{
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:7px;line-height:1.35;
}
.pillar p{font-size:11.5px;color:var(--text-on-navy);line-height:1.5}
.footer-cta{padding:32px 0 0}
.footer-cta .btn-primary{background:var(--blue-ink)}
.footer-legal{
  margin-top:30px;border-top:1px solid rgba(255,255,255,.14);
  padding:18px 0 24px;display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap;
}
.footer-legal img{height:26px;width:auto}
.footer-legal p{font-size:11.5px;color:var(--text-on-navy)}
.footer-legal nav{display:flex;gap:18px;font-size:11.5px}
.footer-legal nav a{color:var(--text-on-navy)}
.footer-legal nav a:hover{color:#fff}

/* ============================================================
   12. RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .main-nav{gap:18px}
  .main-nav a{font-size:11.5px}
  .brand-card{flex-basis:calc((100% - 3 * 18px) / 4)}
  .retailer{flex-basis:calc((100% - 4 * 18px) / 5)}
}
@media (max-width:980px){
  .stats-grid{grid-template-columns:repeat(3,1fr);gap:22px 0}
  .stat:nth-child(4){border-left:0}
  .direct-panel{padding:30px 26px 28px}
  .direct-top{grid-template-columns:1fr;gap:26px}
  .direct-panel h3{font-size:22px}
  .direct-points{grid-template-columns:repeat(2,1fr);gap:24px 28px}
  .services-grid{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .service:nth-child(3){border-left:0}
  .retailer{flex-basis:calc((100% - 3 * 18px) / 4)}
  .footer-top{grid-template-columns:1fr}
  .footer-pillars{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .nav-bar{flex-wrap:wrap;position:relative}
  .nav-toggle{display:flex}
  .main-nav{
    display:none;order:3;width:100%;flex-direction:column;align-items:flex-start;
    gap:14px;margin:0;padding:16px 0 6px;border-top:1px solid var(--border);
  }
  .main-nav.is-open{display:flex}
  .btn-partner{display:none}
  .main-nav.is-open + .btn-partner{display:inline-block}
  .hero{padding:40px 0 0}
  .hero-copy{padding-bottom:32px}
  .page-hero-grid{grid-template-columns:1fr;gap:28px}
  .flow{gap:34px 22px}
  .flow-icon{width:88px;height:88px}
  .flow-icon svg{width:42px;height:42px}
  .flow-step span{font-size:12px}
  .brand-card{flex-basis:calc((100% - 2 * 16px) / 3)}
  .brand-grid{gap:16px}
  .retailer{flex-basis:calc((100% - 2 * 16px) / 3)}
  .retailers{gap:16px}
}
@media (max-width:640px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-left:0}
  .services-grid{grid-template-columns:1fr}
  .service{border-left:0}
  /* 9 steps in 2 columns leaves a lone card on the last row; that reads better
     than 3 cramped columns on a phone. */
  .flow{grid-template-columns:repeat(2,1fr);gap:30px 18px}
  .flow-icon{width:76px;height:76px}
  .flow-icon svg{width:36px;height:36px}
  .direct-points{grid-template-columns:1fr}
  .brand-card{flex-basis:calc((100% - 14px) / 2)}
  .brand-grid{gap:14px}
  .retailer{flex-basis:calc((100% - 14px) / 2);height:84px}
  .retailers{gap:14px}
  .footer-pillars{grid-template-columns:1fr}
}

/* ============================================================
   13. INNER PAGES — shared components
   ============================================================ */

/* --- page hero (navy band under the header) --- */
.page-hero{background:var(--navy);color:#fff;padding:52px 0;overflow:hidden}
.page-hero-grid{
  /* 60/40 — copy-led. The compass images read fine at 456px (they are simple
     graphics, not detailed scenes) and the hero loses ~145px of height. The
     careers headline, the longest on the site, still sets on two rows at 34px
     in this wider column, so the type size did not need to move. */
  display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);
  gap:44px;align-items:center;
}
.page-hero .eyebrow{
  font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);margin-bottom:14px;
}
.page-hero h1{
  font-size:clamp(24px,2.5vw,34px);font-weight:600;letter-spacing:.012em;
  text-transform:uppercase;line-height:1.18;
}
.page-hero p{
  color:var(--text-on-navy);max-width:62ch;margin-top:16px;font-size:15.5px;line-height:1.6;
}
.page-hero .hero-actions{margin-top:26px}

/* --- generic section rhythm --- */
.section{padding:56px 0}
.section--tint{background:var(--light-bg)}
.section--navy{background:var(--navy);color:#fff}
.section--navy h2,.section--navy h3{color:#fff}
.section--navy p{color:var(--text-on-navy)}
.section-head{max-width:62ch;margin-bottom:36px}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center}
/* For intros long enough that 62ch strands the final word on its own row. */
.section-head--wide{max-width:78ch}
.section-head h2{font-size:clamp(23px,2.5vw,32px);margin-bottom:14px}
.section-head p{color:var(--text-muted);font-size:15px;line-height:1.65}
.section--navy .section-head p{color:var(--text-on-navy)}
.lead{font-size:16.5px;line-height:1.7;color:#40536A;max-width:70ch}
.prose p{margin-bottom:16px;line-height:1.7;color:#40536A;font-size:15px}
.prose p:last-child{margin-bottom:0}
.prose h3{font-size:19px;margin:30px 0 12px}

/* --- capability / content cards --- */
.cards{display:grid;gap:20px}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--shadow);
}
.card svg{width:52px;height:52px;stroke:var(--blue);fill:none;stroke-width:1.3;margin-bottom:18px}
.card h3{font-size:18px;font-weight:600;letter-spacing:.01em;margin-bottom:11px;line-height:1.3}
.card p{font-size:13.5px;color:var(--text-muted);line-height:1.6}
.card .step{
  font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:.1em;
  color:var(--blue);display:block;margin-bottom:12px;
}
/* Feature variant — used where three cards carry a whole section on their own
   and need to land harder than a normal card grid. */
.cards--feature .card{padding:34px 30px 32px}
.cards--feature .card svg{width:76px;height:76px;stroke-width:1.2;margin-bottom:24px}
.cards--feature .card h3{font-size:26px;font-weight:600;letter-spacing:-.01em;margin-bottom:14px}
.cards--feature .card p{font-size:14.5px;line-height:1.65}

.section--navy .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.section--navy .card p{color:var(--text-on-navy)}

/* --- stat strip reused on inner pages --- */
.figure-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.figure{border-left:2px solid var(--blue);padding-left:18px}
.figure .num{font-family:var(--font-display);font-size:30px;font-weight:600;line-height:1.1}
.figure .cap{
  font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-muted);margin-top:8px;
}
.section--navy .figure .cap{color:var(--text-on-navy)}

/* --- brands page: one brand per row, centred, rule between each --- */

/* Sticky so a specific brand is reachable without scrolling past fourteen
   others. --header-h is the sticky site header it has to sit beneath. */
:root{--header-h:77px}
.brand-jump-bar{
  position:sticky;top:var(--header-h);z-index:900;
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  padding:12px 0;margin-bottom:8px;
}
/* Two explicit rows, 8 then 7, rather than letting flex wrap decide. Wrapping
   would split wherever the widths happened to land; this keeps the halves even
   and lets each row centre on its own axis. */
.brand-jump{display:flex;flex-direction:column;gap:6px;align-items:center}
.jump-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.brand-jump a{
  border:1px solid var(--border);background:var(--panel);border-radius:100px;
  padding:6px 13px;font-family:var(--font-display);font-size:11px;font-weight:600;
  letter-spacing:.02em;color:var(--navy);white-space:nowrap;line-height:1.35;
}
.brand-jump a:hover{border-color:var(--blue);color:var(--blue-ink)}

.brand-row{
  border-top:2px solid #DFE7EF;padding:40px 0 44px;text-align:center;
  /* clears the 77px header plus the two-row sticky jump bar */
  scroll-margin-top:178px;
}
/* The rule's job is to divide one brand from the next, so the first row does
   not need one — it would just draw a line under the sticky nav. */
.brand-row:first-of-type{border-top:0;padding-top:18px}
.brand-stack{max-width:760px;margin:0 auto 38px}
.brand-row .mark{
  height:104px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;
}
.brand-row .mark img{max-height:104px;max-width:100%;width:auto;object-fit:contain}
.brand-row .sub{
  font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue-ink);line-height:1.4;margin-bottom:16px;
}
.brand-row .desc{
  font-size:16.5px;line-height:1.6;color:#4A5C70;margin-bottom:26px;
}
.brand-row .btn-sm{
  padding:15px 30px;font-size:12.5px;letter-spacing:.08em;
  background:var(--navy);border-color:var(--navy);color:#fff;
  box-shadow:0 2px 0 rgba(10,37,64,.18);
  transition:background .18s ease,border-color .18s ease,transform .18s ease,
             box-shadow .18s ease;
}
.brand-row .btn-sm svg{transition:transform .18s ease}
/* Lift, colour shift and a nudge on the arrow — three cues rather than one, so
   it reads as clickable without needing a caption to say so. */
.brand-row .btn-sm:hover,
.brand-row .btn-sm:focus-visible{
  background:var(--blue-ink);border-color:var(--blue-ink);color:#fff;
  transform:translateY(-2px);box-shadow:0 6px 14px rgba(30,95,217,.32);
}
.brand-row .btn-sm:hover svg,
.brand-row .btn-sm:focus-visible svg{transform:translateX(4px)}
.brand-row .btn-sm:active{transform:translateY(0);box-shadow:0 2px 0 rgba(10,37,64,.18)}
/* Inactive until the real URLs exist — still solid, so it reads as a button
   waiting on a link rather than as greyed-out text. */
.brand-row .btn-sm[aria-disabled="true"]{
  background:#8FA0B2;border-color:#8FA0B2;color:#fff;opacity:1;box-shadow:none;
}
.brand-row .shot{
  aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--light-bg);
}
.brand-row .shot img{width:100%;height:100%;object-fit:cover;display:block}
.brand-row .shot--empty{
  display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;
  border:1px dashed var(--border);
}
.brand-row .shot--empty span{
  font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:#93A4B5;line-height:1.7;
}

/* --- forms --- */
.form-panel{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:34px 36px;
}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 20px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1 / -1}
.field label{
  font-family:var(--font-display);font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--navy);
}
.field .req{color:var(--blue-ink)}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:14.5px;color:var(--text);
  border:1px solid var(--border);border-radius:4px;padding:11px 13px;background:var(--panel);
  width:100%;transition:border-color .15s ease,box-shadow .15s ease;
}
.field textarea{resize:vertical;min-height:120px;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(41,171,226,.16);
}
.field .hint{font-size:12px;color:var(--text-muted)}
.form-actions{margin-top:22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-actions .note{font-size:12px;color:var(--text-muted);max-width:44ch}
button.btn{border:0;cursor:pointer;font-family:var(--font-display)}
.consent{display:flex;gap:10px;align-items:flex-start;grid-column:1 / -1}
.consent input{width:auto;margin-top:3px}
.consent label{
  text-transform:none;letter-spacing:0;font-size:13px;font-weight:400;
  color:var(--text-muted);font-family:var(--font-body);line-height:1.5;
}
/* honeypot — hidden from people, visible to bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- callout / CTA band --- */
.cta-band{background:var(--navy);color:#fff;padding:46px 0}
.cta-band .inner{
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
}
.cta-band h2{font-size:clamp(21px,2.2vw,28px);max-width:none}
.cta-band p{color:var(--text-on-navy);font-size:14px;margin-top:10px;max-width:none}

/* --- simple two-column split --- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split--narrow-left{grid-template-columns:.8fr 1.2fr}

/* --- ordered list with numbers --- */
.numbered{counter-reset:n;display:grid;gap:26px}
.numbered li{counter-increment:n;display:flex;gap:20px;align-items:flex-start}
.numbered li::before{
  content:counter(n,decimal-leading-zero);
  font-family:var(--font-display);font-size:34px;font-weight:600;letter-spacing:-.01em;
  color:var(--blue);flex:0 0 auto;line-height:1;min-width:2.1ch;
  /* optical alignment: sit the digits on the heading's cap height */
  margin-top:-4px;
}
.numbered h3{font-size:17px;margin-bottom:8px}
.numbered p{font-size:14px;color:var(--text-muted);line-height:1.6}

/* --- notice / empty state --- */
.notice{
  border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:6px;
  background:var(--light-bg);padding:24px 26px;
}
.notice h3{font-size:17px;margin-bottom:10px}
.notice p{font-size:14px;color:var(--text-muted);line-height:1.65}

/* --- responsive for inner pages --- */
@media (max-width:980px){
  .cards--4{grid-template-columns:repeat(2,1fr)}
  .brand-stack{max-width:100%}
  .cards--3{grid-template-columns:repeat(2,1fr)}
  .figure-row{grid-template-columns:repeat(2,1fr);gap:22px}
  .split,.split--narrow-left{grid-template-columns:1fr;gap:28px}
  .form-panel{padding:26px 22px}
}
@media (max-width:640px){
  .cards--2,.cards--3,.cards--4{grid-template-columns:1fr}
  /* 15 pills will not fit a phone, so the bar scrolls sideways instead of
     stacking into a wall of chips */
  .brand-jump{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
              padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .brand-row{padding:30px 0 32px;scroll-margin-top:132px}
  .brand-row:first-of-type{padding-top:14px}
  .brand-stack{margin-bottom:26px}
  .brand-row .mark{height:80px;margin-bottom:18px}
  .brand-row .mark img{max-height:80px}
  .brand-row .sub{font-size:16px;margin-bottom:16px}
  .brand-row .desc{font-size:15.5px;margin-bottom:26px}
  .cards--feature .card svg{width:60px;height:60px;margin-bottom:18px}
  .cards--feature .card h3{font-size:22px}
  .numbered li::before{font-size:27px}
  .figure-row{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .page-hero{padding:40px 0 44px}
  .section{padding:40px 0}
}

/* ============================================================
   14. GLOBAL SOURCING SECTION
   ============================================================ */
.sourcing-map{margin:34px 0 0}
.sourcing-map img{width:100%;height:auto;display:block}

.map-legend{
  display:flex;gap:34px;flex-wrap:wrap;align-items:center;
  margin-top:14px;padding-top:16px;border-top:1px solid var(--border);
}

/* Homepage: sits under the intro copy in the left column, one item per row. */
.map-legend--stack{
  flex-direction:column;align-items:flex-start;gap:11px;
  margin-top:22px;padding-top:0;border-top:0;
}
.map-legend--stack span{font-size:11.5px;letter-spacing:.07em;line-height:1.3}
.map-legend--stack svg{width:15px;height:19px}

/* Platform: centred between the rule above and the points band below. */
.map-legend--center{justify-content:center;gap:44px}
.map-legend--center span{font-size:14.5px;letter-spacing:.06em}
.map-legend--center svg{width:20px;height:24px}
.map-legend span{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--navy);
  text-transform:uppercase;letter-spacing:.055em;
}
.map-legend svg{width:18px;height:22px;flex:0 0 auto}

.country-list{
  display:grid;grid-template-columns:repeat(5,1fr);gap:9px 20px;margin-top:24px;
}
.country-list li{
  display:flex;align-items:baseline;gap:10px;font-size:13.5px;color:#40536A;
}
.country-list li::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);
  flex:0 0 auto;transform:translateY(-2px);
}
.sourcing-note{
  font-size:12px;color:#8C98A5;line-height:1.6;margin-top:22px;max-width:80ch;
}
@media (max-width:980px){
  .country-list{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .country-list{grid-template-columns:repeat(2,1fr)}
  .map-legend{gap:18px}
}

/* --- sourcing map on the navy band (platform page) --- */
.sourcing-map--wide{margin:8px 0 0}
.map-legend--onnavy{border-top-color:rgba(255,255,255,.18)}
.section--navy .map-legend span{color:#fff}
.section--navy .direct-points{border-top-color:rgba(255,255,255,.18)}
.section--navy .point p{color:var(--text-on-navy)}
.section--navy .point p strong{color:#fff}
.section--navy .point svg{stroke:var(--blue)}