/* Shared by the generated pages: /services, /services/*, and the city pages.
   Written by hand, emitted nowhere — tools/build-pages.js only links to it.
   Tokens match index.html so the two cannot drift into different golds. */
/* LIGHT body, dark bookends (10 Oct 2026). The site was black end to end, which
   suits the brand mark but not the people booking: parents, dog owners, people
   with a work truck. A warm paper background reads as clean and approachable;
   the header and footer stay dark so the chrome logo still has something to sit
   on. The variable names are historical — --void is "page background" and
   --platinum is "main text", whatever their values. */
:root{
  --void:#F7F5F0; --panel:#FFFFFF; --panel2:#F0EDE6; --line:#E2DDD2;
  --platinum:#16181C; --silver:#4F5660; --dim:#7A818B;
  --gold:#8E6C1B; --gold-hi:#C9A961; --gold-lo:#B89545;
  --chrome:linear-gradient(178deg,#16181C,#4A505A);
  --goldgrad:linear-gradient(135deg,#E7CF8F,#C9A961 55%,#A98B45);
  --goldtext:linear-gradient(135deg,#A8832A,#7D5F17);
}
/* The bookends keep the original dark palette by redefining the same variables,
   so everything inside them (nav, buttons, small print) needs no second rule.
   Dark mode (10 Oct 2026) is the same palette applied to the whole page:
   <html data-theme="dark">, set by the script in each page's head and flipped
   by the button in the header. */
.bar,.foot,:root[data-theme="dark"]{
  --void:#0A0B0D; --panel:#14161A; --panel2:#1A1D22; --line:#262A30;
  --platinum:#ECEEF1; --silver:#9CA3AD; --dim:#6E757F;
  --gold:#C9A961; --gold-hi:#E7CF8F; --gold-lo:#A98B45;
  --chrome:linear-gradient(178deg,#F6F7F9 8%,#C6CCD4 38%,#767E88 52%,#B9BFC7 62%,#E8EBEF 95%);
  --goldtext:var(--goldgrad);
  background:var(--void);color:var(--platinum);
}
*{box-sizing:border-box}
body{margin:0;background:var(--void);color:var(--platinum);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;line-height:1.6;font-size:16px}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
.wrap{max-width:980px;margin:0 auto;padding:0 24px}
.lbl{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--silver);font-weight:600}
.lbl::after{content:"";display:block;width:34px;height:1px;background:var(--goldgrad);margin-top:10px}
h1,h2{font-weight:200;letter-spacing:-.01em;margin:0}
.chrome-text{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.gold-text{background:var(--goldtext);-webkit-background-clip:text;background-clip:text;color:transparent}
.seam{height:1px;background:linear-gradient(90deg,transparent,var(--gold-lo) 20%,var(--gold-hi) 50%,var(--gold-lo) 80%,transparent)}

.top{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;gap:16px}
.mark{display:flex;align-items:center;gap:12px}
.mark img{width:44px;height:auto}
.mark b{font-size:17px;letter-spacing:.16em;font-weight:600}
.mark i{font-style:normal;font-size:11px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;margin-left:8px}
.top nav{display:flex;gap:24px;align-items:center;font-size:14px;color:var(--silver)}
.top nav a:hover{color:var(--platinum)}
.top nav a[aria-current]{color:var(--platinum)}

.btn{display:inline-block;background:var(--goldgrad);color:#141008;font-weight:600;font-size:15px;
  padding:13px 28px;border-radius:2px;letter-spacing:.02em;cursor:pointer}
.btn:hover{filter:brightness(1.07)}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.btn.ghost{background:transparent;color:var(--platinum);border:1px solid var(--dim)}
.btn.ghost:hover{border-color:var(--gold)}
.btn.small{padding:9px 18px;font-size:13.5px}
.cta{display:flex;gap:12px;flex-wrap:wrap}

.themebtn{display:inline-grid;place-items:center;width:36px;height:36px;flex:0 0 auto;padding:0;
  border:1px solid var(--line);border-radius:50%;background:none;color:inherit;cursor:pointer;font:inherit}
.themebtn:hover{border-color:var(--gold);color:var(--gold-hi)}
.themebtn:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.themebtn svg{width:17px;height:17px;display:none}
/* The icon is where the button takes you: a sun while dark, a moon while light. */
:root[data-theme="dark"] .themebtn .sun,:root[data-theme="light"] .themebtn .moon{display:block}
:root[data-theme="dark"] .bar{border-bottom:1px solid var(--line)}
:root[data-theme="dark"] .foot{border-top:1px solid var(--line)}
:root[data-theme="dark"] .card{box-shadow:0 10px 26px rgba(0,0,0,.3)}

.crumbs{font-size:12.5px;color:var(--dim);padding-top:8px}
.crumbs a{color:var(--silver)}
.crumbs a:hover{color:var(--platinum)}

.hero{padding:44px 24px 56px}
.hero h1{font-size:clamp(34px,5.6vw,58px);line-height:1.06;max-width:20ch;text-wrap:balance;margin-top:18px}
.hero h1 span{display:block}
.hero .sub{color:var(--silver);font-size:17.5px;max-width:58ch;margin:24px 0 32px;font-weight:300}

/* Qualified with .wrap on purpose: a bare `section` selector loses to .wrap's
   own padding shorthand and every section ends up with no vertical space. */
section.wrap{padding:56px 24px}
section.wrap.tight{padding-top:0}
p{color:var(--silver);font-weight:300;max-width:64ch}
p b{color:var(--platinum);font-weight:600}
h2{font-size:clamp(24px,3.2vw,32px);margin:12px 0 18px;text-wrap:balance}

.process{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);margin-top:28px}
/* Six steps sit three across, so the grid has no empty cells showing through. */
@media (min-width:761px){.process.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
.process div{background:var(--panel);padding:26px 24px}
.process h3{font-size:15.5px;font-weight:600;margin:0 0 8px}
.process p{font-size:14px;margin:0}

.callout{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--gold);padding:26px 30px;margin-top:34px}
.callout .big{font-size:26px;font-weight:200;margin:0 0 6px;color:var(--platinum);max-width:none}
.callout .big b{font-weight:600;background:var(--goldtext);-webkit-background-clip:text;background-clip:text;color:transparent}
.callout p:last-child{margin-bottom:0}

/* Footage is shot vertically, so the clip sits beside the list rather than
   above it — full-width it would be taller than the screen. */
.media{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:36px;align-items:start;margin-top:28px}
.media.solo{grid-template-columns:1fr}
.media figure{margin:0}
.media video{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--panel);border:1px solid var(--line)}
.media figcaption{font-size:12.5px;color:var(--dim);margin-top:8px;letter-spacing:.04em}
.covers{list-style:none;margin:0;padding:0}
.covers li{padding:13px 0 13px 26px;border-bottom:1px solid var(--line);position:relative;color:var(--platinum);font-weight:300}
.covers li::before{content:"";position:absolute;left:2px;top:22px;width:10px;height:1px;background:var(--gold)}

.ptable{width:100%;border-collapse:collapse;margin-top:22px;font-size:15px}
.ptable th,.ptable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:300}
.ptable thead th{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--silver);font-weight:600}
.ptable td{color:var(--platinum)}
.ptable tbody th{color:var(--silver)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:26px}
.card{display:block;background:var(--panel);border:1px solid var(--line);padding:22px 22px 20px;transition:border-color .15s,box-shadow .15s;box-shadow:0 1px 2px rgba(22,24,28,.04)}
.card:hover{border-color:var(--gold-lo);box-shadow:0 6px 18px rgba(22,24,28,.08)}
.card h3{font-size:16.5px;font-weight:600;margin:0 0 4px}
.card .price{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.card p{font-size:14px;margin:0}
.card .more{display:block;margin-top:14px;font-size:13px;color:var(--platinum)}
.card .more::after{content:" \2192";color:var(--gold)}

.hoods{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.hoods span,.hoods a{border:1px solid var(--line);padding:7px 14px;font-size:13.5px;color:var(--silver)}
.hoods a{color:var(--platinum);border-color:var(--gold-lo)}
.hoods a:hover{border-color:var(--gold-hi)}

details{border-bottom:1px solid var(--line);padding:4px 0}
summary{cursor:pointer;padding:16px 0;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font-size:20px;font-weight:200}
details[open] summary::after{content:"\2014"}
details p{margin:0 0 16px}

.foot .wrap{padding:64px 24px 44px;text-align:center}
.foot h2{font-size:clamp(26px,4vw,40px)}
.foot .cta{justify-content:center;margin:30px 0 40px}
.fine{color:var(--dim);font-size:13px;max-width:none}
.fine a:hover{color:var(--silver)}

@media (max-width:760px){
  /* The header Book button goes too on a phone: the side rail carries Book and
     Callback on every page now, and the button was wrapping against the wordmark. */
  .top nav a{display:none}
  .media{grid-template-columns:1fr}
  .media figure{max-width:320px}
  .hero{padding-top:28px}
}

/* A landscape clip stacks above the list instead of sitting beside it. */
.media.wide{grid-template-columns:1fr}
.media.wide figure{max-width:640px}
.media.wide video{aspect-ratio:16/9}

/* Package pages: each area in the list is a link to its own page, with what
   that package does to it underneath. */
.covers.linked li{padding-top:16px;padding-bottom:16px}
.covers.linked a{display:block;font-weight:600;color:var(--platinum)}
.covers.linked a::after{content:" \2192";color:var(--gold)}
.covers.linked a:hover{color:var(--gold-hi)}
.covers.linked span{display:block;color:var(--silver);font-size:14.5px;margin-top:4px;max-width:70ch}
.covers.linked li::before{top:26px}

/* Area pages: one card per package, stacked beside the clip. */
.tiers{display:grid;gap:14px}
.media.solo .tiers{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* ---------- imagery ---------- */
.hero.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
/* The whole frame, never a crop (10 Oct 2026). These used to be forced to 4:5
   with object-fit:cover, which cut a third off every portrait clip and more
   than half off a landscape one, so the picture was a close-up of nothing in
   particular. Now the image keeps its own shape and is capped by height, which
   makes a portrait clip narrower but shows all of it. */
.hero-media{margin:0;display:grid;justify-items:center}
.hero-media img,.hero-media video{width:auto;height:auto;max-width:100%;max-height:min(72vh,600px);border:1px solid var(--line);background:var(--panel)}
.hero-media figcaption{text-align:center}
.hero-media figcaption{font-size:12.5px;color:var(--dim);margin-top:8px;letter-spacing:.04em}

.card .thumb{display:block;width:calc(100% + 44px);max-width:none;margin:-22px -22px 18px;aspect-ratio:4/5;object-fit:cover;
  border-bottom:1px solid var(--line);filter:saturate(.9)}
.card:hover .thumb{filter:none}

.ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:26px}
.ba figure{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.ba figure>div{position:relative}
.ba img{width:100%;aspect-ratio:3/4;object-fit:cover}
.ba span{position:absolute;left:8px;top:8px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  padding:4px 8px;background:rgba(10,11,13,.78);color:#C6CCD4}
.ba span.aft{color:#141008;background:var(--gold)}
.ba figcaption{grid-column:1/-1;font-size:12.5px;color:var(--dim);letter-spacing:.04em;margin-top:6px}

@media (max-width:760px){
  .hero.split{grid-template-columns:1fr;gap:28px}
  .hero-media{max-width:420px}
}

/* Single job photos on the vehicle pages: one picture, tagged with the state it
   shows (As it arrived / During / After). Same chips as the before/after pairs. */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;margin-top:26px}
.shots figure{margin:0;position:relative}
.shots img{width:100%;aspect-ratio:3/4;object-fit:cover}
.shots span{position:absolute;left:8px;top:8px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  padding:4px 8px;background:rgba(10,11,13,.78);color:#C6CCD4}
.shots span.aft{color:#141008;background:var(--gold-hi)}
.shots figcaption{font-size:12.5px;color:var(--dim);letter-spacing:.04em;margin-top:6px}
.ptable a{border-bottom:1px solid var(--gold-lo)}
.covers a{color:var(--gold);border-bottom:1px solid var(--gold-lo);white-space:nowrap}

/* A lone pair should not stretch to the full column. */
.ba figure{max-width:520px}

/* "Our services" buttons land here, with the heading clear of the top edge. */
#packages{scroll-margin-top:24px}

/* /prices: the package table has six columns; on a phone it scrolls sideways
   inside its own box so the page itself never does. */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tscroll .ptable{min-width:560px}

/* /reviews: every written review as a card, two or three across. */
.rvgrid{list-style:none;margin:26px 0 0;padding:0;columns:3 280px;column-gap:16px}
.rvgrid li{break-inside:avoid;margin:0 0 16px;background:var(--panel);border:1px solid var(--line);padding:18px 20px 16px;box-shadow:0 1px 2px rgba(22,24,28,.04)}
.rvgrid p{margin:8px 0 12px;font-size:14.5px;line-height:1.6;color:var(--platinum);max-width:none}
.rvgrid footer{font-size:13px;color:var(--dim)}
.rvgrid footer b{color:var(--platinum);font-weight:600}
.rvg-stars{color:#C9982B;letter-spacing:.08em;font-size:14px}