/* ─── RESET & BASE ─────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
      background: #111111;
      color: #ffffff;
      overflow-x: hidden;
    }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    img { display: block; max-width: 100%; }

    /* ─── CSS VARIABLES ────────────────────────────────────── */
    :root {
      --blue:       #0059c2;
      --blue-light: #99c8ff;
      --blue-dark:  #002f66;
      --ink:        #111111;
      --ink-soft:   #353535;
      --text:       #111111;   /* main text — flips dark in dark mode */
      --text-soft:  #353535;   /* secondary text — flips dark in dark mode */
      --page:       #ffffff;   /* page / section surface — flips dark in dark mode */
      --tint:       #f4f4f2;   /* alternating tinted section — flips dark in dark mode */
      --surface:    #e7e9ea;
      --border:     #c3c5c6;
      --muted:      #a0a1a2;
      --white:      #ffffff;
      --card-dark:  #1a1a1a;
      --placeholder-dark:  #2a2a2a;
      --placeholder-light: #b0b2b4;
      --nav-h:      52px;
      --promo-h:    36px;
      --maxw:       1480px;    /* shared content cap — keeps sections a centred column on ultra-wide screens */
    }

    /* ─── PLACEHOLDER IMAGE UTILITY ────────────────────────── */
    .img-placeholder {
      background: var(--placeholder-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 6px;
      position: relative;
      overflow: hidden;
    }
    .img-placeholder::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 20px,
        rgba(255,255,255,.03) 20px,
        rgba(255,255,255,.03) 40px
      );
    }
    .img-placeholder.light-bg {
      background: var(--placeholder-light);
    }
    .img-placeholder .label {
      font-family: 'IBM Plex Mono', 'Barlow Condensed', monospace;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      text-align: center;
      line-height: 1.45;
      padding: 0 12px;
      position: relative;
      z-index: 1;
    }
    .img-placeholder.light-bg .label {
      color: rgba(0,0,0,0.4);
    }
    .img-placeholder .icon {
      font-size: 28px;
      opacity: 0.25;
      position: relative;
      z-index: 1;
    }

    /* ─── 1. PROMO BAR ─────────────────────────────────────── */
    #promo-bar {
      background: var(--ink);
      border-bottom: 1px solid #222;
      height: var(--promo-h);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 200;
    }
    #promo-bar .promo-text {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--white);
    }
    #promo-bar .promo-text a {
      color: var(--blue-light);
      margin-left: 8px;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    #promo-bar .promo-close {
      position: absolute;
      right: 16px;
      background: none;
      border: none;
      color: var(--muted);
      font-size: 16px;
      cursor: pointer;
      line-height: 1;
      padding: 4px;
    }
    #promo-bar .promo-close:hover { color: var(--white); }

    /* ─── 2. NAVIGATION ─────────────────────────────────────── */
    #main-nav {
      position: sticky;
      top: 0;
      z-index: 300;
      background: #f5f5f5;                 /* light bar, matching the reference */
      border-bottom: 1px solid #e2e2e2;
      height: var(--nav-h);
      display: grid;
      grid-template-columns: 1fr auto 1fr; /* logo · centered links · icons */
      align-items: center;
      padding: 0 28px;
    }
    /* ── logo (left) ── */
    .nav-logo {
      justify-self: start;
      display: flex;
      align-items: center;
      height: 100%;
    }
    .nav-logo-img {
      height: 24px;
      width: auto;
      display: block;
    }
    /* on-brand fallback shown until the real logo file is added */
    .nav-logo-fallback {
      display: none;
      align-items: center;
      gap: 7px;
      font-family: 'Barlow', sans-serif;
      font-size: 19px;
      font-weight: 800;
      letter-spacing: 0.3px;
      color: #111;
      white-space: nowrap;
    }
    .nav-logo-fallback .logo-mark {
      display: inline-flex;
      gap: 3px;
      margin-right: 2px;
    }
    .nav-logo-fallback .logo-mark i {
      width: 5px;
      height: 17px;
      background: #111;
      border-radius: 3px;
      transform: skewX(-22deg);
    }
    .nav-logo-fallback .logo-c {
      font-size: 10px;
      font-weight: 700;
      vertical-align: super;
      margin-left: 1px;
    }
    /* ── links (center) ── */
    .nav-links {
      justify-self: center;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .nav-links a {
      font-family: 'Barlow', sans-serif;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.2px;
      color: #111111;
      padding: 8px 15px;
      border-radius: 8px;
      transition: color 0.15s, background 0.15s;
      white-space: nowrap;
    }
    .nav-links a:hover { color: #000; background: rgba(0,0,0,0.06); }
    /* ── icons (right) ── */
    .nav-icons {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .nav-icon-btn {
      background: none;
      border: none;
      color: #111111;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 16px;
      transition: background 0.15s, color 0.15s;
    }
    .nav-icon-btn:hover { background: rgba(0,0,0,0.06); color: #000; }
    .nav-icon-btn.cart { position: relative; }
    .cart-badge {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 14px;
      height: 14px;
      background: var(--blue);
      color: #fff;
      border-radius: 50%;
      font-size: 8px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .cart-badge.is-empty { display: none; }

    /* ── cart drawer (client-side cart UI, injected by script.js) ── */
    .cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1100; opacity: 0; transition: opacity 0.25s ease; }
    .cart-overlay.show { opacity: 1; }
    .cart-drawer {
      position: fixed; top: 0; right: 0; height: 100%; width: 380px; max-width: 90vw;
      background: #fff; z-index: 1101; display: flex; flex-direction: column;
      transform: translateX(100%); transition: transform 0.28s ease;
      box-shadow: -8px 0 34px rgba(0,0,0,0.2);
    }
    .cart-drawer.show { transform: translateX(0); }
    .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--border); }
    .cart-head h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase; font-size: 22px; letter-spacing: 0.5px; margin: 0; color: var(--text); }
    .cart-close { background: none; border: none; font-size: 17px; cursor: pointer; color: var(--text); line-height: 1; padding: 6px; border-radius: 6px; }
    .cart-close:hover { background: rgba(0,0,0,0.06); }
    .cart-items { flex: 1; overflow-y: auto; padding: 4px 22px; }
    .cart-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 54px 0; }
    .cart-item { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 18px 0; border-bottom: 1px solid var(--border); }
    .ci-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 16px; letter-spacing: 0.3px; margin: 0; color: var(--text); }
    .ci-meta { font-size: 13px; color: var(--muted); margin: 3px 0 0; }
    .ci-qty { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 50px; padding: 4px 8px; height: fit-content; }
    .ci-qty button { width: 22px; height: 22px; border: none; background: #f0f1f2; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; color: var(--text); display: flex; align-items: center; justify-content: center; }
    .ci-qty button:hover { background: #e2e4e6; }
    .ci-q { min-width: 14px; text-align: center; font-size: 14px; font-weight: 600; color: var(--text); }
    .ci-remove { grid-column: 1 / -1; justify-self: start; background: none; border: none; color: var(--muted); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0; }
    .ci-remove:hover { color: #cc2e26; }
    .cart-foot { border-top: 1px solid var(--border); padding: 18px 22px 22px; }
    .cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; color: var(--text); margin-bottom: 14px; }
    .cart-subtotal-val { font-weight: 900; font-size: 20px; color: var(--blue); }
    .cart-checkout { width: 100%; }
    .cart-note { font-size: 11px; color: var(--muted); text-align: center; margin: 12px 0 0; line-height: 1.5; }
    @media (max-width: 460px) { .cart-drawer { width: 100%; max-width: 100%; } }

    /* ── search modal (client-side, injected by script.js) ── */
    .search-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:1200; opacity:0; transition:opacity 0.22s ease; }
    .search-overlay.show { opacity:1; }
    .search-modal {
      position:fixed; top:0; left:0; right:0; z-index:1201;
      background:#fff; padding:0;
      transform:translateY(-100%); transition:transform 0.28s ease;
      box-shadow:0 12px 44px rgba(0,0,0,0.22);
    }
    .search-modal.show { transform:translateY(0); }
    .search-modal-inner { max-width:760px; margin:0 auto; padding:0 20px 24px; }
    .search-input-wrap {
      display:flex; align-items:center; gap:12px;
      border-bottom:2px solid var(--blue); padding:16px 0;
    }
    .search-icon-svg { flex-shrink:0; color:var(--blue); }
    .search-input {
      flex:1; border:none; outline:none; font-family:'Barlow Condensed',sans-serif;
      font-size:clamp(20px,3vw,28px); font-weight:700; text-transform:uppercase;
      letter-spacing:1px; color:var(--text); background:transparent; min-width:0;
    }
    .search-input::placeholder { color:var(--muted); font-weight:400; text-transform:none; letter-spacing:0; }
    .search-modal-close {
      background:none; border:none; color:var(--muted); font-size:20px;
      cursor:pointer; padding:6px; border-radius:6px; flex-shrink:0; line-height:1;
    }
    .search-modal-close:hover { color:var(--text); background:rgba(0,0,0,0.06); }
    .search-results { padding-top:8px; }
    .search-result-item {
      display:flex; align-items:flex-start; gap:14px; padding:14px 10px;
      border-radius:8px; cursor:pointer; text-decoration:none; color:inherit;
      transition:background 0.12s;
    }
    .search-result-item:hover, .search-result-item:focus { background:#f4f4f2; outline:none; }
    .search-result-section {
      flex-shrink:0; margin-top:2px;
      font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700;
      letter-spacing:1.5px; text-transform:uppercase; color:#fff;
      background:var(--blue); border-radius:4px; padding:3px 8px; white-space:nowrap;
    }
    .search-result-body { display:flex; flex-direction:column; }
    .search-result-title {
      font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:17px;
      text-transform:uppercase; letter-spacing:0.3px; color:var(--text); line-height:1.2;
    }
    .search-result-desc { font-size:13px; color:var(--muted); margin-top:3px; line-height:1.4; }
    .search-empty { padding:28px 10px 10px; font-size:14px; color:var(--muted); }
    .search-empty strong { color:var(--text); }

    /* ─── 3. HERO CAROUSEL ──────────────────────────────────── */
    #hero {
      position: relative;
      height: 90vh;
      min-height: 520px;
      overflow: hidden;
    }
    .hero-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.7s ease;
    }
    .hero-slide.active { opacity: 1; }
    .hero-slide .img-placeholder {
      width: 100%;
      height: 100%;
    }
    .hero-slide .img-placeholder.slide-2 { background: #1a1e2a; }
    .hero-slide .img-placeholder.slide-3 { background: #1a2a1a; }
    /* hero background video (slide 1) */
    .hero-video-wrap {
      position: absolute;
      inset: 0;
      overflow: hidden;
      background: #0c0e12; /* dark base — lowered-opacity video composites against this */
      z-index: 0;
    }
    .hero-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.55;                /* ← keeps headline the star while video stays attractive */
      filter: brightness(0.92) saturate(1.06);
      pointer-events: none;         /* never intercept clicks on the CTAs */
    }
    /* supplementary scrim: soft vignette + gentle bottom lift, over video / under text */
    .hero-video-scrim {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        radial-gradient(135% 110% at 50% 34%, transparent 50%, rgba(0,0,0,0.45) 100%),
        linear-gradient(to top, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.06) 50%, transparent 80%);
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-video { display: none; } /* falls back to the dark base + text — fully readable */
    }
    /* graceful fallback if the video file can't be loaded in a given context */
    .hero-video-wrap.video-failed { background: #14181f; }
    .hero-video-wrap.video-failed::after {
      content: 'Image 1: Hero Video  ·  open via a browser / server to play';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.32);
      text-align: center;
      padding: 0 24px;
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: linear-gradient(
        to top,
        rgba(0,0,0,0.72) 0%,
        rgba(0,0,0,0.15) 50%,
        transparent 100%
      );
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;       /* vertically centered — sits between the prev/next arrows */
      text-align: center;
    }
    .hero-headline {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(40px, 7vw, 80px);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 2px;
      line-height: 1.0;
      color: var(--white);
      text-shadow: 0 2px 30px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.45);
      max-width: 800px;
      margin-bottom: 12px;
    }
    .hero-headline-sub {
      display: block;
      font-size: 0.46em;
      font-weight: 900;
      letter-spacing: 6px;
      color: var(--blue-light);
      margin-top: 4px;
    }
    /* Same colour + same size as the headline (used on the CAS-STRAP hero slide) */
    .hero-headline-sub--match { color: var(--white); font-size: 1em; letter-spacing: 2px; }
    .hero-sub {
      font-size: 16px;
      font-weight: 400;
      color: rgba(255,255,255,0.8);
      margin-bottom: 28px;
      letter-spacing: 0.5px;
    }
    .hero-btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .btn-primary {
      background: var(--blue);
      color: var(--white);
      display: inline-block; text-decoration: none; text-align: center;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 2px;
      text-indent: 2px;           /* offset the trailing letter-spacing so the label sits optically centred */
      text-transform: uppercase;
      border: none;
      padding: 15px 38px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s, transform 0.1s;
    }
    .btn-primary:hover { background: #0068e6; transform: translateY(-1px); }
    .btn-outline {
      background: transparent;
      color: var(--white);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      border: 2px solid rgba(255,255,255,0.7);
      padding: 12px 32px;
      border-radius: 8px;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, transform 0.1s;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); transform: translateY(-1px); }
    .btn-outline .play-icon {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid currentColor;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .btn-outline .play-icon::after {
      content: '';
      width: 0;
      height: 0;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 7px solid currentColor;
      margin-left: 2px;
    }
    /* carousel arrows */
    .carousel-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      background: rgba(0,0,0,0.45);
      border: 1.5px solid rgba(255,255,255,0.25);
      color: var(--white);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 18px;
      transition: background 0.15s;
      backdrop-filter: blur(4px);
    }
    .carousel-arrow:hover { background: rgba(0,0,0,0.7); }
    .carousel-arrow.prev { left: 20px; }
    .carousel-arrow.next { right: 20px; }
    /* dots */
    .carousel-dots {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 10;
    }
    .dot {
      width: 8px;
      height: 8px;
      padding: 6px;                 /* 20px tap target; dot stays 8px visually */
      box-sizing: content-box;
      background-clip: content-box;
      border: none;
      border-radius: 50%;
      background-color: rgba(255,255,255,0.4);
      cursor: pointer;
      transition: background-color 0.2s, transform 0.2s;
    }
    .dot.active { background-color: var(--white); transform: scale(1.25); }

    /* ─── 4. SOCIAL PROOF STRIP ─────────────────────────────── */
    #social-strip {
      background: var(--page);
      padding: 40px 0 40px;
      text-align: center;
    }
    .social-heading {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(18px, 3vw, 26px);
      font-weight: 900;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text);
      margin-bottom: 40px;
    }
    .social-grid-wrapper {
      position: relative;
      overflow: hidden;
      max-width: var(--maxw);
      margin-inline: auto;
    }
    .social-grid {
      display: flex;
      gap: 12px;
      justify-content: safe center;   /* centre the tiles; falls back to start if they overflow */
      overflow-x: auto;
      padding: 0 40px 8px;
      scrollbar-width: none;
      scroll-behavior: smooth;
    }
    .social-grid::-webkit-scrollbar { display: none; }
    .social-item {
      flex-shrink: 0;
      width: 200px;
      text-align: center;
    }
    .social-item .img-placeholder {
      width: 200px;
      height: 200px;
      border-radius: 8px;
      margin-bottom: 8px;
    }
    .social-item .social-img {
      width: 200px;
      height: 200px;
      object-fit: cover;          /* crop landscape photos to a square tile */
      border-radius: 8px;
      margin-bottom: 8px;
      display: block;
    }
    /* only 3 tiles now — they fit, so the scroll arrows aren't needed here */
    #social-strip .scroll-arrow { display: none; }
    .social-item .img-placeholder.light-bg { background: #c8cacc; }
    .social-username {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-soft);
      letter-spacing: 0.5px;
    }
    .social-username span { color: var(--blue); }
    .scroll-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-70%);
      z-index: 10;
      background: rgba(255,255,255,0.95);
      border: 1.5px solid var(--border);
      color: var(--text);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 16px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.12);
      transition: background 0.15s;
    }
    .scroll-arrow:hover { background: var(--surface); }
    .scroll-arrow.left { left: 8px; }
    .scroll-arrow.right { right: 8px; }

    /* ─── 4b. RELIABILITY BANNER ─────────────────────────────── */
    #reliability-banner {
      background: var(--page);          /* blends with the social strip above */
      padding: 8px 24px 52px;
    }
    .reliability-card {
      background: var(--ink);            /* black rounded banner */
      border-radius: 28px;
      max-width: var(--maxw);
      margin-inline: auto;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      align-items: stretch;
      gap: 40px;
      padding: 44px 48px;
      overflow: hidden;
      min-height: 260px;
    }
    .reliability-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .reliability-headline {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(28px, 4.2vw, 54px);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      line-height: 1.02;
      color: var(--white);
      max-width: 560px;
      margin: 0;
    }
    .reliability-media {
      border-radius: 16px;
      overflow: hidden;
      min-height: 220px;
    }
    .reliability-media .img-placeholder {
      width: 100%;
      height: 100%;
      min-height: 220px;
      border-radius: 16px;
      background: #2a2f38;
    }
    .reliability-media .reliability-img {
      width: 100%;
      height: 100%;
      min-height: 220px;
      object-fit: cover;
      display: block;
      border-radius: 16px;
    }
    @media (max-width: 700px) {
      .reliability-card {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 32px 28px;
        min-height: 0;
      }
      .reliability-media,
      .reliability-media .img-placeholder { min-height: 200px; }
    }

    /* ─── 4c. PRO SLIDER (expanding cards) ───────────────────── */
    /* Whole component scoped under #pro-slider so its globals
       (body, *, .dot) don't affect the rest of the site.          */
    #pro-slider {
      --gap: 1.25rem;
      --speed: 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --closed: 5rem;
      --open: 30rem;
      --accent: #0059c2;            /* brand blue (was off-brand orange #ff6b35) */
      font-family: Inter, sans-serif;
      background: var(--page);      /* white section — dark moves to .ps-panel so the gutters stay white */
      padding: 8px 24px 52px;
      color: #c5c7ce;
    }
    /* dark panel capped to the shared column so the side gutters read white on wide screens */
    #pro-slider .ps-panel {
      max-width: var(--maxw);
      margin-inline: auto;
      background: #111111;
      border-radius: 28px;
      overflow: hidden;
    }
    #pro-slider .head {
      max-width: var(--maxw);
      margin: auto;
      padding: 70px 20px 40px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 2rem;
    }
    #pro-slider .head h2 {
      font: 400 1.5rem/1.2 Inter, sans-serif;
      color: #fff;
    }
    @media (min-width: 1024px) {
      #pro-slider .head h2 { font-size: 2.25rem; }
    }
    #pro-slider .nav-btn {
      width: 2.5rem;
      height: 2.5rem;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
      font-size: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: 0.3s;
    }
    #pro-slider .nav-btn:hover { background: var(--accent); }
    #pro-slider .nav-btn:disabled { opacity: 0.3; cursor: default; }
    #pro-slider .slider {
      max-width: var(--maxw);
      margin: auto;
      overflow: hidden;
    }
    #pro-slider .controls {
      display: flex;
      flex-direction: row;
      gap: 0.5rem;
    }
    #pro-slider .track {
      display: flex;
      gap: var(--gap);
      align-items: flex-start;
      justify-content: center;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      padding-bottom: 40px;
    }
    #pro-slider .track::-webkit-scrollbar { display: none; }
    #pro-slider .project-card {
      position: relative;
      flex: 0 0 var(--closed);
      height: 26rem;
      border-radius: 1rem;
      overflow: hidden;
      background: #1a1a1a;          /* dark fallback behind the photo */
      cursor: pointer;
      transition: flex-basis var(--speed), transform var(--speed);
    }
    #pro-slider .project-card[active] {
      flex-basis: var(--open);
      transform: translateY(-6px);
      box-shadow: 0 18px 55px rgba(0, 0, 0, 0.45);
    }
    #pro-slider .project-card__bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(0.75) saturate(75%);
      transition: filter 0.3s, transform var(--speed);
    }
    #pro-slider .project-card:hover .project-card__bg {
      filter: brightness(0.9) saturate(100%);
      transform: scale(1.06);
    }
    /* shown by the <img> onerror handler when a photo is missing */
    #pro-slider .project-card__bg-fallback {
      position: absolute;
      inset: 0;
      display: none;
      z-index: 1;
    }
    #pro-slider .project-card__content {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0.7rem;
      padding: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.42) 100%);
      z-index: 2;
    }
    #pro-slider .project-card__title {
      color: #fff;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
      font-weight: 700;
      font-size: 1.35rem;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
    }
    #pro-slider .project-card__thumb,
    #pro-slider .project-card__desc,
    #pro-slider .project-card__btn { display: none; }
    #pro-slider .project-card[active] .project-card__content {
      flex-direction: row;
      align-items: center;
      padding: 1.2rem 2rem;
      gap: 1.1rem;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.58) 100%);
    }
    #pro-slider .project-card[active] .project-card__title {
      writing-mode: horizontal-tb;
      transform: none;
      font-size: 2.4rem;
    }
    #pro-slider .project-card[active] .project-card__thumb,
    #pro-slider .project-card[active] .project-card__desc,
    #pro-slider .project-card[active] .project-card__btn { display: block; }
    #pro-slider .project-card__thumb {
      width: 133px;
      height: 269px;
      border-radius: 0.45rem;
      object-fit: cover;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    }
    #pro-slider .project-card__desc {
      color: rgba(255, 255, 255, 0.92);
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
      font-size: 1rem;
      line-height: 1.4;
      max-width: 16rem;
    }
    #pro-slider .project-card__btn {
      padding: 0.55rem 1.3rem;
      border: none;
      border-radius: 9999px;
      background: var(--accent);
      color: #fff;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
    }
    #pro-slider .project-card__btn:hover { background: #1a72d6; }
    #pro-slider .ps-dots {
      display: flex;
      gap: 0.5rem;
      justify-content: center;
      padding: 20px 0;
    }
    #pro-slider .ps-dot {
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.35);
      cursor: pointer;
      transition: 0.3s;
    }
    #pro-slider .ps-dot.active {
      background: var(--accent);
      transform: scale(1.2);
    }
    @media (max-width: 767px) {
      #pro-slider { --closed: 100%; --open: 100%; --gap: 0.8rem; }
      #pro-slider .head {
        padding: 30px 15px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
      }
      #pro-slider .slider { padding: 0 15px; }
      #pro-slider .track {
        flex-direction: column;
        scroll-snap-type: y mandatory;
        align-items: center;
        justify-content: flex-start;
        gap: 0.8rem;
        padding-bottom: 20px;
      }
      #pro-slider .project-card {
        height: auto;
        min-height: 80px;
        flex: 0 0 auto;
        width: 100%;
        scroll-snap-align: start;
      }
      #pro-slider .project-card[active] {
        min-height: 300px;
        transform: none;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
      }
      #pro-slider .project-card__content {
        flex-direction: row;
        justify-content: flex-start;
        padding: 1rem;
        align-items: center;
        gap: 1rem;
      }
      #pro-slider .project-card__title {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 1.2rem;
        margin-right: auto;
        text-align: center;
        padding-inline: 0.3rem;
      }
      #pro-slider .project-card__thumb,
      #pro-slider .project-card__desc,
      #pro-slider .project-card__btn { display: none; }
      #pro-slider .project-card[active] .project-card__content {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
      }
      #pro-slider .project-card[active] .project-card__title {
        font-size: 1.8rem;
        margin-bottom: 1rem;
        margin-top: 2rem;
      }
      #pro-slider .project-card[active] .project-card__thumb {
        display: block;
        width: 200px;
        height: 267px;
        border-radius: 0.35rem;
        margin-bottom: 1rem;
      }
      #pro-slider .project-card[active] .project-card__desc {
        display: block;
        font-size: 0.95rem;
        max-width: 100%;
        margin-bottom: 1rem;
      }
      #pro-slider .project-card[active] .project-card__btn {
        display: block;
        align-self: center;
        width: 100%;
        text-align: center;
        padding: 0.7rem;
      }
      #pro-slider .ps-dots { display: none; }
      #pro-slider .controls {
        width: 100%;
        justify-content: space-between;
        padding: 0 15px 20px;
      }
      #pro-slider .nav-btn { position: static; transform: none; }
    }

    /* ─── 5. SECOND HERO BANNER ──────────────────────────────── */
    #hero2 {
      position: relative;
      height: 75vh;
      min-height: 460px;
      overflow: hidden;
    }
    #hero2 .img-placeholder {
      width: 100%;
      height: 100%;
      background: #18202a;
    }
    #hero2 .hero2-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;               /* sits below .hero-overlay (z-index:2) */
      background: #18202a;      /* dark base while the video loads */
      pointer-events: none;
    }
    #hero2 .hero-overlay {
      align-items: center;
      justify-content: center;
      padding-bottom: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 60%, transparent 100%);
      text-align: center;
    }
    #hero2 .hero-content {
      text-align: center;
      padding: 0 24px;
    }
    #hero2 .hero-headline { margin-bottom: 10px; }
    #hero2 .hero-sub { margin: 0 auto 28px; max-width: 560px; }

    /* ─── 6. PROMO CALLOUT ───────────────────────────────────── */
    #promo-callout {
      background: var(--page);
      padding: 8px 24px 52px;
    }
    /* content capped to the shared column so it sits inline with the other feature bands (no full-bleed) */
    .callout-wrap {
      max-width: var(--maxw);
      margin-inline: auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-radius: 28px;
      overflow: hidden;
      background: var(--page);
    }
    .callout-left {
      padding: 48px 40px 48px 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 16px;
    }
    .callout-tag {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--blue);
    }
    .callout-headline {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(26px, 3.5vw, 42px);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text);
      line-height: 1.1;
    }
    .callout-body {
      font-size: 14px;
      line-height: 1.65;
      color: var(--text-soft);
      max-width: 380px;
    }
    .btn-ink {
      background: var(--ink);
      color: var(--white);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      border: none;
      padding: 12px 28px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s;
      display: inline-block;
      width: fit-content;
    }
    .btn-ink:hover { background: #222; }
    .callout-right {
      position: relative;
      overflow: hidden;
      min-height: 340px;
    }
    .callout-right .img-placeholder {
      width: 100%;
      height: 100%;
      min-height: 340px;
    }
    .callout-right .callout-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .partner-badge {
      position: absolute;
      bottom: 20px;
      right: 20px;
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 8px;
      padding: 10px 16px;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
    }
    .partner-badge span { color: var(--white); }

    /* ─── 6b. ABOUT CAS-STRAPS ───────────────────────────────── */
    #about {
      background: var(--page);
      border-top: 1px solid var(--border);
      padding: 60px 24px;
      text-align: center;
    }
    .about-heading {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 900;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text);
      margin-bottom: 18px;
    }
    .about-tagline {
      font-family: 'Barlow', sans-serif;
      font-size: clamp(16px, 2vw, 18px);
      font-weight: 600;
      color: var(--text);
      margin-bottom: 16px;
    }
    .about-body {
      font-family: 'Barlow', sans-serif;
      font-size: 15px;
      line-height: 1.75;
      color: var(--text-soft);
      max-width: 900px;
      margin: 0 auto 36px;
    }
    .about-image {
      max-width: 440px;
      margin: 0 auto;
    }
    .about-image .img-placeholder {
      width: 100%;
      aspect-ratio: 4 / 3;
      border-radius: 8px;
      background: #c0c3c5;
    }
    .about-image .about-img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 8px;
      display: block;
    }

    /* ─── 7. PRODUCT GRID ────────────────────────────────────── */
    #product-grid {
      background: var(--page);
      padding: 56px 0;
      border-top: 1px solid var(--border);
    }
    .section-heading-center {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(20px, 3.2vw, 30px);
      font-weight: 900;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text);
      text-align: center;
      margin-bottom: 32px;
    }
    .products-wrapper {
      position: relative;
      max-width: var(--maxw);
      margin-inline: auto;
    }
    .products-track {
      display: flex;
      gap: 16px;
      justify-content: safe center;   /* centre the cards on wide screens; falls back to start when they overflow */
      overflow-x: auto;
      padding: 0 48px 8px;
      scrollbar-width: none;
      scroll-behavior: smooth;
    }
    .products-track::-webkit-scrollbar { display: none; }
    .product-card {
      flex-shrink: 0;
      width: 240px;
      background: var(--page);
    }
    .product-card .img-placeholder {
      width: 240px;
      height: 240px;
      background: #dde0e2;
      margin-bottom: 14px;
      border-radius: 8px;
    }
    .product-card .img-placeholder.light-bg { background: #dde0e2; }
    .product-tag {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--blue);
      margin-bottom: 4px;
    }
    .product-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text);
      margin-bottom: 4px;
    }
    .product-price {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-soft);
      margin-bottom: 10px;
    }
    .product-link {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--blue);
      border-bottom: 1.5px solid var(--blue);
      padding-bottom: 1px;
      transition: color 0.15s;
    }
    .product-link:hover { color: var(--blue-dark); }

    /* ─── 8. PARTNER BANNER ──────────────────────────────────── */
    #partner-banner {
      background: var(--page);          /* white section — dark moves to .partner-card so the gutters stay white */
      padding: 8px 24px 52px;
    }
    /* dark banner capped to the shared column so the side gutters read white on wide screens */
    .partner-card {
      max-width: var(--maxw);
      margin-inline: auto;
      background: var(--ink);
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 300px;
      border-radius: 28px;
      overflow: hidden;
    }
    .partner-left {
      padding: 48px 40px 48px 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 16px;
    }
    .partner-tag {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--blue-light);
    }
    .partner-headline {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(24px, 3.2vw, 38px);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--white);
      line-height: 1.1;
    }
    .partner-btns { display: flex; gap: 12px; flex-wrap: wrap; }
    .btn-white {
      background: var(--white);
      color: var(--ink);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      border: none;
      padding: 12px 28px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s;
      display: inline-block;
    }
    .btn-white:hover { background: var(--surface); }
    .btn-white-outline {
      background: transparent;
      color: var(--white);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      border: 2px solid rgba(255,255,255,0.5);
      padding: 10px 28px;
      border-radius: 8px;
      cursor: pointer;
      transition: border-color 0.15s;
      display: inline-block;
    }
    .btn-white-outline:hover { border-color: var(--white); }
    .partner-right {
      position: relative;
      overflow: hidden;
    }
    .partner-right .img-placeholder {
      width: 100%;
      height: 100%;
      min-height: 300px;
      background: #1e2430;
    }
    .partner-logo-area {
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      backdrop-filter: blur(4px);
      border-radius: 8px;
      padding: 8px 14px;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.6);
    }

    /* ─── 9. SHOP BY ACTIVITY ────────────────────────────────── */
    #activity {
      background: var(--page);
      padding: 48px 0 52px;
      border-top: 1px solid var(--border);
    }
    .activity-track-wrapper { position: relative; max-width: var(--maxw); margin-inline: auto; }
    .activity-track {
      display: flex;
      gap: 16px;
      justify-content: safe center;   /* centre the cards on wide screens; falls back to start when they overflow */
      overflow-x: auto;
      padding: 0 48px 8px;
      scrollbar-width: none;
      scroll-behavior: smooth;
    }
    .activity-track::-webkit-scrollbar { display: none; }
    .activity-card {
      flex-shrink: 0;
      width: 130px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      cursor: pointer;
    }
    .activity-img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      transition: transform 0.2s;
    }
    .activity-card:hover .activity-img { transform: scale(1.05); }
    .activity-img .img-placeholder {
      width: 100%;
      height: 100%;
      background: #c0c3c5;
    }
    .activity-img .img-placeholder .label { font-size: 9px; }
    .activity-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text);
      text-align: center;
    }
    .activity-track-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-60%);
      z-index: 10;
      background: rgba(255,255,255,0.95);
      border: 1.5px solid var(--border);
      color: var(--text);
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 15px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.12);
      transition: background 0.15s;
    }
    .activity-track-arrow:hover { background: var(--surface); }
    .activity-track-arrow.left { left: 8px; }
    .activity-track-arrow.right { right: 8px; }

    /* ─── 10. EXPLORE SECTION ────────────────────────────────── */
    #explore {
      background: var(--page);
      padding: 0 0 56px;
      border-top: 3px solid var(--ink);
    }
    #explore .section-heading-center {
      padding-top: 48px;
    }
    .explore-track-wrapper { position: relative; max-width: var(--maxw); margin-inline: auto; }
    .explore-track {
      display: flex;
      gap: 20px;
      justify-content: safe center;   /* centre the cards on wide screens; falls back to start when they overflow */
      overflow-x: auto;
      padding: 0 48px 8px;
      scrollbar-width: none;
      scroll-behavior: smooth;
    }
    .explore-track::-webkit-scrollbar { display: none; }
    .explore-card {
      flex-shrink: 0;
      width: 260px;
    }
    .explore-card .img-placeholder {
      width: 260px;
      height: 174px;
      background: #c0c3c5;
      margin-bottom: 12px;
      border-radius: 8px;
    }
    .explore-card .explore-img {
      width: 260px;
      height: 174px;
      object-fit: cover;
      display: block;
      margin-bottom: 12px;
      border-radius: 8px;
    }
    .explore-tag {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--blue);
      margin-bottom: 6px;
    }
    .explore-headline {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      color: var(--text);
      margin-bottom: 4px;
      line-height: 1.3;
    }
    .explore-date {
      font-size: 12px;
      color: #6a6b6d;            /* darker grey → meets 4.5:1 on white */
      margin-bottom: 8px;
    }
    .explore-read {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--blue);
      border-bottom: 1.5px solid var(--blue);
      padding-bottom: 1px;
      display: inline-block;
    }

    /* ─── 11. MAIN FOOTER ────────────────────────────────────── */
    #main-footer {
      background: #0a0a0a;
      border-top: 1px solid #1e1e1e;
      padding: 48px 48px 28px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1.2fr;
      gap: 40px;
      margin-bottom: 40px;
      align-items: start;
    }
    /* footer brand block */
    .footer-brand { display: flex; flex-direction: column; gap: 14px; }
    .footer-logo { display: inline-flex; align-items: center; align-self: flex-start; }
    .footer-logo-img { height: 26px; width: auto; filter: invert(1); }   /* black wordmark → white on the near-black footer */
    .footer-logo-text { display: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 22px; letter-spacing: 0.5px; text-transform: uppercase; color: #fff; }
    .footer-tagline { font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 260px; margin: 0; }
    .footer-address { font-style: normal; font-size: 13px; color: var(--muted); line-height: 1.7; margin-top: 14px; }
    .footer-col h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 14px;
    }
    .footer-col ul { display: flex; flex-direction: column; gap: 8px; }
    .footer-col ul li a {
      font-size: 13px;
      color: var(--muted);
      transition: color 0.15s;
      line-height: 1;
    }
    .footer-col ul li a:hover { color: var(--white); }
    .footer-bottom {
      border-top: 1px solid #1e1e1e;
      padding-top: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }
    .footer-bottom .legal-links {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }
    .footer-bottom .legal-links a {
      font-size: 11px;
      color: #8a8a8a;            /* lighter → meets 4.5:1 on near-black footer */
      letter-spacing: 0.5px;
    }
    .footer-bottom .legal-links a:hover { color: var(--muted); }
    .footer-copyright {
      font-size: 11px;
      color: #8a8a8a;            /* lighter → readable on near-black footer */
      letter-spacing: 0.3px;
    }
    @media (max-width: 760px) {
      #main-footer .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    }

    /* ─── DIVIDER UTILITY ────────────────────────────────────── */
    .section-divider {
      height: 1px;
      background: var(--border);
    }

    /* ─── SUB-PAGE SCAFFOLD (About / Products / Shop by Activity) ─ */
    .page-header {
      background: var(--ink);
      color: var(--white);
      text-align: center;
      padding: 72px 24px 60px;
      border-bottom: 3px solid var(--blue);
    }
    .page-eyebrow {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px; font-weight: 700; letter-spacing: 3px;
      text-transform: uppercase; color: var(--blue-light); margin-bottom: 10px;
    }
    .page-header h1 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(36px, 6vw, 64px); font-weight: 900;
      text-transform: uppercase; letter-spacing: 1px; line-height: 1; margin: 0;
    }
    .page-header .page-lead {
      max-width: 620px; margin: 14px auto 0;
      font-size: 15px; color: rgba(255,255,255,0.72); line-height: 1.6;
    }
    .page-section { background: var(--page); color: var(--text); padding: 64px 24px; }
    .page-wrap { max-width: 1000px; margin: 0 auto; }
    .page-note {
      border: 1.5px dashed var(--border); border-radius: 8px;
      padding: 40px 28px; text-align: center; color: var(--text-soft);
      font-size: 15px; line-height: 1.7; background: #fafafa;
    }
    .page-note strong {
      display: block; color: var(--text);
      font-family: 'Barlow Condensed', sans-serif; font-size: 20px;
      text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
    }
    .nav-links a.nav-current { color: var(--blue); }

    /* ─── CONTACT PAGE ───────────────────────────────────────── */
    .contact-grid {
      max-width: 1000px; margin: 0 auto;
      display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start;
    }
    /* left column — company + contact details */
    .contact-intro h2 {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase;
      font-size: clamp(26px, 3.2vw, 38px); line-height: 1.02; letter-spacing: 0.5px;
      color: var(--text); margin: 0;
    }
    .contact-blurb { font-size: 15px; line-height: 1.7; color: var(--text-soft); margin: 16px 0 0; max-width: 420px; }
    .contact-detail { margin-top: 26px; }
    .contact-detail .lbl {
      font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
      letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
    }
    .trading-as { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
    address.contact-address { font-style: normal; font-size: 15px; line-height: 1.7; color: var(--text-soft); }
    address.contact-address strong { display: block; color: var(--text); font-weight: 700; font-size: 16px; }
    .contact-link {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.5px; font-size: 20px; color: var(--blue); transition: color 0.15s;
    }
    .contact-link svg { flex-shrink: 0; }
    .contact-link:hover { color: var(--blue-dark); }
    /* right column — the form card */
    .contact-form {
      background: #fafafa; border: 1px solid var(--border); border-radius: 12px;
      padding: 32px; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .contact-form h2 {
      font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase;
      font-size: 22px; letter-spacing: 0.5px; color: var(--text); margin: 0 0 4px;
    }
    .form-hint { font-size: 13px; color: var(--muted); margin: 0 0 22px; }
    .field { margin-bottom: 18px; }
    .field label {
      display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
      letter-spacing: 1.5px; text-transform: uppercase; color: var(--text); margin-bottom: 7px;
    }
    .field label .opt { color: var(--muted); font-weight: 400; letter-spacing: 1px; }
    .field input, .field textarea {
      width: 100%; background: var(--page); border: 1px solid var(--border); border-radius: 8px;
      color: var(--text); font-family: 'Barlow', sans-serif; font-size: 16px; /* 16px: no iOS zoom */
      padding: 12px 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
    }
    .field input::placeholder, .field textarea::placeholder { color: var(--muted); }
    .field input:focus, .field textarea:focus {
      border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,89,194,0.12);
    }
    .field textarea { resize: vertical; min-height: 120px; }
    .contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .contact-form .btn-primary { width: 100%; margin-top: 6px; border: none; cursor: pointer; }
    /* success confirmation (revealed by JS after a valid submit) */
    .form-success {
      display: none; align-items: flex-start; gap: 12px; margin-top: 18px;
      background: #eef5ff; border: 1px solid var(--blue-light); border-radius: 8px;
      padding: 16px 18px; color: var(--text); font-size: 14px; line-height: 1.55;
    }
    .form-success.show { display: flex; }
    .form-success svg { flex-shrink: 0; color: var(--blue); margin-top: 1px; }
    .form-success strong {
      display: block; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase;
      letter-spacing: 0.5px; font-size: 16px; margin-bottom: 2px;
    }
    @media (max-width: 820px) {
      .contact-grid { grid-template-columns: 1fr; gap: 38px; }
      .contact-row { grid-template-columns: 1fr; }
    }

    /* ─── PRODUCTS PAGE — uniform feature sections ─── */
    .product-feature { padding: 76px 24px; }
    .pf-light { background: #ffffff; color: var(--text); }
    .pf-dark  { background: #0e0e0e; color: #ffffff; }
    .pf-tint  { background: #f4f4f2; color: var(--text); }
    .pf-wrap  { max-width: 1040px; margin: 0 auto; }
    .pf-row { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
    .pf-row.pf-flip .pf-media { order:2; }      /* image on the right (zig-zag rhythm) */
    .pf-media { aspect-ratio:1; border-radius:12px; overflow:hidden; }
    .pf-media .img-placeholder { width:100%; height:100%; }
    .pf-media img { width:100%; height:100%; object-fit:cover; display:block; }
    .pf-eyebrow { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--blue); margin:0 0 12px; }
    .pf-dark .pf-eyebrow { color: var(--blue-light); }
    .pf-name { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:clamp(30px,4.4vw,46px); text-transform:uppercase; line-height:1; letter-spacing:.5px; margin:0; }
    .pf-price { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:16px 0 0; font-weight:700; font-size:20px; color:var(--blue); }
    .pf-dark .pf-price { color: var(--blue-light); }
    .pf-price s { font-weight:400; font-size:15px; color:var(--muted); }
    .pf-price .pf-save { font-family:'Barlow',sans-serif; font-weight:700; font-size:11px; letter-spacing:.5px; color:#fff; background:#cc2e26; border-radius:50px; padding:4px 11px; }
    .pf-poa { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:18px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); }
    .pf-dark .pf-poa { color: var(--blue-light); }
    .pf-desc { font-size:14px; line-height:1.65; color:var(--text-soft); max-width:400px; margin:16px 0 0; }
    .pf-dark .pf-desc { color: rgba(255,255,255,.72); }
    .pf-info .btn-primary { margin-top: 28px; }
    /* colour swatches (same order + placement on every product) */
    .swatch-block { margin-top: 24px; }
    .swatch-label { font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
    .swatch-row { display:flex; gap:12px; }
    .swatch { width:30px; height:30px; border-radius:50%; cursor:pointer; border:none; padding:0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); outline:2px solid transparent; outline-offset:3px; transition: outline-color .15s; }
    .pf-dark .swatch { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
    .swatch[aria-pressed="true"] { outline-color: var(--blue); }
    .pf-dark .swatch[aria-pressed="true"] { outline-color: var(--blue-light); }
    /* key-features checklist (benefit copy under the description) */
    .pf-features { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:11px; max-width:400px; }
    .pf-features li { position:relative; padding-left:28px; font-size:14px; line-height:1.5; color:var(--text-soft); }
    .pf-dark .pf-features li { color:rgba(255,255,255,.8); }
    .pf-features li::before {
      content:""; position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%;
      background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
    }
    /* spec / what's-included band (full-width under the two-column row) */
    .pf-specs {
      max-width:1040px; margin:44px auto 0; padding-top:30px;
      border-top:1px solid rgba(0,0,0,.1);
      display:grid; grid-template-columns:repeat(5,1fr); gap:24px 20px;
    }
    .pf-dark .pf-specs { border-top-color:rgba(255,255,255,.16); }
    .pf-spec dt {
      font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700; letter-spacing:1.5px;
      text-transform:uppercase; color:var(--muted); margin:0 0 6px;
    }
    .pf-spec dd {
      margin:0; font-family:'Barlow Condensed',sans-serif; font-weight:900;
      font-size:clamp(19px,2.3vw,25px); text-transform:uppercase; line-height:1.05; color:var(--text);
    }
    .pf-dark .pf-spec dd { color:#fff; }
    @media (max-width:760px){
      .pf-row { grid-template-columns:1fr; gap:30px; }
      .pf-row.pf-flip .pf-media { order:0; }
      .pf-specs { grid-template-columns:repeat(2,1fr); gap:22px 16px; margin-top:34px; }
    }

    /* ─── PRODUCTS VIEW TOGGLE (Detailed rows ⇆ Grid) ─── */
    .pv-bar {
      max-width: 1200px; margin: 0 auto; padding: 26px 24px 20px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 18px; flex-wrap: wrap;
    }
    .pv-count { font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700;
      letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin:0; }
    .pv-count strong { color: var(--text); }
    .view-switch { display:inline-flex; align-items:center; gap:6px; }
    .view-switch-label { font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700;
      letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-right:6px; }
    .view-btn {
      display:inline-flex; align-items:center; gap:7px; cursor:pointer;
      background:var(--page); color:var(--text-soft); border:1px solid var(--border);
      border-radius:8px; padding:8px 14px; font-family:'Barlow Condensed',sans-serif;
      font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
      transition: border-color .15s, color .15s, background .15s;
    }
    .view-btn svg { width:16px; height:16px; flex-shrink:0; }
    .view-btn:hover { border-color: var(--blue); color: var(--text); }
    .view-btn[aria-pressed="true"] { background:var(--blue); border-color:var(--blue); color:#fff; }
    @media (max-width:540px){ .view-btn .view-btn-text { display:none; } .view-switch-label { display:none; } }

    /* GRID VIEW — re-lays the same feature sections as equal cards (all info kept).
       The grid sits on a full-bleed grey panel so each card reads as its own tile. */
    .products-view--grid {
      display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:26px;
      background:#e9ebee;
      padding:32px max(24px, calc((100% - 1200px) / 2)) 44px;
    }
    [data-theme="dark"] .products-view--grid { background:#080808; }
    .products-view--grid .product-feature {
      padding:0; border-radius:14px; overflow:hidden;
      border:1px solid rgba(0,0,0,.06); box-shadow:0 6px 22px rgba(0,0,0,.08);
    }
    /* animate only on hover — avoids a none→shadow transition flicker when the grid class toggles */
    .products-view--grid .product-feature:hover {
      box-shadow:0 12px 30px rgba(0,0,0,.14); transform:translateY(-2px);
      transition: box-shadow .18s ease, transform .18s ease;
    }
    [data-theme="dark"] .products-view--grid .product-feature { border-color:rgba(255,255,255,.06); box-shadow:0 6px 22px rgba(0,0,0,.5); }
    .products-view--grid .pf-wrap { max-width:none; margin:0; padding:24px; }
    .products-view--grid .pf-row { grid-template-columns:1fr; gap:20px; align-items:start; }
    .products-view--grid .pf-row.pf-flip .pf-media { order:0; }   /* no zig-zag when stacked as cards */
    .products-view--grid .pf-name { font-size:clamp(23px,2.4vw,28px); }
    .products-view--grid .pf-desc, .products-view--grid .pf-features { max-width:none; }
    .products-view--grid .pf-specs {
      grid-template-columns:repeat(2,1fr); max-width:none;
      margin:20px 0 0; padding:20px 24px 24px; gap:16px 14px;
    }
    .products-view--grid .pf-spec dd { font-size:clamp(17px,2vw,21px); }
    @media (max-width:560px){ .products-view--grid { grid-template-columns:1fr; } }

    /* ─── CUSTOM MADE PAGE (configurator + live quote) ─── */
    .cm-row { align-items: start; }            /* tall build panel: align image to the top */
    .cm-config { margin-top: 26px; max-width: 460px; }
    .cm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
    /* styled dropdowns (match .field inputs + custom chevron) */
    .field select {
      width: 100%; background: var(--page); border: 1px solid var(--border); border-radius: 8px;
      color: var(--text); font-family: 'Barlow', sans-serif; font-size: 16px; /* 16px: no iOS zoom */
      padding: 12px 38px 12px 14px; outline: none; cursor: pointer;
      -webkit-appearance: none; appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 13px center; background-size: 13px;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,89,194,0.12); }
    .cm-use-field { margin-top: 16px; }
    .cm-each-lbl { font-weight: 400; font-size: 13px; color: var(--muted); }
    /* live estimate box */
    .cm-quote {
      margin-top: 26px; max-width: 460px; background: #f4f7fc;
      border: 1px solid var(--blue-light); border-radius: 12px; padding: 20px 22px;
    }
    .cm-quote-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    .cm-quote-lbl { font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; font-size:13px; color:var(--text); }
    .cm-quote-total { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:34px; line-height:1; color:var(--blue); }
    .cm-quote-sub { margin:9px 0 0; font-size:13px; color:var(--text-soft); }
    .cm-quote-note { margin:12px 0 0; font-size:12px; line-height:1.5; color:var(--muted); }
    /* why go custom: 3 use-case cards */
    .cm-why-wrap { max-width: 1040px; margin: 0 auto; }
    .cm-why .pf-eyebrow { text-align: center; }
    .cm-why-head { font-family:'Barlow Condensed',sans-serif; font-weight:900; text-transform:uppercase; font-size:clamp(28px,4vw,42px); line-height:1; letter-spacing:.5px; text-align:center; margin:0; color:var(--text); }
    .cm-why-intro { max-width:700px; margin:18px auto 0; text-align:center; font-size:15px; line-height:1.7; color:var(--text-soft); }
    .cm-why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:46px; }
    .cm-why-card { background:var(--page); border:1px solid var(--border); border-radius:12px; padding:30px 26px; }
    .cm-why-icon { display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; background:var(--blue); color:#fff; margin-bottom:16px; }
    .cm-why-card h3 { font-family:'Barlow Condensed',sans-serif; font-weight:900; text-transform:uppercase; font-size:22px; letter-spacing:.5px; margin:0 0 10px; color:var(--text); }
    .cm-why-card p { font-size:14px; line-height:1.65; color:var(--text-soft); margin:0; }
    @media (max-width:860px){ .cm-why-grid { grid-template-columns:1fr; gap:18px; max-width:520px; margin-left:auto; margin-right:auto; } }
    @media (max-width:520px){ .cm-grid { grid-template-columns:1fr; } }

    /* ─── ABOUT PAGE ─────────────────────────────────────────── */
    /* hero stat band (sits directly under the dark page-header) */
    .about-stats { background:#f4f4f2; border-bottom:1px solid var(--border); padding:38px 24px; }
    .about-stats-grid { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
    .about-stat .num { display:block; font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:clamp(34px,5vw,52px); line-height:1; color:var(--blue); }
    .about-stat .lbl { display:block; margin-top:8px; font-family:'Barlow',sans-serif; font-size:13px; line-height:1.4; color:var(--text-soft); }
    /* stacked story paragraphs inside a reused .pf-info column */
    .pf-info .pf-desc + .pf-desc { margin-top:14px; }
    /* bold brand-blue reliability statement */
    .about-statement { background:var(--blue); color:#fff; padding:60px 24px; text-align:center; }
    .about-statement p { max-width:840px; margin:0 auto; font-family:'Barlow Condensed',sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:.5px; font-size:clamp(24px,3.6vw,42px); line-height:1.08; }
    .about-statement .sig { display:block; margin-top:18px; font-family:'Barlow',sans-serif; font-weight:600; text-transform:none; letter-spacing:0; font-size:14px; color:var(--blue-light); }
    /* athlete testimonial (dark) */
    .quote-feature { background:var(--ink); color:#fff; padding:84px 24px; }
    .quote-wrap { max-width:1040px; margin:0 auto; display:grid; grid-template-columns:0.82fr 1.18fr; gap:56px; align-items:center; }
    .quote-media .img-placeholder { width:100%; aspect-ratio:3/4; border-radius:12px; background:#2a2f38; }
    .quote-media img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:12px; display:block; }
    .quote-eyebrow { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--blue-light); margin:0 0 14px; }
    .quote-text { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:clamp(23px,3vw,36px); line-height:1.18; letter-spacing:.3px; margin:0; }
    .quote-text .qm { color:var(--blue-light); }
    .quote-attrib { margin:24px 0 0; font-family:'Barlow',sans-serif; font-size:15px; font-weight:700; }
    .quote-attrib span { color:var(--blue-light); }
    .quote-medals { display:flex; gap:30px; flex-wrap:wrap; margin-top:26px; }
    .quote-medal .m-num { display:block; font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:26px; line-height:1; color:#fff; }
    .quote-medal .m-lbl { display:block; margin-top:6px; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.6); }
    /* trusted-by org chips */
    .trust-orgs { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:30px; }
    .trust-chip { font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:1px; font-size:14px; color:var(--text); background:#fff; border:1px solid var(--border); border-radius:50px; padding:11px 22px; }
    /* centered section helpers (emergency services + closing CTA) */
    .about-center { max-width:860px; margin:0 auto; text-align:center; }
    .about-center .pf-eyebrow { color:var(--blue); }
    .about-prose { font-family:'Barlow',sans-serif; font-size:15px; line-height:1.75; color:var(--text-soft); max-width:700px; margin:18px auto 0; }
    .about-cta { background:#f4f4f2; padding:64px 24px; text-align:center; }
    .about-cta h2 { font-family:'Barlow Condensed',sans-serif; font-weight:900; text-transform:uppercase; font-size:clamp(26px,3.6vw,40px); line-height:1.05; margin:0 0 22px; color:var(--text); }
    @media (max-width:760px){
      .about-stats-grid { grid-template-columns:repeat(2,1fr); gap:26px 16px; }
      .quote-wrap { grid-template-columns:1fr; gap:30px; }
      .quote-media { max-width:320px; margin:0 auto; }
    }

    /* ─── ACCESSIBILITY & INTERACTION POLISH ─────────────────── */
    .sr-only {
      position: absolute !important;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0);
      white-space: nowrap; border: 0;
    }
    .skip-link {
      position: absolute;
      left: 12px; top: -52px;
      z-index: 1000;
      background: var(--blue);
      color: #fff;
      padding: 10px 16px;
      border-radius: 8px;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      transition: top 0.15s ease;
    }
    .skip-link:focus { top: 8px; }
    /* clear, consistent keyboard focus ring */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible {
      outline: 3px solid var(--blue);
      outline-offset: 2px;
    }
    /* lighter ring on dark surfaces so it stays visible */
    .hero-overlay button:focus-visible,
    #partner-banner a:focus-visible,
    #main-footer a:focus-visible,
    .carousel-arrow:focus-visible,
    .dot:focus-visible {
      outline-color: var(--blue-light);
    }
    /* snappier taps + subtle press feedback */
    button, a, input { touch-action: manipulation; }
    .btn-primary:active, .nav-cta:active, .btn-white:active,
    .btn-ink:active,
    .btn-outline:active, .btn-white-outline:active { transform: translateY(1px); }
    /* mobile menu toggle (hamburger) — hidden on desktop */
    .nav-toggle {
      display: none;
      background: none; border: none;
      color: #111; cursor: pointer;
      width: 40px; height: 40px;
      border-radius: 8px;
      align-items: center; justify-content: center;
    }
    .nav-toggle:hover { background: rgba(0,0,0,0.06); }

    /* respect users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .fade-up { opacity: 1 !important; transform: none !important; }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ─── RESPONSIVE ─────────────────────────────────────────── */
    @media (max-width: 900px) {
      .nav-toggle { display: flex; }
      .nav-links {
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: #f5f5f5;
        border-bottom: 1px solid #e2e2e2;
        box-shadow: 0 10px 22px rgba(0,0,0,0.10);
        padding: 8px 16px 14px;
        display: none;
      }
      #main-nav.menu-open .nav-links { display: flex; }
      .nav-links a { padding: 12px 10px; font-size: 16px; }
      #promo-callout { grid-template-columns: 1fr; }
      #partner-banner { grid-template-columns: 1fr; }
      .partner-right { display: none; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
      #hero { height: 70vh; }
    }
    @media (max-width: 600px) {
      .hero-btns { flex-direction: column; align-items: center; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .callout-left { padding: 32px 24px; }
      .partner-left { padding: 32px 24px; }
      #main-footer { padding: 40px 24px 24px; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
    }

    /* ─── SCROLL FADE-IN ANIMATION ───────────────────────────── */
    .fade-up {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ═══ THEME: DARK MODE + ACCENT PICKER ═══════════════════════ */
    /* ease the switch on the surfaces that flip */
    body, #main-nav, .nav-links, .product-feature, .page-section,
    .about-stats, .about-cta, .contact-form, .page-note, .cm-quote,
    .cm-why-card, .trust-chip, .field input, .field select, .field textarea,
    .nav-links a, .nav-icon-btn, .nav-logo-fallback, .nav-toggle, .theme-panel {
      transition: background-color .25s ease, color .25s ease, border-color .25s ease;
    }

    /* ── DARK MODE: redefine surface + text tokens ── */
    html[data-theme="dark"] {
      --text:       #ececf0;
      --text-soft:  #b6bcc4;
      --page:       #15171c;
      --tint:       #1b1e24;
      --surface:    #23262e;
      --border:     #2d313a;
      --muted:      #7c828b;
    }
    /* dark: flip the hardcoded light surfaces */
    html[data-theme="dark"] #main-nav { background: #16181d; border-bottom-color: #262a31; }
    html[data-theme="dark"] .nav-logo-fallback,
    html[data-theme="dark"] .nav-links a,
    html[data-theme="dark"] .nav-icon-btn,
    html[data-theme="dark"] .nav-toggle { color: var(--text); }
    html[data-theme="dark"] .nav-links a:hover,
    html[data-theme="dark"] .nav-icon-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
    html[data-theme="dark"] .nav-toggle:hover { background: rgba(255,255,255,0.08); }
    html[data-theme="dark"] .nav-links { background: #16181d; border-bottom-color: #262a31; }
    html[data-theme="dark"] .pf-light  { background: var(--page); }
    html[data-theme="dark"] .pf-tint   { background: var(--tint); }
    html[data-theme="dark"] .about-stats { background: var(--tint); }
    html[data-theme="dark"] .about-cta  { background: var(--tint); }
    html[data-theme="dark"] .contact-form,
    html[data-theme="dark"] .page-note { background: #1b1e24; }
    html[data-theme="dark"] .cm-quote { background: #1b1e24; border-color: var(--border); }
    html[data-theme="dark"] .form-success { background: #14243c; }
    html[data-theme="dark"] .trust-chip { background: #1b1e24; }
    html[data-theme="dark"] .cart-drawer,
    html[data-theme="dark"] .search-modal { background: #16181d; }
    html[data-theme="dark"] .search-result-item:hover,
    html[data-theme="dark"] .search-result-item:focus { background: rgba(255,255,255,0.06); }
    html[data-theme="dark"] .ci-qty button { background: #2a2f38; color: var(--text); }
    html[data-theme="dark"] .ci-qty button:hover { background: #353b45; }
    html[data-theme="dark"] .img-placeholder.light-bg { background: #2a2f38; }
    html[data-theme="dark"] .img-placeholder.light-bg .label { color: rgba(255,255,255,0.5); }

    /* ── ACCENT THEMES (recolor the 3 brand-blue tokens; blue = default in :root) ── */
    html[data-accent="green"]  { --blue:#1f9d57; --blue-light:#9fe3bd; --blue-dark:#0c5a2f; }
    html[data-accent="amber"]  { --blue:#e07a10; --blue-light:#ffd49b; --blue-dark:#8a4406; }
    html[data-accent="red"]    { --blue:#d2342f; --blue-light:#ffb1ad; --blue-dark:#7d1513; }
    html[data-accent="violet"] { --blue:#6d3bd1; --blue-light:#c9b1f5; --blue-dark:#3c1d7a; }

    /* ── THEME PANEL (injected once by script.js) ── */
    .theme-overlay { position: fixed; inset: 0; z-index: 1300; background: transparent; }
    .theme-overlay[hidden] { display: none; }
    .theme-panel {
      position: fixed; z-index: 1301; width: 250px;
      background: var(--page); color: var(--text);
      border: 1px solid var(--border); border-radius: 14px;
      box-shadow: 0 18px 50px rgba(0,0,0,0.28); padding: 16px 16px 18px;
    }
    .theme-panel[hidden] { display: none; }
    .theme-panel-title {
      font-family:'Barlow Condensed',sans-serif; font-weight:900; text-transform:uppercase;
      letter-spacing:1px; font-size:15px; margin:0 0 14px; color:var(--text);
    }
    .theme-row + .theme-row { margin-top: 16px; }
    .theme-row-label {
      display:block; font-family:'Barlow Condensed',sans-serif; font-weight:700;
      text-transform:uppercase; letter-spacing:1.5px; font-size:11px; color:var(--muted); margin-bottom:9px;
    }
    .theme-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .theme-mode-btn {
      display:flex; align-items:center; justify-content:center; gap:7px;
      padding:10px 8px; border:1px solid var(--border); border-radius:9px;
      background:transparent; color:var(--text); cursor:pointer;
      font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase;
      letter-spacing:.5px; font-size:13px; transition:border-color .15s, color .15s;
    }
    .theme-mode-btn:hover { border-color: var(--muted); }
    .theme-mode-btn[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); }
    html[data-theme="dark"] .theme-mode-btn[aria-pressed="true"] { color: var(--blue-light); border-color: var(--blue-light); }
    .theme-mode-btn svg { width:15px; height:15px; }
    .theme-accents { display:flex; gap:10px; flex-wrap:wrap; }
    .theme-accent {
      width:30px; height:30px; border-radius:50%; cursor:pointer; padding:0;
      background: var(--c); border:none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
      outline:2px solid transparent; outline-offset:3px; transition: outline-color .15s;
    }
    .theme-accent:hover { outline-color: var(--muted); }
    .theme-accent[aria-pressed="true"] { outline-color: var(--text); }
/* ══════════════════════════════════════════════════════════════
   SINGLE-FILE VIEW ROUTER (CAS build)
   Each .route is a full "page"; the hash router shows one at a time.
══════════════════════════════════════════════════════════════ */
.route { display: none; }
.route.is-active { display: block; }