/* ==========================================================================
   Lake Havasu City AZ Plumbing Experts — main stylesheet
   Visual identity adapted from the supplied design reference D23-preview.html:
   near-black surfaces, violet accent, 6-stop holographic gradient,
   Orbitron display + Inter body, alternating dark/light section bands.

   Structural changes from D23, all deliberate and documented in the Batch 0
   report: proven two-element nav (desktop list + separate mobile drawer)
   replacing the single shared toggled list; explicit section modifier classes
   replacing fragile :not() chains; Google Fonts via <link> not @import;
   breakpoints normalised to 1200/900/768/600/480.
   ========================================================================== */

:root{
  /* surfaces */
  --bg:#080808;
  --surface:#111118;
  --band:#0C0C14;
  --cta-bg:#0A0A0F;
  --nav-bg:#0A0A0F;
  --light-bg:#F0F0F8;
  --white:#ffffff;
  /* ink */
  --text:#E8E8FF;
  --text-muted:#B8B8D8;
  --text-dim:#9a9ab0;
  --ink:#0A0A14;
  --ink-muted:#44444f;
  /* accent */
  --violet:#A855F7;
  --violet-dk:#7E22CE;
  --holo:linear-gradient(135deg,#FF0080,#FF8C00,#FFE600,#00FF88,#00CFFF,#A855F7);
  /* lines + depth */
  --border:#222228;
  --border-light:#d8d8e4;
  --radius:6px;
  --radius-lg:16px;
  --shadow:0 2px 10px rgba(0,0,0,.35);
  --shadow-lg:0 14px 44px rgba(0,0,0,.45);
  --shadow-light:0 14px 40px rgba(20,20,45,.10);
  /* type + metrics */
  --font-head:'Orbitron',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --container:1120px;
  --prose:72ch;
  --card-col:880px;
  --trans:.18s ease;
}

*{box-sizing:border-box}

html,body{overflow-x:hidden}
html{scroll-padding-top:96px}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--violet)}
a:hover{color:#c489fb}

p{margin:0 0 1.2rem;text-align:left}
ul,ol{margin:0 0 1.2rem;padding-left:1.25rem}
li{margin:0 0 .4rem}

h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;color:var(--white)}
h1{font-size:clamp(1.9rem,4.5vw,3.25rem);line-height:1.18;margin:.4rem 0 1rem;max-width:22ch}
h2{font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.25;margin:0 0 .9rem}
h3{font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.3;margin:0 0 .55rem}
h4{font-size:1rem;margin:0 0 .5rem}

.holo,.brand-holo{
  background:var(--holo);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:-999px;top:0;z-index:10000;background:var(--violet);color:#fff;padding:.65rem 1rem;font-weight:700;text-decoration:none}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--violet);outline-offset:2px}

.container{max-width:var(--container);margin:0 auto;padding:0 1.25rem}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
.masthead{background:var(--surface);border-bottom:1px solid var(--border)}
.masthead-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.7rem;padding-bottom:.7rem}
.brand{font-family:var(--font-head);font-weight:700;font-size:.95rem;color:var(--white);text-decoration:none;line-height:1.3}
.masthead-tag{font-size:.76rem;color:var(--text-dim)}
/* Logo placeholder. Stage 2 drops an <img> in beside or in place of the
   wordmark; the slot is sized and aligned here so that needs no structural
   change. Stage 1 never generates the asset. */
.logo-slot{display:inline-flex;align-items:center;gap:.5rem;min-height:40px}
.logo-slot img{max-height:40px;width:auto}
.logo-wordmark{display:inline-block}

/* --------------------------------------------------------------------------
   Navigation — desktop list + separate mobile drawer.
   Never a single shared <ul> toggled for both; never the checkbox hack.
   -------------------------------------------------------------------------- */
.nav{background:var(--nav-bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.nav-in{display:flex;align-items:center;gap:1rem;min-height:56px}

.nav-links{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0;flex:1}
.nav-links>li{margin:0}
.nav-link{display:block;padding:.7rem .8rem;color:#ccc;text-decoration:none;font-family:var(--font-body);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.nav-link:hover{color:var(--white)}
.nav-link[aria-current="page"]{color:var(--white)}
.dd-arrow{font-size:.7em}

.has-dropdown{position:relative}
.dropdown{
  position:absolute;top:100%;left:0;min-width:270px;
  margin:0;padding:.35rem 0;list-style:none;
  background:var(--surface);border:1px solid #333;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--trans),visibility var(--trans),transform var(--trans);
  z-index:1000;
}
.has-dropdown:hover>.dropdown,
.has-dropdown:focus-within>.dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown li{margin:0}
.dropdown a{display:block;padding:.5rem .8rem;color:#ddd;text-decoration:none;font-size:.86rem;white-space:nowrap}
.dropdown a:hover{background:#1a1a24;color:var(--white)}
.dropdown .dd-all{border-top:1px solid #2a2a33;margin-top:.25rem;padding-top:.6rem;font-weight:700;color:var(--violet)}

.nav-phone{
  margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem 1rem;min-height:44px;
  background:var(--holo);color:#000;border-radius:var(--radius);
  text-decoration:none;font-weight:700;font-size:.85rem;white-space:nowrap;
}
.nav-phone:hover{color:#000;filter:brightness(1.08)}

.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:44px;min-height:44px;background:none;border:0;cursor:pointer;padding:.5rem}
.hamburger span{display:block;width:24px;height:2px;background:var(--white);border-radius:2px;transition:transform var(--trans),opacity var(--trans)}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.nav-phone-icon{font-size:1rem;line-height:1}

.mob-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(330px,86vw);
  background:var(--surface);border-left:1px solid var(--border);
  z-index:9999;transform:translateX(100%);transition:transform .3s ease;
  overflow-y:auto;padding:1.25rem;
}
.mob-drawer[hidden]{display:block !important;transform:translateX(100%)}
.mob-drawer:not([hidden]){transform:translateX(0)}
/* padding-top, not a margin on the child <ul>: the ul's top margin collapses
   through this box and moves .drawer-inner itself down, taking the absolutely
   positioned close button with it, so the gap never opens. Padding does not
   collapse. */
.drawer-inner{position:relative;min-height:100%;padding-top:3.5rem}
.drawer-close{position:absolute;top:.75rem;right:.75rem;min-width:44px;min-height:44px;background:none;border:0;color:var(--white);font-size:1.1rem;cursor:pointer}
.mob-drawer ul{list-style:none;margin:0;padding:0}
.mob-drawer li{margin:0}
.mob-drawer a{display:block;padding:.8rem 0;color:var(--text);text-decoration:none;font-size:1rem;border-bottom:1px solid var(--border)}
.mob-drawer a:hover{color:var(--violet)}
.drawer-grp-btn{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:.8rem 0;background:none;border:0;border-bottom:1px solid var(--border);
  color:var(--text);font-family:var(--font-body);font-size:1rem;font-weight:600;
  text-align:left;cursor:pointer;min-height:44px;
}
.drawer-group ul{margin:0;padding-left:.9rem}
.drawer-group ul[hidden]{display:none}
.drawer-group ul a{font-size:.92rem;color:var(--text-muted)}
.drawer-cta{background:var(--holo);color:#000 !important;border-radius:var(--radius);text-align:center;font-weight:700;margin-top:1rem;border-bottom:0 !important}

.mob-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9998;opacity:0;visibility:hidden;transition:opacity var(--trans),visibility var(--trans)}
.mob-overlay.visible{opacity:1;visibility:visible}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */
.crumbs-wrap{background:var(--bg);border-bottom:1px solid var(--border)}
.crumbs{font-size:.82rem;color:var(--text-dim);padding-top:.75rem;padding-bottom:.75rem}
.crumbs a{color:var(--violet);text-decoration:none}

/* --------------------------------------------------------------------------
   Sections — explicit modifier classes, not :not() chains
   -------------------------------------------------------------------------- */
.section{padding:clamp(2.5rem,6vw,4.5rem) 0;background:var(--bg);color:var(--text)}
.section.is-band{background:var(--band);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section.is-cta{background:var(--cta-bg);border-top:1px solid var(--border)}
.section.is-light{background:var(--light-bg);color:var(--ink)}
.section.is-light h1,.section.is-light h2,.section.is-light h3,.section.is-light h4{color:#111}
.section.is-light p{color:var(--ink-muted)}
.section.is-light a{color:var(--violet-dk)}

.hero{position:relative;background:var(--bg);padding:clamp(2.5rem,7vw,4.5rem) 0;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg,#FF0080,#FF8C00,#FFE600,#00FF88,#00CFFF,#A855F7,#FF0080);opacity:.06;z-index:0}
.hero>.container{position:relative;z-index:1}
.eyebrow{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);font-weight:700;margin:0 0 .3rem}
.hero .lede{max-width:58ch;font-size:1.05rem;color:var(--text-muted);margin:0 0 1.3rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin:0 0 .5rem}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.6rem;min-height:48px;
  border-radius:var(--radius);border:2px solid transparent;
  font-family:var(--font-body);font-weight:700;text-decoration:none;
  position:relative;overflow:hidden;cursor:pointer;
}
.btn-accent{background:var(--holo);color:#000}
.btn-accent:hover{color:#000;filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--white);border-color:var(--violet)}
.btn-ghost:hover{background:rgba(168,85,247,.14);color:var(--white)}
.section.is-light .btn-ghost{color:var(--ink);border-color:var(--violet-dk)}
.section.is-light .btn-ghost:hover{color:var(--ink)}
.btn-sheen{position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transition:left .5s ease;pointer-events:none}
.btn:hover .btn-sheen{left:150%}

.cta-inline{margin:1.8rem 0;text-align:center}
.cta-lead{font-family:var(--font-head);font-size:1.05rem;color:var(--white);margin:0 0 .8rem;text-align:center}
.section.is-light .cta-lead{color:#111}
.centered-note{text-align:center;margin:1.4rem 0}
.hero-lede p{max-width:58ch;font-size:1.05rem;color:var(--text-muted);margin:0 0 1rem}
.zip-note{font-size:.86rem;color:var(--text-dim);margin:.9rem 0 0}
.section.is-light .zip-note{color:#555}

/* --------------------------------------------------------------------------
   Grids + cards
   -------------------------------------------------------------------------- */
.grid{display:grid;gap:1.1rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-top:4px solid transparent;
  border-image:var(--holo) 1;
  border-radius:var(--radius);padding:1.2rem;
  transition:transform var(--trans),box-shadow var(--trans);
}
.card h3{margin:0 0 .5rem;font-size:1rem}
.card h3 a{color:var(--white);text-decoration:none}
.card p{font-size:.94rem;color:var(--text-dim);margin:0 0 .6rem}
.card .card-link{font-weight:700;font-size:.88rem;color:var(--violet);text-decoration:none}
.section.is-light .card{background:var(--white);color:var(--ink);box-shadow:var(--shadow-light)}
.section.is-light .card h3 a{color:var(--ink)}
.section.is-light .card p{color:#555}

/* Body-copy containers: centred readable column, never bare text on the page
   background. Three variants cover article blocks, checklists and callouts. */
.panel-card,.callout-card,.insight-card{
  max-width:var(--card-col);margin:0 auto 1.4rem;
  border-radius:var(--radius-lg);padding:2.4rem 2.6rem;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.callout-card::before{content:"";position:absolute;top:0;left:0;bottom:0;width:6px;background:var(--holo)}
.insight-card{background:#0f0f16;box-shadow:none}
.insight-card::before{content:"";position:absolute;top:1.4rem;bottom:1.4rem;left:0;width:5px;border-radius:0 4px 4px 0;background:var(--violet)}
.section.is-light .panel-card,
.section.is-light .callout-card{background:var(--white);border-color:var(--border-light);box-shadow:var(--shadow-light)}
.section.is-light .insight-card{background:#e6e6f2;border-color:var(--border-light)}
.panel-card>:last-child,.callout-card>:last-child,.insight-card>:last-child{margin-bottom:0}

.prose{max-width:var(--prose)}
.panel-card .prose,.callout-card .prose,.insight-card .prose{max-width:none}

.icon-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.icon-list li{display:flex;align-items:flex-start;gap:.85rem;margin:0}
.icon-list .ico{flex:none;width:27px;height:27px;border-radius:50%;background:var(--violet);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem}

.feature{margin:0 0 1.4rem}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:step}
.steps li{display:flex;align-items:flex-start;gap:.9rem;margin:0}
.steps .n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--violet);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:.82rem}

/* --------------------------------------------------------------------------
   Tables — always inside a scroll wrapper
   -------------------------------------------------------------------------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:var(--card-col);margin:0 auto 1.4rem}
table{width:100%;border-collapse:collapse;font-size:.94rem}
th,td{padding:.7rem .85rem;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
th{font-family:var(--font-head);font-size:.82rem;color:var(--white);background:#15151d}
.section.is-light th{color:#111;background:#e2e2ee}
.section.is-light th,.section.is-light td{border-color:var(--border-light)}

/* --------------------------------------------------------------------------
   FAQ — native <details>, no display:none fought by JS
   -------------------------------------------------------------------------- */
.faq{max-width:var(--card-col);margin:0 auto}
.faq details{background:var(--surface);border:1px solid #333;border-radius:var(--radius);padding:.2rem;margin:0 0 .7rem}
.faq summary{
  cursor:pointer;padding:.85rem 1rem;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--font-head);font-weight:700;font-size:.88rem;color:var(--white);
  min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--violet);font-size:1.2rem;flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq .faq-body{padding:0 1rem}
.faq .faq-body p{color:var(--text-dim)}
.section.is-light .faq details{background:var(--white);border-color:var(--border-light)}
.section.is-light .faq summary{color:#111}
.section.is-light .faq .faq-body p{color:#555}

/* --------------------------------------------------------------------------
   Areas list + coverage
   -------------------------------------------------------------------------- */
.area-cols{columns:2;column-gap:2rem}
.area-cols ul{list-style:none;margin:0;padding:0}
.area-cols li{margin:0 0 .35rem}
.area-cols a{color:var(--violet);text-decoration:none;font-weight:600;font-size:.92rem}
.section.is-light .area-cols a{color:var(--violet-dk)}

.zip-card{max-width:var(--card-col);margin:1.4rem auto 0;background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--violet);border-radius:var(--radius-lg);padding:1.6rem 1.8rem}
.zip-card h3{margin:0 0 .5rem}
.zip-list{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.zip-list li{margin:0;padding:.3rem .7rem;border:1px solid var(--border);border-radius:999px;font-size:.86rem;color:var(--text-muted)}
.section.is-light .zip-card{background:var(--white);border-color:var(--border-light);border-left-color:var(--violet)}

.map-wrap{position:relative;padding-bottom:56.25%;height:0;max-width:var(--card-col);margin:0 auto 1.4rem;border-radius:var(--radius-lg);overflow:hidden}
.map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --------------------------------------------------------------------------
   Stage 2 figures (.s2-fig). Natural ratio, never cropped, never upscaled
   (width capped at the file's pixel width via --s2-w). The old .image-slot
   placeholder rules below are now unused by the generator.
   -------------------------------------------------------------------------- */
.image-slot{
  margin:1.5rem auto;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(135deg,#1b1b26,#2a2038 55%,#1b1b26);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-dim);font-size:.82rem;text-align:center;
}
.image-slot span{padding:1rem}
.section.is-light .image-slot{background:linear-gradient(135deg,#e2e2ee,#d6d0e6 55%,#e2e2ee);border-color:var(--border-light);color:#5a5a6e}

/* --------------------------------------------------------------------------
   Holo band — repurposed from the reference's injected badge. Carries a real,
   dataset-supported dispatch statement, never a fabricated endorsement.
   -------------------------------------------------------------------------- */
.holo-badge{
  width:100%;max-width:320px;min-height:72px;border-radius:10px;
  background:var(--holo);margin:1.4rem 0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--font-head);color:#000;font-weight:700;font-size:.82rem;
  padding:.8rem 1rem;box-shadow:0 10px 40px rgba(168,85,247,.28);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer{background:#000;color:var(--text-dim)}
.site-footer .container{padding-top:2.4rem;padding-bottom:1.4rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:1.6rem}
.footer-brand .brand{display:block;margin-bottom:.6rem}
.footer-blurb{font-size:.88rem;margin:0 0 .6rem}
.footer-phone{display:block;font-family:var(--font-head);font-weight:700;font-size:1.05rem;color:var(--white);text-decoration:none;margin:0 0 .3rem}
.footer-email{display:block;font-size:.88rem;color:var(--violet);text-decoration:none;margin:0 0 .6rem}
.footer-nap{font-size:.85rem;margin:0;font-style:normal}
.footer-col{min-width:0}
.footer-head{font-weight:700;font-family:var(--font-head);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--violet);margin:0 0 .6rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0 0 .35rem}
.site-footer a{color:var(--text-dim);text-decoration:none;font-size:.88rem}
.site-footer a:hover{color:var(--white)}
.footer-legal{border-top:1px solid #222;margin-top:1.4rem;padding-top:1rem}
.footer-disclaimer{font-size:.76rem;line-height:1.6;color:#6d6d7a;margin:0 0 .6rem;max-width:none}
.footer-copy{font-size:.78rem;color:#6d6d7a;margin:0}
/* Stage 3: long unbroken strings (email) wrap instead of overflowing at 320-375px */
.footer-grid>*{min-width:0}
.footer-email,.footer-phone,main a[href^="mailto:"]{overflow-wrap:anywhere}

/* --------------------------------------------------------------------------
   Sticky mobile call bar
   -------------------------------------------------------------------------- */
.sticky-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:8000;background:var(--holo)}
.sticky-cta a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem;min-height:48px;color:#000;text-decoration:none;font-weight:700;font-size:.92rem}

/* --------------------------------------------------------------------------
   Scroll reveal.

   Deliberately animates TRANSFORM ONLY and never touches opacity. An earlier
   version started every target at opacity:0 and relied on IntersectionObserver
   to reveal it, which meant all 15 body-copy containers on the homepage were
   invisible at load and stayed invisible in any context where the observer
   never fired: a JS error after the html.js class was set, printing, or a
   screenshot/crawl service. Every automated check still passed, because the
   text was present in the DOM the whole time. Caught only by looking at a
   full-page render.

   Reveal is also scoped to decorative grid items now, not to the cards that
   hold the page's actual prose.
   -------------------------------------------------------------------------- */
.js .reveal{transform:translateY(14px);transition:transform .45s ease}
.js .reveal.is-in{transform:none}

/* --------------------------------------------------------------------------
   Breakpoints: 1200 / 900 / 768 (nav) / 600 / 480 only
   -------------------------------------------------------------------------- */
@media (max-width:1200px){
  .nav-link{padding:.7rem .62rem}
}

@media (max-width:900px){
  .nav-links{gap:0;font-size:.9rem}
  /* Stage 3: 44px minimum touch targets for footer and breadcrumb links on touch-width screens */
  .site-footer li{margin:0}
  .footer-col a,.footer-phone,.footer-email,.crumbs a{display:flex;align-items:center;min-height:44px}
  .crumbs a{display:inline-flex}
  .nav-link{padding:.7rem .5rem;font-size:.72rem}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .panel-card,.callout-card,.insight-card{padding:2rem 2rem}
}

@media (max-width:768px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-in{min-height:52px}
  .masthead-tag{display:none}
  .sticky-cta{display:block}
  body{padding-bottom:56px}
  .card{transform:none}
}

@media (max-width:600px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .area-cols{columns:1}
  .panel-card,.callout-card,.insight-card{padding:1.6rem 1.3rem;border-radius:12px;max-width:100%}
  .table-wrap,.faq,.zip-card,.map-wrap{max-width:100%}
  .zip-card{padding:1.2rem 1.1rem}
  .holo-badge{max-width:100%}
}

@media (max-width:480px){
  .container{padding:0 1rem}
  .nav-phone{padding:.5rem .75rem}
  .nav-phone-label{display:none}
  .nav-phone::after{content:"Call";font-weight:700}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .js .reveal{opacity:1;transform:none}
}


/* Stage 2 photo figures — namespaced, scoped to figure elements only */
.s2-fig{margin:1.5rem auto;max-width:min(100%,var(--s2-w,100%),1040px);text-align:center}
.s2-fig img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--border);background:#111}
.s2-fig figcaption{margin:.6rem auto 0;max-width:62ch;font-size:.88rem;line-height:1.5;color:var(--text-dim);text-align:center}
.section.is-light .s2-fig img{border-color:var(--border-light)}
.section.is-light .s2-fig figcaption{color:#4a4a5e}
.logo-slot img.logo-mark{height:40px;width:auto;max-height:40px}
.footer-logo-plate{display:inline-flex;max-width:100%;background:#fff;border-radius:12px;padding:.6rem .8rem;margin-bottom:.6rem}
.footer-logo-plate img{display:block;height:auto;width:min(100%,220px)}
.s2-fig-hero{margin-top:2rem}

/* ==========================================================================
   Hub coverage-map module (/areas-we-serve/), standing rules section 12.
   Two columns on desktop, stacked at 900px and below. Pins are real links
   with a 44px touch target and a visible focus ring.
   ========================================================================== */
.hubmap-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:start}
.hubmap-list h3{margin:1.2rem 0 .5rem}
.hubmap-list .panel-card{margin-bottom:0}
.hubmap-list .zip-note{margin:.7rem 0 0;font-size:.88rem}
.range-callout{margin-top:1.4rem;padding:1.2rem 1.3rem;border:1px solid var(--border-light);border-left:5px solid var(--violet);border-radius:var(--radius-lg);background:var(--white)}
.range-callout h3{margin:0 0 .4rem}
.range-callout p{margin:0 0 .9rem}
.hubmap{position:relative;aspect-ratio:10/9;width:100%;border:1px solid var(--border-light);border-radius:var(--radius-lg);background:#ecebf6;overflow:hidden}
.hubmap svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hubmap .hm-grid line{stroke:#c9c7de;stroke-width:1;vector-effect:non-scaling-stroke}
.hubmap .pin{position:absolute;transform:translate(-50%,-50%);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;text-decoration:none;border-radius:50%}
.hubmap .pin-dot{width:16px;height:16px;border-radius:50%;background:var(--violet-dk);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.hubmap .pin-label{position:absolute;left:calc(50% + 14px);top:50%;transform:translateY(-50%);white-space:nowrap;font-size:.8rem;font-weight:700;color:#111;background:rgba(255,255,255,.9);padding:.1rem .4rem;border-radius:4px}
.hubmap .pin-left .pin-label{left:auto;right:calc(50% + 14px)}
.hubmap .pin:focus-visible{outline:3px solid #111;outline-offset:2px}
.hubmap-caption{margin:.6rem 0 .2rem;font-size:.84rem;color:var(--ink-muted)}
.hubmap-link{margin:0;font-size:.9rem}
@media (max-width:900px){
  .hubmap-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .hubmap .pin-label{font-size:.72rem;padding:.05rem .3rem}
}

/* Contrast fixes found while building the hub module: in light sections the
   generic link colour was overriding the accent button's black text, and the
   ZIP chips used the dark-theme muted text colour on a light background. */
.section.is-light a.btn-accent,.section.is-light a.btn-accent:hover{color:#000}
.section.is-light .zip-list li{color:var(--ink-muted);border-color:var(--border-light)}

.hubmap-col{min-width:0}