/* ============================================================
   SEDONA TECH SOLUTIONS — design system v4  (2026-07-14)
   Warm editorial · senior-legible · real-canyon texture
   Hard rules: grain never behind body copy · reduced-motion = static
   v4 adds: category nav dropdowns · header scroll state · marquee ·
   icon tiles · category cards · auto-stagger reveals · underline
   draw-in · micro-interactions. Every v3 class still works.
   ============================================================ */

:root {
  /* palette */
  --cream: #F7EFE2;
  --paper: #FFFDF8;
  --sand: #EFE3CE;
  --tan: #E8D5BC;
  --peach: #FFE3C4;
  --orange: #D97742;
  --rust: #C05A2E;
  --clay: #8F3F1F;
  --brown: #4A2E1F;
  --espresso: #2E1D12;
  --ink: #3B2A1B;          /* body text on cream/paper — ~9:1 */
  --ink-soft: #6B5442;     /* secondary text — ≥4.5:1 on cream */
  --cream-ink: #F3E4CF;    /* body text on espresso */
  --line: rgba(74, 46, 31, .16);

  /* type */
  --font-disp: 'Fraunces', 'Fraunces-fallback', Georgia, serif;
  --font-body: 'Figtree', 'Figtree-fallback', Arial, sans-serif;

  --wrap: 1140px;
  --wrap-narrow: 820px;
  --r-card: 20px;
  --shadow-1: 0 10px 26px rgba(46, 29, 18, .09);
  --shadow-2: 0 22px 54px rgba(46, 29, 18, .17);
  --shadow-soft: 0 2px 10px rgba(46, 29, 18, .05);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.125rem;              /* 18px floor */
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rust); }
::selection { background: var(--peach); color: var(--espresso); }
/* Focus ring. The old espresso ring was invisible on the footer and the call
   bar, which are themselves espresso — 1:1 contrast, so a keyboard user could
   not see where they were. Rust is the one brand colour that clears 3:1
   against BOTH grounds this site uses (3.9:1 on cream, 3.7:1 on espresso), and
   the offset puts the ring on the background rather than on a rust button.
   A box-shadow halo was tried first and lost to the decorative shadows already
   on .btn and the cards — outline is the only layer nothing else competes for. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
summary:focus-visible, details:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 3px;
  border-radius: 4px;
}
h1, h2, h3, h4 {
  font-family: var(--font-disp);
  color: var(--espresso);
  letter-spacing: -.01em;
  line-height: 1.12;
  margin: 0 0 .45em;
  font-weight: 640;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
/* The rem-based clamp scales with the reader's text-size setting, which is
   correct — but at 200% on a phone it drove the headline past the viewport,
   and `overflow-x: clip` then made it unreachable rather than merely
   off-screen. The viewport ceiling keeps the headline growing until it would
   stop fitting, and no further. */
h1 { font-size: min(clamp(2.7rem, 6vw, 4.5rem), 14vw); line-height: 1.03; }
/* A long word must break rather than push the line past a clipped viewport. */
h1, h2, h3, h4 { overflow-wrap: break-word; }
h2 { font-size: clamp(1.95rem, 3.8vw, 2.85rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.18rem, 1.8vw, 1.32rem); line-height: 1.6; }
.small { font-size: .92rem; color: var(--ink-soft); }

/* display register — warmer, wonkier Fraunces for hero/brand moments */
.disp-warm { font-variation-settings: "SOFT" 70, "WONK" 1; }

.kicker {
  display: inline-block;
  font: 700 .8rem/1 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 14px;
}
.band--dark .kicker, .band--terra .kicker { color: var(--peach); }

/* v4 — kicker with a little rule line before it, for section heads */
.kicker--rule { position: relative; padding-left: 34px; }
.kicker--rule::before {
  content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 24px; height: 2.5px; border-radius: 2px; background: var(--orange);
}

/* ---------- layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: var(--wrap-narrow); }
.band { position: relative; padding: 84px 0; }
.band--tight { padding: 56px 0; }
.band--cream { background: var(--cream); }
/* Creative warm hero background — a soft Sedona-sunrise wash (replaces the tiled-photo texture) */
.heromesh, .band--cream.hero {
  background:
    radial-gradient(920px 540px at 12% -10%, rgba(217,119,66,.16), transparent 62%),
    radial-gradient(820px 500px at 96% -6%, rgba(243,200,138,.26), transparent 58%),
    radial-gradient(700px 700px at 78% 120%, rgba(192,90,46,.10), transparent 60%),
    var(--cream);
}
.band--paper { background: var(--paper); }
.band--sand  { background: var(--sand); }
.band--dark {
  background: linear-gradient(150deg, var(--brown), var(--espresso));
  color: var(--cream-ink);
}
.band--dark h1, .band--dark h2, .band--dark h3 { color: #FFF6E9; }
.band--dark .small { color: #CBB59B; }
.band--terra {
  background: linear-gradient(145deg, var(--rust), var(--clay));
  color: #FFF3E4;
}
.band--terra h2, .band--terra h3 { color: #fff; }

/* v4 — soft radial glow accent for dark CTA bands (never behind long copy) */
.glow { isolation: isolate; }
.glow::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(640px 320px at 50% 0%, rgba(255, 227, 196, .12), transparent 68%),
    radial-gradient(520px 300px at 88% 110%, rgba(217, 119, 66, .14), transparent 62%);
}
.glow > * { position: relative; z-index: 1; }

/* real-canyon grain — heroes, dividers, image frames ONLY (never behind copy) */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: "";
  position: absolute; inset: 0;
  background: url('img/grain-canyon.png') repeat;
  background-size: 280px;
  opacity: .13;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.grain > * { position: relative; z-index: 1; }

/* red-rock divider svg */
.rocks { display: block; width: 100%; height: 74px; margin-bottom: -1px; }
@media (max-width: 700px) { .rocks { height: 46px; } }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.top.scrolled {
  box-shadow: 0 10px 32px rgba(46, 29, 18, .10);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
}
.top-in {
  max-width: 1280px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 18px;
  /* At large text sizes the brand, the menu button and the call pill stopped
     fitting on one row and the pill was clipped off the right edge. Wrapping
     keeps every header control reachable. */
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { width: 46px; height: 46px; border-radius: 10px; }
.brand b {
  font-family: var(--font-disp); font-weight: 680; font-size: 1.18rem;
  color: var(--espresso); line-height: 1.05; display: block;
}
.brand small {
  display: block; font: 700 .62rem/1.1 var(--font-body);
  letter-spacing: .16em; color: var(--rust); text-transform: uppercase; margin-top: 3px;
}
nav.main { display: flex; gap: 4px; align-items: center; }
nav.main a {
  font: 600 1rem/1 var(--font-body); color: var(--brown);
  text-decoration: none; padding: 12px 13px; border-radius: 10px;
}
nav.main a[aria-current="page"] { color: var(--rust); }
nav.main a:hover { background: var(--cream); }
.callpill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rust); color: #fff !important;
  font: 700 1rem/1 var(--font-body); text-decoration: none;
  padding: 13px 18px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(192, 90, 46, .32);
}
.menu-btn {
  display: none; background: none; border: 1.5px solid var(--line);
  border-radius: 10px; font-size: 1.5rem; line-height: 1;
  padding: 8px 12px; color: var(--espresso); cursor: pointer;
}

/* ---- v4 nav: category dropdowns ---- */
.nvi { position: relative; display: flex; align-items: center; }
.nvi > a { padding-right: 5px; }
.sub-btn {
  background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 9px 12px 3px; color: var(--brown); border-radius: 8px;
}
.sub-btn svg { width: 11px; height: 11px; }
.sub-btn:hover { color: var(--rust); }
.sub {
  min-width: 270px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-2); padding: 8px; z-index: 80;
}
.sub a {
  display: block; padding: 11px 14px; border-radius: 10px;
  font: 600 .98rem/1.3 var(--font-body); color: var(--brown); text-decoration: none;
}
.sub a small { display: block; font: 500 .82rem/1.35 var(--font-body); color: var(--ink-soft); margin-top: 1px; }
.sub a:hover { background: var(--cream); color: var(--rust); }
.sub a:hover small { color: var(--ink-soft); }

@media (min-width: 1201px) {
  /* desktop: floating panel, opens on hover / focus / click */
  .sub {
    position: absolute; top: calc(100% + 8px); left: 0;
    opacity: 0; visibility: hidden;
    transform: translateY(-6px) scale(.96);
    transform-origin: top left;
  }
  .sub::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
  .nvi.open > .sub, .nvi:focus-within > .sub { opacity: 1; visibility: visible; transform: none; }
  @media (hover: hover) {
    .nvi:hover > .sub { opacity: 1; visibility: visible; transform: none; }
    .nvi:hover .sub-btn svg { transform: rotate(180deg); }
  }
  .nvi.open .sub-btn svg { transform: rotate(180deg); }

  /* animated underline on top-level links */
  nav.main > a, .nvi > a { position: relative; }
  nav.main > a::after, .nvi > a::after {
    content: ""; position: absolute; left: 13px; right: 13px; bottom: 6px;
    height: 2.5px; border-radius: 2px; background: var(--rust);
    transform: scaleX(0); transform-origin: left;
  }
  nav.main > a[aria-current="page"]::after, .nvi > a[aria-current="page"]::after { transform: scaleX(1); }
  @media (hover: hover) {
    nav.main > a:hover::after, .nvi > a:hover::after { transform: scaleX(1); }
  }
}

@media (max-width: 1200px) {
  nav.main {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 8px 14px 16px;
    box-shadow: var(--shadow-1);
    max-height: calc(100dvh - 76px); overflow-y: auto;
  }
  nav.main.open { display: flex; }
  nav.main a { padding: 15px 12px; font-size: 1.1rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  nav.main a:last-child { border-bottom: 0; }
  .menu-btn { display: block; }
  .callpill span.lbl { display: none; }

  /* mobile: dropdown becomes an inline disclosure list */
  .nvi { flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); }
  .nvi > a { flex: 1; border-bottom: 0; }
  .sub-btn { padding: 14px 16px; min-height: 44px; }
  .nvi.open .sub-btn svg { transform: rotate(180deg); }
  .sub {
    display: none; position: static; width: 100%; min-width: 0;
    box-shadow: none; border: 0; background: transparent;
    padding: 0 0 10px 12px;
  }
  .nvi.open > .sub { display: block; }
  .sub a { border-bottom: 0; font-size: 1.02rem; }
}

/* ---------- hero ---------- */
.hero { padding: 74px 0 0; }
.hero-grid {
  display: grid; grid-template-columns: 1.12fr .88fr;
  gap: 56px; align-items: center; padding-bottom: 92px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 16px; }
.trustline { color: var(--ink-soft); font-size: 1rem; }
.hero-right { position: relative; justify-self: center; }
.arch-wrap { position: relative; width: min(380px, 88vw); }
.arch {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 62% 18%;
  border-radius: 999px 999px 22px 22px;
  box-shadow: var(--shadow-2);
}
/* (grain overlay removed — the portrait stays crisp, no texture over the photo) */
.stamp {
  position: absolute; top: -16px; right: -10px; z-index: 2;
  border: 2.5px solid var(--rust); color: var(--clay); background: var(--paper);
  border-radius: 999px; padding: 18px 14px; transform: rotate(-11deg);
  font: 800 .68rem/1.5 var(--font-body); letter-spacing: .14em; text-align: center;
  box-shadow: 0 10px 24px rgba(46, 29, 18, .16);
}
.chip {
  position: absolute; bottom: -14px; left: -10px; z-index: 2;
  background: var(--paper); border-radius: 14px; padding: 12px 18px;
  box-shadow: 0 16px 34px rgba(46, 29, 18, .2);
  font: 700 1rem/1.2 var(--font-body); color: var(--espresso);
}
@media (max-width: 920px) {
  .hero { padding-top: 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 64px; }
  .hero-right { order: -1; }
  .arch-wrap { width: min(300px, 78vw); }
}

/* hand-drawn accent (single system: underline / circle)
   v4: give the svg path pathLength="1" and it draws itself in on reveal */
/* The phrase is held on one line so the hand-drawn underline sits under it.
   That has to give way when the text gets big: `html { overflow-x: clip }`
   means anything pushed past the viewport is not merely off-screen, it is
   unreachable — no scrollbar can bring it back. Below 700px, and at the large
   text sizes where this actually bites, let it wrap and drop the flourish. */
.hand { position: relative; white-space: nowrap; }
@media (max-width: 700px) {
  .hand { white-space: normal; }
  .hand > svg { display: none; }
}
.hand > svg {
  position: absolute; left: -1.5%; bottom: -.16em;
  width: 103%; height: .44em; overflow: visible; pointer-events: none;
}
.hand > svg path {
  fill: none; stroke: var(--orange); stroke-width: 7;
  stroke-linecap: round; opacity: .85;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 14px 28px;
  background: var(--rust); color: #fff !important;
  font: 700 1.06rem/1.2 var(--font-body); text-decoration: none;
  border: 0; border-radius: 14px; cursor: pointer;
  box-shadow: 0 8px 20px rgba(192, 90, 46, .32);
  position: relative; overflow: hidden;
  /* A button whose label cannot wrap will run off a clipped viewport at large
     text sizes and become unclickable. Let it wrap and cap it at the column. */
  max-width: 100%; text-wrap: balance;
}
.btn--ghost {
  background: transparent; color: var(--clay) !important;
  border: 2.5px solid var(--rust); box-shadow: none;
}
.btn--light { background: var(--peach); color: var(--clay) !important; box-shadow: none; }
.band--dark .btn--ghost, .band--terra .btn--ghost { color: var(--peach) !important; border-color: var(--orange); }
.btn--big { min-height: 58px; font-size: 1.14rem; padding: 16px 34px; }

/* ---------- marquee strip (v4) — pausable, static under reduced motion ---------- */
.marq {
  overflow: hidden; padding: 15px 0;
  background: var(--paper);
  border-block: 1.5px solid var(--line);
}
.marq-track { display: flex; width: max-content; }
.marq-track > span {
  display: inline-flex; align-items: center; gap: 44px; padding-right: 44px;
  white-space: nowrap;
  font: 700 .9rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.marq-track .dot { color: var(--orange); font-size: 1rem; }

/* ---------- audience paths ---------- */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 40px; }
.paths--3 { grid-template-columns: 1fr 1fr 1fr; }
.path {
  display: block; text-decoration: none; color: inherit;
  border-radius: 24px; padding: 40px 36px; position: relative;
  border: 1px solid var(--line);
}
.path .big { font-size: 2.5rem; line-height: 1; }
.path h3 { margin: 14px 0 8px; font-size: 1.55rem; }
.path p { color: var(--ink-soft); }
.path .go { font: 800 1.05rem/1 var(--font-body); color: var(--rust); }
.path--personal { background: var(--paper); box-shadow: var(--shadow-1); }
.path--biz { background: linear-gradient(150deg, #3A2417, #241610); border-color: transparent; }
.path--biz h3 { color: #FFF6E9; }
.path--biz p { color: #D9C3A8; }
.path--biz .go { color: var(--orange); }
.path--church {
  background: linear-gradient(160deg, #FFF8EC, var(--peach));
  border-color: rgba(192, 90, 46, .22); box-shadow: var(--shadow-1);
}
.path--church .go { color: var(--clay); }
@media (max-width: 980px) { .paths--3 { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .paths { grid-template-columns: 1fr; } }

/* ---------- stat band ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; text-align: center; }
.stat { padding: 6px 10px; }
.stat + .stat { border-left: 1px solid rgba(255, 227, 196, .25); }
.stat .num {
  display: block; font-family: var(--font-disp); font-weight: 680;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.05; color: var(--peach);
  font-variant-numeric: tabular-nums;
}
.stat .lbl { color: #FFD9BC; font-size: 1rem; line-height: 1.4; display: block; margin-top: 6px; }
.stat .src { color: rgba(255, 227, 196, .62); font-size: .8rem; }
@media (max-width: 860px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
  .stat + .stat { border-left: 0; }
}

/* ---------- editorial service index ---------- */
.svc { border-top: 1.5px solid var(--line); margin-top: 38px; }
.svc-row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 20px; align-items: center;
  padding: 26px 10px; border-bottom: 1.5px solid var(--line);
  text-decoration: none; color: inherit;
}
.svc-row .no { font: 700 1.05rem/1 var(--font-disp); color: var(--rust); }
.svc-row .t { font: 640 1.5rem/1.2 var(--font-disp); color: var(--espresso); display: block; }
.svc-row .d { color: var(--ink-soft); margin-top: 4px; display: block; }
.svc-row .go { font-size: 1.5rem; color: var(--rust); font-weight: 800; }
@media (max-width: 700px) {
  .svc-row { grid-template-columns: 44px 1fr auto; padding: 20px 4px; }
  .svc-row .t { font-size: 1.25rem; }
}

/* ---------- v4 icon tiles ---------- */
.it {
  width: 56px; height: 56px; flex: 0 0 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.65rem; line-height: 1;
  background: linear-gradient(150deg, var(--peach), var(--sand));
  border: 1px solid rgba(192, 90, 46, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
}
.it--dark { background: linear-gradient(150deg, #4A2E1F, #33200f); border-color: rgba(255, 227, 196, .22); }

/* ---------- v4 category cards (grouped service directory) ---------- */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 42px; align-items: start; }
.cat {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 22px; padding: 28px 26px 12px;
  box-shadow: var(--shadow-soft);
}
.cat-head { display: flex; gap: 16px; align-items: center; padding-bottom: 18px; border-bottom: 1.5px solid var(--line); }
.cat-head h3 { margin: 0; font-size: 1.32rem; }
.cat-head .tag { display: block; font: 700 .74rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--rust); margin-bottom: 4px; }
.cat-list { margin: 0; padding: 0; list-style: none; }
.cat-list a {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
  padding: 16px 4px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.cat-list li:last-child a { border-bottom: 0; }
.cat-list .t { display: block; font: 640 1.12rem/1.25 var(--font-disp); color: var(--espresso); }
.cat-list .d { display: block; color: var(--ink-soft); font-size: .95rem; line-height: 1.5; margin-top: 3px; }
.cat-list .go { color: var(--rust); font-weight: 800; font-size: 1.25rem; }
@media (max-width: 980px) { .cats { grid-template-columns: 1fr; } }

/* ---------- card hover shadow (pre-rendered, crossfaded — avoids box-shadow transitions) ---------- */
.pk, .path, .cat { position: relative; }
.pk::after, .path::after, .cat::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  box-shadow: var(--shadow-2); opacity: 0; pointer-events: none;
}
.cat::after { box-shadow: var(--shadow-1); }

/* ---------- package cards ---------- */
.pkgs { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 22px; margin-top: 40px; }
.pk {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 30px 28px;
  box-shadow: var(--shadow-soft);
}
.pk .price { font: 680 2.1rem/1 var(--font-disp); color: var(--rust); }
.pk .unit { font-size: .95rem; color: var(--ink-soft); }
.pk--hero {
  grid-row: span 2;
  background: linear-gradient(160deg, var(--rust), var(--clay));
  border: 0; color: #FFF3E4;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: var(--shadow-2);
}
.pk--hero h3 { color: #fff; }
.pk--hero p, .pk--hero .small, .pk--hero li { color: #FFF3E4; }
.pk--hero .price { color: var(--peach); font-size: 3rem; }
.pk--hero .unit { color: #FFD9BC; }
.pk-badge {
  display: inline-block; align-self: flex-start;
  background: var(--peach); color: var(--clay);
  border-radius: 999px; padding: 5px 15px;
  font: 800 .78rem/1 var(--font-body); letter-spacing: .09em;
}
@media (max-width: 980px) {
  .pkgs { grid-template-columns: 1fr 1fr; }
  .pk--hero { grid-row: auto; grid-column: span 2; }
}
@media (max-width: 640px) { .pkgs { grid-template-columns: 1fr; } .pk--hero { grid-column: auto; } }

/* ============================================================
   MOBILE SAFETY — responsive column guard for pricing/stat grids.
   Several pages set the DESKTOP layout with an inline
   style="grid-template-columns:…" on .pkgs. Inline styles beat @media
   rules, so on phones the cards were forced into 3–4 columns and then
   clipped off-screen by `overflow-x: clip`. These !important rules let
   the stylesheet reclaim the layout below desktop. Breakpoints match
   the existing .pkgs system (980px → 2-up, 640px → 1-up).
   ============================================================ */
@media (max-width: 980px) { .pkgs { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 640px) { .pkgs { grid-template-columns: 1fr !important; } }

/* 3-up stat strip: 3 columns on desktop, drops to 2-up on phones */
.stats--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .stats--3 { grid-template-columns: 1fr 1fr !important; } }

/* keep the big try-it phone number from forcing horizontal scroll on tiny screens */
@media (max-width: 380px) { .try .phone { white-space: normal; overflow-wrap: anywhere; } }

/* ghost buttons inside a light package card must stay legible — the
   .band--terra/.band--dark ghost override paints them peach, which is
   near-invisible on a white/cream card (e.g. "Start Total Coverage"). */
.pk .btn--ghost { color: var(--clay) !important; border-color: var(--rust) !important; }

/* ---------- try-it banner ---------- */
.try {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
  background: #FFF8EC; border: 2px dashed rgba(192, 90, 46, .55);
  border-radius: 20px; padding: 30px 34px;
}
.try .phone {
  font: 680 clamp(1.6rem, 3vw, 2.3rem)/1 var(--font-disp);
  color: var(--rust); text-decoration: none; white-space: nowrap; position: relative;
}

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 38px; }
.step .n {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(150deg, var(--orange), var(--rust)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 800 1.2rem/1 var(--font-body); margin-bottom: 14px;
  box-shadow: 0 8px 18px rgba(192, 90, 46, .3);
}
.step b { font-size: 1.12rem; color: var(--espresso); }
.step p { color: var(--ink-soft); margin: 4px 0 0; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 22px; } }

/* ---------- quote ---------- */
.quote-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start;
  max-width: 900px; margin: 0 auto;
}
.ava { width: 82px; height: 82px; border-radius: 50%; object-fit: cover; box-shadow: 0 8px 18px rgba(46, 29, 18, .25); }
.quote {
  font: 600 clamp(1.4rem, 2.6vw, 2rem)/1.4 var(--font-disp);
  color: var(--brown); font-variation-settings: "SOFT" 55, "WONK" 0;
}
@media (max-width: 640px) { .quote-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq details {
  border-bottom: 1.5px solid var(--line); padding: 6px 0;
}
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  font: 640 1.22rem/1.35 var(--font-disp); color: var(--espresso);
  padding: 16px 44px 16px 0; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  font: 700 1.6rem/1 var(--font-body); color: var(--rust);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0 18px; color: var(--ink); max-width: 62ch; }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; max-width: 560px; }
.form label { font: 700 1rem/1.3 var(--font-body); color: var(--espresso); display: block; margin-bottom: 6px; }
.form input, .form textarea, .form select {
  width: 100%; font: 500 1.06rem/1.4 var(--font-body); color: var(--ink);
  background: var(--paper); border: 1.5px solid rgba(74, 46, 31, .3);
  border-radius: 12px; padding: 14px 16px; min-height: 52px;
}
.form textarea { min-height: 130px; resize: vertical; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */
footer.site {
  background: var(--espresso); color: #D9C3A8;
  padding: 64px 0 110px;             /* bottom room for call bar */
  font-size: 1rem;
  border-top: 3px solid var(--rust);
}
footer.site h4 { color: #FFF6E9; font-size: 1.05rem; margin-bottom: 12px; }
footer.site a { color: var(--peach); text-decoration: none; }
footer.site a:hover { text-decoration: underline; }
.fgrid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 34px; }
.fbottom { border-top: 1px solid rgba(243, 226, 205, .18); margin-top: 44px; padding-top: 22px; font-size: .92rem; color: #B99C7E; }
@media (max-width: 860px) { .fgrid { grid-template-columns: 1fr 1fr; } }

/* ---------- sticky mobile call bar ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; grid-template-columns: 1fr 1fr auto; gap: 1px;
  background: var(--espresso);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 60px; font: 700 1.05rem/1 var(--font-body);
  color: #fff; text-decoration: none;
}
.callbar .call { background: var(--rust); }
.callbar .txt { background: #3A2417; }
.callbar .x {
  background: var(--espresso); color: #B99C7E; border: 0;
  font-size: 1.15rem; padding: 0 14px; cursor: pointer; min-height: 60px;
}
@media (max-width: 900px) {
  .callbar.on { display: grid; }
}

/* ---------- reveal + motion (only when motion is welcome) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* reveal-hide only when JS is confirmed running (html.js set inline in <head>) */
  html.js .rv, html.js .rvg > *:not(.rv-done) { opacity: 0; transform: translateY(24px); transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: var(--d, 0s); }
  html.js .rv.in { opacity: 1; transform: none; }
  /* failsafe: if site.js never stamps js-ready (404/blocked/error), force-reveal at 3s so content is never trapped invisible */
  html.js:not(.js-ready) .rv, html.js:not(.js-ready) .rvg > * { animation: rv-failsafe 0s 3s forwards; }

  /* v4: hand-drawn underline draws itself in (needs pathLength="1" on the path) */
  html.js .rv .hand > svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html.js .rv.in .hand > svg path { animation: draw .9s var(--ease) .4s forwards; }

  .btn { transition: transform .16s var(--ease), box-shadow .2s var(--ease), background .2s; }
  .btn:active, .callpill:active { transform: scale(.97); }
  .callpill { transition: transform .16s var(--ease); }

  /* v4: header shadow eases in */
  .top { transition: box-shadow .3s, background .3s; }
  .sub-btn svg { transition: transform .24s var(--ease); }

  /* v4: FAQ marker morph + answer fade-in */
  .faq summary::after { transition: transform .2s var(--ease); }
  .faq details[open] .a { animation: faq-in .2s var(--ease); }

  /* v4: dropdown panel eases open */
  @media (min-width: 1201px) {
    .sub { transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s; }
    nav.main > a::after, .nvi > a::after { transition: transform .28s var(--ease); }
  }

  /* v4: mobile panel entrances (motion-gated; display toggles above stay the no-JS/reduced truth) */
  @media (max-width: 1200px) {
    nav.main.open { animation: panel-in .22s var(--ease); }
    .nvi.open > .sub { animation: panel-in .2s var(--ease); }
  }

  /* v4: marquee drift — pauses on hover */
  .marq-track { animation: marq 38s linear infinite; }
  .marq:hover .marq-track { animation-play-state: paused; }

  /* v4: hero stamp + chip gently bob */
  .arch-wrap .stamp { animation: stampbob 7s ease-in-out 2; }
  .arch-wrap .chip { animation: chipbob 5.5s ease-in-out 1.2s 2; }

  .callbar { transition: transform .35s var(--ease); }
  .callbar.show { transform: translateY(0); }

  @media (hover: hover) and (pointer: fine) {
    .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(192, 90, 46, .42); }
    .btn--ghost:hover, .btn--light:hover { box-shadow: 0 8px 18px rgba(46, 29, 18, .14); }
    .btn:hover:active { transform: translateY(-1px) scale(.97); }
    .pk, .path, .cat { transition: transform .28s var(--ease), border-color .28s; }
    .pk::after, .path::after, .cat::after { transition: opacity .28s var(--ease); }
    .pk:hover, .path:hover { transform: translateY(-5px); }
    .pk:hover::after, .path:hover::after { opacity: 1; }
    .cat:hover { border-color: rgba(192, 90, 46, .3); }
    .cat:hover::after { opacity: 1; }
    .svc-row { transition: background .25s; }
    .svc-row > * { transition: transform .25s var(--ease); }
    .svc-row:hover { background: var(--cream); }
    .svc-row:hover > * { transform: translateX(12px); }
    .svc-row:hover .go { transform: translateX(18px); }   /* 12px indent + the existing 6px arrow nudge */
    .cat-list a { transition: background .2s; }
    .cat-list a:hover { background: #FFFaF0; }
    .cat-list .go { transition: transform .25s var(--ease); }
    .cat-list a:hover .go { transform: translateX(5px); }
    .cat-list a:hover .t { color: var(--rust); }
    nav.main a { transition: background .18s; }
  }

  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes rv-failsafe { to { opacity: 1; transform: none; } }
  @keyframes marq { to { transform: translateX(-50%); } }
  @keyframes stampbob {
    0%, 100% { transform: rotate(-11deg) translateY(0); }
    50% { transform: rotate(-9.5deg) translateY(-6px); }
  }
  @keyframes chipbob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
  }
  @keyframes panel-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes faq-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
  }
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  .callbar { transform: none; }
  .callbar.show { transform: none; }
  .marq-track { animation: none; }
}

/* utility */
.center { text-align: center; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ===== TH feedback 2026-07-18: reviews + hero chip off the photo + Buddy story ===== */
.stars { color: #E8A33D; letter-spacing: .14em; font-weight: 800; margin: 0; }
.chip--static { position: static; display: inline-block; margin-top: 16px; animation: none !important; }
.story-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 30px; }
@media (max-width: 860px) { .story-pair { grid-template-columns: 1fr; } }
.story-pair figure { margin: 0; }
.story-pair img { width: 100%; height: auto; border-radius: 18px; box-shadow: var(--shadow-1); display: block; }
.story-pair figcaption { margin-top: 12px; font-weight: 700; color: var(--espresso); }
.story-pair .cap-tag { display: inline-block; font: 800 .72rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--paper); background: var(--rust); border-radius: 999px; padding: 6px 12px; margin-right: 10px; }