/* ============================================================
   Kennedy Construction · Editorial Design System
   Rethemed to brand-kit-v2 tokens (Phase 0, 2026-06-11)

   DESIGN DECISIONS (running log; survives the port)
   - Phase 0: all colors map to brand-kit-v2. Legacy var names
     kept as aliases so inline page styles keep working; kit
     names are canonical. Aliases die at the Phase 3 port.
   - Copper restraint: copper marks intent only. Eyebrows,
     CTA hovers, form focus, and one accent moment per page
     keep copper. Nav underline,
     marquee dots, list numerals, and decorative display
     italics demoted to Fieldstone/Charcoal.
   - ADA Copper #714F38 at body sizes; Copper #B17A50 only at
     display sizes (24px+) on light, Light Copper #C19573 only
     on dark surfaces.
   - Slate Blue does categorization (pack tier tags, contact
     labels); copper no longer does category work.
   - Inter → General Sans (Fontshare); Fraunces weights aligned
     to kit (400/500/600).
   - Finish-pack material swatches in the HTML are content
     (simulated tile/material palettes), not theme tokens;
     intentionally untouched.
   - Contact form card keeps rgba(255,255,255,.35) tint over
     Linen (a surface lift, not a palette color).
   - Phase 2 (2026-06-11), homepage hero: full-bleed image
     (~88vh) with text overlaid lower-left over a bottom-up
     charcoal gradient scrim. Scrim holds a 0.92 alpha floor
     across the entire text zone (bottom 48%) so overlay text
     passes AA regardless of the photo; hero text is solid or
     high-alpha Linen only, eyebrow included (lt-copper at 11px
     cannot clear 4.5:1 over an image). Header floats
     transparent with the on-dark logo (site-header--dark),
     swapping to the linen scrolled state as before. Primary
     CTA on the image is btn--paper. Hero image is still a
     hotlinked style reference; final photo choice and AA
     re-check of the nav-over-image region are part of the
     open Phase 2 photography decision. Localize before the
     Phase 3 port.
   - Phase 2 (2026-06-11), hero copy: meta line drops "Est. by
     the Kennedy family" (too formal, Tyler); image credit line
     removed. Final hero photo should stay generic enough not
     to read as a past-project claim, since it now ships
     uncaptioned.
   - Phase 2 (2026-06-11), hero photo: lotus-design.jpg chosen
     over zac-gudakov.jpg (CORRECTION 2026-07-12: both are
     Unsplash stock, named for their photographers Lotus Design
     N Print and Zac Gudakov; the earlier "from Justin's phone
     batch" note here was wrong. Homepage keeps aspirational
     stock, never captioned as KC work, until a hero-grade real
     project shot exists; real photos live on /our-work); wide
     calm composition, walnut warmth, no color fight with the
     palette. Served as assets/hero-bathroom.jpg (2400px web
     copy; 6000px original kept). Its ceiling is bright, so the
     scrim gained a 0.88-alpha top cap through the header zone;
     measured nav contrast 5.4:1 against the actual pixels.
     zac-gudakov.jpg is unused so far; candidate for the
     philosophy or teaser slots when those sections come up.
   - Phase 2 (2026-06-11), navigation: page links collapse into
     a hamburger at 991px and below on every page (full-screen
     charcoal overlay, Fraunces links, active page in italic
     Light Copper, paper CTA). The bar keeps the ghost CTA next
     to the toggle. While open, the bar forces its dark state
     on any page. Port as part of the shared Header component.
   - Phase 2 (2026-06-12), hero motion: Option A "Editorial
     Stagger" locked (chosen over centered-monument and
     split-panel variants; reference: omaivillas.com load
     choreography). Page-load sequence: keyline sweeps
     left→right (0.15s) → eyebrow/meta fade up (0.45s) →
     headline reveals line by line from overflow masks
     (0.55/0.7s) → lede (1.15s) → CTA (1.35s) → photo
     cross-fades + scale-settles in beneath the text (1.5s;
     hero opens on solid charcoal so the words land first) →
     nav drops from top (2.1s). Vignette and 0.88 top-cap
     scrim removed; replaced with one flat bottom-up gradient
     (0.94 → 0.55). prefers-reduced-motion shows everything
     instantly. OPEN: nav-over-image AA must be re-measured
     against the final photo (top of flat gradient is 0.55,
     thinner than the old 0.88 cap). Rejected variants
     archived in _archive/hero-options/.
   - Phase 2 (2026-06-12), ledger: homepage ledger stats section
     removed altogether (Tyler). It was the page's designated
     copper accent moment; the homepage currently has none.
     Reassign or leave copper to eyebrows/CTA when the next
     section comes up.
   - Phase 2 (2026-06-12), typography: italicized words inside
     display headlines retired as a site-wide treatment (Tyler).
     All <em> stripped from headlines on every page; .display em
     now renders normal so strays stay plain. Italics are still
     allowed as deliberate one-offs (blockquote, marquee), not
     as a recurring stylistic device.
   - Phase 2 (2026-06-12), How It Works: section reframed from
     process-philosophy to configurator proof. New 1-2-3 straw
     man (tell us → watch your range build live → lock it in,
     talk it through); step 3 carries a [TK · intake] marker
     until the intake flow is final. Bathroom photo replaced by
     an honest device-frame placeholder (.demo-device); post-MVP
     it hosts a muted looping demo of the real /quote
     configurator. Rule: never fake UI in the frame.
   - Phase 2 (2026-06-12), color blocking: How It Works section
     reversed out of charcoal to Sandstone (Tyler: dark hero
     straight into a dark section felt stark; Sandstone blocks
     it against the Linen body, packs section returns to Linen).
     Dark surfaces on the homepage are now hero + footer only.
     Demo phone cropped: top ~3/4 visible, bottom cut by the
     figure edge, device renders larger; frame is Linen with
     Clay border on the Sandstone block.
   - Phase 2 (2026-06-12), Finish Packs index: plain-spoken
     explainer added under the section heading (approved Webflow
     copy: packs give a starting budget / anchor the estimate /
     consult walks through swaps and upgrades). Material color
     swatches removed from rows (Tyler). Rows gain 1.5rem inner
     l/r padding (1.25rem mobile) so the hover surface no longer
     kisses the numerals and price text. Per-tier price ranges
     stay [TK · Justin]-gated; show them when confirmed.
     Addendum: materials/labor clarifier appended to the intro
     (packs cover materials; labor priced by the space).
     Mid-Range carries a Slate Blue "Most chosen" pill tag
     (.pack-tag, categorization color per the kit); the same
     claim was removed from its description to avoid doubling.
   - Phase 2 (2026-06-12), marquee: rotating marquee strip above
     the footer removed (Tyler). Only the homepage used it;
     marquee CSS and the main.js duplication snippet removed
     with it. Its claims all exist elsewhere on the page.
   - Phase 2 (2026-06-12), footer + seams: Linen gap band between
     hero and the Sandstone How It Works removed (philosophy
     margin-top 0). Footer "Start Here" eyebrow was ADA Copper on
     charcoal, 1.97:1 FAIL; .site-footer .eyebrow now Light
     Copper (5.35:1, matches the column labels). Footer brand
     tagline is "Bathroom remodeling made simple" (sentence
     case, no period; 2026-06-15 Tyler) on all pages.
   - Phase 2 (2026-06-14), BUTTON SYSTEM (Tyler, documented as the
     rule that survives the port). Three roles, not three colors:
       1. PRIMARY: the one conversion action: "Get your quote"
          and form submit. Always the strongest, fully-filled
          button available for its surface: solid charcoal (.btn)
          on light surfaces, solid linen (.btn--paper) on dark
          surfaces (hero, footer, dark process section, mobile
          menu). A solid fill is RESERVED for this; ideally one
          per view so the eye never has to choose.
       2. SECONDARY: lateral navigation ("Explore the packs",
          "About our process"): outline (.btn--ghost). Lower
          weight on purpose; it must not out-shout the quote.
       3. HEADER CTA: the nav-bar "Get your quote": outline
          (.btn--ghost). Deliberate chrome exception (Tyler): a
          solid button in the bar over-weights against the
          wordmark and links. The bar invites; the page converts.
     Consequence, by design: the homepage shows no solid button on
     its light mid-page sections because those CTAs are secondary
     navigation, while Finish Packs / Contact show solid buttons
     because there the button IS the quote action on a light
     surface. Same rule, different content. Hover is uniform:
     filled buttons warm to ADA Copper; ghost fills to charcoal.
   - Our Work (2026-07-12), gallery treatment (new pattern,
     our-work.html + staged our-work-primary-bath.html): the
     portfolio gate cleared (15 real photos, 6 finished jobs +
     1 in progress; no true "before" shots exist, so jobs show
     finished work multi-angle, not before/after pairs).
     Design rules: photography leads (brand-kit §10); interior
     -page motion only (.reveal/.reveal-img, no bespoke load
     choreography); featured case studies use an asymmetric
     1.4fr/1fr grid with an offset secondary angle; supporting
     grid alternates aspect ratios with offset vertical rhythm
     so six jobs read as selections, not a complete archive;
     figure hover = img scale 1.03 on the site curve + caption
     warms Fieldstone→ADA Copper, with NO pointer/arrow
     affordance while items aren't links (when detail pages go
     live the figure becomes the link and gains the arrow
     nudge). AMENDED same day (Tyler review): featured layout
     restacked — text block on top at a readable measure, the
     job's photos below in ONE row of uniform same-size tiles
     (2-up / 3-up); rule: no single featured image until
     hero-grade photography exists, then evolve to a primary-
     photo gallery treatment. The "On site now" Sandstone band
     (in-progress job, Slate Blue pill) was REMOVED as too
     sparse with one photo; the job returns as a finished
     entry when it wraps. Justin-gated facts (neighborhood, client story,
     testimonials) are [TK · Justin] HTML comments, never
     rendered placeholder text. Detail page ships noindex,
     unlinked, out of sitemap until facts land. Work photos in
     assets/images/work/ are EXIF/GPS-stripped (client homes);
     brand-kit §10 warm color correction not yet applied (no
     ImageMagick on this machine) — open polish item.
   ============================================================ */

:root {
  /* brand-kit-v2 tokens (canonical) */
  --linen: #F5F1EC;
  --sandstone: #EAE4DC;
  --charcoal: #2E2926;
  --fieldstone: #6B635B;
  --clay-border: #D6CFC6;
  --ada-copper: #714F38;
  --copper: #B17A50;
  --lt-copper: #C19573;
  --slate-blue: #3D5566;

  /* legacy aliases (remove at Phase 3 port) */
  --paper: var(--linen);
  --paper-deep: var(--sandstone);
  --ink: var(--charcoal);
  --ink-soft: var(--fieldstone);
  --bronze: var(--ada-copper);
  --bronze-soft: var(--lt-copper);
  --stone: var(--fieldstone);
  --hairline: var(--clay-border);
  --hairline-light: rgba(245, 241, 236, 0.22);

  --serif: "Fraunces", "Georgia", serif;
  --sans: "General Sans", -apple-system, "Helvetica Neue", sans-serif;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --max: 1440px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

::selection { background: var(--ada-copper); color: var(--linen); }

img { display: block; width: 100%; height: 100%; object-fit: cover; }

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Typography ---------- */

.eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ada-copper);
}

.eyebrow--ink { color: var(--ink-soft); }

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* Italic headline words retired site-wide (2026-06-12, Tyler).
   Headlines render as plain text. Italics remain available for
   deliberate, case-by-case use (e.g. blockquotes), never as a
   default display treatment. Rule kept so any stray em renders
   plain rather than browser-default italic. */
.display em,
.serif-italic {
  font-style: normal;
  font-weight: 400;
  color: inherit;
}

.display-xl { font-size: clamp(3.25rem, 9vw, 8.5rem); }
.display-lg { font-size: clamp(2.75rem, 6vw, 5.5rem); }
.display-md { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.08; }
.display-sm { font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.15; }

.lede {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 400;
}

.body-muted { color: var(--ink-soft); }

.caption {
  font-size: 0.8125rem;
  color: var(--stone);
  letter-spacing: 0.01em;
}

/* ---------- Reveal animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible { opacity: 1; transform: none; }

.reveal-img {
  overflow: hidden;
}

.reveal-img img {
  transform: scale(1.06);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-img.is-visible img { transform: scale(1); }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(245, 241, 236, 0.92);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--hairline);
}

.site-header--dark:not(.is-scrolled) { color: var(--paper); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}

.wordmark span {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ada-copper);
}

.wordmark img {
  width: auto;
  height: 1.25rem;
  object-fit: contain;
}

/* Logo swap for pages with a dark hero behind the floating header */
.wordmark .logo-dark { display: none; }
.site-header--dark:not(.is-scrolled) .logo-light { display: none; }
.site-header--dark:not(.is-scrolled) .logo-dark { display: block; }

.nav {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.nav a {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.85;
  transition: opacity 0.25s ease;
  position: relative;
}

.nav a:hover { opacity: 1; }

.nav a.is-active { opacity: 1; }

.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--charcoal); /* demoted from copper */
}

.site-header--dark:not(.is-scrolled) .nav a.is-active::after { background: var(--linen); }

/* ---------- Mobile menu (≤991px) ---------- */

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  width: 2.25rem;
  height: 2.25rem;
  cursor: pointer;
  color: inherit;
}

.nav-toggle span {
  display: block;
  width: 1.375rem;
  height: 2px;
  background: currentColor;
  margin: 3px auto;
  transition: transform 0.3s ease;
}

body.menu-open .nav-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
body.menu-open .nav-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90; /* below the header (100) so the bar stays usable while open */
  background: var(--charcoal);
  color: var(--linen);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

body.menu-open { overflow: hidden; }
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }

.mobile-menu a:not(.btn) {
  font-family: var(--serif);
  font-size: clamp(1.875rem, 7vw, 2.75rem);
  font-weight: 400;
  line-height: 1.2;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline-light);
}

.mobile-menu a.is-active { font-style: italic; color: var(--lt-copper); } /* dark surface, display size */

.mobile-menu .btn { margin-top: 2.5rem; align-self: flex-start; }

/* while the menu is open, the bar renders in its dark state on any page */
body.menu-open .site-header,
body.menu-open .site-header.is-scrolled {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  color: var(--linen);
}

body.menu-open .site-header .logo-light { display: none; }
body.menu-open .site-header .logo-dark { display: block; }
body.menu-open .site-header .nav a.is-active::after { background: var(--linen); }
body.menu-open .site-header .btn--ghost:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

/* Button roles (see decisions log, 2026-06-14):
   .btn         = PRIMARY on light surfaces (solid charcoal). Quote + submit.
   .btn--paper  = PRIMARY on dark surfaces (solid linen). Same role, inverted.
   .btn--ghost  = SECONDARY (outline). Lateral nav + the header chrome CTA.
   A solid fill is reserved for the primary conversion action. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.875rem 1.625rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}

.btn:hover { background: var(--ada-copper); border-color: var(--ada-copper); color: var(--linen); }

.btn .arrow { transition: transform 0.3s ease; }
.btn:hover .arrow { transform: translateX(4px); }

.btn--ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}

.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.btn--paper {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.btn--paper:hover { background: var(--ada-copper); border-color: var(--ada-copper); color: var(--linen); }

.site-header--dark:not(.is-scrolled) .btn--ghost:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--charcoal);
  color: var(--paper);
  margin-top: clamp(5rem, 10vw, 9rem);
}

/* eyebrow on charcoal: ADA Copper fails (1.97:1); Light Copper
   passes (5.35:1) and matches the footer column labels */
.site-footer .eyebrow { color: var(--lt-copper); }

/* Footer inner blocks are .wrap elements; use vertical-only padding so
   .wrap keeps the left/right gutter and footer content aligns with the
   header logo (a `padding: x 0` shorthand zeroes the gutter). 2026-06-15 */
.footer-cta {
  padding-top: clamp(5rem, 10vw, 9rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  border-bottom: 1px solid var(--hairline-light);
}

.footer-cta .display-lg { max-width: 18ch; }

.footer-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
  margin-top: 3rem;
}

.footer-cta-row p { max-width: 36ch; color: rgba(245,241,236,0.65); font-size: 0.9375rem; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
/* let columns shrink below their content's intrinsic width; without this a
   long unbreakable token (the support@ email) forces every 1fr column wide
   and overflows the viewport at tablet/mobile */
.footer-grid > * { min-width: 0; }

.footer-grid h4 {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--lt-copper); /* dark surface only */
  margin-bottom: 1.25rem;
}

.footer-grid ul { list-style: none; }

.footer-grid li { margin-bottom: 0.625rem; }

.footer-grid a {
  font-size: 0.9375rem;
  color: rgba(245,241,236,0.75);
  transition: color 0.25s ease;
  overflow-wrap: anywhere; /* the support@ email wraps instead of overflowing */
}

.footer-grid a:hover { color: var(--paper); }

.footer-brand .wordmark { font-size: 1.375rem; margin-bottom: 1rem; }

.footer-brand .wordmark img { height: 1.5rem; }

.footer-brand p { color: rgba(245,241,236,0.65); font-size: 0.875rem; max-width: 30ch; } /* alpha raised for AA on charcoal */

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
  border-top: 1px solid var(--hairline-light);
  font-size: 0.8125rem;
  color: rgba(245,241,236,0.65); /* alpha raised for AA on charcoal */
}

.footer-legal { display: flex; gap: 1.25rem; }
.footer-legal a { color: rgba(245,241,236,0.65); transition: color 0.25s ease; }
.footer-legal a:hover { color: var(--paper); }

/* ---------- Legal / long-form pages ----------
   Editorial layout borrowed from the About "Our Story" section:
   section title in the left column, copy in the right. Repeated
   per legal section so the page keeps the heading-left / text-right
   rhythm throughout. */
.legal-hero {
  padding-top: clamp(9rem, 16vw, 13rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.legal-hero h1 { margin-top: 1.25rem; max-width: 16ch; }
.legal-hero .meta {
  margin-top: 1.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

.legal-section {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(2.5rem, 5vw, 3.75rem) 0;
  border-top: 1px solid var(--hairline);
}

.legal-section > h2 {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  align-self: start;
}

.legal-copy > *:last-child { margin-bottom: 0; }
.legal-copy p { margin-bottom: 1.25rem; color: var(--ink-soft); }
.legal-copy ul { margin: 0 0 1.25rem 1.1rem; color: var(--ink-soft); }
.legal-copy li { margin-bottom: 0.5rem; }
.legal-copy strong { color: var(--ink); font-weight: 600; }
.legal-copy a {
  color: var(--ada-copper);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-callout {
  background: var(--sandstone);
  border-left: 2px solid var(--ada-copper);
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.25rem;
}
.legal-callout p { margin: 0; font-size: 0.9375rem; }

.legal-services { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.legal-services li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.legal-services li:last-child { border-bottom: 0; }
.legal-services strong { color: var(--ink); }

.legal-contact {
  margin-top: 0.5rem;
  padding: 1.5rem;
  background: var(--sandstone);
}
.legal-contact p { margin: 0 0 0.25rem; font-size: 0.9375rem; color: var(--ink-soft); }
.legal-contact p:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
  .legal-section { grid-template-columns: 1fr; gap: 0.875rem; padding: 2rem 0; }
}

/* ---------- Shared section patterns ---------- */

.section { padding-top: clamp(4.5rem, 9vw, 8.5rem); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-head .display-md { max-width: 22ch; margin-top: 1.25rem; }

.rule { border: 0; border-top: 1px solid var(--hairline); }

/* ---------- In-page section nav (shared) ----------
   Sticky text-link nav that highlights the section in view (scrollspy in
   main.js). Used on Finish Packs and the long SEO / service-area pages.
   Finish Packs also carries an inline copy that predates this; consolidate
   at the Phase 3 port. */
.pack-nav {
  position: sticky;
  top: 5rem;
  z-index: 50;
  background: var(--linen);
}
/* Right-edge fade: scroll affordance for the horizontal nav on narrow
   screens. Invisible on wide screens (linen fading into linen where nothing
   overflows); visible only where links scroll under the right edge. */
.pack-nav::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 2.5rem;
  background: linear-gradient(to right, rgba(245, 241, 236, 0), var(--linen));
  pointer-events: none;
}
.pack-nav-inner {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  /* vertical only; .wrap supplies the left/right gutter so links align with the logo */
  padding-top: 1.05rem;
  padding-bottom: 1.05rem;
  /* links run off-screen and scroll horizontally instead of wrapping */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox: hide bar, the fade is the affordance */
}
.pack-nav-inner::-webkit-scrollbar { display: none; } /* WebKit */
.pack-nav a {
  position: relative;
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fieldstone);
  padding: 0.15rem 0;
  transition: color 0.25s ease;
}
.pack-nav a:hover { color: var(--ink); }
/* active section marked in copper (intent); body-size ADA Copper on Linen passes AA */
.pack-nav a.is-active { color: var(--ada-copper); }
.pack-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -0.3rem;
  height: 2px;
  background: var(--ada-copper);
}
/* anchored sections clear the fixed header + sticky nav when jumped to */
section[id] { scroll-margin-top: 8.5rem; }

.num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--fieldstone); /* demoted from copper */
}

/* ---------- Swatches ---------- */

.swatches { display: flex; height: 3.5rem; }

.swatches span { flex: 1; }

/* ---------- Forms ---------- */

.field { display: flex; flex-direction: column; gap: 0.5rem; }

.field label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 0.75rem 0;
  border-radius: 0;
  outline: none;
  transition: border-color 0.3s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--ada-copper); }

.field textarea { resize: vertical; min-height: 7rem; }

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
  /* Group the Get-your-quote button with the hamburger on the right
     instead of letting the lone button center under space-between. */
  .header-inner { gap: 1rem; }
  .nav { gap: 1.5rem; margin-left: auto; }
  .nav a:not(.btn) { display: none; }
  .nav-toggle { display: block; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 992px) {
  .mobile-menu { display: none; }
  body.menu-open { overflow: auto; }
}

@media (max-width: 767px) {
  .wordmark { font-size: 0.875rem; white-space: nowrap; }
  .wordmark span { display: none; }
  .header-inner { height: 4.25rem; gap: 0.75rem; }
  .header-inner .btn { padding: 0.5rem 0.875rem; font-size: 0.75rem; }
  .header-inner .btn .arrow { display: none; }
  /* mobile header is 4.25rem; keep the sticky nav flush under it */
  .pack-nav { top: 4.25rem; }
  section[id] { scroll-margin-top: 7rem; }
  /* footer stacks to a single column on phones */
  .footer-grid { grid-template-columns: 1fr; gap: 2.25rem; }
}