/* ==========================================================================
   Precise Painting & Coatings LLC
   Design system — palette sampled from the door-hanger flyer.
   No build step, no dependencies. See STRATEGY.md for content rationale.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --green-900: #0B3D21;
  --green-800: #0F4A28;
  --green-700: #14532D;   /* primary brand green (flyer oval) */
  --green-600: #1B6B3A;
  --green-500: #2E8B4F;
  --green-100: #E4F0E8;
  --green-050: #F1F8F3;

  --navy-900: #111C33;
  --navy-800: #1B2A4A;    /* flyer banner navy */
  --navy-700: #26375C;
  --navy-100: #E5E9F0;

  --cream:    #F5F1E8;    /* flyer offer-box cream */
  --cream-dk: #EBE4D6;

  --gold-600: #B8860B;
  --gold-500: #D4A017;    /* accent / stars / highlight */
  --gold-100: #FBF1D8;

  /* Neutrals */
  --ink:      #14181F;
  --body:     #3C4653;
  --muted:    #667080;
  --line:     #E1E5EA;
  --line-soft:#EDF0F3;
  --white:    #FFFFFF;
  --off:      #FAFBFC;

  /* Type */
  --font-display: "Arial Black", "Helvetica Neue", Impact, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.28rem + 0.75vw, 1.9rem);
  --step-3:  clamp(1.75rem, 1.45rem + 1.4vw, 2.6rem);
  --step-4:  clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
  --step-5:  clamp(2.5rem, 1.7rem + 3.6vw, 4.4rem);

  /* Space */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;

  /* Vertical rhythm between sections. Single knob for the whole page — the flat
     6rem top+bottom left 12rem of dead air between blocks, which read as the end
     of the page on a short scroll. Fluid so small screens tighten further. */
  --section-y: clamp(2.75rem, 4.5vw, 4.25rem);

  --wrap: 1180px;
  --wrap-narrow: 780px;

  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(17,28,51,.06), 0 2px 6px rgba(17,28,51,.05);
  --shadow:    0 4px 12px rgba(17,28,51,.08), 0 12px 28px rgba(17,28,51,.07);
  --shadow-lg: 0 10px 24px rgba(17,28,51,.10), 0 28px 60px rgba(17,28,51,.12);

  --header-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4 { color: var(--ink); line-height: 1.15; margin: 0 0 var(--sp-4); font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
h4 { font-size: var(--step-0); letter-spacing: 0; }
p  { margin: 0 0 var(--sp-4); }
a  { color: var(--green-700); text-underline-offset: 2px; }
a:hover { color: var(--green-500); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--sp-2); }
strong { color: var(--ink); font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy-800); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
.section { padding: var(--section-y) 0; }
.section-sm { padding: calc(var(--section-y) * .7) 0; }
.section-tint { background: var(--off); }
.section-cream { background: var(--cream); }
.section-green { background: var(--green-700); color: #DCE9E0; }
.section-green h2, .section-green h3, .section-green h4 { color: #fff; }
.section-navy { background: var(--navy-800); color: #C9D2E2; }
.section-navy h2, .section-navy h3, .section-navy h4 { color: #fff; }

/* Links sitting directly on a dark section background.
   The default link color IS --green-700, which is also the .section-green
   background, so an untreated body link there is invisible. White + underline
   keeps it legible and identifiable without relying on color alone. */
:is(.section-green, .section-navy, .cta-band) a:not(.btn, .card-link, .pill) {
  color: #fff;
  text-decoration: underline;
}
:is(.section-green, .section-navy, .cta-band) a:not(.btn, .card-link, .pill):hover {
  color: var(--gold-500);
}
/* Components inside those sections carry their own light background,
   so their links keep the normal green. */
:is(.section-green, .section-navy, .cta-band)
  :is(.card, .offer-box, .note-plain, .callout) a:not(.btn) {
  color: var(--green-700);
}
:is(.section-green, .section-navy, .cta-band)
  :is(.card, .offer-box, .note-plain, .callout) a:not(.btn):hover {
  color: var(--green-500);
}

.center { text-align: center; }
.section-head { max-width: 720px; margin: 0 auto var(--sp-6); text-align: center; }
.section-head p { font-size: var(--step-1); color: var(--muted); margin-bottom: 0; }
.section-green .section-head p, .section-navy .section-head p { color: inherit; opacity: .85; }

.eyebrow {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-600);
  margin-bottom: var(--sp-3);
}
.section-green .eyebrow, .section-navy .eyebrow { color: var(--gold-500); }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .85rem 1.75rem;
  font-family: var(--font-body); font-size: var(--step-0); font-weight: 800;
  line-height: 1.2; text-decoration: none; text-align: center;
  border: 2px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--green-700); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--green-600); color: #fff; box-shadow: var(--shadow); }
.btn-gold { background: var(--gold-500); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-gold:hover { background: #E5AE1E; color: var(--ink); box-shadow: var(--shadow); }
.btn-outline { background: transparent; color: var(--green-700); border-color: var(--green-700); }
.btn-outline:hover { background: var(--green-700); color: #fff; }
.btn-white { background: #fff; color: var(--green-700); }
.btn-white:hover { background: var(--cream); color: var(--green-800); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.btn-lg { min-height: 60px; padding: 1rem 2.25rem; font-size: var(--step-1); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-row-center { justify-content: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex-shrink: 0; }
.brand img { height: 50px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-display); font-size: 1.02rem; letter-spacing: -.02em;
  color: var(--green-700); text-transform: uppercase;
}
.brand-sub {
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

.site-nav { display: flex; align-items: center; gap: var(--sp-6); }
.site-nav ul { display: flex; align-items: center; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }
.site-nav li { margin: 0; }
/* :not(.btn) keeps these link styles from overriding button colours —
   .site-nav a would otherwise out-specify .btn-primary and make the CTA unreadable.
   Shared line-height across the links, the phone and the CTA is what keeps all
   three optically centred on one line. */
.site-nav a:not(.btn) {
  position: relative;
  text-decoration: none; color: var(--body); font-weight: 600; font-size: .95rem;
  line-height: 1.4; padding: .35rem 0; white-space: nowrap;
}
/* The active/hover underline is a pseudo-element, not a border-bottom. A 2px
   border sits inside the box and pushes the text up off centre relative to the
   phone number and button beside it. */
.site-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: transparent;
}
.site-nav a:not(.btn):hover, .site-nav a:not(.btn)[aria-current="page"] { color: var(--green-700); }
.site-nav a:not(.btn):hover::after,
.site-nav a:not(.btn)[aria-current="page"]::after { background: var(--green-700); }

.nav-cta { display: flex; align-items: center; gap: var(--sp-5); }
.nav-phone {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 800; font-size: .95rem; line-height: 1.4;
  padding: .35rem var(--sp-2);
  color: var(--navy-800); text-decoration: none; white-space: nowrap;
}
.nav-phone:hover { color: var(--green-700); }

/* Dropdown */
.has-drop { position: relative; }
.drop {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 250px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: var(--sp-3); list-style: none; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-drop:hover .drop, .has-drop:focus-within .drop {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.drop a {
  display: block; padding: .55rem .75rem; border-radius: var(--radius-sm);
  border-bottom: 0; font-weight: 600; font-size: .92rem;
}
.drop a:hover { background: var(--green-050); color: var(--green-700); }

@media (max-width: 1000px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); padding: var(--sp-4);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .site-nav > ul > li > a { display: block; padding: .85rem .25rem; border-bottom: 1px solid var(--line-soft); }
  .drop {
    position: static; transform: none; opacity: 1; visibility: visible;
    box-shadow: none; border: 0; border-bottom: 1px solid var(--line-soft);
    padding: 0 0 var(--sp-3) var(--sp-4); min-width: 0; border-radius: 0;
  }
  .has-drop:hover .drop, .has-drop:focus-within .drop { transform: none; }
  .nav-cta { flex-direction: column; align-items: stretch; padding-top: var(--sp-4); }
  .nav-cta .btn { width: 100%; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff;
  background:
    linear-gradient(150deg, rgba(11,61,33,.94) 0%, rgba(20,83,45,.90) 45%, rgba(27,42,74,.93) 100%),
    var(--green-800);
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0; opacity: .10; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
  background-size: 26px 26px;
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--sp-8); align-items: center;
  padding: calc(var(--section-y) * 1.1) 0;
}
.hero h1 { color: #fff; font-size: var(--step-5); margin-bottom: var(--sp-4); }
.hero h1 .hl { color: var(--gold-500); }
.hero-lede { font-size: var(--step-1); color: #D8E5DD; margin-bottom: var(--sp-6); max-width: 34ch; }
.hero-flag {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  color: #fff; font-weight: 700; font-size: var(--step--1);
  padding: .45rem 1rem; border-radius: 999px; margin-bottom: var(--sp-5);
  letter-spacing: .04em; text-transform: uppercase;
}
.hero-note { font-size: var(--step--1); color: #B9CCC1; margin: var(--sp-4) 0 0; }

.hero-card {
  background: #fff; color: var(--body);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--sp-6); border-top: 6px solid var(--gold-500);
}
.hero-card h2 { font-size: var(--step-2); margin-bottom: var(--sp-2); }
.hero-card .sub { color: var(--muted); font-size: .95rem; margin-bottom: var(--sp-5); }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--sp-7); padding: var(--sp-8) 0; }
  .hero-lede { max-width: none; }
}

/* Trust strip */
.trust-strip { background: var(--navy-800); color: #fff; padding: var(--sp-4) 0; }
.trust-strip ul {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--sp-3) var(--sp-6); list-style: none; margin: 0; padding: 0;
}
.trust-strip li {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  font-weight: 700; font-size: .9rem; letter-spacing: .02em;
}
.trust-strip svg { flex-shrink: 0; color: var(--gold-500); }

/* ---------- Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-6); box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card > :last-child { margin-bottom: 0; }
.card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.card-link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--green-500); color: inherit; }
.card h3 { margin-bottom: var(--sp-3); }
.card p { color: var(--body); }

/* Cards sitting on a dark section (.section-navy, .section-green): a translucent
   panel instead of a white one. This MUST be a class, not inline styles — an
   inline `color` on the card element loses to the `.card p` rule above, which
   left dark body text on a dark panel and made the copy unreadable. */
.card-dark {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  color: #C9D2E2;
  box-shadow: none;
}
.card-dark h3 { color: #fff; }
.card-dark p { color: inherit; }
.card-dark .ticklist svg { color: var(--gold-500); }
.card-more { margin-top: auto; padding-top: var(--sp-4); font-weight: 800; color: var(--green-700); font-size: .95rem; }

.icon-badge {
  width: 54px; height: 54px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-050); color: var(--green-700);
  margin-bottom: var(--sp-4); flex-shrink: 0;
}
.section-green .icon-badge, .section-navy .icon-badge { background: rgba(255,255,255,.12); color: var(--gold-500); }

/* Promise cards */
.promise {
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--green-700);
  border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: border-left-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.promise:hover { border-left-color: var(--gold-500); transform: translateY(-3px); box-shadow: var(--shadow); }
/* The promises aren't a sequence, so they're tagged by subject rather than numbered. */
.promise .tag {
  align-self: flex-start;
  font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-800); background: var(--green-050);
  border: 1px solid var(--green-100); border-radius: 999px;
  padding: .25rem .7rem; margin-bottom: var(--sp-3);
}
.promise h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.promise p { margin-bottom: 0; font-size: .96rem; }

/* Feature list (effort-minimisation) */
.ticklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.ticklist li { display: flex; gap: .75rem; align-items: flex-start; margin: 0; }
.ticklist svg { flex-shrink: 0; margin-top: 4px; color: var(--green-500); }
.section-green .ticklist svg, .section-navy .ticklist svg { color: var(--gold-500); }
.ticklist strong { display: block; }
.ticklist-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4) var(--sp-6); }

/* Steps */
.steps { counter-reset: step; display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step { position: relative; padding-top: var(--sp-6); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--green-700); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.1rem;
}
.step h3 { margin: var(--sp-4) 0 var(--sp-2); }
.step p { margin-bottom: 0; font-size: .96rem; }
.section-green .step::before, .section-navy .step::before { background: var(--gold-500); color: var(--ink); }

/* ---------- How it works ----------
   A second numbered-sequence component, and deliberately not a variant of
   .steps above. There the number sits in its own row ABOVE the heading; here
   the badge and the step name share one line so a reader scanning the section
   gets the whole sequence in a single pass, with the detail demoted to bullets
   underneath. Both layouts are in use, so neither can absorb the other.

   No connecting rail (cf. .daystrip): the rail only works when the markers sit
   alone on their row, and here the step name is beside the badge -- a rule at
   badge height would strike straight through the headings. */
.howto {
  counter-reset: howto;
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.howto > li { margin: 0; }
.howto-step {
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}
/* The header row. align-items:center would drift the badge off the first
   baseline as soon as a step name wraps to two lines, so it stays pinned. */
.howto-step h3 {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: var(--step-1);
  line-height: 1.2;
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
}
.howto-step h3::before {
  counter-increment: howto;
  content: counter(howto);
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--green-700);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  /* Optical centering: the display face sits high in its em box. */
  line-height: 1;
  padding-top: 2px;
}
.howto-step ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.howto-step ul li {
  margin: 0;
  padding-left: 1.6rem;
  position: relative;
  font-size: .95rem;
  color: var(--body);
}
/* Tick drawn in CSS rather than a per-bullet inline SVG -- there are nine of
   them in this section alone, and they carry no meaning a screen reader needs. */
.howto-step ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: .34em;
  width: 11px; height: 6px;
  border-left: 2.5px solid var(--green-500);
  border-bottom: 2.5px solid var(--green-500);
  transform: rotate(-45deg);
}
.howto-cta { margin-top: var(--sp-7); text-align: center; }
.howto-cta .btn-row { justify-content: center; }
.howto-cta p { margin: var(--sp-4) 0 0; }

@media (max-width: 640px) {
  .howto-step { padding: var(--sp-5) var(--sp-4); }
}

/* ---------- Day strip ----------
   Used for the cabinet five-day schedule. The content is a literal work week,
   so it is set as one: five day markers threaded on a continuous rail. Fixed
   at 5 columns rather than auto-fit, so the week can never wrap and leave an
   orphan tile on a second row. Deliberately flat — no cards, no shadows — so
   it reads as a schedule next to the card grids elsewhere on the page. */
.daystrip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The rail. Faded at both ends so it needs no per-column math and stays
   correct if the step count ever changes. */
.daystrip::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--gold-500) 5%, var(--gold-500) 95%, transparent 100%);
}
.daystrip .day { position: relative; margin: 0; padding-top: var(--sp-7); }
.daytag {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  background: var(--green-700);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 999px;
}
.daystrip .day h3 {
  font-size: var(--step-0);
  line-height: 1.25;
  margin: 0 0 var(--sp-2);
}
.daystrip .day p { margin: 0; font-size: .92rem; color: var(--body); }

/* Below ~1080px the five columns drop under ~190px and the text turns into
   narrow noodles, so the rail rotates and the week reads top to bottom. */
@media (max-width: 1080px) {
  .daystrip { grid-template-columns: 1fr; gap: 0; }
  .daystrip::before {
    top: 0; bottom: 0; left: 6px; right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg,
      transparent 0%, var(--gold-500) 4%, var(--gold-500) 96%, transparent 100%);
  }
  .daystrip .day { padding: 0 0 var(--sp-6) var(--sp-6); }
  .daystrip .day:last-child { padding-bottom: 0; }
  .daytag { position: static; margin-bottom: var(--sp-3); }
}

/* Testimonials */
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-6); box-shadow: var(--shadow-sm);
}
.quote blockquote { margin: 0 0 var(--sp-4); font-size: var(--step-1); color: var(--ink); line-height: 1.45; font-weight: 500; }
.quote cite { font-style: normal; font-weight: 800; color: var(--green-700); font-size: .95rem; }
.stars { display: flex; gap: 2px; color: var(--gold-500); margin-bottom: var(--sp-4); }

/* Callout / note */
.callout {
  background: var(--gold-100); border: 1px solid #EBD9A8; border-left: 5px solid var(--gold-500);
  border-radius: var(--radius); padding: var(--sp-5); margin: var(--sp-6) 0;
}
.callout > :last-child { margin-bottom: 0; }
.callout h3 { margin-bottom: var(--sp-2); }

.note-plain {
  background: var(--green-050); border: 1px solid var(--green-100);
  border-radius: var(--radius); padding: var(--sp-5); margin: var(--sp-6) 0;
}
.note-plain > :last-child { margin-bottom: 0; }

/* Offer box
   NOTE: this component carries its own light cream background but is usually
   dropped inside .section-navy / .section-green, which set a pale text color on
   the section. Without an explicit color here the copy inherits that pale value
   and ends up light-gray-on-cream. Same class-not-inline-styles rule as
   .card-dark: use .offer-box-dark for the translucent-on-dark variant rather
   than overriding the background inline. */
.offer-box {
  background: var(--cream); border: 2px dashed var(--green-600);
  color: var(--body);
  border-radius: var(--radius); padding: var(--sp-6);
}
.offer-box > :last-child { margin-bottom: 0; }
.offer-box h3 { color: var(--green-800); }
/* --muted (#667080) clears 4.5:1 on white but not on cream, and this copy is
   .small. Step it down to --body weight-for-weight instead. */
.offer-box .muted { color: var(--body); }

/* Translucent panel variant, for an offer box sitting on a dark section. */
.offer-box-dark {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.4);
  color: #E4EAF3;
}
.offer-box-dark h3 { color: #fff; }
.offer-box-dark strong { color: #fff; }
.offer-box-dark .muted { color: #C9D2E2; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; margin-bottom: var(--sp-3); box-shadow: var(--shadow-sm);
}
.faq details[open] { border-color: var(--green-500); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--sp-5);
  font-weight: 800; color: var(--ink); font-size: var(--step-0);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  min-height: 56px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 12px; height: 12px;
  border-right: 2.5px solid var(--green-700); border-bottom: 2.5px solid var(--green-700);
  transform: rotate(45deg) translateY(-3px); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq .faq-body { padding: 0 var(--sp-5) var(--sp-5); }
.faq .faq-body > :last-child { margin-bottom: 0; }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; margin: var(--sp-6) 0; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .95rem; }
th, td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--navy-800); color: #fff; font-weight: 800; border-bottom: 0; }
thead th:first-child { border-top-left-radius: var(--radius-sm); }
thead th:last-child  { border-top-right-radius: var(--radius-sm); }
tbody tr:nth-child(even) { background: var(--off); }
td.yes { color: var(--green-600); font-weight: 800; }
td.no  { color: #A6301F; font-weight: 700; }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: var(--sp-4); }
.form-row { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-weight: 700; color: var(--ink); font-size: .92rem; }
.field .hint { font-size: .82rem; color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: var(--step-0); color: var(--ink);
  padding: .8rem .9rem; min-height: 50px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(46,139,79,.16);
}
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: #C0392B; }
.field-error { color: #A6301F; font-size: .85rem; font-weight: 700; display: none; }
.field.has-error .field-error { display: block; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #C0392B; }
fieldset { border: 0; padding: 0; margin: 0; }
fieldset legend { font-weight: 700; color: var(--ink); font-size: .92rem; padding: 0; margin-bottom: .5rem; }
.checks { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.check { display: flex; align-items: center; gap: .55rem; font-size: .95rem; cursor: pointer; }
.check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--green-700); flex-shrink: 0; }
.form-legal { font-size: .82rem; color: var(--muted); }
.form-status { padding: var(--sp-4); border-radius: var(--radius-sm); font-weight: 700; display: none; }
.form-status.is-visible { display: block; }
.form-status.ok { background: var(--green-050); color: var(--green-800); border: 1px solid var(--green-100); }
.form-status.err { background: #FDECEA; color: #A6301F; border: 1px solid #F5C6C0; }

/* ---------- Media / figures ---------- */
.figure { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--navy-100); }
.figure img { width: 100%; object-fit: cover; }
.ratio-4x3 img { aspect-ratio: 4 / 3; }
.ratio-3x2 img { aspect-ratio: 3 / 2; }
.ratio-16x9 img { aspect-ratio: 16 / 9; }
.figure figcaption { font-size: .82rem; color: var(--muted); padding: .6rem .9rem; background: #fff; }

/* Split section */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center; }
.split > :last-child { margin-bottom: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  background: linear-gradient(140deg, var(--green-800) 0%, var(--navy-800) 100%);
  color: #fff; padding: calc(var(--section-y) * .8) 0;
}
.page-hero h1 { color: #fff; margin-bottom: var(--sp-3); }
.page-hero p { color: #D2E0D8; font-size: var(--step-1); max-width: 62ch; margin-bottom: 0; }
.page-hero .btn-row { margin-top: var(--sp-6); }

.breadcrumb { font-size: .85rem; margin-bottom: var(--sp-4); color: rgba(255,255,255,.72); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.breadcrumb li { margin: 0; display: flex; gap: .4rem; align-items: center; }
.breadcrumb li + li::before { content: "/"; opacity: .5; }
.breadcrumb a { color: rgba(255,255,255,.9); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #fff; font-weight: 600; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(140deg, var(--green-700) 0%, var(--green-900) 100%);
  color: #fff; padding: calc(var(--section-y) * .85) 0; text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #CFE0D6; font-size: var(--step-1); max-width: 58ch; margin-inline: auto; }
.cta-band .btn-row { margin-top: var(--sp-6); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: #97A3B8; padding: calc(var(--section-y) * .85) 0 var(--sp-5); font-size: .93rem; }
.site-footer h3 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.site-footer a { color: #B8C3D4; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
/* Areas Served is by far the longest list, so its column is given the extra
   width it needs to run two-up (see .footer-areas). */
.footer-grid { display: grid; gap: var(--sp-6); grid-template-columns: 1.4fr 1fr 1fr 1.7fr; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; }
/* Thirteen cities in one stack made the footer roughly twice as tall as it
   needed to be. auto-fill rather than a hard 2 so the list folds back to a
   single column by itself once the column is too narrow for two. */
.footer-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 0 var(--sp-4); }
/* The logo wordmark is dark green, which disappears against the navy footer, so
   it sits on a white chip down here. The header needs no such treatment. */
.footer-brand img {
  height: 88px; width: auto; margin-bottom: var(--sp-4);
  background: #fff; border-radius: var(--radius-sm); padding: 10px 14px;
}
/* A contact detail in the brand column, not a call-to-action -- it sits at body
   size so it reads alongside the address line instead of shouting over it. */
.footer-phone {
  display: inline-block; margin-top: var(--sp-3);
  font-size: .95rem; font-weight: 800; letter-spacing: .01em;
  color: #fff !important; text-decoration: none !important;
}
.footer-phone:hover { text-decoration: underline !important; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: var(--sp-7); padding-top: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); justify-content: space-between;
  font-size: .85rem;
}
.footer-bottom p { margin: 0; }

/* Sticky mobile call bar */
.callbar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: rgba(255,255,255,.98); border-top: 1px solid var(--line);
  padding: .6rem .75rem; gap: .5rem;
  box-shadow: 0 -4px 16px rgba(17,28,51,.1);
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
}
.callbar .btn { flex: 1; min-height: 50px; padding: .7rem .5rem; font-size: .95rem; }
@media (max-width: 720px) {
  .callbar { display: flex; }
  body { padding-bottom: 74px; }
}

/* ---------- Utilities ---------- */

/* Opt-in vertical rhythm for a section that stacks several DIFFERENT block types.
   Components carry their own margins (.table-scroll 2rem, .note-plain 2rem,
   .callout 2rem, .section-head 2rem, ad-hoc inline margin-tops elsewhere), which
   collapse against each other unpredictably and read as random spacing next to
   the ~8.5rem that two section paddings put between sections. Put .flow on the
   .wrap and every direct child sits exactly one --sp-7 below the previous one. */
.flow > * { margin-top: 0; margin-bottom: 0; }
.flow > * + * { margin-top: var(--sp-7); }

.mb-0 { margin-bottom: 0; }
.mt-6 { margin-top: var(--sp-6); }
.lede { font-size: var(--step-1); color: var(--muted); }
.small { font-size: var(--step--1); }
.muted { color: var(--muted); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.prose > :last-child { margin-bottom: 0; }
.prose h2 { margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }

.pill {
  display: inline-block; background: var(--green-050); color: var(--green-800);
  border: 1px solid var(--green-100); border-radius: 999px;
  padding: .3rem .85rem; font-size: .82rem; font-weight: 700; margin: 0 .3rem .5rem 0;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* The pill shape already reads as a control, so the underline is dropped above.
   Hover/focus therefore has to signal interactivity some other way. */
.pill:hover, .pill:focus-visible {
  background: var(--green-100); border-color: var(--green-500); color: var(--green-900);
}

/* ==========================================================================
   Motion layer
   Everything below is enhancement. It is gated behind html.js so a browser
   with scripting off never hides content, and it is fully disabled under
   prefers-reduced-motion.
   ========================================================================== */

/* ---------- Scroll reveal ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* Children of a revealed group cascade in sequence rather than all at once. */
.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}
.js [data-reveal-group].is-in > * { opacity: 1; transform: none; }
.js [data-reveal-group].is-in > *:nth-child(1)  { transition-delay: 0ms; }
.js [data-reveal-group].is-in > *:nth-child(2)  { transition-delay: 70ms; }
.js [data-reveal-group].is-in > *:nth-child(3)  { transition-delay: 140ms; }
.js [data-reveal-group].is-in > *:nth-child(4)  { transition-delay: 210ms; }
.js [data-reveal-group].is-in > *:nth-child(5)  { transition-delay: 280ms; }
.js [data-reveal-group].is-in > *:nth-child(6)  { transition-delay: 350ms; }
.js [data-reveal-group].is-in > *:nth-child(n+7){ transition-delay: 420ms; }

/* ---------- Hero load sequence ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.js .hero [data-seq] {
  animation: rise .8s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--i, 0) * 110ms);
}

/* ---------- Signature: the brush stroke ----------
   The headline's promise gets painted in, once, on load. It is the one
   deliberately showy moment on the site — everything else stays quiet. */
.hl { position: relative; display: inline-block; }
.hl .stroke {
  position: absolute; left: -2%; bottom: -.17em; width: 104%; height: .38em;
  overflow: visible; pointer-events: none; z-index: -1;
}
.hl .stroke path {
  fill: none; stroke: var(--gold-500); stroke-width: 16;
  stroke-linecap: round; stroke-linejoin: round; opacity: .38;
}
.js .hl .stroke path {
  stroke-dasharray: 460; stroke-dashoffset: 460;
  animation: paint 1.1s cubic-bezier(.65,0,.35,1) 700ms forwards;
}
@keyframes paint { to { stroke-dashoffset: 0; } }

/* ---------- Header: settles onto the page as you scroll ---------- */
.site-header { transition: box-shadow .25s ease, background-color .25s ease; }
.site-header.is-scrolled { box-shadow: 0 2px 18px rgba(17,28,51,.10); background: rgba(255,255,255,.99); }
.site-header .header-inner { transition: min-height .25s ease; }
.site-header.is-scrolled .header-inner { min-height: 62px; }
.brand img { transition: height .25s ease; }
.site-header.is-scrolled .brand img { height: 42px; }

/* ---------- Wet-edge sheen on the primary action ---------- */
.btn-gold { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.btn-gold:hover::after, .btn-gold:focus-visible::after { transform: translateX(120%); }

/* ---------- Small interaction detail ---------- */
.card-link .card-more { transition: transform .18s ease; display: inline-block; }
.card-link:hover .card-more { transform: translateX(5px); }
.icon-badge { transition: transform .25s cubic-bezier(.34,1.56,.64,1), background-color .25s ease; }
.card-link:hover .icon-badge { transform: translateY(-2px) rotate(-4deg); }
.faq summary { transition: background-color .15s ease; border-radius: var(--radius); }
.faq summary:hover { background: var(--green-050); }
.trust-strip li { transition: color .2s ease; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal-group] > * { opacity: 1; transform: none; transition: none; }
  .js .hero [data-seq] { animation: none; }
  .js .hl .stroke path { animation: none; stroke-dashoffset: 0; }
  .btn-gold::after { display: none; }
}

@media print {
  .site-header, .callbar, .cta-band, .site-footer { display: none; }
  .js [data-reveal], .js [data-reveal-group] > * { opacity: 1; transform: none; }
}