/* Some components are adapted from Uiverse.io (credited inline). Uiverse.io license:
MIT License

Copyright (c) 2023 Uiverse.io

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/

    /* ===== Tokens (see DESIGN.md) ===== */
    :root {
      --char: #1B1C1A;
      --char-2: #232421;
      --char-3: #2E2F2B;
      --white: #F5F5F2;
      --mute: #A3A49E;
      --line: rgba(245, 245, 242, .14);
      --signal: #BF0A30;
      --signal-text: #F2687B;
      --navy: #002868;

      --display: "Big Shoulders Display", "BSD Fallback", sans-serif;
      --sans: "Schibsted Grotesk", "Schibsted Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

      --wrap: 1360px;
      --gutter: clamp(20px, 4.5vw, 64px);
      --section: clamp(88px, 12vw, 168px);
      --header: 72px;
      --ease: cubic-bezier(.16, 1, .3, 1);

      color-scheme: dark;
      accent-color: var(--signal);
    }

    /* Fallback sized close to Big Shoulders so the layout does not jump while fonts load */
    /* Big Shoulders Display is self-hosted (latin, variable 100-900, 35 KB) and preloaded by every page */
    @font-face {
      font-family: "Big Shoulders Display"; font-style: normal; font-weight: 100 900; font-display: swap;
      src: url("fonts/big-shoulders-display-latin.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* Fallback measured against Big Shoulders 900 (Arial Bold is 1.40x wider; ascent .984, descent .213), so if the
       font is slow the headline wraps the same way and nothing jumps when it swaps in */
    @font-face { font-family: "BSD Fallback"; font-weight: 800 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold"), local("Arial"); size-adjust: 68%; ascent-override: 138%; descent-override: 30%; line-gap-override: 0%; }
    @font-face { font-family: "BSD Fallback"; font-weight: 100 700; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); size-adjust: 76%; ascent-override: 129%; descent-override: 28%; line-gap-override: 0%; }

    /* ===== Base ===== */
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--char-3) var(--char); }
    body {
      margin: 0;
      background: var(--char);
      color: var(--white);
      font-family: var(--sans);
      font-size: 1.0625rem;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: clip;
    }
    ::selection { background: var(--signal); color: var(--white); }
    img { display: block; max-width: 100%; height: auto; }
    a { color: inherit; text-underline-offset: .2em; }
    p { margin: 0; text-wrap: pretty; }
    h1, h2, h3 { margin: 0; font-weight: 800; }
    .display {
      font-family: var(--display);
      text-transform: uppercase;
      line-height: .86;
      letter-spacing: -.01em;
    }
    h2.display { font-size: clamp(3rem, 7vw, 6.5rem); font-weight: 900; text-wrap: balance; }
    [tabindex="-1"]:focus { outline: none; }
    html { scroll-padding-top: calc(var(--header) + 16px); }

    .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
    .section { padding: var(--section) 0; }
    .tint { background: var(--char-2); }
    section { scroll-margin-top: var(--header); }

    :focus-visible { outline: 2px solid var(--signal-text); outline-offset: 3px; }

    .skip {
      position: absolute; left: 16px; top: -80px; z-index: 500;
      padding: 12px 18px; background: var(--signal); color: var(--white);
      font-weight: 600; text-decoration: none;
    }
    .skip:focus { top: 12px; }

    /* Lenis */
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    .lenis.lenis-stopped { overflow: hidden; }

    /* Developer note: delete once the client confirms the content */
    .todo {
      display: inline-block;
      margin-top: 10px;
      padding: 3px 10px;
      border: 1px dashed var(--signal-text);
      color: var(--signal-text);
      font-size: .78rem; font-weight: 600;
    }

    /* ===== Buttons ===== */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      min-height: 56px; padding: 0 28px;
      border: 1px solid transparent; border-radius: 0;
      font: inherit; font-size: 1rem; font-weight: 600; white-space: nowrap;
      text-decoration: none; cursor: pointer;
      transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s;
    }
    .btn:active { transform: translateY(1px); }
    .btn svg { width: 18px; height: 18px; flex: none; }
    .btn-signal { background: var(--signal); color: var(--white); }
    .btn-signal:hover { filter: brightness(1.15); }
    .btn-line { border-color: rgba(245,245,242,.45); color: var(--white); }
    .btn-line:hover { background: var(--white); color: var(--char); border-color: var(--white); }

    /* ===== Header ===== */
    .site-header {
      position: fixed; inset: 0 0 auto 0; z-index: 200;
      height: var(--header);
      transition: background-color .4s var(--ease), transform .5s var(--ease), box-shadow .4s;
    }
    .site-header.is-scrolled {
      background: rgba(27, 28, 26, .9);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 1px 0 var(--line);
    }
    .header-inner { height: 100%; display: flex; align-items: center; gap: 32px; }
    .wordmark {
      font-family: var(--display); font-weight: 800; text-transform: uppercase;
      font-size: 1.4rem; letter-spacing: .02em; line-height: 1;
      text-decoration: none; white-space: nowrap;
      display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
    }
    .wordmark .mark { width: 32px; height: 32px; flex: none; }
    .nav { display: flex; gap: 30px; margin-left: auto; font-size: .95rem; font-weight: 500; }
    .nav a { text-decoration: none; color: var(--mute); transition: color .2s; }
    .nav a:hover { color: var(--white); }
    .header-actions { display: flex; align-items: center; gap: 20px; }
    .header-phone { font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
    .header-phone:hover { color: var(--signal-text); }
    .header-actions .btn { min-height: 44px; padding: 0 20px; font-size: .95rem; }
    .menu-btn {
      display: none; width: 44px; height: 44px; margin-left: auto;
      align-items: center; justify-content: center;
      background: transparent; border: 1px solid var(--line); color: var(--white); cursor: pointer;
    }
    .menu-btn svg { width: 22px; height: 22px; }
    @media (max-width: 1060px) {
      .nav { display: none; }
      .header-actions { margin-left: auto; }
      .menu-btn { display: inline-flex; margin-left: 0; }   /* tablets get the menu too */
    }
    @media (max-width: 720px) {
      .header-actions { display: none; }
      .menu-btn { display: inline-flex; margin-left: auto; }
      .wordmark { font-size: 1.2rem; }
    }

    .menu {
      position: fixed; inset: 0; z-index: 300;
      background: var(--char);
      display: flex; flex-direction: column;
      padding: 14px var(--gutter) calc(28px + env(safe-area-inset-bottom));
      clip-path: inset(0 0 100% 0); visibility: hidden; overflow-y: auto;
      transition: clip-path .7s var(--ease), visibility 0s .7s;
    }
    .menu.is-open { clip-path: inset(0); visibility: visible; transition: clip-path .7s var(--ease), visibility 0s; }
    .menu-top { display: flex; align-items: center; justify-content: space-between; height: 44px; flex: none; margin-bottom: 24px; }
    .menu-top .menu-btn { display: inline-flex; margin: 0; }
    .menu nav { margin-top: auto; display: grid; }
    .menu nav a {
      font-family: var(--display); font-weight: 900; text-transform: uppercase;
      font-size: clamp(2.4rem, min(11.5vw, 11vh), 5rem); line-height: 1; text-decoration: none; white-space: nowrap;
    }
    .menu-foot { display: grid; gap: 10px; margin-top: 36px; }

    /* ===== Hero ===== */
    .hero-title { font-size: clamp(2.9rem, 11.4vw, 11.5rem); font-weight: 900; }
    .hero-title .line { display: block; overflow: hidden; padding-bottom: .04em; }
    .hero-title .line > span { display: inline-block; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
    @media (max-width: 860px) { .hero-actions .btn { flex: 1 1 100%; } }

    /* Home hero: full screen, a real job. The roller paints "before" into "after" on load; then drag or hover to compare. */
    .hx {
      position: relative; isolation: isolate; overflow: hidden;
      /* capped so an auto-height embed (where 100vh = the whole page) cannot balloon it */
      --u: 1vh;
      min-height: min(calc(var(--u) * 100), 230vw, 1300px);
      display: flex; flex-direction: column; justify-content: flex-end;
      background: var(--char);
    }
    @supports (height: 1svh) { .hx { --u: 1svh; } }
    .hx-stage { position: absolute; inset: 0; z-index: -1; --pos: 0%; user-select: none; -webkit-user-select: none; }
    .hx-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
    .hx-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
    .hx-shade {
      position: absolute; inset: 0; pointer-events: none;
      background:
        linear-gradient(180deg, rgba(20,21,19,.72) 0, rgba(20,21,19,0) calc(var(--header) + 90px)),
        linear-gradient(0deg, rgba(27,28,26,.97) 0, rgba(27,28,26,.9) 24%, rgba(27,28,26,.45) 50%, rgba(27,28,26,0) 68%);
    }
    .hx-edge {
      position: absolute; top: 0; bottom: 0; left: 0; transform: translateX(var(--rx, 0px)); width: 3px; margin-left: -1.5px;
      background: rgba(255,255,255,.9); box-shadow: 0 0 22px 2px rgba(255,255,255,.55);
      opacity: 0; transition: opacity .3s; pointer-events: none;
      /* starts under the header, so the line never cuts through the logo or phone number */
      -webkit-mask-image: linear-gradient(180deg, transparent var(--header), #000 calc(var(--header) + 24px), #000 48%, transparent 70%);
      mask-image: linear-gradient(180deg, transparent var(--header), #000 calc(var(--header) + 24px), #000 48%, transparent 70%);
    }
    .hx-stage.is-split .hx-edge { opacity: 1; }
    .hx-tag {
      position: absolute; top: calc(var(--header) + 14px);
      padding: 6px 12px; background: rgba(20,21,19,.78); color: var(--white);
      font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
      opacity: 0; transition: opacity .35s; pointer-events: none;
    }
    .hx-tag-b { left: var(--gutter); }
    .hx-tag-a { right: var(--gutter); }
    .hx-stage.show-a .hx-tag-a, .hx-stage.show-b .hx-tag-b { opacity: 1; }

    .hx-roller {
      position: absolute; left: 0; top: var(--rt, calc(var(--header) + 4vh));
      height: var(--rh, clamp(140px, 26vh, 300px)); aspect-ratio: 140 / 330;
      transform: translateX(var(--rx, 0px)) translateX(-60%);
      cursor: grab; touch-action: none; outline: none;
      -webkit-tap-highlight-color: transparent;
    }
    .hx-roller:active { cursor: grabbing; }
    .hx-roller svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 18px 24px rgba(0,0,0,.45)); }
    .hx-roller:focus-visible { outline: 2px solid var(--signal-text); outline-offset: 4px; box-shadow: 0 0 0 4px var(--char), 0 0 0 8px var(--char); }   /* a charcoal band under the ring keeps 3:1 over the white siding */
    .hx-roller.by-ptr:focus, .hx-roller.by-ptr:focus-visible { outline: none; box-shadow: none; }   /* a drag is not a keyboard focus; the leftover charcoal ring looked like a black box on phones */
    /* Phones: a wide invisible pad around the roller so a finger hits it instead of scrolling the page */
    @media (pointer: coarse), (max-width: 720px) {
      .hx-roller::after { content: ""; position: absolute; top: -32px; bottom: -32px; left: -80px; right: -80px; }
    }
    .hx-hint {
      position: absolute; left: 82%; top: 34%; white-space: nowrap;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 9px; background: var(--signal); color: var(--white);
      font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
      opacity: 0; transition: opacity .5s ease; pointer-events: none;
    }
    .hx-hint i { width: 6px; height: 6px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; }
    .hx-hint i.l { transform: rotate(-45deg); }
    .hx-hint i.r { transform: rotate(135deg); }
    .hx-stage.is-ready:not(.was-moved) .hx-hint { opacity: 1; }
    @media (prefers-reduced-motion: no-preference) {
      .hx-stage.is-ready:not(.was-moved) .hx-hint i { animation: blink 2.4s ease-in-out 1s infinite; }
      .hx-stage.is-ready:not(.was-moved) .hx-hint i.r { animation-delay: 2.2s; }
      @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
    }

    /* the content box covers the photo, so let pointer and touch fall through to the roller except on real content */
    .hx-content { pointer-events: none; }
    .hx-content > * { pointer-events: auto; }
    .hx-content { position: relative; width: 100%; padding-top: calc(var(--header) + max(140px, min(calc(var(--u) * 16), 170px))); padding-bottom: clamp(92px, 8.4vw, 132px); }
    .hx .hero-title { font-size: clamp(3rem, min(9.6vw, calc(var(--u) * 17)), 9.8rem); text-shadow: 0 2px 40px rgba(0,0,0,.35); }
    .hx-row { position: relative; margin-top: clamp(18px, 2.2vw, 30px); }
    .hx-copy { max-width: calc(100% - 370px); }
    .hx-rotate { font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 500; line-height: 1.3; }
    .rot { display: inline-grid; vertical-align: top; overflow: hidden; padding-bottom: .22em; margin-bottom: -.22em; }
    .rot-w {
      grid-area: 1 / 1; white-space: nowrap; color: var(--signal-text); font-weight: 600;
      text-decoration: underline 2px; text-underline-offset: .2em;
      transform: translateY(135%); transition: transform .65s var(--ease);
    }
    .rot-w.is-in { transform: none; }
    .rot-w.is-out { transform: translateY(-135%); }
    .hx .hero-actions { margin-top: 20px; }

    .hx-card {
      position: absolute; right: 0; bottom: 0;
      margin: 0; width: 330px; display: grid; gap: 12px;
      padding: 18px 20px 16px;
      background: rgba(27,28,26,.74); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
      border: 1px solid var(--line); border-top: 3px solid var(--signal);
      font-size: .95rem; line-height: 1.4;
    }
    .hx-card dt { color: var(--mute); font-size: .8125rem; font-weight: 600; }
    .hx-card dd { margin: 2px 0 0; }
    .hx-card a { color: var(--white); }
    .hx-card a:hover { color: var(--signal-text); }
    .hx-greet { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.55rem; line-height: 1; letter-spacing: .01em; }
    .hx-card-note { padding-top: 10px; border-top: 1px solid var(--line); }
    .hx-card-note { color: var(--mute); font-size: .82rem; margin: 0; }
    .hx-facts { margin: 0; display: grid; gap: 12px; }

    @media (max-width: 1060px) { .hx-copy { max-width: none; } .hx-card { display: none; } }
    @media (max-width: 860px) {
      .hx-content { padding-top: calc(var(--header) + max(140px, min(calc(var(--u) * 30), 380px))); padding-bottom: 86px; }
      .hx-stage > img { object-position: 46% 30%; }
      .hx-shade {
        background:
          linear-gradient(180deg, rgba(20,21,19,.7) 0, rgba(20,21,19,0) calc(var(--header) + 60px)),
          linear-gradient(0deg, rgba(27,28,26,.98) 0, rgba(27,28,26,.92) 40%, rgba(27,28,26,.4) 58%, rgba(27,28,26,0) 70%);
      }
      .hx-tag { font-size: .8125rem; padding: 5px 9px; }
      .hx-edge { -webkit-mask-image: linear-gradient(180deg, transparent var(--header), #000 calc(var(--header) + 24px), #000 40%, transparent 56%); mask-image: linear-gradient(180deg, transparent var(--header), #000 calc(var(--header) + 24px), #000 40%, transparent 56%); }
    }
    @media (max-width: 600px) { .hx .hero-title { font-size: clamp(2.7rem, 13.6vw, 4.6rem); } }

    @media (prefers-reduced-motion: no-preference) {
      .hero-title .line > span { animation: rise 1.1s var(--ease) both; }
      .hero-title .line:nth-child(2) > span { animation-delay: .1s; }
      .hx-rotate, .hx .hero-actions { animation: fade 1s .45s var(--ease) both; }
      .hx .hero-actions { animation-delay: .6s; }
      .hx-card { animation: slidein 1.1s .9s var(--ease) both; }
      .hx-stage > img { animation: settle 2.6s var(--ease) both; }
      body:has(.hx) .site-header { animation: fade .9s .2s var(--ease) both; }
      @keyframes rise { from { transform: translateY(102%); } to { transform: none; } }
      @keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
      @keyframes slidein { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
      @keyframes settle { from { transform: scale(1.1); } to { transform: scale(1); } }
    }

    /* ===== Tapes: two flag-colored tickers across the bottom of the hero ===== */
    .tapes {
      position: relative; z-index: 5;
      height: clamp(118px, 11vw, 164px); margin-top: clamp(-82px, -6vw, -60px);
      overflow: hidden; pointer-events: none;
    }
    .tape { position: absolute; left: -6%; width: 112%; padding: .42em 0; overflow: hidden; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.25rem, 2.3vw, 2.15rem); line-height: 1; letter-spacing: .02em; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
    .tape-navy { top: 46%; background: var(--navy); transform: rotate(1.6deg); color: var(--white); }
    .tape-red { top: 14%; background: var(--signal); transform: rotate(-2deg); color: var(--white); z-index: 1; }
    .tape-track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: tape 46s linear infinite; }
    .tape-navy .tape-track { animation-duration: 90s; animation-direction: reverse; }
    .tape li { display: flex; align-items: center; gap: .55em; padding-right: .55em; white-space: nowrap; }
    .tape .star { width: .62em; height: .62em; flex: none; }
    .tape-red .star { color: rgba(255,255,255,.75); }
    .tape-navy .star { color: #F2687B; }
    @keyframes tape { to { transform: translateX(-50%); } }
    .tapes.is-paused .tape-track { animation-play-state: paused; }
    .tape-pause {
      position: absolute; right: var(--gutter); bottom: 6px; z-index: 2; pointer-events: auto;
      width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
      background: var(--char); color: var(--white); border: 1px solid var(--line); cursor: pointer;
    }
    .tape-pause svg { width: 16px; height: 16px; }
    .tape-pause .i-play, .tapes.is-paused .tape-pause .i-pause { display: none; }
    .tapes.is-paused .tape-pause .i-play { display: block; }
    .tape-pause:hover { background: var(--white); color: var(--char); }
    @media (prefers-reduced-motion: reduce) { .tape-track { animation: none; } .tape-pause { display: none; } }

    /* ===== Statement ===== */
    .statement p {
      font-size: clamp(1.9rem, 3.6vw, 3.4rem);
      line-height: 1.18;
      letter-spacing: -.015em;
      max-width: 26ch;
      font-weight: 400;
    }
    .statement p span { color: var(--mute); }
    .statement p .w { color: inherit; transition: color .5s var(--ease); }
    .statement a { text-decoration-thickness: 2px; text-underline-offset: .14em; }
    .statement p.is-dim .w { color: var(--mute); }   /* unlit words still pass AA (6.8:1), so a page opened below it or an unscrolled audit never sees faint text */
    .stats { margin: clamp(56px, 7vw, 104px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
    .stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: 22px 20px 0 0; }
    .stats > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
    .stats dt { color: var(--mute); font-size: .95rem; }
    .stats dd { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .86; font-size: clamp(4rem, 9vw, 8.5rem); font-variant-numeric: tabular-nums; }
    .stats .num-word { display: block; font-size: clamp(1.8rem, 3.2vw, 3rem); line-height: .9; color: var(--signal-text); padding-top: .12em; }
    @media (max-width: 760px) {
      .stats { grid-template-columns: 1fr 1fr; }
      .stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
      .stats > div:nth-child(n+3) { margin-top: 28px; border-top: 1px solid var(--line); }
    }

    /* ===== Services ===== */
    .svc-head { margin-bottom: clamp(40px, 5vw, 72px); }
    .svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 88px); align-items: start; }
    .svc-list { list-style: none; margin: 0; padding: 0; }
    .svc {
      padding: clamp(22px, 2.6vw, 34px) 0;
      min-height: min(30vh, 300px); display: flex; flex-direction: column; justify-content: center;
      border-top: 1px solid var(--line);
      cursor: default;
    }
    .svc:last-child { border-bottom: 1px solid var(--line); }
    .svc h3 {
      font-family: var(--display); font-weight: 900; text-transform: uppercase;
      font-size: clamp(2.4rem, 4.6vw, 4.4rem); line-height: .9;
      color: rgba(245,245,242,.42);
      transition: color .45s var(--ease);
    }
    .svc p { margin-top: 12px; color: var(--mute); max-width: 34ch; }
    .svc.is-active h3 { color: var(--white); }
    .svc-img-inline { display: none; }

    .svc-media { position: sticky; top: calc((min(100vh, 1000px) - min(70vh, 640px)) / 2 + 20px); height: min(70vh, 640px); overflow: hidden; background: var(--char-2); }
    .svc-media img:nth-child(1) { object-position: 18% 50%; }
    .svc-media img {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
      opacity: 0; transform: scale(1.04);
      transition: opacity .7s var(--ease), transform 1.2s var(--ease);
    }
    .svc-media img.is-active { opacity: 1; transform: none; }
    @media (max-width: 900px) {
      .svc-grid { grid-template-columns: 1fr; }
      .svc { min-height: 0; }
      .svc-media { display: none; }
      .svc h3 { color: var(--white); }
      .svc-img-inline { display: block; margin-bottom: 18px; aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }
    }

    /* ===== Before / after ===== */
    .work-head { margin-bottom: clamp(36px, 4vw, 56px); }
    .work-head p { margin-top: 18px; color: var(--mute); max-width: 44ch; }
    .ba {
      --pos: 50%;
      position: relative;
      aspect-ratio: 4 / 3;
      max-height: min(86vh, max(260px, calc(100vh - var(--header) - 120px)));   /* fits between the fixed header and the bottom scroll padding, so keyboard focus is never under the header */
      width: 100%;
      overflow: hidden;
      background: var(--char-2);
      user-select: none; -webkit-user-select: none;
      touch-action: pan-y;
    }
    .ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .ba .ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
    .ba-tag {
      position: absolute; bottom: 16px; z-index: 3;
      padding: 6px 12px;
      background: rgba(27,28,26,.78);
      font-size: .85rem; font-weight: 600;
      pointer-events: none;
    }
    .ba-tag.l { left: 16px; }
    .ba-tag.r { right: 16px; }
    .ba-handle {
      position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 4;
      width: 2px; margin-left: -1px; background: var(--signal); pointer-events: none;
    }
    .ba-handle::after {
      content: ""; position: absolute; top: 50%; left: 50%;
      width: 56px; height: 56px; margin: -28px 0 0 -28px;
      background: var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23F5F5F2' d='M88 64v128l-64-64Zm80 0v128l64-64Z'/%3E%3C/svg%3E") center / 26px no-repeat;
    }
    .ba input[type="range"] {
      position: absolute; inset: 0; z-index: 5;
      width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
      -webkit-appearance: none; appearance: none;
    }
    .ba:has(input:focus-visible) { outline: 2px solid var(--signal-text); outline-offset: 4px; }
    .ba-caption { margin-top: 14px; color: var(--mute); font-size: .95rem; }

    .pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(28px, 4vw, 56px); margin-top: clamp(56px, 7vw, 96px); }
    .pair h3 { font-family: var(--sans); font-weight: 600; font-size: 1.25rem; margin-bottom: 14px; }
    .pair-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .pair figure { margin: 0; }
    .pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
    .pair figcaption { margin-top: 8px; font-size: .875rem; color: var(--mute); }
    .pair figure:last-child figcaption { color: var(--white); }

    /* ===== On the job (horizontal strip) ===== */
    .job-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 52px); }
    .strip-nav { display: flex; gap: 8px; }
    .strip-nav button {
      width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
      background: transparent; color: var(--white); border: 1px solid var(--line); cursor: pointer;
      transition: background-color .2s, color .2s, border-color .2s;
    }
    .strip-nav button:hover { background: var(--white); color: var(--char); border-color: var(--white); }
    .strip-nav svg { width: 22px; height: 22px; }
    .strip {
      display: flex; gap: clamp(14px, 2vw, 24px);
      overflow-x: auto; overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      padding: 0 var(--gutter) 18px;
      scroll-padding-left: var(--gutter);
      scrollbar-width: thin;
    }
    .strip:focus-visible { outline-offset: -2px; }
    @media (min-width: 1360px) {
      .strip { padding-left: calc((100vw - var(--wrap)) / 2 + var(--gutter)); scroll-padding-left: calc((100vw - var(--wrap)) / 2 + var(--gutter)); }
    }
    .strip figure { margin: 0; flex: 0 0 clamp(270px, 38vw, 560px); scroll-snap-align: start; }
    .strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
    .strip figcaption { margin-top: 12px; font-size: .95rem; color: var(--mute); }
    .strip figcaption b { display: block; color: var(--white); font-weight: 600; }
    @media (max-width: 640px) { .strip-nav { display: none; } .strip figure { flex-basis: 82vw; } }

    /* ===== About ===== */
    .about-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
    .about-media { margin: 0; }
    .about-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
    .about-media figcaption { margin-top: 12px; font-size: .95rem; color: var(--mute); }
    .about-media figcaption b { display: block; color: var(--white); font-weight: 600; }
    .about-copy p { margin-top: 24px; color: var(--mute); font-size: 1.15rem; max-width: 40ch; }
    .about-copy .btn { margin-top: 32px; }
    .about-copy .about-hi { color: var(--white); font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 500; line-height: 1.3; }
    .about-copy .sig {
      margin-top: 20px; color: var(--white);
      font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive; font-weight: 600;
      font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1; transform: rotate(-3deg); transform-origin: left center; width: fit-content;
    }
    .about-copy .sig::after { content: ""; display: block; height: 3px; width: 70%; margin-top: 4px; background: var(--signal); transform: rotate(1deg); }
    @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }

    /* ===== Reviews ===== */
    .reviews-note { margin-top: 18px; color: var(--mute); max-width: 52ch; }
    .reviews { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 0; }
    .review {
      margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 12px 40px; align-items: baseline;
      padding: 28px 0; border-top: 1px solid var(--line);
    }
    .review:last-child { border-bottom: 1px solid var(--line); }
    .review blockquote { margin: 0; font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.35; max-width: 40ch; }
    .review figcaption { color: var(--mute); font-size: .95rem; white-space: nowrap; }
    .stars { color: var(--mute); letter-spacing: 3px; font-size: .95rem; grid-column: 1 / -1; }
    @media (max-width: 700px) { .review { grid-template-columns: 1fr; } }

    /* ===== Contact ===== */
    .contact-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 104px); align-items: start; }
    .contact-intro p { margin-top: 20px; color: var(--mute); font-size: 1.15rem; }
    .contact-intro p:first-of-type { color: var(--white); }
    .contact-intro .contact-note { margin-top: 10px; font-size: 1.02rem; max-width: 40ch; }
    .big-phone {
      display: inline-block; margin-top: clamp(32px, 4vw, 48px);
      font-family: var(--display); font-weight: 900;
      font-size: clamp(min(3.2rem, 15vw), 6.4vw, 6rem); line-height: .9; white-space: nowrap;
      text-decoration: none; font-variant-numeric: lining-nums;
      transition: color .25s var(--ease);
    }
    .big-phone:hover { color: var(--signal-text); }
    .details { margin: 40px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
    .details dt { font-size: .85rem; color: var(--mute); margin-bottom: 4px; }
    .details dd { margin: 0; }
    @media (max-width: 520px) { .details { grid-template-columns: 1fr; } }

    .form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; background: var(--char-2); padding: clamp(24px, 4vw, 48px); }
    .form h3 { grid-column: 1 / -1; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: .9; }
    .field { display: grid; gap: 8px; }
    .field-full { grid-column: 1 / -1; }
    .field label { font-size: .9rem; font-weight: 500; }
    .field .opt { color: var(--mute); font-weight: 400; }
    .field input, .field select, .field textarea {
      width: 100%; font: inherit; font-size: 1rem; color: var(--white);
      background: var(--char-2); border: 1px solid #76776F; border-radius: 0;
      padding: 14px 14px; caret-color: var(--signal-text);
      transition: border-color .2s;
      -webkit-appearance: none; appearance: none;
    }
    .field input::placeholder, .field textarea::placeholder { color: #8E8F89; }
    .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--mute); }
    .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--signal-text); box-shadow: 0 0 0 1px var(--signal-text); }
    .field select {
      cursor: pointer; padding-right: 40px;
      background: var(--char-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23F5F5F2' d='M213.7 101.7l-80 80a8 8 0 0 1-11.4 0l-80-80a8 8 0 0 1 11.4-11.4L128 164.7l74.3-74.4a8 8 0 0 1 11.4 11.4Z'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
    }
    .field textarea { min-height: 140px; resize: vertical; }
    .form .btn { grid-column: 1 / -1; width: 100%; min-height: 60px; font-size: 1.05rem; }
    .form .btn[disabled], .form .btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
    .form-status { grid-column: 1 / -1; min-height: 1.6em; font-weight: 500; }
    .form-status.is-error { color: var(--signal-text); }
    @media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
    @media (max-width: 520px) { .form { grid-template-columns: 1fr; } }

    /* ===== Footer ===== */
    .site-footer { padding: clamp(64px, 8vw, 112px) 0 32px; border-top: 1px solid var(--line); overflow: hidden; }
    .footer-word { padding: 0 var(--gutter); margin: clamp(48px, 7vw, 96px) auto 0; max-width: var(--wrap); }
    .footer-word img { width: 100%; height: auto; display: block; }
    .footer-row {
      margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--line);
      display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
      font-size: .9rem; color: var(--mute);
    }
    .footer-row a { color: var(--white); text-decoration: none; display: inline-block; padding: 12px 0; margin: -12px 0; }
    .footer-row a:hover { color: var(--signal-text); }

    /* ===== Mobile call bar ===== */
    .call-bar { display: none; }
    @media (max-width: 720px) {
      .call-bar {
        display: grid; grid-template-columns: 1fr; gap: 8px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(27,28,26,.94);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid var(--line);
        transform: translateY(110%); transition: transform .6s var(--ease);
      }
      .call-bar.is-visible { transform: none; }
      .call-bar .btn { min-height: 50px; padding: 0 18px; }
      body { padding-bottom: 72px; }
    }

    @media (prefers-reduced-motion: reduce) {
      /* 0s, not .01ms: a running visibility transition kept the menu's Close button unfocusable for a frame */
      *, *::before, *::after { animation-duration: .01ms !important; transition-duration: 0s !important; }
    }
    
    /* ===================== Multi-page components ===================== */
    a:hover { text-decoration-color: var(--signal-text); }
    .nav a[aria-current] { color: var(--white); }
    .svc h3 a { color: inherit; text-decoration: none; }
    .svc h3 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em; }
    h2.display a { color: inherit; text-decoration: none; }
    h2.display a:hover { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .1em; }
    .statement a { color: var(--white); }
    .lead-p { margin-top: 18px; color: var(--mute); font-size: 1.15rem; max-width: 52ch; }

    /* Breadcrumbs */
    .crumbs { padding-top: calc(var(--header) + 22px); }
    .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: .9rem; color: var(--mute); }
    .crumbs li:not(:last-child)::after { content: "/"; content: "/" / ""; margin-left: 10px; color: #6B6C66; }   /* shown, not read aloud; ends a line, never starts one */
    .crumbs a { color: var(--mute); text-decoration: none; }
    .crumbs a:hover { color: var(--white); text-decoration: underline; }
    .crumbs [aria-current] { color: var(--white); }

    /* Inner page hero */
    .page-hero { padding-top: clamp(20px, 3vw, 40px); }
    .page-title { font-size: clamp(3rem, 8.4vw, 8.4rem); font-weight: 900; max-width: 15ch; text-wrap: balance; }
    .page-lede { margin-top: 22px; color: var(--mute); font-size: clamp(1.1rem, 1.4vw, 1.3rem); max-width: 56ch; }
    .page-lede a { color: var(--white); }
    .page-hero .hero-actions { margin-top: 28px; }
    .page-media { margin-top: clamp(32px, 4vw, 56px); height: min(64vh, 42vw); min-height: 240px; overflow: hidden; }
    .page-media img { width: 100%; height: 100%; object-fit: cover; }
    .section-tight { padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 8vw, 112px); }
    @media (max-width: 860px) { .page-media { height: 62vw; } .page-hero .hero-actions .btn { flex: 1 1 100%; } }

    /* Split layout */
    .split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
    @media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

    .ticks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; }
    .ticks li { padding: 16px 0 16px 34px; border-top: 1px solid var(--line); position: relative; font-size: 1.1rem; }
    .ticks li:last-child { border-bottom: 1px solid var(--line); }
    .ticks li::before { content: ""; position: absolute; left: 4px; top: 24px; width: 14px; height: 8px; border-left: 2px solid var(--signal-text); border-bottom: 2px solid var(--signal-text); transform: rotate(-45deg); }

    .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .gallery figure { margin: 0; }
    .gallery figure:only-child { grid-column: 1 / -1; }
    .gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
    .gallery figcaption { margin-top: 8px; font-size: .9rem; color: var(--mute); }
    @media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }

    .ba-fig { margin: clamp(32px, 4vw, 48px) 0 0; }

    .inline-links { margin-top: 24px; color: var(--mute); line-height: 2; max-width: 90ch; }
    .inline-links a { color: var(--white); }
    .sub-h { font-family: var(--sans); font-weight: 600; font-size: 1.15rem; margin-top: 40px; }
    .plain-links { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
    .plain-links a { color: var(--white); }

    /* Service links (town pages) */
    .svc-links { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 56px); }
    .svc-link { display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); text-decoration: none; }
    .svc-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--char-2); }
    .svc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
    .svc-link:hover .svc-thumb img { transform: scale(1.05); }
    .svc-name { display: block; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.9rem; line-height: .95; }
    .svc-desc { display: block; margin-top: 6px; color: var(--mute); font-size: .95rem; }
    .svc-link:hover .svc-name { text-decoration: underline; text-decoration-thickness: 2px; }
    @media (max-width: 860px) { .svc-links { grid-template-columns: 1fr; } .svc-link { grid-template-columns: 104px 1fr; } }

    /* Services hub */
    .hub { display: grid; gap: clamp(48px, 6vw, 88px); }
    .hub-item { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
    .hub-item:nth-child(even) .hub-media { order: 2; }
    .hub-media { display: block; overflow: hidden; text-decoration: none; }   /* the type tile's words are not links */
    .hub-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .8s var(--ease); }
    .hub-media:hover img { transform: scale(1.03); }
    .hub-title { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: .9; }
    .hub-title a { text-decoration: none; }
    .hub-title a:hover { text-decoration: underline; text-decoration-thickness: .05em; }
    .hub-text p { margin-top: 16px; color: var(--mute); font-size: 1.1rem; max-width: 40ch; }
    @media (max-width: 860px) { .hub-item { grid-template-columns: 1fr; } .hub-item:nth-child(even) .hub-media { order: 0; } }

    /* Areas */
    .area-groups { margin-top: clamp(32px, 4vw, 52px); columns: 4 220px; column-gap: clamp(24px, 4vw, 56px); }
    .area-group { break-inside: avoid; margin-bottom: 32px; }
    .area-group h3, .area-h { font-family: var(--sans); font-weight: 600; font-size: .95rem; color: var(--mute); margin-bottom: 8px; }
    .area-group ul { list-style: none; margin: 0; padding: 0; }
    .area-group li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
    .area-group li span { color: var(--mute); font-size: .9rem; font-variant-numeric: tabular-nums; }
    .area-group a { color: var(--white); text-decoration: none; font-size: 1.05rem; }
    .area-group a:hover { text-decoration: underline; }
    .area-groups.big .area-group a { font-size: 1.2rem; }

    .area-map { width: 100%; height: auto; display: block; background: var(--char-2); }
    .area-map .ring { fill: none; stroke: rgba(245,245,242,.14); stroke-dasharray: 4 6; }
    .area-map .ring-l { fill: #8E8F89; font: 500 15px var(--sans); }
    .area-map .dot { fill: var(--white); }
    .area-map .lbl { fill: var(--white); font: 500 15px var(--sans); }
    .area-map a:hover .dot { fill: var(--signal-text); }
    .area-map a:hover .lbl { fill: var(--signal-text); text-decoration: underline; }
    .area-map a:focus-visible { outline: none; }
    .area-map a:focus-visible .lbl { fill: var(--signal-text); text-decoration: underline; }
    .area-map .shop { fill: var(--signal); }
    .area-map .shop-l { font-weight: 600; }
    .map-note { margin-top: 12px; font-size: .9rem; color: var(--mute); }

    .near-list { list-style: none; margin: 0; padding: 0; }
    .near-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 18px 0; border-top: 1px solid var(--line); }
    .near-list li > * { min-width: 0; }
    .near-list li:last-child { border-bottom: 1px solid var(--line); }
    .near-list a { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; text-decoration: none; }
    .near-list a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
    .near-list span { color: var(--mute); font-size: .95rem; white-space: nowrap; }
    .lead-p a { color: var(--white); }

    /* FAQ */
    .faq { margin-top: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line); max-width: 920px; }
    .faq-item { border-top: 1px solid var(--line); }
    .faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary h3 { font-family: var(--sans); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.35; }
    .faq-item summary::after { content: ""; width: 12px; height: 12px; flex: none; border-right: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(45deg) translateY(-4px); transition: transform .3s var(--ease); }
    .faq-item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
    .faq-a { padding: 0 0 24px; color: var(--mute); max-width: 64ch; }
    .faq-a a { color: var(--white); }

    /* CTA band */
    .cta-grid { display: grid; grid-template-columns: 1fr auto; gap: 32px 64px; align-items: end; }
    .cta-band p { margin-top: 16px; color: var(--mute); font-size: 1.1rem; max-width: 44ch; }
    .cta-actions .big-phone { margin-top: 0; }
    .cta-actions .hero-actions { margin-top: 18px; }
    @media (max-width: 900px) { .cta-grid { grid-template-columns: minmax(0, 1fr); } .cta-actions .hero-actions .btn { flex: 1 1 100%; } }

    /* Footer columns */
    .footer-cols { display: grid; grid-template-columns: 1.1fr 1fr 2.2fr; gap: 40px clamp(32px, 5vw, 72px); }
    .footer-h { font-family: var(--sans); font-weight: 600; font-size: .95rem; color: var(--mute); margin-bottom: 14px; }
    .footer-h a { color: inherit; }
    .footer-phone { font-family: var(--display); font-weight: 900; font-size: 2.2rem; line-height: 1; text-decoration: none; }
    .site-footer address { font-style: normal; margin-top: 12px; color: var(--white); }
    .footer-cta { margin-top: 20px; }
    .footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
    .footer-list a { display: inline-block; padding: 5px 0; color: var(--white); text-decoration: none; font-size: .98rem; }
    .footer-list a:hover { text-decoration: underline; }
    .footer-list.cols { display: block; columns: 3 140px; column-gap: 24px; }
    @media (max-width: 900px) { .footer-cols { grid-template-columns: 1fr 1fr; } .footer-areas { grid-column: 1 / -1; } }
    @media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr; } }

    /* ===================== Paint strokes ===================== */
    /* A rough red brush stroke painted behind a headline when it comes into view. */
    .hero-title, h2.display { position: relative; isolation: isolate; }
    h2.display { width: fit-content; max-width: 100%; }
    .paint { position: absolute; z-index: -1; pointer-events: none; left: 0; bottom: -.1em; width: 100%; height: .42em; display: block; }
    .hero-title .paint { left: 0; bottom: .02em; width: min(100%, 3.15em); height: .5em; }
    .paint svg { display: block; width: 100%; height: 100%; overflow: visible; }
    .paint .ink { fill: var(--signal); }
    .paint .tool { position: absolute; left: 0; top: 0; width: .9em; min-width: 54px; max-width: 120px; height: auto; transform-origin: 4% 50%; opacity: 0; transition: opacity .3s; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
    .paint.is-painting .tool { opacity: 1; }

    /* ===================== Components adapted from Uiverse.io (MIT) ===================== */

    /* Call button. Adapted from Uiverse.io by andrew-demchenk0 ("tasty-yak-79"):
       an icon panel on the right that sweeps across the button on hover; the phone rings. */
    .btn-call { position: relative; overflow: hidden; padding: 0 calc(56px + 22px) 0 26px; isolation: isolate; }
    .btn-call::before { display: none; }
    .btn-call .btn-text { position: relative; z-index: 1; white-space: nowrap; }
    .btn-call .btn-ic {
      position: absolute; top: 0; right: 0; bottom: 0; width: 56px; z-index: 0;
      display: flex; align-items: center; justify-content: flex-end; padding-right: 18px;
      background: #8E0722;
      transition: width .45s cubic-bezier(.65,0,.35,1);
    }
    .btn-call .btn-ic svg { width: 20px; height: 20px; flex: none; }
    .btn-call:hover, .btn-call:focus-visible { filter: none; }
    .btn-call:hover .btn-ic, .btn-call:focus-visible .btn-ic { width: 100%; }
    .btn-call:hover .btn-ic svg, .btn-call:focus-visible .btn-ic svg { animation: ring .9s ease-in-out; }
    @keyframes ring {
      0%, 100% { transform: rotate(0); }
      10%, 30%, 50% { transform: rotate(-16deg); }
      20%, 40%, 60% { transform: rotate(16deg); }
      70% { transform: rotate(0); }
    }
    .header-actions .btn-call { padding-right: calc(44px + 18px); }
    .header-actions .btn-call .btn-ic { width: 44px; padding-right: 13px; }

    /* Send button. Adapted from Uiverse.io by Bastiennnn ("strong-lionfish-94"):
       the paper plane lifts on hover and flies off when the form is sending. */
    .btn-send .plane { width: 18px; height: 18px; flex: none; transition: transform .5s cubic-bezier(.4,0,.2,1); }
    .btn-send:hover .plane, .btn-send:focus-visible .plane { transform: translate(3px, -4px) rotate(-18deg); }
    .btn-send.is-flying .plane { animation: fly 1.1s cubic-bezier(.4,0,.2,1) both; }
    @keyframes fly {
      0% { transform: translate(0,0) rotate(0); opacity: 1; }
      45% { transform: translate(60px,-34px) rotate(-30deg) scale(.9); opacity: 1; }
      55% { opacity: 0; }
      56% { transform: translate(-60px, 20px) rotate(0); opacity: 0; }
      100% { transform: translate(0,0) rotate(0); opacity: 1; }
    }
    .btn-send { overflow: hidden; }

    /* Nav and footer links. Adapted from Uiverse.io by MuhammadHasann ("happy-cobra-7"):
       an underline that draws in from the left. */
    .nav a, .footer-list a, .plain-links a, .crumbs a { position: relative; text-decoration: none; }
    .nav a::after, .footer-list a::after, .plain-links a::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
      background: currentColor; transform: scaleX(0); transform-origin: right;
      transition: transform .45s cubic-bezier(.65,0,.35,1);
    }
    .footer-list a::after { bottom: 3px; }
    .nav a:hover::after, .nav a[aria-current]::after,
    .footer-list a:hover::after, .plain-links a:hover::after { transform: scaleX(1); transform-origin: left; }
    .footer-list a:hover, .plain-links a:hover { text-decoration: none; }

    /* Floating labels. Adapted from Uiverse.io by liyaxu123 ("warm-eel-62"):
       the label letters hop up one by one when the field is focused or filled. */
    .field.float { position: relative; display: block; }
    .field.float input, .field.float textarea { padding: 24px 14px 10px; }
    .field.float label {
      position: absolute; left: 15px; top: 17px; pointer-events: none;
      color: var(--mute); font-weight: 500; font-size: 1rem; line-height: 1.2;
      max-width: calc(100% - 30px); white-space: nowrap;
    }
    .field.float label .ch { display: inline-block; min-width: .28em; transition: transform .35s cubic-bezier(.68,-.55,.27,1.55), color .3s, font-size .3s; }
    .field.float input:focus + label .ch, .field.float input:not(:placeholder-shown) + label .ch,
    .field.float textarea:focus + label .ch, .field.float textarea:not(:placeholder-shown) + label .ch {
      transform: translateY(-11px) scale(.78); color: var(--white);
    }
    .field.float input:focus + label .ch, .field.float textarea:focus + label .ch { color: var(--signal-text); }
    .field.float label .opt { transition: opacity .3s; }
    .field.float input:focus + label .opt, .field.float input:not(:placeholder-shown) + label .opt,
    .field.float textarea:focus + label .opt, .field.float textarea:not(:placeholder-shown) + label .opt { opacity: 0; }
    .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

    /* Service checkboxes. Adapted from Uiverse.io by gharsh11032000 ("nasty-panda-23"):
       a square box whose check drops in from above. */
    .chips { border: 0; margin: 0; padding: 0; min-width: 0; }
    .chips legend { padding: 0; font-weight: 500; font-size: .95rem; margin-bottom: 10px; }
    .chips legend .opt { color: var(--mute); font-weight: 400; }
    .chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .chips legend { width: 100%; }
    .chip { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px 8px 12px; border: 1px solid #76776F; background: var(--char-2); cursor: pointer; user-select: none; transition: border-color .25s, background-color .25s; font-size: .95rem; }
    .chip:hover { border-color: var(--mute); }
    .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
    .chip-box { position: relative; width: 18px; height: 18px; border: 2px solid var(--mute); overflow: hidden; flex: none; transition: border-color .3s, background-color .3s; }
    .chip-box::after { content: ""; position: absolute; left: 4px; top: -14px; width: 5px; height: 9px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: top .5s cubic-bezier(.23,1,.32,1); }
    .chip input:checked ~ .chip-box { border-color: var(--signal); background: var(--signal); }
    .chip input:checked ~ .chip-box::after { top: 1px; }
    .chip:has(input:checked) { border-color: var(--signal-text); }
    .chip input:focus-visible ~ .chip-box { outline: 2px solid var(--signal-text); outline-offset: 3px; }

    /* Copy-the-number tooltip. Adapted from Uiverse.io by Galahhad ("kind-cheetah-52"). */
    .header-phone { position: relative; }
    .header-phone .tip {
      position: absolute; left: 50%; top: calc(100% + 10px); transform: translate(-50%, -4px);
      padding: 6px 9px; background: var(--white); color: var(--char); font-size: .8125rem; font-weight: 600; white-space: nowrap;
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity .2s, transform .2s, visibility .2s;
    }
    .header-phone .tip::before { content: attr(data-a); }
    .header-phone.is-copied .tip::before { content: attr(data-b); }
    .header-phone .tip::after { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); z-index: -1; }
    @media (hover: hover) and (pointer: fine) {
      .header-phone:hover .tip, .header-phone.is-copied .tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
    }

    /* Mobile call bar: the phone gives a short ring every few seconds. Adapted from Uiverse.io by andrew-demchenk0 ("smart-wasp-46"). */
    .call-bar.is-visible .btn-call .btn-ic svg { animation: ring .9s ease-in-out .6s 3; }
    @media (prefers-reduced-motion: reduce) {
      .btn-call .btn-ic svg, .call-bar .btn-call .btn-ic svg, .btn-send .plane { animation: none !important; }
    }
    .field.float { overflow: clip; overflow-clip-margin: 3px; }
    .paint .tool { max-width: min(120px, 18vw); }
    .paint:not(.is-painting) .tool { display: none; }
    @media (max-width: 360px) { .wordmark { font-size: 1.02rem; gap: 8px; } .wordmark .mark { width: 26px; height: 26px; } }

    /* ===== Hover details (hoverstat.es-style): photos zoom inside their frame, service names get a pointer, buttons lean toward the cursor ===== */
    @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
      .pair-imgs img, .strip img, .gallery img {
        transition: transform .9s var(--ease), clip-path .9s var(--ease);
        clip-path: inset(0);
      }
      .pair-imgs figure:hover img, .strip figure:hover img, .gallery figure:hover img, .gallery a:hover img { transform: scale(1.06); clip-path: inset(2.83%); }
      .svc h3 a { display: inline-flex; align-items: center; gap: .18em; text-decoration: none; }
      .svc h3 a::after {
        content: ""; width: .32em; height: .32em; margin-left: .1em;
        border-top: .1em solid var(--signal); border-right: .1em solid var(--signal);
        transform: translateX(-.4em) rotate(45deg); opacity: 0;
        transition: transform .45s var(--ease), opacity .3s;
      }
      .svc:hover h3 a::after, .svc h3 a:focus-visible::after { transform: rotate(45deg); opacity: 1; }
      .magnetic { transition: transform .5s var(--ease), background-color .25s, color .25s, border-color .25s, filter .25s; will-change: transform; }
    }

    /* ===== Town check: "Do we come to your town?" ===== */
    .town-check { margin-top: clamp(28px, 3.5vw, 44px); max-width: 640px; }
    @media (min-width: 1200px) {
      .areas-top h2 { text-wrap: wrap; }
      .areas-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 64px; align-items: start; }
      .areas-top .town-check { margin-top: 10px; min-height: 230px; }
    }
    .town-check label { display: block; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; margin-bottom: 14px; }
    .tc-row { position: relative; }
    .tc-pin { position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--signal-text); pointer-events: none; }
    .tc-row input {
      width: 100%; min-height: 60px; padding: 0 18px 0 48px;
      background: var(--char-2); color: var(--white); border: 1px solid #76776F; border-radius: 0;
      font: inherit; font-size: 1.15rem; transition: border-color .25s, box-shadow .25s;
    }
    .tc-row input::placeholder { color: #8B8C86; }
    .tc-row input:focus { outline: none; border-color: var(--signal-text); box-shadow: 0 0 0 3px rgba(242,104,123,.25); }
    .tc-row input::-webkit-calendar-picker-indicator { display: none !important; }
    .tc-out:empty { display: none; }
    .tc-out { margin-top: 12px; padding: 16px 18px; background: var(--char-2); border-top: 3px solid var(--signal); }
    .tc-out.is-yes { border-top-color: var(--white); }
    .tc-out p { margin: 0; }
    .tc-out .tc-head { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.1rem; color: var(--white); overflow-wrap: anywhere; }
    .tc-out .tc-head > span { min-width: 0; }
    .tc-out .tc-head svg { width: 22px; height: 22px; flex: none; color: var(--signal-text); }
    .tc-out .tc-sub { margin-top: 4px; color: var(--mute); }
    .tc-out .tc-links { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
    .tc-out .tc-links a { color: var(--white); font-weight: 600; }
    .tc-out .tc-links a:hover { color: var(--signal-text); }
    @media (prefers-reduced-motion: no-preference) { .tc-out:not(:empty) { animation: fade .45s var(--ease) both; } }

    /* ===== FAQ accordion: opens smoothly where the browser supports it ===== */
    .faq-item { interpolate-size: allow-keywords; }
    .faq-item::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
    .faq-item[open]::details-content { block-size: auto; }
    .faq-item summary h3 { transition: color .25s; }
    .faq-item summary:hover h3 { color: var(--signal-text); }
    .faq-item summary:focus-visible { outline-offset: 4px; }
    @media (prefers-reduced-motion: reduce) { .faq-item::details-content { transition: none; } }

    /* Header logo: compact lockup of the client's logo (flag with rolled-on white strokes + Diplomata SC lettering) */
    .wordmark .logo { display: block; height: 52px; width: auto; background: #fff; }
    @media (max-width: 720px) { .wordmark .logo { height: 44px; } }
    @media (max-width: 360px) { .wordmark .logo { height: 38px; } }

    /* ===== Inner page opener: full-bleed photo, scrim, crumbs, big title (supahero-style) ===== */
    .ph {
      position: relative; isolation: isolate; overflow: hidden;
      display: flex; flex-direction: column; justify-content: flex-end;
      --u: 1vh; min-height: min(calc(var(--u) * 80), 230vw, 880px);
      padding: 0;
    }
    @supports (height: 1svh) { .ph { --u: 1svh; } }
    .ph-media { position: absolute; inset: 0; z-index: -2; }
    .ph-media img { width: 100%; height: 100%; object-fit: cover; }
    .ph-shade {
      position: absolute; inset: 0; z-index: -1; pointer-events: none;
      background:
        linear-gradient(180deg, rgba(20,21,19,.78) 0, rgba(20,21,19,0) calc(var(--header) + 110px)),
        linear-gradient(0deg, rgba(27,28,26,.98) 0, rgba(27,28,26,.9) 22%, rgba(27,28,26,.5) 50%, rgba(27,28,26,.1) 72%);
    }
    .ph .crumbs { position: static; padding: 6px 10px; margin: 0 0 clamp(18px, 2.4vw, 30px); width: fit-content; max-width: 100%; background: rgba(20,21,19,.62); }
    .ph .crumbs a { color: rgba(245,245,242,.82); }
    .ph .crumbs { text-shadow: 0 1px 12px rgba(0,0,0,.6); }
    .ph-notape .ph-content { padding-bottom: clamp(56px, 6vw, 88px); }
    .ph-tag { margin-top: 16px; max-width: 46ch; color: rgba(245,245,242,.7); font-size: .8rem; line-height: 1.4; }
    .ph-content { position: relative; width: 100%; padding-top: calc(var(--header) + 28px); padding-bottom: clamp(96px, 9vw, 136px); }
    .ph .page-title { position: relative; isolation: isolate; width: fit-content; max-width: 100%; text-shadow: 0 2px 36px rgba(0,0,0,.35); }
    .ph .page-lede { color: rgba(245,245,242,.88); }
    .ph .page-lede a { color: var(--white); }
    .ph + .tapes { margin-top: clamp(-82px, -6vw, -56px); }
    /* the single inner-page tape gets a 48px strip of its own under it for the pause button (it used to cover the tape's right end) */
    .tapes-one { --th: clamp(78px, 7vw, 104px); height: calc(var(--th) + 48px); }
    .tapes-one .tape-red { top: calc(var(--th) * .22); }
    .tapes-one .tape-pause { bottom: 2px; }
    @media (prefers-reduced-motion: no-preference) {
      .ph-media img { animation: settle 2.4s var(--ease) both; }
      .ph .page-title, .ph .page-lede, .ph .hero-actions { animation: fade 1s var(--ease) both; }
      .ph .page-lede { animation-delay: .15s; }
      .ph .hero-actions { animation-delay: .3s; }
    }
    @media (max-width: 720px) {
      .ph { min-height: min(calc(var(--u) * 86), 230vw, 760px); }
      .ph-shade {
        background:
          linear-gradient(180deg, rgba(20,21,19,.78) 0, rgba(20,21,19,0) calc(var(--header) + 80px)),
          linear-gradient(0deg, rgba(27,28,26,.98) 0, rgba(27,28,26,.92) 38%, rgba(27,28,26,.45) 62%, rgba(27,28,26,.1) 80%);
      }
    }

    /* stock-photo tag (unused since Nov 5: no stock photo ships; kept for the stock rule in DESIGN.md) */
    .stock-tag {
      position: absolute; left: 10px; top: 10px; z-index: 2;
      padding: 4px 8px; background: rgba(20,21,19,.82); color: var(--white);
      font-size: .74rem; font-weight: 600; letter-spacing: .04em; pointer-events: none;
    }
    .hub-media, .stock-wrap { position: relative; display: block; }
    .svc-media .stock-tag { opacity: 0; transition: opacity .4s; }
    .svc-media img.is-stock.is-active ~ .stock-tag { opacity: 1; }

    /* ===== WebGPU shader effects (shaders by Shader Effects Inc., MIT; see assets/shaders-LICENSE.txt) =====
       Optional layers: hidden until the effect has drawn, never needed for content. */
    [data-fx] { position: relative; }
    [data-fx] > .wrap { position: relative; z-index: 1; }
    .fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
    .fx-on > .fx-canvas { opacity: 1; }
    [data-fx="ink"] > .fx-canvas { mix-blend-mode: screen; }
    [data-fx="ink"].fx-on > .fx-canvas { opacity: .4; }
    .fx-hint { position: absolute; right: var(--gutter); top: 18px; z-index: 2; padding: 5px 10px; background: rgba(20,21,19,.7); color: var(--mute);
      font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: 0; transition: opacity .8s; pointer-events: none; }
    .fx-on > .fx-hint { opacity: 1; }
    /* ASC logo (Dalton's decal) above the footer wordmark */
    .footer-flag { width: min(420px, 72vw); margin: clamp(28px, 5vw, 56px) auto 0; }
    .footer-flag img { display: block; width: 100%; height: auto; }

    /* ===== Scroll progress (a red paint line along the top) and a back-to-top button that fills like a can ===== */
    .progress { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 260; pointer-events: none; }
    .progress span { display: block; height: 100%; background: var(--signal); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
    .to-top {
      position: fixed; right: 22px; bottom: 22px; z-index: 150; width: 52px; height: 52px;
      display: grid; place-items: center; border: 1px solid var(--line); background: var(--char-2); color: var(--white); cursor: pointer;
      overflow: hidden; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .35s, transform .45s var(--ease), border-color .25s;
    }
    .to-top::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p, 0) * 100%); background: var(--signal); transition: height .2s linear; }
    .to-top svg { position: relative; width: 20px; height: 20px; transition: transform .3s var(--ease); }
    .to-top:hover svg { transform: translateY(-3px); }
    .to-top:hover { border-color: var(--white); }
    .to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
    @media (max-width: 720px) { .to-top { display: none; } }
    @media (prefers-reduced-motion: reduce) { .to-top::before { transition: none; } }

    /* QA fixes */
    @media (min-width: 900.02px) { .svc .stock-wrap .stock-tag { display: none; } }   /* inline photo is hidden there */
    .map-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .map-scroll:focus-visible { outline: 2px solid var(--signal-text); outline-offset: 2px; }
    .map-swipe { display: none; }
    .steps-card { padding: clamp(22px, 3vw, 36px); background: var(--char-2); border-top: 3px solid var(--signal); }
    .steps-card h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: .9; }
    .steps-card ol { margin: 18px 0 24px; padding-left: 1.3em; display: grid; gap: 12px; color: var(--mute); }
    .steps-card ol b { color: var(--white); font-weight: 600; }


    /* ===== Kinetic band (prompt-motion style kinetic type): COVER / PREP / PAINT painted on by a sweeping block =====
       The static three-up list is the base: JS off, reduced motion and the end of the one pass (.is-done) all show it.
       The one-at-a-time pass needs site.js (html.js) and motion. A step waiting for its turn is hidden with opacity,
       never visibility, so screen readers always have all three. site.js reserves the taller of the two layouts
       (min-height) so settling never moves the page; the two are sized to nearly the same height (see below). */
    .kinetic { position: relative; padding: clamp(64px, 9vw, 128px) 0; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .kinetic > .wrap { position: relative; }
    .kin { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
    .kin li { display: grid; grid-template-columns: auto 1fr; align-items: end; align-content: start; gap: 0 clamp(16px, 3vw, 40px); }   /* packed at the top, so a longer caption never moves its word */
    .kin-n { grid-row: 1; font-family: var(--display); font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.8rem); color: var(--mute); align-self: start; padding-top: .6em; }
    .kin-w { position: relative; grid-row: 1; width: fit-content; font-family: var(--display); font-weight: 900; text-transform: uppercase;
      font-size: clamp(3.5rem, 8vw, 6rem); line-height: .8; letter-spacing: -.01em; }
    @media (min-width: 900.02px) { .kin-w { font-size: clamp(3.5rem, 9vw, 8.25rem); } }   /* the settled list fills the height the one-word pass needs */
    .kin li:nth-child(3) .kin-t { color: var(--signal-text); }
    .kin-b { position: absolute; inset: -2% -1%; background: var(--signal); transform: scaleX(0); transform-origin: left; }
    .kin li:nth-child(2) .kin-b { background: var(--navy); }
    .kin li:nth-child(3) .kin-b { background: var(--white); }
    .kin-c { grid-column: 1 / -1; margin-top: 18px; color: var(--mute); max-width: 44ch; font-size: clamp(1rem, 1.3vw, 1.15rem); }
    /* "Show all steps": ends the pass at once (WCAG 2.2.2). site.js adds it only when the pass will play. */
    .kin-skip {
      position: absolute; right: var(--gutter); top: -54px; z-index: 2;
      display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
      background: none; border: 0; color: var(--mute); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
      text-decoration: underline; text-decoration-color: rgba(163,164,158,.5); text-underline-offset: .3em;
    }
    .kin-skip[hidden] { display: none; }
    .kin-skip:hover { color: var(--white); text-decoration-color: currentColor; }
    .kin-skip:focus-visible { outline: 2px solid var(--signal-text); outline-offset: 2px; }
    .kin[tabindex="-1"]:focus { outline: none; }
    @media (prefers-reduced-motion: no-preference) {
      .js .kinetic:not(.is-done) .kin { grid-template-columns: minmax(0, 1fr); gap: 0; }
      .js .kinetic:not(.is-done) .kin li { grid-area: 1 / 1; opacity: 0; animation: kinSlot 9s linear infinite; animation-play-state: paused; }   /* waits for its own turn */
      .js .kinetic:not(.is-done) .kin-w { font-size: clamp(5.5rem, 21vw, 19rem); }
      .js .kinetic:not(.is-done) .kin-c { grid-column: 2; }
      .js .kinetic:not(.is-done) .kin-t { animation: kinText 9s var(--ease) infinite both; animation-play-state: paused; }
      .js .kinetic:not(.is-done) .kin-b { animation: kinBlock 9s cubic-bezier(.77,0,.18,1) infinite both; animation-play-state: paused; }
      .js .kinetic:not(.is-done) .kin-c { animation: kinCap 9s var(--ease) infinite both; animation-play-state: paused; }
      .js .kinetic:not(.is-done) .kin li:nth-child(2), .js .kinetic:not(.is-done) .kin li:nth-child(2) * { animation-delay: 3s; }
      .js .kinetic:not(.is-done) .kin li:nth-child(3), .js .kinetic:not(.is-done) .kin li:nth-child(3) * { animation-delay: 6s; }
      .js .kinetic.is-on:not(.is-done) .kin li, .js .kinetic.is-on:not(.is-done) .kin li * { animation-play-state: running; }
      @keyframes kinSlot { 0%, 33.3% { opacity: 1; } 33.4%, 100% { opacity: 0; } }
      @keyframes kinBlock {
        0% { transform: scaleX(0); transform-origin: left; }
        6% { transform: scaleX(1); transform-origin: left; }
        6.1% { transform: scaleX(1); transform-origin: right; }
        13%, 100% { transform: scaleX(0); transform-origin: right; }
      }
      @keyframes kinText { 0%, 5.9% { opacity: 0; transform: none; } 6%, 28% { opacity: 1; transform: none; } 32%, 100% { opacity: 0; transform: translateY(-14%); } }
      @keyframes kinCap { 0%, 10% { opacity: 0; transform: translateY(10px); } 15%, 28% { opacity: 1; transform: none; } 32%, 100% { opacity: 0; transform: none; } }
    }
    /* Both layouts are sized to about the same height (Nov 4 fix round), so the reserve fitKin() sets stays small:
       desktop, the playing word is 16vw with its caption beside it and the settled words grow to 9vw;
       601-900, the settled list goes three across (number, word, caption stacked);
       phones, each settled step is one row (number and word left, caption right) and the playing word grows to 31vw. */
    @media (min-width: 900.02px) and (prefers-reduced-motion: no-preference) {
      .js .kinetic:not(.is-done) .kin li { grid-template-columns: auto auto minmax(0, 1fr); }
      .js .kinetic:not(.is-done) .kin-w { font-size: clamp(5.5rem, 16vw, 15rem); }
      .js .kinetic:not(.is-done) .kin-c { grid-column: 3; grid-row: 1; margin: 0 0 .2em; align-self: end; }
    }
    @media (min-width: 600.02px) and (max-width: 900px) {
      .kin { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
      .kin li { grid-template-columns: minmax(0, 1fr); justify-items: start; align-content: start; }
      .kin-n { grid-row: 1; padding: 0 0 8px; } .kin-w { grid-row: 2; } .kin-c { grid-column: 1; grid-row: 3; font-size: 1rem; }
    }
    @media (min-width: 600.02px) and (max-width: 900px) and (prefers-reduced-motion: no-preference) {
      .js .kinetic:not(.is-done) .kin li { grid-template-columns: auto 1fr; justify-items: stretch; }
      .js .kinetic:not(.is-done) .kin-n { grid-row: 1; padding: .6em 0 0; }
      .js .kinetic:not(.is-done) .kin-w { grid-row: 1; }
      .js .kinetic:not(.is-done) .kin-c { grid-column: 2; grid-row: 2; }
    }
    @media (max-width: 600px) {
      .kin { grid-template-columns: minmax(0, 1fr); gap: 22px; }   /* one step per row up to 600px (the base auto-fit made 2 + 1 from 508px) */
      .kin li { grid-template-columns: 8.5rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: start; gap: 0 16px; }
      .kin-n { grid-column: 1; grid-row: 1; padding: 0 0 6px; } .kin-w { grid-column: 1; grid-row: 2; }
      .kin-c { grid-column: 2; grid-row: 1 / -1; align-self: center; margin-top: 0; font-size: .9375rem; line-height: 1.5; }
    }
    @media (max-width: 360px) {   /* narrow phones: a smaller word column leaves the captions 3 to 4 lines */
      .kin li { grid-template-columns: 6.75rem minmax(0, 1fr); gap: 0 12px; }
      .kin-w { font-size: 2.75rem; }
    }
    @media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
      /* the kinetic words earn more of the narrow screen while they play */
      .js .kinetic:not(.is-done) .kin li { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-items: end; justify-items: start; }
      .js .kinetic:not(.is-done) .kin-w { font-size: clamp(5.5rem, 31vw, 11rem); }
      .js .kinetic:not(.is-done) .kin-c { grid-column: 1; grid-row: 3; align-self: end; margin-top: 18px; font-size: 1rem; line-height: 1.6; }
    }

    .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* spam trap, invisible to people */

    /* ===== Phone pass (Oct 9): thumb-sized targets, shorter lists, bigger photos ===== */
    @media (pointer: coarse), (max-width: 720px) {
      .tape-pause { width: 44px; height: 44px; bottom: 4px; }
      .footer-list a { padding: 10px 0; }
      .near-list li { padding: 14px 0; }
      .near-list a { display: block; padding: 4px 0; }
      .crumbs a { display: inline-block; padding: 14px 0; margin: -14px 0; }
    }
    @media (max-width: 600px) {
      /* Before/after pairs: one photo per row with the tag on the photo, not two thumbnails */
      .pair-imgs { grid-template-columns: minmax(0, 1fr); gap: 10px; }
      .pair figure { position: relative; }
      .pair img { aspect-ratio: 4 / 3; }
      .pair figcaption {
        position: absolute; left: 0; bottom: 0; margin: 0; padding: 8px 14px;
        font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase;
        background: var(--char); color: var(--white);
      }
      .pair figure:last-child figcaption { background: var(--signal); }
      /* Towns by county: chips that wrap, instead of 27 full-width rows */
      .area-groups { columns: auto; column-count: 1; }
      .area-group { margin-bottom: 26px; }
      .area-group ul { display: flex; flex-wrap: wrap; gap: 8px; }
      .area-group li { padding: 0; border: 0; }
      .area-group a, .area-groups.big .area-group a {
        display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 14px;
        border: 1px solid var(--char-3); background: var(--char-2); font-size: 1rem; line-height: 1.2;
      }
      .area-group li span { display: none; }
      .area-group a::after { content: attr(data-mi); color: var(--mute); font-size: .8125rem; font-variant-numeric: tabular-nums; }
      .ph-tag, .stock-tag { font-size: .8125rem; }
    }

    /* ===== Phone versions of the desktop-only touches (Oct 16) ===== */
    /* Hello card: the hero info card, moved under the tickers where a phone has room for it */
    .hello { display: none; }
    @media (max-width: 1060px) {
      .hello { display: block; position: relative; z-index: 4; margin-top: clamp(4px, 2vw, 16px); }
      .hello + .statement { padding-top: clamp(48px, 9vw, 88px); }
      .hello-card {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px 24px;
        padding: 18px 20px 16px; background: var(--char-2);
        border: 1px solid var(--line); border-top: 3px solid var(--signal);
      }
      .hello-greet { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.7rem, 6.4vw, 2.4rem); line-height: .95; letter-spacing: .01em; }
      .hello-facts { margin: 0; display: grid; grid-template-columns: auto auto; gap: 4px 22px; }
      .hello-facts dt { color: var(--mute); font-size: .8125rem; font-weight: 600; }
      .hello-facts dd { margin: 2px 0 0; }
      .hello-facts a { display: inline-block; padding: 8px 0; margin: -8px 0; color: var(--white); text-underline-offset: .2em; }
    }
    @media (max-width: 560px) {
      .hello-card { grid-template-columns: minmax(0, 1fr); }
      .hello-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: 12px; border-top: 1px solid var(--line); }
    }
    @media (max-width: 1060px) and (prefers-reduced-motion: no-preference) {
      .hello-card { animation: slidein 1s .2s var(--ease) both; }
    }

    /* Back to top rides in the phone call bar, beside the Call button */
    @media (max-width: 720px) {
      .call-bar { padding-right: calc(14px + 58px); }
      .to-top {
        display: grid; right: 14px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 151;
        width: 50px; height: 50px; transform: translateY(calc(100% + 24px));
      }
      .to-top.is-visible { transform: none; }
    }

    /* No hover on phones: photos settle into their frame as they scroll in, buttons press in */
    @media (hover: none), (pointer: coarse) {
      .settle { overflow: hidden; }
      .btn:active { transform: scale(.97); filter: brightness(1.12); }
      .near-list a:active, .area-group a:active, .footer-list a:active { color: var(--signal-text); }
    }
    @media ((hover: none) or (pointer: coarse)) and (prefers-reduced-motion: no-preference) {
      .settle img { transform: scale(1.09); transition: transform 1.5s var(--ease), filter 1.5s var(--ease); filter: saturate(.6) brightness(.85); }
      .settle.is-seen img { transform: none; filter: none; }
      /* inline service photos are the image itself: a roller-style wipe from the left instead */
      img.settle { clip-path: inset(0 100% 0 0); transform: none; filter: none; transition: clip-path 1.1s cubic-bezier(.77,0,.18,1); }
      img.settle.is-seen { clip-path: inset(0); }
    }
    @media (max-width: 560px) { .hello-facts a { white-space: nowrap; font-size: .97rem; } .hello-facts { gap: 4px 14px; } }

    /* ===== Page-wide paint trail (Oct 17): one fixed InkFlow layer that follows the cursor (or finger) down the whole page ===== */
    .ink-page[data-fx] { position: fixed; inset: 0; z-index: 140; pointer-events: none; mix-blend-mode: screen; }
    .ink-page > .fx-canvas { mix-blend-mode: normal; }
    .ink-page.fx-on > .fx-canvas { opacity: .4; }

    /* ===== Debug sweep fixes (Oct 17) ===== */
    /* Shader canvases follow their host on resize/rotation (the library writes a fixed inline size once) */
    .fx-canvas { width: 100% !important; height: 100% !important; }

    /* Header 1061-1279: the full row (logo, 5 links, phone, Send) does not fit, so drop the header Send button there
       (Send stays in the hero, the CTA bands and the menu) and keep every label on one line */
    .wordmark, .header-actions, .header-phone { flex-shrink: 0; }
    .nav a, .header-phone { white-space: nowrap; }
    @media (min-width: 1060.02px) and (max-width: 1279px) { .header-actions .btn { display: none; } .nav { gap: 22px; } .header-inner { gap: 24px; } }
    @media (min-width: 720.02px) and (max-width: 820px) { .header-actions .btn { display: none; } }
    /* Hero info card is narrower where the headline is widest relative to the screen */
    @media (min-width: 1060.02px) and (max-width: 1180px) { .hx-card { width: 290px; } }

    /* Hidden fixed controls leave the tab order (visibility), not just the eye (opacity/translate) */
    .to-top { visibility: hidden; transition: opacity .35s, transform .45s var(--ease), border-color .25s, visibility 0s .45s; }
    .to-top.is-visible { visibility: visible; transition-delay: 0s; }
    @media (max-width: 720px) {
      .call-bar { visibility: hidden; transition: transform .6s var(--ease), visibility 0s .6s; }
      .call-bar.is-visible { visibility: visible; transition-delay: 0s; }
      /* keyboard focus never lands behind the call bar */
      html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
    }

    /* Netlify's free plan injects a "Powered by Netlify" iframe; hiding it needs a paid plan in their UI, so hide it here. */
    #nl-badge-frame { display: none !important; }
    @media (max-width: 720px) {
      .has-nl-badge .call-bar { padding-bottom: calc(10px + 66px + env(safe-area-inset-bottom)); }
      .has-nl-badge .to-top { bottom: calc(10px + 66px + env(safe-area-inset-bottom)); }
      body.has-nl-badge { padding-bottom: 138px; }
      html:has(body.has-nl-badge) { scroll-padding-bottom: calc(154px + env(safe-area-inset-bottom)); }
    }
    @media (min-width: 720.02px) { .has-nl-badge .to-top { bottom: 96px; } }

    /* Readable sizes on phones (DESIGN: tag text never below 13px) and thumb-sized text links */
    .hx-hint { font-size: .8125rem; }
    .ph-tag, .stock-tag { font-size: .8125rem; } .stock-tag { max-width: calc(100% - 20px); } .ph-tag { max-width: min(46ch, calc(100% - 20px)); }
    @media (max-width: 1060px) { .hello-facts dt { font-size: .8125rem; } }
    /* the map never shrinks below its readable size: narrower screens scroll it sideways */
    .map-scroll .area-map { min-width: 1010px; }
    @media (max-width: 1100px) and (pointer: coarse) { .map-swipe { display: inline; } }
    @media (max-width: 600px) {
      .inline-links a, .plain-links a { display: inline-block; padding: 10px 0; }
      .inline-links { line-height: 1.5; }
    }
    @media (pointer: coarse), (max-width: 720px) {
      .near-list li { padding: 10px 0; }
      .near-list a { padding: 8px 0; }
    }
    /* Safari: no overflow-clip-margin, so the focus ring is drawn inside the field where the clip cannot cut it */
    .field.float input:focus, .field.float textarea:focus { box-shadow: inset 0 0 0 1px var(--signal-text); }
    /* Phone numbers never break across lines */
    a[href^="tel:"] { white-space: nowrap; }
    /* Hello card facts stack on the narrowest phones (320px) */
    @media (max-width: 359px) { .hello-facts { grid-template-columns: minmax(0, 1fr); } }

    /* ===== Contrast over photos (a11y sweep, Oct 17) ===== */
    /* Nav links over the photo openers before the header gets its background */
    .site-header:not(.is-scrolled) .nav a { color: rgba(245,245,242,.92); }
    .site-header:not(.is-scrolled) .nav a:hover, .site-header:not(.is-scrolled) .nav a[aria-current] { color: var(--white); }
    @media (min-width: 720.02px) {
      /* inner-page openers: full-white lede and a slightly deeper scrim through the text band */
      .ph .page-lede { color: var(--white); }
      .ph-shade {
        background:
          linear-gradient(180deg, rgba(20,21,19,.85) 0, rgba(20,21,19,0) calc(var(--header) + 110px)),
          linear-gradient(0deg, rgba(27,28,26,.98) 0, rgba(27,28,26,.92) 22%, rgba(27,28,26,.66) 50%, rgba(27,28,26,.12) 74%);
      }
    }
    @media (min-width: 860.02px) {
      /* home hero: deeper scrim behind the rotating word, and the header band */
      .hx-shade {
        background:
          linear-gradient(180deg, rgba(20,21,19,.82) 0, rgba(20,21,19,0) calc(var(--header) + 90px)),
          linear-gradient(0deg, rgba(27,28,26,.97) 0, rgba(27,28,26,.92) 26%, rgba(27,28,26,.58) 50%, rgba(27,28,26,0) 68%);
      }
    }
    /* nothing may widen the page on phones, even for a frame (the roller intro passes the right edge) */
    html { overflow-x: clip; }

    /* ===== Round-2 sweep (Oct 18) ===== */
    /* Menu: its own scroll never chains into the page; room for the Netlify badge under Send */
    .menu { overscroll-behavior: contain; }
    .has-nl-badge .menu { padding-bottom: calc(28px + 66px + env(safe-area-inset-bottom)); }
    /* Before/after: dragged with pointer events on the photo; the range input keeps keys and screen readers */
    .ba { cursor: ew-resize; touch-action: pan-y pinch-zoom; }
    .ba input[type="range"] { pointer-events: none; }
    /* Hero roller: a finger on it is a drag, not a page scroll */
    .hx-roller { touch-action: none; }
    /* Photo strip arrows stay above the back-to-top button (landscape phones with the badge) */
    @media (min-width: 720.02px) { .strip-nav { position: relative; z-index: 151; } }   /* above 720px only: on phones it would sit over the call bar */
    /* "You are here" in the phone menu: the current section in the light red */
    .menu nav a[aria-current] { color: var(--signal-text); }
    /* Desktop: keyboard focus stops clear of the back-to-top button */
    @media (min-width: 720.02px) { html { scroll-padding-bottom: 96px; } html:has(body.has-nl-badge) { scroll-padding-bottom: 164px; } }
    /* Reduced motion switched on mid-visit: the WebGPU paint layer goes away (InkGL hides itself) */
    html.rm-live .ink-page { display: none; }
    /* Touch screens of any width: comfortable tap targets for the call link and text links */
    @media (pointer: coarse) { .header-phone { padding: 8px 0; } .footer-h a { display: inline-block; padding: 10px 0; } }
    @media (pointer: coarse) and (min-width: 600.02px) {   /* 600px and under already has chips and padded rows */
      .area-group li { align-items: baseline; }   /* the miles sit on the padded town name's baseline */
      .area-group a { display: inline-block; padding: 9px 0; }
      .plain-links a, .inline-links a { display: inline-block; padding: 10px 0; }
    }
    .ba img { -webkit-user-drag: none; }
    /* Desktop: the footer's last line ends above the back-to-top button (and Netlify's badge when it is there) */
    @media (min-width: 720.02px) { .site-footer { padding-bottom: 96px; } .has-nl-badge .site-footer { padding-bottom: 170px; } }
    /* Contrast (a11y round 2): a soft dark halo keeps two-line town titles readable over bright siding,
       and inner-page ledes are full white at every width */
    .ph .page-title { text-shadow: 0 0 22px rgba(20,21,19,.6), 0 2px 36px rgba(0,0,0,.35); }
    .ph .page-lede { color: var(--white); }

    /* ===== Drywall service (Nov 4) ===== */
    /* a service with no job photo yet: a plain tile in the home sticky column (same crossfade as the photos) */
    .svc-media .svc-pic-blank {
      position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
      opacity: 0; transform: scale(1.04);
      transition: opacity .7s var(--ease), transform 1.2s var(--ease);
    }
    .svc-media .svc-pic-blank.is-active { opacity: 1; transform: none; }

    /* ===================== UI pass (Nov 4): agents 1, 2 and 5 merged (see DESIGN.md "UI pass (Nov 4)") ===================== */

    /* Header: the red fill is Call, as everywhere else. 1280+: "Send a message" text link + red Call button.
       721-1279: the phone as text + the Send link (Send drops out where it does not fit). Phones: menu + call bar. */
    .header-send { display: inline-flex; align-items: center; min-height: 44px; font-size: .95rem; font-weight: 600; white-space: nowrap; flex-shrink: 0;
      text-decoration: underline; text-decoration-color: rgba(245,245,242,.4); text-decoration-thickness: 1px; text-underline-offset: .32em; }
    .header-send:hover { color: var(--signal-text); text-decoration-color: currentColor; }
    .header-phone { display: inline-flex; align-items: center; gap: 8px; }
    .header-phone > svg { display: none; width: 18px; height: 18px; flex: none; }
    .header-actions .btn-call { display: none; }
    @media (min-width: 1280px) {
      .header-actions .header-phone { display: none; }
      .header-actions .btn-call { display: inline-flex; }
      .header-actions { gap: 26px; }
    }
    @media (min-width: 720.02px) and (max-width: 820px) { .header-send { display: none; } }
    /* Landscape phones (short and touch): the header phone becomes the red Call button, the one call on the first screen */
    @media (pointer: coarse) and (max-height: 500px) and (min-width: 720.02px) {
      .header-actions .header-send, .header-actions .btn-call { display: none; }
      .header-actions .header-phone { display: inline-flex; min-height: 44px; padding: 0 18px; background: var(--signal); color: var(--white); }
      .header-phone > svg { display: block; }
      .hx .hero-title { font-size: min(11.4vw, 15svh); }
    }
    @media (pointer: coarse) and (max-height: 500px) and (min-width: 560px) {
      .svc-img-inline { max-height: 56svh; }
      /* the menu fits one short screen: links left, Call and Send right */
      .menu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 32px; }
      .menu-top { grid-column: 1 / -1; align-self: start; margin-bottom: 8px; }
      .menu nav { margin-top: 0; align-self: end; }
      .menu nav a { font-size: min(11vh, 2.6rem); }
      .menu-foot { align-self: end; margin-top: 0; }
    }
    /* Menu rows are full-height tap targets */
    .menu nav a { display: flex; align-items: center; min-height: 48px; }


    /* Hero tapes from 900px: the navy town tape sits below the red one instead of under it */
    @media (min-width: 900.02px) {
      .tapes:not(.tapes-one) { height: clamp(118px, 14vw, 240px); }
      .tapes:not(.tapes-one) .tape-red { top: 4%; }
      .tapes:not(.tapes-one) .tape-navy { top: auto; bottom: 6%; }
    }

    /* Stats: every label on one line, whatever the size of the value above it */
    .stats > div { display: grid; grid-template-rows: 1fr auto; justify-content: start; gap: 10px; }
    .stats dd { grid-row: 1; align-self: end; }
    .stats dt { grid-row: 2; }

    /* One gap, not two, between two plain sections in a row (each one's padding added up to 280-336px of nothing) */
    .section:not(.tint) + .section:not(.tint), .section-tight + .section:not(.tint) { padding-top: 0; }

    /* Utility headings: smaller, no brush stroke (the stroke is saved for the headings that open a story) */
    h2.display.quiet { font-size: clamp(2.4rem, 4.4vw, 4rem); }
    h2.display.quiet .paint { display: none; }

    /* ----- One stand-in for a service with no job photo yet: the navy type tile ----- */
    .type-tile {
      container-type: inline-size; position: relative; overflow: hidden;
      display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.1rem;
      aspect-ratio: 16 / 10; padding: 7%; background: var(--navy); color: var(--white);
    }
    .type-tile .tt-name { display: block; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .86; letter-spacing: -.01em; font-size: clamp(1.4rem, 15cqi, 7rem); text-wrap: balance; }
    .tt-inc { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; font-size: clamp(.875rem, 3.2cqi, 1.15rem); line-height: 1.3; }
    .tt-inc li { display: flex; align-items: baseline; gap: .7em; }
    .tt-inc li::before { content: ""; width: .5em; height: .5em; flex: none; background: var(--signal); }
    .type-tile.tt-sm { width: 100%; height: 100%; aspect-ratio: auto; padding: 8%; align-items: center; justify-content: center; text-align: center; }
    .tt-sm .tt-name { font-size: 21cqi; }
    .svc-thumb > .type-tile { height: 100%; }
    .ph-blank { container-type: inline-size; background: var(--navy); display: flex; align-items: flex-start; justify-content: flex-end; padding: calc(var(--header) + 24px) var(--gutter) 0; }
    .ph-blank .tt-name { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .8; font-size: 22cqi; color: rgba(245,245,242,.1); }

    /* ----- Home services ----- */
    .svc-list { border-bottom: 1px solid var(--line); }
    .svc:last-child { border-bottom: 0; }
    .svc-credit { display: none; }
    @media (min-width: 900.02px) {
      .svc { min-height: min(26vh, 260px); }   /* seven rows */
      .svc .type-tile.svc-img-inline { display: none; }
    }
    @media (max-width: 900px) { .svc .type-tile.svc-img-inline { display: flex; aspect-ratio: 3 / 2; height: auto; } }
    /* tablets: two to a row, the lead service full width */
    @media (min-width: 600.02px) and (max-width: 900px) {
      .svc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
      .svc:first-child { grid-column: 1 / -1; }
      .svc { justify-content: flex-start; }
      .svc h3 { font-size: clamp(1.9rem, 4.4vw, 2.6rem); }
      .svc:first-child h3 { font-size: clamp(2.4rem, 6vw, 3.4rem); }
      .svc-img-inline { aspect-ratio: 4 / 3; }
      .svc:first-child .svc-img-inline { aspect-ratio: 16 / 9; }
    }
    /* phones: compact rows, a square thumb beside the name */
    @media (max-width: 600px) {
      .svc { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; align-content: start; padding: 18px 0; }
      .svc > .svc-img-inline, .svc > .stock-wrap { grid-column: 1; grid-row: 1 / span 3; width: 104px; height: 104px; margin: 0; aspect-ratio: 1; }
      .svc > .stock-wrap > .svc-img-inline { width: 100%; height: 100%; margin: 0; aspect-ratio: 1; }
      .svc > .stock-wrap > .stock-tag { display: none; }   /* the credit is under the text instead */
      .svc .type-tile.svc-img-inline { aspect-ratio: 1; padding: 6%; }
      .svc h3, .svc p { grid-column: 2; }
      .svc h3 { font-size: 1.75rem; }
      .svc p { margin-top: 6px; font-size: .95rem; }
      .svc .svc-credit { display: block; font-size: .8125rem; line-height: 1.4; }
    }

    /* ----- Services hub: interior leads full width, the other six two to a row ----- */
    @media (min-width: 600.02px) {
      .hub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(56px, 6vw, 88px) clamp(24px, 3vw, 48px); }
      .hub-item { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
      .hub-item:nth-child(even) .hub-media { order: 0; }
      .hub-item:first-child { grid-column: 1 / -1; }
      .hub-item:not(:first-child) .hub-title { font-size: clamp(2rem, 3.4vw, 3.2rem); }
    }
    @media (min-width: 860.02px) {
      .hub-item:first-child { grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
    }

    /* ----- Town pages: service rows ----- */
    .svc-thumb-call { display: grid; place-items: center; background: var(--signal); color: var(--white); }
    .svc-thumb-call svg { width: 38px; height: 38px; }
    .svc-link-call:hover .svc-thumb-call { background: #8E0722; }
    @media (max-width: 600px) {
      .svc-link { grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "t n" "d d"; gap: 10px 16px; }
      .svc-thumb { grid-area: t; }
      .svc-text { display: contents; }
      .svc-name { grid-area: n; align-self: center; font-size: 1.6rem; }
      .svc-desc { grid-area: d; margin-top: 0; }
    }

    /* ----- Before / after pairs: tags on the photo at every width; from 900px one pair per row, photos large ----- */
    .pair figure { position: relative; }
    .pair figcaption {
      position: absolute; left: 0; bottom: 0; margin: 0; padding: 8px 14px;
      font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase;
      background: var(--char); color: var(--white);
    }
    .pair figure:last-child figcaption { background: var(--signal); color: var(--white); }
    @media (min-width: 900.02px) {
      .pairs { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); }
      .pair { display: grid; grid-template-columns: minmax(160px, 3fr) 9fr; gap: 0 clamp(24px, 3vw, 48px); padding-top: 20px; border-top: 1px solid var(--line); }
      .pair h3 { margin: 0; }
      .pair > .pair-imgs:only-child { grid-column: 1 / -1; }
      .pair-imgs { gap: 10px; }
    }

    /* ----- Chip links: service pages' towns and other services (the home town-chip look) ----- */
    .chip-links { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
    .sub-h + .chip-links { margin-top: 14px; }
    .chip-links a {
      display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 14px;
      border: 1px solid var(--line); background: var(--char); color: var(--white);
      font-size: 1rem; line-height: 1.2; text-decoration: none; transition: border-color .2s, color .2s;
    }
    .chip-links a span { color: var(--mute); font-size: .8125rem; font-variant-numeric: tabular-nums; }
    .chip-links a:hover { border-color: var(--white); }
    @media (hover: none), (pointer: coarse) { .chip-links a:active { color: var(--signal-text); } }

    /* ----- FAQ: question list beside a sticky heading from 1060px ----- */
    @media (min-width: 1060.02px) {
      .faq-sec .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 88px); align-items: start; }
      .faq-sec h2 { position: sticky; top: calc(var(--header) + 32px); }
      .faq-sec .faq { margin-top: 0; max-width: none; }
    }

    /* ----- Contact: the Getting started steps sit under the big phone number ----- */
    .contact-intro .steps-card { margin-top: clamp(28px, 3vw, 40px); max-width: 520px; }
    .contact-intro .steps-card ol { margin-bottom: 0; }
    .contact-intro .steps-card h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }

    /* ----- Form service chips: an even grid, full width on phones ----- */
    .chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
    .chip { width: 100%; }

    /* ----- About: on phones the heading and copy lead, the job photo follows ----- */
    @media (max-width: 900px) { .about-media { order: 2; } }

    /* ----- Footer: Services and Service areas are accordions under 768px (site.js closes them there) ----- */
    .footer-acc > summary { list-style: none; }
    .footer-acc > summary::-webkit-details-marker { display: none; }
    .footer-h h2 { margin: 0; font: inherit; color: inherit; }
    .footer-more { margin-top: 14px; font-size: .95rem; }
    .footer-more a { color: var(--mute); text-underline-offset: .25em; }
    .footer-more a:hover { color: var(--white); }
    @media (min-width: 768px) { .footer-acc > summary { pointer-events: none; cursor: default; } }
    @media (max-width: 767.98px) {
      .footer-cols { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
      .footer-cols > :first-child { margin-bottom: 36px; }
      .footer-areas { grid-column: auto; }
      .footer-acc { border-top: 1px solid var(--line); }
      .footer-acc:last-child { border-bottom: 1px solid var(--line); }
      .footer-acc > summary.footer-h {
        display: flex; align-items: center; justify-content: space-between; gap: 16px;
        min-height: 56px; margin: 0; cursor: pointer; color: var(--white); font-size: 1.05rem;
      }
      .footer-acc > summary::after {
        content: ""; width: 14px; height: 14px; flex: none;
        background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
      }
      .footer-acc[open] > summary::after { background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; }
      .footer-acc > .footer-list { padding-bottom: 8px; }
      .footer-acc > .footer-more { margin: 4px 0 20px; }
    }

    /* ===================== Phase D front end (Nov 4) ===================== */

    /* Home H1 names the trade and the place under the tagline (one heading: "Bringing colors to life. Painting and
       coatings in Akron, Ohio"). Plain sans like the line below it, no rise. The hero stroke stays under "to life.":
       it is placed from the top of the h1 (two .9em lines), not from its bottom. */
    .h1-place {
      display: block; margin-top: clamp(10px, 1.2vw, 18px);
      font-family: var(--sans); font-weight: 500; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.3;
      letter-spacing: 0; text-transform: none; color: var(--white); text-wrap: balance;
    }
    .hero-title .paint { top: 1.28em; bottom: auto; }

    /* One Before/After tag look on the hero, the pairs and the comparators: 13px sans 600, no tracking,
       charcoal Before, red After */
    .hx-tag, .ba-tag, .pair figcaption {
      padding: 6px 12px; background: rgba(27,28,26,.86); color: var(--white);
      font-family: var(--sans); font-size: .8125rem; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none;
    }
    .hx-tag-a, .ba-tag.r, .pair figure:last-child figcaption { background: var(--signal); color: var(--white); }

    /* The tickers' pause button never covers the navy town tape: from 900px it sits in the gap between the tapes;
       below that the tapes get a 48px strip of their own under the navy tape for it */
    @media (min-width: 900.02px) {
      .tapes:not(.tapes-one) .tape-pause { top: 50%; bottom: auto; transform: translateY(-50%); }
    }
    @media (max-width: 900px) {
      .tapes:not(.tapes-one) { --th: clamp(118px, 11vw, 164px); height: calc(var(--th) + 48px); }
      .tapes:not(.tapes-one) .tape-red { top: calc(var(--th) * .14); }
      .tapes:not(.tapes-one) .tape-navy { top: calc(var(--th) * .46); }
      .tapes:not(.tapes-one) .tape-pause { bottom: 2px; }
    }

    /* Thumb-sized footer links: the phone number and "Map of every town we serve" */
    .footer-phone { display: inline-flex; align-items: center; min-height: 44px; }
    .footer-more a { display: inline-block; padding: 12px 0; margin: -12px 0; }

    /* Services hub: the cards in a row start at the same line (the grid used to stretch and centre them) */
    @media (min-width: 600.02px) { .hub-item { align-content: start; } }

    /* Home "Where we work": each county is a <details>. Under 600px an accordion (Summit open, site.js folds the
       rest); from 600px plain columns that cannot fold (site.js keeps the summary out of the tab order there). */
    .area-county > summary { list-style: none; }
    .area-county > summary::-webkit-details-marker { display: none; }
    .area-county > summary h3 { margin: 0 0 8px; }
    @media (min-width: 600.02px) { .area-county > summary { pointer-events: none; cursor: default; } }
    @media (max-width: 600px) {
      .area-groups .area-county { margin: 0; border-top: 1px solid var(--line); }
      .area-groups .area-county:last-child { border-bottom: 1px solid var(--line); }
      .area-county > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; cursor: pointer; }
      .area-county > summary h3 { margin: 0; color: var(--white); font-size: 1.05rem; }
      .area-county > summary::after {
        content: ""; width: 14px; height: 14px; flex: none; color: var(--white);
        background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
      }
      .area-county[open] > summary::after { background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; }
      .area-county > ul { padding: 4px 0 22px; }
    }

    /* Service pages: the Getting started card under a short includes list */
    .ticks + .steps-under { margin-top: clamp(28px, 3vw, 40px); }
    /* A gallery of three photos sits three across from 900px, instead of two and one alone */
    @media (min-width: 900.02px) { .gallery:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

    /* ===== Second fix round (Nov 4) ===== */
    /* Home service rows up to 900px: the whole row (thumb, name, line) opens the service page, like the town-page rows */
    @media (max-width: 900px) {
      .svc { position: relative; }
      .svc h3 a::before { content: ""; position: absolute; inset: 0; z-index: 1; }   /* ::after is the arrow */
    }
    /* town pages: the "Photos from our other jobs" note sits close under the heading */
    .proof-note + .pairs, .proof-note + .ba-fig { margin-top: clamp(28px, 4vw, 48px); }
    /* Landscape phones (short touch screens): the About photo fits the screen under the header, and the floating
       back-to-top square is left out (it sat over content there; the header keeps Call one tap away) */
    @media (pointer: coarse) and (max-height: 500px) {
      .about-media img { width: auto; max-width: 100%; height: max(200px, min(calc(100svh - var(--header) - 72px), 700px)); }   /* the whole 4:3 photo, scaled down, never a thin crop */
    }
    @media (pointer: coarse) and (max-height: 500px) and (min-width: 720.02px) {
      .to-top { display: none; }
    }

    /* ===== Fourth fix round (Nov 5, second 10-agent check) ===== */
    /* phone call bar: the label never runs into the phone icon block (it overlapped by 8px at 320) */
    @media (max-width: 720px) {
      .call-bar .btn-call { padding: 0 calc(56px + 10px) 0 16px; justify-content: flex-start; }
    }
    @media (min-width: 360px) and (max-width: 720px) { .call-bar .btn-call { justify-content: center; } }
    /* town checker answers: thumb-sized links on touch screens, like every other touch link */
    @media (pointer: coarse) {
      .tc-out .tc-links { gap: 0 20px; }
      .tc-out .tc-links a { display: inline-flex; align-items: center; min-height: 44px; }
    }
    /* landscape phones under 721px also show the 72px call bar: the About photo and caption fit above it */
    @media (pointer: coarse) and (max-height: 500px) and (max-width: 720px) {
      .about-media img { height: max(110px, min(calc(100svh - var(--header) - 148px), 700px)); }   /* header, 72px bar, about 60px caption and a gap */
    }
    /* service-page galleries beside the copy (.split) from 900px: three photos are one wide plus two, two photos stack,
       so the right column is not three thumbnails beside a long empty space */
    @media (min-width: 900.02px) {
      .split .gallery:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .split .gallery:has(> :nth-child(3):last-child) > figure:first-child { grid-column: 1 / -1; }
      .split .gallery:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); }
    }
    /* service-area map: a keyboard-focused town shows its dot in the light red too */
    .area-map a:focus-visible .dot { fill: var(--signal-text); }

    /* Short landscape phones, and any short window at the call-bar width: the 140px roller gap
       (and, under 600px, the portrait headline size) put the home h1 under the bar.
       Measured before this rule: 568x320 both lines (font 74px, bar at 249, title 212-378),
       667x375 and 720x360 the second line. Cap the type and pull it up so both lines and the
       place line end above the bar. fitRoller() already hides the roller when the gap is under 90px. */
    @media (max-height: 500px) and (max-width: 720px) {
      .hx-content { padding-top: calc(var(--header) + 64px); padding-bottom: 12px; }
      .hx .hero-title { font-size: min(9vw, 13vh); }
      .hx .h1-place { margin-top: 4px; }
      .hx-row { margin-top: 8px; }
      /* no room for the 110px roller without covering the headline; fitRoller() hides it too */
      .hx-roller, .hx-edge, .hx-hint { display: none; }
    }
    @supports (height: 1svh) {
      @media (max-height: 500px) and (max-width: 720px) {
        .hx .hero-title { font-size: min(9vw, 13svh); }
      }
    }

    /* Print: the theme is light text on charcoal. Browsers do not print backgrounds by default,
       so the type comes out white on white and the fixed header, call bar and tapes cover the page. */
    @media print {
      :root, html { color-scheme: light !important; }
      body { background: #fff !important; color: #1B1C1A !important; padding-bottom: 0 !important; }
      body * { color: #1B1C1A !important; text-shadow: none !important; }
      *, *::before, *::after { animation: none !important; transition: none !important; }
      /* the headline lines clip a rise that never finishes when animations do not run */
      .hero-title .line { overflow: visible !important; }
      .hero-title .line > span { transform: none !important; }
      .site-header { position: static; background: #fff !important; box-shadow: none; }
      .progress, .call-bar, .to-top, .menu, .menu-btn, .ink-page, .tapes, .hx-roller, .hx-shade, .hx-edge, .hx-hint, .hx-tag, .ph-shade, .paint, .fx-canvas, .footer-flag { display: none !important; }
      .hx, .ph { min-height: 0 !important; height: auto !important; overflow: visible !important; background: #fff !important; display: block; }
      .hx-stage, .ph-media { position: relative; inset: auto; height: auto; }
      .hx-before { display: none !important; }
      .hx-stage > img, .ph-media img { position: static !important; width: 100% !important; height: auto !important; max-height: 280px; object-fit: cover; }
      .hx-content, .ph-content { padding: 16px 0 24px !important; }
      .btn, .btn-signal, .btn-call, .btn-line, .tape, .type-tile, .ph-blank, .hello-card, .steps-card, .form, .chip { background: #fff !important; border-color: #1B1C1A !important; }
      .field input, .field select, .field textarea {
        background: #fff !important; color: #1B1C1A !important; border-color: #1B1C1A !important; box-shadow: none !important;
        background-image: none !important;
      }
      a { text-decoration: underline; }
    }