/* Big Heart Moving HTX — main.css
   Dark navy design. Design tokens injected via inline <style id="fw-palette">.
   Bug-fix rules preserved from critic rounds (numbered in comments).
   --clr-brand:#0D2137  --clr-mid:#1B4570  --clr-pop:#E63946
   --clr-bg:#FFFFFF  --clr-bg2:#F5F7FA  --clr-ink:#1C1C2E
*/

/* =========================================================
   BASE / RESET
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--clr-bg);
  color:var(--clr-ink);
  font-family:var(--ff-text);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--clr-brand);text-underline-offset:2px}
a:hover{color:var(--clr-brand-dk);text-decoration:underline}

h1,h2,h3,h4{
  font-family:var(--ff-title);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 .6em;
  color:var(--clr-ink);
}
h1{font-size:clamp(2rem,1.3rem + 1.8vw,2.8rem);font-weight:800}
h2{font-size:clamp(1.5rem,1.1rem + 1.1vw,1.95rem)}
h3{font-size:1.25rem;font-weight:700}
p{margin:0 0 1em}

/* =========================================================
   SKIP LINK (.sr-only) — Bug-fix #16
   ========================================================= */
.sr-only{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  padding:0;margin:-1px;border:0;
}
a.sr-only:focus{
  position:fixed!important;top:8px;left:8px;
  width:auto;height:auto;clip:auto;clip-path:none;
  background:var(--clr-pop);color:#fff;
  padding:.6rem 1rem;border-radius:var(--rad);
  z-index:9999;font-weight:600;
}

/* =========================================================
   CONTAINER
   ========================================================= */
.container{
  max-width:var(--max-w,1200px);
  margin:0 auto;
  padding:0 var(--gutter,1.25rem);
}

/* =========================================================
   SECTIONS — Bug-fix #1 (4-tier padding), #2 (alt divider), #3 (h2 margin-top:0)
   ========================================================= */
section{padding:clamp(2.5rem,4vw,4rem) 0}
section.alt{background:var(--clr-bg2)}

/* #1 — 4-tier section padding scale */
section[data-panel="hero"]{padding:clamp(2rem,3vw,3.25rem) 0 clamp(2.5rem,3.5vw,3.5rem)}
section[data-panel="services"],
section[data-panel="reviews"],
section[data-panel="questions"]{padding:clamp(3rem,5vw,5.5rem) 0}
section[data-panel="trust"]{padding:1.6rem 0}
section[data-panel="cta"]{padding:clamp(2rem,3vw,3rem) 0}
section[data-panel="areas"],
section[data-panel="routes-preview"]{padding:clamp(2.5rem,4vw,4rem) 0}

/* #2 — Adjacent same-background sections get a divider */
section.alt + section.alt,
section:not(.alt) + section:not(.alt){border-top:1px solid var(--clr-line)}

/* #3 — First H2 in section: prevent 138px void above */
section > .container > h2:first-child,
section > .container > .eyebrow + h2{margin-top:0}

/* Last section tight to footer */
main > section:last-child{padding-bottom:clamp(2rem,3vw,3rem)}

/* Eyebrow label */
.eyebrow{
  display:inline-block;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--clr-pop);
  margin-bottom:.6rem;
}

/* =========================================================
   BUTTONS — Bug-fix #17 (header CTA uses btn-ghost not btn-accent)
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--ff-title);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.02em;
  padding:.9em 1.5em;
  border-radius:var(--rad);
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .12s ease,color .15s ease;
}
.btn-primary{background:var(--clr-pop);color:#fff;border-color:var(--clr-pop)}
.btn-primary:hover{background:var(--clr-pop-dk);border-color:var(--clr-pop-dk);color:#fff;transform:translateY(-1px)}
.btn-accent{background:var(--clr-pop);color:#fff;border-color:var(--clr-pop)}
.btn-accent:hover{background:var(--clr-pop-dk);border-color:var(--clr-pop-dk);color:#fff;transform:translateY(-1px)}
/* #17 — Ghost button for header CTA so it doesn't compete with hero primary CTA */
.btn-ghost{background:transparent;color:var(--clr-ink);border:2px solid var(--clr-line)}
.btn-ghost:hover{border-color:var(--clr-brand);color:var(--clr-brand);background:transparent}

/* =========================================================
   FORMS (.fw-inquiry) — Bug-fix #12 (font-size:16px prevents mobile Safari zoom)
   ========================================================= */
.fw-inquiry label{
  display:block;
  font-weight:600;
  font-size:.84rem;
  margin-bottom:.25rem;
  color:var(--clr-ink);
}
.fw-inquiry .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.8rem;
  margin-bottom:.9rem;
}
.fw-inquiry .row:last-of-type{margin-bottom:0}
.fw-inquiry .row.one{grid-template-columns:1fr}
@media(max-width:640px){.fw-inquiry .row{grid-template-columns:1fr}}

/* #12 — 16px font prevents iOS Safari auto-zoom on focus */
.fw-inquiry input,
.fw-inquiry select,
.fw-inquiry textarea{
  width:100%;
  font-size:16px;
  line-height:1.4;
  padding:.65em .8em;
  border:1px solid var(--clr-line);
  border-radius:var(--rad);
  background:#fff;
  font-family:var(--ff-text);
  color:var(--clr-ink);
}
.fw-inquiry input:focus,
.fw-inquiry select:focus,
.fw-inquiry textarea:focus{
  outline:2px solid var(--clr-pop);
  outline-offset:1px;
  border-color:var(--clr-pop);
}
.fw-inquiry .sr-only{position:absolute!important;clip:rect(0 0 0 0);width:1px;height:1px;overflow:hidden}
.fw-inquiry .submit-row{margin-top:.8rem}
.fw-inquiry .submit-row button{width:100%;padding:.9em 1.6em;font-size:1rem}
.fw-inquiry .reassure,
.reassure{font-size:.78rem;color:var(--clr-ink-soft);margin-top:.5rem;line-height:1.45}

/* =========================================================
   HEADER — Dark (.top-bar.dark)
   ========================================================= */
.top-bar{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--clr-bg);
  border-bottom:1px solid var(--clr-line);
}
/* Dark header variant */
.top-bar.dark{
  background:var(--clr-brand);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.top-bar .inner{
  display:flex;
  align-items:center;
  gap:1.5rem;
  height:70px;
  padding-inline:var(--gutter,1.25rem);
}

/* Brand-mark */
.logo-link{
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
  line-height:1;
}
.logo-link .logo-img{
  flex:0 0 auto;
  width:56px;
  height:56px;
  border-radius:6px;
  display:block;
}
.logo-link .logo-text{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.logo-link .l1{
  font-family:var(--ff-title);
  font-weight:700;
  font-size:1.15rem;
  color:var(--clr-brand);
  line-height:1.15;
}
.logo-link .l2{
  font-size:.78rem;
  font-weight:600;
  color:var(--clr-ink-soft);
  text-transform:uppercase;
  letter-spacing:.06em;
}
/* Dark header brand colors */
.top-bar.dark .logo-link .l1{color:#fff}
.top-bar.dark .logo-link .l2{color:rgba(255,255,255,.55)}

@media(max-width:640px){
  .logo-link .logo-img{width:42px;height:42px}
  .logo-link .l1{font-size:1rem}
  .logo-link .l2{font-size:.7rem}
}
@media(max-width:760px){
  .logo-link .logo-text{display:none}
  .top-actions .btn-ghost{display:none}
}

/* Primary Nav */
.main-menu > ul,
.main-menu .menu{
  display:flex;
  gap:.3rem;
  margin:0;
  padding:0;
  list-style:none;
  font-weight:500;
}
.main-menu a{
  color:var(--clr-ink);
  text-decoration:none;
  padding:.5em .8em;
  font-size:.92rem;
  border-radius:var(--rad);
  transition:color .12s,background .12s;
}
.main-menu a:hover,
.main-menu .current-menu-item > a{color:var(--clr-brand)}
/* Dark header nav links */
.top-bar.dark .main-menu a{color:rgba(255,255,255,.8)}
.top-bar.dark .main-menu a:hover,
.top-bar.dark .main-menu .current-menu-item > a{color:#fff}

/* Dropdown submenu */
.main-menu .menu-item-has-children{position:relative}
.main-menu .menu-item-has-children > a::after{
  content:" \25BE";
  font-size:.7em;
  color:var(--clr-ink-soft);
  margin-left:.15em;
}
.top-bar.dark .main-menu .menu-item-has-children > a::after{color:rgba(255,255,255,.4)}
.main-menu .sub-menu{
  display:none;
  position:absolute;
  top:100%;
  left:-1rem;
  min-width:210px;
  background:#fff;
  border:1px solid var(--clr-line);
  border-radius:var(--rad);
  padding:.5rem 0;
  margin:0;
  list-style:none;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.15);
  z-index:100;
  flex-direction:column;
  gap:0;
}
.main-menu .menu-item-has-children:hover > .sub-menu,
.main-menu .menu-item-has-children:focus-within > .sub-menu{display:flex}
.main-menu .sub-menu li{margin:0}
.main-menu .sub-menu a{
  display:block;
  padding:.55rem 1.1rem;
  font-size:.94rem;
  color:var(--clr-ink);
  white-space:nowrap;
}
.top-bar.dark .main-menu .sub-menu a{color:var(--clr-ink)}
.main-menu .sub-menu a:hover,
.top-bar.dark .main-menu .sub-menu a:hover{
  background:var(--clr-bg2);
  color:var(--clr-brand);
}

/* Header CTA area */
.top-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:.8rem;
}
.top-phone{
  font-weight:600;
  font-size:.95rem;
  color:var(--clr-brand);
  text-decoration:none;
  white-space:nowrap;
}
/* Dark header overrides */
.top-bar.dark .top-phone{color:#fff}
.top-bar.dark .btn-ghost{
  color:#fff;
  border-color:rgba(255,255,255,.3);
}
.top-bar.dark .btn-ghost:hover{
  border-color:#fff;
  color:#fff;
  background:rgba(255,255,255,.08);
}

/* Nav toggle (mobile hamburger) */
.menu-toggle{
  display:none;
  background:none;
  border:0;
  font-size:1.5rem;
  color:var(--clr-ink);
  padding:.35rem .55rem;
  cursor:pointer;
  line-height:1;
}
.top-bar.dark .menu-toggle{color:#fff}

/* Mobile nav drawer */
@media(max-width:900px){
  .main-menu .sub-menu{
    display:flex!important;
    position:static;
    border:0;
    box-shadow:none;
    background:transparent;
    padding:.2rem 0 .2rem 1rem;
    min-width:0;
  }
  .main-menu .menu-item-has-children > a::after{display:none}
  .main-menu .sub-menu a{padding:.35rem 0;font-size:.9rem;color:var(--clr-ink-soft)}
}
@media(max-width:900px){
  .main-menu{display:none}
  .menu-toggle{display:inline-block}
  .main-menu.open{
    display:block;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--clr-brand-dk);
    border-top:1px solid rgba(255,255,255,.08);
    padding:1rem var(--gutter,1.25rem);
    z-index:100;
  }
  .main-menu.open ul{flex-direction:column;gap:.85rem}
  .main-menu.open a{color:rgba(255,255,255,.85);padding:.5em 0}
  .main-menu.open a:hover{color:#fff}
  .main-menu.open .sub-menu a{color:rgba(255,255,255,.8)}
  .main-menu.open .sub-menu a:hover{color:#fff}
}

/* =========================================================
   HERO (dark) — Bug-fix #4 (align-items:start)
   ========================================================= */
.hero{position:relative;background:var(--clr-bg)}
.hero.dark{
  background:var(--clr-brand);
  color:#fff;
}
/* #4 — align-items:start prevents cream void below short copy column */
.hero .grid{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:2rem;
  align-items:start;
  padding:0;
}
.hero .copy{padding-top:.5rem}
.hero.dark .copy{color:#fff}
.hero.dark h1{color:#fff;max-width:14ch;font-size:clamp(2rem,1.3rem + 1.8vw,2.8rem);font-weight:800;line-height:1.15}
.hero.dark .eyebrow{color:var(--clr-pop)}
.hero.dark .hook{color:rgba(255,255,255,.75);font-size:1.1rem;max-width:46ch}

/* Hero stats/process on dark bg */
.hero.dark .stats{color:rgba(255,255,255,.9)}
.hero.dark .stats .val{color:#fff}
.hero.dark .stats .lbl{color:rgba(255,255,255,.6)}
.hero.dark .timeline-steps{color:rgba(255,255,255,.8)}

/* Hero ghost button + stats on dark bg — must be global, not just front-page */
.hero.dark .btn-ghost{border-color:rgba(240,244,248,.25);color:#F0F4F8}
.hero.dark .btn-ghost:hover{background:rgba(240,244,248,.08);border-color:rgba(240,244,248,.4)}
.hero.dark .hero-metrics{border-top-color:rgba(240,244,248,.15) !important}
.hero.dark .hero-metrics div > div:first-child{color:#fff !important}
.hero.dark .hero-metrics div > div:last-child{color:rgba(240,244,248,.6) !important}
.hero.dark .hero-flow{border-top-color:rgba(240,244,248,.15) !important}
.hero.dark .hero-flow strong{color:#fff !important}
.hero.dark .hero-flow div > div:last-child{color:rgba(240,244,248,.6) !important}
.hero.dark .hero-flow span[style*="background"]{background:var(--clr-pop) !important}

/* Hero form card (white on dark) */
.inquiry-box{
  background:#fff;
  border:1px solid var(--clr-line);
  border-radius:var(--rad-lg);
  padding:clamp(1.1rem,2.2vw,1.6rem) clamp(1.1rem,2.2vw,1.8rem);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.3);
  color:var(--clr-ink);
}
.inquiry-box h2{font-size:1.25rem;margin-bottom:.35rem;color:var(--clr-ink)}
.inquiry-box .reassure-row{
  display:flex;
  gap:1rem;
  font-size:.82rem;
  color:var(--clr-ink-soft);
  margin-top:.65rem;
}

/* Hero photo slot */
.hero .photo{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--rad-lg);
  background:var(--clr-brand-dk);
}
.hero .photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero .photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.35) 100%);
}

/* Desktop sticky form in hero */
@media(min-width:980px){
  .hero > .container > .grid > div:has(> .inquiry-box){align-self:start}
  .hero .inquiry-box{position:sticky;top:1.2rem}
}
@media(max-width:860px){.hero .grid{grid-template-columns:1fr}.hero .inquiry-box{position:static !important}}
@media(max-width:640px){
  .hero > .container{padding-inline-start:1.6rem}
  .hero.dark h1{max-width:16ch}
}

/* =========================================================
   TRUST STRIP — Bug-fix #15 (max-width:100px per logo)
   ========================================================= */
.credibility-bar{
  background:var(--clr-bg2);
  padding:.8rem 0;
  border-bottom:1px solid var(--clr-line);
}
.credibility-bar .heading{
  font-family:var(--ff-text);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--clr-ink-soft);
  margin-bottom:1.2rem;
  text-align:center;
}
.credibility-bar .row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:2rem 3rem;
}
.credibility-bar a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  height:28px;
}
/* #15 — max-width:100px normalizes visual weight across logos */
.credibility-bar img{
  height:22px;
  max-height:22px;
  max-width:100px;
  width:100px;
  object-fit:contain;
  opacity:.55;
  filter:grayscale(100%) brightness(.6);
  transition:opacity .15s,filter .15s;
}
.credibility-bar a:hover img,
.credibility-bar img:hover{
  opacity:.9;
  filter:grayscale(0%) brightness(1);
}

/* =========================================================
   SERVICE CARDS — Bug-fix #9 (flex + justify-content:center, NOT CSS Grid auto-fit)
   ========================================================= */
.offers-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.5rem;
  align-items:stretch;
}
/* #9 — flex-based sizing prevents orphan-card flush-left bug */
.offers-grid > *{
  flex:1 1 250px;
  max-width:280px;
  min-width:230px;
}
@media(max-width:900px){.offers-grid > *{max-width:calc(50% - .75rem);flex-basis:240px}}
@media(max-width:600px){.offers-grid > *{max-width:100%;flex-basis:100%}}

.offer-tile{
  background:var(--clr-bg2);
  border:1px solid var(--clr-line);
  border-radius:var(--rad-lg);
  padding:1.4rem 1.4rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  text-decoration:none;
  color:var(--clr-ink);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
}
.offer-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px -12px rgba(13,33,55,.2);
  border-color:var(--clr-brand);
}
.offer-tile .ic{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  background:var(--clr-brand);
  border-radius:var(--rad);
  color:#fff;
  flex:0 0 auto;
}
.offer-tile .ic svg{width:24px;height:24px;display:block}
.offer-tile h3{
  margin:.4rem 0 .5rem;
  font-size:1.25rem;
  font-weight:700;
  line-height:1.25;
  color:var(--clr-ink);
}
.offer-tile p{margin:0;color:var(--clr-ink-soft);font-size:.95rem;line-height:1.55}
.offer-tile .more{
  margin-top:auto;
  color:var(--clr-pop);
  font-weight:600;
  text-decoration:none;
  font-size:.95rem;
}
.offer-tile:hover .more{text-decoration:underline;text-underline-offset:3px}

/* =========================================================
   OWNER BLOCK — Bug-fix #13 (min-width:0 prevents blockquote overflow)
   ========================================================= */
.founder-section{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:2.5rem;
  align-items:start;
  padding:1.25rem 0;
  min-width:0; /* #13 */
}
.founder-section > *{min-width:0;max-width:100%}
@media(max-width:780px){.founder-section{grid-template-columns:1fr}}
.founder-section .ph{
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:var(--rad-lg);
  border:1px solid var(--clr-line);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 16px 36px -22px rgba(13,33,55,.18);
}
.founder-section .ph img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 25%;
}
.founder-section .eyebrow{color:var(--clr-pop)}
.founder-section h2{overflow-wrap:break-word;word-wrap:break-word;max-width:100%}
.founder-section blockquote{
  margin:0 0 .8rem;
  font-family:var(--ff-title);
  font-size:1.3rem;
  line-height:1.4;
  color:var(--clr-ink);
  border-left:3px solid var(--clr-pop);
  padding-left:1.2rem;
  font-style:italic;
  overflow-wrap:break-word;
  hyphens:auto;
  max-width:60ch;
}
.founder-section p{max-width:60ch}

/* =========================================================
   PROCESS STEPS
   ========================================================= */
.sequence{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  counter-reset:s;
  margin-top:2.5rem;
}
.seq-item{
  padding:4.2rem 1.7rem 1.7rem;
  background:#fff;
  border:1px solid var(--clr-line);
  border-radius:var(--rad);
  position:relative;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -16px rgba(13,33,55,.1);
}
.seq-item::before{
  counter-increment:s;
  content:counter(s);
  position:absolute;
  top:1.2rem;
  left:1.7rem;
  background:var(--clr-pop);
  color:#fff;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-weight:700;
  font-size:1.05rem;
}
.seq-item h3{font-size:1.2rem;margin:0 0 .5rem}
.seq-item p{margin:0;color:var(--clr-ink-soft);font-size:1rem;line-height:1.55}
/* Dark hero process sequence override */
.hero.dark .seq-item{background:var(--clr-mid);border-color:rgba(255,255,255,.1)}
.hero.dark .seq-item h3{color:#fff}
.hero.dark .seq-item p{color:rgba(255,255,255,.7)}

/* Process strip (front-page photo sequence) — override generic .seq-item counter */
.timeline-bar .seq-item{padding:0;background:none;border:none;box-shadow:none}
.timeline-bar .seq-item::before{display:none}

/* =========================================================
   BENEFITS GRID — Bug-fix #9 applied (flex, justify-content:center)
   ========================================================= */
.advantages-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.5rem;
}
.advantages-grid > *{flex:1 1 240px;max-width:280px}
@media(max-width:900px){.advantages-grid > *{max-width:calc(50% - .75rem)}}
@media(max-width:600px){.advantages-grid > *{max-width:100%;flex-basis:100%}}

.advantage-item{display:flex;flex-direction:column;gap:.55rem}
.advantage-item .advantage-icon{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--clr-pop);
  background:var(--clr-bg2);
  border:1px solid var(--clr-line);
  border-radius:50%;
  flex:0 0 auto;
}
.advantage-item .advantage-icon svg{width:22px;height:22px}
.advantage-item h3{
  font-family:var(--ff-title);
  font-size:1.05rem;
  font-weight:600;
  margin:0;
  color:var(--clr-ink);
  line-height:1.25;
}
.advantage-item p{font-size:.92rem;color:var(--clr-ink-soft);line-height:1.55;margin:0}

/* =========================================================
   REVIEW CARDS — Bug-fix #14 (explicit avatar width/height for CLS),
                  Bug-fix #9 (flex centered)
   ========================================================= */
.testimonials-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.4rem;
}
.testimonials-grid > *{flex:1 1 300px;max-width:380px}
@media(max-width:900px){.testimonials-grid > *{max-width:calc(50% - .7rem)}}
@media(max-width:600px){.testimonials-grid > *{max-width:100%;flex-basis:100%}}

.testimonial{
  background:var(--clr-bg2);
  border:1px solid var(--clr-line);
  border-radius:var(--rad-lg);
  padding:1.4rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.testimonial .who{display:flex;gap:.7rem;align-items:center}
/* #14 — Explicit dimensions prevent CLS */
.testimonial .av{
  width:56px;
  height:56px;
  border-radius:50%;
  overflow:hidden;
  flex:0 0 auto;
  background:var(--clr-bg2);
}
.testimonial .av img{width:56px;height:56px;object-fit:cover;display:block}
.testimonial .meta{display:flex;flex-direction:column;line-height:1.25}
.testimonial .meta .nm{font-weight:600;color:var(--clr-ink)}
.testimonial .meta .sub{font-size:.82rem;color:var(--clr-ink-soft)}
.testimonial .stars{color:var(--clr-pop);letter-spacing:.06em}
.testimonial .body{color:var(--clr-ink);font-size:.95rem;line-height:1.55}
.testimonial .src{
  font-size:.78rem;
  color:var(--clr-ink-soft);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-top:auto;
}

/* =========================================================
   WORK GRID (recent projects gallery)
   ========================================================= */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.1rem;
}
@media(max-width:980px){.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.gallery-grid{grid-template-columns:1fr}}

.gallery-item{margin:0;display:flex;flex-direction:column;gap:.45rem}
.gallery-item .gallery-img{
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:var(--rad);
  background:var(--clr-bg2);
}
.gallery-item .gallery-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}
.gallery-item:hover .gallery-img img{transform:scale(1.04)}
.gallery-item figcaption{
  font-size:.85rem;
  color:var(--clr-ink-soft);
  line-height:1.4;
  padding:0 .15rem;
}

/* =========================================================
   SERVICE AREAS STRIP
   ========================================================= */
section[data-panel="areas"] h2{max-width:680px;margin-left:auto;margin-right:auto}
.locale-pills{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .7rem;
  justify-content:center;
}
.locale-pills a{
  display:inline-block;
  padding:.55rem .9rem;
  background:var(--clr-bg2);
  border:1px solid var(--clr-line);
  border-radius:var(--rad);
  text-decoration:none;
  color:var(--clr-ink);
  font-weight:500;
  font-size:.95rem;
  transition:border-color .12s,background .12s,color .12s;
}
.locale-pills a:hover{
  border-color:var(--clr-brand);
  color:var(--clr-brand);
  background:#fff;
}

/* =========================================================
   FAQ
   ========================================================= */
.questions details{
  background:#fff;
  border:1px solid var(--clr-line);
  border-radius:var(--rad);
  padding:1rem 1.1rem;
  margin-bottom:.6rem;
}
.questions summary{
  cursor:pointer;
  font-family:var(--ff-title);
  font-weight:600;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:center;
}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"+";font-size:1.4rem;color:var(--clr-pop);line-height:1;flex:0 0 auto}
.questions details[open] summary{border-bottom:1px solid var(--clr-line);padding-bottom:.8rem;margin-bottom:.6rem}
.questions details[open] summary::after{content:"\2212"}
.questions details > div{padding-top:.65rem;color:var(--clr-ink-soft);line-height:1.6}

/* =========================================================
   CTA BAND (dark navy)
   ========================================================= */
.action-strip{
  background:var(--clr-brand);
  color:#fff;
  padding:clamp(2rem,3vw,3rem) 0;
}
.action-strip .inner{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1.5rem;
  flex-wrap:wrap;
  text-align:center;
}
@media(max-width:780px){
  .action-strip .inner{flex-direction:column;text-align:center}
}
.action-strip h2{color:#fff;margin:0;font-family:var(--ff-title)}
.action-strip p{color:rgba(255,255,255,.75);margin:.3rem 0 0}

/* =========================================================
   PAGE HERO (inner pages, dark) — Bug-fix #5 (align-items:start)
   ========================================================= */
.inner-banner{
  background:var(--clr-brand);
  color:#fff;
  padding:clamp(2rem,4vw,3rem) 0 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* #5 — align-items:start prevents void above H1 */
.inner-banner .grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2rem;
  align-items:start;
  padding-bottom:clamp(1.5rem,3vw,2.5rem);
}
@media(max-width:860px){.inner-banner .grid{grid-template-columns:1fr}}
.inner-banner h1{
  color:#fff;
  margin-bottom:.45rem;
  max-width:14ch;
  font-size:clamp(2rem,1.3rem + 1.8vw,2.8rem);
  font-weight:800;
  line-height:1.15;
}
@media(max-width:640px){.inner-banner h1{max-width:16ch}}
.inner-banner .breadcrumb{
  font-size:.82rem;
  color:rgba(255,255,255,.5);
  margin-bottom:.5rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.inner-banner .breadcrumb a{color:rgba(255,255,255,.65)}
.inner-banner .breadcrumb a:hover{color:#fff}
.inner-banner .hook{color:rgba(255,255,255,.7)}
.inner-banner .eyebrow{color:var(--clr-pop)}
/* White card wrap for form inside dark inner-banner */
.inner-banner .fw-inquiry{background:#fff;border-radius:var(--rad-lg);padding:clamp(1.1rem,2.2vw,1.6rem) clamp(1.1rem,2.2vw,1.8rem);box-shadow:0 16px 40px -16px rgba(0,0,0,.35)}
.inner-banner .fw-inquiry label{color:var(--clr-ink)}
.inner-banner .fw-inquiry .muted{color:var(--clr-ink-soft)}
/* Ghost button + stats on inner-banner (same dark-bg overrides as .hero.dark) */
.inner-banner .btn-ghost{border-color:rgba(240,244,248,.25);color:#F0F4F8}
.inner-banner .btn-ghost:hover{background:rgba(240,244,248,.08);border-color:rgba(240,244,248,.4)}
.inner-banner .hero-metrics{border-top-color:rgba(240,244,248,.15) !important}
.inner-banner .hero-metrics div > div:first-child{color:#fff !important}
.inner-banner .hero-metrics div > div:last-child{color:rgba(240,244,248,.6) !important}
.inner-banner .hero-flow{border-top-color:rgba(240,244,248,.15) !important}
.inner-banner .hero-flow strong{color:#fff !important}
.inner-banner .hero-flow div > div:last-child{color:rgba(240,244,248,.6) !important}

/* =========================================================
   CONTENT LAYOUT (inner pages) — Bug-fix #6,#7,#8
   ========================================================= */
.layout-split{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:2.5rem;
  align-items:start;
}
.layout-split > .main{min-width:0}
.layout-split .main p{margin-bottom:1em}
.layout-split .main h2{margin-top:1.6em}
.layout-split .main h3{margin-top:1.4em}

/* #6 — Prevent phantom space below sidebar */
.layout-split > aside{align-self:start}
/* #7 — Fill right void on long pages when aside needs to stretch */
.layout-split > aside.sidebar-fill{align-self:stretch}

/* Aside quote card */
.sidebar-form{
  background:var(--clr-bg2);
  border:1px solid var(--clr-line);
  border-radius:var(--rad-lg);
  padding:1.4rem;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 14px -10px rgba(13,33,55,.12);
}
.sidebar-form h3{margin-top:0}

/* Aside compact form variant */
.sidebar-form .fw-inquiry{font-size:.92rem}
.sidebar-form .fw-inquiry label{font-size:.8rem;margin-bottom:.2rem}
.sidebar-form .fw-inquiry input,
.sidebar-form .fw-inquiry select{font-size:.95rem;padding:.5rem .65rem}
.sidebar-form .fw-inquiry .row{gap:.55rem;margin-bottom:.55rem}
.sidebar-form .fw-inquiry button[type="submit"]{
  background:var(--clr-mid);
  font-size:.95rem;
  padding:.7em 1em;
  margin-top:.4rem;
}
.sidebar-form .fw-inquiry button[type="submit"]:hover{background:var(--clr-brand-dk)}
.sidebar-form .tcpa-text,
.sidebar-form .form-reassure{font-size:.76rem}

/* #8 — position:sticky for inner form wrapper only, NOT whole aside */
.layout-split > aside .sidebar-pin{
  position:sticky;
  top:1.2rem;
  z-index:2;
  background:var(--clr-bg2);
}
@media(max-width:980px){
  .layout-split > aside .sidebar-pin{position:static}
  .layout-split{grid-template-columns:1fr}
}

/* Aside call/ticker blocks */
.sidebar-phone{
  background:var(--clr-brand);
  color:#fff;
  border-radius:var(--rad-lg);
  padding:1.2rem;
  margin-top:1rem;
  text-align:center;
}
.sidebar-phone a{color:#fff;font-weight:700;font-size:1.1rem}
.sidebar-counter{
  font-size:.82rem;
  color:var(--clr-ink-soft);
  margin-top:.8rem;
  padding:.8rem;
  background:#fff;
  border:1px solid var(--clr-line);
  border-radius:var(--rad);
}

/* =========================================================
   FOOTER (dark) — Bug-fix #10 (centered with flex-wrap), #11 (4-col grid)
   ========================================================= */
.bottom-bar{
  background:var(--clr-brand);
  color:#CBD5E1;
  padding:3.5rem 0 0;
  margin-top:0;
}
.bottom-bar h4{
  color:#fff;
  font-family:var(--ff-title);
  font-size:1.05rem;
  margin:0 0 .65rem;
}
.bottom-bar a{color:#CBD5E1;text-decoration:none}
.bottom-bar a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.bottom-bar ul{margin:0;padding:0;list-style:none;display:grid;gap:.4rem}

/* #11 — 4-column footer grid */
.foot-columns{
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr 1fr;
  gap:2.5rem;
}
@media(max-width:900px){.foot-columns{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foot-columns{grid-template-columns:1fr}}

/* Footer contact list with icons */
.foot-info{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.foot-info li{display:flex;gap:.5rem;align-items:flex-start;font-size:.92rem}
.foot-info svg{flex:0 0 auto;width:16px;height:16px;color:var(--clr-pop);margin-top:2px}

/* Credentials */
.badge-list{font-size:.85rem;line-height:1.55;color:rgba(203,213,227,.7)}
.badge-list .badge-mark{color:var(--clr-pop)}

/* #10 — Footer bottom: centered with flex-wrap, NOT space-between */
.foot-legal,
.bottom-bar .bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.5rem 1.5rem;
  padding-top:1.5rem;
  margin-top:2rem;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.82rem;
  color:rgba(203,213,227,.55);
  text-align:center;
  padding-bottom:1.5rem;
}
.foot-legal > *,
.bottom-bar .bottom > *{flex:0 1 auto}

/* =========================================================
   ASPECT HELPERS
   ========================================================= */
.aspect-16-9{aspect-ratio:16/9;overflow:hidden;border-radius:var(--rad)}
.aspect-4-5{aspect-ratio:4/5;overflow:hidden;border-radius:var(--rad)}
.aspect-3-2{aspect-ratio:3/2;overflow:hidden;border-radius:var(--rad)}
.aspect-1-1{aspect-ratio:1/1;overflow:hidden;border-radius:var(--rad)}
.aspect-16-10{aspect-ratio:16/10;overflow:hidden;border-radius:var(--rad)}
.aspect-16-9 img,.aspect-4-5 img,.aspect-3-2 img,
.aspect-1-1 img,.aspect-16-10 img{width:100%;height:100%;object-fit:cover}

/* =========================================================
   UTILITY CLASSES
   ========================================================= */
.text-center{text-align:center}
.mt-2{margin-top:2rem}
.mb-2{margin-bottom:2rem}
.muted{color:var(--clr-ink-soft)}

/* =========================================================
   HERO-MJ — MoverJunction-style centered hero with inline form
   Used on ALL page types (home, service, suburb, route, etc.)
   ========================================================= */
.masthead{background:#D6E8E4;color:var(--clr-ink);padding:clamp(2.5rem,4vw,4rem) 0 clamp(2rem,3vw,3rem);text-align:center}
.masthead > .container{max-width:1300px}
/* H1 = largest heading in hero (semantic + visual) */
.masthead h1{font-size:clamp(1.7rem,1.3rem + 1.8vw,2.8rem);margin-bottom:.6rem;color:var(--clr-brand);font-family:var(--ff-title);font-weight:800;line-height:1.15}
.masthead h1 .city{color:var(--clr-pop)}
/* H2 = visual subtitle, slightly smaller than H1 */
.masthead h2,.masthead .masthead-h2{font-size:clamp(1.5rem,1.1rem + 1.1vw,1.95rem);margin-bottom:.6rem;color:var(--clr-brand);font-family:var(--ff-title);font-weight:700;line-height:1.2}
.masthead .masthead-h2 .city{color:var(--clr-pop)}
/* Brand label = eyebrow span above H1, NOT an h-tag */
.masthead-brand{display:block;font-size:clamp(1rem,.9rem + .3vw,1.15rem);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.6rem;color:var(--clr-brand);font-weight:700}
/* Legacy .masthead-h1 class on h1 — same as h1 (no longer needed but kept for compat) */
.masthead .masthead-h1{font-size:clamp(1.7rem,1.3rem + 1.8vw,2.8rem);margin-bottom:.6rem;color:var(--clr-brand);font-family:var(--ff-title);font-weight:800;line-height:1.15}
.masthead .masthead-h1 .city{color:var(--clr-pop)}
.masthead .sub{font-size:clamp(.95rem,.85rem + .4vw,1.2rem);color:var(--clr-ink-soft);margin-bottom:2rem}
.masthead-card{background:#fff;border-radius:8px;padding:.35rem 0;box-shadow:0 8px 32px -12px rgba(0,0,0,.12);max-width:100%;margin:0 auto}
.masthead-row{display:flex;align-items:center;gap:0}
.masthead-row input,.masthead-row button{border:none;font-family:var(--ff-text);font-size:.95rem;height:52px}
.masthead-row input:focus{outline:2px solid var(--clr-pop);outline-offset:-2px;border-radius:4px}
.masthead-row input{flex:1;min-width:0;padding:0 1rem;background:transparent;color:var(--clr-ink);border-right:1px solid var(--clr-line)}
.masthead-row input::placeholder{color:#8899A6}
.masthead-row input:last-of-type{border-right:none}
.masthead-row button{flex:0 0 auto;padding:0 2rem;border-radius:6px;background:var(--clr-brand);color:#fff;font-weight:700;font-size:1rem;cursor:pointer;white-space:nowrap;transition:background .15s}
.masthead-row button:hover{background:var(--clr-brand-dark,#091A2A)}
@media(max-width:760px){
  .masthead-card{border-radius:var(--rad-lg);padding:1.2rem}
  .masthead-row{flex-direction:column;gap:.6rem}
  .masthead-row input{width:100%;border-right:none;border-bottom:1px solid var(--clr-line);border-radius:var(--rad);height:48px;background:var(--clr-bg2)}
  .masthead-row input:last-of-type{border-bottom:none}
  .masthead-row button{width:100%;border-radius:var(--rad);height:52px}
}
.masthead .tcpa{font-size:.72rem;color:var(--clr-ink-soft);max-width:100%;margin:1.2rem auto 0;line-height:1.55;text-align:left}
.masthead .tcpa strong{font-weight:700}
.masthead-perks{display:flex;justify-content:center;gap:2.5rem;margin-top:2rem;flex-wrap:wrap}
.masthead-perks .perk{display:flex;align-items:center;gap:.5rem;font-size:.95rem;color:var(--clr-ink)}
.masthead-perks .perk .perk-dot{width:36px;height:36px;border-radius:50%;background:var(--clr-brand);color:#fff;display:grid;place-items:center;flex:0 0 auto;font-size:.85rem;font-weight:700}
.masthead-perks .perk strong{font-weight:700}
@media(max-width:600px){.masthead-perks{flex-direction:column;align-items:center;gap:1rem}}

/* =========================================================
   CONTENT BODY — TABLES, CALLOUTS, IMAGES, LISTS
   ========================================================= */

/* Tables */
.layout-split table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.92rem;line-height:1.5}
.layout-split thead{background:var(--clr-brand);color:#fff}
.layout-split th{padding:.7rem 1rem;text-align:left;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.02em}
.layout-split td{padding:.65rem 1rem;border-bottom:1px solid var(--clr-line)}
.layout-split tbody tr:nth-child(even){background:var(--clr-bg2)}
.layout-split tbody tr:hover{background:rgba(230,57,70,.06)}

/* Callout / info box */
.callout-box{background:var(--clr-bg2);border-left:4px solid var(--clr-pop);padding:1.1rem 1.4rem;margin:1.5rem 0;border-radius:0 var(--rad) var(--rad) 0}
.callout-box strong{color:var(--clr-brand)}
.callout-box p{margin:0}

/* Blockquote */
.layout-split blockquote{border-left:4px solid var(--clr-pop);background:var(--clr-bg2);padding:1rem 1.4rem;margin:1.5rem 0;border-radius:0 var(--rad) var(--rad) 0;font-style:italic;color:var(--clr-ink-soft)}

/* Ordered lists */
.layout-split ol{counter-reset:li;list-style:none;padding-left:0;margin:1.2rem 0}
.layout-split ol>li{counter-increment:li;padding:0 0 .6rem 2.2rem;position:relative;margin-bottom:.5rem}
.layout-split ol>li::before{content:counter(li);position:absolute;left:0;top:.05em;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--clr-brand);color:#fff;font-size:.8rem;font-weight:700;display:grid;place-items:center}

/* Inline content images */
.content-img{width:100%;border-radius:var(--rad-lg);margin:1.5rem 0;display:block}
.content-img-half{width:48%;border-radius:var(--rad);margin:.8rem 0;display:inline-block;vertical-align:top}
.img-row{display:flex;gap:4%;margin:1.5rem 0}
.img-row img{flex:1;border-radius:var(--rad);object-fit:cover;max-height:280px}

/* Responsive tables */
@media(max-width:600px){
  .layout-split table{font-size:.82rem}
  .layout-split th,.layout-split td{padding:.5rem .6rem}
  .img-row{flex-direction:column;gap:.8rem}
  .img-row img{max-height:200px;width:100%}
}

/* =========================================================
   RESPONSIVE BREAKPOINTS SUMMARY
   - 980px: layout-split single column, sidebar-pin static
   - 860px: hero grid + inner-banner grid single column
   - 900px: footer 2-col, nav hidden/hamburger, services/reviews 2-col
   - 768px: founder-section single column
   - 600px: everything 1-col, footer 1-col
   ========================================================= */

/* EXCEPTION: sidebar quote-form removed — content fills full width */
.layout-split.layout-full{grid-template-columns:1fr;gap:0}
.layout-split.layout-full > .main{max-width:none}