/* ==========================================================================
   ANYPLACE MOVERS — Brand & Design System
   "Working-class premium." Industrial grotesque type, hard edges, hi-vis
   accents, warm paper ground. See BRAND.md for usage rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Core palette */
  --paper:        #F5F2EC;  /* warm off-white ground */
  --paper-2:      #EBE7DE;  /* recessed surface */
  --concrete:     #DCD6C9;  /* hairlines, dividers */
  --white:        #FFFFFF;

  --ink:          #0D1413;  /* headlines, borders */
  --ink-2:        #37423F;  /* body copy */
  --ink-muted:    #5A6663;  /* captions, meta */

  --teal:         #0E7C74;  /* primary brand (from their gear) */
  --teal-deep:    #0A3F3B;
  --teal-dark:    #072B29;  /* dark sections */
  --teal-bright:  #17B3A5;  /* accents on dark */
  --teal-wash:    #E2EFED;

  --amber:        #FFB020;  /* hi-vis CTA — the "safety vest" accent */
  --amber-deep:   #E08A00;
  --amber-wash:   #FFF3DC;

  /* Type */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-body:    'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Rhythm */
  --wrap:         1200px;
  --gutter:       clamp(20px, 5vw, 40px);
  --section:      clamp(44px, 5.8vw, 78px);
  --radius:       0px;        /* hard edges on purpose */
  --border:       2px solid var(--ink);
  --border-thin:  1.5px solid var(--ink);
  --shadow-hard:  5px 5px 0 var(--ink);
  --shadow-hard-sm: 3px 3px 0 var(--ink);
  --shadow-teal:  5px 5px 0 var(--teal-deep);

  --ease:         cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 124px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film-grain overlay — the "grit". Sits above everything, eats no clicks. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a { color: var(--teal-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--teal); }

::selection { background: var(--amber); color: var(--ink); }

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

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--amber); color: var(--ink);
  padding: 12px 20px; border: var(--border); font-weight: 800;
  font-family: var(--font-mono); font-size: 13px; text-transform: uppercase;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

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

/* --------------------------------------------------------------------------
   3. TYPE SCALE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 88, 'wght' 800;
  line-height: .96;
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1, .h1 { font-size: clamp(2.6rem, 7.2vw, 5.1rem); }
h2, .h2 { font-size: clamp(2.05rem, 5vw, 3.5rem); }
h3, .h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.05; }
h4, .h4 { font-size: 1.08rem; letter-spacing: .01em; }

p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.05rem, 1.7vw, 1.24rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 66ch;
}

.muted { color: var(--ink-muted); }
.tight { max-width: 54ch; }

/* Mono micro-label — the "dispatch tag" that ties the system together */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: '';
  width: 28px; height: 3px;
  background: var(--amber);
  flex: none;
}
.eyebrow--light { color: var(--teal-bright); }
.eyebrow--plain::before { display: none; }

.num {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--teal);
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 860px; }

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(32px, 4.2vw, 52px); }

.section--dark {
  background: var(--teal-dark);
  color: var(--paper);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark .lead, .section--dark p { color: #C6D4D1; }
.section--dark a { color: var(--teal-bright); }

.section--teal { background: var(--teal-deep); color: var(--paper); }
.section--teal h2, .section--teal h3 { color: var(--white); }
.section--teal p, .section--teal .lead { color: #CFE0DD; }

.section--paper2 { background: var(--paper-2); }

.grid { display: grid; gap: clamp(16px, 2vw, 26px); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(26px, 3.8vw, 56px);
  align-items: center;
}
.split--text-right { grid-template-columns: .95fr 1.05fr; }

.stack-lg > * + * { margin-top: 28px; }
.center { text-align: center; margin-inline: auto; }
.center p, .center .lead { margin-inline: auto; }

.section-head { margin-bottom: clamp(24px, 3.2vw, 42px); max-width: 760px; }
.section-head.center { max-width: 760px; }

@media (max-width: 980px) {
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: repeat(2, 1fr); }
  .split, .split--text-right { grid-template-columns: 1fr; }
  .split .media { order: -1; }
}
@media (max-width: 620px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   5. HAZARD STRIPE / DIVIDERS
   -------------------------------------------------------------------------- */
.stripe {
  height: 10px;
  background: repeating-linear-gradient(45deg,
    var(--ink) 0 14px, var(--amber) 14px 28px);
}
.stripe--teal {
  background: repeating-linear-gradient(45deg,
    var(--teal-deep) 0 14px, var(--teal-bright) 14px 28px);
}
.rule { height: 2px; background: var(--ink); opacity: .12; border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 92;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border: var(--border);
  background: var(--amber);
  color: var(--ink);
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), background .18s var(--ease);
  line-height: 1;
  text-align: center;
}
.btn:hover {
  background: var(--amber-deep);
  color: var(--ink);
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }

.btn--ghost { background: transparent; box-shadow: var(--shadow-hard-sm); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--teal { background: var(--teal); color: var(--white); }
.btn--teal:hover { background: var(--teal-deep); color: var(--white); }

.btn--light {
  background: var(--paper); color: var(--ink);
  border-color: var(--paper); box-shadow: 5px 5px 0 var(--teal-bright);
}
.btn--light:hover { background: var(--white); box-shadow: 3px 3px 0 var(--teal-bright); }

.btn--outline-light {
  background: transparent; color: var(--paper);
  border-color: var(--paper); box-shadow: none;
}
.btn--outline-light:hover { background: var(--paper); color: var(--ink); }

.btn--lg { padding: 19px 34px; font-size: 1.12rem; }
.btn--sm { padding: 11px 18px; font-size: .84rem; box-shadow: var(--shadow-hard-sm); }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.btn-row--center { justify-content: center; }

.link-arrow {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--teal-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid var(--amber);
  padding-bottom: 3px;
}
.link-arrow span { transition: transform .18s var(--ease); }
.link-arrow:hover span { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   7. HEADER / NAV
   -------------------------------------------------------------------------- */
/* The 10% offer rides at the very top and stays there. It is the single
   highest-converting thing on the site, so it sticks with the nav rather than
   being repeated as a band halfway down every page. */
.site-top {
  position: sticky;
  top: 0;
  z-index: 100;
}

.offer-bar {
  background: var(--amber);
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
}
.offer-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 38px;
  padding-block: 7px;
  text-align: center;
}
.offer-bar p {
  margin: 0;
  max-width: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 90;
  font-size: clamp(.86rem, 1.5vw, 1.02rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1.15;
}
.offer-bar .offer-sub {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .09em;
  color: #5A4104;
  text-transform: uppercase;
  margin-left: 10px;
  padding-left: 12px;
  border-left: 2px solid rgba(90, 65, 4, .35);
  white-space: nowrap;
}
.offer-bar a.offer-cta {
  flex: none;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  padding: 7px 13px;
  white-space: nowrap;
}
.offer-bar a.offer-cta:hover { background: var(--teal-dark); color: var(--amber); }
@media (max-width: 760px) {
  .offer-bar .offer-sub { display: none; }
  .offer-bar .wrap { gap: 10px; min-height: 34px; }
  .offer-bar a.offer-cta { padding: 6px 10px; font-size: .62rem; letter-spacing: .08em; }
}
/* Keep the offer on one line on a phone — two lines of sticky bar eats the
   top of every screen for the whole visit. */
@media (max-width: 440px) {
  .offer-bar p { font-size: .69rem; letter-spacing: 0; }
  .offer-bar .wrap { gap: 8px; padding-block: 6px; }
  .offer-bar a.offer-cta { padding: 5px 8px; font-size: .58rem; letter-spacing: .05em; }
}

.site-header {
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 74px;
}

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; }
.logo img { width: 44px; height: 44px; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 84, 'wght' 800;
  font-size: 1.32rem;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.logo-sub {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 4px;
}

.nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); }
.nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: 'wdth' 90;
  font-size: .89rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.nav a:hover { border-bottom-color: var(--amber); color: var(--ink); }
.nav a[aria-current="page"] { border-bottom-color: var(--teal); }

.header-cta { display: flex; align-items: center; gap: 14px; flex: none; }
.header-phone {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 88;
  font-size: 1.02rem;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.header-phone:hover { color: var(--teal); }

.nav-toggle {
  display: none;
  background: var(--ink);
  border: var(--border);
  color: var(--paper);
  width: 46px; height: 46px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: none;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ''; display: block; width: 20px; height: 2.5px; background: var(--paper);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after  { transform: translateY(3.5px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(0); }

@media (max-width: 1060px) {
  .nav-toggle { display: flex; }
  .header-phone { display: none; }
  .nav {
    position: fixed;
    inset: 0 0 auto;
    top: 0;
    height: 100dvh;
    background: var(--teal-dark);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 118px var(--gutter) 48px;
    transform: translateY(-100%);
    transition: transform .32s var(--ease);
    overflow-y: auto;
    z-index: 99;
  }
  .nav.is-open { transform: translateY(0); }
  .nav a {
    color: var(--paper);
    font-size: 1.7rem;
    padding: 16px 0;
    border-bottom: 1.5px solid rgba(255,255,255,.14);
  }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--amber); border-bottom-color: rgba(255,255,255,.14); }
  .nav .nav-foot {
    margin-top: 28px;
    display: grid;
    gap: 14px;
  }
  .site-header .wrap { min-height: 66px; }
  .header-cta .btn { display: none; }
  /* The drawer is a child of the sticky header, so it paints above the
     header's static children. Lift the logo and the close button back on top
     or there is no visible way to shut the menu. */
  .site-header .logo,
  .site-header .header-cta { position: relative; z-index: 100; }

  /* Over the open drawer the header goes transparent, so the wordmark needs
     its light treatment or it is dark ink on dark teal. */
  .nav-open .site-header { background: transparent; border-bottom-color: transparent; }
  .nav-open .site-header .logo,
  .nav-open .site-header .logo-name { color: var(--paper); }
  .nav-open .site-header .logo-sub { color: var(--teal-bright); }
}
@media (min-width: 1061px) { .nav-foot { display: none; } }

/* --------------------------------------------------------------------------
   8. MOBILE ACTION BAR — the local-service conversion workhorse
   -------------------------------------------------------------------------- */
.mobile-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 98;
  display: none;
  border-top: 2px solid var(--ink);
  background: var(--paper);
}
.mobile-bar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 11px 4px calc(11px + env(safe-area-inset-bottom));
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 88;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-right: 2px solid var(--ink);
}
.mobile-bar a:last-child { border-right: 0; }
.mobile-bar a.is-primary { background: var(--amber); }
.mobile-bar svg { width: 19px; height: 19px; }
.mobile-bar .bar-note {
  display: block;
  width: 100%;
  background: var(--teal-dark);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  padding: 5px 8px;
  border: 0;
}
@media (max-width: 760px) {
  .mobile-bar { display: block; }
  .mobile-bar .bar-actions { display: flex; }
  body { padding-bottom: 76px; }
}

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--paper);
  padding-block: clamp(32px, 4vw, 56px) clamp(38px, 4.8vw, 68px);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--concrete) 1px, transparent 1px),
    linear-gradient(90deg, var(--concrete) 1px, transparent 1px);
  background-size: 58px 58px;
  opacity: .5;
  mask-image: radial-gradient(ellipse 90% 70% at 70% 20%, #000 20%, transparent 75%);
}
.hero .wrap { position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.24fr .76fr;
  gap: clamp(28px, 3.6vw, 52px);
  align-items: center;
}
.hero h1 { margin-bottom: 22px; }
/* Teal word with a hi-vis bar struck through its baseline. Painted as the
   element's own background so it can't fall behind the hero backdrop. */
.hero h1 em {
  font-style: normal;
  color: var(--teal);
  white-space: nowrap;
  background: linear-gradient(to top, var(--amber) 0 .13em, transparent .13em);
  padding-inline: .04em;
}

.hero-tag {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 78;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--teal-deep);
  border-left: 5px solid var(--amber);
  padding-left: 14px;
  margin: 0 0 26px;
}

.hero-media { position: relative; }
.hero-media img {
  width: 100%;
  border: var(--border);
  box-shadow: 10px 10px 0 var(--teal-deep);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--paper-2);
}

/* The 10% sticker — rotated, taped-on, unmissable */
.offer-sticker {
  position: absolute;
  left: -26px;
  top: -24px;
  width: 172px;
  height: 172px;
  border-radius: 50%;
  background: var(--amber);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-hard);
  display: grid;
  place-content: center;
  text-align: center;
  transform: rotate(-11deg);
  z-index: 3;
  padding: 10px;
}
.offer-sticker .big {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 82;
  font-size: 3.15rem;
  line-height: .82;
  letter-spacing: -.03em;
}
.offer-sticker .small {
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.35;
  margin-top: 7px;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { max-width: 480px; }
  .offer-sticker { width: 132px; height: 132px; left: -14px; top: -16px; }
  .offer-sticker .big { font-size: 2.5rem; }
}

.hero-points {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
}
.hero-points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.35;
}
.hero-points svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--teal); }
@media (max-width: 520px) { .hero-points { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   10. MARQUEE / TRUST STRIP
   -------------------------------------------------------------------------- */
.marquee {
  background: var(--ink);
  color: var(--paper);
  border-block: 2px solid var(--ink);
  overflow: hidden;
  padding: 13px 0;
  display: flex;
  user-select: none;
}
.marquee-track {
  display: flex;
  flex: none;
  gap: 0;
  animation: slide 42s linear infinite;
}
.marquee span {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 86;
  font-size: .95rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 22px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 22px;
}
.marquee span::after { content: '●'; color: var(--amber); font-size: .58rem; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* --------------------------------------------------------------------------
   11. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: var(--border);
  padding: clamp(22px, 2.6vw, 32px);
  position: relative;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  display: flex;
  flex-direction: column;
}
.card--hover:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-hard); }
.card h3 { margin-bottom: 10px; }
.card p { font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.card .link-arrow { margin-top: auto; padding-top: 18px; align-self: flex-start; }

.card-icon {
  width: 52px; height: 52px;
  display: grid; place-content: center;
  background: var(--teal-wash);
  border: var(--border-thin);
  margin-bottom: 18px;
  color: var(--teal-deep);
}
.card-icon svg { width: 26px; height: 26px; }

.card--dark {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: var(--paper);
}
.card--dark h3 { color: var(--white); }
.card--dark p { color: #CFE0DD; }
.card--dark .card-icon { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: var(--amber); }

.card--feature { background: var(--amber-wash); }

/* Numbered step */
.step { position: relative; padding-top: 8px; }
.step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 80;
  font-size: 3.4rem;
  line-height: .8;
  color: var(--teal);
  opacity: .28;
  display: block;
  margin-bottom: 8px;
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: .96rem; color: var(--ink-2); }
.section--dark .step-num { color: var(--teal-bright); opacity: .5; }
.section--dark .step p { color: #C6D4D1; }

/* Stat block */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--border);
  background: var(--white);
}
.stat {
  padding: clamp(20px, 2.6vw, 30px);
  border-right: var(--border-thin);
  text-align: center;
}
.stat:last-child { border-right: 0; }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 84;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1;
  color: var(--teal-deep);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.stat span {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.4;
  display: block;
}
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: var(--border-thin); }
}

/* Checklist */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; }
.checklist svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--teal); }
.section--dark .checklist svg, .section--teal .checklist svg { color: var(--amber); }
.checklist strong { display: block; }
.checklist .sub { font-size: .9rem; color: var(--ink-muted); }
.section--dark .checklist .sub { color: #A8BAB7; }

/* Tag pills */
.tags { display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 0; list-style: none; }
.tags li {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 13px;
  border: var(--border-thin);
  background: var(--white);
}
.section--dark .tags li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); color: var(--paper); }
.tags--link li { padding: 0; border: 0; background: none; }
.tags--link a {
  display: block;
  padding: 7px 13px;
  border: var(--border-thin);
  background: var(--white);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tags--link a:hover { background: var(--amber); }

/* --------------------------------------------------------------------------
   12. OFFER BAND — 10% off, repeated on every page
   -------------------------------------------------------------------------- */
.offer-band {
  background: var(--amber);
  border-block: 2px solid var(--ink);
  padding: clamp(26px, 3.4vw, 40px) 0;
}
.offer-band .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.offer-band h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  margin: 0 0 6px;
  color: var(--ink);
}
.offer-band p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5A4104;
}
.offer-band .btn { background: var(--ink); color: var(--amber); border-color: var(--ink); box-shadow: 5px 5px 0 rgba(0,0,0,.22); }
.offer-band .btn:hover { background: var(--teal-dark); color: var(--amber); }

.offer-inline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--amber);
  border: var(--border-thin);
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.offer-inline svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   13. PAGE HEADER (interior pages)
   -------------------------------------------------------------------------- */
.page-head {
  background: var(--teal-dark);
  color: var(--paper);
  padding-block: clamp(30px, 4vw, 54px);
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 58px 58px;
}
.page-head .wrap { position: relative; }
.page-head h1 { color: var(--white); margin-bottom: 18px; }
.page-head .lead { color: #C6D4D1; }

.crumbs {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #8FA8A5;
  margin-bottom: 20px;
}
.crumbs a { color: var(--teal-bright); text-decoration: none; }
.crumbs a:hover { color: var(--amber); }
.crumbs span { margin: 0 8px; opacity: .5; }

/* --------------------------------------------------------------------------
   14. MEDIA BLOCKS
   -------------------------------------------------------------------------- */
.media img {
  width: 100%;
  border: var(--border);
  box-shadow: 8px 8px 0 var(--teal-deep);
  object-fit: cover;
  background: var(--paper-2);
}
.media--amber img { box-shadow: 8px 8px 0 var(--amber); }
.media--flat img { box-shadow: none; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery img { border: var(--border-thin); aspect-ratio: 1; object-fit: cover; }
@media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   15. TESTIMONIALS
   -------------------------------------------------------------------------- */
.quote-card {
  background: var(--white);
  border: var(--border);
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.quote-card blockquote {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 500;
}
.quote-card blockquote::before { content: '“'; }
.quote-card blockquote::after { content: '”'; }
.stars { display: flex; gap: 3px; color: var(--amber); }
.stars svg { width: 18px; height: 18px; }
.quote-by {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: auto;
}
.quote-by b { color: var(--ink); display: block; font-size: .82rem; margin-bottom: 3px; }

/* --------------------------------------------------------------------------
   16. FAQ / ACCORDION
   -------------------------------------------------------------------------- */
.faq { border-top: var(--border); max-width: none; }
.faq details { border-bottom: var(--border); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 46px 22px 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 92;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  text-transform: uppercase;
  line-height: 1.2;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  position: absolute;
  right: 6px; top: 50%;
  width: 16px; height: 16px;
  margin-top: -8px;
  background:
    linear-gradient(var(--teal) 0 0) center / 100% 3px no-repeat,
    linear-gradient(var(--teal) 0 0) center / 3px 100% no-repeat;
  transition: transform .22s var(--ease);
}
.faq details[open] summary::after { transform: rotate(90deg); background: linear-gradient(var(--teal) 0 0) center / 100% 3px no-repeat; }
.faq summary:hover { color: var(--teal-deep); }
.faq .answer { padding: 0 52px 22px 0; }
.faq .answer p { color: var(--ink-2); max-width: 92ch; }

/* --------------------------------------------------------------------------
   17. FORMS
   -------------------------------------------------------------------------- */
.field { display: block; margin-bottom: 20px; }
.field > .label,
.field > label {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--ink);
}
.field .hint {
  font-family: var(--font-body);
  font-size: .82rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
  font-weight: 400;
  display: block;
  margin-top: 4px;
}
.req { color: var(--amber-deep); }

input[type="text"], input[type="tel"], input[type="email"], input[type="date"],
input[type="number"], select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 13px 15px;
  border: var(--border);
  background: var(--white);
  color: var(--ink);
  border-radius: 0;
  transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230D1413' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
  padding-right: 42px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 4px 4px 0 var(--teal);
  border-color: var(--ink);
}
input::placeholder, textarea::placeholder { color: #9AA5A2; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

.error-msg {
  display: none;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #B3261E;
  margin-top: 7px;
  font-weight: 700;
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #B3261E; box-shadow: 4px 4px 0 #F3C0BC; }
.field.has-error .error-msg { display: block; }
.field.has-error .choice-grid { outline: 2px solid #B3261E; outline-offset: 6px; }

/* Selectable option cards (radio / checkbox) */
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.choice-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 780px) { .choice-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .choice-grid, .choice-grid--2 { grid-template-columns: 1fr; } }

.choice { position: relative; display: block; }
.choice input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  top: 0; left: 0;
  margin: 0;
  cursor: pointer;
}
.choice .choice-body {
  border: var(--border);
  background: var(--white);
  padding: 16px 15px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
  pointer-events: none;
}
.choice .choice-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 92;
  font-size: .98rem;
  text-transform: uppercase;
  line-height: 1.1;
}
.choice .choice-note { font-size: .82rem; color: var(--ink-muted); line-height: 1.35; }
.choice input:checked ~ .choice-body {
  background: var(--amber);
  box-shadow: var(--shadow-hard-sm);
  transform: translate(-2px, -2px);
}
.choice input:checked ~ .choice-body .choice-note { color: #5A4104; }
.choice input:focus-visible ~ .choice-body { outline: 3px solid var(--teal); outline-offset: 3px; }
.choice:hover .choice-body { background: var(--paper-2); }
.choice input:checked ~ .choice-body:hover { background: var(--amber); }

/* Inline checkbox */
.check-inline {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: var(--border-thin);
  background: var(--white);
  padding: 14px 16px;
  cursor: pointer;
  line-height: 1.45;
  font-size: .92rem;
}
.check-inline input {
  width: 20px; height: 20px;
  flex: none;
  margin: 2px 0 0;
  accent-color: var(--teal);
  cursor: pointer;
}
.check-inline--offer { background: var(--amber-wash); border: 2px solid var(--amber-deep); }
.check-inline--offer strong { display: block; }

/* Multi-step wizard chrome */
.wizard { border: var(--border); background: var(--paper); box-shadow: var(--shadow-hard); }
.wizard-bar { border-bottom: var(--border); background: var(--white); padding: 18px clamp(20px, 3vw, 34px); }
.wizard-steps { display: flex; gap: 4px; list-style: none; margin: 0 0 12px; padding: 0; }
.wizard-steps li {
  flex: 1;
  height: 7px;
  background: var(--concrete);
  transition: background .3s var(--ease);
}
.wizard-steps li.is-done { background: var(--teal); }
.wizard-steps li.is-active { background: var(--amber); }
.wizard-meta {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.wizard-meta b { color: var(--teal-deep); }
.wizard-panel { padding: clamp(24px, 3.4vw, 40px); }
.wizard-panel[hidden] { display: none; }
.wizard-panel h2 { font-size: clamp(1.45rem, 3vw, 2rem); margin-bottom: 6px; }
.wizard-panel .panel-sub { color: var(--ink-muted); margin-bottom: 28px; font-size: .95rem; }
.wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: var(--border-thin);
}
.wizard-nav .spacer { flex: 1; }

.form-note {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 16px;
  line-height: 1.6;
}
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-status {
  display: none;
  margin-top: 20px;
  padding: 16px 18px;
  border: var(--border);
  font-weight: 600;
  font-size: .95rem;
}
.form-status.is-error { display: block; background: #FDECEA; border-color: #B3261E; }
.form-status.is-ok { display: block; background: var(--teal-wash); }

/* --------------------------------------------------------------------------
   18. CONTACT CARDS
   -------------------------------------------------------------------------- */
.contact-card {
  border: var(--border);
  background: var(--white);
  padding: clamp(22px, 2.8vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-card .card-icon { margin-bottom: 6px; }
.contact-card a.big {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 86;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  text-decoration: none;
  color: var(--ink);
  letter-spacing: -.01em;
  word-break: break-word;
}
.contact-card a.big:hover { color: var(--teal); }
.contact-card .note { font-size: .88rem; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--teal-dark); color: #B8CBC8; padding-block: clamp(48px, 6vw, 76px) 0; }
.site-footer h4 {
  color: var(--white);
  font-size: .8rem;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-variation-settings: normal;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 52px);
  padding-bottom: 48px;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer-grid a { color: #B8CBC8; text-decoration: none; font-size: .94rem; }
.footer-grid a:hover { color: var(--amber); }
.footer-brand .logo { color: var(--white); margin-bottom: 16px; }
.footer-brand .logo-name { color: var(--white); }
.footer-brand p { font-size: .92rem; color: #9EB4B1; max-width: 34ch; }
.footer-phone {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 86;
  font-size: 1.35rem;
  color: var(--white) !important;
  text-decoration: none;
  display: block;
  margin-bottom: 6px;
}
.footer-phone:hover { color: var(--amber) !important; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: 22px 26px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7F9996;
}
.footer-bottom a { color: #7F9996; text-decoration: none; }
.footer-bottom a:hover { color: var(--amber); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   20. CTA BLOCK
   -------------------------------------------------------------------------- */
.cta-block {
  background: var(--teal-deep);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  color: var(--paper);
  padding: clamp(34px, 5vw, 64px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-block h2 { color: var(--white); }
.cta-block p { color: #CFE0DD; margin-inline: auto; }
.cta-block .btn-row { justify-content: center; margin-top: 28px; }

/* --------------------------------------------------------------------------
   21. MOTION
   -------------------------------------------------------------------------- */
/* Only hide reveal content when JavaScript is running to bring it back. The
   `js` class is set by an inline script in <head>, so there is no flash — and
   if the script never loads, every section is simply visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

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

/* --------------------------------------------------------------------------
   22. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .mobile-bar, .topbar, .marquee, .site-footer, .offer-band { display: none !important; }
  body::after { display: none; }
  body { background: #fff; }
  .card, .wizard { box-shadow: none; }
}

/* --------------------------------------------------------------------------
   23. WIZARD — progressive enhancement states
   Without JS every panel is visible and the form posts natively.
   -------------------------------------------------------------------------- */
.wizard-bar,
.wizard-nav { display: none; }
[data-enhanced] .wizard-bar { display: block; }
[data-enhanced] .wizard-nav { display: flex; }

.noscript-submit {
  padding: 0 clamp(24px, 3.4vw, 40px) clamp(24px, 3.4vw, 40px);
}
[data-enhanced] .noscript-submit { display: none; }

.wizard-panel + .wizard-panel { border-top: var(--border-thin); }
[data-enhanced] .wizard-panel + .wizard-panel { border-top: 0; }

/* Recap block on the final step */
.recap {
  border: var(--border-thin);
  background: var(--teal-wash);
  padding: 18px 20px;
  margin-bottom: 28px;
}
.recap:empty { display: none; }
.recap-title {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 12px;
  font-variation-settings: normal;
}
.recap-list { margin: 0; display: grid; gap: 9px; }
.recap-list > div { display: grid; grid-template-columns: 82px 1fr; gap: 14px; align-items: baseline; }
.recap-list dt {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.recap-list dd { margin: 0; font-weight: 600; font-size: .94rem; line-height: 1.35; }

/* Sidebar rail next to the form */
.quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
@media (max-width: 1000px) {
  /* Single column: the form comes first. Pushing four sidebar cards above it
     would bury the thing the visitor came here to do. */
  .quote-layout { grid-template-columns: 1fr; }
  .quote-rail { margin-top: 8px; }
}
.rail-card {
  border: var(--border);
  background: var(--white);
  padding: 24px;
  margin-bottom: 20px;
}
.rail-card--dark { background: var(--teal-dark); border-color: var(--teal-dark); color: #C6D4D1; }
.rail-card--dark h4 { color: var(--white); }
.rail-card--dark a { color: var(--teal-bright); }
.rail-card--offer { background: var(--amber); border-color: var(--ink); }
.rail-card h4 {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 14px;
  font-variation-settings: normal;
}
.rail-card p { font-size: .92rem; }
.rail-card .footer-phone { color: var(--ink) !important; font-size: 1.5rem; }
.rail-card--dark .footer-phone { color: var(--white) !important; }
.rail-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: r; }
.rail-steps li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  font-size: .92rem;
  line-height: 1.4;
  align-items: start;
}
.rail-steps li::before {
  counter-increment: r;
  content: counter(r);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  width: 26px; height: 26px;
  display: grid; place-content: center;
  background: var(--teal); color: #fff;
}
.rail-card--dark .rail-steps li::before { background: var(--teal-bright); color: var(--teal-dark); }

/* Thank-you page */
.thanks-mark {
  width: 92px; height: 92px;
  border: var(--border);
  background: var(--amber);
  box-shadow: var(--shadow-hard);
  display: grid; place-content: center;
  margin: 0 auto 30px;
}
.thanks-mark svg { width: 46px; height: 46px; }
.demo-banner {
  display: none;
  background: var(--teal-dark);
  color: var(--paper);
  border: var(--border);
  padding: 16px 20px;
  margin-bottom: 30px;
  font-family: var(--font-mono);
  font-size: .74rem;
  line-height: 1.7;
  letter-spacing: .04em;
  text-align: left;
}
.demo-banner b { color: var(--amber); }
.demo-banner code { color: var(--teal-bright); }

/* --------------------------------------------------------------------------
   24. MOBILE DRAWER — button overrides
   `.nav a` styles the drawer links; the two CTAs at the bottom must opt out.
   -------------------------------------------------------------------------- */
@media (max-width: 1060px) {
  .nav .nav-foot a {
    font-size: .98rem;
    padding: 16px 22px;
    border-bottom: 0;
  }
  .nav .nav-foot .btn { border: var(--border); color: var(--ink); }
  .nav .nav-foot .btn:hover { color: var(--ink); border-bottom-color: var(--ink); }
  .nav .nav-foot .btn--outline-light { color: var(--paper); border-color: var(--paper); }
  .nav .nav-foot .btn--outline-light:hover { color: var(--ink); background: var(--paper); }
}

/* --------------------------------------------------------------------------
   25. FUNNEL CTAs IN THE PAGE HEADER
   Every interior page opens with the quote and call buttons, so the visitor
   never has to scroll to find the way in.
   -------------------------------------------------------------------------- */
.page-head-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}
.page-head-note {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber);
  white-space: nowrap;
}
@media (max-width: 520px) {
  .page-head-cta .btn { flex: 1 1 100%; }
  .page-head-note { width: 100%; }
}

/* --------------------------------------------------------------------------
   26. CONDENSED SERVICE CARDS + MINI BLOCKS
   -------------------------------------------------------------------------- */
.service-card { scroll-margin-top: 132px; }
.service-card p { font-size: .93rem; line-height: 1.5; margin-bottom: 14px; }
.service-card .card-icon { width: 44px; height: 44px; margin-bottom: 14px; }
.service-card .card-icon svg { width: 22px; height: 22px; }
.service-card h3 { font-size: 1.22rem; margin-bottom: 8px; }
.service-card .link-arrow { padding-top: 16px; }

.tags--sm li {
  font-size: .64rem;
  padding: 5px 9px;
  letter-spacing: .04em;
  background: var(--paper-2);
}

.mini h4 {
  font-size: .95rem;
  margin-bottom: 7px;
  border-left: 4px solid var(--amber);
  padding-left: 11px;
  line-height: 1.15;
}
.mini p { font-size: .89rem; color: var(--ink-2); line-height: 1.5; padding-left: 15px; }

/* --------------------------------------------------------------------------
   27. OFFER STRIP — a prominent, in-page version of the 10% offer for pages
   where it deserves more than the sticky bar (contact).
   -------------------------------------------------------------------------- */
.offer-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--amber);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  padding: clamp(22px, 3vw, 32px);
}
.offer-strip h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); margin: 0 0 8px; }
.offer-strip p { margin: 0; color: #5A4104; font-size: .95rem; max-width: 56ch; }
.offer-strip .eyebrow { color: #5A4104; margin-bottom: 12px; }
.offer-strip .btn { background: var(--ink); color: var(--amber); border-color: var(--ink); }
.offer-strip .btn:hover { background: var(--teal-dark); color: var(--amber); }

/* --------------------------------------------------------------------------
   28. SMALL PHONES (360px and under)
   The wordmark is flex:none, so at 360px it shoved the menu button past the
   viewport edge. Scale the lockup down rather than letting the header overflow.
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .site-header .wrap { gap: 10px; }
  .logo { gap: 9px; }
  .logo img { width: 36px; height: 36px; }
  .logo-name { font-size: 1.08rem; }
  .logo-sub { font-size: .5rem; letter-spacing: .14em; margin-top: 3px; }
  .nav-toggle { width: 42px; height: 42px; }
}

/* Stats: grid items default to min-width:auto, so the long values ("Any
   distance") refused to shrink below their min-content width and burst the
   two-column track on a 320px screen. Stack them instead. */
.stat { min-width: 0; }
@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; }
  .stat,
  .stat:nth-child(1),
  .stat:nth-child(2) { border-right: 0; border-bottom: var(--border-thin); }
  .stat:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   29. SERVICE HIERARCHY
   Core three (local moving, Airbnb staging, junk removal) get an amber cap
   and a tag; long-distance sits beneath as a full-width strip; the rest are
   plain links.
   -------------------------------------------------------------------------- */
.service-card--main { border-top: 6px solid var(--amber); }
.core-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: var(--amber-wash);
  border: 1.5px solid var(--amber-deep);
  padding: 3px 8px;
  margin-bottom: 14px;
}

.card--wide {
  flex-direction: row;
  align-items: center;
  gap: 22px;
  margin-top: clamp(16px, 2vw, 26px);
  background: var(--teal-deep);
  border-color: var(--ink);
  color: var(--paper);
}
.card--wide .card-icon { margin: 0; flex: none; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); color: var(--amber); }
.card--wide .card-wide-body { flex: 1; min-width: 0; }
.card--wide h3 { color: var(--white); margin-bottom: 6px; }
.card--wide p { color: #CFE0DD; margin: 0; }
.card--wide .btn { flex: none; }
@media (max-width: 720px) {
  .card--wide { flex-direction: column; align-items: flex-start; }
}

.also-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: clamp(18px, 2.4vw, 28px);
}
.also-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   30. DENSITY PASS
   -------------------------------------------------------------------------- */
/* Homepage marquee rides in the sticky header group, slimmed down. */
.marquee--sticky { padding: 8px 0; border-top: 0; }
.marquee--sticky span { font-size: .82rem; }

/* Stats sit directly above the services grid as a proof strip. */
.section--stats { padding-block: clamp(26px, 3.4vw, 40px) 0; }

/* How it works: three short steps, not a full-height section. */
.section--steps { padding-block: clamp(36px, 4.6vw, 58px); }
.section--steps .section-head { margin-bottom: clamp(18px, 2.4vw, 28px); }
.section--steps .step-num { font-size: 2.4rem; margin-bottom: 4px; }
.section--steps .step h3 { font-size: 1.15rem; margin-bottom: 4px; }
.section--steps .step p { font-size: .9rem; }

/* "No line items for the basics" on the dark teal ground. */
.section--dark .mini h4 { color: var(--white); }
.section--dark .mini p { color: #C6D4D1; }

/* Service area: one cloud of towns instead of a grid of county boxes. */
.tags--cloud { gap: 8px; }
.tags--cloud li { font-size: .74rem; padding: 7px 12px; }

/* --------------------------------------------------------------------------
   31. TRUCK LOGO
   Compact truck lockup in the header (the full globe version is too tall to
   keep the name legible at nav height). Light variant swaps in over the dark
   mobile drawer. Full lockup lives in the footer.
   -------------------------------------------------------------------------- */
.logo-truck { display: block; height: 52px; width: auto; }
.logo-truck--light { display: none; }
.nav-open .logo-truck--primary { display: none; }
.nav-open .logo-truck--light { display: block; }
@media (max-width: 1060px) { .logo-truck { height: 44px; } }
@media (max-width: 400px)  { .logo-truck { height: 38px; } }

.footer-logo { display: inline-block; margin-bottom: 18px; }
.footer-logo img { width: 240px; max-width: 100%; height: auto; }

/* Tagline under the footer logo -- the line that used to sit on the truck. */
.footer-tagline {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber) !important;
  margin: -4px 0 16px;
  white-space: nowrap;
}
.footer-brand .footer-tagline { font-size: .64rem; letter-spacing: .16em; max-width: none; }  /* outranks .footer-brand p */

/* Header: compact truck sized up so the name reads at a glance, tagline
   underneath on one line, matched to the logo's width at each breakpoint. */
.logo--truck { flex-direction: column; align-items: flex-start; gap: 5px; }
.logo-tag {
  display: block;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .59rem;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--teal);
}
.nav-open .logo-tag { color: var(--teal-bright); }
.logo--truck .logo-truck { height: 62px; width: auto; max-width: none; }  /* beats the old 44px badge rule on .logo img */
.site-header .wrap { min-height: 90px; }
@media (max-width: 1060px) {
  .logo--truck .logo-truck { height: 50px; }
  .logo-tag { font-size: .49rem; }
  .site-header .wrap { min-height: 74px; }
}
@media (max-width: 400px) {
  .logo--truck .logo-truck { height: 42px; }
  .logo-tag { font-size: .42rem; letter-spacing: .08em; }
}