/* ==========================================================================
   Middle Man Movers — shared stylesheet
   Halifax, Nova Scotia · "Affordable — Reliable, Stress-Free Moving"

   Palette is sampled from the client's logo and their live site: deep royal
   blue rooftops, leaf green leaves, and the orange they already use for every
   call to action. Tone: professional & traditional — serif headings, generous
   white space, restrained motion.

   Contents
     1.  Tokens
     2.  Reset & base elements
     3.  Layout helpers (wrap, section, grids)
     4.  Buttons & pills
     5.  Header, navigation, mobile call bar
     6.  Hero (home + subpages)
     7.  Breadcrumbs
     8.  Cards (service, pillar, area, review)
     9.  Steps / checklists / prose
     10. FAQ accordion
     11. Booking callout, CTA band
     12. Forms & map
     13. Footer
     14. Utilities, motion, print
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Brand palette — sampled directly from the client's logo and live site,
   not eyeballed. See tools/ and the git history for the sampling script.

     logo rooftop "M"   #1801AA   deep violet-blue
     logo leaves        #8DC449   leaf green
     site CTA buttons   #ED6934   orange   <- their action colour
     site wordmark      #D7C64B   yellow   (over dark photography)

   Roles, so the page keeps a hierarchy instead of becoming a fruit salad:
     ORANGE = action + price. Every CTA, every number that costs money.
     BLUE   = structure + trust. Headings, nav, dark bands, footer, links.
     GREEN  = supporting reassurance. Ticks, rules, "what's included" detail.
     YELLOW = highlight on dark imagery only, echoing their wordmark.

   ACCESSIBILITY NOTE: white text on the brand orange #ED6934 is only 3.15:1 —
   it fails WCAG AA, and the client's current Squarespace site has this problem.
   Rather than dull the orange, every orange fill carries a DEEP NAVY label
   (5.81:1). That keeps their exact orange on buttons, price badges and the
   mobile call bar alike, and passes AA at any text size.
   Every pair in this file was measured, not estimated.
   -------------------------------------------------------------------------- */
:root{
  /* Royal blue — the rooftop "M" (#1801AA sampled from the logo) */
  --blue-900:#0E0A45;   /* deepest — headings, dark bands, footer */
  --blue-800:#160A86;
  --blue-700:#1801AA;   /* true logo blue — links, brand accents */
  --blue-600:#3A28C6;
  --blue-300:#A9A2E8;
  --blue-100:#E4E1FA;
  --blue-050:#F1EFFD;

  /* Orange — the client's action colour (#ED6934 sampled from their site) */
  --orange-400:#F58045;  /* hover lift — lightens, so the navy label stays legible */
  --orange-500:#ED6934;  /* TRUE brand orange — every button, badge and call bar */
  --orange-600:#C64C15;  /* the only orange safe under WHITE text (4.72:1) */
  --orange-700:#A83C0C;  /* orange TEXT on white (6.33:1) — the price figures */

  /* Leaf green — the leaves (#8DC449 sampled from the logo) */
  --green-700:#4C7A22;  /* accessible green text on white */
  --green-600:#6FA436;
  --green-500:#8DC449;  /* brand accent */
  --green-300:#BCE08C;
  --green-100:#EAF6DA;

  /* Wordmark yellow — highlight on dark backgrounds only */
  --yellow-400:#E8D75A;

  /* Neutrals */
  --ink:#15172B;
  --ink-soft:#3B4059;
  --ink-muted:#616880;
  --line:#E7E2DA;
  --line-soft:#F1ECE4;
  --off-white:#F8F6F2;   /* warm paper, not cool blue-grey */
  --cream:#FDFBF8;       /* barely-there warm tint for soft transitions */
  --white:#FFFFFF;

  --amber-100:#FFF6E0;
  --amber-700:#8A6100;

  --shadow-xs:0 1px 2px rgba(14,10,69,.06);
  --shadow-sm:0 1px 3px rgba(14,10,69,.07), 0 4px 10px rgba(14,10,69,.05);
  --shadow-md:0 4px 12px rgba(14,10,69,.07), 0 14px 32px rgba(14,10,69,.09);
  --shadow-lg:0 20px 56px rgba(14,10,69,.16);

  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --wrap:1160px;
  --wrap-narrow:760px;
  --gutter:20px;
  --radius:12px;
  --radius-sm:8px;
  --radius-lg:18px;
  --header-h:72px;
  --callbar-h:60px;   /* mobile fixed call/text bar */
}

/* 2. Reset & base ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);
}

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  color:var(--ink-soft);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* room for the fixed mobile call bar */
  padding-bottom:var(--callbar-h);
}

img{max-width:100%; height:auto; display:block}
svg{display:block}

a{color:var(--blue-700); text-decoration:none}
a:hover{color:var(--blue-800); text-decoration:underline}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:700;
  line-height:1.16;
  color:var(--blue-900);
  margin:0 0 .5em;
  letter-spacing:-.015em;
}
h1{font-size:clamp(2.15rem,5.4vw,3.5rem)}
h2{font-size:clamp(1.75rem,3.8vw,2.6rem)}
h3{font-size:clamp(1.2rem,2vw,1.45rem); line-height:1.3}
h4{font-size:1.06rem; line-height:1.4}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

ul,ol{margin:0 0 1.15em; padding-left:1.15em}
li{margin:0 0 .5em}
ul.plain,ol.plain{list-style:none; padding:0; margin:0}
ul.plain li,ol.plain li{margin:0}

strong,b{font-weight:600; color:var(--ink)}
small{font-size:.86rem}
hr{border:0; border-top:1px solid var(--line); margin:2.5rem 0}

:focus-visible{
  outline:3px solid var(--blue-600);
  outline-offset:2px;
  border-radius:3px;
}

::selection{background:var(--green-300); color:var(--blue-900)}

/* 3. Layout ---------------------------------------------------------------- */
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)}
.wrap-narrow{max-width:var(--wrap-narrow)}

.section{padding:clamp(52px,7.5vw,92px) 0}
.section--tight{padding:clamp(38px,5vw,60px) 0}
.section--tint{background:var(--off-white)}
.section--blue{
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(58,40,198,.35), transparent 65%),
    var(--blue-900);
  color:#D8D9F0;
}
.section--blue h2,.section--blue h3{color:var(--white)}
.section--line{border-top:1px solid var(--line)}

.section-head{max-width:720px; margin:0 auto clamp(30px,4vw,48px); text-align:center}
.section-head p{color:var(--ink-muted); font-size:1.06rem; margin:0}
.section-head--left{margin-left:0; text-align:left}

.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--sans);
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-700);
  margin:0 0 .85em;
}
.eyebrow::before{
  content:""; width:26px; height:3px; border-radius:2px;
  background:var(--green-500);
}
.section--blue .eyebrow{color:var(--yellow-400)}
.section-head .eyebrow{justify-content:center}

.lead{font-size:1.12rem; color:var(--ink-soft)}

.grid{display:grid; gap:24px}
@media (min-width:640px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

/* 4. Buttons --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--sans); font-size:1rem; font-weight:600; line-height:1;
  padding:15px 26px;
  border:2px solid transparent;
  border-radius:var(--radius-sm);
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px; height:18px; flex:none}

/* The action button. The client's exact brand orange with a deep navy label —
   5.81:1, so it passes AA at any size, unlike the white-on-orange their current
   site uses (3.15:1). One treatment on light and dark backgrounds alike, which
   also keeps the buttons consistent with the price badges.
   Hover LIGHTENS rather than darkens: a darker orange would drop the navy label
   below AA (#C64C15 with navy is only 3.69:1). */
.btn-primary,
.btn-accent{background:var(--orange-500); color:var(--blue-900); box-shadow:var(--shadow-sm)}
.btn-primary:hover,
.btn-accent:hover{background:var(--orange-400); color:var(--blue-900); box-shadow:var(--shadow-md)}

.btn-outline{background:transparent; color:var(--blue-700); border-color:var(--blue-300)}
.btn-outline:hover{background:var(--blue-050); color:var(--blue-800); border-color:var(--blue-700)}

.btn-ghost-light{background:rgba(255,255,255,.08); color:var(--white); border-color:rgba(255,255,255,.4)}
.btn-ghost-light:hover{background:var(--white); color:var(--blue-900); border-color:var(--white)}

.btn-white{background:var(--white); color:var(--blue-800)}
.btn-white:hover{background:var(--blue-050); color:var(--blue-900)}

.btn-sm{padding:11px 18px; font-size:.94rem}
.btn-lg{padding:17px 32px; font-size:1.06rem}
.btn-block{width:100%}

.btn-row{display:flex; flex-wrap:wrap; gap:14px}
.btn-row--center{justify-content:center}
/* Stacked CTAs on small screens should share one full-width tap target size. */
@media (max-width:519px){
  .btn-row > .btn{width:100%}
}

/* Text link with arrow */
.link-arrow{
  display:inline-flex; align-items:center; gap:.4em;
  font-weight:600; color:var(--blue-700); text-decoration:none;
}
.link-arrow::after{content:"→"; transition:transform .16s ease}
.link-arrow:hover{text-decoration:none; color:var(--blue-800)}
.link-arrow:hover::after{transform:translateX(4px)}

/* Pills & badges */
.pill{
  display:inline-flex; align-items:center; gap:.45em;
  font-size:.82rem; font-weight:600; letter-spacing:.01em;
  padding:6px 13px; border-radius:999px;
  background:var(--blue-050); color:var(--blue-800);
  border:1px solid var(--blue-100);
}
.pill--green{background:var(--green-100); color:var(--green-700); border-color:var(--green-300)}
.pill--light{background:rgba(255,255,255,.12); color:#EDEDFB; border-color:rgba(255,255,255,.28)}

.price-tag{
  display:inline-flex; align-items:baseline; gap:.3em;
  font-family:var(--serif); font-weight:700; color:var(--orange-700);
  font-size:1.6rem; line-height:1;
}
.price-tag .price-from{
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted);
}
.price-tag .price-unit{
  font-family:var(--sans); font-size:.84rem; font-weight:600; color:var(--ink-muted);
}

/* 5. Header ---------------------------------------------------------------- */
.topbar{
  display:none;
  background:var(--blue-900);
  color:#C9CBEA;
  font-size:.85rem;
}
.topbar a{color:#C9CBEA; text-decoration:none}
.topbar a:hover{color:var(--white); text-decoration:underline}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:40px}
.topbar-list{display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0}
.topbar-list li{display:flex; align-items:center; gap:.45em; margin:0}
.topbar-social{display:flex; align-items:center; gap:14px}
.topbar-social a{display:inline-flex; opacity:.85; transition:opacity .16s ease}
.topbar-social a:hover{opacity:1}
.topbar-social svg{width:16px; height:16px; fill:currentColor}
@media (min-width:960px){.topbar{display:block}}

.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease;
}
.site-header.is-stuck{box-shadow:var(--shadow-sm)}

.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  min-height:var(--header-h);
}

.brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex:none}
.brand:hover{text-decoration:none}
.brand img{width:52px; height:34px; object-fit:contain}
.brand-text{display:flex; flex-direction:column; line-height:1.05}
.brand-name{
  font-family:var(--serif); font-weight:700; font-size:1.12rem;
  color:var(--blue-900); letter-spacing:-.01em; white-space:nowrap;
}
.brand-tag{
  font-family:var(--sans); font-size:.66rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--green-700);
  white-space:nowrap;
}

/* Desktop nav */
.nav{display:none}
.nav ul{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.nav li{margin:0; position:relative}
.nav > ul > li > a{
  display:flex; align-items:center; gap:.35em;
  padding:10px 13px; border-radius:var(--radius-sm);
  font-size:.96rem; font-weight:500; color:var(--ink-soft); text-decoration:none;
  transition:color .14s ease, background-color .14s ease;
}
.nav > ul > li > a:hover{color:var(--blue-700); background:var(--blue-050); text-decoration:none}
.nav a[aria-current="page"]{color:var(--blue-700); font-weight:600}
.nav .caret{width:9px; height:9px; fill:currentColor; opacity:.6; transition:transform .16s ease}
.nav .has-sub:hover .caret,.nav .has-sub:focus-within .caret{transform:rotate(180deg)}

/* Dropdown */
.subnav{
  position:absolute; top:calc(100% + 6px); left:0;
  min-width:248px; padding:8px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  display:block !important;
}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1; visibility:visible; transform:translateY(0)}
.subnav li{margin:0}
.subnav a{
  display:block; padding:9px 12px; border-radius:6px;
  font-size:.94rem; color:var(--ink-soft); text-decoration:none;
}
.subnav a:hover{background:var(--blue-050); color:var(--blue-700); text-decoration:none}
.subnav .subnav-price{float:right; font-size:.82rem; color:var(--green-700); font-weight:600}

.header-cta{display:none; align-items:center; gap:10px; flex:none}
.header-phone{
  display:flex; flex-direction:column; line-height:1.15; text-align:right;
  text-decoration:none;
}
.header-phone:hover{text-decoration:none}
.header-phone .hp-label{font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted)}
.header-phone .hp-number{font-size:1.05rem; font-weight:700; color:var(--blue-800)}

@media (min-width:960px){
  .nav{display:block}
  .header-cta{display:flex}
}

/* Mobile menu toggle */
.nav-toggle{
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--blue-050); color:var(--blue-800);
  border:1px solid var(--blue-100); border-radius:var(--radius-sm);
  padding:10px 14px; font-family:var(--sans); font-size:.9rem; font-weight:600;
  cursor:pointer;
}
.nav-toggle-bars{display:flex; flex-direction:column; gap:3px; width:16px}
.nav-toggle-bars span{display:block; height:2px; background:currentColor; border-radius:2px; transition:transform .2s ease, opacity .2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (min-width:960px){.nav-toggle{display:none}}

/* Mobile drawer */
.mobile-nav{
  display:none;
  border-top:1px solid var(--line);
  background:var(--white);
  max-height:calc(100vh - var(--header-h) - var(--callbar-h));
  overflow-y:auto;
}
.mobile-nav.is-open{display:block}
.mobile-nav ul{list-style:none; margin:0; padding:10px 0 18px}
.mobile-nav li{margin:0}
/* :not(.btn) so the drawer's quote button keeps its own centred button styling */
.mobile-nav a:not(.btn){
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 4px; border-bottom:1px solid var(--line-soft);
  font-size:1rem; font-weight:500; color:var(--ink); text-decoration:none;
}
.mobile-nav a:not(.btn):hover{color:var(--blue-700); text-decoration:none}
.mobile-nav .mn-sub a{padding-left:18px; font-size:.94rem; color:var(--ink-muted)}
.mobile-nav .mn-price{font-size:.85rem; font-weight:600; color:var(--green-700)}
.mobile-nav .mn-cta{padding-top:18px}
@media (min-width:960px){.mobile-nav,.mobile-nav.is-open{display:none}}

/* Fixed mobile call/text bar */
.call-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:grid; grid-template-columns:1fr 1fr;
  height:var(--callbar-h);
  background:var(--blue-900);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -4px 18px rgba(14,10,69,.18);
}
.call-bar a{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  color:var(--white); font-size:1rem; font-weight:600; text-decoration:none;
}
.call-bar a:hover{text-decoration:none; color:var(--white)}
.call-bar a + a{border-left:1px solid rgba(255,255,255,.16)}
.call-bar a.cb-text{background:var(--orange-500); color:var(--blue-900)}
.call-bar svg{width:19px; height:19px; fill:currentColor}
@media (min-width:960px){
  .call-bar{display:none}
  body{padding-bottom:0}
}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blue-900); color:var(--white);
  padding:12px 18px; border-radius:0 0 var(--radius-sm) 0; font-weight:600;
}
.skip-link:focus{left:0; color:var(--white)}

/* 6. Hero ------------------------------------------------------------------ */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(237,105,52,.16), transparent 62%),
    linear-gradient(168deg, #FFFFFF 0%, var(--blue-050) 58%, #E9E9F8 100%);
  padding:clamp(44px,6vw,84px) 0 clamp(52px,7vw,96px);
}
/* faint "route" line motif */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(90deg, rgba(43,43,168,.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(43,43,168,.05) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(70% 60% at 20% 30%, #000, transparent 75%);
  mask-image:radial-gradient(70% 60% at 20% 30%, #000, transparent 75%);
  pointer-events:none;
}
.hero > .wrap{position:relative; z-index:1}

.hero-grid{display:grid; gap:clamp(32px,5vw,56px); align-items:center}
@media (min-width:920px){
  .hero-grid{grid-template-columns:1.06fr .94fr}
}

.hero h1{margin-bottom:.35em}
.hero h1 .h1-accent{
  display:block;
  position:relative;
  color:var(--blue-800);
  padding-bottom:.06em;
}
.hero h1 .h1-accent::after{
  content:"";
  position:absolute; left:0; right:18%; bottom:0;
  height:.085em; border-radius:99px;
  background:var(--orange-500);
  transform:scaleX(0); transform-origin:left center;
}
.js .hero h1 .h1-accent::after{animation:swash .9s .45s cubic-bezier(.2,.75,.3,1) forwards}
@keyframes swash{to{transform:scaleX(1)}}
.hero-sub{
  font-size:clamp(1.06rem,1.9vw,1.22rem);
  color:var(--ink-soft);
  max-width:36em;
  margin-bottom:1.6em;
}
.hero-trust{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:26px 0 0; padding:0; list-style:none;
}
.hero-trust li{margin:0}

.hero-media{position:relative}
.hero-media img{
  width:100%;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  aspect-ratio:4/5;
  object-fit:cover;
}
.hero-badge{
  position:absolute; left:-6px; bottom:22px;
  display:flex; align-items:center; gap:12px;
  background:var(--white);
  border:1px solid var(--line);
  border-left:5px solid var(--orange-500);
  border-radius:var(--radius);
  padding:14px 20px 14px 16px;
  box-shadow:var(--shadow-md);
  max-width:min(300px,86%);
}
.hero-badge .hb-price{
  font-family:var(--serif); font-size:1.7rem; font-weight:700; color:var(--blue-800); line-height:1;
}
.hero-badge .hb-copy{font-size:.86rem; line-height:1.35; color:var(--ink-muted)}
.hero-badge .hb-copy strong{display:block; color:var(--ink); font-size:.94rem}
@media (min-width:920px){
  .hero-badge{left:-28px}
}

/* Subpage hero (services, locations, about, contact) */
.page-hero{
  background:
    radial-gradient(900px 420px at 92% 0%, rgba(237,105,52,.16), transparent 60%),
    linear-gradient(160deg, var(--blue-900) 0%, var(--blue-800) 62%, var(--blue-700) 100%);
  color:#D7D8F1;
  padding:clamp(30px,4vw,44px) 0 clamp(46px,6vw,72px);
}
.page-hero h1{color:var(--white); max-width:18em}
.page-hero .eyebrow{color:var(--yellow-400)}
.page-hero-sub{font-size:clamp(1.02rem,1.7vw,1.16rem); max-width:44em; color:#C6C8E8; margin-bottom:1.7em}
.page-hero .btn-row{margin-top:6px}

/* 7. Breadcrumbs ----------------------------------------------------------- */
.breadcrumbs{font-size:.86rem; margin:0 0 clamp(18px,2.5vw,26px)}
.breadcrumbs ol{display:flex; flex-wrap:wrap; align-items:center; gap:.45em; list-style:none; margin:0; padding:0}
.breadcrumbs li{display:flex; align-items:center; gap:.45em; margin:0; color:#AFB2DC}
.breadcrumbs li + li::before{content:"/"; opacity:.5}
.breadcrumbs a{color:#C6C8E8; text-decoration:none}
.breadcrumbs a:hover{color:var(--white); text-decoration:underline}
.breadcrumbs [aria-current="page"]{color:var(--white); font-weight:500}
/* light-background variant */
.breadcrumbs--light li{color:var(--ink-muted)}
.breadcrumbs--light a{color:var(--blue-700)}
.breadcrumbs--light a:hover{color:var(--blue-800)}
.breadcrumbs--light [aria-current="page"]{color:var(--ink)}

/* 8. Cards ----------------------------------------------------------------- */
.card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--blue-100)}

/* Service card */
.service-card .sc-media{position:relative; overflow:hidden; background:var(--blue-050)}
.service-card .sc-media img{
  width:100%; aspect-ratio:16/11; object-fit:cover;
  transition:transform .5s ease;
}
.service-card:hover .sc-media img{transform:scale(1.04)}
.service-card .sc-price{
  position:absolute; top:14px; right:14px;
  background:var(--orange-500); color:var(--blue-900);
  font-size:.92rem; font-weight:700;
  padding:7px 14px; border-radius:999px;
  box-shadow:var(--shadow-sm);
}
.service-card .sc-body{padding:24px 24px 26px; display:flex; flex-direction:column; flex:1}
.service-card h3{margin-bottom:.4em}
.service-card h3 a{color:inherit; text-decoration:none}
.service-card h3 a:hover{color:var(--blue-700); text-decoration:none}
.service-card p{color:var(--ink-muted); font-size:.98rem; margin-bottom:1.1em}
.service-card .sc-list{margin:0 0 1.4em; padding:0; list-style:none}
.service-card .sc-list li{
  position:relative; padding-left:1.5em; margin:0 0 .45em;
  font-size:.94rem; color:var(--ink-soft);
}
.service-card .sc-list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:2px;
  background:var(--green-500);
}
.service-card .sc-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* Pillar card ("Why Middle Man Movers") */
.pillar{
  background:var(--white);
  border:1px solid var(--line);
  border-top:3px solid var(--green-500);
  border-radius:var(--radius);
  padding:28px 24px 26px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.pillar:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.pillar-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:50px; height:50px; margin-bottom:16px;
  border-radius:12px;
  background:var(--blue-050); color:var(--blue-700);
}
.pillar-icon svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.pillar h3{font-size:1.16rem; margin-bottom:.45em}
.pillar p{font-size:.96rem; color:var(--ink-muted); margin:0}

/* Area card */
.area-card{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:20px 22px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.area-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--blue-100); text-decoration:none}
.area-card .ac-name{
  font-family:var(--serif); font-size:1.14rem; font-weight:700; color:var(--blue-900);
  display:block; line-height:1.25;
}
.area-card .ac-meta{font-size:.86rem; color:var(--ink-muted)}
.area-card .ac-arrow{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-050); color:var(--blue-700); font-weight:700;
  transition:background-color .18s ease, color .18s ease, transform .18s ease;
}
.area-card:hover .ac-arrow{background:var(--blue-700); color:var(--white); transform:translateX(3px)}

/* Review card */
.review{
  display:flex; flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 26px 24px;
  box-shadow:var(--shadow-xs);
}
.review .stars{display:flex; gap:3px; margin-bottom:14px; color:var(--orange-500)}
.review .stars svg{width:18px; height:18px; fill:currentColor}
.review blockquote{
  margin:0 0 18px;
  font-family:var(--serif); font-size:1.08rem; line-height:1.55; color:var(--blue-900);
}
.review figcaption{margin-top:auto; font-size:.9rem; color:var(--ink-muted)}
.review figcaption strong{display:block; color:var(--ink); font-size:.98rem}

/* Stat strip */
.stat-strip{
  display:grid; gap:2px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
@media (min-width:640px){.stat-strip{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.stat-strip{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--white); padding:24px 22px; text-align:center}
.stat .stat-value{
  font-family:var(--serif); font-size:1.7rem; font-weight:700; color:var(--blue-800);
  line-height:1.1; display:block; margin-bottom:4px;
}
.stat .stat-label{font-size:.9rem; color:var(--ink-muted)}

/* 9. Steps, checklists, prose --------------------------------------------- */
.steps{counter-reset:step; display:grid; gap:26px; list-style:none; margin:0; padding:0}
@media (min-width:800px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps--4{grid-template-columns:1fr}
@media (min-width:800px){.steps--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.steps--4{grid-template-columns:repeat(4,1fr)}}
.steps li{position:relative; margin:0; padding-top:8px}
.steps li::before{
  counter-increment:step; content:counter(step);
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-bottom:16px;
  border-radius:50%;
  background:var(--blue-700); color:var(--white);
  font-family:var(--serif); font-size:1.16rem; font-weight:700;
  box-shadow:0 0 0 6px var(--blue-050);
}
.steps h3{font-size:1.12rem; margin-bottom:.4em}
.steps p{font-size:.97rem; color:var(--ink-muted); margin:0}

.checklist{list-style:none; margin:0 0 1.4em; padding:0}
.checklist li{position:relative; padding-left:2em; margin:0 0 .7em; color:var(--ink-soft)}
.checklist li::before{
  content:"";
  position:absolute; left:0; top:.36em;
  width:18px; height:18px; border-radius:50%;
  background:var(--green-100);
  border:1px solid var(--green-300);
}
.checklist li::after{
  content:"";
  position:absolute; left:6px; top:.63em;
  width:5px; height:9px;
  border:solid var(--green-700); border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.prose{max-width:70ch}
.prose h2{margin-top:1.6em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.5em}

.split{display:grid; gap:clamp(28px,4vw,52px); align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--media-first .split-media{order:-1}
}
.split-media img{border-radius:var(--radius-lg); box-shadow:var(--shadow-md); width:100%}

.note{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--amber-100);
  border:1px solid #F0DDA8;
  border-radius:var(--radius);
  padding:18px 20px;
  font-size:.97rem; color:#5F4600;
}
.note strong{color:var(--amber-700)}
.note .note-icon{flex:none; font-size:1.2rem; line-height:1.2}

/* TODO marker — internal placeholder flag, remove before client hand-off */
.todo{
  display:inline-block;
  font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#8A3A00; background:#FFE9D6;
  border:1px dashed #E8A87C; border-radius:4px;
  padding:2px 7px; vertical-align:middle;
}

/* 10. FAQ ------------------------------------------------------------------ */
.faq{max-width:840px; margin:0 auto}
.faq-item{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:12px;
  overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.faq-item[open]{border-color:var(--blue-100); box-shadow:var(--shadow-sm)}
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:19px 22px;
  cursor:pointer;
  list-style:none;
  font-family:var(--serif); font-size:1.06rem; font-weight:700; color:var(--blue-900);
  line-height:1.35;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--blue-700)}
.faq-item summary::after{
  content:"+";
  flex:none;
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--blue-050); color:var(--blue-700);
  font-family:var(--sans); font-size:1.15rem; font-weight:600; line-height:1;
  transition:transform .2s ease, background-color .2s ease, color .2s ease;
}
.faq-item[open] summary::after{
  content:"−";
  background:var(--blue-700); color:var(--white);
  transform:rotate(180deg);
}
.faq-answer{padding:0 22px 20px; color:var(--ink-soft); font-size:1rem}
.faq-answer p:last-child{margin-bottom:0}

/* 11. Booking callout & CTA band ------------------------------------------ */
.booking-callout{
  display:grid; gap:28px; align-items:center;
  background:linear-gradient(135deg, var(--green-100) 0%, #F4FAEA 100%);
  border:1px solid var(--green-300);
  border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,44px);
}
@media (min-width:880px){
  .booking-callout{grid-template-columns:1fr auto}
}
.booking-callout h2{margin-bottom:.4em; font-size:clamp(1.5rem,3vw,2.05rem)}
.booking-callout p{color:#3F5227; margin:0; max-width:52ch}

.cta-band{
  position:relative;
  background:
    radial-gradient(760px 380px at 15% 110%, rgba(237,105,52,.20), transparent 60%),
    linear-gradient(140deg, var(--blue-900) 0%, var(--blue-800) 100%);
  color:#D3D5EF;
  padding:clamp(48px,6.5vw,80px) 0;
}
.cta-band .eyebrow{color:var(--yellow-400)}
.cta-band h2{color:var(--white); margin-bottom:.45em}
.cta-band .lead{color:#C4C7E7; max-width:48em}
.cta-grid{display:grid; gap:34px; align-items:center}
@media (min-width:900px){.cta-grid{grid-template-columns:1.15fr .85fr}}
.cta-contacts{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.cta-contacts li{margin:0}
.cta-contacts a{
  display:flex; align-items:center; gap:14px;
  padding:15px 18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);
  color:var(--white); text-decoration:none;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.cta-contacts a:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); transform:translateX(3px); text-decoration:none}
.cta-contacts svg{width:20px; height:20px; fill:var(--orange-500); flex:none}
.cta-contacts .cc-label{font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:#A9ADD8; display:block; line-height:1.4}
.cta-contacts .cc-value{font-weight:600; font-size:1.02rem; line-height:1.3}

/* Light variant — same contact list on a white background (contact page) */
.cta-contacts--light a{
  background:var(--blue-050);
  border-color:var(--blue-100);
  color:var(--ink);
}
.cta-contacts--light a:hover{background:var(--blue-100); border-color:var(--blue-300)}
.cta-contacts--light svg{fill:var(--blue-700)}
.cta-contacts--light .cc-label{color:var(--ink-muted)}
.cta-contacts--light a.is-whatsapp{background:var(--green-100); border-color:var(--green-300)}
.cta-contacts--light a.is-whatsapp:hover{background:var(--green-300); border-color:var(--green-600)}
.cta-contacts--light a.is-whatsapp svg{fill:var(--green-700)}

/* 12. Forms & map ---------------------------------------------------------- */
.form-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(24px,3.5vw,36px);
  box-shadow:var(--shadow-md);
}
.field{margin-bottom:18px}
.field label{
  display:block; margin-bottom:7px;
  font-size:.9rem; font-weight:600; color:var(--ink);
}
.field .req{color:#B3261E}
.field input,.field select,.field textarea{
  width:100%;
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  padding:12px 14px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--blue-600);
  box-shadow:0 0 0 3px var(--blue-100);
}
.field textarea{min-height:120px; resize:vertical}
.field-row{display:grid; gap:18px}
@media (min-width:620px){.field-row{grid-template-columns:1fr 1fr}}
.form-hint{font-size:.86rem; color:var(--ink-muted); margin-top:10px}

.map-embed{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  line-height:0;
}
.map-embed iframe{width:100%; height:380px; border:0; display:block}

/* 13. Footer --------------------------------------------------------------- */
.site-footer{
  background:var(--blue-900);
  color:#AFB3D9;
  font-size:.95rem;
  padding:clamp(44px,5.5vw,68px) 0 0;
}
.site-footer a{color:#C9CBEA; text-decoration:none}
.site-footer a:hover{color:var(--white); text-decoration:underline}
.footer-grid{display:grid; gap:36px}
@media (min-width:720px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
@media (min-width:1000px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1.1fr}}

/* The mark is dark blue artwork, so it needs a light tile on the dark footer */
.footer-brand img{
  width:auto; height:76px; object-fit:contain;
  background:var(--white);
  padding:14px 18px;
  border-radius:var(--radius);
  margin-bottom:18px;
}
.footer-brand .fb-name{
  font-family:var(--serif); font-size:1.28rem; font-weight:700; color:var(--white);
  display:block; margin-bottom:6px;
}
.footer-brand p{max-width:34ch; margin-bottom:1em}
.site-footer address{font-style:normal}
.footer-nap{list-style:none; margin:0 0 18px; padding:0}
.footer-nap li{display:flex; gap:10px; align-items:flex-start; margin:0 0 8px}
.footer-nap svg{width:17px; height:17px; fill:var(--green-500); flex:none; margin-top:4px}

.footer-col h3{
  font-family:var(--sans); font-size:.8rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--white);
  margin-bottom:16px;
}
.footer-col ul{list-style:none; margin:0; padding:0}
.footer-col li{margin:0 0 10px}

.footer-social{display:flex; gap:12px; margin-top:6px}
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  transition:background-color .18s ease, transform .18s ease;
}
.footer-social a:hover{background:var(--orange-500); transform:translateY(-2px)}
.footer-social a:hover svg{fill:var(--blue-900)}
.footer-social svg{width:17px; height:17px; fill:#D6D8F0; transition:fill .18s ease}

.footer-bottom{
  margin-top:clamp(34px,4vw,52px);
  border-top:1px solid rgba(255,255,255,.12);
  padding:22px 0 26px;
  display:flex; flex-wrap:wrap; gap:12px 24px;
  align-items:center; justify-content:space-between;
  font-size:.86rem; color:#8D92C0;
}
.footer-bottom p{margin:0}
.footer-bottom ul{display:flex; flex-wrap:wrap; gap:18px; list-style:none; margin:0; padding:0}
.footer-bottom li{margin:0}

/* 14. Utilities & motion --------------------------------------------------- */
.text-center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.mt-2{margin-top:1.4rem}
.mt-3{margin-top:2rem}
.nowrap{white-space:nowrap}
.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Scroll reveal — elements start hidden only when JS is present (see main.js) */
.js .reveal{opacity:0; transform:translateY(18px)}
.js .reveal.is-visible{
  opacity:1; transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}

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

@media print{
  .site-header,.mobile-nav,.call-bar,.topbar,.cta-band,.btn-row{display:none !important}
  body{padding-bottom:0; font-size:12pt; color:#000}
  a{color:#000; text-decoration:underline}
}

/* 15. Photo heroes ---------------------------------------------------------
   Location pages lead with a real photograph of the area instead of a flat
   blue slab. The image is a real <img> rather than a CSS background so it can
   carry alt text, be prioritised for LCP, and be parallaxed cheaply.
   -------------------------------------------------------------------------- */
.page-hero--photo{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--blue-900);
  padding-top:clamp(34px,5vw,56px);
  padding-bottom:clamp(52px,7vw,84px);
}
.page-hero-bg{
  position:absolute; inset:-8% 0 -8% 0;   /* extra bleed so parallax never shows an edge */
  width:100%; height:116%;
  object-fit:cover;
  object-position:var(--hero-pos, center 50%);
  z-index:-2;
  will-change:transform;
}
/* Scrim: dark enough on the left for the text, clearing toward the right so
   the photograph is still legible as a photograph. */
.page-hero--photo::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg,
      rgba(14,10,69,.94) 0%,
      rgba(14,10,69,.86) 32%,
      rgba(14,10,69,.62) 58%,
      rgba(14,10,69,.44) 100%),
    linear-gradient(180deg, rgba(14,10,69,.35) 0%, transparent 30%);
}
@media (max-width:719px){
  /* On narrow screens the text spans the full width, so the scrim must too. */
  /* .66 is the lightest this can go: composited over the brightest part of any
     of these photos it still leaves white body text at ~6.6:1. */
  .page-hero--photo::after{
    background:linear-gradient(180deg, rgba(14,10,69,.62) 0%, rgba(14,10,69,.74) 45%, rgba(14,10,69,.86) 100%);
  }
}
.page-hero--photo .wrap{position:relative; z-index:1}
.page-hero--photo h1,
.page-hero--photo .page-hero-sub{max-width:min(100%, 20em)}
.page-hero--photo .page-hero-sub{max-width:min(100%, 34em)}

/* Small caption crediting what the photo shows — helps the page feel local */
.hero-caption{
  position:absolute; right:var(--gutter); bottom:14px; z-index:1;
  font-size:.74rem; letter-spacing:.04em;
  color:rgba(255,255,255,.72);
  background:rgba(14,10,69,.42);
  border:1px solid rgba(255,255,255,.16);
  padding:5px 11px; border-radius:99px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
@media (max-width:719px){.hero-caption{display:none}}

/* 16. Motion ---------------------------------------------------------------
   Two kinds, deliberately:
     · enter-triggered  — reveals, counters, the route line. Fire once, cheap.
     · scroll-coupled   — parallax only, driven by one rAF loop in main.js.
   Everything animates transform/opacity only, so nothing triggers layout and
   nothing shifts (no CLS). All of it collapses under prefers-reduced-motion.
   -------------------------------------------------------------------------- */

/* Staggered children — each direct child of a .reveal-stagger enters in turn */
.js .reveal-stagger > *{opacity:0; transform:translateY(22px)}
.js .reveal-stagger.is-visible > *{
  opacity:1; transform:none;
  transition:opacity .65s cubic-bezier(.2,.7,.3,1), transform .65s cubic-bezier(.2,.7,.3,1);
}
.js .reveal-stagger.is-visible > *:nth-child(1){transition-delay:.00s}
.js .reveal-stagger.is-visible > *:nth-child(2){transition-delay:.09s}
.js .reveal-stagger.is-visible > *:nth-child(3){transition-delay:.18s}
.js .reveal-stagger.is-visible > *:nth-child(4){transition-delay:.27s}
.js .reveal-stagger.is-visible > *:nth-child(5){transition-delay:.36s}
.js .reveal-stagger.is-visible > *:nth-child(6){transition-delay:.45s}

/* Media that eases in from a slight scale — used on the split photos */
.js .reveal-media{overflow:hidden}
.js .reveal-media img{transform:scale(1.08); transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.js .reveal-media.is-visible img{transform:scale(1)}

/* Parallax: main.js writes --shift (px) on each [data-parallax] element */
.js [data-parallax]{transform:translate3d(0, var(--shift, 0px), 0)}

/* Count-up numbers hold their width so the layout can't jitter as digits change */
.stat .stat-value{font-variant-numeric:tabular-nums}

/* The route line — a moving company's journey, drawn as you reach the steps.
   Sits behind the numbered markers on the "how it works" strip. */
.steps-wrap{position:relative}
.route-line{
  display:none;
  position:absolute; left:22px; right:22px; top:22px;
  height:2px; z-index:0; pointer-events:none;
  /* Starts under the first marker and trails off rather than stopping dead at
     the edge — reads as a journey continuing, and works for 3- or 4-step rows. */
  -webkit-mask-image:linear-gradient(90deg,#000 0 86%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0 86%,transparent 100%);
}
@media (min-width:800px){.route-line{display:block}}
.route-line svg{width:100%; height:2px; overflow:visible}
.route-line path{
  fill:none;
  stroke:var(--green-500);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:5 9;
  stroke-dashoffset:600;
  opacity:.55;
}
.js .route-line.is-visible path{
  animation:draw-route 1.6s .2s cubic-bezier(.3,.7,.4,1) forwards;
}
@keyframes draw-route{to{stroke-dashoffset:0}}
.steps li{position:relative; z-index:1}
.steps li::before{position:relative; z-index:2}

/* A small truck that rides the route line into place */
.route-truck{
  position:absolute; top:-11px; left:0; z-index:2;
  width:26px; height:26px;
  color:var(--orange-500);
  opacity:0;
}
.js .route-line.is-visible .route-truck{
  animation:drive 1.8s .2s cubic-bezier(.35,.6,.4,1) forwards;
}
@keyframes drive{
  0%   {opacity:0; left:0}
  12%  {opacity:1}
  88%  {opacity:1}
  100% {opacity:0; left:calc(100% - 26px)}
}

@media (prefers-reduced-motion:reduce){
  .js .reveal-stagger > *,
  .js .reveal-stagger.is-visible > *{opacity:1; transform:none; transition:none}
  .js .reveal-media img{transform:none; transition:none}
  .js [data-parallax]{transform:none !important}
  .js .hero h1 .h1-accent::after{animation:none; transform:scaleX(1)}
  .js .route-line.is-visible path{animation:none; stroke-dashoffset:0}
  .route-truck,.js .route-line.is-visible .route-truck{animation:none; opacity:0}
}