/* ==========================================================================
   Dante Key Replacement design system, version 3
   One stylesheet. Mobile first. White through blue to navy.
   Brand colour #005dd0. Fully saturated, no greys, no muted tones, no green.
   Never purple.

   Layout follows a three tier header (status bar, brand row, navigation row),
   a 1320px wide shell for the header and hero, a 1200px shell for page
   sections, and an 880px shell for reading. Section rhythm alternates white,
   soft blue, deeper blue tint, and navy, so each chapter reads as distinct.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Typeface
   Inter, self hosted (SIL Open Font License, assets/fonts/OFL.txt), latin
   subset, one variable file for every weight. The fallback face is Arial
   resized to Inter's metrics, so the swap from fallback to Inter moves
   nothing on the page.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT");
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
  size-adjust: 107.06%;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ink. Navy tinted so text sits on the brand family rather than drifting grey. */
  --ink:              #071a2f;  /* 17.5:1 on white */
  --ink-secondary:    #0e3a6b;  /* 11.4:1 on white */
  --ink-tertiary:     #2a5c96;  /* 6.8:1  on white, AA at normal size */

  /* Lines and surfaces. Tinted blue, never grey. */
  --line:             #c7dcf5;
  --line-soft:        #deebfa;
  --line-strong:      #005dd0;
  --surface:          #ffffff;
  --surface-soft:     #f3f8fe;
  --surface-tint:     #e9f2fd;
  --surface-deep:     #071a3d;
  --ink-on-deep:      #dbe8fa;  /* 13.9:1 on --surface-deep */

  /* Navy ramp. The structural family: headings, links, dark sections. */
  --navy-950:         #04122b;
  --navy-900:         #071a3d;
  --navy-850:         #0a2552;
  --navy-800:         #0c2d63;
  --navy-700:         #005dd0;  /* 6.0:1 on white, the link colour */
  --navy-600:         #005dd0;
  --navy-500:         #005dd0;
  --navy-100:         #ffffff;

  /* Brand ramp. The action family. --brand-700 is the colour the owner chose. */
  --brand-800:        #003a86;  /* 10.8:1 on white, button active */
  --brand-700:        #005dd0;  /* 6.0:1  on white, PRIMARY BRAND COLOUR */
  --brand-600:        #0a6ae8;
  --brand-500:        #2b7ae4;
  --brand-100:        #d6e6fb;
  --brand-50:         #ebf3fd;
  --sky-300:          #8fc2ff;  /* links on navy */
  --sky-400:          #5aa7ff;  /* the open now light on navy */

  /* Status. Amber and red carry meaning blue cannot. Cyan for information,
     kept clearly distinct from the brand blue so the two never read alike. */
  --amber-700:        #9c4a00;  /* 6.2:1 on white */
  --amber-500:        #e07800;
  --amber-100:        #ffefd6;
  --amber-on-deep:    #ffcf8a;  /* 11.9:1 on --surface-deep, the note colour on navy */
  --red-700:          #a81414;  /* 7.6:1 on white */
  --red-500:          #e02424;
  --red-100:          #ffe5e5;
  --red-on-deep:      #ffb4b4;  /* 10.2:1 on --surface-deep, the closed colour on navy */
  --info-700:         #06707f;  /* 5.8:1 on white */
  --info-100:         #d4f2f8;

  /* Typography scale */
  --font-sans: "Inter", "Inter Fallback", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --step--2: 0.8125rem;
  --step--1: 0.875rem;
  --step-0:  1rem;
  --step-1:  1.125rem;
  --step-2:  clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem);
  --step-3:  clamp(1.4rem, 1.15rem + 1.1vw, 1.8rem);
  --step-4:  clamp(1.8rem, 1.35rem + 2vw, 2.6rem);
  --step-5:  clamp(2.15rem, 1.45rem + 3.2vw, 3.6rem);

  /* Spatial rhythm, an 8px base */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 5rem;
  --section-y: clamp(3.5rem, 2.4rem + 4.6vw, 6.5rem);
  --section-y-tight: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadows carry a navy cast rather than neutral black. */
  --shadow-sm: 0 1px 2px rgba(7, 26, 61, 0.06), 0 2px 8px rgba(7, 26, 61, 0.05);
  --shadow:    0 10px 30px -12px rgba(7, 26, 61, 0.22);
  --shadow-lg: 0 28px 60px -24px rgba(7, 26, 61, 0.36);
  --shadow-brand: 0 10px 24px -10px rgba(0, 93, 208, 0.62);

  --container: 1320px;
  --container-wide: 1320px;
  --container-narrow: 980px;

  --focus-ring: 0 0 0 3px #ffffff, 0 0 0 6px var(--brand-600);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition: 180ms cubic-bezier(0.2, 0, 0.2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

h1, h2, h3, h4, h5 { margin: 0 0 var(--sp-2); line-height: 1.14; font-weight: 750; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--step-5); letter-spacing: -0.032em; font-weight: 600; line-height: 1.16; }
h2 { font-size: var(--step-4); letter-spacing: -0.026em; font-weight: 600; }
h3 { font-size: var(--step-2); letter-spacing: -0.015em; }
h4 { font-size: var(--step-1); letter-spacing: -0.01em; }

p { margin: 0 0 var(--sp-2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

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

/* Height must stay auto here so images scale to their real aspect ratio.
   Icon sizing is handled per component, for example .icon-tile svg and .btn svg.
   No width rule either: unsized classless icon SVGs take their 24px default
   from the :where() fallback below, and sized rules always win over both. */
img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--sp-2); padding-left: 1.35rem; }
li { margin-bottom: 0.4rem; }
li:last-child { margin-bottom: 0; }

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

strong, b { font-weight: 700; }
small { font-size: var(--step--1); }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-tint); padding: 0.1em 0.35em; border-radius: 5px; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

::selection { background: var(--brand-100); color: var(--navy-900); }

/* --------------------------------------------------------------------------
   3. Utilities and layout primitives
   -------------------------------------------------------------------------- */
.container, .container-wide, .container-narrow { width: 100%; margin-inline: auto; padding-inline: var(--gutter); }
.container { max-width: calc(var(--container) + var(--gutter) * 2); }
.container-wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.container-narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); position: relative; }
.section-tight { padding-block: var(--section-y-tight); }

/* Background rhythm. Alternate these so sections read as distinct chapters. */
.bg-white  { background: var(--surface); }
.bg-soft   { background: var(--surface-soft); }
.bg-tint   { background: var(--surface-tint); }
.bg-deep   {
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(43, 122, 228, 0.28), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(10, 106, 232, 0.16), transparent 60%),
    linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-800) 100%);
  color: var(--ink-on-deep);
}
.bg-deep h1, .bg-deep h2, .bg-deep h3, .bg-deep h4 { color: #ffffff; }
.bg-deep a { color: var(--sky-300); }
.bg-deep a:hover { color: #ffffff; }
.bg-deep .lede, .bg-deep .text-secondary, .bg-deep .text-tertiary { color: var(--ink-on-deep); }
.bg-gradient { background: linear-gradient(168deg, #ffffff 0%, #f0f6fe 46%, #dbeafc 100%); }

/* A thin hairline between two sections that share a background. */
.bg-white + .bg-white, .bg-soft + .bg-soft { border-top: 1px solid var(--line-soft); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy-900); color: #fff; padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0; text-decoration: none; font-weight: 650;
}
.skip-link:focus { left: 0; color: #fff; }

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

.text-center { text-align: center; }
.text-tertiary { color: var(--ink-tertiary); }
.text-secondary { color: var(--ink-secondary); }
.lede { font-size: var(--step-1); color: var(--ink-secondary); line-height: 1.62; }
.measure { max-width: 64ch; }
.measure-tight { max-width: 54ch; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); }

.stack > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-3); }

.grid { display: grid; gap: var(--sp-3); }
@media (min-width: 640px)  { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px)  { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .grid-2-1 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--sp-5); } }
@media (min-width: 900px)  { .grid-sidebar { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: var(--sp-5); } }
@media (min-width: 900px)  { .grid-50 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); align-items: center; } }
.grid-align-start { align-items: start; }

.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.cluster-2 { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* Section heads. A head that spans its shell is centred, like a chapter
   title; a head inside a column stays aligned with its column. */
.section-head { max-width: 62ch; margin-bottom: var(--sp-5); }
.section-head.center,
.section > .container > .section-head,
.section > .container-wide > .section-head,
.section > .container-narrow > .section-head { margin-inline: auto; text-align: center; }
.section-head.left { margin-inline: 0; text-align: left; }
.section-head h2 { margin-bottom: var(--sp-2); }
.section-head .lede { margin-inline: auto; }
.section-head.left .lede { margin-inline: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.36rem 0.85rem; border-radius: var(--radius-pill);
  font-size: 0.75rem; font-weight: 700; line-height: 1.3;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-800); background: var(--brand-50);
  border: 1px solid var(--brand-100);
  margin-bottom: var(--sp-2);
}
.eyebrow::before {
  content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--brand-700); flex: none;
}
.bg-deep .eyebrow { color: #e3eefc; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); }
.bg-deep .eyebrow::before { background: var(--sky-400); }

/* --------------------------------------------------------------------------
   4. Buttons. State, priority, and consequence are all visible.
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: linear-gradient(180deg, var(--brand-600) 0%, var(--brand-700) 100%);
  --btn-bg-hover: linear-gradient(180deg, var(--brand-700) 0%, var(--brand-800) 100%);
  --btn-fg: #ffffff;
  --btn-border: var(--brand-700);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 50px; padding: 0.8rem 1.4rem;
  font: inherit; font-weight: 680; line-height: 1.2; letter-spacing: -0.005em;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-border); border-radius: 12px;
  text-decoration: none; cursor: pointer; text-align: center;
  box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:hover { background: var(--btn-bg-hover); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(0, 93, 208, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; }
.btn svg { flex: none; width: 20px; height: 20px; fill: currentColor; }

.btn-lg { min-height: 58px; padding: 0.95rem 1.75rem; font-size: var(--step-1); }
.btn-sm { min-height: 42px; padding: 0.5rem 0.95rem; font-size: var(--step--1); border-radius: 10px; }
.btn-block { display: flex; width: 100%; }

.btn-secondary {
  --btn-bg: #ffffff; --btn-bg-hover: var(--brand-50);
  --btn-fg: var(--navy-800); --btn-border: #a9c8ef;
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { color: var(--navy-900); border-color: var(--brand-700); box-shadow: var(--shadow-sm); }

.btn-navy { --btn-bg: var(--navy-900); --btn-bg-hover: var(--navy-800); --btn-border: var(--navy-900); box-shadow: var(--shadow); }

.btn-ghost {
  --btn-bg: transparent; --btn-bg-hover: var(--brand-50);
  --btn-fg: var(--navy-700); --btn-border: transparent;
  box-shadow: none; text-decoration: underline; text-underline-offset: 3px;
}
.btn-ghost:hover { color: var(--navy-900); box-shadow: none; }

.btn-light { --btn-bg: #ffffff; --btn-bg-hover: var(--brand-50); --btn-fg: var(--navy-900); --btn-border: #ffffff; box-shadow: 0 10px 24px -12px rgba(4, 18, 43, 0.6); }
.btn-light:hover { color: var(--navy-900); }

.bg-deep .btn-secondary { --btn-bg: rgba(255, 255, 255, 0.06); --btn-bg-hover: rgba(255, 255, 255, 0.14); --btn-fg: #ffffff; --btn-border: rgba(255, 255, 255, 0.4); box-shadow: none; }
.bg-deep .btn-secondary:hover { border-color: #fff; color: #fff; }

/* Loading state driven by the data attribute, no layout shift. */
.btn[data-state="loading"] { pointer-events: none; opacity: 0.85; }
.btn[data-state="loading"]::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: dkr-spin 700ms linear infinite;
}

@keyframes dkr-spin { to { transform: rotate(360deg); } }

/* An arrow link, for "see how it works" style next steps. */
.link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 680; color: var(--brand-700); text-decoration: none; }
.link-arrow svg { width: 18px; height: 18px; fill: currentColor; transition: transform var(--transition); }
.link-arrow:hover { color: var(--brand-800); text-decoration: underline; }
.link-arrow:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Badges, chips, and proof cues
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.72rem; border-radius: var(--radius-pill);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em;
  background: var(--brand-50); color: var(--navy-800); border: 1px solid transparent;
}
.badge svg { width: 14px; height: 14px; fill: currentColor; }
.badge-brand { background: var(--brand-100); color: var(--brand-800); }
.badge-amber { background: var(--amber-100); color: var(--amber-700); }
.badge-info  { background: var(--info-100); color: var(--info-700); }
.badge-outline { background: #ffffff; border-color: #a9c8ef; color: var(--ink-secondary); }

.proof-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); font-size: var(--step--1); font-weight: 650; color: var(--ink-secondary);
}
.proof-chip svg { width: 18px; height: 18px; fill: var(--brand-600); flex: none; }
.proof-chip--link { text-decoration: none; border-color: #a9c8ef; }
.proof-chip--link:hover { background: var(--brand-50); color: var(--brand-800); text-decoration: underline; }

/* --------------------------------------------------------------------------
   6. Cards and panels
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  box-shadow: var(--shadow-sm);
}
.card h2 { font-size: var(--step-3); }
.card h3 { font-size: var(--step-2); margin-bottom: 0.55rem; }
.card-header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.9rem; }
.card-header h2 { margin: 0; font-size: var(--step-2); }
.card-header .icon-tile { flex-shrink: 0; margin-bottom: 0; }
.card > :last-child { margin-bottom: 0; }
.card-hover { transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease); }
.card-hover:hover, .card-hover:focus-within { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #a9c8ef; }
.card-flush { padding: 0; overflow: hidden; }
.card-head { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.card-body { padding: var(--sp-3); }
.bg-soft .card, .bg-tint .card { border-color: #d6e6f9; }

/* A card that is entirely one link target. Keeps the whole tile clickable
   while the real anchor stays keyboard reachable and screen reader correct. */
.card-link { position: relative; }
.card-link h3 a::after, .card-link .card-cover::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.card-link a { text-decoration: none; }
.card-link h3 a { color: var(--ink); }
.card-link:hover h3 a { color: var(--brand-700); }

.panel {
  border: 1px solid var(--line); border-left: 4px solid var(--navy-600);
  border-radius: var(--radius); padding: clamp(1rem, 0.85rem + 0.7vw, 1.4rem); background: var(--surface-soft);
}
.panel-brand { border-left-color: var(--brand-600); background: var(--brand-100); }
.panel-amber { border-left-color: var(--amber-500); background: var(--amber-100); border-color: #ffd9a6; }
.panel-info  { border-left-color: var(--info-700); background: var(--info-100); border-color: #a8e1ee; }
.panel > :last-child { margin-bottom: 0; }
.panel-title { font-weight: 750; margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.5rem; }
/* Icons sit inline with the label, so they follow the text size rather than a
   fixed attribute. Every icon context is sized here, never in the markup. */
.panel-title svg { flex: none; width: 20px; height: 20px; fill: currentColor; }
.panel-brand .panel-title svg { fill: var(--brand-700); }
.panel-amber .panel-title svg { fill: var(--amber-700); }
.panel-info  .panel-title svg { fill: var(--info-700); }
.card > h3 svg { width: 24px; height: 24px; fill: currentColor; }
/* Any icon that somehow reaches the page without a context rule stays sane.
   Wrapped in :where() so it has no specificity at all: every contextual size,
   for example .btn svg or .chip svg, always wins over this fallback. */
:where(svg[viewBox="0 0 24 24"]:not([class])) { width: 24px; height: 24px; }

.icon-tile {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(145deg, var(--brand-50), var(--brand-100));
  color: var(--brand-700); border: 1px solid #cfe1f8;
  display: grid; place-items: center; margin-bottom: var(--sp-2); flex: none;
  transition: transform 260ms var(--ease), background 260ms var(--ease);
}
.icon-tile svg { width: 26px; height: 26px; fill: currentColor; }
.icon-tile-brand { background: linear-gradient(145deg, var(--brand-600), var(--brand-800)); color: #ffffff; border-color: var(--brand-700); }
.icon-tile-amber { background: var(--amber-100); color: var(--amber-700); border-color: #ffd9a6; }
.card-hover:hover .icon-tile { transform: scale(1.06) rotate(-3deg); }
.bg-deep .icon-tile { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: var(--sky-300); }

/* --------------------------------------------------------------------------
   7. Answer block. The direct answer that opens every important page.
   -------------------------------------------------------------------------- */
.answer-block {
  position: relative;
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-soft) 100%);
  padding: clamp(1.4rem, 1.1rem + 1.4vw, 2.25rem); box-shadow: var(--shadow-sm);
}
.answer-block::before {
  content: ""; position: absolute; left: 0; top: 1.6rem; bottom: 1.6rem; width: 4px;
  border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--brand-600), var(--brand-800));
}
.answer-block .answer-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 750; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand-800); margin-bottom: var(--sp-2);
}
.answer-block p { font-size: var(--step-1); color: var(--ink); }
.answer-block .dkr-answer { font-size: clamp(1.06rem, 1rem + 0.3vw, 1.2rem); line-height: 1.62; font-weight: 500; }

.takeaways { list-style: none; padding: 0; margin: 0; }
.takeaways li { position: relative; padding-left: 2rem; margin-bottom: 0.7rem; }
.takeaways li::before {
  content: ""; position: absolute; left: 0; top: 0.18em;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--brand-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23005dd0' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E") center / 0.9rem no-repeat;
}
.bg-deep .takeaways li::before { background-color: rgba(255, 255, 255, 0.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238fc2ff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E"); }

.numbered { list-style: none; padding: 0; counter-reset: step; margin: 0; }
.numbered > li {
  counter-increment: step; position: relative;
  padding: 0 0 var(--sp-3) 3.4rem; margin: 0;
}
.numbered > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: linear-gradient(145deg, var(--brand-600), var(--brand-800)); color: #fff;
  display: grid; place-items: center; font-weight: 750; font-size: 0.95rem;
  box-shadow: var(--shadow-brand);
}
.numbered > li::after {
  content: ""; position: absolute; left: 1.2rem; top: 2.7rem; bottom: 0.35rem;
  width: 2px; background: linear-gradient(180deg, var(--brand-100), transparent);
}
.numbered > li:last-child { padding-bottom: 0; }
.numbered > li:last-child::after { display: none; }
.numbered h3 { margin-bottom: 0.35rem; padding-top: 0.3rem; }

/* --------------------------------------------------------------------------
   8. Header: status bar, brand row, navigation row
   -------------------------------------------------------------------------- */

/* 8a. Status bar. Live open or closed state, hours, and quick contact. */
.utility-bar { background: var(--navy-900); color: var(--ink-on-deep); font-size: var(--step--2); position: relative; z-index: 61; }
.utility-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1.25rem; min-height: 40px; }
.utility-bar a { color: #ffffff; text-decoration: none; font-weight: 650; }
.utility-bar a:hover { color: var(--sky-300); text-decoration: underline; }
.utility-links { display: none; list-style: none; margin: 0; padding: 0; gap: 1.35rem; align-items: center; }
.utility-links li { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.utility-links svg { width: 15px; height: 15px; fill: var(--sky-400); flex: none; }
.utility-sms { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px; white-space: nowrap; }
.utility-sms svg { width: 15px; height: 15px; fill: var(--sky-400); }
@media (min-width: 900px) { .utility-links { display: flex; } .utility-sms { display: none; } }

/* Live open or closed status. Server renders the plain hours, the script
   upgrades them to the live state in Connecticut time. */
.open-status { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.2rem 0.55rem; margin: 0; min-width: 0; }
.utility-bar .open-status { flex-wrap: nowrap; }
.open-status .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--sky-400); box-shadow: 0 0 0 4px rgba(90, 167, 255, 0.22); }
.open-status[data-state="closed"] .dot { background: var(--amber-on-deep); box-shadow: 0 0 0 4px rgba(255, 207, 138, 0.2); }
.open-status[data-state="open"] .dot { animation: dkr-pulse 2.6s ease-out infinite; }
.open-status .open-label { font-weight: 700; color: #ffffff; }
.open-status .open-detail { color: var(--ink-on-deep); }
/* In the one line status bar the detail truncates instead of wrapping. */
.utility-bar .open-status { min-width: 0; }
.utility-bar .open-status .open-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.open-status .open-label { flex: none; }
@keyframes dkr-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(90, 167, 255, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(90, 167, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(90, 167, 255, 0); }
}
/* The same status on a light surface. */
.open-status.on-light .dot { background: var(--brand-600); box-shadow: 0 0 0 4px rgba(10, 106, 232, 0.18); }
.open-status.on-light[data-state="closed"] .dot { background: var(--amber-500); box-shadow: 0 0 0 4px rgba(224, 120, 0, 0.18); }
.open-status.on-light .open-label { color: var(--ink); }
.open-status.on-light .open-detail { color: var(--ink-secondary); white-space: normal; }

/* 8b. Brand row and navigation row. The header scrolls with the page on
   every viewport. The sticky mobile action bar at the bottom already keeps
   the call to action one tap away, so the header itself never pins. */
.site-header { position: relative; z-index: 60; background: #ffffff; }
.header-main { background: #ffffff; border-bottom: 1px solid var(--line-soft); }
.header-main-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 70px; }

.brand-mark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 650; color: var(--navy-900); flex: none; }
.brand-mark:hover { text-decoration: none; color: var(--navy-700); }
.brand-mark svg { width: 34px; height: 34px; flex: none; }
/* The logo is a wide wordmark. Height is fixed, width follows the intrinsic
   ratio, and the width and height attributes in the markup reserve the box,
   so the header never shifts while the file loads. */
.brand-mark img { height: 70px; width: auto; flex: none; }
@media (min-width: 1024px) { .brand-mark img { height: 62px; } }
.brand-mark .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-mark .brand-text .b1 { font-size: 1.02rem; }
.brand-mark .brand-text .b2 { font-size: 0.68rem; font-weight: 650; color: var(--ink-tertiary); letter-spacing: 0.04em; text-transform: uppercase; }

/* Trust marks beside the logo, desktop only. Each mark is a confirmed fact:
   a badge image or an icon, and the fact it stands for. Generous spacing and
   a hairline between marks, so the row reads as calm rather than crowded. */
.header-trust { display: none; list-style: none; margin: 0; padding: 0; gap: clamp(0.8rem, 0.1rem + 0.9vw, 1.25rem); align-items: center; justify-content: center; flex: 0 1 auto; min-width: 0; }
.header-trust-item { margin: 0; display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.header-trust-item + .header-trust-item { border-left: 1px solid var(--line-soft); padding-left: clamp(0.8rem, 0.1rem + 0.9vw, 1.25rem); }
.trust-mark-img { flex: none; height: 36px; width: auto; }
.trust-mark-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-700); }
.trust-mark-icon svg { width: 18px; height: 18px; fill: currentColor; }
.header-trust-item strong { display: block; font-size: var(--step--2); font-weight: 700; line-height: 1.25; color: var(--navy-800); white-space: nowrap; }
.header-trust-item .trust-mark-text > span { display: block; font-size: 0.72rem; line-height: 1.3; color: var(--ink-tertiary); white-space: nowrap; }
@media (min-width: 1360px) { .header-trust { display: flex; } }

.header-actions { display: none; }
.header-actions .btn { min-height: 48px; }
.header-actions .btn-call-compact { flex-direction: column; align-items: flex-start; gap: 0; padding: 0.45rem 1.1rem 0.5rem 0.95rem; line-height: 1.15; }
.btn-call-compact .cc-row { display: inline-flex; align-items: center; gap: 0.5rem; }
.btn-call-compact .cc-kicker { font-size: 0.66rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.92; }
.btn-call-compact .cc-number { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; }
.btn-call-compact svg { width: 18px; height: 18px; }

.header-call-mobile {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(180deg, var(--brand-600), var(--brand-700)); color: #ffffff;
  box-shadow: var(--shadow-brand); margin-left: auto;
}
.header-call-mobile svg { width: 22px; height: 22px; fill: currentColor; }
.header-call-mobile:hover { background: var(--brand-800); color: #fff; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 48px; padding: 0.5rem 0.85rem;
  background: var(--surface); border: 1px solid #a9c8ef;
  border-radius: 12px; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; fill: currentColor; }
.nav-toggle[aria-expanded="true"] .icon-open,
.nav-toggle[aria-expanded="false"] .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] { background: var(--brand-50); border-color: var(--brand-700); }

/* Navigation. On small screens a full height panel below the brand row. */
.header-nav { border-bottom: 1px solid var(--line-soft); background: #ffffff; }
.primary-nav { display: none; }
.primary-nav[data-open="true"] {
  display: block; position: fixed; left: 0; right: 0; top: var(--nav-top, 110px); bottom: 0;
  background: #ffffff; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp-2) var(--gutter) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-lg); z-index: 80;
}
.primary-nav ul { list-style: none; margin: 0; padding: 0; }
.nav-list > li { border-bottom: 1px solid var(--line-soft); margin: 0; }
.nav-list > li:last-child { border-bottom: 0; }
.primary-nav a {
  display: flex; align-items: center; gap: 0.55rem; min-height: 48px; padding: 0.7rem 0.5rem; text-decoration: none;
  color: var(--ink); font-weight: 650; border-radius: var(--radius-sm);
}
.primary-nav a:hover, .primary-nav a:focus-visible { background: var(--brand-50); color: var(--navy-800); }
.primary-nav a[aria-current="page"], .primary-nav a[data-active="true"] { color: var(--brand-700); }
.nav-request { color: var(--brand-700) !important; }
.nav-request svg { width: 18px; height: 18px; fill: currentColor; }
/* Icons inside top level nav links, for example the Search link, follow the
   same 18px scale as the rest of the navigation instead of the 24px default. */
.nav-list > li > a > svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.nav-drawer-cta { display: grid; gap: 0.6rem; padding: var(--sp-2) 0 0; }
.nav-drawer-cta .btn { width: 100%; }

/* Mega menu content. Stacked in the drawer, a floating panel on desktop. */
.mega { padding: 0 0 var(--sp-2); }
.mega-cols { display: grid; gap: var(--sp-2); }
.mega-title { margin: var(--sp-1) 0 0.25rem; padding: 0 0.5rem; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-tertiary); }
.mega-list a { font-weight: 600; font-size: var(--step--1); color: var(--ink-secondary); min-height: 44px; }
.mega-list a svg { width: 18px; height: 18px; fill: var(--brand-700); flex: none; }
.mega-card { display: none; }

@media (min-width: 1024px) {
  .header-main-inner { min-height: 84px; gap: var(--sp-3); }
  .nav-toggle, .header-call-mobile { display: none; }
  .header-actions { display: flex; align-items: center; gap: 0.6rem; flex: none; }
  .header-nav { position: relative; }
  .primary-nav { display: block; }
  .nav-list { display: flex; align-items: center; gap: 0.15rem; }
  .nav-list > li { border-bottom: 0; position: relative; }
  .nav-list > li > a { padding: 0.8rem 0.9rem; font-size: 0.95rem; min-height: 52px; }
  .nav-list > li.nav-end { margin-left: auto; position: relative; padding-left: 0.9rem; }
  .nav-list > li.nav-end::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 22px; background: var(--line); }
  .nav-drawer-cta { display: none; }

  .nav-list > li.has-mega { position: static; }
  .mega {
    position: absolute; left: var(--gutter); right: var(--gutter); top: 100%;
    max-width: var(--container-wide); margin: 0 auto;
    background: #ffffff; border: 1px solid var(--line); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: var(--sp-3);
    display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: var(--sp-4);
    opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
    transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms;
    z-index: 70;
  }
  .has-mega:hover > .mega, .has-mega:focus-within > .mega, .has-mega[data-open="true"] > .mega {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  }
  .mega-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .mega-list a { min-height: 42px; padding: 0.5rem 0.6rem; }
  .mega-card {
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-2);
    padding: var(--sp-3); border-radius: var(--radius); color: var(--ink-on-deep);
    background: linear-gradient(150deg, var(--navy-900), var(--navy-800));
  }
  .mega-card p { margin: 0; }
  .mega-card .mega-card-title { font-size: var(--step-2); font-weight: 780; color: #ffffff; line-height: 1.2; }
  .mega-card a.btn { color: var(--btn-fg); }
}

/* Escape closes the service menu even while focus is still inside it. */
@media (min-width: 1024px) {
  .has-mega[data-closed="true"] > .mega { opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; }
}

.has-mega > a::after, .has-sub > a::after {
  content: ""; display: inline-block; width: 0.42rem; height: 0.42rem; margin-left: 0.2rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
@media (max-width: 1023.98px) { .has-mega > a::after { display: none; } }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(2.25rem, 1.4rem + 4vw, 4.75rem) 0;
  background:
    radial-gradient(60% 70% at 92% 8%, rgba(0, 93, 208, 0.12), transparent 62%),
    radial-gradient(45% 55% at 0% 100%, rgba(43, 122, 228, 0.08), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
  border-bottom: 1px solid var(--line-soft);
}
.hero > .container, .hero > .container-wide { position: relative; z-index: 1; }
.hero-grid { display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 960px) { .hero-grid { padding: 0px 30px 70px 30px; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); } }
.hero h1 { margin-bottom: var(--sp-2); }
.hero .lede { margin-bottom: var(--sp-3); font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem); }
.hero-actions { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-3); }
@media (min-width: 520px) { .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; } }
.hero-kicker { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: var(--sp-2); }
.hero-kicker .eyebrow { margin-bottom: 0; }
.hero-status { display: none; align-items: center; padding: 0.36rem 0.85rem; border-radius: var(--radius-pill); background: #ffffff; border: 1px solid var(--line); font-size: var(--step--2); }
@media (min-width: 900px) { .hero-status { display: inline-flex; } }

/* A short list of what the visitor gets, directly under the actions. */
.hero-points { list-style: none; margin: var(--sp-3) 0 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.55rem 1.25rem; }
@media (min-width: 560px) { .hero-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hero-points li { margin: 0; display: flex; gap: 0.55rem; align-items: flex-start; font-size: var(--step--1); font-weight: 600; color: var(--ink-secondary); }
.hero-points svg { flex: none; width: 20px; height: 20px; fill: var(--brand-700); margin-top: 1px; }
.hero-note { font-size: var(--step--1); max-width: 56ch; margin-top: var(--sp-2); color: var(--ink-tertiary); }

/* The photograph, with an overlay card that states confirmed facts. */
.hero-media { position: relative; margin: 0; }
.hero-photo {
  position: relative; margin: 0; border-radius: var(--radius-xl); overflow: hidden;
  background: var(--surface-tint); box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.hero-photo img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 960px) { .hero-photo img { aspect-ratio: 5 / 4.4; } }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(4, 18, 43, 0.35) 100%); pointer-events: none; }
.hero-badge {
  position: absolute; left: 1rem; top: 1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.8rem; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.95); color: var(--navy-900);
  font-size: var(--step--2); font-weight: 750; box-shadow: var(--shadow);
}
.hero-badge svg { width: 16px; height: 16px; fill: var(--brand-700); }
.hero-overlay {
  position: relative; z-index: 2; margin: -2.5rem 1rem 0; padding: 1rem 1.1rem;
  display: grid; gap: 0.7rem;
  background: rgba(255, 255, 255, 0.97); border: 1px solid var(--line-soft); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 560px) { .hero-overlay { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 1.5rem; } }
.hero-overlay-item { display: flex; gap: 0.65rem; align-items: flex-start; }
.hero-overlay-item .icon-tile { width: 38px; height: 38px; margin: 0; border-radius: 11px; }
.hero-overlay-item .icon-tile svg { width: 20px; height: 20px; }
.hero-overlay-item strong { display: block; font-size: var(--step--1); line-height: 1.3; color: var(--ink); }
.hero-overlay-item .ov-sub { display: block; font-size: var(--step--2); line-height: 1.4; color: var(--ink-tertiary); margin-top: 0.1rem; }

/* An alert placed in the hero, for example the 911 notice on the lockout page. */
.hero-alert { margin-top: var(--sp-3); }

/* Trust strip. The row of confirmed facts at the foot of the hero. */
.trust-strip { padding: 40px 0px 60px 0px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.72); }
.trust-list { list-style: none; margin: 0; padding: var(--sp-3) 0; display: grid; gap: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .trust-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) {
  .trust-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .trust-list[data-count="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust-list[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust-list[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.trust-item { margin: 0; display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.trust-item .trust-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--brand-100); color: var(--brand-700); }
.trust-item .trust-icon svg { width: 22px; height: 22px; fill: currentColor; }
.trust-item strong { display: block; font-size: var(--step--1); line-height: 1.25; color: var(--ink); }
.trust-item span { display: block; font-size: var(--step--2); line-height: 1.35; color: var(--ink-tertiary); }
@media (max-width: 559.98px) { .trust-item > span:last-child > span { display: none; } .trust-item .trust-icon { width: 38px; height: 38px; } .trust-item .trust-icon svg { width: 20px; height: 20px; } }
.bg-deep .trust-item strong { color: #ffffff; }
.bg-deep .trust-item span { color: var(--ink-on-deep); }
.bg-deep .trust-item .trust-icon { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: var(--sky-300); }

/* "What happened?" quick routes. One tap from a plain sentence to the right page. */
.quick-routes { padding: 60px 0px 60px 0px; }
.quick-routes-label { margin: 0 0 0.65rem; font-size: var(--step--2); font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-tertiary); }
.chip-row { list-style: none; margin: 0; padding: 0 0 0.25rem; display: flex; gap: 0.5rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chip-row::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .chip-row { flex-wrap: wrap; overflow: visible; } }
.chip-row li { margin: 0; flex: none; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px;
  padding: 0.5rem 0.95rem; border-radius: var(--radius-pill);
  background: #ffffff; border: 1px solid #b9d3f2; color: var(--navy-800);
  font-size: var(--step--1); font-weight: 650; text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.chip svg { width: 17px; height: 17px; fill: var(--brand-700); flex: none; }
.chip:hover, .chip:focus-visible { background: var(--brand-50); border-color: var(--brand-700); color: var(--brand-800); transform: translateY(-1px); text-decoration: none; }

/* --------------------------------------------------------------------------
   10. Sticky mobile action bar
   -------------------------------------------------------------------------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; gap: 0.5rem; padding: 0.6rem 0.75rem;
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -12px rgba(7, 26, 61, 0.3);
}
.action-bar .btn { flex: 1; min-height: 52px; padding-inline: 0.75rem; }
.action-bar .btn-primary-action { flex: 2; }
body.has-action-bar { padding-bottom: 80px; }
@media (min-width: 1024px) {
  .action-bar { display: none; }
  body.has-action-bar { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   11. Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumbs {margin-left: 30px; padding-block: 0.75rem; border-bottom: 1px solid var(--line-soft); background: #ffffff; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; font-size: var(--step--2); }
.breadcrumbs li { display: flex; align-items: center; gap: 0.35rem; margin: 0; color: var(--ink-tertiary); }
.breadcrumbs li + li::before { content: ""; width: 0.38rem; height: 0.38rem; border-right: 1.5px solid #8fb5e6; border-top: 1.5px solid #8fb5e6; transform: rotate(45deg); margin-right: 0.2rem; }
.breadcrumbs a { color: var(--ink-secondary); text-decoration: none; font-weight: 600; }
.breadcrumbs a:hover { color: var(--navy-700); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: var(--sp-3); }
.field:last-child { margin-bottom: 0; }
.field label, .fieldset-legend {
  display: block; font-weight: 700; margin-bottom: 0.35rem; color: var(--ink);
}
.field .hint { display: block; font-size: var(--step--1); color: var(--ink-tertiary); margin-bottom: 0.45rem; }
.field .required { color: var(--red-700); font-weight: 700; }
.field .optional { font-weight: 500; color: var(--ink-tertiary); font-size: var(--step--1); }

.input, .select, .textarea {
  width: 100%; min-height: 50px; padding: 0.72rem 0.9rem;
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1.5px solid #a9c8ef; border-radius: 12px;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}
.textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232a5c96'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 22px;
  padding-right: 2.4rem;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--navy-500); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--navy-600);
  box-shadow: 0 0 0 4px rgba(0, 93, 208, 0.18);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--red-500); background: #fff5f5;
}
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(224, 36, 36, 0.18); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-soft); color: var(--ink-tertiary); cursor: not-allowed; }

.error-text {
  display: none; margin-top: 0.4rem; font-size: var(--step--1);
  font-weight: 650; color: var(--red-700);
}
.error-text[data-visible="true"] { display: flex; align-items: flex-start; gap: 0.35rem; }
.error-text::before { content: "!"; flex: none; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--red-700); color: #fff; font-size: 0.72rem; display: grid; place-items: center; font-weight: 700; margin-top: 0.15rem; }

fieldset { border: 0; margin: 0 0 var(--sp-3); padding: 0; }
.fieldset-legend { font-size: var(--step-1); }

/* Choice tiles. A radio group that reads as a decision, not as form furniture. */
.choice-grid { display: grid; gap: 0.65rem; }
@media (min-width: 560px) { .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice {
  position: relative; display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.9rem 1rem; border: 1.5px solid #b9d3f2;
  border-radius: 14px; background: var(--surface); cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
  /* A choice tile is rendered as an anchor so it still works without
     JavaScript, but it must read as a form control rather than as body text.
     Without these two the base link rule underlines and recolours the label. */
  text-decoration: none;
  color: var(--ink);
}
.choice:hover { border-color: var(--brand-700); background: var(--brand-50); text-decoration: none; transform: translateY(-1px); }
.choice:hover .choice-title { color: var(--navy-800); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice .choice-dot {
  flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  border: 2px solid #8fb5e6; background: #fff;
  display: grid; place-items: center; transition: border-color var(--transition);
}
.choice .choice-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-600); transform: scale(0); transition: transform var(--transition); }
.choice input:checked ~ .choice-dot { border-color: var(--brand-600); }
.choice input:checked ~ .choice-dot::after { transform: scale(1); }
.choice:has(input:checked) { border-color: var(--brand-600); background: var(--brand-100); box-shadow: inset 0 0 0 1px var(--brand-600); }
.choice:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.choice .choice-text { min-width: 0; }
.choice .choice-title { display: block; font-weight: 700; line-height: 1.3; }
.choice .choice-sub { display: block; font-size: var(--step--1); color: var(--ink-tertiary); margin-top: 0.15rem; line-height: 1.45; }

/* Honeypot. Hidden from people, reachable by naive bots. */
.hp-field { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-bottom: var(--sp-3); }
.form-status:empty { display: none; }
.form-card { background: #ffffff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.25rem, 0.9rem + 1.5vw, 2.25rem); }

/* --------------------------------------------------------------------------
   13. Alerts
   -------------------------------------------------------------------------- */
.alert {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: var(--sp-2); border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface-soft);
}
.alert svg { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.alert > div > :last-child { margin-bottom: 0; }
.alert-title { font-weight: 750; margin-bottom: 0.2rem; }
.alert-success { background: var(--brand-100); border-color: #8bbdf5; }
.alert-success svg { fill: var(--brand-700); }
.alert-error { background: var(--red-100); border-color: #ffb3b3; }
.alert-error svg { fill: var(--red-700); }
.alert-warning { background: var(--amber-100); border-color: #ffce8a; }
.alert-warning svg { fill: var(--amber-700); }
.alert-info { background: var(--info-100); border-color: #9ad9ef; }
.alert-info svg { fill: var(--info-700); }

/* --------------------------------------------------------------------------
   14. Accordion. Each question is its own card.
   -------------------------------------------------------------------------- */
.accordion { display: grid; gap: 0.75rem; }
.accordion-item {
  border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; background: var(--surface);
  box-shadow: var(--shadow-sm); transition: border-color var(--transition), box-shadow var(--transition);
}
.accordion-item:has(.accordion-trigger[aria-expanded="true"]) { border-color: #8fb5e6; box-shadow: var(--shadow); }
.accordion-trigger {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2);
  padding: 1.1rem 1.25rem; background: var(--surface); border: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: var(--step-1); line-height: 1.4; text-align: left; color: var(--ink);
  transition: background var(--transition), color var(--transition);
}
.accordion-trigger:hover { background: var(--surface-soft); color: var(--navy-800); }
.accordion-trigger .chev {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100);
  display: grid; place-items: center; margin-top: -0.1rem;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.accordion-trigger .chev::before {
  content: ""; width: 0.5rem; height: 0.5rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.accordion-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); background: var(--brand-700); color: #ffffff; border-color: var(--brand-700); }
.accordion-panel { padding: 0 1.25rem 1.25rem; color: var(--ink-secondary); }
.accordion-panel > :last-child { margin-bottom: 0; }
/* The script collapses answers with hidden="until-found" where supported, which
   keeps them findable by find in page. That state must not be display:none. */
.accordion-panel[hidden]:not([hidden="until-found"]) { display: none; }
.accordion-panel[hidden="until-found"] { padding: 0; }
.accordion-heading { margin: 0; font-size: inherit; }

/* --------------------------------------------------------------------------
   15. Tabs and segmented filters
   -------------------------------------------------------------------------- */
.tabs-list {
  display: inline-flex; gap: 0.25rem; max-width: 100%; overflow-x: auto; scrollbar-width: thin;
  padding: 0.3rem; margin-bottom: var(--sp-3);
  background: var(--surface-tint); border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.tab {
  flex: none; min-height: 44px; padding: 0.55rem 1.1rem; background: transparent; border: 0;
  border-radius: var(--radius-pill);
  font: inherit; font-weight: 700; font-size: var(--step--1); color: var(--ink-secondary); cursor: pointer; white-space: nowrap;
  transition: color var(--transition), background var(--transition), box-shadow var(--transition);
}
.tab:hover { color: var(--navy-800); background: rgba(255, 255, 255, 0.7); }
.tab[aria-selected="true"], .tab[aria-pressed="true"] { color: #ffffff; background: linear-gradient(180deg, var(--brand-600), var(--brand-700)); box-shadow: var(--shadow-brand); }
.tab-panel[hidden] { display: none; }
.tabs-center { display: flex; justify-content: center; }

/* --------------------------------------------------------------------------
   16. Tables
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.table-wrap table { margin: 0; border: 0; }
table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
caption { text-align: left; font-size: var(--step--1); color: var(--ink-tertiary); padding: var(--sp-2) var(--sp-2) 0.25rem; }
th, td { padding: 0.85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
thead th { background: var(--surface-soft); color: var(--navy-800); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; position: sticky; top: 0; }
tbody th { font-weight: 700; color: var(--ink); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:hover { background: var(--surface-soft); }

/* Sortable column headers */
th[aria-sort] button {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 32px;
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-transform: inherit; letter-spacing: inherit; cursor: pointer; font-weight: 750;
}
th[aria-sort] button::after { content: "\2195"; opacity: 0.45; font-size: 0.95em; }
th[aria-sort="ascending"] button::after { content: "\2191"; opacity: 1; }
th[aria-sort="descending"] button::after { content: "\2193"; opacity: 1; }

/* A comparison table, ticks and crosses. */
.compare-table td.yes, .compare-table td.no { font-weight: 650; }
.compare-table td.yes { color: var(--brand-800); }
.compare-table td.no { color: var(--ink-tertiary); }
.compare-table thead th.is-us { background: var(--brand-700); color: #ffffff; }
.compare-table .mark { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; margin-right: 0.4rem; vertical-align: -0.3rem; }
.compare-table .mark svg { width: 0.9rem; height: 0.9rem; fill: currentColor; }
.compare-table .mark-yes { background: var(--brand-100); color: var(--brand-700); }
.compare-table .mark-no { background: var(--surface-tint); color: var(--ink-tertiary); }

/* --------------------------------------------------------------------------
   17. Decision tool
   -------------------------------------------------------------------------- */
.decider { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; }
.decider-head { padding: var(--sp-3); background: radial-gradient(80% 120% at 100% 0%, rgba(90, 167, 255, 0.3), transparent 60%), linear-gradient(135deg, var(--navy-900), var(--navy-800)); color: #fff; }
.decider-head h2, .decider-head h3 { color: #fff; margin-bottom: 0.35rem; }
.decider-title { font-size: var(--step-2); }
.decider-result-title { font-size: var(--step-2); }
.choice-list { list-style: none; padding: 0; margin: 0; }
.choice-list > li { margin: 0; }
.decider-head p { color: #cfe3fa; margin: 0; font-size: var(--step--1); }
.decider-body { padding: var(--sp-3); }
.decider-progress { display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--sp-2); font-size: var(--step--1); color: var(--ink-tertiary); font-weight: 650; }
.decider-progress .bar { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--brand-50); overflow: hidden; }
.decider-progress .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-600), var(--brand-700)); border-radius: inherit; transition: width 260ms cubic-bezier(0.2, 0, 0.2, 1); }
.decider-step[hidden] { display: none; }
.decider-question { font-size: var(--step-2); padding: 0.35rem 0 0.75rem; }
.decider-result { border-top: 1px solid var(--line); padding-top: var(--sp-3); margin-top: var(--sp-3); }
.decider-actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-3); }
.decider-more { margin: var(--sp-2) 0 0; font-weight: 700; }
.decider .cta-secondary { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; font-size: var(--step--1); color: var(--ink-secondary); }
.decider .cta-secondary .or { font-weight: 750; color: var(--ink-tertiary); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.09em; }
/* Once a result is showing it carries the call button, so the foot steps aside. */
.decider[data-state="result"] .decider-foot { display: none; }

/* Persistent call route at the foot of the tool, visible at every step. */
.decider-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  background: var(--brand-50); border-top: 1px solid var(--line);
}
.decider-foot-label { font-weight: 750; margin: 0; line-height: 1.3; }
.decider-foot-note { font-size: var(--step--1); color: var(--ink-secondary); margin: 0.1rem 0 0; }
.decider-foot .btn { flex: none; }

/* --------------------------------------------------------------------------
   18. Service area checker
   -------------------------------------------------------------------------- */
.checker-results { margin-top: var(--sp-2); }
.checker-list { list-style: none; padding: 0; margin: 0; max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: #ffffff; }
.checker-list:empty { display: none; }
.checker-list li { margin: 0; border-bottom: 1px solid var(--line-soft); }
.checker-list li:last-child { border-bottom: 0; }
.checker-list a { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: center; min-height: 48px; padding: 0.7rem 0.95rem; text-decoration: none; color: var(--ink); font-weight: 650; }
.checker-list a:hover, .checker-list a:focus-visible { background: var(--brand-50); color: var(--navy-800); }
.checker-list .meta { font-size: var(--step--1); font-weight: 500; color: var(--ink-tertiary); }
.checker-count { margin: var(--sp-1) 0 0; font-size: var(--step--1); color: var(--ink-tertiary); }
.checker-town { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.checker-match { font-size: var(--step--1); font-weight: 650; color: var(--brand-700); }

.state-msg { padding: var(--sp-2); border-radius: 12px; background: var(--surface-soft); border: 1px dashed #8fb5e6; color: var(--ink-secondary); font-size: var(--step--1); }
.state-msg[hidden] { display: none; }

/* --------------------------------------------------------------------------
   19. Link lists and directories
   -------------------------------------------------------------------------- */
.link-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
@media (min-width: 560px) { .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .link-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .link-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.link-grid li { margin: 0; }
.link-grid a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 52px;
  padding: 0.75rem 1rem; border: 1px solid var(--line-soft); border-radius: 12px;
  background: var(--surface); text-decoration: none; color: var(--ink); font-weight: 650;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition);
}
.link-grid a > span:first-child { display: inline-flex; align-items: center; gap: 0.55rem; }
.link-grid a > span:first-child::before {
  content: ""; flex: none; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23005dd0' d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--transition);
}
.link-grid.link-grid-places a > span:first-child::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23005dd0' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
}
.link-grid a:hover, .link-grid a:focus-visible { border-color: var(--brand-700); background: var(--brand-50); color: var(--navy-800); transform: translateY(-1px); }
.link-grid a:hover > span:first-child::before { transform: translateX(2px); }
.link-grid a .meta { font-size: var(--step--1); font-weight: 500; color: var(--ink-tertiary); text-align: right; }
.link-grid a:hover .meta { color: var(--navy-700); }

.alpha-nav { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: var(--sp-3); justify-content: center; }
.alpha-nav a, .alpha-nav span {
  min-width: 2.5rem; min-height: 2.5rem; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px;
  font-weight: 750; font-size: 0.88rem; text-decoration: none; color: var(--navy-700); background: var(--surface);
}
.alpha-nav a:hover { background: var(--brand-50); border-color: var(--brand-700); }
.alpha-nav span { color: #a9c8ef; background: var(--surface-soft); }

/* --------------------------------------------------------------------------
   20. On this page navigation
   -------------------------------------------------------------------------- */
.toc { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); padding: var(--sp-2); }
.toc h2, .toc .toc-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-tertiary); margin-bottom: 0.6rem; font-weight: 700; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a { display: block; padding: 0.45rem 0.55rem; border-radius: var(--radius-sm); color: var(--ink-secondary); text-decoration: none; font-size: var(--step--1); font-weight: 650; border-left: 2px solid transparent; }
.toc a:hover { background: var(--surface); color: var(--navy-700); }
.toc a[data-current="true"] { border-left-color: var(--brand-600); color: var(--navy-800); background: var(--surface); }
@media (min-width: 900px) { .toc-sticky { position: sticky; top: 24px; } }

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(43, 122, 228, 0.18), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
  color: var(--ink-on-deep); padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--sp-3);
}
.site-footer h2, .site-footer h3 { color: #fff; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--sp-2); font-weight: 750; }
.site-footer a { color: #ffffff; text-decoration: none; }
.site-footer a:hover { color: var(--sky-300); text-decoration: underline; }
.footer-grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.footer-grid > * { min-width: 0; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sp-5); } }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.55rem; font-size: var(--step--1); }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: var(--sp-5); padding-top: var(--sp-3); font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between; align-items: flex-start; }
.footer-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: var(--sp-2); flex-wrap: wrap; }
.footer-brand strong { color: #fff; font-size: 1.1rem; }
.footer-brand img { height: 48px; width: auto; border-radius: 10px; background: #ffffff; padding: 4px 8px; }
.footer-brand img.footer-google-badge { height: 46px; border-radius: 10px; padding: 0; background: #ffffff; }
.footer-note { font-size: var(--step--1); max-width: 40ch; }
.footer-small { font-size: var(--step--1); }
.footer-strong { color: #ffffff; }
.footer-phone { margin-bottom: 0.3rem; }
.site-footer .footer-phone a { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; }
.footer-hours { margin-top: var(--sp-3); }
.footer-legal p { margin: 0; }
.publisher-note { color: var(--ink-on-deep); }
.site-footer .publisher-note a, .site-footer .footer-registration a { text-decoration: underline; }
.footer-legal > div > p + p { margin-top: 0.35rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }
.footer-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--sp-2); }
.footer-cta .btn { min-height: 46px; }
.site-footer a.btn { color: var(--btn-fg); text-decoration: none; }
.site-footer a.btn-secondary { --btn-bg: rgba(255, 255, 255, 0.06); --btn-bg-hover: rgba(255, 255, 255, 0.14); --btn-fg: #ffffff; --btn-border: rgba(255, 255, 255, 0.4); box-shadow: none; }
.footer-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--sp-5) 0 0; padding: var(--sp-3) 0 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.footer-trust li { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--step--2); font-weight: 650; color: #ffffff; }
.footer-trust svg { width: 15px; height: 15px; fill: var(--sky-300); }

/* --------------------------------------------------------------------------
   22. Skeletons and empty states
   -------------------------------------------------------------------------- */
.skeleton { background: linear-gradient(90deg, var(--surface-soft) 25%, var(--surface-tint) 37%, var(--surface-soft) 63%); background-size: 400% 100%; animation: dkr-shimmer 1.3s ease-in-out infinite; border-radius: var(--radius-sm); }
.skeleton-line { height: 0.9rem; margin-bottom: 0.55rem; }
.skeleton-line:last-child { width: 62%; }
@keyframes dkr-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.empty-state { text-align: center; padding: var(--sp-4) var(--sp-2); border: 1px dashed #8fb5e6; border-radius: var(--radius); background: var(--surface-soft); }
.empty-state .icon-tile { margin-inline: auto; }

/* --------------------------------------------------------------------------
   23. Comparison and evidence
   -------------------------------------------------------------------------- */
.compare { display: grid; gap: var(--sp-2); }
@media (min-width: 760px) { .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compare-col { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #ffffff; }
.compare-col > header { padding: var(--sp-2); font-weight: 750; background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.compare-col.is-recommended { border-color: var(--brand-600); box-shadow: 0 0 0 1px var(--brand-600); }
.compare-col.is-recommended > header { background: var(--brand-100); color: var(--brand-800); }
.compare-col ul { padding: var(--sp-2) var(--sp-2) var(--sp-2) 2.1rem; margin: 0; }

.evidence { display: grid; gap: var(--sp-2); }
@media (min-width: 760px) { .evidence { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.evidence-item { padding: var(--sp-3); border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.evidence-item .claim { font-weight: 750; margin-bottom: 0.3rem; }
.evidence-item .support { font-size: var(--step--1); color: var(--ink-secondary); }

.stat { text-align: left; }
.stat .stat-value { font-size: var(--step-4); font-weight: 600; color: var(--brand-700); line-height: 1.05; letter-spacing: -0.03em; }
.stat .stat-label { font-size: var(--step--1); color: var(--ink-tertiary); font-weight: 650; margin-top: 0.2rem; }

/* A band of large numbers, each one computed from the site's own data. */
.stat-band { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .stat-band { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-band .stat { padding: var(--sp-3); border-radius: var(--radius); background: #ffffff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); }
.bg-deep .stat-band .stat { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
.bg-deep .stat .stat-value { color: #ffffff; }
.bg-deep .stat .stat-label { color: var(--ink-on-deep); }

/* --------------------------------------------------------------------------
   23b. Call first system
   The phone is the primary conversion path on every page. These rules make the
   number unmistakable and keep the form visibly secondary to it.
   -------------------------------------------------------------------------- */

/* The large call button. Deliberately bigger and louder than any other action. */
.btn-call {
  flex-direction: column; gap: 0.1rem;
  min-height: 68px; padding: 0.7rem 1.7rem; line-height: 1.15;
}
.btn-call .call-label {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; opacity: 0.95;
}
.btn-call .call-label svg { width: 15px; height: 15px; }
.btn-call .call-number {
  font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em;
}
@media (min-width: 520px) { .btn-call { min-height: 74px; } .btn-call .call-number { font-size: 1.55rem; } }

/* Ranks the call above the form wherever both appear. */
.cta-stack { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.cta-stack .cta-primary { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; }
.cta-stack .cta-primary .btn-secondary { min-height: 74px; padding-inline: 1.4rem; }
@media (max-width: 519.98px) {
  .cta-stack .cta-primary { flex-direction: column; }
  .cta-stack .cta-primary .btn { width: 100%; }
  .cta-stack .cta-primary .btn-secondary { min-height: 54px; }
}
.cta-stack .cta-secondary {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
  font-size: var(--step--1); color: var(--ink-secondary); margin: 0;
}
.cta-stack .cta-secondary .or {
  font-weight: 750; color: var(--ink-tertiary); text-transform: uppercase;
  font-size: 0.7rem; letter-spacing: 0.09em;
}
/* The "or send a request" link is a real tap target on a phone. */
.cta-stack .cta-secondary a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }
.cta-stack .cta-secondary { row-gap: 0; }

/* Large standalone phone display, used at conversion points. */
.phone-block {
  border: 1px solid var(--brand-100); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #ffffff, var(--brand-50)); padding: var(--sp-3); text-align: center;
  box-shadow: var(--shadow-sm);
}
.phone-block .phone-kicker {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand-800); margin-bottom: 0.3rem;
}
.phone-block a.phone-number {
  display: inline-block; font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.5rem);
  font-weight: 600; letter-spacing: -0.03em; color: var(--navy-900);
  text-decoration: none; line-height: 1.1;
}
.phone-block a.phone-number:hover { color: var(--brand-800); text-decoration: underline; }
.phone-block .phone-sub { font-size: var(--step--1); color: var(--ink-secondary); margin-top: 0.45rem; }

/* Opening hours table. */
.hours-list { list-style: none; margin: 0; padding: 0; }
.hours-list li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--line-soft); margin: 0;
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list .day { font-weight: 700; }
.hours-list .time { font-weight: 650; }
.hours-list li[data-type="closed"] .time { color: var(--red-700); font-weight: 700; }
.hours-list li[data-type="note"] .time { color: var(--amber-700); font-weight: 700; }
.hours-list li[data-today="true"] .day::after { content: "Today"; margin-left: 0.5rem; padding: 0.1rem 0.45rem; border-radius: var(--radius-pill); background: var(--brand-100); color: var(--brand-800); font-size: 0.7rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 0.1rem; }
.bg-deep .hours-list li, .site-footer .hours-list li { border-bottom-color: rgba(255, 255, 255, 0.14); }
.bg-deep .hours-list .day, .site-footer .hours-list .day { color: #ffffff; }
.bg-deep .hours-list .time, .site-footer .hours-list .time { color: #ffffff; }
.bg-deep .hours-list li[data-today="true"] .day::after, .site-footer .hours-list li[data-today="true"] .day::after { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
.hours-note { margin: var(--sp-2) 0 0; font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   24. Figures and media
   Source images are 4:3. The aspect-ratio variants crop them to the shape a
   section needs, and width and height are always emitted on the img so the
   space is reserved before the file loads. That keeps CLS at zero.
   -------------------------------------------------------------------------- */
.figure {
  margin: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-tint);
  box-shadow: var(--shadow);
}
.figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 11;
  object-fit: cover;
  background: var(--surface-tint);
}
.figure-square img { aspect-ratio: 1 / 1; }
.figure-wide img   { aspect-ratio: 1 / 1; }
.figure-tall img   { aspect-ratio: 4 / 5; }
.figure-band img   { aspect-ratio: 21 / 9; }

.figure figcaption {
  padding: 0.8rem 1rem;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-secondary);
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
}
.figure figcaption strong { color: var(--ink); }
.figure + .accordion, .figure + .factor-block, .figure + .stack-lg, .figure + .grid, .figure + .price-steps { margin-top: var(--sp-4); }
.section-head + .figure { margin-bottom: var(--sp-4); }

/* A figure that sits inside a card, flush to the card edges. */
.card > .figure:first-child {
  margin: calc(clamp(1.25rem, 1rem + 1vw, 1.75rem) * -1) calc(clamp(1.25rem, 1rem + 1vw, 1.75rem) * -1) var(--sp-3);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: none;
}

/* Visual led section. The image column is deliberately the dominant element
   on desktop and the full width on mobile, so the visual carries the section
   rather than decorating it. */
.visual-lead { display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 900px) {
  .visual-lead { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); }
  .visual-lead.visual-right > .figure { order: 2; }
}
.visual-lead > .figure { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.visual-lead > .figure img { aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .visual-lead > .figure img { aspect-ratio: 1 / 1; } }
.visual-lead .answer-block { box-shadow: none; }

/* Text beside an image. Reverses cleanly and stacks on small screens. */
.media-split { display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 860px) {
  .media-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); }
  .media-split.media-first > .figure { order: -1; }
}
.media-split > div > :last-child { margin-bottom: 0; }

/* Grid columns may shrink below their content, so a wide table scrolls inside
   its own frame instead of pushing the whole page sideways on a phone. */
.grid > *, .hero-grid > *, .visual-lead > *, .media-split > *, .split > *, .grid-50 > * { min-width: 0; }

/* --------------------------------------------------------------------------
   25. Page sections introduced with version 3
   -------------------------------------------------------------------------- */

/* 25a. Service cards. Illustration, name, the problem it solves, next step. */
.svc-grid { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .svc-grid.svc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc-card { display: flex; flex-direction: column; gap: 0.2rem; height: 100%; }
.svc-card[hidden] { display: none; }
.svc-card .svc-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: var(--sp-2); }
.svc-card .svc-top .icon-tile { margin: 0; }
.svc-card .svc-family { font-size: 0.7rem; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-tertiary); background: var(--surface-soft); border: 1px solid var(--line-soft); padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); }
.svc-card h3 { margin-bottom: 0.4rem; }
.svc-card p { color: var(--ink-secondary); font-size: var(--step--1); }
.svc-card .svc-says { list-style: none; margin: 0.35rem 0 var(--sp-2); padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.svc-card .svc-says li { margin: 0; font-size: 0.78rem; font-weight: 600; color: var(--navy-800); background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--radius-pill); padding: 0.2rem 0.6rem; }
.svc-card .svc-foot { margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.svc-card .svc-foot .link-arrow { font-size: var(--step--1); }
.svc-price { font-size: var(--step--1); font-weight: 750; color: var(--ink); }
.svc-card-cta { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-2); background: linear-gradient(150deg, var(--navy-900), var(--navy-800)); border-color: var(--navy-800); color: var(--ink-on-deep); }
.svc-card-cta h3 { color: #ffffff; }
.svc-card-cta p { color: var(--ink-on-deep); }
.svc-card-cta a.btn { color: var(--btn-fg); }
@media (max-width: 639.98px) {
  .svc-grid { gap: 0.65rem; }
  .svc-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.9rem; row-gap: 0.15rem; align-items: start; padding: 1rem 1.1rem; }
  .svc-card .svc-top { grid-row: 1 / span 2; margin: 0; }
  .svc-card .svc-top .icon-tile { width: 46px; height: 46px; }
  .svc-card .svc-family, .svc-card .svc-says, .svc-card .svc-foot { display: none; }
  .svc-card h3 { font-size: 1.05rem; margin: 0.1rem 0 0.15rem; }
  .svc-card p { margin: 0; }
}
.svc-filter { display: flex; justify-content: center; margin: calc(var(--sp-3) * -1) 0 var(--sp-4); }
.svc-filter-status { text-align: center; font-size: var(--step--1); color: var(--ink-tertiary); margin: calc(var(--sp-3) * -1) 0 var(--sp-3); }

/* 25b. Process timeline. Numbered steps with a connector between them. */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4) var(--sp-3); counter-reset: tl; }
@media (min-width: 720px) { .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.timeline > li {
  counter-increment: tl; position: relative; margin: 0;
  padding: 2.4rem var(--sp-3) var(--sp-3); border-radius: var(--radius-lg);
  background: #ffffff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm);
}
.timeline > li::before {
  content: counter(tl); position: absolute; top: -1.2rem; left: var(--sp-3);
  width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--brand-600), var(--brand-800)); color: #ffffff; font-weight: 600;
  box-shadow: var(--shadow-brand), 0 0 0 5px var(--surface-soft);
}
.timeline h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.timeline p { font-size: var(--step--1); color: var(--ink-secondary); margin: 0; }
@media (min-width: 1080px) {
  .timeline > li:not(:last-child)::after {
    content: ""; position: absolute; top: 0.1rem; right: calc(var(--sp-3) * -1); width: var(--sp-3); height: 2px;
    background: repeating-linear-gradient(90deg, #8fb5e6 0 6px, transparent 6px 11px);
  }
}
.bg-deep .timeline > li { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
.bg-deep .timeline > li::before { box-shadow: var(--shadow-brand), 0 0 0 5px var(--navy-900); }
.bg-deep .timeline p { color: var(--ink-on-deep); }
.bg-white .timeline > li::before { box-shadow: var(--shadow-brand), 0 0 0 5px #ffffff; }

/* 25c. Split sections: photograph one side, argument the other. */
.split { display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); } .split.split-flip > .figure { order: 2; } }
.split > .figure { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.split > .figure img { aspect-ratio: 4 / 3; }
.bg-deep .figure { border-color: rgba(255, 255, 255, 0.14); }
.bg-deep .figure figcaption { background: var(--navy-850); color: var(--ink-on-deep); border-top-color: rgba(255, 255, 255, 0.12); }
.bg-deep .figure figcaption strong { color: #ffffff; }

/* A list of commitments, each with its icon, on either background. */
.commit-list { list-style: none; margin: var(--sp-3) 0; padding: 0; display: grid; gap: var(--sp-2); }
@media (min-width: 560px) { .commit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.commit-list li { margin: 0; display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.95rem 1rem; border-radius: var(--radius); background: #ffffff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); }
.commit-list li .icon-tile { width: 42px; height: 42px; border-radius: 12px; margin: 0; }
.commit-list li .icon-tile svg { width: 22px; height: 22px; }
.commit-list strong { display: block; line-height: 1.3; color: var(--ink); }
.commit-list span.sub { display: block; font-size: var(--step--1); color: var(--ink-secondary); line-height: 1.5; margin-top: 0.2rem; }
.bg-deep .commit-list li { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
.bg-deep .commit-list strong { color: #ffffff; }
.bg-deep .commit-list span.sub { color: var(--ink-on-deep); }

/* 25d. Who we help. */
.audience-grid { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .audience-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.audience { display: flex; flex-direction: column; gap: 0.35rem; height: 100%; }
.audience h3 { font-size: var(--step-1); margin-bottom: 0.25rem; }
.audience p { font-size: var(--step--1); color: var(--ink-secondary); }
.audience ul { list-style: none; margin: 0.35rem 0 var(--sp-2); padding: 0; }
.audience ul li { margin: 0; }
.audience ul a { display: flex; align-items: center; gap: 0.45rem; min-height: 40px; font-size: var(--step--1); font-weight: 650; color: var(--brand-700); text-decoration: none; }
.audience ul a::before { content: ""; width: 0.4rem; height: 0.4rem; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); flex: none; }
.audience ul a:hover { text-decoration: underline; color: var(--brand-800); }

/* 25e. How the price is set: three steps, then the factors. */
.price-steps { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-3); counter-reset: ps; }
@media (min-width: 860px) { .price-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.price-steps > li { counter-increment: ps; margin: 0; position: relative; padding: var(--sp-3); border-radius: var(--radius-lg); background: #ffffff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); }
.price-steps > li .step-num { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--brand-100); color: var(--brand-800); font-weight: 600; margin-bottom: 0.75rem; }
.price-steps > li.is-key { background: linear-gradient(160deg, var(--brand-700), var(--brand-800)); border-color: var(--brand-700); color: #e8f1fd; box-shadow: var(--shadow-brand); }
.price-steps > li.is-key h3 { color: #ffffff; }
.price-steps > li.is-key .step-num { background: rgba(255, 255, 255, 0.18); color: #ffffff; }
.price-steps h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.price-steps p { font-size: var(--step--1); margin: 0; }
.price-steps > li:not(.is-key) p { color: var(--ink-secondary); }
.pay-methods { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pay-methods li { margin: 0; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 700; background: rgba(255, 255, 255, 0.16); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.28); }
.price-from { display: inline-flex; align-items: baseline; gap: 0.35rem; font-weight: 600; color: var(--ink); }
.price-from .amount { font-size: var(--step-3); letter-spacing: -0.02em; }

/* What changes the price: each factor directly above its explanation. */
.factor-block { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.factor-title { margin: 0 0 var(--sp-2); font-weight: 750; color: var(--ink); font-size: var(--step-1); }
.factor-list { display: grid; gap: var(--sp-2); margin: 0; }
@media (min-width: 720px) { .factor-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.factor { padding: var(--sp-2); background: var(--surface-soft); border-left: 4px solid var(--brand-700); border-radius: 0 12px 12px 0; }
.factor dt { margin: 0 0 0.25rem; font-weight: 750; color: var(--ink); }
.factor dd { margin: 0; font-size: var(--step--1); color: var(--ink-secondary); }

/* 25f. Call to action bands. */
.cta-band { position: relative; overflow: hidden; }
.cta-band-inner { display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 960px) { .cta-band-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-6); } }
.cta-band h2 { font-size: var(--step-4); }
.cta-lede { color: var(--ink-on-deep); max-width: 58ch; }
.cta-center { display: flex; justify-content: flex-start; margin-top: var(--sp-3); }
.cta-hours { padding: var(--sp-3); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); }
.cta-hours h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--sp-1); }
.cta-hours .open-status { margin-bottom: var(--sp-2); }
.cta-next { margin: var(--sp-2) 0 0; color: var(--ink-on-deep); font-size: var(--step--1); max-width: 60ch; }
.bg-deep .cta-stack .cta-secondary { color: var(--ink-on-deep); }
.bg-deep .cta-stack .cta-secondary .or { color: #9cc3ff; }
/* Buttons keep their own colours inside the navy sections. */
.bg-deep a.btn { color: var(--btn-fg); }
.bg-deep a.btn:hover { color: #ffffff; }
.bg-deep a.btn-light:hover { color: var(--navy-900); }

/* The inline band between two sections: short, bright, one action. */
.cta-inline {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem) clamp(1.25rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg); color: #ffffff;
  background: radial-gradient(70% 140% at 100% 0%, rgba(143, 194, 255, 0.35), transparent 60%), linear-gradient(135deg, var(--brand-700), var(--brand-800));
  box-shadow: var(--shadow-brand);
}
.cta-inline .cta-inline-title { margin: 0; font-size: var(--step-2); font-weight: 780; line-height: 1.25; color: #ffffff; }
.cta-inline .cta-inline-sub { margin: 0.25rem 0 0; color: #dcebfd; font-size: var(--step--1); }
.cta-inline .cluster-2 a.btn { color: var(--btn-fg); }
.cta-inline .btn-secondary { --btn-bg: rgba(255, 255, 255, 0.08); --btn-bg-hover: rgba(255, 255, 255, 0.18); --btn-fg: #ffffff; --btn-border: rgba(255, 255, 255, 0.5); box-shadow: none; }
.cta-inline-wrap { padding-block: var(--sp-3) var(--sp-3); }

/* 25g. Owner introduction and brand story. */
.owner-card { display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-2); border-radius: var(--radius); background: var(--surface-soft); border: 1px solid var(--line-soft); margin-top: var(--sp-3); }
.owner-card .owner-mark { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, var(--brand-600), var(--brand-800)); color: #ffffff; font-weight: 600; font-size: 1.3rem; }
.owner-card p { margin: 0; font-size: var(--step--1); color: var(--ink-secondary); }
.owner-card strong { color: var(--ink); }

/* 25h. Brand grid for vehicle makes. */
.make-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .make-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .make-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.make-grid li { margin: 0; }
.make-grid a { display: flex; flex-direction: column; gap: 0.15rem; min-height: 72px; justify-content: center; padding: 0.8rem 0.95rem; border-radius: 14px; background: #ffffff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); font-weight: 750; transition: border-color var(--transition), transform var(--transition), background var(--transition); }
.make-grid a .meta { font-size: 0.78rem; font-weight: 600; color: var(--ink-tertiary); }
.make-grid a:hover { border-color: var(--brand-700); background: var(--brand-50); transform: translateY(-2px); }

/* 25i. Frequently asked, with a side panel. */
.faq-layout { display: grid; gap: var(--sp-4); }
@media (min-width: 1000px) { .faq-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: var(--sp-6); align-items: start; } .faq-layout .faq-aside { position: sticky; top: 24px; } }
.faq-aside .section-head { margin-bottom: var(--sp-3); }

/* --------------------------------------------------------------------------
   26. Key illustrations and the rekeying diagram (includes/key-visuals.php)
   Drawings, not photographs. Colours only from the tokens above.
   -------------------------------------------------------------------------- */
.key-art { display: block; width: 100%; max-width: 132px; height: auto; }
.key-art .kt-metal { fill: var(--surface-tint); stroke: var(--navy-700); stroke-width: 1.4; stroke-linejoin: round; }
.key-art .kt-line  { fill: none; stroke: var(--navy-700); stroke-width: 1; opacity: 0.55; }
.key-art .kt-body  { fill: var(--navy-800); }
.key-art .kt-hole  { fill: var(--surface); }
.key-art .kt-btn   { fill: var(--brand-100); }
.key-art .kt-chip  { fill: var(--brand-600); }
.key-art .kt-chipline { fill: none; stroke: var(--brand-600); stroke-width: 1.4; stroke-linecap: round; }
.key-art .kt-wave  { fill: none; stroke: var(--brand-700); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

th .key-art { max-width: 84px; margin-bottom: 6px; }

.keytypes { margin: 0; }
.keytypes__list {
  display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.keytype {
  display: flex; flex-direction: column; gap: 6px; padding: var(--sp-2); margin: 0;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow-sm);
}
.keytype .key-art { margin: 2px 0 6px; }
.keytype__name { margin: 0; font-size: var(--step-0); line-height: 1.25; color: var(--ink); }
.keytype__what { margin: 0; font-size: var(--step--1); color: var(--ink-secondary); }
.keytype__needs { display: flex; flex-wrap: wrap; gap: 4px; margin: auto 0 0; padding: 6px 0 0; list-style: none; }
.need {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; line-height: 1.4; margin: 0;
}
.need svg { width: 12px; height: 12px; fill: currentColor; }
.need--yes { background: var(--brand-100); color: var(--brand-800); }
.need--no  { background: var(--surface-soft); color: var(--ink-tertiary); text-decoration: line-through; text-decoration-thickness: 1px; }
.keytypes figcaption, .pins figcaption { margin-top: var(--sp-1); font-size: var(--step--1); color: var(--ink-tertiary); }

.pins { margin: 0; }
.pins__panels { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pins__panels { grid-template-columns: 1fr 1fr; } }
.pins__panel { padding: var(--sp-2); background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; }
.pins__panel--ok  { border-top: 4px solid var(--brand-700); }
.pins__panel--bad { border-top: 4px solid var(--red-700); }
.pins__art { display: block; width: 100%; height: auto; }
.pins__label { display: flex; gap: 8px; align-items: flex-start; margin: var(--sp-1) 0 0; font-size: var(--step--1); color: var(--ink-secondary); }
.pins__label svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: currentColor; }
.pins__panel--ok .pins__label svg  { color: var(--brand-700); }
.pins__panel--bad .pins__label svg { color: var(--red-700); }
.pins-housing { fill: var(--surface-soft); stroke: var(--navy-700); stroke-width: 1.5; }
.pins-plug    { fill: var(--brand-100); }
.pins-chamber { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.pins-spring  { fill: none; stroke: var(--navy-600); stroke-width: 1.6; stroke-linejoin: round; }
.pins-driver, .pins-keypin { fill: var(--amber-100); stroke: var(--amber-700); stroke-width: 1.4; }
.pins-keypin  { fill: #ffd9a0; }
.pins-bad     { stroke: var(--red-700); stroke-width: 2.4; }
.pins-blade   { fill: var(--surface-tint); stroke: var(--navy-700); stroke-width: 1.4; stroke-linejoin: round; }
.pins-shear   { stroke: var(--brand-700); stroke-width: 2; stroke-dasharray: 6 4; }

/* Contextual link modules (includes/link-modules.php) */
.coverage { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; }
.coverage__county { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow-sm); }
.coverage__county > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-1); min-height: 52px; padding: 0 var(--sp-2); cursor: pointer; font-weight: 750; color: var(--ink); list-style: none; }
.coverage__county > summary::-webkit-details-marker { display: none; }
.coverage__county > summary::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--brand-700); border-bottom: 2px solid var(--brand-700); transform: rotate(45deg); transition: transform var(--transition); margin-left: 0.5rem; }
.coverage__county[open] > summary::after { transform: rotate(225deg); }
.coverage__county > summary:focus-visible { box-shadow: var(--focus-ring); border-radius: 14px; }
.coverage__count { font-size: var(--step--1); font-weight: 650; color: var(--ink-tertiary); margin-left: auto; }
.coverage__towns { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 2px var(--sp-2); margin: 0; padding: 0 var(--sp-2) var(--sp-2); list-style: none; }
.coverage__towns li { margin: 0; }
.coverage__towns a { display: inline-flex; align-items: center; min-height: 40px; }

/* Trust and accountability panels. */
.trust-grid .card > :last-child { margin-bottom: 0; }
.registration-own { padding: 0.65rem 0.85rem; background: var(--brand-100); border-radius: 12px; color: var(--ink); }
.source-note { margin: var(--sp-1) 0 0; font-size: var(--step--1); color: var(--ink-tertiary); }

/* Request form: how the details are handled, beside the button that sends them. */
.form-privacy { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0; padding: 0.8rem 0.95rem; font-size: var(--step--1); color: var(--ink-secondary); background: var(--surface-soft); border: 1px solid var(--line-soft); border-radius: 12px; }
.form-privacy svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: var(--brand-700); }
.form-next { font-size: var(--step--1); margin-bottom: 0; }
.small-print { font-size: var(--step--1); }

/* Opening hours and notes on the navy footer and the navy call to action
   section. The amber and red used on white fall to about 2.5:1 on navy, so both
   sections use light tints of the same colours instead. */
.site-footer .hours-list li[data-type="note"] .time,
.bg-deep .hours-list li[data-type="note"] .time { color: var(--amber-on-deep); }
.site-footer .hours-list li[data-type="closed"] .time,
.bg-deep .hours-list li[data-type="closed"] .time { color: var(--red-on-deep); }

/* ==========================================================================
   HEADER SEARCH & ADVANCED MEGA NAVIGATION
   ========================================================================== */

/* Header Search Bar (Desktop) */
.header-search-wrap {
  position: relative; flex: 1 1 240px; max-width: 320px; margin-inline: var(--sp-2); min-width: 0;
}
@media (max-width: 1023.98px) {
  .header-search-wrap { display: none; }
}
.header-search-form { position: relative; width: 100%; }
.header-search-box {
  display: flex; align-items: center; width: 100%; height: 44px;
  background: var(--surface-soft); border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill); padding: 0 0.5rem 0 0.95rem;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}
.header-search-box:focus-within {
  background: #ffffff; border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(0, 93, 208, 0.15);
}
.header-search-icon {
  flex: none; width: 18px; height: 18px; margin-right: 0.5rem;
}
.header-search-icon svg { width: 18px; height: 18px; fill: var(--ink-tertiary); }
.header-search-input {
  flex: 1 1 auto; border: 0; background: transparent; padding: 0;
  font: inherit; font-size: 0.88rem; color: var(--ink); outline: none; min-width: 0;
}
.header-search-input::placeholder { color: var(--ink-tertiary); }
.header-search-btn {
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px;
  border-radius: var(--radius-pill); border: 0; background: var(--brand-700);
  color: #ffffff; cursor: pointer; transition: background-color var(--transition);
}
.header-search-btn:hover, .header-search-btn:focus-visible { background: var(--brand-800); }
.header-search-btn svg { width: 15px; height: 15px; fill: currentColor; }

/* Live Search Dropdown / Autocomplete */
.header-search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); max-height: 380px; overflow-y: auto;
  overscroll-behavior: contain; z-index: 100; display: none; padding: 0.4rem 0;
}
.header-search-results[data-visible="true"] { display: block; }
.header-search-group { padding: 0.4rem 0.85rem 0.2rem; }
.header-search-group-title {
  font-size: 0.68rem; font-weight: 750; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-tertiary); margin: 0 0 0.25rem;
}
.header-search-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.5rem 0.85rem; text-decoration: none; color: var(--ink);
  font-size: 0.88rem; font-weight: 600; border-radius: var(--radius-xs);
  transition: background-color var(--transition);
}
.header-search-item:hover, .header-search-item:focus-visible, .header-search-item.is-selected {
  background: var(--brand-50); color: var(--navy-900); text-decoration: none;
}
.header-search-item svg { width: 16px; height: 16px; fill: var(--brand-700); flex: none; }
.header-search-item .item-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-search-item .item-cat { font-size: 0.72rem; color: var(--ink-tertiary); font-weight: 500; flex: none; }
.header-search-footer {
  padding: 0.5rem 0.85rem; border-top: 1px solid var(--line-soft);
  text-align: center; font-size: 0.82rem;
}
.header-search-footer a { color: var(--brand-700); font-weight: 650; text-decoration: none; }
.header-search-footer a:hover { text-decoration: underline; }

/* Mobile Search in Drawer. Lives inside the nav panel, which is hidden on
   small screens until the drawer opens, so it only ever shows there. */
.nav-drawer-search {
  padding: 0 0 var(--sp-2); border-bottom: 1px solid var(--line-soft); margin-bottom: var(--sp-1);
}
.nav-drawer-search .header-search-box { height: 48px; }
.nav-drawer-search .header-search-results { position: static; max-height: 260px; box-shadow: none; border-color: var(--line-soft); margin-top: 0.5rem; }
@media (min-width: 1024px) { .nav-drawer-search { display: none; } }

/* Mobile Drawer Accordions */
.nav-drawer-accordion {
  border-bottom: 1px solid var(--line-soft); margin: 0;
}
.nav-drawer-summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 50px; padding: 0.75rem 0.5rem; font-weight: 680;
  font-size: 1rem; color: var(--ink); cursor: pointer; list-style: none;
  border-radius: var(--radius-sm);
}
.nav-drawer-summary::-webkit-details-marker { display: none; }
.nav-drawer-summary::after {
  content: ""; width: 0.46rem; height: 0.46rem; border-right: 2px solid var(--brand-700);
  border-bottom: 2px solid var(--brand-700); transform: rotate(45deg);
  transition: transform var(--transition); margin-right: 0.25rem;
}
.nav-drawer-accordion[open] > .nav-drawer-summary::after { transform: rotate(225deg); }
.nav-drawer-summary:hover, .nav-drawer-summary:focus-visible { background: var(--brand-50); }
.nav-drawer-body {
  padding: 0 0.5rem var(--sp-2);
}
.nav-drawer-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.3rem;
}
.nav-drawer-grid a, .nav-drawer-sublist a {
  display: flex; align-items: center; gap: 0.45rem; min-height: 40px;
  padding: 0.4rem 0.55rem; font-size: 0.88rem; font-weight: 600;
  color: var(--ink-secondary); text-decoration: none; border-radius: var(--radius-xs);
}
.nav-drawer-grid a:hover, .nav-drawer-sublist a:hover { background: var(--brand-50); color: var(--navy-900); }
.nav-drawer-grid a svg, .nav-drawer-sublist a svg { width: 15px; height: 15px; fill: var(--brand-700); flex: none; }
.nav-drawer-sublist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.nav-drawer-hub-link {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 0.6rem; padding: 0.55rem 0.75rem; background: var(--surface-soft);
  border-radius: var(--radius-sm); font-weight: 700; font-size: 0.88rem;
  color: var(--brand-700) !important; text-decoration: none;
}

/* Enhanced Desktop Mega Menus */
@media (min-width: 1024px) {
  .mega-wide {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3);
  }
  .mega-grid-3 {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3);
  }
  .mega-section-title {
    font-size: 0.76rem; font-weight: 780; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--ink-tertiary); margin: 0 0 0.5rem;
    padding-bottom: 0.35rem; border-bottom: 1px solid var(--line-soft);
  }
  .mega-sublist {
    list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem;
  }
  .mega-sublist a {
    display: flex; align-items: center; justify-content: space-between; gap: 0.45rem;
    min-height: 34px; padding: 0.35rem 0.5rem; font-size: 0.86rem; font-weight: 600;
    color: var(--ink-secondary); text-decoration: none; border-radius: var(--radius-xs);
  }
  .mega-sublist a:hover, .mega-sublist a:focus-visible {
    background: var(--brand-50); color: var(--navy-900); text-decoration: none;
  }
  .mega-sublist a svg { width: 14px; height: 14px; fill: var(--brand-700); flex: none; }
  .mega-sublist a .sub-meta { font-size: 0.72rem; color: var(--ink-tertiary); font-weight: 500; }
  .mega-footer-bar {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
    padding-top: var(--sp-2); margin-top: 0.25rem; border-top: 1px solid var(--line);
    font-size: 0.88rem;
  }
  .mega-footer-bar a.hub-btn {
    display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; color: var(--brand-700);
    text-decoration: none; padding: 0.35rem 0.6rem; border-radius: var(--radius-sm);
  }
  .mega-footer-bar a.hub-btn:hover { background: var(--brand-50); }
  .mega-footer-bar .footer-note-text { color: var(--ink-secondary); font-size: 0.82rem; }
}

/* Search Results Page Styles */
.search-hero-form { max-width: 720px; }
.search-input-wrap {
  display: flex; align-items: center; gap: 0.5rem; background: #ffffff;
  padding: 0.45rem 0.5rem 0.45rem 1rem; border: 1px solid var(--line);
  border-radius: var(--radius-pill); box-shadow: var(--shadow);
}
.search-input-wrap:focus-within {
  border-color: var(--brand-600); box-shadow: 0 0 0 4px rgba(0, 93, 208, 0.18);
}
.search-icon-badge { flex: none; display: flex; align-items: center; color: var(--brand-700); }
.search-icon-badge svg { width: 22px; height: 22px; fill: currentColor; }
.search-hero-input {
  flex: 1 1 auto; border: 0; background: transparent; font-size: 1.05rem;
  color: var(--ink); padding: 0.2rem 0.5rem; outline: none; box-shadow: none;
}
.search-hero-input:focus { border: 0; box-shadow: none; outline: none; }
.search-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--step--1); }
.search-popular-label { font-weight: 700; color: var(--ink-secondary); }
.search-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

.search-results-bar {
  display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line); margin-bottom: var(--sp-3);
}
@media (min-width: 768px) {
  .search-results-bar { flex-direction: row; align-items: center; justify-content: space-between; }
}
.search-filter-tabs {
  display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center;
}
.search-tab {
  display: inline-flex; align-items: center; padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill); background: var(--surface-soft);
  border: 1px solid var(--line-soft); font-size: var(--step--1); font-weight: 680;
  color: var(--ink-secondary); text-decoration: none; transition: all var(--transition);
}
.search-tab:hover { background: var(--brand-50); color: var(--navy-900); text-decoration: none; }
.search-tab.is-active {
  background: var(--brand-700); color: #ffffff; border-color: var(--brand-700);
}
.search-results-grid {
  display: grid; gap: var(--sp-3); grid-template-columns: 1fr;
}
@media (min-width: 680px) {
  .search-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .search-results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.search-result-card {
  display: flex; flex-direction: column; height: 100%;
}
.search-card-header {
  display: flex; align-items: center; gap: 0.75rem;
}
.search-card-meta-wrap {
  display: flex; flex-direction: column; gap: 0.2rem;
}
.search-card-submeta {
  font-size: 0.76rem; color: var(--ink-tertiary); font-weight: 600;
}
.search-card-title {
  font-size: 1.15rem; line-height: 1.3; margin: 0;
}
.search-card-title a {
  color: var(--navy-900); text-decoration: none;
}
.search-card-title a:hover {
  color: var(--brand-700); text-decoration: underline;
}
.search-card-summary {
  font-size: var(--step--1); margin: 0.4rem 0 var(--sp-2); flex: 1 1 auto;
}
.search-highlight {
  background: #ffe599; color: var(--navy-950); padding: 0.05rem 0.2rem; border-radius: 3px; font-weight: 700;
}

/* --------------------------------------------------------------------------
   27. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .utility-bar, .site-footer, .action-bar, .nav-toggle, .toc, .decider, .chip-row, .cta-inline { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .card, .panel { border: 1px solid var(--navy-700); box-shadow: none; }
  .bg-deep { background: #ffffff; color: #000; }
  .bg-deep h2, .bg-deep h3 { color: #000; }
}

/* --------------------------------------------------------------------------
   28. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   29. Forced colors and high contrast
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .btn, .chip, .tab { border: 2px solid ButtonText; }
  .choice:has(input:checked) { outline: 2px solid Highlight; }
  .accordion-trigger .chev, .open-status .dot { forced-color-adjust: none; }
}

/* ==========================================================================
   Motion (see assets/js/motion.js and docs/motion-and-typography.html)
   ========================================================================== */

/* Kinetic hero headline. Each word rises out of its own mask in sequence from
   the first paint. The mask is padded so descenders and accents are never
   clipped, and the negative margin keeps the line height exactly as before. */
.kinetic .kw {
  display: inline-block; vertical-align: top; overflow: hidden;
  padding: 0.06em 0 0.18em; margin: -0.06em 0 -0.18em;
}
.kinetic .kw-in {
  display: inline-block;
  animation: kw-rise 0.9s cubic-bezier(0.19, 1, 0.22, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes kw-rise {
  from { transform: translateY(105%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* The hero eyebrow sweeps in left to right without splitting its text. */
.hero .eyebrow { animation: eyebrow-sweep 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.1s both; }
@keyframes eyebrow-sweep {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* The hero photograph settles in, from the first paint, in CSS. */
.hero-media { animation: hero-media-in 0.9s var(--ease) 0.15s both; }
@keyframes hero-media-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* Section headings split by SplitText: the word masks keep descenders. */
.kinetic-word-mask { padding-bottom: 0.14em; margin-bottom: -0.14em; }

@media (prefers-reduced-motion: reduce) {
  .kinetic .kw-in, .hero .eyebrow, .hero-media { animation: none; }
}

/* Paper never waits for a scroll. Everything prints in place. */
@media print {
  .kinetic .kw-in, .hero .eyebrow, .hero-media { animation: none !important; }
  [data-motion], [data-motion] *, .kinetic-word { opacity: 1 !important; transform: none !important; }
}