/* ==========================================================================
   MedhaSofts Techno Solutions — Core Design System
   Brand: blue + white dominant, deep navy for dark surfaces.
   Motif: circuit nodes and connector lines, derived from the logo mark.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand-primary: #1455C0;
  --brand-accent: #3B82F6;
  --brand-navy: #0B2E68;
  --brand-cyan: #22D3EE;

  /* ---- Accent family -----------------------------------------------------
     Six hues for wayfinding. Each has a `-deep` partner for gradients on
     dark fills and an `-ink` variant measured at >=4.5:1 against white, for
     any text or small mark sitting on a light surface:
       blue 8.5 : teal 5.4 : emerald 5.5 : indigo 7.9 : violet 7.0 : amber 7.4
     The amber ink is deeper than its base: at #B45309 it measured exactly
     4.50 against the tinted surface, which is passing with no margin at all.
     Accents colour rules, eyebrows, icons and card edges. They are never
     used as a full-width slab -- that is what made the old design heavy. */
  --a-blue:    #1455C0;  --a-blue-deep:    #08265C;  --a-blue-ink:    #1148A3;
  --a-teal:    #0E7490;  --a-teal-deep:    #073544;  --a-teal-ink:    #0E7490;
  --a-emerald: #047857;  --a-emerald-deep: #02312A;  --a-emerald-ink: #047857;
  --a-indigo:  #4338CA;  --a-indigo-deep:  #201B5C;  --a-indigo-ink:  #4338CA;
  --a-violet:  #7E22CE;  --a-violet-deep:  #3B0764;  --a-violet-ink:  #7E22CE;
  --a-amber:   #B45309;  --a-amber-deep:   #4A2207;  --a-amber-ink:   #8A4107;

  /* Per-section accent. Set `--accent` on a section and its eyebrow, rule,
     icon tile and card edge follow it without any extra class. */
  --accent: var(--a-blue);
  --accent-deep: var(--a-blue-deep);
  --accent-ink: var(--a-blue-ink);

  /* Text */
  --text-primary: #10233F;
  --text-secondary: #4B5766;
  /* Small uppercase labels need 4.5:1; --brand-accent only reaches 3.68:1 on white */
  --label-accent: #1455C0;
  --text-on-dark: #E8F0FE;
  --text-on-dark-muted: #C2D4EE;

  /* Surfaces — light-first. A page may use at most one dark moment. */
  --white: #FFFFFF;
  --surface-0: #FFFFFF;
  --surface-1: #F7FAFF;
  --surface-2: #EDF3FC;
  --surface-tint: #E6EFFB;
  --bg-light: #F7FAFF;
  --bg-subtle: #EDF3FC;
  --border: #E4EBF5;
  --border-strong: #CBD8EA;

  /* Status */
  --success: #16A34A;
  --warning: #D97706;
  --error: #DC2626;

  /* Brand-tinted elevation */
  --shadow-xs: 0 1px 2px rgba(16, 35, 63, .06);
  --shadow-sm: 0 2px 8px rgba(16, 35, 63, .06);
  --shadow-md: 0 8px 24px rgba(16, 35, 63, .08);
  --shadow-lg: 0 20px 48px rgba(11, 46, 104, .12);
  --shadow-brand: 0 12px 32px rgba(20, 85, 192, .18);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Typography --------------------------------------------------------
     Two families, nine roles. JetBrains Mono was carrying the eyebrow labels
     at 12px uppercase — the most repeated text pattern on the site was also
     its least legible one — so labels moved to Inter and the mono face was
     dropped from content entirely (one fewer font request, too).
     Nothing in running copy now sits below 15px. */
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-label: var(--font-body);

  --text-xs: .8125rem;   /* 13px — eyebrows and pills only, never running copy */
  --text-sm: .9375rem;   /* 15px — smallest size used for real text */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.1875rem;  /* 19px — lead */
  --text-xl: 1.3125rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* Fluid display sizes — editorial, but reined in: the old scale pushed the
     homepage to 15 viewport-heights on its own. */
  --display-hero: clamp(2.35rem, 1.3rem + 3.2vw, 3.9rem);
  --display-section: clamp(1.9rem, 1.25rem + 2.3vw, 2.85rem);
  --display-sub: clamp(1.3rem, 1.1rem + .85vw, 1.75rem);
  --display-statement: clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem);

  /* Layout */
  --container: 1280px;
  --container-narrow: 900px;
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 76px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: .18s var(--ease);
  --t-base: .28s var(--ease);
  --t-slow: .5s var(--ease);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

input,
button,
textarea,
select { font: inherit; color: inherit; }

button { cursor: pointer; }

a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-navy); }

ul, ol { padding: 0; list-style: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.025em;
  text-wrap: balance;
}
/* Large display type needs tighter tracking to hold together optically */
/* ===================================================== THE TYPE SCALE ===
   Four steps for every heading on the site. Before this each stylesheet
   picked its own clamp: heroes ran 3.25rem to 5.9rem and section headings
   2.5rem to 4.2rem, so a heading's size depended on which file styled it.
   A rule may CHOOSE a step; it may not invent a number. */
:root {
  --t-hero:    clamp(2.05rem, 1.15rem + 3.3vw, 3.6rem);
  --t-display: clamp(1.86rem, 1.15rem + 2.5vw, 3rem);
  --t-h2:      clamp(1.68rem, 1.12rem + 1.9vw, 2.5rem);
  --t-h3:      clamp(1.14rem, 1.02rem + .46vw, 1.4rem);
}

h1 { letter-spacing: -.04em; line-height: 1.04; }
h2 { letter-spacing: -.032em; line-height: 1.08; }

p { text-wrap: pretty; }

::selection { background: var(--brand-accent); color: var(--white); }

/* Visible, brand-consistent focus for keyboard users */
:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--brand-navy);
  color: var(--white);
  padding: var(--space-3) var(--space-6);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: 600;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 0; color: var(--white); }

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

/* Rhythm pulled in roughly 30%. The old scale alone accounted for several
   thousand pixels of homepage on its own. */
.section { padding-block: clamp(48px, 5vw, 76px); }
.section--tight { padding-block: clamp(34px, 3.6vw, 52px); }
.section--light {
  background-color: var(--surface-1);
  background-image: linear-gradient(180deg, #FBFDFF 0%, var(--surface-1) 55%, var(--surface-2) 100%);
}
.section--tinted {
  background-color: var(--surface-2);
  background-image: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 100%);
}
.section--bordered { border-top: 1px solid var(--border); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-8); }

.grid { display: grid; gap: var(--space-6); }
/* Grid and flex children default to min-width:auto, which lets wide content
   (selects, long strings, SVGs) push a track past the viewport. */
.grid > *,
.split > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Asymmetric editorial splits */
.split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split--7-5 { grid-template-columns: 7fr 5fr; }
.split--5-7 { grid-template-columns: 5fr 7fr; }
.split--6-6 { grid-template-columns: 1fr 1fr; }
.split--top { align-items: start; }

/* --------------------------------------------------------------------------
   4. Signature motif: node eyebrow
   -------------------------------------------------------------------------- */
/* Inter 600 at 13px replaces 12px mono. The leading rule carries the section
   accent, so colour does the wayfinding the old node glyph was attempting. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--space-3);
}
.eyebrow::before {
  content: '';
  width: 22px; height: 3px;
  border-radius: 2px;
  background-color: currentColor;
  flex: none;
}
.eyebrow--on-dark { color: var(--brand-cyan); }

/* Section heading block */
.section-head { max-width: 760px; margin-bottom: clamp(26px, 3vw, 40px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head h2 { font-size: var(--display-section); }
.section-head p {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  color: var(--text-secondary);
}

.lead {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  color: var(--text-secondary);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px 26px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast),
              box-shadow var(--t-fast);
  white-space: nowrap;
}
.btn svg { flex: none; transition: transform var(--t-fast); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary {
  /* Solid fallback under the gradient: keeps the button measurable by contrast
     tooling (a gradient computes backgroundColor as transparent) and degrades
     safely if the gradient ever fails to paint. */
  background-color: var(--brand-primary);
  background-image: linear-gradient(135deg, #1A64DA 0%, var(--brand-primary) 48%, #0E47A6 100%);
  color: var(--white);
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover {
  background-color: #0D3F95;
  background-image: linear-gradient(135deg, var(--brand-primary) 0%, #0D3F95 50%, var(--brand-navy) 100%);
  color: var(--white);
  transform: translateY(-2px);
}

.btn--secondary {
  background: var(--white);
  color: var(--brand-navy);
  border-color: var(--border-strong);
}
.btn--secondary:hover {
  border-color: var(--brand-accent);
  color: var(--brand-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn--ghost { background: transparent; color: var(--brand-primary); padding-inline: 4px; }
.btn--ghost:hover { color: var(--brand-navy); }

.btn--on-dark {
  background: var(--white);
  color: var(--brand-navy);
}
.btn--on-dark:hover { background: var(--bg-subtle); color: var(--brand-navy); transform: translateY(-2px); }

.btn--outline-dark {
  background: rgba(5, 20, 48, .42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--white);
  border-color: rgba(255, 255, 255, .55);
}
.btn--outline-dark:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, .08);
  color: var(--white);
}

.btn--lg { padding: 16px 32px; font-size: var(--text-base); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --------------------------------------------------------------------------
   6. Status pills — honest labelling of product maturity
   -------------------------------------------------------------------------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid;
}
.status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.status--development {
  color: #6B3D02;
  background: #FFF7ED;
  border-color: #FCD9A8;
}
.status--planned {
  color: var(--brand-primary);
  background: var(--bg-subtle);
  border-color: #BFD6F7;
}
.status--available {
  color: #14803C;
  background: #F0FDF4;
  border-color: #BBF7D0;
}
.status--tbd {
  color: var(--text-secondary);
  background: var(--bg-light);
  border-color: var(--border);
}
/* On a deep navy band cyan clears 4.5:1 comfortably, but these pills also sit
   on the mid-blue industry bands, where the measured ratio fell to 3.91:1.
   A lighter cyan plus an opaque, darkened pill fill makes the pill carry its
   own contrast instead of depending on what happens to be behind it. */
.status--on-dark {
  color: #7FE9FB;
  background: rgba(3, 20, 46, .72);
  border-color: rgba(127, 233, 251, .38);
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 32px);
  transition: border-color var(--t-base), box-shadow var(--t-base),
              transform var(--t-base);
}
.card--hover:hover {
  border-color: var(--brand-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.card h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.card p { color: var(--text-secondary); font-size: var(--text-sm); }
.card--flush { padding: 0; overflow: hidden; }
.card--dark {
  background: var(--brand-navy);
  border-color: rgba(255, 255, 255, .12);
  color: var(--text-on-dark);
}
.card--dark h3 { color: var(--white); }
.card--dark p { color: var(--text-on-dark-muted); }

/* Icon tile built from the logo's rounded-triangle geometry */
.icon-tile {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background-color: var(--bg-subtle);
  background-image: linear-gradient(140deg, #E4EEFC 0%, var(--bg-subtle) 100%);
  color: var(--brand-primary);
  margin-bottom: var(--space-5);
  flex: none;
  transition: background var(--t-base), color var(--t-base);
}
.card--hover:hover .icon-tile { background: var(--brand-primary); color: var(--white); }
.icon-tile--dark { background: rgba(59, 130, 246, .16); color: var(--brand-cyan); }

/* Numbered capability rows */
.numbered { counter-reset: step; }
.numbered__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-top: 1px solid var(--border);
}
.numbered__item::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  color: var(--label-accent);
  padding-top: 4px;
}

/* Feature list with node bullets */
.feature-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.feature-list li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--brand-accent);
}
.feature-list--on-dark li { color: var(--text-on-dark-muted); }
.feature-list--on-dark li::before { border-color: var(--brand-cyan); }

/* --------------------------------------------------------------------------
   8. Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-xs);
}
.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand img { height: 38px; width: auto; }
/* Needs to out-specify `.brand img`, or the wordmark inherits the mark height */
.brand img.brand__word { height: 18px; width: auto; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--space-1); }
.nav__link {
  display: block;
  padding: 9px 11px;
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__link:hover { color: var(--brand-primary); background: var(--bg-light); }
.nav__link[aria-current="page"] { color: var(--brand-primary); font-weight: 600; }

.header__cta { flex: none; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  /* Flex with an explicit gap keeps the bars exactly 6px apart, which is what
     the ±6px close transform relies on to converge into an X. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-fast);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 112px);
  background:
    radial-gradient(900px 500px at 88% -5%, rgba(59, 130, 246, .12), transparent 62%),
    radial-gradient(600px 420px at 6% 12%, rgba(34, 211, 238, .08), transparent 60%),
    var(--white);
  overflow: hidden;
}
/* Blueprint hairline grid — engineering precision, not decoration */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(20, 85, 192, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 85, 192, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }

.hero h1 {
  font-size: var(--display-hero);
  letter-spacing: -.035em;
  margin-bottom: var(--space-6);
}
.hero__copy { max-width: 620px; }
.hero .lead { margin-bottom: var(--space-8); }

.hero__visual { width: 100%; height: auto; max-width: 620px; margin-inline: auto; }

/* ==========================================================================
   PHOTOGRAPHY
   Images carry the visual weight; SVG icons are supporting detail only.
   ========================================================================== */
.photo { display: block; }
.photo img { display: block; width: 100%; height: auto; }

/* Cover-crop containers: the <picture> wrapper must fill the box too, or the
   image's height:100% resolves against the wrapper's auto height. */
.hero__bg .photo,
.banner__media .photo,
.media-card__media .photo,
.collage__tile .photo { width: 100%; height: 100%; }

/* Rounded, elevated photo block */
.media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.media img { width: 100%; height: auto; }

.media-figure { margin: 0; }
.media-figure figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Photo-led card */
.media-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.media-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.media-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.card--hover:hover .media-card__media img { transform: scale(1.045); }
.media-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.media-card__body h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.media-card__body p { color: var(--text-secondary); font-size: var(--text-sm); flex: 1; }
.media-card__status { margin-bottom: var(--space-3); }
.media-card__link { margin-top: var(--space-5); }

/* Full-bleed cinematic banner with overlaid copy */
.banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(72px, 10vw, 140px);
  color: var(--white);
}
.banner__media { position: absolute; inset: 0; z-index: -2; }
.banner__media img { width: 100%; height: 100%; object-fit: cover; }
.banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
}
.banner--dark::after {
  background: linear-gradient(100deg,
    rgba(11, 46, 104, .94) 0%, rgba(11, 46, 104, .82) 46%,
    rgba(11, 46, 104, .42) 100%);
}
.banner--deep::after {
  background: linear-gradient(180deg,
    rgba(11, 46, 104, .70) 0%, rgba(11, 46, 104, .90) 100%);
}
.banner__inner { position: relative; z-index: 1; }
.banner h2 {
  color: var(--white);
  font-size: var(--display-section);
  max-width: 20ch;
  margin-bottom: var(--space-5);
}
.banner__body {
  color: var(--text-on-dark);
  font-size: var(--text-lg);
  max-width: 58ch;
  margin-bottom: var(--space-8);
}
.banner--center .banner__inner { text-align: center; }
.banner--center h2, .banner--center .banner__body { margin-inline: auto; }
.banner--center .btn-row { justify-content: center; }
.banner--center .eyebrow { justify-content: center; }

/* ==========================================================================
   CINEMATIC HERO — full-bleed image, offset editorial panel, floating UI
   ========================================================================== */
.hero-cinematic {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  padding-block: clamp(72px, 9vw, 128px) clamp(96px, 11vw, 168px);
  display: flex;
  align-items: center;
}
.hero-cinematic__bg { position: absolute; inset: 0; z-index: -2; }
.hero-cinematic__bg .photo,
.hero-cinematic__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Push the lit building right so the darker sky sits behind the copy column,
     rather than fighting it with an ever-denser scrim. */
  object-position: 72% 42%;
}

/* Dense behind the copy column, clearing toward the top-right so the
   photograph is actually visible rather than paid for and then hidden. */
.hero-cinematic::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* A true horizontal scrim: uniform density across the full height of the
       copy column, so text never lands on a bright patch of the photograph.
       A diagonal gradient fell off vertically and left the lead unreadable. */
    linear-gradient(to right, rgba(5, 20, 48, .94) 0%, rgba(5, 20, 48, .90) 46%,
                    rgba(8, 32, 74, .60) 66%, rgba(11, 46, 104, .24) 86%,
                    rgba(11, 46, 104, .14) 100%),
    linear-gradient(to top, rgba(5, 20, 48, .55) 0%, transparent 34%);
}

/* Single editorial column — the headline owns the hero */
.hero-cinematic__grid { width: 100%; max-width: 62ch; }

.hero-cinematic__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-cyan);
  margin-bottom: var(--space-6);
}
.hero-cinematic__kicker::before {
  content: '';
  width: 42px; height: 1px;
  background: currentColor;
  opacity: .7;
}

.hero-cinematic h1 {
  font-size: var(--display-hero);
  color: var(--white);
  margin-bottom: var(--space-5);
  max-width: none;
  text-shadow: 0 2px 28px rgba(5, 20, 48, .45);
}
.hero-cinematic h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--brand-cyan), #9CC6FF 60%, var(--white));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-cinematic__lead {
  font-size: clamp(1.0625rem, .98rem + .4vw, 1.3125rem);
  line-height: 1.65;
  color: #DCE8F9;
  max-width: 48ch;
  margin-bottom: var(--space-8);
  text-shadow: 0 1px 14px rgba(5, 20, 48, .6);
}

.hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.hero-strip span {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(232, 240, 253, .9);
  text-shadow: 0 1px 12px rgba(5, 20, 48, .7);
}

/* Product panel breaking the hero boundary, echoing the reference's
   floating card. Pulled up into the hero, pushing the next section down. */
.hero-showcase {
  position: relative;
  z-index: 3;
  margin-top: clamp(-140px, -11vw, -80px);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.hero-showcase .ui-mock { max-width: 1060px; margin-inline: auto; }
.hero-showcase__caption {
  max-width: 1060px;
  margin: var(--space-4) auto 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Product interface mockup — HTML/CSS, not an icon
   -------------------------------------------------------------------------- */
.ui-mock {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #0E1F3D;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 40px 90px rgba(3, 16, 40, .55), 0 2px 0 rgba(255, 255, 255, .06) inset;
  font-family: var(--font-body);
}
.ui-mock__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: #132A52;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.ui-mock__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); }
.ui-mock__title {
  margin-left: 8px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8FB3E8;
}
.ui-mock__body { display: grid; grid-template-columns: 54px 1fr; }
.ui-mock__rail {
  border-right: 1px solid rgba(255, 255, 255, .08);
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, .02);
}
.ui-mock__rail i {
  width: 22px; height: 6px;
  border-radius: 3px;
  background: rgba(143, 179, 232, .32);
}
.ui-mock__rail i:first-child { background: var(--brand-cyan); }
.ui-mock__main { padding: 16px; display: grid; gap: 14px; }

.ui-mock__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ui-mock__stat {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 9px;
  padding: 10px 11px;
}
.ui-mock__stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -.02em;
}
.ui-mock__stat span {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7F9FD0;
}

.ui-mock__chart {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 78px;
  padding: 12px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 9px;
}
.ui-mock__chart i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--brand-accent), rgba(59, 130, 246, .35));
}
.ui-mock__chart i:nth-child(6) { background: linear-gradient(180deg, var(--brand-cyan), rgba(34,211,238,.4)); }

.ui-mock__rows { display: grid; gap: 7px; }
.ui-mock__row {
  display: grid;
  grid-template-columns: 7px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .03);
  border-radius: 7px;
}
.ui-mock__row em { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-cyan); }
.ui-mock__row i { height: 6px; border-radius: 3px; background: rgba(143, 179, 232, .3); }
.ui-mock__row b {
  font-family: var(--font-label);
  font-size: 10px;
  color: #7F9FD0;
  font-weight: 400;
}

.ui-mock__tag {
  position: absolute;
  right: 10px; bottom: 10px;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8FB3E8;
  background: rgba(8, 24, 52, .82);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}

/* ==========================================================================
   SECTION ARCHETYPES
   Deliberately different structures so no two sections read the same way.
   ========================================================================== */

/* --- 1. Numbered editorial index (replaces a card grid) ------------------- */
.index-list { border-top: 1px solid var(--border); }
.index-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: start;
  padding-block: clamp(26px, 3.2vw, 42px);
  border-bottom: 1px solid var(--border);
  transition: background .45s var(--ease);
}
.index-item__num {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  letter-spacing: .08em;
  color: var(--label-accent);
  padding-top: 7px;
  transition: color .35s var(--ease), transform .45s var(--ease);
}
.index-item h3 {
  font-size: var(--display-sub);
  letter-spacing: -.02em;
  transition: transform .45s var(--ease);
}
.index-item p { color: var(--text-secondary); font-size: var(--text-base); }

@media (hover: hover) and (pointer: fine) {
  .index-item:hover { background: var(--bg-light); }
  .index-item:hover .index-item__num { color: var(--brand-primary); transform: translateX(3px); }
  .index-item:hover h3 { transform: translateX(4px); }
}

/* --- 2. Portrait tile with copy over the image ---------------------------- */
.tile-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 3 / 4;
  background: var(--brand-navy);
  border: 1px solid transparent;
}
.tile .photo, .tile img { width: 100%; height: 100%; object-fit: cover; }
.tile__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(16px, 2vw, 24px);
  color: var(--white);
}
.tile__body h3 {
  color: var(--white);
  font-size: var(--text-lg);
  margin-bottom: 8px;
}
.tile__body p {
  color: rgba(233, 240, 254, .84);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin-bottom: var(--space-3);
}
.tile__status { position: absolute; top: 16px; left: 16px; z-index: 2; }
.tile .card-cue {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-cyan);
}

/* --- 3. Statement rows (large type, no card) ------------------------------ */
.statement {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 4vw, 64px);
  padding-block: clamp(30px, 3.6vw, 54px);
  border-top: 1px solid var(--border);
  align-items: start;
}
.statement:last-child { border-bottom: 1px solid var(--border); }
.statement h3 {
  font-size: var(--display-statement);
  letter-spacing: -.028em;
  max-width: 16ch;
}
.statement p { font-size: var(--text-lg); color: var(--text-secondary); }
.statement__label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--label-accent);
  margin-bottom: var(--space-3);
}

/* --- 4. Editorial header with watermark numeral --------------------------- */
.section-head--indexed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: end;
  max-width: none;
}
.section-head--indexed .section-index { justify-self: end; }

/* Image-led hero */
.hero--image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  padding-block: clamp(72px, 10vw, 132px);
}
.hero--image::before { display: none; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero--image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(11, 46, 104, .95) 0%, rgba(11, 46, 104, .84) 42%,
    rgba(11, 46, 104, .48) 100%);
}
.hero--image h1 { color: var(--white); }
.hero--image .lead { color: var(--text-on-dark); }
.hero--image .eyebrow { color: var(--brand-cyan); }
.hero--image .crumbs,
.hero--image .crumbs a { color: var(--text-on-dark-muted); }
.hero--image .crumbs a:hover { color: var(--white); }

/* Card floating over the hero image. Near-opaque white rather than glass, so
   the diagram inside stays legible against any photograph behind it. */
.hero__inset {
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}
.hero__inset .hero__visual { max-width: 100%; }

/* Offset editorial collage: one tall tile, two stacked */
.collage {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-4);
  aspect-ratio: 16 / 11;
}
.collage__tile {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  min-height: 0;
  min-width: 0;
}
.collage__tile:first-child { grid-row: span 2; }
.collage__tile img { width: 100%; height: 100%; object-fit: cover; }

/* Original SVG artwork. Radius matches the rounded panel drawn inside each
   file, so the shadow follows the artwork edge exactly. */
.illo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
.illo--bare { box-shadow: none; }

.hero--inner { padding-block: clamp(48px, 6vw, 88px); }
.hero--inner h1 { font-size: var(--t-hero); }

/* Breadcrumb */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}
.crumbs a { color: var(--text-secondary); }
.crumbs a:hover { color: var(--brand-primary); }
.crumbs span[aria-hidden] { opacity: .5; }

/* --------------------------------------------------------------------------
   10. Dark band
   -------------------------------------------------------------------------- */
.band-dark {
  position: relative;
  background:
    radial-gradient(760px 420px at 82% 0%, rgba(59, 130, 246, .28), transparent 62%),
    radial-gradient(520px 380px at 10% 100%, rgba(34, 211, 238, .14), transparent 60%),
    var(--brand-navy);
  color: var(--text-on-dark);
  overflow: hidden;
}
.band-dark h2, .band-dark h3 { color: var(--white); }
.band-dark p { color: var(--text-on-dark-muted); }
.band-dark .section-head p { color: var(--text-on-dark-muted); }

/* --------------------------------------------------------------------------
   11. CTA band
   -------------------------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band h2 {
  font-size: var(--display-section);
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}
.cta-band p { max-width: 58ch; margin-inline: auto; margin-bottom: var(--space-8); }
.cta-band .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--brand-navy);
  color: var(--text-on-dark-muted);
  padding-top: clamp(64px, 7vw, 104px);
  font-size: var(--text-sm);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, minmax(0, .82fr)) 1.24fr;
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(48px, 5vw, 72px);
}
.site-footer h4 {
  color: #BFDBFE;
  font-size: 11px;
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.site-footer a { color: var(--text-on-dark-muted); }
.site-footer a:hover { color: var(--white); }
.site-footer li + li { margin-top: var(--space-3); }
/* width:auto is required — the images carry intrinsic width attributes, and
   setting height alone would stretch them to the container width. */
.footer-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-5);
}
.footer-lockup img:first-child { height: 40px; width: auto; }
.footer-lockup img:last-child { height: 18px; width: auto; }
.site-footer__tagline { max-width: 34ch; margin-bottom: var(--space-5); }
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-5); }

.contact-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: var(--space-3);
}
.contact-line svg { flex: none; margin-top: 3px; opacity: .7; }

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.field .req { color: var(--error); }
.field input,
.field select,
.field textarea {
  /* Without this a <select> refuses to shrink below its longest option,
     which pushes the grid track wider than the viewport on small screens. */
  min-width: 0;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  font-size: var(--text-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--border-strong); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .14);
}
.field textarea { resize: vertical; min-height: 130px; }
.field__error {
  display: none;
  font-size: var(--text-xs);
  color: var(--error);
  font-weight: 500;
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--error); }
.field.is-invalid input:focus,
.field.is-invalid select:focus,
.field.is-invalid textarea:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
.field.is-invalid .field__error { display: block; }

.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}
.checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand-primary); }
.checkbox label { font-size: var(--text-sm); font-weight: 400; color: var(--text-secondary); }

.form-status {
  display: none;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
  border: 1px solid;
}
.form-status.is-visible { display: block; }
.form-status--success { background: #F0FDF4; border-color: #BBF7D0; color: #14803C; }
.form-status--error { background: #FEF2F2; border-color: #FECACA; color: var(--error); }
.form-status--notice { background: var(--bg-light); border-color: #BFD6F7; color: var(--brand-navy); }

/* --------------------------------------------------------------------------
   14. Insights / article cards
   -------------------------------------------------------------------------- */
.article-card { display: flex; flex-direction: column; height: 100%; }
.article-card__thumb {
  aspect-ratio: 16 / 9;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.article-card__thumb svg { width: 100%; height: 100%; }
.article-card__thumb .photo { width: 100%; height: 100%; }
.article-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.card--hover:hover .article-card__thumb img { transform: scale(1.045); }
.article-card__body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.article-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.article-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.article-card p { flex: 1; margin-bottom: var(--space-5); }

.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-10); }
.filter-btn {
  padding: 8px 18px;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text-secondary);
  transition: all var(--t-fast);
}
.filter-btn:hover { border-color: var(--brand-accent); color: var(--brand-primary); }
.filter-btn[aria-pressed="true"] {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   15. Misc components
   -------------------------------------------------------------------------- */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pill {
  padding: 6px 14px;
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--radius-pill);
  background: var(--bg-light);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.note {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-accent);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.note svg { flex: none; color: var(--brand-primary); margin-top: 2px; }

.capability-tile {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.capability-tile__label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--label-accent);
  margin-bottom: var(--space-2);
}
.capability-tile__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}

.accordion__item { border-top: 1px solid var(--border); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}
.accordion__trigger:hover { color: var(--brand-primary); }
.accordion__icon { flex: none; transition: transform var(--t-base); color: var(--brand-accent); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion__panel { display: none; padding-bottom: var(--space-6); }
.accordion__panel.is-open { display: block; }

/* 404 */
.error-page { text-align: center; padding-block: clamp(64px, 10vw, 140px); }
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 3rem + 8vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand-primary) 45%, var(--brand-navy));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--space-5);
}

/* Legal document pages */
.legal-doc { max-width: 78ch; }
.legal-doc h2 { font-size: var(--text-2xl); margin-top: var(--space-12); margin-bottom: var(--space-4); }
.legal-doc h3 { font-size: var(--text-lg); margin-top: var(--space-8); margin-bottom: var(--space-3); }
.legal-doc p, .legal-doc li { color: var(--text-secondary); margin-bottom: var(--space-4); }
.legal-doc ul { list-style: disc; padding-left: var(--space-6); margin-bottom: var(--space-4); }
.legal-doc ul li { margin-bottom: var(--space-2); }
.legal-doc a { text-decoration: underline; }

/* Placeholder marker for content awaiting company sign-off */
.placeholder {
  background: #FFF7ED;
  border: 1px dashed #FCD9A8;
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-family: var(--font-label);
  font-size: max(.8em, 12px);
  color: #6B3D02;
  overflow-wrap: anywhere;
}

/* Scroll-reveal classes live in css/motion.css */

/* ------------------------------------------------- reduced motion (global)
   The site's answer to prefers-reduced-motion is deliberate, not a switch
   that turns the page off. Two separate things are being asked for:

     nothing may LOOP and nothing may TRAVEL. Every animation is collapsed,
     and every transition of position, size or rotation is removed, so no
     part of the page moves under the reader.

     the site must still ANSWER. Colour, light and opacity may still
     change, quickly (180ms on the site's own ease), so a button still
     responds to the pointer, a focus ring still arrives rather than
     snapping, and the page keeps feeling alive instead of brittle.

   Each page's own stylesheet still resolves its compositions to their
   finished state; this rule only governs what may move. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-property: opacity, color, background-color, border-color,
                         box-shadow, fill, stroke, outline-color !important;
    transition-duration: 180ms !important;
    transition-timing-function: cubic-bezier(.22, .61, .36, 1) !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* Photographic panel in the hero showcase slot */
.hero-showcase__frame {
  max-width: 1060px;
  margin-inline: auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 40px 90px rgba(3, 16, 40, .42);
  background: var(--brand-navy);
}
.hero-showcase__frame img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   16. Split hero
   Replaces the text-over-photograph hero. Measured on the old build, 25.5%
   of the area behind the lead paragraph was too bright for white text — a
   worst-case local ratio of 1.75:1 against a 4.5:1 requirement. A horizontal
   scrim cannot fix that, because it cannot know where the bright water in
   the photograph happens to fall. Putting the copy on its own light surface
   makes the failure structurally impossible rather than tuned-away, and it
   reads bright instead of dark.
   ========================================================================== */
.hero-split {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--surface-0);
  background-image:
    radial-gradient(760px 520px at 4% 0%,
      color-mix(in srgb, var(--accent) 9%, transparent), transparent 66%),
    radial-gradient(620px 460px at 46% 108%,
      color-mix(in srgb, var(--accent) 6%, transparent), transparent 62%);
}

.hero-split__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: clamp(500px, 56vw, 620px);
}

.hero-split__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(52px, 6.5vw, 88px);
  /* Aligns the copy with .container on wide screens without boxing the
     photograph in, so the image can still run to the viewport edge. */
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)))
                  clamp(26px, 3.6vw, 60px);
}

.hero-split__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--space-4);
}
.hero-split__kicker::before {
  content: '';
  width: 22px; height: 3px;
  border-radius: 2px;
  background-color: currentColor;
  flex: none;
}

.hero-split h1 {
  font-size: var(--display-hero);
  color: var(--text-primary);
  margin-bottom: var(--space-5);
  max-width: 17ch;
}
/* Solid accent, not a gradient. The old hero faded the emphasis word to pale
   grey mid-word, making the one word meant to stand out the hardest to read. */
.hero-split h1 em {
  font-style: normal;
  color: var(--accent-ink);
}

.hero-split__lead {
  font-size: clamp(1.0625rem, .99rem + .4vw, 1.25rem);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 46ch;
  margin-bottom: var(--space-8);
}

.hero-split__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.hero-split__fact { min-width: 0; }
.hero-split__fact dt {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 2px;
}
.hero-split__fact dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.hero-split__media { position: relative; overflow: hidden; }
.hero-split__media .photo,
.hero-split__media picture { position: absolute; inset: 0; }
.hero-split__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Soft seam so the photograph resolves into the copy surface instead of
   butting against it with a hard vertical edge. */
.hero-split__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right,
    var(--surface-0) 0%,
    color-mix(in srgb, var(--surface-0) 55%, transparent) 7%,
    transparent 18%);
}

/* Optional caption for images whose on-screen content must not be mistaken
   for a product screenshot. */
.hero-split__note {
  position: absolute;
  left: var(--space-5);
  right: var(--space-5);
  bottom: var(--space-4);
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--white);
  text-shadow: 0 1px 10px rgba(5, 20, 48, .9), 0 0 22px rgba(5, 20, 48, .75);
}

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

@media (max-width: 900px) {
  .hero-split__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero-split__copy {
    padding-inline: var(--gutter);
    padding-block: clamp(40px, 8vw, 64px) clamp(28px, 5vw, 40px);
  }
  .hero-split h1 { max-width: 20ch; }
  .hero-split__media {
    aspect-ratio: 16 / 10;
    min-height: 240px;
  }
  .hero-split__media::after {
    background: linear-gradient(to bottom,
      var(--surface-0) 0%,
      color-mix(in srgb, var(--surface-0) 50%, transparent) 6%,
      transparent 16%);
  }
}

/* ==========================================================================
   17. Target size and small-control corrections
   The old build had 23 controls under 40px in at least one dimension, most of
   them standalone links in the footer and utility bar rather than links inside
   a sentence — so the inline-link exception does not cover them.
   ========================================================================== */

/* Standalone link lists: 44px hit area, without adding 44px of visual row. */
.site-footer__grid li a,
.site-footer__legal a,
.utility-bar__item,
.utility-bar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Negative margin keeps the footer as compact as it looked before while the
   hit area itself stays full size. */
.site-footer__grid li + li { margin-top: 0; }
.site-footer__grid li a { margin-block: -10px; }

.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* Consent checkbox: 24px visual (WCAG 2.2 minimum), 44px hit area via the
   label row, which is what a pointer actually lands on. */
.checkbox { align-items: center; }
.checkbox input {
  width: 24px;
  height: 24px;
  margin-top: 0;
  flex: none;
}
.checkbox label {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* The required marker was #DC2626 on the dark enquiry card: 2.71:1. On a light
   field it is fine, so only the dark context is overridden. */
.consult__card .field .req,
.card--dark .field .req,
.band-dark .field .req { color: #FF9C9C; }

/* Inline links inside running copy are exempt from the target-size rule and
   nothing here gives them a min-height, so no reset is needed. An earlier
   blanket `p a:not(.btn)` rule scored higher than every scoped rule below it
   and silently cancelled them. */

/* Remaining standalone controls: the header lockup, the two contact-detail
   link patterns, and the checkbox box itself. */
.site-header .brand { min-height: 44px; min-width: 44px; }

.consult__contact a,
.contact-line a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -10px;
}

.checkbox input {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}

/* aspect-ratio plus min-height let the box derive its WIDTH from the height,
   which pushed the mobile hero image 9px past the viewport. */
@media (max-width: 900px) {
  .hero-split__media { width: 100%; min-height: 0; aspect-ratio: 16 / 10; }
}

/* Primary nav links measured 43px — one pixel short. */
.nav__link { min-height: 44px; }

/* Breadcrumb and feature-list links are standalone controls in a list, not
   links inside a sentence, so the target-size exception does not cover them. */
.crumbs a,
.feature-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -11px;
}
.crumbs a { min-width: 44px; justify-content: center; }

/* A long button label in a 320px column overflowed its container; buttons may
   wrap rather than push the page sideways. */
.btn { max-width: 100%; }
@media (max-width: 420px) {
  .btn--lg { padding-inline: var(--space-5); }
  .btn > * { flex-wrap: wrap; justify-content: center; }
}

/* Three fixed stat columns cannot fit a 320px mock; below that they stack. */
@media (max-width: 400px) {
  .ui-mock__stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 340px) {
  .ui-mock__stats { grid-template-columns: 1fr; }
}

/* Inner-page variant of the split hero: shorter than the homepage, and the
   headline steps down so the home page keeps the largest type on the site. */
.hero-split--inner .hero-split__inner { min-height: clamp(360px, 38vw, 470px); }
.hero-split--inner h1 { font-size: var(--display-section); max-width: 19ch; }
.hero-split--inner .hero-split__copy { padding-block: clamp(36px, 4.5vw, 64px); }
.hero-split--inner .crumbs { margin-bottom: var(--space-4); }

/* Legal pages carry no photograph. */
.hero--plain {
  position: relative;
  isolation: isolate;
  padding-block: clamp(40px, 5vw, 72px);
  background-color: var(--surface-1);
}
.hero--plain h1 { font-size: var(--display-section); max-width: 22ch; }
.hero--plain .hero__copy { max-width: 62ch; }

/* The hero note sits over the foot of the photograph. A text-shadow alone
   failed at 1.42:1 on the pale marble in the Products hero, and replacing it
   with a gradient ramp still failed at 1.48:1 -- the first line of the note
   lands where the ramp is barely tinted. A solid plate under the text, with a
   short fade above it, puts every glyph on the same known surface: measured
   13.3:1 against white, so it holds whatever the photograph does. */
.hero-split__media { isolation: isolate; }
.hero-split__note {
  padding: var(--space-3) var(--space-5) var(--space-4);
  left: 0; right: 0; bottom: 0;
  text-shadow: none;
  background-color: rgba(5, 20, 48, .88);
  /* The media seam is a later sibling pseudo-element, so without this it
     paints ON TOP of the note and washes its left third back to the surface
     colour -- white text under a white veil, which is what the measurement
     kept catching even after the plate was added. */
  z-index: 2;
}
.hero-split__note::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 46px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 20, 48, 0), rgba(5, 20, 48, .88));
}

/* A contact link on its own list row is a standalone control; the same address
   written inside a sentence is not, and keeps its natural size. */
.legal-doc li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -12px;
}