/* ==========================================================================
   Degree of Comfort LLC — v3 "Steward" Design System
   Carrier Brand Guidelines v2.5 + cognitive-clarity principles

   Principles encoded in this file:
   1. Whitespace is structure. Sections are separated by space, not lines.
   2. Proximity groups; distance separates. Spacing tokens are deliberately
      few (--space-1 … --space-6) so relationships stay legible.
   3. One primary action per view. Only .btn-primary uses Electric Blue fill.
   4. Rule of three type sizes (Carrier 5.2): Headline, Sub-headline, Body,
      plus one small label size for eyebrows, meta, and footer copy.
   5. White dominates (Carrier 4.0). Blue is reserved for meaning:
      actions, links, and the brand frame.
   6. Every state is visible: focus, hover, current page, open, invalid, and
      success are all styled explicitly.
   ========================================================================== */

@layer reset, theme, base, components, utilities;

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap');

/* --------------------------------------------------------------------------
   THEME — Carrier v2.5 tokens
   -------------------------------------------------------------------------- */
@layer theme {
  :root {
    interpolate-size: allow-keywords;

    /* Primary palette */
    --carrier-blue: #152C73;
    --carrier-electric-blue: #002EFF;
    --carrier-white: #FFFFFF;

    /* Secondary palette */
    --carrier-light-blue-1: #009CFF;
    --carrier-gray-1: #F6F4F2;
    --carrier-gray-2: #DAD8D6;
    --carrier-gray-3: #BDBCBB;
    --carrier-gray-8: #313131;

    /* Accents — highlights and gradients only */
    --carrier-yellow-1: #FFC400;
    --carrier-green-1: #1BAF2D;

    /* Functional */
    --carrier-black: #000000;
    --carrier-error-red: #EA0029;
    --carrier-confirm-green: #008043;

    /* Semantic roles (legacy names kept so every page inherits the system) */
    --color-white: var(--carrier-white);
    --color-surface: var(--carrier-white);
    --color-surface-subtle: var(--carrier-gray-1);
    --color-surface-muted: var(--carrier-gray-2);
    --color-carrier-blue: var(--carrier-blue);
    --color-electric-blue: var(--carrier-electric-blue);
    --color-light-blue: var(--carrier-light-blue-1);
    --color-text-main: var(--carrier-black);
    --color-text-brand: var(--carrier-blue);
    --color-text-muted: var(--carrier-gray-8);
    --color-border: var(--carrier-gray-2);
    --color-border-strong: var(--carrier-gray-3);
    --color-error: var(--carrier-error-red);
    --color-success: var(--carrier-confirm-green);

    /* Typography — Carrier Roobert → geometric fallback → Arial */
    --font-brand: 'Roobert', 'Carrier Roobert', 'Plus Jakarta Sans', Arial, sans-serif;
    --font-system: Arial, Helvetica, sans-serif;
    --font-mono: var(--font-brand); /* one family only: fewer signals to parse */

    /* Type scale — Carrier proportions (Sub-headline = ½ Headline, Body ≈ ¼) */
    --fs-headline: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
    --fs-subhead: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
    --fs-body: 1.0625rem;
    --fs-small: 0.8125rem;

    /* Spacing — a short, intentional scale */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;
    --space-6: clamp(5rem, 3rem + 7vw, 9rem); /* between sections */

    /* Layout */
    --max-width: 1200px;
    --content-width: 720px;
    --measure: 62ch;
    --radius-frame: 12px; /* Carrier graphic device: one radius everywhere */
    --radius-sm: 12px;
    --radius-pill: 9999px;
    --frame: clamp(10px, 2.5vw, 28px); /* module outer frame width */
    --transition: 160ms ease-out;
    --focus-ring: 0 0 0 3px var(--color-white), 0 0 0 5px var(--color-electric-blue);
  }
}

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd,
  fieldset, legend { margin: 0; padding: 0; }
  fieldset { border: 0; min-width: 0; }
  button, input, select, textarea { font: inherit; color: inherit; }
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    -webkit-text-size-adjust: 100%;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }

  body {
    font-family: var(--font-brand);
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--color-text-main);
    background: var(--color-surface);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
  }

  main { flex: 1 0 auto; }

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

  a {
    color: var(--color-electric-blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--transition);
  }
  a:hover { color: var(--color-carrier-blue); }

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

  /* Headline: Light, Title Case, 1.15 leading (Carrier 5.2) */
  h1, h2 {
    font-weight: 300;
    line-height: 1.15;
    color: var(--color-carrier-blue);
    text-wrap: balance;
  }
  h1 { font-size: var(--fs-headline); max-width: 18ch; margin-block-end: var(--space-3); }
  h2 { font-size: var(--fs-subhead); max-width: 28ch; margin-block-end: var(--space-2); }

  /* Sub-headline role at body size, SemiBold — weight, not size, signals rank */
  h3, h4 {
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-carrier-blue);
    margin-block-end: var(--space-1);
    text-wrap: balance;
  }

  p, li, blockquote {
    color: var(--color-text-muted);
    max-width: var(--measure);
    text-wrap: pretty;
  }
  p { margin-block-end: var(--space-2); }
  p:last-child { margin-block-end: 0; }

  ul, ol { padding-inline-start: 1.25rem; margin-block-end: var(--space-2); }
  li + li { margin-block-start: var(--space-1); }

  strong { font-weight: 600; color: var(--color-carrier-blue); }
  em { font-style: normal; color: var(--color-text-muted); }
}

/* --------------------------------------------------------------------------
   COMPONENTS
   -------------------------------------------------------------------------- */
@layer components {

  /* ---------- Skip link (keyboard users reach content first) ---------- */
  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-2);
    top: -100px;
    z-index: 2000;
    background: var(--color-carrier-blue);
    color: var(--color-white);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-frame);
    font-weight: 600;
    text-decoration: none;
  }
  .skip-link:focus { top: var(--space-2); color: var(--color-white); }

  /* ---------- Layout ---------- */
  .container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  }
  .container-narrow {
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  }

  /* Sections are separated by space. A gray field is used only to group. */
  .section,
  .section-subtle { padding-block: var(--space-6); }
  .section-subtle { background: var(--color-surface-subtle); }
  .section + .section { padding-block-start: 0; }

  .section-header { max-width: 640px; margin-block-end: var(--space-5); }
  .section-header > p { font-size: var(--fs-body); }
  .section-header.centered { margin-inline: auto; text-align: center; }
  .section-header.centered h2,
  .section-header.centered p { margin-inline: auto; }

  /* Eyebrow: Medium, ALL CAPS, 0.2em tracking (Carrier 5.3). Plain text, no chip. */
  .eyebrow {
    display: block;
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--color-electric-blue);
    margin-block-end: var(--space-2);
  }

  /* Legacy decorative pulses are removed: a "live" signal must be truthful. */
  .live-dot, .eyebrow-dot, .dealer-pill, .top-bar { display: none !important; }

  /* ---------- Header ---------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(180%) blur(10px);
    border-block-end: 1px solid transparent;
    transition: border-color var(--transition);
  }
  .site-header.is-scrolled { border-block-end-color: var(--color-border); }

  .header-inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 80px;
  }

  .brand-group, .brand-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex-shrink: 0;
  }
  .brand-logo img { width: 40px; height: auto; }
  .brand-text { display: flex; flex-direction: column; }
  .brand-name {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--color-carrier-blue);
    line-height: 1.2;
    white-space: nowrap;
  }
  .brand-tagline {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    white-space: nowrap;
  }

  .main-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-inline-start: auto;
  }
  .nav-item { position: relative; }
  .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding-block: var(--space-1);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-carrier-blue);
    text-decoration: none;
    border-block-end: 2px solid transparent;
    white-space: nowrap;
  }
  .nav-link:hover { color: var(--color-electric-blue); }
  .nav-link.active,
  .nav-link[aria-current="page"] {
    color: var(--color-electric-blue);
    border-block-end-color: var(--color-electric-blue);
  }
  /* Disclosure cue for items that hide children */
  .nav-item.has-menu > .nav-link::after {
    content: "";
    width: 0.4em;
    height: 0.4em;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
    transition: transform var(--transition);
  }
  .nav-item.has-menu:hover > .nav-link::after,
  .nav-item.has-menu:focus-within > .nav-link::after {
    transform: translateY(0.05em) rotate(225deg);
  }

  .dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    inset-inline-start: -1rem;
    min-width: 260px;
    padding: var(--space-1);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-frame);
    box-shadow: 0 16px 40px -12px rgba(21, 44, 115, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  /* Invisible bridge so the pointer never "falls through" the gap */
  .dropdown-menu::before {
    content: "";
    position: absolute;
    inset: -0.75rem 0 auto 0;
    height: 0.75rem;
  }
  .nav-item:hover .dropdown-menu,
  .nav-item:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .dropdown-menu a {
    display: block;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: var(--color-carrier-blue);
    text-decoration: none;
  }
  .dropdown-menu a:hover,
  .dropdown-menu a[aria-current="page"] {
    background: var(--color-surface-subtle);
    color: var(--color-electric-blue);
  }

  .header-cta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
  }
  .header-phone {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-carrier-blue);
    text-decoration: none;
    white-space: nowrap;
  }
  .header-phone:hover { color: var(--color-electric-blue); }

  .mobile-menu-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: var(--color-white);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-frame);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-carrier-blue);
    cursor: pointer;
  }

  /* ---------- Buttons: one primary per view ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px; /* comfortable touch target */
    padding: 0.75rem 1.5rem;
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--radius-frame);
    border: 1.5px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
  }
  .btn-primary {
    background: var(--color-electric-blue);
    border-color: var(--color-electric-blue);
    color: var(--color-white);
  }
  .btn-primary:hover {
    background: var(--color-carrier-blue);
    border-color: var(--color-carrier-blue);
    color: var(--color-white);
  }
  .btn-secondary {
    background: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-carrier-blue);
  }
  .btn-secondary:hover {
    border-color: var(--color-carrier-blue);
    color: var(--color-carrier-blue);
  }
  .btn-sm { min-height: 44px; padding: 0.5rem 1.125rem; font-size: 0.9375rem; }
  .btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }

  /* Quiet text action — used for secondary paths so the primary stays singular */
  .text-link {
    font-weight: 600;
    color: var(--color-electric-blue);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--transition), color var(--transition);
  }
  .text-link:hover { text-decoration-color: currentColor; }

  /* ---------- Hero ---------- */
  .hero { padding-block: var(--space-5) var(--space-6); }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
  }
  .hero-subtitle {
    font-size: var(--fs-body);
    max-width: 52ch;
    margin-block-end: var(--space-4);
  }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-block-end: var(--space-3);
  }
  .hero-hours-note {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
  }

  /* ---------- Confidence row: verifiable facts, stated once ---------- */
  .confidence-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: var(--fs-small);
    color: var(--color-text-muted);
  }
  .confidence-row li { margin: 0; display: inline-flex; align-items: center; gap: 0.5rem; }
  .confidence-row strong { color: var(--color-text-main); }

  /* Truthful open/closed status, computed from Eastern Time in main.js */
  .hours-status { display: inline-flex; align-items: center; gap: 0.5rem; }
  .hours-status::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-border-strong);
    flex-shrink: 0;
  }
  .hours-status[data-state="open"]::before { background: var(--color-success); }
  .hours-status[data-state="closed"]::before { background: var(--color-border-strong); }

  /* ---------- Carrier Module (Graphic Device 6.2) ----------
     Outer frame sits upper-right, outside the image, with a single-color 45°
     gradient from 100% at the top-right corner to 0%. The inset gradation is
     White only, 100% at the bottom-left corner, multiplied over the image. */
  .carrier-module {
    position: relative;
    margin: 0;
    padding: var(--frame) var(--frame) 0 0;
    border-radius: var(--radius-frame);
    background: linear-gradient(225deg, var(--carrier-electric-blue) 0%, rgba(0, 46, 255, 0) 55%);
  }
  .carrier-module--purification {
    background: linear-gradient(225deg, var(--carrier-light-blue-1) 0%, rgba(0, 156, 255, 0) 55%);
  }
  .carrier-module--sustainability {
    background: linear-gradient(225deg, var(--carrier-green-1) 0%, rgba(27, 175, 45, 0) 55%);
  }
  .carrier-module .module-image {
    position: relative;
    border-radius: var(--radius-frame);
    overflow: hidden;
  }
  .carrier-module .module-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 38%);
    pointer-events: none;
  }
  .carrier-module img {
    width: 100%;
    border-radius: var(--radius-frame);
    object-fit: cover;
  }
  .carrier-module figcaption {
    padding: var(--space-2) 0 0;
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    background: var(--color-white);
  }
  .carrier-module figcaption strong { color: var(--color-carrier-blue); }

  /* ---------- Frames and cards (Content Frames 6.1) ---------- */
  .hero-card,
  .feature-box {
    background: var(--color-surface-subtle);
    border-radius: var(--radius-frame);
    padding: clamp(1.5rem, 3vw, 2.5rem);
  }
  .section-subtle .feature-box,
  .section-subtle .hero-card { background: var(--color-white); }

  .hero-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-3);
  }
  .hero-card-header img { width: 44px; height: auto; }
  .hero-card h2 { font-size: var(--fs-body) !important; font-weight: 600; }

  .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100%;
    padding: clamp(1.5rem, 2.5vw, 2rem);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-frame);
    transition: border-color var(--transition);
  }
  .section-subtle .card { border-color: transparent; }
  .card > div:first-child { flex: 1; }
  .card p { margin-block-end: var(--space-2); }

  /* Interactive cards announce themselves; static cards do not react */
  a.card { text-decoration: none; color: inherit; }
  a.card:hover,
  .card:has(.card-link:hover) { border-color: var(--color-electric-blue); }

  /* Progressive disclosure for additional reviews */
  .reviews-more {
    margin-block-start: var(--space-4);
  }
  .reviews-more > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-frame);
    background: var(--color-white);
    font-weight: 600;
    color: var(--color-carrier-blue);
    cursor: pointer;
    list-style: none;
    transition: border-color var(--transition), color var(--transition);
  }
  .reviews-more > summary::-webkit-details-marker { display: none; }
  .reviews-more > summary:hover {
    border-color: var(--color-electric-blue);
    color: var(--color-electric-blue);
  }
  .reviews-more > summary::before {
    content: "+";
    font-weight: 400;
    font-size: 1.25em;
    line-height: 1;
    color: var(--color-electric-blue);
  }
  .reviews-more[open] > summary::before { content: "−"; }
  .reviews-more[open] > summary { margin-block-end: var(--space-3); }

  .card-meta-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-1);
    margin-block-end: var(--space-2);
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .card-link {
    margin-block-start: auto;
    font-weight: 600;
    color: var(--color-electric-blue);
    text-decoration: none;
  }
  .card-link::after { content: "  →"; white-space: pre; }
  .card-link:hover { text-decoration: underline; }

  /* ---------- Lists ---------- */
  .trust-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
  .trust-list li {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    color: var(--color-text-main);
  }
  .trust-list li + li { margin-block-start: var(--space-2); }
  .check-icon, .cross-icon { flex-shrink: 0; font-weight: 600; }
  .check-icon { color: var(--color-electric-blue); }
  .cross-icon { color: var(--color-text-muted); }

  /* Numbered steps: shows the path so nothing must be remembered */
  .steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    counter-reset: step;
  }
  .steps li { counter-increment: step; margin: 0; max-width: none; }
  .steps li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-block-end: var(--space-2);
    border-radius: 50%;
    border: 1.5px solid var(--color-electric-blue);
    color: var(--color-electric-blue);
    font-weight: 600;
    font-size: var(--fs-small);
  }

  /* ---------- Grids ---------- */
  .grid-2, .grid-3, .grid-4 { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* ---------- Quote (single testimonial, given room) ---------- */
  .quote {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
  }
  .quote blockquote p {
    font-size: var(--fs-subhead);
    font-weight: 300;
    line-height: 1.3;
    color: var(--color-carrier-blue);
    max-width: none;
    margin-block-end: var(--space-3);
  }
  .quote figcaption { font-size: var(--fs-small); color: var(--color-text-muted); }
  .quote figcaption strong { display: block; font-size: var(--fs-body); }
  .review-stars { color: var(--color-carrier-blue); letter-spacing: 0.15em; }

  /* ---------- Service-area corridor ---------- */
  .corridor-card { padding: 0; }
  .corridor {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-block-start: 1.5px solid var(--color-border);
  }
  .corridor li { margin: 0; max-width: none; }
  .corridor-stop {
    position: relative;
    display: block;
    padding: var(--space-3) var(--space-2) 0 0;
    text-decoration: none;
    color: inherit;
  }
  .corridor-stop::before {
    content: "";
    position: absolute;
    top: -6.5px;
    inset-inline-start: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--color-white);
    border: 1.5px solid var(--color-electric-blue);
    transition: background-color var(--transition);
  }
  .corridor-stop:hover::before,
  .corridor-stop[aria-current="page"]::before { background: var(--color-electric-blue); }
  .corridor-stop:hover h3,
  .corridor-stop[aria-current="page"] h3 { color: var(--color-electric-blue); }
  .corridor-mm {
    display: block;
    font-size: var(--fs-small);
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    margin-block-end: 0.25rem;
  }

  /* ---------- FAQ: progressive disclosure ---------- */
  .faq-list { max-width: var(--content-width); margin-inline: auto; }
  details.faq-item { border-block-end: 1px solid var(--color-border); }
  details.faq-item:first-child { border-block-start: 1px solid var(--color-border); }
  details.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-3);
    font-weight: 600;
    color: var(--color-carrier-blue);
    cursor: pointer;
    list-style: none;
  }
  details.faq-item summary::-webkit-details-marker { display: none; }
  details.faq-item summary::after {
    content: "";
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-inline-end: 1.5px solid var(--color-electric-blue);
    border-block-end: 1.5px solid var(--color-electric-blue);
    transform: rotate(45deg);
    transition: transform var(--transition);
  }
  details.faq-item[open] summary::after { transform: rotate(225deg); }
  details.faq-item summary:hover { color: var(--color-electric-blue); }
  .faq-answer { padding-block-end: var(--space-3); }

  /* ---------- Breadcrumbs: you are here ---------- */
  .breadcrumbs {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    margin-block-end: var(--space-3);
  }
  .breadcrumbs a { color: var(--color-text-muted); }
  .breadcrumbs a:hover { color: var(--color-electric-blue); }
  .breadcrumbs span { margin-inline: 0.4rem; color: var(--color-border-strong); }

  /* ---------- Closing call to action ---------- */
  .cta-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: clamp(2rem, 5vw, 4rem);
    background: var(--color-carrier-blue);
    border-radius: var(--radius-frame);
    color: var(--color-white);
  }
  .cta-banner h2, .cta-banner p, .cta-banner strong { color: var(--color-white); }
  .cta-banner .eyebrow { color: var(--color-white); opacity: 0.9; }
  .cta-banner p { opacity: 0.9; }
  .cta-banner > div:first-child { max-width: 560px; }
  .cta-banner > div:last-child { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
  /* White on Carrier Blue, inverse pairing (AAA) */
  .cta-banner .btn-primary { background: var(--color-white); border-color: var(--color-white); color: var(--color-carrier-blue); }
  .cta-banner .btn-primary:hover { background: var(--color-surface-subtle); border-color: var(--color-surface-subtle); color: var(--color-carrier-blue); }
  .cta-banner .btn-secondary { border-color: rgba(255, 255, 255, 0.6); color: var(--color-white); }
  .cta-banner .btn-secondary:hover { border-color: var(--color-white); color: var(--color-white); }
  .cta-banner a:not(.btn) { color: var(--color-white); }

  /* ---------- Forms: visible state at every step ---------- */
  .form-group { margin-block-end: var(--space-3); }
  .form-group > label,
  .form-label,
  fieldset > legend {
    display: block;
    margin-block-end: var(--space-1);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-carrier-blue);
  }
  .optional { font-weight: 400; color: var(--color-text-muted); }
  .form-hint { display: block; margin-block: -0.25rem var(--space-1); font-size: var(--fs-small); color: var(--color-text-muted); }

  .form-control {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1rem;
    font-size: var(--fs-body);
    color: var(--color-text-main);
    background: var(--color-white);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-frame);
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .form-control::placeholder { color: #6b6a69; }
  .form-control:hover { border-color: var(--color-text-muted); }
  .form-control:focus {
    outline: none;
    border-color: var(--color-electric-blue);
    box-shadow: 0 0 0 3px rgba(0, 46, 255, 0.18);
  }
  .form-control:user-invalid,
  .form-control[aria-invalid="true"] { border-color: var(--color-error); }
  .form-control[aria-invalid="false"].was-checked { border-color: var(--color-success); }
  textarea.form-control { min-height: 120px; resize: vertical; }

  .field-error {
    display: flex;
    gap: 0.5rem;
    margin-block-start: var(--space-1);
    font-size: 0.9375rem;
    color: #B00020; /* error red darkened for AA text contrast on white */
  }
  .field-error:empty { display: none; }

  /* Choice cards: all options visible — recognition over recall */
  .choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .choice {
    position: relative;
    display: block;
    cursor: pointer;
  }
  .choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
  .choice-body {
    display: block;
    height: 100%;
    padding: 0.875rem 1rem;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-frame);
    background: var(--color-white);
    transition: border-color var(--transition), background-color var(--transition);
  }
  .choice-title { display: block; font-weight: 600; color: var(--color-carrier-blue); }
  .choice-desc { display: block; font-size: var(--fs-small); color: var(--color-text-muted); }
  .choice:hover .choice-body { border-color: var(--color-text-muted); }
  .choice input:checked + .choice-body {
    border-color: var(--color-electric-blue);
    background: rgba(0, 46, 255, 0.04);
    box-shadow: inset 0 0 0 1px var(--color-electric-blue);
  }
  .choice input:focus-visible + .choice-body { box-shadow: var(--focus-ring); }

  /* Progressive disclosure inside the form */
  .disclosure > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--color-electric-blue);
    cursor: pointer;
    list-style: none;
    margin-block-end: var(--space-2);
  }
  .disclosure > summary::-webkit-details-marker { display: none; }
  .disclosure > summary::before { content: "+"; font-weight: 400; font-size: 1.25em; line-height: 1; }
  .disclosure[open] > summary::before { content: "−"; }

  /* Status messages — calm, specific, with a next step */
  .notice {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    border-radius: var(--radius-frame);
    border: 1.5px solid var(--color-border);
    background: var(--color-surface-subtle);
  }
  .notice[hidden] { display: none; }
  .notice h3 { margin: 0; }
  .notice p { margin: 0; }
  .notice-success { border-color: var(--color-success); background: #F2FAF5; }
  .notice-error { border-color: var(--color-error); background: #FFF5F6; }
  .notice-actions { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-block-start: var(--space-1); }

  .form-assurance {
    margin-block-start: var(--space-2);
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    text-align: center;
  }

  /* Contact facts: label / value pairs grouped by proximity */
  .fact-list { display: grid; gap: var(--space-3); margin: 0; }
  .fact-list dt {
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-block-end: 0.25rem;
  }
  .fact-list dd { margin: 0; color: var(--color-text-main); }
  .fact-list dd a { font-weight: 600; }

  /* ---------- Co-brand strip (Brand-building touchpoints) ---------- */
  .cobrand-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border);
  }
  .cobrand-strip-left { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
  .cobrand-strip-left img { width: 160px; min-width: 120px; height: auto; }

  /* ---------- Footer: Carrier Blue, logo lower-left ---------- */
  .site-footer {
    background: var(--color-carrier-blue);
    color: var(--color-white);
    padding-block: var(--space-5) var(--space-4);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-4);
    padding-block-end: var(--space-5);
  }
  .site-footer h3,
  .site-footer h4 { color: var(--color-white); }
  .site-footer h4 {
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-block-end: var(--space-2);
  }
  .site-footer p,
  .site-footer li { color: rgba(255, 255, 255, 0.86); font-size: 0.9375rem; }
  .site-footer a { color: var(--color-white); text-decoration: none; }
  .site-footer a:hover { text-decoration: underline; color: var(--color-white); }
  .site-footer :focus-visible { box-shadow: 0 0 0 2px var(--color-carrier-blue), 0 0 0 4px var(--color-white); }
  .site-footer strong { color: var(--color-white); }
  .footer-links { list-style: none; padding: 0; margin: 0; }
  .footer-links li + li { margin-block-start: 0.625rem; }
  .footer-contact { display: grid; gap: 0.375rem; font-style: normal; }
  .footer-contact .footer-phone { font-size: var(--fs-subhead); font-weight: 300; line-height: 1.2; }

  .footer-cobrand-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-3);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid rgba(255, 255, 255, 0.16);
  }
  .carrier-badge-wrapper img { width: 180px; min-width: 120px; height: auto; } /* ≥120px digital minimum */
  .carrier-badge-wrapper img.carrier-oval { width: 140px; }
  .footer-legal p {
    font-size: var(--fs-small);
    color: rgba(255, 255, 255, 0.78);
    max-width: none;
    margin: 0;
    text-align: end;
  }
  .footer-legal p + p { margin-block-start: 0.25rem; }

  /* ---------- Contact layout: the task leads, context supports ---------- */
  .contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
  }
  .contact-layout .notice { margin-block-end: var(--space-4); }
  .contact-layout aside { position: sticky; top: 112px; }
  .steps-vertical { grid-template-columns: 1fr; gap: var(--space-3); }
  .steps-vertical li { display: grid; grid-template-columns: 2.25rem 1fr; column-gap: var(--space-2); }
  .steps-vertical li::before { grid-row: span 2; margin: 0; }
  .hours-status:empty { display: none; }

  /* ---------- Fallback page (404 / unexpected) ---------- */
  .fallback { text-align: center; }
  .fallback h1, .fallback p { margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   UTILITIES + RESPONSIVE
   -------------------------------------------------------------------------- */
@layer utilities {
  .align-center { align-items: center; }
  .mb-0 { margin-block-end: 0 !important; }
  .mb-lg { margin-block-end: var(--space-5); }
  .mt-md { margin-block-start: var(--space-3); }
  .text-electric { color: var(--color-electric-blue); font-weight: 600; }
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  @media (max-width: 1100px) {
    .header-phone { display: none; }
    .main-nav { gap: var(--space-2); }
  }

  @media (max-width: 960px) {
    .hero-grid,
    .grid-2, .grid-3, .grid-4,
    .footer-grid,
    .steps,
    .contact-layout { grid-template-columns: 1fr; }
    .contact-layout aside { position: static; }
    .hero-grid .carrier-module { order: -1; max-width: 560px; }

    .corridor { grid-template-columns: 1fr; border-block-start: 0; border-inline-start: 1.5px solid var(--color-border); }
    .corridor-stop { padding: 0 0 var(--space-3) var(--space-3); }
    .corridor-stop::before { top: 0.35rem; inset-inline-start: -6.5px; }

    .header-inner { gap: var(--space-2); }
    .mobile-menu-toggle { display: inline-flex; margin-inline-start: auto; }
    .header-cta .btn { display: none; }
    .header-cta .header-call { display: inline-flex; }

    .main-nav {
      display: none;
      position: absolute;
      top: 100%;
      inset-inline: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: var(--space-2) clamp(1.25rem, 4vw, 2.5rem) var(--space-3);
      background: var(--color-white);
      border-block-end: 1px solid var(--color-border);
      box-shadow: 0 16px 32px -16px rgba(21, 44, 115, 0.2);
      max-height: calc(100dvh - 80px);
      overflow-y: auto;
    }
    .main-nav.open { display: flex; }
    .nav-link { padding-block: 0.875rem; width: 100%; border-block-end: 1px solid var(--color-border); }
    .nav-link.active, .nav-link[aria-current="page"] { border-block-end-color: var(--color-border); }
    .nav-item.has-menu > .nav-link::after { display: none; }
    .dropdown-menu {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      border: 0;
      min-width: 0;
      padding: 0 0 var(--space-1) var(--space-2);
    }
    .dropdown-menu::before { display: none; }
    .main-nav .nav-cta { margin-block-start: var(--space-3); width: 100%; }

    .footer-legal p { text-align: start; }
    .choice-grid { grid-template-columns: 1fr; }
  }

  @media (min-width: 961px) {
    .main-nav .nav-cta { display: none; }
    .header-call { display: none; }
  }

  @media (max-width: 480px) {
    .brand-tagline { display: none; }
    .hero-actions .btn { width: 100%; }
  }
}