/* ============================================================
   WITHOUT A SPOT LLC — "Hi-Vis Reveal"
   Safety orange + deep navy · Barlow Semi Condensed / Inter · caution chevrons
   Mobile-first · min-width only · 320/480/640/768/1024/1280/1440
   ============================================================ */

@layer reset, tokens, base, layout, components, sections, utilities;

/* ---------------- RESET ---------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; }
  button { cursor: pointer; border: none; background: none; color: inherit; }
  a { color: inherit; }
  ul[role="list"], ol[role="list"] { list-style: none; }
  html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
  /* Absolute rule: never a horizontal scrollbar unless explicitly opted in.
     Guard both html and body; overflow-x:hidden is the universally-supported
     fallback, overflow-x:clip (newer, no scroll container side effects)
     overrides it where supported. max-inline-size caps the box at the viewport. */
  html, body { max-inline-size: 100%; overflow-x: hidden; overflow-x: clip; }
  body { min-height: 100svh; }

  /* ---- overflow & breakout defense (universal, not enumerated) ---- */
  img, svg, video, canvas, audio, iframe, embed, object, table { max-inline-size: 100%; }
  img, svg, video { block-size: auto; }
  input, select, textarea { max-inline-size: 100%; }
  figure { max-inline-size: 100%; }
  /* THE root fix for overlap/escape: any flex or grid child may shrink
     below its content's intrinsic size. Without this, long words and
     wide children force tracks past their column and text escapes.
     Broad match on grid/flex utility containers + named layout shells. */
  :where(
    [class*="grid-"], [class*="foot-"], [class*="hero"], [class*="drawer"],
    .cta-row, .head-row, .topbar-row, .topbar-meta, .exp-strip .wrap,
    .section-head, .stat-strip .wrap, .process-item, .svc-points li,
    .svc-head, .contact-assure li, .legal-wrap, .site-nav ul, .wrap
  ) > * { min-width: 0; }
  /* headings can wrap mid-word as a last resort rather than escape */
  h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  /* unbroken strings (emails, URLs) break anywhere in tight columns */
  :where(a[href^="mailto:"], .topbar-item, .foot-copy, .foot-contact-txt a, .legal-callout a) { overflow-wrap: anywhere; }
  .btn { max-inline-size: 100%; }  /* never exceed container */
  :focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    .hero-bg::after { display: none; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ---------------- TOKENS ---------------- */
@layer tokens {
  :root {
    /* color — hex fallbacks first (older Safari/Android that lack oklch());
       oklch versions override inside @supports below for wide-gamut displays */
    --orange:      #f26722;
    --orange-hot:  #ff7a33;
    --orange-dim:  #c2560f;
    --navy:        #23334a;
    --navy-deep:   #12233b;
    --navy-mid:    #33455e;
    --paper:       #f9f7f2;
    --paper-dim:   #efece4;
    --yellow:      #f5c518;
    --ink-soft:    #5a6472;
    --line:        #dde0e5;
    --focus:       var(--orange-hot);
    /* semantic state + on-dark text (hex fallbacks; oklch upgrade below) */
    --err:         #c0392b;
    --err-border:  #d0533f;
    --err-bg:      #fdecea;
    --ok-border:   #4a9d5b;
    --ok-bg:       #eaf6ed;
    --on-dark:     #d3dae4;   /* muted light text on navy */
    --on-dark-dim: #a8b2c0;   /* fainter light text on navy */
    --line-dark:   #33455e;   /* borders on navy surfaces */

    /* type scale — fluid via clamp() */
    --fs-xs:   clamp(0.72rem, 0.68rem + 0.20vw, 0.85rem);
    --fs-sm:   clamp(0.88rem, 0.84rem + 0.20vw, 0.98rem);
    --fs-base: clamp(1.00rem, 0.94rem + 0.30vw, 1.125rem);
    --fs-md:   clamp(1.05rem, 0.95rem + 0.60vw, 1.40rem);
    --fs-lg:   clamp(1.30rem, 1.10rem + 1.00vw, 1.80rem);
    --fs-xl:   clamp(1.70rem, 1.30rem + 2.00vw, 2.80rem);
    --fs-2xl:  clamp(2.20rem, 1.60rem + 3.00vw, 3.80rem);
    --fs-hero: clamp(2.4rem, 1.7rem + 5.0vw, 5.25rem);

    /* space scale — fluid */
    --sp-2xs: clamp(0.35rem, 0.30rem + 0.25vw, 0.50rem);
    --sp-xs:  clamp(0.60rem, 0.50rem + 0.50vw, 0.90rem);
    --sp-sm:  clamp(0.90rem, 0.75rem + 0.75vw, 1.30rem);
    --sp-md:  clamp(1.20rem, 1.00rem + 1.00vw, 1.75rem);
    --sp-lg:  clamp(1.80rem, 1.40rem + 2.00vw, 3.00rem);
    --sp-xl:  clamp(2.50rem, 2.00rem + 2.50vw, 4.00rem);
    --sp-2xl: clamp(3.50rem, 2.50rem + 5.00vw, 7.00rem);

    /* line-height scale */
    --lh-display: 1.02;   /* hero/headline settings */
    --lh-tight:   1.1;    /* large headings */
    --lh-snug:    1.3;    /* card titles, compact UI */
    --lh-base:    1.6;    /* body copy */
    --lh-relaxed: 1.75;   /* long-form reading */

    /* letter-spacing scale */
    --ls-tight:  -0.01em; /* big display sizes */
    --ls-snug:    0.02em; /* mid headings */
    --ls-wide:    0.06em; /* nav, buttons */
    --ls-wider:   0.14em; /* eyebrows, labels */
    --ls-widest:  0.18em; /* smallest all-caps labels */

    /* z-index scale — named layers prevent stacking guesswork */
    --z-below-2:  -2;   /* deepest decorative (hero photo bg) */
    --z-below:    -1;   /* decorative behind content (scrims, glows) */
    --z-base:      0;   /* default flow */
    --z-raised:    10;   /* hovered cards, tooltips */
    --z-sticky:    30;   /* sticky in-flow elements, to-top button */
    --z-header:    40;   /* sticky site header */
    --z-overlay:   50;   /* dropdowns, popovers */
    --z-drawer:    60;   /* mobile nav drawer + backdrop */
    --z-skip:     100;   /* skip link — always reachable */

    /* misc */
    --chamfer: 0.75rem;
    --wrap-max: 72rem;
    /* two-tier heading system: display carries h1/h2, subhead carries h3-h6 */
    --ff-display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
    --ff-subhead: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
    --fw-display: 800;   /* Barlow: heavy for hero/section titles */
    --fw-subhead: 700;   /* slightly lighter for card/sub titles */
    --ls-display: 0.01em; /* condensed caps benefit from a hair of tracking */
    --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  }

  /* Wide-gamut upgrade: browsers that support oklch() get the richer,
     perceptually-uniform palette; everyone else keeps the hex above. */
  @supports (color: oklch(0.5 0.1 250)) {
    :root {
      --orange:      oklch(0.68 0.21 41);
      --orange-hot:  oklch(0.74 0.20 50);
      --orange-dim:  oklch(0.55 0.17 41);
      --navy:        oklch(0.24 0.05 258);
      --navy-deep:   oklch(0.18 0.04 258);
      --navy-mid:    oklch(0.31 0.06 258);
      --paper:       oklch(0.98 0.005 90);
      --paper-dim:   oklch(0.94 0.008 90);
      --yellow:      oklch(0.86 0.17 92);
      --ink-soft:    oklch(0.42 0.03 258);
      --line:        oklch(0.90 0.01 258);
      --err:         oklch(0.48 0.19 28);
      --err-border:  oklch(0.55 0.20 28);
      --err-bg:      oklch(0.95 0.04 28);
      --ok-border:   oklch(0.55 0.15 150);
      --ok-bg:       oklch(0.95 0.04 150);
      --on-dark:     oklch(0.85 0.02 258);
      --on-dark-dim: oklch(0.72 0.03 258);
      --line-dark:   oklch(0.32 0.04 258);
    }
  }
}

/* ---------------- BASE ---------------- */
@layer base {
  html {
    color-scheme: light;
    hanging-punctuation: first last;
  }
  :root {
    accent-color: var(--orange-dim);   /* checkboxes, radios, progress */
    caret-color: var(--orange-dim);    /* text-input caret */
  }
  ::selection { background: var(--orange); color: var(--navy-deep); }

  /* ---- branded scrollbars ---- */
  /* Standard properties (Firefox, Chromium 121+) */
  html { scrollbar-color: var(--orange) var(--navy-deep); }
  /* WebKit fallback for older Safari/Chromium */
  html::-webkit-scrollbar { inline-size: 0.85rem; }
  html::-webkit-scrollbar-track { background: var(--navy-deep); }
  html::-webkit-scrollbar-thumb {
    background: var(--orange);
    border: 3px solid var(--navy-deep);
    border-radius: 0;
  }
  html::-webkit-scrollbar-thumb:hover { background: var(--orange-hot); }
  .drawer-nav { scrollbar-width: thin; scrollbar-color: var(--orange) transparent; }  /* slim themed scrollbar */

  body {
    font-family: var(--ff-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--navy);
    background: var(--paper);
    overflow-wrap: break-word;
    -webkit-tap-highlight-color: transparent;
  }
  a, button, input, select, textarea, [role="button"] { touch-action: manipulation; }
  main:focus { outline: none; } /* programmatic focus target for the to-top control */
  /* content links: refined underline metrics (nav/btn links opt out via text-decoration none) */
  p a { text-underline-offset: 0.15em; text-decoration-thickness: 2px; text-decoration-color: var(--orange); }
  p a:hover { text-decoration-color: var(--orange-hot); }
  h1, h2 {
    font-family: var(--ff-display);
    font-weight: var(--fw-display);
    text-transform: uppercase;
    letter-spacing: var(--ls-display);
    line-height: var(--lh-tight);
    text-wrap: balance;
  }
  h3, h4, h5, h6 {
    font-family: var(--ff-subhead);
    font-weight: var(--fw-subhead);
    text-transform: uppercase;
    letter-spacing: var(--ls-snug);
    line-height: var(--lh-snug);
    text-wrap: balance;
  }
  h4, h5 { line-height: var(--lh-snug); }
  p { max-inline-size: 65ch; }
  em.hl { font-style: normal; color: var(--orange-hot); }  /* inline highlight, no italics */
  strong { font-weight: 700; }  /* bold weight */
  abbr { text-decoration: none; }  /* no underline on abbreviations */
}

/* ---------------- LAYOUT ---------------- */
@layer layout {
  [id] { scroll-margin-block-start: clamp(5rem, 4rem + 4vw, 7.5rem); }  /* offset anchor jumps below sticky header */
  .wrap {
    width: min(100% - clamp(2rem, 1rem + 5vw, 5rem), var(--wrap-max));
    margin-inline: auto;
  }
  .skip-link {
    position: absolute; inset-block-start: -100%; inset-inline-start: 1rem;
    z-index: var(--z-skip); background: var(--navy-deep); color: var(--paper);
    font-weight: 700; padding: 0.75em 1.25em; text-decoration: none;
    transition: inset-block-start 150ms ease;
  }
  .skip-link:focus-visible { inset-block-start: 1rem; }  /* reveal skip-link on focus */

  .stripe {
    block-size: clamp(0.6rem, 0.4rem + 0.8vw, 1rem);
    /* 1px transition zones between stops anti-alias the diagonal edges */
    background: repeating-linear-gradient(-45deg,
      var(--yellow) 0 calc(1.25rem - 1px),
      var(--navy-deep) calc(1.25rem + 1px) calc(2.5rem - 1px),
      var(--yellow) calc(2.5rem + 1px));
  }
}

/* ---------------- COMPONENTS ---------------- */
@layer components {
  /* logo */
  .logo {
    display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0;
    font-family: var(--ff-display); font-weight: var(--fw-display); text-transform: uppercase;
    font-size: clamp(0.95rem, 0.82rem + 0.65vw, 1.55rem);
    line-height: 1; text-decoration: none;
  }
  .logo-name { line-height: 1.05; display: grid; min-width: 0; }  /* two-line wordmark stack */
  .logo-name-a { display: block; }  /* primary name line */
  .logo-name-b { display: block; font-size: 0.8em; color: var(--orange-dim); }  /* secondary "Cleaning LLC" line */
  .logo .dot {
    inline-size: 0.55em; block-size: 0.55em; flex: none;
    background: var(--orange);
    clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
  }

  /* buttons — chamfered corner */
  .btn {
    display: inline-block; text-decoration: none; text-align: center;
    font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-wide);
    font-size: clamp(0.85rem, 0.80rem + 0.30vw, 1rem);
    padding: 0.9em 1.6em;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%);
    transition: transform 150ms ease, background-color 150ms ease, color 150ms ease;
  }
  .btn:hover { transform: translateY(-2px); }  /* lift on hover */
  .btn:active { transform: translateY(0); }  /* settle on press */
  .btn-primary { background: var(--orange); color: var(--navy-deep); }  /* solid orange CTA */
  .btn-primary:hover { background: var(--orange-hot); }  /* brighten on hover */
  .btn-ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px var(--paper); }  /* outlined variant for dark bg */
  .btn-sm { --chamfer: 0.5rem; padding: 0.6em 1.1em; }  /* compact button */

  /* CTA rows — flex button groups anywhere */
  .cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }  /* button group, wraps */

  /* ---- header system ---- */
  .site-head {
    position: sticky; inset-block-start: 0; z-index: var(--z-header);
    background: var(--paper);
    border-block-end: 1px solid var(--line);
    transition: box-shadow 200ms ease;
  }
  .site-head.is-stuck { box-shadow: 0 8px 24px -16px oklch(0.18 0.04 258 / 0.45); }  /* shadow once scrolled */

  /* topbar — utility strip, 768+ */
  .topbar { display: none; background: var(--navy-deep); color: oklch(0.85 0.02 258); font-size: var(--fs-xs); max-inline-size: none; }  /* utility bar, hidden until 768 */
  .topbar-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); padding-block: 0.45rem; }  /* tag left, contact right */
  .topbar-tag { font-weight: 800; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--yellow); }  /* service-type label */
  .topbar-meta { display: flex; align-items: center; gap: var(--sp-md); }  /* location + email group */
  .topbar-item { display: inline-flex; align-items: center; gap: 0.45em; text-decoration: none; font-weight: 600; }  /* icon + text pair */
  .topbar-item .fa-solid { color: var(--orange-hot); }  /* accent the icon */
  a.topbar-item:hover { color: var(--orange-hot); }

  .head-row {
    display: flex; align-items: center; gap: var(--sp-xs);
    flex-wrap: nowrap;
    padding-block: clamp(0.7rem, 0.6rem + 0.5vw, 1.1rem);
    transition: padding 200ms ease;
  }
  .is-stuck .head-row { padding-block: clamp(0.5rem, 0.4rem + 0.5vw, 0.8rem); }  /* shrink header when scrolled */
  .head-row .logo { margin-inline-end: auto; min-width: 0; }  /* push nav/actions right */
  .head-call { display: none; }  /* call button hidden on mobile */
  .head-call .fa-solid { margin-inline-end: 0.5em; }  /* space phone icon */

  /* desktop nav — animated underline, 768+ */
  .site-nav ul { display: grid; gap: var(--sp-2xs); padding-block: var(--sp-xs); }  /* nav list (mobile: stacked) */
  .site-nav a {
    position: relative; display: block; text-decoration: none; font-weight: 700;
    font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-wide);
    padding: 0.65em 0.85em; white-space: nowrap;
  }
  .site-nav a::after {
    content: ""; position: absolute; inset-inline: 0.85em; inset-block-end: 0.35em;
    block-size: 3px; background: var(--orange);
    transform: scaleX(0); transform-origin: inline-start;
    transition: transform 200ms ease;
  }
  .site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }  /* grow underline on hover/focus */
  .site-nav a[aria-current="page"] { color: var(--orange-dim); }  /* current page highlight */
  .site-nav a[aria-current="page"]::after { transform: scaleX(1); }  /* underline current page */

  /* no-JS fallback: nav renders as a stacked block; .js collapses it on mobile */
  .js .site-nav { display: none; }  /* JS on: hide inline nav (use drawer) */
  .nav-toggle { display: none; }  /* hamburger hidden unless JS */

  /* hamburger — animates to X via aria-expanded */
  .js .nav-toggle {
    display: grid; place-items: center; flex: none;
    inline-size: 2.9rem; block-size: 2.9rem;
    background: var(--navy); color: var(--paper);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.6rem), calc(100% - 0.6rem) 100%, 0 100%);
  }
  .nav-toggle-icon { display: grid; gap: 0.32rem; inline-size: 1.25rem; }  /* three-bar icon */
  .nav-toggle-icon span {
    block-size: 2px; background: currentColor; border-radius: 1px;
    transition: transform 250ms ease, opacity 200ms ease;
    transform-origin: center;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(1) { transform: translateY(0.42rem) rotate(45deg); }  /* top bar -> X */
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(2) { opacity: 0; transform: scaleX(0); }  /* middle bar fades */
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(3) { transform: translateY(-0.42rem) rotate(-45deg); }  /* bottom bar -> X */

  /* Scroll lock while the drawer is open.
     showModal() traps focus and inerts the page but does NOT stop
     background scroll — that's on us. CSS-first via :has(), with a
     JS-toggled class fallback for engines without :has(). */
  html:has(.nav-drawer[open]),
  html.drawer-open { overflow: hidden; }

  /* drawer — native <dialog>, slides from inline-end */
  .nav-drawer {
    inset: 0 0 0 auto; margin: 0; padding: 0; border: none;
    inline-size: min(21rem, 88vw); block-size: 100dvh; max-block-size: none;
    background: var(--navy-deep); color: var(--paper);
    display: none; grid-template-rows: auto 1fr auto auto;
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), display 300ms allow-discrete, overlay 300ms allow-discrete;
  }
  .nav-drawer[open] { display: grid; transform: translateX(0); }  /* slide drawer in when open */
  .nav-drawer { overscroll-behavior: contain; } /* no scroll chaining out of the drawer */
  .drawer-nav { overscroll-behavior: contain; }  /* trap scroll inside drawer */
  @starting-style {
    .nav-drawer[open] { transform: translateX(100%); }
  }
  .nav-drawer::backdrop {
    background: oklch(0.18 0.04 258 / 0.55);
    backdrop-filter: blur(3px);
    transition: opacity 300ms ease, display 300ms allow-discrete, overlay 300ms allow-discrete;
    opacity: 1;
  }
  @starting-style {
    .nav-drawer[open]::backdrop { opacity: 0; }
  }
  .drawer-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    border-block-end: 1px solid oklch(0.32 0.04 258);
  }
  .drawer-logo { color: var(--paper); font-size: 1.05rem; }  /* drawer header wordmark */
  .drawer-close {
    display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem;
    background: oklch(0.30 0.05 258); color: var(--paper); font-size: 1.1rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0 100%);
  }
  .drawer-close:hover { background: var(--orange); color: var(--navy-deep); }  /* invert on hover */
  .drawer-nav { padding: var(--sp-xs) 0; overflow-y: auto; }  /* scrollable link list */
  .drawer-nav a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm);
    padding: 0.85em var(--sp-md); text-decoration: none;
    font-family: var(--ff-subhead); text-transform: uppercase; letter-spacing: var(--ls-snug);
    font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    border-inline-start: 4px solid transparent;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
  }
  .drawer-nav a .fa-solid { color: oklch(0.5 0.04 258); font-size: 0.8em; transition: transform 150ms ease, color 150ms ease; }  /* muted chevron */
  .drawer-nav a:hover, .drawer-nav a:focus-visible { background: oklch(0.24 0.05 258); border-color: var(--orange); }  /* highlight row */
  .drawer-nav a:hover .fa-solid { color: var(--orange-hot); transform: translateX(3px); }  /* nudge chevron */
  .drawer-nav a[aria-current="page"] { border-color: var(--orange); color: var(--orange-hot); }  /* mark current page */
  .drawer-contact { padding: var(--sp-md); border-block-start: 1px solid oklch(0.32 0.04 258); display: grid; gap: var(--sp-xs); }  /* drawer footer contacts */
  .drawer-label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--yellow); }  /* section label */
  .drawer-contact ul { display: grid; gap: 0.35rem; }  /* phone/email list */
  .drawer-contact li a { display: inline-flex; align-items: center; gap: 0.6em; text-decoration: none; font-weight: 700; font-size: var(--fs-sm); }  /* contact link */
  .drawer-contact li a .fa-solid { color: var(--orange); }  /* accent icon */
  .drawer-contact li a:hover { color: var(--orange-hot); }  /* brighten on hover */
  .drawer-cta { margin-block-start: var(--sp-2xs); text-align: center; }  /* drawer CTA button */
  .drawer-stripe { flex: none; }  /* fixed-height accent stripe */

  /* 768: topbar appears; header still uses the drawer (clean tablet range) */
  @media (min-width: 768px) {
    .topbar { display: block; }
    .head-call { display: inline-flex; align-items: center; white-space: nowrap; }
  }
  /* 1024: inline nav engages, hamburger retires — only where there's real room */
  @media (min-width: 1024px) {
    .nav-toggle, .js .nav-toggle { display: none; }
    .site-nav, .js .site-nav { display: block; }
    .head-row .logo { margin-inline-end: 0; }
    .site-nav { margin-inline: auto; }
    .site-nav ul { display: flex; align-items: center; gap: clamp(0.25rem, 0.1rem + 0.5vw, 0.9rem); padding-block: 0; }
    .site-nav a { padding: 0.5em 0.75em; font-size: clamp(0.8rem, 0.74rem + 0.2vw, 0.92rem); white-space: nowrap; }
  }

  /* ---- surface / card system ----
     One elevation + radius + border language for every boxed thing.
     --surface-* tokens keep cards, forms, panels, and callouts consistent. */
  :root {
    --surface-bg:      #fff;
    --surface-border:  1px solid var(--line);
    --surface-rail:    4px solid var(--orange);
    --surface-pad:     var(--sp-md);
    --elev-2: 0 12px 24px -12px oklch(0.24 0.05 258 / 0.35);
  }

  /* cards — container-aware: children scale to the card's own width,
     independent of viewport (a container is queried by its descendants) */
  .grid-cards > li { min-width: 0; display: grid; }  /* card cell can shrink */
  .card { container: svc-card / inline-size; }  /* card is a query container */
  @container svc-card (min-width: 24rem) {
    .card .icon { inline-size: 3.25rem; block-size: 3.25rem; font-size: 1.4rem; }
    .card h3, .card h4 { font-size: clamp(1.2rem, 1.1rem + 0.5cqi, 1.5rem); }
    .card p { font-size: var(--fs-base); }
  }
  .card {
    min-width: 0; background: var(--surface-bg);
    border: var(--surface-border); border-block-start: var(--surface-rail);
    padding: var(--surface-pad);
    display: grid; gap: 0.4rem; align-content: start;
    transition: transform 150ms ease, box-shadow 150ms ease;
  }
  .card:hover { transform: translateY(-4px); box-shadow: var(--elev-2); }  /* lift + shadow on hover */
  .card .icon {
    inline-size: 2.75rem; block-size: 2.75rem;
    display: grid; place-items: center;
    background: var(--navy); color: var(--orange-hot);
    font-size: 1.15rem;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
    margin-block-end: 0.35rem;
  }
  .line-item .who .fa-solid { color: var(--orange); margin-inline-end: 0.4em; }  /* accent contact icon */
  .btn .fa-solid { margin-inline-end: 0.5em; }  /* space button icon */
  .process-item h3 .fa-solid { color: var(--orange); font-size: 0.7em; margin-inline-end: 0.35em; vertical-align: 0.08em; }  /* accent step icon */
  .card h3, .card h4 {
    font-family: var(--ff-subhead); font-weight: var(--fw-subhead); text-transform: uppercase;
    font-size: clamp(1.05rem, 0.95rem + 0.50vw, 1.30rem); letter-spacing: var(--ls-snug);
  }
  .card p { font-size: var(--fs-sm); color: var(--ink-soft); }  /* card body text */
  .card .card-more { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--orange-dim); text-decoration: none; margin-block-start: 0.3rem; justify-self: start; }  /* "Details" link */
  .card .card-more:hover { color: var(--orange-hot); }  /* brighten on hover */

  /* eyebrow */
  .eyebrow {
    font-weight: 800; letter-spacing: var(--ls-widest); text-transform: uppercase;
    font-size: var(--fs-xs); color: var(--orange-dim);
  }
  .on-dark .eyebrow { color: var(--yellow); }  /* eyebrow on dark bg */

  /* contact line */
  .line-item {
    min-width: 0; border-inline-start: 3px solid var(--orange);
    padding-inline-start: 1rem; display: grid; gap: 0.15rem;
  }
  .line-item .who {
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-wider);
    text-transform: uppercase; color: oklch(0.72 0.03 258);
  }
  .line-item a {
    font-family: var(--ff-subhead); font-size: clamp(1.2rem, 1.05rem + 0.80vw, 1.70rem);
    text-decoration: none; letter-spacing: var(--ls-snug);
    font-variant-numeric: tabular-nums;
  }
  .line-item a:hover { color: var(--orange-hot); }  /* brighten phone/email */
  .line-item.on-light .who { color: var(--ink-soft); }  /* label on light bg */

  /* forms */
  .field { display: grid; gap: 0.3rem; min-width: 0; }  /* form field wrapper */
  .field label { font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); }  /* field label */
  .field .hint { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.35; }  /* helper text */
  .field input, .field textarea, .field select {
    inline-size: 100%; min-width: 0;
    padding: 0.55em 0.75em;
    border: 2px solid var(--line); border-radius: 0;
    background: #fff; color: var(--navy);
    font-size: var(--fs-sm);
    transition: border-color 120ms ease;
  }
  .field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ink-soft); }  /* darken border on hover */
  .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
    outline: 3px solid var(--orange-hot); outline-offset: 1px; border-color: var(--navy);
  }
  .field textarea { min-block-size: 6.5rem; max-block-size: 20rem; resize: vertical; field-sizing: content; }  /* auto-grow textarea */
  .req { color: var(--orange-dim); }  /* required asterisk */
  .form-status {
    border: 2px solid; padding: var(--sp-sm); font-weight: 600;
  }
  .form-status.ok { border-color: var(--ok-border); background: var(--ok-bg); }  /* success message */
  .form-status.err { border-color: var(--err-border); background: var(--err-bg); }  /* error message */
  .form-status ul { padding-inline-start: 1.25em; margin-block-start: 0.35em; }  /* error list */
  .form-status.err a { color: inherit; font-weight: 700; text-decoration-color: var(--err-border); }  /* link in error */
  .field-error {
    display: flex; align-items: flex-start; gap: 0.4em;
    font-size: var(--fs-xs); font-weight: 700; line-height: 1.25;
    color: var(--err); margin-block-start: 0.1rem;
  }
  .field-error .fa-solid { font-size: 0.9em; margin-block-start: 0.15em; flex: none; }  /* error icon */
  .field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--err-border); }  /* red border when invalid */
  .field :is(input, select, textarea):user-valid { border-color: var(--ok-border); }  /* green border when valid */
  .form-live { margin-block-end: var(--sp-md); scroll-margin-block-start: clamp(5rem, 4rem + 4vw, 7.5rem); }  /* JS status live-region */
  .form-live[hidden] { display: none; }  /* hidden until JS submits */
  .btn[disabled] { opacity: 0.7; cursor: progress; }  /* disabled during send */
  @keyframes fa-spin { to { transform: rotate(360deg); } }
  .fa-spin { animation: fa-spin 0.8s linear infinite; display: inline-block; }  /* spinner rotation */
  .hp-field { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }  /* honeypot (hidden from users) */
}

/* ---------------- SECTIONS ---------------- */
@layer sections {
  /* HERO — image-led full-bleed with directional scrim.
     Soft gradient stops + clip-path only; nothing here aliases. */
  .hero { position: relative; isolation: isolate; overflow: clip; background: var(--navy-deep); color: var(--paper); }  /* full-bleed image hero */
  .hero-bg { position: absolute; inset: 0; z-index: var(--z-below-2); margin: 0; }  /* hero photo layer */
  .hero-bg img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 70% center; }  /* cover-fit photo */
  .hero-bg::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 34%, oklch(1 0 0 / 0.13) 47%, oklch(1 0 0 / 0.03) 53%, transparent 64%);
    transform: translateX(-130%);
    animation: gleam 1.6s cubic-bezier(0.5, 0, 0.3, 1) 0.4s forwards;
  }
  @keyframes gleam { to { transform: translateX(130%); } }
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: var(--z-below);
    background:
      linear-gradient(100deg, oklch(0.15 0.04 258 / 0.97) 0%, oklch(0.16 0.04 258 / 0.90) 40%, oklch(0.17 0.04 258 / 0.58) 66%, oklch(0.18 0.04 258 / 0.30) 100%),
      linear-gradient(to top, oklch(0.15 0.04 258 / 0.9), transparent 24%);
  }
  .hero .wrap { display: grid; align-items: center; min-block-size: clamp(30rem, 24rem + 26vw, 44rem); padding-block: var(--sp-2xl); }  /* hero height + centering */
  .hero-copy { display: grid; gap: var(--sp-md); max-inline-size: 48rem; }  /* headline + CTA column */
  .hero h1 { font-size: var(--fs-hero); line-height: 1.0; max-inline-size: 16ch; letter-spacing: var(--ls-display); }  /* hero headline */
  .hero .tagline { font-size: var(--fs-md); font-weight: 500; color: oklch(0.9 0.015 258); max-inline-size: 46ch; }  /* hero subcopy */
  .hero .cta-row { margin-block-start: var(--sp-xs); }  /* hero buttons */
  /* trust row under the CTAs — replaces the floating panel */
  .hero-trust { display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-lg); margin-block-start: var(--sp-sm); padding-block-start: var(--sp-md); border-block-start: 1px solid oklch(0.98 0.005 90 / 0.15); }  /* trust badges row */
  .hero-trust li { display: inline-flex; align-items: center; gap: 0.55em; font-weight: 700; font-size: var(--fs-sm); color: oklch(0.9 0.015 258); }  /* single trust badge */
  .hero-trust li .fa-solid { color: var(--orange-hot); }  /* accent icon */

  /* page hero (inner pages) — solid navy, orange glow, optional photo scrim */
  .page-hero { position: relative; isolation: isolate; overflow: clip; background: var(--navy-deep); color: var(--paper); }  /* inner-page hero band */
  .page-hero::after {
    content: ""; position: absolute; inset: 0; z-index: var(--z-below); pointer-events: none;
    background: radial-gradient(60% 90% at 88% 22%, oklch(0.68 0.21 41 / 0.18), transparent 62%);
  }
  .page-hero.has-photo::before {
    content: ""; position: absolute; inset: 0; z-index: var(--z-below-2);
    background:
      linear-gradient(100deg, oklch(0.15 0.04 258 / 0.95) 0%, oklch(0.16 0.04 258 / 0.82) 52%, oklch(0.17 0.04 258 / 0.5) 100%),
      url("https://images.unsplash.com/photo-1669101602108-fa5ba89507ee?auto=format&fit=crop&q=55&w=1600") center / cover no-repeat var(--navy-deep);
  }
  .page-hero .wrap { display: grid; gap: var(--sp-sm); padding-block: clamp(3rem, 2.2rem + 5vw, 6rem); max-inline-size: var(--wrap-max); }  /* page-hero content */
  .page-hero .lede { max-inline-size: 54ch; }  /* intro line width */
  .page-hero h1 { font-size: var(--fs-2xl); max-inline-size: 20ch; }  /* page title */
  .page-hero .lede { font-size: var(--fs-md); font-weight: 500; color: oklch(0.87 0.02 258); }  /* page-hero intro */

  /* generic section rhythm */
  .section { padding-block: var(--sp-xl); }  /* standard vertical rhythm */
  .section-head { display: grid; gap: var(--sp-2xs); margin-block-end: var(--sp-lg); }  /* section title block */
  .section-head h2 { font-size: var(--fs-xl); }  /* section heading */
  .section-head .sub { color: var(--ink-soft); font-weight: 500; max-inline-size: 55ch; }  /* section subtitle */
  .section-alt { background: var(--paper-dim); }  /* alternating tint */

  /* grids */
  .grid-cards {
    display: grid; gap: var(--sp-sm);
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  }
  .grid-lines {
    display: grid; gap: var(--sp-sm);
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  }
  /* feature split: sticky heading rail + content, no dead columns */
  .grid-split { display: grid; gap: var(--sp-md); align-items: start; }  /* sticky-heading + content split */
  @media (min-width: 1024px) {
    .grid-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sp-xl); }
    .grid-split > .section-head { position: sticky; inset-block-start: clamp(5rem, 4rem + 4vw, 7.5rem); }
  }
  /* media split: text + image side by side, image never orphaned */
  .grid-media { display: grid; gap: var(--sp-md); align-items: center; }  /* text + image split */
  @media (min-width: 768px) {
    .grid-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-lg); }
    .grid-media.media-first > .media-figure { order: -1; }
  }

  /* process — numbered because the phases genuinely are a sequence */
  .process { counter-reset: step; align-self: center; }  /* numbered step list */
  .process-item {
    min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-sm); align-items: start;
    padding-block: var(--sp-sm);
    border-block-end: 1px solid var(--line);
  }
  .process-item::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    font-family: var(--ff-display);
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.4rem);
    color: var(--orange); line-height: 1;
    padding-block-start: 0.1em;
  }
  .process-item h3 { font-size: var(--fs-lg); }  /* step title */
  .process-item p { font-size: var(--fs-sm); color: var(--ink-soft); }  /* step body */

  /* media figures — chamfered photo blocks */
  .media-figure { min-width: 0; margin: 0; }  /* image in a split */
  .media-figure + p, .media-figure ~ p { margin-block-start: var(--sp-sm); }  /* space text after figure */
  .media-figure img {
    inline-size: 100%; block-size: 100%; object-fit: cover;
    aspect-ratio: 4 / 3;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 0 100%);
    border-block-end: 4px solid var(--orange);
  }
  .media-figure figcaption {
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-wider);
    text-transform: uppercase; color: var(--ink-soft);
    margin-block-start: var(--sp-2xs);
  }

  /* dark CTA band */
  .cta-band {
    position: relative; isolation: isolate; overflow: clip;
    background: var(--navy); color: var(--paper);
  }
  .cta-band::before {
    content: ""; position: absolute; inset: 0; z-index: var(--z-below-2);
    background:
      linear-gradient(100deg, oklch(0.15 0.04 258 / 0.96) 0%, oklch(0.16 0.04 258 / 0.86) 55%, oklch(0.17 0.04 258 / 0.72) 100%),
      url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&q=55&w=1600") center / cover no-repeat;
  }
  .cta-band::after {
    content: ""; position: absolute; inset: 0; z-index: var(--z-below);
    pointer-events: none;
    background: radial-gradient(70% 100% at 85% 30%, oklch(0.68 0.21 41 / 0.16), transparent 60%);
  }
  .cta-band .wrap {
    display: grid; gap: var(--sp-md); padding-block: var(--sp-xl);
    justify-items: start; align-items: center;
  }
  @media (min-width: 768px) {
    .cta-band .wrap {
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
      column-gap: var(--sp-2xl); align-items: start;
    }
    .cta-band h2 { grid-column: 1; }
    .cta-band p { grid-column: 1; max-inline-size: 48ch; }
    .cta-band .grid-lines { grid-column: 2; grid-row: 1 / span 3; align-self: center; grid-template-columns: minmax(0, 1fr); }
    .cta-band .wrap > .btn { grid-column: 1; justify-self: start; }
  }
  .cta-band h2 { font-size: var(--fs-xl); }  /* CTA headline */
  .cta-band h2 em { font-style: normal; color: var(--yellow); }  /* highlighted phrase */
  .cta-band p { color: var(--on-dark); }  /* CTA subcopy */

  /* stat strip */
  .stat-strip { background: var(--orange); color: var(--navy-deep); }  /* orange stats band */
  .stat-strip .wrap {
    display: grid; gap: var(--sp-md); padding-block: var(--sp-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  }
  .stat { min-width: 0; display: grid; gap: 0.1rem; }  /* single stat */
  .stat .num { font-family: var(--ff-display); font-size: var(--fs-xl); line-height: 1; }  /* big number */
  .stat .lbl { font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-wider); font-size: var(--fs-xs); }  /* stat label */

  /* experience strip — name-drop credibility */
  .exp-strip { background: var(--paper-dim); border-block: 1px solid var(--line); }  /* client credibility band */
  .exp-strip .wrap {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
    gap: var(--sp-2xs) var(--sp-md);
    padding-block: var(--sp-sm);
    text-align: center;
  }
  .exp-strip .lbl { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--ink-soft); }  /* strip label */
  .exp-strip .names { font-family: var(--ff-display); text-transform: uppercase; font-size: var(--fs-md); letter-spacing: var(--ls-snug); display: flex; flex-wrap: wrap; gap: var(--sp-2xs) var(--sp-md); }  /* client names */
  .exp-strip .names span::after { content: "·"; color: var(--orange); margin-inline-start: var(--sp-md); }  /* dot separator */
  .exp-strip .names span:last-child::after { content: ""; margin: 0; }  /* no trailing dot */

  /* team cards — chamfered photo frame, ready for real images */
  .team-grid {
    display: grid; gap: var(--sp-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    max-inline-size: 48rem;
  }
  .team-grid > li { min-width: 0; display: grid; }  /* team cell */
  .team-card { min-width: 0; display: grid; gap: var(--sp-xs); align-content: start; }  /* team member card */
  .photo-frame {
    position: relative; aspect-ratio: 4 / 4.4; overflow: clip; min-width: 0;
    background: radial-gradient(90% 70% at 50% 30%, oklch(0.30 0.05 258), oklch(0.22 0.04 258));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 0 100%);
    border-block-end: 4px solid var(--orange);
    display: grid; place-items: center;
  }
  .photo-frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }  /* cover-fit headshot */
  .photo-frame .placeholder {
    display: grid; justify-items: center; gap: 0.6rem; max-inline-size: 100%;
    font-family: var(--ff-subhead); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-wide);
    color: oklch(0.62 0.03 258); font-size: var(--fs-xs); text-align: center; padding: var(--sp-sm);
  }
  .photo-frame .placeholder .fa-solid { font-size: 2.4rem; color: oklch(0.42 0.05 258); }  /* camera placeholder icon */
  .team-card h3 { font-size: var(--fs-lg); }  /* member name */
  .team-card .role { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--orange-dim); }  /* member role */
  .team-card .bio { font-size: var(--fs-sm); color: var(--ink-soft); }  /* member bio */
  .team-card .reach a { font-weight: 800; text-decoration: none; }  /* member phone */
  .team-card .reach a:hover { color: var(--orange-hot); }  /* brighten on hover */

  /* ============ FOOTER ============ */
  .site-foot { background: var(--navy-deep); color: var(--paper); }  /* footer shell */

  /* --- CTA banner --- */
  .foot-banner { background: linear-gradient(105deg, var(--navy) 0%, var(--navy-mid) 100%); position: relative; }  /* footer CTA banner */
  .foot-banner-in {
    display: grid; gap: var(--sp-md);
    padding-block: var(--sp-lg);
    align-items: center;
  }
  .foot-banner-copy { min-width: 0; }  /* banner text block */
  .foot-banner-eyebrow {
    font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-wider);
    font-size: var(--fs-xs); color: var(--yellow); margin-block-end: var(--sp-2xs);
  }
  .foot-banner h2 { font-size: var(--fs-xl); color: var(--paper); line-height: var(--lh-tight); }  /* banner headline */
  .foot-banner h2 em { font-style: normal; color: var(--orange-hot); }  /* highlighted phrase */
  .foot-banner-actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }  /* banner buttons */
  @media (min-width: 768px) {
    .foot-banner-in { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-xl); }
    .foot-banner-actions { flex-wrap: nowrap; }
  }

  /* --- main body --- */
  .foot-body {
    display: grid; gap: var(--sp-lg);
    padding-block: var(--sp-xl) var(--sp-lg);
  }
  @media (min-width: 1024px) {
    .foot-body { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr); gap: var(--sp-2xl); }
    .foot-cols { border-inline-start: 1px solid var(--line-dark); padding-inline-start: var(--sp-xl); }
  }

  /* brand + contact (prominent left block) */
  .foot-primary { display: grid; gap: var(--sp-sm); align-content: start; min-width: 0; }  /* brand + contacts column */
  .logo-foot { color: var(--paper); }  /* footer wordmark */
  .foot-tag {
    font-family: var(--ff-body); font-weight: 700;
    font-size: clamp(0.7rem, 0.65rem + 0.18vw, 0.8rem);
    letter-spacing: var(--ls-wide); text-transform: uppercase;
    color: var(--yellow); margin-block-start: 0.15rem;
  }
  .foot-copy { color: oklch(0.76 0.02 258); font-size: var(--fs-sm); max-inline-size: 46ch; }  /* footer description */
  .foot-contacts {
    display: grid; gap: var(--sp-sm); margin-block-start: var(--sp-2xs);
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 480px) { .foot-contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .foot-contacts li { display: flex; align-items: center; gap: var(--sp-xs); min-width: 0; }  /* contact row */
  .foot-contact-ic {
    flex: none; display: grid; place-items: center;
    inline-size: 2.5rem; block-size: 2.5rem; font-size: 1rem;
    background: oklch(0.30 0.05 258); color: var(--orange-hot);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0 100%);
  }
  .foot-contact-txt { display: grid; gap: 0.05rem; min-width: 0; }  /* label + number */
  .foot-contact-txt .who {
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-wide);
    text-transform: uppercase; color: oklch(0.68 0.03 258);
  }
  .foot-contact-txt a {
    text-decoration: none; font-weight: 800; font-size: var(--fs-base);
    color: var(--paper); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  }
  .foot-contact-txt a:hover { color: var(--orange-hot); }  /* brighten on hover */

  /* link + info columns (right) */
  .foot-cols {
    min-width: 0;
    display: grid; gap: var(--sp-lg) var(--sp-md);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }
  @media (min-width: 640px) { .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-lg); } }
  .foot-col { min-width: 0; display: grid; gap: var(--sp-2xs); align-content: start; }  /* footer link column */
  .foot-col-wide { grid-column: span 2; }  /* wide column (mobile) */
  @media (min-width: 640px) { .foot-col-wide { grid-column: auto; } }
  .foot-h {
    font-family: var(--ff-subhead); font-weight: var(--fw-subhead); text-transform: uppercase;
    font-size: var(--fs-sm); letter-spacing: var(--ls-wide); color: var(--paper);
    padding-block-end: var(--sp-2xs); margin-block-end: var(--sp-2xs);
    border-block-end: 2px solid var(--orange); justify-self: start;
  }
  .foot-col ul { display: grid; gap: 0.1rem; }  /* link list */
  .foot-col a {
    display: inline-block; text-decoration: none; font-size: var(--fs-sm); font-weight: 600;
    padding-block: 0.35em; color: var(--on-dark);
    transition: color 150ms ease, padding-inline-start 150ms ease;
  }
  .foot-col a:hover { color: var(--orange-hot); padding-inline-start: 0.35em; }  /* shift + brighten on hover */
  .foot-hours li { display: flex; justify-content: space-between; gap: var(--sp-xs); font-size: var(--fs-sm); color: oklch(0.82 0.02 258); padding-block: 0.2em; }  /* day + hours row */
  .foot-hours li span:first-child { min-width: 0; }  /* day label */
  .foot-hours li span:last-child { font-weight: 700; color: var(--paper); white-space: nowrap; flex: none; }  /* hours value */
  .foot-badge { margin-block-start: var(--sp-2xs); display: flex; align-items: flex-start; gap: 0.5em; min-width: 0; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--yellow); line-height: 1.3; }  /* area/hours badge */
  .foot-badge .fa-solid { flex: none; margin-block-start: 0.15em; color: var(--yellow); }  /* badge icon */

  /* --- legal band --- */
  .foot-legal-band { background: oklch(0.14 0.03 258); border-block-start: 1px solid var(--line-dark); }  /* copyright bar */
  .foot-legal {
    display: flex; flex-wrap: wrap; gap: var(--sp-2xs) var(--sp-md);
    align-items: center; justify-content: space-between;
    padding-block: var(--sp-md); padding-inline-end: 4rem;
  }
  .foot-legal p { font-size: var(--fs-xs); color: oklch(0.66 0.02 258); }  /* legal text */
  .foot-legal-tag { font-weight: 600; color: oklch(0.58 0.03 258); }  /* tagline note */


  /* services page — numbered feature blocks with watermark + checklist */
  .svc-section { position: relative; overflow: clip; }  /* service block */
  .svc-head { position: relative; display: grid; gap: var(--sp-xs); align-content: start; isolation: isolate; }  /* service heading (sticky rail) */
  .svc-head h2 { font-size: var(--fs-xl); }  /* service title */
  .svc-head .sub { color: var(--ink-soft); font-weight: 500; max-inline-size: 55ch; }  /* service description */
  @media (min-width: 1024px) {
    .svc-head { position: sticky; inset-block-start: clamp(5rem, 4rem + 4vw, 7.5rem); }
  }
  /* giant faint watermark icon behind the counter */
  .svc-watermark {
    position: absolute; z-index: -1;
    inset-block-start: -0.35em; inset-inline-start: -0.15em;
    font-size: clamp(7rem, 5rem + 12vw, 12rem); line-height: 1;
    color: var(--orange); opacity: 0.08; pointer-events: none;
  }
  .svc-count {
    font-family: var(--ff-display); font-size: clamp(2.4rem, 1.8rem + 2.5vw, 3.6rem);
    line-height: 1; color: var(--orange); letter-spacing: var(--ls-display); font-weight: 800;
  }
  .svc-count span { color: var(--line); font-size: 0.5em; }  /* total count (e.g. /06) */
  .svc-cta { justify-self: start; margin-block-start: var(--sp-xs); }  /* per-service CTA */
  .svc-points {
    display: grid; gap: var(--sp-xs); align-content: start;
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 640px) { .svc-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .svc-points li {
    min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7em; align-items: start;
    background: #fff; border: 1px solid var(--line); border-block-start: 3px solid var(--orange);
    padding: var(--sp-sm) var(--sp-md);
    font-weight: 600; font-size: var(--fs-sm);
    transition: transform 150ms ease, box-shadow 150ms ease;
  }
  .svc-points li:hover { transform: translateY(-3px); box-shadow: 0 10px 22px -14px oklch(0.24 0.05 258 / 0.4); }  /* lift on hover */
  .svc-points li .fa-solid { color: var(--orange); margin-block-start: 0.2em; }  /* checkmark */

  /* dark service section — breaks up the vanilla */
  .svc-section-dark { background: var(--navy-deep); color: var(--paper); }  /* alternating dark section */
  .svc-section-dark .svc-head h2 { color: var(--paper); }  /* title on dark */
  .svc-section-dark .svc-head .sub { color: oklch(0.82 0.02 258); }  /* sub on dark */
  .svc-section-dark .svc-count span { color: oklch(0.42 0.05 258); }  /* count on dark */
  .svc-section-dark .svc-watermark { color: var(--orange); opacity: 0.12; }  /* watermark on dark */
  .svc-section-dark .svc-points li {
    background: oklch(0.22 0.04 258); border-color: oklch(0.32 0.04 258);
    color: var(--paper);
  }
  .svc-section-dark .svc-points li:hover { box-shadow: 0 12px 24px -14px oklch(0.05 0.02 258 / 0.7); }

    /* prose column — headline + stacked paragraphs */
  .prose { display: grid; gap: var(--sp-sm); align-content: start; }  /* stacked paragraph column */
  .prose h2 { font-size: var(--fs-xl); }  /* prose heading */
  .prose .eyebrow { margin-block-end: calc(-1 * var(--sp-2xs)); }  /* tighten eyebrow gap */

  /* contact page — aside rail + form card */
  .grid-form { display: grid; gap: var(--sp-lg); align-items: start; }  /* contact aside + form */
  @media (min-width: 768px) {
    .grid-form { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: var(--sp-xl); }
  }
  .contact-aside { display: grid; gap: var(--sp-md); align-content: start; }  /* contact info rail */
  .contact-aside .section-head { margin-block-end: 0; }  /* no extra gap */
  .contact-aside .section-head h2 { font-size: var(--fs-lg); }  /* smaller aside heading */
  .contact-aside .section-head .sub { font-size: var(--fs-sm); }  /* aside subtitle */
  .contact-lines { display: grid; gap: var(--sp-xs); }  /* phone/email list */
  .contact-assure { display: grid; gap: var(--sp-2xs); }  /* reassurance list */
  .contact-assure li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6em; align-items: start; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-soft); }  /* reassurance item */
  .contact-assure li .fa-solid { color: var(--orange); margin-block-start: 0.15em; }  /* accent icon */
  /* form field grid — two-up where there's room, key fields full width */
  .form-grid { display: grid; gap: var(--sp-sm); grid-template-columns: minmax(0, 1fr); }  /* form field grid */
  @media (min-width: 480px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .form-grid .field-full,
  .form-grid .form-submit,
  .form-grid .hp-field,
  .form-grid .form-status,
  .form-grid .form-live { grid-column: 1 / -1; }
  .form-submit { margin-block-start: var(--sp-2xs); }  /* submit button row */

  .contact-form {
    background: #fff; border: 1px solid var(--line); border-block-start: 4px solid var(--orange);
    padding: var(--sp-lg);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.25rem), calc(100% - 1.25rem) 100%, 0 100%);
  }

  /* legal / policy pages — readable long-form with sticky TOC */
  .legal-wrap { display: grid; gap: var(--sp-lg); align-items: start; }  /* TOC + policy body */
  @media (min-width: 1024px) {
    .legal-wrap { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--sp-2xl); }
  }
  .legal-toc { display: grid; gap: var(--sp-2xs); align-content: start; }  /* sticky table of contents */
  @media (min-width: 1024px) { .legal-toc { position: sticky; inset-block-start: clamp(5rem, 4rem + 4vw, 7.5rem); } }
  .legal-toc .foot-h { margin-block-end: var(--sp-xs); }
  .legal-toc a {
    display: block; text-decoration: none; font-size: var(--fs-sm); font-weight: 600;
    color: var(--ink-soft); padding: 0.4em 0.6em; border-inline-start: 2px solid var(--line);
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
  }
  .legal-toc a:hover { border-color: var(--orange); color: var(--navy); background: var(--paper-dim); }  /* highlight TOC link */
  .legal-body { max-inline-size: 68ch; display: grid; gap: var(--sp-lg); }  /* readable policy column */
  .legal-updated { font-size: var(--fs-sm); color: var(--ink-soft); font-weight: 600; }  /* "last updated" line */
  .legal-section { display: grid; gap: var(--sp-sm); }  /* policy section */
  .legal-section h2 { font-size: var(--fs-lg); }  /* section heading */
  .legal-section h3 { font-size: var(--fs-md); color: var(--navy); }  /* subsection heading */
  .legal-section p, .legal-section li { color: oklch(0.32 0.03 258); }  /* body text */
  .legal-section ul { display: grid; gap: var(--sp-2xs); padding-inline-start: 1.25em; }  /* bulleted list */
  .legal-section ul li { padding-inline-start: 0.25em; }
  .legal-section ul li::marker { color: var(--orange); }  /* orange bullets */
  .legal-callout {
    background: var(--paper-dim); border-inline-start: 4px solid var(--orange);
    padding: var(--sp-sm) var(--sp-md); display: grid; gap: 0.35rem;
  }
  .legal-callout .foot-h { border: none; padding: 0; margin: 0; font-size: var(--fs-sm); }  /* callout heading */
  .legal-section a { color: var(--orange-dim); text-underline-offset: 0.15em; text-decoration-thickness: 2px; }  /* inline link */
  .legal-section a:hover { color: var(--orange-hot); }  /* brighten on hover */
  .legal-table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); }  /* cookie table */
  .legal-table th, .legal-table td { text-align: start; padding: 0.6em 0.75em; border: 1px solid var(--line); vertical-align: top; }
  .legal-table th { background: var(--paper-dim); font-family: var(--ff-subhead); text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--fs-xs); }  /* table header */
}

  /* ---------------- RESPONSIVE LADDER ----------------
   Deliberate UX steps at each house breakpoint.
   Base 320px is the mobile-first default throughout. */
@layer sections {
  /* 320 base: single column, full-width tap targets */
  .cta-row .btn { flex: 1 1 100%; }
  .stat-strip .wrap { grid-template-columns: minmax(0, 1fr); }
  .stat { text-align: center; justify-items: center; }
  .exp-strip .wrap { flex-direction: column; align-items: center; }

  /* 480: buttons shrink to content, stats pair up */
  @media (min-width: 480px) {
    .cta-row .btn { flex: 0 1 auto; }
    .stat-strip .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* odd last stat centers beneath the pair — inverted pyramid, no blank cell */
    .stat-strip .wrap > .stat:last-child:nth-child(odd) {
      grid-column: 1 / -1;
      margin-block-start: var(--sp-xs);
      padding-block-start: var(--sp-xs);
      border-block-start: 3px solid oklch(0.30 0.10 41 / 0.55);
    }
    .exp-strip .wrap { flex-direction: row; align-items: baseline; flex-wrap: nowrap; }
  }

  /* 640: card grids go two-up, team side by side, stats gain dividers */
  @media (min-width: 640px) {
    .stat + .stat { border-inline-start: 3px solid oklch(0.30 0.10 41 / 0.55); }
    .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cards[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
    .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-strip .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* reset the inverted-pyramid span — now all three sit in one row */
    .stat-strip .wrap > .stat:last-child:nth-child(odd) {
      grid-column: auto; margin-block-start: 0; padding-block-start: 0; border-block-start: none;
    }
  }

  /* 768: nav switches to row (components layer), split layouts engage */
  @media (min-width: 768px) {
    .page-hero .wrap { padding-block: clamp(3rem, 2.5rem + 2.5vw, 5rem); }
  }

  /* 1024: three-up cards */
  @media (min-width: 1024px) {
    .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-cards[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
    .grid-lines { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* 1280: CTA band copy column gets a touch more room */
  @media (min-width: 1280px) {
    .cta-band .wrap { column-gap: calc(var(--sp-2xl) * 1.5); }
  }

  /* 1440: content canvas widens */
  @media (min-width: 1440px) {
    :root { --wrap-max: 80rem; }
  }
}

/* ---------------- TO-TOP CONTROL ---------------- */
@layer components {
  .to-top {
    position: fixed;
    inset-block-end: clamp(1rem, 0.75rem + 1.25vw, 2rem);
    inset-inline-end: clamp(1rem, 0.75rem + 1.25vw, 2rem);
    z-index: var(--z-sticky);
    inline-size: 3rem; block-size: 3rem;
    display: grid; place-items: center;
    background: var(--navy); color: var(--orange-hot);
    font-size: 1.1rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.7rem), calc(100% - 0.7rem) 100%, 0 100%);
    box-shadow: 0 10px 24px -12px oklch(0.18 0.04 258 / 0.6);
    opacity: 0; translate: 0 0.75rem;
    transition: opacity 250ms ease, translate 250ms ease, background-color 150ms ease;
  }
  .to-top.is-visible { opacity: 1; translate: 0 0; }  /* show when scrolled */
  .to-top:hover { background: var(--orange); color: var(--navy-deep); }  /* invert on hover */
  .to-top[hidden] { display: none; }  /* hidden by default */
}

/* ---------------- PERFORMANCE ---------------- */
@layer utilities {
  /* Below-fold sections skip rendering work until scrolled near */
  .cv { content-visibility: auto; contain-intrinsic-size: auto 40rem; }  /* skip offscreen render (perf) */
  /* Paragraph rag control (modern text-wrap; harmless where unsupported) */
  p { text-wrap: pretty; }
}

/* ---------------- USER PREFERENCE ADAPTATIONS ---------------- */
@layer utilities {
  @media (prefers-contrast: more) {
    :root { --line: oklch(0.65 0.02 258); }
    .card { border-width: 2px; }
    :focus-visible { outline-width: 4px; }
  }
  @media (prefers-reduced-transparency: reduce) {
    .nav-drawer::backdrop { backdrop-filter: none; background: oklch(0.18 0.04 258 / 0.75); }
  }
}

/* ---------------- UTILITIES ---------------- */
@layer utilities {
  .on-dark { color: var(--paper); }  /* light text utility */
  .visually-hidden {
    position: absolute; inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* CSP-safe hooks (no inline styles under nonce CSP) */
@layer utilities {
  .grid-split .section-head { margin-block-end: 0; }  /* no gap in split heading */
  [data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- CROSS-BROWSER / A11Y PROTECTIONS ---------------- */
@layer utilities {
  /* WCAG 2.2 (2.5.8) Target Size — interactive controls get a comfortable
     minimum hit area so touch users aren't fighting tiny targets. */
  .btn, .nav-toggle, .to-top, .foot-contact-ic,
  .site-nav a, .foot-col a, .drawer-nav a {
    min-block-size: 44px;
  }
  .btn, .site-nav a, .foot-col a, .drawer-nav a {
    display: inline-flex; align-items: center; justify-content: center;
  }
  .site-nav a, .foot-col a { justify-content: flex-start; }

  /* Windows High Contrast / Forced Colors Mode — make sure custom-painted
     UI (clip-path buttons, icon tiles, focus rings) stays visible and
     interactive when the OS overrides our palette. */
  @media (forced-colors: active) {
    .btn, .nav-toggle, .to-top, .foot-contact-ic,
    .svc-points li, .card, .contact-form, .legal-callout {
      border: 1px solid CanvasText;
    }
    .btn-primary { forced-color-adjust: none; background: Highlight; color: HighlightText; }
    :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
    .stripe, .svc-watermark, .hero-bg::after { forced-color-adjust: none; }
    .site-nav a[aria-current="page"]::after,
    .site-nav a:hover::after { background: LinkText; }
  }

  /* Save-Data / reduced-data — drop heavy decorative background images
     for users on metered or slow connections. */
  @media (prefers-reduced-data: reduce) {
    .hero-bg, .cta-band::before, .page-hero.has-photo::before {
      background-image: none !important;
    }
    .hero-bg { display: none; }
  }
}

/* ---------------- PRINT ---------------- */
@media print {
  *, *::before, *::after {
    background: #fff !important; color: #000 !important;
    box-shadow: none !important; text-shadow: none !important;
  }
  .site-head, .topbar, .nav-drawer, .nav-toggle, .to-top,
  .foot-banner, .cta-band, .stripe, .svc-watermark,
  .hero-bg, .hero-trust, .svc-cta, .contact-form { display: none !important; }
  body { font-size: 12pt; line-height: 1.4; }
  a { text-decoration: underline; }
  /* expose link targets so a printed page is still useful */
  main a[href^="http"]::after,
  main a[href^="tel:"]::after,
  main a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
  main a[href^="/"]::after { content: ""; }
  h1, h2, h3 { page-break-after: avoid; break-after: avoid; }
  img, figure, .svc-points li, .card { page-break-inside: avoid; break-inside: avoid; }
  .wrap { width: 100%; max-width: none; }
}