/* ==========================================================================
   Kregel Towing & Recovery — Newcastle, WY
   Palette : night asphalt + amber beacon + hi-vis hazard yellow
   Type    : Archivo (expanded / fleet lettering) · IBM Plex Sans · IBM Plex Mono
   ========================================================================== */

:root{
  --bg:#EDEFF1; --bg-2:#F7F8F9; --surface:#FFFFFF; --surface-2:#E3E7EA;
  --ink:#0E1216; --ink-2:#48535D; --ink-3:#7A858F;
  --line:#D3D9DE; --line-2:#BFC7CE;
  --amber:#D9670A; --amber-2:#F0820A;
  --hivis:#E8BC00; --good:#1B8A57;
  --shadow:0 1px 2px rgba(14,18,22,.06), 0 10px 30px -12px rgba(14,18,22,.22);
  --shadow-lg:0 2px 4px rgba(14,18,22,.07), 0 28px 60px -24px rgba(14,18,22,.34);
  --hero-ink:#F2F5F7; --hero-ink-2:#A6B3BE;
  --g-star:#FBBC04;

  --sans:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display:"Archivo", var(--sans);
  --wrap:1220px; --r:4px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0D10; --bg-2:#0F1419; --surface:#141A20; --surface-2:#1C242B;
    --ink:#E9EEF2; --ink-2:#98A5B0; --ink-3:#6A7783;
    --line:#232C34; --line-2:#33404A;
    --amber:#FF8A0C; --amber-2:#FFA33D;
    --hivis:#FFD400; --good:#35C08A;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -12px rgba(0,0,0,.7);
    --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 28px 60px -24px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --bg:#0A0D10; --bg-2:#0F1419; --surface:#141A20; --surface-2:#1C242B;
  --ink:#E9EEF2; --ink-2:#98A5B0; --ink-3:#6A7783;
  --line:#232C34; --line-2:#33404A;
  --amber:#FF8A0C; --amber-2:#FFA33D;
  --hivis:#FFD400; --good:#35C08A;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -12px rgba(0,0,0,.7);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 28px 60px -24px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
p{margin:0}
:focus-visible{outline:3px solid var(--amber-2); outline-offset:3px; border-radius:2px}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--amber); color:#fff; padding:12px 18px; font-weight:600;
}
.skip:focus{left:12px; top:12px}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
.mt-30{margin-top:30px}

h1,h2,h3{
  font-family:var(--display); text-wrap:balance; margin:0;
  font-variation-settings:"wdth" 112; letter-spacing:-.01em; line-height:1.02;
}
h2{font-weight:800; font-size:clamp(28px,4.2vw,46px); margin-top:14px}
h3{font-weight:700; font-size:19px; font-variation-settings:"wdth" 100; line-height:1.2}

.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--amber);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--amber); flex:none}

/* reflective chevron tape, straight off a wrecker bed */
.tape{height:10px; opacity:.9;
  background:repeating-linear-gradient(115deg, var(--hivis) 0 16px, #0A0D10 16px 32px)}

/* ---------- sticky call bar ---------- */
.callbar{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line);
}
.callbar-in{display:flex; align-items:center; gap:22px; height:66px}
.mark{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto}
.beacon{
  width:12px; height:12px; border-radius:50%; background:var(--amber-2); flex:none;
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--amber-2) 55%, transparent)}
  70%{box-shadow:0 0 0 12px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.mark-name{font-family:var(--display); font-weight:900; font-size:19px;
  font-variation-settings:"wdth" 120; line-height:1; display:block}
.mark-sub{font-family:var(--mono); font-size:9.5px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--ink-3); line-height:1; margin-top:4px; display:block}

.nav{display:flex; gap:24px}
.nav a{font-size:14px; text-decoration:none; color:var(--ink-2); font-weight:500}
.nav a:hover{color:var(--amber)}

.status{display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:12px; color:var(--ink-2)}
.dot-live{width:7px; height:7px; border-radius:50%; background:var(--good); flex:none}
@media (max-width:1080px){.nav{display:none}}
@media (max-width:900px){.status{display:none}}

.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--display); font-weight:800; font-size:15px;
  font-variation-settings:"wdth" 108; padding:12px 20px;
  border-radius:var(--r); border:1px solid transparent; white-space:nowrap;
  transition:transform .12s ease, background .18s ease, border-color .18s ease;
}
.btn-call{background:var(--amber); color:#fff;
  box-shadow:0 6px 18px -8px color-mix(in srgb, var(--amber) 80%, transparent)}
.btn-call:hover{transform:translateY(-1px); background:var(--amber-2)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink-3); background:var(--surface)}
.btn-lg{font-size:18px; padding:16px 28px}
.btn-xl{font-size:22px; padding:19px 38px; margin-top:34px}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:#080B0E; color:var(--hero-ink); isolation:isolate}
.hero canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.85}
.hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 115%, transparent 40%, rgba(0,0,0,.85) 100%)}
.hero-in{position:relative; z-index:2; padding:96px 0 88px}
@media (max-width:760px){.hero-in{padding:64px 0 56px}}

.hero h1{font-weight:900; font-variation-settings:"wdth" 118;
  font-size:clamp(42px,8.2vw,104px); letter-spacing:-.022em; margin:22px 0 0; color:#fff}
.hero h1 .amb{color:var(--amber-2)}
.hero-lede{margin-top:22px; max-width:53ch; font-size:clamp(16px,1.9vw,19px);
  color:var(--hero-ink-2); line-height:1.62}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; align-items:center}
.hero .btn-ghost{color:#fff; border-color:rgba(255,255,255,.28)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5)}
.hero .eyebrow{color:var(--hivis)}
.hero .eyebrow::before{background:var(--hivis)}

.hero-specs{display:flex; flex-wrap:wrap; margin-top:56px; border-top:1px solid rgba(255,255,255,.14)}
.spec{flex:1 1 190px; padding:20px 22px 4px; border-right:1px solid rgba(255,255,255,.14)}
.spec:last-child{border-right:0}
.spec-k{font-family:var(--display); font-weight:800; font-size:26px;
  font-variation-settings:"wdth" 112; color:#fff; line-height:1; font-variant-numeric:tabular-nums}
.spec-v{font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--hero-ink-2); margin-top:9px}
@media (max-width:620px){.spec{flex:1 1 50%; border-right:0}}

/* ---------- Google rating band ---------- */
.gband{background:var(--surface); border-bottom:1px solid var(--line)}
.gband-in{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:36px; padding:26px 0}
@media (max-width:900px){.gband-in{grid-template-columns:1fr; gap:22px; justify-items:center; text-align:center}}
.grating{display:flex; align-items:center; gap:16px}
.gscore{font-family:var(--display); font-weight:900; font-size:52px; line-height:.9;
  font-variation-settings:"wdth" 105; font-variant-numeric:tabular-nums}
.gstars{display:flex; gap:2px}
.gmeta{font-size:13.5px; color:var(--ink-2); margin-top:7px}
.gmeta b{color:var(--ink); font-weight:600}
.gbars{display:grid; gap:5px; min-width:210px; max-width:340px; width:100%}
.gbar{display:grid; grid-template-columns:12px 1fr 34px; gap:9px; align-items:center;
  font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.gbar-t{height:7px; border-radius:99px; background:var(--surface-2); overflow:hidden}
.gbar-f{display:block; height:100%; background:var(--g-star); border-radius:99px; width:0;
  transition:width 1.1s cubic-bezier(.2,.7,.2,1)}

/* ---------- constantly-moving review rails ---------- */
.reviews{padding:72px 0 80px; background:var(--bg-2);
  border-bottom:1px solid var(--line); overflow:hidden}
.reviews-head{margin-bottom:34px}
.reviews-head p{color:var(--ink-2); max-width:48ch; margin-top:12px}
.rail{position:relative; margin-top:16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rail-track{display:flex; gap:16px; width:max-content; will-change:transform}
.rail-a .rail-track{animation:slide-l 64s linear infinite}
.rail-b .rail-track{animation:slide-r 78s linear infinite}
@keyframes slide-l{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
@keyframes slide-r{from{transform:translate3d(-50%,0,0)} to{transform:translate3d(0,0,0)}}
.rail:hover .rail-track{animation-play-state:paused}

.rcard{flex:none; width:352px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:22px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:14px}
.rcard-top{display:flex; align-items:center; gap:12px}
.avatar{width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center;
  color:#fff; font-weight:600; font-family:var(--display); font-variation-settings:"wdth" 100}
.rname{font-weight:600; font-size:14.5px; line-height:1.25}
.rdate{font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:3px}
.rbody{font-size:14.5px; line-height:1.62; color:var(--ink-2)}
.rslot{border:1px dashed var(--line-2); border-radius:var(--r); padding:14px 15px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--ink-3);
  background:repeating-linear-gradient(135deg, transparent 0 9px,
    color-mix(in srgb,var(--line) 45%,transparent) 9px 10px)}
.rslot b{display:block; color:var(--ink-2); letter-spacing:.14em;
  text-transform:uppercase; font-size:10px; margin-bottom:5px}
.rfoot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:4px}
.rposted{font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3)}

/* ---------- services ---------- */
.services{padding:84px 0}
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; margin-top:40px}
.svc{background:var(--surface); padding:28px 26px 30px; transition:background .2s ease}
.svc:hover{background:var(--surface-2)}
.svc-n{font-family:var(--mono); font-size:11px; color:var(--amber); letter-spacing:.14em}
.svc h3{margin:14px 0 9px}
.svc p{font-size:14.5px; color:var(--ink-2); line-height:1.6}

/* ---------- fleet photos ---------- */
.photos{padding:0 0 84px}
.photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px}
.pslot{position:relative; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; margin:0;
  border:1px solid var(--line); background:var(--surface-2); display:grid; place-items:center; text-align:center}
.pslot img{width:100%; height:100%; object-fit:cover}
.pslot::before{content:""; position:absolute; inset:0; opacity:.5;
  background:repeating-linear-gradient(115deg,
    color-mix(in srgb,var(--hivis) 22%, transparent) 0 14px, transparent 14px 28px)}
.pslot:has(img)::before{display:none}
.pslot-in{position:relative; font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2); padding:14px}
.pslot-in span{display:block; color:var(--ink-3); letter-spacing:.04em;
  text-transform:none; margin-top:7px; font-size:11.5px}
.pslot.wide{grid-column:span 2}
@media (max-width:640px){.pslot.wide{grid-column:span 1}}

/* ---------- credentials ---------- */
.creds{background:var(--surface); border-block:1px solid var(--line); padding:76px 0}
.cred-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:34px; margin-top:40px}
.cred-k{font-family:var(--display); font-weight:800; font-size:34px;
  font-variation-settings:"wdth" 108; font-variant-numeric:tabular-nums; line-height:1}
.cred-l{font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--amber); margin-top:11px}
.cred-d{font-size:14px; color:var(--ink-2); margin-top:9px; line-height:1.55}

/* ---------- location ---------- */
.loc{padding:84px 0}
.loc-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:44px; align-items:center; margin-top:40px}
@media (max-width:900px){.loc-grid{grid-template-columns:1fr; gap:32px}}
.addr-list{margin-top:28px; border-top:1px solid var(--line)}
.addr-row{display:grid; grid-template-columns:96px 1fr; gap:18px; padding:17px 0;
  border-bottom:1px solid var(--line); align-items:baseline}
.addr-k{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3)}
.addr-v{font-size:16px; line-height:1.5}
.addr-v a{color:var(--amber); text-decoration:none; font-weight:600}
.addr-v a:hover{text-decoration:underline}
.mapbox{position:relative; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow-lg); background:var(--surface-2); aspect-ratio:16/11}
.mapbox svg{display:block; width:100%; height:100%}
.map-chip{position:absolute; left:14px; bottom:14px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:9px 13px;
  font-family:var(--mono); font-size:11px; color:var(--ink-2);
  box-shadow:var(--shadow); display:flex; align-items:center; gap:8px}

/* ---------- final CTA ---------- */
.final{position:relative; background:#080B0E; color:#fff; overflow:hidden;
  text-align:center; padding:92px 0 96px}
.final::before{content:""; position:absolute; inset:0;
  background:radial-gradient(70% 120% at 50% 0%,
    color-mix(in srgb,var(--amber) 26%, transparent), transparent 65%)}
.final-in{position:relative}
.final h2{color:#fff; font-size:clamp(32px,5.6vw,62px); font-weight:900; font-variation-settings:"wdth" 118}
.final p{color:#A6B3BE; margin:20px auto 0; max-width:46ch; font-size:17px}
.final-note{font-family:var(--mono); font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:#6A7783; margin-top:26px}

footer{background:var(--bg-2); padding:38px 0; border-top:1px solid var(--line)}
.foot{display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .rail-track{animation:none !important}
  .rail{overflow-x:auto; mask-image:none; -webkit-mask-image:none}
}

/* ==========================================================================
   MOBILE
   The visitor is standing on a shoulder in the dark holding a cracked phone
   on one bar of signal. Priorities: the number is always reachable by thumb,
   nothing animates that isn't on screen, and nothing scrolls sideways.
   ========================================================================== */

html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:clip; }

/* ---- fixed thumb-zone call bar ---- */
.thumbbar{ display:none; }

@media (max-width:720px){
  .thumbbar{
    display:block; position:fixed; z-index:70;
    left:0; right:0; bottom:0;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter:saturate(1.5) blur(14px);
    border-top:1px solid var(--line);
  }
  .thumbbar .btn{
    width:100%; justify-content:center;
    font-size:18px; padding:16px 20px; min-height:56px;   /* full thumb target */
  }
  /* the top bar keeps the brand + status; the thumb bar owns the call */
  .topcall{ display:none; }
  /* keep the footer clear of the fixed bar */
  body{ padding-bottom:88px; }
}

@media (max-width:720px){
  .callbar-in{ height:58px; gap:14px; }
  .status{ display:flex; font-size:11px; }              /* re-show: "open now" reassures */
  .mark-name{ font-size:17px; }

  .hero-in{ padding:52px 0 46px; }
  .hero h1{ font-size:clamp(38px,11.5vw,60px); letter-spacing:-.018em; }
  .hero-lede{ font-size:16px; margin-top:18px; }
  .hero-cta{ gap:10px; margin-top:26px; }
  .hero-cta .btn{ flex:1 1 100%; justify-content:center; min-height:54px; }
  .hero-specs{ margin-top:38px; }

  /* 2x2 spec grid with real dividers instead of a loose wrap */
  .hero-specs{ display:grid; grid-template-columns:1fr 1fr; }
  .spec{ padding:16px 14px 14px; border-right:1px solid rgba(255,255,255,.14);
         border-bottom:1px solid rgba(255,255,255,.14); }
  .spec:nth-child(2n){ border-right:0; }
  .spec:nth-child(n+3){ border-bottom:0; }
  .spec-k{ font-size:22px; }
  .spec-v{ font-size:10px; margin-top:7px; }

  .gband-in{ padding:22px 0; }
  .gscore{ font-size:44px; }

  .reviews{ padding:56px 0 62px; }
  .services,.loc{ padding:60px 0; }
  .creds{ padding:56px 0; }
  .photos{ padding-bottom:60px; }
  .final{ padding:68px 0 72px; }
  .btn-xl{ font-size:19px; padding:17px 30px; width:100%; justify-content:center; }

  /* review cards: never wider than the screen, mask pulled in so cards stay legible */
  .rcard{ width:min(300px, 82vw); padding:18px; }
  .rail{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
         mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
  .rail-a .rail-track{ animation-duration:48s; }
  .rail-b .rail-track{ animation-duration:58s; }

  .svc{ padding:22px 20px 24px; }
  .cred-grid{ gap:26px; }
  .cred-k{ font-size:29px; }

  .addr-row{ grid-template-columns:1fr; gap:5px; padding:15px 0; }
  .mapbox{ aspect-ratio:4/3; }

  .foot{ flex-direction:column; align-items:flex-start; gap:14px; }
}

.foot-nav{ display:none; }
@media (max-width:1080px){
  .foot-nav{ display:flex; gap:20px; }
  .foot-nav a{ color:var(--ink-2); text-decoration:none; font-size:12px; }
  .foot-nav a:hover{ color:var(--amber); }
}

@media (max-width:400px){
  .wrap{ padding-inline:18px; }
  .hero h1{ font-size:36px; }
  .gband-in{ gap:18px; }
  .gscore{ font-size:38px; }
}

/* Coarse pointers can't hover to pause a rail, and every tap target
   needs to clear the 44px minimum. */
@media (hover:none){
  .btn{ min-height:48px; }
  .nav a,.foot-nav a{ padding-block:6px; }
  .svc:hover{ background:var(--surface); }
}

/* Rails and the beacon canvas are paused by JS when off screen; this is the
   class it toggles. */
.rail-track.is-paused{ animation-play-state:paused; }

/* ---- services: keep the 6 cards on a grid that divides evenly ---- */
@media (max-width:980px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .svc-grid{ grid-template-columns:1fr; } }

/* Cards in a row should match height and read as one block. */
.svc{ display:flex; flex-direction:column; }
.svc p{ margin-top:auto; padding-top:4px; }

/* ---- photo placeholders: quieter until the real GBP photos land ---- */
.pslot{ background:var(--bg-2); }
.pslot::before{ opacity:.16; }
.pslot-in{ font-size:10.5px; letter-spacing:.14em; color:var(--ink-3); }
.pslot-in span{ font-size:11px; opacity:.75; }

/* A span-2 tile at 4:3 towered over its neighbours; uniform tiles on a grid
   that divides by 6 keeps the row heights matched. */
.pslot.wide{ grid-column:auto; }
@media (max-width:980px){ .photo-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .photo-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   FLEET — four real photos, four different aspect ratios (4:3, 16:9, 1:1, 3:4).
   Masonry columns instead of a grid: every photo keeps its own shape and
   nothing gets cropped.
   ========================================================================== */
.photo-grid{
  display:block; columns:2; column-gap:14px; margin-top:36px;
}
.pslot{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  display:block; margin:0 0 14px; aspect-ratio:auto;
  place-items:stretch; text-align:left;
}
.pslot img{ width:100%; height:auto; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.pslot:hover img{ transform:scale(1.03); }
.pslot.span2, .pslot.tall{ grid-column:auto; grid-row:auto; }

.pcap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:30px 16px 13px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:#fff;
  background:linear-gradient(transparent, rgba(0,0,0,.78));
  opacity:0; transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
}
.pslot:hover .pcap, .pslot:focus-within .pcap{ opacity:1; transform:none; }

@media (max-width:640px){ .photo-grid{ columns:1; } }
@media (hover:none){ .pcap{ opacity:1; transform:none; } }

.sec-lede{ color:var(--ink-2); max-width:52ch; margin-top:14px; }

/* ---- "the best towing in Newcastle" — sits on its own row, directly above
        the 5.0 / 46 reviews that back it up ---- */
.gband-in{ grid-template-areas:"claim claim claim" "rating bars link"; }
.claim{ grid-area:claim; }
.grating{ grid-area:rating; }
.gbars{ grid-area:bars; }
.gband-in > .btn{ grid-area:link; }

.claim{
  display:flex; align-items:center; gap:13px; flex-wrap:wrap;
  font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 112;
  font-size:clamp(21px,2.7vw,30px); line-height:1.1; color:var(--ink);
  padding-bottom:20px; margin-bottom:2px; border-bottom:1px solid var(--line);
}
.claim-stars{ display:flex; gap:2px; }

@media (max-width:900px){
  .gband-in{ grid-template-areas:"claim" "rating" "bars" "link"; }
  .claim{ justify-content:center; text-align:center; }
}

/* ==========================================================================
   MOBILE PASS 2 — after the photos and the claim went in
   ========================================================================== */

/* Anchor links landed underneath the sticky header. */
#services, #reviews, #location, #top{ scroll-margin-top:78px; }

/* Photos: the width/height attributes on each <img> let the browser reserve
   the right box before the file decodes, so nothing jumps. attr() is not
   usable for aspect-ratio in author CSS — the attributes do this themselves. */
.pslot img{ background:var(--surface-2); }
.photo-grid img{ height:auto; }

/* Skip layout and paint for long sections still below the fold. The
   intrinsic sizes keep the scrollbar honest. */
@media (max-width:720px){
  .services, .photos, .creds, .loc{
    content-visibility:auto;
    contain-intrinsic-size:auto 900px;
  }
}

/* iOS: kill the grey flash on tap, keep our own focus ring. */
a, button{ -webkit-tap-highlight-color:transparent; }

@media (max-width:720px){
  /* The claim is the first thing under the hero — give it room to breathe
     and keep the stars on the same line as the words. */
  .claim{ font-size:19px; gap:9px; padding-bottom:16px; line-height:1.2; }
  .claim-stars svg{ width:15px; height:15px; }

  /* One column of photos, each at its natural height, captions always shown. */
  .photo-grid{ columns:1; column-gap:0; }
  .pslot{ margin-bottom:12px; }

  /* Long-press on a photo shouldn't trigger the hover zoom transition. */
  .pslot:hover img{ transform:none; }

  .sec-lede{ font-size:15px; }
}

/* Two photos side by side is the sweet spot on a tablet. */
@media (min-width:641px) and (max-width:980px){
  .photo-grid{ columns:2; }
}

/* Two fixed, blurred bars is a lot of per-frame compositing for a mid-range
   phone to do while the page scrolls. Solid backgrounds below 720px. */
@media (max-width:720px){
  .callbar{ background:var(--bg); backdrop-filter:none; }
  .thumbbar{ background:var(--bg); backdrop-filter:none; }
}