/*!
 * MH Carpentry — Visual Design System
 * "High-end residential craftsmanship with a rugged edge — professional,
 * thoughtful, practical." Black + cream as the primary system, warm tan
 * for buttons/dividers/highlights, dark brown used sparingly for depth.
 * Revision 2 (Oct 2026, REVISION-2-SPEC.txt section 4): Bebas Neue for
 * display (headings, section titles, project names, buttons), Montserrat for
 * body / nav / forms / FAQs / labels, Cormorant Garamond ONLY via
 * .accent-serif. Slightly more rugged, truck-wrap inspired: more black and
 * cream, square architectural buttons, ruled (flatter) sections, a faint
 * blueprint / measurement-mark texture (.section--texture). Section 28 at the
 * end of this file holds the Revision 2 components and overrides.
 *
 * Structure of this file:
 *   1. Design tokens (:root custom properties)
 *   2. Reset / base elements
 *   3. Typography
 *   4. Layout primitives (.container, .section, .lede)
 *   5. Buttons
 *   6. Site header (desktop nav, brand, actions, menu toggle)
 *   7. Mobile nav drawer
 *   8. Mobile bottom nav
 *   9. Hero
 *  10. Cards / grids (card, service-card, project-card, case-study)
 *  11. Trust strip / badges / stats
 *  12. Service areas
 *  13. Process steps
 *  14. FAQ accordion
 *  15. Photo placeholder
 *  16. Footer
 *  17. Chat widget
 *  18. Reveal-on-scroll
 *  19. Utilities / misc
 *  20. Reduced motion
 *  21. Marquee strips (top info ribbon + word bands)
 */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Locked brand colors — exact hex values, never altered --- */
  --color-black: #000000;
  --color-brown: #6F4E37;
  --color-tan:   #C2A27C;
  --color-cream: #F5EBDD;
  --color-white: #FFFFFF;

  /* --- Semantic aliases (built ONLY from the five locked colors above) --- */
  --color-bg: var(--color-cream);
  --color-bg-alt: var(--color-white);
  --color-ink: var(--color-black);
  --color-ink-muted: var(--color-brown);
  --color-accent: var(--color-tan);
  --color-accent-deep: var(--color-brown);
  --color-on-dark: var(--color-cream);
  --color-on-dark-muted: #C9BCA9; /* cream mixed toward brown, for muted text on black */
  --color-on-accent: var(--color-black);
  --color-border: #E4D6C2; /* cream, darkened — hairline borders on light surfaces */
  --color-border-dark: #2B2521; /* black, lightened — hairline borders on dark surfaces */
  --color-charcoal: #141210;    /* black lifted slightly toward brown - alternate dark band */

  /* Interactive state tints — expressed as opacity overlays of the locked
     colors, never as invented new hex values. */
  --overlay-black-04: rgba(0, 0, 0, 0.04);
  --overlay-black-08: rgba(0, 0, 0, 0.08);
  --overlay-black-15: rgba(0, 0, 0, 0.15);
  --overlay-black-40: rgba(0, 0, 0, 0.40);
  --overlay-black-60: rgba(0, 0, 0, 0.60);
  --overlay-cream-10: rgba(245, 235, 221, 0.10);
  --overlay-tan-15: rgba(194, 162, 124, 0.15);
  --overlay-tan-30: rgba(194, 162, 124, 0.30);

  /* --- Typography (Revision 2) ---
     --font-display: Bebas Neue - h1-h6, big statements, buttons, word bands.
       Single weight (400): never set it bold (faux-bold is suppressed).
     --font-heading: kept as the name used by the many small UI-label rules
       (eyebrows, nav, form labels, FAQ questions, footer column titles) -
       now Montserrat, per spec ("Montserrat: navigation, forms, FAQs, labels").
     --font-accent: Cormorant Garamond - .accent-serif only. */
  --font-display: 'Bebas Neue', 'Oswald', 'Bahnschrift SemiCondensed', 'Arial Narrow', sans-serif;
  --font-heading: 'Montserrat', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Montserrat', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-accent: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --fs-h1: clamp(2.75rem, 1.7rem + 4.4vw, 5.5rem);
  --fs-h2: clamp(2.2rem, 1.55rem + 2.7vw, 3.75rem);
  --fs-h3: clamp(1.65rem, 1.35rem + 1.2vw, 2.35rem);
  --fs-h4: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
  --fs-lede: clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-heading: 1.0;
  --lh-body: 1.65;

  --tracking-tight: -0.01em;
  --tracking-display: 0.025em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.09em;
  --tracking-widest: 0.16em;

  /* --- Spacing scale (4px base unit) --- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */
  --space-10: 8rem;     /* 128px */

  /* --- Radii — sharp/architectural, not soft-app-like --- */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 3px;
  --radius-pill: 999px;

  /* --- Shadows — restrained, built from black at low opacity --- */
  --shadow-sm: 0 1px 3px var(--overlay-black-15), 0 1px 2px var(--overlay-black-08);
  --shadow-md: 0 8px 24px -8px var(--overlay-black-40);
  --shadow-lg: 0 24px 48px -16px var(--overlay-black-40);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 250ms var(--ease-out);
  --transition-slow: 450ms var(--ease-out);

  /* --- Layout --- */
  --container-max: 1200px;
  --container-max-narrow: 760px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-height: 84px;
  --header-height-scrolled: 66px;
  --header-height-mobile: 68px;
  --mobile-bottom-nav-height: 68px;

  /* --- Z-index scale --- */
  --z-header: 500;
  --z-bottom-nav: 520;
  --z-mobile-nav-backdrop: 590;
  --z-mobile-nav: 600;
  --z-chat: 700;
  --z-skip-link: 900;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Deliberately NOT overflow-x:hidden here (only body has it): an
     ancestor's overflow other than visible disables position:sticky for
     descendants in every browser - confirmed this broke the sticky header
     site-wide (it stopped sticking on scroll entirely). body's overflow-x
     is enough for the iPhone edge-bleed concern this was originally added
     for, and the actual contact-form fix (an inset box-shadow, which can
     never paint outside its own element on any engine) no longer needs
     this extra safety net anyway. */
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Body scroll-lock while the mobile nav drawer is open (toggled by main.js) */
body.has-mobile-nav-open {
  overflow: hidden;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis-weight: none;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5, h6 { font-size: 1.2rem; }

p {
  margin: 0 0 var(--space-4);
}
p:last-child {
  margin-bottom: 0;
}

strong { font-weight: 600; }

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

::selection {
  background: var(--color-tan);
  color: var(--color-black);
}

/* Focus visibility — premium sites still need a clean, visible focus ring */
:focus-visible {
  outline: 2px solid var(--color-brown);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: fixed;
  top: -100px;
  left: var(--space-4);
  z-index: var(--z-skip-link);
  background: var(--color-black);
  color: var(--color-cream);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--fs-small);
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: var(--space-4);
}

/* Honeypot field defensive styling — hides the anti-spam field regardless
   of the class name the contact-form markup ends up using. */
input[name="website_url_hp"] {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   3. TYPOGRAPHY UTILITIES
   ========================================================================== */
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent-deep);
}

.hero .eyebrow {
  color: var(--color-tan);
}

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: clamp(3rem, 5vw + 1rem, 6rem);
}

.section--alt {
  background: var(--color-cream);
}

.section--narrow .container,
.section--narrow.container {
  max-width: var(--container-max-narrow);
}

.section--tight {
  padding-block: clamp(2rem, 3vw + 1rem, 3.5rem);
}

.section--dark,
.section--hero {
  background: var(--color-black);
  color: var(--color-cream);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.section--hero h1, .section--hero h2, .section--hero h3, .section--hero h4 {
  color: var(--color-cream);
}
.section--dark p, .section--hero p { color: var(--color-on-dark-muted); }

/* .section--hero: the page-header band used on every secondary page (Decks,
   Structures, Renovations, Real Estate, Projects, About, Process, Contact) -
   same dark treatment as .section--dark, plus the hero-specific extras
   (blueprint texture, eyebrow/CTA/trust-strip on dark). */
.section--hero {
  position: relative;
  overflow: hidden;
}
.section--hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--overlay-cream-10) 1px, transparent 1px),
    linear-gradient(90deg, var(--overlay-cream-10) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, transparent, black 35%, black 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, black 35%, black 70%, transparent);
  opacity: 0.5;
}
.section--hero > .container {
  position: relative;
  z-index: 1;
}
.section--hero .eyebrow {
  color: var(--color-tan);
}
.section--hero .lede {
  color: var(--color-on-dark-muted);
}
.section--hero .price-note {
  color: var(--color-cream);
  margin: var(--space-3) 0 0;
}
.section--hero .price-note strong {
  color: var(--color-tan);
}
.section--hero .trust-strip {
  border-color: var(--color-border-dark);
  margin-top: var(--space-5);
}
.section--hero .trust-strip li {
  color: var(--color-on-dark-muted);
}
.section--hero .trust-strip li::before {
  color: var(--color-tan);
}
.section--hero .disclosure-note {
  background: var(--overlay-cream-10);
  border-left-color: var(--color-tan);
  color: var(--color-on-dark-muted);
}

/* Video-backed variant of the black hero band (currently just Projects) -
   same idea as .hero--photo on the homepage: hide the flat grid texture,
   play a muted/looping clip behind the content instead, with a dark
   overlay so text stays legible over it. */
.section--hero--video::before {
  display: none;
}
.section--hero--video::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.7) 45%, rgba(0, 0, 0, 0.5) 100%);
}
.section--hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .section--hero__video {
    display: none;
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.section--sunken {
  background: var(--color-white);
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--color-ink-muted);
  max-width: 62ch;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: 0.85rem 1.6rem 0.75rem;
  border-radius: 0;
  border: 2px solid transparent;
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis-weight: none;
  font-size: 1.2rem;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  white-space: normal;
  transition: background-color var(--transition-base), color var(--transition-base),
              border-color var(--transition-base), transform var(--transition-fast);
}
.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--color-tan);
  border-color: var(--color-tan);
  color: var(--color-black);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-cream);
}

.btn--secondary {
  background: transparent;
  border-color: var(--color-black);
  color: var(--color-black);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-cream);
}

/* Secondary buttons sitting on a dark section (hero, footer, .section--dark) */
.section--dark .btn--secondary,
.section--hero .btn--secondary,
.hero .btn--secondary,
.site-footer .btn--secondary {
  border-color: var(--color-cream);
  color: var(--color-cream);
}
.section--dark .btn--secondary:hover,
.section--hero .btn--secondary:hover,
.hero .btn--secondary:hover,
.site-footer .btn--secondary:hover,
.section--dark .btn--secondary:focus-visible,
.section--hero .btn--secondary:focus-visible,
.hero .btn--secondary:focus-visible,
.site-footer .btn--secondary:focus-visible {
  background: var(--color-cream);
  color: var(--color-black);
  border-color: var(--color-cream);
}

.btn--sm {
  padding: 0.6rem 1.1rem 0.5rem;
  font-size: 1rem;
}

/* ==========================================================================
   6. SITE HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-cream);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition-base), border-color var(--transition-base),
              padding-block var(--transition-base);
}

.site-header__inner {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  min-height: var(--header-height-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  transition: min-height var(--transition-base);
}

@media (min-width: 1024px) {
  .site-header__inner {
    min-height: var(--header-height);
  }
}

.site-header.is-scrolled {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
  /* Frosted-glass header once scrolled: a solid fallback background for
     browsers without backdrop-filter support, upgraded to translucent +
     blurred wherever it's available. */
  background: var(--color-white);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
  }
}
@media (min-width: 1024px) {
  .site-header.is-scrolled .site-header__inner {
    min-height: var(--header-height-scrolled);
  }
}

/* --- Brand --- */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.brand__mark {
  display: block;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  object-fit: contain;
}
@media (max-width: 1023px) {
  .brand__mark {
    width: 48px;
    height: 48px;
  }
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis-weight: none;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-black);
}

.brand__tagline {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-brown);
  display: none;
}
@media (min-width: 480px) {
  .brand__tagline { display: block; }
}

/* --- Desktop nav (hidden below ~1024px) --- */
.main-nav {
  display: none;
}
@media (min-width: 1024px) {
  .main-nav {
    display: block;
  }
  .main-nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }
  .main-nav a,
  .main-nav .nav-dropdown__toggle {
    position: relative;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-black);
    padding-block: var(--space-2);
    transition: color var(--transition-fast);
  }
  .main-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 2px;
    background: var(--color-tan);
    transition: right var(--transition-base);
  }
  .main-nav a:hover,
  .main-nav a:focus-visible {
    color: var(--color-brown);
  }
  .main-nav a:hover::after,
  .main-nav a:focus-visible::after,
  .main-nav a.is-active::after {
    right: 0;
  }
  .main-nav a.is-active {
    color: var(--color-black);
  }
}

/* --- Header actions (phone + CTA) --- */
.site-header__actions {
  display: none;
  align-items: center;
  gap: var(--space-5);
}
@media (min-width: 1024px) {
  .site-header__actions {
    display: flex;
  }
}
/* Revision 2 nav has six items incl. "The MH Experience" + a dropdown, so
   the header actions step in by width: 1024-1279 nav only (Contact is in the
   nav; the phone is in the ribbon and the drawer); 1280-1439 adds the
   consultation CTA; 1440+ adds the phone number too. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-header__actions {
    display: none;
  }
  .main-nav ul {
    gap: var(--space-5);
  }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .header-phone {
    display: none;
  }
}
.site-header__actions .btn {
  white-space: nowrap;
  padding: 0.7rem 1.2rem 0.6rem;
  font-size: 1.05rem;
}

.header-phone {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: var(--tracking-tight);
  color: var(--color-black);
  white-space: nowrap;
  transition: color var(--transition-fast);
}
.header-phone:hover,
.header-phone:focus-visible {
  color: var(--color-brown);
}

/* --- Hamburger menu toggle (mobile/tablet only) --- */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}
@media (min-width: 1024px) {
  .menu-toggle {
    display: none;
  }
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-black);
  border-radius: 1px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   7. MOBILE NAV DRAWER
   ========================================================================== */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-nav);
  display: none; /* [hidden] governs visibility natively: fully removed from
                     the a11y tree and tab order while closed. */
  flex-direction: column;
  justify-content: center;
  gap: var(--space-7);
  background: var(--color-black);
  color: var(--color-cream);
  padding: var(--space-8) var(--container-pad);
}

/* [hidden] removed by main.js on open. A keyframe animation (not a
   transition) is used deliberately: transitions cannot run from
   display:none, but animations restart correctly the moment an element
   begins rendering, so this plays every time the drawer opens. */
.mobile-nav:not([hidden]) {
  display: flex;
  animation: mhc-mobile-nav-in var(--transition-slow);
}

@keyframes mhc-mobile-nav-in {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (min-width: 1024px) {
  .mobile-nav {
    display: none !important;
  }
}

.mobile-nav__close {
  position: absolute;
  top: var(--space-4);
  right: var(--container-pad);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-cream);
  border: 1px solid var(--color-border-dark);
  border-radius: 50%;
}
.mobile-nav__close svg {
  width: 20px;
  height: 20px;
}
.mobile-nav__close:hover,
.mobile-nav__close:focus-visible {
  color: var(--color-tan);
  border-color: var(--color-tan);
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.mobile-nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-cream);
}
.mobile-nav a.is-active {
  color: var(--color-tan);
}

.mobile-nav .btn--primary {
  align-self: stretch;
  width: 100%;
  white-space: normal;
  text-align: center;
}

/* ==========================================================================
   8. MOBILE BOTTOM NAV (app-style quick-action bar)
   ========================================================================== */
.mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bottom-nav);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  height: var(--mobile-bottom-nav-height);
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px var(--overlay-black-08);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
  }
}

@media (min-width: 1024px) {
  .mobile-bottom-nav {
    display: none;
  }
}

.mobile-bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-brown);
  transition: color var(--transition-fast);
}
.mobile-bottom-nav a.is-active {
  color: var(--color-black);
}
.mobile-bottom-nav a:active {
  color: var(--color-black);
}

.mobile-bottom-nav .icon {
  width: 21px;
  height: 21px;
}

/* Emphasized, raised primary action (Call). The circular badge (background,
   border, shadow) lives on its own wrapper span, separate from the masked
   icon glyph inside it - putting both the mask-image AND a background/
   border/box-shadow on the same element clips the badge almost entirely
   away, leaving only a sliver of the phone glyph visible (the bug this
   replaced). */
.mobile-bottom-nav__call {
  position: relative;
  color: var(--color-black) !important;
}
.mobile-bottom-nav__call-badge {
  position: relative;
  /* No vertical raise: any negative "top" here adds directly and entirely
     to the gap between the badge and the "Call" label below it, because
     the flex column's gap is reserved based on the badge's un-raised
     position (confirmed by measuring: Home's icon-to-label gap is 3px;
     with a -9px raise, Call's was 12px - exactly 9px more). The badge's
     own tan circle + border + shadow already make it read as the
     emphasized action without needing to float above the row too. */
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--color-tan);
  border: 3px solid var(--color-cream);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}
.mobile-bottom-nav__call-badge .icon {
  width: 22px;
  height: 22px;
  background-color: var(--color-black);
}
.mobile-bottom-nav__call:active .mobile-bottom-nav__call-badge {
  transform: translateY(0) scale(0.94);
  background: var(--color-black);
}
.mobile-bottom-nav__call:active .mobile-bottom-nav__call-badge .icon {
  background-color: var(--color-cream);
}

/* --- Inline icon set (CSS mask, tinted via currentColor) --- */
.icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon--home {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v9a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-9'/%3E%3Cpath d='M9.5 20v-6h5v6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v9a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-9'/%3E%3Cpath d='M9.5 20v-6h5v6'/%3E%3C/svg%3E");
}

.icon--work {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.5' width='18' height='12' rx='1.5'/%3E%3Cpath d='M8 7.5V6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1.5'/%3E%3Cpath d='M3 12.5h18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.5' width='18' height='12' rx='1.5'/%3E%3Cpath d='M8 7.5V6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1.5'/%3E%3Cpath d='M3 12.5h18'/%3E%3C/svg%3E");
}

.icon--phone {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h3l1.5 4-2 1.6a12 12 0 0 0 5.9 5.9l1.6-2 4 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4.5 5.7a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h3l1.5 4-2 1.6a12 12 0 0 0 5.9 5.9l1.6-2 4 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4.5 5.7a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E");
}

.icon--quote {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M8.5 13.5l2 2 4.5-4.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M8.5 13.5l2 2 4.5-4.5'/%3E%3C/svg%3E");
}

.icon--about {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
}

.icon--instagram {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.1' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.1' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

.icon--image {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='1.5'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M3 16.5l5-5 4 4 3.5-3.5L21 16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='1.5'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M3 16.5l5-5 4 4 3.5-3.5L21 16'/%3E%3C/svg%3E");
}

/* ==========================================================================
   9. HERO
   ========================================================================== */
.hero {
  position: relative;
  background: var(--color-black);
  background-size: cover;
  background-position: center 40%;
  color: var(--color-cream);
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

/* Restrained blueprint-line texture: faint tan hairline grid, never busy.
   Hidden when a real photo is behind the hero (.hero--photo) - a grid
   overlaid on a photo reads as busy/cluttered rather than a subtle
   brand texture. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--overlay-cream-10) 1px, transparent 1px),
    linear-gradient(90deg, var(--overlay-cream-10) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, transparent, black 35%, black 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, black 35%, black 70%, transparent);
  opacity: 0.5;
}
.hero--photo::before {
  display: none;
}
/* Darkening gradient so cream/tan text stays legible over the photo -
   strongest on the left where the text sits, fading toward the right. */
.hero--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.72) 38%, rgba(0, 0, 0, 0.42) 65%, rgba(0, 0, 0, 0.55) 100%);
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* .hero's own background-image (set inline, same still frame as the
     video's poster) shows through until the video has a frame ready, and
     stays as the permanent fallback under reduced-motion below. */
}
/* Respect reduced-motion: no autoplaying video, just the static poster
   frame the .hero element's own background-image is already set to. */
@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .hero__inner:has(> :only-child) {
    grid-template-columns: 1fr;
  }
}

.hero h1,
.hero__title {
  color: var(--color-cream);
  margin-top: var(--space-3);
}

.hero .lede,
.hero__subhead {
  color: var(--color-on-dark-muted);
  max-width: 54ch;
  font-size: var(--fs-lede);
  line-height: 1.55;
}

.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-tan);
  margin: 0;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(245, 235, 221, 0.28);
  background: rgba(245, 235, 221, 0.1);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero__eyebrow {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.hero .trust-strip {
  border-color: var(--color-border-dark);
}
.hero .trust-strip li {
  color: var(--color-on-dark-muted);
}
.hero .trust-strip li::before {
  color: var(--color-tan);
}

/* ==========================================================================
   10. CARDS / GRIDS
   ========================================================================== */
.card-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-top: var(--space-7);
}
@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.service-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-tan);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.service-card:hover,
.service-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.service-card h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-2);
}
.service-card p {
  color: var(--color-ink-muted);
}
.service-card a.btn,
.service-card > a:last-child:not(.btn) {
  margin-top: var(--space-4);
}

.project-card {
  display: block;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.project-card:hover,
.project-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.project-card .photo-placeholder,
.project-card img {
  border-radius: 0;
  border-width: 0 0 1px;
}
.project-card__body,
.project-card > div {
  padding: var(--space-5);
}
.project-card h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-1);
}
.project-card p {
  color: var(--color-ink-muted);
  font-size: var(--fs-small);
}

.case-study {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-6);
}
.case-study + .case-study {
  border-top: 1px solid var(--color-border);
}
@media (min-width: 900px) {
  .case-study {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .case-study:nth-of-type(even) > :first-child {
    order: 2;
  }
}
.case-study h3 {
  margin-bottom: var(--space-3);
}
.case-study p {
  color: var(--color-ink-muted);
}

/* ==========================================================================
   11. TRUST STRIP / BADGES / STATS
   ========================================================================== */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.trust-strip li {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-ink-muted);
  text-align: left;
}
.trust-strip li::before {
  content: '';
  flex-shrink: 0;
  margin-top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-tan);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--overlay-tan-15);
  border: 1px solid var(--color-tan);
  color: var(--color-accent-deep);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.section--dark .badge,
.hero .badge {
  color: var(--color-tan);
  background: var(--overlay-cream-10);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.stat > :first-child {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  line-height: 1;
  color: var(--color-black);
}
.hero .stat > :first-child,
.section--dark .stat > :first-child {
  color: var(--color-cream);
}
.stat > :last-child {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-brown);
}
.hero .stat > :last-child,
.section--dark .stat > :last-child {
  color: var(--color-tan);
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-7);
}
@media (min-width: 640px) {
  .stats-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   12. SERVICE AREAS
   ========================================================================== */
.service-areas {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--color-white);
  border-left: 3px solid var(--color-tan);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-ink-muted);
  line-height: 1.7;
}
.service-areas strong {
  color: var(--color-black);
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.hero .service-areas,
.section--dark .service-areas {
  background: var(--overlay-cream-10);
  color: var(--color-on-dark-muted);
}
.hero .service-areas strong,
.section--dark .service-areas strong {
  color: var(--color-cream);
}

/* ==========================================================================
   13. PROCESS STEPS
   ========================================================================== */
.process-step {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding-block: var(--space-5);
}
.process-step + .process-step {
  border-top: 1px solid var(--color-border);
}

.process-step__number {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-cream);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
}

/* Fallback when markup gives no explicit __number element: treat a short
   first child as the numbered badge automatically. */
.process-step > *:first-child:not(.process-step__number):not(h3):not(h4):not(p) {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-cream);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
}

.process-step__title,
.process-step h3,
.process-step h4 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-1);
}

.process-step__text,
.process-step p {
  color: var(--color-ink-muted);
  margin: 0;
}

.process-step__body {
  flex: 1 1 auto;
  min-width: 0;
}

.process-list,
.process-timeline {
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

/* ==========================================================================
   14. FAQ ACCORDION
   ========================================================================== */
.faq-list {
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: var(--tracking-tight);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-tan);
  border-bottom: 2px solid var(--color-tan);
  transform: rotate(45deg);
  transition: transform var(--transition-base);
}
.faq-item[open] summary::after {
  transform: rotate(-135deg);
}

.faq-item p {
  padding-bottom: var(--space-5);
  margin: 0;
  color: var(--color-ink-muted);
  max-width: 68ch;
}

/* ==========================================================================
   15. PHOTO PLACEHOLDER
   ========================================================================== */
.photo-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-cream);
  background-image: repeating-linear-gradient(
    135deg,
    var(--overlay-tan-15) 0 1px,
    transparent 1px 16px
  );
  border: 1px dashed var(--color-tan);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.photo-placeholder--portrait {
  aspect-ratio: 3 / 4;
}

.project-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-cream);
}
.project-photo--portrait {
  aspect-ratio: 3 / 4;
}
.project-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-photo--zoomable {
  cursor: zoom-in;
}
.project-photo--zoomable::after {
  content: '';
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5EBDD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 18px no-repeat;
  opacity: 0.85;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  pointer-events: none;
}
.project-photo--zoomable:hover::after,
.project-photo--zoomable:focus-visible::after {
  opacity: 1;
  transform: scale(1.08);
}
.project-photo--zoomable:focus-visible {
  outline: 3px solid var(--color-tan);
  outline-offset: 2px;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(0, 0, 0, 0.9);
}
.lightbox[hidden] {
  display: none;
}
.lightbox__figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.lightbox__img {
  display: block;
  max-width: 94vw;
  max-height: 84vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.lightbox__caption {
  color: var(--color-cream);
  font-size: var(--fs-small);
  text-align: center;
}
.lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-cream);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: var(--color-tan);
  color: var(--color-black);
}
body.has-lightbox-open {
  overflow: hidden;
}

.about-hero__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.photo-placeholder__icon {
  width: 34px;
  height: 34px;
  color: var(--color-brown);
  opacity: 0.65;
}
.photo-placeholder__icon::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='1.5'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M3 16.5l5-5 4 4 3.5-3.5L21 16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='1.5'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M3 16.5l5-5 4 4 3.5-3.5L21 16'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.photo-placeholder__label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-brown);
  text-align: center;
  padding-inline: var(--space-4);
}

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-black);
  color: var(--color-on-dark-muted);
}

.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-9) var(--container-pad) var(--space-7);
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .site-footer__inner {
    grid-template-columns: 1.35fr 1.15fr 1.2fr 1fr 1.1fr;
  }
}
.site-footer__col--services p {
  margin-bottom: var(--space-1);
}

.site-footer__brand {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  grid-column: 1 / -1;
}
@media (min-width: 1024px) {
  .site-footer__brand {
    grid-column: auto;
  }
}
.footer-social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.footer-social__label {
  font-size: var(--fs-small);
  color: var(--color-on-dark-muted);
}
.footer-social__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border-dark);
  border-radius: 50%;
  color: var(--color-cream);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.footer-social__icon .icon {
  width: 17px;
  height: 17px;
  background-color: currentColor;
}
.footer-social__icon:hover,
.footer-social__icon:focus-visible {
  color: var(--color-tan);
  border-color: var(--color-tan);
}

.site-footer__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis-weight: none;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-cream);
  margin: 0;
}
.site-footer__tagline {
  font-size: var(--fs-small);
  color: var(--color-on-dark-muted);
  margin: var(--space-1) 0 0;
}

.site-footer__col h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-tan);
  margin-bottom: var(--space-4);
}
.site-footer__col p {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-small);
  line-height: 1.7;
}
.site-footer__col a {
  transition: color var(--transition-fast);
}
.site-footer__col a:hover,
.site-footer__col a:focus-visible {
  color: var(--color-cream);
}

.site-footer__bottom {
  border-top: 1px solid var(--color-border-dark);
  padding: var(--space-5) var(--container-pad);
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
}
.site-footer__bottom p {
  margin: 0;
  font-size: var(--fs-xs);
  color: #6B6259;
}

/* Required credit line — present but deliberately quiet, never prominent */
.site-footer__credit {
  opacity: 0.75;
}
.site-footer__credit a {
  color: inherit;
}
/* Staff login - small gear after the credit line, links to /admin/.
   The credit text stays quiet via its colour; opacity is reset so the gear
   (a child) is not dimmed along with it. */
.site-footer__credit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 1;
  color: #8A7F74;
}
.site-footer__admin svg {
  width: 18px;
  height: 18px;
}
.site-footer__admin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--color-tan, #C2A27C);
  transition: color 150ms ease, background-color 150ms ease, transform 250ms ease;
}
.site-footer__admin:hover,
.site-footer__admin:focus-visible {
  color: #F5EBDD;
  background-color: rgba(194, 162, 124, 0.15);
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .site-footer__admin:hover,
  .site-footer__admin:focus-visible { transform: none; }
}
/* Phones/tablets: the fixed bottom nav (and the chat launcher floating above
   it, bottom-right) used to sit on top of the last footer row, hiding the
   credit line and the staff-login gear. Reserve room for both and stack the
   row centred so nothing lands under the launcher. */
@media (max-width: 1023px) {
  .site-footer__bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-bottom: calc(var(--space-5) + var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 58px + var(--space-3));
  }
  .site-footer__admin {
    width: 40px;
    height: 40px;
  }
}

/* ==========================================================================
   17. CHAT WIDGET
   ========================================================================== */
#mhc-chat-widget {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-chat);
}
/* Clear the mobile bottom nav bar so the launcher never overlaps it */
@media (max-width: 1023px) {
  #mhc-chat-widget {
    right: var(--space-4);
    bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-3));
  }
}

.mhc-chat-launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-cream);
  box-shadow: var(--shadow-md);
  border: 2px solid var(--color-tan);
  transition: transform var(--transition-fast), background-color var(--transition-base);
}
.mhc-chat-launcher:hover,
.mhc-chat-launcher:focus-visible {
  background: var(--color-brown);
  transform: translateY(-2px);
}
.mhc-chat-launcher svg {
  width: 26px;
  height: 26px;
}

/* Proactive greeting bubble - shown next to the closed launcher a moment
   after page load, styled like techspire.ai's own widget (an inviting
   speech bubble rather than a silent icon). Dismissible; never reappears
   once dismissed or the panel is opened, for this page view. */
.mhc-chat-greeting {
  position: absolute;
  right: 0;
  bottom: calc(58px + var(--space-3));
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  width: max-content;
  max-width: 260px;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--color-ink);
  cursor: pointer;
  animation: mhc-chat-in var(--transition-base) var(--ease-out);
}
.mhc-chat-greeting span {
  flex: 1 1 auto;
}
.mhc-chat-greeting button {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-ink-muted);
  transition: background-color var(--transition-fast);
}
.mhc-chat-greeting button:hover,
.mhc-chat-greeting button:focus-visible {
  background: var(--color-cream);
}
.mhc-chat-greeting button svg {
  width: 11px;
  height: 11px;
}
/* Mobile: icon only, no proactive greeting bubble (client request) - this
   also guards against the JS timer firing right as the viewport crosses
   the breakpoint (e.g. a resize/rotation). */
@media (max-width: 1023px) {
  .mhc-chat-greeting {
    display: none !important;
  }
}

.mhc-chat-panel {
  position: absolute;
  right: 0;
  bottom: calc(58px + var(--space-3));
  width: min(360px, calc(100vw - 2 * var(--space-4)));
  max-height: min(560px, 75vh);
  display: none; /* [hidden] governs visibility natively */
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform-origin: bottom right;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mhc-chat-panel {
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }
}

/* Opening: [hidden] removed by chat-widget.js. A keyframe animation is used
   because transitions cannot run from display:none. */
.mhc-chat-panel:not([hidden]) {
  display: flex;
}
.mhc-chat-panel:not([hidden]):not(.mhc-chat-panel--closing) {
  animation: mhc-chat-in var(--transition-base) var(--ease-out);
}

/* Closing: chat-widget.js adds this class first (regular transition, since
   the panel is still rendered), then re-applies [hidden] once it finishes —
   which restores native display:none / a11y-tree removal while closed. */
.mhc-chat-panel--closing {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

@keyframes mhc-chat-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.mhc-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-black);
  color: var(--color-cream);
  flex-shrink: 0;
}
.mhc-chat-header h2 {
  margin: 0;
  font-size: 1rem;
  color: var(--color-cream);
}
.mhc-chat-header p {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--color-tan);
}
.mhc-chat-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-cream);
  transition: background-color var(--transition-fast);
}
.mhc-chat-close:hover,
.mhc-chat-close:focus-visible {
  background: var(--overlay-cream-10);
}
.mhc-chat-close svg {
  width: 18px;
  height: 18px;
}

.mhc-chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-cream);
  scroll-behavior: smooth;
}

.mhc-chat-bubble {
  max-width: 85%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  line-height: 1.5;
  overflow-wrap: break-word;
}
.mhc-chat-bubble--assistant {
  align-self: flex-start;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-ink);
  border-bottom-left-radius: var(--radius-sm);
}
.mhc-chat-bubble--user {
  align-self: flex-end;
  background: var(--color-black);
  color: var(--color-cream);
  border-bottom-right-radius: var(--radius-sm);
}
.mhc-chat-bubble--error {
  align-self: center;
  background: transparent;
  border: 1px dashed var(--color-brown);
  color: var(--color-brown);
  font-size: var(--fs-xs);
  text-align: center;
}
.mhc-chat-bubble--typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-sm);
}
.mhc-chat-bubble--typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brown);
  opacity: 0.5;
  animation: mhc-typing-dot 1.1s infinite ease-in-out;
}
.mhc-chat-bubble--typing span:nth-child(2) { animation-delay: 0.15s; }
.mhc-chat-bubble--typing span:nth-child(3) { animation-delay: 0.3s; }

.mhc-chat-quickreplies {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.mhc-chat-quickreply {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-tan);
  background: var(--color-cream);
  color: var(--color-black);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8125rem;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.mhc-chat-quickreply:hover,
.mhc-chat-quickreply:focus-visible {
  background: var(--color-tan);
  border-color: var(--color-tan);
}

@keyframes mhc-typing-dot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.mhc-chat-form {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-white);
}

.mhc-chat-input {
  flex: 1 1 auto;
  resize: none;
  max-height: 96px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-cream);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.4;
  transition: border-color var(--transition-fast);
}
.mhc-chat-input:focus-visible {
  outline: none;
  border-color: var(--color-tan);
}

.mhc-chat-send {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-tan);
  color: var(--color-black);
  transition: background-color var(--transition-fast), opacity var(--transition-fast);
}
.mhc-chat-send:hover,
.mhc-chat-send:focus-visible {
  background: var(--color-black);
  color: var(--color-cream);
}
.mhc-chat-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mhc-chat-send svg {
  width: 17px;
  height: 17px;
}

.mhc-chat-disclaimer {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-5) var(--space-4);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--color-ink-muted);
  background: var(--color-white);
  text-align: center;
}
.mhc-chat-disclaimer a {
  color: var(--color-brown);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   18. REVEAL ON SCROLL
   main.js progressively adds .reveal to observed elements, then .is-visible
   once they intersect. Elements never get .reveal without JS running, so
   content is always visible with JS disabled (progressive enhancement).
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   19. UTILITIES / MISC
   ========================================================================== */
main#main {
  overflow-x: clip;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

.text-center { text-align: center; }

/* Simple field styling for any progressively-enhanced form the page
   templates build (contact / quote request), kept generic and reusable. */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.form-field label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-brown);
}
.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  border-color: var(--color-tan);
  box-shadow: 0 0 0 3px var(--overlay-tan-30);
}
.form-field textarea {
  resize: vertical;
  min-height: 8rem;
}

.form-status {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  display: none;
}
.form-status.is-visible {
  display: block;
}
.form-status--success {
  background: var(--overlay-tan-15);
  border: 1px solid var(--color-tan);
  color: var(--color-accent-deep);
}
.form-status--error {
  background: rgba(111, 78, 55, 0.08);
  border: 1px solid var(--color-brown);
  color: var(--color-brown);
}

/* ==========================================================================
   19. CONTACT FORM
   ========================================================================== */
.contact-section {
  padding-top: var(--space-5);
}

.contact-grid {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1.6fr 1fr;
  }
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-tan);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  /* Gold "design box" frame drawn INSET rather than as an outward ring.
     Two outward attempts (outline-offset, then an outward box-shadow) both
     still touched/overflowed the screen edge on a real iPhone even though
     desktop and Android rendered them fine - a real cross-engine viewport-
     math discrepancy this session couldn't reproduce in an automated
     browser to root-cause further. An inset shadow can never paint outside
     this element's own border box on any engine, so it cannot overflow the
     viewport no matter how that math differs - the safe choice after two
     failed outward attempts. */
  box-shadow: var(--shadow-md), inset 0 0 0 5px var(--color-cream), inset 0 0 0 6px var(--color-tan);
}
@media (min-width: 640px) {
  .contact-form {
    padding: var(--space-7);
  }
}

.form-alert {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid #c0392b;
  background: #fbeae8;
  color: #8b2e22;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
}

.form-row {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 560px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-group label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-ink);
}

.form-group input[type='text'],
.form-group input[type='email'],
.form-group input[type='tel'],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-ink);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.form-group select {
  cursor: pointer;
}
.form-group textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.5;
}
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: none;
  border-color: var(--color-tan);
  background: var(--color-white);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-ink-muted);
  opacity: 0.55;
}

.form-group input[type='file'] {
  padding: var(--space-2) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
}

.form-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.form-actions .btn {
  width: 100%;
  text-align: center;
}
@media (min-width: 480px) {
  .form-actions .btn {
    width: auto;
  }
}

.form-fineprint {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
}

/* --- Sidebar --- */
.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sidebar-block {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.sidebar-block h2 {
  font-size: var(--fs-h4);
  margin: 0 0 var(--space-3);
}
.sidebar-block p {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.sidebar-block p:last-child {
  margin-bottom: 0;
}
.sidebar-block a {
  font-weight: 600;
  text-decoration: none;
}
.sidebar-block a:hover,
.sidebar-block a:focus-visible {
  text-decoration: underline;
}

/* First block (direct contact) is the prominent one; the rest are lighter
   so the sidebar isn't a stack of identical solid boxes. */
.sidebar-block:first-child {
  background: var(--color-black);
  color: var(--color-cream);
}
.sidebar-block:first-child h2 {
  color: var(--color-cream);
}
.sidebar-block:first-child a {
  color: var(--color-tan);
}
.sidebar-block:not(:first-child) {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  color: var(--color-ink);
}
.sidebar-block:not(:first-child) h2 {
  color: var(--color-black);
}
.sidebar-block:not(:first-child) a {
  color: var(--color-brown);
}
.sidebar-block .service-areas {
  margin: 0;
  font-size: var(--fs-small);
  color: inherit;
}
.sidebar-block:not(:first-child) .service-areas strong {
  color: var(--color-black);
}
.sidebar-block .reassurance {
  margin: 0;
  font-size: var(--fs-small);
  font-style: italic;
}

/* ==========================================================================
   21. DETAIL / CHECKLIST LISTS
   ========================================================================== */
.detail-list,
.checklist {
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.detail-list li,
.checklist li {
  position: relative;
  padding-left: var(--space-6);
  color: var(--color-ink);
}
.detail-list li::before,
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 16px;
  height: 16px;
  background-color: var(--color-tan);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
@media (min-width: 640px) {
  .checklist--two-col {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-6);
  }
}
.credentials-list {
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .credentials-list {
    grid-template-columns: 1fr 1fr;
  }
}
.credentials-list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--fs-small);
  color: var(--color-ink);
}
.credentials-list li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--color-tan);
}
.fine-print {
  margin-top: var(--space-5);
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
  font-style: italic;
}

/* ==========================================================================
   22. CASE STUDIES
   ========================================================================== */
.section--case-study {
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.case-study-list {
  display: flex;
  flex-direction: column;
  /* No extra gap here - each .case-study already carries its own
     padding-block, and the border-top divider (below) marks the seam
     between entries. Adding a large gap on top of that padding was
     stacking into an oversized gap between projects. */
  gap: 0;
}
.case-study {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
@media (min-width: 900px) {
  .case-study {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .case-study--showpiece {
    grid-template-columns: 1.7fr 1fr;
  }
}
.case-study__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  align-content: start;
}
.case-study__media > .photo-placeholder:only-child,
.case-study__media > .project-photo:only-child {
  grid-column: 1 / -1;
}
.case-study__body {
  min-width: 0;
}
.case-study__body h3 {
  margin-top: var(--space-4);
  font-size: var(--fs-h4);
}
.photo-caption {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
}
.case-study__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.case-study__facts dt {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
  margin-bottom: 2px;
}
.case-study__facts dd {
  margin: 0;
  font-weight: 600;
  color: var(--color-ink);
}
.case-study__scope {
  margin: var(--space-3) 0;
  padding-left: var(--space-5);
  color: var(--color-ink);
}
@media (min-width: 560px) {
  .case-study__scope {
    columns: 2;
    column-gap: var(--space-6);
  }
}
.disclosure-note {
  background: var(--color-cream);
  border-left: 3px solid var(--color-tan);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--color-ink);
  margin: var(--space-4) 0;
}
.disclosure-note strong {
  color: var(--color-brown);
}
.disclosure-footnote {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--color-ink-muted);
}
.form-optional {
  font-weight: 400;
  color: var(--color-ink-muted);
}

/* ==========================================================================
   23. SUB-SERVICE GRID (Structures page)
   ========================================================================== */
.subservice-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
@media (min-width: 640px) {
  .subservice-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.subservice-card {
  padding: var(--space-5);
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}
.subservice-card h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h4);
}
.price-tag {
  display: inline-block;
  margin: 0;
  font-weight: 600;
  color: var(--color-brown);
  font-size: var(--fs-small);
}
.price-note {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-small);
}
.price-note strong {
  color: var(--color-black);
}

/* ==========================================================================
   24. PROJECT STRIP ("more examples") / PROJECT GRID / PROJECT CARDS
   ========================================================================== */
.project-strip,
.project-grid {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
@media (min-width: 640px) {
  .project-strip {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}
@media (min-width: 768px) {
  .project-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.project-strip__item h3,
.project-card__title {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--fs-h4);
}
.project-strip__item p,
.project-card__meta {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
}
.project-card {
  display: flex;
  flex-direction: column;
}
.project-card__body {
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.project-card__summary {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-ink);
}
.project-card__link {
  margin-top: var(--space-2);
  font-weight: 600;
  color: var(--color-black);
}
.project-card__link:hover,
.project-card__link:focus-visible {
  color: var(--color-brown);
}
.tag {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}
.tag--personal {
  background: var(--color-cream);
  color: var(--color-brown);
  border: 1px solid var(--color-tan);
}

/* ==========================================================================
   25. CTA BAND / CALLOUTS
   ========================================================================== */
.cta-band {
  background: var(--color-tan);
  text-align: center;
}
.cta-band .container,
.cta-band__inner {
  max-width: 640px;
}
.cta-band h2 {
  margin: 0 0 var(--space-3);
}
.cta-band p {
  margin: 0 0 var(--space-5);
  color: var(--color-ink);
}

.callout {
  text-align: center;
}
.callout--link p {
  margin: 0;
}
.callout--link a {
  font-weight: 600;
  color: var(--color-brown);
}
.callout--link a:hover,
.callout--link a:focus-visible {
  color: var(--color-black);
}
.callout--quote {
  margin: var(--space-4) 0 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-cream);
  border-left: 3px solid var(--color-tan);
  border-radius: var(--radius-sm);
  font-style: italic;
}
.callout--quote p {
  margin: 0;
}

/* ==========================================================================
   26. HOME PAGE SECTIONS (services grid, headaches, projects teaser, areas)
   ========================================================================== */
.services-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
@media (min-width: 640px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.service-card__title {
  margin: 0;
  font-size: var(--fs-h4);
}
.service-card__price {
  margin: 0;
  color: var(--color-brown);
  font-weight: 600;
  font-size: var(--fs-small);
  text-decoration: none;
}
.service-card__price:hover,
.service-card__price:focus-visible {
  color: var(--color-black);
  text-decoration: underline;
}
.service-card__summary {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
  flex-grow: 1;
}
.service-card__link {
  margin-top: var(--space-2);
  font-weight: 600;
  color: var(--color-black);
}
.service-card__link:hover,
.service-card__link:focus-visible {
  color: var(--color-brown);
}

.headaches-section__grid {
  max-width: 68ch;
}
.headaches-section h2 {
  margin-bottom: var(--space-4);
}

.projects-teaser__grid {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
@media (min-width: 768px) {
  .projects-teaser__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.projects-teaser__cta {
  text-align: center;
  margin-top: var(--space-7);
}

.service-area-section,
.trust-section {
  text-align: center;
}
.service-area-section .service-areas {
  margin-inline: auto;
}
.trust-section .trust-strip {
  justify-content: center;
}
.trust-section .lede {
  margin-inline: auto;
}

/* ==========================================================================
   27. ABOUT PAGE
   ========================================================================== */
.about-hero__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 768px) {
  .about-hero__grid {
    grid-template-columns: 0.85fr 1.15fr;
  }
}
.about-hero__intro h1 {
  margin-top: var(--space-3);
}

.process-handover__grid {
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 768px) {
  .process-handover__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.faq-section .faq-list {
  max-width: 760px;
}

/* ==========================================================================
   19b. CUSTOM HAMMER CURSOR (fine-pointer devices only, added by main.js)
   ========================================================================== */
/* main.js only adds this class on real-mouse (pointer: fine) devices and
   only when motion is allowed, so this rule never hides the cursor on
   touchscreens or under prefers-reduced-motion - there's simply no
   #mhc-cursor / class to trigger it in those cases. */
.has-custom-cursor,
.has-custom-cursor * {
  cursor: none !important;
}
#mhc-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
#mhc-cursor.is-visible {
  opacity: 1;
}
#mhc-cursor svg {
  display: block;
  /* The hammer's head (the cursor's visual "hotspot") sits at the
     element's own origin (0,0), which JS positions exactly at the real
     pointer coordinates - so the icon is offset up/left of that point
     rather than centered on it, matching where a normal arrow cursor's
     tip would be relative to the click point. */
  transform: translate(-4px, -4px);
}

/* ==========================================================================
   20. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .mobile-nav {
    transition: none;
  }
}

/* ==========================================================================
   21. MARQUEE STRIPS (top info ribbon + word bands)
   Markup from mhc_render_marquee() in includes/partials.php; content from
   includes/data-marquee.php. Pure CSS: the item set is rendered twice and
   the track slides translateX(0 -> -50%), so the loop is seamless. The
   duplicate set is aria-hidden. Paused on hover / keyboard focus; no
   animation at all under prefers-reduced-motion (see end of section).

   Header offset: the ribbon sits in normal document flow ABOVE the sticky
   .site-header, so it simply scrolls away and the header then pins at
   top:0 exactly as before - no fixed positioning, no offset maths, nothing
   for the hero / mobile drawer / bottom nav / skip link to compensate for.
   ========================================================================== */
@keyframes mhc-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee {
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: mhc-marquee 45s linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

/* Each copy is at least a full viewport wide so no gap ever shows at the
   seam on very wide screens. */
.marquee__group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-shrink: 0;
  min-width: 100vw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marquee__item,
.marquee__sep {
  flex-shrink: 0;
  white-space: nowrap;
}

/* --- Top info ribbon (black, every page, above the header) --- */
.marquee--ribbon {
  --ribbon-height: 32px;
  height: var(--ribbon-height);
  background: var(--color-black);
  color: var(--color-cream);
  border-bottom: 1px solid var(--color-border-dark);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .marquee--ribbon {
    --ribbon-height: 36px;
    font-size: 0.8125rem;
  }
}

.marquee--ribbon .marquee__track,
.marquee--ribbon .marquee__group {
  height: 100%;
}

.marquee--ribbon .marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-left: var(--space-5);
}
/* Small tan diamond separating each fact from the next */
.marquee--ribbon .marquee__item::after {
  content: '';
  width: 4px;
  height: 4px;
  margin-left: var(--space-5);
  background: var(--color-tan);
  transform: rotate(45deg);
}

.marquee--ribbon .icon {
  width: 14px;
  height: 14px;
  background-color: var(--color-tan);
}

.marquee--ribbon a {
  color: var(--color-cream);
  transition: color var(--transition-fast);
}
.marquee--ribbon a:hover,
.marquee--ribbon a:focus-visible {
  color: var(--color-tan);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.marquee--ribbon a:focus-visible {
  outline: 2px solid var(--color-tan);
  outline-offset: 2px;
}

/* --- Word bands (Home / Projects / Process, directly after the hero) --- */
.marquee--words {
  background: var(--color-white);
  border-top: 2px solid var(--color-black);
  border-bottom: 2px solid var(--color-black);
  padding-block: clamp(0.9rem, 2.2vw, 1.5rem);
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis-weight: none;
  font-size: clamp(2.1rem, 5vw, 3.75rem);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Slower than the ribbon and travelling the opposite way */
.marquee--words .marquee__track {
  animation-duration: 55s;
  animation-direction: reverse;
}

.marquee--words .marquee__item {
  padding-inline: clamp(1rem, 2.5vw, 2rem);
}
.marquee__item--dark { color: var(--color-black); }
.marquee__item--brown { color: var(--color-brown); }

.marquee--words .marquee__sep {
  color: var(--color-tan);
  font-size: 0.5em;
  line-height: 1;
}

/* --- Ribbon icons (CSS mask, same pattern as the icon set in section 8).
       Simple shapes only - the brief bans tool icons. --- */
.icon--pin {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0 1 13 0c0 4.8-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0 1 13 0c0 4.8-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E");
}
.icon--shield {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 2.8v5.4c0 4.4-3 8-7 9.8-4-1.8-7-5.4-7-9.8V5.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 2.8v5.4c0 4.4-3 8-7 9.8-4-1.8-7-5.4-7-9.8V5.8z'/%3E%3C/svg%3E");
}
.icon--check {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.3 12.3l2.5 2.5 5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.3 12.3l2.5 2.5 5-5'/%3E%3C/svg%3E");
}
.icon--tag {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1.4 1.4 0 0 1 0 2l-6.2 6.2a1.4 1.4 0 0 1-2 0z'/%3E%3Ccircle cx='8' cy='8' r='1.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1.4 1.4 0 0 1 0 2l-6.2 6.2a1.4 1.4 0 0 1-2 0z'/%3E%3Ccircle cx='8' cy='8' r='1.4'/%3E%3C/svg%3E");
}
.icon--doc {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 12h6M9 15.5h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 12h6M9 15.5h6'/%3E%3C/svg%3E");
}

/* --- Reduced motion: no movement at all. The duplicate copy is removed
       and the single row becomes a user-controlled horizontal swipe area
       (scrollbar hidden) - still clipped to the strip, so it can never
       cause page-level horizontal scroll. Placed after section 20 so it
       wins over that section's global animation-duration override. --- */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .marquee::-webkit-scrollbar {
    display: none;
  }
  .marquee__track {
    animation: none !important;
    transform: none;
  }
  .marquee__group[aria-hidden="true"] {
    display: none;
  }
  .marquee__group {
    min-width: 0;
    justify-content: flex-start;
  }
}

/* ==========================================================================
   28. REVISION 2 (Oct 2026) - visual direction + new components
   REVISION-2-SPEC.txt section 4. Locked palette only (#000000 #6F4E37
   #C2A27C #F5EBDD #FFFFFF, plus rgba overlays of those). Flatter, ruled
   sections instead of floating cards; square architectural buttons; subtle
   blueprint/measurement texture; Bebas Neue display, Montserrat body,
   Cormorant Garamond only through .accent-serif.
   ========================================================================== */

/* --- 28.1 Typography helpers --- */
.accent-serif {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: 1.25em;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis-weight: none;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  line-height: 1;
}
.eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.18em;
}
/* Short tan rule before eyebrows - a measured, construction-line detail */
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--color-tan);
}
.text-center .eyebrow::before,
.cta-band .eyebrow::before {
  display: none;
}

/* --- 28.2 Section rhythm: cream default, white alt, black bands --- */
.section--alt {
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.section--charcoal {
  background: var(--color-charcoal);
  color: var(--color-cream);
}
.section--charcoal h1, .section--charcoal h2, .section--charcoal h3, .section--charcoal h4 {
  color: var(--color-cream);
}
.section--charcoal p { color: var(--color-on-dark-muted); }
.section--dark .eyebrow,
.section--charcoal .eyebrow {
  color: var(--color-tan);
}
.section--hero {
  border-bottom: 3px solid var(--color-tan);
}

/* Final CTA band: black, ruled in tan (was a flat tan block) */
.cta-band {
  background-color: var(--color-black);
  color: var(--color-cream);
  border-top: 3px solid var(--color-tan);
}
.cta-band h2 {
  color: var(--color-cream);
}
.cta-band p {
  color: var(--color-on-dark-muted);
}
.cta-band .btn--secondary {
  border-color: var(--color-cream);
  color: var(--color-cream);
}
.cta-band .btn--secondary:hover,
.cta-band .btn--secondary:focus-visible {
  background: var(--color-cream);
  border-color: var(--color-cream);
  color: var(--color-black);
}

/* --- 28.3 Subtle construction texture ---
   Faint blueprint grid + a measurement-tape tick row along the top edge.
   background-image only, so it layers onto whatever background colour the
   section already has; no pseudo-elements (those are used elsewhere). */
.section--texture {
  background-image:
    repeating-linear-gradient(90deg, rgba(111, 78, 55, 0.35) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(111, 78, 55, 0.18) 0 1px, transparent 1px 16px),
    linear-gradient(rgba(111, 78, 55, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 78, 55, 0.05) 1px, transparent 1px);
  background-size: 100% 14px, 100% 7px, 64px 64px, 64px 64px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-position: 0 0, 0 0, 0 0, 0 0;
}
.section--dark.section--texture,
.section--hero.section--texture,
.section--charcoal.section--texture,
.cta-band.section--texture,
.site-footer.section--texture {
  background-image:
    repeating-linear-gradient(90deg, rgba(194, 162, 124, 0.35) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(194, 162, 124, 0.16) 0 1px, transparent 1px 16px),
    linear-gradient(rgba(245, 235, 221, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 235, 221, 0.035) 1px, transparent 1px);
}

/* --- 28.4 Buttons: strong, square, architectural --- */
.btn--primary {
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  box-shadow: none;
}
/* Tan primary on black looks right; on tan-free dark bands keep contrast */
.section--dark .btn--primary:hover,
.section--hero .btn--primary:hover,
.section--charcoal .btn--primary:hover,
.cta-band .btn--primary:hover,
.hero .btn--primary:hover,
.section--dark .btn--primary:focus-visible,
.section--hero .btn--primary:focus-visible,
.section--charcoal .btn--primary:focus-visible,
.cta-band .btn--primary:focus-visible,
.hero .btn--primary:focus-visible {
  background: var(--color-cream);
  border-color: var(--color-cream);
  color: var(--color-black);
}
.section--charcoal .btn--secondary {
  border-color: var(--color-cream);
  color: var(--color-cream);
}
/* Text link styled as a CTA ("LEARN ABOUT CUSTOM DECKS ->") */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis-weight: none;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-black);
  border-bottom: 2px solid var(--color-tan);
  padding-bottom: 2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.link-cta::after {
  content: '\2192';
  font-family: var(--font-body);
  font-size: 0.85em;
}
.link-cta:hover,
.link-cta:focus-visible {
  color: var(--color-brown);
  border-color: var(--color-black);
}
.section--dark .link-cta,
.section--hero .link-cta,
.section--charcoal .link-cta,
.cta-band .link-cta {
  color: var(--color-cream);
}

/* --- 28.5 Flatter cards (fewer floating-card looks) --- */
.card,
.service-card,
.project-card,
.subservice-card {
  border-radius: 0;
  box-shadow: none;
}
.service-card:hover,
.service-card:focus-within,
.project-card:hover,
.project-card:focus-within {
  transform: none;
  box-shadow: none;
  border-color: var(--color-black);
}
.service-card {
  border-top: 3px solid var(--color-black);
}
.service-card:hover,
.service-card:focus-within {
  border-top-color: var(--color-tan);
}
.service-card__title,
.project-card__title {
  font-size: var(--fs-h4);
}
.project-card img {
  transition: transform var(--transition-slow);
}
.project-card:hover img {
  transform: scale(1.03);
}
.photo-placeholder,
.project-photo,
.about-hero__photo img,
.lightbox__img {
  border-radius: 0;
}
.hero__eyebrow,
.badge,
.tag {
  border-radius: var(--radius-sm);
}
.tag {
  font-family: var(--font-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contact-form {
  border-radius: 0;
  box-shadow: inset 0 0 0 5px var(--color-cream), inset 0 0 0 6px var(--color-tan);
}
.sidebar-block {
  border-radius: 0;
}
.case-study__facts,
.disclosure-note,
.callout--quote,
.service-areas {
  border-radius: 0;
}

/* --- 28.6 Header + Services dropdown (.nav-dropdown) --- */
.site-header {
  border-bottom: 1px solid var(--color-border);
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-black);
}
.brand__tagline {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 0.625rem;
  margin-top: 3px;
}
.main-nav .nav-dropdown {
  position: relative;
}
.nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) 0;
  color: var(--color-black);
  text-transform: uppercase;
}
.nav-dropdown__chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition-base), margin var(--transition-base);
}
[aria-expanded="true"] > .nav-dropdown__chevron {
  transform: rotate(-135deg);
  margin-top: 3px;
}
@media (min-width: 1024px) {
  .main-nav ul {
    gap: var(--space-5);
  }
  .main-nav .nav-dropdown__toggle::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 2px;
    background: var(--color-tan);
    transition: right var(--transition-base);
  }
  .main-nav .nav-dropdown__toggle:hover,
  .main-nav .nav-dropdown__toggle:focus-visible {
    color: var(--color-brown);
  }
  .main-nav .nav-dropdown__toggle.is-active::after,
  .main-nav .nav-dropdown__toggle:hover::after {
    right: 0;
  }
  .main-nav .nav-dropdown__menu {
    position: absolute;
    top: calc(100% + 14px);
    left: -20px;
    z-index: 10;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 290px;
    padding: var(--space-2) 0;
    background: var(--color-black);
    border-top: 3px solid var(--color-tan);
    box-shadow: var(--shadow-md);
  }
  /* Invisible bridge so the pointer can travel from toggle to menu */
  .main-nav .nav-dropdown__menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -17px;
    height: 14px;
  }
  .main-nav .nav-dropdown.is-open > .nav-dropdown__menu,
  html:not(.js) .main-nav .nav-dropdown:hover > .nav-dropdown__menu,
  html:not(.js) .main-nav .nav-dropdown:focus-within > .nav-dropdown__menu {
    display: flex;
  }
  .main-nav .nav-dropdown__menu li {
    display: block;
  }
  .main-nav .nav-dropdown__menu a {
    display: block;
    padding: 0.7rem 1.25rem;
    color: var(--color-cream);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
    border-left: 3px solid transparent;
  }
  .main-nav .nav-dropdown__menu a::after {
    display: none;
  }
  .main-nav .nav-dropdown__menu a:hover,
  .main-nav .nav-dropdown__menu a:focus-visible,
  .main-nav .nav-dropdown__menu a.is-active {
    color: var(--color-tan);
    background: rgba(245, 235, 221, 0.06);
    border-left-color: var(--color-tan);
  }
  .main-nav .nav-dropdown__menu a:focus-visible {
    outline-offset: -2px;
  }
}

/* --- 28.7 Mobile drawer: scrollable list + expandable Services --- */
.mobile-nav {
  justify-content: flex-start;
  gap: var(--space-6);
  overflow-y: auto;
  padding-top: calc(var(--space-8) + var(--space-2));
  padding-bottom: var(--space-7);
}
.mobile-nav .mobile-nav__list {
  gap: 0;
  border-top: 1px solid var(--color-border-dark);
}
.mobile-nav__list > li {
  border-bottom: 1px solid var(--color-border-dark);
}
.mobile-nav__list > li > a,
.mobile-nav__subtoggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.95rem 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-cream);
  text-align: left;
}
.mobile-nav__subtoggle.is-active,
.mobile-nav__subtoggle[aria-expanded="true"] {
  color: var(--color-tan);
}
.mobile-nav__subtoggle .nav-dropdown__chevron {
  width: 9px;
  height: 9px;
}
.mobile-nav .mobile-nav__sub {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 var(--space-3) var(--space-4);
  border-left: 2px solid var(--color-tan);
  margin-bottom: var(--space-3);
}
.mobile-nav .mobile-nav__sub[hidden] {
  display: none;
}
.mobile-nav .mobile-nav__sub a {
  display: block;
  padding: 0.55rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--color-on-dark-muted);
}
.mobile-nav .mobile-nav__sub a.is-active,
.mobile-nav .mobile-nav__sub a:hover {
  color: var(--color-tan);
}
.mobile-nav__close {
  border-radius: 0;
}
.mobile-nav__phone {
  margin: 0;
  text-align: center;
}
.mobile-nav .mobile-nav__phone a {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: var(--color-tan);
}

/* --- 28.8 Trust strip: four objective signals, ruled --- */
.trust-strip li {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.trust-strip li::before {
  width: 8px;
  height: 8px;
  margin-top: 0.4em;
  border-radius: 0;
  transform: rotate(45deg);
}

/* --- 28.9 Service areas (mhc_render_service_area_list) --- */
.service-areas {
  border-left-width: 3px;
}
.service-areas p {
  margin: 0 0 var(--space-4);
}
.service-areas__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-brown);
  margin: 0 0 var(--space-2) !important;
}
.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.area-list li {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-tan);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-black);
  background: var(--color-cream);
}
.service-area-section .area-list {
  justify-content: center;
}
.hero .area-list li,
.section--dark .area-list li,
.section--charcoal .area-list li,
.sidebar-block:first-child .area-list li {
  background: transparent;
  color: var(--color-cream);
}
.hero .service-areas__label,
.section--dark .service-areas__label,
.sidebar-block:first-child .service-areas__label {
  color: var(--color-tan);
}

/* --- 28.10 Case study: 4-part block (.case-steps, mhc_render_case_study) --- */
.case-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: var(--space-5) 0;
  border-top: 2px solid var(--color-black);
}
@media (min-width: 640px) {
  .case-steps {
    grid-template-columns: 1fr 1fr;
  }
  .case-steps__item:nth-child(odd) {
    border-right: 1px solid var(--color-border);
    padding-right: var(--space-5);
  }
  .case-steps__item:nth-child(even) {
    padding-left: var(--space-5);
  }
}
/* In a narrow column (e.g. a 2-col case-study body) keep it single-column */
.case-study__body .case-steps {
  grid-template-columns: 1fr;
}
.case-study__body .case-steps__item {
  border-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.case-steps__item {
  position: relative;
  padding: var(--space-4) 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
  min-width: 0;
}
.case-steps__num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-tan);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}
.case-steps__label,
.case-steps h2.case-steps__label,
.case-steps h3.case-steps__label,
.case-steps h4.case-steps__label,
.case-steps h5.case-steps__label,
.case-steps h6.case-steps__label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-brown);
}
.case-steps p {
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
}
.case-steps p:last-child {
  margin-bottom: 0;
}
.section--dark .case-steps,
.section--charcoal .case-steps {
  border-top-color: var(--color-tan);
}
.section--dark .case-steps__item,
.section--charcoal .case-steps__item {
  border-color: var(--color-border-dark);
}
.section--dark .case-steps__label,
.section--charcoal .case-steps__label {
  color: var(--color-tan);
}
.section--dark .case-steps p,
.section--charcoal .case-steps p {
  color: var(--color-on-dark-muted);
}

/* --- 28.11 Custom Carpentry secondary strip (.custom-strip, Home) --- */
.custom-strip {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--color-black);
  color: var(--color-cream);
  border-left: 6px solid var(--color-tan);
}
@media (min-width: 768px) {
  .custom-strip {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-6);
  }
}
.custom-strip h2,
.custom-strip h3 {
  margin: 0;
  font-size: var(--fs-h4);
  color: var(--color-cream);
}
.custom-strip p {
  margin: 0;
  color: var(--color-on-dark-muted);
  font-size: var(--fs-small);
}
.custom-strip .btn--secondary,
.custom-strip .link-cta {
  border-color: var(--color-cream);
  color: var(--color-cream);
}
.custom-strip .btn--secondary:hover,
.custom-strip .btn--secondary:focus-visible {
  background: var(--color-cream);
  color: var(--color-black);
}
.custom-strip .link-cta {
  border-color: var(--color-tan);
}

/* --- 28.12 Comparison grid (.compare-grid, e.g. wood vs composite) --- */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: var(--space-6);
  border: 2px solid var(--color-black);
  background: var(--color-white);
}
@media (min-width: 768px) {
  .compare-grid {
    grid-template-columns: 1fr 1fr;
  }
  .compare-grid > * + * {
    border-left: 2px solid var(--color-black);
    border-top: 0 !important;
  }
}
.compare-grid > * {
  padding: var(--space-5);
  min-width: 0;
}
@media (min-width: 640px) {
  .compare-grid > * {
    padding: var(--space-6);
  }
}
.compare-grid > * + * {
  border-top: 2px solid var(--color-black);
}
.compare-grid h3,
.compare-grid h4 {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-tan);
}
.compare-grid p {
  color: var(--color-ink);
}

/* --- 28.13 Planning questions (.question-list) --- */
.question-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}
@media (min-width: 640px) {
  .question-list {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-6);
  }
}
.question-list li {
  position: relative;
  padding: 0.8rem 0 0.8rem 2rem;
  border-bottom: 1px solid var(--color-border);
  font-weight: 500;
  color: var(--color-ink);
}
.question-list li::before {
  content: '?';
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 1.35rem;
  height: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-black);
  color: var(--color-tan);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1;
}
.section--dark .question-list li,
.section--charcoal .question-list li {
  color: var(--color-cream);
  border-color: var(--color-border-dark);
}
.section--dark .question-list li::before,
.section--charcoal .question-list li::before {
  background: var(--color-tan);
  color: var(--color-black);
}

/* --- 28.14 Arrow sequence (.flow-steps, Real Estate) ---
   Markup: <ol class="flow-steps"><li>Step</li>...</ol>. Vertical with down
   arrows on mobile; horizontal with right arrows from 900px. */
.flow-steps {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-6);
  margin: var(--space-6) 0;
  padding: 0;
  list-style: none;
  counter-reset: flow;
}
.flow-steps > li {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: var(--space-4) var(--space-4) var(--space-4) 3.25rem;
  background: var(--color-white);
  border: 2px solid var(--color-black);
  font-weight: 600;
  line-height: 1.4;
  counter-increment: flow;
}
.flow-steps > li::before {
  content: counter(flow, decimal-leading-zero);
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--color-tan);
  line-height: 1;
}
.flow-steps > li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--space-6) + 6px);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-right: 3px solid var(--color-tan);
  border-bottom: 3px solid var(--color-tan);
  transform: rotate(45deg);
}
@media (min-width: 900px) {
  /* 4 x 2 grid (Ben, 2026-10-07): eight boxes in one row were too narrow -
     long words like INTRODUCTION / COMMUNICATION spilled outside the boxes. */
  .flow-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr; /* every box the same height */
    gap: var(--space-5) var(--space-6);
  }
  .flow-steps > li {
    padding: 2.75rem var(--space-4) var(--space-4);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  /* No arrow pointing off the right edge at the end of each row. */
  .flow-steps > li:nth-child(4n)::after {
    display: none;
  }
  .flow-steps > li::before {
    top: var(--space-3);
    transform: none;
  }
  .flow-steps > li:not(:last-child)::after {
    left: auto;
    right: calc(-1 * var(--space-6) + 8px);
    top: 50%;
    bottom: auto;
    margin: -6px 0 0;
    transform: rotate(-45deg);
  }
}
.section--dark .flow-steps > li,
.section--charcoal .flow-steps > li {
  background: transparent;
  border-color: var(--color-tan);
  color: var(--color-cream);
}

/* --- 28.15 FAQ section (.faq-section) --- */
.faq-section .faq-list {
  max-width: 860px;
  border-top: 2px solid var(--color-black);
}
.faq-section h2 + .faq-list,
.faq-section .lede + .faq-list {
  margin-top: var(--space-5);
}
.faq-item summary {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.4;
}
.faq-item summary:hover {
  color: var(--color-brown);
}
.faq-item p {
  line-height: 1.7;
}
.section--dark .faq-list,
.section--charcoal .faq-list {
  border-top-color: var(--color-tan);
}
.section--dark .faq-item,
.section--charcoal .faq-item {
  border-color: var(--color-border-dark);
}
.section--dark .faq-item summary,
.section--charcoal .faq-item summary {
  color: var(--color-cream);
}

/* --- 28.16 One-line disclosure (.footnote) --- */
.footnote {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-tan);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--color-ink-muted);
}
.section--dark .footnote,
.section--hero .footnote,
.section--charcoal .footnote,
.hero .footnote,
.cta-band .footnote {
  color: var(--color-on-dark-muted);
}

/* --- 28.17 Form: required marker --- */
.form-required {
  margin-left: 2px;
  color: var(--color-brown);
  font-weight: 700;
  text-decoration: none;
}
.sidebar-block:first-child .form-required,
.section--dark .form-required {
  color: var(--color-tan);
}
.form-group label,
.form-field label {
  font-family: var(--font-heading);
}

/* --- 28.18 Footer (spec section 5) --- */
.site-footer {
  border-top: 3px solid var(--color-tan);
}
.site-footer__slogan {
  margin: var(--space-3) 0 0;
  color: var(--color-cream);
  font-size: 1.2rem;
}
.site-footer__trust {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-tan);
}
.site-footer__trust span {
  color: var(--color-on-dark-muted);
  margin-inline: 0.35em;
}
.site-footer__col h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  line-height: 1.3;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-dark);
}
.site-footer__col p {
  overflow-wrap: anywhere;
}
.site-footer__privacy {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer__privacy:hover,
.site-footer__privacy:focus-visible {
  color: var(--color-cream);
}
.site-footer__bottom p {
  color: #8A7F74;
}

/* --- 28.19 Ribbon + word bands --- */
.marquee--ribbon {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.marquee--words {
  letter-spacing: 0.04em;
}

/* --- 28.20 Privacy / legal page --- */
.legal-copy {
  max-width: 72ch;
}
.legal-copy h2 {
  font-size: var(--fs-h3);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-black);
}
.legal-copy h2:first-of-type {
  margin-top: var(--space-5);
}
.legal-copy ul {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}
.legal-copy li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-2);
}
.legal-copy li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 7px;
  height: 7px;
  background: var(--color-tan);
  transform: rotate(45deg);
}
.legal-copy a {
  color: var(--color-brown);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-updated {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-on-dark-muted);
}

/* 404 helper links */
.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin: var(--space-5) 0 var(--space-6);
}
.link-list a {
  font-weight: 600;
  color: var(--color-brown);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-list a:hover,
.link-list a:focus-visible {
  color: var(--color-black);
}

/* --- 28.21 Small-screen safety (no horizontal scroll at 360px) --- */
@media (max-width: 479px) {
  .hero-actions .btn,
  .hero__ctas .btn,
  .cta-row .btn,
  .cta-band .btn {
    width: 100%;
  }
  .brand__name {
    font-size: 1.4rem;
  }
}

/* Grid tracks default to min-content, so one wide form control (a long
   <select> option, a file input) could push the whole contact column past
   a 360px viewport. Clamp the tracks and the controls. */
.contact-grid {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}
.contact-grid > *,
.form-row > *,
.form-group {
  min-width: 0;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  max-width: 100%;
}

/* Keep nav labels on one line ("The MH Experience"); tighter gaps until 1440 */
@media (min-width: 1024px) {
  .main-nav a,
  .main-nav .nav-dropdown__toggle {
    white-space: nowrap;
  }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .main-nav ul {
    gap: 1.15rem;
  }
  .site-header__inner {
    gap: var(--space-4);
  }
}
/* The chat launcher (z-index above the drawer) must not sit on top of the
   open mobile menu. */
body.has-mobile-nav-open #mhc-chat-widget {
  display: none;
}

/* Home hero: when the eyebrow / title / subhead / CTAs sit directly inside
   .hero__inner (no column wrapper), stack them in one left-aligned column
   instead of spreading them across the two-column hero grid. */
.hero__inner:has(> .hero__title),
.hero__inner:has(> h1) {
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}
.hero__inner > .hero__eyebrow {
  justify-self: start;
}
.hero__inner > .hero__title,
.hero__inner > h1 {
  max-width: 14ch;
  margin: 0;
}
.hero__inner > .hero__ctas {
  margin-top: var(--space-3);
}

/* Footer: brand block runs across the top, then the four link columns
   (gives the Contact column room for the full email address). */
@media (min-width: 1024px) {
  .site-footer__inner {
    grid-template-columns: 1.3fr 1.2fr 1fr 1.1fr;
    gap: var(--space-6) var(--space-7);
  }
  .site-footer__brand {
    grid-column: 1 / -1;
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border-dark);
  }
}