/* Sundog Aerial · components
   One block per design-system component (Design System page, Component
   library board). Reuse these classes on every page so they stay consistent.
   Needs tokens.css and base.css first.

   Contents
   1. Logo lockup ........ (CmpHeader / CmpFooter)
   2. Button ............. (CmpButton: primary, secondary, small)
   3. Section link ....... (CmpButton: section link)
   4. Site header ........ (CmpHeader, onHero) + mobile header (CmpMobileHeader)
   5. Nav drawer ......... (CmpNavDrawer)
   6. Section heading .... (CmpSectionHeading)
   7. Service card ....... (CmpServiceCard)
   8. Hero ............... (CmpHero, layout left) + sundog halo
   9. Checklist + credentials (CmpCredentials)
   10. Portfolio tile .... (CmpPortfolioTile)
   11. Process steps ..... (Home I "How it works")
   12. CTA panel ......... (Home I closing CTA)
   13. Site footer ....... (CmpFooter)
   14. Icon .............. (CmpIcon)
   15. Page header ....... (CmpPageHeader)
   16. Note .............. (CmpNote) + text button + text link
   17. Panel
   18. Step header ....... (CmpStepHeader)
   19. Choice ............ (CmpChoice: tab, card, row)
   20. Checkbox row ...... (CmpCheckRow)
   21. Field ............. (CmpField)
   22. Info box .......... (CmpInfoBox)
   23. Estimate card ..... (CmpEstimateCard)
   24. Estimate line ..... (CmpEstimateLine)
   25. Reset note ........ (CmpResetNote)
   26. Form send ......... (CmpFormSend)
   27. Sticky bar ........ (CmpStickyBar)
   28. Contact card ...... (Contact D, Sep 30)
   29. Contact form ...... (Contact D, Sep 30) + two-option tabs
   30. Outline button + 404 page (CHANGE Oct 1)
   31. Shared content components (CHANGE Oct 5): split, photo frame,
       feature strip, accent rule, photo band, testimonial, CTA band, actions
   32. FAQ list ......... (CmpFaqItem, CHANGE Oct 5)
   33. Prose ............ long legal text: Privacy, Terms (CHANGE Oct 6)
   34. Page contents .... "On this page" list beside long text (CHANGE Oct 6)
   35. Services & pricing (CHANGE Oct 7): package card, compact checklist,
       price panel, price group, fine print, two-column card grid, status cards
*/

/* 1. Logo lockup ------------------------------------------------------ */
.logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; transition: opacity var(--dur-control) var(--ease); }
/* Hover/focus feedback for the logo home link: a subtle fade (mark + text, both themes). */
.logo:hover { opacity: .75; }
.logo:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 10px; }
.logo__mark { width: 56px; height: 56px; border-radius: 50%; }
.logo__type { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.logo__name {
  font-family: var(--font-logo); font-weight: 800; font-size: 28px; line-height: 1;
  letter-spacing: .06em; color: var(--color-logo-gold);
}
.logo__sub { display: flex; align-items: center; gap: 8px; }
.logo__sub::before, .logo__sub::after { content: ""; flex: 1; height: 1.5px; background: var(--color-logo-gold); }
.logo__sub span {
  font-family: var(--font-logo-sub); font-weight: 500; font-size: 10px; line-height: 1;
  letter-spacing: .42em; margin-right: -.42em; color: var(--color-logo-sub);
}
.logo--on-hero .logo__sub span { color: #FFFFFF; }
@media (max-width: 1024px) {
  .logo { gap: 10px; }
  .logo__mark { width: 40px; height: 40px; }
  .logo__type { gap: 4px; }
  .logo__name { font-size: 20px; }
  .logo__sub { gap: 6px; }
  .logo__sub::before, .logo__sub::after { height: 1px; }
  .logo__sub span { font-size: 7px; }
}

/* 2. Button ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; /* CHANGE (Oct 5): 10 between label and arrow icon, as on the Button component */
  height: var(--control-h); padding: 0 var(--space-32);
  border: var(--line) solid transparent; border-radius: var(--radius);
  font-family: var(--font-body); font-weight: var(--weight-bold);
  font-size: var(--text-button); letter-spacing: var(--tracking-button);
  text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-control) var(--ease), border-color var(--dur-control) var(--ease), color var(--dur-control) var(--ease), box-shadow var(--dur-control) var(--ease), transform var(--dur-control) var(--ease);
}
.btn--primary { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: var(--color-on-accent); }
/* Hover = clean inverse: the Gold fill flips to a deep-navy fill with a Gold outline + Gold label.
   Navy is the fixed brand inverse, so it uses the raw palette token in both themes. */
.btn--primary:hover { background: var(--color-navy-light); border-color: var(--color-accent); color: var(--color-accent); }
/* Pressed = the "pushed in" state: an inset shadow (darker than the fill) recesses it + a 1px nudge.
   A drop shadow would be near-invisible on the dark UI; an inset one reads clearly. Kept off hover
   so the press is distinct on the in-page buttons where it's actually seen (form Send, quote builder). */
.btn--primary:active { background: var(--color-navy-light); border-color: var(--color-accent); color: var(--color-accent); box-shadow: inset 0 3px 7px rgb(0 0 0 / .6); transform: translateY(1px); }
/* On its own page (quote.html) the nav "Get a quote" button shows the selected
   state used by choices: Gold border + wash, Bone label. It reads as "you're
   here" instead of "go here", and stays in place so the header doesn't shift. */
.btn--primary[aria-current="page"] { background: var(--color-wash); border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); color: var(--color-text); } /* inset shadow + 1px border = the 2px selected border, without shifting the layout */
.btn--secondary { background: transparent; border-color: var(--color-on-hero); color: var(--color-on-hero); }
/* Ghost-fill hover: the Bone outline fills in to a solid Bone face with a Navy label - the
   complementary inverse of the primary (primary empties out, secondary fills in). The fill
   covers the photo, so there's no over-photo contrast issue and the label stays off the image. */
.btn--secondary:hover { background: var(--color-on-hero); border-color: var(--color-on-hero); color: var(--color-navy); }
.btn--secondary:active, .btn--outline:active { transform: translateY(1px); }
.btn--small { height: var(--control-h-sm); }
.btn--nav { height: var(--control-h-nav); }
.btn--block { width: 100%; }
.btn--small { height: var(--control-h-sm); padding: 0 var(--space-20); }
/* Utility: icon + label, no box (Start over, Copy estimate) */
.btn--utility {
  height: auto; min-height: var(--tap-min); padding: 0 var(--space-8);
  background: transparent; border: 0; color: var(--color-text); gap: var(--space-8);
}
.btn--utility svg { color: var(--color-accent); flex: none; }
.btn--utility:hover { color: var(--color-accent); }
.btn:disabled { cursor: progress; background: var(--color-line); border-color: var(--color-line); color: var(--color-text); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 640px) { .btn { padding: 0 var(--space-24); } }

/* 3. Section link ----------------------------------------------------- */
.section-link {
  display: inline-flex; align-items: center; gap: 10px; padding: var(--space-12) 0;
  font-weight: var(--weight-bold); font-size: var(--text-button);
  letter-spacing: var(--tracking-button); text-transform: uppercase;
  color: var(--color-text); text-decoration: none;
  transition: color var(--dur-card) var(--ease);
}
.section-link .icon { color: var(--color-accent); transition: transform var(--dur-card) var(--ease); }
.section-link:hover { color: var(--color-accent); }
.section-link:hover .icon, .section-link:focus-visible .icon { transform: translateX(var(--nudge)); }
.section-link:focus-visible { outline-offset: 4px; }

/* 4. Site header ------------------------------------------------------ */
.site-header {
  height: var(--header-h); padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--color-page); border-bottom: var(--line) solid var(--color-line);
  position: sticky; top: 0; z-index: 20;   /* sticky on inner pages (CHANGE: was relative) */
  /* Longer, eased curve just for the slide so the hide/reveal feels smooth, not snappy. */
  transition: transform 350ms cubic-bezier(.22, .61, .36, 1), background-color var(--dur-control) var(--ease), border-color var(--dur-control) var(--ease);
}
/* Directional header: main.js adds .is-hidden on scroll-down so it slides up out of
   the way, and removes it on scroll-up so it slides back in. */
.site-header.is-hidden { transform: translateY(-100%); }
/* Fixed from the top so it hides/reveals directionally from the very first scroll.
   Transparent while over the hero; main.js adds .is-stuck once past the hero to make
   it a solid bar. */
.site-header--on-hero {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--scrim-header); border-bottom-color: transparent;
}
.site-header--on-hero.is-stuck {
  background: var(--color-page); border-bottom-color: var(--color-line);
}
/* Reduced motion: no slide - the header just stays in place rather than hiding. */
@media (prefers-reduced-motion: reduce) { .site-header.is-hidden { transform: none; } }
.site-header__right { display: flex; align-items: center; gap: var(--space-40); }
.site-nav { display: flex; align-items: center; gap: 36px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  font-weight: var(--weight-medium); font-size: var(--text-body); text-decoration: none;
  color: var(--color-text);
}
.site-header--on-hero .site-nav a { color: var(--color-on-hero); }
.site-nav a:hover { color: var(--color-accent); }
/* Current page (CHANGE Oct 6): gold + underline, so it isn't shown by color alone.
   Applies to every link marked aria-current="page" in the header, drawer and footer. */
.site-nav a[aria-current="page"],
.nav-drawer__links a[aria-current="page"],
.site-footer__col a[aria-current="page"],
.site-footer__legal a[aria-current="page"] {
  color: var(--color-accent); text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.site-footer__col a[aria-current="page"],
.site-footer__legal a[aria-current="page"] { text-underline-offset: 4px; }

.menu-toggle {
  display: none; width: var(--tap-min); height: var(--tap-min); margin-right: -12px;
  align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--color-text);
}
.site-header--on-hero .menu-toggle { color: var(--color-on-hero); }
.menu-toggle .icon { stroke-width: 2; stroke-linecap: square; }
.menu-toggle .icon--close { display: none; }
.menu-toggle[aria-expanded="true"] .icon--menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon--close { display: block; }

/* Mobile header (CmpMobileHeader): 64 tall, menu button, drawer below */
@media (max-width: 1024px) {
  .site-header { height: 64px; }
  .site-header__right { display: none; }
  .menu-toggle { display: inline-flex; }
  /* Menu open: header becomes solid so the drawer reads as one panel */
  .site-header.is-open { background: var(--color-page); border-bottom-color: var(--color-line); }
  .site-header.is-open .menu-toggle { color: var(--color-text); }
  .site-header.is-open .logo__sub span { color: var(--color-logo-sub); }
}

/* 5. Nav drawer ------------------------------------------------------- */
.nav-drawer {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--color-page); border-bottom: var(--line) solid var(--color-line);
  padding: var(--space-8) var(--gutter) var(--space-32);
  display: flex; flex-direction: column; gap: var(--space-32);
}
.nav-drawer[hidden] { display: none; }
.nav-drawer__links { display: flex; flex-direction: column; }
.nav-drawer__links a {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  border-bottom: var(--line) solid var(--color-line);
  font-family: var(--font-heading); font-weight: var(--weight-semibold);
  font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3);
  color: var(--color-text); text-decoration: none;
}
.nav-drawer__links a .icon { color: var(--color-accent); }
.nav-drawer__contact { display: flex; flex-direction: column; gap: var(--space-4); }
.nav-drawer__contact a { color: var(--color-meta); text-decoration: none; }
@media (min-width: 1025px) { .nav-drawer { display: none !important; } }

/* 6. Section heading -------------------------------------------------- */
.section-heading { display: flex; flex-direction: column; gap: var(--space-16); max-width: 760px; }
.section-heading .t-lead { max-width: var(--measure); }
.section-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-24); flex-wrap: wrap; }

/* 7. Service card ----------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.svc-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: var(--card-pad-y) var(--card-pad-x);
  background: var(--color-raised); border: var(--line) solid var(--color-line);
}
.svc-card__icon { color: var(--color-accent); margin-bottom: 6px; }
.svc-card__title { color: var(--color-text); }
@media (max-width: 1024px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .card-grid { grid-template-columns: 1fr; } }

/* 8. Hero (layout left) ----------------------------------------------- */
/* Height: 820 tall, but never taller than the screen, so the buttons are in
   view on first load. Content is pushed to the bottom by flex (not absolute
   positioning), so on a very short screen the hero grows instead of the text
   running under the header. Bottom space = the section padding (112 / 64). */
.hero {
  --hero-h: 820px;
  position: relative; overflow: hidden;
  min-height: var(--hero-h);                /* fallback */
  min-height: min(var(--hero-h), 85vh);
  min-height: min(var(--hero-h), 85svh);    /* capped below full height so the next section always peeks (svh ignores mobile bars) */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--header-h) + var(--space-40)) var(--gutter) var(--section-pad);
  background: var(--gradient-sky); color: var(--color-on-hero);
}
/* Put the hero photo or video loop here: <img class="hero__media"> or <video class="hero__media"> */
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; background: var(--scrim-hero); }
/* CHANGE (Oct 5): the glow is now the shared .sundog-halo component (was
   .hero__sundog). Same look; used by the hero and the photo band.
   Place it with --halo-x / --halo-y (centre point) and --halo-scale. */
.sundog-halo {
  --halo-x: 72.2%; --halo-y: 380px; --halo-scale: 1;   /* defaults = hero at 1440 */
  position: absolute; left: var(--halo-x); top: var(--halo-y); width: 0; height: 0;
  transform: scale(var(--halo-scale)); pointer-events: none;
}
.sundog-halo span { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; }
.sundog-halo__ring { width: 374px; height: 374px; border: 15px solid rgba(241,238,231,.10); filter: blur(13px); }
.sundog-halo__core { width: 242px; height: 242px; filter: blur(10px);
  background: radial-gradient(circle, rgba(255,253,248,.6) 0%, rgba(255,224,184,.32) 32%, rgba(232,160,74,.12) 55%, transparent 72%); }
.sundog-halo__dog { width: 44px; height: 143px; filter: blur(10px);
  background: radial-gradient(circle, rgba(255,224,184,.7) 0%, rgba(232,160,74,.4) 45%, transparent 78%); }
.sundog-halo__dog--l { left: -187px; }
.sundog-halo__dog--r { left: 187px; }
.hero__content {
  position: relative; /* above the sky, scrim and sundog layers */
  display: flex; flex-direction: column; gap: var(--space-24); max-width: 760px;
}
.hero__title {
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: var(--text-display-home); line-height: .88; letter-spacing: var(--tracking-display);
  text-transform: uppercase; color: var(--color-on-hero); max-width: 4.5em;
}
.hero__lead { max-width: 540px; color: var(--color-on-hero); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-16); margin-top: var(--space-8); }
@media (max-width: 1024px) {
  .hero { --hero-h: 720px; }
  .hero .sundog-halo { --halo-y: 300px; --halo-scale: .8; }
}
@media (max-width: 640px) {
  .hero { --hero-h: 640px; }
  .hero .sundog-halo { --halo-x: 70%; --halo-y: 220px; --halo-scale: .55; }
  .hero__title { line-height: var(--leading-display); }
}

/* Compact hero (inner pages, e.g. Services): the page-header on the same sundog +
   sky backdrop as the home hero, at its original page-header height (not the full
   820px home hero). Same colour journey as --gradient-sky, but the stops are
   compressed so the lighter blue still reaches the bottom in the shorter height. */
.hero--compact {
  --hero-h: auto; min-height: 0; justify-content: flex-start;
  /* Start the content at the same Y as an inner page's .section--page-top (header + space-96).
     The hero header is fixed/out-of-flow, so we add the header height ourselves. */
  padding-top: calc(var(--header-h) + var(--space-96));
  background: linear-gradient(180deg, var(--color-near-black) 0%, var(--color-navy) 24%, #2E4A5E 52%, #4A6483 74%, #8FB0C2 100%);
}
@media (max-width: 640px) { .hero--compact { padding-top: calc(var(--header-h) + var(--section-pad)); } }
.hero--compact .sundog-halo { --halo-x: 73%; --halo-y: 58%; --halo-scale: .72; }
@media (max-width: 1024px) { .hero--compact .sundog-halo { --halo-x: 74%; --halo-y: 54%; --halo-scale: .6; } }
@media (max-width: 640px) { .hero--compact .sundog-halo { --halo-x: 72%; --halo-y: 42%; --halo-scale: .5; } }

/* 8b. Trust strip (home, under the hero) ----------------------------- */
.trust-strip-section { padding-top: var(--space-40); padding-bottom: var(--space-40); }
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-32); }
.trust-strip li {
  display: flex; align-items: flex-start; gap: var(--space-8);
  font-weight: var(--weight-medium); font-size: var(--text-body); color: var(--color-text); line-height: 1.4;
}
.trust-strip .icon { color: var(--color-accent); flex: none; margin-top: 2px; }
@media (max-width: 1024px) { .trust-strip { grid-template-columns: repeat(2, 1fr); gap: var(--space-24) var(--space-32); } }
@media (max-width: 640px)  { .trust-strip { grid-template-columns: 1fr; gap: var(--space-16); } }

/* 9. Checklist + credentials ---------------------------------------- */
.checklist { margin-top: var(--space-8); max-width: 640px; border-bottom: var(--line) solid var(--color-line-well); }
.checklist li {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 0;
  border-top: var(--line) solid var(--color-line-well);
  font-weight: var(--weight-medium); font-size: var(--text-body); line-height: 1.4;
}
.checklist .icon { flex-shrink: 0; margin-top: 2px; color: var(--color-accent); }
/* CHANGE (Oct 5): detailed checklist = bold title + one line of meta text
   under it (About "On your property"). Use any icon, 24px. */
.checklist--detailed { margin-top: 0; max-width: none; }
.checklist--detailed li { gap: var(--space-16); padding: var(--space-24) 0; }
.checklist--detailed .icon { stroke-width: 1.5; }
.checklist__body { display: flex; flex-direction: column; gap: var(--space-4); }
.checklist__title { font-weight: var(--weight-bold); font-size: var(--text-lead); line-height: 1.4; }
.checklist__text { font-weight: var(--weight-regular); line-height: var(--leading-body); letter-spacing: var(--tracking-body); color: var(--color-meta); }
.credentials {
  font-weight: var(--weight-medium); font-size: var(--text-meta); letter-spacing: var(--tracking-meta);
  text-transform: uppercase; color: var(--color-meta);
}
/* 10. Portfolio tile -------------------------------------------------- */
.portfolio-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; gap: var(--space-12); }
.tile { position: relative; overflow: hidden; background: var(--gradient-sky); } /* sky shows until a photo or video is in the tile */
.tile img, .tile video, .tile iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.tile__chip {
  position: absolute; top: var(--space-12); left: var(--space-12);
  padding: 4px 8px; background: var(--scrim-chip); color: var(--color-on-hero);
  font-weight: var(--weight-medium); font-size: var(--text-micro); letter-spacing: .08em; text-transform: uppercase;
}
.tile__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px;
  background: var(--scrim-caption); color: var(--color-on-hero);
  font-weight: var(--weight-medium); font-size: var(--text-meta); letter-spacing: var(--tracking-meta);
}
.tile__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  border: 1.5px solid rgba(241,238,231,.95); background: var(--scrim-play); color: var(--color-on-hero);
  box-shadow: 0 2px 22px 2px rgb(var(--rgb-near-black) / .5);  /* soft dark aura so the button reads on bright thumbnails */
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
.tile__play--sm { width: 40px; height: 40px; }
.tile--wide  { grid-column: span 2; }
.tile--tall  { grid-row: span 2; }
.tile--feature { grid-column: span 2; grid-row: span 2; }
@media (max-width: 640px) {
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }
  .tile--tall { grid-row: span 1; }
  .portfolio-grid > .tile:last-child:nth-child(odd) { grid-column: span 2; }
}

/* 11. Process steps --------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-48); counter-reset: none; }
.step { position: relative; display: flex; flex-direction: column; gap: var(--space-16); }
.step:not(:last-child)::before { /* connector line */
  content: ""; position: absolute; top: 28px; left: 72px; right: -24px; height: 1px; background: var(--color-line-well);
}
.step__num {
  position: relative; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  border: var(--line) solid var(--color-accent); background: var(--color-page);
  font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-h3); color: var(--color-accent);
}
@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-40) var(--space-32); }
  .step::before { display: none; }
}
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } }

/* 12. CTA panel ------------------------------------------------------- */
.cta-panel {
  display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-64); align-items: center;
  padding: var(--space-48);
  background: var(--color-raised); border: var(--line) solid var(--color-line);
  border-top: var(--bar) solid var(--color-accent);
}
.cta-panel__text { display: flex; flex-direction: column; gap: var(--space-16); }
.cta-panel__text .t-lead { max-width: 56ch; }
.cta-panel__actions { display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start; }
.cta-panel__actions a:not(.btn) { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1024px) { .cta-panel { grid-template-columns: 1fr; gap: var(--space-32); } }
@media (max-width: 640px)  { .cta-panel { padding: var(--panel-pad); } .cta-panel .btn { width: 100%; } }

/* 13. Site footer ----------------------------------------------------- */
.site-footer { padding: var(--space-32) var(--gutter); background: var(--color-page); }
.site-footer__inner { max-width: 1312px; margin: 0 auto; display: flex; flex-direction: column; gap: 56px; }
/* CHANGE (Oct 1): link columns sized to their text and grouped on the right, equal 80px gaps; email ends flush with the right margin (was 5fr 2fr 2fr 3fr, gap 48) */
.site-footer__cols { display: grid; grid-template-columns: 1fr auto auto auto; gap: var(--space-48) var(--space-80); }
.site-footer__brand { display: flex; flex-direction: column; gap: var(--space-20); }
.site-footer__brand p { max-width: 340px; }
.site-footer__col { display: flex; flex-direction: column; gap: 14px; }
.site-footer__col a { font-size: var(--text-body); color: var(--color-text); text-decoration: none; }
.site-footer__col a:hover { color: var(--color-accent); }
/* Gold text-only "Get a quote ->" at the bottom of the Services column: an action, not a link in the list.
   On the footer's dark navy, so Gold text meets AA. Arrow nudges on hover; aria-current adds the underline. */
.site-footer__col a.site-footer__quote { margin-top: var(--space-8); color: var(--color-accent); font-weight: 600; }
.site-footer__quote span { display: inline-block; transition: transform var(--dur-card) var(--ease); }
.site-footer__col a.site-footer__quote:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__quote:hover span { transform: translateX(var(--nudge)); }
/* CHANGE (Oct 1): .site-footer__cta removed with the footer button */
/* CHANGE (Oct 1): .site-footer__area no longer used (cities moved to the brand line) */
.site-footer__area { font-size: var(--text-body); line-height: 1.6; color: var(--color-meta); }
.social { display: flex; gap: var(--space-8); margin-left: -8px; }
.social a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-meta); }
/* CHANGE (Oct 1): official IG/FB icons (white SVGs in images/). Brand rules: no recolor, so hover is an opacity fade, not gold */
.social img { display: block; width: 24px; height: 24px; transition: opacity .2s ease; }
.social a:hover img { opacity: .7; }
.site-footer__legal {
  border-top: var(--line) solid var(--color-line-well); padding-top: var(--space-24);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); flex-wrap: wrap;
  font-size: var(--text-micro); letter-spacing: var(--tracking-meta); color: var(--color-meta);
}
.site-footer__legal .accent { text-transform: uppercase; color: var(--color-accent); }
.site-footer__legal nav { display: flex; gap: var(--space-24); }
.site-footer__legal a { color: var(--color-meta); text-decoration: none; }
.site-footer__legal a:hover { color: var(--color-accent); }
@media (max-width: 1024px) { .site-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--space-48); } } /* CHANGE (Oct 1): gap reset so tablet stays as before */
@media (max-width: 640px) {
  .site-footer__cols { grid-template-columns: 1fr; gap: var(--space-32); }
  .site-footer__legal { flex-direction: column; align-items: flex-start; }
}

/* 14. Icon ------------------------------------------------------------ */
/* Inline SVG, stroke = currentColor. Sizes 16/20/24/32; stroke steps down as the icon gets smaller. */
.icon { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--16 { width: 16px; height: 16px; stroke-width: 2; }
.icon--20 { width: 20px; height: 20px; stroke-width: 1.8; }
.icon--24 { width: 24px; height: 24px; stroke-width: 1.8; }
.icon--32 { width: 32px; height: 32px; stroke-width: 1.5; }
.icon--18 { width: 18px; height: 18px; stroke-width: 1.8; } /* section-link arrow */
.icon--40 { width: 40px; height: 40px; stroke-width: 1.4; } /* photo placeholder */

/* 15. Page header ------------------------------------------------------ */
/* Inner-page intro: H1 (64) or display title, lead, optional note */
.page-header { display: flex; flex-direction: column; gap: var(--space-24); margin-bottom: 56px; } /* Sep 30: gap 24 to match Page Header (was 16) */
.page-header__title { max-width: 14ch; text-wrap: balance; }
.page-header__lead { max-width: var(--measure); }
.page-header .note { max-width: var(--measure); } /* Sep 30: margin-top removed; the 24 gap spaces it */
@media (max-width: 640px) { .page-header { margin-bottom: var(--space-40); } }
.page-header:last-child { margin-bottom: 0; } /* CHANGE (Oct 5): no bottom margin when it's alone in its section (FAQ, About) */

/* 16. Note + text button ----------------------------------------------- */
/* One pattern for every message: Well, 3px accent bar, bold lead-in */
.note {
  background: var(--color-well); border: var(--line) solid var(--color-line-well);
  border-left: var(--bar) solid var(--color-accent);
  padding: var(--space-16) var(--space-20);
  font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text);
}
.note b { font-weight: var(--weight-bold); }
.sent-box__actions { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-16); } /* CHANGE (Oct 11): "Build another quote" / "Done" buttons in the post-submit confirmation */
.text-button, .text-link { /* CHANGE (Oct 5): .text-link = the same Gold underlined style for links in body copy (FAQ) */
  background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: var(--weight-medium);
  color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer;
}
.text-button:hover, .text-link:hover { text-decoration-thickness: 2px; }
.text-button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* 17. Panel ------------------------------------------------------------ */
.panel {
  background: var(--color-raised); border: var(--line) solid var(--color-line);
  padding: var(--panel-pad); display: flex; flex-direction: column; gap: var(--space-16);
}

/* 18. Step header ------------------------------------------------------ */
.step { display: flex; flex-direction: column; gap: var(--space-16); }
.step-header { display: flex; align-items: baseline; gap: var(--space-12); flex-wrap: wrap; }
.step-header__num {
  font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow); color: var(--color-accent);
}
.step-header__title {
  font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-h3);
  line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); color: var(--color-text);
}
.step__note { color: var(--color-meta); max-width: var(--measure); }
.step__note a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: var(--weight-medium); }
.step__note a:hover { text-decoration-thickness: 2px; }

/* 19. Choice (pick one: tab, card, row) --------------------------------- */
/* Selected = Gold wash + 2px accent border (1px + 1px inset). No radio circles. */
.choice-group { display: grid; gap: var(--space-16); }
.choice-group--tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.choice-group--cards { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
@media (max-width: 640px) { .choice-group--tabs { grid-template-columns: minmax(0, 1fr); } }

.choice {
  position: relative; box-sizing: border-box; cursor: pointer; color: var(--color-text);
  background: var(--color-raised); border: var(--line) solid var(--color-line); border-radius: var(--radius);
  transition: border-color var(--dur-control) var(--ease), background-color var(--dur-control) var(--ease), box-shadow var(--dur-control) var(--ease);
}
.choice:hover { border-color: var(--color-border-control); background-color: var(--color-hover); }
.choice input { position: absolute; top: 0; left: 0; opacity: 0; width: 0; height: 0; margin: 0; }
.choice[aria-pressed="true"], .choice:has(input:checked) {
  background-color: var(--color-raised);
  background-image: linear-gradient(var(--color-wash), var(--color-wash));
  border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent);
}
.choice:focus-visible, .choice:has(input:focus-visible) { outline: none; box-shadow: inset 0 0 0 1px var(--color-accent), var(--focus-ring); }
.choice:disabled { background: transparent; cursor: not-allowed; color: var(--color-meta); border-style: dashed; border-color: var(--color-border-control); }

.choice--tab {
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-button);
  letter-spacing: var(--tracking-button); text-transform: uppercase;
  min-height: var(--control-h-sm); padding: var(--space-12) var(--space-16);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; gap: 4px 10px;
}

/* CHANGE Oct 7: .choice__tag removed. The Events tab uses .t-micro for "Coming soon" */

.choice--card { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-20); }
.choice__meta { font-weight: var(--weight-medium); font-size: var(--text-meta); letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--color-meta); }
.choice__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-12); }
.choice__title { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); }
.choice__price { font-weight: var(--weight-bold); font-size: var(--text-body); font-variant-numeric: tabular-nums; color: var(--color-accent); flex: none; }
.choice__desc { font-size: var(--text-body); line-height: var(--leading-body); }
.choice--row { display: flex; align-items: center; gap: var(--space-16); min-height: 56px; padding: 14px 18px; }
.choice__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.choice__label { font-weight: var(--weight-medium); font-size: var(--text-body); line-height: var(--leading-body); }
.choice--row .choice__desc { color: var(--color-meta); }

/* 20. Checkbox row (pick any) ------------------------------------------ */
.check-list { display: flex; flex-direction: column; gap: var(--space-8); }
.check-row {
  display: flex; align-items: center; gap: var(--space-16); min-height: 56px; padding: 14px 18px; cursor: pointer;
  background: var(--color-raised); border: var(--line) solid var(--color-line);
  transition: border-color var(--dur-control) var(--ease), background-color var(--dur-control) var(--ease);
}
.check-row:hover { border-color: var(--color-border-control); }
.check-row:has(input:checked) { border-color: var(--color-accent); background-image: linear-gradient(var(--color-wash), var(--color-wash)); }
.check-row:has(input:focus-visible) { outline: none; box-shadow: var(--focus-ring); }
.check-row input { accent-color: var(--color-accent); width: 20px; height: 20px; flex: none; margin: 0; cursor: pointer; }
.check-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.check-row__label { font-weight: var(--weight-medium); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text); }
.check-row__desc { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-meta); }
.check-row__price { font-weight: var(--weight-bold); font-size: var(--text-body); font-variant-numeric: tabular-nums; color: var(--color-accent); flex: none; }
.check-row__lock { font-weight: var(--weight-medium); font-size: var(--text-meta); letter-spacing: var(--tracking-meta); color: var(--color-meta); flex: none; white-space: nowrap; }
/* Locked: stays readable (no fade), dashed border, says why */
.check-row.is-locked { border-style: dashed; background: transparent; cursor: not-allowed; }
.check-row.is-locked .check-row__label { color: var(--color-meta); }
.check-row.is-locked input { pointer-events: none; }

/* 21. Field ------------------------------------------------------------ */
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-16) var(--space-24); }
.field { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.field__label { font-weight: var(--weight-medium); font-size: var(--text-meta); letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--color-meta); }
.field__hint { font-weight: var(--weight-medium); font-size: var(--text-meta); line-height: var(--leading-meta); letter-spacing: var(--tracking-meta); color: var(--color-meta); text-transform: none; }
.field :is(input, select, textarea) {
  font-family: var(--font-body); font-size: var(--text-body); /* 16px+ stops iOS zoom */
  color: var(--color-text); background: var(--color-well);
  border: var(--line) solid var(--color-border-control); border-radius: var(--radius);
  padding: var(--space-12) 14px; min-height: var(--control-h-sm); width: 100%; min-width: 0;
  transition: border-color var(--dur-control) var(--ease), box-shadow var(--dur-control) var(--ease);
}
.field ::placeholder { color: var(--color-meta); opacity: 1; font-size: var(--text-meta); }
.field select {
  appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23E8A04A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 9px;
}
[data-theme="light"] .field select {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23935C1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.field select option { background: var(--color-well); color: var(--color-text); }
.field :is(input, select, textarea):hover { border-color: var(--color-meta); }
.field :is(input, select, textarea):focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.field textarea { resize: vertical; min-height: 96px; line-height: 1.55; }

/* 22. Info box ---------------------------------------------------------- */
.info-box {
  background: var(--color-well); border: var(--line) solid var(--color-line-well); border-left: var(--bar) solid var(--color-accent);
  padding: var(--space-20) var(--space-24); display: flex; flex-direction: column; gap: var(--space-12);
}
.info-box__title {
  font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-accent);
}
.info-box ul { list-style: disc; padding-left: 18px; display: flex; flex-direction: column; gap: var(--space-8); }
.info-box li::marker { color: var(--color-accent); }
.info-box__fineprint { font-size: var(--text-micro); line-height: var(--leading-micro); font-style: italic; color: var(--color-meta); margin-top: 4px; }
.info-box__link { align-self: stretch; min-height: var(--tap-min); margin-top: 4px; padding-top: var(--space-12); border-top: var(--line) solid var(--color-line-well); gap: var(--space-8); }
.section-link svg { color: var(--color-accent); flex: none; transition: transform var(--dur-card) var(--ease); }
.section-link:hover svg { transform: translateX(var(--nudge)); }
@media (max-width: 640px) { .info-box { padding: var(--space-20); } }

/* 23. Estimate card ----------------------------------------------------- */
.estimate-card { background: var(--color-raised); border: var(--line) solid var(--color-line); border-top: var(--bar) solid var(--color-accent); overflow: hidden; display: flex; flex-direction: column; }
.estimate-card__head { padding: var(--space-20) var(--space-24) var(--space-16); border-bottom: var(--line) solid var(--color-line); display: flex; flex-direction: column; gap: 4px; }
.estimate-card__title { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); }
.estimate-card__amount { padding: var(--space-20) var(--space-24); display: flex; flex-direction: column; gap: 6px; border-bottom: var(--line) solid var(--color-line); background: var(--color-well); }
.estimate-card__amount-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.estimate-card__range {
  font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-h2);
  line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); font-variant-numeric: tabular-nums;
}
.estimate-card__unit { font-weight: var(--weight-medium); font-size: var(--text-meta); letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--color-meta); white-space: nowrap; }
.estimate-card__basis { font-weight: var(--weight-medium); font-size: var(--text-meta); letter-spacing: var(--tracking-meta); color: var(--color-meta); }
.estimate-card__lines { display: flex; flex-direction: column; }
.form-send__legal a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.form-send__legal a:hover { text-decoration-thickness: 2px; } /* CHANGE (Oct 11): estimate-card actions + promise removed; the submit + consent now live under the form */
.estimate-card__utilities { display: flex; justify-content: center; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-24); background: var(--color-well); border-top: var(--line) solid var(--color-line-well); }
.estimate-card__utilities .btn { white-space: nowrap; }
.estimate-card__divider { width: 1px; height: 20px; background: var(--color-line-well); flex: none; }
/* CHANGE (Oct 11): on desktop the sticky estimate card is height-bounded so the price (top) and
   the Start over / Copy footer stay on screen no matter how long the breakdown; the breakdown
   scrolls internally. Scoped above the 900px breakpoint where .with-aside__aside is sticky. */
@media (min-width: 901px) {
  .estimate-card { max-height: calc(100vh - var(--header-h) - var(--space-24) * 2); }
  .estimate-card__head, .estimate-card__amount, .estimate-card__utilities, .reset-note { flex: none; }
  .estimate-card__lines { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}
@media (max-width: 640px) {
  .estimate-card__head, .estimate-card__amount { padding-inline: var(--space-20); }
}

/* 24. Estimate line ----------------------------------------------------- */
.estimate-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-16); padding: var(--space-12) var(--space-24); border-bottom: var(--line) solid var(--color-line); }
.estimate-line:last-child { border-bottom: none; }
.estimate-line__label { min-width: 0; line-height: var(--leading-body); }
.estimate-line__sub { display: block; margin-top: 2px; font-weight: var(--weight-medium); font-size: var(--text-meta); letter-spacing: var(--tracking-meta); color: var(--color-meta); }
.estimate-line__value { flex: none; text-align: right; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.estimate-line__value.is-zero { font-weight: var(--weight-medium); color: var(--color-meta); }
@media (max-width: 640px) { .estimate-line { padding-inline: var(--space-20); } }

/* 25. Reset note -------------------------------------------------------- */
.reset-note {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  padding: var(--space-12) var(--space-24); background: var(--color-well);
  border-top: var(--line) solid var(--color-line-well); border-left: var(--bar) solid var(--color-accent);
}
.reset-note__undo {
  background: transparent; border: 0; padding: 0 4px; min-height: 44px; cursor: pointer; color: var(--color-accent);
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-button); letter-spacing: var(--tracking-button); text-transform: uppercase;
}
.reset-note__undo:hover { color: var(--color-text); }
.reset-note__undo:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 640px) { .reset-note { padding-inline: var(--space-20); } }

/* 26. Form send + privacy notice ---------------------------------------- */
.form-send { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); padding-top: var(--space-24); margin-top: var(--space-8); border-top: var(--line) solid var(--color-line); }
.form-send .btn { width: 100%; min-width: 0; } /* CHANGE (Oct 11): Option C — full-width submit, matching the fields above and the single-CTA flow */
.form-send__legal { font-size: var(--text-micro); line-height: var(--leading-micro); letter-spacing: var(--tracking-meta); color: var(--color-meta); max-width: var(--measure); } /* CHANGE (Oct 8): micro size to match the estimate card's promise text */

/* 27. Sticky bar (mobile) ----------------------------------------------- */
/* Keeps the estimate in view while the form scrolls. Shown at 900 and below */
.sticky-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  align-items: center; justify-content: space-between; gap: var(--space-16);
  padding: var(--space-12) var(--space-16); padding-bottom: calc(var(--space-12) + env(safe-area-inset-bottom));
  background: var(--color-well); border-top: var(--line) solid var(--color-line-well);
}
.sticky-bar__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sticky-bar__range {
  font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-h3);
  line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sticky-bar__unit { font-weight: var(--weight-medium); font-size: var(--text-micro); letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--color-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-bar .btn { flex: none; }
@media (max-width: 900px) {
  .sticky-bar { display: flex; }
  body:has(.sticky-bar) { padding-bottom: 88px; } /* room so the bar never covers the footer */
}

/* 28. Contact card ---------------------------------------------------- */
/* Contact D: three ways in. The first (estimate) is a little wider and holds
   the page's only gold button. 3 across on desktop; estimate full width over
   call + email on tablet; stacked on phones. */
.contact-cards { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--grid-gap); }
.contact-card {
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-32); background: var(--color-raised); border: var(--line) solid var(--color-line);
}
.contact-card__icon { color: var(--color-accent); }
.contact-card__title { color: var(--color-text); }
.contact-card__text { color: var(--color-meta); flex: 1; }
.contact-card__action { align-self: flex-start; }
.contact-card__link {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--control-h-sm);
  font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-lead);
  line-height: var(--leading-h3); color: var(--color-text); text-decoration: none; overflow-wrap: anywhere;
}
.contact-card__link--phone { font-size: var(--text-h3); }
.contact-card__link:hover { color: var(--color-accent); }
@media (max-width: 1024px) {
  .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-card--primary { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .contact-cards { grid-template-columns: minmax(0, 1fr); }
  .contact-card { padding: var(--card-pad-y) var(--card-pad-x); gap: var(--space-12); }
  .contact-card__action { align-self: stretch; }
}

/* 29. Contact form ---------------------------------------------------- */
/* One narrow column (640) centred in a Well band */
.contact-band { margin-top: var(--space-16); }
.contact-form-wrap { max-width: 640px; margin: 0 auto; }
.contact-form { display: flex; flex-direction: column; gap: var(--space-24); }
.contact-form__head { display: flex; flex-direction: column; gap: var(--space-8); }
.contact-form textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
.contact-form__done:focus { outline: none; }
.contact-form__tip { display: block; margin-top: var(--space-12); font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-meta); }
.contact-form__tip a { color: var(--color-accent); }
.contact-form__error { margin-top: var(--space-16); }
.contact-form__error a { color: var(--color-accent); }
/* Two-option tabs: stay side by side on phones (comes after the tabs rule, so it wins) */
.choice-group--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 30. Outline button + 404 page (CHANGE Oct 1) ------------------------- */
/* Outline button: follows the text color, so it works in dark and light
   mode (.btn--secondary stays Bone for use on photos and the sky hero). */
.btn--outline { background: transparent; border-color: var(--color-text); color: var(--color-text); }
.btn--outline:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* 404: Page Header type, centred in a 640 column; the block sits in the
   middle of the screen so the footer doesn't ride up on short pages */
.page-404 #main { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--space-96)); }
.not-found {
  max-width: 640px; margin: 0 auto; padding-bottom: var(--space-16); /* + container's 96 = 112 */
  display: flex; flex-direction: column; align-items: center; gap: var(--space-24);
  text-align: center;
}
.not-found__title { text-wrap: balance; }
.not-found__lead { color: var(--color-meta); max-width: var(--measure); }
.not-found__actions { margin-top: var(--space-8); } /* CHANGE (Oct 5): layout now from the shared .actions */
@media (max-width: 640px) {
  .not-found { padding-bottom: 0; gap: var(--space-20); }
}

/* 31. Shared content components (CHANGE Oct 5) ---------------------------
   Built for the About page, written to be used on any page. */

/* Split: two columns. 50/50 by default, --5-7 for heading/photo + content.
   Tablet: 50/50 at 48. Phone: stacked at 40. (Why-us, About) */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-64); align-items: start; }
.split > * { min-width: 0; }
.split--5-7 { grid-template-columns: 5fr 7fr; gap: var(--space-80); }
.split--center { align-items: center; }
.split--stretch { align-items: stretch; }
.split > .page-header { margin-bottom: 0; justify-content: center; } /* page header as one half */
@media (max-width: 1024px) { .split, .split--5-7 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-48); } }
@media (max-width: 640px)  { .split, .split--5-7 { grid-template-columns: minmax(0, 1fr); gap: var(--space-40); } }

/* Photo frame: a photo, or a placeholder until the photo is in.
   Surface flips to stay visible: Well on Navy sections, Navy on Well bands.
   --square (1:1) or --tall (560 min, 440 on phones). Optional caption strip. */
.photo-frame { position: relative; margin: 0; background: var(--color-well); border: var(--line) solid var(--color-line-well); }
.section--well .photo-frame { background: var(--color-page); }
.photo-frame--square { aspect-ratio: 1 / 1; }
.photo-frame--tall { min-height: 560px; height: 100%; }
.photo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-frame__placeholder {
  position: absolute; inset: 0; padding: var(--space-32);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; color: var(--color-border-control);
}
.photo-frame__placeholder p { max-width: 260px; font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-meta); }
.photo-frame__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-12) var(--space-20);
  background: rgb(var(--rgb-near-black) / .8); border-top: var(--line) solid var(--color-line-well);
  font-size: var(--text-body); line-height: 1.4; letter-spacing: var(--tracking-body); color: var(--color-on-hero);
}
.photo-frame__caption b { font-weight: var(--weight-bold); }
@media (max-width: 640px) {
  .photo-frame--tall { min-height: 440px; }
  .photo-frame__caption { padding: var(--space-12) var(--space-16); }
}

/* Accent rule: short Gold line above a title or under a quote */
.accent-rule { display: block; width: 32px; height: 2px; background: var(--color-accent); }
.accent-rule--wide { width: 48px; }

/* Feature strip: 2 to 4 short facts on one Raised panel (About credentials).
   4 across, 2 x 2 on tablet, stacked on phones. Each item: accent rule,
   H3 (as .t-h3), one line of meta text. */
.feature-strip {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); /* one column per item */
  background: var(--color-raised); border: var(--line) solid var(--color-line);
}
.feature-strip > li { padding: var(--space-32) var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); }
.feature-strip > li + li { border-left: var(--line) solid var(--color-line); }
.feature-strip p { color: var(--color-meta); }
@media (max-width: 1024px) {
  .feature-strip { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-strip > li + li { border-left: 0; }
  .feature-strip > li:nth-child(even) { border-left: var(--line) solid var(--color-line); }
  .feature-strip > li:nth-child(n+3) { border-top: var(--line) solid var(--color-line); }
}
@media (max-width: 640px) {
  .feature-strip { grid-template-columns: minmax(0, 1fr); }
  .feature-strip > li { padding: var(--space-20); }
  .feature-strip > li:nth-child(even) { border-left: 0; }
  .feature-strip > li + li { border-top: var(--line) solid var(--color-line); }
}

/* Photo band: full-width photo with a scrim and centred content
   (testimonial, quote, statement). 560 tall, 600 on phones where the
   content drops to the bottom. Shows the sky until a photo is added.
   Optional .sundog-halo inside: placed on the sun at the right. */
.photo-band {
  position: relative; overflow: hidden; height: 560px; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-sky); color: var(--color-on-hero);
}
.photo-band__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Decorative background video (testimonial band): fills and covers the band for any
   aspect ratio via container units; non-interactive; dropped entirely for reduced-motion. */
.photo-band__video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; container-type: size; opacity: 0; transition: opacity .6s ease; }
.photo-band__video.is-ready { opacity: 1; }
.photo-band__video iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: max(100cqw, calc(100cqh * 16 / 9));
  height: max(100cqh, calc(100cqw * 9 / 16));
  border: 0;
}
@media (prefers-reduced-motion: reduce) { .photo-band__video { display: none; } }
.photo-band__scrim {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 42% 60% at 50% 50%, rgb(var(--rgb-near-black) / .78) 0%, rgb(var(--rgb-near-black) / .62) 55%, rgb(var(--rgb-near-black) / .38) 100%);
}
.photo-band .sundog-halo { --halo-x: 74%; --halo-y: 40%; }
.photo-band > :last-child { position: relative; } /* content above the photo layers */
.photo-band .t-eyebrow { color: var(--color-gold); }   /* on a photo: same in both modes */
.photo-band .t-meta { color: var(--color-light-steel); }
.photo-band .accent-rule { background: var(--color-gold); }
@media (max-width: 640px) {
  .photo-band { height: 600px; align-items: flex-end; padding-bottom: 56px; }
  .photo-band__scrim { background: linear-gradient(180deg, rgb(var(--rgb-near-black) / .35) 0%, rgb(var(--rgb-near-black) / .55) 40%, rgb(var(--rgb-near-black) / .8) 70%, rgb(var(--rgb-near-black) / .85) 100%); }
  .photo-band .sundog-halo { --halo-x: 50%; --halo-y: 150px; --halo-scale: .55; } /* halo at the top, content below */
}

/* Testimonial: eyebrow, quote mark, quote, accent rule, name + role.
   Works on a photo band or any section. */
.testimonial {
  margin: 0; max-width: 760px;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-24); text-align: center;
}
.testimonial__mark { width: 40px; height: 40px; fill: var(--color-accent); stroke: none; }
.photo-band .testimonial__mark { fill: var(--color-gold); }
.testimonial__quote {
  margin: 0; font-family: var(--font-heading); font-weight: var(--weight-medium);
  font-size: var(--text-h3); line-height: 1.45; letter-spacing: var(--tracking-h3);
}
.testimonial figcaption { display: flex; flex-direction: column; gap: var(--space-4); align-items: center; }
.testimonial figcaption b { font-weight: var(--weight-bold); }
/* Attribution credit: all-caps, small, Bone (not light-steel) for legibility over a photo — see BACKLOG: re-verify contrast once the About photo lands */
.testimonial__by { font-weight: var(--weight-medium); font-size: var(--text-meta); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-bone); }
@media (max-width: 640px) {
  .testimonial { gap: var(--space-20); }
  .testimonial__mark { width: 32px; height: 32px; }
}

/* CTA band: centred closer for the end of a page. H2, one line, actions.
   (The boxed 7/5 version is .cta-panel, section 12.) */
.cta-band { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); text-align: center; }
.cta-band .t-lead { max-width: var(--measure); }
.cta-band .actions { margin-top: var(--space-16); }

/* Actions: a row of buttons. One primary (gold), the rest outline.
   Phones: stacked, full width. --center to centre the row. (About, 404) */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.actions--center { justify-content: center; }
@media (max-width: 640px) {
  .actions { flex-direction: column; align-self: stretch; gap: var(--space-12); }
  .actions .btn { width: 100%; }
}

/* 32. FAQ list (CmpFaqItem, CHANGE Oct 5) ---------------------------- */
.faq-list { border-top: var(--line) solid var(--color-line); }
.faq-item { border-bottom: var(--line) solid var(--color-line); }
.faq-item__q {
  list-style: none; cursor: pointer; min-height: 72px; padding: var(--space-20) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
  font-family: var(--font-heading); font-weight: var(--weight-semibold);
  font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3);
  color: var(--color-text); transition: color var(--dur-control) var(--ease);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { color: var(--color-accent); }
.faq-item__q .icon { color: var(--color-accent); stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.faq-item__minus, .faq-item[open] .faq-item__plus { display: none; }
.faq-item[open] .faq-item__minus { display: block; }
.faq-item__a { padding: 0 0 var(--space-24); max-width: var(--measure); display: flex; flex-direction: column; gap: var(--space-16); }

/* 33. Prose (CHANGE Oct 6) --------------------------------------------
   Long-form text pasted in as plain HTML (Privacy Policy, Terms): styles
   bare h2, p, ul, a, table and address inside .prose so the legal copy
   needs no classes of its own. Section headings use the H3 scale (a legal
   page has many). Wrap each table in .prose__table so it scrolls sideways
   on phones instead of widening the page. */
.prose { max-width: var(--measure); display: flex; flex-direction: column; gap: var(--space-16); }
.prose h2 {
  font-family: var(--font-heading); font-weight: var(--weight-semibold);
  font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3);
}
/* Each section after the first starts with a divider (like the FAQ rows): 48 of space
   above the line (32 margin + the 16 gap) and 24 below it, so the heading sits with
   its own text, not the section before. */
.prose h2:not(:first-child) { margin-top: var(--space-32); padding-top: var(--space-24); border-top: var(--line) solid var(--color-line); }
.prose h2[id] { scroll-margin-top: var(--space-24); } /* breathing room when jumped to */
.prose p, .prose li, .prose address, .prose td, .prose th {
  font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body);
}
.prose address { font-style: normal; }
.prose ul { list-style: disc; padding-left: 18px; display: flex; flex-direction: column; gap: var(--space-8); }
.prose li::marker { color: var(--color-accent); }
.prose a {
  color: var(--color-accent); font-weight: var(--weight-medium);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.prose a:hover { text-decoration-thickness: 2px; }
.prose__table { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td {
  text-align: left; vertical-align: top;
  padding: var(--space-12) var(--space-16) var(--space-12) 0;
  border-bottom: var(--line) solid var(--color-line);
}
/* Three levels: column headers are small uppercase labels in the meta color (like
   an eyebrow), the first column is the row label in the heading font, and the
   second column is plain body text. */
.prose th {
  font-family: var(--font-heading); font-weight: var(--weight-medium);
  font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-meta); border-bottom-color: var(--color-accent);
}
.prose td:first-child { font-family: var(--font-heading); font-weight: var(--weight-semibold); }

/* 34. Page contents (CHANGE Oct 6) ------------------------------------
   "On this page" jump links beside long text (Privacy, Terms). Layout:
   .with-contents = contents column (left, sticky) + text (right).
   The list sits in a <details>: main.js opens it on tablet and desktop,
   where the toggle row is hidden and a plain label shows instead; on
   phones it starts closed as a single tappable row above the text.
   Without JavaScript the toggle row stays, so the list still opens. */
.with-contents { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-80); align-items: start; }
.page-contents { position: sticky; top: var(--space-32); }
.page-contents__toggle {
  list-style: none; cursor: pointer; min-height: 56px; padding: var(--space-12) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  border-top: var(--line) solid var(--color-line); border-bottom: var(--line) solid var(--color-line);
}
.page-contents__toggle::-webkit-details-marker { display: none; }
.page-contents__toggle .icon { color: var(--color-accent); transition: transform var(--dur-control) var(--ease); }
.page-contents details[open] .page-contents__toggle .icon { transform: rotate(180deg); }
.page-contents__label { display: none; margin-bottom: var(--space-16); }
.page-contents__list { display: flex; flex-direction: column; border-left: var(--line) solid var(--color-line); }
.page-contents__list a {
  display: block; padding: var(--space-8) 0 var(--space-8) var(--space-16);
  font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-meta); text-decoration: none;
  border-left: 2px solid transparent; margin-left: calc(var(--line) * -1); /* room for the current-section bar */
}
/* Three states: Steel at rest, Bone on hover, Gold + bar for the section being read
   (set by main.js as you scroll). Gold = "where you are", as in the nav and footer. */
.page-contents__list a:hover { color: var(--color-text); }
.page-contents__list a[aria-current="true"] { color: var(--color-accent); border-left-color: var(--color-accent); }
@media (min-width: 641px) {
  .page-contents details[open] > .page-contents__toggle { display: none; }
  .page-contents details[open] > .page-contents__label { display: block; }
}
@media (max-width: 1024px) { .with-contents { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-48); } }
@media (max-width: 640px) {
  .with-contents { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .page-contents { position: static; }
  .page-contents__list { margin-top: var(--space-16); }
}

/* 35. Services & pricing (CHANGE Oct 7) -------------------------------------
   From the Services Main v2 board. Written as reusable pieces. */

/* Package card: priced package with a list and a button (real estate).
   --featured = Gold outline (the recommended one). Badge sits on the top edge.
   --row = a single package laid out in one row (Aerial Video); stacks below 1024. */
.pkg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); align-items: stretch; }
.pkg-card { position: relative; display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-40) var(--card-pad-x) var(--card-pad-x); background: var(--color-raised); border: var(--line) solid var(--color-line); }
.pkg-card--featured { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.pkg-card__badge { position: absolute; top: -14px; left: var(--card-pad-x); padding: var(--space-4) 10px; font-weight: var(--weight-bold); font-size: var(--text-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text); background: var(--color-raised); border: var(--line) solid var(--color-line); }
.pkg-card__badge--gold { color: var(--color-accent); border-color: var(--color-accent); } /* outline, not a fill: Gold fill = buttons only */
.pkg-card__desc { color: var(--color-meta); min-height: 52px; }
.pkg-card .checklist { flex: 1; }
.pkg-price { display: flex; align-items: baseline; gap: var(--space-12); }
.pkg-price__num { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-h1); line-height: var(--leading-h1); }
.pkg-price__unit { font-weight: var(--weight-medium); font-size: var(--text-meta); letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--color-meta); }
.pkg-card--row { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-48); padding: var(--space-32); }
.pkg-card--row .pkg-card__head { display: flex; align-items: baseline; gap: var(--space-24); flex: none; }
.pkg-card--row .pkg-card__desc { flex: 1; min-height: 0; max-width: var(--measure); }
.pkg-card--row .pkg-price__num { font-size: var(--text-h2); line-height: 1; }
@media (max-width: 1024px) {
  .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pkg-card--row { flex-direction: column; align-items: flex-start; gap: var(--space-24); }
}
@media (max-width: 640px) {
  .pkg-grid { grid-template-columns: minmax(0, 1fr); }
  .pkg-card--row .pkg-card__head { flex-wrap: wrap; gap: var(--space-8) var(--space-24); }
  .pkg-card--row .btn { width: 100%; }
}

/* Compact checklist: no dividers, 16 between items */
.checklist--compact { display: flex; flex-direction: column; gap: var(--space-16); margin-top: 0; border-bottom: 0; }
.checklist--compact li { padding: 0; border-top: 0; }

/* Price panel: CTA panel variant for per-visit price ranges. Rows (left) grow with
   the content; checklist top-aligned with the first row; button pinned to the bottom. */
.cta-panel--price { align-items: stretch; }
.cta-panel--price .estimate-line { align-items: center; }
.cta-panel--price .estimate-line:first-child { padding-top: 0; }
.cta-panel--price .estimate-line:last-child { padding-bottom: 0; }
.cta-panel--price .cta-panel__actions { justify-content: space-between; gap: var(--space-32); }
.cta-panel--price .pkg-price__num { font-size: var(--text-h2); line-height: 1; white-space: nowrap; }

/* Plain (Bone) estimate-line value, for price lists outside the quote builder */
.estimate-line__value--plain { color: var(--color-text); font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--weight-bold); }

/* Price group inside a panel: eyebrow label + estimate lines (Travel, Add-ons, Discounts) */
.price-group { display: flex; flex-direction: column; gap: var(--space-8); }
.panel .price-group:first-of-type { margin-top: var(--space-8); }
.price-group + .price-group { margin-top: var(--space-16); }

/* Fine print: disclaimers at the end of a section. Rule above, meta text, full width, no box */
.fine-print { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-24); border-top: var(--line) solid var(--color-line-well); }

/* Two-column card grid (stacks on phones) */
.card-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .card-grid--two { grid-template-columns: minmax(0, 1fr); } }

/* Service status cards (Coming soon / Coming later): meta body text; --muted = dashed + faded */
.svc-card--status p { color: var(--color-meta); }
.svc-card--muted { border-style: dashed; opacity: .82; }
.svc-card--muted .svc-card__title { color: var(--color-meta); }
.t-eyebrow--muted { color: var(--color-meta); }