/* Denver Hot Tub Removal — LIGHT PARTY theme (LIVE)
   ------------------------------------------------------------------
   The party direction, dialled back. The full-strength version lives in
   ../denverhottubremoval-party/ for comparison; this one keeps its warmth
   and its rounded, friendly geometry but stops shouting:

     - deep plum panel  -> soft teal ink (lighter, less nightclub)
     - hot coral fills  -> warm coral used mainly as accent, more white space
     - wavy "pool edge"  -> a quiet gradient fade
     - 20/28px radii    -> 14/20px, still round but less bubbly
     - heavy shadows    -> softer, wider, lower opacity

   The previous ocean-blue theme is preserved at assets/styles-ocean-theme.bak
   (excluded from upload via .assetsignore).

   Separation from the junk-haul property still holds on all three axes:
   that site is Inter + royal blue/green + 12px radius; this one is Fredoka +
   coral/teal + 14px radius.

   Contents:
     1. Tokens
     2. Base + typography
     3. Header / navigation
     4. Buttons + focus
     5. Hero + media
     6. Access gauge (signature element)
     7. Sections, cards, tables, FAQ, areas
     8. Band, forms, footer
     9. Quiz funnel
    10. Sticky mobile call bar
    11. Access diagrams (photo slots)
   ------------------------------------------------------------------ */

/* ===================================================================
   1. Tokens
   =================================================================== */

:root {
  /* Coral — warm, energetic, the primary party colour.
     --coral-600 is the one used for text and button fills: 5.76:1 on white,
     verified with the same contrast audit the live site was checked with.
     The brighter #E8395A read nicer but only cleared 4.07:1 — under 4.5:1 —
     so it's kept as --coral-vibrant for large decorative surfaces only
     (big headline emphasis, gradients) where WCAG's large-text 3:1 floor
     actually applies. Don't use --coral-vibrant for body text or buttons. */
  --coral-900:    #7A1030;
  --coral-700:    #A01840;   /* hover state, deeper still */
  --coral-600:    #C41E4F;   /* primary — 5.76:1 on white */
  --coral-vibrant:#E8395A;   /* decorative/large-text only — 4.07:1 */
  --coral-500:    #FF5C7C;
  --coral-300:    #FFA5B7;
  --coral-100:    #FFE1E8;
  --coral-50:     #FFF3F6;

  /* Turquoise — pool water, the secondary party colour */
  --turq-900: #04383D;
  --turq-700: #067A82;
  --turq-600: #04858F;   /* secondary — verified on white */
  --turq-300: #7FE3DA;
  --turq-100: #DFF8F5;
  --turq-50:  #F0FCFB;

  /* Sun — confetti accent only, never body text (fails contrast on white) */
  --sun-500: #F5A623;
  --sun-300: #FFD873;

  /* Surfaces */
  --page:    #FFFFFF;
  --tint:    #FDF7F4;   /* barely-there warm wash */
  --card:    #FFFFFF;
  --raised:  #FBEAE2;
  --deep:    #12494F;   /* soft teal ink — the one dark surface, lighter than the plum it replaces */

  /* Ink */
  --ink:      #1F2A2C;   /* headings */
  --ink-body: #44514F;   /* body — 8:1+ on white */
  /* Must clear 4.5:1 on --tint, not just on white. */
  --ink-mute: #63736F;

  --line:   #EBE3DE;
  --line-2: #D9CCC4;

  /* Type — rounded playful display, same legible body as the live site */
  --display: "Fredoka", "Baloo 2", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;

  --t-xs:   0.78rem;
  --t-sm:   0.9rem;
  --t-base: 1.02rem;
  --t-lede: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --t-h3:   clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
  --t-h2:   clamp(1.7rem, 1.35rem + 1.7vw, 2.6rem);
  --t-h1:   clamp(2.3rem, 1.6rem + 3.2vw, 4rem);

  /* Space */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --section-y: clamp(3.25rem, 6.5vw, 5rem);

  --measure: 64ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --shell: 1140px;

  /* Shape + depth — everything rounded is the primary differentiator now,
     the exact opposite move from the live site's sharp 3px corners. */
  --r:      14px;
  --r-lg:   20px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(31, 42, 44, 0.05);
  --sh-2: 0 6px 20px rgba(31, 42, 44, 0.08);
  --sh-3: 0 14px 44px rgba(31, 42, 44, 0.10);

  --fast: 0.15s;
  --mid:  0.3s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===================================================================
   2. Base + typography
   =================================================================== */

body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--ink-body);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { margin: 0 0 1.15em; max-width: var(--measure); text-wrap: pretty; }
a { color: var(--turq-700); }
img, svg { max-width: 100%; }
img { display: block; height: auto; }

:target, h1, h2, h3, section[id] { scroll-margin-top: 92px; }

.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }

/* Confetti dot before every eyebrow label — the one flourish repeated
   everywhere, cheap to render, reads "party" without needing new photos. */
.eyebrow {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--coral-600);
  margin: 0 0 var(--s-3);
  display: inline-flex; align-items: center; gap: 0.5em;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sun-500); flex: none;
}
.section--deep .eyebrow::before { background: var(--turq-300); }

/* ===================================================================
   3. Header / navigation
   =================================================================== */

.topbar {
  background: var(--deep);
  color: #DCEAE9;
  font-size: var(--t-sm);
  padding: var(--s-2) 0;
}
.topbar .shell { display: flex; gap: var(--s-5); justify-content: space-between; flex-wrap: wrap; }
.topbar strong { color: #FFFFFF; font-weight: 700; }
.topbar a { color: #FFFFFF; text-decoration-color: currentColor; text-underline-offset: 3px; }  /* quote link replaced the phone number, 24 Sep 2026 */



.masthead {
  position: sticky; top: 0; z-index: 40;
  background: var(--page);
  border-bottom: 1px solid var(--line);
}
.masthead .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: 74px; padding: var(--s-3) 0;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-size: 1.2rem; font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em; line-height: 1.15;
}
.wordmark__mark { width: 34px; height: 34px; flex: none; display: block; }
.wordmark__text { display: inline-flex; gap: 0.28em; }
/* "Denver" deep plum, "Hot Tub Removal" coral — no italic, Fredoka reads
   fun on its own without needing a slant. */
.wordmark__a { color: var(--deep); }
.wordmark__b { font-style: normal; color: var(--coral-600); }

.footer .wordmark { color: #FFFFFF; }
.footer .wordmark__a { color: #FFFFFF; }
.footer .wordmark__b { color: var(--turq-300); }

.nav { display: flex; gap: var(--s-5); align-items: center; }
.nav a, .drop__btn {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 44px;
  font-family: var(--body); font-size: var(--t-sm); font-weight: 500;
  color: var(--ink-body); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--fast) linear, border-color var(--fast) linear;
}
.nav a:hover, .drop__btn:hover, .drop__btn[aria-expanded="true"] {
  color: var(--coral-600); border-bottom-color: var(--coral-600);
}

.drop { position: relative; }
.drop__btn::after {
  content: ""; width: 5px; height: 5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.drop__menu {
  position: absolute; top: calc(100% + var(--s-2)); left: calc(var(--s-4) * -1);
  background: var(--page); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  list-style: none; margin: 0; padding: var(--s-2) 0; min-width: 220px;
  display: none; z-index: 60;
}
.drop__btn[aria-expanded="true"] + .drop__menu { display: block; }
.drop__menu a {
  display: block; padding: var(--s-3) var(--s-4);
  color: var(--ink-body); text-decoration: none; font-size: var(--t-sm);
  border: 0;
  transition: background var(--fast) linear, color var(--fast) linear;
}
.drop__menu a:hover { background: var(--coral-50); color: var(--coral-700); }

.burger {
  display: none; place-items: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  cursor: pointer;
}
.burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--ink); margin: 4px auto;
  transition: transform var(--mid) var(--ease), opacity var(--fast) linear;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobilenav { display: none; border-top: 1px solid var(--line); background: var(--tint); padding: var(--s-4) 0 var(--s-6); }
.mobilenav.open { display: block; }
.mobilenav ul { list-style: none; padding: 0; margin: 0 0 var(--s-5); }
.mobilenav a {
  display: flex; align-items: center; min-height: 46px;
  color: var(--ink-body); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mobilenav .eyebrow { margin-top: var(--s-3); }

@media (max-width: 940px) { .nav { display: none; } .burger { display: grid; } }
@media (min-width: 941px) { .mobilenav { display: none !important; } }
@media (max-width: 640px) {
  /* The topbar's two halves stack here, and the desktop row gap (--s-5) became
     a 24px void between them: measured 127px tall at 375px, about a sixth of
     the viewport before the header even started, with the tagline wrapping on
     top of that. Compact strip instead -- one line where it fits, two small
     centred ones where it doesn't. Keep the row gap at 0. */
  .topbar { font-size: 0.7rem; padding: 0.3rem 0; line-height: 1.45; }
  .topbar .shell { gap: 0 var(--s-3); justify-content: center; text-align: center; }
  .masthead .shell { min-height: 62px; }
  .masthead .btn { padding: 0 var(--s-4); font-size: var(--t-sm); min-height: 42px; }
}

/* ===================================================================
   4. Buttons + focus
   =================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 50px; padding: 0 var(--s-6);
  font-family: var(--body); font-size: 1rem; font-weight: 700; letter-spacing: 0.01em;
  text-decoration: none; text-align: center;
  color: #FFFFFF; background: var(--coral-600);
  border: 1px solid var(--coral-600); border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--fast) linear, border-color var(--fast) linear,
              transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.btn:hover { background: var(--coral-700); border-color: var(--coral-700); transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn--quiet {
  background: transparent; color: var(--coral-700);
  border-color: var(--line-2);
}
.btn--quiet:hover { background: var(--coral-50); color: var(--coral-700); border-color: var(--coral-600); }

.btn--light { background: #FFFFFF; color: var(--coral-700); border-color: #FFFFFF; }
.btn--light:hover { background: var(--coral-50); border-color: var(--coral-50); color: var(--coral-700); }

:focus-visible { outline: 3px solid var(--turq-600); outline-offset: 3px; border-radius: var(--r); }
.band :focus-visible, .section--deep :focus-visible, .footer :focus-visible { outline-color: #FFFFFF; }

/* ===================================================================
   5. Hero + media
   =================================================================== */

.hero {
  position: relative;
  padding: clamp(2.5rem, 5.5vw, 4.25rem) 0 clamp(3.5rem, 6vw, 5rem);
  background:
    radial-gradient(760px 400px at 8% -12%, var(--coral-50), transparent 72%),
    radial-gradient(620px 340px at 96% 6%, var(--turq-50), transparent 68%),
    var(--page);
  overflow: hidden;
}
/* A quiet fade instead of the full-strength version's wavy "pool edge"
   scallop — same job (soften the hero's bottom boundary) with far less
   visual noise. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: linear-gradient(to bottom, transparent, var(--tint));
  pointer-events: none;
}
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 4.5vw, 3.75rem); align-items: center;
}
@media (max-width: 920px) { .hero__grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: var(--s-4); }
.hero h1 em { font-style: normal; color: var(--coral-vibrant); }
.hero .lede { font-size: var(--t-lede); color: var(--ink-body); max-width: 52ch; }
.hero__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-6); }

.hero__media, .band__media {
  margin: 0; position: relative;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-3);
  aspect-ratio: 3 / 2; background: var(--raised);
}
.hero__media img, .band__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media figcaption, .band__media figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s-6) var(--s-4) var(--s-3);
  background: linear-gradient(to top,
              rgba(36, 16, 64, 0.94) 0%,
              rgba(36, 16, 64, 0.90) 55%,
              rgba(36, 16, 64, 0) 100%);
  color: #FFFFFF; font-size: var(--t-sm);
}

.trustrow {
  display: flex; gap: var(--s-5); flex-wrap: wrap;
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--ink-body);
}
.trustrow span { display: flex; align-items: center; gap: var(--s-2); }
.trustrow span::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-radius: 50%; background: var(--coral-600);
}

.breadcrumb { font-size: var(--t-sm); color: var(--ink-mute); padding-top: var(--s-5); }
.breadcrumb a { color: var(--ink-mute); text-decoration: none; }
.breadcrumb a:hover { color: var(--coral-700); text-decoration: underline; }

.photoband { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 860px) { .photoband { grid-template-columns: 1fr; } }
.photoband--flip .band__media { order: -1; }
@media (max-width: 860px) { .photoband--flip .band__media { order: 0; } }

/* ===================================================================
   6. Access gauge — signature element
   =================================================================== */

.gauge {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.gauge h2 { font-size: 1.3rem; margin-bottom: var(--s-2); }
.gauge .hint { font-size: var(--t-sm); color: var(--ink-mute); margin-bottom: var(--s-4); }

.scene {
  width: 100%; height: auto; display: block;
  background: var(--turq-50); border-radius: var(--r);
  border: 1px solid var(--line);
}
.scene .fence { fill: none; stroke: #B79BC2; stroke-width: 3; }
.scene .post { fill: var(--ink-body); }
.scene .tub-shell {
  fill: var(--turq-300); stroke: var(--turq-700); stroke-width: 2.5;
  transition: transform 0.5s var(--ease);
}
.scene .tub-cut {
  stroke: var(--coral-700); stroke-width: 2.5; stroke-dasharray: 5 4;
  opacity: 0; transition: opacity var(--mid) linear;
}
.scene.cutting .tub-cut { opacity: 1; }
.scene .gap-mark { stroke: var(--coral-600); stroke-width: 2; }
.scene .gap-label { font-family: var(--body); font-size: 13px; font-weight: 700; fill: var(--coral-700); }
.scene .ground { stroke: #C7AFCF; stroke-width: 2; stroke-dasharray: 8 6; }

.gaugeopts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); margin-top: var(--s-4); }
.gaugeopts button {
  min-height: 48px; padding: var(--s-2) var(--s-3);
  font-family: var(--body); font-size: var(--t-sm); font-weight: 600;
  color: var(--ink-body); background: var(--page);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color var(--fast) linear, background var(--fast) linear,
              color var(--fast) linear, box-shadow var(--fast) linear;
}
.gaugeopts button:hover { border-color: var(--coral-600); background: var(--coral-50); }
.gaugeopts button[aria-pressed="true"] {
  background: var(--coral-600); color: #FFFFFF; border-color: var(--coral-600);
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--page), 0 0 0 2px var(--coral-600);
}

.verdict { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.verdict__head {
  font-family: var(--display); font-size: 1.5rem; font-weight: 600;
  color: var(--coral-700); line-height: 1.15; margin: 0 0 var(--s-2);
}
.verdict__note { font-size: var(--t-sm); color: var(--ink-mute); margin: 0; max-width: none; }

/* ===================================================================
   7. Sections, cards, tables, FAQ, areas
   =================================================================== */

.section { padding: var(--section-y) 0; }
.section--tint { background: var(--tint); border-block: 1px solid var(--line); }
.section--deep { background: var(--deep); color: #DCEAE9; }
.section--deep h2, .section--deep h3, .section--deep h4 { color: #FFFFFF; }
.section--deep .eyebrow { color: var(--turq-300); }
.section--deep p { color: #DCEAE9; }
.section--deep a { color: #FFFFFF; }

.section__head { margin-bottom: var(--s-6); max-width: 60ch; }
.section__head h2 { margin-bottom: var(--s-3); }
.section__head p { color: var(--ink-mute); }
.section--deep .section__head p { color: #DCEAE9; }

.grid { display: grid; gap: var(--s-4); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: border-color var(--fast) linear, transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
a.card:hover, a.card:focus-visible {
  border-color: var(--coral-600); transform: translateY(-3px); box-shadow: var(--sh-2);
}
.card h3 { margin: 0; }
.card p { font-size: var(--t-sm); color: var(--ink-mute); margin: 0; }
.card__more { margin-top: auto; padding-top: var(--s-3); font-size: var(--t-sm); font-weight: 700; color: var(--coral-700); }
.section--deep .card { background: #17565C; border-color: #1E6A70; }
.section--deep .card p { color: #DCEAE9; }
.section--deep .card__more { color: var(--turq-300); }

.stepnum {
  align-self: start; flex: none;
  font-family: var(--display); font-style: normal; font-weight: 700;
  font-size: 1.9rem; line-height: 1; color: var(--coral-600);
}
.section--deep .stepnum { color: var(--turq-300); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); margin-top: var(--s-5); }
.compare { width: 100%; border-collapse: collapse; font-size: var(--t-base); font-variant-numeric: tabular-nums; background: var(--card); }
.compare th, .compare td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th {
  font-family: var(--body); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--coral-700); background: var(--coral-50);
}
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td:first-child { font-weight: 700; color: var(--ink); }
.section--deep .table-wrap { border-color: #1E6A70; }
.section--deep .compare { background: #17565C; }
.section--deep .compare thead th { color: var(--turq-300); background: #144F55; }
.section--deep .compare th, .section--deep .compare td { border-bottom-color: #1E6A70; color: #DCEAE9; }
.section--deep .compare td:first-child { color: #FFFFFF; }

.faq { max-width: 76ch; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  min-height: 58px; padding: var(--s-4) 0;
  font-size: 1.04rem; font-weight: 700; color: var(--ink);
  transition: color var(--fast) linear;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--coral-600); }
.faq summary::after {
  content: ""; flex: none;
  width: 8px; height: 8px;
  border-right: 2px solid var(--coral-600); border-bottom: 2px solid var(--coral-600);
  transform: rotate(45deg);
  transition: transform var(--mid) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { padding-bottom: var(--s-4); margin: 0; color: var(--ink-mute); }
.section--deep .faq details, .section--deep .faq details:first-child { border-color: #1E6A70; }
.section--deep .faq summary { color: #FFFFFF; }
.section--deep .faq summary::after { border-color: var(--turq-300); }
.section--deep .faq details p { color: #DCEAE9; }

.arealist { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); padding: 0; list-style: none; }
.arealist a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--s-4);
  font-size: var(--t-sm); font-weight: 600;
  color: var(--ink-body); text-decoration: none;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  transition: border-color var(--fast) linear, color var(--fast) linear,
              background var(--fast) linear, transform var(--fast) var(--ease);
}
.arealist a:hover, .arealist a:focus-visible {
  border-color: var(--coral-600); color: #FFFFFF; background: var(--coral-600); transform: translateY(-2px);
}

.prose { max-width: 70ch; }
.prose h2 { margin-top: var(--s-7); margin-bottom: var(--s-4); }
.prose h3 { margin-top: var(--s-6); margin-bottom: var(--s-3); }
.prose ul { max-width: var(--measure); padding-left: 1.2rem; }
.prose li { margin-bottom: var(--s-2); }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ===================================================================
   8. Band, forms, footer
   =================================================================== */

.band {
  position: relative;
  padding: clamp(3rem, 5.5vw, 4.25rem) 0;
  background-color: var(--coral-700);
  background-image: linear-gradient(120deg, var(--deep), var(--turq-700) 45%, var(--coral-600));
  color: #FDECE6;
}
.band h2 { color: #FFFFFF; margin-bottom: var(--s-3); }
.band p { color: #FDECE6; font-size: var(--t-lede); }
.band .btn { background: #FFFFFF; color: var(--coral-700); border-color: #FFFFFF; }
.band .btn:hover { background: var(--coral-50); border-color: var(--coral-50); color: var(--coral-700); }

.form { display: grid; gap: var(--s-4); max-width: 540px; }
.form label { font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.form input, .form select, .form textarea {
  width: 100%; min-height: 50px; padding: var(--s-3) var(--s-4);
  font-family: var(--body); font-size: 1rem;
  color: var(--ink); background: var(--page);
  border: 1px solid var(--line-2); border-radius: var(--r);
  transition: border-color var(--fast) linear, box-shadow var(--fast) linear;
}
.form input::placeholder, .form textarea::placeholder { color: var(--ink-mute); }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--coral-600);
  box-shadow: 0 0 0 3px rgba(232, 57, 90, 0.2);
}
.form textarea { min-height: 120px; resize: vertical; }
.formstatus:empty { display: none; }
.formstatus {
  margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r);
  font-size: var(--t-sm); font-weight: 700; line-height: 1.5;
}
.formstatus.is-ok  { color: #0A5B3E; background: #EDF9F3; border: 1px solid #C8E9DA; }
.formstatus.is-bad { color: #8A1220; background: #FDF0F1; border: 1px solid #F6D3D7; }

.section--deep .form label { color: #FFFFFF; }
.section--deep .form input, .section--deep .form select, .section--deep .form textarea {
  color: var(--ink); background: #FFFFFF; border-color: #1E6A70;
}

.contactblock { display: grid; gap: var(--s-5); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.contactblock p { margin: 0; }
.bignum { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); color: var(--ink); }
.bignum a { color: var(--coral-700); text-decoration: none; }
.bignum a:hover { text-decoration: underline; }

a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.quizfoot a[href^="tel:"], .topbar a[href^="tel:"] { min-height: 0; display: inline; }
@media (max-width: 640px) {
  .quizfoot a[href^="tel:"] { min-height: 44px; display: inline-flex; }
}

.footer {
  background: var(--deep); color: #B6CFCD;
  padding: var(--s-8) 0 var(--s-6);
  font-size: var(--t-sm);
}
.footer a { color: #E4F0EF; text-decoration: none; }
.footer a:hover { color: #FFFFFF; text-decoration: underline; }
.footer .wordmark { color: #FFFFFF; }
.footer .wordmark em { color: var(--turq-300); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s-6); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h3 {
  font-family: var(--body); font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--turq-300); margin: 0 0 var(--s-3);
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.footer strong { color: #FFFFFF; }
.footer__legal { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid #1E6A70; font-size: var(--t-xs); }

/* ===================================================================
   9. Quiz funnel
   =================================================================== */

.quizshell { max-width: 700px; margin-inline: auto; }
.quizhead { margin-bottom: var(--s-6); }
.quiztitle { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.9rem); margin-bottom: var(--s-3); }
.quizsub { color: var(--ink-body); font-size: var(--t-lede); }

.progress { height: 8px; background: var(--coral-100); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.progress__bar {
  height: 100%; width: 16.6%;
  background: linear-gradient(90deg, var(--coral-vibrant), var(--turq-600));
  transition: width var(--mid) var(--ease);
}
.progress__label {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-mute); margin: var(--s-3) 0 var(--s-6);
}

.quiz .step { display: none; border: 0; padding: 0; margin: 0; }
.quiz .step.is-active { display: block; animation: stepin var(--mid) var(--ease); }
@keyframes stepin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .quiz .step.is-active { animation: none; } }

.q {
  float: left; width: 100%;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);
  line-height: 1.15; color: var(--ink);
  padding: 0; margin-bottom: var(--s-2);
}
.quiz .step > .q ~ * { clear: both; }
.qhint { color: var(--ink-mute); font-size: var(--t-sm); margin: 0; padding-top: var(--s-2); }

.opts { display: grid; gap: var(--s-3); padding-top: var(--s-5); }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.opt span {
  display: grid; grid-template-columns: 22px 1fr; column-gap: var(--s-4);
  align-items: center;
  min-height: 58px; padding: var(--s-4);
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
  transition: border-color var(--fast) linear, background var(--fast) linear,
              box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.opt span::before {
  content: ""; grid-row: 1 / span 2;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--page);
  transition: border-color var(--fast) linear, box-shadow var(--fast) linear;
}
.opt span strong { grid-column: 2; font-size: 1.03rem; font-weight: 700; color: var(--ink); }
.opt span em { grid-column: 2; font-style: normal; font-size: var(--t-sm); color: var(--ink-mute); margin-top: 2px; }
.opt:hover span { border-color: var(--coral-600); transform: translateY(-2px); }
.opt:hover span::before { border-color: var(--coral-600); }

.opt input:checked + span {
  background: var(--coral-50); border-color: var(--coral-600);
  box-shadow: 0 0 0 1px var(--coral-600);
}
.opt input:checked + span::before { border-color: var(--coral-600); box-shadow: inset 0 0 0 5px var(--coral-600); }
.opt input:focus-visible + span { outline: 3px solid var(--turq-600); outline-offset: 3px; }

.quiznav { display: flex; gap: var(--s-3); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.quiznav .btn:disabled {
  background: var(--tint); color: var(--ink-mute); border-color: var(--line-2);
  cursor: not-allowed; transform: none; box-shadow: none;
}

.result {
  background-color: var(--deep);
  background-image: linear-gradient(135deg, var(--deep), var(--coral-700));
  color: #E4F0EF;
  padding: var(--s-5);
  border: 1px solid var(--coral-700);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.result .eyebrow { color: var(--turq-300); }
.result__size { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.12em; color: #E4F0EF; margin: 0 0 var(--s-1); }
.result__price {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.7rem);
  color: #FFFFFF; line-height: 1.1; margin: 0;
}
.result__note { font-size: var(--t-sm); color: #E4F0EF; margin: var(--s-3) 0 0; max-width: none; }

.done { padding: var(--s-7) 0; }
.quizfoot { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-mute); }
.quizfoot a { color: var(--coral-700); }

.masthead .wordmark { display: inline-block; padding-block: 0.8rem; }

/* ===================================================================
   Sticky mobile call bar
   ===================================================================
   Injected by site.js, so it exists on every page without 12 edits.
   Phone-only: above 720px the header CTA is already visible. */

.callbar {
  position: fixed; z-index: 60; inset: auto 0 0 0;
  display: none; gap: 0.5rem;
  padding: 0.55rem 0.7rem calc(0.55rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(122, 16, 48, 0.14);
}
.callbar__btn {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.45rem; min-height: 50px; padding: 0 0.9rem;
  font-family: var(--body); font-size: 0.95rem; font-weight: 700;
  white-space: nowrap; text-decoration: none; border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.callbar__btn--call  { color: #FFFFFF; flex: 1.5 1 0; background: var(--coral-600); }
.callbar__btn--quote { color: var(--coral-700); background: #FFFFFF; border-color: var(--coral-700); }
.callbar__btn:focus-visible { outline: 3px solid var(--turq-600); outline-offset: 2px; }

@media (max-width: 719px) {
  .callbar { display: flex; }
  body.has-callbar { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
}


/* ===================================================================
   Hero quote panel
   ===================================================================
   The hero's right column now carries the quote funnel; the gate-access
   gauge moved to its own section directly below. Same rationale as the
   junk-haul site: the funnel is the conversion path, so it goes first. */

.hero:has(.heroquiz) .hero__grid {
  grid-template-columns: 0.9fr 1.1fr;
  align-items: start;
}
@media (max-width: 920px) {
  .hero:has(.heroquiz) .hero__grid { grid-template-columns: 1fr; }
}

.heroquiz {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
}
.heroquiz__title {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.55rem);
  margin-bottom: var(--s-2);
}
.heroquiz__sub {
  font-size: var(--t-sm); color: var(--ink-mute);
  margin-bottom: var(--s-5); max-width: none;
}
/* Tighter than the dedicated /quote page so six steps don't tower over the
   headline beside them. */
.heroquiz .q { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem); }
.heroquiz .opts { padding-top: var(--s-4); gap: var(--s-2); }
.heroquiz .opt span { min-height: 50px; padding: var(--s-3); }
.heroquiz .opt span strong { font-size: 0.97rem; }
.heroquiz .opt span em { font-size: var(--t-xs); }
.heroquiz .quiznav { margin-top: var(--s-5); padding-top: var(--s-4); }
.heroquiz .done { padding: var(--s-5) 0; }
.heroquiz .result { padding: var(--s-4); }


/* ===================================================================
   11. Access diagrams — and the photo slots they stand in
   ===================================================================
   These are drawings, not decoration. Each area page gets the one that
   matches what that page's copy already says about access there, so the
   six pages don't carry the same picture six times.

   Every colour is a token, so a diagram can't drift from the theme. They
   are also the PHOTO SLOTS: when a tenant supplies real job photos, add
   the slot name to JOB_PHOTOS in site.js and the drawing is replaced by
   /assets/img/jobs/<slot>.jpg. See IMAGE-NOTES-denverhottubremoval.md. */

.diagram-fig {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
}
.diagram-fig .dg,
.diagram-fig img { display: block; width: 100%; height: auto; }
.diagram-fig img { aspect-ratio: 3 / 2; object-fit: cover; }
.diagram-fig figcaption {
  padding: var(--s-3) var(--s-4) var(--s-4);
  font-size: var(--t-sm);
  color: var(--ink-mute);
  border-top: 1px solid var(--line);
}

/* Drawing kit. Stroke weights stay chunky so the diagrams survive being
   shown at ~340px on a phone. */
.dg-ground   { fill: var(--turq-50); }
.dg-lot      { fill: #FFFFFF; stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 6 5; }
.dg-patio    { fill: var(--turq-100); }
.dg-slopefill{ fill: var(--turq-100); }
.dg-outfill  { fill: var(--card); stroke: var(--line-2); stroke-width: 2; }
.dg-panel    { fill: #FFFFFF; stroke: var(--line); stroke-width: 2; }
.dg-solid    { fill: var(--raised); stroke: var(--line-2); stroke-width: 3; }
.dg-struct   { fill: none; stroke: var(--line-2); stroke-width: 3;
               stroke-linejoin: round; stroke-linecap: round; }
.dg-grade    { fill: none; stroke: var(--line-2); stroke-width: 3; stroke-linecap: round; }
.dg-fence    { stroke: var(--line-2); stroke-width: 5; stroke-linecap: round; }
.dg-plant    { fill: var(--turq-100); stroke: var(--turq-600); stroke-width: 2; }
.dg-wheel    { fill: var(--ink); }
.dg-tub      { fill: var(--coral-100); stroke: var(--coral-600); stroke-width: 3; }
.dg-water    { fill: var(--turq-300); }
.dg-bolt     { fill: var(--sun-500); }
.dg-drip     { fill: none; stroke: var(--turq-600); stroke-width: 3;
               stroke-linecap: round; stroke-dasharray: 3 7; }

/* Cut lines and routes are the only coral strokes — they carry the meaning. */
.dg-cut      { fill: none; stroke: var(--coral-600); stroke-width: 3;
               stroke-dasharray: 8 6; stroke-linecap: round; }
.dg-route    { fill: none; stroke: var(--coral-600); stroke-width: 3;
               stroke-dasharray: 2 8; stroke-linecap: round; }
.dg-arc      { fill: none; stroke: var(--coral-vibrant); stroke-width: 3; }
.dg-dim      { stroke: var(--turq-700); stroke-width: 2; stroke-linecap: round; }

/* --coral-700 and --ink-mute are used here on white/near-white only, where
   both clear 4.5:1. Don't move them onto a filled shape without rechecking. */
.dg-label { font-family: var(--body); font-size: 15px; font-weight: 600; fill: var(--ink-body); }
.dg-note  { font-family: var(--body); font-size: 13px; fill: var(--ink-mute); }
.dg-key   { font-family: var(--display); font-size: 17px; font-weight: 600; fill: var(--coral-700); }