/* Big Heart Moving HTX — main.css
   DEEP TEAL + BURNT-ORANGE reskin for Fast Affordable College Student Movers.
   Typography: Archivo (single family). Headings UPPERCASE 900. Pill buttons.

   NOTE ON TOKENS: design-dna.php injects <style id="fw-palette"> BEFORE this file.
   This file loads AFTER it, so the :root override below WINS the cascade and
   remaps the legacy navy tokens to the new palette. That means every inline
   style in the PHP (e.g. background:var(--clr-brand) on the "tradition" band,
   var(--clr-pop) accents, var(--ff-title) headings) picks up the new look with
   NO PHP edits. Selector names + layout/grid structure are preserved verbatim.

   New palette:
     teal     #0F5C56  (primary / dark bands / buttons)   hover #0A413D
     coral    #B84A1E  (accent / stars / icons / links)   hover #8F3813
     white    #FFFFFF
     grey     #EDF5F4  (alt sections, input bg)
     muted    #5C7873
     line     #D3E3E1
*/

/* =========================================================
   TOKEN REMAP — overrides #fw-palette (loaded earlier).
   Legacy names kept so inline var() refs in PHP still resolve.
   ========================================================= */
:root{
  /* brand now = DEEP TEAL (the dark band). All var(--clr-brand) backgrounds go teal. */
  --clr-brand:#0F5C56;      --clr-brand-dk:#0A413D;
  --clr-brand-dark:#0A413D; /* legacy alias used in one masthead hover */
  --clr-mid:#17766E;        /* dark-on-dark surface (was navy mid) */

  /* pop now = BURNT ORANGE / CORAL (every accent / star / icon / link-accent). */
  --clr-pop:#B84A1E;        --clr-pop-dk:#8F3813;

  /* surfaces */
  --clr-bg:#FFFFFF;         --clr-bg2:#EDF5F4;
  --clr-ink:#16302D;        --clr-ink-soft:#5C7873;
  --clr-line:#D3E3E1;       --clr-ok:#8F3813;

  /* new explicit aliases (used by new rules below) */
  --clr-green:#B84A1E;      --clr-green-dk:#8F3813;
  --clr-white:#FFFFFF;      --clr-grey:#EDF5F4;
  --clr-muted:#5C7873;

  /* ONE family — Archivo — for both title + text vars. */
  --ff-title:'Archivo',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --ff-text:'Archivo',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --sz-body:1.03rem; --sz-sm:.92rem;

  --max-w:1180px;
  --gutter:clamp(1.25rem,3vw,2rem);
  --block-gap:clamp(3.4rem,5vw,5.5rem);
  --rad:12px; --rad-lg:16px; --rad-pill:40px;
}

/* =========================================================
   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:16.5px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--clr-ink);text-decoration:none;text-underline-offset:2px}
a:hover{color:var(--clr-green-dk)}

h1,h2,h3,h4{
  font-family:var(--ff-title);
  font-weight:900;
  text-transform:uppercase;
  line-height:1.04;
  letter-spacing:-.01em;
  margin:0 0 .55em;
  color:var(--clr-ink);
}
h1{font-size:clamp(2.5rem,1.6rem + 3.2vw,3.7rem)}
h2{font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem)}
h3{font-size:1.35rem;font-weight:900}
h4{font-size:1.1rem;font-weight:900}
p{margin:0 0 1em}
strong,b{font-weight:800}

/* =========================================================
   SKIP LINK (.sr-only)
   ========================================================= */
.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-green);color:var(--clr-ink);
  padding:.6rem 1rem;border-radius:var(--rad);
  z-index:9999;font-weight:800;
}

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

/* =========================================================
   SECTIONS — generous padding, alt = light grey
   ========================================================= */
section{padding:clamp(3.4rem,5vw,5.5rem) 0}
section.alt{background:var(--clr-grey)}

section[data-panel="hero"]{padding:clamp(2.6rem,4vw,4.2rem) 0 clamp(2.6rem,4vw,3.6rem)}
section[data-panel="services"],
section[data-panel="reviews"],
section[data-panel="questions"]{padding:clamp(3.4rem,5vw,5.5rem) 0}
section[data-panel="trust"]{padding:1.7rem 0}
section[data-panel="cta"]{padding:clamp(2.4rem,4vw,3.6rem) 0}
section[data-panel="areas"],
section[data-panel="routes-preview"]{padding:clamp(3rem,4.5vw,4.6rem) 0}

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

/* First H2 in section: kill top void */
section > .container > h2:first-child,
section > .container > .eyebrow + h2{margin-top:0}

main > section:last-child{padding-bottom:clamp(2.4rem,4vw,3.6rem)}

/* Eyebrow / kicker label */
.eyebrow{
  display:inline-block;
  font-family:var(--ff-title);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--clr-green-dk);
  margin-bottom:.7rem;
}

/* =========================================================
   BUTTONS — pill shape, uppercase 800
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--ff-title);
  font-weight:800;
  font-size:.92rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.1;
  padding:.85em 1.9em;
  border-radius:var(--rad-pill);
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .12s ease,color .15s ease,box-shadow .15s ease;
}
.btn:focus-visible{outline:2px solid var(--clr-green);outline-offset:2px}

/* Primary = green bg + ink text */
.btn-primary{background:var(--clr-green);color:var(--clr-ink);border-color:var(--clr-green)}
.btn-primary:hover{background:var(--clr-green-dk);border-color:var(--clr-green-dk);color:var(--clr-ink);transform:translateY(-1px)}

/* Accent (used by CTA band) = dark/ink bg + white, text→green on hover.
   On the dark CTA band an ink button would vanish, so accent is the inverse:
   white-ish bg flips to green text for contrast against ink band. */
.btn-accent{background:var(--clr-green);color:var(--clr-ink);border-color:var(--clr-green)}
.btn-accent:hover{background:var(--clr-green-dk);border-color:var(--clr-green-dk);color:var(--clr-ink);transform:translateY(-1px)}

/* Ghost / outline pill — 2px ink border, fills ink on hover */
.btn-ghost{background:transparent;color:var(--clr-ink);border:2px solid var(--clr-ink)}
.btn-ghost:hover{background:var(--clr-ink);border-color:var(--clr-ink);color:#fff;transform:translateY(-1px)}

/* Dark-pill variant helper (in case markup uses it) */
.btn-dark{background:var(--clr-ink);color:#fff;border-color:var(--clr-ink)}
.btn-dark:hover{background:#000;border-color:#000;color:var(--clr-green)}

.btn-lg{padding:1.05em 2.3em;font-size:1rem}
.btn-block{display:flex;width:100%}

/* =========================================================
   FORMS (.fw-inquiry)
   ========================================================= */
.fw-inquiry label{
  display:block;
  font-family:var(--ff-title);
  font-weight:800;
  font-size:.8rem;
  letter-spacing:.01em;
  margin-bottom:.3rem;
  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}}

/* 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:.8em 1em;
  border:1px solid var(--clr-line);
  border-radius:var(--rad);
  background:var(--clr-grey);
  font-family:var(--ff-text);
  color:var(--clr-ink);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.fw-inquiry input::placeholder,
.fw-inquiry textarea::placeholder{color:var(--clr-muted)}
.fw-inquiry input:focus,
.fw-inquiry select:focus,
.fw-inquiry textarea:focus{
  outline:none;
  border-color:var(--clr-green);
  background:#fff;
  box-shadow:0 0 0 3px rgba(0,226,75,.18);
}
.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:.9rem}
.fw-inquiry .submit-row button{width:100%;padding:.95em 1.6em;font-size:.95rem}
.fw-inquiry .reassure,
.reassure{font-size:.78rem;color:var(--clr-muted);margin-top:.55rem;line-height:1.45}

/* Inline Thanks block (injected by main.js after submit) */
.fw-done{padding:.4rem 0}
.fw-done h3{margin:0 0 .5rem;color:var(--clr-ink)}
.fw-done p{color:var(--clr-ink);font-size:.95rem}
.fw-done strong{color:var(--clr-green-dk)}

/* =========================================================
   HEADER — white, sticky. (.top-bar.dark in markup is now restyled
   to the WHITE puremovers header; the .dark class is ignored visually.)
   ========================================================= */
.top-bar{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid var(--clr-line);
  box-shadow:0 2px 14px -10px rgba(12,10,10,.25);
}
/* Neutralize the legacy .dark variant — header is white now */
.top-bar.dark{
  background:#fff;
  border-bottom:1px solid var(--clr-line);
}
.top-bar .inner{
  display:flex;
  align-items:center;
  gap:1.5rem;
  height:74px;
  padding-inline:var(--gutter,1.25rem);
}

/* Brand-mark */
.logo-link{
  display:flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  line-height:1;
}
.logo-link .logo-img{
  flex:0 0 auto;
  width:auto;
  height:46px;
  display:block;
}
.logo-link .logo-text{
  display:flex;
  flex-direction:column;
  gap:.12rem;
}
.logo-link .l1{
  font-family:var(--ff-title);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.01em;
  font-size:1.12rem;
  color:var(--clr-ink);
  line-height:1.08;
}
.logo-link .l2{
  font-size:.72rem;
  font-weight:800;
  color:var(--clr-muted);
  text-transform:uppercase;
  letter-spacing:.1em;
}
/* legacy dark-header overrides → force ink text on white */
.top-bar.dark .logo-link .l1{color:var(--clr-ink)}
.top-bar.dark .logo-link .l2{color:var(--clr-muted)}

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

/* Primary Nav */
.main-menu > ul,
.main-menu .menu{
  display:flex;
  gap:.25rem;
  margin:0;
  padding:0;
  list-style:none;
  font-weight:700;
}
.main-menu a{
  color:var(--clr-ink);
  text-decoration:none;
  padding:.5em .85em;
  font-family:var(--ff-title);
  font-weight:700;
  font-size:.92rem;
  border-radius:8px;
  transition:color .12s,background .12s;
}
.main-menu a:hover,
.main-menu .current-menu-item > a{color:var(--clr-green-dk)}
/* legacy dark overrides → ink on white */
.top-bar.dark .main-menu a{color:var(--clr-ink)}
.top-bar.dark .main-menu a:hover,
.top-bar.dark .main-menu .current-menu-item > a{color:var(--clr-green-dk)}

/* Dropdown submenu — white, rounded, green top border */
.main-menu .menu-item-has-children{position:relative}
.main-menu .menu-item-has-children > a::after{
  content:" \25BE";
  font-size:.7em;
  color:var(--clr-muted);
  margin-left:.15em;
}
.top-bar.dark .main-menu .menu-item-has-children > a::after{color:var(--clr-muted)}
.main-menu .sub-menu{
  display:none;
  position:absolute;
  top:100%;
  left:-1rem;
  min-width:214px;
  background:#fff;
  border:1px solid var(--clr-line);
  border-top:3px solid var(--clr-green);
  border-radius:12px;
  padding:.5rem 0;
  margin:0;
  list-style:none;
  box-shadow:0 16px 36px -16px rgba(12,10,10,.28);
  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:.92rem;
  font-weight:700;
  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-grey);
  color:var(--clr-green-dk);
}

/* Header CTA area */
.top-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:.7rem;
}
/* phone = white pill with hairline border + bold number */
.top-phone{
  display:inline-flex;
  align-items:center;
  font-family:var(--ff-title);
  font-weight:800;
  font-size:.92rem;
  color:var(--clr-ink);
  text-decoration:none;
  white-space:nowrap;
  padding:.6em 1.15em;
  border:1px solid var(--clr-line);
  border-radius:var(--rad-pill);
  background:#fff;
  transition:border-color .15s,color .15s,box-shadow .15s;
}
.top-phone:hover{border-color:var(--clr-green);color:var(--clr-green-dk);box-shadow:0 2px 10px -6px rgba(12,10,10,.25)}
/* legacy dark override → ink pill on white */
.top-bar.dark .top-phone{color:var(--clr-ink)}

/* header "Free quote" CTA = dark pill (the inline style sets padding/font-size;
   we just give it the dark fill via .btn-ghost override in header context). */
.top-bar .top-actions .btn-ghost{
  background:var(--clr-ink);
  color:#fff;
  border-color:var(--clr-ink);
}
.top-bar .top-actions .btn-ghost:hover{
  background:#000;
  border-color:#000;
  color:var(--clr-green);
}
.top-bar.dark .btn-ghost{
  background:var(--clr-ink);
  color:#fff;
  border-color:var(--clr-ink);
}
.top-bar.dark .btn-ghost:hover{
  background:#000;
  border-color:#000;
  color:var(--clr-green);
}

/* 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:var(--clr-ink)}

/* Mobile nav drawer */
@media(max-width:900px){
  .main-menu .sub-menu{
    display:flex!important;
    position:static;
    border:0;
    border-top: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:.4rem 0;font-size:.9rem;color:rgba(255,255,255,.85)}
}
@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-ink);
    border-top:3px solid var(--clr-green);
    padding:1rem var(--gutter,1.25rem) 1.3rem;
    box-shadow:0 18px 30px -18px rgba(12,10,10,.5);
    z-index:100;
  }
  .main-menu.open ul{flex-direction:column;gap:.7rem}
  .main-menu.open a{color:#fff;padding:.5em 0;font-size:1rem}
  .main-menu.open a:hover{color:var(--clr-green)}
  .main-menu.open .sub-menu a{color:rgba(255,255,255,.75)}
  .main-menu.open .sub-menu a:hover{color:var(--clr-green)}
}

/* =========================================================
   LEGACY .hero / .hero.dark (not used by current templates,
   kept styled so it never renders unstyled if reintroduced).
   ========================================================= */
.hero{position:relative;background:var(--clr-bg)}
.hero.dark{background:var(--clr-ink);color:#fff}
.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:16ch}
.hero.dark .eyebrow{color:var(--clr-green)}
.hero.dark .hook{color:rgba(255,255,255,.78);font-size:1.1rem;max-width:46ch}
.hero.dark .btn-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.hero.dark .btn-ghost:hover{background:#fff;border-color:#fff;color:var(--clr-ink)}
.hero.dark .hero-metrics{border-top-color:rgba(255,255,255,.18) !important}
.hero.dark .hero-metrics div > div:first-child{color:#fff !important}
.hero.dark .hero-metrics div > div:last-child{color:rgba(255,255,255,.6) !important}
.hero.dark .hero-flow{border-top-color:rgba(255,255,255,.18) !important}
.hero.dark .hero-flow strong{color:#fff !important}
.hero.dark .hero-flow div > div:last-child{color:rgba(255,255,255,.6) !important}
.hero.dark .hero-flow span[style*="background"]{background:var(--clr-green) !important;color:var(--clr-ink) !important}
.hero .photo{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--rad-lg);
  background:var(--clr-ink);
}
.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%)}

/* Legacy white form card (kept) */
.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 16px 40px -18px rgba(12,10,10,.28);
  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-muted);margin-top:.65rem}
@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}}

/* =========================================================
   HERO-MJ (.masthead) — THE hero used on EVERY page.
   Light grey bg + centered copy + white form card on a GREEN BLOB.
   ========================================================= */
.masthead{
  position:relative;
  overflow:hidden;
  background:var(--clr-grey);
  color:var(--clr-ink);
  padding:clamp(3rem,5vw,5rem) 0 clamp(2.6rem,4vw,4rem);
  text-align:center;
}
.masthead > .container{max-width:1180px;position:relative;z-index:1}

/* H1 = brand on front page (largest); brand label as eyebrow on inner pages */
.masthead h1,
.masthead .masthead-h1{
  font-size:clamp(2.5rem,1.6rem + 3.2vw,3.7rem);
  margin-bottom:.55rem;
  color:var(--clr-ink);
  font-family:var(--ff-title);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.04;
}
.masthead h1 .city,
.masthead .masthead-h1 .city{color:var(--clr-green-dk)}

/* H2 / visual subtitle (smaller than H1) */
.masthead h2,
.masthead .masthead-h2{
  font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem);
  margin-bottom:.55rem;
  color:var(--clr-ink);
  font-family:var(--ff-title);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.06;
}
.masthead .masthead-h2 .city{color:var(--clr-green-dk)}

/* Brand eyebrow above inner-page H1 */
.masthead-brand{
  display:block;
  font-family:var(--ff-title);
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.14em;
  margin-bottom:.7rem;
  color:var(--clr-green-dk);
  font-weight:800;
}
.masthead .sub{
  font-size:clamp(1rem,.9rem + .4vw,1.2rem);
  color:var(--clr-muted);
  margin-bottom:2rem;
  max-width:60ch;
  margin-left:auto;margin-right:auto;
}

/* Form card — sits on a GREEN ROUNDED BLOB (the signature puremovers flair) */
.masthead-card{
  position:relative;
  background:#fff;
  border-radius:var(--rad-lg);
  padding:.4rem;
  box-shadow:0 22px 50px -22px rgba(12,10,10,.30);
  max-width:980px;
  margin:0 auto;
  z-index:1;
}
.masthead-card::before{
  content:none; /* removed green blob — it washed out the quote form inputs */
}
.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:56px;
}
.masthead-row input:focus{outline:none;box-shadow:0 0 0 3px rgba(0,226,75,.25);border-radius:8px;z-index:1;position:relative}
.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:var(--clr-muted)}
.masthead-row input:last-of-type{border-right:none}
/* Submit = green pill */
.masthead-row button{
  flex:0 0 auto;
  padding:0 2rem;
  border-radius:var(--rad-pill);
  background:var(--clr-green);
  color:var(--clr-ink);
  font-family:var(--ff-title);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:.92rem;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s,transform .12s;
}
.masthead-row button:hover{background:var(--clr-green-dk);transform:translateY(-1px)}
@media(max-width:760px){
  .masthead-card{border-radius:var(--rad-lg);padding:1.2rem}
  .masthead-card::before{left:10px;right:-10px;top:10px;bottom:-10px;border-radius:24px}
  .masthead-row{flex-direction:column;gap:.6rem}
  .masthead-row input{
    width:100%;border-right:none;border:1px solid var(--clr-line);
    border-radius:var(--rad);height:50px;background:var(--clr-grey);padding:0 1rem;
  }
  .masthead-row input:last-of-type{border-right:none}
  .masthead-row button{width:100%;border-radius:var(--rad-pill);height:54px}
}
.masthead .tcpa{
  font-size:.72rem;
  color:var(--clr-muted);
  max-width:980px;
  margin:1.3rem auto 0;
  line-height:1.55;
  text-align:left;
}
.masthead .tcpa strong{font-weight:800;color:var(--clr-ink)}

/* Perks row — green star/dots, muted "based on N reviews" text */
.masthead-perks{display:flex;justify-content:center;gap:2.5rem;margin-top:2.2rem;flex-wrap:wrap}
.masthead-perks .perk{display:flex;align-items:center;gap:.55rem;font-size:.95rem;color:var(--clr-ink)}
.masthead-perks .perk .perk-dot{
  width:38px;height:38px;border-radius:50%;
  background:var(--clr-green);color:var(--clr-ink);
  display:grid;place-items:center;flex:0 0 auto;
  font-size:.85rem;font-weight:800;font-family:var(--ff-title);
}
.masthead-perks .perk strong{font-weight:800}
@media(max-width:600px){.masthead-perks{flex-direction:column;align-items:center;gap:1rem}}

/* =========================================================
   TRUST STRIP
   ========================================================= */
.credibility-bar{
  background:var(--clr-grey);
  padding:.9rem 0;
  border-bottom:1px solid var(--clr-line);
}
.credibility-bar .heading{
  font-family:var(--ff-title);
  font-weight:800;
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--clr-muted);
  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;
}
.credibility-bar img{
  height:22px;
  max-height:22px;
  max-width:100px;
  width:100px;
  object-fit:contain;
  opacity:.55;
  filter:grayscale(100%) brightness(.55);
  transition:opacity .15s,filter .15s;
}
.credibility-bar a:hover img,
.credibility-bar img:hover{opacity:.95;filter:grayscale(0%) brightness(1)}

/* =========================================================
   SERVICE CARDS (.offers-grid / .offer-tile)
   ========================================================= */
.offers-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.5rem;
  align-items:stretch;
}
.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:#fff;
  border:1px solid var(--clr-line);
  border-radius:var(--rad-lg);
  padding:1.5rem 1.5rem 1.6rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  text-decoration:none;
  color:var(--clr-ink);
  box-shadow:0 12px 34px -16px rgba(12,10,10,.16);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.offer-tile:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 44px -18px rgba(12,10,10,.22);
  border-color:var(--clr-green);
}
/* icon chip — green */
.offer-tile .ic{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  background:var(--clr-green);
  border-radius:14px;
  color:var(--clr-ink);
  flex:0 0 auto;
  font-size:1.25rem;
  font-weight:800;
}
.offer-tile .ic svg{width:24px;height:24px;display:block;stroke:currentColor}
.offer-tile h3{
  margin:.4rem 0 .4rem;
  font-size:1.2rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.1;
  color:var(--clr-ink);
}
.offer-tile p{margin:0;color:var(--clr-muted);font-size:.95rem;line-height:1.55}
.offer-tile .more{
  margin-top:auto;
  color:var(--clr-green-dk);
  font-family:var(--ff-title);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  text-decoration:none;
  font-size:.82rem;
}
.offer-tile:hover .more{text-decoration:underline;text-underline-offset:3px}

/* =========================================================
   OWNER BLOCK (.founder-section)
   ========================================================= */
.founder-section{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:2.5rem;
  align-items:start;
  padding:1.25rem 0;
  min-width:0;
}
.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 16px 40px -22px rgba(12,10,10,.28);
}
.founder-section .ph img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.founder-section .eyebrow{color:var(--clr-green-dk)}
.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-weight:800;
  font-size:1.35rem;
  line-height:1.3;
  color:var(--clr-ink);
  border-left:4px solid var(--clr-green);
  padding-left:1.2rem;
  text-transform:none;
  letter-spacing:0;
  overflow-wrap:break-word;
  hyphens:auto;
  max-width:60ch;
}
.founder-section p{max-width:60ch}

/* =========================================================
   PROCESS STEPS (.sequence / .seq-item)
   ========================================================= */
.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-lg);
  position:relative;
  box-shadow:0 12px 34px -18px rgba(12,10,10,.16);
}
.seq-item::before{
  counter-increment:s;
  content:counter(s);
  position:absolute;
  top:1.2rem;
  left:1.7rem;
  background:var(--clr-green);
  color:var(--clr-ink);
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-family:var(--ff-title);
  font-weight:900;
  font-size:1.05rem;
}
.seq-item h3{font-size:1.2rem;margin:0 0 .5rem}
.seq-item p{margin:0;color:var(--clr-muted);font-size:1rem;line-height:1.55}
/* legacy dark hero process override (kept) */
.hero.dark .seq-item{background:var(--clr-mid);border-color:rgba(255,255,255,.12)}
.hero.dark .seq-item h3{color:#fff}
.hero.dark .seq-item p{color:rgba(255,255,255,.72)}

/* Front-page photo process strip — strip generic seq counters */
.timeline-bar .seq-item{padding:0;background:none;border:none;box-shadow:none}
.timeline-bar .seq-item::before{display:none}

/* =========================================================
   BENEFITS GRID (.advantages-grid / .advantage-item)
   ========================================================= */
.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:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--clr-ink);
  background:var(--clr-green);
  border:0;
  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.1rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.01em;
  margin:0;
  color:var(--clr-ink);
  line-height:1.15;
}
.advantage-item p{font-size:.92rem;color:var(--clr-muted);line-height:1.55;margin:0}

/* =========================================================
   REVIEW CARDS (.testimonials-grid / .testimonial)
   ========================================================= */
.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:#fff;
  border:1px solid var(--clr-line);
  border-radius:var(--rad-lg);
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  box-shadow:0 12px 34px -16px rgba(12,10,10,.16);
}
.testimonial .who{display:flex;gap:.7rem;align-items:center}
.testimonial .av{
  width:56px;
  height:56px;
  border-radius:50%;
  overflow:hidden;
  flex:0 0 auto;
  background:var(--clr-grey);
}
.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-family:var(--ff-title);font-weight:800;color:var(--clr-ink)}
.testimonial .meta .sub{font-size:.82rem;color:var(--clr-muted)}
/* stars = green */
.testimonial .stars{color:var(--clr-green);letter-spacing:.06em;font-size:1.02rem}
.testimonial .body{color:var(--clr-ink);font-size:.95rem;line-height:1.55}
.testimonial .src{
  font-size:.74rem;
  color:var(--clr-muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  margin-top:auto;
}

/* =========================================================
   WORK GRID (.gallery-grid / .gallery-item)
   ========================================================= */
.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-grey);
}
.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-muted);
  line-height:1.4;
  padding:0 .15rem;
}

/* =========================================================
   SERVICE AREAS STRIP (.locale-pills)
   ========================================================= */
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 1rem;
  background:#fff;
  border:1px solid var(--clr-line);
  border-radius:var(--rad-pill);
  text-decoration:none;
  color:var(--clr-ink);
  font-family:var(--ff-title);
  font-weight:700;
  font-size:.92rem;
  transition:border-color .12s,background .12s,color .12s,box-shadow .12s;
}
.locale-pills a:hover{
  border-color:var(--clr-green);
  color:var(--clr-ink);
  background:var(--clr-green);
  box-shadow:0 6px 16px -8px rgba(0,226,75,.5);
}

/* =========================================================
   FAQ (.questions details + .faq-item)
   ========================================================= */
.questions details{
  background:#fff;
  border:1px solid var(--clr-line);
  border-radius:var(--rad);
  padding:1rem 1.15rem;
  margin-bottom:.6rem;
  box-shadow:0 8px 24px -18px rgba(12,10,10,.16);
}
.questions summary{
  cursor:pointer;
  font-family:var(--ff-title);
  font-weight:800;
  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-green-dk);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-muted);line-height:1.6}

/* FAQ-page variant (.faq-item uses inline styles; just theme the toggle accent +
   give the open marker the green rotate already defined inline by the template). */
.faq-item .faq-toggle{color:var(--clr-green-dk) !important}
.faq-item[open]{border-color:var(--clr-green) !important}

/* =========================================================
   CTA BAND (.action-strip) — INK band, green button
   ========================================================= */
.action-strip{
  background:var(--clr-ink);
  color:#fff;
  padding:clamp(2.4rem,4vw,3.6rem) 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,.72);margin:.3rem 0 0}
.action-strip .btn-accent{background:var(--clr-green);color:var(--clr-ink);border-color:var(--clr-green)}
.action-strip .btn-accent:hover{background:var(--clr-green-dk);border-color:var(--clr-green-dk);color:var(--clr-ink)}

/* =========================================================
   PAGE HERO (.inner-banner) — INK band, white text, green accents
   ========================================================= */
.inner-banner{
  background:var(--clr-ink);
  color:#fff;
  padding:clamp(2.4rem,4vw,3.4rem) 0 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.inner-banner .grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2rem;
  align-items:start;
  padding-bottom:clamp(1.6rem,3vw,2.6rem);
}
@media(max-width:860px){.inner-banner .grid{grid-template-columns:1fr}}
.inner-banner h1{color:#fff;margin-bottom:.45rem;max-width:16ch}
.inner-banner h2{color:#fff}
.inner-banner .breadcrumb{
  font-size:.8rem;
  color:rgba(255,255,255,.5);
  margin-bottom:.6rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
}
.inner-banner .breadcrumb a{color:rgba(255,255,255,.7)}
.inner-banner .breadcrumb a:hover{color:var(--clr-green)}
.inner-banner .hook{color:rgba(255,255,255,.72)}
.inner-banner .muted{color:rgba(255,255,255,.6)}
.inner-banner .eyebrow{color:var(--clr-green)}
/* White form card inside ink 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 20px 46px -18px rgba(0,0,0,.5);
}
.inner-banner .fw-inquiry label{color:var(--clr-ink)}
.inner-banner .fw-inquiry .muted{color:var(--clr-muted)}
.inner-banner .fw-inquiry .reassure{color:var(--clr-muted)}
/* hero-metrics / hero-flow on ink banner */
.inner-banner .hero-metrics{border-top-color:rgba(255,255,255,.18) !important}
.inner-banner .hero-metrics div > div:first-child{color:#fff !important}
.inner-banner .hero-metrics div > div:last-child{color:rgba(255,255,255,.6) !important}
.inner-banner .hero-flow{border-top-color:rgba(255,255,255,.18) !important}
.inner-banner .hero-flow strong{color:#fff !important}
.inner-banner .hero-flow div > div:last-child{color:rgba(255,255,255,.6) !important}
.inner-banner .hero-flow span[style*="background"]{background:var(--clr-green) !important;color:var(--clr-ink) !important}
.inner-banner .btn-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.inner-banner .btn-ghost:hover{background:#fff;border-color:#fff;color:var(--clr-ink)}

/* =========================================================
   CONTENT LAYOUT (.layout-split + aside)
   ========================================================= */
.layout-split{
  display:grid;
  grid-template-columns:minmax(0,820px);
  justify-content:center;
  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}

.layout-split > aside{align-self:start}
.layout-split > aside.sidebar-fill{align-self:stretch}

/* Aside quote card */
.sidebar-form{
  background:var(--clr-grey);
  border:1px solid var(--clr-line);
  border-radius:var(--rad-lg);
  padding:1.5rem;
  box-shadow:0 12px 34px -20px rgba(12,10,10,.18);
}
.sidebar-form h3{margin-top:0}

.sidebar-form .fw-inquiry{font-size:.92rem}
.sidebar-form .fw-inquiry label{font-size:.78rem;margin-bottom:.22rem}
.sidebar-form .fw-inquiry input,
.sidebar-form .fw-inquiry select{font-size:.95rem;padding:.6rem .75rem;background:#fff}
.sidebar-form .fw-inquiry .row{gap:.55rem;margin-bottom:.6rem}
.sidebar-form .fw-inquiry button[type="submit"]{
  background:var(--clr-green);
  color:var(--clr-ink);
  border-color:var(--clr-green);
  font-size:.95rem;
  padding:.85em 1.2em;
  margin-top:.4rem;
}
.sidebar-form .fw-inquiry button[type="submit"]:hover{background:var(--clr-green-dk);border-color:var(--clr-green-dk)}
.sidebar-form .tcpa-text,
.sidebar-form .form-reassure{font-size:.76rem;color:var(--clr-muted)}

/* Sticky inner form wrapper */
.layout-split > aside .sidebar-pin{
  position:sticky;
  top:1.2rem;
  z-index:2;
  background:var(--clr-grey);
}
@media(max-width:980px){
  .layout-split > aside .sidebar-pin{position:static}
  .layout-split{grid-template-columns:1fr}
}

/* Aside call / ticker blocks.
   NOTE: fw_partial_aside_secondary() & fw_partial_week_ticker() inline-style
   .sidebar-phone/.sidebar-counter to a WHITE card; these rules are the fallback
   for any plain .sidebar-phone (e.g. if used without inline override). */
.sidebar-phone{
  background:var(--clr-ink);
  color:#fff;
  border-radius:var(--rad-lg);
  padding:1.3rem;
  margin-top:1rem;
  text-align:center;
}
.sidebar-phone a{color:var(--clr-green);font-family:var(--ff-title);font-weight:800;font-size:1.1rem}
.sidebar-phone a:hover{color:var(--clr-green-dk)}
.sidebar-counter{
  font-size:.82rem;
  color:var(--clr-muted);
  margin-top:.8rem;
  padding:.9rem;
  background:#fff;
  border:1px solid var(--clr-line);
  border-radius:var(--rad);
}

/* =========================================================
   FOOTER (.bottom-bar) — dark INK, white text, green accents.
   footer.php also injects an inline <style> with --clr-brand/--clr-pop
   fallbacks; those fallbacks now equal ink/green via our :root remap.
   ========================================================= */
.bottom-bar{
  background:var(--clr-ink);
  color:rgba(255,255,255,.72);
  padding:3.6rem 0 0;
  margin-top:0;
}
.bottom-bar h4{
  color:#fff;
  font-family:var(--ff-title);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:1.05rem;
  margin:0 0 .75rem;
}
.bottom-bar a{color:rgba(255,255,255,.72);text-decoration:none;transition:color .15s}
.bottom-bar a:hover{color:var(--clr-green)}
.bottom-bar p{font-size:.88rem;line-height:1.6;margin:0 0 .75rem;color:rgba(255,255,255,.72)}
.bottom-bar ul{margin:0;padding:0;list-style:none;display:grid;gap:.4rem}
.bottom-bar li{font-size:.88rem;line-height:1.55}

.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 — green icons */
.foot-info{list-style:none;padding:0;margin:.75rem 0 0;display:flex;flex-direction:column;gap:.55rem}
.foot-info li{display:flex;gap:.55rem;align-items:flex-start;font-size:.85rem;line-height:1.5}
.foot-info li svg,.foot-info svg{flex:0 0 16px;width:16px;height:16px;color:var(--clr-green);margin-top:2px;opacity:1}
.foot-info a{color:rgba(255,255,255,.72)}
.foot-info a:hover{color:var(--clr-green)}

/* Why-choose-us checkmarks — green */
.footer-creds{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer-creds li{display:flex;align-items:flex-start;gap:.6rem;font-size:.88rem;line-height:1.5}
.footer-creds .ck{color:var(--clr-green);font-weight:800;flex:0 0 auto;line-height:1.45}

/* Credentials (legacy) */
.badge-list{font-size:.85rem;line-height:1.55;color:rgba(255,255,255,.55)}
.badge-list .badge-mark{color:var(--clr-green)}

/* Footer bottom bar */
.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:2.5rem;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.82rem;
  color:rgba(255,255,255,.45);
  text-align:center;
  padding-bottom:1.5rem;
}
.foot-legal a,.bottom-bar .bottom a{color:rgba(255,255,255,.45)}
.foot-legal a:hover,.bottom-bar .bottom a:hover{color:var(--clr-green)}
.foot-legal > *,
.bottom-bar .bottom > *{flex:0 1 auto}
.foot-legal .sep{user-select:none}

/* =========================================================
   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-muted)}
/* index.php uses <h2 class="h3"> for blog-card titles */
.h3{font-size:1.2rem;font-weight:900}

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

/* Tables — ink header, green-tint hover */
.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-ink);color:#fff}
.layout-split th{padding:.7rem 1rem;text-align:left;font-family:var(--ff-title);font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
.layout-split td{padding:.65rem 1rem;border-bottom:1px solid var(--clr-line)}
.layout-split tbody tr:nth-child(even){background:var(--clr-grey)}
.layout-split tbody tr:hover{background:rgba(0,226,75,.08)}

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

/* Blockquote (in body content) */
.layout-split blockquote{border-left:4px solid var(--clr-green);background:var(--clr-grey);padding:1rem 1.4rem;margin:1.5rem 0;border-radius:0 var(--rad) var(--rad) 0;font-style:normal;font-weight:600;color:var(--clr-ink)}

/* Ordered lists — green number chips */
.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-green);color:var(--clr-ink);font-size:.8rem;font-weight:800;display:grid;place-items:center}

/* Unordered lists in body — green markers */
.layout-split .main ul{padding-left:1.2rem;margin:1.1rem 0}
.layout-split .main ul li{margin-bottom:.45rem}
.layout-split .main ul li::marker{color:var(--clr-green)}

/* 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}

/* Body links inside main content stay green for affordance */
.layout-split .main a{color:var(--clr-green-dk);text-decoration:underline;text-underline-offset:2px}
.layout-split .main a:hover{color:var(--clr-ink)}

/* Responsive tables (horizontal scroll safety) */
@media(max-width:600px){
  .layout-split table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;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%}
}

/* =========================================================
   REVIEWS SECTION DECORATIVE TAPE RIBBON (subtle puremovers flair).
   Faint rotated green strips behind the reviews panel, clipped so they
   never cause horizontal overflow on mobile.
   ========================================================= */
section[data-panel="reviews"]{position:relative;overflow:hidden}
section[data-panel="reviews"] > .container{position:relative;z-index:1}
section[data-panel="reviews"]::before{
  content:"";
  position:absolute;
  top:-10%;
  left:-12%;
  width:124%;
  height:120%;
  z-index:0;
  pointer-events:none;
  opacity:.12;
  background-image:repeating-linear-gradient(
    -8deg,
    var(--clr-green) 0,
    var(--clr-green) 18px,
    transparent 18px,
    transparent 120px
  );
}
/* On the grey (.alt) reviews variant the tape would muddy the grey — soften it */
section.alt[data-panel="reviews"]::before{opacity:.08}

/* =========================================================
   RESPONSIVE BREAKPOINTS SUMMARY
   - 980px: layout-split single column, sidebar-pin static
   - 900px: footer 2-col, nav hidden/hamburger
   - 860px: hero/inner-banner grid single column
   - 780px: founder-section single column, CTA stacks
   - 760px: masthead form stacks vertical
   - 640/600px: everything 1-col, tables horizontally scrollable
   ========================================================= */

/* =========================================================================
   PUREMOVERS-STRUCTURE HOME BLOCKS  (prefix .pm-)
   Rebuilt on the existing green/ink/grey tokens. All blocks overflow-safe:
   blobs/ribbons live in `overflow:hidden` parents and never widen the page.
   ========================================================================= */

/* Shared green blob behind hero/owner photos --------------------------------
   A --clr-green rounded shape sits behind the photo via the wrapper itself
   (background) + a soft offset echo via ::before, clipped by the section. */
.pm-blob{
  position:relative;
  border-radius:42% 58% 54% 46% / 52% 44% 56% 48%;
  background:var(--clr-green);
  padding:18px;
  isolation:isolate;
}
.pm-blob::before{
  content:"";
  position:absolute;
  inset:auto -14px -16px auto;
  width:62%;
  height:62%;
  background:var(--clr-green);
  opacity:.32;
  border-radius:46% 54% 40% 60% / 60% 42% 58% 40%;
  z-index:-1;
}
.pm-blob > img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:38% 52% 48% 42% / 46% 40% 52% 44%;
}
/* Angular variant for the owner portrait (taller, clipped corner) */
.pm-blob-angular{
  border-radius:18px;
  clip-path:polygon(0 0,100% 0,100% 86%,86% 100%,0 100%);
}
.pm-blob-angular > img{
  aspect-ratio:4/5;
  border-radius:12px;
  object-position:center 22%;
}

/* === 1. HERO ============================================================== */
.pm-hero{
  background:var(--clr-grey);
  overflow:hidden;
  padding:clamp(2.6rem,4vw,4.4rem) 0 clamp(2.6rem,4vw,4rem);
}
.pm-hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.6rem,4vw,3.2rem);
  align-items:center;
}
.pm-hero-media{min-width:0}
.pm-hero-copy{min-width:0}
.pm-hero-copy h1{
  font-size:clamp(2.3rem,1.5rem + 3vw,3.6rem);
  margin:0 0 .5rem;
  color:var(--clr-ink);
}
.pm-hero-sub{
  color:var(--clr-muted);
  font-size:clamp(1rem,.92rem + .35vw,1.15rem);
  max-width:46ch;
  margin:0 0 1.4rem;
}
.pm-quote-card{
  background:#fff;
  border:1px solid var(--clr-line);
  border-radius:var(--rad-lg);
  padding:clamp(1.1rem,2vw,1.5rem);
  box-shadow:0 22px 50px -22px rgba(12,10,10,.30);
}
.pm-quote-label{
  display:block;
  font-family:var(--ff-title);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
  color:var(--clr-green-dk);
  margin-bottom:.8rem;
}
.pm-quote-form .pm-quote-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem;
  margin-bottom:.7rem;
}
.pm-quote-form input{
  width:100%;
  font-size:16px;            /* iOS no-zoom */
  line-height:1.4;
  padding:.78em 1em;
  border:1px solid var(--clr-line);
  border-radius:var(--rad);
  background:var(--clr-grey);
  font-family:var(--ff-text);
  color:var(--clr-ink);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.pm-quote-form input::placeholder{color:var(--clr-muted)}
.pm-quote-form input:focus{
  outline:none;
  border-color:var(--clr-green);
  background:#fff;
  box-shadow:0 0 0 3px rgba(0,226,75,.18);
}
.pm-quote-form .pm-quote-email{margin-bottom:.9rem}
.pm-quote-form .btn-block{width:100%}
.pm-quote-reassure{
  font-size:.76rem;
  color:var(--clr-muted);
  margin:.7rem 0 0;
  line-height:1.45;
}
.pm-quote-reassure strong{color:var(--clr-ink)}
.pm-hero-rating{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-top:1.1rem;
  flex-wrap:wrap;
}
.pm-stars{color:var(--clr-green);font-size:1.15rem;letter-spacing:.08em;line-height:1}
.pm-rating-text{font-size:.92rem;color:var(--clr-ink)}
.pm-rating-text strong{font-weight:800}
@media(max-width:860px){
  .pm-hero-grid{grid-template-columns:1fr}
  .pm-hero-media{order:2;max-width:480px;margin:.4rem auto 0}
  .pm-hero-copy{order:1;display:flex;flex-direction:column}
  /* mobile: pull the lead form (+ its trust rating) to the very top of the hero */
  .pm-hero-copy .pm-quote-card{order:-2;margin-top:.25rem}
  .pm-hero-copy .pm-hero-rating{order:-1;margin-top:.6rem}
}
@media(max-width:560px){
  .pm-quote-form .pm-quote-row{grid-template-columns:1fr}
}

/* === 2. TRUST BADGES ====================================================== */
.pm-badges{background:#fff;padding:clamp(2.2rem,3.5vw,3.4rem) 0}
.pm-badges .eyebrow{text-align:center;display:block}
.pm-badge-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  margin-top:1.4rem;
}
.pm-badge{
  display:flex;
  align-items:center;
  gap:.85rem;
  background:#fff;
  border:1px solid var(--clr-line);
  border-radius:16px;
  padding:.9rem 1.2rem;
  box-shadow:0 10px 30px -18px rgba(12,10,10,.18);
  flex:1 1 220px;
  max-width:260px;
}
.pm-badge-logo{
  height:26px;
  width:auto;
  max-width:88px;
  object-fit:contain;
  flex:0 0 auto;
}
.pm-badge-meta{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.pm-badge-stars{color:var(--clr-green);font-size:.95rem;letter-spacing:.04em}
.pm-badge-score{font-size:.82rem;color:var(--clr-muted)}
.pm-badge-score strong{color:var(--clr-ink);font-weight:800}
@media(max-width:560px){.pm-badge{max-width:100%;flex-basis:100%}}

/* === 3. WHY-ICONS ========================================================= */
.pm-why{background:#fff}
.pm-why-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.4rem;
  margin-top:2rem;
}
@media(max-width:860px){.pm-why-grid{grid-template-columns:1fr}}
.pm-why-card{
  background:#fff;
  border:1px solid var(--clr-line);
  border-radius:var(--rad-lg);
  padding:1.7rem 1.6rem;
  box-shadow:0 12px 34px -18px rgba(12,10,10,.14);
}
.pm-why-ic{
  width:54px;height:54px;
  display:grid;place-items:center;
  border:2px solid var(--clr-green);
  border-radius:50%;
  color:var(--clr-green-dk);
  margin-bottom:1rem;
}
.pm-why-ic svg{width:26px;height:26px}
.pm-why-card h3{
  font-size:1.12rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.01em;
  margin:0 0 .45rem;
  color:var(--clr-ink);
}
.pm-why-card p{margin:0;color:var(--clr-muted);font-size:.94rem;line-height:1.55}

/* === 4. TRUCK / WORK BAND ================================================= */
.pm-work-band{background:#fff;padding:clamp(2.2rem,3.5vw,3.4rem) 0}
.pm-work-band-inner{
  position:relative;
  border-radius:var(--rad-lg);
  overflow:hidden;
  min-height:300px;
  display:flex;
  align-items:flex-end;
}
.pm-work-band-inner > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.pm-work-band-inner::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(12,10,10,.78) 0%,rgba(12,10,10,.35) 55%,rgba(12,10,10,0) 100%);
}
.pm-work-band-cap{
  position:relative;
  z-index:1;
  padding:clamp(1.4rem,3vw,2.4rem);
  max-width:42ch;
}
.pm-work-band-cap .eyebrow{color:var(--clr-green)}
.pm-work-band-cap p{
  color:#fff;
  font-family:var(--ff-title);
  font-weight:800;
  font-size:clamp(1.05rem,.95rem + .5vw,1.4rem);
  line-height:1.3;
  margin:0;
}

/* === 5. REVIEWS (reuses .testimonial + existing tape ribbon) ============== */
.pm-rev-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.1rem;
  margin-top:2rem;
}
@media(max-width:900px){.pm-rev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.pm-rev-grid{grid-template-columns:1fr}}

/* === 6. SERVICES (reuses .offer-tile) ===================================== */
.pm-svc-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.1rem;
  margin-top:2rem;
}
@media(max-width:900px){.pm-svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.pm-svc-grid{grid-template-columns:1fr}}
/* offer-tile icon SVGs render at fixed size */
.pm-svc-grid .offer-tile .ic svg{width:24px;height:24px}

/* === 7. TWO-COL FEATURES ================================================== */
.pm-features{background:#fff}
.pm-features-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.6rem,4vw,3rem);
}
@media(max-width:760px){.pm-features-grid{grid-template-columns:1fr}}
.pm-feature{
  border-left:3px solid var(--clr-green);
  padding:.4rem 0 .4rem 1.4rem;
}
.pm-feature-ic{
  display:inline-grid;
  place-items:center;
  width:48px;height:48px;
  background:var(--clr-green);
  color:var(--clr-ink);
  border-radius:50%;
  margin-bottom:.9rem;
}
.pm-feature-ic svg{width:24px;height:24px}
.pm-feature h3{
  font-size:1.3rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.01em;
  margin:0 0 .5rem;
  color:var(--clr-ink);
}
.pm-feature p{margin:0;color:var(--clr-muted);line-height:1.6}

/* === 8. OWNER ============================================================= */
.pm-owner{background:#fff;overflow:hidden}
.pm-owner-grid{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:clamp(1.8rem,4vw,3rem);
  align-items:center;
}
.pm-owner-media{min-width:0;max-width:340px}
.pm-owner-copy{min-width:0}
.pm-owner-copy h2{margin:0 0 .8rem;overflow-wrap:break-word}
.pm-owner-copy blockquote{
  margin:0 0 .9rem;
  font-family:var(--ff-title);
  font-weight:800;
  font-size:1.3rem;
  line-height:1.3;
  color:var(--clr-ink);
  border-left:4px solid var(--clr-green);
  padding-left:1.2rem;
  text-transform:none;
  letter-spacing:0;
  max-width:58ch;
}
.pm-owner-copy p.muted{max-width:60ch}
@media(max-width:780px){
  .pm-owner-grid{grid-template-columns:1fr;justify-items:start}
  .pm-owner-media{max-width:300px;margin:0 auto}
}

/* === 9. CLIENTS / DARK TRUST BAND + GREEN TAPE RIBBONS ==================== */
.pm-clients{
  position:relative;
  background:var(--clr-ink);
  color:#fff;
  overflow:hidden;
  padding:clamp(3.4rem,5vw,5rem) 0;
  text-align:center;
}
.pm-clients .container{position:relative;z-index:2}
.pm-clients .eyebrow{color:var(--clr-green)}
.pm-clients h2{color:#fff;margin:0 0 2rem}
.pm-clients-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:1.6rem 2.6rem;
}
.pm-client-logo{display:inline-flex;align-items:center;justify-content:center;height:30px}
.pm-client-logo img{
  height:24px;
  max-height:24px;
  width:auto;
  max-width:110px;
  object-fit:contain;
  filter:grayscale(100%) brightness(0) invert(1);
  opacity:.6;
  transition:opacity .15s;
}
.pm-client-logo img:hover{opacity:1}
/* Green diagonal tape ribbons, top & bottom — clipped by overflow:hidden */
.pm-ribbon{
  position:absolute;
  left:-8%;
  width:116%;
  background:var(--clr-green);
  transform:rotate(-8deg);
  overflow:hidden;
  white-space:nowrap;
  z-index:1;
  pointer-events:none;
}
.pm-ribbon-top{top:14px}
.pm-ribbon-bottom{bottom:14px}
.pm-ribbon span{
  display:inline-block;
  font-family:var(--ff-title);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.82rem;
  line-height:2.1;
  color:var(--clr-ink);
}

/* === 10. RECENT BLOG ====================================================== */
.pm-blog{background:#fff}
.pm-blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.4rem;
  margin-top:2rem;
}
@media(max-width:860px){.pm-blog-grid{grid-template-columns:1fr}}
.pm-blog-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--clr-line);
  border-radius:var(--rad-lg);
  overflow:hidden;
  text-decoration:none;
  color:var(--clr-ink);
  box-shadow:0 12px 34px -18px rgba(12,10,10,.16);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.pm-blog-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px -18px rgba(12,10,10,.22);border-color:var(--clr-green)}
.pm-blog-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--clr-grey)}
.pm-blog-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.pm-blog-card:hover .pm-blog-thumb img{transform:scale(1.04)}
.pm-blog-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.pm-blog-body h3{
  font-size:1.12rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.2;
  margin:0;
  color:var(--clr-ink);
}
.pm-blog-body p{margin:0;color:var(--clr-muted);font-size:.92rem;line-height:1.55}
.pm-blog-read{
  margin-top:auto;
  color:var(--clr-green-dk);
  font-family:var(--ff-title);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:.8rem;
}
.pm-blog-card:hover .pm-blog-read{text-decoration:underline;text-underline-offset:3px}

/* === 11. FAQ uses existing .questions styling (no extra CSS) ============== */

/* === 12. AREA-OF-SERVICE SEO TEXT ========================================= */
.pm-seo{background:#fff;overflow:hidden}
.pm-seo-grid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:clamp(1.8rem,4vw,3.2rem);
  align-items:center;
}
@media(max-width:860px){.pm-seo-grid{grid-template-columns:1fr}}
.pm-seo-copy{min-width:0}
.pm-seo-copy h2{margin:0 0 .8rem}
.pm-seo-copy p{color:var(--clr-muted);line-height:1.7;max-width:62ch}
.pm-seo-copy .btn{margin-top:.6rem}
/* Decorative angular green shape with an overlaid stat */
.pm-seo-deco{
  position:relative;
  min-height:240px;
  display:grid;
  place-items:center;
}
.pm-seo-shape{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,var(--clr-green) 0%,var(--clr-green-dk) 100%);
  border-radius:24px;
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
  opacity:.95;
}
.pm-seo-stat{
  position:relative;
  z-index:1;
  text-align:center;
  font-family:var(--ff-title);
  font-weight:800;
  color:var(--clr-ink);
  font-size:1.05rem;
  line-height:1.35;
  padding:0 1.4rem;
  max-width:18ch;
}
.pm-seo-stat strong{display:block;font-size:2.6rem;font-weight:900;line-height:1;margin-bottom:.2rem}
@media(max-width:860px){.pm-seo-deco{min-height:180px}}

/* === 13. INSTAGRAM / SOCIAL ROW =========================================== */
.pm-insta{background:#fff}
.pm-insta-row{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:.7rem;
  margin-top:1.8rem;
}
@media(max-width:900px){.pm-insta-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.pm-insta-row{grid-template-columns:repeat(2,1fr)}}
.pm-insta-sq{
  margin:0;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:var(--rad);
  background:var(--clr-grey);
}
.pm-insta-sq img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.pm-insta-sq:hover img{transform:scale(1.06)}


/* mobile header tighten (<=600): keep phone visible, drop city sub-line, shrink gap */
@media(max-width:600px){
  .top-bar .inner{gap:.6rem}
  .logo-link .l2{display:none}
  .top-phone{padding:.5em .85em;font-size:.9rem}
}