/* ═══════════════════════════════════════════════════════════════════════
   OPTIMA — MOBILE / RESPONSIVE OVERRIDES
   Loaded AFTER optima-v2.css. All overrides scoped in media queries so
   the desktop build (1440px) is untouched outside these breakpoints.

   Breakpoints:
     tablet:  ≤ 1024px
     mobile:  ≤ 640px

   Phase 1 (foundation) + Phase 2 (homepage). Interior pages + configurator
   responsive work lands in a later phase.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────
   Mobile floating CTA — hidden on desktop, fixed at bottom on mobile.
   Replaces the sticky-rail BUILD YOUR POOL button on phones so the rail
   has just logo + hamburger, and the primary action lives within thumb
   reach at the bottom.
   ─────────────────────────────────────────────────────────────────── */
.mobile-fab { display: none; }

/* ───────────────────────────────────────────────────────────────────
   ROOT — prevent ANY horizontal overflow at the html level. Mobile only
   (iOS Safari scales the layout viewport to fit overflowing children
   otherwise). On desktop ≤1440 we want horizontal scroll to surface the
   locked 1440 design rather than fluid-resize, so do NOT clamp html.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  html { overflow-x: hidden; max-width: 100vw; }
}

/* Systems accordion — desktop hidden; ≤1024px shows it */
.systems-accordion { display: none; }

/* ───────────────────────────────────────────────────────────────────
   Hamburger button — desktop hidden, shown ≤ 1024px
   ─────────────────────────────────────────────────────────────────── */
.hamburger {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.hamburger .hb-line {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--paper-fg);
  transition: transform 200ms ease, opacity 200ms ease;
}
.hamburger[aria-expanded="true"] .hb-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hb-line:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hb-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════════════
   TABLET (≤ 1024px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ─── Foundation: typography + padding scale ─── */
  body { font-size: 15px; }

  /* ─── Sticky-rail header: dark/black on mobile (paper on desktop).
     Inverted children — dark bg requires light marks. Hamburger replaces full nav. ─── */
  .sticky-rail {
    padding: 14px 24px;
    gap: 12px;
    background: rgba(14, 16, 18, 0.94);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
    color: var(--paper-fg);
  }
  .sticky-rail .wordmark .g-sq,
  .sticky-rail .wordmark .g-ring { border-color: var(--paper-fg); }
  .sticky-rail .wordmark .g-dot { background: var(--paper-fg); }
  .sticky-rail .wordmark .wm-name { color: var(--paper-fg); }
  .sticky-rail .wordmark .wm-sub { color: rgba(255, 255, 255, 0.55); }
  .sticky-rail .sticky-nav { color: var(--paper-fg); }
  .sticky-rail .wm-text .wm-name { font-size: 13px; }
  .sticky-rail .wm-text .wm-sub { font-size: 9px; }
  .sticky-rail .hamburger { display: inline-flex; }
  .sticky-rail .sticky-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    /* Match the dark sticky-rail so white nav links stay readable */
    background: rgba(14, 16, 18, 0.96);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 24px 16px;
    gap: 0;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 200ms ease, opacity 200ms ease, visibility 0s 200ms;
  }
  .sticky-rail.is-nav-open .sticky-nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 200ms ease, opacity 200ms ease;
  }
  .sticky-rail .sticky-nav a {
    padding: 14px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
    font-size: 13px;
    color: var(--paper-fg);
  }
  .sticky-rail .sticky-nav a:last-of-type { border-bottom: 0; }
  .sticky-rail .btn-sm { padding: 8px 12px; font-size: 10px; }
  .sticky-rail .btn-sm .arrow { display: none; }
  .sticky-rail .wm-text {
    display: flex; flex-direction: column; gap: 2px;
    white-space: nowrap;
  }
  .sticky-rail .wm-text .wm-name { font-size: 12px; letter-spacing: 0.04em; }
  .sticky-rail .wm-text .wm-sub { font-size: 8px; letter-spacing: 0.06em; }
  .sticky-rail .glyph { transform: scale(0.85); }

  /* ─── Top-rail (homepage hero internal nav) — same hamburger pattern ─── */
  .top-rail { padding: 16px 24px; }
  .top-rail .hero-nav { display: none; }
  .top-rail .wordmark { font-size: 13px; }

  /* ─── Pencil banner ─── */
  .pencil { padding: 8px 24px; font-size: 10px; }

  /* ─── Breadcrumb ─── */
  .breadcrumb { padding: 12px 24px 10px; }
  .breadcrumb-list { flex-wrap: wrap; gap: 8px; }
  .breadcrumb-item { gap: 8px; }

  /* ─── Generic section padding compression ─── */
  .packages,
  .comparison,
  .included,
  .process,
  .service,
  .dsg,
  .faq-home,
  .final,
  .pkg-hero,
  .how-hero,
  .fin-hero,
  .contact-hero,
  .gallery-hero,
  .faq-cat-nav,
  .faq-cat,
  .pkg-detail-hero,
  .tier-spec,
  .tier-icp,
  .whats-included,
  .pkg-detail-cta,
  .why-six,
  .six-week,
  .why-area,
  .service-cities,
  .service-map-section,
  .zip-check,
  .final-cta,
  .gallery-grid-section,
  .gallery-cta-band,
  .about-story,
  .about-stats,
  .about-difference,
  .legal-page,
  .fin-strip,
  .fin-cards,
  .fin-steps,
  .fin-faq,
  .related-packages,
  .cfg-hero,
  .cfg-step,
  .cfg-included-section,
  .cfg-reserve {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ─── Section headers ─── */
  .section-header,
  .cfg-step-head,
  .ty-summary-head,
  .rp-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .sh-h, .pkg-hero-h, .fin-hero-h, .how-hero-h,
  .ty-h, .cfg-hero-h, .rp-h, .ty-summary-h, .cfg-step-h,
  .dsg-h, .zip-h, .pdh-h, .cta-band-h, .faq-h,
  .gallery-h, .contact-hero-h, .about-hero-h {
    font-size: clamp(36px, 6vw, 56px);
    /* Add breathing room — desktop line-height (0.86–0.92) is too tight
       at smaller mobile sizes. Per user feedback. */
    line-height: 1.08;
  }
  .hero-title { line-height: 1.04; }

  /* ─── Footer ─── */
  .footer { padding: 48px 24px 24px; }
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ft-bottom { flex-direction: column; gap: 16px; align-items: flex-start; }
  .ft-legal { flex-wrap: wrap; gap: 12px 24px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ROOT FIX — .page wrapper is hardcoded 1440px on desktop.
   On tablet/mobile that forces overflow. Drop the width constraint
   below 1025px. Keep fixed 1440px at desktop widths (intentional —
   the site is locked 1440 desktop, horizontal scroll on narrow desktops
   is expected per design direction).
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .page { width: 100%; max-width: 1440px; }
}

/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE HERO — tablet/mobile (≤ 1024px)
   Desktop hero uses absolute-positioned children inside a fixed 880px
   container. Mobile flattens everything into normal document flow.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Sticky-rail: JS now handles smart hide/show (visible at top, hides on
     scroll-down, reappears on scroll-up). Removed the previous always-visible
     `!important` so the JS .is-visible toggle can actually take effect. */
  /* Hide BUILD YOUR POOL in sticky-rail on mobile — that primary CTA now
     lives in the bottom floating FAB. Hamburger naturally becomes the
     rightmost element since the button is gone. */
  .sticky-rail > .btn-sm,
  .sticky-rail > a.btn-primary { display: none !important; }
  /* And since sticky-rail is now always shown, push every page's content
     down so the pencil banner / breadcrumb / hero aren't hidden under it.
     Bottom padding accommodates the floating FAB. */
  .page { padding-top: 60px; padding-bottom: 88px; }
  body { padding-bottom: 0; }

  /* Mobile floating CTA — hidden by default, shown on scroll-DOWN by JS.
     User intent: appears when actively engaging with content (scrolling
     down), hides when reviewing (scrolling up or sitting at top). */
  .mobile-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: fixed;
    left: 16px; right: 16px;
    bottom: 0;
    margin-bottom: max(16px, env(safe-area-inset-bottom, 16px));
    z-index: 90;
    background: var(--blue);
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    padding: 18px 20px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
    /* Default hidden state — translated below viewport + fully transparent */
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 130%, 0);
    transition:
      opacity 250ms ease,
      transform 350ms cubic-bezier(0.32, 0.72, 0, 1),
      background 160ms ease,
      box-shadow 160ms ease;
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
  }
  .mobile-fab.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }
  .mobile-fab:active {
    background: #0058DC;
    box-shadow: 0 12px 28px rgba(0,105,255,0.30), 0 3px 8px rgba(0,0,0,0.12);
  }
  .mobile-fab .arrow {
    display: inline-block;
    width: 0; height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid #fff;
  }

  /* Hero: keep the overlay structure (text on top of pool image), not stacked.
     The desktop hero is a 880px tall absolutely-positioned layout; on mobile
     we shrink the height and reflow children INSIDE the hero rather than
     detaching the bleed into a separate block above. */
  .hero {
    height: auto;
    min-height: 92vh;
    display: block;
    position: relative;
  }
  .hero-bleed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    left: auto;
    transform: none;
    z-index: 0;
  }
  .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero-vignette {
    display: block;
    position: absolute; inset: 0; z-index: 1;
    /* Stronger dark gradient on mobile so white text stays legible
       regardless of where the pool image is bright/dark */
    background:
      linear-gradient(180deg, rgba(14,16,18,0.55) 0%, rgba(14,16,18,0.05) 35%, rgba(14,16,18,0.40) 70%, rgba(14,16,18,0.85) 100%);
  }
  .hero-clip {
    position: absolute;
    inset: 0;
    width: auto;
    overflow: visible;
    padding: 84px 24px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
  }
  .hero-ticks { display: none; }
  .top-rail { display: none; }  /* sticky-rail handles nav on mobile */

  .hero-copy {
    position: static;
    padding: 0;
    max-width: 100%;
  }
  .hero-title {
    font-size: clamp(36px, 9vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.03em;
  }
  /* Let the <br/> render naturally — two-line H1 on phone reads fine */
  .hero-title br { display: initial; }
  .hero-sub { font-size: 15px; margin-top: 14px; }
  .hero-sub .hsub-num { font-size: 17px; }
  .eyebrow-chain { flex-wrap: wrap; row-gap: 4px; font-size: 10px; gap: 14px; margin-bottom: 16px; }
  .hero-bottom-chain { display: none; }

  .hero-bottom {
    position: static;
    padding: 0;
    left: auto; right: auto; bottom: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .hero-tags .tag-val { font-size: 18px; }
  .hero-tags .tag-lbl { font-size: 9px; }

  /* Compare packages — 4 → 2 cols, smaller everywhere */
  .pkg-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pkg { min-height: auto; }
  .pkg-head { height: 36px; padding: 0 12px; }
  .pkg-head span { font-size: 10px; }
  .pkg-name-row { padding: 14px 14px 4px; }
  .pkg-name { font-size: 20px; }
  .pkg-dim { font-size: 10px; gap: 6px; }
  .pkg-plan { aspect-ratio: 5/3; padding: 8px; }
  .pkg-feat { padding: 0 14px; gap: 6px; }
  .pkg-feat li { font-size: 12px; }
  .pkg-footer { padding: 12px 14px; }
  .pf-num { font-size: 22px; }
  .pf-mo { font-size: 9px; }
  .pf-arrow { width: 32px; height: 32px; }

  /* Comparison table — stack as cards instead of trying to scroll.
     The table is a 3-col layout (Factor | Optima | Custom) at desktop.
     On mobile we hide thead and turn each tbody row into a card with
     the row label as a heading and Optima/Custom as labeled rows. */
  .comparison { padding: 56px 24px; }
  .compare {
    display: block;
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 12px;
  }
  .compare thead { display: none; }
  .compare tbody { display: block; }
  .compare tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--rule);
    background: #fff;
  }
  .compare tbody td {
    display: block;
    border: 0;
    padding: 14px 18px;
    width: 100%;
    text-align: left;
  }
  .compare .ct-row-lbl {
    background: var(--paper-warm);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    border-bottom: 1px dashed var(--rule);
    padding: 12px 18px;
    color: var(--ink);
  }
  .compare .ct-cell, .compare .ct-cell-blue, .compare .ct-cell-custom {
    position: relative;
    padding-left: 88px;
    min-height: 56px;
    font-size: 13px;
    line-height: 1.45;
    border-bottom: 1px solid var(--rule);
  }
  .compare .ct-cell:last-child,
  .compare .ct-cell-blue:last-child,
  .compare .ct-cell-custom:last-child { border-bottom: 0; }
  .compare .ct-cell::before,
  .compare .ct-cell-blue::before,
  .compare .ct-cell-custom::before {
    position: absolute;
    left: 18px;
    top: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--blue);
  }
  .compare .ct-cell-blue::before { content: 'OPTIMA'; }
  .compare .ct-cell-custom::before { content: 'CUSTOM'; color: var(--ink-2); }
  /* If both cells use generic .ct-cell, use nth-child fallback */
  .compare tbody tr td.ct-cell:nth-of-type(2)::before { content: 'OPTIMA'; }
  .compare tbody tr td.ct-cell:nth-of-type(3)::before { content: 'CUSTOM'; color: var(--ink-2); }

  /* Pool systems section: show just the cross-section image + categorized
     accordion below. Hide the 16 absolute-positioned desktop callouts. */
  .included { padding: 56px 24px; gap: 24px; }
  .systems-illust {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 0 24px !important;
    display: block;
  }
  .systems-img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    margin: 0 auto;
    display: block;
  }
  /* Hide all desktop callouts on mobile — accordion below handles them */
  .systems-illust .callout { display: none; }

  /* Systems accordion — hidden on desktop, visible here */
  .systems-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    padding: 0 4px;
  }
  .sa-cat {
    border: 1px solid var(--rule);
    background: #fff;
    overflow: hidden;
  }
  .sa-cat > summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 17px;
    color: var(--ink);
    transition: color 120ms ease, background 120ms ease;
  }
  .sa-cat[open] > summary { background: var(--paper); }
  .sa-cat > summary::-webkit-details-marker { display: none; }
  .sa-cat > summary::marker { display: none; }
  .sa-cat-label { flex: 1; letter-spacing: -0.01em; }
  .sa-cat-meta { display: inline-flex; align-items: center; gap: 14px; }
  .sa-cat-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--blue);
    letter-spacing: 0.10em;
  }
  .sa-cat-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--rule);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 300;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1;
    transition: transform 200ms ease, border-color 120ms ease, color 120ms ease;
  }
  .sa-cat[open] > summary .sa-cat-chev {
    transform: rotate(45deg);
    border-color: var(--blue);
    color: var(--blue);
  }
  .sa-cat[open] > summary { color: var(--blue); }
  .sa-cat[open] > summary .sa-cat-count { color: var(--ink-2); }
  .sa-items {
    list-style: none;
    margin: 0;
    padding: 4px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .sa-items li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px dashed var(--rule);
  }
  .sa-num {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--blue);
    padding-top: 2px;
  }
  .sa-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .sa-text strong {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.005em;
    color: var(--ink);
  }
  .sa-text span {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-2);
  }

  /* Optional Add-ons — 2-col grid (2x2x2x2), much smaller cards */
  .addons { padding-left: 24px; padding-right: 24px; }
  .addon-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .addons-head { flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 18px; }
  .addons-head h3 { font-size: 18px; }
  .addons-head p { font-size: 12px; line-height: 1.4; }
  .addon {
    height: auto;
    min-height: 0;
    padding: 14px 12px;
    gap: 8px;
  }
  .addon-illus {
    height: 56px;
    min-height: 0;
  }
  .addon-illus svg, .addon-illus img { max-height: 56px; }
  .addon-name { font-size: 12px; line-height: 1.3; }
  .addon-price { font-size: 16px; margin-top: auto; }
  .addon-price .ap-num { font-size: 16px; }

  /* Project Exclusions & Qualifications — 2-col grid on tablet, tighter */
  .excl { margin-left: 24px; margin-right: 24px; }
  .excl-head { padding: 16px 18px; }
  .excl-head h4 { font-size: 16px; }
  .excl-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .excl-cell {
    padding: 14px 16px;
    border-right: 1px dashed var(--rule);
    border-bottom: 1px dashed var(--rule);
    font-size: 12px;
    line-height: 1.45;
  }
  .excl-cell:nth-child(2n) { border-right: 0; }
  .excl-cell:nth-last-child(-n+2) { border-bottom: 0; }
  .excl-cell p { font-size: 12px; line-height: 1.4; margin: 0; }
  .excl-icon { width: 14px; height: 14px; }

  /* Homepage Financing section — REAL fixes with !important to defeat any
     desktop rule with equal specificity. Also constrain every child to
     100% width so nothing can overflow. */
  .financing { padding: 56px 24px !important; gap: 24px !important; }
  .fin-grid {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .fin-left,
  .fin-right,
  .fin-left-content,
  .fin-card-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .fin-left-content { padding: 32px 24px !important; }
  .fin-left-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .fin-eyebrow { font-size: 10px !important; }
  .fin-brand { font-size: 14px !important; }
  .fin-big {
    font-size: 56px !important;
    line-height: 1 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
  .fin-big .fin-unit { font-size: 18px !important; }
  /* Inner stat strip (7.00% APR / 240-MO TERM) */
  .fin-strip {
    padding: 16px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    clip-path: none !important;
  }
  .fin-strip .fs-cell { padding: 12px 16px !important; flex: 1; }
  .fin-strip .fs-lbl { font-size: 11px !important; letter-spacing: 0.08em !important; }
  .fin-card-content { padding: 28px 24px !important; }
  .fin-callout { font-size: 15px !important; line-height: 1.45 !important; }
  .fin-sub { font-size: 11px !important; }
  .fin-cta {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center;
  }
  .fin-right { display: none !important; }  /* hide the side image on mobile to save space */
  .fin-disclaimer { font-size: 10px !important; padding: 0 24px !important; }

  /* Homepage FAQ rail */
  .faq-rail { width: 100% !important; max-width: 100% !important; padding: 14px 16px !important; }

  /* Service area map iframe */
  .service-right { min-height: auto !important; }
  .service-right .service-map { min-height: 240px !important; height: 240px !important; }
  .service-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Homepage FAQ section — .faq-list had a HARDCODED width: 912px */
  .faq { padding: 56px 24px; align-items: stretch; }
  .faq-list { width: 100%; max-width: 100%; }
  .faq-head { padding: 0; }
  .faq-head h2 { font-size: clamp(28px, 6vw, 40px); }
  .faq .faq-item { padding: 16px 12px; }
  .faq .faq-q { font-size: 15px; }
  .faq .faq-a { font-size: 13px; }

  /* Process plates (6-week timeline on homepage) — correct selectors */
  .process { padding: 56px 20px; }
  .plates {
    grid-template-columns: 1fr;
    border: 1px solid rgba(255,255,255,0.4);
  }
  .plate {
    padding: 24px 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.4);
  }
  .plate:last-child { border-bottom: 0; }
  .plate-week { font-size: 10px; }
  .plate-name { font-size: 18px; }

  /* Service area on homepage */
  .service-grid { grid-template-columns: 1fr; gap: 32px; }

  /* DSG section */
  .dsg-grid { grid-template-columns: 1fr; gap: 32px; }

  /* FAQ home preview */
  .faq-grid { grid-template-columns: 1fr; }

  /* Final CTA — remove the asymmetric corner brackets on mobile (they
     create a visible line on one side at narrow widths) */
  .final { height: auto; min-height: auto; }
  .final-ticks { display: none; }
  .final-inner {
    padding: 48px 24px;
    position: relative;
    z-index: 3;
  }
  .final-h { font-size: clamp(32px, 7vw, 56px); line-height: 1.05; }
  .final-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .final-ctas .btn { width: 100%; justify-content: center; }
  .final-badges { flex-wrap: wrap; gap: 16px; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE (≤ 640px) — tighter compression
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  body { font-size: 14px; }

  /* Tighten sticky-rail even more on narrow phones */
  .sticky-rail .wm-text .wm-sub { display: none; } /* save horizontal space; sub-line drops */
  .sticky-rail .btn-sm { padding: 7px 10px; font-size: 9px; }

  /* Section padding tighter */
  .packages,
  .comparison,
  .included,
  .process,
  .service,
  .dsg,
  .faq-home,
  .final,
  .pkg-hero,
  .how-hero,
  .fin-hero,
  .contact-hero,
  .gallery-hero,
  .faq-cat-nav,
  .faq-cat,
  .pkg-detail-hero,
  .tier-spec,
  .tier-icp,
  .whats-included,
  .pkg-detail-cta,
  .why-six,
  .six-week,
  .why-area,
  .service-cities,
  .service-map-section,
  .zip-check,
  .final-cta,
  .gallery-grid-section,
  .gallery-cta-band,
  .about-story,
  .about-stats,
  .about-difference,
  .legal-page,
  .fin-strip,
  .fin-cards,
  .fin-steps,
  .fin-faq,
  .related-packages,
  .cfg-hero,
  .cfg-step,
  .cfg-included-section,
  .cfg-reserve {
    padding-left: 16px;
    padding-right: 16px;
  }

  .sticky-rail { padding: 12px 20px; }
  .sticky-rail .glyph { transform: scale(0.85); }
  .pencil { padding: 6px 20px; font-size: 9px; }
  .breadcrumb { padding: 10px 20px 8px; }
  .breadcrumb-list { font-size: 10px; gap: 6px; }
  .breadcrumb-item { gap: 6px; }

  /* Footer fully stacked */
  .footer { padding: 40px 20px 20px; }
  .ft-grid { grid-template-columns: 1fr; gap: 24px; }
  .ft-brand { margin-bottom: 8px; }

  /* Section headers */
  .sh-h, .pkg-hero-h, .fin-hero-h, .how-hero-h,
  .ty-h, .cfg-hero-h, .rp-h, .ty-summary-h, .cfg-step-h {
    font-size: clamp(28px, 9vw, 44px);
  }
  .sh-eyebrow { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE — mobile (≤ 640px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Hero — narrower phone tweaks (≤ 640px) */
  .hero { min-height: 86vh; }
  .hero-clip { padding: 72px 20px 28px; }
  .hero-title { font-size: clamp(34px, 11vw, 52px); line-height: 1.04; }
  .hero-sub { font-size: 14px; }
  .hero-sub .hsub-num { font-size: 16px; }
  .hero-tags { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .hero-tags .tag-val { font-size: 15px; }
  .hero-tags .tag-lbl { font-size: 8.5px; }

  /* Compare packages — 1 col */
  .pkg-grid { grid-template-columns: 1fr; }
  .pkg-plan { aspect-ratio: 5/3; }

  /* Comparison table — keep card-stack pattern from tablet (no min-width) */
  .compare tbody td { padding: 12px 16px; font-size: 12.5px; }
  .compare .ct-row-lbl { padding: 10px 16px; font-size: 12px; }
  .compare .ct-cell, .compare .ct-cell-blue, .compare .ct-cell-custom { padding-left: 80px; }

  /* Pool systems on mobile: tighter spacing, ensure image scales */
  .systems-img { max-width: 100%; }
  .callout .co-num { width: 22px; height: 22px; font-size: 9px; }
  .callout .co-lbl { font-size: 11px; }

  /* Add-ons — keep 2-col on mobile too (per user feedback: 2x2x2x2),
     just tighten gap and card padding */
  .addon-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .addons { padding-left: 16px; padding-right: 16px; }
  .addon { padding: 12px 10px; }
  .addon-illus { height: 48px; }
  .addon-illus svg, .addon-illus img { max-height: 48px; }
  .addon-name { font-size: 11px; }
  .addon-price, .addon-price .ap-num { font-size: 14px; }

  /* Project Exclusions — tighter cells */
  .excl { margin-left: 20px; margin-right: 20px; }
  .excl-cell { padding: 14px 18px; font-size: 13px; }

  /* Process plates 1 col already from tablet, just tighten */
  .process { padding: 40px 16px; }
  .plate { padding: 20px 18px; }

  /* Final CTA */
  .final-inner { padding: 40px 20px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 3a — PACKAGE DETAIL PAGES (essential/select/premier/signature)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Hero: 2-col 656px+1fr → stacked */
  .pdh-grid { grid-template-columns: 1fr; min-height: auto; }
  .pdh-copy { padding: 48px 32px 40px; border-right: 0; border-bottom: 0.5px solid var(--line); gap: 18px; }
  .pdh-h { font-size: clamp(34px, 6vw, 52px); }
  .pdh-image { min-height: 360px; }
  .pdh-image img { object-position: center; }
  .pdh-vp { flex-wrap: wrap; gap: 12px 20px; }
  .pdh-badges { flex-wrap: wrap; gap: 8px 14px; }
  .pdh-tag-band { font-size: 11px; }

  /* Tier spec 2-col → stacked */
  .tier-spec-grid { grid-template-columns: 1fr; gap: 0; }
  .tier-spec-price { padding: 36px 28px; }
  .tier-spec-price .tsp-num { font-size: clamp(40px, 8vw, 64px); }
  .tier-spec-price .tsp-ctas .btn { width: 100%; justify-content: center; }
  .tss-row { grid-template-columns: 1fr; gap: 4px; padding: 16px 24px; }
  .tss-lbl { font-size: 10px; }
  .tss-val { font-size: 16px; }

  /* Related-packages rail: 3-col → 1-col */
  .rp-grid { grid-template-columns: 1fr; gap: 16px; }
  .rp-card { padding: 24px 20px; }
  .rp-card-name { font-size: 24px; }
  .related-packages { padding: 48px 16px; }

  /* What's included grid (if used) */
  .wi-grid { grid-template-columns: 1fr 1fr; }

  /* Inclusions list on package detail pages — 2-col grid with heavy padding */
  .pdi-list {
    grid-template-columns: 1fr;
    gap: 0 16px;
    padding: 8px 16px;
  }
  .pdi-list li { font-size: 13px; padding: 8px 0; }

  /* Financing strip card on /packages overview — 3-col grid (220px+1fr+320px)
     with 48px horizontal padding. Stacks on mobile + drops to tighter padding */
  .fin-strip-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 20px;
  }
  .fin-strip-left {
    border-right: 0;
    border-bottom: 0.5px solid rgba(255,255,255,0.18);
    padding-right: 0;
    padding-bottom: 16px;
  }
  .fin-strip-mid { font-size: 13px; line-height: 1.5; }
  .fin-strip-right .btn { width: 100%; justify-content: center; }
  .fs-num { font-size: 28px; }
}
@media (max-width: 640px) {
  .pdh-grid { gap: 0; }
  .pdh-copy { padding: 32px 20px; }
  .pdh-image { min-height: 280px; }
  .tier-spec-price { padding: 28px 20px; }
  .tss-row { padding: 14px 20px; }
  .wi-grid { grid-template-columns: 1fr; }
  .rp-head { gap: 16px; }
  .related-packages { padding: 40px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 3b — HOW-IT-WORKS WEEK TIMELINE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .weeks { padding: 56px 32px; gap: 32px; }
  .weeks-list { gap: 0; }
  .week,
  .week.week-reverse {
    flex-direction: column;
    gap: 24px;
    padding: 40px 0;
    align-items: stretch;
  }
  .week-text {
    flex-direction: column;
    gap: 16px;
  }
  .week-meta { flex: none; }
  .week-num { font-size: 11px; }
  .week-name { font-size: clamp(24px, 4.5vw, 36px); }
  .week-image {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }
  .week-image img { width: 100%; height: auto; }
  .why-six { padding: 56px 32px; }
  .why-six-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .weeks { padding: 40px 20px; }
  .week, .week.week-reverse { padding: 32px 0; gap: 20px; }
  .week-body { padding: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 3c — INTERIOR PAGES (about, service-area, financing, faq, contact)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* About — metrics 4-col → 2-col, story-grid 2-col → 1-col, why-six 3-col → 1-col */
  .metrics-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .metric { padding: 28px 22px; }
  .story-grid { grid-template-columns: 1fr; gap: 32px; }
  .story-image img { width: 100%; height: auto; }
  .who-for-grid { grid-template-columns: 1fr; gap: 18px; }
  .wf-col { padding: 28px 24px; }

  /* Service area */
  .region-grid { grid-template-columns: 1fr; gap: 14px; }
  .region { padding: 24px 22px; }
  .service-map-wrap { width: 100%; }
  .service-map-wrap .service-map { width: 100%; height: 320px; }
  .zip-check { padding: 56px 32px; }
  .zip-check-inner { grid-template-columns: 1fr; gap: 32px; }
  .zip-h { font-size: clamp(32px, 6vw, 48px); }
  .zip-input { font-size: 36px; }
  .why-area { padding: 56px 32px; }
  .why-area-list { padding-left: 0; }

  /* DSG section (on homepage + service-area) — fix: target .dsg directly,
     not .dsg-grid (which doesn't exist). Desktop grid is 712px+1fr; mobile
     stacks to single column with bounded image height. */
  .dsg {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 0;
  }
  .dsg-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    max-height: 360px;
    overflow: hidden;
  }
  .dsg-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .dsg-content {
    padding: 40px 24px;
    gap: 14px;
  }
  .dsg-h { font-size: clamp(28px, 5vw, 40px); }
  .dsg-p { font-size: 14px; line-height: 1.55; }
  .dsg-stats { grid-template-columns: 1fr; gap: 14px; margin-top: 8px; }
  .dsg-stat-body { font-size: 13px; }
  .dsg-badges { left: 24px; right: 24px; bottom: 16px; gap: 16px; }
  .dsg-badge { font-size: 10px; }
  .dsg-logo { width: 56px; height: 56px; }

  /* Financing card prices — $380/mo display was 44px and overflowing.
     Compress font + allow wrapping if it still doesn't fit. */
  .fc-monthly { font-size: 30px; line-height: 1.05; word-break: break-word; }
  .fc-from-prefix { font-size: 14px; }
  .fc-mo-unit { font-size: 14px; }
  .fc-total { font-size: 11px; }
  .fc-price-block { padding: 14px; }
  .fc-body { padding: 16px; }
  .fc-head { padding: 12px 16px; }
  .fc-name { font-size: 22px; }
  .fc-dim { font-size: 11px; }

  /* FAQ: tighten the sticky cat-nav, accordion rows, and bullet lists */
  .faq-cat-nav { padding: 12px 16px; top: 52px; }
  .cat-pills { gap: 6px; }
  .cat-pill { font-size: 10px; padding: 7px 10px; letter-spacing: 0.10em; }
  .faq-cat { padding: 40px 20px; }
  .faq-item { padding: 16px 12px; gap: 8px; }
  .faq-content { min-width: 0; }  /* allow flex children to shrink + wrap */
  .faq-q, .faq-a { word-break: break-word; overflow-wrap: anywhere; }

  /* Financing */
  .steps-grid,
  .process-grid { grid-template-columns: 1fr; gap: 16px; }
  /* Real class is .fin-card-grid (the .fin-cards selector was a typo) */
  .fin-cards,
  .fin-card-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .fin-card { padding: 20px 16px; }
  .fin-card .fc-name { font-size: 18px; }
  .fin-card .fc-monthly { font-size: 24px; }
  .fin-card .fc-total { font-size: 11px; }
  .fin-faq { padding: 56px 32px; }
  /* Financing 3-step process grid */
  .steps-grid { grid-template-columns: 1fr; gap: 14px; }
  /* Match FAQ + monthly-card internal padding so the steps don't read as
     "tighter" than sibling sections. Step text column = same width as
     others, the visual rhythm becomes consistent. */
  .step { padding: 20px 16px; }
  .step-num { font-size: 32px; }
  .step-title { font-size: 18px; }
  .step-body { font-size: 14px; line-height: 1.5; }
  /* Match the section wrapper to the rest of the page — .fin-steps had
     20px tablet padding that was inheriting into mobile and made the step
     cards sit with more side gutter than the package cards. */
  .fin-steps { padding: 40px 16px; }
  .process { padding: 40px 16px; }
  .step-num { font-size: 36px; }

  /* FAQ category pills */
  .faq-cat-nav { padding: 16px 32px; }
  .cat-pills { flex-wrap: wrap; gap: 8px; }
  .cat-pill { font-size: 12px; padding: 8px 12px; }

  /* FAQ list rows */
  .faq-item { grid-template-columns: 1fr 32px; gap: 12px; padding: 18px; }
  .faq-n { font-size: 11px; }
  .faq-q { font-size: 16px; }
  .faq-a { font-size: 14px; }
  .faq-a .faq-list-bullets { columns: 1; }

  /* Contact — was 480px+1fr, contact-grid-section padding too big */
  .contact-grid-section { padding: 48px 24px; }
  .contact-grid { grid-template-columns: 1fr; gap: 16px; }
  .contact-phone-block { padding: 32px 24px; }
  .contact-form-block { padding: 32px 24px; }
  .contact-band-inner { flex-direction: column; gap: 16px; align-items: flex-start; }
  .cf-row { grid-template-columns: 1fr; gap: 16px; }
  /* Contact phone details rows — labels were `min-width: 120px` forcing
     horizontal overflow on narrow phones */
  .cpd-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .cpd-lbl { min-width: 0; }

  /* CTA Band (contact + others) — desktop is `display: grid; 1fr auto`
     which keeps copy + CTA on one row. On mobile force a vertical stack
     by changing the grid to 1fr (or overriding display to flex). */
  .cta-band { padding: 40px 24px; clip-path: none; box-shadow: none; }
  .cta-band-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: stretch;
  }
  .cta-band-h { font-size: clamp(22px, 5vw, 32px); line-height: 1.15; }
  .cta-band-p { font-size: 14px; line-height: 1.5; }
  .cta-band-ctas { width: 100%; }
  .cta-band .btn { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .metrics-grid { grid-template-columns: 1fr; }
  .fin-cards,
  .fin-card-grid { grid-template-columns: 1fr; }
  .fin-card { padding: 18px 14px; }
  .fin-card .fc-monthly { font-size: 22px; }
  .dsg-stats { grid-template-columns: 1fr; }
  .faq-item { grid-template-columns: 1fr 24px; gap: 10px; padding: 14px; }
  .faq-q { font-size: 15px; }
  .zip-form { padding: 20px; }
  .service-map-wrap .service-map { height: 240px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 4 — CONFIGURATOR (/build)
   .cfg-* rules live in /build/configurator.css for desktop; mobile
   overrides land here so the global mobile stylesheet stays the
   single responsive source of truth.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Hero + step heads — match other sections at 20px tablet / 16px mobile */
  .cfg-hero { padding: 56px 20px 40px; }
  .cfg-hero-h { font-size: clamp(40px, 7vw, 68px); line-height: 1.04; margin: 14px 0 20px; }
  .cfg-hero-p { font-size: 16px; }
  .cfg-step { padding: 48px 20px 40px; }
  .cfg-step-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 24px; align-items: start; }
  .cfg-step-h { font-size: clamp(28px, 5vw, 44px); line-height: 1.06; }
  .cfg-step-sub { font-size: 14px; padding-bottom: 0; }
  .cfg-included-badge { align-self: flex-start; }

  /* Payment toggle: full width on tablet, stacks on mobile (handled below) */
  .cfg-pay-toggle { display: flex; flex-wrap: wrap; }
  .cfg-pay-btn { min-width: 0; flex: 1; padding: 14px 20px; }

  /* Package selector rows */
  .cfg-pkg-row {
    grid-template-columns: 100px 1fr;
    gap: 16px 18px;
    padding: 20px 22px;
  }
  .cfg-pkg-row .pkg-plan-mini { grid-row: 1 / 3; }
  .cfg-pkg-row .pkg-main { grid-column: 2; align-self: center; }
  .cfg-pkg-row .pkg-price {
    grid-column: 2;
    align-items: flex-start;
    padding-top: 8px;
    border-top: 1px dashed var(--rule);
  }
  .cfg-pkg-row .pkg-name { font-size: 22px; }
  .cfg-pkg-row .pkgp-num { font-size: 22px; }
  .pkg-band { right: 12px; top: -1px; font-size: 9px; padding: 4px 8px; }

  /* Spa 3-col → 1-col */
  .cfg-row-grid-3 { grid-template-columns: 1fr; gap: 12px; }
  .cfg-row { padding: 18px 22px; grid-template-columns: 1fr auto auto; gap: 14px; }
  .cfg-row-grid-3 .cfg-row { grid-template-columns: 1fr auto; }

  /* Segmented controls (5-col → 3-col, then 2-col) */
  .cfg-seg { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .cfg-seg[data-seg="additionalDepth"] { grid-template-columns: 1fr 1fr 1fr; }
  .cfg-seg-btn { padding: 14px 16px; }
  .segb-val { font-size: 15px; }

  /* Swatches: 3-col → 1-col */
  .cfg-swatch-grid { grid-template-columns: 1fr; gap: 12px; }

  /* Included list 4-col → 2-col */
  .cfg-included-section { padding: 48px 20px; }
  .cfg-incl-list { grid-template-columns: 1fr 1fr; gap: 8px 20px; }
  .cfg-incl-list li { font-size: 13px; padding: 6px 0; }

  /* Reservation grid */
  .cfg-reserve { padding: 48px 20px 56px; }
  .cfg-reserve-grid { grid-template-columns: 1fr; gap: 32px; }
  .cfg-form-submit { width: 100%; justify-content: center; }
  .cf-row { grid-template-columns: 1fr; gap: 14px; }
  .cfd-amount { font-size: 32px; }
  .cfg-summary { position: static; padding: 24px; }

  /* Sticky calc bar (most important — visible on every scroll) */
  .cfg-bar-inner {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 14px 20px;
    max-width: 100%;
  }
  .cfgb-left { grid-column: 1; grid-row: 1; }
  .cfgb-mid { grid-column: 2; grid-row: 1; align-items: flex-end; }
  .cfgb-primary { font-size: 24px; }
  .cfgb-secondary { font-size: 9px; }
  .cfg-cta {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    padding: 12px 20px;
  }
  .cfg-page { padding-bottom: 180px; }
}
@media (max-width: 640px) {
  .cfg-hero { padding: 48px 20px 32px; }
  .cfg-step { padding: 40px 20px 32px; }
  .cfg-included-section { padding: 40px 20px; }
  .cfg-reserve { padding: 48px 20px; }
  .cfg-pkg-row { grid-template-columns: 80px 1fr; padding: 16px 18px; }
  .cfg-pkg-row .pkg-plan-mini { width: 80px; }
  .cfg-pkg-row .pkg-name { font-size: 20px; }
  .cfg-pay-btn { padding: 12px 14px; min-width: 0; }
  .cfg-pay-detail { font-size: 11px; }
  .cfg-seg,
  .cfg-seg[data-seg="additionalDepth"] { grid-template-columns: 1fr 1fr; }
  .cfg-incl-list { grid-template-columns: 1fr; }
  .cfg-summary { padding: 20px; }
  .cs-total-row-primary { margin: 0 -20px; padding: 16px 20px; }
  .cfgb-primary { font-size: 20px; }
  .cfgb-left .cfgb-label { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 6 — EDGE PAGES (Cluster 4)
   Gallery (/gallery), legal pages (/privacy, /terms).
   Thank-you (/thank-you) mobile rules live inline in its own page,
   since its styles are page-scoped.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* ─── Gallery hero (full-bleed dark image hero) ─── */
  .gallery-hero { height: auto; min-height: 480px; }
  .gallery-hero-inner { padding: 32px 20px 36px; gap: 28px; }
  .gallery-hero .hero-ticks { inset: 16px; }
  .gallery-hero-block { gap: 14px; }
  .gallery-hero-h { font-size: clamp(40px, 7vw, 64px); line-height: 1.04; }
  .gallery-hero-p { font-size: 15px; }
  .gallery-hero-ctas { flex-wrap: wrap; gap: 8px; }
  .gallery-hero-ctas .btn { flex: 1 1 auto; justify-content: center; }

  /* Gallery grid + filters */
  .gallery-section { padding: 48px 20px; gap: 24px; }
  .gallery-filters { gap: 6px; }
  .gf-pill { padding: 10px 14px; font-size: 10px; letter-spacing: 0.14em; }
  .gf-count { font-size: 9px; padding: 1px 5px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gallery-tile-wide { grid-column: span 2; }
  .gt-meta { left: 10px; right: 10px; bottom: 10px; }
  .gt-badge { padding: 6px 10px; font-size: 9px; }
  .gt-num { font-size: 9px; }

  /* Caption cards */
  .gallery-captions { padding: 48px 20px; gap: 28px; }
  .captions-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cap-card { padding: 22px 18px; gap: 10px; }

  /* ─── Legal pages (/privacy /terms) ─── */
  .legal-content { padding: 56px 20px 48px; gap: 32px; max-width: none; }
  .legal-hero { gap: 14px; padding-bottom: 24px; }
  .legal-h { font-size: clamp(40px, 7vw, 60px); line-height: 1.04; }
  .legal-updated { gap: 10px; margin: 4px 0 0; }
  .legal-lede { font-size: 16px; margin: 8px 0 0; }
  .legal-toc { padding: 20px 22px; }
  .legal-toc-list { grid-template-columns: 1fr; gap: 8px 16px; }
  .legal-section {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 14px;
    padding-top: 24px;
  }
  .ls-num { grid-column: 1; grid-row: 1; padding-top: 0; }
  .legal-section .ls-h { grid-column: 1; grid-row: 2; }
  .legal-section .ls-body { grid-column: 1; grid-row: 3; }
  .ls-h { font-size: 22px; margin: 0 0 12px; }
  .ls-body { font-size: 14px; line-height: 1.65; }
}

@media (max-width: 640px) {
  /* Gallery — tighter on phones */
  .gallery-hero { min-height: 380px; }
  .gallery-hero-inner { padding: 28px 16px 28px; gap: 22px; }
  .gallery-hero-h { font-size: clamp(34px, 9vw, 48px); }
  .gallery-section { padding: 36px 16px; gap: 20px; }
  .gallery-grid { gap: 8px; }
  .gallery-captions { padding: 36px 16px; gap: 22px; }
  .captions-grid { grid-template-columns: 1fr; gap: 10px; }
  .gf-pill { padding: 9px 12px; }

  /* Legal — phone-tight */
  .legal-content { padding: 40px 16px 40px; gap: 28px; }
  .legal-h { font-size: clamp(32px, 8vw, 44px); }
  .legal-toc { padding: 18px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 7 — POST-DESKTOP-SWEEP COVERAGE
   ──────────────────────────────────────────────────────────────────
   New structures added during the 2026-06-05 desktop-sweep cycle:
   - .dsg-trustcard (homepage, gallery — dark trust panel)
   - .ty-cal-* (thank-you mock calendar)
   - .pkg:hover blue-outline (no mobile work needed)
   - Configurator form: new address/city fields
   - Gallery rewrite: button tiles + 3-col fixed grid
   ═══════════════════════════════════════════════════════════════════ */

/* ─── DSG TRUST CARD (homepage, gallery) ─────────────────────────
   Desktop is 2-col: .dsg-trustcard | .dsg-content.
   Mobile collapses to single column with the trust card on top.
   On desktop the ::before pseudo bleeds dark color 100vw to the
   LEFT only (since the trustcard sits in the left column). On
   mobile the card is full-width and needs to bleed BOTH directions
   so any minor sub-pixel offset doesn't leave a paper-warm gutter
   on the right. Achieved with box-shadow + clip-path. */
@media (max-width: 1024px) {
  .dsg { grid-template-columns: 1fr; min-height: 0; }
  .dsg-trustcard {
    padding: 48px 24px;
    gap: 18px;
    box-shadow: 0 0 0 100vmax var(--ink-deep);
    clip-path: inset(0 -100vmax);
  }
  /* Disable the desktop ::before bleed on mobile — the box-shadow
     above handles both sides cleanly. */
  .dsg-trustcard::before { display: none; }
  .dsg-trustcard-ticks { inset: 16px; }
  .dsg-trustcard-logo { width: 104px; height: 104px; }
  .dsg-trustcard-eyebrow { font-size: 11px; }
  .dsg-trustcard-rule { width: 60px; }
  .dsg-trustcard-proofs { max-width: 100%; width: 100%; padding: 0 16px; }
  /* More breathing room between proof rows on mobile (was 10px;
     felt cramped per user feedback). 14px vertical + slightly
     wider gap between label and value reads better. */
  .dsg-trustcard-proofs li {
    grid-template-columns: 110px 1fr;
    gap: 18px;
    padding: 14px 0;
  }
  .dtcp-lbl { font-size: 9px; letter-spacing: 0.18em; }
  .dtcp-val { font-size: 13px; }
}
@media (max-width: 640px) {
  .dsg-trustcard { padding: 40px 16px; gap: 16px; }
  .dsg-trustcard-logo { width: 88px; height: 88px; }
  .dsg-trustcard-proofs { max-width: 100%; }
  .dsg-trustcard-proofs li {
    grid-template-columns: 90px 1fr;
    gap: 12px;
    padding: 9px 0;
  }
  .dtcp-val { font-size: 12px; }
}

/* ─── THANK-YOU MOCK CALENDAR ─────────────────────────────────────
   Desktop has a 1.4fr / 1fr grid (calendar | time slots).
   Mobile stacks vertically. Calendar cells stay clickable. */
@media (max-width: 1024px) {
  .ty-calendar-section { padding: 48px 20px; }
  .ty-cal-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ty-cal-card { padding: 22px; }
  .ty-cal-card-head { padding-bottom: 14px; margin-bottom: 16px; }
  .ty-cal-month { font-size: 11px; }
  .ty-cal-nav { width: 30px; height: 30px; font-size: 16px; }
  .ty-cal-dow span { font-size: 9px; padding: 4px 0; }
  .ty-cal-day { font-size: 13px; }
  .ty-cal-slots { padding: 22px; gap: 14px; }
  .ty-cal-slot-h { font-size: 18px; }
  .ty-cal-slot-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ty-cal-slot { padding: 11px 12px; font-size: 13px; }
  .ty-cal-confirm { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .ty-calendar-section { padding: 36px 16px; }
  .ty-cal-card { padding: 18px; }
  .ty-cal-slots { padding: 18px; }
  .ty-cal-dow span { font-size: 8px; letter-spacing: 0.10em; }
  .ty-cal-day { font-size: 12px; }
  .ty-cal-slot-grid { gap: 6px; }
  .ty-cal-slot { padding: 10px 10px; font-size: 12px; }
  .ty-cal-mock-note { font-size: 9px; padding: 10px; letter-spacing: 0.06em; }
}

/* ─── PACKAGE HOVER OUTLINE ───────────────────────────────────────
   The new blue-outline hover state should still trigger on tap.
   No mobile-specific rule needed — the desktop rule works. */

/* ─── CONFIGURATOR FORM (new address/city fields) ─────────────────
   Desktop has city + zip in a 2-col cf-row. Mobile stacks each
   field to full-width — already covered by general .cf-row mobile
   override at line 1186, just reaffirming for the new structure. */
@media (max-width: 1024px) {
  .cf-row { grid-template-columns: 1fr; gap: 14px; }
  .cf-field input,
  .cf-field textarea { font-size: 16px; }  /* prevents iOS auto-zoom on focus */
}

/* ─── GALLERY GRID (post-rewrite) ─────────────────────────────────
   3-col desktop → 2-col tablet → 1-col phone. Tiles are now <button>
   not <a>, so make sure they behave as block-level interactive cards. */
@media (max-width: 1024px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .gallery-tile-wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .gallery-tile-wide { grid-column: span 1; }
  .gallery-tile {
    /* Slightly less squat aspect on phones — fills the screen better */
    aspect-ratio: 3 / 2;
  }
  .gt-meta { left: 12px; right: 12px; bottom: 12px; }
}

/* ─── HOMEPAGE PENCIL BANNER ──────────────────────────────────────
   Only the homepage has the pencil now. Its mobile padding is
   already covered by the general padding rule, but tighten font
   size + chevron on small phones so it doesn't dominate. */
@media (max-width: 640px) {
  .pencil { font-size: 9px; letter-spacing: 0.14em; padding: 7px 16px; }
  .pencil .bolt { font-size: 11px; }
}

/* ─── SERVICE-AREA REORDER (cities first, no final-CTA) ───────────
   The section-header-borderless variant on /service-area drops
   the top/bottom rules. Reset side padding on mobile so it doesn't
   inherit any leftover margin. Existing .service-cities rule covers
   the section padding. */
@media (max-width: 1024px) {
  .section-header-borderless { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }
  .section-header-borderless .sh-title { padding: 0; border-right: 0; }
  .section-header-borderless .sh-aside { padding: 0; }
}

/* ─── GALLERY HERO (full-width image with overlay text) ───────────
   Background image needs to stay full-bleed; the gradient already
   adapts via the same rule. Keep CTA button full-width on phones. */
@media (max-width: 640px) {
  .gallery-hero-ctas { width: 100%; }
  .gallery-hero-ctas .btn { width: 100%; justify-content: center; }
}

/* ─── HOMEPAGE: tighten 4-card package grid + comparison + included
       systems block. These already have rules, this section just
       guarantees no regressions from the new hover state. ─────── */
@media (max-width: 1024px) {
  .pkg:hover {
    /* Match the blue-outline behavior on tap-and-hold */
    border-color: var(--blue);
    box-shadow: inset 0 0 0 1px var(--blue);
  }
}

/* ─── CATALOG v2 (now main) — has its own inline media query.
       No global rules needed here. ──────────────────────────── */

/* ─── LIGHTBOX — additional mobile tweaks for safer thumb reach ── */
@media (max-width: 640px) {
  .lightbox-img { max-height: calc(100vh - 140px); }
  .lightbox-counter { display: none; }  /* save room — project name is enough */
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 8 — DEEP MOBILE PASS (post-2026-06-05 desktop sweep)
   Real audit response to the report that mobile was inconsistently
   broken. Targets specific issues + universal padding consistency.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── A. HOW-IT-WORKS: every-other-week is broken ─────────────────
   Desktop has `.week-reverse .week-text { flex-direction: row-reverse; }`
   at specificity (0,2,0) which beats the existing mobile `.week-text`
   rule (0,1,0). Reverse rows kept their desktop row layout on mobile.
   Override with equal specificity + !important. */
@media (max-width: 1024px) {
  .week-reverse .week-text { flex-direction: column !important; gap: 16px !important; }
  .week-reverse .week-meta {
    text-align: left !important;
    align-items: flex-start !important;
  }
  .week-reverse .week-meta .week-line { align-self: flex-start !important; }
}

/* ─── B. PACKAGES OVERVIEW HERO CHAIN ─────────────────────────────
   PICK A SIZE → BOOK YOUR BUILD → SWIM IN 6 WEEKS is horizontal +
   flowing off the edge on phones. Stack vertically and drop the
   between-bar separators (don't make sense in a column). */
@media (max-width: 640px) {
  .pkg-hero-chain {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
  }
  .pkg-hero-chain .chain-bar { display: none; }
}

/* ─── C. PACKAGES OVERVIEW — 4 cards overflowing ──────────────────
   The 2-col grid needs to be 1-col on phone, and the .pkg-2col
   card has 40px font sizing + 180px-tall plan that overflows. */
@media (max-width: 1024px) {
  .packages-2col { padding: 56px 20px; }
  .pkg-grid-2col { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .packages-2col { padding: 40px 16px; }
  .pkg-grid-2col { gap: 14px; }
  .pkg-2col { padding: 22px 20px; }
  .pkg-2col .pkg-name { font-size: 28px; }
  .pkg-2col .pkg-plan { height: 140px; padding: 0 12px; }
  .pkg-2col .pkg-footer { padding: 16px 0 0; }
  .pkg-2col .pf-num { font-size: 28px; }
}

/* ─── D. EVERYTHING INCLUDED ACCORDION on /packages overview ──────
   Now a <details> element. Style the summary like a tappable header
   with a chevron. On desktop the JS opens them by default; the
   chevron is hidden since the content is always visible. */
.pkg-includes-acc summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
}
.pkg-includes-acc summary::-webkit-details-marker { display: none; }
.pkg-includes-chev {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  transition: transform 0.2s ease;
  display: none; /* hidden on desktop, shown below ≤640 */
}
.pkg-includes-acc[open] .pkg-includes-chev { transform: rotate(45deg); }
@media (max-width: 640px) {
  .pkg-includes-chev { display: inline-block; }
  .pkg-includes-acc summary {
    padding: 14px 0;
    border-bottom: 1px dashed var(--line);
    border-top: 1px dashed var(--line);
    margin: 8px 0;
  }
  .pkg-includes-acc[open] summary { border-bottom-color: transparent; }
}

/* ─── E. FIN-STRIP card on /packages overview ─────────────────────
   The dark "from $380/mo · Lyon" card overflows on mobile due to
   the 3-col grid (220px+1fr+320px). Existing rule collapses to 1-col
   but font sizes are still too big. Tighten and reduce padding. */
@media (max-width: 1024px) {
  .fin-strip { padding: 48px 20px !important; }
  .fin-strip-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 18px;
  }
  .fin-strip-left { padding: 0; border-right: 0; }
  .fs-brand { font-size: 32px !important; }
  .fs-big { font-size: 38px !important; }
  .fs-unit { font-size: 16px; }
  .fin-strip-right .btn { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .fin-strip { padding: 36px 16px !important; }
  .fin-strip-card { padding: 18px 16px; gap: 14px; }
  .fs-brand { font-size: 28px !important; }
  .fs-big { font-size: 32px !important; }
}

/* ─── F. PACKAGE DETAIL PAGES — hero image hidden on phone ────────
   Hero hides the image entirely on small phones; the copy fills
   the full hero region. Reduce hero vertical padding too. */
@media (max-width: 640px) {
  .pdh-image { display: none !important; }
  .pdh-grid { grid-template-columns: 1fr; min-height: auto; }
  .pdh-copy { padding: 36px 16px 32px; border-right: 0; border-bottom: 0; }
}

/* ─── G. WHO IT'S FOR / WHAT'S INCLUDED / ADDONS padding ──────────
   User complaint: too much side padding + inconsistent across these
   three sections on package detail pages. Pin them to the same
   16px sides as everything else. */
@media (max-width: 1024px) {
  .who-for { padding: 48px 20px !important; gap: 28px; }
  .who-for-grid { grid-template-columns: 1fr; gap: 14px; }
  .wf-col { padding: 22px 22px; }
  .pkg-detail-included { padding: 48px 20px !important; }
  /* Scoped to package detail pages only. Earlier this was unscoped
     (`.addons { padding: 0 }`) and was clobbering the homepage's
     own .addons section, making the "Optional Add-Ons" heading
     run flush against the viewport edges. */
  .pkg-detail-included .addons { padding: 0; }
  .pkg-detail-included .addons-head { padding: 0 0 18px; gap: 8px; }
  .pkg-detail-included .addons-head h3 { font-size: 28px; }
}
@media (max-width: 640px) {
  .who-for { padding: 36px 16px !important; gap: 22px; }
  .wf-col { padding: 18px 18px; gap: 10px; }
  .wf-title { font-size: 18px; }
  .wf-body { font-size: 14px; }
  .pkg-detail-included { padding: 36px 16px !important; }
  .pkg-detail-included .addons-head h3 { font-size: 24px; }
}

/* ─── H. FOOTER EMPTY SPACE on phones ─────────────────────────────
   .page has 88px bottom padding to clear the floating FAB. But the
   FAB only appears on scroll-down and is hidden when user reaches
   the footer area. Dropping to 32px removes the dead space while
   keeping enough buffer for any momentary FAB overlap. */
@media (max-width: 1024px) {
  .page { padding-bottom: 32px !important; }
}

/* ─── I. UNIVERSAL SECTION SIDE PADDING ───────────────────────────
   Site-wide rule: every section on mobile gets 20px sides on tablet
   and 16px sides on phone — no exceptions. Uses !important to beat
   any shorthand `padding: X Y` overrides in earlier rules. This is
   the rule that catches anything I missed below. */
@media (max-width: 1024px) {
  .packages, .comparison, .included, .process, .service, .dsg,
  .faq-home, .final, .pkg-hero, .how-hero, .fin-hero, .contact-hero,
  .gallery-hero, .faq-cat-nav, .faq-cat, .pkg-detail-hero, .tier-spec,
  .tier-icp, .whats-included, .pkg-detail-cta, .why-six, .six-week,
  .why-area, .service-cities, .service-map-section, .zip-check,
  .final-cta, .gallery-grid-section, .gallery-cta-band, .about-story,
  .about-stats, .about-difference, .legal-page, .fin-strip, .fin-cards,
  .fin-steps, .fin-faq, .related-packages, .cfg-hero, .cfg-step,
  .cfg-included-section, .cfg-reserve, .cta-band, .pkg-detail-included,
  .who-for, .addons, .pkg-hero, .gallery-section, .gallery-captions,
  .weeks, .footer, .packages-2col, .about-team {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
@media (max-width: 640px) {
  .packages, .comparison, .included, .process, .service, .dsg,
  .faq-home, .final, .pkg-hero, .how-hero, .fin-hero, .contact-hero,
  .gallery-hero, .faq-cat-nav, .faq-cat, .pkg-detail-hero, .tier-spec,
  .tier-icp, .whats-included, .pkg-detail-cta, .why-six, .six-week,
  .why-area, .service-cities, .service-map-section, .zip-check,
  .final-cta, .gallery-grid-section, .gallery-cta-band, .about-story,
  .about-stats, .about-difference, .legal-page, .fin-strip, .fin-cards,
  .fin-steps, .fin-faq, .related-packages, .cfg-hero, .cfg-step,
  .cfg-included-section, .cfg-reserve, .cta-band, .pkg-detail-included,
  .who-for, .addons, .pkg-hero, .gallery-section, .gallery-captions,
  .weeks, .footer, .packages-2col, .about-team {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ─── J. HORIZONTAL OVERFLOW DEFENSE ──────────────────────────────
   Belt-and-suspenders to prevent the layout from ever exceeding
   viewport width on phones. */
@media (max-width: 1024px) {
  body { overflow-x: hidden; }
  img, video, svg, iframe { max-width: 100%; height: auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 9 — ROUND-2 MOBILE PUNCH-LIST (2026-06-05)
   Specific issues called out after Phase 8 review.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── /packages: hero chain — center-aligned with dashes on phone ── */
@media (max-width: 640px) {
  .pkg-hero-chain {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }
  .pkg-hero-chain .chain-bar {
    display: inline-block;
    width: 12px; height: 1px;
    background: rgba(0, 105, 255, 0.4);
    align-self: center;
  }
}

/* ─── /packages card — drastically simpler on mobile ──────────────
   Per user direction: name → size → SVG → best-for → price → CTA.
   Hide the "PL.X-XX" sheet label and the "Everything Included"
   accordion entirely. Tighten everything else. */
@media (max-width: 640px) {
  .pkg-2col .pkg-head { display: none; }
  .pkg-2col .pkg-includes-acc { display: none; }
  .pkg-2col {
    gap: 12px;
    padding: 22px 18px;
  }
  .pkg-2col .pkg-name-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .pkg-2col .pkg-name { font-size: 30px; line-height: 1.05; }
  .pkg-2col .pkg-dim { font-size: 11px; letter-spacing: 0.10em; }
  .pkg-2col .pkg-plan {
    height: 130px;
    padding: 0;
    margin: 4px 0 2px;
  }
  .pkg-2col .pkg-icp {
    font-size: 14px;
    color: var(--gray-deep);
    margin: 0;
  }
  .pkg-2col .pkg-footer {
    padding: 14px 0 0;
    border-top: 1px dashed var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .pkg-2col .pf-price { gap: 2px; align-items: flex-start; }
  .pkg-2col .pf-lbl { font-size: 9px; letter-spacing: 0.16em; }
  .pkg-2col .pf-num { font-size: 26px; }
  .pkg-2col .pf-mo { font-size: 9px; letter-spacing: 0.12em; }
  .pkg-2col .pkg-cta {
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: 11px;
    padding: 14px 16px;
  }
}

/* ─── /packages financing strip — hammer it down further ──────────
   User says it's STILL overflowing even after Phase 8. Take the
   gloves off — drop the giant 72px price further and remove the
   tabular-nums spacing pressure. */
@media (max-width: 640px) {
  .fin-strip-card {
    padding: 16px 14px !important;
    gap: 12px !important;
  }
  .fs-eyebrow { font-size: 9px !important; letter-spacing: 0.14em; }
  .fs-brand { font-size: 24px !important; }
  .fs-price { gap: 8px; flex-wrap: wrap; }
  .fs-from { font-size: 9px !important; letter-spacing: 0.14em; }
  .fs-big { font-size: 26px !important; line-height: 1; }
  .fs-unit { font-size: 13px !important; }
  .fs-body { font-size: 12px; line-height: 1.5; }
  .fin-strip-right .btn { font-size: 11px; padding: 12px 16px; }
}

/* ─── /service-area zip-check overflow ────────────────────────────
   The .zip-check section + its inner form was clipping. Pin the
   form width and tighten zip-input giant 48px font for mobile. */
@media (max-width: 640px) {
  .zip-check { padding: 36px 16px !important; }
  .zip-check-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .zip-h { font-size: 32px !important; }
  .zip-p { font-size: 14px; }
  .zip-form { padding: 18px 16px; }
  .zip-input {
    font-size: 36px !important;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 4px;
  }
  .zip-cta { font-size: 11px; padding: 14px 16px; }
  .zip-result { padding: 16px 18px; font-size: 13px; }
}

/* ─── /about story image — broken on mobile ───────────────────────
   The 4:5 portrait container + landscape source image was leaving
   a huge black void below. Drop the aspect-ratio constraint on
   mobile so the container hugs the image's natural height. */
@media (max-width: 1024px) {
  .story-image {
    aspect-ratio: auto !important;
    height: auto !important;
    background: transparent;
  }
  .story-image img {
    position: static !important;
    width: 100%;
    height: auto !important;
    display: block;
  }
  .story-image .hero-ticks { display: none; }
}

/* ─── /gallery hero — strip badges + eyebrow on mobile ────────────
   User: "you can't even read [the eyebrow]. Just remove it and
   darken on mobile the overlay even more". */
@media (max-width: 640px) {
  .gallery-hero-inner .pdh-badges { display: none; }
  .gallery-hero-eyebrow { display: none; }
  .gallery-hero-vignette {
    background: linear-gradient(180deg,
      rgba(14,16,18,0.75) 0%,
      rgba(14,16,18,0.55) 35%,
      rgba(14,16,18,0.70) 70%,
      rgba(14,16,18,0.98) 100%) !important;
  }
}

/* ─── Lightbox arrows — make obvious on mobile ────────────────────
   User: "You also can't swipe through really easily on the photos
   on mobile. There should be like arrows that tell you you can do
   the UX a bit more." */
@media (max-width: 640px) {
  .lightbox-nav {
    width: 52px; height: 52px;
    background: rgba(0, 105, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    font-size: 32px;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  }
  .lightbox-nav:active {
    background: rgba(0, 105, 255, 0.4);
    transform: translateY(-50%) scale(0.95);
  }
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }
  /* Add a tiny swipe-hint pulse on first lightbox open */
  .lightbox:not([hidden]) .lightbox-next {
    animation: lb-hint 1.6s ease-out 1;
  }
  @keyframes lb-hint {
    0%   { transform: translateY(-50%) translateX(0); }
    25%  { transform: translateY(-50%) translateX(6px); }
    50%  { transform: translateY(-50%) translateX(0); }
    75%  { transform: translateY(-50%) translateX(4px); }
    100% { transform: translateY(-50%) translateX(0); }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 10 — ROUND-3 PUNCH-LIST (2026-06-05)
   FAQ grid orphan, financing block bleed, gallery hero link color,
   lightbox swipe affordance.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── A. FIN-STRIP block on /packages: defensive collapse ─────────
   Even after Phase 8+9, the disclaimer paragraph is rendering in a
   narrow strip to the right of the dark card. Force the entire
   block + every child to behave as block-level with explicit
   width and box-sizing. */
@media (max-width: 1024px) {
  .fin-strip,
  .fin-strip-card,
  .fin-strip-left,
  .fin-strip-mid,
  .fin-strip-right {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .fin-strip-card {
    padding: 22px 18px !important;
  }
  .fin-strip-card > * + * { margin-top: 14px; }
  .fin-strip-left { border-right: 0 !important; padding: 0 !important; }
  .fin-strip-mid .fs-price { display: flex !important; align-items: baseline; gap: 8px; }
  .fin-strip-right { margin-top: 6px; }
  .fin-strip-right .btn { width: 100% !important; }
  .fin-strip .fin-disclaimer,
  .fin-disclaimer {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 14px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
  }
}

/* ─── B. .rail wrapper on homepage financing — flex-row → block ───
   Homepage uses <div class="rail"><p class="fin-disclaimer">…</p></div>
   and .rail is `display: flex` (row, space-between). On mobile this
   leaves a flexed disclaimer in odd layouts. Drop to block. */
@media (max-width: 1024px) {
  .rail {
    display: block !important;
    padding: 16px 0 0 !important;
  }
  /* On the homepage "Compare packages" rail, the .rail-note text
     stacks above the COMPARE ALL FOUR button with no gap by default
     once .rail goes to display:block. Add breathing room. */
  .rail .rail-ctas { margin-top: 16px; }
}

/* ─── C. GALLERY HERO: link color white instead of blue ───────────
   User: "subtext and the hero everything should be white, no blue
   underline — just a white underline" */
.gallery-hero-p a,
.gallery-hero-p a:visited {
  color: #fff !important;
  border-bottom-color: rgba(255, 255, 255, 0.55) !important;
}
.gallery-hero-p a:hover {
  color: #fff !important;
  border-bottom-color: #fff !important;
}

/* ─── D. LIGHTBOX SWIPE HINT — persistent on mobile ───────────────
   User: "no push to tell the user that they can scroll left or
   right". Make arrows persistently visible + add a fade-in text
   hint on first open that fades after 3s. */
@media (max-width: 640px) {
  .lightbox-nav {
    /* Stronger contrast against any photo */
    background: rgba(0, 0, 0, 0.55) !important;
    border: 2px solid rgba(255, 255, 255, 0.85) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
}

/* Swipe hint text — appears below the photo on lightbox open */
.lightbox-swipe-hint {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.55);
  padding: 8px 14px;
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  opacity: 0;
  pointer-events: none;
  animation: lb-hint-fade 4s ease-out forwards;
}
@keyframes lb-hint-fade {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
  15%  { opacity: 0.95; transform: translateX(-50%) translateY(0); }
  70%  { opacity: 0.95; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}
@media (min-width: 1025px) {
  .lightbox-swipe-hint { display: none; }  /* desktop has visible arrows already */
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 11 — NARROW-DESKTOP RESPONSIVE SWEEP (1025–1440px)
   ═══════════════════════════════════════════════════════════════════
   The site is designed at 1440px baseline. Below that — anywhere from
   tablet landscape (1025) to MacBook Pro 13/14" (1280/1512) — sections
   were inheriting their full-width desktop styling and feeling cramped
   or overflowing. This block fluid-scales the most impactful properties:

   1. Section side padding — 56px → clamp(24px, 4vw, 56px)
   2. Hero/headline max-widths — cap so they don't sprawl into 4-5 lines
   3. Card grids — let auto-fit drop to fewer columns when crowded
   4. A couple of hard-coded illustration widths (864/912/1141/1328)
      become fluid

   Phone (≤640) + tablet (≤1024) blocks above are unaffected — this
   block is sandwiched between them via min-width:1025.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1440px) {
  /* ── Section side padding (fluid 24-56px). Mirrors the universal
        pattern used at ≤1024px, but with a softer floor since we
        still have plenty of horizontal room. */
  .compare, .compare-pkg, .reviews, .reviews-section, .reviews-hero,
  .area-coverage-section, .area-faq-section, .area-cta-section,
  .area-list-section, .area-zip-search, .area-cta-strip,
  .area-tally-strip, .about-history, .about-numbers, .about-promises,
  .about-quote, .about-team, .about-cta-strip, .about-future,
  .why-optima, .who-for, .systems, .pencil-banner,
  .financing, .financing-strip, .financing-detail, .fin-strip,
  .faq, .faq-section, .faq-hero, .faq-cta,
  .gallery-hero, .gallery-grid-section, .gallery-trust,
  .contact-section, .contact-channels, .contact-cta,
  .privacy-content, .terms-content,
  .ty-summary-section, .ty-calendar-section, .ty-next-section,
  .ty-thanks-banner, .ty-cta-section,
  .packages, .packages-2col, .compare-table-section,
  .pkg-hero, .how-content, .how-cta,
  .dsg-trust, .testimonial, .testimonial-section,
  .pkg-detail-included, .pkg-detail-hero, .pkg-detail-process,
  .pkg-detail-comparison, .pkg-detail-faq, .pkg-detail-cta,
  .build-cta-strip, .footer {
    padding-left: clamp(24px, 4vw, 56px) !important;
    padding-right: clamp(24px, 4vw, 56px) !important;
  }
  /* .dsg deliberately excluded — its trustcard bleeds to the left
     viewport edge via box-shadow, content panel bleeds right. */

  /* The hero pencil banner uses 105px 170px — kill the horizontal pad. */
  .pencil-banner { padding-left: clamp(20px, 3vw, 80px) !important;
                   padding-right: clamp(20px, 3vw, 80px) !important; }

  /* ── Hero headlines / section h1s — cap max-width so they don't
        sprawl when the section is full-width minus padding. The
        .pkg-hero-h and similar use very large font-sizes (~80-100px)
        which look great at 880-1100px but ugly at 1300+. */
  .pkg-hero-h, .how-hero-h, .area-hero-h, .about-hero-h,
  .faq-hero-h, .contact-hero-h, .reviews-hero-h, .gallery-hero-h,
  .ty-summary-h, .ty-next-h {
    max-width: 1100px;
  }

  /* The /build hero "Configure your Optima pool." is enormous; cap it
     so it stays on 2 lines instead of one runaway. */
  .cfg-hero-h { max-width: 1000px; }

  /* ── Homepage 4-up package grid — keep 4 columns at every desktop
        width (client wants a single row, not 3+1). Cards shrink
        proportionally. Tablet block (≤1024) handles wrapping. */
  .pkg-grid:not(.pkg-grid-2col) {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* ── Compare table — let it scroll horizontally if it overflows
        the container at narrow widths instead of squishing. */
  .compare .ct-table-wrap, .ct-table-wrap, .compare-table-wrap {
    overflow-x: auto;
  }

  /* ── Hard-coded illustration widths → fluid */
  .systems-illust { width: 100% !important; max-width: 1328px; }
  .systems-illust .si-pool { width: 100% !important; max-width: 864px;
                              height: auto !important; aspect-ratio: 864 / 653; }
  .who-for-illust, .dsg-illust { width: 100% !important; max-width: 912px; }
  .area-map-wrap, .area-map-iframe { width: 100% !important; max-width: 1141px; }
  .systems-illust .si-tag { /* the floating circular tags around the pool */
    /* keep absolute positioning but allow shrink */
    max-width: 208px; width: auto;
  }

  /* ── Compare custom column was hard-coded 544px — make it fluid */
  .compare .ct-custom { width: auto !important; min-width: 280px; max-width: 544px; }

  /* ── Hero rail nav — at 1280 the nav links + logo + CTA can crowd.
        Tighten link gap. */
  .sticky-nav { gap: 18px; }
  .sticky-nav a { font-size: 12px; }

  /* ── Hero bottom-rail (4 stat tags) — let the tags wrap if they
        would overflow the .hero-bottom row. */
  .hero-tags { flex-wrap: wrap; row-gap: 16px; }

  /* ── /build configurator step-head grid (1fr 480px) → at narrow
        widths the 480px right column eats half. Let it shrink. */
  .cfg-step-head { grid-template-columns: 1fr clamp(280px, 32vw, 480px); gap: 32px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 11b — WIDE-DESKTOP (>1440)
   ═══════════════════════════════════════════════════════════════════
   .page caps at 1440 wide; on >1440 viewports the gutters past the
   page used to show the html bg (paper) but a recent change made them
   ink-deep, then back to paper. This re-asserts paper for the html
   layer specifically when wider than the design baseline so nothing
   ever paints through as dark on wide screens. */
@media (min-width: 1441px) {
  html, body { background: var(--paper) !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 12 — DEFENSIVE MOBILE OVERFLOW GUARD
   ═══════════════════════════════════════════════════════════════════
   Last-resort container for any element that escapes the viewport on
   mobile. The site has plenty of absolutely-positioned + fixed-width
   pieces (systems-illust, callouts, pkg-detail-hero, etc.) — if any
   of those overflow at small widths the whole page becomes janky.
   This block hard-clamps every image and the .page wrapper to
   the viewport width.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Every image fits the viewport unless explicitly overridden */
  img { max-width: 100% !important; height: auto; }

  /* The .page wrapper at mobile must not exceed viewport — overrides
     the desktop max-width:1440px which can be larger than the
     viewport in some edge cases. */
  .page { max-width: 100vw !important; overflow-x: clip; }

  /* Systems-illust container: hard-clamp container, absolutely-
     position children, even with !important from elsewhere. */
  .systems-illust {
    height: auto !important;
    overflow: hidden;
  }
  .systems-img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    transform: none !important;
    inset: auto !important;
  }
}