/* Aventura Movers — main stylesheet.
   Design-DNA tokens come from inline <style id="bc-tokens"> in <head>.
   This file is the layout + components layer. Ledger constraints baked in:
   - inputs font-size:16px (#15 iOS zoom)
   - object-fit:cover + aspect-ratio container on every image slot (#5)
   - hero overlay max .40 (well under .55 cap #6)
   - eager hero / lazy below-fold is applied at template level (#13)
*/

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#1A2332;overscroll-behavior-y:none}
body{
  margin:0; background:var(--c-bg); color:var(--c-text);
  font-family:var(--f-body); font-size:var(--fs-body); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--c-primary);text-underline-offset:2px}
a:hover{color:var(--c-primary-dk)}

h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;line-height:1.18;letter-spacing:-.005em;margin:0 0 .6em}
h1{font-size:var(--h1)} h2{font-size:var(--h2)} h3{font-size:var(--h3); font-weight:700}
p{margin:0 0 1em}

/* Visually-hidden skip link, revealed on focus */
.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(--c-primary);color:#fff;padding:.6rem 1rem;border-radius:var(--r);z-index:1000}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
/* 2-tier section padding: standard + compact. Consistent vertical rhythm. */
section{padding:4.5rem 0}
section.alt{background:var(--c-bg-alt)}
/* Hero padding — tighter to keep first content section in view on 1080p.
   Spacing critic R10: hero 850px pushes all content below fold. Target ~550-600px. */
section[data-sec="hero"]{padding:1.2rem 0 1rem}
section[data-sec="trust"]{padding:1.6rem 0}
/* Subtle top-border on the first section after hero so the cream→cream
   transition reads as two distinct zones, not one continuous block. */
section[data-sec="hero"] + section{border-top:1px solid var(--c-rule)}
section[data-sec="cta"]{padding:4.5rem 0}
/* Dark-band sections: match the site-wide 4.5rem rhythm (Spacing R13: 44.8px→72px) */
section.sec-dark{padding:4.5rem 0}
/* Adjacent same-tone sections: add a subtle divider so the cream→cream boundary is visible */
section.alt + section.alt, section:not(.alt) + section:not(.alt){border-top:1px solid rgba(26,35,50,0.06)}
/* First H2 in a section shouldn't double-pad (section pt + h2 mt) */
section > .container > h2:first-child, section > .container > .eyebrow + h2{margin-top:0}
/* Last section → footer transition: tighter */
main > section:last-child{padding-bottom:3rem}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-secondary);margin-bottom:.6rem}

/* ----- Buttons ----- */
.btn{
  display:inline-block;padding:.95em 1.5em;border-radius:8px;
  font-weight:600;font-size:1rem;letter-spacing:.02em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease, background-color .12s ease;
}
.btn-primary{background:var(--c-accent);color:#1A2332;font-weight:700}
.btn-primary:hover{background:var(--c-accent-dk);color:#1A2332;transform:translateY(-1px)}
.btn-accent{background:var(--c-accent);color:#1A2332;font-weight:700}
.btn-accent:hover{background:var(--c-accent-dk);color:#1A2332;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--c-text);border-color:var(--c-rule)}
.btn-ghost:hover{background:var(--c-bg-alt);color:var(--c-text);border-color:var(--c-text-mute)}

/* ----- Forms (ledger #15: 16px inputs, labels, autocomplete) ----- */
.bc-form label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.3rem;color:var(--c-text)}
.bc-form .row{display:grid;gap:.7rem;grid-template-columns:1fr 1fr;margin-bottom:.7rem}
.bc-form .row:last-of-type{margin-bottom:0}
.bc-form .row.one{grid-template-columns:1fr}
@media (max-width:640px){.bc-form .row{grid-template-columns:1fr}}
.bc-form input, .bc-form select, .bc-form textarea{
  width:100%; font-size:16px; line-height:1.3; padding:.55em .75em;
  border:1px solid var(--c-rule); border-radius:var(--r); background:#fff;
  font-family:inherit; color:var(--c-text);
}
.bc-form input:focus, .bc-form select:focus, .bc-form textarea:focus{
  outline:2px solid var(--c-accent); outline-offset:1px; border-color:var(--c-accent-dk);
}
.bc-form .sr-only{position:absolute!important;clip:rect(0 0 0 0);width:1px;height:1px;overflow:hidden}
.bc-form .submit-row{margin-top:1rem}
.bc-form .submit-row button{width:100%;padding:.95em 1.6em;background:var(--c-accent);color:#1A2332;border-color:var(--c-accent)}
.bc-form .submit-row button:hover{background:var(--c-accent-dk);color:#1A2332;transform:translateY(-1px)}
.bc-form .reassure{font-size:.82rem;color:var(--c-text-mute);margin-top:.55rem}

/* ----- Header ----- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--c-rule);transition:box-shadow .2s ease}
.site-header.scrolled{box-shadow:0 2px 16px -4px rgba(26,35,50,.18)}
/* Header inner: vertical padding only here; horizontal comes from .container's --pad.
   iter-5 bug: `padding:.85rem 0` was zeroing OUT container's horizontal padding (more
   specific selector wins) → logo/CTA touched viewport edges on narrow widths. */
.site-header .inner{display:flex;align-items:center;justify-content:space-between;padding-block:.85rem;padding-inline:var(--pad);gap:1rem}
/* Brand-mark layout — logo SVG + 2-line text. Logo + text-stack are flex-row siblings;
   text is column-stacked. Larger l1 (brand name) + smaller l2 (city) with breathing room
   between lines fixes the "Bradley County Movers Match · Cleveland TN" cluttered text
   that user flagged as overlapping. */
.brand-mark{display:flex;align-items:center;gap:.7rem;line-height:1;color:var(--c-text);text-decoration:none;flex-shrink:0}
.brand-mark .brand-logo{flex:0 0 auto;height:85px;width:auto;display:block}
.brand-mark .brand-text{display:flex;flex-direction:column;gap:.2rem;letter-spacing:.02em}
.brand-mark .l1{font-family:var(--f-head);font-weight:700;font-size:1.05rem;color:var(--c-primary);line-height:1.15}
.brand-mark .l2{font-family:var(--f-body);font-weight:600;font-size:.74rem;color:var(--c-text-mute);text-transform:uppercase;letter-spacing:.08em}
@media (max-width:640px){.brand-mark .brand-logo{height:52px;width:auto}}
/* Mobile header adapt (≤760px): hide brand-name text + hide Free-quote button.
   On narrow widths the full header (logo + brand-text + phone + Free-quote + burger)
   overflowed/squeezed. User direction iter-5: keep logo + phone-link + burger only;
   brand identity carried by the logo, primary action is the phone tap (real conversion). */
@media (max-width:760px){
  .brand-mark .brand-text{display:none}
  .header-cta .btn-ghost{display:none}
  .header-cta .btn-accent{display:none}
}
.primary-nav > ul, .primary-nav .menu{display:flex;gap:1.35rem;margin:0;padding:0;list-style:none;font-weight:500}
.primary-nav a{color:var(--c-text);text-decoration:none}
.primary-nav a:hover, .primary-nav .current-menu-item > a{color:var(--c-primary)}
/* Dropdown submenu (depth=2) — appears on hover/focus of parent li with .menu-item-has-children.
   PM critic iter-5: flat nav forced users to land on /services/ /service-areas/ /routes/ index
   before drilling to specific pages. Mega-dropdown lets them jump direct in 1 click. */
.primary-nav .menu-item-has-children{position:relative}
.primary-nav .menu-item-has-children > a::after{content:" ▾";font-size:.7em;color:var(--c-text-mute);margin-left:.15em}
.primary-nav .sub-menu{display:none;position:absolute;top:100%;left:-1rem;min-width:200px;background:var(--c-bg);border:1px solid var(--c-rule);border-radius:var(--r);padding:.5rem 0;margin:0;list-style:none;box-shadow:0 8px 24px -8px rgba(26,35,50,.15);z-index:50;flex-direction:column;gap:0}
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu{display:flex}
.primary-nav .sub-menu li{margin:0}
.primary-nav .sub-menu a{display:block;padding:.55rem 1.1rem;font-size:.94rem;color:var(--c-text);white-space:nowrap}
.primary-nav .sub-menu a:hover{background:var(--c-bg-alt);color:var(--c-primary)}
/* Mobile drawer: submenu inline under parent, indented */
@media (max-width:900px){
  .primary-nav .sub-menu{display:flex !important;position:static;border:0;box-shadow:none;background:transparent;padding:.2rem 0 .2rem 1rem;min-width:0}
  .primary-nav .menu-item-has-children > a::after{display:none}
  .primary-nav .sub-menu a{padding:.35rem 0;font-size:.9rem;color:var(--c-text-mute)}
}
.header-cta{display:flex;gap:.6rem;align-items:center}
.header-phone{font-weight:700;color:var(--c-primary);text-decoration:none;white-space:nowrap}
.nav-toggle{display:none;background:none;border:0;font-size:1.5rem;color:var(--c-text);padding:.35rem .55rem;cursor:pointer}
@media (max-width:900px){
  .primary-nav{display:none}
  .nav-toggle{display:inline-block}
  .primary-nav.open{display:block;position:absolute;top:100%;right:0;background:var(--c-bg);border:1px solid var(--c-rule);border-top:0;padding:1rem;min-width:240px}
  .primary-nav.open ul{flex-direction:column;gap:.85rem}
}

/* ----- Hero (split photo/form — ledger HARD rule first-screen form) ----- */
.hero{position:relative;background:var(--c-bg)}
.hero .grid{
  display:grid;gap:1.5rem;align-items:start;
  grid-template-columns: 1.05fr .95fr;
  padding:0;
}
.hero .copy, .hero > .container > .grid > div{padding-top:.2rem}
/* R13 Spacing: center left column so 190px void distributes evenly top+bottom */
.hero .copy{align-self:center}
@media (max-width:900px){.hero .grid{grid-template-columns:1fr}}
/* Hero mobile: a touch more padding-inline-start so H1/eyebrow don't crowd the
   left edge on phones (user iter-5: "в hero сделай отступ на мобильном чуток слева"). */
@media (max-width:640px){.hero > .container{padding-inline-start:1.6rem}}
.hero h1{margin-top:0}
/* Hero trust checkmarks — horizontal row below CTA buttons (ref design) */
.hero-trust{list-style:none;padding:0;margin:.8rem 0 0;display:flex;flex-wrap:wrap;gap:.2rem 1rem}
.hero-trust li{font-size:.88rem;color:var(--c-text-mute);display:flex;align-items:center;gap:.35rem}
.hero-trust li::before{content:"\2713";color:var(--c-success);font-weight:700;font-size:.85rem}
.hero-rated{display:flex;align-items:center;gap:.5rem;margin-top:.6rem}
.hr-stars{color:var(--c-accent);font-size:1rem;letter-spacing:.08em}
.hr-label{font-size:.82rem;color:var(--c-text-mute)}
.hero-logos{margin-top:.8rem}
.hl-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--c-text-mute);display:block;margin-bottom:.6rem;text-align:center}
.hl-row{display:flex;align-items:center;gap:2.5rem;flex-wrap:wrap;justify-content:center}
.hl-logo{display:inline-flex;align-items:center;opacity:.7}
.hl-row img{width:auto;display:block}
.hero .hook{font-size:1.1rem;color:var(--c-text-mute);max-width:46ch}
.hero .photo{
  position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-lg);
  background:#1A2332;
}
.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,.4) 100%);
}
/* Home hero form-card sticky on desktop — keeps the primary conversion CTA in viewport
   while user scrolls the long home page. Mobile: position:static (form already at top
   on collapsed single-col layout). iter-5 PM critic: "sticky form fails on home —
   position:static, scrolls away with hero". */
@media (min-width:980px){.hero > .container > .grid > div:has(> .form-card){align-self:start}.hero .form-card{position:sticky;top:1.2rem}}
.hero .form-card{
  background:#fff;border:1px solid var(--c-rule);border-radius:var(--r-lg);
  padding:1rem 1.2rem;
  box-shadow:0 12px 30px -18px rgba(26,35,50,.25);
}
.hero .form-card h2{font-size:1.25rem;margin-bottom:.35rem}
.hero .form-card .reassure-row{display:flex;gap:1rem;font-size:.82rem;color:var(--c-text-mute);margin-top:.65rem}

/* ----- Trust strip ----- */
.trust-strip{background:var(--c-bg-alt);padding:2.5rem 0;border-block:1px solid var(--c-rule)}
.trust-strip .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2rem 3rem}
.trust-strip .heading{
  font-family:var(--f-body);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-text-mute);margin-bottom:1.25rem;text-align:center;
}
.trust-strip a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;height:28px}
/* width:100px (fixed, not max-width) + object-fit:contain → every logo occupies
   the same 100×22 slot regardless of its natural aspect. With max-width:100px
   alone, wide logos (Nextdoor ~180px → capped at 100px) looked dominant while
   narrow logos (Thumbtack ~40px → stayed 40px) looked invisible by comparison.
   Now they all anchor to the same box with internal whitespace as needed.
   Iter-5 Designer flag: "Nextdoor dominates, Thumbtack is tiny." */
/* Round 2 Designer: opacity .55 + grayscale 100% read as "broken/faded assets",
   not "vetted-by". Bumped to .85 opacity + partial grayscale (.4) — logos still
   read as background context (not dominating) but no longer look broken. */
.trust-strip img{height:22px;width:100px;max-height:22px;object-fit:contain;opacity:.85;filter:grayscale(40%) brightness(.9);transition:opacity .15s, filter .15s}
.trust-strip a:hover img,.trust-strip img:hover{opacity:.95;filter:grayscale(0%) brightness(1)}

/* ----- Services grid (also used for facts / svc-mix / what's-included) ----- */
.services-grid{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center;align-items:stretch}
.services-grid > *{flex:1 1 260px;max-width:calc(33.333% - 0.733rem);min-width:240px}
@media (max-width:780px){.services-grid > *{max-width:calc(50% - 0.55rem)}}
@media (max-width:560px){.services-grid > *{max-width:100%}}
.svc-card{
  background:#fff;border:1px solid var(--c-rule);border-radius:var(--r);
  padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;
  text-decoration:none;color:var(--c-text);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.svc-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px -14px rgba(26,35,50,.2);border-color:var(--c-primary)}
.svc-card .ic{
  width:46px;height:46px;display:grid;place-items:center;
  background:var(--c-bg-alt);border-radius:var(--r);color:var(--c-primary);
  flex:0 0 auto;
}
.svc-card .ic svg{width:24px;height:24px;display:block}
.svc-card h3{margin:.4rem 0 .5rem;font-size:1.35rem;font-weight:700;line-height:1.25;color:var(--c-text)}
.svc-card p{margin:0;color:var(--c-text-mute);font-size:1rem;line-height:1.5}
.svc-card .more{margin-top:auto;color:var(--c-primary);font-weight:600;text-decoration:none;font-size:.95rem}
.svc-card:hover .more{text-decoration:underline;text-underline-offset:3px}

/* ----- Owner block ----- */
.owner-block{display:grid;gap:2.5rem;grid-template-columns:.65fr 1fr;align-items:center;padding:1.25rem 0;min-width:0}
.owner-block > *{min-width:0;max-width:100%}
@media (max-width:780px){.owner-block{grid-template-columns:1fr}}
.owner-block .ph{aspect-ratio:4/5;overflow:hidden;border-radius:12px;border:1px solid var(--c-rule);box-shadow:0 1px 2px rgba(26,35,50,.04),0 16px 36px -22px rgba(26,35,50,.2)}
.owner-block .ph img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.owner-block blockquote{margin:0 0 .8rem;font-family:var(--f-head);font-size:1.35rem;line-height:1.4;color:var(--c-text);border-left:3px solid var(--c-secondary);padding-left:1.1rem;font-style:italic;overflow-wrap:break-word;hyphens:auto}
.owner-block blockquote, .owner-block p{max-width:60ch}

/* ----- Process steps ----- */
/* Steps: flexbox centers orphans on last row (vs grid which left-aligns them) */
.steps{display:flex;flex-wrap:wrap;gap:1.5rem;counter-reset:s;margin-top:2.5rem;justify-content:center}
.step{flex:1 1 calc(33.333% - 1rem);max-width:calc(33.333% - 1rem);min-width:280px}
@media (max-width:780px){.step{flex:1 1 100%;max-width:100%;min-width:0}}
.step{padding:4.2rem 1.7rem 1.7rem;background:#fff;border:1px solid var(--c-rule);border-radius:var(--r);position:relative;box-shadow:0 1px 2px rgba(26,35,50,.04),0 8px 24px -16px rgba(26,35,50,.08)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:1.2rem;left:1.7rem;background:var(--c-accent);color:#1A2332;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;font-weight:700;font-size:1.05rem}
.step h3{font-size:1.2rem;margin:0 0 .5rem}
.step p{margin:0;color:var(--c-text-mute);font-size:1rem;line-height:1.55}

/* ----- Reviews ----- */
.reviews-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.review-card{background:#fff;border:1px solid var(--c-rule);border-radius:var(--r);padding:1.25rem;display:flex;flex-direction:column;gap:.55rem}
.review-card .who{display:flex;gap:.7rem;align-items:center}
.review-card .av{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--c-bg-alt)}
.review-card .av img{width:100%;height:100%;object-fit:cover}
.review-card .meta{display:flex;flex-direction:column;line-height:1.25}
.review-card .meta .nm{font-weight:600}
.review-card .meta .sub{font-size:.82rem;color:var(--c-text-mute)}
.review-card .stars{color:var(--c-accent);letter-spacing:.06em}
/* Clamp review text to ~6 lines so cards in a 3-col grid stay balanced.
   Prevents one long 15-line review from dwarfing two short neighbors. */
.review-card .body{color:var(--c-text);flex:1;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.review-card .src{font-size:.78rem;color:var(--c-text-mute);text-transform:uppercase;letter-spacing:.08em;margin-top:auto}
/* Equal-height review cards in 3-col grid — prevents short reviews from creating whitespace mismatch */
.reviews-grid{align-items:stretch}
/* R13 Spacing+Designer: equalize card height so short reviews don't leave internal void */
.review-card{min-height:320px}
.rev-grid{align-items:stretch}

/* ----- Service Areas Strip ----- */
section[data-sec="areas"] h2{max-width:680px;margin-left:auto;margin-right:auto}
.areas-strip{display:flex;flex-wrap:wrap;gap:.5rem .7rem;justify-content:center}
.areas-strip a{display:inline-block;padding:.55rem .9rem;background:#fff;border:1px solid var(--c-rule);border-radius:8px;text-decoration:none;color:var(--c-text);font-weight:500;font-size:.95rem;transition:border-color .12s, background-color .12s, color .12s}
.areas-strip a:hover{border-color:var(--c-primary);color:var(--c-primary);background:var(--c-bg-alt)}

/* ----- CTA band ----- */
.cta-band{background:var(--c-primary-dk);color:#F8F5F0}
.cta-band .inner{display:grid;gap:1.5rem;grid-template-columns:1fr auto;align-items:center}
@media (max-width:780px){.cta-band .inner{grid-template-columns:1fr;text-align:center}}
.cta-band h2{color:#fff;margin:0}
.cta-band p{color:rgba(248,245,240,.88);margin:.3rem 0 0}

/* ----- FAQ ----- */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media (max-width:780px){.faq-grid{grid-template-columns:1fr}}
.faq-col details{background:#fff;border:1px solid var(--c-rule);border-radius:var(--r);padding:1rem 1.1rem;margin-bottom:.6rem}
.faq-col summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq-col summary::-webkit-details-marker{display:none}
.faq-col summary::after{content:"+";font-size:1.4rem;color:var(--c-primary);line-height:1}
.faq-col details[open] summary::after{content:"−"}
.faq-col details > div{padding-top:.65rem;color:var(--c-text-mute);font-size:.95rem;line-height:1.55}

/* ----- Footer ----- */
.site-footer{background:#1A2332;color:#B8C4D0;padding-block:3rem 1.5rem;margin-top:0}
.site-footer a{color:#F8F5F0;text-decoration:none}
.site-footer a:hover{text-decoration:underline;text-underline-offset:3px}
.site-footer .grid{display:grid;gap:2.5rem;grid-template-columns:1.3fr 1fr 1fr 1fr}
@media (max-width:900px){.site-footer .grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.site-footer .grid{grid-template-columns:1fr}}
.site-footer h4{color:#F8F5F0;font-family:var(--f-head);font-size:1.05rem;margin:0 0 .65rem}
.site-footer ul{margin:0;padding:0;list-style:none;display:grid;gap:.4rem}
.site-footer .creds{font-size:.85rem;line-height:1.55;color:#9C8E7B}
.site-footer .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 #3a322a;font-size:.82rem;color:#9C8E7B;text-align:center}
.site-footer .bottom > *{flex:0 1 auto}

/* ----- Generic page intro hero (non-home) ----- */
.page-hero{background:var(--c-bg-alt);padding:clamp(2rem,4vw,3rem) 0 0;border-bottom:1px solid var(--c-rule)}
/* align-items:start so the LEFT column (H1+intro, short) starts at top of row
   instead of being pulled to the BOTTOM by the much-taller RIGHT column (form
   with 6-8 inputs, ~620px). With align-items:end the page-hero rendered a
   500px cream void ABOVE the H1 on /about/, /reviews/, /faq/, /contact/, /quote/.
   See references/css-rules.md "Page-hero grid". */
.page-hero .grid{display:grid;gap:2rem;grid-template-columns:1.1fr .9fr;align-items:start;padding-bottom:clamp(1.5rem,3vw,2.5rem)}
@media (max-width:900px){.page-hero .grid{grid-template-columns:1fr}}
/* H1 cap — Round 2 Designer measured 5-line wraps still on /services/apartment/, suburb,
   route pages. Tightened max-width 18ch → 14ch + clamp pegged to smaller range. Applies
   to both `.page-hero h1` (about/faq/contact/quote/reviews/carriers) AND `.hero h1`
   (home/services/suburb/route) — both templates had long-title overflow. */
.page-hero h1,.hero h1{margin-bottom:.45rem;max-width:14ch;font-size:clamp(1.9rem,1.2rem + 1.7vw,2.5rem);line-height:1.15}
@media (max-width:640px){.page-hero h1,.hero h1{max-width:16ch}}
.page-hero .breadcrumb{font-size:.82rem;color:var(--c-text-mute);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.08em}

/* ----- Benefits grid (home #benefits section, 4×2 → 2×4 → 1col responsive) ----- */
.benefits-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
@media (max-width:980px){.benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}}
@media (max-width:520px){.benefits-grid{grid-template-columns:1fr;gap:1rem}}
.benefit-card{display:flex;flex-direction:column;gap:.55rem}
.benefit-card .benefit-ic{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:var(--c-primary);background:#fff;border:1px solid var(--c-rule);border-radius:50%;flex:0 0 auto}
.benefit-card .benefit-ic svg{width:22px;height:22px}
.benefit-card h3{font-family:var(--f-head);font-size:1.05rem;font-weight:600;margin:0;color:var(--c-text);line-height:1.25}
.benefit-card p{font-size:.92rem;color:var(--c-text-mute);line-height:1.5;margin:0}

/* ----- Recent-work gallery (home #recent-work section) ----- */
.work-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
@media (max-width:980px){.work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.work-grid{grid-template-columns:1fr}}
.work-card{margin:0;display:flex;flex-direction:column;gap:.45rem}
.work-card .work-photo{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);background:var(--c-bg-alt)}
/* Unified photo treatment — iter-5 Designer flagged: home mixed B&W silhouettes,
   colour stock, sepia portraits side-by-side. Apply consistent warm-desaturated
   filter to ALL people/work photos so they read as one visual voice. */
.work-card .work-photo img,
.review-card .av img,
.team-grid img,
.owner-block img,
.hero-owner-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s ease, filter .25s ease;
  filter:saturate(.85) sepia(.08) brightness(.96) contrast(1.03);
}
.work-card:hover .work-photo img{filter:saturate(.95) sepia(.05) brightness(1) contrast(1.05);transform:scale(1.04)}
.work-card figcaption{font-size:.85rem;color:var(--c-text-mute);line-height:1.4;padding:0 .15rem}

/* ----- Aspect helpers ----- */
.aspect-16-9{aspect-ratio:16/9;overflow:hidden;border-radius:var(--r)}
.aspect-4-5{aspect-ratio:4/5;overflow:hidden;border-radius:var(--r)}
.aspect-3-2{aspect-ratio:3/2;overflow:hidden;border-radius:var(--r)}
.aspect-1-1{aspect-ratio:1/1;overflow:hidden;border-radius:var(--r)}
.aspect-16-10{aspect-ratio:16/10;overflow:hidden;border-radius:var(--r)}
.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}

/* ----- Generic content layout ----- */
.content-wrap{display:grid;gap:2.5rem;grid-template-columns:1fr 320px;align-items:start}
.content-wrap > .main{min-width:0}
.content-wrap > aside{align-self:start}
/* Desktop: aside stretches full grid height so .aside-sticky has proper
   sticky scroll range. Visual styling (bg/border) lives on .aside-sticky,
   not the aside container — prevents a tall empty card appearance. */
@media (min-width:981px){
  .content-wrap > aside{align-self:stretch;background:transparent;border:none;padding:0;box-shadow:none;border-radius:0}
  .content-wrap > aside .aside-sticky{background:#F5F8FC;border:1px solid var(--c-rule);border-radius:var(--r);padding:1.4rem;box-shadow:0 1px 2px rgba(26,35,50,.04),0 4px 14px -10px rgba(26,35,50,.12)}
}
/* Aside-form compact variant — visually differentiates the sticky sidebar form
   from the hero form. Designer-critic #1 flagged "Two stacked nearly identical
   lead forms... reads as a templating tell." Same fields submit-wise (CRM payload
   unchanged), just compacter typography + secondary button color so the eye reads
   them as DIFFERENT conversion paths, not duplicates. */
.aside-quote .bc-form{font-size:.92rem}
.aside-quote .bc-form label{font-size:.8rem;margin-bottom:.2rem}
.aside-quote .bc-form input,.aside-quote .bc-form select{font-size:.95rem;padding:.5rem .65rem}
.aside-quote .bc-form .row{gap:.55rem;margin-bottom:.55rem}
.aside-quote .bc-form button[type="submit"]{
  background:var(--c-accent);  /* consistent orange CTA across all forms */
  font-size:1rem;
  padding:.95em 1.5em;
  margin-top:.4rem;
}
.aside-quote .bc-form button[type="submit"]:hover{background:var(--c-accent-dk)}
.aside-quote .tcpa-text,.aside-quote .form-reassure{font-size:.76rem}
/* aside-sticky — wrapper around the form-section inside aside-quote that follows
   scroll. Applied ONLY to the form-card area, NOT the whole aside (whole-aside
   sticky breaks when aside > viewport, the Round-5 dead-zone bug). z-index lifts
   form above call/ticker siblings during scroll-collision so the form visually
   covers them; same aside-bg color prevents harsh edges. Disabled on mobile
   (single column = no benefit, would just stick at top of stack). */
.content-wrap > aside .aside-sticky{position:sticky;top:1.2rem;z-index:2;background:#F5F8FC}
@media (max-width:980px){.content-wrap > aside .aside-sticky{position:static}}
@media (max-width:980px){.content-wrap{grid-template-columns:1fr}}
.content-wrap .main p{margin-bottom:1em}
.content-wrap .main h2{margin-top:1.6em}
.content-wrap .main h3{margin-top:1.4em}
/* Aside scrolls naturally — sticky caused 1600+px dead zones on long content pages */
.aside-quote{background:#F5F8FC;border:1px solid var(--c-rule);border-radius:var(--r);padding:1.4rem;box-shadow:0 1px 2px rgba(26,35,50,.04),0 4px 14px -10px rgba(26,35,50,.12)}
.aside-quote h3{margin-top:0}

/* ----- Utility ----- */
.text-center{text-align:center}
.mt-2{margin-top:2rem}
.mb-2{margin-bottom:2rem}
.muted{color:var(--c-text-mute)}

/* ===== STATS COUNTER (home) ===== */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat-item{padding:2rem 1.5rem;text-align:left}
.stat-item + .stat-item{border-left:1px solid var(--c-rule)}
.stat-num{display:block;font-family:var(--f-head);font-size:3.2rem;font-weight:800;line-height:1.1;color:var(--c-text);letter-spacing:-.02em}
.stat-label{display:block;font-size:.95rem;color:var(--c-text-mute);margin-top:.35rem}
@media (max-width:768px){.stats-row{grid-template-columns:1fr 1fr}.stat-item:nth-child(3){border-left:none}.stat-item:nth-child(n+3){border-top:1px solid var(--c-rule)}}
@media (max-width:480px){.stats-row{grid-template-columns:1fr 1fr}.stat-num{font-size:2.2rem}.stat-item{padding:1.2rem 1rem}}

/* ===== HERO PERKS (calculator page) ===== */
.hero-perks{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.hero-perks li{display:flex;align-items:flex-start;gap:.55rem;font-size:.95rem;line-height:1.45;color:var(--c-text)}
.hero-perks li svg{flex:0 0 20px;width:20px;height:20px;color:var(--c-accent);margin-top:1px}

/* ===== MOVING CALCULATOR ===== */
.calc-layout{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
@media (max-width:768px){.calc-layout{grid-template-columns:1fr}}
.calc-box{background:#fff;border:1px solid var(--c-rule);border-radius:var(--r-lg);padding:2rem}
.calc-field{margin-bottom:1.2rem}
.calc-field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.4rem;color:var(--c-text)}
.calc-field select{width:100%;font-size:16px;padding:.55em .75em;border:1px solid var(--c-rule);border-radius:var(--r);background:#fff;font-family:inherit;color:var(--c-text)}
.calc-range-row{display:flex;align-items:center;gap:1rem}
.calc-range-row input[type="range"]{flex:1;accent-color:var(--c-accent)}
.calc-range-val{font-weight:700;font-size:.95rem;min-width:5ch;color:var(--c-primary)}
.calc-checks{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
@media (max-width:480px){.calc-checks{grid-template-columns:1fr}}
.calc-check{display:flex;align-items:center;gap:.45rem;font-size:.9rem;cursor:pointer}
.calc-check input{accent-color:var(--c-accent);width:18px;height:18px}
.calc-result{background:var(--c-bg-alt);border-radius:var(--r);padding:1.2rem 1.5rem;text-align:center;margin-top:1.2rem}
.calc-result-label{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--c-text-mute);margin-bottom:.3rem}
.calc-result-price{font-family:var(--f-head);font-size:2.2rem;font-weight:800;color:var(--c-primary);line-height:1.2}
.calc-result-note{font-size:.8rem;color:var(--c-text-mute);margin-top:.5rem;line-height:1.4}
.calc-info h3{font-size:1.05rem;margin:1.5rem 0 .5rem}
.calc-info h3:first-child{margin-top:0}
.calc-info ul{padding-left:1.2em;margin:0 0 1em}
.calc-info li{margin-bottom:.4rem;font-size:.95rem;line-height:1.5}
.calc-info p{font-size:.95rem;line-height:1.55;color:var(--c-text-mute)}

/* ===== HOME SERVICES GRID (3-col, prominent icon area) ===== */
.svc-grid-home{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media (max-width:900px){.svc-grid-home{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.svc-grid-home{grid-template-columns:1fr}}
.svc-card-home{background:#fff;border:1px solid var(--c-rule);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:var(--c-text);transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;display:flex;flex-direction:column}
.svc-card-home:hover{transform:translateY(-2px);box-shadow:0 8px 24px -10px rgba(26,35,50,.15);border-color:var(--c-primary)}
.sch-icon{padding:1.5rem 0;background:var(--c-bg-alt);display:grid;place-items:center}
.sch-icon svg{width:48px;height:48px;color:var(--c-primary)}
.sch-body{padding:1rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.sch-body h3{font-size:1.15rem;margin:0;color:var(--c-text)}
.sch-body p{font-size:.92rem;color:var(--c-text-mute);margin:0;line-height:1.5}
.sch-price{font-size:.82rem;color:var(--c-text-mute);margin-top:auto;padding-top:.5rem}
.sch-link{font-size:.9rem;font-weight:600;color:var(--c-primary)}
.svc-card-home:hover .sch-link{text-decoration:underline;text-underline-offset:3px}

/* ===== OPEN SLOTS (dark calendar) ===== */
.slots-row{display:grid;grid-template-columns:repeat(7,1fr);gap:.75rem}
@media (max-width:640px){.slots-row{grid-template-columns:repeat(4,1fr)}}
@media (max-width:400px){.slots-row{grid-template-columns:repeat(3,1fr)}}
.slot{text-align:center;padding:1rem .5rem;border-radius:var(--r);background:rgba(255,255,255,.06);transition:background .15s}
.slot .slot-lbl{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:rgba(240,244,248,.45);margin-bottom:.4rem}
.slot .slot-num{display:block;font-family:var(--f-head);font-size:1.8rem;font-weight:700;color:#F0F4F8;line-height:1.2}
.slot.today{background:var(--c-accent);border-radius:var(--r)}
.slot.today .slot-lbl,.slot.today .slot-num{color:#1A2332}
.slot.past{opacity:.4}
.slot-dots{display:flex;gap:4px;justify-content:center;margin-top:.55rem}
.dot{width:8px;height:8px;border-radius:50%}
.dot.avail{background:var(--c-success)}
.dot.filled{background:rgba(240,244,248,.18)}
.slot.today .dot.avail{background:#1A2332}
.slot.today .dot.filled{background:rgba(26,35,50,.18)}

/* ===== STEPS HOME (icon-first cards) ===== */
.steps-home{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media (max-width:780px){.steps-home{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}}
.step-home{background:#fff;border:1px solid var(--c-rule);border-radius:var(--r-lg);overflow:hidden;text-align:left}
.step-icon-area{padding:1.5rem 0;background:var(--c-bg-alt);display:grid;place-items:center}
.step-icon-area svg{width:48px;height:48px;color:var(--c-primary)}
.step-n{display:inline-block;font-size:.78rem;font-weight:600;color:var(--c-text-mute);letter-spacing:.06em;padding:1rem 1.2rem .3rem}
.step-home h3{font-size:1.15rem;margin:0 0 .4rem;padding:0 1.2rem}
.step-home p{font-size:.92rem;color:var(--c-text-mute);margin:0;padding:0 1.2rem 1.2rem;line-height:1.5}

/* ===== REVIEWS HEADER + HOME GRID ===== */
.rev-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem}
.rev-head h2{margin-bottom:0}
.rev-score{display:flex;align-items:center;gap:1rem}
.rev-big{font-family:var(--f-head);font-size:2.2rem;font-weight:700;color:var(--c-text)}
@media (max-width:640px){.rev-head{flex-direction:column;align-items:flex-start} .rev-score{align-self:flex-start}}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:780px){.rev-grid{grid-template-columns:1fr}}

/* ===== USP LAYOUT (title left, grid right) ===== */
.usp-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:start}
@media (max-width:780px){.usp-layout{grid-template-columns:1fr;gap:2rem}}
.usp-text h2{max-width:14ch}
.usp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;grid-auto-rows:1fr}
@media (max-width:520px){.usp-grid{grid-template-columns:1fr;grid-auto-rows:auto}}
.usp-item{display:flex;gap:.85rem;align-items:flex-start}
.usp-ic{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;background:var(--c-bg-alt);border:1px solid var(--c-rule);border-radius:50%;color:var(--c-primary)}
.usp-ic svg{width:20px;height:20px}
.usp-item h3{font-size:.95rem;font-weight:600;margin:0 0 .2rem;line-height:1.25}
.usp-item p{font-size:.88rem;color:var(--c-text-mute);margin:0;line-height:1.45}

/* ===== FEATURED REVIEW (dark section) ===== */
/* Spacing critic R10: 550px dark slab feels oversized for one quote. Tighten padding. */
section[data-sec="featured-review"]{padding:clamp(2rem,3vw,2.8rem) 0}
.ft-quote{margin:0 auto;max-width:620px}
.ft-quote p{font-family:var(--f-head);font-size:clamp(1.15rem,1rem + .8vw,1.5rem);line-height:1.55;color:#F0F4F8;font-style:italic;margin:0}
.ft-who{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:1rem}
.ft-av{width:52px;height:52px;border-radius:50%;overflow:hidden;border:2px solid rgba(240,244,248,.2)}
.ft-av img{width:100%;height:100%;object-fit:cover}
.ft-name{font-weight:600;color:#F0F4F8;font-size:1rem}

/* ===== URGENCY BADGE ===== */
.urgency-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;color:var(--c-success);margin-bottom:.5rem}
.urgency-badge .pulse{width:8px;height:8px;border-radius:50%;background:var(--c-success);animation:pulse-glow 2s ease-in-out infinite}
@keyframes pulse-glow{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}

/* ===== CITIES GRID ===== */
.cities-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
@media (max-width:640px){.cities-grid{grid-template-columns:1fr}}
.city-tag{display:flex;align-items:center;gap:.5rem;padding:.6rem .9rem;background:#fff;border:1px solid var(--c-rule);border-radius:8px;text-decoration:none;color:var(--c-text);font-weight:500;font-size:.92rem;transition:border-color .12s,color .12s}
.city-tag:hover{border-color:var(--c-primary);color:var(--c-primary)}
.city-tag svg{flex:0 0 auto;color:var(--c-text-mute)}

/* ===== READY CTA (dark section with form) ===== */
.ready-layout{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
@media (max-width:780px){.ready-layout{grid-template-columns:1fr;gap:2rem}}
.ready-contact{display:flex;flex-direction:column;gap:.3rem;margin-top:1.5rem}
.ready-phone{display:inline-flex;align-items:center;gap:.4rem;color:#F0F4F8;font-weight:700;text-decoration:none;font-size:1.05rem}
.ready-phone:hover{color:var(--c-accent)}
.ready-form .form-card{color:var(--c-text)}

/* ===== STICKY MOBILE CTA BAR ===== */
.sticky-cta{position:fixed;bottom:0;left:0;right:0;display:flex;gap:.5rem;padding:.6rem .8rem;background:var(--c-primary);z-index:900;transform:translateY(100%);transition:transform .25s ease;box-shadow:0 -2px 12px rgba(0,0,0,.18)}
.sticky-cta.visible{transform:translateY(0)}
.sticky-cta-phone{display:flex;align-items:center;justify-content:center;gap:.4rem;flex:0 0 auto;padding:.55rem 1rem;background:rgba(255,255,255,.15);color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;border-radius:var(--r);border:1px solid rgba(255,255,255,.3)}
.sticky-cta-btn{flex:1;text-align:center;padding:.55rem 1rem;background:var(--c-accent);color:#fff;text-decoration:none;font-weight:700;font-size:.9rem;border-radius:var(--r)}
@media (min-width:781px){.sticky-cta{display:none}}

/* ===== FORM TRUST BADGE ===== */
.form-trust-row{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--c-text-mute);margin-top:.4rem}
.form-trust-row .stars-sm{color:var(--c-accent);letter-spacing:1px}
