/* ==========================================================================
   GLOBAL STYLESHEET — inherited layout/component system, carried over from
   an earlier client project and sanitized of that project's identity.
   Sections:
   1. Variables  2. Reset/Base  3. Typography  4. Layout  5. Header
   6. Buttons    7. Hero        8. Trust Bar   9. Services 10. Quote
   11. Why Choose Us  12. Service Area  13. Testimonials  14. Final CTA
   15. Footer    16. Responsive
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
  /* Brand colors — L3's accent color (see the --l3-* system below for the
     full palette). Repointing these two inherited tokens to L3 red means
     every existing button/focus-ring/accent across the whole site (not
     just the sections rebuilt this phase) already reads as L3, not XFM. */
  --color-primary: #C92B2B;
  --color-primary-dark: #A92323;
  --color-black: #0A0A0A;
  --color-white: #FFFFFF;
  --color-surface: #F8F9FA;

  /* Neutrals */
  --color-text: #111111;
  --color-text-muted: #666666;
  --color-text-soft: #9A9A9A;
  --color-border: #E5E5E5;
  --color-border-dark: #2A2A2A;
  --color-gray-dark: #1A1A1A;
  --color-gray-medium: #3A3A3A;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Layout */
  --container-width: 1200px;

  /* Motion */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;

  /* Type */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ==========================================================================
     L3 DESIGN SYSTEM — new tokens for the L3 Hauling & Land Management
     visual identity (architecture + design-system phase). Used explicitly
     by the new Header, Hero, Featured Work and Core Services Preview below;
     not yet applied to pages/sections still pending their own redesign
     pass, so those keep using the --color-* tokens above for now.
     ========================================================================== */
  --l3-bg: #F2EFE9;
  --l3-bg-alt: #E5E0D8;
  --l3-text: #1A1A18;
  --l3-charcoal: #262522;
  --l3-red: #C92B2B;
  --l3-red-hover: #A92323;
  --l3-white: #FFFFFF;
  --l3-border: #D4CEC5;
  --l3-earth: #B9A88F; /* one subtle earth-neutral accent, per spec */

  --l3-font-heading: 'Barlow Condensed', 'Inter', -apple-system, sans-serif;
  --l3-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --l3-container-max: 1320px;
  --l3-space-desktop: 120px;
  --l3-space-tablet: 90px;
  --l3-space-mobile: 72px;

  --l3-radius-btn: 7px;
  --l3-radius-media: 14px;
  --l3-radius-glass: 12px;
  --l3-radius-card: 10px;

  /* Refined per the Motion/Polish pass: ~8px blur (was 14px), a thinner
     low-contrast border, and a touch more opacity to keep text legible
     with less blur behind it. Warm-stone tint — every current glass
     surface (header, Featured Work's tag) sits on a light/warm area; a
     charcoal variant can be added if a glass surface ever sits on a dark
     one. */
  --l3-glass-bg: rgba(245, 243, 239, 0.85);
  --l3-glass-border: 1px solid rgba(255, 255, 255, 0.24);
  --l3-glass-blur: blur(8px);
}

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

html { scroll-behavior: smooth; }

body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }

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

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

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

button { font-family: inherit; cursor: pointer; }

input, textarea, select { font-family: inherit; font-size: 1rem; }

body {
  font-family: var(--font-base);
  color: var(--color-text);
  /* L3's warm off-white canvas, not sterile white. */
  background: var(--l3-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
}

h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

p { color: var(--color-text-muted); }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.section-heading {
  max-width: 640px;
  margin: 0 auto 3rem;
  text-align: center;
}

.section-heading h2 { margin-bottom: 0.9rem; }

.section-heading p { font-size: 1.05rem; }

.text-white { color: var(--color-white); }
.text-muted-light { color: rgba(255,255,255,0.7); }

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 5.5rem 0;
}

.section-tight { padding: 3.5rem 0; }

.grid {
  display: grid;
  gap: 1.75rem;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.bg-surface { background: var(--color-surface); }
.bg-black { background: var(--color-black); }

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--l3-bg);
  border-bottom: 1px solid var(--l3-border);
  transition: background-color 0.35s ease, border-color 0.35s ease,
    backdrop-filter 0.35s ease, transform 0.3s ease;
}

/* Hide-on-scroll-down / return-on-scroll-up (see initHeaderScroll — only
   applied on pages where it doesn't fight the Contact form or a utility
   page, and never for prefers-reduced-motion, which gets `transform: none`
   forced below regardless of what JS does). */
.site-header.is-hidden {
  transform: translateY(-100%);
}

/* Home page only: transparent/overlaid on the Hero image until scrolled,
   then the same warm translucent-blur treatment every page ends up with.
   The header is a normal (non-overlapping) sticky element in document
   flow, so a transparent background alone would just show blank body
   background above the Hero, not the Hero itself — the negative margin
   below pulls the Hero up underneath the header's own height (76px, see
   .navbar .container) so they occupy the same space and the header truly
   floats over the image, as the spec calls for. */
body.home-page .site-header {
  background: transparent;
  border-bottom-color: transparent;
  margin-bottom: -76px;
}

body.home-page .site-header.is-scrolled {
  background: var(--l3-glass-bg);
  -webkit-backdrop-filter: var(--l3-glass-blur);
  backdrop-filter: var(--l3-glass-blur);
  border-bottom-color: var(--l3-border);
}

/* Light-on-dark nav treatment only while the header still floats over the
   Hero image (home page, not yet scrolled). Every other state (interior
   pages, or home once scrolled) uses the dark-on-light default below. */
body.home-page .site-header:not(.is-scrolled) .logo-placeholder-text,
body.home-page .site-header:not(.is-scrolled) .nav-links a,
body.home-page .site-header:not(.is-scrolled) .nav-toggle span {
  color: var(--l3-white);
}
body.home-page .site-header:not(.is-scrolled) .nav-toggle {
  border-color: rgba(255, 255, 255, 0.4);
}

.topbar {
  background: var(--color-black);
  border-bottom: 1px solid var(--color-border-dark);
}

.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  font-size: 0.78rem;
  color: var(--color-text-soft);
  letter-spacing: 0.02em;
}

.topbar-emergency a {
  color: var(--color-white);
  font-weight: 700;
}

.topbar-emergency a span {
  color: var(--color-primary);
  font-weight: 800;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 1.5rem;
}

.logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-link img {
  height: 34px;
  width: auto;
}

/* Real L3 logo (white artwork, l3-logo-white-nav.png — a trimmed, retina-sized
   copy of the approved l3-logo-white.png). The header and the mobile-nav
   overlay are LIGHT surfaces by default, where white artwork would vanish, so
   the same artwork is flattened to solid dark with a CSS filter (no separate
   dark logo file). Only the transparent Home header floating over the dark Hero
   (before scroll) shows the artwork in its native white; the drop-shadow keeps
   it legible where the photo's sky is bright. */
.logo-link .logo-img {
  display: block;
  height: 48px;
  width: auto;
  filter: brightness(0);
  transition: filter 0.35s ease;
}
body.home-page .site-header:not(.is-scrolled) .logo-link .logo-img {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
}

/* Text placeholder standing in for a real logo asset — see the "no logo
   file" note in SANITIZATION-REPORT.md. Replace with a real logo image
   once one exists for this project. .view-quote-header is a separate,
   still-dark internal-only component and keeps its own white text (set
   locally there); this default now targets the new light .site-header. */
.logo-placeholder-text {
  font-family: var(--l3-font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--l3-text);
  white-space: normal;
  max-width: 220px;
  transition: color 0.35s ease;
}

.view-quote-header .logo-placeholder-text { color: var(--l3-white); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  margin: 0 auto;
}

.nav-links a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--l3-text);
  transition: color var(--transition-fast);
  padding: 0.5rem 0;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--l3-red);
}

.nav-cta {
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--l3-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.35s ease;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--l3-text);
  margin: 0 auto;
  transition: background-color 0.35s ease;
}

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn-secondary {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,0.35);
}

.btn-secondary:hover {
  border-color: var(--color-white);
  background: rgba(255,255,255,0.06);
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-block { width: 100%; }
.btn-lg { padding: 1.05rem 2.25rem; font-size: 0.95rem; }

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero {
  background: var(--color-black);
  color: var(--color-white);
  padding: 4.5rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 20%, rgba(196,30,42,0.18), transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(196,30,42,0.10), transparent 40%);
  pointer-events: none;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
  position: relative;
}

.hero-content h1 { color: var(--color-white); }

.hero-content p.hero-lead {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.75);
  max-width: 520px;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}






/* ==========================================================================
   8. TRUST BAR
   ========================================================================== */
.trust-bar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.trust-bar .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 2rem 1.5rem;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0 1.25rem;
  border-left: 1px solid var(--color-border);
}

.trust-item:first-child { border-left: none; padding-left: 0; }

.trust-item svg {
  width: 26px;
  height: 26px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.trust-item span {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* ==========================================================================
   9. SERVICES
   ========================================================================== */
.services { background: var(--color-surface); }

.service-cards {
  grid-template-columns: repeat(4, 1fr);
}

.service-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(10,10,10,0.08);
  border-color: rgba(196,30,42,0.35);
}

.service-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(196,30,42,0.08);
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  color: var(--color-primary);
}

.service-icon svg { width: 24px; height: 24px; }

.service-card h3 { margin-bottom: 0.6rem; }

.service-card p {
  font-size: 0.92rem;
  margin-bottom: 1.1rem;
}

.service-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap var(--transition-fast);
}

.service-link:hover { gap: 0.6rem; }

/* ==========================================================================
   10. FEATURED SOLUTIONS + QUOTE SECTION
   ========================================================================== */
.featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}


.featured-list {
  margin: 1.75rem 0 2.25rem;
}

.featured-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.featured-list li:last-child { border-bottom: none; }

.featured-list svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

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

.quote-panel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  max-width: 760px;
  margin: 0 auto;
  color: var(--color-text);
}


.quote-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.quote-form .full { grid-column: 1 / -1; }

.quote-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--color-text);
}

.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: border-color var(--transition-fast);
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  border-color: var(--color-primary);
  outline: none;
}

.quote-form textarea { resize: vertical; min-height: 90px; }

.quote-disclaimer {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--color-text-soft);
  margin-top: -0.3rem;
}

/* ==========================================================================
   12. SERVICE AREA
   ========================================================================== */
.service-area-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.service-area-map {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background:
    linear-gradient(rgba(10,10,10,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.04) 1px, transparent 1px),
    var(--color-surface);
  background-size: 32px 32px, 32px 32px, cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-soft);
  font-size: 0.85rem;
  text-align: center;
  padding: 2rem;
}

.service-area-map svg {
  width: 40px;
  height: 40px;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}
/* That rule styles the placeholder icon only. Leaflet's own overlay <svg>
   (city markers) must keep its intrinsic size, or the markers collapse. */
.service-area-map .leaflet-pane svg {
  width: auto;
  height: auto;
  margin: 0;
}

/* ==========================================================================
   13. TESTIMONIALS
   ========================================================================== */

.testimonial-cards { grid-template-columns: repeat(3, 1fr); }





/* ==========================================================================
   14. FINAL CTA
   ========================================================================== */
.final-cta {
  background: var(--color-black);
  color: var(--color-white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(196,30,42,0.16), transparent 55%);
}

.final-cta .container { position: relative; }

.final-cta h2 { max-width: 700px; margin: 0 auto 1rem; }

.final-cta p {
  max-width: 560px;
  margin: 0 auto 2.25rem;
  color: rgba(255,255,255,0.7);
}

.final-cta-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-black);
  color: rgba(255,255,255,0.65);
}

.footer-top {
  padding: 4.5rem 0 3rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
}

.footer-brand img { height: 30px; margin-bottom: 1rem; }

/* The footer is a dark surface, so the logo keeps its native white artwork. */
.footer-brand .footer-logo {
  display: block;
  height: 56px;
  width: auto;
  margin-bottom: 1rem;
}

.footer-brand p { font-size: 0.88rem; color: rgba(255,255,255,0.5); max-width: 280px; }

.footer-col h4 {
  color: var(--color-white);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.1rem;
}

.footer-col ul li { margin-bottom: 0.7rem; }

.footer-col a {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  transition: color var(--transition-fast);
}

.footer-col a:hover { color: var(--color-primary); }

.footer-social {
  display: flex;
  gap: 0.65rem;
  margin-top: 1.4rem;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.footer-social a:hover { border-color: var(--color-primary); color: var(--color-primary); }

.footer-social svg { width: 16px; height: 16px; }

.footer-bottom {
  border-top: 1px solid var(--color-border-dark);
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

/* Mobile sticky action bar — structure ready, links functional, no JS needed */
.mobile-action-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--color-black);
  border-top: 1px solid var(--color-border-dark);
}

.mobile-action-bar .container {
  display: flex;
  padding: 0 1rem;
}

.mobile-action-bar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.65rem 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mobile-action-bar a:nth-child(2) { color: var(--color-primary); }

.mobile-action-bar svg { width: 20px; height: 20px; }

@media (max-width: 1024px) {
  .hero .container { grid-template-columns: 1fr; }
  .service-cards { grid-template-columns: repeat(3, 1fr); }
  .featured { grid-template-columns: 1fr; }
  .featured-visual { order: -1; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .trust-bar .container { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0; }
  .trust-item:nth-child(3) { border-left: none; padding-left: 0; }
  .why-cards { grid-template-columns: repeat(2, 1fr); }
  .service-area-grid { grid-template-columns: 1fr; }
  .testimonial-cards { grid-template-columns: 1fr; }
  body { padding-bottom: 58px; }
  .mobile-action-bar { display: block; }
}

@media (max-width: 640px) {
  .section { padding: 3.5rem 0; }
  .service-cards { grid-template-columns: 1fr 1fr; }
  .quote-form { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .final-cta-actions { flex-direction: column; }
  .final-cta-actions .btn { width: 100%; }
  .topbar .container { font-size: 0.68rem; }
}

@media (max-width: 420px) {
  .service-cards { grid-template-columns: 1fr; }
}
/* ==========================================================================
   17. FINAL AUDIT — ACCESSIBILITY / FORM FEEDBACK
   ========================================================================== */
.quote-form [aria-invalid="true"] {
  border-color: var(--color-primary);
}

.quote-form [id$="-error"] {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--color-primary);
}

.quote-form [data-form-status] {
  margin-top: 0.25rem;
  font-size: 0.85rem;
}

/* ZIP service-area toast — compact, temporary, informational only (not a Safety alert). */
.quote-form .zip-toast-anchor {
  position: relative;
}

.quote-form .zip-coverage-toast {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.4rem;
  z-index: 40;
  max-width: 260px;
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #ffffff;
  background: rgba(20, 20, 20, 0.82);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid var(--zip-toast-accent, #9aa0a6);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
  animation: zipToastEnter 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.quote-form .zip-coverage-toast.zip-toast-in-area {
  --zip-toast-accent: #3fbf76;
}

.quote-form .zip-coverage-toast.zip-toast-possibly-in-area {
  --zip-toast-accent: #4a90d9;
}

.quote-form .zip-coverage-toast.zip-toast-outside-preferred-area {
  --zip-toast-accent: #cf9a3f;
}

.quote-form .zip-coverage-toast.zip-toast-unconfirmed {
  --zip-toast-accent: #9aa0a6;
}

.quote-form .zip-coverage-toast strong {
  display: block;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
  color: #ffffff;
}

.quote-form .zip-coverage-toast p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}

.quote-form .zip-coverage-toast-exit {
  animation: zipToastExit 0.26s ease-in forwards !important;
}

@keyframes zipToastEnter {
  from { opacity: 0; transform: translate(14px, -6px); }
  to { opacity: 1; transform: translate(0, 0); }
}

@keyframes zipToastExit {
  from { opacity: 1; transform: translate(0, 0); }
  to { opacity: 0; transform: translate(14px, -6px); }
}

@media (max-width: 640px) {
  .quote-form .zip-coverage-toast {
    max-width: min(78vw, 300px);
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    font-size: 0.74rem;
    line-height: 1.32;
  }

  .quote-form .zip-coverage-toast strong {
    font-size: 0.66rem;
    margin-bottom: 0.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quote-form .zip-coverage-toast,
  .quote-form .zip-coverage-toast-exit {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* Address autocomplete suggestion list — same dark/glass language as the ZIP toast. */
.quote-form .address-suggest-anchor {
  position: relative;
}

.quote-form .address-suggest-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  margin-top: 0.35rem;
  z-index: 45;
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  padding: 0.35rem;
  border-radius: 18px;
  background: rgba(18, 18, 20, 0.68);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.quote-form .address-suggest-list[hidden] {
  display: none;
}

.quote-form .address-suggest-option {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.quote-form .address-suggest-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.quote-form .address-suggest-option.is-active {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 3px 0 0 0 rgba(196, 30, 42, 0.55);
}

.quote-form .address-suggest-primary {
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
}

.quote-form .address-suggest-secondary {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  line-height: 1.3;
}

@media (max-width: 640px) {
  .quote-form .address-suggest-list {
    max-height: 200px;
  }
}

#service-navigation summary {
  cursor: pointer;
}

@media (max-width: 420px) {
  .topbar .container {
    height: auto;
    min-height: 38px;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }

  .topbar .container > span:first-child {
    display: none;
  }
}

/* ==========================================================================
   18. PHASE 5 — HOMEPAGE PHOTOGRAPHY + SELECTED WORK
   Scoped to the homepage so the other three pages retain their presentation.
   ========================================================================== */
.home-page .hero::before { background: none; }
.home-page .hero-content h1 { margin-bottom: 1.25rem; }
.home-page .hero .container { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.home-page .home-project-photo {
  overflow: hidden;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  background: var(--color-black);
}
.home-page .home-project-photo img { width: 100%; height: auto; }
.home-page .home-project-photo figcaption {
  padding: 1rem 1.25rem;
  color: #d4d4d4;
  font-size: 0.8rem;
  border-top: 2px solid var(--color-primary);
}
.home-page .selected-work { position: relative; isolation: isolate; background: var(--color-black); }
.home-page .selected-work-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.home-page .selected-work-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0.23; }
.home-page .selected-work-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.25), #0a0a0a 85%); }
.home-page .selected-work-header { max-width: 740px; margin-bottom: 3rem; }
.home-page .selected-work-header .eyebrow { border-left: 3px solid var(--color-primary); padding-left: 0.85rem; }
.home-page .selected-work-header h2 { color: var(--color-white); font-size: clamp(2rem, 3.8vw, 3.25rem); margin-bottom: 1.5rem; }
.home-page .selected-work-header p { color: #d4d4d4; max-width: 660px; font-size: 1.05rem; }
.home-page .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.home-page .project-card { min-width: 0; display: flex; flex-direction: column; background: #151515; border: 1px solid #383838; border-radius: var(--radius-sm); transition: border-color var(--transition-normal); }
.home-page .project-card-media { aspect-ratio: 16 / 10; position: relative; overflow: hidden; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.home-page .project-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-normal); }
.home-page .project-card-number { position: absolute; top: 1rem; left: 1rem; padding: 0.25rem 0.6rem; background: #0a0a0a; color: white; font-size: 0.75rem; font-weight: 700; border-left: 2px solid var(--color-primary); }
.home-page .project-card-content { padding: 1.5rem; display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.home-page .project-card-category { color: #c5c5c5; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; margin-bottom: 0.75rem; }
.home-page .project-card h3 { color: white; font-size: 1.3rem; line-height: 1.3; margin-bottom: 0.85rem; }
.home-page .project-card p { color: #bdbdbd; font-size: 0.94rem; margin-bottom: 1.25rem; }
.home-page .project-card-link { margin-top: auto; display: inline-flex; align-items: center; gap: 0.65rem; min-height: 44px; color: white; font-size: 0.85rem; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #bdbdbd; }
.home-page .project-card-link span { color: #ed6b74; }
.home-page .project-card:focus-within { border-color: #ed6b74; }
.home-page .selected-work :focus-visible { outline: 2px solid white; outline-offset: 5px; }
.home-page .selected-work-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; border-top: 1px solid #383838; margin-top: 2.5rem; padding-top: 2rem; }
.home-page .selected-work-actions p { color: #bdbdbd; }
.home-page .selected-work-actions > div { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (hover: hover) {
  .home-page .project-card:hover { border-color: #777; }
  .home-page .project-card:hover img { transform: scale(1.035); }
}
@media (max-width: 1100px) {
  .home-page .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .project-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .home-page .project-card:last-child .project-card-media { aspect-ratio: auto; min-height: 280px; }
}
@media (max-width: 1024px) {
  .home-page .hero .container { grid-template-columns: 1fr; }
  .home-page .featured { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 700px) {
  .home-page .project-grid, .home-page .featured { grid-template-columns: 1fr; }
  .home-page .project-card:last-child { grid-column: auto; display: flex; }
  .home-page .project-card:last-child .project-card-media { aspect-ratio: 16 / 10; min-height: 0; }
  .home-page .selected-work-header { margin-bottom: 2rem; }
  .home-page .selected-work-actions > div { width: 100%; }
  .home-page .selected-work-actions .btn { flex: 1; }
}
@media (max-width: 480px) {
  .home-page .service-cards { grid-template-columns: 1fr; }
  .home-page .hero { padding-top: 3rem; }
  .home-page .hero-actions, .home-page .hero-actions .btn { width: 100%; }
  .home-page .btn { white-space: normal; text-align: center; }
  .home-page .selected-work-actions > div { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page *, .home-page *::before, .home-page *::after { transition: none !important; animation: none !important; }
  .home-page .project-card:hover img { transform: none; }
}

/* ========================================
   PHASE 6 — INTERIOR PAGE HERO
   All additions scoped to interior-page; Phase 5 rules remain intact.
======================================== */
.interior-page main { overflow-wrap: break-word; }
.interior-page .interior-hero { background: var(--color-black); color: white; padding: 4.5rem 0; }
.interior-page .interior-hero-layout { display: grid; grid-template-columns: 1fr; align-items: center; gap: 3rem; }
.interior-page .interior-hero-copy { min-width: 0; }
.interior-page .interior-hero h1 { color: white; font-size: clamp(2.25rem,4vw,3.5rem); margin-bottom: 1.5rem; }
.interior-page .interior-hero .eyebrow { color: #eee; border-left: 3px solid var(--color-primary); padding-left: .85rem; }
.interior-page .interior-hero p { color: #c8c8c8; max-width: 600px; margin-bottom: 2rem; font-size: 1.05rem; }
.interior-page .interior-hero-media { min-width: 0; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid #383838; }
.interior-page .interior-hero-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 75% center; }
.interior-page .interior-hero--about { padding-bottom: 0; }
.interior-page .interior-hero--about .interior-hero-layout { align-items: end; }
.interior-page .interior-hero--about .interior-hero-copy { padding-bottom: 4rem; }
.interior-page .interior-hero--about .interior-hero-media { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.interior-page .interior-hero--about img { aspect-ratio: 1 / 1; object-position: 65% center; }
.interior-page .interior-hero--contact { position: relative; isolation: isolate; padding: 6rem 0; }
.interior-page .interior-hero--contact .interior-hero-layout { display: block; }
.interior-page .interior-hero--contact .interior-hero-copy { max-width: 670px; }
.interior-page .interior-hero--contact .interior-hero-media { position: absolute; inset: 0; z-index: -1; border: 0; border-radius: 0; }
.interior-page .interior-hero--contact img { height: 100%; aspect-ratio: auto; object-position: center 55%; }
/* Full-bleed background placeholder (no XFM stand-in image) — the dashed
   "pending real content" label is meant for boxed media, not a full-page
   background layer sitting behind body copy, so it stays hidden here. */
.interior-page .interior-hero--contact .l3-media-placeholder-label { display: none; }
.interior-page .interior-hero--contact .interior-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(10,10,10,.94),rgba(10,10,10,.66) 65%,rgba(10,10,10,.4)); }
.interior-page .interior-section-heading { max-width: 720px; margin-bottom: 2.5rem; }
.interior-page .interior-section-heading h2 { margin-bottom: 1rem; }
.interior-page .btn { white-space: normal; text-align: center; }
.interior-page .final-cta::before { background: none; }
.interior-page :is(#quote,#service-content,#service-directory) { scroll-margin-top: 140px; }
/* ========================================
   SERVICES VISUAL GRID + FULL DIRECTORY
======================================== */
.interior-page .service-discovery { background: #111; }
.interior-page .service-discovery h2 { color: white; }
.interior-page .service-discovery .eyebrow { color: #ed6b74; }
.interior-page .service-discovery p { color: #bdbdbd; }
.interior-page .discovery-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.25rem; }
.interior-page .discovery-card { border: 1px solid #383838; background: #1a1a1a; border-radius: var(--radius-sm); min-width: 0; }
.interior-page .discovery-card > a { display: flex; flex-direction: column; height: 100%; border-radius: inherit; }
.interior-page .discovery-media { overflow: hidden; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.interior-page .discovery-media img { aspect-ratio: 16 / 10; width: 100%; height: auto; object-fit: cover; object-position: 65% center; transition: transform var(--transition-normal); }
.interior-page .discovery-copy { display: flex; flex-direction: column; flex: 1; padding: 1.4rem; }
.interior-page .discovery-copy h3 { color: white; line-height: 1.3; margin-bottom: .75rem; }
.interior-page .discovery-copy p { font-size: .9rem; margin-bottom: 1rem; }
.interior-page .discovery-link { color: white; margin-top: auto; font-size: .82rem; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.interior-page .discovery-link span { color: #ed6b74; }
.interior-page .discovery-card:focus-within { border-color: white; }
.interior-page .discovery-card a:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.interior-page .service-directory-layout { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 3rem; align-items: start; }
.interior-page .service-directory .quote-panel { width: 100%; padding: 2rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.interior-page #browse-title { font-size: 1.6rem; margin-bottom: .75rem; }
.interior-page #service-navigation { margin-top: 1.5rem; }
.interior-page #service-navigation details { border-top: 1px solid var(--color-border); padding: 0; }
.interior-page #service-navigation summary { padding: 1rem 0; }
.interior-page #service-navigation summary .eyebrow { margin: 0; font-size: .72rem; }
.interior-page #service-navigation .featured-list { margin: 0 0 1rem; }
.interior-page #service-navigation li { padding: 0; border-radius: 3px; }
.interior-page #service-navigation a { display: block; width: 100%; padding: .75rem; font-size: .9rem; line-height: 1.5; }
.interior-page #service-content { padding: 2rem 0; min-width: 0; }
.interior-page #service-title { margin-bottom: 1.25rem; }
.interior-page #service-content .section-tight { padding: 2rem 0; }
.interior-page #service-content h3 { margin-bottom: .75rem; }
/* ========================================
   ABOUT PAGE
======================================== */
.interior-page .approach-blocks .why-card { padding: 1.5rem; border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary); border-radius: var(--radius-sm); }
.interior-page .about-editorial { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: center; margin-bottom: 3rem; }
.interior-page .interior-photo { overflow: hidden; background: var(--color-black); border-radius: var(--radius-sm); }
.interior-page .interior-photo img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; }
.interior-page .interior-photo figcaption { padding: 1rem 1.25rem; color: #ccc; font-size: .8rem; border-top: 2px solid var(--color-primary); }
.interior-page .about-editorial-copy h2 { margin-bottom: 1.25rem; }
.interior-page .workflow-steps { counter-reset: none; border-top: 1px solid var(--color-border); padding-top: 2rem; }
/* ========================================
   CONTACT PAGE
======================================== */
.interior-page .contact-options .service-card { border-radius: var(--radius-sm); box-shadow: none; transform: none; }
.interior-page .contact-options a { overflow-wrap: anywhere; }
.interior-page .contact-intake { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap: 3rem; align-items: start; }
.interior-page .contact-intake .section-heading { text-align: left; margin-bottom: 2rem; }
.interior-page .contact-intake .quote-panel { width: 100%; min-width: 0; padding: 2.25rem; border-radius: var(--radius-sm); }
.interior-page .contact-project-notes { border-top: 1px solid #383838; padding-top: 2rem; }
.interior-page .contact-project-notes h3 { color: white; margin-bottom: 1rem; }
.interior-page .contact-project-notes ul { list-style: disc; padding-left: 1.2rem; color: #ccc; }
.interior-page .contact-project-notes li { margin-bottom: .75rem; }
.interior-page .contact-project-notes p { color: #bdbdbd; margin: 1.5rem 0; }
.interior-page #contact-form > div { min-width: 0; }
.interior-page #contact-form :is(input,select,textarea) { min-width: 0; max-width: 100%; min-height: 48px; font-size: 1rem; }
.interior-page #contact-form textarea { min-height: 160px; }
.interior-page #contact-form :is(input,select,textarea):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.interior-page #contact-form [aria-invalid="true"] { background: #fff4f4; }
.interior-page #contact-form [data-form-status] { border-left: 3px solid var(--color-primary); padding-left: 1rem; }
.interior-page #contact-form [data-form-status]:empty { display: none; }
.interior-page #contact-form button:disabled { background: #555; border-color: #555; cursor: not-allowed; }
.interior-page .service-area-map { border-radius: var(--radius-sm); border-left: 3px solid var(--color-primary); color: var(--color-text-muted); }
.interior-page .service-area-map p { max-width: 260px; }
/* ========================================
   INTERIOR RESPONSIVE / REDUCED MOTION
======================================== */
@media (hover: hover) {
  .interior-page .discovery-card:hover { border-color: #888; }
  .interior-page .discovery-card:hover img { transform: scale(1.035); }
  .interior-page #service-navigation a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 1100px) {
  .interior-page .discovery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .interior-page .interior-hero-layout { gap: 2rem; }
  .interior-page .contact-intake { grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr); gap: 2rem; }
  .interior-page .approach-blocks { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 880px) {
  .interior-page .service-directory-layout, .interior-page .contact-intake { grid-template-columns: 1fr; }
  .interior-page .contact-intake-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
  .interior-page .contact-project-notes { border: 0; padding-top: 0; }
  .interior-page .about-editorial { gap: 2rem; }
}
@media (max-width: 700px) {
  .interior-page .interior-hero { padding: 3rem 0; }
  .interior-page .interior-hero-layout, .interior-page .about-editorial, .interior-page .contact-intake-intro { grid-template-columns: 1fr; }
  .interior-page .interior-hero--about .interior-hero-copy { padding-bottom: 0; }
  .interior-page .interior-hero--about img { aspect-ratio: 4 / 3; }
  .interior-page .interior-hero--contact { padding: 4rem 0; }
  .interior-page .interior-hero--contact .interior-hero-media::after { background: rgba(10,10,10,.8); }
  .interior-page .contact-intake .quote-panel { padding: 1.5rem; }
  .interior-page .contact-intake .section-heading { margin: 0; }
}
@media (max-width: 480px) {
  .interior-page .discovery-grid, .interior-page .approach-blocks { grid-template-columns: 1fr; }
  .interior-page .hero-actions, .interior-page .hero-actions .btn { width: 100%; }
  .interior-page .service-directory .quote-panel { padding: 1.25rem; }
  .interior-page .contact-intake .quote-panel { padding: 1.25rem; }
  .interior-page .footer-top { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .interior-page *, .interior-page *::before, .interior-page *::after { animation: none !important; transition: none !important; }
  .interior-page .discovery-card:hover img { transform: none; }
}

/* ========================================
   PHASE 7 — FULL-BACKGROUND HOMEPAGE HERO
======================================== */
.home-page .hero.hero-background::before {
  background: linear-gradient(90deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.82) 36%,rgba(0,0,0,.46) 68%,rgba(0,0,0,.25) 100%);
}
.home-page .hero.hero-background .container { display: block; }
.home-page .hero-background .hero-content { max-width: 670px; }
.home-page .hero-background .eyebrow { color: #eee; border-left: 3px solid var(--color-primary); padding-left: .85rem; }
.home-page .hero-background .hero-lead { max-width: 570px; color: #ddd; }
.home-page .hero-background :focus-visible { outline-color: white; outline-offset: 5px; }
/* ========================================
   CONTACT-ONLY MAP
======================================== */
.contact-page .contact-map-section { background: #111; color: #eee; }
.contact-page .map-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.contact-page .map-section-heading h2 { color: white; }
.contact-page .map-section-heading .eyebrow { color: #ed6b74; }
.contact-page .map-section-heading > p { max-width: 390px; color: #bdbdbd; }
.contact-page .map-shell { border: 1px solid #383838; border-radius: var(--radius-sm); overflow: hidden; }
.contact-page .map-info { display: grid; grid-template-columns: 1fr 1.3fr auto; align-items: center; gap: 2rem; padding: 1.75rem; background: #1a1a1a; border-top: 3px solid var(--color-primary); }
.contact-page .map-info h3 { color: white; font-size: 1.2rem; }
.contact-page .map-info p { color: #ccc; font-size: .95rem; }
.contact-page .map-stage { padding: 1.25rem; min-width: 0; }
.contact-page .map-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.contact-page .map-toolbar [hidden] { display: none; }
.contact-page .map-toolbar button:disabled { opacity: .65; cursor: wait; }
.contact-page #service-area-map {
  width: 100%; height: 520px; aspect-ratio: auto; border: 1px solid #444; border-radius: 3px;
  background: #222; color: #ddd; position: relative; z-index: 0;
}
.contact-page #service-area-map > p { color: #ccc; max-width: 450px; }
.contact-page #service-area-map.map-ready { display: block; padding: 0; text-align: left; }
/* Filter only imagery, keeping attribution and controls legible and unfiltered. */
.contact-page .service-map-tiles { filter: grayscale(1) invert(1) brightness(.8) contrast(.9); }
.contact-page #service-area-map .leaflet-control-zoom a { background: #202020; color: white; width: 44px; height: 44px; line-height: 44px; }
.contact-page #service-area-map .leaflet-control-zoom a:hover { background: #383838; }
.contact-page #service-area-map .leaflet-control-attribution { background: #fff; color: #222; font-size: 12px; padding: 3px 6px; }
.contact-page #service-area-map .leaflet-control-attribution a { color: #00558a; text-decoration: underline; }
/* City-level reference labels (Bastrop home base, Austin served market). */
.contact-page #service-area-map .service-map-label { font: 600 12px/1.2 var(--l3-font-body, sans-serif); color: #111; padding: 3px 7px; }
.contact-page #map-status { color: #eee; margin-top: 1rem; min-height: 1.6em; }
.contact-page #map-help { color: #bdbdbd; font-size: .85rem; margin-top: .75rem; }
.contact-page .contact-map-section :focus-visible { outline-color: #ff8790; outline-offset: 3px; }
/* ========================================
   SHARED INTERACTION / NARROW-SCREEN POLISH
======================================== */
@media (max-width: 880px) {
  .nav-links.is-open { display: flex; flex-direction: column; width: 100%; max-height: calc(100vh - 114px); max-height: calc(100dvh - 114px); overflow-y: auto; overscroll-behavior: contain; }
  .contact-page .map-section-heading { flex-direction: column; align-items: flex-start; }
  .contact-page .map-section-heading > p { max-width: 600px; }
  .contact-page .map-info { grid-template-columns: 1fr; gap: 1rem; }
  .contact-page .map-info .btn { justify-self: start; }
}
@media (max-width: 640px) {
  .home-page .hero.hero-background { min-height: 620px; padding: 4rem 0; background-position: 62% center; }
  .home-page .hero.hero-background::before { background: linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.68)); }
  .home-page .hero-background h1 { font-size: clamp(2.15rem,8.5vw,2.9rem); }
  .home-page .hero-background .hero-actions { flex-direction: column; align-items: stretch; }
  .contact-page #service-area-map { height: 390px; }
  .contact-page .map-stage { padding: .75rem; }
  .contact-page .map-info { padding: 1.25rem; }
}
@media (max-height: 620px) and (min-width: 641px) {
  .home-page .hero.hero-background { min-height: 0; padding: 3rem 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }

/* Contrast refinements without changing the navigation or button architecture. */
.nav-links a.active, .nav-links a:hover { color: #ef7d86; }
.footer-bottom { color: rgba(255,255,255,.65); }
.quote-disclaimer { color: var(--color-text-muted); }

/* Production accessibility and small-screen reliability */
[hidden], .form-honeypot { display: none !important; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 1000; padding: .8rem 1rem; background: white; color: #111; transform: translateY(-180%); font-weight: 700; }
.skip-link:focus { transform: none; }
.footer-col .footer-heading { color: white; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1.1rem; }
.utility-message { min-height: 55vh; }
.utility-message .interior-hero-copy { max-width: 760px; }
.quote-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
.quote-form > div { min-width: 0; }
.quote-form :is(input,select,textarea) { min-width: 0; max-width: 100%; }
.quote-form :is(input,select,textarea):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.quote-form [data-form-status]:empty { display: none; }
.footer-col a:hover, .footer-social a:hover { color: #ef7d86; }
.mobile-action-bar a:nth-child(2) { color: #ef7d86; }
#quote, #main-content { scroll-margin-top: 130px; }
.contact-page .map-toolbar:has(> [hidden]:first-child):has(> [hidden]:last-child) { margin-bottom: 0; }
.contact-page #service-area-map .leaflet-control-attribution svg { width: 1em; height: 1em; margin: 0; color: inherit; }
.nav-toggle { width: 44px; height: 44px; }
@media (max-width: 640px) { .quote-form { grid-template-columns: 1fr; } }
@media (max-width: 880px) {
 body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
 .mobile-action-bar { padding-bottom: env(safe-area-inset-bottom); }
 .mobile-action-bar a { min-height: 58px; justify-content: center; overflow-wrap: anywhere; text-align: center; }
}
@media (max-width: 480px) {
 .nav-cta { display: none; }
 .home-page .quote-panel { margin-inline: 0; padding: 1.5rem; }
 .home-page .trust-item { padding-right: 0; gap: .5rem; }
 .home-page .trust-item span { font-size: .78rem; }
 .home-page .why-cards { grid-template-columns: 1fr; }
 .footer-col a { overflow-wrap: anywhere; }
 .topbar .container > span:first-child { display: inline; }
 .topbar-emergency { display: none; }
}

/* ==========================================================================
   Phase 8 — Homepage Simplification
   ========================================================================== */

/* 6-card service grid: 3 columns × 2 rows on home page (global default is 4 cols) */
.home-page .service-cards { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .home-page .service-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .home-page .service-cards { grid-template-columns: 1fr; } }

/* "View All Services" CTA below the service grid */
.services-section-cta { text-align: center; margin-top: 2.5rem; }

/* Testimonial card */
.testimonial-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.testimonial-stars { color: #E8A020; font-size: 1.15rem; letter-spacing: 0.08em; line-height: 1; }
.testimonial-text { font-size: 0.95rem; line-height: 1.7; color: var(--color-text); font-style: italic; flex: 1; margin: 0; }
.testimonial-footer { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; margin-top: 0.25rem; }
.testimonial-author { font-weight: 700; font-size: 0.88rem; color: var(--color-text); margin: 0; }
.testimonial-demo-label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 0.15rem 0.45rem;
}
.reviews-disclaimer { text-align: center; font-size: 0.8rem; color: var(--color-text-soft); margin-top: 2rem; max-width: 560px; margin-inline: auto; }

/* Scroll margin override: topbar removed on home page saves ~38px */
.home-page #quote,
.home-page #main-content { scroll-margin-top: 90px; }

/* ==========================================================================
   Phase 9 — Full-Screen Mobile Navigation Overlay
   ========================================================================== */

/* Body scroll lock when overlay is open */
body.nav-open { overflow: hidden; }

/* Hide desktop nav CTA at hamburger breakpoint — overlay supplies the CTA */
@media (max-width: 880px) {
  .nav-cta { display: none; }
  /* Prevent the old dropdown from appearing — overlay replaces it */
  .nav-links.is-open { display: none !important; }
}

/* ---------- Overlay container ---------- */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;                    /* above sticky header (100) and mobile bar (200) */
  background: var(--l3-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Invisible by default — JS adds .is-open to reveal */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.mobile-nav-overlay.is-open {
  visibility: visible;
  opacity: 1;
}

/* Never render on desktop */
@media (min-width: 881px) {
  .mobile-nav-overlay { display: none !important; }
}

/* ---------- Inner layout ---------- */
.mobile-nav-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0 1.5rem;
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

/* ---------- Header row: logo + close button ---------- */
.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  border-bottom: 1px solid var(--l3-border);
  flex-shrink: 0;
}

.mobile-nav-header .logo-link img {
  height: 40px;
  width: auto;
  max-width: 160px;
}

/* ---------- Close (×) button ---------- */
.mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: transparent;
  border: 1px solid var(--l3-border);
  border-radius: 6px;
  color: var(--l3-text);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.mobile-nav-close:hover {
  border-color: var(--l3-red);
  background: rgba(201, 43, 43, 0.08);
}

.mobile-nav-close svg { width: 20px; height: 20px; }

/* ---------- Navigation links ---------- */
.mobile-nav-links {
  flex: 1;
  padding: 1.5rem 0 2rem;
}

.mobile-nav-links ul {
  display: flex;
  flex-direction: column;
}

.mobile-nav-links li {
  border-bottom: 1px solid var(--l3-border);
}

.mobile-nav-links a {
  display: flex;
  align-items: center;
  min-height: 68px;
  font-family: var(--l3-font-heading);
  font-size: clamp(1.5rem, 6vw, 1.9rem);
  font-weight: 600;
  color: var(--l3-text);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  padding: 0.35rem 0;
  transition: color 0.18s ease, padding-left 0.18s ease;
}

.mobile-nav-links a:hover { color: var(--l3-red); padding-left: 0.4rem; }
.mobile-nav-links a.active,
.mobile-nav-links a[aria-current="page"] { color: var(--l3-red); }

/* ---------- CTA button row ---------- */
.mobile-nav-cta {
  padding: 2rem 0 0;
  border-top: 1px solid var(--l3-border);
  margin-top: auto;
}

.mobile-nav-cta .btn {
  font-size: 1rem;
  padding: 1.1rem 2rem;
  border-radius: 6px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-overlay { transition: none; }
}

/* ==========================================================================
   Phase 10 — Our Work section refinements
   (project cards now show image + project name only, no description or links)
   ========================================================================== */

/* Tighten card content area: just number badge + h3 name, nothing below */
.home-page .project-card-content {
  padding: 1rem 1.25rem 1.25rem;
  flex: 0 0 auto;           /* don't stretch — let the image define card height */
}

/* Remove bottom margin from h3 since nothing follows it */
.home-page .project-card h3 {
  margin-bottom: 0;
  font-size: 1.15rem;
}

/* Header: no sub-paragraph in "Our Work" — tighten bottom margin */
.home-page .selected-work-header {
  margin-bottom: 2.5rem;
}

/* Mobile: stack cards cleanly with full-width images */
@media (max-width: 640px) {
  .home-page .project-card-content {
    padding: 0.85rem 1rem 1rem;
  }
}

/* V11 — shared header and service explorer */
#quote, #main-content, .home-page #quote, .home-page #main-content,
.interior-page :is(#quote, #service-content, #service-directory), .service-item {
  scroll-margin-top: 96px;
}
.footer-top { padding-inline: 1.5rem; }
.footer-bottom { padding-inline: 1.5rem; }
.form-unavailable { padding: 1rem; background: #f8f9fa; border-left: 3px solid var(--color-primary); }
.form-unavailable a { text-decoration: underline; overflow-wrap: anywhere; }
.quote-form button:disabled { background: #555; border-color: #555; cursor: not-allowed; }
.services-page:not(.services-enhanced) .service-directory-layout { grid-template-columns: 1fr; }
.services-page:not(.services-enhanced) #service-content { display: none; }
.interior-page #service-navigation .service-group { margin: 0; border-top: 1px solid var(--color-border); }
.interior-page #service-navigation .service-group > summary { padding: 1rem 0; font-size: .8rem; font-weight: 700; letter-spacing: .035em; }
.interior-page #service-navigation .service-choice { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: .8rem; border-radius: 4px; }
.interior-page #service-navigation .service-choice:hover { background: #f2f2f2; text-decoration: none; }
.interior-page #service-navigation .service-choice[aria-current] { background: #fbecef; color: #9e1721; font-weight: 700; box-shadow: inset 3px 0 #c41e2a; }
.service-choice > span { flex-shrink: 0; font-size: 1.2rem; }
.service-choice[aria-expanded="true"] > span { transform: rotate(45deg); }
.service-detail { min-width: 0; padding: 1rem 0; }
.service-detail h2 { margin-bottom: 1.25rem; overflow-wrap: anywhere; }
.service-detail h3 { margin: 1.75rem 0 .75rem; }
.service-detail .service-quote { margin-top: 1.75rem; }
.interior-page #service-navigation .service-detail { padding: 1.25rem .8rem 1.75rem; }
.interior-page #service-navigation .service-detail h2 { font-size: 1.5rem; }
.interior-page #service-navigation .service-detail .eyebrow { font-size: .7rem; }
.interior-page #service-navigation a.service-quote { display: inline-flex; width: auto; padding: .85rem 1.25rem; color: white; }
@media (min-width: 881px) {
  .services-enhanced .service-directory-layout { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
  .services-enhanced #service-content { position: sticky; top: 96px; }
  .services-enhanced .service-choice > span { display: none; }
}
@media (max-width: 880px) {
  .services-enhanced #service-content { display: none; }
  .services-enhanced .service-directory-layout { gap: 0; }
  .service-detail .service-quote { width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
  .service-choice > span { transition: none; }
}

/* V13 — framed service directory, preserving the V11 interactions. */
.services-page .service-directory .quote-panel {
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
}
.services-page .service-directory #browse-title { padding: 1.5rem 1.25rem 0; }
.services-page .service-directory #browse-title + p { padding: 0 1.25rem; font-size: .9375rem; }
.services-page #service-navigation { margin-top: 1.5rem; }
.services-page #service-navigation .service-group > summary {
  padding: 1rem 1.25rem;
  background: var(--color-surface);
  font-size: .75rem;
  line-height: 1.5;
  color: #555;
  letter-spacing: .035em;
}
.services-page #service-navigation .service-item + .service-item { border-top: 1px solid var(--color-border); }
.services-page #service-navigation .service-choice {
  padding: .85rem 1.25rem;
  border-radius: 0;
  font-size: .9375rem;
  line-height: 1.5;
}
.services-page #service-navigation .service-choice > span {
  display: block;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-right: .2rem;
  font-size: 0;
  transition: transform .2s ease;
}
.services-page #service-navigation .service-choice[aria-expanded="true"] > span { transform: rotate(225deg); }
.services-page #service-navigation .service-detail {
  background: var(--color-surface);
  padding: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.services-page #service-navigation .service-detail p { font-size: .9375rem; }
@media (min-width: 881px) {
  .services-page.services-enhanced .service-directory-layout { grid-template-columns: minmax(280px,320px) minmax(0,1fr); gap: 2.5rem; }
  .services-page.services-enhanced #service-content {
    padding: 2rem;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    min-height: 300px;
  }
  .services-page #service-content .service-detail { padding: 0; }
  .services-page #service-content h2 { font-size: 1.65rem; line-height: 1.25; }
  .services-page #service-content h3 { font-size: 1rem; }
  .services-page #service-content p:not(.eyebrow) { font-size: .9375rem; line-height: 1.65; }
  .services-page #service-navigation .service-choice > span,
  .services-page #service-navigation .service-choice[aria-expanded="true"] > span { transform: rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .services-page #service-navigation .service-choice > span { transition: none; }
}

/* ── Footer meta blocks (hours / license) ───────────────────────────────── */
.footer-meta {
  margin-top: 0.75rem;
  line-height: 1.4;
}
.footer-meta-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted, #9ca3af);
  margin: 0 0 0.1rem;
}
.footer-meta-value {
  font-size: 0.875rem;
  color: var(--color-footer-text, #d1d5db);
  margin: 0;
}

/* ── Sample number badge ─────────────────────────────────────────────────── */
.sample-badge {
  font-size: 0.7rem;
  color: var(--color-muted, #9ca3af);
  font-style: italic;
  white-space: nowrap;
}

/* ── Phone link in footer "Contact Us" column ───────────────────────────── */
.footer-phone-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  flex-wrap: wrap;
  color: inherit;
  text-decoration: none;
}
.footer-phone-link:hover {
  text-decoration: underline;
}

/* ── Phone link in contact options card — same style as the email link ──── */
.contact-phone-link {
  color: inherit;
  text-decoration: none;
}
.contact-phone-link:hover {
  text-decoration: underline;
}

/* Smart Quote V2 — scoped to the existing quote forms. */
.quote-form .smart-quote-step { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; min-width: 0; }
.quote-form .smart-quote-step[hidden], .quote-form .smart-quote-actions button[hidden] { display: none !important; }
.quote-form .smart-quote-step h3 { grid-column: 1 / -1; margin: 0 0 .5rem; color: #17212b; }
.quote-form .smart-quote-step h3:focus-visible { outline: 2px solid #c41e2a; outline-offset: 5px; }
.quote-form .smart-quote-progress { color: #9e1721; font-weight: 700; margin: 0 0 .5rem; }
.quote-form .smart-quote-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .75rem; padding: 1rem 0; border-top: 1px solid rgba(0,0,0,0.1); margin-top: 1.5rem; }
.quote-form .smart-quote-actions .btn { min-height: 48px; }
.quote-form .smart-quote-actions .btn-secondary { background: rgba(196,30,42,0.08); border-color: #c41e2a; color: #c41e2a; font-weight: 600; }
.quote-form .smart-quote-actions .btn-secondary:hover { background: rgba(196,30,42,0.15); border-color: #c41e2a; }
.quote-form .smart-quote-note { grid-column: 1 / -1; color: #525252; font-size: .875rem; }
.quote-form .smart-quote-summary { grid-column: 1 / -1; display: block; margin: 0; }
.quote-form .smart-quote-summary dl { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr); gap: .6rem 1rem; margin: 0; }
.quote-form .smart-quote-summary dt { font-weight: 700; color: #17212b; }
.quote-form .smart-quote-summary dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #333; }
.quote-form .smart-quote-edit-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; background: none; border: none; color: #c41e2a; text-decoration: underline; cursor: pointer; padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 500; }
.quote-form .smart-quote-edit-btn:hover { color: #9e1721; }
.quote-form .smart-quote-edit-btn:focus-visible { outline: 2px solid #c41e2a; outline-offset: 2px; }
.quote-form .smart-quote-summary-section { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #e5e5e5; }
.quote-form .smart-quote-summary-section:last-child { border-bottom: none; }
.quote-form .smart-quote-summary-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.quote-form .smart-quote-summary-header h4 { margin: 0; color: #17212b; font-size: 1rem; }

/* Step 1 hierarchy grouping — reuses the step's own 2-column grid internally so
   City/ZIP and Preferred day/time keep pairing exactly as before; only a compact
   legend and light section spacing are added. */
.quote-form .quote-section-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  margin-top: 0.85rem;
  padding: 0;
  padding-top: 0.75rem;
  border: 0;
  border-top: 1px solid var(--color-border);
  min-width: 0;
}

.quote-form .quote-section-group legend {
  grid-column: 1 / -1;
  padding: 0;
  margin: 0 0 0.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* City/ZIP quiet state — once both hold a valid value, ease off the visual weight
   without ever disabling or hiding the fields. Focus always restores full strength. */
.quote-form .address-field-wrap label,
.quote-form .address-field-wrap input {
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, font-weight 0.15s ease;
}

.quote-form .address-field-wrap.is-confirmed label {
  font-weight: 500;
  color: var(--color-text-muted);
}

.quote-form .address-field-wrap.is-confirmed input {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.quote-form .address-field-wrap.is-confirmed input:focus {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-primary);
}

@media (max-width: 560px) {
  .quote-form .smart-quote-step { grid-template-columns: minmax(0, 1fr); }
  .quote-form .quote-section-group { grid-template-columns: minmax(0, 1fr); }

  .quote-form .smart-quote-summary dd { margin-bottom: .75rem; }
  .quote-form .smart-quote-actions { justify-content: stretch; }
  .quote-form .smart-quote-actions .btn { flex: 1; }
}

/* Autosave/Resume prompt — same dark/glass language as the ZIP toast and
   address suggestion list. Inline within Step 1, not a modal, not fixed. */
.quote-form .quote-resume-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-bottom: 0.35rem;
  padding: 0.8rem 1.1rem;
  border-radius: 14px;
  color: #ffffff;
  background: rgba(20, 20, 20, 0.82);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.quote-form .quote-resume-banner p {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #ffffff;
}

.quote-form .quote-resume-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .quote-form .quote-resume-banner { padding: 0.75rem 0.9rem; }
  .quote-form .quote-resume-actions { width: 100%; }
  .quote-form .quote-resume-actions .btn { flex: 1; }
}

/* Expanded intake and direct form entry. */
.quote-form .quote-question-group { margin:0; padding:0; border:0; min-width:0; display:grid; gap:1rem; }
.quote-form .quote-question-group[hidden] { display:none !important; }
.quote-form .quote-question-group legend { font-weight:700; color:#17212b; margin-bottom:1rem; font-size:1rem; }
.quote-form .quote-question-group select { width:100%; }

/* Multi-select conditional question (e.g. "What needs to be cleared?") —
   touch-friendly checkbox rows instead of a native multi-select listbox. */
.quote-form .quote-checkbox-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.quote-form .quote-checkbox-fieldset legend { font-weight: 700; color: #17212b; margin-bottom: 0.5rem; font-size: 0.9rem; padding: 0; }
.quote-form .quote-checkbox-fieldset:disabled .quote-checkbox-option { opacity: 0.5; cursor: not-allowed; }
.quote-form .quote-checkbox-list { display: grid; gap: 0.5rem; }
.quote-form .quote-checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 500;
  transition: border-color var(--transition-fast);
}
.quote-form .quote-checkbox-option:hover { border-color: var(--color-primary); }
.quote-form .quote-checkbox-option input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  cursor: pointer;
}
#quote:focus { outline:none; }
#quote:focus-visible { outline:2px solid #c41e2a; outline-offset:5px; }
.quote-form .smart-quote-step h3 { scroll-margin-top:110px; }

/* Safety Screening */
.quote-form .quote-safety-screening {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: grid;
  gap: 0.75rem;
}

.quote-form .quote-safety-screening legend {
  font-weight: 700;
  color: #17212b;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.quote-form .quote-safety-screening input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
}

.quote-form .quote-safety-screening label {
  cursor: pointer;
  user-select: none;
}

/* Safety Screening Wrapper — positioning context for notices */
.safety-screening-wrapper {
  position: relative;
}

/* Safety Notice Container — stays in normal document flow so it scrolls
   naturally with the Smart Quote instead of floating over the viewport. */
.safety-screening-wrapper .safety-notice-container {
  position: static;
  width: 100%;
  pointer-events: auto;
  margin-bottom: 0.75rem;
}

/* Frosted glass temporary Safety Notice card */
.quote-form .quote-safety-notice {
  padding: 1rem 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 3px solid #c41e2a;
  border-radius: 14px;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #ffffff;
  
  /* Frosted glass effect */
  background: rgba(20, 20, 20, 0.58);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  
  /* Modern shadow */
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  
  pointer-events: auto;
  animation: slideInSafetyCardInline 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.quote-form .quote-safety-notice:not([hidden]) {
  display: block;
}

.quote-form .quote-safety-notice.level1 {
  border-left: 3px solid #c41e2a;
}

.quote-form .quote-safety-notice.level2 {
  border-left: 3px solid #e63946;
  background: rgba(28, 20, 20, 0.62);
}

.quote-form .quote-safety-notice strong {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: #ffffff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.625rem;
}

.quote-form .quote-safety-notice strong::before {
  content: '⚠';
  font-size: 1rem;
  flex-shrink: 0;
}

.quote-form .quote-safety-notice p {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
}

/* Compact persistent safety status */
.compact-safety-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 2px solid #c41e2a;
  border-radius: 8px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 0.75rem;
  animation: fadeInCompact 0.3s ease forwards;
}

.compact-safety-status.level2 {
  border-left: 2px solid #e63946;
}

.compact-safety-status .safety-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.compact-safety-status .safety-text {
  font-weight: 500;
}

/* Animations */
@keyframes fadeInCompact {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Inline animation: slide in from bottom */
@keyframes slideInSafetyCardInline {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .quote-form .quote-safety-notice,
  .compact-safety-status {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* Step 2 Optional Fields Toast */
.step2-optional-toast {
  position: relative;
  margin: 1rem 0;
  background: #1a1a1a;
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  border-radius: 0.375rem;
  border-left: 3px solid #c41e2a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: 0.875rem;
  line-height: 1.4;
  animation: step2ToastEnter 0.25s ease-out forwards;
  pointer-events: none;
}

@keyframes step2ToastEnter {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.step2-optional-toast-exit {
  animation: step2ToastExit 0.25s ease-in forwards !important;
}

@keyframes step2ToastExit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

/* Mobile adjustments for toast */
@media (max-width: 880px) {
  .step2-optional-toast {
    margin: 0.75rem 0;
    padding: 0.65rem 1rem;
    font-size: 0.8125rem;
  }
  
  @keyframes step2ToastEnter {
    from {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .step2-optional-toast-exit {
    animation: step2ToastExit 0.25s ease-in forwards !important;
  }
  
  @keyframes step2ToastExit {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .step2-optional-toast,
  .step2-optional-toast-exit {
    animation: none !important;
    opacity: 1;
  }
}

/* Safety option card styling (mobile-safe text containment) */
.safety-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  background-color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  min-height: 44px;
  overflow: hidden;
}

.safety-option input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.safety-option label {
  cursor: pointer;
  margin: 0;
  user-select: none;
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #17212b;
  transition: color 0.2s ease;
  overflow-wrap: break-word;
  word-break: break-word;
}

.safety-option input[type="checkbox"]:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

.safety-option input[type="checkbox"]:checked ~ label {
  color: #0066cc;
  font-weight: 500;
}

/* Safety Screening Grid Layout */
.quote-safety-screening {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.safety-symptoms-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.safety-exit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.safety-option input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Mobile: 1 column layout */
@media (max-width: 880px) {
  .safety-symptoms-grid {
    grid-template-columns: 1fr;
  }

  .safety-exit-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:880px) {
 .interior-page .contact-intake { gap:1rem; }
 .interior-page .contact-intake-intro { display:block; }
 .interior-page .contact-intake .section-heading { margin:0; }
 .contact-intake-intro .section-heading h2 { font-size:1.5rem; margin-bottom:.5rem; }
 .contact-intake-intro .section-heading p { font-size:.9rem; margin:0; }
 .quote-section { padding-block:1.5rem; }
 .quote-form .smart-quote-step { gap:.85rem; }
 .quote-form .smart-quote-progress { margin-bottom:0; }
}

/* Photos & Files — compact, contextual attachment picker in Step 2. Kept as
   a small bordered card rather than a large dropzone; guidance copy swaps
   per service via syncAttachmentGuidance() in script.js. */
.quote-form .quote-attachments {
  grid-column: 1 / -1;
  margin: 0.25rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: transparent;
  display: grid;
  gap: 0.6rem;
  min-width: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.quote-form .quote-attachments[hidden] { display: none !important; }

/* Drag-and-drop active state — the existing compact card itself is the drop
   target, so this only needs to read as "ready to receive," not a distinct
   giant dropzone. */
.quote-form .quote-attachments.is-drag-active {
  border-color: var(--color-primary);
  background: rgba(196, 30, 42, 0.04);
  box-shadow: inset 0 0 0 1px rgba(196, 30, 42, 0.15), inset 0 0 24px rgba(196, 30, 42, 0.06);
}

.quote-form .quote-attachments legend {
  padding: 0 0.3rem;
  margin: 0 0 0 -0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.quote-form .quote-attachment-guidance {
  margin: 0;
  font-size: 0.85rem;
  color: #525252;
}

.quote-form .quote-attachment-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.quote-form .quote-attachment-pick {
  min-height: 40px;
  padding: 0.55rem 1.1rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.quote-form .quote-attachment-count {
  font-size: 0.78rem;
  color: #7a7a7a;
}

.quote-form .quote-attachment-drag-hint {
  font-size: 0.78rem;
  color: #9a9a9a;
  font-style: italic;
  transition: color 0.15s ease;
}

.quote-form .quote-attachments.is-drag-active .quote-attachment-drag-hint {
  color: var(--color-primary);
  font-weight: 600;
  font-style: normal;
}

/* Drag-and-drop is a desktop/mouse affordance — touch devices only ever see
   the picker button, so the hint text would just be noise there. */
@media (hover: none), (pointer: coarse) {
  .quote-form .quote-attachment-drag-hint { display: none; }
}

.quote-form .quote-attachment-error {
  margin: 0;
  font-size: 0.82rem;
  color: #a3231f;
  background: rgba(196, 30, 42, 0.08);
  border: 1px solid rgba(196, 30, 42, 0.25);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}

.quote-form .quote-attachment-resume-note {
  margin: 0;
  font-size: 0.8rem;
  color: #8a6d1f;
  background: rgba(207, 154, 63, 0.12);
  border: 1px solid rgba(207, 154, 63, 0.3);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}

.quote-form .quote-attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0.6rem;
}

.quote-form .quote-attachment-grid[hidden] { display: none !important; }

.quote-form .quote-attachment-card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.quote-form .quote-attachment-thumb-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.quote-form .quote-attachment-thumb-btn:focus-visible {
  outline: 2px solid #c41e2a;
  outline-offset: -2px;
}

.quote-form .quote-attachment-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.quote-form .quote-attachment-card-document .quote-attachment-icon {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(196, 30, 42, 0.08);
  color: #c41e2a;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

.quote-form .quote-attachment-meta {
  padding: 0.3rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.quote-form .quote-attachment-name {
  font-size: 0.68rem;
  font-weight: 600;
  color: #17212b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quote-form .quote-attachment-size {
  font-size: 0.62rem;
  color: #9e9e9e;
}

.quote-form .quote-attachment-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: none;
  background: rgba(20, 20, 20, 0.78);
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.quote-form .quote-attachment-remove:hover { background: rgba(20, 20, 20, 0.92); }
.quote-form .quote-attachment-remove:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Compact single-image preview — intentionally not a full gallery/lightbox. */
.quote-attachment-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(10, 10, 10, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.quote-attachment-preview-overlay[hidden] { display: none !important; }

.quote-attachment-preview-img {
  max-width: min(92vw, 720px);
  max-height: 72vh;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}

.quote-attachment-preview-close { min-height: 40px; }

/* Review — compact attachment summary: a count line, up to 3 tappable photo
   thumbnails (+N tile beyond that), and plain PDF filename/icon rows. */
.quote-form .smart-quote-attachment-summary-count {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: #17212b;
  font-size: 0.875rem;
}

.quote-form .smart-quote-attachment-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}

.quote-form .smart-quote-attachment-thumb-btn {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background: none;
  cursor: zoom-in;
  flex-shrink: 0;
}

.quote-form .smart-quote-attachment-thumb-btn:focus-visible {
  outline: 2px solid #c41e2a;
  outline-offset: 2px;
}

.quote-form .smart-quote-attachment-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.quote-form .smart-quote-attachment-thumb-more {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #f4f4f4;
  color: #525252;
  font-size: 0.8rem;
  font-weight: 700;
}

.quote-form .smart-quote-attachment-doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  font-size: 0.875rem;
  color: #333333;
}

.quote-form .smart-quote-attachment-doc-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.quote-form .smart-quote-attachment-doc-icon {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #c41e2a;
  background: rgba(196, 30, 42, 0.08);
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
}

.quote-form .smart-quote-attachment-doc-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .quote-form .quote-attachment-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .quote-form .quote-attachment-controls { gap: 0.5rem; }
}

/* ==========================================================================
   D2.4 — VIEW FULL QUOTE (owner-only read-only page, view-quote.html)
   ========================================================================== */
/* D2.5 design pass — dark premium / iOS-inspired owner interface. Was a
   light page (var(--color-surface)); now a near-black owner record to
   match the owner-email direction. .btn-secondary's BASE styling
   (white text/border, see line ~286) already assumes a dark background,
   so the old light-context override below it is gone — the base style is
   now correct here unmodified. */
/* Micro-polish — extremely subtle ambient light behind the glass surfaces
   (top-centered, fading to flat black well before the fold) so cards have
   something faint to separate from. Black stays dominant; the red layer
   is a barely-perceptible brand glow, not a colored background. */
.view-quote-page {
  background:
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(196, 30, 42, 0.05), transparent 60%),
    radial-gradient(ellipse 1200px 800px at 50% -10%, rgba(255, 255, 255, 0.035), transparent 70%),
    var(--color-black);
  color: #FFFFFF;
}

.view-quote-header {
  background: var(--color-black);
  border-bottom: 1px solid var(--color-border-dark);
}
.view-quote-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}
.view-quote-header-inner .logo-link img { height: 32px; width: auto; }
.view-quote-header-label {
  color: var(--color-text-soft);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.view-quote-main { padding: 2.5rem 0 4rem; }
.view-quote-container { max-width: 900px; }

.view-quote-state { text-align: center; padding: 4rem 1rem; }
.view-quote-state h1 { margin-bottom: 0.75rem; }
.view-quote-state p { margin-bottom: 1.5rem; }

/* Approved Change 2 — elevated above the regular cards below (larger
   radius, heavier shadow) so reference + title + badges read as the
   page's clear top information tier within a few seconds. */
.view-quote-summary-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1.5rem 1.75rem;
  /* Micro-polish — a touch more surface/border/shadow presence than the
     regular cards below (which stay at 0.055/0.14/blur 14px), so this
     keeps reading as the primary glass surface without growing in size. */
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.view-quote-summary-bar h1 { font-size: 1.6rem; margin-top: 0.15rem; color: #FFFFFF; }
.view-quote-submitted { color: #9A9A9A; font-size: 0.9rem; margin-top: 0.25rem; }

.view-quote-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.view-quote-badge {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}
/* Red reserved for urgency/brand emphasis — the default badge above stays
   restrained so the safety variant is the one that visibly stands out. */
.view-quote-badge-safety { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }

.view-quote-urgent-warning {
  background: rgba(196, 30, 42, 0.14);
  border: 1px solid rgba(196, 30, 42, 0.45);
  color: #FFD9DC;
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
}

.view-quote-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  /* D2.5: without this, Grid stretches every card in a row to match its
     tallest sibling (e.g. Customer stretched to Location's height because
     of the Maps button) — real, visible wasted whitespace on iPad/desktop
     widths where the 2-column grid is active. Each card should size to
     its own content. */
  align-items: start;
}

/* Approved Change 1 — dense data cards get restrained depth (translucent
   surface + soft shadow + a light blur/saturate) rather than the site's
   marketing-hero glass values (16-20px blur, higher opacity) — tuned down
   so body text stays crisp for fast scanning instead of decorative. */
.view-quote-card {
  /* Micro-polish — slightly more visible surface/edge + a layered
     shadow+inset-highlight pair (the "glass edge" cue) instead of a flat
     drop shadow; blur nudged 12px→14px, still well under the marketing
     hero's 16-20px, so body text stays crisp. */
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.view-quote-grid .view-quote-card { margin-bottom: 0; }
.view-quote-card h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #9A9A9A;
  margin-bottom: 0.9rem;
}

.view-quote-dl { display: grid; gap: 0.55rem; }
.view-quote-dl dt {
  font-size: 0.78rem;
  color: #9A9A9A;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.view-quote-dl dd {
  margin: 0 0 0.35rem;
  color: #D0D0D0;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

/* Micro-polish — refines only this page's "Open in Google Maps" button;
   the shared .btn/.btn-secondary base classes (used site-wide) are left
   untouched. Softer corners, a faint dark-glass fill instead of fully
   transparent, and a subtle hover/focus lift — padding/touch target size
   inherited unchanged from .btn. */
.view-quote-inline-btn {
  margin-top: 0.9rem;
  display: inline-block;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.22);
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.view-quote-inline-btn:hover,
.view-quote-inline-btn:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.view-quote-empty-note { color: var(--color-text-soft); font-size: 0.9rem; }

.view-quote-attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.9rem;
}
.view-quote-attachment-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}
.view-quote-attachment-thumb-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.view-quote-attachment-thumb-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.view-quote-attachment-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.view-quote-attachment-icon {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-dark);
  color: var(--color-white);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.view-quote-attachment-doc-link {
  display: block;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
}
.view-quote-attachment-meta { padding: 0.5rem 0.6rem 0.7rem; }
.view-quote-attachment-name {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #FFFFFF;
  overflow-wrap: anywhere;
}
.view-quote-attachment-size {
  display: block;
  font-size: 0.74rem;
  color: #9A9A9A;
  margin-top: 0.15rem;
}

.view-quote-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.view-quote-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  z-index: 2000;
  padding: 1.5rem;
}
.view-quote-preview-img {
  max-width: min(90vw, 900px);
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.view-quote-preview-close { align-self: center; }

/* Printers don't render background colors by default (only `color` is
   printed unless the user opts into "print backgrounds"), so the dark
   on-screen palette above (white/light-gray text) would print as
   near-invisible light text on blank paper. Restore the original
   light-on-white print values here — same values this page used before
   the D2.5 dark-theme pass, since those were already print-correct. */
@media print {
  .view-quote-header,
  #vq-map-link,
  .view-quote-actions,
  .view-quote-preview-overlay { display: none !important; }
  .view-quote-page { background: #FFFFFF; color: #111111; }
  .view-quote-summary-bar {
    background: #FFFFFF; border: 1px solid #ccc; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .view-quote-summary-bar h1, .view-quote-dl dd, .view-quote-attachment-name { color: #111111; }
  .view-quote-submitted, .view-quote-card h2, .view-quote-dl dt, .view-quote-attachment-size { color: #666666; }
  .view-quote-badge { background: #f0f0f0; border-color: #ccc; color: #111111; }
  .view-quote-badge-safety { background: var(--color-primary); border-color: var(--color-primary); color: #ffffff; }
  .view-quote-urgent-warning { background: #fbecef; border-color: rgba(196, 30, 42, 0.35); color: #7a1119; }
  .view-quote-card {
    background: #FFFFFF; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    break-inside: avoid; border: 1px solid #ccc;
  }
  .view-quote-attachment-card { background: #FFFFFF; border: 1px solid #ccc; }
}

@media (max-width: 760px) {
  .view-quote-grid { grid-template-columns: 1fr; }
  .view-quote-summary-bar { flex-direction: column; }
  .view-quote-actions { flex-direction: column; }
  .view-quote-actions .btn, .view-quote-actions button { width: 100%; text-align: center; }
}

/* Approved Change 3 — iPad portrait (~768px) gets its own tier: two
   ~330px columns feel cramped here (a full address plus the Maps button
   in one), so this width keeps the phone tier's single column instead of
   inheriting the 2-column default meant for landscape/desktop. iPad
   landscape (1024px) and 1440px desktop fall through to the existing
   `.view-quote-grid` 2-column default below — already centered inside a
   900px container so neither stretches nor looks like a forced layout. */
@media (min-width: 761px) and (max-width: 850px) {
  .view-quote-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   L3 HOME FOUNDATION — Architecture + Design System phase.
   New, visually-independent Header / Hero / Featured Work / Core Services
   Preview for L3 Hauling & Land Management, built on the --l3-* tokens
   defined in section 1. Scoped to new markup only — sections not rebuilt
   yet keep using the inherited --color-* system above.
   Sub-sections: A. Type & utility  B. Section spacing/containers
   C. Header extras (scroll-progress hook)  D. Hero  E. Featured Work
   F. Core Services Preview  G. Reveal-on-scroll system  H. Materials
   preview scaffold (unused, architecture only)  I. Responsive  J. Motion

   Prompt 3 — Complete the Home Page additions:
   K. Section background utilities  L. Material Delivery Preview
   M. Equipment & Capability  N. Our Work Preview  O. About / Why L3
   P. Service Area Preview  Q. Final CTA  R. Responsive (Prompt 3)
   ========================================================================== */

/* ---------- A. Type & utility ---------- */
.l3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--l3-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--l3-red);
  margin-bottom: 1.1rem;
}

.l3-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--l3-red);
}

.l3-heading {
  font-family: var(--l3-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.005em;
  color: var(--l3-text);
}

.l3-heading-lg {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.l3-section-head {
  max-width: 720px;
  margin-bottom: 3rem;
}

.l3-section-head .l3-section-lead {
  font-family: var(--l3-font-body);
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 560px;
  margin-top: 1rem;
}

.l3-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--l3-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--l3-text);
  border-bottom: 1px solid var(--l3-border);
  padding-bottom: 0.15rem;
  transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
}

.l3-text-link:hover {
  color: var(--l3-red);
  border-color: var(--l3-red);
  gap: 0.6rem;
}

/* Reusable glass treatment — sticky nav (handled above), small project
   labels, chips, floating panels. Never a full section background. */
.l3-glass {
  background: var(--l3-glass-bg);
  -webkit-backdrop-filter: var(--l3-glass-blur);
  backdrop-filter: var(--l3-glass-blur);
  border: var(--l3-glass-border);
  border-radius: var(--l3-radius-glass);
}

/* ---------- B. Section spacing / containers ---------- */
.l3-section {
  padding: var(--l3-space-desktop) 0;
}

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

/* ---------- C. Header extras: scroll-progress line (Motion/Polish phase) -
   Subtle geometric page-progress indicator — no icon/vehicle. Nested
   inside .site-header (absolutely positioned to its bottom edge) so it
   travels with the header's own sticky positioning and hide-on-scroll-down
   behavior for free, rather than fighting it with separate fixed
   positioning. Track background stays transparent — at scroll position 0
   the bar is 0-width anyway, so nothing draws a stray line across the
   transparent home Hero header before it has scrolled. See
   initScrollProgress() in js/script.js: transform-only (scaleX), rAF-batched,
   passive scroll listener, no width/layout changes. */
.l3-scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
}

.l3-scroll-progress-bar {
  position: absolute;
  inset: 0;
  background: var(--l3-red);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Mobile: skip it rather than crowd the header/viewport (spec §7). */
@media (max-width: 640px) {
  .l3-scroll-progress { display: none; }
}

/* ---------- D. Hero ---------- */
.l3-hero {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--l3-white);
}

.l3-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--l3-charcoal);
}

/* Placeholder standing in for real Hero photography (L3 machinery / skid
   steer work). The Hero is fully static after its entrance settle (no
   scroll-linked parallax — removed in the Motion/Polish refinement pass),
   so this only needs to cover its container, not overshoot it.
   Swap for the real asset with either:
   (a) `<picture>` (preferred once real files exist — lets a future AVIF/
        WebP source with a JPEG fallback ship without touching this CSS).
        The `.l3-hero-media-fill` class (object-fit etc.) goes on the
        inner <img>, not the <picture> wrapper — object-fit only applies
        to a replaced element like <img>:
        <picture>
          <source srcset="assets/images/hero/machinery.avif" type="image/avif">
          <source srcset="assets/images/hero/machinery.webp" type="image/webp">
          <img class="l3-hero-media-fill" src="assets/images/hero/machinery.jpg" alt="..." width="…" height="…">
        </picture>
   (b) a single `<img class="l3-hero-media-fill" src="..." alt="...">`, or
   (c) a `background-image` on this same element.
   Any of these inherit the sizing below unchanged. Keep explicit
   width/height (or an aspect-ratio) on the real <img> once added, so
   layout doesn't shift while it loads — this placeholder has no intrinsic
   size to preserve since it's pure CSS. */
.l3-hero-media-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Tuned for the real Hero photo: the skid steer sits right of centre, so a
     right-weighted x keeps it in frame when a narrow/portrait viewport crops
     the sides, and y keeps it visible when a wide viewport crops top/bottom. */
  object-position: 88% 58%;
  background:
    linear-gradient(155deg, #4b463c 0%, #2f2c26 45%, #1c1a16 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* The real <img> must not inherit the placeholder's label padding, or the
   photo would draw inset from the Hero edges. */
img.l3-hero-media-fill {
  display: block;
  padding: 0;
  /* Static 2px diffusion on the photo only (copy and buttons are separate
     layers and stay sharp). The box bleeds 8px past the Hero on every side —
     clipped by .l3-hero-media's overflow — so the blur never fades to a dark
     edge; the crop shifts by well under 1%. */
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  filter: blur(2px);
}

.l3-hero-media-fill-label {
  font-family: var(--l3-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  text-align: center;
  max-width: 320px;
}

/* Directional gradient for legibility only — copy sits bottom-left, so the
   gradient strengthens toward the bottom, not a flat full-image overlay.
   If a future composition moves the copy elsewhere, change the direction
   here rather than assuming "left/bottom" is universal. */
.l3-hero-gradient {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Subdued, premium treatment: a ~45–60% dark veil across the whole photo
     (never fully clear at the top, so the white nav/headline always win),
     deepening toward the copy at the bottom. Machine and land-clearing
     context stay clearly recognisable. */
  background: linear-gradient(0deg,
    rgba(20, 18, 15, 0.86) 0%,
    rgba(20, 18, 15, 0.62) 30%,
    rgba(20, 18, 15, 0.5) 60%,
    rgba(20, 18, 15, 0.44) 100%);
}

.l3-hero-inner {
  position: relative;
  padding: 8rem 0 3.5rem;
}

.l3-hero-copy {
  max-width: 720px;
}

.l3-hero-eyebrow {
  color: var(--l3-white);
  opacity: 0.9;
}

.l3-hero-eyebrow::before { background: var(--l3-red); }

.l3-hero-headline {
  font-family: var(--l3-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(3.5rem, 6vw, 6rem);
  line-height: 0.94;
  letter-spacing: 0.002em;
  color: var(--l3-white);
  margin-bottom: 1.5rem;
}

.l3-hero-sub {
  font-family: var(--l3-font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 500px;
  margin-bottom: 2.25rem;
}

.l3-hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---- Hero service strip ---- */
.l3-hero-strip {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.l3-hero-strip-inner {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.5rem;
  font-family: var(--l3-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  overflow-x: auto;
  scrollbar-width: none;
}
.l3-hero-strip-inner::-webkit-scrollbar { display: none; }

.l3-hero-strip-sep {
  color: rgba(255, 255, 255, 0.35);
}

/* ---- Hero load-in animation (see js/script.js initHeroMotion) ----------
   Default state is fully visible — a page with JS disabled, or before
   script.js finishes evaluating, never shows hidden content. The inline
   bootstrap script in each page's <body> (see index.html) adds
   `js-hero-anim` to <html> synchronously, and only then does this rule
   apply the pre-animation hidden state for initHeroMotion() to reveal. */
.l3-hero-anim-item {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

html.js-hero-anim .l3-hero-anim-item {
  opacity: 0;
  transform: translateY(18px);
}

html.js-hero-anim .l3-hero.is-ready .l3-hero-anim-item {
  opacity: 1;
  transform: none;
}

/* ~110ms stagger — eyebrow, headline, body, CTAs, service strip. */
.l3-hero-anim-item.delay-1 { transition-delay: 0ms; }
.l3-hero-anim-item.delay-2 { transition-delay: 110ms; }
.l3-hero-anim-item.delay-3 { transition-delay: 220ms; }
.l3-hero-anim-item.delay-4 { transition-delay: 330ms; }
.l3-hero-anim-item.delay-5 { transition-delay: 440ms; }

/* Entrance settle only — scale 1.04 → 1.00, ~1000ms, transform only. No
   ongoing motion after this: no scroll-linked parallax (removed in the
   Motion/Polish refinement pass — the Hero stays fully static once
   settled, on every breakpoint). */
html.js-hero-anim .l3-hero-media-fill {
  transform: scale(1.04);
  transition: transform 1000ms ease;
}
html.js-hero-anim .l3-hero.is-ready .l3-hero-media-fill {
  transform: scale(1);
}

/* ---------- E. Featured Work ---------- */
.l3-featured-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1.5rem;
}

.l3-featured-main {
  position: relative;
}

.l3-featured-support {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1.5rem;
}

.l3-media-placeholder {
  position: relative;
  border-radius: var(--l3-radius-media);
  overflow: hidden;
  /* Deliberately more saturated than the --l3-bg-alt/--l3-border surfaces
     around it, so a placeholder box reads clearly as "image area" against
     the warm off-white page rather than nearly disappearing into it. */
  background: linear-gradient(150deg, var(--l3-border) 0%, var(--l3-earth) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
}

.l3-media-tall { aspect-ratio: 4 / 5; }

/* Real photography inside an existing media container. The container keeps
   its aspect ratio, radius and overflow, so layout (and CLS) is unchanged;
   `--l3-img-pos` (set inline per image) picks the crop focal point.
   `.l3-media-filled` is a marker (no styles) for containers that hold a real
   photo, so any `.l3-media-placeholder:not(.l3-media-filled)` is still pending. */
.l3-media-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--l3-img-pos, 50% 50%);
}

.l3-media-placeholder-label {
  font-family: var(--l3-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--l3-charcoal);
  background: rgba(242, 239, 233, 0.55);
  border: 1px dashed rgba(38, 37, 34, 0.35);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  text-align: center;
  max-width: 80%;
}

.l3-glass-tag {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1.15rem;
}

.l3-glass-tag-title {
  font-family: var(--l3-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--l3-text);
}

.l3-glass-tag-sub {
  font-family: var(--l3-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.l3-featured-cta {
  margin-top: 2rem;
  text-align: right;
}

/* ---------- F. Core Services Preview ---------- */
.l3-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.l3-service-block { display: flex; flex-direction: column; }

.l3-service-media-link {
  display: block;
  overflow: hidden;
  border-radius: var(--l3-radius-media);
  margin-bottom: 1.25rem;
}

.l3-service-media-link .l3-media-placeholder {
  aspect-ratio: 5 / 4;
  transition: transform 0.4s ease;
}

@media (hover: hover) {
  .l3-service-block:hover .l3-media-placeholder { transform: scale(1.025); }
  .l3-service-block:hover .l3-text-link { color: var(--l3-red); border-color: var(--l3-red); gap: 0.6rem; }
}

.l3-service-body h3 {
  font-family: var(--l3-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.35rem;
  letter-spacing: 0.005em;
  color: var(--l3-text);
  margin-bottom: 0.75rem;
}

.l3-service-divider {
  width: 100%;
  height: 1px;
  background: var(--l3-border);
  border: 0;
  margin: 0 0 0.85rem;
}

.l3-service-body p {
  font-family: var(--l3-font-body);
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

/* ---------- G. Reveal-on-scroll system (generic, reusable) --------------
   Applied via [data-reveal] + IntersectionObserver in js/script.js
   (initScrollReveal). Distinct from the Hero's own load-in animation
   above — this is for below-the-fold content on any page. */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* ---------- H. Materials preview — architecture only (spec §23) --------
   Not instantiated in any page yet. Prepared so the next phase can drop
   in a `<div class="l3-materials-grid">` of `.l3-material-chip` items
   (name + optional swatch/photo) without inventing layout from scratch.
   Do not treat the example material names in the spec as confirmed
   production inventory. */
.l3-materials-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.l3-material-chip {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  border: 1px solid var(--l3-border);
  border-radius: var(--l3-radius-card);
  background: var(--l3-white);
}

.l3-material-chip-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--l3-radius-card);
  background: var(--l3-bg-alt);
}

.l3-material-chip-name {
  font-family: var(--l3-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--l3-text);
}

/* ---------- I. Responsive ---------- */
@media (max-width: 1024px) {
  .l3-section { padding: var(--l3-space-tablet) 0; }
  .l3-services-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
}

@media (max-width: 880px) {
  .l3-featured-grid { grid-template-columns: 1fr; }
  .l3-featured-support { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .l3-media-tall { aspect-ratio: 16 / 10; }
}

@media (max-width: 768px) {
  .l3-section { padding: var(--l3-space-mobile) 0; }
}

@media (max-width: 640px) {
  .l3-hero {
    min-height: 94vh;
    min-height: 94svh;
    justify-content: space-between;
  }
  .l3-hero-inner { padding: 7.5rem 0 2.5rem; }
  .l3-hero-headline {
    font-size: clamp(2.75rem, 12vw, 3.5rem);
    line-height: 0.98;
  }
  .l3-hero-sub { font-size: 1rem; max-width: 100%; }
  .l3-hero-actions { flex-direction: column; align-items: stretch; }
  .l3-hero-actions .btn { width: 100%; }
  /* Pin the CTA pair to the bottom of the Hero (just above the service strip)
     so the full-width buttons no longer sit on top of the skid steer, which
     sits mid-frame between the paragraph and the buttons. Copy order, sizes
     and the photo crop are unchanged; if the Hero is only as tall as its
     content there is no spare space and nothing moves. */
  .l3-hero-inner { flex: 1 1 auto; display: flex; flex-direction: column; }
  .l3-hero-copy { flex: 1 1 auto; display: flex; flex-direction: column; }
  .l3-hero-actions { margin-top: auto; }
  /* Simplified per spec §14 — collapses to essentials rather than an
     overflow-scrolling strip that would add clutter on small screens. */
  .l3-hero-strip-inner {
    font-size: 0.7rem;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    justify-content: center;
  }
  .l3-featured-support { grid-template-columns: 1fr; }
  .l3-services-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .l3-materials-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
  .l3-hero-headline { font-size: clamp(2.5rem, 13vw, 3.25rem); }
}

/* ---------- J. Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .l3-hero-anim-item,
  .l3-hero-media-fill,
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Belt-and-suspenders: initHeaderScroll() already skips the hide/show
     logic for reduced-motion, so `.is-hidden` is never added — this just
     guarantees no slide even if that class shows up some other way. */
  .site-header {
    transform: none !important;
    transition: background-color 0.35s ease, border-color 0.35s ease !important;
  }
}

/* ==========================================================================
   PROMPT 3 — Complete the Home Page.
   Material Delivery Preview / Equipment & Capability / Our Work Preview /
   About / Why L3 / Service Area Preview / Final CTA, built on the same
   --l3-* tokens and [data-reveal] system above. Motion stays deliberately
   light per spec: Materials is fully static, Equipment/About/Service Area/
   Final CTA each get one single-group reveal, Our Work reveals its section
   head and image group separately (matching the existing Featured Work /
   Core Services Preview precedent above).
   ========================================================================== */

/* ---------- K. Section background utilities ---------- */
.l3-section-alt { background: var(--l3-bg-alt); }

.l3-section-dark {
  background: var(--l3-charcoal);
  color: var(--l3-white);
}
/* Match the Hero's established dark-background eyebrow treatment: text
   goes white/translucent, only the small decorative bar stays red — red
   eyebrow text directly on --l3-charcoal falls short of AA contrast. */
.l3-section-dark .l3-eyebrow { color: var(--l3-white); opacity: 0.9; }
.l3-section-dark .l3-heading { color: var(--l3-white); }
.l3-section-dark .l3-section-lead { color: rgba(255, 255, 255, 0.75); }
.l3-section-dark .l3-text-link { color: var(--l3-white); border-color: rgba(255, 255, 255, 0.3); }
.l3-section-dark .l3-text-link:hover { color: var(--l3-red); border-color: var(--l3-red); }
.l3-section-dark .l3-service-divider { background: rgba(255, 255, 255, 0.15); }

.l3-fine-print {
  font-family: var(--l3-font-body);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 1.25rem;
}
.l3-section-dark .l3-fine-print { color: rgba(255, 255, 255, 0.55); }

/* ---------- L. Material Delivery Preview ---------------------------------
   Industrial/architectural catalog, not e-commerce cards: one large
   featured material photo + a static indexed list for the rest. No
   [data-reveal] on this section at all — deliberately static per spec
   ("mostly static and precise", "no entrance animation for dense material
   items"), a contrast with the reveal motion used elsewhere on Home. */
.l3-materials-composition {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.l3-materials-featured { position: relative; }

.l3-materials-featured-tag {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  background: rgba(242, 239, 233, 0.9);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
}

.l3-materials-index {
  list-style: none;
  margin: 0;
  padding: 0;
}

.l3-materials-index li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--l3-border);
}

.l3-materials-index li:first-child { border-top: 1px solid var(--l3-border); }

.l3-materials-index-num {
  font-family: var(--l3-font-heading);
  font-weight: 700;
  color: var(--l3-red);
  font-size: 1.1rem;
  min-width: 2ch;
}

.l3-materials-index-name {
  font-family: var(--l3-font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1.15rem;
  color: var(--l3-text);
}

.l3-materials-featured-tag .l3-materials-index-name { font-size: 1rem; }

/* ---------- M. Equipment & Capability -------------------------------------
   Capability-first storytelling (Move/Shape/Clear/Prepare), not a fleet
   inventory — no invented specs, numbers, or fleet counts. High-end
   spec-sheet feel: deep charcoal, sharp lines, small technical labels.
   Single section reveal (see [data-reveal] on the section's .container). */
.l3-equipment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.l3-equipment-block .l3-media-placeholder {
  margin-bottom: 1.5rem;
  background: linear-gradient(150deg, #3a372f 0%, #201e1a 100%);
}

.l3-equipment-block .l3-media-placeholder-label {
  color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.25);
}

.l3-equipment-title {
  font-family: var(--l3-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  margin-bottom: 0.75rem;
  /* Sits on the dark .l3-section-dark background; without this it inherited
     the global near-black heading colour and was effectively invisible. */
  color: var(--l3-white);
}

.l3-equipment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--l3-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.l3-equipment-list li { padding: 0.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.l3-equipment-list li:last-child { border-bottom: 0; }

/* ---------- N. Our Work Preview --------------------------------------------
   Editorial field-journal composition (one wide + one tall + one small
   image with metadata labels) — distinct from the single-project Featured
   Work section above, which proves one job rather than showing breadth. */
.l3-work-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.5rem;
}

.l3-work-wide { grid-column: 1; grid-row: 1; position: relative; }
.l3-work-small { grid-column: 1; grid-row: 2; position: relative; }
.l3-work-tall { grid-column: 2; grid-row: 1 / 3; position: relative; }

.l3-media-wide { aspect-ratio: 16 / 9; }

/* ---------- O. About / Why L3 ----------------------------------------------
   Concise, observable-behavior copy only — no invented company history,
   "years in business", or "family owned" claims. Single copy reveal. */
.l3-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.l3-about-copy .l3-text-link { margin-top: 1.5rem; }

.l3-about-points {
  list-style: none;
  margin: 0;
  padding: 0;
}

.l3-about-points li {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--l3-border);
}
.l3-about-points li:last-child { border-bottom: 1px solid var(--l3-border); }

.l3-about-point-num {
  font-family: var(--l3-font-heading);
  font-weight: 700;
  color: var(--l3-red);
  font-size: 1rem;
  flex-shrink: 0;
}

.l3-about-point-text {
  font-family: var(--l3-font-body);
  font-size: 0.98rem;
  color: var(--l3-text);
  line-height: 1.5;
}

/* ---------- P. Service Area Preview ----------------------------------------
   Cautious positioning only — no hard ZIP whitelist, no guaranteed
   boundaries. Sample of recent work locations, clearly framed as such. */
.l3-service-area-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
}

.l3-service-area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  font-family: var(--l3-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--l3-charcoal);
}

.l3-service-area-list li {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--l3-border);
  border-radius: 999px;
  background: var(--l3-white);
}

/* ---------- Q. Final CTA ----------------------------------------------------
   Dark, quiet, direct — no giant glass card (see spec §11/§15). */
.l3-final-cta { text-align: center; }

.l3-final-cta-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.l3-final-cta-sub {
  font-family: var(--l3-font-body);
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 520px;
  margin: 0 0 2.25rem;
}

.l3-final-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---------- R. Responsive (Prompt 3 sections) ---------- */
@media (max-width: 1024px) {
  .l3-equipment-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
  .l3-about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .l3-service-area-grid { grid-template-columns: 1fr; text-align: left; }
}

@media (max-width: 880px) {
  .l3-materials-composition { grid-template-columns: 1fr; gap: 2rem; }
  .l3-work-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .l3-work-wide, .l3-work-small, .l3-work-tall { grid-column: 1; grid-row: auto; }
  .l3-media-wide { aspect-ratio: 16 / 10; }
}

@media (max-width: 768px) {
  .l3-equipment-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 640px) {
  .l3-about-points li { flex-direction: column; gap: 0.4rem; }
  .l3-service-area-cta .btn { width: 100%; }
  .l3-final-cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .l3-final-cta-actions .btn { width: 100%; }
}

/* ==========================================================================
   PROMPT 4 — Internal Pages (Services / Materials / Our Work / About).
   Built on the same --l3-* tokens, [data-reveal] system, and shared
   components (l3-media-placeholder, l3-glass-tag, l3-equipment-*,
   l3-service-area-*, l3-final-cta, l3-work-grid) as the Home page above —
   these pages extend that system rather than introducing a separate one.
   Sub-sections: T. Internal Hero  U. Editorial index rows (Services /
   Materials)  V. Service detail expansion  W. Our Work page + filter
   X. About "How L3 Works" steps  Y. Responsive  Z. Motion
   ========================================================================== */

/* ---------- T. Internal Hero ---------- */
/* Short interior Hero — shared by Services, Materials, Our Work and About.
   Full-bleed photo (.l3-page-hero-img), the same dark veil + 2px diffusion as
   the Home Hero, and a fixed minimum height (no layout shift) that steps down
   on tablet and phone. Copy is a plain layer above the photo, never blurred. */
.l3-page-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--l3-white);
}

.l3-page-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--l3-charcoal);
}

.l3-page-hero-media-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  aspect-ratio: auto;
  /* Dark override — the shared .l3-media-placeholder gradient is tuned for
     light page backgrounds, not a full-bleed dark Hero with white text. */
  background: linear-gradient(155deg, #4b463c 0%, #2f2c26 45%, #1c1a16 100%);
}

/* Directional gradient for legibility only — no scroll-linked motion,
   matching the Home Hero's "settle once, stay static" convention. */
.l3-page-hero-gradient {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg,
    rgba(20, 18, 15, 0.84) 0%,
    rgba(20, 18, 15, 0.62) 45%,
    rgba(20, 18, 15, 0.5) 100%);
}

/* The photo itself. `--l3-img-pos` (inline, per page) picks the focal band for
   the short, wide crop. The 8px bleed keeps the 2px blur from fading to the
   charcoal backdrop at the edges (clipped by the Hero's overflow). */
.l3-page-hero-img {
  position: absolute;
  inset: -8px;
  display: block;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  object-fit: cover;
  object-position: var(--l3-img-pos, 50% 50%);
  filter: blur(2px);
}

.l3-page-hero-inner {
  position: relative;
  padding: 3rem 0 2.25rem;
}

.l3-page-hero-copy { max-width: 640px; }

.l3-page-hero .l3-eyebrow { color: var(--l3-white); opacity: 0.9; }
.l3-page-hero .l3-eyebrow::before { background: var(--l3-red); }

.l3-page-hero-heading {
  font-family: var(--l3-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.98;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  color: var(--l3-white);
  margin-bottom: 1rem;
}

.l3-page-hero-sub {
  font-family: var(--l3-font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 520px;
  margin-bottom: 0;
}

/* Standalone lead-paragraph utility — same styling as
   .l3-section-head .l3-section-lead, usable without that parent. */
.l3-lead {
  font-family: var(--l3-font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 560px;
}

/* ---------- U. Editorial index rows (Services / Materials) --------------
   Shared row component: index number, large heading, short copy, image —
   used identically on both pages per spec. Materials rows omit the
   [data-reveal]/expand pieces and stay static; Services rows add a native
   <details> expansion (see §V) for the concise service-detail content. */
.l3-index-row {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3rem;
  align-items: center;
  padding: 3.5rem 0;
  border-top: 1px solid var(--l3-border);
  scroll-margin-top: 100px;
}
.l3-index-row-list > .l3-index-row:last-child { border-bottom: 1px solid var(--l3-border); }

.l3-index-row:nth-child(even) .l3-index-row-media { order: 2; }

.l3-index-row-index {
  display: block;
  font-family: var(--l3-font-heading);
  font-weight: 700;
  color: var(--l3-red);
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.l3-index-row-title {
  font-family: var(--l3-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--l3-text);
  margin-bottom: 0.9rem;
}

.l3-index-row-media .l3-media-placeholder { aspect-ratio: 4 / 3; }

/* ---------- V. Service detail expansion (native <details>) --------------
   Native disclosure — accessible and keyboard-operable with no JS. */
.l3-service-expand { margin-top: 1.5rem; }

.l3-service-expand > summary {
  cursor: pointer;
  list-style: none;
}
.l3-service-expand > summary::-webkit-details-marker { display: none; }
.l3-service-expand[open] > summary { color: var(--l3-red); border-color: var(--l3-red); }

.l3-service-expand-body {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--l3-border);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 640px;
}

.l3-service-expand-body p {
  font-family: var(--l3-font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--l3-text);
}
.l3-service-expand-body strong { font-weight: 700; }

/* ---------- W. Our Work page + filter -------------------------------------
   Editorial field-journal grid with varied spans (dense packing fills the
   gaps that mixed spans leave) + a lightweight vanilla-JS category filter. */
.l3-work-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.l3-filter-btn {
  font-family: var(--l3-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--l3-border);
  border-radius: 999px;
  background: var(--l3-white);
  color: var(--l3-text);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.l3-filter-btn:hover { border-color: var(--l3-red); }

.l3-filter-btn[aria-pressed="true"] {
  background: var(--l3-red);
  border-color: var(--l3-red);
  color: var(--l3-white);
}

.l3-work-page-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(160px, auto);
  grid-auto-flow: dense;
  gap: 1.5rem;
}

.l3-work-item {
  position: relative;
  opacity: 1;
  transition: opacity 0.22s ease;
}
.l3-work-item .l3-media-placeholder { height: 100%; aspect-ratio: auto; }

/* Varied editorial rhythm — cycles through a handful of spans rather than
   a uniform grid, matching the Home Our Work Preview's asymmetric spirit. */
.l3-work-item:nth-child(6n+1) { grid-column: span 3; grid-row: span 2; }
.l3-work-item:nth-child(6n+2) { grid-column: span 1; grid-row: span 2; }
.l3-work-item:nth-child(6n+3) { grid-column: span 2; grid-row: span 1; }
.l3-work-item:nth-child(6n+4) { grid-column: span 2; grid-row: span 1; }
.l3-work-item:nth-child(6n+5) { grid-column: span 2; grid-row: span 2; }
.l3-work-item:nth-child(6n+6) { grid-column: span 2; grid-row: span 2; }
/* An odd final tile (6n+3) would leave half a row empty — let it run the full
   width instead so the grid always ends flush. */
.l3-work-item:nth-child(6n+3):last-child { grid-column: span 4; grid-row: span 2; }

/* ---------- X. About "How L3 Works" steps ---------- */
.l3-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.l3-step-num {
  display: block;
  font-family: var(--l3-font-heading);
  font-weight: 700;
  color: var(--l3-red);
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.l3-step h3 {
  font-family: var(--l3-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
  color: var(--l3-text);
}

.l3-step p {
  font-family: var(--l3-font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ---------- Y. Responsive (Prompt 4) ---------- */
@media (max-width: 1024px) {
  .l3-page-hero { min-height: 320px; }
  .l3-work-page-grid { grid-template-columns: repeat(2, 1fr); }
  .l3-work-item { grid-column: span 1 !important; grid-row: span 1 !important; }
  .l3-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
}

@media (max-width: 880px) {
  .l3-index-row { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 0; }
  .l3-index-row:nth-child(even) .l3-index-row-media { order: 0; }
}

@media (max-width: 640px) {
  .l3-page-hero { min-height: 240px; }
  .l3-page-hero-inner { padding: 2rem 0 1.75rem; }
  .l3-page-hero-heading { font-size: clamp(2rem, 11vw, 2.75rem); margin-bottom: 0.6rem; }
  .l3-work-page-grid { grid-template-columns: 1fr; }
  .l3-steps-grid { grid-template-columns: 1fr; }
  .l3-work-filter { gap: 0.5rem; }
}

/* Two-column tablet layout: an odd final tile spans both columns (single
   column on phones already ends flush). */
@media (min-width: 641px) and (max-width: 1024px) {
  .l3-work-item:last-child:nth-child(odd) { grid-column: span 2 !important; grid-row: span 2 !important; }
}

/* ---------- Z. Motion (Prompt 4) ---------- */
@media (prefers-reduced-motion: reduce) {
  .l3-work-item { transition: none !important; }
}

/* ==========================================================================
   PROMPT 6 — Motion + Final Visual Polish.
   Signature Before/After comparison, button/link microinteractions, and
   project-image hover — restrained, physical, transform/opacity-only.
   Sub-sections: AA. Before/After  BB. Button & link microinteractions
   CC. Project image hover  DD. Motion (Prompt 6)
   ========================================================================== */

/* ---------- AA. Before / After comparison ---------------------------------
   Signature interaction (see initBeforeAfter() in js/script.js). A native
   <input type="range"> is the single source of truth for position —
   keyboard (arrow keys, Home/End/Page keys) and ARIA/screen-reader
   semantics come from it natively, no hand-rolled role="slider". Pointer
   Events on the frame translate mouse/touch drag into that same range
   value, so every input method funnels through one piece of state. CSS
   only ever reads that value through the --l3-compare-pos custom property
   via clip-path + a left offset — never width/height, and no transition is
   applied to either, so there is nothing to disable under reduced motion. */
/* Default lives on .l3-compare (the root JS sets the property on via
   inline style) — never on .l3-compare-frame or any descendant, since a
   custom property declared there would shadow the inline value JS sets on
   the ancestor for every element inside it (custom properties cascade like
   any other property; the nearest declaration wins). */
.l3-compare { --l3-compare-pos: 50%; }

.l3-compare-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--l3-radius-media);
  aspect-ratio: 16 / 9;
  background: var(--l3-charcoal);
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.l3-compare-media { position: absolute; inset: 0; }

.l3-compare-media .l3-media-placeholder {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

/* Slider input handles all pointer input; keep the photos from starting a
   native image drag underneath it. */
.l3-compare-media .l3-media-img { pointer-events: none; }

.l3-compare-media-after {
  clip-path: inset(0 0 0 var(--l3-compare-pos));
}

.l3-compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--l3-compare-pos);
  width: 2px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

.l3-compare-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--l3-white);
  color: var(--l3-charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.l3-compare.is-focused .l3-compare-handle {
  outline: 2px solid var(--l3-red);
  outline-offset: 2px;
}

.l3-compare-tag {
  position: absolute;
  top: 1rem;
  z-index: 2;
  font-family: var(--l3-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--l3-white);
  background: rgba(20, 18, 15, 0.55);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  pointer-events: none;
}

.l3-compare-tag-before { left: 1rem; }
.l3-compare-tag-after { right: 1rem; }

/* The native range input covers the whole frame — its own track/thumb
   painting is stripped to transparent (never display:none/visibility:hidden,
   which would break focus and screen-reader access); the custom divider +
   handle above are the only visible UI, kept in sync via the 'input' event. */
.l3-compare-range {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  touch-action: pan-y;
}
.l3-compare-range::-webkit-slider-runnable-track { background: transparent; height: 100%; }
.l3-compare-range::-moz-range-track { background: transparent; height: 100%; border: 0; }
.l3-compare-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 36px;
  height: 100%;
  background: transparent;
  border: 0;
}
.l3-compare-range::-moz-range-thumb {
  width: 36px;
  height: 100%;
  background: transparent;
  border: 0;
}

.l3-compare-range:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

@media (max-width: 640px) {
  .l3-compare-frame { aspect-ratio: 4 / 3; }
  .l3-compare-handle { width: 40px; height: 40px; }
  .l3-compare-tag { font-size: 0.65rem; padding: 0.35rem 0.7rem; }
}

/* ---------- BB. Button & link microinteractions ---------------------------
   Restrained/mechanical, not bouncy: a short press-scale on activation, and
   a small arrow shift on hover/focus for CTAs using the existing
   `<span aria-hidden="true">→</span>` pattern already used across every
   page — no markup changes needed anywhere it's already used. */
.btn:active { transform: scale(0.98); }

.btn span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 0.2s ease;
}

@media (hover: hover) {
  .btn:hover span[aria-hidden="true"],
  .btn:focus-visible span[aria-hidden="true"] {
    transform: translateX(4px);
  }
}
.btn:focus-visible span[aria-hidden="true"] { transform: translateX(4px); }

/* ---------- CC. Project image hover (Our Work grid) ------------------------
   Transform-only, restrained — see spec §11. Desktop/pointer only; no
   hover dependency on touch devices (the `(hover: hover)` query already
   excludes touch-only devices from the scale, and .l3-work-item never
   relies on hover to reveal its metadata tag, which is always visible). */
.l3-work-item .l3-media-placeholder {
  transition: transform 0.4s ease;
}

@media (hover: hover) {
  .l3-work-item:hover .l3-media-placeholder { transform: scale(1.025); }
}

/* ---------- DD. Motion (Prompt 6) ---------- */
@media (prefers-reduced-motion: reduce) {
  .l3-work-item .l3-media-placeholder,
  .l3-service-media-link .l3-media-placeholder {
    transition: none !important;
  }
}