/* =========================================================
   Mobile readability + aesthetic refinements for screens
   under 768px. The viewport meta is set to width=device-width,
   initial-scale=1.0, so these rules ensure typography, spacing,
   and layout look polished on small screens.

   IMPORTANT: every rule in this file is wrapped in a mobile
   @media query (or applies to layout primitives like sticky
   nav). Desktop (≥ 768px) is intentionally untouched.
   ========================================================= */

html, body {
  max-width: 100%;
  /* `clip` instead of `hidden` so the sticky <nav> still anchors to the
     viewport on mobile (overflow:hidden creates a scroll container that
     breaks position:sticky in iOS Safari and some Chrome builds). */
  overflow-x: clip;
}

/* Sticky header on mobile, matching desktop behavior across every page */
.nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

img, video, iframe, svg, canvas, picture {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767.98px) {
  /* Slightly smaller, tighter base text on phones — same hierarchy
     as desktop, just dialed down so paragraphs read on one screen
     instead of scrolling for half a minute. */
  body,
  body p,
  body li,
  body span,
  body a,
  body label,
  body td,
  body th,
  body div {
    font-size: 14px;
  }

  body {
    font-size: 14px;
    line-height: 1.55;
    /* No left/right padding on body — sections/.container handle their own
       horizontal padding. Adding it here doubles up and leaves visible
       gutters on phones that make the layout look narrower than the viewport. */
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  body p { line-height: 1.55 !important; }

  /* Belt-and-braces: ensure the sticky nav, hero, and full-bleed sections
     truly span edge-to-edge on phones */
  .nav,
  .hero,
  .section,
  .trust-bar,
  .brand-strip,
  footer.footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* Buttons stay tappable but no longer dominate small screens */
  button,
  .btn,
  a.btn,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .button,
  a.button {
    font-size: 0.92rem !important;
    padding: 11px 18px !important;
  }
  .btn-lg { font-size: 0.98rem !important; padding: 13px 22px !important; }
  .btn-sm { font-size: 0.82rem !important; padding: 9px 16px !important; }

  /* Headings — meaningfully smaller on phones, but keep the type
     hierarchy intact so design language matches desktop. */
  h1 { font-size: 1.65rem !important; line-height: 1.12 !important; letter-spacing: -0.3px !important; }
  h2 { font-size: 1.3rem !important; line-height: 1.15 !important; }
  h3 { font-size: 1.05rem !important; line-height: 1.2 !important; }
  h4 { font-size: 0.98rem !important; line-height: 1.25 !important; }

  /* Eyebrow labels */
  .section-eyebrow { font-size: 0.7rem !important; letter-spacing: 1.6px !important; }

  /* Kill desktop-sized inline font-size hints on mobile so paragraphs
     don't punch above the new base. Only targets inline styles set on
     the page; keeps desktop CSS untouched. */
  [style*="font-size:1.05rem"],
  [style*="font-size: 1.05rem"],
  [style*="font-size:1.1rem"],
  [style*="font-size: 1.1rem"],
  [style*="font-size:1.15rem"],
  [style*="font-size: 1.15rem"],
  [style*="font-size:1.2rem"],
  [style*="font-size: 1.2rem"] {
    font-size: 0.92rem !important;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* Imagery should carry more of the story on mobile — soften corners
     and add a subtle lift so photos read as the visual anchor of each
     section. Skip anything that already opts out (icons, mascots, logos
     embedded in nav/header, and the hero video which has its own shape). */
  section img:not(.brand-mascot):not(.brand-mascot-decor):not(.hero-video):not([class*="logo"]):not([class*="icon"]):not([class*="avatar"]) {
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(9,31,61,0.18);
  }
}

/* =========================================================
   Phone-specific layout polish (≤ 600px)
   - Compact sticky brand header so it doesn't dominate when scrolling
   - Trim verbose hero/intro copy to keep the page punchy
   - Two-up service cards and review cards
   - Tighter section rhythm
   - Pull dense inline grids and gaps back to phone-friendly values
   ========================================================= */
@media (max-width: 600px) {
  /* Compact sticky brand header — applied to every page so the
     homepage and inner pages share the same trim layout. The
     previous mobile mascot was 72–100px tall, which made the
     sticky nav take ~30% of the viewport when scrolling. */
  .brand-header {
    gap: 10px !important;
    padding: 6px 12px 4px !important;
  }
  .brand-header img.brand-mascot {
    height: clamp(40px, 11vw, 56px) !important;
    transform: none !important;
  }
  .brand-header .brand-wordmark {
    font-size: clamp(1.1rem, 5.2vw, 1.5rem) !important;
    letter-spacing: 0.4px !important;
    -webkit-text-stroke-width: 0.4px !important;
    text-shadow: 1px 1px 0 rgba(26,110,216,0.18), 2px 2px 4px rgba(9,31,61,0.14) !important;
  }
  .brand-header::after { height: 2px !important; }

  /* Keep the menu row tidy on every page (some inner pages use
     justify-content: space-between with no wrap, which overflows
     on phones) */
  .nav-inner {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
  }

  /* Compact nav menu links so wayfinding stays readable but doesn't
     wrap onto three rows. */
  .nav-menu {
    gap: 2px !important;
    justify-content: center !important;
  }
  .nav-menu a {
    font-size: 0.78rem !important;
    padding: 6px 8px !important;
    letter-spacing: 0.3px !important;
  }

  /* CTA bubbles in the header — sized to match the smaller wordmark */
  .nav-cta { gap: 8px !important; }
  .nav-cta .btn,
  .nav-cta a.btn {
    font-size: 0.8rem !important;
    padding: 7px 12px !important;
    letter-spacing: 0.3px !important;
    line-height: 1.2 !important;
  }

  /* ── HOMEPAGE HERO ──────────────────────────────────────
     Keep the headline + CTAs, drop the long paragraph and trust row.
     Push the content down from the sticky header so the banner is
     fully visible and the headline has room to breathe. */
  .hero { min-height: 0 !important; }
  .hero-inner {
    padding: 28px 16px 26px !important;
    gap: 12px !important;
  }
  /* Photo of Jackson is the FIRST thing on the homepage on mobile.
     Pin it to the very top of the hero, fade the top of the trees
     into the dark-blue header background, and tuck the badge BELOW
     the photo so the image leads the page. The truck + Jackson sit
     left-of-center in the source photo, so anchor the focal point
     there and zoom in so they fill the frame instead of the parking
     lot and sandwich board on the right. */
  .hero-bg {
    top: 0 !important;
    height: 280px !important;
    background-size: 200% auto !important;
    background-position: 30% 35% !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.55) 6%, #000 22%, #000 78%, transparent 100%) !important;
            mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.55) 6%, #000 22%, #000 78%, transparent 100%) !important;
  }
  /* Pull the headline up so it sits right under the cropped photo
     instead of leaving a big gap below the badge. */
  .hero-content { margin-top: 250px !important; }
  /* Hide the video caption ribbon on phones — the bubble itself is plenty
     of context, and the caption crowds the play/mute controls. */
  .hero-video-caption { display: none !important; }
  /* Badge moves below the photo (photo is first thing visible). */
  .hero-badge {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 3 !important;
    margin: 0 auto 12px !important;
    font-size: 0.7rem !important;
    padding: 6px 14px !important;
    letter-spacing: 0.9px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, rgba(34,211,238,0.32), rgba(30,111,217,0.45)) !important;
    border: 1.5px solid rgba(34,211,238,0.85) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(34,211,238,0.4), 0 0 0 2px rgba(255,255,255,0.08) inset !important;
    text-shadow: 0 1px 6px rgba(9,31,61,0.6) !important;
    line-height: 1.2 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    max-width: calc(100% - 24px) !important;
  }
  .hero h1 {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
    margin-top: 4px !important;
    margin-bottom: 10px !important;
    line-height: 1.1 !important;
  }
  .hero-sub { display: none !important; }
  .hero-trust { display: none !important; }
  .hero-ctas {
    margin-bottom: 4px !important;
    gap: 10px !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-ctas .btn,
  .hero-ctas a.btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 11px 14px !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.4px !important;
    line-height: 1.2 !important;
    justify-content: center !important;
    text-align: center !important;
  }
  /* Hide the oversized decorative mascot so the hero breathes */
  .brand-mascot-decor { display: none !important; }
  /* Slightly smaller welcome video bubble on phones — the bubble is
     the visual hook on mobile, so it stays prominent but doesn't
     push the CTAs below the fold. */
  .hero-video-bubble {
    max-width: 188px !important;
    box-shadow:
      0 18px 40px -10px rgba(0,0,0,0.5),
      0 0 0 4px rgba(255,255,255,0.08),
      0 0 0 10px rgba(30,111,217,0.18),
      inset 0 0 0 2px rgba(255,255,255,0.4) !important;
  }

  /* Strip the testimonial highlight ribbon for a cleaner stack (homepage only) */
  .page-home .highlight-strip { display: none !important; }

  /* Tighten section titles; drop subtitle paragraphs on the homepage only */
  .section-title { margin-bottom: 18px !important; }
  .section-title h2 { margin-bottom: 6px !important; }
  .page-home .section-title p { display: none !important; }
  .section { padding: 32px 0 !important; }
  .section-sm { padding: 24px 0 !important; }

  /* ── INNER PAGE BLUE HERO ───────────────────────────────
     Service / about / contact / location / blog / project / gallery /
     reviews pages all start with a `<section style="background:linear-
     gradient(135deg,#091f3d 0%,#1250a0 100%);padding:80px 0 60px;">`.
     On phones this banner used to eat ~70% of the viewport. Compress it
     so the content underneath is visible without scrolling. */
  section[style*="091f3d 0%,#1250a0"],
  section[style*="091f3d 0%, #1250a0"] {
    padding: 26px 0 22px !important;
  }
  section[style*="091f3d 0%,#1250a0"] .container > div,
  section[style*="091f3d 0%, #1250a0"] .container > div {
    max-width: 100% !important;
  }
  section[style*="091f3d 0%,#1250a0"] h1,
  section[style*="091f3d 0%, #1250a0"] h1 {
    font-size: clamp(1.55rem, 7vw, 2.1rem) !important;
    line-height: 1.12 !important;
    margin-bottom: 8px !important;
  }
  section[style*="091f3d 0%,#1250a0"] p,
  section[style*="091f3d 0%, #1250a0"] p {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    max-width: 100% !important;
  }
  /* Eyebrow stays small, banner CTAs full-width style */
  section[style*="091f3d 0%,#1250a0"] .section-eyebrow,
  section[style*="091f3d 0%, #1250a0"] .section-eyebrow {
    font-size: 0.65rem !important;
    letter-spacing: 1.4px !important;
  }
  section[style*="091f3d 0%,#1250a0"] .btn-lg,
  section[style*="091f3d 0%, #1250a0"] .btn-lg {
    padding: 12px 18px !important;
    font-size: 0.92rem !important;
  }
  /* Decorative circle behind the inner hero is way too big at full
     size — pull it in so it doesn't bleed under the headline. */
  section[style*="091f3d 0%,#1250a0"] > div[style*="border-radius:50%"],
  section[style*="091f3d 0%, #1250a0"] > div[style*="border-radius:50%"] {
    width: 220px !important;
    height: 220px !important;
    right: -90px !important;
    top: -90px !important;
  }

  /* Two-up service cards and reviews on mobile */
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .grid-2 { gap: 18px !important; }

  /* Inline two-column grids set via inline styles on inner pages —
     stack on mobile so paragraphs and lists don't get squeezed. */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  [style*="gap:60px"],
  [style*="gap: 60px"] { gap: 24px !important; }
  [style*="gap:40px"],
  [style*="gap: 40px"] { gap: 20px !important; }

  /* Compact service card styling */
  .service-card {
    padding: 14px 12px !important;
    border-radius: 16px !important;
  }
  .service-card h3 {
    font-size: 0.92rem !important;
    margin-bottom: 4px !important;
    line-height: 1.15 !important;
  }
  .service-card p {
    font-size: 0.74rem !important;
    line-height: 1.4 !important;
  }
  .service-card .learn-more {
    font-size: 0.68rem !important;
    margin-top: 6px !important;
  }
  .service-icon {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
  }
  .service-icon svg { width: 16px !important; height: 16px !important; }

  /* Compact review card styling */
  .review-card {
    padding: 16px 12px 14px !important;
    border-radius: 16px !important;
  }
  .review-card::before {
    font-size: 2.4rem !important;
    top: 4px !important;
    left: 10px !important;
  }
  .review-stars {
    font-size: 0.8rem !important;
    margin-bottom: 6px !important;
    letter-spacing: 1.4px !important;
  }
  .review-text {
    font-size: 0.76rem !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
  }
  .review-author { gap: 8px !important; }
  .review-avatar {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.8rem !important;
  }
  .review-name { font-size: 0.74rem !important; }
  .review-source { font-size: 0.64rem !important; }

  .reviews-cta { margin-top: 18px !important; }
  .reviews-cta .btn { display: block; width: 100%; margin: 6px auto; max-width: 320px; }

  /* Trust bar: keep it compact instead of one giant column */
  .trust-bar { padding: 10px 0 !important; }
  .trust-bar-inner {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
  }
  .trust-stat {
    width: 50% !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: 8px 6px !important;
    justify-content: center !important;
  }
  .trust-stat:nth-child(2n) { border-right: none !important; }
  .trust-stat .num { font-size: 1.15rem !important; }
  .trust-stat .label { font-size: 0.62rem !important; letter-spacing: 0.4px !important; }

  /* Imagery feature treatment — let big content photos breathe and
     anchor each section on mobile. The selector skips icons, mascots,
     avatars, and logos so we only style real content images. */
  section img:not(.brand-mascot):not(.brand-mascot-decor):not(.hero-video):not([class*="logo"]):not([class*="icon"]):not([class*="avatar"]),
  .ba-panel img,
  .review-card + img {
    border-radius: 18px;
  }

  /* "After" hero photo on service pages: tighten the giant rounded
     frame around the image so the photo itself is the centerpiece. */
  div[style*="border-radius:80px"] {
    border-radius: 22px !important;
    border-width: 4px !important;
    box-shadow: 0 14px 36px rgba(9,31,61,0.22) !important;
  }

  /* Tighten generous inline padding on cards/panels so the layout
     reads as a polished mobile card stack rather than a desktop layout
     squeezed onto a phone. */
  [style*="padding:32px"],
  [style*="padding: 32px"] {
    padding: 18px !important;
  }
}

/* Extra-small phones: keep two-up but allow cards to breathe */
@media (max-width: 380px) {
  .grid-3,
  .grid-4 {
    gap: 8px !important;
  }
  .service-card { padding: 12px 10px !important; }
  .review-card { padding: 14px 10px 12px !important; }
  .nav-menu a { font-size: 0.72rem !important; padding: 5px 6px !important; }
  .brand-header .brand-wordmark { font-size: 1.05rem !important; }
  .brand-header img.brand-mascot { height: 40px !important; }
}

/* =========================================================
   601–720px: tablets in portrait + large phones in landscape.
   Inner pages historically rendered a much larger brand header
   at this breakpoint than the homepage did. Override so every
   page uses the same compact layout.
   ========================================================= */
@media (min-width: 601px) and (max-width: 720px) {
  .brand-header {
    gap: 12px !important;
    padding: 8px 16px 6px !important;
  }
  .brand-header img.brand-mascot {
    height: clamp(48px, 9vw, 64px) !important;
  }
  .brand-header .brand-wordmark {
    font-size: clamp(1.3rem, 4vw, 1.8rem) !important;
    letter-spacing: 0.6px !important;
  }
  .nav-inner {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .nav-menu a {
    font-size: 0.85rem !important;
    padding: 6px 10px !important;
  }
  .nav-cta .btn,
  .nav-cta a.btn {
    font-size: 0.85rem !important;
    padding: 7px 13px !important;
  }
  /* Inner page blue hero on tablets — slimmer too */
  section[style*="091f3d 0%,#1250a0"],
  section[style*="091f3d 0%, #1250a0"] {
    padding: 36px 0 28px !important;
  }
  section[style*="091f3d 0%,#1250a0"] h1,
  section[style*="091f3d 0%, #1250a0"] h1 {
    font-size: clamp(1.9rem, 5.4vw, 2.4rem) !important;
  }
}

/* =========================================================
   Part 2: INNER PAGES on mobile — image-led layout, lighter
   text load. Homepage (body.page-home) is intentionally
   excluded so its bespoke hero/sections keep their styling.
   Goals: make photos the visual anchor, hide redundant prose,
   tighten section rhythm so each section reads in a single
   viewport instead of three.
   ========================================================= */
@media (max-width: 600px) {
  /* The dark-blue inner banner's body paragraph is mostly marketing
     prose. Keep H1 + CTAs and tuck the prose away on phones so the
     banner is short and scannable. */
  body:not(.page-home) section[style*="091f3d 0%,#1250a0"] p:not(.section-eyebrow),
  body:not(.page-home) section[style*="091f3d 0%, #1250a0"] p:not(.section-eyebrow) {
    display: none !important;
  }

  /* Tighten generic section spacing on inner pages so images and
     headlines lead instead of long copy walls. */
  body:not(.page-home) .section { padding: 24px 0 !important; }
  body:not(.page-home) .section-sm { padding: 18px 0 !important; }
  body:not(.page-home) .section-title { margin-bottom: 14px !important; }

  /* Body paragraphs read smaller and closer together on inner pages
     so a section fits in one viewport instead of three. */
  body:not(.page-home) section p {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
  }
  body:not(.page-home) section p:first-of-type {
    font-size: 0.92rem !important;
  }

  /* Soften 3rd+ paragraph in dense story stacks so images dominate. */
  body:not(.page-home) section > .container > div > p:nth-of-type(n+3),
  body:not(.page-home) section > .container > p:nth-of-type(n+3) {
    font-size: 0.78rem !important;
    color: rgba(9,31,61,0.7) !important;
    margin-bottom: 8px !important;
  }

  /* Trust bars and brand strips are homepage furniture; hide on inner
     pages so the page gets to the point. */
  body:not(.page-home) .trust-bar,
  body:not(.page-home) .brand-strip,
  body:not(.page-home) .highlight-strip {
    display: none !important;
  }

  /* IMAGES become the visual anchor on inner pages: fuller bleed,
     deeper shadow, thicker rounded frame so they read as the
     centerpiece rather than an inline decoration. */
  body:not(.page-home) section img:not(.brand-mascot):not(.brand-mascot-decor):not(.hero-video):not([class*="logo"]):not([class*="icon"]):not([class*="avatar"]):not(.review-avatar) {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 38px rgba(9,31,61,0.28) !important;
    margin: 6px 0 18px !important;
    display: block !important;
  }

  /* "After" hero photo wrappers on service pages and project before/
     after frames: pull padding in and thicken the rounded frame so
     the photo fills the screen. */
  body:not(.page-home) div[style*="border-radius:80px"],
  body:not(.page-home) div[style*="border-radius: 80px"] {
    border-radius: 24px !important;
    border-width: 5px !important;
    box-shadow: 0 22px 44px rgba(9,31,61,0.3) !important;
  }
  body:not(.page-home) section[style*="background:#f5f9ff"] > .container,
  body:not(.page-home) section[style*="background: #f5f9ff"] > .container {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Project before/after panels: bigger photos, less chrome */
  body:not(.page-home) .ba-panel { padding: 6px !important; border-radius: 18px !important; }
  body:not(.page-home) .ba-panel img {
    border-radius: 14px !important;
    box-shadow: 0 14px 30px rgba(9,31,61,0.28) !important;
  }

  /* Blog cards: clamp excerpts so images and titles lead. */
  body:not(.page-home) .blog-card p,
  body:not(.page-home) .blog-excerpt {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 0.8rem !important;
  }
  body:not(.page-home) .blog-meta,
  body:not(.page-home) .blog-meta-item {
    font-size: 0.7rem !important;
  }

  /* Article body paragraphs: slightly tighter so a post scrolls
     quicker on a phone, but still readable for long-form. */
  body:not(.page-home) article p,
  body:not(.page-home) .blog-body p {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin-bottom: 12px !important;
  }

  /* Location pages: collapse the long "About this town" prose so the
     service grid and CTA are the priority on mobile. */
  body:not(.page-home) .location-intro p:nth-of-type(n+2),
  body:not(.page-home) .area-overview p:nth-of-type(n+2) {
    display: none !important;
  }

  /* Final CTA block: tighter padding on phones */
  body:not(.page-home) .final-cta { padding: 32px 0 !important; }
  body:not(.page-home) .final-cta p { font-size: 0.85rem !important; }
}

/* =========================================================
   Homepage mobile header: solid white sticky bar with logo
   on the left and a hamburger menu on the right. Desktop
   header is untouched.
   ========================================================= */
.nav-toggle { display: none; }
.mobile-menu { display: none; }

@media (max-width: 767.98px) {
  .nav {
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(9,31,61,0.10) !important;
    border-bottom: 1px solid var(--gray-200, #edf0f5) !important;
    padding: 4px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    z-index: 1000 !important;
    min-height: 52px !important;
  }
  .nav.is-scrolled { opacity: 0.55 !important; }
  .nav.is-scrolled:hover,
  .nav.is-scrolled:focus-within { opacity: 1 !important; }
  body.nav-open .nav,
  body.nav-open .nav.is-scrolled { opacity: 1 !important; }

  /* Brand stays compact on the left */
  .brand-header,
  .nav-logo {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    justify-content: flex-start !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    gap: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    color: var(--blue-dark, #091f3d) !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.2px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }
  .brand-header::before,
  .brand-header::after { display: none !important; }
  .brand-header img.brand-mascot,
  .nav-logo img.nav-logo-mascot,
  .nav-logo img {
    height: 32px !important;
    width: auto !important;
    transform: none !important;
    filter: drop-shadow(0 2px 5px rgba(9,31,61,0.18)) !important;
    margin: 0 6px 0 0 !important;
  }
  .brand-header .brand-wordmark,
  .nav-logo span {
    font-size: 0.95rem !important;
    letter-spacing: 0.2px !important;
    -webkit-text-stroke-width: 0 !important;
    text-shadow: none !important;
    transform: none !important;
    white-space: nowrap !important;
    color: var(--blue-dark, #091f3d) !important;
  }
  .nav-logo span { color: var(--blue-bright, #1a6ed8) !important; margin-left: 4px !important; }

  /* Hide the full desktop navigation + nav CTAs on mobile */
  .nav-inner { display: none !important; }
  .nav .nav-menu { display: none !important; }
  .nav .nav-cta { display: none !important; }
  .topbar { display: none !important; }

  /* Show the hamburger toggle on the right */
  .nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1.5px solid #000;
    border-radius: 9px;
    cursor: pointer;
    color: #000;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle:focus-visible {
    outline: 2px solid var(--blue-bright, #1a6ed8);
    outline-offset: 2px;
  }
  .nav-toggle-bars {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 13px;
  }
  .nav-toggle-bars span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2.5px;
    background: #000;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
  }
  .nav-toggle-bars span:nth-child(1) { top: 0; }
  .nav-toggle-bars span:nth-child(2) { top: 5.5px; }
  .nav-toggle-bars span:nth-child(3) { top: 11px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 5.5px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { top: 5.5px; transform: rotate(-45deg); }

  /* Mobile menu drawer — anchored to the bottom of the sticky nav so the
     menu reads as an extension of the header, not a floating overlay.
     Uses position: fixed so the drawer always opens from the viewport
     header regardless of how far the user has scrolled. */
  .mobile-menu {
    display: block !important;
    position: fixed !important;
    top: 52px !important;
    left: 0 !important;
    right: 0 !important;
    max-height: calc(100vh - 52px - 76px);
    overflow-y: auto;
    background: #fff;
    border-top: 1px solid var(--gray-200, #edf0f5);
    box-shadow: 0 14px 28px rgba(9,31,61,0.18);
    z-index: 999;
    padding: 6px 16px 14px;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-menu[hidden] { display: none !important; }
  .mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .mobile-menu-list > li {
    border-bottom: 1px solid var(--gray-200, #edf0f5);
  }
  .mobile-menu-list > li:last-child { border-bottom: none; }
  .mobile-menu-list a,
  .mobile-menu-list .m-sub-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--blue-dark, #091f3d);
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
  }
  .mobile-menu-list a:hover,
  .mobile-menu-list .m-sub-toggle:hover { color: var(--blue-bright, #1a6ed8); text-decoration: none; }
  .m-chev {
    display: inline-block;
    transition: transform 0.2s ease;
    color: var(--gray-600, #52607a);
    font-size: 0.9rem;
  }
  .m-sub-toggle[aria-expanded="true"] .m-chev { transform: rotate(180deg); color: var(--blue-bright, #1a6ed8); }
  .m-sub {
    list-style: none;
    margin: 0 0 8px;
    padding: 0 0 6px 12px;
    display: none;
    border-left: 2px solid var(--blue-light, #e4effe);
  }
  .m-sub-toggle[aria-expanded="true"] + .m-sub { display: block; }
  .m-sub a {
    padding: 10px 4px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    color: var(--gray-800, #283040) !important;
    text-transform: none !important;
  }

  /* Don't lock body scroll when the menu is open — `overflow: hidden` on
     body breaks `position: sticky` on `.nav` (the nav loses its scroll
     context and snaps back to its natural document position, so it
     visually disappears when the menu is opened mid-page). The menu
     itself is `position: fixed; top: 52px`, so it stays anchored to the
     bottom of the sticky header regardless of scroll position, letting
     the user open and close it from anywhere on the page. */
  body.nav-open { overscroll-behavior: contain; }
  .mobile-menu { overscroll-behavior: contain; }

  /* Hero clearance — make sure the headline / image isn't tucked
     under the sticky header on first paint. */
  body.page-home .hero { scroll-margin-top: 64px; }

  /* Bottom sticky CTA: cleaner solid bar, single instance */
  body.page-home .mobile-cta {
    background: #fff !important;
    border-top: 1px solid var(--gray-200, #edf0f5) !important;
    box-shadow: 0 -8px 24px rgba(9,31,61,0.16), 0 -2px 6px rgba(9,31,61,0.06) !important;
    padding: 7px 12px !important;
    backdrop-filter: none !important;
    gap: 8px !important;
  }
  body.page-home .mobile-cta .btn {
    border-radius: 50px !important;
    font-size: 0.9rem !important;
    padding: 10px 14px !important;
    letter-spacing: 0.4px !important;
    line-height: 1.2 !important;
  }
  body.page-home .mobile-cta .btn-secondary {
    background: var(--blue-dark, #091f3d) !important;
    color: #fff !important;
    border: 1px solid var(--blue-dark, #091f3d) !important;
  }
  body.page-home .mobile-cta .btn-accent {
    background: linear-gradient(135deg, var(--blue-bright, #1a6ed8) 0%, var(--blue-mid, #1250a0) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(26,110,216,0.32) !important;
  }
  body.page-home { padding-bottom: 64px !important; }
}

/* Hero video controls: keep buttons visible at corners on phones,
   with stronger contrast so they read against the video. */
@media (max-width: 720px) {
  .hero-video-pause,
  .hero-video-mute {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: rgba(9,31,61,0.92) !important;
    border: 2px solid #fff !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.55), 0 0 0 2px rgba(0,0,0,0.2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 6 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: rgba(255,255,255,0.25);
    touch-action: manipulation;
  }
  .hero-video-pause {
    bottom: 12px !important;
    left: 12px !important;
    right: auto !important;
    top: auto !important;
  }
  .hero-video-mute {
    bottom: 12px !important;
    right: 12px !important;
    left: auto !important;
    top: auto !important;
  }
  .hero-video-pause-icon,
  .hero-video-mute-icon {
    width: 22px !important;
    height: 22px !important;
    color: #fff !important;
    fill: #fff !important;
    pointer-events: none !important;
  }
  .hero-video-pause *,
  .hero-video-mute * {
    pointer-events: none !important;
  }
  .hero-video-caption {
    display: none !important;
  }
  /* Let the video itself receive taps so it can act as a play/pause toggle. */
  .hero-video {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}

/* =========================================================
   Homepage "Why Choose Us" trim — the section was a full
   photo + intro paragraph + four bullet items each with a
   sub-paragraph. On phones that's a long wall of text. On
   mobile we keep the heading and the four bullet titles as
   scannable selling points, and drop the supporting prose
   plus the standalone photo block (which on mobile sits
   above the text and adds another full screen of scroll).
   Desktop is untouched.
   ========================================================= */
@media (max-width: 600px) {
  body.page-home .why-section { padding: 28px 0 !important; }
  body.page-home .why-section .why-grid { gap: 0 !important; }
  body.page-home .why-section .why-image-block { display: none !important; }
  body.page-home .why-section .why-content > p:not(.section-eyebrow) { display: none !important; }
  body.page-home .why-section .why-list { margin-top: 14px !important; }
  body.page-home .why-section .why-list li {
    padding: 10px 0 !important;
    gap: 12px !important;
  }
  body.page-home .why-section .why-list-text h4 {
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
  }
  body.page-home .why-section .why-list-text p { display: none !important; }
  body.page-home .why-section .why-list-icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
  }
  body.page-home .why-section .why-list-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Trim a few other home sections that are still text-heavy on phones
     so the page reads quicker between hero and the quote form. */
  body.page-home .area-section .town-grid { gap: 8px !important; }
  body.page-home .area-section .town-pill {
    padding: 8px 10px !important;
    font-size: 0.8rem !important;
  }
  /* Show only the first 3 FAQ items on mobile; rest reachable via the
     "More FAQs" link at the bottom of the section. */
  body.page-home .faq-section .faq-item:nth-of-type(n+4) { display: none !important; }
  /* Show only the first 2 reviews on mobile; rest reachable via the
     reviews CTA below the grid. */
  body.page-home .reviews-section .grid-3 .review-card:nth-of-type(n+3) { display: none !important; }

  /* Tighten home gallery preview captions — image is the hero, the
     short caption underneath is enough. */
  body.page-home .gallery-section .ba-card-caption { padding: 10px 12px !important; }
  body.page-home .gallery-section .ba-card-caption p { display: none !important; }
  body.page-home .gallery-section .ba-card-caption h4 {
    font-size: 0.92rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
}

/* =========================================================
   Gallery page — phones got a 2-column grid with thumbnails
   too small to see the before/after detail, plus a caption
   below each card that pushed the next photo off-screen.
   On mobile: single column so each comparison fills the
   width, drop the per-card caption text, hide the drag hint
   ribbon (the slider handle is self-explanatory), and use
   a 4:3 aspect so each photo is taller and more readable.
   Desktop layout is untouched.
   ========================================================= */
@media (max-width: 600px) {
  #gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  #gallery-grid .ba-card { border-radius: 16px !important; }
  #gallery-grid .ba-card .ba-slider {
    aspect-ratio: 4 / 3 !important;
    border-radius: 14px !important;
  }
  #gallery-grid .ba-card-caption { display: none !important; }
  #gallery-grid .ba-drag-hint { display: none !important; }
}