/* ════════════════════════════════════════
   DWELLTRY — Mobile overrides (all pages)
   Loaded LAST so its rules win.
   Breakpoints used:
     - 760px (handheld) — primary mobile fixes
     - 480px (small phones) — last-mile tightening
   No design changes above 761px.
═══════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════
   GLOBAL — fluid type guard rails, no horizontal scroll, smaller
   buttons centered everywhere on mobile.
══════════════════════════════════════ */
@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  /* SITEWIDE BUTTON RULE — every ghost / solid / inline CTA on mobile
     is centered horizontally and uses tighter padding + smaller font.
     The `display: flex` on the parent block centers a single button;
     `align-self: center` handles flex children. */
  .btn-ghost,
  .btn-solid,
  .muni-hero-scroll-cue,
  .nav-bar-cta,
  .projx-cta-btn,
  .svc-cta-btn,
  .guide-cta-btn,
  .feas-cta-btn,
  .proc-cta-btn,
  .about-cta-btn,
  .lend-cta-btn,
  .contact-direct-btn,
  .muni-cta-btn,
  .svc-process-btn,
  .discovery-cta,
  .projsub-cta-btn,
  .nav-panel-cta {
    padding: 0.65rem 1.15rem !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.18em !important;
    gap: 0.5rem !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: max-content !important;
    max-width: 92% !important;
    box-sizing: border-box !important;
  }
  .btn-ghost .arrow,
  .btn-solid .arrow,
  .nav-bar-cta .arrow,
  .nav-panel-cta .arrow { font-size: 0.85rem !important; }
  /* The block that contains the button needs to center its child if it's
     a flex container — covers most of the CTA wrappers used on the site. */
  .projx-cta-actions,
  .svc-cta-actions,
  .guide-cta-actions,
  .feas-cta-actions,
  .proc-cta-actions,
  .about-cta-actions,
  .projsub-cta-actions,
  .lend-cta-actions,
  .contact-direct-actions,
  .muni-cta-actions,
  .svc-process-cta,
  .discovery-actions,
  .adu-guide-bullets-cta,
  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.9rem !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* The right-side dot rail is desktop-only; reclaim the space. */
  .hero-rail, .rail-backdrop { display: none !important; }

  /* Cursor follow elements are touch-irrelevant. */
  .cursor-dot, .cursor-ring { display: none !important; }

  /* Splash logo a touch smaller. */
  .splash-logo { width: 110px !important; }
  .splash-slogan { font-size: 1.15rem !important; }

  /* Inner snap padding more generous so headlines don't kiss the edge.
     Some pages use .muni-hero-panel-inner or .muni-snap-panel directly
     instead of .muni-snap-inner — apply the same padding to all. */
  .muni-snap-inner,
  .muni-hero-panel-inner,
  .muni-snap-panel > .muni-hero-panel-inner {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .muni-snap-panel {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Text-alignment guard: page headlines, leads, and breadcrumbs need
     air on both sides — centering them reads more deliberate than a
     left-edge crash. */
  .muni-page-headline,
  .muni-page-subhead,
  .muni-breadcrumb {
    text-align: left !important;
    max-width: 100% !important;
  }
}

/* ════════════════════════════════════════
   HEADER BAR — centered logo + MENU label, taller bar with the
   logo/label vertically centered.
══════════════════════════════════════ */
@media (max-width: 760px) {
  :root { --nav-h: 90px; }

  .nav-bar {
    padding: 0 0.85rem !important;
    height: var(--nav-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Logo + MENU label centered. Tapping the logo opens the menu. */
  .nav-bar-trigger {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    gap: 0.35rem !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .nav-bar-trigger:hover {
    transform: translate(-50%, -50%) !important;
  }
  .nav-bar-mark { height: 38px !important; display: block !important; }
  .nav-bar-label {
    display: block !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.32em !important;
    opacity: 0.85 !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* CTA-in-bar stays hidden on mobile — the menu has its own CTA. */
  .btn-ghost.nav-bar-cta,
  body.nav-open .btn-ghost.nav-bar-cta { display: none !important; }

  /* Hamburger pseudo-element removed per design feedback. */
  .nav-bar::after { display: none !important; }

  /* When the menu is open, fade the logo so the X reads clearly. */
  body.nav-open .nav-bar-mark { opacity: 0.25 !important; }
  body.nav-open .nav-bar-label { opacity: 0 !important; }
}

/* ════════════════════════════════════════
   NAV PANEL (dropdown menu) — full screen, single column
══════════════════════════════════════ */
@media (max-width: 760px) {
  .nav-panel {
    /* Use the full screen below the bar so everything has room. */
    max-height: calc(100dvh - var(--nav-h)) !important;
    height: calc(100dvh - var(--nav-h)) !important;
    width: 100vw !important;
  }
  .nav-panel-inner {
    padding: 1.6rem 1.5rem 2.5rem !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.4rem !important;
  }

  /* HERO area — logo small, just an inline brand strip.
     Reset the desktop translateY offset that pushes the stack up. */
  .nav-panel-hero {
    padding: 0.6rem 0 0.6rem !important;
    min-height: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.85rem !important;
  }
  .nav-panel-hero-stack {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 0.85rem !important;
    transform: none !important;
    width: 100% !important;
  }
  .nav-panel.open .nav-panel-hero-stack { transform: none !important; }
  .nav-panel-hero-frame { padding: 0 !important; flex: 0 0 auto !important; }
  .nav-panel-hero-logo {
    width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    /* Skip the slide-in transform on mobile. */
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .nav-panel.open .nav-panel-hero-logo,
  .nav-panel.closing .nav-panel-hero-logo {
    transform: none !important;
    opacity: 1 !important;
  }
  .nav-panel-hero-foot {
    font-size: 0.66rem !important;
    letter-spacing: 0.22em !important;
    opacity: 1 !important;
    color: rgba(255,255,255,0.55) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    transform: none !important;
    transition: none !important;
    flex: 1 1 auto !important;
  }
  .nav-panel.open .nav-panel-hero-foot,
  .nav-panel.closing .nav-panel-hero-foot {
    opacity: 0.65 !important;
    transform: none !important;
  }

  /* COLUMNS — stack to one column, scroll inside the panel. */
  .nav-panel-cols {
    grid-template-columns: 1fr !important;
    gap: 1.4rem !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding-bottom: 1rem !important;
  }
  .nav-panel-col {
    padding: 0 !important;
    border-right: 0 !important;
  }
  .nav-panel-heading {
    font-size: 0.72rem !important;
    letter-spacing: 0.32em !important;
    margin-bottom: 0.5rem !important;
  }

  /* Nav links — one column with bigger tap target. */
  .nav-panel-nav-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-flow: row !important;
    gap: 0.5rem !important;
  }
  .nav-panel-col li {
    font-size: 1.45rem !important;
    line-height: 1.3 !important;
    padding: 0.35rem 0 !important;
    /* Disable the staggered translate-in animation — on mobile it just
       feels like content is lagging when you tap. Items appear with the
       panel. */
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .nav-panel-info li { font-size: 0.95rem !important; line-height: 1.55 !important; }
  .np-mute { font-size: 0.66rem !important; }

  /* Disable hover-translate so taps don't feel sticky on touch. */
  .nav-panel-col a:hover {
    transform: none !important;
  }

  /* Heading underline shouldn't animate on mobile either. */
  .nav-panel-heading::after,
  .nav-panel.open .nav-panel-heading::after { width: 60% !important; }

  /* Schedule a Call CTA — gold pill that lives at the bottom of the
     Navigation list so users can book without leaving the menu. */
  .nav-panel-cta-li {
    margin-top: 0.85rem !important;
    list-style: none !important;
  }
  .nav-panel-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    background: var(--gold) !important;
    color: #000 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 0.85rem 1.3rem !important;
    border-radius: 2px !important;
    transition: background 0.25s ease !important;
  }
  .nav-panel-cta:hover { background: #F9C215 !important; }
  .nav-panel-cta .arrow { font-size: 1rem !important; opacity: 0.9 !important; }
}

/* Desktop: keep the CTA-in-menu hidden so we don't duplicate the
   nav-bar-cta that already shows when the menu opens. */
@media (min-width: 761px) {
  .nav-panel-cta-li { display: none !important; }
}

@media (max-width: 480px) {
  :root { --nav-h: 82px; }
  .nav-bar-mark { height: 34px !important; }
  .nav-panel-col li { font-size: 1.3rem !important; }
}

/* ════════════════════════════════════════
   FOOTER — single column, centered
══════════════════════════════════════ */
@media (max-width: 760px) {
  .footer-v2 {
    padding: 2.5rem 1.25rem 1.4rem !important;
  }
  .footer-v2-main {
    grid-template-columns: 1fr !important;
    gap: 1.6rem !important;
    text-align: center !important;
  }
  .footer-v2-brand,
  .footer-v2-links,
  .footer-v2-contact,
  .footer-v2-social {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .footer-v2-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  .footer-v2-mark { width: 100px !important; height: auto !important; }
  .footer-v2-brand-text { align-items: center !important; }
  .footer-v2-logo { font-size: 1.45rem !important; }
  .footer-v2-tag  { font-size: 0.62rem !important; letter-spacing: 0.22em !important; }
  .footer-v2-links {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem 1.4rem !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }
  .footer-v2-links a { font-size: 0.78rem !important; }
  .footer-v2-contact {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
  }
  .footer-v2-contact a,
  .footer-v2-contact span { font-size: 0.86rem !important; }
  .footer-v2-heading { font-size: 0.66rem !important; letter-spacing: 0.28em !important; }
  .footer-v2-social {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.65rem !important;
    justify-content: center !important;
  }
  .footer-v2-social a { width: 32px !important; height: 32px !important; }
  .footer-v2-bottom {
    flex-direction: column !important;
    gap: 0.55rem !important;
    text-align: center !important;
    font-size: 0.66rem !important;
  }
}

/* ════════════════════════════════════════
   HIDE MAPS — homepage + municipalities page
   On mobile the Leaflet maps are heavy and hard to read; replace
   with the existing list of cities or a simple CTA.
══════════════════════════════════════ */
@media (max-width: 760px) {
  /* Homepage munis section: hide map column, keep city list. */
  .munis-split { grid-template-columns: 1fr !important; }
  .munis-map { display: none !important; }
  .munis-content { padding: 1.25rem !important; }
  .munis-section { padding: calc(var(--nav-h) + 1.2rem) 0 1.5rem !important; }

  /* Municipalities page: hide the leaflet container + zoom controls. */
  #muniMap,
  #munisMap,
  .leaflet-container { display: none !important; }
  .muni-map-stage,
  .muni-zoom-controls { display: none !important; }

  /* The "hold Ctrl + scroll to zoom" hint is desktop-only. */
  .muni-scroll-hint { display: none !important; }
}

/* ════════════════════════════════════════
   HOMEPAGE — disable horizontal pin sections, stack ADU panels
══════════════════════════════════════ */
@media (max-width: 760px) {
  /* ABOUT — redesigned for mobile, EVERYTHING center-aligned.
     Order: badge (small, centered) → eyebrow → headline → body →
     button → facts. */
  .about-pin-wrap { height: auto !important; }
  .about-pin {
    position: static !important;
    height: auto !important;
    padding: calc(var(--nav-h) + 1.5rem) 1.25rem 1.5rem !important;
    overflow: visible !important;
    text-align: center !important;
    display: block !important;
    align-items: stretch !important;
  }
  /* Kill the desktop `padding-right: 4.5rem` that was pushing every
     column ~72px to the left on narrow screens. */
  .about-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    text-align: center !important;
    justify-items: center !important;
    align-items: center !important;
    width: 100% !important;
  }
  .about-stage-inner,
  .about-stage {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    justify-items: center !important;
    align-items: center !important;
    margin: 0 auto !important;
  }
  .about-stage { opacity: 1 !important; transform: none !important; }
  .about-col-text,
  .about-col-stats,
  .about-col-label,
  .about-col-logo {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  /* The "Our Story" button on the homepage About has inline-style
     margin-top — make sure margin-left/right auto centers it. */
  .about-col-text .btn-ghost[style] {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .about-col-logo {
    order: -1 !important;
    display: flex !important;
    margin: 0 auto !important;
  }
  .about-badge {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    margin: 0 auto !important;
  }
  .about-badge-logo { width: 86px !important; max-width: 86px !important; height: auto !important; margin: 0 auto !important; }
  .about-badge-line { width: 36px !important; margin: 0 auto !important; }
  .about-badge-caption { font-size: 0.62rem !important; letter-spacing: 0.28em !important; text-align: center !important; }

  .about-col-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  .about-lead {
    font-size: clamp(1.7rem, 6.5vw, 2.3rem) !important;
    line-height: 1.18 !important;
    margin: 0 auto !important;
    max-width: 22ch !important;
    text-align: center !important;
  }
  .about-lead em { font-style: italic; color: var(--gold); }
  .about-body {
    font-size: 0.96rem !important;
    line-height: 1.65 !important;
    margin: 0.5rem auto 0 !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  .about-col-text .btn-ghost { margin: 1.1rem auto 0 !important; }

  .about-col-stats { order: 4 !important; }
  .about-facts {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.55rem !important;
    margin: 1.2rem auto 0 !important;
    width: 100% !important;
    max-width: 320px !important;
    border-top: 0 !important;
  }
  .afact {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    padding: 0.75rem 0.7rem !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    background: rgba(255,255,255,0.5) !important;
    text-align: center !important;
  }
  .afact-text { align-items: center !important; }
  .afact-num { font-size: 1.7rem !important; line-height: 1 !important; min-width: 0 !important; }
  .afact-label { font-size: 0.7rem !important; letter-spacing: 0.14em !important; text-align: center !important; }
  .afact-sub { font-size: 0.62rem !important; line-height: 1.4 !important; opacity: 0.7 !important; text-align: center !important; }
  .about-anim-label { display: none !important; }

  /* ADU TYPES — kill sticky pin, drop intro divider + ::before lines,
     stack each panel as a compact card. Eliminate the dark gap above
     the section so it flows straight out of About. */
  .about-pin-wrap + .adu-h-wrap,
  section + .adu-h-wrap { margin-top: 0 !important; }
  .adu-h-wrap {
    height: auto !important;
    margin-top: 0 !important;
    border-top: 0 !important;
  }
  .adu-h-pin {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    padding-top: 0 !important;
  }
  .adu-h-track {
    flex-direction: column !important;
    width: 100% !important;
    transform: none !important;
    height: auto !important;
  }
  .adu-h-head { display: none !important; }
  .adu-h-progress { display: none !important; }

  /* Hide every gold divider line on this section (intro SVG, per-panel
     ::before rule, and any pseudo-elements that draw a vertical line). */
  .adu-intro-divider,
  .adu-panel:not(.adu-panel--intro)::before,
  .adu-panel::after { display: none !important; }

  /* Each panel is a vertical column. NO min-height — black space gone.
     Padding is intentionally tight at the bottom so the seam between
     one panel's drawing and the next panel's text is small. */
  .adu-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    padding: 1rem 1.25rem 1.2rem !important;
  }
  .adu-panel:first-child {
    padding-top: 0.5rem !important;
    margin-top: 0 !important;
  }
  .adu-panel + .adu-panel { border-top: 1px solid rgba(255,255,255,0.06); }

  /* Intro panel — text OVERLAYS the video, vertically centered.
     Video takes the full panel height; dark overlay dims it so the
     text reads clearly on top. */
  .adu-panel--intro {
    position: relative !important;
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 60vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    isolation: isolate !important;
    overflow: hidden !important;
  }

  /* Video sits as a full-bleed background. */
  .adu-intro-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    clip-path: none !important;
    aspect-ratio: auto !important;
    z-index: 0 !important;
  }
  .adu-intro-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,0.55), rgba(0,0,0,0.78) 80%),
      linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.65) 100%);
    pointer-events: none;
    z-index: 1;
  }
  .adu-intro-media-overlay { display: none !important; }
  .adu-intro-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Text sits ABOVE the video in the vertical center of the panel. */
  .adu-intro-text {
    position: relative !important;
    z-index: 2 !important;
    opacity: 1 !important;
    transform: none !important;
    max-width: 92% !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 1.5rem !important;
    color: #FFF !important;
  }
  .adu-intro-text .section-label {
    color: var(--gold) !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .adu-intro-text h2 {
    font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
    line-height: 1.18 !important;
    margin: 0.5rem 0 0.7rem !important;
    color: #FFF !important;
  }
  .adu-intro-text h2 em { color: var(--gold) !important; }
  .adu-intro-text p {
    font-size: 0.96rem !important;
    line-height: 1.6 !important;
    max-width: 38ch !important;
    margin: 0 auto !important;
    color: rgba(255,255,255,0.92) !important;
  }
  .adu-intro-hint {
    display: inline-block !important;
    margin-top: 1rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.2em !important;
    color: var(--gold) !important;
    opacity: 0.9 !important;
  }

  /* For panels 1–4, info + design stack TIGHTLY (design just below info).
     Round4 added a giant padding-bottom on info — override it here. */
  .adu-panel-info,
  .adu-panel:not(.adu-panel--intro) .adu-panel-info {
    opacity: 1 !important;
    transform: none !important;
    max-width: 100% !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .adu-panel-info .adu-panel-num { font-size: 1.6rem !important; line-height: 1; opacity: 0.7; }
  .adu-panel-info h2 { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; line-height: 1.1 !important; margin: 0.2rem 0 0.5rem !important; }
  .adu-panel-info p { font-size: 0.96rem !important; line-height: 1.6 !important; margin-bottom: 0.6rem !important; }
  .adu-panel-info p + p { margin-bottom: 1rem !important; }
  /* Bigger drawing (+40%) — fills the panel width with a tall box so
     the isometric house reads clearly. Tight bottom spacing so the
     next panel's text sits close to the drawing. */
  .adu-panel-design {
    width: 100% !important;
    height: 475px !important;
    margin: 1rem auto 0.2rem !important;
    padding: 0.3rem 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
  }
  .adu-panel-design svg,
  .adu-panel-design .adu-iso {
    width: 130% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: 100% !important;
    display: block !important;
    transform: scale(1.15) translateY(0.5rem) !important;
    transform-origin: center center !important;
  }
  .adu-panel-design img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: 100% !important;
  }
  /* Gold-glow on the iso-ADU is driven by the .active class which the
     IntersectionObserver in home.js toggles per panel as it scrolls
     into view on mobile. */
  .adu-panel .adu-iso-adu { fill: var(--gold) !important; }

  /* Hero — keep but tighter. */
  .hero-headline { font-size: clamp(2.4rem, 10vw, 3.8rem) !important; }
  .hero-sub { font-size: 1rem !important; padding-left: 0 !important; max-width: 100% !important; }
  .hero { padding: calc(var(--nav-h) + 1rem) 1.25rem 2.5rem !important; }

  /* Services on home — stack each column, push the CTA button further
     below its text block so it doesn't crowd the bullet list. */
  .services-cols { grid-template-columns: 1fr !important; gap: 1rem !important; padding: 0 !important; min-height: 0 !important; }
  .service-col, .service-feature { padding: 1.5rem 1.25rem !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
  .service-col-cta {
    margin-top: 1.6rem !important;
    padding-top: 0.6rem !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Projects on home */
  .projects-section { padding: calc(var(--nav-h) + 1.5rem) 1.25rem 2.5rem !important; }
  .projects-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; min-height: 0 !important; }

  /* "Where do I even begin" — switch the whole section to block flow on
     mobile so the cards aren't trapped by the desktop flex/100vh sizing. */
  .begin-section {
    display: block !important;
    padding: calc(var(--nav-h) + 1.5rem) 1.25rem 2.5rem !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .begin-inner {
    display: block !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    height: auto !important;
  }
  .begin-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important;
    max-height: none !important;
    max-width: 100% !important;
    gap: 1rem !important;
    min-height: 0 !important;
    margin-top: 1.5rem !important;
  }
  .begin-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 1.4rem 1.3rem 1.4rem !important;
    overflow: visible !important;
  }
  .begin-card .btn-ghost { margin-top: 1rem !important; }
  .begin-bg, .begin-overlay { display: block !important; }

  /* Municipalities on home — show the headline + section label, NOT just
     the italic "dedication" word. The desktop layout clipped the heading
     because it was inside an overflow-hidden inner panel. */
  .munis-section {
    padding: calc(var(--nav-h) + 1.5rem) 1.25rem 2.5rem !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .munis-split { grid-template-columns: 1fr !important; }
  .munis-content {
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.9rem !important;
  }
  .munis-head { margin: 0 !important; }
  .munis-head h2 {
    font-size: clamp(1.7rem, 6vw, 2.3rem) !important;
    line-height: 1.15 !important;
    margin: 0.3rem 0 !important;
  }
  .munis-head .section-label { display: inline-flex !important; }
  .munis-list { grid-template-columns: 1fr 1fr !important; gap: 0.3rem !important; }
  .munis-list li { padding: 0.55rem 0.4rem !important; border-right: none !important; }
  .munis-list a { font-size: 0.86rem !important; }
  .munis-note { font-size: 0.86rem !important; line-height: 1.55 !important; margin: 0.4rem 0 !important; }

  /* Discovery */
  .discovery-section { padding: calc(var(--nav-h) + 1.5rem) 1.25rem 2.5rem !important; min-height: 0 !important; }
  .discovery-process,
  .dsteps,
  .discovery-steps { flex-direction: column !important; gap: 1.25rem !important; align-items: stretch !important; }
  .dstep-rail, .dstep-dash { display: none !important; }
}

/* ════════════════════════════════════════
   ADU GUIDE
══════════════════════════════════════ */
@media (max-width: 760px) {
  .guide-types-grid    { grid-template-columns: 1fr !important; gap: 0.8rem !important; }
  .guide-glossary      { grid-template-columns: 1fr 1fr !important; gap: 0.6rem !important; }
  .guide-reasons-grid  { grid-template-columns: 1fr !important; gap: 0.8rem !important; }
  .guide-charts        { grid-template-columns: 1fr !important; }
  .guide-cost-grid     { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .guide-cta-inner     { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .guide-hero-inner    { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .guide-quickgrid-grid { grid-template-columns: 1fr 1fr !important; }
  .guide-type-art { height: 100px !important; }
}

/* ════════════════════════════════════════
   SERVICES
══════════════════════════════════════ */
@media (max-width: 760px) {
  .svc-grid              { grid-template-columns: 1fr !important; gap: 0.85rem !important; }
  .svc-hero-inner        { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .svc-hero-stats        { grid-template-columns: 1fr 1fr !important; }
  .svc-philosophy-grid   { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .svc-pillars           { grid-template-columns: 1fr 1fr !important; gap: 0.7rem !important; }
  .svc-cta-inner         { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .svc-process-track     { grid-template-columns: 1fr !important; gap: 0.8rem !important; }
  .svc-process-arrow     { display: none !important; }

  /* The horizontally-scrolling matrix table on small screens turns into
     a scroll-x viewport so it stays readable instead of squishing. */
  .svc-matrix-panel .svc-matrix {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .svc-matrix-row {
    display: grid !important;
    grid-template-columns: 130px repeat(5, 90px) !important;
    min-width: 580px !important;
  }

  /* Push the "Show More" button down so it isn't crowding the
     description above it. */
  .svc-stack-panel .svc-card { padding-bottom: 1.4rem !important; gap: 0.65rem !important; }
  .svc-stack-panel .svc-card-more {
    margin-top: 1.1rem !important;
  }

  /* Modal — fit better on mobile, drop the close X (click outside or
     re-tap the same card closes). */
  .svc-modal { padding: 0.85rem !important; }
  .svc-modal-panel {
    padding: 1.6rem 1.4rem 1.7rem !important;
    max-width: 100% !important;
    max-height: 88vh !important;
  }
  .svc-modal-close { display: none !important; }
  .svc-modal-name { font-size: 1.7rem !important; }
  .svc-modal-desc { font-size: 0.96rem !important; line-height: 1.6 !important; }
  .svc-modal-deliv li { font-size: 0.94rem !important; }

  /* FAQ heading + lede smaller on Services, ADU Guide, Feasibility,
     and Process — all use the shared muni-faq markup. */
  .svc-faq-panel .muni-section-h2,
  .guide-faq-panel .muni-section-h2,
  .feas-faq-panel .muni-section-h2,
  .proc-faq-panel .muni-section-h2,
  .muni-faq-section .muni-section-h2 {
    font-size: clamp(1.4rem, 5vw, 1.85rem) !important;
    padding: 0 0.5rem !important;
    line-height: 1.1 !important;
  }
  .svc-faq-panel .muni-section-eyebrow,
  .guide-faq-panel .muni-section-eyebrow,
  .feas-faq-panel .muni-section-eyebrow,
  .proc-faq-panel .muni-section-eyebrow,
  .muni-faq-section .muni-section-eyebrow {
    font-size: 0.62rem !important;
    letter-spacing: 0.26em !important;
  }
  .svc-faq-panel .muni-faq-lede,
  .guide-faq-panel .muni-faq-lede,
  .feas-faq-panel .muni-faq-lede,
  .proc-faq-panel .muni-faq-lede,
  .muni-faq-section .muni-faq-lede {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    padding: 0 0.6rem !important;
  }
}

/* ════════════════════════════════════════
   PROJECTS — paged grid → single-column scroll
══════════════════════════════════════ */
@media (max-width: 760px) {
  .projx-hero-inner   { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .projx-hero-stats   { grid-template-columns: 1fr 1fr !important; }
  .projx-cta-inner    { grid-template-columns: 1fr !important; gap: 1.2rem !important; }

  /* Snap panel for the grid should grow with content instead of being
     a single viewport. */
  .projx-grid-panel {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
    padding: calc(var(--nav-h) + 1.2rem) 1.25rem 2rem !important;
  }
  .projx-grid-panel .muni-snap-inner { height: auto !important; }

  /* Paged grid → vertical stack of all 9 cards (pages all visible). */
  .projx-grid--paged {
    margin: 0 !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    height: auto !important;
  }
  .projx-pages {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    gap: 1rem !important;
  }
  .projx-page,
  .projx-page--five {
    flex: none !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    transform: none !important;
    gap: 1rem !important;
  }
  .projx-page .projx-card { height: auto !important; min-height: 260px !important; }
  .projx-card { grid-template-columns: 1fr !important; }
  .projx-img { min-height: 200px !important; }

  /* Hide the pager arrows + dots (the whole list is already shown). */
  .projx-page-arrow,
  .projx-page-dots { display: none !important; }

  /* Lightbox */
  .projx-lightbox-arrow { width: 38px !important; height: 38px !important; }
  .projx-lightbox-close { top: 0.85rem !important; right: 0.85rem !important; width: 38px !important; height: 38px !important; font-size: 1.4rem !important; }
}

/* ════════════════════════════════════════
   PROCESS — disable horizontal scroll, stack
══════════════════════════════════════ */
@media (max-width: 760px) {
  .proc-progress       { display: none !important; }
  .proc-hero-inner     { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .proc-h-wrap         { height: auto !important; }
  .proc-h-pin          { position: static !important; height: auto !important; overflow: visible !important; }
  .proc-h-track        { flex-direction: column !important; width: 100% !important; transform: none !important; height: auto !important; }
  .proc-h-panel        { width: 100% !important; height: auto !important; padding: calc(var(--nav-h) + 1.2rem) 1.25rem 2rem !important; }
  .proc-h-body         { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .proc-h-side         { grid-template-columns: 1fr 1fr !important; }
  .proc-h-head         { display: none !important; }
  .proc-h-marker       { display: none !important; }
  .proc-cta-inner      { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .proc-h-h2           { font-size: clamp(2rem, 7vw, 2.8rem) !important; }
}

/* ════════════════════════════════════════
   FEASIBILITY
══════════════════════════════════════ */
@media (max-width: 760px) {
  .feas-hero-inner     { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .feas-why-grid       { grid-template-columns: 1fr !important; gap: 0.7rem !important; }
  .feas-includes-grid  { grid-template-columns: 1fr !important; gap: 0.7rem !important; }
  .feas-charts         { grid-template-columns: 1fr !important; }
  .feas-optional-grid  { grid-template-columns: 1fr !important; gap: 0.8rem !important; }
  .feas-cta-inner      { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .feas-h-wrap         { height: auto !important; }
  .feas-h-marker       { display: none !important; }
}

/* ════════════════════════════════════════
   ABOUT
══════════════════════════════════════ */
@media (max-width: 760px) {
  .about-hero-inner    { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .about-studio-grid   { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .about-studio-stats  { grid-template-columns: 1fr 1fr !important; }
  .about-values-grid   { grid-template-columns: 1fr !important; gap: 0.8rem !important; }
  .about-story-grid    { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .about-testimonials  { grid-template-columns: 1fr !important; gap: 0.8rem !important; }
  .about-emmanuel-grid { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .about-cta-inner     { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
}

/* ════════════════════════════════════════
   CONTACT — keep form intact, stack other sections
══════════════════════════════════════ */
@media (max-width: 760px) {
  .contact-hero-inner   { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .contact-next-grid    { grid-template-columns: 1fr !important; gap: 0.8rem !important; }
  .contact-direct-inner { grid-template-columns: 1fr !important; gap: 1.2rem !important; }

  /* Form: keep readable, no two-col rows on tight screens. */
  .cform-row,
  .cform-row--2,
  .cform-row--3 { grid-template-columns: 1fr !important; gap: 0.7rem !important; }
}

/* ════════════════════════════════════════
   MUNICIPALITY SUBPAGES
══════════════════════════════════════ */
@media (max-width: 760px) {
  .muni-snap-panel {
    /* Subpages use snap panels with 100vh; on mobile, let them grow. */
    height: auto !important;
    min-height: auto !important;
    padding: calc(var(--nav-h) + 1.2rem) 0 2rem !important;
  }
  .muni-hero-panel .muni-snap-inner {
    grid-template-areas: none !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  /* Overview 3-col layout collapses to a single vertical stack. Children
     have named grid-area assignments that strand them in cell 1,1 once
     the columns disappear — switch to block flow so they cascade. */
  .muni-intro-block,
  .muni-intro-block--3col {
    display: block !important;
    grid-template-areas: none !important;
    grid-template-columns: 1fr !important;
  }
  .muni-intro-head,
  .muni-intro-col,
  .muni-intro-col--a,
  .muni-intro-col--b,
  .muni-intro-side {
    grid-area: auto !important;
    width: 100% !important;
    margin-bottom: 1.1rem !important;
  }
  .muni-intro-side {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 1rem !important;
    margin-bottom: 0 !important;
    font-style: italic;
    opacity: 0.85;
  }

  .muni-quickgrid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
  }
  .muni-qcell {
    padding: 0.85rem 0.95rem !important;
    min-height: 78px !important;
  }
  .muni-qcell-label { font-size: 0.7rem !important; }
  .muni-qcell-value { font-size: 1.18rem !important; line-height: 1.2 !important; }

  .muni-rule-grid       { grid-template-columns: 1fr !important; gap: 0.7rem !important; }
  .muni-nuance-grid     { grid-template-columns: 1fr !important; gap: 0.8rem !important; }
  .muni-cta-grid        { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .muni-faq--overlay .muni-faq-a { position: static !important; }
  .muni-faq-item.opens-up .muni-faq-a { top: auto !important; bottom: auto !important; }

  /* Smaller, more measured text across muni pages — desktop bumps were
     too aggressive at narrow widths. */
  .muni-page-headline { font-size: clamp(1.85rem, 7.5vw, 2.5rem) !important; line-height: 1.08 !important; }
  .muni-page-subhead  { font-size: 0.9rem !important; line-height: 1.6 !important; }
  .muni-section-h2,
  .muni-h2            { font-size: clamp(1.5rem, 5.5vw, 2rem) !important; }
  .muni-section-eyebrow { font-size: 0.66rem !important; letter-spacing: 0.26em !important; }
  .muni-rule-label    { font-size: 0.72rem !important; }
  .muni-rule-value    { font-size: 1.04rem !important; }
  .muni-rule-note     { font-size: 0.82rem !important; line-height: 1.55 !important; }
  .muni-highlight-text { font-size: 0.86rem !important; line-height: 1.6 !important; }
  .muni-cta-lede      { font-size: 0.94rem !important; line-height: 1.65 !important; }
  .muni-intro-block p { font-size: 0.88rem !important; line-height: 1.6 !important; }
  .muni-intro-side    { font-size: 0.92rem !important; line-height: 1.55 !important; }
  .muni-snap-panel    { padding-top: calc(var(--nav-h) + 1.2rem) !important; padding-bottom: 1.8rem !important; }
  .muni-snap-inner    { gap: 0.85rem !important; }

  /* Quick info grid: a notch smaller. */
  .muni-quickgrid    { gap: 1px !important; }
  .muni-qcell        { padding: 0.7rem 0.8rem !important; min-height: 70px !important; }
  .muni-qcell-label  { font-size: 0.62rem !important; }
  .muni-qcell-value  { font-size: 1.02rem !important; line-height: 1.18 !important; }

  /* FAQ on muni subpages — smaller title + lede. */
  .muni-faq-section .muni-section-h2,
  .muni-faq-head .muni-section-h2  { font-size: clamp(1.45rem, 5vw, 1.85rem) !important; }
  .muni-faq-head .muni-section-eyebrow { font-size: 0.62rem !important; }
  .muni-faq-lede      { font-size: 0.88rem !important; line-height: 1.6 !important; padding: 0 0.4rem !important; }
  .muni-faq-q-text    { font-size: 0.96rem !important; line-height: 1.4 !important; }
  .muni-faq-a-inner p { font-size: 0.88rem !important; line-height: 1.65 !important; }

  /* Hero panel: keep background image but make sure content sits on a
     readable dark overlay (the 110deg gradient becomes top-to-bottom). */
  .muni-hero-panel { background-position: center !important; }
  .muni-hero-panel-inner { gap: 0.8rem !important; }
}