/* ==========================================================================
   Zarya Consultants, design system
   Palette taken from the logo (deep navy + azure) with the brass accent and
   teal secondary specified in the brand direction section of the blueprint.
   Mobile-first; every rule below 900px is the default.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  /* The contact bar is hidden below the desktop breakpoint, so the header
     sits at the very top there and this is zero. */
  --topbar-h: 0px;
  --navy-900: #0b1424;
  --navy-800: #14223c;
  --navy-700: #1c3055;
  --navy-600: #274170;
  --blue-700: #14509f;
  --blue-600: #1a5fbf;
  --blue-500: #2a76da;
  --blue-100: #e6effb;
  --blue-050: #f3f7fd;
  --brass-600: #a8801d;
  --brass-500: #c89a2b;
  --brass-100: #f7edd4;
  --teal-700: #0b6570;
  --teal-600: #0f7f8c;
  --teal-100: #e0f2f4;

  /* Neutrals */
  --ink: #16202f;
  --ink-2: #445268;
  --ink-3: #6b7891;
  --line: #dfe4ec;
  --line-2: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: #eef2f8;

  /* Status */
  --success: #1a7f4b;
  --success-bg: #e6f4ec;
  --danger: #b3261e;
  --danger-bg: #fdeceb;
  --warn: #8a5a00;
  --warn-bg: #fdf2dc;

  /* Type
     Sizes are the agreed desktop values; each clamp scales down for small
     screens so a 64px hero does not overflow a 375px phone. */
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Roughly 12% under the spec maximums: the full scale read too large in
     situ, particularly card headings. Ratios between levels are unchanged. */
  --fs-hero:    clamp(2.3rem,  1.5rem  + 3.6vw,  3.5rem);   /* 37 -> 56px */
  --fs-h1:      clamp(2rem,    1.45rem + 2.5vw,  3.06rem);  /* 32 -> 49px */
  --fs-h2:      clamp(1.7rem,  1.3rem  + 1.7vw,  2.4rem);   /* 27 -> 38px */
  --fs-h3:      clamp(1.35rem, 1.15rem + 0.9vw,  1.85rem);  /* 22 -> 30px */
  --fs-h4:      clamp(1.18rem, 1.08rem + 0.5vw,  1.5rem);   /* 19 -> 24px */
  --fs-lead:    clamp(1.06rem, 1rem    + 0.3vw, 1.25rem);   /* 17 -> 20px */
  --fs-body:    clamp(1rem,    0.95rem + 0.22vw, 1.125rem); /* 16 -> 18px */
  --fs-small:   1rem;                                       /* 16px */
  --fs-caption: 0.875rem;                                   /* 14px */

  /* Weights */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Letter spacing */
  --ls-heading: -0.02em;
  --ls-button:   0.02em;

  /* Legacy step aliases, kept so existing component rules resolve. */
  --step--1: var(--fs-caption);
  --step-0:  var(--fs-body);
  --step-1:  var(--fs-lead);
  --step-2:  var(--fs-h4);
  --step-3:  var(--fs-h3);
  --step-4:  var(--fs-h2);
  --step-5:  var(--fs-h1);

  /* Space & shape */
  --gap: 1rem;
  --section-y: clamp(3rem, 7vw, 5.5rem);
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11, 20, 36, 0.06), 0 1px 3px rgba(11, 20, 36, 0.05);
  --shadow: 0 4px 12px rgba(11, 20, 36, 0.07), 0 2px 4px rgba(11, 20, 36, 0.04);
  --shadow-lg: 0 18px 40px rgba(11, 20, 36, 0.13);
  --container: 1200px;
  --header-h: 74px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  /* The reveal animations start off the right edge, so without this every
     page carries a horizontal scrollbar until they have run. Measured: this
     does not stop the sticky header pinning, despite the usual warning about
     overflow on the body, because an overflow set here propagates to the
     viewport rather than making the body its own scroll container. */
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 {
  margin: 0 0 0.5em;
  line-height: 1.18;
  letter-spacing: var(--ls-heading);
  color: var(--navy-800);
}
/* Page and section headings carry Bold; sub-headings step down to Semi Bold. */
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-lead); font-weight: var(--fw-semibold); }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-800); }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: 0.35em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

:focus-visible {
  outline: 3px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: 3px;
}

.icon { width: 24px; height: 24px; flex: none; }
.icon-sm { width: 18px; height: 18px; flex: none; }
.icon-lg { width: 32px; height: 32px; flex: none; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.15rem;
}
.container--narrow { max-width: 820px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.2rem, 5vw, 3.4rem); }
.section--alt { background: var(--surface-2); }
.section--ink { background: var(--navy-800); color: #e8edf6; }
.section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink a { color: #a9c8f4; }

.section-head { max-width: 720px; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-2); font-size: var(--step-1); margin-bottom: 0; }
.section--ink .section-head p { color: #b8c5da; }

.eyebrow {
  display: inline-block;
  margin-bottom: 0.7rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.section--ink .eyebrow { color: var(--brass-500); }

.grid { display: grid; gap: 1.15rem; }
.grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { display: grid; gap: 1.15rem; }

.stack > * + * { margin-top: 1rem; }
.cluster { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.text-center { text-align: center; }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-small); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 1.5rem; }
.mt-2 { margin-top: 1.5rem; }
.lead { font-size: var(--step-1); color: var(--ink-2); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 0.75rem; top: -100px; z-index: 200;
  background: var(--navy-800); color: #fff; padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--radius) var(--radius); font-weight: 600;
}
.skip-link:focus { top: 0; color: #fff; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.35rem;
  min-height: 46px;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-button);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s, border-color 0.16s, color 0.16s, transform 0.16s, box-shadow 0.16s;
}
.btn:active { transform: translateY(1px); }
.btn .icon, .btn .icon-sm { width: 18px; height: 18px; }

.btn--primary { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.btn--primary:hover { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }

.btn--navy { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.btn--navy:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }

.btn--accent { background: var(--brass-500); border-color: var(--brass-500); color: var(--navy-900); }
.btn--accent:hover { background: var(--brass-600); border-color: var(--brass-600); color: #fff; }

.btn--outline { background: transparent; border-color: var(--navy-600); color: var(--navy-800); }
.btn--outline:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

.btn--ghost-light { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.btn--ghost-light:hover { background: #fff; border-color: #fff; color: var(--navy-800); }

.btn--whatsapp { background: #1d9d55; border-color: #1d9d55; color: #fff; }
.btn--whatsapp:hover { background: #16803f; border-color: #16803f; color: #fff; }

.btn--sm { padding: 0.5rem 0.95rem; min-height: 38px; font-size: var(--step--1); }
.btn--lg { padding: 0.95rem 1.7rem; min-height: 54px; font-size: var(--step-1); }
.btn--block { display: flex; width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: var(--fw-semibold); text-decoration: none; color: var(--blue-700);
}
.link-arrow:hover { gap: 0.65rem; color: var(--navy-800); }
.link-arrow .icon-sm { transition: transform 0.16s; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.topbar {
  display: none;
  /* Pinned, not scrolled away. Letting it leave dragged the header up with
     it by the bar's own height on every downward scroll, which read as the
     header half hiding itself. The phone numbers live here, so keeping them
     on screen is worth the 38px. */
  position: sticky; top: 0; z-index: 101;
  background: var(--navy-900);
  color: #b7c4d8;
  font-size: var(--step--1);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; }
.topbar a { color: #cfdaea; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.topbar a:hover { color: #fff; }
.topbar__links { display: flex; gap: 1.35rem; align-items: center; margin-left: auto; }
/* Email plus two phone numbers plus WhatsApp fill the bar at the narrowest
   width it is shown at, so the tagline yields before anything can collide. */
@media (max-width: 1180px) { .topbar__tagline { display: none; } }

/* Pinned to the top of the viewport for the whole scroll.
   Nothing above this element may set overflow-x: hidden. That computes
   overflow-y to auto, which turns the ancestor into a scroll container,
   and a sticky child then pins to that container instead of the viewport,
   so the header creeps upward as the page scrolls. */
.site-header {
  position: sticky; top: var(--topbar-h); z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  /* No backdrop-filter here. A filtered element becomes the containing block
     for position:fixed descendants, which made the off-canvas drawer position
     against the header instead of the viewport and stretched the document
     sideways. It is reapplied at the desktop breakpoint, where the drawer is
     not fixed and the blur is actually visible. */
  border-bottom: 1px solid var(--line);
}
.site-header.is-stuck { box-shadow: var(--shadow); }
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; flex: none; }
/* Scales with the viewport so the wordmark stays legible on a phone without
   crowding out the nav toggle. */
.brand img { height: clamp(40px, 9.7vw, 51px); width: auto; }

.header__actions { display: flex; align-items: center; gap: 0.5rem; }
.header__cta { display: none; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--navy-800); cursor: pointer;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* Mobile drawer */
.site-nav {
  /* Covers the screen below the header, so the whole menu is on one surface
     rather than in a narrow panel with the page showing beside it. The header
     stays visible above it, which is where the close button is. */
  position: fixed; inset: var(--header-h) 0 0 0;
  width: 100%;
  /* Faded, not slid. A transform kept an off-screen copy of the menu in the
     layout, which is what put a horizontal scrollbar on every phone page, and
     a full-screen menu has nowhere to slide in from anyway. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  background: var(--surface);
  /* contain stops the scroll chaining to the page behind once the drawer
     reaches its end. */
  overflow-y: auto; overscroll-behavior: contain;
  /* The trailing padding clears the fixed quick-action bar and the phone's
     home indicator, so the last CTA can always be scrolled fully into view
     instead of ending up under them. */
  padding: 1.15rem 1.15rem calc(62px + 1.15rem + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-lg);
  z-index: 99;
}
.site-nav.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s;
}
/* Two fixed layers at the bottom of a phone screen fight each other, so the
   quick-action bar stands down while the drawer is open. */
.nav-scrim.is-open ~ .action-bar { display: none; }
.nav-scrim {
  position: fixed; inset: 0; background: rgba(11, 20, 36, 0.45);
  opacity: 0; visibility: hidden; transition: opacity 0.24s; z-index: 98;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

.nav-list { list-style: none; margin: 0; padding: 0; }
.site-nav .nav-list > li:first-child { border-top: 1px solid var(--line-2); }
.nav-list > li { border-bottom: 1px solid var(--line-2); }
.nav-list > li > a,
.nav-list__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  width: 100%; padding: 0.85rem 0.25rem;
  font: inherit; font-weight: var(--fw-medium); color: var(--navy-800);
  text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left;
}
.nav-list > li > a[aria-current="page"] { color: var(--blue-600); }
.nav-list__toggle .icon-sm { transition: transform 0.2s; }
.nav-list__toggle[aria-expanded="true"] .icon-sm { transform: rotate(180deg); }

/* Closed on a phone until the group is tapped, so the drawer opens as a short
   list of sections rather than every destination at once. */
.subnav {
  list-style: none; margin: 0 0 0.7rem; padding: 0 0 0 0.85rem;
  display: none;
}
.subnav.is-open { display: block; }
.subnav--wide.is-open {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0.5rem;
}
/* Names like "Shipping & Ship Management" need the whole width on a small
   phone; two columns there would wrap every second entry. */
@media (max-width: 420px) {
  .subnav--wide { grid-template-columns: 1fr; }
}
.subnav a {
  display: block; padding: 0.5rem 0.25rem;
  color: var(--ink-2); text-decoration: none; font-size: var(--step--1);
}
.subnav a:hover { color: var(--blue-700); }
.subnav__title {
  font-size: var(--step--1); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-3); padding: 0.6rem 0.25rem 0.2rem;
}

.nav-cta { display: grid; gap: 0.6rem; margin-top: 1.25rem; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(11, 20, 36, 0.9) 0%, rgba(20, 34, 60, 0.94) 55%, rgba(20, 34, 60, 0.98) 100%),
    radial-gradient(1200px 500px at 78% 12%, rgba(42, 118, 218, 0.5), transparent 62%),
    var(--navy-900);
  color: #fff;
  padding-block: clamp(3rem, 9vw, 6.5rem);
  overflow: hidden;
}
.hero::after {
  /* Faint chart-grid texture, reads as maritime/technical without an image. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 70% at 50% 30%, #000 20%, transparent 100%);
}
.hero > .container { position: relative; z-index: 1; }
.hero h1 {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  color: #fff;
  max-width: 16ch;
}
.hero__sub {
  font-size: var(--step-2); font-weight: var(--fw-medium);
  color: #dbe6f7; max-width: 54ch; line-height: 1.5;
  margin-bottom: 2.1rem;
}
.hero__paths { display: grid; gap: 0.7rem; margin-bottom: 1.75rem; }
/* Credential chips rather than a thin caption: at caption size these read as
   fine print, which undersells the only proof point above the fold. */
.hero__trust { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.hero__trust span {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.42rem 0.85rem;
  font-size: var(--step-0); font-weight: var(--fw-medium); color: #e4ecf9;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.hero__trust .icon-sm { color: var(--brass-500); flex: none; }

.page-hero {
  background:
    linear-gradient(180deg, rgba(11, 20, 36, 0.92), rgba(20, 34, 60, 0.97)),
    radial-gradient(900px 380px at 82% 0%, rgba(42, 118, 218, 0.45), transparent 60%),
    var(--navy-900);
  color: #fff;
  padding-block: clamp(2.4rem, 6vw, 4rem);
}
.page-hero h1 { color: #fff; margin-bottom: 0.55rem; }
.page-hero p { color: #c5d3e9; max-width: 68ch; font-size: var(--step-1); }
.page-hero .btn { margin-top: 1.35rem; }

.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  list-style: none; margin: 0 0 0.9rem; padding: 0;
  font-size: var(--step--1); color: #93a7c6;
}
.breadcrumb a { color: #b9cbe6; text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: #5f74a0; }

/* --------------------------------------------------------------------------
   7. Stat bar
   -------------------------------------------------------------------------- */
.statbar { background: var(--navy-700); color: #fff; }
.statbar__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: rgba(255, 255, 255, 0.12);
}
/* Five stats do not divide evenly into two columns, so the odd one out spans
   the full width rather than sitting next to an empty cell. */
.statbar__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.stat {
  background: var(--navy-700); padding: 1.4rem 0.9rem; text-align: center;
}
.stat__value {
  display: block; font-size: var(--step-3); font-weight: 800;
  letter-spacing: -0.03em; color: #fff; line-height: 1.1;
}
.stat__label {
  display: block; margin-top: 0.2rem;
  font-size: var(--step--1); color: #b6c6e0; letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
}
.card h3, .card h4 { margin-bottom: 0.45rem; }
.card p { color: var(--ink-2); }
.card--link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.card--link:hover { border-color: var(--blue-500); box-shadow: var(--shadow); transform: translateY(-2px); color: inherit; }
.card--flat { border-radius: var(--radius); }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 0.9rem;
  border-radius: 12px; background: var(--blue-050); color: var(--blue-600);
}
.card__foot { margin-top: auto; padding-top: 1rem; }

/* Three-path routing cards */
.path-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden;
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
}
.path-card:hover { border-color: var(--blue-500); box-shadow: var(--shadow); transform: translateY(-3px); }
.path-card__top { height: 5px; background: var(--blue-600); }
.path-card--seeker .path-card__top { background: var(--teal-600); }
.path-card--partner .path-card__top { background: var(--brass-500); }
.path-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.path-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; margin-bottom: 1rem;
  border-radius: 13px; background: var(--blue-050); color: var(--blue-600);
}
.path-card--seeker .path-card__icon { background: var(--teal-100); color: var(--teal-700); }
.path-card--partner .path-card__icon { background: var(--brass-100); color: var(--brass-600); }
.path-card p { flex: 1; }
.path-card .btn { margin-top: 1.15rem; }

/* Industry tiles */
.industry-tile {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); text-decoration: none; color: var(--navy-800);
  font-weight: 600; line-height: 1.35;
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
}
.industry-tile:hover { border-color: var(--blue-500); box-shadow: var(--shadow-sm); transform: translateY(-2px); color: var(--navy-800); }
.industry-tile .icon { color: var(--blue-600); }
.industry-tile--flagship { border-color: var(--brass-500); background: linear-gradient(180deg, #fffdf7, #fff); }
.industry-tile--flagship .icon { color: var(--brass-600); }
.industry-tile__flag {
  display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brass-600);
}

/* --------------------------------------------------------------------------
   9. Tags, chips, badges
   -------------------------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 0.32rem;
  padding: 0.24rem 0.66rem;
  border-radius: var(--radius-pill);
  font-size: 0.76rem; font-weight: var(--fw-semibold); letter-spacing: 0.02em;
  background: var(--surface-3); color: var(--ink-2); white-space: nowrap;
}
.tag--blue-collar  { background: var(--blue-100); color: var(--blue-700); }
.tag--white-collar { background: var(--surface-3); color: var(--navy-700); }
.tag--new-collar   { background: var(--teal-100); color: var(--teal-700); }
.tag--accent { background: var(--brass-100); color: var(--brass-600); }
.tag--success { background: var(--success-bg); color: var(--success); }
.tag--outline { background: transparent; border: 1px solid var(--line); color: var(--ink-2); }

.chip-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.chip-list li {
  margin: 0; padding: 0.4rem 0.85rem;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); font-size: var(--step--1); color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   10. Feature lists
   -------------------------------------------------------------------------- */
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li {
  display: flex; gap: 0.65rem; align-items: flex-start;
  margin-bottom: 0.7rem; color: var(--ink-2);
}
.check-list .icon-sm { color: var(--success); margin-top: 0.28em; }
.section--ink .check-list li { color: #c5d3e9; }
.section--ink .check-list .icon-sm { color: var(--brass-500); }

/* Numbered process timeline */
.process { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.process li {
  position: relative; counter-increment: step;
  padding: 0 0 1.75rem 3.35rem; margin: 0;
}
.process li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue-600); color: #fff; font-weight: 700; font-size: var(--step-0);
}
.process li::after {
  content: ""; position: absolute; left: 19.5px; top: 44px; bottom: 6px;
  width: 1.5px; background: var(--line);
}
.process li:last-child { padding-bottom: 0; }
.process li:last-child::after { display: none; }
.process h4 { margin-bottom: 0.25rem; }
.process p { color: var(--ink-2); margin-bottom: 0; }
.section--ink .process li::after { background: rgba(255, 255, 255, 0.18); }
.section--ink .process p { color: #b8c5da; }

/* --------------------------------------------------------------------------
   11. Job cards & vacancies
   -------------------------------------------------------------------------- */
.job-card {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); text-decoration: none; color: inherit;
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
}
.job-card:hover { border-color: var(--blue-500); box-shadow: var(--shadow); transform: translateY(-2px); color: inherit; }
.job-card__title { font-size: var(--step-1); font-weight: 700; color: var(--navy-800); margin: 0; }
.job-card__meta {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1rem;
  font-size: var(--step--1); color: var(--ink-2);
}
.job-card__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.job-card__meta .icon-sm { color: var(--ink-3); }
.job-card__salary { font-weight: 700; color: var(--navy-800); }
.job-card__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.6rem; padding-top: 0.75rem; border-top: 1px solid var(--line-2);
  font-size: var(--step--1); color: var(--ink-3);
}

.filters {
  padding: 1.15rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.filters__group + .filters__group { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.filters legend, .filters__label {
  display: block; margin-bottom: 0.4rem;
  font-size: var(--step--1); font-weight: 700; color: var(--navy-800);
}
.filters__actions { display: grid; gap: 0.55rem; margin-top: 1.15rem; }

.result-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 1.15rem;
}
.result-bar__count { font-weight: var(--fw-semibold); color: var(--navy-800); }

.active-filters { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1rem; }
.active-filters a {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.7rem; border-radius: var(--radius-pill);
  background: var(--blue-100); color: var(--blue-700);
  font-size: 0.78rem; font-weight: var(--fw-semibold); text-decoration: none;
}
.active-filters a:hover { background: var(--blue-600); color: #fff; }

.pagination { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 2rem; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding-inline: 0.7rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--navy-800); font-weight: 600;
}
.pagination a:hover { border-color: var(--blue-500); background: var(--blue-050); }
.pagination .is-current { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.pagination .is-disabled { color: var(--ink-3); background: var(--surface-2); }

.empty-state {
  padding: 3rem 1.5rem; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.empty-state .icon-lg { color: var(--ink-3); margin: 0 auto 0.85rem; }

/* Job detail */
.job-header { border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.job-facts {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.job-facts div { background: var(--surface); padding: 0.9rem 1.1rem; }
.job-facts dt {
  font-size: var(--step--1); font-weight: var(--fw-semibold); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.15rem;
}
.job-facts dd { margin: 0; font-weight: var(--fw-semibold); color: var(--navy-800); }

.sticky-panel { position: static; }

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */
.form-card {
  padding: 1.5rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.form-grid { display: grid; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field--full { grid-column: 1 / -1; }

label, .field > span:first-child {
  font-size: var(--step--1); font-weight: var(--fw-semibold); color: var(--navy-800);
}
.req { color: var(--danger); }
.hint { font-size: var(--step--1); color: var(--ink-3); }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], input[type="search"], input[type="password"],
select, textarea {
  width: 100%; padding: 0.68rem 0.85rem; min-height: 46px;
  font: inherit; font-size: var(--step-0); color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  transition: border-color 0.14s, box-shadow 0.14s;
  appearance: none;
}
textarea { min-height: 128px; resize: vertical; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23445268' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 18px;
  padding-right: 2.4rem;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(42, 118, 218, 0.18);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--danger); background: var(--danger-bg);
}
input[type="file"] {
  width: 100%; padding: 0.6rem; font-size: var(--step--1);
  border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--surface-2);
}
input[type="file"]::file-selector-button {
  margin-right: 0.75rem; padding: 0.45rem 0.9rem;
  border: 0; border-radius: 6px; background: var(--navy-800); color: #fff;
  font: inherit; font-size: var(--step--1); font-weight: 600; cursor: pointer;
}

.checkbox, .radio {
  display: flex; gap: 0.6rem; align-items: flex-start;
  font-size: var(--step--1); font-weight: 500; color: var(--ink-2);
  cursor: pointer;
}
.checkbox input, .radio input {
  width: 19px; height: 19px; margin: 0.18em 0 0; flex: none; accent-color: var(--blue-600);
}
.checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }

.field-error {
  display: block; font-size: var(--step--1); font-weight: 600; color: var(--danger);
}

/* Phone field country selector (intl-tel-input). The library ships its own
   stylesheet; these rules only make it sit in our fields rather than beside
   them. Everything here is a variable the library exposes, except the
   full-width wrapper, which it cannot know about. */
.iti { width: 100%; }
.iti,
.iti__country-container { --iti-border-color: var(--line); }
.iti {
  --iti-arrow-color: var(--ink-3);
  --iti-hover-color: var(--surface-2);
  --iti-dropdown-bg: var(--surface);
  --iti-text-gray: var(--ink-3);
  --iti-border-gray: var(--line);
}
/* The country button sits inside the input, so it must not paint its own
   border on top of ours or the field reads as two controls. */
.iti--separate-dial-code .iti__selected-country-primary { background: transparent; }
.iti__selected-country { border-radius: var(--radius) 0 0 var(--radius); }
.iti__selected-country:focus-visible {
  outline: 2px solid var(--blue-500); outline-offset: -2px;
}
/* The site-wide input rule above is an attribute selector, so it outranks the
   library's plain class and was overriding the search box: the border reset
   and the left padding that clears the magnifying glass both lost. Scoping to
   the wrapper wins on specificity without naming the input's type, which the
   library has changed before, and reuses its own spacing variables so the
   icon stays clear if it changes them again. */
.iti__search-input-wrapper .iti__search-input {
  padding: 10px 0.85rem;
  padding-left: calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal));
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--step--1);
}
.iti__search-input-wrapper .iti__search-input:focus { outline: none; box-shadow: none; }
.iti__dropdown-content {
  border-radius: var(--radius); border: 1.5px solid var(--line); box-shadow: var(--shadow);
}
/* An invalid field is marked on the input, so carry the colour to the wrapper
   the library draws around it. */
.iti:has(input[aria-invalid="true"]) .iti__selected-country { background: var(--danger-bg); }

.alert {
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 0.95rem 1.15rem; margin-bottom: 1.25rem;
  border: 1px solid; border-radius: var(--radius); font-size: var(--step--1);
}
.alert p { margin-bottom: 0; }
.alert .icon-sm { margin-top: 0.15em; flex: none; }
.alert--error { background: var(--danger-bg); border-color: #f3c2be; color: #7c1d17; }
.alert--success { background: var(--success-bg); border-color: #b9dfc8; color: #0f5c35; }
.alert--info { background: var(--blue-050); border-color: #cfe0f7; color: var(--navy-700); }
.alert--warn { background: var(--warn-bg); border-color: #ecd39a; color: #6d4700; }

/* Honeypot, hidden from people, visible to naive bots */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Search bar (job seekers / vacancies) */
.searchbar { display: grid; gap: 0.6rem; padding: 0; }
.searchbar input, .searchbar select { min-height: 50px; }

/* --------------------------------------------------------------------------
   13. Notices, anti-fraud, cross-audience redirects
   -------------------------------------------------------------------------- */
.notice {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2);
}
.notice__icon { flex: none; color: var(--blue-600); }
.notice p { margin-bottom: 0; font-size: var(--step--1); color: var(--ink-2); }
.notice strong { color: var(--navy-800); }
.notice--fraud { background: var(--warn-bg); border-color: #ecd39a; }
.notice--fraud .notice__icon { color: var(--warn); }
.notice--fraud p { color: #6d4700; }

/* --------------------------------------------------------------------------
   14. Testimonials, case studies, logos
   -------------------------------------------------------------------------- */
.quote-card {
  /* A figure carries a UA default of margin: 1em 40px. Unreset, that put 40px
     of dead space down each side of every quote, which is what made the
     testimonial row look like three narrow cards adrift in the section. */
  margin: 0;
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: 1.5rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
}
.quote-card .icon-lg { color: var(--brass-500); }
.quote-card blockquote { margin: 0; font-size: var(--step-1); line-height: 1.5; color: var(--ink); }
/* No margin-top:auto here. Slider slides and grid cells both stretch to the
   tallest card, and pushing the attribution to the bottom left a large hole
   under every short quote. Any slack now collects at the foot of the card. */
.quote-card figcaption { font-size: var(--step--1); color: var(--ink-2); line-height: 1.45; }
.quote-card figcaption strong { display: block; color: var(--navy-800); font-size: var(--step-0); }
.section--ink .quote-card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); }
.section--ink .quote-card blockquote { color: #edf2fa; }
.section--ink .quote-card figcaption { color: #b8c5da; }
.section--ink .quote-card figcaption strong { color: #fff; }

.case-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
}
.case-card:hover { border-color: var(--blue-500); box-shadow: var(--shadow); transform: translateY(-2px); color: inherit; }
.case-card__body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.case-metrics { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0; }
.case-metrics div { min-width: 0; }
.case-metrics dt { font-size: var(--step-2); font-weight: 800; color: var(--blue-600); letter-spacing: -0.02em; }
.case-metrics dd { margin: 0; font-size: var(--step--1); color: var(--ink-2); }

.cert-band { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.cert {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.cert strong { font-size: var(--step-0); color: var(--navy-800); }
.cert span { font-size: 0.76rem; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   15. World map / network
   -------------------------------------------------------------------------- */
.network {
  display: grid; gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
}
.network__col h4 { display: flex; align-items: center; gap: 0.5rem; font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.08em; }
.network__col h4 .icon-sm { color: var(--brass-500); }
.network__list { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 0; padding: 0; }
.network__list li { margin: 0; }
.network__list a {
  display: inline-block; padding: 0.36rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-pill);
  color: #dbe5f4; font-size: var(--step--1); text-decoration: none;
}
.network__list a:hover { background: #fff; border-color: #fff; color: var(--navy-800); }

/* --------------------------------------------------------------------------
   16. Blog
   -------------------------------------------------------------------------- */
.post-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
}
.post-card:hover { border-color: var(--blue-500); box-shadow: var(--shadow); transform: translateY(-2px); color: inherit; }
.post-card__thumb {
  height: 6px;
  background: linear-gradient(90deg, var(--blue-600), var(--teal-600));
}
.post-card__body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; }
.post-card__meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem;
  font-size: var(--step--1); color: var(--ink-3); margin-bottom: 0.6rem;
}
.post-card h3 { font-size: var(--step-1); }
.post-card p { flex: 1; }

.prose { max-width: 72ch; }
.prose h2 { font-size: var(--step-2); margin-top: 2rem; }
.prose h3 { font-size: var(--step-1); margin-top: 1.5rem; }
.prose ul, .prose ol { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   17. Accordion (FAQs)
   -------------------------------------------------------------------------- */
.accordion { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.accordion details + details { border-top: 1px solid var(--line); }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.25rem;
  font-weight: var(--fw-semibold); color: var(--navy-800); cursor: pointer; list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translateY(-2px); transition: transform 0.2s;
}
.accordion details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.accordion summary:hover { background: var(--surface-2); }
.accordion__body { padding: 0 1.25rem 1.25rem; color: var(--ink-2); }
.accordion__body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   18. Tables
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--step--1); min-width: 560px; }
table.data th, table.data td { padding: 0.85rem 1.05rem; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.data th { background: var(--surface-2); font-weight: 700; color: var(--navy-800); white-space: nowrap; }
table.data tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   19. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background:
    linear-gradient(180deg, rgba(11, 20, 36, 0.94), rgba(20, 34, 60, 0.98)),
    radial-gradient(800px 320px at 20% 0%, rgba(200, 154, 43, 0.32), transparent 62%),
    var(--navy-900);
  color: #fff; text-align: center;
}
.cta-band h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.cta-band p { color: #c5d3e9; max-width: 60ch; margin-inline: auto; }
.cta-band__actions { display: grid; gap: 0.65rem; margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: #97a7c0; font-size: var(--step--1); }
.site-footer h4 {
  color: #fff; font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: 0.9rem;
}
.site-footer h5 {
  color: #fff; font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.02em; margin-bottom: 0.75rem;
}

.footer__top { display: grid; gap: 2.5rem; padding-block: clamp(2.5rem, 6vw, 4rem); }
.footer__cols { display: grid; gap: 2rem; }

/* Brand block */
.footer__logo { height: 46px; width: auto; margin-bottom: 1rem; }
.footer__pitch { max-width: 42ch; margin: 0 0 1.25rem; line-height: 1.65; }

.footer__assurance { list-style: none; margin: 0 0 1.35rem; padding: 0; display: grid; gap: 0.6rem; }
.footer__assurance li { display: flex; gap: 0.6rem; align-items: flex-start; line-height: 1.5; }
.footer__assurance .icon-sm { color: var(--brass-500); flex: none; margin-top: 0.18em; }

.footer__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.6rem; }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: #b3c1d6; background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background-color 0.16s, color 0.16s, border-color 0.16s;
}
.footer__social a:hover, .footer__social a:focus-visible {
  background: var(--brass-500); border-color: var(--brass-500); color: var(--navy-900);
}

.footer__cta { margin-top: 1.1rem; }

/* Directory rows */
.footer__directory {
  display: grid; gap: 1.75rem;
  padding-block: 1.75rem; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__inline {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem;
}
.footer__inline a {
  display: inline-block; padding: 0.28rem 0.65rem;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12);
  color: #b3c1d6; text-decoration: none; font-size: 0.82rem; line-height: 1.5;
  transition: background-color 0.16s, color 0.16s, border-color 0.16s;
}
.footer__inline a:hover, .footer__inline a:focus-visible {
  background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.28); color: #fff;
}
.footer__inline .footer__more {
  border-color: rgba(200, 154, 43, 0.45); color: var(--brass-500);
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.footer__inline .footer__more:hover { background: var(--brass-500); color: var(--navy-900); border-color: var(--brass-500); }

.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 0.5rem; }
.footer-list a { color: #b3c1d6; text-decoration: none; }
.footer-list a:hover { color: #fff; text-decoration: underline; }
.footer__contact li { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.7rem; }
.footer__contact .icon-sm { color: var(--brass-500); margin-top: 0.2em; }
.footer__legal {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.35rem;
  align-items: center; justify-content: space-between;
  padding-block: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__legal nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; }
.footer__legal a { color: #97a7c0; text-decoration: none; }
.footer__legal a:hover { color: #fff; }

/* Persistent quick actions (blueprint §13).
   One component, two shapes: a bar across the bottom of a phone, a rail on the
   right edge from the desktop breakpoint up. The desktop rail is the reason
   each item carries two labels, a short one for the bar and a longer one that
   is revealed as the rail expands. */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  /* minmax(0,...) not 1fr: a grid track will not shrink below its content,
     so the longest label was pushing the fourth action off a 390px screen. */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--navy-800); border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-bottom: env(safe-area-inset-bottom);
}
.action-bar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.2rem; padding: 0.6rem 0.25rem; min-width: 0;
  color: #fff; font-size: 0.7rem; font-weight: 600; text-decoration: none;
  text-align: center; line-height: 1.2;
}
.action-bar .icon-sm { color: currentColor; flex: none; }

/* One colour each. Four actions sharing a background were told apart only by
   reading four small labels, which is what a quick action bar is supposed to
   save you from. WhatsApp green and the brand brass are fixed; the other
   two are spaced around them. */
.action-bar__item--call    { background: var(--teal-600); }
.action-bar__item--wa      { background: #1d9d55; }
.action-bar__item--apply   { background: var(--brass-500); color: var(--navy-900); }
.action-bar__item--mail    { background: var(--blue-600); }

.action-bar__item--call:hover,    .action-bar__item--call:focus-visible    { background: var(--teal-700); color: #fff; }
.action-bar__item--wa:hover,      .action-bar__item--wa:focus-visible      { background: #16803f; color: #fff; }
.action-bar__item--apply:hover,   .action-bar__item--apply:focus-visible   { background: var(--brass-600); color: #fff; }
.action-bar__item--mail:hover,    .action-bar__item--mail:focus-visible    { background: var(--blue-700); color: #fff; }
/* Only one label shows at a time; which one depends on the shape. */
.action-bar__wide { display: none; }
body { padding-bottom: 62px; }

/* Back to top. Hidden until there is enough page behind you for it to be
   worth the tap, and it clears the action bar rather than sitting on it. */
.to-top {
  position: fixed; right: 0.85rem; z-index: 96;
  bottom: calc(62px + env(safe-area-inset-bottom) + 0.85rem);
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%;
  background: var(--navy-900); color: #fff; cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: background 0.16s, transform 0.16s;
}
.to-top:hover,
.to-top:focus-visible { background: var(--brass-500); color: var(--navy-900); transform: translateY(-2px); }
.to-top .icon-sm { color: currentColor; }

/* --------------------------------------------------------------------------
   21. Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__paths { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Link columns pair up before the brand block moves alongside them. */
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band__actions { grid-auto-flow: column; justify-content: center; }
  /* Six tracks rather than three, so five stats fill two complete rows:
     three tiles of two tracks, then two tiles of three. */
  .statbar__grid { grid-template-columns: repeat(6, 1fr); }
  .statbar__grid > * { grid-column: span 2; }
  .statbar__grid > :nth-child(4),
  .statbar__grid > :nth-child(5):last-child { grid-column: span 3; }
  .filters__actions { grid-auto-flow: column; }
  .searchbar { grid-template-columns: 2fr 1fr auto; }
}

@media (min-width: 900px) {
  :root { --header-h: 84px; --topbar-h: 38px; }
  .brand img { height: 56px; }

  .topbar { display: block; }
  body { padding-bottom: 0; }

  /* From here up the bar becomes a rail on the right edge: collapsed to its
     icons, expanding on hover or keyboard focus to show the full label and,
     on the calling action, the number itself. */
  .action-bar {
    left: auto; right: 0; bottom: auto; top: 50%;
    transform: translateY(-50%);
    grid-template-columns: none;
    background: none; border-top: 0;
    padding-bottom: 0;
    display: grid; gap: 2px;
  }
  .action-bar__item {
    flex-direction: row; justify-content: flex-start; gap: 0;
    padding: 0.85rem 1rem; white-space: nowrap;
    font-size: var(--step--1);
    border-radius: var(--radius) 0 0 var(--radius);
    color: #fff;
    box-shadow: var(--shadow);
    transition: background 0.16s;
  }
  .action-bar__item + .action-bar__item { border-left: 0; }
  /* The label, not the button, is what collapses. Sizing the button instead
     leaves it clipping the label mid-word at whatever width was guessed. */
  .action-bar__wide {
    display: inline-block; max-width: 0; margin-left: 0; overflow: hidden;
    transition: max-width 0.26s ease, margin-left 0.26s ease;
  }
  .action-bar__item:hover .action-bar__wide,
  .action-bar__item:focus-visible .action-bar__wide { max-width: 14rem; margin-left: 0.65rem; }
  /* Swap to the longer label, which is what the extra width is for. */
  .action-bar__label { display: none; }
  .action-bar__wide { display: inline; }

  .to-top { right: 1.5rem; bottom: 1.5rem; width: 48px; height: 48px; }

  .nav-toggle { display: none; }
  .nav-scrim { display: none; }
  .header__cta { display: inline-flex; }

  /* Safe here: the drawer is not fixed at this width, so the header can be
     a containing block without stretching anything. */
  .site-header { backdrop-filter: saturate(180%) blur(8px); }

  .site-nav {
    position: static; width: auto; overflow: visible;
    padding: 0; border: 0; box-shadow: none; background: none;
    opacity: 1; visibility: visible; transition: none;
  }
  .nav-list { display: flex; align-items: center; gap: 0.15rem; }
  .nav-list > li { border: 0; position: relative; }
  .nav-list > li > a,
  .nav-list__toggle {
    padding: 0.55rem 0.7rem; border-radius: var(--radius);
    font-size: 0.94rem; white-space: nowrap;
  }
  .nav-list > li > a:hover,
  .nav-list__toggle:hover { background: var(--surface-2); color: var(--blue-700); }
  .nav-list > li > a[aria-current="page"] { background: var(--blue-050); }

  /* Desktop dropdown */
  .subnav {
    position: absolute; top: calc(100% + 6px); left: 0;
    display: block; visibility: hidden; opacity: 0;
    transform: translateY(-6px); transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
    min-width: 270px; max-height: min(70vh, 520px); overflow-y: auto;
    padding: 0.6rem; margin: 0;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  }
  .subnav.is-open,
  .nav-list > li:hover > .subnav,
  .nav-list > li:focus-within > .subnav {
    visibility: visible; opacity: 1; transform: translateY(0);
  }
  .subnav--wide { min-width: 520px; columns: 2; column-gap: 0.6rem; }
  .subnav a { padding: 0.45rem 0.7rem; border-radius: 7px; break-inside: avoid; }
  .subnav a:hover { background: var(--blue-050); }
  .subnav__title { padding: 0.4rem 0.7rem 0.15rem; break-inside: avoid; }
  .nav-cta { display: none; }

  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* One row of five, so the spans set at the narrower breakpoints are undone. */
  .statbar__grid { grid-template-columns: repeat(5, 1fr); }
  .statbar__grid > *,
  .statbar__grid > :nth-child(4),
  .statbar__grid > :nth-child(5):last-child { grid-column: auto; }

  .split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--form { grid-template-columns: 0.9fr 1.1fr; }
  .with-sidebar { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 2rem; align-items: start; }
  .with-sidebar--right { grid-template-columns: minmax(0, 1fr) 330px; }

  .network { grid-template-columns: 1fr 1fr; gap: 2rem; }
  /* Brand block on the left, the three link columns to its right. */
  .footer__top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 2fr); gap: 3.5rem; }
  .footer__cols { grid-template-columns: 1fr 1fr 1.15fr; gap: 2.5rem; }
  .footer__directory { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }

  .sticky-panel { position: sticky; top: calc(var(--header-h) + 1.25rem); }
  .checkbox-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1120px) {
  .grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   22. Photography
   ========================================================================== */

/* Fixed-ratio box so a slow image never causes layout shift. */
.media {
  position: relative;
  overflow: hidden;
  background: var(--surface-3);
  aspect-ratio: 3 / 2;
}
.media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.media--wide    { aspect-ratio: 16 / 9; }
.media--square  { aspect-ratio: 1 / 1; }
.media--tall    { aspect-ratio: 4 / 5; }
.media--rounded { border-radius: var(--radius-lg); }

/* Zoom on hover, but only where a pointer actually exists. */
@media (hover: hover) {
  .card--link:hover .media img,
  .case-card:hover .media img,
  .post-card:hover .media img,
  .industry-card:hover .media img { transform: scale(1.06); }
}

/* Hero with a photographic background */
.hero--photo {
  background: var(--navy-900);
  padding-block: clamp(3.5rem, 10vw, 7rem);
}
.hero__bg {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Slight overscale gives the parallax translate somewhere to go. */
  transform: scale(1.12);
}
/* Dark enough on the left for white text to pass contrast, light enough on the
   right that the photograph is actually visible. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(11, 20, 36, 0.92) 0%, rgba(11, 20, 36, 0.72) 38%, rgba(11, 20, 36, 0.2) 78%, rgba(11, 20, 36, 0.12) 100%),
    linear-gradient(180deg, rgba(11, 20, 36, 0.55) 0%, transparent 28%, rgba(11, 20, 36, 0.6) 100%);
}
/* The chart-grid texture is already carried by the photograph here. */
.hero--photo::after { display: none; }
.hero--photo > .container { position: relative; z-index: 3; }

/* Industry card with photo */
.industry-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.industry-card:hover {
  border-color: var(--blue-500); box-shadow: var(--shadow-lg);
  transform: translateY(-4px); color: inherit;
}
.industry-card__media { position: relative; }
.industry-card .media { aspect-ratio: 16 / 10; }
.industry-card__body {
  display: flex; flex-direction: column; flex: 1;
  padding: 1.15rem 1.25rem 1.35rem;
}
.industry-card__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
.industry-card__head .icon { width: 22px; height: 22px; color: var(--blue-600); }
.industry-card h3 { font-size: var(--fs-lead); margin: 0; }
.industry-card p { font-size: var(--fs-caption); color: var(--ink-2); margin: 0; }
.industry-card__foot {
  margin-top: auto; padding-top: 0.9rem;
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--blue-700);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.industry-card__foot .icon-sm { transition: transform 0.18s; }
.industry-card:hover .industry-card__foot .icon-sm { transform: translateX(4px); }

/* Flagship industry gets a brass ribbon */
.industry-card--flagship { border-color: var(--brass-500); }
.industry-card__ribbon {
  position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2;
  padding: 0.24rem 0.66rem; border-radius: var(--radius-pill);
  background: var(--brass-500); color: var(--navy-900);
  font-size: 0.7rem; font-weight: var(--fw-bold);
  letter-spacing: 0.08em; text-transform: uppercase;
}
/* Region label on country cards: same shape, but it is a category, not an
   accolade, so it must not compete with the brass flagship ribbon. */
.industry-card__ribbon--muted {
  background: rgba(11, 20, 36, 0.78); color: #fff;
  font-weight: var(--fw-semibold); letter-spacing: 0.06em;
  backdrop-filter: blur(3px);
}

/* Media header on case and post cards */
.case-card .media, .post-card .media { aspect-ratio: 16 / 9; }
.post-card__thumb { display: none; }

/* Photo header on the three routing cards. The accent bar sits over the image
   so the colour coding still reads at a glance. */
.path-card__media { position: relative; }
.path-card__media .media { aspect-ratio: 16 / 10; }
.path-card__media .path-card__top {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
}
.path-card__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 45%, rgba(11, 20, 36, 0.55) 100%);
}
@media (hover: hover) {
  .path-card:hover .media img { transform: scale(1.06); }
}

/* Industry overflow chips, for the industries that do not get a photo card. */
.industry-more {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  list-style: none; margin: 1.15rem 0 0; padding: 0;
}
.industry-more a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
  color: var(--ink-2); text-decoration: none;
  transition: border-color 0.16s, color 0.16s, transform 0.16s;
}
.industry-more a:hover {
  border-color: var(--blue-500); color: var(--navy-800); transform: translateY(-2px);
}
.industry-more .icon-sm { color: var(--blue-600); }

/* Split blocks pairing copy with a photograph */
.figure-stack { position: relative; }
.figure-stack .media { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.figure-stack__badge {
  position: absolute; right: -0.5rem; bottom: -1.25rem; z-index: 2;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--navy-800); color: #fff;
  box-shadow: var(--shadow-lg);
  max-width: 15rem;
}
.figure-stack__badge strong {
  display: block; font-size: var(--fs-h4); font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-heading); color: var(--brass-500);
}
.figure-stack__badge span { font-size: var(--fs-caption); color: #b8c5da; }

/* ==========================================================================
   23. How it works
   ========================================================================== */
.how {
  background:
    linear-gradient(180deg, rgba(11, 20, 36, 0.96), rgba(20, 34, 60, 0.99)),
    var(--navy-900);
  color: #e8edf6;
  position: relative;
  overflow: hidden;
}
.how::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(75% 60% at 50% 40%, #000 10%, transparent 100%);
}
.how > .container { position: relative; z-index: 1; }
.how h2, .how h3, .how h4 { color: #fff; }

/* Segmented switch between the two journeys */
.how-switch {
  display: inline-flex; padding: 0.3rem; margin-bottom: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
}
.how-switch button {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 1.25rem; min-height: 44px;
  border: 0; border-radius: var(--radius-pill);
  background: transparent; color: #c5d3e9;
  font: inherit; font-size: var(--fs-small); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button); cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.how-switch button .icon-sm { width: 17px; height: 17px; }
.how-switch button:hover { color: #fff; }
.how-switch button[aria-selected="true"] {
  background: var(--brass-500); color: var(--navy-900);
}

/* Step rail */
.how-panel[hidden] { display: none; }
.how-steps {
  display: grid; gap: 1.15rem;
  list-style: none; margin: 0; padding: 0;
  counter-reset: howstep;
}
.how-step {
  position: relative;
  counter-increment: howstep;
  padding: 1.4rem 1.25rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  margin: 0;
  transition: border-color 0.22s, background-color 0.22s, transform 0.22s;
}
.how-step:hover {
  border-color: rgba(200, 154, 43, 0.55);
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-3px);
}
.how-step::before {
  content: counter(howstep, decimal-leading-zero);
  display: block; margin-bottom: 0.7rem;
  font-size: var(--fs-h3); font-weight: var(--fw-extrabold);
  line-height: 1; letter-spacing: var(--ls-heading);
  color: var(--brass-500);
}
.how-step h4 { font-size: var(--fs-lead); margin-bottom: 0.35rem; }
.how-step p { font-size: var(--fs-caption); color: #b8c5da; margin: 0; }

/* The connector line only makes sense once the steps sit in a row. */
.how-steps::after { content: none; }

.how-foot {
  display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center;
  margin-top: 2rem;
}
.how-foot p { margin: 0; font-size: var(--fs-caption); color: #93a7c6; }

/* ==========================================================================
   24. Motion
   ========================================================================== */

/* Scroll reveal. Everything here is scoped to .js: without scripting the
   content is simply visible, never stuck at opacity 0 with nothing to reveal it. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal--left  { transform: translateX(-28px); }
.js .reveal--right { transform: translateX(28px); }
.js .reveal--scale { transform: scale(0.96); }
.js .reveal--left.is-visible,
.js .reveal--right.is-visible,
.js .reveal--scale.is-visible { transform: none; }

/* Stagger children of a grid as it comes into view. */
.js .reveal-group > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js .reveal-group.is-visible > * { opacity: 1; transform: none; }
.reveal-group.is-visible > *:nth-child(1) { transition-delay: 0.00s; }
.reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.07s; }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.21s; }
.reveal-group.is-visible > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-group.is-visible > *:nth-child(6) { transition-delay: 0.35s; }
.reveal-group.is-visible > *:nth-child(7) { transition-delay: 0.42s; }
.reveal-group.is-visible > *:nth-child(8) { transition-delay: 0.49s; }
.reveal-group.is-visible > *:nth-child(n + 9) { transition-delay: 0.55s; }

/* Page loader: a thin progress bar rather than a blocking splash screen. */
.page-loader {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 300; pointer-events: none;
  background: transparent;
}
.page-loader span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blue-500), var(--brass-500));
  transition: width 0.3s ease, opacity 0.4s ease 0.2s;
}
.page-loader.is-done span { width: 100%; opacity: 0; }

/* Testimonial slider */
.slider { position: relative; }
.slider__viewport { overflow: hidden; }
.slider__track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* A small gutter so neighbouring cards do not touch. The wide gap that used to
   be here came from the figure margin above, not from this. */
.slider__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding-inline: 0.55rem;
}
.slider__controls {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  margin-top: 1.1rem;
}
.slider__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); color: #fff;
  cursor: pointer; transition: background-color 0.18s, border-color 0.18s;
}
.slider__btn:hover { background: #fff; border-color: #fff; color: var(--navy-800); }
.slider__dots { display: flex; gap: 0.4rem; }
.slider__dot {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.32); cursor: pointer;
  transition: background-color 0.2s, width 0.2s;
}
.slider__dot[aria-current="true"] { background: var(--brass-500); width: 26px; border-radius: var(--radius-pill); }

/* Hero scroll cue */
.scroll-cue {
  display: none;
  position: absolute; left: 50%; bottom: 1.5rem; z-index: 3;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.55);
  /* Reset the button chrome, keep the affordance. */
  padding: 0.5rem; background: none; border: 0; cursor: pointer;
  transition: color 0.16s, transform 0.16s;
}
.scroll-cue:hover, .scroll-cue:focus-visible { color: #fff; transform: translateX(-50%) translateY(3px); }
.scroll-cue:focus-visible { outline: 2px solid var(--brass-500); outline-offset: 4px; border-radius: var(--radius); }
.scroll-cue span {
  display: block; width: 22px; height: 36px;
  border: 2px solid currentColor; border-radius: var(--radius-pill);
  position: relative;
}
.scroll-cue span::after {
  content: ""; position: absolute; left: 50%; top: 7px;
  width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px;
  background: currentColor;
  animation: cue 1.9s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { opacity: 0; transform: translateY(0); }
  30%      { opacity: 1; }
  70%      { opacity: 0; transform: translateY(10px); }
}

/* Lift on hover for the routing cards */
@media (hover: hover) {
  .path-card { transition: transform 0.24s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.24s, border-color 0.24s; }
  .path-card:hover { transform: translateY(-6px); }
  .stat { transition: background-color 0.25s; }
  .stat:hover { background: var(--navy-600); }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-group > * { opacity: 1 !important; transform: none !important; }
  .scroll-cue span::after { animation: none; }
  .hero__bg img { transform: none; }
}

/* --------------------------------------------------------------------------
   25. Breakpoints for the new components
   -------------------------------------------------------------------------- */
@media (min-width: 700px) {
  .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slider__slide { flex-basis: 50%; }
}

@media (min-width: 900px) {
  .scroll-cue { display: block; }
  .slider__slide { flex-basis: 33.3333%; }

  /* Five steps in a row, joined by a rule that runs behind them. */
  .how-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.9rem;
    position: relative;
  }
  /* Runs through the vertical centre of the step numbers: 1.4rem of card
     padding plus half the number's 1.85rem line box. */
  .how-steps::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 2.32rem; height: 2px;
    background: linear-gradient(90deg, rgba(200,154,43,0.55), rgba(255,255,255,0.12));
  }
  .how-step { background: rgba(11, 20, 36, 0.72); backdrop-filter: blur(2px); }
  .figure-stack__badge { right: -1.75rem; bottom: -1.75rem; }
}

/* ==========================================================================
   26. Photographic page heroes and split figures
   ========================================================================== */

/* Interior-page equivalent of .hero--photo. Shorter, and the scrim is heavier
   because breadcrumbs and body copy sit over it, not just a headline. */
.page-hero--photo {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  padding-block: clamp(2.8rem, 7vw, 5rem);
}
.page-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(11, 20, 36, 0.95) 0%, rgba(11, 20, 36, 0.82) 40%, rgba(11, 20, 36, 0.42) 100%),
    linear-gradient(180deg, rgba(11, 20, 36, 0.5) 0%, transparent 40%, rgba(11, 20, 36, 0.65) 100%);
}
.page-hero--photo > .container { position: relative; z-index: 2; }

/* Copy beside a photograph. The figure is ordered after the copy in the source
   so it reads second on mobile, where the words matter more than the picture. */
.media-split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.media-split .media { border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* A photo band used to break up long text pages. */
.photo-band {
  position: relative;
  min-height: clamp(220px, 34vw, 380px);
  overflow: hidden;
}
.photo-band img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.photo-band__caption {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end;
  min-height: inherit;
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
  color: #fff;
}
.photo-band::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11, 20, 36, 0.25) 0%, rgba(11, 20, 36, 0.85) 100%);
}
.photo-band__caption p {
  margin: 0; max-width: 46ch;
  font-size: var(--fs-lead); font-weight: var(--fw-medium);
  text-shadow: 0 1px 12px rgba(11, 20, 36, 0.6);
}

@media (min-width: 900px) {
  .media-split { grid-template-columns: 1fr 1fr; }
  .media-split--wide-copy { grid-template-columns: 1.15fr 0.85fr; }
  /* Put the figure first visually while keeping copy first in the source. */
  .media-split--figure-first > :last-child { order: -1; }
}

/* --------------------------------------------------------------------------
   27. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .action-bar, .topbar, .cta-band, .btn,
  .page-loader, .scroll-cue, .slider__controls { display: none !important; }
  body { padding: 0; color: #000; }
  .section { padding-block: 1rem; }
  .js .reveal, .js .reveal-group > * { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   23. Cookie consent
   -------------------------------------------------------------------------- */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px rgba(11, 20, 36, 0.14);
  padding: 1.1rem 1.15rem calc(1.1rem + env(safe-area-inset-bottom));
  animation: consent-in 0.28s ease both;
}
@keyframes consent-in { from { transform: translateY(100%); } to { transform: translateY(0); } }

.consent__inner {
  width: min(1180px, 100%); margin-inline: auto;
  display: grid; gap: 1rem; align-items: center;
}
.consent__title { font-size: var(--step-0); margin: 0 0 0.3rem; }
.consent__body p { margin: 0; font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; }
/* Equal weight on accept and reject: refusing must be no harder than agreeing. */
.consent__actions { display: grid; gap: 0.5rem; }
.consent__actions .btn { width: 100%; }

/* Preference dialog */
.consent-modal { position: fixed; inset: 0; z-index: 130; display: flex; }
.consent-modal[hidden] { display: none; }
.consent-modal__scrim { position: absolute; inset: 0; background: rgba(11, 20, 36, 0.55); }
.consent-modal__panel {
  position: relative; margin: auto;
  width: min(560px, calc(100% - 2rem)); max-height: min(86vh, 720px);
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.consent-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line);
}
.consent-modal__head h2 { margin: 0; font-size: var(--step-1); }
.consent-modal__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; flex: none;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink-2); cursor: pointer;
}
.consent-modal__close:hover { background: var(--surface-2); color: var(--ink); }
.consent-modal__body { padding: 1.25rem; overflow-y: auto; }
.consent-modal__body > p { font-size: var(--step--1); color: var(--ink-2); }
.consent-modal__foot {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--surface-2);
}

.consent-option { padding: 0.95rem 0; border-top: 1px solid var(--line-2); }
.consent-option:first-of-type { border-top: 0; }
.consent-option__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.consent-option__name { font-weight: var(--fw-semibold); color: var(--navy-800); }
.consent-option p { margin: 0.4rem 0 0; font-size: var(--step--1); color: var(--ink-2); line-height: 1.55; }

/* Toggle switch */
.switch { position: relative; flex: none; cursor: pointer; display: inline-flex; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track {
  width: 46px; height: 26px; border-radius: 999px;
  background: var(--line); border: 1px solid var(--line);
  transition: background-color 0.18s, border-color 0.18s;
}
.switch__track::after {
  content: ""; display: block;
  width: 20px; height: 20px; margin: 2px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(11, 20, 36, 0.28);
  transition: transform 0.18s;
}
.switch input:checked + .switch__track { background: var(--blue-600); border-color: var(--blue-600); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--blue-500); outline-offset: 2px; }

/* Footer "Cookie settings" is a button but must read as one of the legal links. */
.footer__linkbtn {
  padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; color: #97a7c0; text-decoration: none;
}
.footer__linkbtn:hover { color: #fff; text-decoration: underline; }

@media (min-width: 720px) {
  .consent__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 1.75rem; }
  .consent__actions { grid-auto-flow: column; align-items: center; }
  .consent__actions .btn { width: auto; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .consent { animation: none; }
  .switch__track, .switch__track::after { transition: none; }
}

/* --------------------------------------------------------------------------
   28. Placement verification result
   -------------------------------------------------------------------------- */
/* Reads as a document rather than a UI panel, because that is what people do
   with it: screenshot it, print it, forward it to a bank. The green edge is
   the only decoration, and it carries meaning. */
.verify-card {
  /* Wide enough for two columns of record, narrow enough to stay readable
     on a large monitor. */
  max-width: 62rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-left: 4px solid var(--success);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

.verify-card__head {
  display: flex; align-items: flex-start; gap: 0.9rem; flex-wrap: wrap;
  padding-bottom: 1rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--line-2);
}
.verify-card__head > div { flex: 1 1 14rem; }
.verify-card__head h2 { font-size: var(--fs-h4); margin: 0 0 0.15rem; }
.verify-card__head p { margin: 0; font-size: var(--step--1); color: var(--ink-2); }

.verify-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 50%; background: var(--success-bg); color: var(--success);
}

.verify-badge {
  align-self: center; flex: none;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  border: 1px solid;
}
.verify-badge--ok   { background: var(--success-bg); border-color: #b9dfc8; color: #0f5c35; }
.verify-badge--info { background: var(--blue-100);   border-color: #c2d8f4; color: var(--blue-700); }
.verify-badge--warn { background: var(--warn-bg);    border-color: #ecd6a4; color: var(--warn); }

.verify-card__meaning {
  font-size: var(--step--1); color: var(--ink-2); margin: 0 0 1.1rem;
}

/* Two columns once there is room, so a long record stays one screen. Each row
   is its own grid item, which keeps a label locked to its value when they
   wrap. */
.verify-list { display: grid; gap: 0.1rem 2rem; margin: 0; }
.verify-list > div {
  display: grid; grid-template-columns: 11rem 1fr; gap: 0.75rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--line-2);
}
.verify-list dt {
  font-size: var(--step--1); font-weight: var(--fw-semibold); color: var(--ink-3);
}
.verify-list dd { margin: 0; font-size: var(--step-0); color: var(--ink); }
.verify-list__note {
  font-size: var(--fs-caption); color: var(--ink-3); font-style: italic;
  margin-left: 0.35rem;
}

.verify-card__foot {
  margin: 1.1rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--line-2);
  font-size: var(--fs-caption); color: var(--ink-3);
}

/* Two columns once the card is wide enough that a single one would leave a
   long thin list of fifteen rows. */
@media (min-width: 860px) {
  .verify-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .verify-list > div { grid-template-columns: 1fr; gap: 0.1rem; }
}

@media print {
  /* Someone printing this wants the record, not the furniture. */
  .verify-card { box-shadow: none; border-color: #000; break-inside: avoid; }
}