/* ============================================================
   WITHOUT A SPOT LLC — styles.css · v1
   Consolidated production stylesheet for all pages.
   Brand: safety orange / steel-lift navy ramp / hi-vis yellow.
   Mobile-first, min-width only: 320/480/640/768/1024/1280/1440.
   Layer order is authoritative; late blocks in a layer win on
   purpose (cascade rule) — do not reorder casually.
   ============================================================ */

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

/* ---------------- 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; }
  html, body { max-inline-size: 100%; overflow-x: hidden; overflow-x: clip; }
  body { min-height: 100svh; }
  img, svg, video, canvas, iframe, embed, object, table { max-inline-size: 100%; }
  input, select, textarea { max-inline-size: 100%; }
  figure { max-inline-size: 100%; }
  :where(
    [class*="hero"], [class*="ticket"], [class*="ledger"], [class*="phase"],
    [class*="foot-"], [class*="drawer"], [class*="ba"],
    .cta-row, .head-row, .topbar-row, .topbar-meta, .wrap
  ) > * { min-width: 0; }
  h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  :where(a[href^="mailto:"], .topbar-item, .foot-copy) { overflow-wrap: anywhere; }
  .btn { max-inline-size: 100%; }
  :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 {
    --orange:      #f26722;
    --orange-hot:  #ff7a33;
    --orange-dim:  #c2560f;
    --navy:        #122f5a;
    --navy-deep:   #072045;
    --navy-ink:    #01163a;
    --navy-mid:    #224271;
    --paper:       #f9f7f2;
    --paper-dim:   #efece4;
    --yellow:      #f5c518;
    --ink-soft:    #5a6472;
    --line:        #dde0e5;
    --focus:       var(--orange-hot);
    --on-dark:     #c2cfe2;
    --on-dark-dim: #93a6c1;
    --line-dark:   #274064;

    --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.6rem, 1.6rem + 5.6vw, 5.8rem);

    --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);


    /* semantic type tokens — components must reference these, never raw clamp() */
    --fs-2xs:       clamp(0.55rem, 0.5rem + 0.25vw, 0.72rem);   /* logo tagline */
    --fs-fine:      clamp(0.70rem, 0.65rem + 0.18vw, 0.80rem);  /* fine print */
    --fs-nav:       clamp(0.80rem, 0.74rem + 0.20vw, 0.92rem);  /* desktop nav */
    --fs-btn:       clamp(0.95rem, 0.90rem + 0.35vw, 1.10rem);  /* buttons */
    --fs-drawer-link: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);  /* drawer nav */
    --fs-tel-line:  clamp(1.15rem, 1rem + 0.8vw, 1.6rem);       /* ticket + rail tels (consolidated) */
    --fs-logo:      clamp(0.95rem, 0.82rem + 0.65vw, 1.55rem);  /* wordmark */
    --fs-ledger:    clamp(1.5rem, 1.1rem + 2vw, 2.6rem);        /* ledger row names */
    --fs-numeral:   clamp(2rem, 1.5rem + 2.4vw, 3.3rem);        /* phase + spec numerals (consolidated) */
    --fs-statement: clamp(2.4rem, 1.6rem + 4.5vw, 5rem);        /* statement bands */
    --fs-tel-hero:  clamp(2.2rem, 1.2rem + 6vw, 5.5rem);        /* the giant number */

    /* structural tokens */
    --gutter:        clamp(2rem, 1rem + 5vw, 5rem);             /* wrap side gutters */
    --stripe-h:      clamp(0.6rem, 0.4rem + 0.8vw, 1rem);
    --head-pad:      clamp(0.7rem, 0.6rem + 0.5vw, 1.1rem);
    --head-pad-min:  clamp(0.5rem, 0.4rem + 0.5vw, 0.8rem);
    --nav-gap:       clamp(0.25rem, 0.1rem + 0.5vw, 0.9rem);
    --edge-float:    clamp(1rem, 0.75rem + 1.25vw, 2rem);       /* to-top offsets */
    --anchor-offset: clamp(5rem, 4rem + 4vw, 7.5rem);           /* sticky header clearance */
    --hero-min:      clamp(30rem, 24rem + 24vw, 42rem);
    --band-min:      clamp(26rem, 20rem + 20vw, 36rem);
    --statement-min: clamp(24rem, 18rem + 20vw, 34rem);

    --lh-tight: 1.1;
    --lh-snug:  1.3;
    --lh-base:  1.6;

    --ls-snug:   0.02em;
    --ls-wide:   0.06em;
    --ls-wider:  0.14em;

    --z-below-2: -2;
    --z-below:   -1;
    --z-raised:  10;
    --z-sticky:  30;
    --z-header:  40;
    --z-skip:   100;

    --chamfer: 0.75rem;
    --wrap-max: 72rem;
    --ff-display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
    --fw-display: 800;
    --fw-subhead: 700;
    --ls-display: 0.01em;
    --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  }
  @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.31 0.085 258);
      --navy-deep:   oklch(0.25 0.075 258);
      --navy-ink:    oklch(0.21 0.075 258);
      --navy-mid:    oklch(0.38 0.09 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);
      --on-dark:     oklch(0.85 0.03 258);
      --on-dark-dim: oklch(0.72 0.045 258);
      --line-dark:   oklch(0.37 0.07 258);
    }
  }
@layer tokens {
  /* ---- effect & tone tokens (fallback color space) ---- */
  :root {
    --on-dark-strong: #d4dfef;
    --on-dark-soft:   #a4b2c8;
    --on-dark-faint:  #879ab5;
    --line-strong:    #b0b8c4;
    --line-glass:     rgba(249, 247, 242, 0.25);
    --stroke-outline: rgba(194, 207, 226, 0.85);
    --danger-tint:    rgba(179, 52, 31, 0.07);
    --glow:           rgba(34, 66, 113, 0.45);
    --photo-tint:     0.14; /* photo treatment strength — one knob, site-wide */
    --seam:           clamp(2.4rem, 1.6rem + 3.2vw, 4.4rem); /* stepped section-seam depth */
    --drop-panel:     drop-shadow(0 10px 20px rgba(7, 32, 69, 0.24));
    --drop-card:      drop-shadow(0 6px 14px rgba(7, 32, 69, 0.22));
    /* dimensional SURFACE fills — light blooms in, falls off to the base,
       the same treatment as the crew-frame cards. */
    --surface-navy:      radial-gradient(120% 120% at 50% 0%, #16376a, #122f5a 55%, #0c2650);
    --surface-navy-deep: radial-gradient(120% 130% at 30% 0%, #0f2c5e, #072045 60%, #04173a);
    --surface-paper:     radial-gradient(120% 120% at 50% 0%, #fbfaf7, #f7f6f2 55%, #efece4);
    --backdrop:       rgba(7, 32, 69, 0.55);
    --backdrop-heavy: rgba(7, 32, 69, 0.75);
    --shadow-panel: 0 18px 40px -22px rgba(1, 22, 58, 0.8);
    --shadow-head:  0 8px 24px -16px rgba(7, 32, 69, 0.45);
    --shadow-float: 0 10px 24px -12px rgba(7, 32, 69, 0.6);
    --scrim-photo:
      linear-gradient(100deg, rgba(1, 22, 58, 0.96) 0%, rgba(1, 22, 58, 0.88) 45%, rgba(7, 32, 69, 0.58) 100%),
      linear-gradient(to top, rgba(1, 22, 58, 0.92), transparent 38%);
    --scrim-foot:
      linear-gradient(to top, rgba(1, 22, 58, 0.95) 0%, rgba(1, 22, 58, 0.55) 45%, rgba(7, 32, 69, 0.2) 100%);
    --gleam-sweep:
      linear-gradient(115deg, transparent 34%, rgba(255,255,255,0.13) 47%, rgba(255,255,255,0.03) 53%, transparent 64%);
    /* chamfer cut scale */
    --cut-sm: 0.6rem;
    --cut-md: 0.75rem;
    --cut-lg: 1.25rem;
    --cut-xl: 1.5rem;
    /* weight scale */
    --fw-medium: 500;
    --fw-semi:   600;
    --fw-bold:   700;
    --fw-heavy:  800;
  }
  @supports (color: oklch(0.5 0.1 250)) {
    :root {
      --on-dark-strong: oklch(0.9 0.025 258);
      --on-dark-soft:   oklch(0.76 0.035 258);
      --on-dark-faint:  oklch(0.68 0.045 258);
      --line-strong:    oklch(0.78 0.02 258);
      --line-glass:     oklch(0.98 0.005 90 / 0.25);
      --stroke-outline: oklch(0.85 0.03 258 / 0.85);
      --danger-tint:    oklch(0.5 0.17 30 / 0.07);
      --glow:           oklch(0.38 0.09 258 / 0.45);
      --drop-panel:     drop-shadow(0 10px 20px oklch(0.25 0.075 258 / 0.24));
      --drop-card:      drop-shadow(0 6px 14px oklch(0.25 0.075 258 / 0.22));
      --surface-navy:      radial-gradient(120% 120% at 50% 0%, oklch(0.36 0.09 258), oklch(0.31 0.085 258) 55%, oklch(0.27 0.08 258));
      --surface-navy-deep: radial-gradient(120% 130% at 30% 0%, oklch(0.30 0.085 258), oklch(0.25 0.075 258) 60%, oklch(0.20 0.07 258));
      --surface-paper:     radial-gradient(120% 120% at 50% 0%, oklch(0.99 0.004 90), oklch(0.98 0.005 90) 55%, oklch(0.95 0.006 90));
      --backdrop:       oklch(0.25 0.075 258 / 0.55);
      --backdrop-heavy: oklch(0.25 0.075 258 / 0.75);
      --shadow-panel: 0 18px 40px -22px oklch(0.19 0.065 258 / 0.8);
      --shadow-head:  0 8px 24px -16px oklch(0.25 0.075 258 / 0.45);
      --shadow-float: 0 10px 24px -12px oklch(0.25 0.075 258 / 0.6);
      --scrim-photo:
        linear-gradient(100deg, oklch(0.21 0.075 258 / 0.96) 0%, oklch(0.22 0.075 258 / 0.88) 45%, oklch(0.24 0.078 258 / 0.58) 100%),
        linear-gradient(to top, oklch(0.21 0.075 258 / 0.92), transparent 38%);
      --scrim-foot:
        linear-gradient(to top, oklch(0.21 0.075 258 / 0.95) 0%, oklch(0.22 0.075 258 / 0.55) 45%, oklch(0.23 0.078 258 / 0.2) 100%);
      --gleam-sweep:
        linear-gradient(115deg, transparent 34%, oklch(1 0 0 / 0.13) 47%, oklch(1 0 0 / 0.03) 53%, transparent 64%);
    }
  }
}

}

/* ---------------- BASE ---------------- */
@layer base {
  html { color-scheme: light; hanging-punctuation: first last; }
  :root { accent-color: var(--orange-dim); caret-color: var(--orange-dim); }
  ::selection { background: var(--orange); color: var(--navy-deep); }
  html { scrollbar-color: var(--orange) var(--navy-deep); }
  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); }
  html::-webkit-scrollbar-thumb:hover { background: var(--orange-hot); }

  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 { touch-action: manipulation; }
  main:focus { outline: 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-display); font-weight: var(--fw-subhead);
    text-transform: uppercase; letter-spacing: var(--ls-snug);
    line-height: var(--lh-snug); text-wrap: balance;
  }
  p { max-inline-size: 65ch; text-wrap: pretty; }
  abbr { text-decoration: none; }
  .skip-link {
    position: absolute; inset-inline-start: 1rem; inset-block-start: -100%;
    z-index: var(--z-skip); background: var(--yellow); color: var(--navy-deep);
    font-weight: var(--fw-heavy); padding: 0.7em 1.2em; text-decoration: none;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%);
  }
  .skip-link:focus-visible { inset-block-start: 1rem; }
}

/* ---------------- LAYOUT ---------------- */
@layer layout {
  [id] { scroll-margin-block-start: var(--anchor-offset); }
  .wrap { width: min(100% - var(--gutter), var(--wrap-max)); margin-inline: auto; }
  .stripe {
    block-size: var(--stripe-h);
    background: repeating-linear-gradient(-45deg,
      var(--yellow) 0 1.25rem, var(--navy-deep) 1.25rem 2.5rem);
  }
  .section { padding-block: var(--sp-2xl); }
  .surface-scope { background: var(--surface-paper); }

  /* ---- trust strip: national names, quiet flex under the hero dock ---- */
  .trust { background: var(--paper); border-block-end: 1px solid var(--line); }
  .trust .wrap {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2xs) var(--sp-lg);
    padding-block: var(--sp-sm);
  }
  .trust-lbl {
    font-size: var(--fs-2xs); font-weight: var(--fw-heavy); letter-spacing: var(--ls-wider);
    text-transform: uppercase; color: var(--ink-soft);
  }
  .trust-name {
    font-family: var(--ff-display); font-weight: var(--fw-display); text-transform: uppercase;
    font-size: var(--fs-md); color: var(--navy); opacity: 0.55;
  }
  .trust-more { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--ink-soft); }
  /* section headers set editorial: hanging index + rule, no eyebrow-pill pattern */
  .sec-mark {
    display: flex; align-items: baseline; gap: var(--sp-sm);
    border-block-end: 3px solid var(--navy);
    padding-block-end: var(--sp-xs);
    margin-block-end: var(--sp-lg);
  }
  .sec-mark .idx {
    font-family: var(--ff-display); font-weight: var(--fw-display);
    font-size: var(--fs-md); color: var(--orange);
    letter-spacing: var(--ls-display); flex: none;
  }
  .sec-mark h2 { font-size: var(--fs-xl); }
  .sec-mark .aside {
    margin-inline-start: auto; flex: none;
    font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
    text-transform: uppercase; color: var(--ink-soft);
    display: none;
  }
  @media (min-width: 640px) { .sec-mark .aside { display: block; } }
  @media (min-width: 1280px) { :root { --wrap-max: 76rem; } }
  @media (min-width: 1440px) { :root { --wrap-max: 80rem; } }
}

/* ---------------- COMPONENTS ---------------- */
@layer components {
  .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: var(--fs-logo);
    line-height: 1; text-decoration: none;
  }
  .logo-name { line-height: 1.15; display: grid; min-width: 0; }
  .logo-name-b {
    display: none; font-family: var(--ff-body);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
    color: var(--orange-dim); text-transform: uppercase;
  }
  @media (min-width: 480px) { .logo-name-b { display: block; } }
  .logo .logo-icon {
    font-size: 1.35em; color: var(--orange); flex: none;
    transition: color 150ms ease;
  }
  .logo:hover .logo-icon, .logo:focus-visible .logo-icon { color: var(--orange-hot); }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    text-decoration: none; text-align: center;
    font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: var(--ls-wide);
    font-size: var(--fs-btn);
    padding: 0.9em 1.6em; min-block-size: 44px;
    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); }
  .btn:active { transform: translateY(0); }
  .btn-primary { background: var(--orange); color: var(--navy-deep); }
  .btn-primary:hover { background: var(--orange-hot); }
  .btn-ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px var(--paper); }
  .btn-sm { --chamfer: var(--cut-sm); padding: 0.6em 1.1em; }
  .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm) var(--sp-md); }
  /* quiet secondary action: a plain underlined text link, not a second button */
  .quiet-link {
    font-weight: var(--fw-bold); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-wide);
    text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 2px;
    text-decoration-color: var(--orange);
  }
  .quiet-link:hover { text-decoration-color: var(--orange-hot); color: var(--orange-hot); }

  /* ---- header ---- */
  .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: var(--shadow-head); }
  .topbar { display: none; background: var(--navy-deep); color: var(--on-dark); font-size: var(--fs-xs); max-inline-size: none; }
  .topbar-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); padding-block: 0.45rem; }
  .topbar-tag { font-weight: var(--fw-heavy); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--yellow); }
  .topbar-meta { display: flex; align-items: center; gap: var(--sp-md); }
  .topbar-item { text-decoration: none; font-weight: var(--fw-semi); }
  a.topbar-item:hover { color: var(--orange-hot); }
  .head-row {
    display: flex; align-items: center; gap: var(--sp-xs); flex-wrap: nowrap;
    padding-block: var(--head-pad);
    transition: padding 200ms ease;
  }
  .is-stuck .head-row { padding-block: var(--head-pad-min); }
  .head-row .logo { margin-inline-end: auto; min-width: 0; }
  .head-call { display: none; }
  .site-nav ul { display: grid; gap: var(--sp-2xs); padding-block: var(--sp-xs); }
  .site-nav a {
    position: relative; display: inline-flex; align-items: center; min-block-size: 44px;
    text-decoration: none; font-weight: var(--fw-bold);
    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,
  .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .site-nav a[aria-current="page"] { color: var(--orange-dim); }
  .js .site-nav { display: none; }
  .nav-toggle { display: none; }
  .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% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%);
  }
  .nav-toggle-icon { display: grid; gap: 0.32rem; inline-size: 1.25rem; }
  .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); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(3) { transform: translateY(-0.42rem) rotate(-45deg); }
  /* scroll-lock while the drawer is open — position:fixed at the saved
     offset (set inline via JS as `top`), not overflow:hidden. This is the
     mobile-safe version: overflow:hidden alone doesn't reliably restore
     the exact prior scroll position when removed on mobile browsers,
     which is what caused the page to visibly jump on close. */
  html.drawer-open { position: fixed; inset-inline: 0; inline-size: 100%; }

  /* drawer */
  .nav-drawer {
    inset: 0 0 0 auto; margin: 0; padding: 0;
    border: none; border-inline-start: 4px solid var(--orange);
    inline-size: min(21rem, 88vw); block-size: 100dvh; max-block-size: none;
    background: var(--navy-deep);
    box-shadow: var(--shadow-panel);
    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;
    overscroll-behavior: contain;
  }
  .nav-drawer[open] { display: grid; transform: translateX(0); }
  @starting-style { .nav-drawer[open] { transform: translateX(100%); } }
  .nav-drawer::backdrop {
    background: var(--backdrop);
    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 var(--line-dark);
  }
  .drawer-logo { color: var(--paper); font-size: 1.05rem; }
  .drawer-close {
    display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem;
    background: var(--navy-mid); color: var(--paper);
    font-size: 1.4rem; font-weight: var(--fw-bold); line-height: 1;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%);
  }
  .drawer-close:hover { background: var(--orange); color: var(--navy-deep); }
  .drawer-nav { padding: var(--sp-xs) 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--orange) transparent; }
  .drawer-nav a {
    display: flex; align-items: center; min-block-size: 44px;
    padding: 0.85em var(--sp-md); text-decoration: none;
    font-family: var(--ff-display); text-transform: uppercase; letter-spacing: var(--ls-snug);
    font-size: var(--fs-drawer-link); font-weight: var(--fw-subhead);
    border-inline-start: 4px solid transparent;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
  }
  .drawer-nav a:hover, .drawer-nav a:focus-visible { background: var(--navy); border-color: var(--orange); }
  .drawer-nav a[aria-current="page"] { border-color: var(--orange); color: var(--orange-hot); }
  .drawer-contact { padding: var(--sp-md); border-block-start: 1px solid var(--line-dark); display: grid; gap: var(--sp-xs); }
  .drawer-label { font-size: var(--fs-xs); font-weight: var(--fw-heavy); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--yellow); }
  /* rows tightened — the 40px tap target on each link (not this gap) was
     already doing the real work of spacing, so shrinking the gap tightens
     the visual density without shrinking anyone's tap target */
  .drawer-contact ul { display: grid; gap: 0.05rem; }
  .drawer-contact li { display: flex; gap: 0.6em; align-items: baseline; font-size: var(--fs-sm); }
  .drawer-contact li .who { color: var(--on-dark-dim); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--fs-xs); flex: none; min-inline-size: 4.5em; }
  .drawer-contact li a { text-decoration: none; font-weight: var(--fw-bold); min-block-size: 34px; display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
  .drawer-contact li a:hover { color: var(--orange-hot); }
  /* slimmer CTA — same reduced-padding pattern as .btn-sm elsewhere, kept
     as its own rule so it doesn't couple to that class in the markup */
  .drawer-cta {
    margin-block-start: var(--sp-2xs);
    --chamfer: var(--cut-sm);
    padding: 0.5em 1.2em;
    min-block-size: 38px; /* below the site's usual 44px floor, still clears
                              WCAG 2.2 AA's 24px Target Size minimum */
  }
  .drawer-stripe { flex: none; }
  @media (min-width: 768px) {
    .topbar { display: block; }
    .head-call { display: inline-flex; white-space: nowrap; }
  }
  @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: var(--nav-gap); padding-block: 0; }
    .site-nav a { padding: 0.5em 0.75em; font-size: var(--fs-nav); }
  }

  /* ---- mobile call bar: fixed thumb-reach actions; gone at 768+ ---- */
  .call-bar {
    position: fixed; inset-block-end: 0; inset-inline: 0; z-index: var(--z-nav, 40);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    border-block-start: 2px solid var(--yellow);
    padding-block-end: env(safe-area-inset-bottom, 0);
    background: var(--navy-ink);
  }
  .call-bar a {
    display: flex; align-items: center; justify-content: center; gap: 0.6em;
    min-block-size: 52px; text-decoration: none;
    font-family: var(--ff-display); font-weight: var(--fw-bold); text-transform: uppercase;
    letter-spacing: var(--ls-wide); font-size: var(--fs-sm); color: var(--paper);
  }
  .call-bar a .fa-solid { color: var(--yellow); font-size: 0.9em; }
  .call-bar .cb-bid { background: var(--orange); }
  .call-bar .cb-bid .fa-solid { color: #fff; }
  .call-bar .cb-bid:hover { background: var(--orange-hot); }
  .to-top {
    position: fixed;
    inset-block-end: var(--edge-float);
    inset-inline-end: var(--edge-float);
    z-index: var(--z-sticky);
    inline-size: 3rem; block-size: 3rem; min-block-size: 44px;
    display: grid; place-items: center;
    background: var(--navy); color: var(--orange-hot);
    font-size: 1.2rem; font-weight: var(--fw-heavy); line-height: 1;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-md)), calc(100% - var(--cut-md)) 100%, 0 100%);
    box-shadow: var(--shadow-float);
    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; }
  /* background-aware: default (navy/orange-hot) reads fine over light paper
     sections; swap to yellow/navy-deep when JS detects the button is
     currently sitting over a dark-navy section, where the default chip
     would otherwise blend into the backdrop. */
  .to-top.is-on-dark { background: var(--yellow); color: var(--navy-deep); }
  .to-top:hover { background: var(--orange); color: var(--navy-deep); }
  .to-top[hidden] { display: none; }
  /* mobile: content + to-top clear the fixed call bar; bar gone at 768+ (file order
     matters here — these overrides sit AFTER the base .to-top rule on purpose) */
  body { padding-block-end: calc(52px + env(safe-area-inset-bottom, 0px)); }
  .to-top { inset-block-end: calc(52px + env(safe-area-inset-bottom, 0px) + var(--sp-sm)); }
  @media (min-width: 768px) {
    .call-bar { display: none; }
    body { padding-block-end: 0; }
    .to-top { inset-block-end: var(--edge-float); }
  }
}

/* ---------------- SECTIONS ---------------- */
@layer sections {

  /* ========== HERO ========== */
  .hero { position: relative; isolation: isolate; overflow: clip; background: var(--surface-navy-deep); color: var(--paper); }
  .hero-bg { position: absolute; inset: 0; z-index: var(--z-below-2); margin: 0; }
  .hero-bg img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 72% center; }
  .hero-bg::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: var(--gleam-sweep);
    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: var(--scrim-photo);
  }
  .hero .wrap {
    display: grid; align-items: center;
    min-block-size: var(--hero-min);
    padding-block: var(--sp-2xl) calc(var(--sp-2xl) + var(--sp-lg));
  }
  .hero-copy { display: grid; gap: var(--sp-md); max-inline-size: 52rem; }
  /* job-ticket meta line instead of an eyebrow pill */
  .hero-meta {
    font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider);
    text-transform: uppercase; color: var(--yellow);
  }
  .hero-meta .sep { color: var(--orange); padding-inline: 0.5em; }
  .hero h1 { font-size: var(--fs-hero); line-height: 0.96; letter-spacing: var(--ls-display); }
  .hero h1 .ln { display: block; }
  .hero h1 .word-dusty {
    color: transparent;
    -webkit-text-stroke: 2px var(--stroke-outline);
    paint-order: stroke fill;
  }
  @supports not (-webkit-text-stroke: 2px #fff) {
    .hero h1 .word-dusty { color: var(--on-dark-dim); }
  }
  .hero h1 .word-spotless { color: var(--orange-hot); }
  .hero .tagline { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--on-dark-strong); max-inline-size: 46ch; }
  /* one button, one quiet link — not the two-button template row */
  .hero .quiet-link { color: var(--paper); }
  /* trust facts as a plain ruled line, no checkmark icons */
  .hero-facts {
    display: flex; flex-wrap: wrap; gap: 0.3em 0;
    font-weight: var(--fw-semi); font-size: var(--fs-sm); color: var(--on-dark-strong);
    border-block-start: 1px solid var(--line-glass);
    padding-block-start: var(--sp-sm);
    max-inline-size: 46ch;
  }
  .hero-facts li::after { content: "·"; color: var(--orange-hot); padding-inline: 0.6em; }
  .hero-facts li:last-child::after { content: none; }

  /* ========== DOCKED CREW TICKET ========== */
  .hero-dock { position: relative; z-index: var(--z-raised); }
  .ticket {
    background: var(--navy); color: var(--paper);
    border-inline-start: 5px solid var(--orange);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%);
    box-shadow: var(--shadow-panel);
    padding: var(--sp-md);
    display: grid; gap: var(--sp-sm);
    margin-block-start: calc(-1 * var(--sp-xl));
  }
  .ticket-head { display: grid; gap: 0.2rem; }
  .ticket-head h2 { font-size: var(--fs-md); letter-spacing: var(--ls-snug); }
  .ticket-head .note { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--yellow); }
  .ticket-lines { display: grid; gap: var(--sp-sm); grid-template-columns: minmax(0, 1fr); }
  .ticket-line {
    min-width: 0; display: grid; gap: 0.15rem;
    border-inline-start: 3px solid var(--line-dark);
    padding-inline-start: var(--sp-sm);
    transition: border-color 150ms ease;
  }
  .ticket-line:hover { border-color: var(--orange); }
  .ticket-line .who {
    font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider);
    text-transform: uppercase; color: var(--on-dark-dim);
  }
  .ticket-line a {
    font-family: var(--ff-display); font-weight: var(--fw-subhead);
    font-size: var(--fs-tel-line);
    text-decoration: none; letter-spacing: var(--ls-snug);
    font-variant-numeric: tabular-nums;
  }
  .ticket-line a:hover { color: var(--orange-hot); }
  @media (min-width: 640px) { .ticket-lines { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1024px) {
    .ticket { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--sp-xl); }
  }

  /* ========== SCOPE LEDGER — services as a closeout document ========== */
  .ledger-list { border-block-start: 1px solid var(--line); }
  .ledger-row {
    display: grid; gap: 0.2rem var(--sp-md);
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "no name" "no desc";
    align-items: baseline;
    padding-block: var(--sp-md);
    padding-inline: var(--sp-sm);
    border-block-end: 1px solid var(--line);
    position: relative;
    transition: background-color 180ms ease;
  }
  /* the hover fill bleeds past the wrap gutter for a full-bleed feel —
     lives on ::before (not the row itself) so it can extend past the
     row's own box; row content gets padding-inline above so numerals
     never sit flush against that fill's edge. */
  .ledger-row:hover::before, .ledger-row:focus-within::before { background: var(--paper-dim); }
  .ledger-row::before {
    content: ""; position: absolute; inset-block: 0; inset-inline: calc(-1 * var(--sp-md));
    background: transparent; z-index: var(--z-below); transition: background-color 180ms ease;
  }
  .ledger-row .no {
    grid-area: no;
    font-family: var(--ff-display); font-weight: var(--fw-display);
    font-size: var(--fs-md); color: var(--orange);
    letter-spacing: var(--ls-display);
    align-self: start; padding-block-start: 0.35em;
    min-inline-size: 2.4em;
  }
  .ledger-row h3 {
    grid-area: name;
    font-size: var(--fs-ledger);
    font-weight: var(--fw-display); letter-spacing: var(--ls-display);
    line-height: 1.05;
    transition: color 180ms ease, translate 180ms ease;
  }
  .ledger-row:hover h3 { color: var(--orange-dim); translate: 0.35rem 0; }
  .ledger-row .desc { grid-area: desc; font-size: var(--fs-sm); color: var(--ink-soft); max-inline-size: 52ch; }
  .ledger-row .tag {
    display: inline-block; vertical-align: 0.45em; margin-inline-start: 0.6em;
    background: var(--yellow); color: var(--navy-deep);
    font-family: var(--ff-body); font-weight: var(--fw-heavy); font-size: var(--fs-xs);
    letter-spacing: var(--ls-wider); text-transform: uppercase;
    padding: 0.35em 1.5em;
    clip-path: polygon(var(--cut-sm) 0, 100% 0, calc(100% - var(--cut-sm)) 100%, 0 100%);
  }
  .ledger-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm) var(--sp-md);
    padding-block-start: var(--sp-md);
    font-size: var(--fs-sm); color: var(--ink-soft); font-weight: var(--fw-medium);
  }

  /* ========== WALKTHROUGH — before/after, framed as the site walk ========== */
  .walk { background: var(--navy-deep); color: var(--paper); }
  .walk .sec-mark { border-color: var(--line-dark); }
  .walk .sec-mark .aside { color: var(--on-dark-dim); }
  .walk-grid { display: grid; gap: var(--sp-lg); align-items: center; }
  .walk-copy { display: grid; gap: var(--sp-sm); justify-items: start; }
  .walk-pull {
    font-family: var(--ff-display); font-weight: var(--fw-subhead); text-transform: uppercase;
    font-size: var(--fs-xl); line-height: 1.1; letter-spacing: var(--ls-snug);
    border-inline-start: 4px solid var(--orange); padding-inline-start: var(--sp-sm);
    color: var(--paper); text-wrap: balance;
  }
  .walk-pull em { font-style: normal; color: var(--yellow); }
  .walk-list { display: grid; min-width: 0; align-self: start; inline-size: 100%; max-inline-size: 40ch; }
  .walk-list li {
    display: flex; gap: 0.7em; align-items: baseline; min-width: 0;
    padding-block: 0.55rem; border-block-end: 1px solid var(--line-glass);
    color: var(--on-dark); font-weight: var(--fw-semi); font-size: var(--fs-sm);
  }
  .walk-list li:last-child { border-block-end: 0; }
  .walk-list .fa-solid { color: var(--yellow); flex: none; font-size: 0.85em; }
  .walk-copy .sub { color: var(--on-dark); font-weight: var(--fw-medium); max-inline-size: 44ch; }
  .walk-copy .hint {
    font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase;
    color: var(--yellow);
  }
  .ba {
    --pos: 50%;
    position: relative; min-width: 0; overflow: clip;
    aspect-ratio: 16 / 10;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-xl)), calc(100% - var(--cut-xl)) 100%, 0 100%);
    border-block-end: 4px solid var(--yellow);
    background: var(--navy);
  }
  .ba img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .ba-after { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
  .ba-divider {
    position: absolute; inset-block: 0; inset-inline-start: var(--pos);
    inline-size: 3px; translate: -50% 0;
    background: var(--orange); pointer-events: none;
  }
  .ba-divider::after {
    content: "\2194";
    position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
    translate: -50% -50%;
    display: grid; place-items: center;
    inline-size: 2.6rem; block-size: 2.6rem;
    background: var(--orange); color: var(--navy-deep);
    font-size: 1.15rem; font-weight: var(--fw-heavy); line-height: 1;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%);
  }
  .ba-range {
    position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
    opacity: 0; cursor: ew-resize; margin: 0;
  }
  .ba:has(.ba-range:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
  .ba-tag {
    position: absolute; inset-block-start: var(--sp-sm);
    font-weight: var(--fw-heavy); font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase;
    padding: 0.4em 0.9em; pointer-events: none;
  }
  .ba-tag-before { inset-inline-start: var(--sp-sm); background: var(--navy-deep); color: var(--paper); }
  .ba-tag-after  { inset-inline-end: var(--sp-sm); background: var(--yellow); color: var(--navy-deep); }
  @media (min-width: 1024px) {
    .walk-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sp-2xl); }
  }

  /* ========== PHASE RAIL ========== */
  .phase-rail { counter-reset: phase; display: grid; gap: var(--sp-md); position: relative; }
  /* glass panel cards: structure over the photo instead of floating text */
  .phase {
    min-width: 0; position: relative; display: grid; gap: var(--sp-2xs);
    align-content: start; justify-items: start;
    background: var(--backdrop);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid var(--line-glass);
    border-block-start: 4px solid var(--orange);
    padding: var(--sp-md);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-md)), calc(100% - var(--cut-md)) 100%, 0 100%);
  }
  .phase::before {
    counter-increment: phase;
    content: counter(phase, decimal-leading-zero);
    font-family: var(--ff-display); font-weight: var(--fw-display);
    font-size: var(--fs-md); line-height: 1;
    color: var(--navy-deep); background: var(--yellow);
    padding: 0.2em 0.8em; margin-block-end: var(--sp-2xs);
    clip-path: polygon(var(--cut-sm) 0, 100% 0, calc(100% - var(--cut-sm)) 100%, 0 100%);
    letter-spacing: var(--ls-display);
  }
  .phase h3 { font-size: var(--fs-lg); }
  .phase p { font-size: var(--fs-sm); color: var(--ink-soft); max-inline-size: 40ch; }
  /* the closer line under the rail — carries the quote's job without a quote-band */
  .phase-note {
    margin-block-start: var(--sp-lg);
    background: var(--backdrop-heavy);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-inline-start: 4px solid var(--orange);
    padding: var(--sp-sm) var(--sp-md);
    font-family: var(--ff-display); font-weight: var(--fw-subhead); text-transform: uppercase;
    font-size: var(--fs-lg); line-height: 1.2; letter-spacing: var(--ls-snug);
    max-inline-size: max-content; text-wrap: balance;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%);
  }
  .phase-note em { font-style: normal; color: var(--orange-dim); }
  @media (min-width: 768px) {
    .phase-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-lg); }
    /* dashed connector running behind the three cards */
    .phase-rail::before {
      content: ""; position: absolute; z-index: -1;
      inset-inline: 8%; inset-block-start: 50%;
      block-size: 3px;
      background: repeating-linear-gradient(90deg, var(--orange) 0 14px, transparent 14px 26px);
    }
    
  }

  /* ========== CTA CLOSE ========== */
  .cta-close { background: var(--navy); color: var(--paper); }
  .cta-close .wrap { display: grid; gap: var(--sp-md); padding-block: var(--sp-2xl); justify-items: start; }
  .cta-close .kicker {
    font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider);
    text-transform: uppercase; color: var(--yellow);
  }
  .cta-close :is(h1, h2) { font-size: var(--fs-xl); max-inline-size: 18ch; }
  .cta-close :is(h1, h2) em { font-style: normal; color: var(--yellow); }
  .cta-close .big-tel {
    font-family: var(--ff-display); font-weight: var(--fw-display);
    font-size: var(--fs-tel-hero); line-height: 1;
    letter-spacing: var(--ls-display); text-decoration: none;
    color: var(--orange-hot); font-variant-numeric: tabular-nums;
    transition: color 150ms ease;
  }
  .cta-close .big-tel:hover { color: var(--orange); }
  .cta-close .alt-lines { display: flex; flex-wrap: wrap; gap: var(--sp-2xs) var(--sp-lg); font-size: var(--fs-sm); color: var(--on-dark); }
  .cta-close .alt-lines a { font-weight: var(--fw-heavy); text-decoration: none; color: var(--paper); font-variant-numeric: tabular-nums; }
  .cta-close .alt-lines a:hover { color: var(--orange-hot); }
  .cta-close .alt-lines .who { color: var(--on-dark-dim); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--fs-xs); margin-inline-end: 0.5em; }

  /* ========== FOOTER ========== */
  .site-foot { position: relative; isolation: isolate; background: var(--navy-deep); color: var(--paper); overflow: clip; }
  /* footer keyword watermark — see keyword watermark system */
  .foot-body { display: grid; gap: var(--sp-lg); padding-block: var(--sp-xl) var(--sp-lg); }
  .foot-primary { display: grid; gap: var(--sp-xs); align-content: start; min-width: 0; }
  .foot-primary-copy { display: grid; gap: var(--sp-xs); align-content: start; min-width: 0; }
  .logo-foot { color: var(--paper); }
  .foot-tag {
    font-weight: var(--fw-bold); font-size: var(--fs-fine);
    letter-spacing: var(--ls-wide); text-transform: uppercase;
    color: var(--yellow);
  }
  .foot-copy { color: var(--on-dark-soft); font-size: var(--fs-sm); max-inline-size: 46ch; }
  /* contacts as a ruled ledger list — matches the scope section language */
  .foot-contacts { display: grid; margin-block-start: var(--sp-2xs); border-block-start: 1px solid var(--line-dark); }
  .foot-contacts li {
    display: flex; align-items: baseline; gap: var(--sp-sm); min-width: 0;
    padding-block: 0.55rem;
    border-block-end: 1px solid var(--line-dark);
  }
  .foot-contacts li > .fa-solid { flex: none; font-size: var(--fs-sm); color: var(--yellow); align-self: center; }
  .foot-contacts .who {
    flex: none; min-inline-size: 6.5em;
    font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
    text-transform: uppercase; color: var(--on-dark-faint);
  }
  .foot-contacts a {
    text-decoration: none; font-weight: var(--fw-heavy); font-size: var(--fs-base);
    color: var(--paper); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
    min-block-size: 32px; display: inline-flex; align-items: center;
  }
  .foot-contacts a:hover { color: var(--yellow); }
  /* mobile-first: single column stack at xs; the ledger of nav/hours/resources
     reads top-to-bottom with comfortable tap targets. */
  .foot-cols { min-width: 0; display: grid; gap: var(--sp-lg); grid-template-columns: minmax(0, 1fr); align-content: start; }
  .foot-links-group { min-width: 0; display: grid; gap: var(--sp-lg); align-content: start; }
  .foot-col { min-width: 0; display: grid; gap: var(--sp-2xs); align-content: start; }
  /* a middot marker (not a border rule) — it reads correctly whether the
     items sit side by side OR wrap to their own line at narrow widths.
     A vertical-rule separator broke exactly here: it only looks right
     when both items share a row, so a wrapped "Pricing" carried a stray
     border + left-margin from the horizontal layout and rendered as a
     fake indented sub-link under FAQ.
     .foot-col.foot-col-wide compounds both real ancestor classes so this
     always wins on specificity against the later plain ".foot-col ul"
     rule below, rather than depending on file order. */
  .foot-col.foot-col-wide ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem var(--sp-md); }
  .foot-col.foot-col-wide li { display: flex; align-items: center; }
  .foot-col.foot-col-wide li:not(:first-child)::before {
    content: "\00B7"; margin-inline-end: var(--sp-md);
    color: var(--on-dark-dim); font-weight: var(--fw-bold);
  }
  .foot-h {
    font-family: var(--ff-display); 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; }
  .foot-col a {
    display: inline-flex; align-items: center; gap: 0.6em; min-block-size: 44px;
    text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-semi);
    letter-spacing: var(--ls-snug);
    padding-block: 0.35em; color: var(--on-dark);
    transition: color 150ms ease, padding-inline-start 150ms ease;
  }
  .foot-col a .fa-solid { font-size: 0.85em; color: var(--orange-dim); transition: color 150ms ease; }
  .foot-col a:hover .fa-solid { color: var(--yellow); }
  .foot-col a:hover { color: var(--yellow); padding-inline-start: 0.35em; }
  .foot-hours li {
    display: flex; justify-content: space-between; gap: var(--sp-xs);
    font-size: var(--fs-sm); letter-spacing: var(--ls-snug); color: var(--on-dark); padding-block: 0.2em;
  }
  .foot-hours li span:last-child {
    font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
    color: var(--paper); white-space: nowrap; flex: none;
  }
  .foot-badge {
    margin-block-start: var(--sp-2xs); display: flex; align-items: flex-start; gap: 0.5em;
    font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase;
    letter-spacing: var(--ls-wider); color: var(--yellow); line-height: 1.6;
  }
  .foot-badge .fa-solid { flex: none; margin-block-start: 0.15em; }

  /* ---- 640-1023 (tablet): row 2 now mirrors row 1's split — Hours & Area
     under the copy column, and a real nested wrapper (.foot-links-group)
     holding Quick Links + Resources together under the contacts column.
     DOM order now matches visual order (Hours, then the links group), so
     none of this needs the `order` trickery the flat 3-column version
     required. The Quick Links <-> Resources gap and the Hours <-> links
     group gap are two INDEPENDENT nested grids now, each with its own
     gap value — solving the "these two gaps need to be different widths"
     problem structurally instead of needing spacer tracks or fr-share
     workarounds to fake it. */
  @media (min-width: 640px) {
    .foot-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-xl); align-items: start; }
    .foot-contacts { margin-block-start: 0; }

    .foot-cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--sp-xl); row-gap: var(--sp-lg); align-items: start;
    }
    .foot-links-group {
      display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
      column-gap: var(--sp-xl); align-items: start;
    }
    .foot-col-wide { border-block-start: 0; padding-block-start: 0; }
    /* Resources' own FAQ/Pricing links stack vertically at this width —
       they're sharing a narrower column, not the full row — so the
       horizontal middot-separated layout is swapped for a plain stack;
       the middot itself only makes sense between two items on one line. */
    .foot-col.foot-col-wide ul { display: grid; gap: 0.3rem; }
    .foot-col.foot-col-wide li:not(:first-child)::before { display: none; }
  }
  /* 1024+ (desktop/laptop): back to the original, untouched arrangement —
     Primary a single tall column, beside Quick Links/Hours/Resources
     stacked together on the right behind a divider. The user explicitly
     asked to keep this one as it was. .foot-links-group un-boxes
     (display: contents) so Quick Links and Resources become direct grid
     items of .foot-cols again, and `order` restores their original
     left/right positions (the tablet markup put Hours first in the DOM
     for the new nested layout, so order un-does that here). Every
     property the 640px block above touches gets an explicit reset. */
  @media (min-width: 1024px) {
    .foot-body { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr); gap: var(--sp-2xl); align-items: start; }
    .foot-primary { grid-template-columns: minmax(0, 1fr); }
    .foot-contacts { margin-block-start: var(--sp-2xs); }
    .foot-cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--sp-2xl);
      border-inline-start: 1px solid var(--line-dark); padding-inline-start: var(--sp-2xl);
    }
    .foot-links-group { display: contents; }
    .foot-cols nav[aria-label="Quick Links"] { order: 1; }
    .foot-cols section[aria-label="Hours and coverage"] { order: 2; }
    .foot-col-wide {
      order: 3; grid-column: 1 / -1;
      border-block-start: 1px solid var(--line-dark); padding-block-start: var(--sp-md);
    }
    .foot-col.foot-col-wide ul { display: flex; flex-wrap: wrap; }
    .foot-col.foot-col-wide li:not(:first-child)::before { display: inline; }
  }
  .foot-legal-band { background: var(--navy-ink); border-block-start: 1px solid var(--line-dark); }
  /* below 640: one centered column, tight gap — the old flex-wrap row
     was letting copyright + credit share a line while the legal links
     wrapped alone underneath, an uneven two-row shape with a lot of dead
     space between the halves. Centered stacking reads cleanly at true
     mobile widths instead of depending on where a wrap happens to fall.
     640-1023: switches to a plain left-aligned wrapping row — there's
     enough width by then that centering isn't needed, it just wraps
     naturally wherever it runs out of room. 1024+ keeps the original
     three-zone spread. 13px throughout (not a fluid token, and dropped
     from the previous 14px): this bar is deliberately small and fixed,
     not something that should grow with the viewport. */
  .foot-legal {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--sp-2xs);
    padding-block: var(--sp-md); padding-inline: var(--sp-md);
    font-size: 12px;
  }
  .foot-legal-copy, .foot-legal-credit { color: var(--on-dark-faint); }
  .foot-legal-credit a {
    color: var(--orange); font-weight: var(--fw-bold);
    text-decoration: underline; text-decoration-color: transparent;
    text-underline-offset: 0.2em;
    transition: color 150ms ease, text-decoration-color 150ms ease;
  }
  .foot-legal-credit a:hover { color: var(--yellow); text-decoration-color: var(--yellow); }
  .foot-legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2xs) var(--sp-sm); }
  .foot-legal-links a {
    font-weight: var(--fw-semi); color: var(--on-dark-faint);
    text-decoration: underline; text-decoration-color: var(--line-dark);
    text-underline-offset: 0.2em; text-decoration-thickness: 1px;
    transition: color 150ms ease, text-decoration-color 150ms ease;
  }
  .foot-legal-links a:hover { color: var(--yellow); text-decoration-color: var(--yellow); }
  @media (min-width: 640px) {
    .foot-legal {
      flex-direction: row; flex-wrap: wrap; align-items: center; text-align: start;
      justify-content: flex-start; gap: var(--sp-2xs) var(--sp-lg);
      padding-inline: var(--sp-md);
    }
    .foot-legal-links { justify-content: flex-start; }
  }
  @media (min-width: 1024px) {
    .foot-legal {
      justify-content: space-between;
      padding-inline: 0 4rem;
    }
  }
}

/* ---------------- UTILITIES ---------------- */
@layer utilities {
  .on-dark { color: var(--paper); }
  .visually-hidden {
    position: absolute; inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .cv { content-visibility: auto; contain-intrinsic-size: auto 40rem; }
  @media (prefers-contrast: more) {
    :root { --line: oklch(0.65 0.02 258); }
    .ticket { border-width: 2px; }
    :focus-visible { outline-width: 4px; }
  }
  @media (prefers-reduced-transparency: reduce) {
    .nav-drawer::backdrop { backdrop-filter: none; background: var(--backdrop-heavy); }
  }
  @media (forced-colors: active) {
    .btn, .nav-toggle, .to-top, .ticket, .ba { border: 1px solid CanvasText; }
    .btn-primary { forced-color-adjust: none; background: Highlight; color: HighlightText; }
    :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
    .stripe, .hero-bg::after, .ba-divider, .scroll-progress { forced-color-adjust: none; }
    .site-nav a[aria-current="page"]::after, .site-nav a:hover::after { background: LinkText; }
  }
  @media (prefers-reduced-data: reduce) {
    .hero-bg { display: none; }
    .ba img { display: none; }
    .ba { aspect-ratio: auto; min-block-size: 8rem; }
  }
}

/* ---------------- MOTION — pruned to the essentials ---------------- */
@layer motion {
  /* scroll progress rail — position indicator, not decoration */
  .scroll-progress {
    position: absolute; inset-block-end: -1px; inset-inline: 0;
    block-size: 3px;
    background: linear-gradient(90deg, var(--orange), var(--orange-hot));
    transform: scaleX(0); transform-origin: 0 50%;
    pointer-events: none;
  }
  @supports (animation-timeline: scroll()) {
    .scroll-progress { animation: was-progress linear both; animation-timeline: scroll(root block); }
  }
  @keyframes was-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* hero copy settles once behind the gleam — the page's ONE entrance moment */
  @media (prefers-reduced-motion: no-preference) {
    .hero-copy > * { animation: was-settle 0.6s ease-out both; }
    .hero-copy > :nth-child(1) { animation-delay: 0.10s; }
    .hero-copy > :nth-child(2) { animation-delay: 0.22s; }
    .hero-copy > :nth-child(3) { animation-delay: 0.34s; }
    .hero-copy > :nth-child(4) { animation-delay: 0.46s; }
    .hero-copy > :nth-child(5) { animation-delay: 0.58s; }
    .ticket { animation: was-settle 0.6s ease-out 0.5s both; }
  }
  @keyframes was-settle {
    from { opacity: 0; translate: 0 0.6rem; }
    to   { opacity: 1; translate: 0 0; }
  }
  /* no scroll-reveal confetti below the fold — content is just there. */
}


/* ---------------- GLOW POOLS ----------------
   The crew-frame depth, generalized: a soft mid-blue radial breathing
   inside each solid dark surface, falling off into the deep. Positioned
   per-surface toward the content focus. Photo sections keep their
   scrims untouched. Placed late in the sections layer on purpose:
   equal specificity, later file order wins the background-image longhand. */
@layer sections {
  .site-foot {
    background-image: radial-gradient(120% 80% at 50% 0%, var(--glow), transparent 62%), var(--surface-navy-deep);
  }
  .foot-legal-band { background-image: none; } /* the ink band stays grounded */

  /* ---- KEYWORD WATERMARK SYSTEM v2 ----
     [data-wm="Phrase"] sets a large, READABLE service keyword inside the
     section frame — bottom-right, fully in view, no fade mask. Real industry
     phrases ("Commercial Cleaning", "Floorcare", "Pressure Washing").
     Hidden below 640px: phone screens are too narrow for phrase marks. */
  [data-wm] { position: relative; isolation: isolate; overflow: clip; }
  [data-wm] > .wrap { position: relative; z-index: 1; }
  [data-wm]::after {
    content: attr(data-wm); position: absolute; z-index: 0; pointer-events: none;
    display: none; /* enabled at 640+ below */
    inset-block-end: 0.4rem; inset-inline-end: 1.25rem;
    font-family: var(--ff-display); font-weight: var(--fw-display);
    font-size: var(--wm-size, clamp(3rem, 1rem + 8.5vw, 10rem));
    line-height: 1; letter-spacing: var(--ls-display);
    text-transform: uppercase; white-space: nowrap;
    color: var(--paper); opacity: var(--wm-opacity, 0.09);
  }
  @media (min-width: 640px) { [data-wm]::after { display: block; } }
  /* light-surface keyword sits in navy */
  [data-wm].on-light::after { color: var(--navy); opacity: var(--wm-opacity, 0.07); }
  .site-foot > .foot-body, .site-foot > .foot-legal-band { position: relative; z-index: 1; }
  /* the footer's watermark must clear the opaque legal band at the bottom */
  .site-foot[data-wm]::after { inset-block-end: 3.9rem; }
  /* short single-word marks scale up further for artistic effect */
  .walk[data-wm], #floorcare[data-wm] { --wm-size: clamp(4rem, 2rem + 11vw, 14rem); }
  .site-foot { --wm-opacity: 0.08; } /* under the legal band, keep it quiet */
  @media (prefers-reduced-data: reduce) { [data-wm]::after { display: none; } }
  @media (forced-colors: active) { [data-wm]::after { display: none; } }


  .cta-close:not(.has-photo) {
    background-image: radial-gradient(90% 110% at 18% 15%, var(--glow), transparent 65%), var(--surface-navy);
  }
}
@layer components {
  .nav-drawer {
    background-image: radial-gradient(130% 45% at 50% 0%, var(--glow), transparent 60%), var(--surface-navy-deep);
  }
}

@layer sections {
  /* glow follows the image card: services has it left, about has it right */
  .page-services .split-dark {
    background-image: radial-gradient(85% 90% at 24% 20%, var(--glow), transparent 62%);
  }
  .page-about .split-dark {
    background-image: radial-gradient(85% 90% at 76% 20%, var(--glow), transparent 62%);
  }
  /* home-only surfaces */
  .ticket {
    background-image: radial-gradient(100% 130% at 10% 0%, var(--glow), transparent 62%), var(--surface-navy);
  }
  .walk {
    background-image: radial-gradient(100% 90% at 55% 0%, var(--glow), transparent 62%), var(--surface-navy-deep);
  }
}


/* ---------------- HOME RETROFIT — image-forward v1.1 ----------------
   Ledger rows gain photo thumbnails at tablet+; the phase rail moves
   onto a full-bleed photo band. Placed late in the sections layer on
   purpose (equal specificity, later file order wins). */
@layer sections {
  /* ledger thumbnails */
  .ledger-row .thumb { display: none; margin: 0; overflow: clip; }
  @media (min-width: 768px) {
    /* single authoritative desktop grid — fixed no + thumb columns so every
       row's numeral aligns identically regardless of image load state.
       (Replaces the earlier 3-col rule; the auto-sized thumb column was the
       cause of row 1.3 measuring wider than its neighbours.) */
    .ledger-row {
      grid-template-columns: 3.2rem 4.5rem minmax(0, 1.05fr) minmax(0, 1fr);
      grid-template-areas: "no thumb name desc";
      align-items: center;
      column-gap: var(--sp-md);
    }
    .ledger-row .no { min-inline-size: 0; padding-block-start: 0; }
    .ledger-row .thumb { display: block; grid-area: thumb; inline-size: 4.5rem; align-self: center; }
    .ledger-row .thumb img {
      aspect-ratio: 1; inline-size: 100%; block-size: auto; object-fit: cover;
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%);
      border-block-end: 3px solid var(--orange);
      transition: scale 180ms ease;
    }
    .ledger-row:hover .thumb img { scale: 1.06; }
    /* vertical separator between the title and the copy */
    .ledger-row .desc {
      justify-self: start; text-align: start;
      border-inline-start: 1px solid var(--line);
      padding-inline-start: var(--sp-md);
      align-self: center;
    }
  }

  /* phases on the photo band */
  .phases-band {
    position: relative; isolation: isolate; overflow: clip;
    background: var(--navy-deep); color: var(--paper);
    padding-block: var(--sp-2xl);
  }
  .phases-band::before {
    content: ""; position: absolute; inset: 0; z-index: var(--z-below);
    background: var(--scrim-photo);
  }
  .phases-band .sec-mark { border-color: var(--paper); }
  .phases-band .sec-mark .aside { color: var(--on-dark-dim); }
  .phases-band .phase p { color: var(--on-dark); }
  .phases-band .phase-note { color: var(--paper); }
  .phases-band .phase-note em { color: var(--orange-hot); }
}
@layer utilities {
  @media (prefers-reduced-data: reduce) { .ledger-row .thumb { display: none; } }
  @media (forced-colors: active) { .ledger-row .thumb img { border: 1px solid CanvasText; } }
}


/* ---------------- COHESION PASS — unified section headers ----------------
   sec-mark is the one section-header component sitewide (services keeps
   its 1.x spec numbers as the detail-sheet counterpart to home's index). */
@layer sections {
  .split .sec-mark { grid-column: 1 / -1; }
  .split-dark .sec-mark { border-color: var(--paper); }
  .split-dark .sec-mark .aside { color: var(--on-dark-dim); }
  .sec-aside-stack {
    margin-inline-start: auto; flex: none; display: grid; gap: 0.25rem;
    justify-items: start; max-inline-size: 32ch;
  }
  @media (min-width: 640px) { .sec-aside-stack { justify-items: end; text-align: end; } }
  .sec-aside-stack .aside { margin-inline-start: 0; }
  .sec-aside-stack .sub { flex-basis: auto; }
  .sec-mark .sub {
    flex-basis: 100%;
    color: var(--ink-soft); font-weight: var(--fw-medium);
    font-size: var(--fs-sm); max-inline-size: 55ch;
  }
  .split-dark .sec-mark .sub, .phases-band .sec-mark .sub { color: var(--on-dark); }
}


/* ---------------- TYPOGRAPHY HARDENING — wraps & breaks ----------------
   text-wrap inherits, so the p rule (pretty) covers .lede/.lead-p/.sub/
   .desc; this closes the gaps: non-<p> text nodes, heading hyphenation,
   and balance on every heading level. */
@layer base {
  h1, h2, h3, h4, h5, h6 { hyphens: manual; text-wrap: balance; }
  figcaption, .aside, .promise, .rail-fine, .fine { text-wrap: pretty; }
  .big-tel { white-space: nowrap; } /* non-breaking hyphens already; belt + suspenders */
}


/* ---------------- UTILITY PAGE HERO -- legal/policy pages ----------------
   Plain, no photo -- reference pages, not marketing sections. */
@layer sections {
  .util-hero { background: var(--navy-deep); color: var(--paper); }
  .util-hero .wrap { display: grid; gap: var(--sp-xs); padding-block: var(--sp-xl); }
  .util-hero h1 { font-size: var(--fs-2xl); max-inline-size: 22ch; }
  .util-hero .updated {
    font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
    text-transform: uppercase; color: var(--yellow);
  }
  .legal-body { display: grid; gap: var(--sp-md); max-inline-size: 68ch; }
  .legal-body h2 { font-size: var(--fs-lg); margin-block-start: var(--sp-xs); }
  .legal-body ul { display: grid; gap: 0.4rem; padding-inline-start: 1.2rem; list-style: disc; }
  .legal-body li { font-size: var(--fs-base); color: var(--ink-soft); max-inline-size: 62ch; }
  .legal-body .note {
    font-size: var(--fs-sm); color: var(--ink-soft); font-style: italic;
    border-inline-start: 3px solid var(--line); padding-inline-start: var(--sp-sm);
  }
}


/* ---------------- FAQ accordion + resource-page CTA ---------------- */
@layer sections {
  .faq-list { display: grid; gap: var(--sp-sm); max-inline-size: 68ch; }
  .faq-item {
    border: 1px solid var(--line);
    border-block-end-width: 3px; border-block-end-color: var(--navy);
    background: var(--paper);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%);
    filter: var(--drop-card); /* drop-shadow (not box-shadow) so the chamfer clip isn't cut off */
  }
  .faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
    padding: var(--sp-sm) var(--sp-md); cursor: pointer; min-block-size: 44px;
    list-style: none; font-weight: var(--fw-bold);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary:hover { background: var(--paper-dim); }
  .faq-item summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
  .faq-q {
    font-family: var(--ff-display); font-weight: var(--fw-subhead); text-transform: uppercase;
    font-size: var(--fs-md); letter-spacing: var(--ls-snug); color: var(--navy); line-height: 1.15;
  }
  .faq-icon { flex: none; color: var(--orange); font-size: var(--fs-sm); transition: transform 200ms ease; }
  .faq-item[open] .faq-icon { transform: rotate(45deg); } /* plus -> x */
  .faq-a { padding: 0 var(--sp-md) var(--sp-md); }
  .faq-a p { color: var(--ink-soft); font-size: var(--fs-base); max-inline-size: 62ch; }
  @media (prefers-reduced-motion: no-preference) {
    .faq-item[open] .faq-a { animation: was-settle 0.3s ease-out; }
  }
  .faq-cta {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm) var(--sp-md);
    margin-block-start: var(--sp-lg);
  }
  .faq-cta p { font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--navy); }
}

/* ---------------- 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,
  .stripe, .hero-bg, .ba-range, .ba-divider, .cta-close, .scroll-progress { display: none !important; }
  body { font-size: 12pt; line-height: 1.4; }
  a { text-decoration: underline; }
  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; }
  h1, h2, h3 { page-break-after: avoid; break-after: avoid; }
  img, figure, .ledger-row, .phase { page-break-inside: avoid; break-inside: avoid; }
  .wrap { width: 100%; max-width: none; }
}

/* ================ SERVICES PAGE v4 — image-led, one layout per service ================ */
@layer sections {
  /* ---- shared photo machinery (mirrors the approved .hero-bg pattern) ---- */
  .band-bg { position: absolute; inset: 0; z-index: var(--z-below-2); margin: 0; }
  .band-bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .ph { min-width: 0; margin: 0; }
  /* ---- PHOTO TREATMENT — navy multiply tint + saturation trim so photos
     from any source (incl. future crew phone shots) read as one family.
     Overlay clip matches the image chamfer so the notch stays clean. ---- */
  .ph { position: relative; }
  .ph::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: var(--navy); opacity: var(--photo-tint); mix-blend-mode: multiply;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%);
  }
  .ph img, .ledger-row .thumb img, .ba img { filter: saturate(0.88); }
  .ledger-row .thumb { position: relative; }
  .ledger-row .thumb::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: var(--navy); opacity: var(--photo-tint); mix-blend-mode: multiply;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%);
  }
  @media (forced-colors: active) { .ph::after, .ledger-row .thumb::after { display: none; } }
  .ph img {
    inline-size: 100%; block-size: 100%; object-fit: cover;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%);
    border-block-end: 4px solid var(--orange);
  }
  /* on dark/photo-scrimmed surfaces the image underline reads as yellow (hi-vis),
     matching the rest of that surface's accent language */
  .band .ph img, .split-dark .ph img { border-block-end-color: var(--yellow); }
  .ph figcaption {
    font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider);
    text-transform: uppercase; color: var(--ink-soft); line-height: 1.5;
    margin-block-start: var(--sp-2xs);
  }
  .band .ph figcaption { color: var(--on-dark-dim); }
  .svc-no {
    font-family: var(--ff-display); font-weight: var(--fw-display);
    font-size: var(--fs-numeral); line-height: 1;
    color: var(--orange); letter-spacing: var(--ls-display);
  }
  .svc-no span { font-size: 0.45em; color: var(--ink-soft); }
  .band .svc-no span, .statement .svc-no span { color: var(--on-dark-dim); }

  /* ---- services hero: full-bleed crew photo + document index ---- */
  .svc-hero { position: relative; isolation: isolate; overflow: clip; background: var(--navy-deep); color: var(--paper); }
  .svc-hero::before {
    content: ""; position: absolute; inset: 0; z-index: var(--z-below);
    background: var(--scrim-photo);
  }
  .svc-hero .band-bg::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: var(--gleam-sweep);
    transform: translateX(-130%);
    animation: gleam 1.6s cubic-bezier(0.5, 0, 0.3, 1) 0.4s forwards;
  }
  .svc-hero .wrap { display: grid; gap: var(--sp-sm); padding-block: var(--sp-2xl) var(--sp-xl); justify-items: start; }
  .svc-hero h1 { font-size: var(--fs-2xl); max-inline-size: 16ch; }
  .svc-hero h1 em { font-style: normal; color: var(--orange-hot); }
  .svc-hero .lede { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--on-dark-strong); max-inline-size: 48ch; }
  .svc-hero .btn { margin-block-start: var(--sp-2xs); }

  .spec-index { inline-size: 100%; margin-block-start: var(--sp-sm); }
  .spec-index ol { display: grid; border-block-start: 1px solid var(--line-glass); }
  .spec-index a {
    display: flex; align-items: baseline; gap: var(--sp-sm);
    min-block-size: 44px; padding-block: 0.5rem;
    border-block-end: 1px solid var(--line-glass);
    text-decoration: none; font-weight: var(--fw-semi);
    transition: color 150ms ease, padding-inline-start 180ms ease;
  }
  .spec-index a .no {
    flex: none; min-inline-size: 2.4em;
    font-family: var(--ff-display); font-weight: var(--fw-display);
    color: var(--orange-hot); letter-spacing: var(--ls-display);
  }
  .spec-index a .nm { font-family: var(--ff-display); font-weight: var(--fw-subhead); text-transform: uppercase; letter-spacing: var(--ls-snug); font-size: var(--fs-md); }
  .spec-index a .dn { margin-inline-start: auto; color: var(--on-dark-dim); font-weight: var(--fw-bold); }
  .spec-index a:hover, .spec-index a:focus-visible { color: var(--yellow); padding-inline-start: 0.4rem; }
  @media (min-width: 768px) {
    .spec-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-xl); }
    .spec-index ol li:nth-last-child(-n+2) a { border-block-end: 1px solid var(--line-glass); }
  }

  /* ---- LAYOUT A · photo-band: full-bleed background, content over scrim ---- */
  .band { position: relative; isolation: isolate; overflow: clip; background: var(--navy-deep); color: var(--paper); }
  .band::before {
    content: ""; position: absolute; inset: 0; z-index: var(--z-below);
    background: var(--scrim-photo);
  }
  .band .wrap { display: grid; gap: var(--sp-md); padding-block: var(--sp-2xl); align-content: center; min-block-size: var(--band-min); }
  .band-copy { display: grid; gap: var(--sp-sm); max-inline-size: 40rem; justify-items: start; }
  .band h2 { font-size: var(--fs-xl); }
  .band .lead-p { font-size: var(--fs-base); color: var(--on-dark); max-inline-size: 52ch; }
  .band .tag {
    background: var(--yellow); color: var(--navy-deep);
    font-weight: var(--fw-heavy); font-size: var(--fs-xs);
    letter-spacing: var(--ls-wider); text-transform: uppercase;
    padding: 0.35em 1.5em;
    /* both ends sliced (parallelogram) with generous inline padding */
    clip-path: polygon(var(--cut-sm) 0, 100% 0, calc(100% - var(--cut-sm)) 100%, 0 100%);
  }
  /* layered pair: large card in back, smaller card overlapping its
     bottom-right corner (z-index), instead of a side-by-side grid */
  .band-duo { position: relative; align-self: center; padding-block-end: var(--sp-2xl); padding-inline-end: calc(var(--sp-lg) + 1rem); }
  .band-duo .ph-back { position: relative; z-index: 1; margin: 0; }
  .band-duo .ph-back img { aspect-ratio: 3 / 2; }
  .band-duo .ph-front {
    position: absolute; z-index: 2; margin: 0;
    inline-size: 46%; inset-inline-end: -1rem; inset-block-end: -1.2rem;
  }
  .band-duo .ph-front img { aspect-ratio: 1; }
  /* thin light ring so the front card reads as lifted, not boxed */
  .band-duo .ph-front::before {
    content: ""; position: absolute; inset: -0.15rem; z-index: -1;
    background: var(--paper);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%);
  }
  .band-duo .ph-front figcaption {
    position: absolute; inset-block-start: 100%; inset-inline-start: 0;
    margin-block-start: 0.5rem; inline-size: max-content; max-inline-size: 12rem;
  }
  @media (min-width: 1024px) {
    .band .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: var(--sp-2xl); align-items: center; }
  }

  /* ---- LAYOUT B · split: text + one chamfered photo ---- */
  .split { padding-block: var(--sp-2xl); }
  .split-alt { background: var(--paper-dim); }
  .split .wrap { display: grid; gap: var(--sp-lg); align-items: center; }
  /* when a section header spans the split, the header owns the spacing below
     it — collapse the grid row-gap so the copy sits close to the rule */
  .split .wrap:has(.sec-mark) { row-gap: 0; }
  .split .sec-mark { margin-block-end: var(--sp-md); }
  .split-copy { display: grid; gap: var(--sp-sm); justify-items: start; }
  .split h2 { font-size: var(--fs-xl); }
  .split .lead-p { color: var(--ink-soft); max-inline-size: 52ch; }
  .split .ph img { aspect-ratio: 4 / 3; }
  @media (min-width: 1024px) {
    .split .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: var(--sp-2xl); row-gap: var(--sp-lg); }
    /* header-led splits: content row starts directly under the header rule */
    .split .wrap:has(.sec-mark) { row-gap: 0; align-items: start; }
    .split .wrap:has(.sec-mark) .sec-mark { grid-row: 1; }
    .split .wrap:has(.sec-mark) .split-copy { grid-row: 2; }
    .split .wrap:has(.sec-mark) .split-media { grid-row: 2; align-self: start; }
    .split-flip .split-copy { grid-column: 2; grid-row: 1; }
    .split-flip .split-media { grid-column: 1; grid-row: 1; }
    .split-flip .wrap:has(.sec-mark) .split-copy { grid-column: 2; grid-row: 2; }
    .split-flip .wrap:has(.sec-mark) .split-media { grid-column: 1; grid-row: 2; }
  }

  /* dark split — solid navy with an image card (floorcare) */
  .split-dark { background: var(--navy-deep); color: var(--paper); }
  .split-dark .lead-p { color: var(--on-dark); }
  .split-dark .inc-list li { border-color: var(--line-dark); }
  .split-dark .inc-list li::before { color: var(--orange-hot); }
  .split-dark .svc-no span { color: var(--on-dark-dim); }
  .split-dark .ph figcaption { color: var(--on-dark-dim); }

  /* duo photo stack for splits that earn two shots */
  /* mobile-first: stacked at base so neither photo is cramped on a phone;
     offset pair only once there's room (640+). */
  .duo { display: grid; gap: var(--sp-sm); align-items: start; }
  .duo .ph:first-child img { aspect-ratio: 4 / 5; }
  .duo .ph:last-child img { aspect-ratio: 1 / 1; }
  @media (min-width: 640px) {
    .duo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
    .duo .ph:last-child { translate: 0 var(--sp-lg); }
  }

  /* ---- LAYOUT C · statement: tall full-bleed photo, few words ---- */
  .statement { position: relative; isolation: isolate; overflow: clip; background: var(--navy-deep); color: var(--paper); }
  .statement::before {
    content: ""; position: absolute; inset: 0; z-index: var(--z-below);
    background: var(--scrim-foot);
  }
  .statement .wrap {
    display: grid; gap: var(--sp-xs); align-content: end; justify-items: start;
    min-block-size: var(--statement-min);
    padding-block-start: var(--sp-xl);
    padding-block-end: var(--sp-2xl);
  }
  .statement h2 { font-size: var(--fs-statement); line-height: 0.98; max-inline-size: 12ch; }
  .statement h2 em { font-style: normal; color: var(--orange-hot); }
  .statement .lead-p { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--on-dark); max-inline-size: 40ch; }
  .statement .fine {
    font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--yellow);
    letter-spacing: var(--ls-wide); text-transform: uppercase;
  }

  /* ---- statement-quote: an editorial pull-quote band, NOT a second hero.
     Contained width, centered, big quotation-mark watermark, shorter. ---- */
  .statement-quote { text-align: center; }
  .statement-quote::before { background: var(--scrim-photo); } /* fuller scrim: it's about the words */
  .statement-quote .wrap {
    align-content: center; justify-items: center;
    min-block-size: 0; padding-block: var(--sp-2xl);
    max-inline-size: 60rem; margin-inline: auto; position: relative;
  }
  /* oversized quote-mark watermark behind the words */
  .statement-quote .wrap::before {
    content: "\201C"; position: absolute; z-index: 0;
    inset-block-start: -0.35em; inset-inline-start: 50%; translate: -50% 0;
    font-family: var(--ff-display); font-weight: var(--fw-display);
    font-size: clamp(9rem, 6rem + 18vw, 20rem); line-height: 1;
    color: var(--paper); opacity: 0.5; pointer-events: none;
  }
  .statement-quote > .wrap > * { position: relative; z-index: 1; }
  .statement-quote h2 { font-size: clamp(1.8rem, 1.3rem + 2.6vw, 3.4rem); max-inline-size: 20ch; text-wrap: balance; }
  .statement-quote .lead-p { max-inline-size: 46ch; margin-inline: auto; }
  @media (forced-colors: active) { .statement-quote .wrap::before { display: none; } }

  /* ---- included list (shared) — ruled, lettered ---- */
  .inc-list { display: grid; counter-reset: inc; inline-size: 100%; max-inline-size: 40rem; }
  .inc-list li {
    counter-increment: inc;
    display: flex; align-items: baseline; gap: var(--sp-sm); min-width: 0;
    padding-block: 0.55rem;
    border-block-end: 1px solid var(--line);
    font-weight: var(--fw-semi); font-size: var(--fs-base);
  }
  .band .inc-list li { border-color: var(--line-glass); }
  .inc-list li::before {
    content: counter(inc, lower-alpha) ".";
    flex: none; min-inline-size: 1.6em;
    font-family: var(--ff-display); font-weight: var(--fw-display);
    color: var(--orange); letter-spacing: var(--ls-display);
  }
  .band .inc-list li::before { color: var(--orange-hot); }

  /* ---- CTA close gains a photo ---- */
  .cta-close.has-photo { position: relative; isolation: isolate; overflow: clip; }
  .cta-close.has-photo::before {
    content: ""; position: absolute; inset: 0; z-index: var(--z-below);
    background: var(--scrim-photo);
  }
}
@layer utilities {
  @media (prefers-reduced-data: reduce) {
    .band-bg { display: none; }
    .ph { display: none; }
  }
  @media (forced-colors: active) {
    .ph img { border: 1px solid CanvasText; }
  }
}
@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .svc-hero .wrap > * { animation: was-settle 0.6s ease-out both; }
    .svc-hero .wrap > :nth-child(1) { animation-delay: 0.10s; }
    .svc-hero .wrap > :nth-child(2) { animation-delay: 0.22s; }
    .svc-hero .wrap > :nth-child(3) { animation-delay: 0.34s; }
    .svc-hero .wrap > :nth-child(4) { animation-delay: 0.46s; }
    .svc-hero .wrap > :nth-child(5) { animation-delay: 0.58s; }
  }
  @media (prefers-reduced-motion: reduce) {
    .svc-hero .band-bg::after { display: none; }
  }
}

/* ================ ABOUT PAGE additions ================ */
@layer sections {
  .hero-meta.on-light { color: var(--orange-dim); }  /* meta line on light surfaces (CSP-safe hook) */

  /* pull line — the ruled statement inside light sections */
  .pull-line {
    border-inline-start: 4px solid var(--orange);
    padding-inline-start: var(--sp-md);
    font-family: var(--ff-display); font-weight: var(--fw-subhead); text-transform: uppercase;
    font-size: var(--fs-lg); line-height: 1.2; letter-spacing: var(--ls-snug);
    max-inline-size: 26ch; text-wrap: balance;
  }
  .pull-line em { font-style: normal; color: var(--orange-dim); }

  /* experience strip — the record, one ruled line */
  .exp-strip { background: var(--paper-dim); border-block: 1px solid var(--line); }
  .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: var(--fw-heavy); letter-spacing: var(--ls-wider);
    text-transform: uppercase; color: var(--ink-soft);
  }
  .exp-strip .names {
    font-family: var(--ff-display); font-weight: var(--fw-subhead); text-transform: uppercase;
    font-size: var(--fs-md); letter-spacing: var(--ls-snug);
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2xs) var(--sp-md);
    max-inline-size: none;
  }
  .exp-strip .names span::after { content: "·"; color: var(--orange); margin-inline-start: var(--sp-md); }
  .exp-strip .names span:last-child::after { content: none; margin: 0; }

  /* crew — honest placeholder frames with display initials */
  .crew { padding-block: var(--sp-2xl); }
  .crew-grid {
    display: grid; gap: var(--sp-lg);
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: 56rem;
  }
  @media (min-width: 640px) { .crew-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .crew-card { min-width: 0; display: grid; gap: var(--sp-xs); align-content: start; }
  .crew-frame {
    position: relative; aspect-ratio: 4 / 4.4; overflow: clip; min-width: 0;
    background: radial-gradient(90% 70% at 50% 30%, var(--navy-mid), var(--navy-deep));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%);
    border-block-end: 4px solid var(--yellow);
    display: grid; place-items: center;
  }
  .crew-frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .crew-card h3 { font-size: var(--fs-lg); }
  .crew-card .role {
    font-size: var(--fs-xs); font-weight: var(--fw-heavy); letter-spacing: var(--ls-wider);
    text-transform: uppercase; color: var(--orange-dim);
  }
  .crew-card .reach a {
    font-weight: var(--fw-heavy); text-decoration: none; font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: center; min-block-size: 44px;
  }
  .crew-card .reach a:hover { color: var(--orange-hot); }
}

/* ================ CONTACT PAGE additions ================ */
@layer tokens {
  :root { --danger: #b3341f; }
  @supports (color: oklch(0.5 0.1 250)) {
    :root { --danger: oklch(0.5 0.17 30); }
  }
}
@layer sections {
  /* compact photo hero */
  .hero-compact .wrap { padding-block: var(--sp-xl) var(--sp-lg); }

  /* contact split: direct lines first in DOM (tap-to-call on phones),
     form leads at desktop */
  .contact { padding-block: var(--sp-xl) var(--sp-2xl); }
  .contact-grid { display: grid; gap: var(--sp-lg); align-items: start; }
  @media (min-width: 1024px) {
    .contact-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sp-2xl); }
    .contact-grid .bid-form { grid-column: 1; grid-row: 1; }
    .contact-grid .reach-rail { grid-column: 2; grid-row: 1; position: sticky; inset-block-start: var(--anchor-offset); }
  }

  /* the reach rail — ticket DNA: dark panel, orange spine, glow pool */
  .reach-rail {
    background: var(--navy);
    background-image: radial-gradient(110% 90% at 50% 0%, var(--glow), transparent 62%), var(--surface-navy);
    color: var(--paper);
    border-inline-start: 5px solid var(--orange);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%);
    box-shadow: var(--shadow-panel);
    padding: var(--sp-md);
    display: grid; gap: var(--sp-sm); align-content: start;
  }
  .reach-rail h2 { font-size: var(--fs-md); letter-spacing: var(--ls-snug); }
  .reach-rail .note { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--yellow); }
  .rail-lines { display: grid; border-block-start: 1px solid var(--line-dark); }
  .rail-lines li {
    display: grid; gap: 0.1rem; min-width: 0;
    padding-block: var(--sp-xs);
    border-block-end: 1px solid var(--line-dark);
  }
  .rail-lines .who { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--on-dark-dim); }
  .rail-lines a {
    font-family: var(--ff-display); font-weight: var(--fw-subhead);
    font-size: var(--fs-tel-line);
    text-decoration: none; letter-spacing: var(--ls-snug);
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  }
  .rail-lines a:hover { color: var(--orange-hot); }
  .rail-lines .email a { font-family: var(--ff-body); font-weight: var(--fw-heavy); font-size: var(--fs-base); }
  .rail-hours { display: grid; gap: 0.1rem; font-size: var(--fs-sm); color: var(--on-dark); }
  .rail-hours li { display: flex; justify-content: space-between; gap: var(--sp-sm); }
  .rail-hours li span:last-child { font-weight: var(--fw-bold); color: var(--paper); white-space: nowrap; flex: none; }
  .rail-fine { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--yellow); }

  /* the bid form */
  /* ---- BID CARD — the form lives in a clean elevated card ---- */
  .bid-card {
    background: #fff;
    border-block-start: 5px solid var(--orange);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%);
    filter: var(--drop-panel); /* drop-shadow follows the chamfer; box-shadow would be clipped */
    padding: var(--sp-lg) var(--sp-md) var(--sp-xl);
  }
  @media (min-width: 640px) { .bid-card { padding-inline: var(--sp-lg); } }

  .bid-form { display: grid; gap: var(--sp-md); align-content: start; }
  .bid-form .form-head { display: grid; gap: var(--sp-2xs); }
  .bid-form h2 { font-size: var(--fs-xl); }
  .bid-form .form-head p { color: var(--ink-soft); font-weight: var(--fw-medium); max-inline-size: 52ch; }

  /* clean fields: quiet borders, generous height, strong focus */
  .field { display: grid; gap: 0.3rem; min-width: 0; align-content: start; }
  .field label {
    font-weight: var(--fw-heavy); font-size: var(--fs-xs); line-height: 1.2;
    letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--navy);
    display: flex; align-items: baseline; gap: 0.5em;
  }
  .field label .req { color: var(--orange); font-size: 1.1em; line-height: 0; translate: 0 0.12em; }
  .field label .opt { font-weight: var(--fw-semi); color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
  .field :is(input, select, textarea) {
    inline-size: 100%;
    background: var(--paper); color: var(--navy);
    font: inherit; font-weight: var(--fw-semi); line-height: 1.3;
    border: 1px solid var(--line-strong);
    padding: 0.55em 0.85em; min-block-size: 44px;
    transition: border-color 150ms ease, background-color 150ms ease;
  }
  .field :is(input, select, textarea)::placeholder { color: var(--ink-soft); font-weight: var(--fw-medium); }
  .field :is(input, select, textarea):hover { border-color: var(--navy-mid); }
  .field :is(input, select, textarea):focus-visible {
    outline: 3px solid var(--focus); outline-offset: 2px;
    border-color: var(--navy); background-color: #fff;
  }
  .field textarea { min-block-size: 8rem; resize: vertical; }
  .field select {
    cursor: pointer; appearance: none; padding-inline-end: 2.6rem;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--navy) 50%),
      linear-gradient(135deg, var(--navy) 50%, transparent 50%),
      var(--paper-grad-none, linear-gradient(var(--paper), var(--paper)));
    background-position: calc(100% - 1.45rem) 52%, calc(100% - 1.05rem) 52%, 0 0;
    background-size: 0.42rem 0.42rem, 0.42rem 0.42rem, 100% 100%;
    background-repeat: no-repeat;
  }
  .field select:focus-visible {
    background-image:
      linear-gradient(45deg, transparent 50%, var(--navy) 50%),
      linear-gradient(135deg, var(--navy) 50%, transparent 50%);
    background-color: #fff;
  }
  .field [aria-invalid="true"] { border-color: var(--danger); border-inline-start-width: 3px; }
  .field-error {
    display: flex; align-items: baseline; gap: 0.4em;
    color: var(--danger); font-weight: var(--fw-semi); font-size: var(--fs-sm);
    line-height: 1.3;
  }
  .field-error::before { content: "\26A0"; font-size: 0.95em; flex: none; }

  .field-row { display: grid; gap: var(--sp-md); }
  @media (min-width: 640px) {
    .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* subgrid: label / control / error rows align ACROSS the pair, so one
       field's error can't knock its neighbour out of line */
    @supports (grid-template-rows: subgrid) {
      .field-row { grid-template-rows: auto auto auto; row-gap: 0.3rem; }
      .field-row .field { grid-template-rows: subgrid; grid-row: span 3; }
    }
  }

  .field-foot { display: flex; align-items: baseline; gap: var(--sp-sm); min-width: 0; }
  .field-foot .field-error { flex: 1; min-width: 0; }
  .field-meta { margin-inline-start: auto; flex: none; font-size: var(--fs-xs); line-height: 1.3; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .field-meta.near { color: var(--danger); font-weight: var(--fw-bold); }

  /* honeypot — parity with the production handler; invisible to humans */
  .hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

  /* error banner (success now uses the confirmation panel, not this line) */
  .form-live {
    display: flex; align-items: baseline; gap: 0.6em;
    font-weight: var(--fw-semi); padding: var(--sp-sm) var(--sp-md);
    border-inline-start: 4px solid transparent;
  }
  .form-live[hidden] { display: none; }
  .form-live::before { font-family: "Font Awesome 6 Free"; font-weight: 900; flex: none; }
  .form-live.ok { color: var(--navy); background: var(--paper-dim); border-color: var(--orange); }
  .form-live.ok::before { content: "\f058"; color: var(--orange); }
  .form-live.err { color: var(--danger); background: var(--danger-tint); border-color: var(--danger); }
  .form-live.err::before { content: "\f06a"; color: var(--danger); }

  .form-foot {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-sm); text-align: center;
  }
  .form-foot .btn { gap: 0.6em; }
  .form-foot .promise { display: flex; align-items: center; gap: 0.5em; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink-soft); }
  .form-foot .promise .fa-solid { color: var(--navy-mid); }

  /* ---- confirmation panel: the in-page success state ---- */
  .bid-confirm {
    display: grid; gap: var(--sp-sm); justify-items: center; text-align: center;
    padding: var(--sp-xl) var(--sp-md);
  }
  .bid-confirm[hidden] { display: none; }
  .bid-confirm .fa-circle-check { font-size: clamp(3rem, 2.4rem + 3vw, 4.5rem); color: var(--orange); }
  .bid-confirm h2 { font-size: var(--fs-xl); }
  .bid-confirm p { color: var(--ink-soft); font-weight: var(--fw-medium); max-inline-size: 44ch; }
  .bid-confirm .btn { margin-block-start: var(--sp-2xs); }
}

/* ================ V2 MOTION — scroll-driven reveal system ================
   Pure CSS via animation-timeline: view(). Triple-gated: motion layer,
   prefers-reduced-motion, and @supports — browsers without support simply
   render the static site. Each element owns its timeline, so reveals
   stagger naturally as they enter the viewport. */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .sec-mark,
      .ledger-row,
      .phase,
      .phase-note,
      .split-copy,
      .split-media,
      .crew-frame,
      .faq-item,
      .band-duo,
      .trust .wrap,
      .cta-close .wrap > * {
        animation: v2-rise linear both;
        animation-timeline: view();
        animation-range: entry 5% entry 55%;
      }
      /* watermarks drift slowly across their section for parallax depth —
         travel is capped so the phrase never leaves the frame */
      [data-wm]::after {
        animation: v2-drift linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
      }
    }
  }
  @keyframes v2-rise { from { opacity: 0; translate: 0 1.1rem; } to { opacity: 1; translate: 0 0; } }
  @keyframes v2-drift { from { translate: 1rem 0; } to { translate: -2rem 0; } }

  /* button gleam sweep on hover — signature micro-interaction */
  @media (prefers-reduced-motion: no-preference) {
    .btn { position: relative; overflow: clip; }
    .btn::before {
      content: ""; position: absolute; inset-block: 0; inline-size: 45%;
      translate: -140% 0; pointer-events: none;
      background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    }
    .btn:hover::before, .btn:focus-visible::before { animation: v2-sweep 600ms ease; }
  }
  @keyframes v2-sweep { from { translate: -140% 0; } to { translate: 240% 0; } }
}


/* ================ V2 PAGE TRANSITIONS — cross-document morphs ================
   MPA view transitions: pages crossfade instead of hard-cutting. Ignored
   entirely by browsers without support; disabled for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation-duration: 180ms; }
  ::view-transition-new(root) { animation-duration: 180ms; }
}


/* ================ V2 SECTION SEAMS + GHOST NUMERALS ================
   Stepped chamfer edges between homepage sections: a raised shelf, an
   angled drop, then the lower run — alternating direction per junction.
   The cut section carries a higher z-index so its step paints OVER the
   section tucked beneath (without this, DOM order would flatten the
   step into a straight line). Ghost numerals sit behind each header. */
@layer sections {
  .seam-r, .seam-l { position: relative; }
  .seam-r {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--seam)),
      38% calc(100% - var(--seam)), calc(38% - var(--seam) * 1.6) 100%, 0 100%);
  }
  .seam-l {
    clip-path: polygon(0 0, 100% 0, 100% 100%,
      calc(62% + var(--seam) * 1.6) 100%, 62% calc(100% - var(--seam)), 0 calc(100% - var(--seam)));
  }
  /* stacking chain: each cut section paints over the one tucked under it */
  .surface-scope.seam-r { z-index: 4; }
  .walk.seam-l { z-index: 3; }
  .phases-band.seam-r { z-index: 2; }
  /* junctions: pull the next section up under the shelf, repay in padding */
  .surface-scope.seam-r + .walk {
    margin-block-start: calc(-1 * var(--seam));
    padding-block-start: calc(var(--sp-2xl) + var(--seam) * 0.5);
  }
  .walk.seam-l + .phases-band {
    margin-block-start: calc(-1 * var(--seam));
    padding-block-start: calc(var(--sp-2xl) + var(--seam) * 0.5);
  }
  .phases-band.seam-r + .cta-close { margin-block-start: calc(-1 * var(--seam)); }
  .phases-band.seam-r + .cta-close .wrap { padding-block-start: calc(var(--sp-2xl) + var(--seam) * 0.5); }
  /* watermarks on seamed sections lift above the cut so no phrase clips */
  :is(.seam-r, .seam-l)[data-wm]::after { inset-block-end: calc(var(--seam) + 0.5rem); }

  /* ghost numerals — the section index at architectural scale */
  .ghost-ix {
    position: absolute; z-index: 0; pointer-events: none; user-select: none;
    inset-block-start: 0.35rem; inset-inline-start: 0.75rem;
    font-family: var(--ff-display); font-weight: var(--fw-display);
    font-size: clamp(9rem, 6rem + 16vw, 22rem); line-height: 1; letter-spacing: -0.02em;
    color: var(--navy); opacity: 0.055;
  }
  /* every dark-surface section class site-wide, not just home's — this was
     the actual bug: services' .band/.statement/.split-dark ghosts were
     inheriting the LIGHT (navy) color and rendering navy-on-navy, nearly
     invisible. Also bumped opacity for legibility on dark. */
  :is(.walk, .phases-band, .band, .split-dark, .statement:not(.statement-quote)) .ghost-ix {
    color: var(--paper); opacity: 0.09;
  }
  /* any section hosting a ghost numeral self-prepares its stacking context */
  section:has(> .ghost-ix) { position: relative; isolation: isolate; overflow: clip; }
  section:has(> .ghost-ix) > .wrap { position: relative; z-index: 1; }

  /* ---- interior-page seams: about + services (same pattern as home) ---- */
  /* ABOUT: story -> statement-quote -> how-we-work -> crew */
  .split#story.seam-r { z-index: 4; }
  .statement-quote.seam-l { z-index: 3; }
  .split.split-dark.seam-r { z-index: 2; }
  .split#story.seam-r + .exp-strip { position: relative; z-index: 5; } /* thin strip rides above the cut */
  .exp-strip + .statement-quote.seam-l,
  .split#story.seam-r + .statement-quote.seam-l { margin-block-start: calc(-1 * var(--seam)); }
  .seam-r + .statement-quote .wrap,
  .exp-strip + .statement-quote .wrap { padding-block-start: calc(var(--sp-2xl) + var(--seam) * 0.5); }
  .statement-quote.seam-l + .split { margin-block-start: calc(-1 * var(--seam)); padding-block-start: calc(var(--sp-2xl) + var(--seam) * 0.5); }
  .split.seam-r + .crew { margin-block-start: calc(-1 * var(--seam)); padding-block-start: calc(var(--sp-2xl) + var(--seam) * 0.5); }
  /* SERVICES: band(1) -> split(2), statement(3) -> split(4), split(5) -> dark(6) */
  .band.seam-r { z-index: 4; }
  .statement.seam-l:not(.statement-quote) { z-index: 3; }
  .split#windows.seam-r { z-index: 2; }
  .band.seam-r + .split { margin-block-start: calc(-1 * var(--seam)); padding-block-start: calc(var(--sp-2xl) + var(--seam) * 0.5); }
  .statement.seam-l + .split { margin-block-start: calc(-1 * var(--seam)); padding-block-start: calc(var(--sp-2xl) + var(--seam) * 0.5); }
  .split.seam-r + .split-dark { margin-block-start: calc(-1 * var(--seam)); padding-block-start: calc(var(--sp-2xl) + var(--seam) * 0.5); }

  @media (prefers-reduced-data: reduce) { .ghost-ix { display: none; } }
  @media (forced-colors: active) { .ghost-ix { display: none; } }
}