: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}
  /* 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}
  .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}
  .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{aspect-ratio:4/3}

  /* ---------- 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}
  .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}
  .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)}
  .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{
    background:var(--surface-2);
  }
  .media.loading::before,.shot.loading::before,.hero-photo.loading::before,.gal-item.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{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. */
  .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;gap:6px}
  .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}

  /* ---------- 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. */
  .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}