/*! qrops-theme.css — QROPS Transfer premium theme
 * Shared, page-agnostic theme foundation (tokens + base + type scale).
 *
 * Layer order is declared up front so later tasks can append component and
 * section rules and have the cascade resolve predictably:
 *   tokens      -> :root design tokens (single source of truth)
 *   base        -> reset, html/body, type scale, focus, reduced-motion, layout utilities
 *   components  -> reusable component styles        (appended by task 4.1)
 *   sections    -> homepage section composition     (appended by task 4.2)
 */

@layer tokens, base, components, sections;

/* Fonts: Cormorant Garamond (headings) + DM Sans (body), loaded with
 * font-display: swap so text is never blocked while fonts download (Req 16.1).
 * The <link rel="preconnect"> hints to the Google Fonts origins are added in
 * index.html (task 6.1); the @import here keeps the theme self-contained. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=DM+Sans:wght@400;500;700&display=swap");

/* ========================================================================== *
 * @layer tokens — design tokens (Req 1.1–1.5, type & layout)
 * ========================================================================== */
@layer tokens {
  :root {
    /* Backgrounds — white + cool light tints */
    --bg-primary: #FFFFFF;
    --bg-soft: #F4F8FA;
    --bg-ivory: #EAF3F4;
    --bg-dark: #0A2540;          /* deep blue */

    /* Deep blue (dark sections, headings, borders) */
    --navy: #0A2540;
    --navy-mid: #143A5E;
    --navy-muted: rgba(10, 37, 64, .55);
    --navy-border: rgba(10, 37, 64, .12);

    /* Accent — clear teal / greenish-blue. The --gold* names are kept as
     * aliases so existing rules adopt the new accent with no churn. True gold
     * is reserved exclusively for rating stars (--star). */
    --teal: #0EA5A4;
    --teal-deep: #087371;
    --gold: #0EA5A4;             /* accent (teal) */
    --gold-hover: #14C7C5;       /* brighter teal */
    --gold-muted: rgba(14, 165, 164, .10);
    --gold-border: rgba(14, 165, 164, .35);

    /* Text */
    --text-headline: #0A2540;
    --text-body: #475569;
    --text-muted: #7C8DA0;
    --text-gold: #087371;        /* teal accent text (AA on white) */

    /* Rating-star gold — the ONLY place gold appears */
    --star: #E0A93B;

    /* Glass */
    --glass-fill: rgba(255, 255, 255, .08);
    --glass-border: rgba(255, 255, 255, .16);
    --glass-blur: blur(16px);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, .35);

    /* Type (Req 1.6, 1.7) */
    --font-head: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    /* Layout (Req 1.9, 1.10, 14.3) */
    --container: 1200px;
    --section-pad: 96px;
    --section-pad-sm: 64px;
    --container-pad-sm: 20px;
    /* Desktop container gutter; swapped to --container-pad-sm at <=768px below. */
    --container-pad: 32px;
  }

  /* Mobile container gutter (Req 14.3): swap the value at the token level so the
   * 20px gutter holds no matter which layer ultimately defines .qr-container. */
  @media (max-width: 768px) {
    :root { --container-pad: var(--container-pad-sm); }
  }
}

/* ========================================================================== *
 * @layer base — reset, document defaults, type scale, focus, reduced motion
 * ========================================================================== */
@layer base {
  /* Reset */
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;            /* body paragraph line-height (Req 1.8) */
    color: var(--text-body);
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
  }

  /* Replaced elements: block + fluid to help prevent horizontal overflow (Req 14.4) */
  img, svg, video, canvas, picture { display: block; max-width: 100%; height: auto; }

  /* Form controls inherit typography */
  input, button, textarea, select { font: inherit; color: inherit; }

  a { color: inherit; text-decoration: none; }

  /* Headings render in Cormorant Garamond (Req 1.7) */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    color: var(--text-headline);
    font-weight: 600;
    line-height: 1.1;
    text-wrap: balance;
  }

  /* ---- Type scale (Req 1.8) ---- */
  h1, .qr-h1 { font-weight: 700; font-size: 72px; line-height: 1.05; letter-spacing: -.01em; }
  h2, .qr-h2 { font-weight: 600; font-size: 48px; line-height: 1.12; }
  h3, .qr-h3 { font-weight: 600; font-size: 28px; line-height: 1.2; }

  p, .qr-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-body);
  }

  .qr-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-gold);
  }

  /* Display stat number — gold, headline weight (Req 1.8) */
  .qr-stat-num {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 56px;
    line-height: 1;
    color: var(--text-gold);
  }

  /* ---- Responsive H1 sizes (Req 14.1, 14.2) ---- */
  @media (max-width: 1024px) {
    h1, .qr-h1 { font-size: 52px; }
  }
  @media (max-width: 768px) {
    h1, .qr-h1 { font-size: 38px; }
  }

  /* Visible keyboard focus indicator (Req 15.2) */
  :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
  }
  /* Avoid double focus rings where :focus-visible is supported */
  :focus:not(:focus-visible) { outline: none; }

  /* Reduced-motion base rule (Req 15.5): neutralise non-essential motion. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* ---- Layout utilities ---- */
  /* Centered content container, max 1200px (Req 1.9); 20px gutter <=768px (Req 14.3). */
  .qr-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  /* Standard section vertical rhythm: 96px desktop (Req 1.10), 64px <=768px (Req 14.3). */
  .qr-section { padding-block: var(--section-pad); }
  @media (max-width: 768px) {
    .qr-section { padding-block: var(--section-pad-sm); }
  }
}

/* ========================================================================== *
 * @layer components — APPENDED BY TASK 4.1
 * (.qr-btn-gold, .qr-btn-ghost, .qr-card, .qr-input, .qr-glass, navbar, footer, …)
 * Note: .qr-container and .qr-section layout utilities are defined in @layer base above.
 * ========================================================================== */
@layer components {
  /* NOTE: .qr-container and .qr-section live in @layer base (task 2.1) and are
   * intentionally NOT redefined here to avoid a conflicting redefinition. */

  /* ------------------------------------------------------------------------ *
   * Buttons — reusable gold pill CTA + ghost pill (Req 1.11, 1.12)
   * ------------------------------------------------------------------------ */

  /* Shared pill geometry for both button styles. */
  .qr-btn-gold,
  .qr-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    padding: 16px 32px;
    border: 1px solid transparent;
    border-radius: 999px;            /* pill shape */
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: background-color .4s cubic-bezier(.16, 1, .3, 1),
                border-color .4s cubic-bezier(.16, 1, .3, 1),
                color .4s cubic-bezier(.16, 1, .3, 1),
                box-shadow .4s cubic-bezier(.16, 1, .3, 1),
                transform .4s cubic-bezier(.16, 1, .3, 1);
  }

  /* Primary accent (teal) pill call-to-action. White text on teal = AA. */
  .qr-btn-gold {
    background-color: var(--gold);
    border-color: var(--gold);
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(14, 148, 136, .26);
  }

  /* Brighten to --gold-hover on hover AND focus (Req 1.12). */
  .qr-btn-gold:hover,
  .qr-btn-gold:focus-visible {
    background-color: var(--gold-hover);
    border-color: var(--gold-hover);
    color: #FFFFFF;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(14, 148, 136, .45);
  }
  .qr-btn-gold:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 4px 12px rgba(14, 148, 136, .26);
  }

  /* Ghost pill — transparent with a light border; the secondary CTA used on
   * dark backgrounds, so its text is light (Req 1.11). */
  .qr-btn-ghost {
    background-color: transparent;
    border-color: var(--glass-border);
    color: var(--bg-primary);
  }
  .qr-btn-ghost:hover,
  .qr-btn-ghost:focus-visible {
    background-color: rgba(255, 255, 255, .08);
    border-color: var(--gold);
    color: var(--gold-hover);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(14, 165, 164, .2);
  }
  .qr-btn-ghost:active {
    transform: translateY(0) scale(0.98);
  }

  /* ------------------------------------------------------------------------ *
   * Card surface (Req 5.3, 5.4, 8.2, 8.4)
   * Base surface lives here; the section layer (task 4.2) composes the
   * problem/solution and scenario cards on top of these hooks.
   * ------------------------------------------------------------------------ */
  .qr-card {
    --qr-card-border: var(--navy-border);
    position: relative;
    background-color: var(--bg-primary);
    color: var(--text-body);
    border: 1px solid var(--qr-card-border);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 1px 2px rgba(11, 20, 38, .04),
                0 12px 32px rgba(11, 20, 38, .06);
  }

  /* Red-tinted "The Fragmented Path" variant (Req 5.3). The wash is light, so
   * the dark body text remains well above the contrast floor. */
  .qr-card--danger {
    background-color: #FCF4F3;
    --qr-card-border: rgba(193, 58, 47, .28);
  }

  /* Gold-tinted "The QROPS Transfer Way" variant (Req 5.4). */
  .qr-card--gold {
    background-color: var(--gold-muted);
    --qr-card-border: var(--gold-border);
  }

  /* Gold top-border accent for scenario cards (Req 8.2). */
  .qr-card--gold-top {
    border-top: 3px solid var(--gold);
  }

  /* Hover lift for scenario cards (Req 8.4). The transform is gated behind
   * prefers-reduced-motion: no-preference so no lift occurs under reduced
   * motion (Req 15.5). */
  .qr-card--lift {
    transition: transform .4s cubic-bezier(.16, 1, .3, 1),
                box-shadow .4s cubic-bezier(.16, 1, .3, 1),
                border-color .4s cubic-bezier(.16, 1, .3, 1);
  }
  @media (prefers-reduced-motion: no-preference) {
    .qr-card--lift:hover {
      transform: translateY(-6px);
      border-color: var(--gold-border);
      box-shadow: 0 4px 12px rgba(11, 20, 38, .04),
                  0 24px 48px rgba(11, 20, 38, .12);
    }
  }

  /* ------------------------------------------------------------------------ *
   * Form input — gold focus border (Req 10.6, 15.2)
   * ------------------------------------------------------------------------ */
  .qr-input {
    display: block;
    width: 100%;
    font-family: var(--font-body);
    font-size: 16px;                 /* >=16px avoids iOS zoom-on-focus */
    line-height: 1.4;
    color: var(--text-headline);
    background-color: var(--bg-primary);
    border: 1px solid var(--navy-border);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .qr-input::placeholder { color: var(--text-muted); }

  /* Gold focus border on both pointer focus and keyboard focus (Req 10.6).
   * The visible keyboard focus ring from :focus-visible (task 2.1, @layer base)
   * still applies for the WCAG focus indicator (Req 15.2). */
  .qr-input:focus,
  .qr-input:focus-visible {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-muted);
  }

  /* ------------------------------------------------------------------------ *
   * Glass surface (Req 1.13) — translucent treatment for dark backgrounds.
   * Used by the navbar, hero stat cards, and testimonial cards. Light text is
   * set so the surface is legible on the dark backgrounds it sits on.
   * ------------------------------------------------------------------------ */
  .qr-glass {
    background-color: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    color: var(--bg-primary);        /* near-white text on dark glass */
  }

  /* Opaque fallback when backdrop-filter is unsupported (Req 16.3, 16.4).
   * --navy-mid (#1A2E4A) keeps white / near-white text far above the 4.5:1
   * floor (~13.7:1), so the contrast guarantee holds with no blur. */
  @supports not (backdrop-filter: blur(1px)) {
    .qr-glass {
      background-color: var(--navy-mid);
    }
  }
}

/* ========================================================================== *
 * @layer sections — APPENDED BY TASK 4.2
 * (.qr-hero, .qr-stats, .qr-timeline, .qr-marquee, .qr-scenarios, …)
 * ========================================================================== */
@layer sections {

  /* ======================================================================== *
   * Shared section-head helper (label + heading + subtitle)
   * Used by problem/solution, marquee, scenarios, testimonials. Timeline uses
   * the --left modifier for its left-aligned head (Req 6.1).
   * ======================================================================== */
  .qr-section-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 56px;
  }
  .qr-section-head--left {
    text-align: left;
    margin-inline: 0;
    max-width: none;
  }
  .qr-section-head .qr-label { display: block; margin-bottom: 14px; }
  .qr-section-head__subtitle {
    color: var(--text-muted);
    margin-top: 14px;
    font-size: 17px;
  }
  @media (max-width: 768px) {
    .qr-section-head { margin-bottom: 40px; }
  }

  /* ======================================================================== *
   * Scroll-reveal — sleek, smooth fade-in with refined ease-out curves.
   * Default: fade-up (subtle 14px). Add data-reveal="left"|"right"|"scale".
   * Hidden initial state applies only when JS has marked <html>.qr-anim-ready.
   * Uses an expo-out curve so motion decelerates softly into place.
   * ======================================================================== */
  @media (prefers-reduced-motion: no-preference) {
    html.qr-anim-ready [data-reveal]:not(.is-visible),
    html.qr-anim-ready .qr-reveal:not(.is-visible) {
      opacity: 0;
      transform: translateY(16px);
      transition:
        opacity .95s cubic-bezier(.16, 1, .3, 1),
        transform .95s cubic-bezier(.16, 1, .3, 1);
      will-change: opacity, transform;
    }
    html.qr-anim-ready [data-reveal="left"]:not(.is-visible) {
      transform: translateX(-32px);
    }
    html.qr-anim-ready [data-reveal="right"]:not(.is-visible) {
      transform: translateX(32px);
    }
    html.qr-anim-ready [data-reveal="scale"]:not(.is-visible) {
      transform: scale(.96);
    }
    html.qr-anim-ready [data-reveal].is-visible,
    html.qr-anim-ready .qr-reveal.is-visible {
      opacity: 1;
      transform: none;
    }
  }

  /* ======================================================================== *
   * Reading scroll progress bar & page-load hero stagger animations.
   * ======================================================================== */
  .qr-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teal) 0%, var(--teal-deep) 50%, var(--star) 100%);
    z-index: 1002;
    width: 0%;
    transition: width 0.1s ease-out;
  }

  @keyframes heroFadeUp {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .qr-hero__content > * {
      animation: heroFadeUp 0.9s cubic-bezier(.16, 1, .3, 1) both;
    }
    .qr-hero__content h1 { animation-delay: 50ms; }
    .qr-hero__content .qr-label { animation-delay: 0ms; }
    .qr-hero__subtext { animation-delay: 150ms; }
    .qr-hero__ctas { animation-delay: 250ms; }
    .qr-hero__trust { animation-delay: 350ms; }
    .qr-hero__visual {
      animation: heroFadeUp 1.1s cubic-bezier(.16, 1, .3, 1) both;
      animation-delay: 200ms;
    }
  }

  /* ======================================================================== *
   * 1 — Top bar: a centered pill with nav links only, plus two FIXED elements
   * sitting outside the pill — the logo (top-left, only over the hero) and the
   * "Get Free Assessment" button (top-right, sticky across all pages).
   * ======================================================================== */

  /* The pill itself: glassmorphism — translucent white with strong blur + a
   * thin highlight border. Over the dark hero this reads as frosted glass;
   * once scrolled past the hero (.is-scrolled) it becomes more opaque so the
   * text stays crisp over light sections. */
  .qr-navbar {
    position: fixed;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px 12px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow:
      0 8px 28px rgba(10, 37, 64, .25),
      inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: background-color .4s cubic-bezier(.16, 1, .3, 1),
                border-color .4s cubic-bezier(.16, 1, .3, 1),
                box-shadow .4s cubic-bezier(.16, 1, .3, 1),
                color .4s cubic-bezier(.16, 1, .3, 1),
                transform .4s cubic-bezier(.16, 1, .3, 1);
  }
  /* Glass pill text colors over the dark hero (default). */
  .qr-navbar .qr-navbar__link { color: rgba(255, 255, 255, .88); }
  .qr-navbar .qr-navbar__link:hover,
  .qr-navbar .qr-navbar__link:focus-visible { color: var(--gold-hover); }

  /* Scrolled state: nearly-opaque white pill so text stays crisp on light
   * sections; switch link color back to the dark slate. */
  .qr-navbar.is-scrolled {
    background-color: rgba(255, 255, 255, .92);
    border-color: rgba(10, 37, 64, .08);
    box-shadow: 0 10px 30px rgba(10, 37, 64, .14);
    transform: translateX(-50%) scale(0.98);
  }
  .qr-navbar.is-scrolled .qr-navbar__link { color: var(--text-body); }
  .qr-navbar.is-scrolled .qr-navbar__link:hover,
  .qr-navbar.is-scrolled .qr-navbar__link:focus-visible { color: var(--teal-deep); }

  /* Opaque fallback when backdrop-filter is unsupported. */
  @supports not (backdrop-filter: blur(1px)) {
    .qr-navbar { background-color: rgba(255, 255, 255, .92); }
    .qr-navbar .qr-navbar__link { color: var(--text-body); }
  }

  .qr-navbar__links {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0 14px;
    list-style: none;
  }
  .qr-navbar__link {
    font-size: 14px;
    font-weight: 500;
    transition: color .2s ease;
    padding: 8px 0;
  }

  /* Logo — sits TOP-LEFT, in absolute viewport position, ONLY over the hero.
   * It is hidden as soon as the page is scrolled past 80px so it appears only
   * on the first section. */
  .qr-brand {
    position: fixed;
    top: 0;
    left: 28px;
    z-index: 1001;
    display: inline-flex;
    align-items: center;
    transition: opacity .25s ease, visibility .25s ease;
  }
  .qr-brand img {
    height: 120px;
    width: auto;
    display: block;
  }
  /* Once scrolled, JS toggles .is-scrolled on <body>, hiding the logo. */
  body.is-scrolled .qr-brand {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* Dynamically injected Home menu option scroll reveal */
  .qr-nav-home {
    display: none !important;
  }
  @keyframes qrFadeInHome {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  body.is-scrolled .qr-nav-home {
    display: inline-flex !important;
    animation: qrFadeInHome 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* Get Free Assessment — sits TOP-RIGHT, fixed across all pages.
   * Vertically centered on the logo. */
  .qr-cta-fixed {
    position: fixed;
    top: 36px;
    right: 28px;
    z-index: 1001;
  }
  .qr-cta-fixed.qr-btn-gold {
    padding: 12px 22px;
    font-size: 14px;
  }

  /* Hamburger control — hidden on desktop, shown <=1024px. */
  .qr-navbar__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 10px;
    background: transparent;
    border: 1px solid var(--navy-border);
    border-radius: 12px;
    cursor: pointer;
  }
  .qr-navbar__toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--navy);
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
  }
  .qr-navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .qr-navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .qr-navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Mobile panel: hidden by default; revealed by .is-open <=1024px. */
  .qr-navbar__panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border-radius: 24px;
    background-color: #FFFFFF;
    border: 1px solid rgba(10, 37, 64, .08);
    box-shadow: 0 16px 40px rgba(10, 37, 64, .16);
    min-width: 240px;
  }
  .qr-navbar__panel .qr-navbar__link {
    padding: 12px 14px;
    border-radius: 12px;
  }
  .qr-navbar__panel .qr-btn-gold { margin-top: 8px; }

  @media (max-width: 1024px) {
    /* On mobile we don't show the centered pill — the logo (left) + hamburger
     * (right) replace it. The pill itself becomes a transparent shell that
     * only carries the hamburger; everything else lives in .qr-brand and the
     * full-screen panel. */
    .qr-navbar__links { display: none; }
    .qr-navbar {
      top: 0;
      left: 0;
      right: 0;
      transform: none;
      width: 100%;
      max-width: none;
      border-radius: 0;
      background-color: transparent;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      border: 0;
      box-shadow: none;
      padding: 22px 22px 22px 0;
      display: flex;
      justify-content: flex-end;
      gap: 0;
    }
    .qr-navbar.is-scrolled {
      background-color: rgba(10, 37, 64, .92);
      box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
      transform: none !important;
    }
    .qr-navbar__toggle { display: inline-flex; }
    .qr-navbar__panel.is-open { display: flex; }
    .qr-cta-fixed { display: none; }   /* CTA lives in the mobile panel */

    /* Centered logo on header in mobile view — no fade-out on scroll on mobile. */
    .qr-brand {
      top: 2px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1101;   /* above the navbar header but below the open panel */
    }
    .qr-brand img { height: 92px; }
    body.is-scrolled .qr-brand {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    /* Hamburger styling — chunky, white over dark hero by default. */
    .qr-navbar__toggle {
      width: 48px;
      height: 48px;
      padding: 12px;
      gap: 6px;
      background: transparent;
      border: 0;
      border-radius: 0;
    }
    .qr-navbar__toggle span {
      height: 3px;
      background-color: #FFFFFF;
      border-radius: 2px;
    }
    /* Keep the toggle spans white to match the dark mobile navbar when scrolled. */
    body.is-scrolled .qr-navbar__toggle span { background-color: #FFFFFF; }
    /* When the dark menu is open, force the bars white again (and they morph
     * into the X via the existing rules). */
    .qr-navbar__toggle[aria-expanded="true"] span { background-color: #FFFFFF !important; }
  }
  @media (max-width: 480px) {
    .qr-brand img { height: 80px; }
    .qr-brand { left: 50%; transform: translateX(-50%); top: 4px; }
    .qr-navbar { padding: 18px 18px 18px 0; }
    .qr-navbar__toggle { width: 44px; height: 44px; }
  }

  /* ======================================================================== *
   * Mobile menu — full-screen panel that mirrors the reference design:
   * centered logo at the top, ✕ button top-right, serif links with hairline
   * separators below.
   * ======================================================================== */
  @media (max-width: 1024px) {
    .qr-navbar__panel {
      position: fixed;
      inset: 0;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1100;
      flex-direction: column;
      gap: 0;
      padding: 110px 28px 32px;
      border-radius: 0;
      background-color: var(--navy);
      border: 0;
      box-shadow: none;
      overflow-y: auto;
    }
    /* Dynamically injected Home menu option should always be visible in the mobile menu panel */
    .qr-navbar__panel .qr-nav-home {
      display: block !important;
    }
    /* Centered logo at the top of the open panel — uses the same logo.png. */
    .qr-navbar__panel::before {
      content: "";
      position: absolute;
      top: 28px;
      left: 50%;
      transform: translateX(-50%);
      width: 130px;
      height: 56px;
      background: url("../../logo.png") center / contain no-repeat;
      filter: brightness(0) invert(1);   /* white silhouette over dark menu */
    }
    .qr-navbar__panel .qr-navbar__link {
      display: block;
      padding: 22px 4px;
      border-bottom: 1px solid rgba(255, 255, 255, .12);
      color: rgba(255, 255, 255, .92);
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 22px;
      letter-spacing: .005em;
    }
    .qr-navbar__panel .qr-navbar__link:hover,
    .qr-navbar__panel .qr-navbar__link:focus-visible,
    .qr-navbar__panel .qr-navbar__link[aria-current="page"] {
      color: var(--gold-hover);
    }
    .qr-navbar__panel .qr-btn-gold {
      margin-top: 28px;
      padding: 18px 28px;
      font-size: 16px;
    }
    /* Lock body scroll when panel is open. */
    body:has(.qr-navbar__panel.is-open) {
      overflow: hidden;
    }
    /* When panel is open, hide the static brand (the panel already shows
     * a centered logo) so we don't get duplicated logos at the top. */
    body:has(.qr-navbar__panel.is-open) .qr-brand {
      visibility: hidden;
      pointer-events: none;
    }
    /* The hamburger sits above the open panel so the close (X) is reachable. */
    .qr-navbar__toggle { position: relative; z-index: 1200; }
  }

  /* ======================================================================== *
   * Mobile content optimisation — bolder typography, tighter padding so the
   * page fills the screen properly. Applies to all built pages.
   * ======================================================================== */
  @media (max-width: 768px) {
    /* Large H2 section heads on phones — feels intentional, not cramped. */
    h2, .qr-h2 { font-size: 36px; line-height: 1.12; }
    .qr-section-head h2 { font-size: 36px; }
    /* Subheads keep readable size. */
    h3, .qr-h3 { font-size: 22px; }
    /* Card grids: tighter inner padding, more obvious card edges. */
    .qr-card { padding: 24px; border-radius: 14px; }
    .qr-card--lift:hover { transform: none; }   /* hover effects don't fit touch */
    /* Section vertical padding: keep content dense on phones. */
    .qr-section { padding-block: 56px; }
    .qr-section-head { margin-bottom: 32px; }
    /* CTAs: full-width, comfortable tap targets. */
    .qr-promise__ctas .qr-btn-gold,
    .qr-promise__ctas .qr-btn-ghost,
    .qr-hero__ctas .qr-btn-gold,
    .qr-hero__ctas .qr-btn-ghost { width: 100%; }
    /* Promise card: less padding, smaller heading. */
    .qr-promise__card { padding: 40px 22px; border-radius: 18px; }
    .qr-promise__card h2 { font-size: 26px; line-height: 1.2; }
    /* Footer: tighter padding so the bottom action bar isn't cramped. */
    .qr-footer { padding-block: 48px 24px; }
    .qr-footer__logo { height: 88px; }
  }
  @media (max-width: 480px) {
    h2, .qr-h2, .qr-section-head h2 { font-size: 30px; }
    .qr-card { padding: 22px; }
    .qr-section { padding-block: 48px; }
  }

  /* ======================================================================== *
   * Mobile bottom action bar — sticky WhatsApp + Call buttons at the foot of
   * the viewport on mobile, matching the reference screenshot. Hidden on
   * desktop where the navbar CTA is enough.
   * ======================================================================== */
  .qr-mob-actions {
    display: none;
  }
  @media (max-width: 1024px) {
    .qr-mob-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 900;
      background-color: var(--navy);
      border-top: 1px solid rgba(255, 255, 255, .08);
      box-shadow: 0 -8px 24px rgba(0, 0, 0, .25);
    }
    .qr-mob-actions__btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 16px 12px;
      color: #FFFFFF;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 14px;
      text-decoration: none;
    }
    .qr-mob-actions__btn:first-child {
      border-right: 1px solid rgba(255, 255, 255, .08);
    }
    .qr-mob-actions__btn svg {
      width: 22px;
      height: 22px;
      fill: var(--gold-hover);
    }
    .qr-mob-actions__btn--whatsapp svg { fill: #25D366; }
    /* Reserve room at the bottom of the page for the bar. */
    main { padding-bottom: 64px; }
    /* The floating contact widget needs to sit above the bottom bar. */
    .contact-widget-container { bottom: 78px !important; }
  }
  @media (max-width: 480px) {
    .qr-mob-actions__btn { font-size: 13px; padding: 14px 10px; }
  }

  /* ======================================================================== *
   * 2 — Hero — deep-blue, two-column: copy left, your image right.
   * No animated arc/dot/glow. A single subtle gradient + a real image you can
   * swap. Collapses to one column <=1024px.
   * ======================================================================== */
  .qr-hero {
    position: relative;
    background:
      radial-gradient(1100px 600px at 85% -10%, rgba(14, 148, 136, .18), transparent 60%),
      var(--bg-dark);
    color: var(--bg-primary);
    overflow: hidden;
  }
  .qr-hero__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
    width: 100%;
    /* Top padding clears the fixed navbar. */
    padding-block: 150px 96px;
  }
  .qr-hero h1 { color: var(--bg-primary); }
  .qr-hero__title-accent { color: var(--gold-hover); }   /* teal accent */
  .qr-hero__subtext {
    color: rgba(255, 255, 255, .80);
    max-width: 540px;
    margin: 24px 0 32px;
    font-size: 18px;
  }
  .qr-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }
  /* Small trust line under the CTAs. */
  .qr-hero__trust {
    margin-top: 22px;
    color: rgba(255, 255, 255, .62);
    font-size: 13px;
  }

  /* Right column: a real, swappable image in a rounded frame. */
  .qr-hero__visual {
    position: relative;
  }
  .qr-hero__image {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
  }
  /* Optional floating glass stat card overlapping the image (subtle, no gold). */
  .qr-hero__badge {
    position: absolute;
    left: -18px;
    bottom: -18px;
    padding: 16px 20px;
    border-radius: 14px;
    background-color: rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
  }
  .qr-hero__badge-value {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.1;
    color: var(--gold-hover);
  }
  .qr-hero__badge-label {
    font-size: 13px;
    color: rgba(255, 255, 255, .82);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .qr-hero__badge { background-color: var(--navy-mid); }
  }

  @media (max-width: 1024px) {
    .qr-hero__grid {
      grid-template-columns: 1fr;
      gap: 28px;
      padding-block: 110px 64px;
    }
    /* On mobile, image sits ABOVE the copy as a visual anchor — like the
     * reference. Compact height so the headline is still in-viewport. */
    .qr-hero__visual { order: 1; }
    .qr-hero__content { order: 2; }
    .qr-hero__image { aspect-ratio: 16 / 9; }
    /* Bigger, tighter mobile headline that fills the screen like the reference. */
    .qr-hero h1 {
      font-size: 48px;
      line-height: 1.04;
      letter-spacing: -.01em;
    }
    .qr-hero__subtext { font-size: 16px; max-width: none; }
    .qr-hero__ctas { gap: 12px; }
  }
  @media (max-width: 480px) {
    .qr-hero__grid { padding-block: 96px 44px; gap: 22px; }
    .qr-hero h1 { font-size: 38px; line-height: 1.05; }
    .qr-hero .qr-label { font-size: 11px; }
    .qr-hero__ctas .qr-btn-gold,
    .qr-hero__ctas .qr-btn-ghost {
      width: 100%;
      padding: 16px 22px;
      justify-content: center;
    }
    .qr-hero__image { aspect-ratio: 16 / 10; border-radius: 14px; }
    .qr-hero__badge { display: none; }
  }
  @media (max-width: 480px) {
    .qr-hero__badge { display: none; }
  }

  /* ======================================================================== *
   * 3 — Stats strip (Req 4.1, 4.2, 4.4, 4.7, 4.8)
   * #111C2E background, gold top border, four equal columns with 1px dividers,
   * gold icon above each number. 2 columns <=1024px, 1 column <480px.
   * ======================================================================== */
  /* ======================================================================== *
   * 3 — Stats strip — four cards on a deep-blue band.
   * Each metric sits in its own raised glass-tinted card so the band reads as
   * a row of stat chips rather than a flat strip.
   * ======================================================================== */
  .qr-stats {
    background-color: var(--navy-mid);
    border-top: 2px solid var(--teal);
  }
  /* Override .qr-section padding here so the band is visually compact. */
  .qr-stats.qr-section { padding-block: 56px; }

  .qr-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .qr-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 26px 22px;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset,
                0 12px 28px rgba(0, 0, 0, .25);
    transition: transform .3s ease, box-shadow .3s ease,
                background-color .3s ease, border-color .3s ease;
  }
  /* Subtle lift on hover — only when motion is allowed. */
  @media (prefers-reduced-motion: no-preference) {
    .qr-stats__item:hover {
      transform: translateY(-4px);
      background-color: rgba(255, 255, 255, .06);
      border-color: rgba(14, 165, 164, .35);
      box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset,
                  0 18px 36px rgba(0, 0, 0, .32);
    }
  }
  .qr-stats__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: rgba(14, 165, 164, .14);
    color: var(--teal);
  }
  .qr-stats__icon svg { width: 22px; height: 22px; fill: currentColor; }
  .qr-stats__label {
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    line-height: 1.4;
  }

  @media (max-width: 1024px) {
    .qr-stats__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 480px) {
    .qr-stats__grid { grid-template-columns: 1fr; }
  }

  /* ======================================================================== *
   * 4 — Problem / Solution (Req 5.1, 5.5)
   * --bg-soft background; two cards (reuse .qr-card--danger / .qr-card--gold);
   * stack to one column <=768px.
   * ======================================================================== */
  .qr-problem { background-color: var(--bg-soft); }
  .qr-problem__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
  .qr-problem__card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    margin-bottom: 20px;
  }
  .qr-problem__icon { width: 28px; height: 28px; flex: 0 0 auto; }
  .qr-card--danger .qr-problem__icon { color: #C13A2F; }
  .qr-card--gold .qr-problem__icon { color: var(--gold); }
  .qr-problem__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .qr-problem__list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: var(--text-body);
  }
  @media (max-width: 768px) {
    .qr-problem__grid { grid-template-columns: 1fr; gap: 24px; }
  }

  /* ======================================================================== *
   * 5 — Timeline (Req 6.1, 6.2, 6.4)
   * White background, vertical gold DASHED connector, large faint gold number
   * behind each step card, reveal-from-left (handled by the .qr-reveal rule).
   * Section clips overflow so the oversized faint numbers / reveal translate
   * never introduce horizontal scroll (Req 14.4).
   * ======================================================================== */
  .qr-timeline {
    background-color: var(--bg-primary);
    overflow: hidden;
  }
  .qr-timeline__steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 48px;
    padding-left: 44px;
  }
  /* ======================================================================== *
   * 5 — Timeline — vertical pipe that FILLS as you scroll.
   *   - A faint background pipe runs the full length of the steps.
   *   - A teal fill pipe (.qr-timeline__progress) sits on top of it; its
   *     height is set inline by JS to track how far the reader has scrolled
   *     through the section (0% at section start -> 100% at section end).
   *   - Dots are perfectly centered on the pipe via translateX(-50%).
   *   - Once a dot's vertical center has been passed by the fill, the dot
   *     "lights up" via .is-filled (added by the same JS).
   * ======================================================================== */
  .qr-timeline {
    background-color: var(--bg-primary);
    overflow: hidden;
  }
  .qr-timeline__steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 36px;
    margin-top: 48px;
    padding-left: 48px;
  }
  /* Faint background pipe (full length). */
  .qr-timeline__steps::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 14px;
    width: 3px;
    background-color: rgba(10, 37, 64, .08);
    border-radius: 999px;
    transform: translateX(-50%);
  }
  /* Filled portion of the pipe — its height is animated by JS via inline
   * style. Defaults to 0% so the pipe starts empty if JS never runs. */
  .qr-timeline__progress {
    position: absolute;
    top: 0;
    left: 14px;
    width: 3px;
    height: 0%;
    background: linear-gradient(180deg, var(--teal-deep), var(--teal));
    border-radius: 999px;
    transform: translateX(-50%);
    box-shadow: 0 0 12px rgba(14, 165, 164, .35);
    transition: height .15s linear;
    pointer-events: none;
  }

  .qr-timeline__step { position: relative; }

  /* Dots centered on the pipe. Default = empty (white inside, faint border). */
  .qr-timeline__node {
    position: absolute;
    top: 12px;
    left: -34px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 2px solid rgba(10, 37, 64, .18);
    transform: translateX(-50%);
    transition: background-color .35s ease, border-color .35s ease,
                box-shadow .35s ease, transform .35s ease;
  }
  /* Once the fill has passed this node, JS adds .is-filled. */
  .qr-timeline__step.is-filled .qr-timeline__node {
    background-color: var(--teal);
    border-color: var(--teal);
    box-shadow: 0 0 0 4px rgba(14, 165, 164, .15);
  }

  /* Restrained step number behind the card. */
  .qr-timeline__num {
    position: absolute;
    top: -10px;
    right: 24px;
    z-index: 0;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 88px;
    line-height: 1;
    color: var(--gold-muted);
    pointer-events: none;
    user-select: none;
  }
  .qr-timeline__card { position: relative; z-index: 1; }
  .qr-timeline__card-title { font-size: 24px; margin-bottom: 8px; }

  /* Step intro: slide in from the left with a soft ease-out, staggered. */
  @media (prefers-reduced-motion: no-preference) {
    html.qr-anim-ready .qr-timeline__step[data-reveal]:not(.is-visible) {
      opacity: 0;
      transform: translateX(-28px);
    }
    html.qr-anim-ready .qr-timeline__step[data-reveal] {
      transition:
        opacity .9s cubic-bezier(.16, 1, .3, 1),
        transform .9s cubic-bezier(.16, 1, .3, 1);
    }
    html.qr-anim-ready .qr-timeline__step:nth-child(1)[data-reveal] { transition-delay:   0ms; }
    html.qr-anim-ready .qr-timeline__step:nth-child(2)[data-reveal] { transition-delay: 120ms; }
    html.qr-anim-ready .qr-timeline__step:nth-child(3)[data-reveal] { transition-delay: 240ms; }
    html.qr-anim-ready .qr-timeline__step:nth-child(4)[data-reveal] { transition-delay: 360ms; }
    html.qr-anim-ready .qr-timeline__step:nth-child(5)[data-reveal] { transition-delay: 480ms; }
  }

  @media (max-width: 768px) {
    .qr-timeline__num { font-size: 64px; }
  }
  /* Node marker sitting on the connector. */
  .qr-timeline__node {
    position: absolute;
    top: 24px;
    left: -44px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--teal);
    box-shadow: 0 0 0 4px var(--gold-muted);
  }
  /* Restrained step number behind the card. */
  .qr-timeline__num {
    position: absolute;
    top: -10px;
    right: 24px;
    z-index: 0;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 88px;
    line-height: 1;
    color: var(--gold-muted);
    pointer-events: none;
    user-select: none;
  }
  .qr-timeline__card { position: relative; z-index: 1; }
  .qr-timeline__card-title { font-size: 24px; margin-bottom: 8px; }
  @media (max-width: 768px) {
    .qr-timeline__num { font-size: 64px; }
  }

  /* ======================================================================== *
   * 6 — Provider logo marquee (Req 7.1, 7.3, 7.4, 7.5, 7.6, 7.7)
   * --bg-ivory band; two duplicated logo sets create a seamless CSS loop.
   * Logos default 50% opacity grayscale, hover -> full colour/opacity. The
   * scroll is gated behind no-preference, so reduced motion yields a STATIC
   * band. A CSS fallback re-flows the logos into a static wrapping grid if the
   * transform-driven band cannot render.
   * ======================================================================== */
  .qr-marquee { background-color: var(--bg-ivory); }
  .qr-marquee__viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-top: 40px;
    /* Soft edge fade on both sides of the band. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .qr-marquee__track {
    display: flex;
    width: max-content;
  }
  .qr-marquee__set {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 64px;
    padding-right: 64px; /* keeps spacing consistent across the seam */
  }
  .qr-marquee__logo {
    height: 40px;
    width: auto;
    opacity: .5;              /* 50% opacity by default (Req 7.4) */
    filter: grayscale(1);     /* grayscale by default (Req 7.4) */
    transition: opacity .3s ease, filter .3s ease;
  }
  .qr-marquee__logo:hover,
  .qr-marquee__logo:focus-visible {
    opacity: 1;               /* full colour + opacity on hover (Req 7.5) */
    filter: grayscale(0);
  }

  /* Seamless loop: the track holds two identical sets, so translating by -50%
   * lands exactly on the duplicate (Req 7.3). Gated so reduced motion leaves a
   * static band (Req 7.6). Hovering the band pauses it so logos are reachable. */
  @keyframes qr-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .qr-marquee__track { animation: qr-marquee-scroll 40s linear infinite; }
    .qr-marquee__viewport:hover .qr-marquee__track { animation-play-state: paused; }
  }

  /* Fallback static grid if the transform-driven band cannot render (Req 7.7):
   * drop the overflow clipping, wrap the logos, and hide the duplicate set so
   * no logo appears twice. */
  @supports not (transform: translateX(-50%)) {
    .qr-marquee__viewport { overflow: visible; }
    .qr-marquee__track {
      width: auto;
      flex-wrap: wrap;
      justify-content: center;
      gap: 32px 48px;
      animation: none;
    }
    .qr-marquee__set { flex-wrap: wrap; justify-content: center; padding-right: 0; }
    .qr-marquee__set:nth-child(2) { display: none; }
  }

  /* ======================================================================== *
   * 7 — Scenario cards (Req 8.1, 8.5)
   * --bg-soft; three cards in a row (reuse .qr-card--gold-top + .qr-card--lift)
   * each with a gold tag pill; stack to one column <=768px.
   * ======================================================================== */
  .qr-scenarios { background-color: var(--bg-soft); }
  .qr-scenarios__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  /* Gold tag pill (Req 8.2). */
  .qr-tag-gold {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background-color: var(--gold-muted);
    color: var(--text-gold);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  .qr-scenarios__title { font-size: 24px; margin: 16px 0 8px; }
  .qr-scenarios__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 12px;
  }
  @media (max-width: 768px) {
    .qr-scenarios__grid { grid-template-columns: 1fr; }
  }

  /* ======================================================================== *
   * 8 — Testimonials carousel (Req 9.1, 9.4, 9.5)
   * Dark navy background, glass cards (.qr-glass), gold quote mark, gold-
   * bordered avatar, gold stars. 3 cards visible at desktop, 1 on mobile.
   * ======================================================================== */
  .qr-testimonials {
    background-color: var(--bg-dark);
    color: var(--bg-primary);
    overflow: hidden;
  }
  .qr-testimonials .qr-section-head h2 { color: var(--bg-primary); }
  .qr-testimonials .qr-section-head__subtitle { color: rgba(255, 255, 255, .7); }

  /* Google rating badge — centered pill above the carousel. */
  .qr-testimonials__rating {
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 44px;
    padding: 10px 18px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
  }
  .qr-testimonials__stars { color: var(--star); letter-spacing: 2px; }

  .qr-carousel { position: relative; }
  .qr-carousel__viewport { overflow: hidden; }
  .qr-carousel__track {
    display: flex;
    gap: 24px;
    transition: transform .5s ease;
  }
  /* 3 cards visible at desktop (Req 9.4). */
  .qr-carousel__slide { flex: 0 0 calc((100% - 48px) / 3); }

  .qr-testimonial {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: 32px;
    border-radius: 16px;
  }
  .qr-testimonial__quote-mark {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 64px;
    line-height: .5;
    color: var(--gold-hover); /* teal quote mark */
  }
  .qr-testimonial__text { color: rgba(255, 255, 255, .85); }
  .qr-testimonial__stars { color: var(--star); letter-spacing: 2px; }
  .qr-testimonial__person {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
  }
  /* Teal-bordered avatar. */
  .qr-testimonial__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold-hover);
    flex: 0 0 auto;
  }
  .qr-testimonial__name { color: var(--bg-primary); font-weight: 600; }
  .qr-testimonial__label { color: var(--text-muted); font-size: 13px; }

  /* Carousel controls — gold arrows + dot indicators (Req 9.8). */
  .qr-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 36px;
  }
  .qr-carousel__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--gold-border);
    color: var(--gold);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .qr-carousel__arrow:hover,
  .qr-carousel__arrow:focus-visible {
    background-color: var(--gold);
    border-color: var(--gold);
    color: #FFFFFF;
  }
  .qr-carousel__dots {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .qr-carousel__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .3);
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
  }
  .qr-carousel__dot.is-active {
    background-color: var(--gold);
    transform: scale(1.2);
  }

  /* 1 card at a time on mobile (Req 9.4). */
  @media (max-width: 768px) {
    .qr-carousel__track { gap: 0; }
    .qr-carousel__slide { flex: 0 0 100%; }
  }

  /* ======================================================================== *
   * 9 — Initials avatar (Req 16.5)
   * Gold-bordered circular avatar rendered by initialsAvatarFallback() when a
   * testimonial photo is missing / fails to load.
   * ======================================================================== */
  .qr-avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 2px solid var(--gold-hover);
    background-color: var(--navy-mid);
    color: var(--gold-hover);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    text-transform: uppercase;
  }

  /* ======================================================================== *
   * 10 — FAQ accordion (Req 11.1, 11.3, 11.6)
   * Two columns of four; gold plus icon that rotates to a close (minus) state
   * when expanded; smooth max-height transition. One column <=768px.
   * ======================================================================== */
  .qr-accordion {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
    align-items: start;
  }
  .qr-accordion__item {
    background-color: var(--bg-primary);
    border: 1px solid var(--navy-border);
    border-radius: 12px;
    overflow: hidden;
  }
  .qr-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 20px 24px;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 18px;
    color: var(--text-headline);
  }
  /* Gold plus icon built from two bars (Req 11.3). */
  .qr-accordion__icon {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
  }
  .qr-accordion__icon::before,
  .qr-accordion__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--gold);
    border-radius: 2px;
    transform: translate(-50%, -50%);
  }
  .qr-accordion__icon::before { width: 14px; height: 2px; }        /* horizontal bar */
  .qr-accordion__icon::after  {
    width: 2px;
    height: 14px;                                                   /* vertical bar */
    transition: transform .3s ease;
  }
  /* Rotate the vertical bar onto the horizontal one (plus -> minus) when the
   * item is expanded (Req 11.4); collapsing rotates it back (Req 11.5). Keyed
   * off both the trigger's aria-expanded and the item's .is-open class. */
  .qr-accordion__trigger[aria-expanded="true"] .qr-accordion__icon::after,
  .qr-accordion__item.is-open .qr-accordion__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  /* Smooth max-height transition (Req 11.4); JS toggles .is-open on the panel. */
  .qr-accordion__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
  }
  .qr-accordion__panel.is-open { max-height: 520px; }
  .qr-accordion__panel-inner {
    padding: 0 24px 22px;
    color: var(--text-body);
  }
  @media (max-width: 768px) {
    .qr-accordion { grid-template-columns: 1fr; }
  }

  /* ======================================================================== *
   * 11 — Footer (Req 12.1, 12.7, 12.8, 12.9, 12.10)
   * Dark navy, gold top border, four columns. Social icons render white by
   * default and transition to gold on hover. Reflow to 2 columns <=768px and
   * 1 column <480px.
   * ======================================================================== */
  .qr-footer {
    background-color: var(--navy);
    border-top: 2px solid var(--gold);
    color: rgba(255, 255, 255, .72);
    padding-block: 64px 32px;
  }
  .qr-footer__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
  }
  .qr-footer__title {
    color: var(--bg-primary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 18px;
  }
  .qr-footer__brand-link {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
  }
  .qr-footer__logo {
    height: 140px;
    width: auto;
    display: block;
  }
  .qr-footer__brand-name {
    color: var(--bg-primary);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
  }
  .qr-footer__byline {
    display: block;
    margin-top: 6px;
    color: var(--text-gold);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  .qr-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .qr-footer__link {
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    transition: color .2s ease;
  }
  .qr-footer__link:hover,
  .qr-footer__link:focus-visible { color: var(--gold); }

  /* Social icons: white by default (Req 12.8) -> gold on hover (Req 12.7). */
  .qr-footer__social {
    display: flex;
    gap: 14px;
  }
  .qr-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    color: var(--bg-primary);
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
  }
  .qr-footer__social-link svg { width: 18px; height: 18px; fill: currentColor; }
  .qr-footer__social-link:hover,
  .qr-footer__social-link:focus-visible {
    color: var(--gold);
    border-color: var(--gold);
    background-color: var(--gold-muted);
  }
  .qr-footer__bottom {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--glass-border);
    font-size: 13px;
    color: var(--text-muted);
  }

  @media (max-width: 768px) {
    .qr-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  }
  @media (max-width: 480px) {
    .qr-footer__grid { grid-template-columns: 1fr; }
  }

  /* ======================================================================== *
   * 12 — Glass form CTA — layout + icon styles
   * Light teal-tinted bg, two-column layout that stacks <=768px. The white
   * form card and inputs reuse .qr-card / .qr-input from @layer components.
   * ======================================================================== */
  .qr-form-cta { background-color: var(--bg-ivory); }
  .qr-form-cta__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
  }
  .qr-form-cta__intro h2 {
    font-size: 40px;
    margin: 12px 0 16px;
  }
  .qr-form-cta__fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .qr-form-cta__field label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-headline);
  }
  /* ======================================================================== *
   * Page section: About — Story (two-column with quote panel)
   * ======================================================================== */
  .qr-story { background-color: var(--bg-primary); }
  .qr-story__grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 56px;
    align-items: start;
  }
  .qr-story__content h2 { font-size: 38px; margin: 12px 0 18px; }
  .qr-story__content p { margin-bottom: 14px; }
  .qr-story__panel {
    position: sticky;
    top: 120px;
    padding: 32px;
    border-radius: 20px;
    background: linear-gradient(160deg, var(--gold-muted), rgba(255, 255, 255, 0));
    border: 1px solid var(--gold-border);
  }
  .qr-story__quote {
    position: relative;
    padding: 8px 0 20px;
    border-bottom: 1px solid var(--navy-border);
    margin-bottom: 20px;
  }
  .qr-story__quote-mark {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 56px;
    line-height: .5;
    color: var(--teal);
    margin-bottom: 6px;
  }
  .qr-story__quote blockquote { margin: 0; }
  .qr-story__quote blockquote p {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.35;
    color: var(--text-headline);
    margin-bottom: 10px;
  }
  .qr-story__quote cite {
    display: block;
    font-style: normal;
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: .04em;
  }
  .qr-story__bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-body);
    font-size: 15px;
  }
  .qr-story__bullets li::before {
    content: "•";
    color: var(--teal);
    margin-right: 10px;
    font-weight: 700;
  }
  @media (max-width: 1024px) {
    .qr-story__grid { grid-template-columns: 1fr; gap: 32px; }
    .qr-story__panel { position: static; }
  }

  /* ======================================================================== *
   * Page section: About — Values cards (3 across)
   * ======================================================================== */
  .qr-values { background-color: var(--bg-soft); }
  .qr-values__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  @media (max-width: 768px) {
    .qr-values__grid { grid-template-columns: 1fr; }
  }

  /* ======================================================================== *
   * Page section: About — Expertise grid (3x2 of icon + text)
   * ======================================================================== */
  .qr-expertise { background-color: var(--bg-primary); }
  .qr-expertise__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .qr-expertise__item {
    padding: 24px;
    border-radius: 14px;
    background-color: var(--bg-soft);
    border: 1px solid var(--navy-border);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  @media (prefers-reduced-motion: no-preference) {
    .qr-expertise__item:hover {
      transform: translateY(-4px);
      border-color: var(--gold-border);
      box-shadow: 0 18px 36px rgba(10, 37, 64, .08);
    }
  }
  .qr-expertise__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background-color: var(--gold-muted);
    color: var(--teal-deep);
    margin-bottom: 14px;
  }
  .qr-expertise__icon svg { width: 18px; height: 18px; }
  .qr-expertise__item h3 {
    font-size: 18px;
    margin-bottom: 6px;
  }
  .qr-expertise__item p {
    font-size: 14px;
    color: var(--text-body);
    line-height: 1.55;
  }
  @media (max-width: 1024px) {
    .qr-expertise__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 540px) {
    .qr-expertise__grid { grid-template-columns: 1fr; }
  }

  /* ======================================================================== *
   * Page section: About — Audience cards (3 across, 2 rows)
   * ======================================================================== */
  .qr-audience { background-color: var(--bg-ivory); }
  .qr-audience__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .qr-audience__grid .qr-card { padding: 28px; }
  .qr-audience__grid .qr-card h3 { font-size: 20px; margin-bottom: 8px; }
  .qr-audience__grid .qr-card p { font-size: 14px; color: var(--text-body); }
  @media (max-width: 1024px) {
    .qr-audience__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 540px) {
    .qr-audience__grid { grid-template-columns: 1fr; }
  }

  /* ======================================================================== *
   * Page section: About — Promise card (dark navy CTA panel)
   * ======================================================================== */
  .qr-promise { background-color: var(--bg-primary); }
  .qr-promise__card {
    position: relative;
    padding: 64px 48px;
    border-radius: 24px;
    background:
      radial-gradient(800px 400px at 90% -10%, rgba(14, 165, 164, .25), transparent 60%),
      var(--navy);
    color: #FFFFFF;
    text-align: center;
    overflow: hidden;
  }
  .qr-promise__card .qr-label { color: var(--gold-hover); }
  .qr-promise__card h2 {
    color: #FFFFFF;
    font-size: 40px;
    line-height: 1.15;
    margin: 12px 0 16px;
    max-width: 760px;
    margin-inline: auto;
  }
  .qr-promise__card p {
    color: rgba(255, 255, 255, .82);
    max-width: 680px;
    margin: 0 auto 28px;
    font-size: 17px;
  }
  .qr-promise__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
  /* Ghost variant for use ON dark backgrounds — kept legible. */
  .qr-btn-ghost--dark {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, .35);
  }
  .qr-btn-ghost--dark:hover,
  .qr-btn-ghost--dark:focus-visible {
    background-color: rgba(255, 255, 255, .08);
    border-color: var(--gold-hover);
    color: var(--gold-hover);
  }
  @media (max-width: 540px) {
    .qr-promise__card { padding: 44px 24px; }
    .qr-promise__card h2 { font-size: 28px; }
  }

  /* ======================================================================== *
   * Page section: Services — service cards (3 across, with bullet list inside)
   * ======================================================================== */
  .qr-services { background-color: var(--bg-primary); }
  .qr-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .qr-service-card {
    position: relative;
    padding: 32px;
    border-radius: 18px;
    background-color: var(--bg-soft);
    border: 1px solid var(--navy-border);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  @media (prefers-reduced-motion: no-preference) {
    .qr-service-card:hover {
      transform: translateY(-6px);
      border-color: var(--gold-border);
      box-shadow: 0 24px 48px rgba(10, 37, 64, .10);
    }
  }
  .qr-service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: var(--gold-muted);
    color: var(--teal-deep);
    margin-bottom: 18px;
  }
  .qr-service-card__icon svg { width: 22px; height: 22px; fill: currentColor; }
  .qr-service-card h3 { font-size: 22px; margin-bottom: 10px; }
  .qr-service-card p { font-size: 14.5px; color: var(--text-body); margin-bottom: 14px; }
  .qr-service-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text-body);
    font-size: 13.5px;
  }
  .qr-service-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  .qr-service-card__list li::before {
    content: "✓";
    color: var(--teal);
    font-weight: 700;
    flex: 0 0 auto;
    line-height: 1.4;
  }
  @media (max-width: 1024px) {
    .qr-services__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 540px) {
    .qr-services__grid { grid-template-columns: 1fr; }
  }

  /* ======================================================================== *
   * Page section: Process — Big steps (alternating left/right with copy + visual)
   * ======================================================================== */
  .qr-bigsteps { background-color: var(--bg-primary); }
  .qr-bigstep {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    padding: 64px 0;
    border-top: 1px solid var(--navy-border);
  }
  .qr-bigstep:first-of-type { border-top: 0; padding-top: 24px; }
  .qr-bigstep__content { padding-right: 8px; }
  .qr-bigstep__num {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .12em;
    color: var(--teal-deep);
    background-color: var(--gold-muted);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 16px;
    text-transform: uppercase;
  }
  .qr-bigstep__content h3 { font-size: 32px; margin-bottom: 14px; }
  .qr-bigstep__content p { margin-bottom: 12px; color: var(--text-body); }
  .qr-bigstep__points {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .qr-bigstep__points li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--text-body);
    font-size: 15px;
  }
  .qr-bigstep__points li::before {
    content: "✓";
    color: var(--teal);
    font-weight: 700;
    flex: 0 0 auto;
    line-height: 1.5;
  }
  .qr-bigstep__visual {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 5 / 4;
    background:
      radial-gradient(360px 200px at 80% 20%, rgba(14, 165, 164, .18), transparent 60%),
      var(--bg-ivory);
    border: 1px solid var(--navy-border);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .qr-bigstep__bignum {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 220px;
    line-height: 1;
    color: rgba(14, 165, 164, .14);
    user-select: none;
  }
  /* Reverse alternating: even steps put visual on the left. */
  .qr-bigstep:nth-of-type(even) .qr-bigstep__content { order: 2; padding-right: 0; padding-left: 8px; }
  .qr-bigstep:nth-of-type(even) .qr-bigstep__visual { order: 1; }
  @media (max-width: 900px) {
    .qr-bigstep { grid-template-columns: 1fr; gap: 28px; padding: 48px 0; }
    .qr-bigstep__content,
    .qr-bigstep:nth-of-type(even) .qr-bigstep__content { order: 1; padding: 0; }
    .qr-bigstep:nth-of-type(even) .qr-bigstep__visual { order: 2; }
    .qr-bigstep__bignum { font-size: 140px; }
  }

  /* ======================================================================== *
   * Page section: Process — Timeline summary chips
   * ======================================================================== */
  .qr-timeline-chips { background-color: var(--bg-soft); }
  .qr-timeline-chips__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .qr-timeline-chip {
    padding: 22px 24px;
    border-radius: 14px;
    background-color: var(--bg-primary);
    border: 1px solid var(--navy-border);
  }
  .qr-timeline-chip__label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--teal-deep);
    margin-bottom: 6px;
  }
  .qr-timeline-chip__value {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 26px;
    color: var(--text-headline);
    margin-bottom: 4px;
  }
  .qr-timeline-chip p { font-size: 14px; color: var(--text-body); }
  @media (max-width: 768px) {
    .qr-timeline-chips__grid { grid-template-columns: 1fr; }
  }

  /* ======================================================================== *
   * Page section: Legal pages (Privacy / Terms) — long-form prose layout.
   * ======================================================================== */
  .qr-legal { background-color: var(--bg-primary); }
  .qr-legal__grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 56px;
    align-items: start;
  }
  .qr-legal__toc {
    position: sticky;
    top: 130px;
    padding: 22px;
    border-radius: 14px;
    background-color: var(--bg-soft);
    border: 1px solid var(--navy-border);
  }
  .qr-legal__toc h4 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--teal-deep);
    margin-bottom: 12px;
  }
  .qr-legal__toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    counter-reset: legal;
  }
  .qr-legal__toc li {
    counter-increment: legal;
    font-size: 14px;
  }
  .qr-legal__toc a {
    color: var(--text-body);
    transition: color .2s ease;
  }
  .qr-legal__toc a::before {
    content: counter(legal, decimal-leading-zero) ".";
    color: var(--teal-deep);
    font-weight: 600;
    margin-right: 8px;
  }
  .qr-legal__toc a:hover { color: var(--teal-deep); }

  .qr-legal__body { max-width: 760px; }
  .qr-legal__body h2 {
    font-size: 28px;
    margin: 40px 0 12px;
    scroll-margin-top: 120px;
  }
  .qr-legal__body h2:first-child { margin-top: 0; }
  .qr-legal__body h3 { font-size: 20px; margin: 24px 0 8px; }
  .qr-legal__body p,
  .qr-legal__body li {
    color: var(--text-body);
    font-size: 16px;
    line-height: 1.75;
  }
  .qr-legal__body p { margin-bottom: 14px; }
  .qr-legal__body ul {
    margin: 12px 0 18px 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .qr-legal__body strong { color: var(--text-headline); }
  .qr-legal__updated {
    margin-bottom: 28px;
    padding: 12px 16px;
    border-radius: 10px;
    background-color: var(--gold-muted);
    color: var(--teal-deep);
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
  }
  @media (max-width: 1024px) {
    .qr-legal__grid { grid-template-columns: 1fr; gap: 28px; }
    .qr-legal__toc { position: static; }
  }

  /* ======================================================================== *
   * Page section: Blog — listing grid + featured + filter pills.
   * ======================================================================== */
  .qr-blog { background-color: var(--bg-primary); }
  .qr-blog__filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
  }
  .qr-blog__chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    background-color: var(--bg-soft);
    border: 1px solid var(--navy-border);
    color: var(--text-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  }
  .qr-blog__chip:hover,
  .qr-blog__chip.is-active {
    background-color: var(--gold-muted);
    border-color: var(--gold-border);
    color: var(--teal-deep);
  }

  /* Featured (large) post */
  .qr-blog__featured {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 48px;
    align-items: center;
    padding: 48px;
    border-radius: 22px;
    background:
      radial-gradient(640px 320px at 90% -10%, rgba(14, 165, 164, .25), transparent 60%),
      var(--navy);
    color: #FFFFFF;
    margin-bottom: 56px;
  }
  .qr-blog__featured .qr-label { color: var(--gold-hover); }
  .qr-blog__featured h2 {
    color: #FFFFFF;
    font-size: 36px;
    line-height: 1.18;
    margin: 12px 0 16px;
  }
  .qr-blog__featured p { color: rgba(255, 255, 255, .82); font-size: 16px; margin-bottom: 22px; }
  .qr-blog__featured__meta {
    display: flex;
    gap: 16px;
    color: rgba(255, 255, 255, .65);
    font-size: 13px;
    margin-bottom: 18px;
  }
  .qr-blog__featured img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    aspect-ratio: 5 / 4;
    border: 1px solid rgba(255, 255, 255, .14);
  }
  @media (max-width: 900px) {
    .qr-blog__featured { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
    .qr-blog__featured h2 { font-size: 28px; }
  }

  /* Article cards */
  .qr-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .qr-blog-card {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
    border: 1px solid var(--navy-border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  @media (prefers-reduced-motion: no-preference) {
    .qr-blog-card:hover {
      transform: translateY(-4px);
      border-color: var(--gold-border);
      box-shadow: 0 20px 40px rgba(10, 37, 64, .10);
    }
  }
  .qr-blog-card__cover {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background-color: var(--bg-ivory);
  }
  .qr-blog-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
  .qr-blog-card__cat {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--teal-deep);
    margin-bottom: 8px;
  }
  .qr-blog-card h3 {
    font-size: 19px;
    line-height: 1.25;
    margin-bottom: 10px;
  }
  .qr-blog-card p {
    font-size: 14.5px;
    color: var(--text-body);
    margin-bottom: 16px;
    flex: 1;
  }
  .qr-blog-card__meta {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 12px;
  }
  .qr-blog-card__link {
    color: var(--teal-deep);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .2s ease;
  }
  .qr-blog-card__link:hover { gap: 10px; }
  @media (max-width: 1024px) {
    .qr-blog__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  }
  @media (max-width: 540px) {
    .qr-blog__grid { grid-template-columns: 1fr; }
  }

  /* ======================================================================== *
   * Page section: Single blog post — long-form article layout.
   * ======================================================================== */
  .qr-post { background-color: var(--bg-primary); }
  .qr-post__header {
    padding-block: 140px 32px;
    background-color: var(--bg-soft);
  }
  .qr-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 14px;
  }
  .qr-post__cat {
    color: var(--teal-deep);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
  }
  .qr-post__title {
    font-size: 48px;
    line-height: 1.1;
    margin-bottom: 18px;
    max-width: 880px;
  }
  .qr-post__lede {
    color: var(--text-body);
    font-size: 19px;
    line-height: 1.6;
    max-width: 820px;
  }
  .qr-post__cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 16px;
    margin-top: 32px;
    border: 1px solid var(--navy-border);
  }
  .qr-post__body {
    max-width: 760px;
    margin: 56px auto 0;
    padding-block: 24px;
  }
  .qr-post__body h2 {
    font-size: 30px;
    line-height: 1.18;
    margin: 40px 0 14px;
    scroll-margin-top: 120px;
  }
  .qr-post__body h2:first-child { margin-top: 0; }
  .qr-post__body h3 { font-size: 22px; margin: 28px 0 10px; }
  .qr-post__body p {
    color: var(--text-body);
    font-size: 17px;
    line-height: 1.75;
    margin-bottom: 16px;
  }
  .qr-post__body p strong { color: var(--text-headline); }
  .qr-post__body ul,
  .qr-post__body ol {
    color: var(--text-body);
    font-size: 17px;
    line-height: 1.7;
    margin: 12px 0 20px 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .qr-post__body blockquote {
    margin: 22px 0;
    padding: 22px 26px;
    border-left: 3px solid var(--teal);
    background-color: var(--gold-muted);
    border-radius: 0 12px 12px 0;
    font-family: var(--font-head);
    font-size: 20px;
    line-height: 1.4;
    color: var(--text-headline);
  }
  .qr-post__callout {
    margin: 28px 0;
    padding: 22px 26px;
    border-radius: 14px;
    background-color: var(--bg-soft);
    border-left: 3px solid var(--teal);
  }
  .qr-post__callout h4 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--teal-deep);
    margin-bottom: 8px;
  }
  .qr-post__callout p { margin: 0; font-size: 16px; }
  .qr-post__body a {
    color: var(--teal-deep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .qr-post__cta {
    margin: 56px auto;
    max-width: 760px;
    padding: 36px;
    border-radius: 18px;
    background:
      radial-gradient(640px 320px at 90% -10%, rgba(14, 165, 164, .25), transparent 60%),
      var(--navy);
    color: #FFFFFF;
    text-align: center;
  }
  .qr-post__cta .qr-label { color: var(--gold-hover); }
  .qr-post__cta h3 { color: #FFFFFF; font-size: 24px; margin: 8px 0 12px; }
  .qr-post__cta p { color: rgba(255, 255, 255, .82); margin-bottom: 20px; }
  .qr-post__related {
    background-color: var(--bg-soft);
    padding-block: 64px;
    margin-top: 32px;
  }
  .qr-post__related h2 {
    font-size: 28px;
    margin-bottom: 24px;
  }
  @media (max-width: 768px) {
    .qr-post__title { font-size: 34px; }
    .qr-post__lede { font-size: 17px; }
    .qr-post__header { padding-block: 110px 24px; }
    .qr-post__body { margin-top: 36px; }
    .qr-post__body h2 { font-size: 26px; }
    .qr-post__body p,
    .qr-post__body ul,
    .qr-post__body ol { font-size: 16px; }
    .qr-post__cta { padding: 28px 22px; }
  }
  .qr-form-cta__card {
    padding: 36px 36px 32px;
    border-radius: 20px;
    background-color: #FFFFFF;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .8) inset,
      0 1px 2px rgba(10, 37, 64, .04),
      0 30px 60px rgba(10, 37, 64, .10);
    border: 1px solid rgba(10, 37, 64, .06);
  }
  .qr-form-cta__card-head { margin-bottom: 22px; }
  .qr-form-cta__card-title {
    font-size: 26px;
    margin: 8px 0 6px;
  }
  .qr-form-cta__card-sub {
    color: var(--text-muted);
    font-size: 14px;
  }
  .qr-form-cta__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .qr-form-cta__hint {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 12px;
  }
  .qr-form-cta__submit {
    display: inline-flex;
    width: 100%;
    margin-top: 4px;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .qr-form-cta__submit svg {
    transition: transform .25s ease;
  }
  .qr-form-cta__submit:hover svg,
  .qr-form-cta__submit:focus-visible svg {
    transform: translateX(4px);
  }
  .qr-form-cta__small-print {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
  }
  .qr-form-cta__small-print a {
    color: var(--teal-deep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  @media (max-width: 540px) {
    .qr-form-cta__card { padding: 28px 22px 24px; }
    .qr-form-cta__row { grid-template-columns: 1fr; }
  }
  @media (max-width: 768px) {
    .qr-form-cta__grid { grid-template-columns: 1fr; gap: 32px; }
    .qr-form-cta__intro h2 { font-size: 32px; }
  }
  @media (max-width: 540px) {
    .qr-form-cta__intro h2 { font-size: 28px; line-height: 1.15; }
    .qr-form-cta__contacts li { flex-wrap: wrap; }
  }

  /* Icon sizing — keep inline SVGs small everywhere by default. */
  .qr-stats__icon svg,
  .qr-problem__icon svg,
  .qr-form-cta__contact-icon svg,
  .qr-form-cta__badge-icon svg,
  .qr-footer__social-link svg { width: 100%; height: 100%; }

  /* Constrain the icon spans themselves so the SVG inherits a sensible box. */
  .qr-problem__icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
  }
  .qr-problem__card-title .qr-problem__icon {
    width: 28px;
    height: 28px;
  }

  /* Form CTA contact list (left column). */
  .qr-form-cta__contacts {
    list-style: none;
    margin: 24px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .qr-form-cta__contacts li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-body);
  }
  .qr-form-cta__contacts a {
    color: var(--text-headline);
    font-weight: 500;
    transition: color .2s ease;
  }
  .qr-form-cta__contacts a:hover,
  .qr-form-cta__contacts a:focus-visible { color: var(--teal-deep); }
  .qr-form-cta__contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 10px;
    background-color: var(--gold-muted);
    color: var(--teal-deep);
  }
  .qr-form-cta__contact-icon svg { width: 18px; height: 18px; fill: currentColor; }

  /* Form CTA trust note + assurance badge. */
  .qr-form-cta__trust {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 18px;
  }
  .qr-form-cta__assurance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
  }
  .qr-form-cta__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background-color: var(--gold-muted);
    color: var(--teal-deep);
    font-size: 13px;
    font-weight: 600;
  }
  .qr-form-cta__badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }
  .qr-form-cta__badge-icon svg { width: 14px; height: 14px; fill: currentColor; }
  .qr-form-cta__assurance-note {
    color: var(--text-muted);
    font-size: 13px;
  }
  .qr-form-cta { background-color: var(--bg-ivory); }
  .qr-form-cta__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }
  .qr-form-cta__fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .qr-form-cta__field label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-headline);
  }
  .qr-form-cta__submit { width: 100%; }
  @media (max-width: 768px) {
    .qr-form-cta__grid { grid-template-columns: 1fr; gap: 32px; }
  }
}

/* Appended for single blog post pages to fix low-contrast navbar text color on light headers */
body:has(.qr-post__header) .qr-navbar:not(.is-scrolled) {
  background-color: rgba(255, 255, 255, 0.92);
  border-color: rgba(10, 37, 64, 0.08);
  box-shadow: 0 10px 30px rgba(10, 37, 64, 0.14);
}
body:has(.qr-post__header) .qr-navbar:not(.is-scrolled) .qr-navbar__link {
  color: var(--text-body);
}
body:has(.qr-post__header) .qr-navbar:not(.is-scrolled) .qr-navbar__link:hover,
body:has(.qr-post__header) .qr-navbar:not(.is-scrolled) .qr-navbar__link:focus-visible {
  color: var(--teal-deep);
}

@media (max-width: 1024px) {
  body:has(.qr-post__header):not(.is-scrolled) .qr-navbar__toggle span {
    background-color: var(--navy);
  }
}