:root{
    --bg:#0a0a0b;
    --bg-2:#0f0f11;
    --surface:#141416;
    --surface-2:#1a1a1d;
    --border:#26262a;
    --border-2:#333338;
    --text:#ededed;
    --muted:#9a9aa1;
    --muted-2:#82828a;
    --accent:#ff5a1f;
    --accent-dark:#e64a19;
    --accent-soft:rgba(255,90,31,.12);
    --white:#ffffff;
    --maxw:1200px;
    --ease:cubic-bezier(.16,1,.3,1);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  html{overflow-x:clip}          /* decorative absolutes must never make the page scroll sideways */
  body{
    overflow-wrap:break-word;    /* a long address or email can't push the layout wider than the phone */
    background:var(--bg);
    color:var(--text);
    font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:15px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--accent);color:#0a0a0b}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  h1,h2,h3,h4,.display{font-family:"Archivo",sans-serif;font-weight:900;line-height:.94;letter-spacing:-.02em;text-transform:uppercase}

  /* ---------- Eyebrow ---------- */
  .eyebrow{
    display:inline-flex;align-items:center;gap:14px;
    font-size:12px;font-weight:700;letter-spacing:.32em;
    color:var(--accent);text-transform:uppercase;margin-bottom:26px;
  }
  .eyebrow::before{content:"";width:40px;height:2px;background:var(--accent);display:inline-block}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:12px;
    font-family:"JetBrains Mono",monospace;font-weight:700;font-size:13px;
    letter-spacing:.14em;text-transform:uppercase;
    padding:17px 28px;border:1px solid transparent;cursor:pointer;
    transition:all .3s var(--ease);white-space:nowrap;
  }
  .btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
  .btn:hover svg{transform:translateX(4px)}
  .btn-primary{background:var(--accent);color:#0a0a0b}
  .btn-primary:hover{background:var(--accent-dark);color:#fff}
  .btn-ghost{background:transparent;color:var(--text);border-color:var(--border-2)}
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

  /* ---------- Header ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    border-bottom:1px solid transparent;
    transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s;
  }
  header.scrolled{background:rgba(10,10,11,.86);backdrop-filter:blur(14px);border-bottom-color:var(--border)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:78px}
  .brand{display:flex;align-items:center;gap:12px}
  .brand .mark{
    width:44px;height:44px;background:transparent;color:var(--accent);
    display:grid;place-items:center;
  }
  /* The tipping-trailer mark. One inline path set - no extra request, no
     third-party asset - and it paints with currentColor, so the same markup
     works on the orange tile, on white, and in a single-colour vinyl cut.
     The wordmark beside it carries the name; this svg is decorative, which is
     why it is aria-hidden and the <a class="brand"> keeps the aria-label. */
  .brand .mark svg{width:100%;height:100%;display:block;fill:currentColor}
  .brand .word{font-family:"Archivo";font-weight:900;font-size:19px;line-height:.9;letter-spacing:-.01em;text-transform:uppercase}
  .brand .word small{display:block;font-size:9.5px;letter-spacing:.34em;color:var(--muted);font-weight:700;margin-top:3px}
  .nav-links{display:flex;align-items:center;gap:34px}
  .nav-links a.link{
    font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
    transition:color .2s;position:relative;padding:4px 0;
  }
  .nav-links a.link:hover,.nav-links a.link.active{color:var(--text)}
  .nav-links a.link.active::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--accent)}
  .nav-cta{background:var(--accent);color:#0a0a0b;padding:14px 22px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:background .25s}
  .nav-cta:hover{background:var(--accent-dark);color:#fff}
  /* --- SERVICES DROPDOWN (2026-08-18) ------------------------------------
     The Services LINK keeps its own behaviour; the chevron beside it is a
     separate disclosure button. Everything is driven by an .open class rather
     than the `hidden` attribute or :hover alone: :hover cannot be reached on a
     touch screen, and `hidden` would fight the CSS. With JavaScript off the
     menu simply never opens — the same four links are in the footer, in the
     mobile menu and on /services/, so nothing is unreachable. */
  .vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .nav-item{position:relative;display:inline-flex;align-items:center;gap:7px}
  .nav-sub-btn{background:none;border:0;padding:0;margin:0;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;transition:color .2s}
  .nav-sub-btn svg{width:13px;height:13px;display:block;transition:transform .25s var(--ease)}
  .nav-item:hover .nav-sub-btn,.nav-item.open .nav-sub-btn{color:var(--text)}
  .nav-item.open .nav-sub-btn svg{transform:rotate(180deg)}
  .nav-sub{position:absolute;top:100%;left:-16px;margin-top:16px;min-width:286px;background:var(--bg-2);border:1px solid var(--border);padding:8px;display:none;z-index:60;box-shadow:0 20px 44px rgba(0,0,0,.5)}
  /* The 16px gap between the button and the panel would close the menu as the
     pointer crossed it. This bridges it without moving anything visually. */
  .nav-sub::before{content:"";position:absolute;top:-17px;left:0;right:0;height:17px}
  .nav-item.open .nav-sub{display:block}
  .nav-sub a.sublink{display:block;padding:11px 14px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:background .2s,color .2s;white-space:nowrap}
  .nav-sub a.sublink:hover,.nav-sub a.sublink:focus-visible{background:var(--accent-soft);color:var(--text)}
  .nav-sub a.sublink.current{color:var(--accent)}
  /* The phone header's CTA + burger pair. display:none on the WRAPPER, not
     just its children: .nav is justify-content:space-between, so an
     empty-but-present flex item would count as a third child and shove the
     desktop nav links into the middle of the header. */
  .nav-actions{display:none}
  .nav-cta-m{display:none;align-items:center;min-height:46px;padding:0 16px;font-size:11px;letter-spacing:.1em;white-space:nowrap}
  .burger{display:none;background:none;border:1px solid var(--border-2);width:46px;height:46px;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
  .burger span{width:20px;height:2px;background:var(--text);transition:.3s}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ---------- Section base ---------- */
  section{position:relative}
  .pad{padding:120px 0}
  .section-head{max-width:760px;margin-bottom:70px}
  .section-head h2{font-size:clamp(38px,6vw,74px)}
  .section-head p{color:var(--muted);margin-top:26px;font-size:15.5px;max-width:620px}

  /* ---------- Industrial texture / media panels ---------- */
  .grid-tex{background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
    background-size:52px 52px}
  .media{position:relative;overflow:hidden;border:1px solid var(--border);
    background:
      repeating-linear-gradient(-45deg,rgba(255,90,31,.05) 0 2px,transparent 2px 22px),
      radial-gradient(120% 90% at 70% 15%,rgba(255,90,31,.14),transparent 55%),
      linear-gradient(150deg,#17171a,#0d0d0f)}
  .media::before{content:"";position:absolute;inset:0;
    background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:40px 40px;mask:radial-gradient(120% 120% at 50% 40%,#000,transparent 80%)}
  .media .glyph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.09)}
  .media .glyph svg{width:46%;height:46%;stroke-width:.9}
  .media .mtag{position:absolute;left:18px;bottom:16px;z-index:2;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700}
  .media::after{content:"";position:absolute;bottom:14px;right:14px;width:44px;height:44px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);z-index:2}

  /* ---------- Photo slots ----------
     Every slot below is EMPTY until a photo is filled in at the PHOTOS block
     down in the script. With no photo, the page looks exactly as it does now —
     the artwork stays. Drop a photo in and it takes over automatically. */
  .media .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;filter:saturate(.94) contrast(1.05)}
  .media.has-photo .glyph{display:none}
  .media.has-photo::before{opacity:.28}
  .media.has-photo::after{z-index:3}
  .media.has-photo .mtag{text-shadow:0 1px 8px rgba(0,0,0,.95);z-index:4}
  .media.has-photo .photo-scrim{position:absolute;left:0;right:0;bottom:0;height:38%;z-index:2;pointer-events:none;
    background:linear-gradient(transparent,rgba(8,8,9,.78))}

  .hero-photo{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .9s var(--ease)}
  .hero.has-photo h1,.hero.has-photo p.lead{text-shadow:0 2px 26px rgba(6,6,7,.9)}
  /* Over a photo the outlined button and the status bar can land on bright
     ground, so they get their own backing instead of relying on the page. */
  .hero.has-photo .btn-ghost{background:rgba(10,10,11,.55);border-color:rgba(255,255,255,.42);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .hero.has-photo .btn-ghost:hover{background:rgba(10,10,11,.72)}
  .hero.has-photo .hero-statusbar{text-shadow:0 1px 14px rgba(6,6,7,.95)}
  .hero.has-photo .vet-badge{background:rgba(10,10,11,.62);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
  .hero-photo::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,var(--bg) 0%,rgba(10,10,11,.88) 24%,rgba(10,10,11,.60) 44%,rgba(10,10,11,.16) 72%,rgba(10,10,11,.04) 100%),
               linear-gradient(180deg,rgba(10,10,11,.58) 0%,rgba(10,10,11,0) 20%,rgba(10,10,11,0) 68%,rgba(10,10,11,.52) 100%)}
  .hero.has-photo .hero-photo{opacity:1}
  .hero.has-photo .hero-trailer{display:none}

  .svc-card .shot{display:none;margin:-44px -38px 34px;height:196px;overflow:hidden;border-bottom:1px solid var(--border)}
  .svc-card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
  .svc-card:hover .shot img{transform:scale(1.06)}
  .svc-card.has-photo .shot{display:block}
  .svc-card.has-photo .ico{display:none}
  .svc-card.has-photo h3{margin-top:16px}

  /* ---------- Gallery ---------- */
  .gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .gal-item{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--border);background:var(--surface);cursor:zoom-in}
  /* The clickable thing is a real <button> wrapping the image (2026-08-23).
     It used to be role="button" + tabindex on the <figure> itself, which
     axe rejects - ARIA does not allow the button role on an element whose
     implicit role is figure - and which reimplemented Enter/Space by hand.
     A native button gets the role, the focus ring and both keys for free. */
  .gal-btn{display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in;color:inherit;font:inherit}
  .gal-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
  .gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
  .gal-item:hover img{transform:scale(1.07)}
  .gal-item .cap{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#fff;font-weight:700;
    background:linear-gradient(transparent,rgba(0,0,0,.88));opacity:0;transition:opacity .3s}
  .gal-item:hover .cap{opacity:1}
  /* The caption overlays the button, so it has to let clicks through. */
  .gal-item .cap{pointer-events:none}
  .lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,6,7,.96);display:none;place-items:center;padding:5vh 5vw;cursor:zoom-out}
  .lightbox.open{display:grid}
  .lightbox img{max-width:100%;max-height:90vh;object-fit:contain;border:1px solid var(--border)}
  .lightbox .x{position:absolute;top:18px;right:24px;font-size:38px;line-height:1;color:#fff;background:none;border:none;cursor:pointer}

  /* ---------- Hero ---------- */
  .hero{min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;padding:132px 0 72px}
  .hero-bg{position:absolute;inset:0;z-index:0;
    background:
      repeating-linear-gradient(-45deg,rgba(255,90,31,.045) 0 2px,transparent 2px 26px),
      radial-gradient(90% 80% at 78% 30%,rgba(255,90,31,.16),transparent 58%),
      radial-gradient(70% 90% at 90% 90%,rgba(255,90,31,.10),transparent 60%),
      linear-gradient(180deg,#101013,#0a0a0b)}
  .hero-bg::before{content:"";position:absolute;inset:0;
    background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:54px 54px;mask:linear-gradient(90deg,transparent,#000 55%)}
  .hero-bg::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,var(--bg) 8%,rgba(10,10,11,.55) 48%,transparent 100%)}
  .hero-trailer{position:absolute;right:-40px;bottom:6%;width:min(52vw,760px);color:rgba(255,255,255,.05);z-index:0}
  /* With a hero photo, .hero-bg keeps its texture but drops the opaque base
     colour and its own left-side scrim — otherwise it paints over the photo. */
  .hero.has-photo .hero-bg{background:
      repeating-linear-gradient(-45deg,rgba(255,90,31,.05) 0 2px,transparent 2px 26px),
      radial-gradient(90% 80% at 78% 30%,rgba(255,90,31,.13),transparent 58%)}
  .hero.has-photo .hero-bg::before{opacity:.45}
  .hero.has-photo .hero-bg::after{display:none}
  .hero .wrap{position:relative;z-index:1;width:100%}
  /* The hero is two columns so the facts card sits beside the headline —
     the five things people ring up to ask, answered before anyone scrolls.
     Below 900px it stacks and the card follows the buttons, because on a
     phone the headline and the call-to-action have to come first. */
  .hero-split{display:grid;grid-template-columns:1.35fr .85fr;gap:56px;align-items:center}
  .shortver{background:rgba(20,20,22,.72);backdrop-filter:blur(8px);
            border:1px solid var(--border-2);border-radius:16px;
            padding:26px 28px;box-shadow:0 18px 44px rgba(0,0,0,.35)}
  .shortver h2{font-family:"JetBrains Mono";font-size:11.5px;letter-spacing:.18em;
               text-transform:uppercase;color:var(--accent);font-weight:700;
               line-height:inherit;margin-bottom:16px}
  .shortver .sv{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
                padding:11px 0;border-bottom:1px dashed var(--border);
                font-size:14px;color:var(--muted)}
  .shortver .sv:last-of-type{border-bottom:0}
  .shortver .sv b{color:var(--text);font-family:"Archivo";font-weight:800;
                  font-size:16px;white-space:nowrap}
  .shortver .svnote{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);
                    font-size:12.5px;color:var(--muted-2);line-height:1.6}
  @media(max-width:900px){
    .hero-split{grid-template-columns:1fr;gap:36px}
    .shortver{order:2}
  }
  .hero h1{font-size:clamp(34px,6.2vw,78px);margin:20px 0 30px;text-wrap:balance}
  .hero h1 .accent{color:var(--accent)}
  .hero p.lead{max-width:520px;color:#cfcfd3;font-size:16px;line-height:1.8}
  .hero-actions{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap}
  .hero-statusbar{
    display:flex;gap:34px;flex-wrap:wrap;margin-top:52px;padding-top:28px;
    border-top:1px solid var(--border);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
  }
  .hero-statusbar span{display:inline-flex;align-items:center;gap:9px}
  .vet-badge{border:1px solid var(--accent);color:var(--accent)!important;background:var(--accent-soft);padding:7px 13px;font-weight:700;letter-spacing:.13em}
  .vet-badge svg{width:15px;height:15px}
  .dot{width:8px;height:8px;border-radius:50%;background:#2ecc71;box-shadow:0 0 10px #2ecc71}
  .tick{color:var(--accent)}

  /* ---------- Services (home cards) ---------- */
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border)}
  .svc-card{padding:44px 38px 40px;border-right:1px solid var(--border);transition:background .3s}
  .svc-card:last-child{border-right:none}
  .svc-card:hover{background:var(--surface)}
  .svc-card .num{font-family:"Archivo";font-weight:900;color:var(--accent);font-size:15px;letter-spacing:.1em}
  .svc-card .ico{float:right;color:var(--muted-2);transition:color .3s}
  .svc-card:hover .ico{color:var(--accent)}
  .svc-card .ico svg{width:26px;height:26px}
  .svc-card h3{font-size:23px;margin:44px 0 18px}
  .svc-card p{color:var(--muted);font-size:14px}
  .svc-card .more{display:inline-flex;align-items:center;gap:9px;margin-top:26px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
  .svc-card .more svg{width:15px;height:15px;transition:transform .3s var(--ease)}
  .svc-card:hover .more svg{transform:translateX(5px)}

  /* ---------- Process ---------- */
  .process{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
  .step{position:relative}
  .step .n{font-family:"Archivo";font-weight:900;font-size:62px;color:transparent;-webkit-text-stroke:1.5px var(--accent);opacity:.55;line-height:1}
  .step h3{font-size:19px;margin:16px 0 12px}
  .step p{color:var(--muted);font-size:13.5px}
  .step:not(:last-child)::after{content:"";position:absolute;top:26px;right:-15px;width:8px;height:8px;background:var(--accent);transform:rotate(45deg)}

  /* ---------- Stats ---------- */
  /* ---------- Detailed service rows ---------- */
  .svc-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:70px 0;border-bottom:1px solid var(--border)}
  .svc-row.rev .svc-copy{order:2}
  .svc-row .tag{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
  .svc-row .tag svg{width:18px;height:18px}
  .svc-row h3{font-size:clamp(30px,4vw,44px);margin:16px 0 6px}
  .svc-row .sub{color:var(--muted-2);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:22px}
  .svc-row p.desc{color:var(--muted);margin-bottom:26px}
  .flist{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:30px}
  .flist li{display:flex;gap:13px;font-size:14px;color:#cfcfd3}
  .flist li::before{content:"→";color:var(--accent);font-weight:700}
  /* .svc-img is gone with the panels it sized (2026-09-01). If a real photo
     is ever put into one of these rows it needs its own aspect-ratio back,
     and .solo has to come off the row at the same time. */
  /* The illustration panels were removed from all six service pages on
     2026-09-01 at Trey's request - "Remove the image arts that are on each
     individual service page. Keep all other images. Like the meet the trailer
     images." They were glyph-and-label placeholders, not photographs; the real
     photos (hero, About, Meet The Trailer) are untouched.

     .svc-row is a 1fr 1fr grid, so a row with only .svc-copy left in it parks
     the text in the left half with a hole beside it. .solo drops it to one
     column and caps the measure so the paragraphs do not run to 1200px. Same
     fix, and the same reason, as .about-split.solo.
     ⚠ If a real photo is ever put back into one of these rows, drop .solo at
     the same time or the photo lands underneath rather than beside. */
  .svc-row.solo{grid-template-columns:1fr;max-width:860px}   /* == .svc-more, so the two text blocks on a service page share one measure */

  /* ---------- Pricing ---------- */
  .price-block{margin-bottom:80px}
  .price-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border)}
  .price-card{padding:44px;border-right:1px solid var(--border);position:relative}
  .price-card:last-child{border-right:none}
  .price-card.feat{background:var(--surface)}
  .badge{position:absolute;top:0;right:0;background:var(--accent);color:#0a0a0b;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:8px 16px}
  .price-card .cat{color:var(--accent);font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
  .price-card h3{font-size:24px;margin:12px 0 20px}
  .price-card .amt{font-family:"Archivo";font-weight:900;font-size:56px;line-height:1}
  .price-card .amt .cur{font-size:24px;vertical-align:super;color:var(--muted);margin-right:2px}
  .price-card .amt .per{font-size:14px;font-family:"JetBrains Mono";font-weight:500;color:var(--muted);letter-spacing:.05em}
  .price-card p.pdesc{color:var(--muted);font-size:13.5px;margin:22px 0 24px}
  .clist{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:30px}
  .clist li{display:flex;gap:12px;font-size:13.5px;color:#cfcfd3}
  .clist li svg{width:16px;height:16px;color:var(--accent);flex-shrink:0;margin-top:3px}
  .note{display:flex;gap:14px;border:1px solid var(--accent);padding:22px 24px;margin-top:8px;font-size:13.5px;color:var(--muted)}
  .note svg{width:20px;height:20px;color:var(--accent);flex-shrink:0}
  .note b{color:var(--accent);letter-spacing:.05em}
  .chips{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 30px}
  .chip{border:1px solid var(--border-2);padding:9px 16px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .coverage{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border)}
  .cov{padding:34px 28px;border-right:1px solid var(--border)}
  .cov:last-child{border-right:none}
  .cov .ci{width:44px;height:44px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:22px;color:var(--accent)}
  .cov .ci svg{width:22px;height:22px}
  .cov h3{font-size:15px;margin-bottom:10px;font-family:inherit;font-weight:700;line-height:inherit;letter-spacing:normal;text-transform:none}
  .cov p{color:var(--muted);font-size:12.5px}
  /* FAQ */
  .faq{border-top:1px solid var(--border)}
  .faq details{border-bottom:1px solid var(--border);padding:6px 0}
  .faq summary{list-style:none;cursor:pointer;padding:24px 0;font-family:"Archivo";font-weight:700;font-size:19px;text-transform:none;letter-spacing:0;display:flex;justify-content:space-between;align-items:center;gap:20px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary .pm{color:var(--accent);font-size:26px;font-weight:900;transition:transform .3s;flex-shrink:0}
  .faq details[open] summary .pm{transform:rotate(45deg)}
  .faq .ans{color:var(--muted);font-size:14px;padding:0 40px 26px 0;max-width:900px}

  /* ---------- About ---------- */
  .about-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .about-split .amedia{aspect-ratio:3/4}
  /* One-column variant: see the comment on the Zero-Debris block. 820px is the
     same measure .legal-doc uses, so body copy sets the same width sitewide. */
  .about-split.solo{grid-template-columns:1fr;max-width:820px}
  .about-split h3{font-size:clamp(32px,4.5vw,50px);margin-bottom:26px}
  .about-split h3 .accent{color:var(--accent)}
  .about-split p{color:var(--muted);margin-bottom:18px;font-size:14.5px}
  .values{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border)}
  .value{padding:36px 30px;border-right:1px solid var(--border)}
  .value:last-child{border-right:none}
  .value .vi{color:var(--accent);margin-bottom:22px}
  .value .vi svg{width:30px;height:30px}
  .value h3{font-size:18px;margin-bottom:12px}
  .value p{color:var(--muted);font-size:13px}

  /* ---------- Contact ---------- */
  .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px}
  .lines{display:flex;flex-direction:column;gap:18px}
  .line{display:flex;gap:20px;border:1px solid var(--border);padding:26px 28px;transition:border-color .3s}
  .line:hover{border-color:var(--border-2)}
  .line .li{width:46px;height:46px;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent);flex-shrink:0}
  .line .li svg{width:22px;height:22px}
  .line .lt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
  .line>div{min-width:0}   /* flex items refuse to shrink below their longest word without this */
  .line .lv{font-family:"Archivo";font-weight:700;font-size:18px;text-transform:none;letter-spacing:0;overflow-wrap:anywhere}
  .line .ls{color:var(--muted-2);font-size:12px;margin-top:4px}
  .appt-tag{display:inline-block;margin-left:8px;font-family:"JetBrains Mono";font-size:9.5px;font-weight:700;letter-spacing:.14em;color:var(--accent);border:1px solid var(--accent);padding:2px 7px;vertical-align:middle}
  .hours{width:100%;border-collapse:collapse;margin-top:10px}
  .hours th{text-align:left;font-weight:500;color:var(--muted);font-size:13px;padding:6px 16px 6px 0;white-space:nowrap;vertical-align:top;letter-spacing:.02em}
  .hours td{text-align:left;color:#dcdce0;font-size:13px;padding:6px 0;font-weight:500}
  .hours .closed{color:var(--muted-2)}
  form.msg{border:1px solid var(--border);padding:38px}
  .field{margin-bottom:22px}
  .field label{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
  .field label .req{color:var(--accent)}
  .field input,.field select,.field textarea{
    width:100%;background:var(--bg-2);border:1px solid var(--border);color:var(--text);
    font-family:"JetBrains Mono",monospace;font-size:14px;padding:15px 16px;transition:border-color .25s;
    color-scheme:dark
  }
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
  .field textarea{resize:vertical;min-height:130px}
  /* Replace the browser's faint native calendar glyph with a solid orange one. */
  input[type="date"]::-webkit-calendar-picker-indicator{
    opacity:1;cursor:pointer;width:20px;height:20px;padding:0;margin:0;
    background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5a1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:center;background-size:20px 20px;
    transition:transform .18s ease,filter .18s ease
  }
  input[type="date"]::-webkit-calendar-picker-indicator:hover{transform:scale(1.12);filter:brightness(1.25)}
  /* Firefox has no picker indicator, so paint the icon into the field itself. */
  @supports (-moz-appearance:none){
    input[type="date"]{
      background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5a1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");
      background-repeat:no-repeat;background-position:right 16px center;background-size:20px 20px;padding-right:46px
    }
  }
  .fuel-note{display:none;gap:11px;align-items:flex-start;margin:2px 0 20px;padding:13px 15px;border-left:2px solid var(--accent);background:var(--accent-soft);font-size:12.5px;color:#cfcfd3;line-height:1.6}
  .fuel-note svg{width:17px;height:17px;color:var(--accent);flex-shrink:0;margin-top:2px}
  .fuel-note b{color:#fff}
  .est-card{display:none;margin:2px 0 20px;border:1px solid var(--border);background:#141416}
  .est-card.show{display:block}
  .est-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:15px 18px;border-bottom:1px solid var(--border)}
  .est-head span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8b8b93}
  .est-head b{font-size:26px;color:#fff;line-height:1;white-space:nowrap}
  .est-head b.quote{font-size:17px;color:var(--accent)}
  .est-lines{padding:13px 18px;font-size:13px;color:#cfcfd3;line-height:1.85}
  .est-lines .row{display:flex;justify-content:space-between;gap:14px}
  .est-lines .row span:last-child{color:#fff;white-space:nowrap}
  .est-lines .row.fuel span:last-child{color:var(--accent)}
  .est-fine{padding:0 18px 15px;font-size:11.5px;color:#8b8b93;line-height:1.65}
  .restrict-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border)}
  .restrict-col{padding:34px 32px}
  .restrict-col.no{border-left:1px solid var(--border)}
  .restrict-col h3{display:flex;align-items:center;gap:12px;font-size:19px;margin-bottom:22px}
  .restrict-col h3 .ic{width:30px;height:30px;display:grid;place-items:center;flex-shrink:0}
  .restrict-col.yes h4 .ic{background:rgba(46,204,113,.14);color:#2ecc71}
  .restrict-col.no h4 .ic{background:rgba(224,72,58,.16);color:#e0483a}
  .restrict-col h3 .ic svg{width:18px;height:18px}
  .restrict-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
  .restrict-col li{display:flex;gap:11px;font-size:13.5px;color:#cfcfd3;line-height:1.5}
  .restrict-col li svg{width:16px;height:16px;flex-shrink:0;margin-top:3px}
  .restrict-col.yes li svg{color:#2ecc71}
  .restrict-col.no li svg{color:#e0483a}
  .restrict-perm{border:1px solid var(--border);border-top:none;padding:26px 32px}
  .restrict-perm h4{font-family:inherit;line-height:inherit;color:var(--accent);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;font-weight:700}
  .restrict-perm p{color:var(--muted);font-size:13.5px;line-height:1.7;max-width:920px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .form-note{font-size:12px;color:var(--muted-2);margin-top:16px;line-height:1.6}
  .form-ok{display:none;border:1px solid var(--accent);background:var(--accent-soft);padding:18px 20px;margin-bottom:22px;color:var(--text);font-size:13.5px}
  .form-ok.show{display:block}
  .form-err{display:none;border:1px solid #ff5f52;background:rgba(255,95,82,.11);padding:18px 20px;margin-bottom:22px;color:var(--text);font-size:13.5px;line-height:1.62}
  .form-err.show{display:block}
  .form-err strong{display:block;margin-bottom:5px;color:#ff8a80;font-size:14px;letter-spacing:-.01em}
  .form-err a{color:#ff8a80;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,138,128,.45)}
  .form-err a:hover{color:#ffb3ad;border-bottom-color:rgba(255,179,173,.7)}
  .pickup-day{font-family:"JetBrains Mono";font-size:11px;color:var(--accent);letter-spacing:.04em;text-transform:none}
  /* The duration cap's explanation (2026-08-12). Same visual language as
     .load-note — it is a thing you read, not a thing you act on. */
  .dur-note{display:block;margin-top:10px;padding:11px 13px;border-left:2px solid var(--accent);
    background:var(--accent-soft);font-size:12px;color:#cfcfd3;line-height:1.6}
  .dur-note b{color:var(--accent)}
  .dur-note a{color:var(--accent);text-decoration:underline}
  /* The restricted-items acknowledgement (2026-08-12, Trey's request). Styled
     like the agreement checkbox rather than like .load-note, on purpose: a note
     is something you read and a checkbox is something you have to act on, and
     they should not look alike. Sits directly under "What Will You Be Loading?"
     because that is the moment the customer has just described their load and
     the list actually means something to them. */
  .restrict-check{display:flex;gap:11px;align-items:flex-start;margin-top:12px;padding:14px 15px;
    border:1px solid var(--border-2);background:var(--surface-2);font-size:12.5px;color:#cfcfd3;
    line-height:1.6;cursor:pointer}
  .restrict-check input{margin-top:2px;width:17px;height:17px;accent-color:var(--accent);flex-shrink:0;cursor:pointer}
  .restrict-check b{color:var(--white)}
  .restrict-check a{color:var(--accent);text-decoration:underline}
  .load-note{display:flex;gap:11px;align-items:flex-start;margin-top:12px;padding:13px 15px;border-left:2px solid var(--accent);background:var(--accent-soft);font-size:12.5px;color:#cfcfd3;line-height:1.6}
  .load-note svg{width:17px;height:17px;color:var(--accent);flex-shrink:0;margin-top:2px}
  .load-note b{color:var(--accent);letter-spacing:.02em}
  .load-note .em{color:var(--white);font-weight:700}
  .assist-note{display:none;gap:11px;align-items:flex-start;margin:2px 0 20px;padding:13px 15px;border-left:2px solid var(--accent);background:var(--accent-soft);font-size:12.5px;color:#cfcfd3;line-height:1.6}
  .assist-note svg{width:17px;height:17px;color:var(--accent);flex-shrink:0;margin-top:2px}
  .assist-note b{color:#fff}
  .pay-note{display:flex;gap:11px;align-items:flex-start;margin:2px 0 20px;padding:14px 16px;border:1px solid var(--border-2);background:var(--bg-2);font-size:12.5px;color:var(--muted);line-height:1.6}
  .pay-note svg{width:18px;height:18px;color:var(--accent);flex-shrink:0;margin-top:2px}
  .pay-note b{color:var(--text)}
  .agreement{border:1px solid var(--border-2);margin:2px 0 20px}
  .agreement-head{background:var(--bg-2);padding:13px 16px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--border)}
  .agreement-body{max-height:200px;overflow-y:auto;padding:16px 18px;font-size:12px;line-height:1.7;color:var(--muted)}
  .agreement-body h3{font-family:"JetBrains Mono";line-height:inherit;font-size:11.5px;color:var(--text);text-transform:none;letter-spacing:0;margin:14px 0 4px;font-weight:700}
  .agreement-body p{margin-bottom:8px}
  .agreement-body strong{color:#cfcfd3}
  .agreement-body::-webkit-scrollbar{width:8px}
  .agreement-body::-webkit-scrollbar-thumb{background:var(--border-2)}
  .agree-check{display:flex;gap:11px;align-items:flex-start;padding:14px 16px;border-top:1px solid var(--border);font-size:13px;color:#cfcfd3;cursor:pointer}
  .agree-check input{margin-top:2px;width:17px;height:17px;accent-color:var(--accent);flex-shrink:0;cursor:pointer}
  .sig-field label{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
  #signature{width:100%;background:var(--bg-2);border:1px solid var(--border);color:var(--text);font-family:"Caveat",cursive;font-size:26px;padding:8px 16px;transition:border-color .25s}
  #signature::placeholder{font-family:"JetBrains Mono",monospace;font-size:14px;color:var(--muted-2)}
  #signature:focus{outline:none;border-color:var(--accent)}
  .booking-summary{margin:2px 0 22px;padding:14px 16px;border:1px solid var(--accent);background:var(--accent-soft);font-size:13.5px;color:var(--text);display:flex;gap:11px;align-items:center;line-height:1.5}
  .booking-summary svg{width:18px;height:18px;color:var(--accent);flex-shrink:0}
  .booking-summary b{color:var(--accent);font-weight:700}
  .booking-summary .win{font-family:"Archivo";font-weight:700}
  .booking-summary.conflict{border-color:#e0483a;background:rgba(224,72,58,.12)}
  .booking-summary.conflict svg,.booking-summary.conflict b{color:#e0483a}

  /* ---------- CTA band ---------- */
  .ctaband{border:1px solid var(--accent);padding:60px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;position:relative}
  .ctaband::before{content:"";position:absolute;top:-1px;left:-1px;width:60px;height:6px;background:var(--accent)}
  .ctaband::after{content:"";position:absolute;bottom:-1px;right:-1px;width:60px;height:6px;background:var(--accent)}
  .ctaband h2{font-size:clamp(34px,5vw,60px)}
  .ctaband h2 .accent{color:var(--accent)}
  .ctaband p{color:var(--muted);margin-top:16px;max-width:420px;font-size:14px}
  .ctaband .actions{display:flex;gap:14px;flex-wrap:wrap}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--border);padding:70px 0 34px;background:var(--bg-2)}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
  .foot-brand p{color:var(--muted);font-size:13px;margin-top:22px;max-width:280px}
  .foot-addr{font-style:normal;color:var(--muted);font-size:13px;margin-top:16px;line-height:1.75}
  .foot-addr a{color:var(--muted);text-decoration:underline}
  .foot-addr a:hover{color:var(--accent)}
  .pay-badge{display:inline-flex;align-items:center;gap:9px;margin-top:20px;padding:9px 14px;border:1px solid var(--border-2);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .pay-badge svg{width:18px;height:18px;color:var(--accent);flex-shrink:0}
  .pay-badge b{color:var(--text);font-weight:700;letter-spacing:.04em}
  .pay-line{display:flex;gap:13px;align-items:center;margin-top:26px;padding:18px 22px;border:1px solid var(--border-2);background:var(--bg-2);font-size:13.5px;color:var(--muted);line-height:1.6}
  .pay-line svg{width:22px;height:22px;color:var(--accent);flex-shrink:0}
  .pay-line b{color:var(--text)}
  .spec-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);margin-bottom:46px}
  .spec{padding:38px 28px;border-right:1px solid var(--border)}
  .spec:last-child{border-right:none}
  .spec .v{font-family:"Archivo";font-weight:900;font-size:46px;color:var(--accent);line-height:1;white-space:nowrap}
  .spec .v small{font-size:15px;color:var(--muted);margin-left:5px;font-weight:700}
  .spec .l{margin-top:12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .trailer-split{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
  .trailer-split .media{aspect-ratio:4/3}
  /* =====================================================================
     THE TRAILER GALLERY  (2026-08-23)
     ---------------------------------------------------------------------
     "Meet The Trailer" used to be one static photo slot. It is now a
     click-through gallery of four: the side, the barn doors open, the bed
     lifted, and it hitched to the truck. Those four answer the four things
     a first-time renter actually asks, in the order they ask them.

     ⚠ NO AUTOPLAY, deliberately. A panel that advances on its own steals
     attention from the spec list beside it, and it is the single most
     common reason a carousel fails WCAG 2.2.2 (pause, stop, hide). Nothing
     moves here unless somebody moves it.

     ⚠ The navigation is real <button>s, not divs with click handlers, so
     the role, the focus ring, Enter and Space all come from the platform.
     ===================================================================== */
  .tgal .tgal-slide{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .45s var(--ease)}
  .tgal .tgal-slide.is-current{opacity:1;z-index:2}
  .tgal .tgal-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.05)}
  .tgal .tgal-scrim{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:3;pointer-events:none;
    background:linear-gradient(to top,rgba(6,6,7,.88),rgba(6,6,7,.45) 45%,transparent)}
  .tgal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
    width:42px;height:42px;display:grid;place-items:center;padding:0;border-radius:50%;
    border:1px solid rgba(255,255,255,.42);background:rgba(10,10,11,.64);color:#fff;cursor:pointer;
    transition:background .2s var(--ease),border-color .2s var(--ease)}
  .tgal-nav:hover{background:rgba(10,10,11,.88);border-color:var(--accent)}
  .tgal-nav:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .tgal-nav svg{width:19px;height:19px}
  .tgal-prev{left:12px}
  .tgal-next{right:12px}
  /* ⚠ TOP right, not bottom right. .media::after draws a 44px accent corner
     bracket at bottom:14px right:14px, and the dots landed exactly on it -
     and on a phone the caption wraps to two lines and ran into them as well.
     Dots up top, caption along the bottom with the bracket's width kept
     clear, and the three never meet. */
  .tgal-dots{position:absolute;right:16px;top:16px;z-index:6;display:flex;gap:9px}
  .tgal-dot{width:10px;height:10px;padding:0;border-radius:50%;cursor:pointer;
    border:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.22)}
  .tgal-dot[aria-current="true"]{background:var(--accent);border-color:var(--accent)}
  .tgal-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .tgal-cap{position:absolute;left:18px;right:68px;bottom:14px;z-index:6;
    font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:#fff;font-weight:700;
    text-shadow:0 1px 9px rgba(0,0,0,.95)}
  /* The carousel supplies its own caption, so the static tag would be a
     second label in the same corner saying something less useful. */
  .tgal .mtag{display:none}
  @media(prefers-reduced-motion:reduce){.tgal .tgal-slide{transition:none}}
  @media(max-width:560px){
    .tgal-nav{width:36px;height:36px}
    .tgal-cap{font-size:10.5px;line-height:1.45}
  }
  .trailer-split h3{font-size:clamp(26px,3.5vw,38px);margin-bottom:22px}
  .trailer-note{border-left:2px solid var(--accent);background:var(--accent-soft);padding:14px 16px;margin-top:24px;font-size:13px;color:#cfcfd3;line-height:1.6}
  .loadguide-wrap{overflow-x:auto;border:1px solid var(--border)}
  .loadguide{width:100%;border-collapse:collapse;min-width:520px}
  .loadguide th{text-align:left;background:var(--bg-2);color:var(--accent);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:14px 18px;border-bottom:1px solid var(--border)}
  .loadguide td{padding:13px 18px;font-size:13.5px;color:#cfcfd3;border-bottom:1px solid var(--border);vertical-align:top}
  .loadguide tr:last-child td{border-bottom:none}
  .loadguide td:first-child{color:var(--text);font-weight:500}
  .loadguide td span{color:var(--muted-2);font-size:12px}
  .loadguide tbody tr:hover{background:rgba(255,255,255,.02)}
  /* A two-column price list where the right side is a sentence. See the
     markup comment on .feelist for why this is not a table. */
  .feelist{list-style:none;margin:0;padding:0;border:1px solid var(--border)}
  .feelist li{display:grid;grid-template-columns:260px 1fr;gap:24px;padding:18px 22px;border-bottom:1px solid var(--border)}
  .feelist li:last-child{border-bottom:none}
  .feelist .n{color:var(--text);font-weight:600;font-size:14.5px;line-height:1.45}
  .feelist .n small{display:block;color:var(--muted-2);font-weight:400;font-size:12px;margin-top:3px}
  .feelist .v{color:#cfcfd3;font-size:13.5px;line-height:1.6}
  @media (max-width:640px){
    /* One column under the other. Nothing moves sideways at any width. */
    .feelist li{grid-template-columns:1fr;gap:7px;padding:16px}
  }
  /* The two real tables left on the site are genuinely tabular - short values
     in three columns - but min-width:520px still pushes them off a 390px
     phone. Below that, let the cells wrap instead. A wrapped cell is longer;
     a clipped one is invisible. */
  @media (max-width:560px){
    .loadguide{min-width:0}
    .loadguide th,.loadguide td{padding:12px 13px;font-size:12.5px;overflow-wrap:break-word}
  }
  /* 320px is the narrowest phone the site supports. The Load Guide's third
     column is a sentence, and at that width the padding alone was enough to
     push it 5px past the edge - which is 5px of a table nobody can see. */
  @media (max-width:400px){
    .loadguide th,.loadguide td{padding:10px 9px;font-size:11.5px}
  }
  /* --- The Services hub index (2026-09-01) ---------------------------------
     This was a six-column comparison table (.cmp, Phase 2 2026-08-18). It was
     1160px wide with a sticky row label and it scrolled sideways, which is
     fine on a desktop and miserable on a phone: you swiped one column at a
     time to answer "which one do I need", and most people arrive on a phone.
     Trey called it out by name - "that table is hard to navigate on mobile".

     A list of the services with a line of description each, every row a full
     link to that service's own page, answers the same question in one
     downward scroll with no horizontal movement at all. The comparison
     content is not lost: each service page carries its own detail, and the
     "who loads it / what it costs" pair that the table's rows existed to
     line up now rides along on each row as .svc-index-meta.

     This is NOT the home page card grid. The grid is photos and equal-weight
     tiles; this is a text index sized for scanning names. The duplicate
     content the Phase 2 split removed stays removed. --- */
  .svc-index{list-style:none;margin:0;padding:0;border:1px solid var(--border)}
  .svc-index li + li{border-top:1px solid var(--border)}
  /* The whole row is the link, not just the name - a 44px+ tap target that
     matches where a thumb actually lands. */
  .svc-index a{display:block;padding:20px 22px;text-decoration:none;color:inherit;transition:background .15s ease}
  .svc-index a:hover,.svc-index a:focus-visible{background:rgba(255,255,255,.03)}
  /* inline-flex, not flex: on a wide screen a full-width flex row parks the
     chevron ~1500px away from the name it belongs to, reading as a stray mark
     at the edge of the page rather than part of the link. Sitting it right
     after the last word keeps the two together at every width. */
  .svc-index .n{display:inline-flex;align-items:center;gap:9px;font-size:17px;font-weight:600;color:var(--text);line-height:1.35}
  /* The chevron is decorative - the row is already announced as a link. */
  .svc-index .n svg{width:14px;height:14px;flex:0 0 auto;stroke:var(--accent);transition:transform .15s ease}
  .svc-index a:hover .n svg,.svc-index a:focus-visible .n svg{transform:translateX(3px)}
  .svc-index a:hover .n{color:var(--accent)}
  .svc-index .d{margin:7px 0 0;font-size:13.5px;line-height:1.6;color:#cfcfd3;max-width:70ch}
  .svc-index-meta{margin-top:9px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);line-height:1.7}
  .svc-index-meta b{color:var(--muted);font-weight:600}
  @media (max-width:560px){
    .svc-index a{padding:17px 16px}
    .svc-index .n{font-size:16px}
  }
  .svc-hub-note a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
  .svc-more{margin-top:34px;color:var(--muted);font-size:14.5px;max-width:860px;line-height:1.7}
  .svc-more a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
  /* The three service pages promote the row's own title to the page heading.
     In the source that is an <h2>; split-site.mjs turns it into an <h1>. The
     size rule has to cover both or the multi-page build silently restyles. */
  .svc-row h1,.svc-row h2{font-size:clamp(30px,4vw,44px);margin:16px 0 6px}
  .foot-col h2{font-family:inherit;line-height:inherit;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:22px;font-weight:700}
  .foot-col a,.foot-col .fi{display:block;color:var(--muted);font-size:13.5px;margin-bottom:14px;transition:color .2s}
  .foot-col a:hover{color:var(--text)}
  .foot-col .fi{display:flex;gap:11px;align-items:flex-start}
  .foot-col .fi svg{width:16px;height:16px;color:var(--accent);flex-shrink:0;margin-top:3px}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:56px;padding-top:26px;border-top:1px solid var(--border);color:var(--muted-2);font-size:12px}
  .foot-bottom a{color:var(--muted-2)}
  .foot-bottom a:hover{color:var(--text)}
  .foot-bottom .fl{display:flex;gap:26px}

  /* ---------- Reveal animation ---------- */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .reveal.in{opacity:1;transform:none}

  /* ================= ACCESSIBILITY (punch list 15) =================
     Target is WCAG 2.1 AA. Three things here are load-bearing — don't
     undo them without reading why:

     1. .skip-link is the first focusable thing on the page. It only
        appears when focused, and it lands below the 78px fixed header
        so it isn't hidden underneath it.
     2. :focus-visible gives every interactive element a ring the eye
        can actually find on a near-black background. It's :focus-visible,
        not :focus, so a mouse click doesn't leave a ring behind.
     3. The closed mobile menu is visibility:hidden, NOT just translated
        off-screen. Translated-only, its links stay in the tab order, so a
        keyboard user tabs into six invisible links — on desktop too,
        where the menu can never be opened at all.                       */

  .skip-link{
    position:fixed;top:-100px;left:16px;z-index:300;
    background:var(--accent);color:#0a0a0b;
    font-family:"Archivo";font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.04em;
    padding:14px 20px;border-radius:0 0 8px 8px;text-decoration:none;
    transition:top .2s var(--ease);
  }
  .skip-link:focus{top:0}

  :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
  /* Headings the router focuses so a screen reader lands on the new page are
     tabindex="-1" — they aren't controls, and ringing a 46px headline reads as
     a rendering bug. The page changing under them is the visual cue. */
  [tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
  /* Fields already turn their border orange on focus; the ring is what makes
     that unmistakable rather than a subtle hue change. */
  .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,
  #signature:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
  /* On the orange button an orange ring would vanish — invert it. */
  .btn-primary:focus-visible,.nav-cta:focus-visible,.cb-call:focus-visible,
  .skip-link:focus-visible,.mailtoast .mt-copy:focus-visible{outline-color:var(--text)}

  /* Tap targets: nothing interactive smaller than 24px in either direction
     (WCAG 2.2's 2.5.8 minimum — 2.1 doesn't require it, but this site is
     used one-handed from a truck cab). */
  /* min-height for the tap target, but these are stacked column links: flex,
     never inline-flex, or they run together side by side and two links read as
     one button. .more and the two footer-bottom links ARE inline, so they keep
     inline-flex. */
  .foot-col a,.foot-brand .fi{
    min-height:24px;display:flex;align-items:center;gap:6px;width:fit-content;
  }
  /* The footer address's phone link, added 2026-08-12, is a genuinely inline
     link inside a block of text — so it gets min-height for the 24px tap
     target but stays inline-flex. Giving it display:flex would pull it out
     of the address block the way it did to the footer column links during
     item 15. min-height on a tap target is fine; display:flex on an inline
     link is not. */
  .foot-addr a{min-height:24px;display:inline-flex;align-items:center}
  .foot-bottom .fl a,.more{min-height:24px;display:inline-flex;align-items:center}
  .agree-check input,.restrict-check input{width:24px;height:24px}

  /* ================= LOADING STATES =================
     Two real waits exist on this site. Everything else arrives with the HTML,
     so a skeleton over it would flash for a few milliseconds and read as a
     glitch rather than reassurance — which is why there isn't one.

     1. The availability lookup that runs when a date is picked. It goes to
        Google and back, and on a bad connection that is seconds of silence.
     2. Photos, once they exist. Nothing loads today, but the shimmer is wired
        up so it starts working the moment a slot in PHOTOS is filled in.       */

  @keyframes phd-shimmer{ from{background-position:-160% 0} to{background-position:260% 0} }

  /* The bubble itself: a soft moving sheen over the surface colour. */
  .skel{
    position:relative;overflow:hidden;background:var(--surface-2);border-radius:6px;
    background-image:linear-gradient(100deg,
      rgba(255,255,255,0) 30%, rgba(255,255,255,.07) 48%, rgba(255,255,255,0) 66%);
    background-size:220% 100%;
    animation:phd-shimmer 1.5s linear infinite;
  }
  @media(prefers-reduced-motion:reduce){ .skel{animation:none} }

  /* --- availability --- */
  .avail-note{
    display:none;align-items:center;gap:10px;margin-top:10px;
    font-size:12.5px;color:var(--muted);line-height:1.5;
  }
  .avail-note.show{display:flex}
  .avail-note.warn{color:var(--accent)}
  .avail-note .dot{
    width:14px;height:14px;flex:none;border-radius:50%;
    border:2px solid var(--border-2);border-top-color:var(--accent);
    animation:phd-spin .7s linear infinite;
  }
  .avail-note.warn .dot,.avail-note.done .dot{display:none}
  @keyframes phd-spin{ to{transform:rotate(360deg)} }
  @media(prefers-reduced-motion:reduce){ .avail-note .dot{animation:none;border-top-color:var(--border-2)} }
  /* While we're asking, the times are not to be trusted yet. */
  .field.checking select{opacity:.55;pointer-events:none}

  /* --- photos --- */
  /* A slot with a photo on the way wears the shimmer until the image decodes,
     then loses it. Slots with no photo configured never get it at all. */
  .media.loading,.svc-card .shot.loading,.hero-photo.loading,.gal-item.loading,.gal-btn.loading{
    background:var(--surface-2);
  }
  .media.loading::before,.shot.loading::before,.hero-photo.loading::before,.gal-item.loading::before,.gal-btn.loading::before{
    content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
    background:var(--surface-2);
    background-image:linear-gradient(100deg,
      rgba(255,255,255,0) 30%, rgba(255,255,255,.07) 48%, rgba(255,255,255,0) 66%);
    background-size:220% 100%;
    animation:phd-shimmer 1.5s linear infinite;
  }
  @media(prefers-reduced-motion:reduce){
    .media.loading::before,.shot.loading::before,.hero-photo.loading::before,.gal-item.loading::before,.gal-btn.loading::before{animation:none}
  }
  .gal-item{position:relative}
  /* Fade the photo in rather than snapping it, so a slow image doesn't jolt. */
  .media .photo,.shot img,.gal-item img{transition:opacity .4s var(--ease)}
  .loading .photo,.loading img{opacity:0}

  /* ================= ROUNDED EDGES =================
     The site was built with hard 90° corners, which is a large part of why it
     read as industrial. Softening every panel is most of the friendlier feel.
     Deliberately one appended block rather than 60 edited rules: everything
     downstream keeps its own colours and spacing and simply gains a radius,
     which makes this trivial to revert if it ever needs to be. Radii stay
     modest (10-16px) — heavier rounding starts looking like a consumer app
     rather than a contractor. */
  .btn,.nav-cta,.pill,.chip,.tag,.eyebrow-tag{border-radius:10px}
  .field input,.field select,.field textarea,#signature{border-radius:10px}
  .price-card,.svc-card,.step,.value,.cov,.spec,.line,.media,.amedia,
  .restrict-col,.trailer-note,.legal-note,.form-ok,.form-err,.est-card,
  .book-cta,.loadguide-wrap,.agreement,.hours,.ctaband,
  form.msg,.gal-item,.faq details{border-radius:14px}
  .svc-grid,.steps,.price-grid,.coverage,.values,.spec-grid,.restrict-grid,
  .contact-grid,.lines{border-radius:16px}
  .svc-grid,.coverage,.values,.spec-grid,.price-grid{overflow:hidden}
  .brand .mark{border-radius:12px}
  .burger{border-radius:10px}
  .agreement-head{border-radius:14px 14px 0 0}
  .agreement-body{border-radius:0 0 14px 14px}
  /* The FAQ was a flat stack of hairlines; rounding those does nothing,
     because there is no panel to round. Each question becomes its own card. */
  .faq{border-top:0}
  .faq details{margin-bottom:10px;border:1px solid var(--border);
               padding:0 20px;background:var(--surface)}
  .callbar a{border-radius:12px}
  .skel,.media.loading::before{border-radius:14px}
  /* The RECOMMENDED flag has to follow the card's corner or it pokes out. */
  .badge{border-radius:0 16px 0 14px}

  /* ---------- Mobile menu ---------- */
  /* The closed menu is parked one screen-width to the right, which used to
     push the document wider than the viewport — a horizontal scrollbar at
     320px (WCAG 1.4.10 reflow). overflow-x:clip on the body swallows that
     without turning the body into a scroll container the way overflow:hidden
     would. The visibility transition is 0s on the way in and delayed on the
     way out, so the menu is focusable the instant it opens but still slides
     out gracefully. */
  /* ⚠ overflow-y:auto ADDED 2026-08-18 AND IT IS NOT COSMETIC. The four
     service links made this menu taller than a 390x844 phone, and with the
     panel fixed at inset:78px 0 0 and no overflow, "Schedule Now" — the one
     thing in here that makes money — was simply clipped off the bottom with
     no way to reach it. Nothing failed; the menu just quietly stopped at
     Contact. pages-test.mjs now asserts the CTA is reachable at 320px too.
     overscroll-behavior stops the scroll chaining to the page underneath. */
  .mobile-menu{position:fixed;inset:78px 0 0;z-index:99;background:var(--bg);transform:translateX(100%);visibility:hidden;transition:transform .4s var(--ease),visibility 0s linear .4s;display:flex;flex-direction:column;padding:34px 28px 40px;gap:6px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .mobile-menu.open{transform:none;visibility:visible;transition:transform .4s var(--ease),visibility 0s linear 0s}
  .mobile-menu a{font-family:"Archivo";font-weight:800;font-size:28px;text-transform:uppercase;padding:16px 0;border-bottom:1px solid var(--border);color:var(--text)}
  .mobile-menu .btn{margin-top:24px;justify-content:center}
  /* The four services, nested under Services on the phone. Smaller and rules
     off to the left so the menu still reads as seven top-level destinations
     rather than eleven equals. */
  /* One continuous rule down the group, not four stubs — .mobile-menu is a
     flex column with a 6px gap, so a border-left on each link came out as
     dashes. */
  .m-subs{display:flex;flex-direction:column;border-left:2px solid var(--border);margin:2px 0 8px}
  .mobile-menu a.m-sub{font-family:inherit;font-weight:700;font-size:12.5px;letter-spacing:.12em;padding:13px 0 13px 16px;border-bottom:none;color:var(--muted);min-height:24px}

  /* ---------- Sticky mobile call/text bar (punch list 13) ----------
     Hidden entirely above 720px. z-index 90 sits UNDER the mobile menu
     (99) and the lightbox (200), so both still cover it. With JavaScript
     off the bar is simply always visible — the .js gate is what hides it. */
  /* --- COOKIE CONSENT (2026-08-18) -------------------------------------
     Fixed to the bottom on every width. z-index sits ABOVE the sticky call
     bar (90), and while the banner is open the call bar is pushed back out
     of the way - two fixed bars stacked at the bottom of a phone is most of
     the screen gone, and one question at a time is easier to answer. The
     call bar comes back the moment a choice is made. */
  .consent{position:fixed;left:0;right:0;bottom:0;z-index:95;background:rgba(10,10,11,.97);backdrop-filter:blur(14px);border-top:1px solid var(--border-2);padding:18px 0 calc(18px + env(safe-area-inset-bottom, 0px))}
  .consent[hidden]{display:none}
  .consent-in{max-width:1240px;margin:0 auto;padding:0 34px;display:flex;gap:26px;align-items:center;justify-content:space-between}
  .consent-copy h2{font-family:"Archivo";font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:7px;line-height:1}
  .consent-copy p{color:var(--muted);font-size:13px;line-height:1.65;max-width:760px}
  .consent-copy a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
  .consent-btns{display:flex;gap:10px;flex:none}
  .consent-btns .btn{min-height:44px;padding:0 22px;font-size:12px;white-space:nowrap}
  /* ⚠ SPECIFICITY, and it was wrong first time. This started life as
     `body.consent-open .callbar` — (0,2,1) — which LOSES to the existing
     `.js .callbar.show` at (0,3,0). The call bar never stood down; the
     banner simply covered it, because it happens to sit at a higher
     z-index. It looked right in a screenshot and was not: the bar was
     still there, still laid out, with its two tap targets unreachable
     underneath. Matching `.show` explicitly takes this to (0,3,1). */
  body.consent-open .callbar,
  body.consent-open .callbar.show{transform:translateY(150%)}
  /* ⚠ RESERVE THE SPACE THE BANNER OCCUPIES, exactly as the call bar does
     with its own 74px. Without this the banner sits ON TOP of whatever the
     page's last ~200px are - and on /book/ at phone widths that was the
     name, email and phone fields. The form was still usable if you dismissed
     the banner first, which is precisely the kind of "works if you already
     know" that nobody reports and everybody abandons.
     The height is measured at runtime, not guessed: the copy wraps to two
     lines on a wide phone and five on a narrow one. `body.consent-open` is
     (0,1,1) and beats the plain `body` rule at (0,0,1), so no !important. */
  body.consent-open{padding-bottom:calc(var(--consent-h, 0px) + env(safe-area-inset-bottom, 0px))}
  @media(max-width:860px){
    .consent-in{flex-direction:column;align-items:stretch;gap:16px;padding:0 22px}
    .consent-btns{display:grid;grid-template-columns:1fr 1fr}
    .consent-btns .btn{justify-content:center}
  }
  .callbar{display:none}
  @media(max-width:720px){
    body{padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px))}
    .callbar{
      display:grid;grid-template-columns:1fr 1fr;gap:10px;
      position:fixed;left:0;right:0;bottom:0;z-index:90;
      padding:9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
      background:rgba(10,10,11,.93);backdrop-filter:blur(14px);
      border-top:1px solid var(--border);
      transition:transform .32s var(--ease);
    }
    .js .callbar{transform:translateY(150%)}
    .js .callbar.show{transform:none}
    .callbar a{
      display:flex;align-items:center;justify-content:center;gap:9px;
      min-height:52px;padding:0 10px;border-radius:10px;text-decoration:none;
      font-family:"Archivo";font-weight:800;font-size:15px;
      letter-spacing:.03em;text-transform:uppercase;
    }
    .callbar .cb-call{background:var(--accent);color:#0a0a0b}
    .callbar .cb-call:active{background:var(--accent-dark)}
    .callbar .cb-text{background:var(--surface-2);color:var(--text);border:1px solid var(--border-2)}
    .callbar .cb-text:active{border-color:var(--accent);color:var(--accent)}
    .callbar svg{width:19px;height:19px;flex:none}
  }
  @media print{ .callbar{display:none} }

  /* ---------- Mail fallback toast ----------
     Only ever shown by JavaScript, and only when a mailto: click produced
     nothing. Sits above the call bar on phones. z-index 150 is above the
     mobile menu (99) and below the lightbox (200). */
  .mailtoast{
    position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);
    z-index:150;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
    max-width:min(560px,calc(100vw - 32px));
    padding:14px 16px;background:var(--surface);border:1px solid var(--border-2);
    border-left:3px solid var(--accent);border-radius:10px;
    box-shadow:0 18px 44px rgba(0,0,0,.55);
    font-size:14px;color:var(--muted);line-height:1.5;
    opacity:0;pointer-events:none;
    transition:transform .3s var(--ease),opacity .3s var(--ease);
  }
  .mailtoast.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
  .mailtoast .mt-addr{font-family:"JetBrains Mono";font-size:13px;color:var(--text);word-break:break-all}
  .mailtoast button{
    font-family:"JetBrains Mono";font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    background:var(--accent);color:#0a0a0b;border:0;border-radius:6px;
    padding:9px 13px;min-height:36px;cursor:pointer;font-weight:700;
  }
  .mailtoast button:hover{background:var(--accent-dark);color:#fff}
  .mailtoast button.mt-x{background:transparent;color:var(--muted-2);border:1px solid var(--border-2);padding:9px 11px}
  .mailtoast button.mt-x:hover{color:var(--text);border-color:var(--accent);background:transparent}
  @media(max-width:720px){
    .mailtoast{bottom:calc(86px + env(safe-area-inset-bottom, 0px));left:16px;right:16px;transform:translateY(140%);max-width:none}
    .mailtoast.show{transform:none}
  }

  /* ---------- Responsive ---------- */
  /* Seven links plus the CTA: at the narrow end of the desktop range the brand
     and the nav were touching with zero gap. Tighten the spacing before the
     burger takes over at 960. */
  @media(max-width:1100px){ .nav-links{gap:22px} }
  @media(max-width:960px){
    .nav-links{display:none}
    .nav-actions{display:flex;align-items:center;gap:10px}
    .nav-cta-m{display:inline-flex}
    .burger{display:flex}
    .svc-grid,.steps,.price-grid,.coverage,.values,.about-split,.contact-grid,.foot-grid,.spec-grid,.trailer-split,.restrict-grid{grid-template-columns:1fr}
    /* A grid item defaults to min-width:auto, so it refuses to shrink below
       its widest child — one wide field in the booking form was dragging the
       whole contact column out to 363px on a 320px phone, and the section
       next to it stretched to match. This is the line that lets a narrow
       screen actually be narrow (WCAG 1.4.10). */
    .svc-grid>*,.steps>*,.price-grid>*,.coverage>*,.values>*,.about-split>*,
    .contact-grid>*,.foot-grid>*,.spec-grid>*,.trailer-split>*,.restrict-grid>*,
    .svc-row>*{min-width:0}
    .restrict-col.no{border-left:none;border-top:1px solid var(--border)}
    .svc-card{border-right:none;border-bottom:1px solid var(--border)}
    .svc-card:last-child{border-bottom:none}
    .cov,.value,.spec{border-right:none;border-bottom:1px solid var(--border)}
    .cov:last-child,.value:last-child,.spec:last-child{border-bottom:none}
    .step:not(:last-child)::after{display:none}
    .svc-row{grid-template-columns:1fr;gap:34px}
    .svc-row.rev .svc-copy{order:0}
    .about-split .amedia{aspect-ratio:16/10}
    .foot-grid{gap:38px}
    .pad{padding:80px 0}
    .gal-grid{grid-template-columns:repeat(2,1fr)}
    .svc-card .shot{margin:-44px -38px 28px;height:170px}
    .hero-photo img{object-position:60% 50%}
    .hero-photo::after{background:linear-gradient(180deg,rgba(10,10,11,.72) 0%,rgba(10,10,11,.64) 40%,rgba(10,10,11,.62) 66%,rgba(10,10,11,.74) 100%)}
  }
  @media(max-width:560px){
    /* white-space:nowrap keeps buttons crisp on a desktop, but "Request a
       Material Quote" is wider than a 320px phone. Let the longest ones wrap
       rather than push the page sideways. */
    .btn{white-space:normal;text-align:center;padding:17px 22px}
    .gal-grid{grid-template-columns:1fr;gap:10px}
    .wrap{padding:0 20px}
    .price-card,.line,form.msg{padding:28px}
    .grid2{grid-template-columns:1fr}
    .ctaband{padding:36px 28px}
    .hero-statusbar{gap:18px}
    .brand .word small{display:none}
    /* Brand + CTA + burger all have to fit a 320px screen. The tap target
       stays 46px tall; only the padding tightens. */
    .nav-cta-m{padding:0 12px;letter-spacing:.06em}
    .nav-actions{gap:8px}
  }
  @media(max-width:380px){
    /* "Schedule" alone still reads as the button it is, and the brand drops a
       size so the two aren't shoulder to shoulder on a 320px screen. */
    .nav-cta-m .ncw{display:none}
    .nav-cta-m{padding:0 11px}
    .brand .word{font-size:16px}
    .brand .mark{width:38px;height:38px}
  }
  @media(prefers-reduced-motion:reduce){
    *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
    .reveal{opacity:1;transform:none}
  }

  /* ================= LEGAL PAGES (Privacy / Terms) ================= */
  .js .subpage{display:none}
  .js body.subpage-open .subpage.active{display:block}
  body.subpage-open section:not(.subpage){display:none}
  body.subpage-open .nav-links a.link.active{color:var(--muted)}
  body.subpage-open .nav-links a.link.active::after{display:none}
  body.subpage-open .nav-links a.link:hover{color:var(--text)}
  /* The booking form on its own page would run the full width of a desktop
     screen, which reads as a wall of fields. Cap it at a comfortable column. */
  .book-wrap{max-width:820px}
  /* The card that replaces the form inside the Contact section. */
  .book-cta{border:1px solid var(--border);background:var(--surface);padding:38px 34px}
  .book-cta h3{font-family:"Archivo";font-weight:900;font-size:26px;text-transform:uppercase;margin-bottom:14px}
  .book-cta p{color:var(--muted);font-size:14.5px;margin-bottom:22px}
  .book-cta .btn{width:100%;justify-content:center}
  .book-cta-alt{font-size:13px;color:var(--muted-2);margin:18px 0 0}
  /* Inline link, so inline-flex (not flex — see the footer note in the
     accessibility block): keeps it in the sentence but 24px tall to tap. */
  .book-cta-alt a{color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;min-height:24px}
  .book-cta-alt a:hover{text-decoration:underline}
  .page-back{display:inline-flex;align-items:center;gap:8px;font-family:"JetBrains Mono";font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none;margin-bottom:26px;transition:color .25s var(--ease)}
  .page-back:hover{color:var(--accent)}
  .page-back svg{width:14px;height:14px;flex:none}
  .legal-eff{font-family:"JetBrains Mono";font-size:11.5px;color:var(--muted-2);letter-spacing:.06em;margin-top:10px}
  .legal-doc{max-width:820px;margin:38px 0 0;color:var(--muted);font-size:15px;line-height:1.85}
  .legal-doc h3{font-size:19px;color:var(--text);margin:38px 0 12px;letter-spacing:-.01em}
  .legal-doc h3:first-child{margin-top:0}
  .legal-doc h4{font-size:15px;color:var(--text);margin:22px 0 8px}
  .legal-doc p{margin:0 0 14px}
  .legal-doc ul{margin:0 0 16px;padding-left:20px}
  .legal-doc li{margin-bottom:8px}
  .legal-doc strong{color:#cfcfd3}
  /* A link inside a paragraph must be findable without seeing colour. Orange
     on grey scores 1.11:1 against the surrounding text — an underline is the
     only thing making these links real for a colour-blind reader. Don't strip
     it. Standalone links (nav, buttons, cards) are exempt: they aren't sitting
     inside a block of text, so position alone identifies them. */
  .legal-doc a,.faq .ans a,.svnote a,.pricenote a,.form-note a,
  .form-err a,.form-ok a,p a:not(.btn):not(.link):not(.page-back){
    color:var(--accent);text-decoration:underline;text-underline-offset:2px}
  .legal-doc a{color:var(--accent)}
  .section-head p a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
  .legal-doc a:hover{text-decoration:underline}
  .legal-note{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:16px 18px;margin:0 0 22px;font-size:14px}
  .legal-note strong{color:var(--text)}
  .legal-foot{margin-top:44px;padding-top:22px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:18px;font-family:"JetBrains Mono";font-size:11.5px;letter-spacing:.06em}
  .legal-foot a{color:var(--muted);text-decoration:none;transition:color .25s var(--ease)}
  .legal-foot a:hover{color:var(--accent)}
  @media(max-width:720px){
    .legal-doc{font-size:14.5px;margin-top:28px}
    .legal-doc h3{font-size:17px;margin-top:30px}
  }

/* multi-page build */
.section-head h1{font-size:clamp(38px,6vw,74px)}
.js .subpage{display:block}