/* ============================================================================
   Cooper Cleaning & Restoration, ccr.llc
   Rebuilt from the design handoff in _reference/ (see README).

   Colour is sampled from the CCR logo PNG, so the values are exact.
   The one deliberate departure from the handoff is the red token split
   below: the brand red fails WCAG AA as small text. See README > Accessibility.
   ========================================================================= */

:root{
  /* ── colour ───────────────────────────────────────────────────────────── */
  /* One red, used everywhere. #D40000 clears WCAG AA as small text on all three
     light grounds: 5.5:1 on white, 5.1:1 on the band, 4.7:1 on the panel.
     The logo's own #FE0000 only manages 4.0:1 on white and cannot be used for
     anything a person has to read.
     No red passes on both the light bands and the black panel: it would need a
     luminance at or below 0.164 and at or above 0.175 at the same time. So the
     one dark panel on the page uses white label text and keeps the red purely
     as the rule beside it, which only has to clear 3:1 as a graphic. */
  --red:#D40000;
  --red-hover:#A80000;  /* hover on filled red, 7.9:1 */

  --bg:#FFFFFF;
  --band:#F5F5F5;       /* alternating sections, inputs, chips */
  --panel:#EDEDED;      /* housekeeping + reviews panels */
  --panel-alt:#E9E9E9;  /* services feature panel */
  --well:#E4E4E4;       /* image wells behind a loading photo */
  --ink:#000000;

  --text:#000000;
  --dim:rgba(0,0,0,.64);      /* body copy */
  --dim-2:rgba(0,0,0,.58);    /* labels, captions, notes: 4.6:1 minimum */
  --dim-nav:rgba(0,0,0,.72);

  --line:rgba(0,0,0,.08);
  --line-2:rgba(0,0,0,.12);

  --on-dark:rgba(255,255,255,.6);
  --on-dark-2:rgba(255,255,255,.5);
  --on-dark-line:rgba(255,255,255,.14);

  /* ── layout ───────────────────────────────────────────────────────────── */
  --wrap:1280px;
  --gut:28px;
  /* One token sets the gap between every section on every page. 88px was
     leaving the pages feeling loose and pushing each section a full screen
     apart; the clamp also pulls it in on phones, where 88px was most of a
     viewport of nothing. */
  --sec:clamp(44px,5vw,60px);

  --r-panel:26px;
  --r-lg:22px;
  --r-card:20px;
  --r:18px;
  --r-sm:16px;
  --r-tile:12px;
  --r-pill:999px;

  /* ── type ─────────────────────────────────────────────────────────────── */
  --sans:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;

  /* ── motion ───────────────────────────────────────────────────────────── */
  --t:140ms ease;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ── reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%;display:block}
picture{display:contents}
picture>source{display:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:600;line-height:1.03;letter-spacing:-.03em}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  overflow-x:hidden;
}
::selection{background:var(--red);color:#fff}

/* the sticky header must not sit on top of an anchored heading */
section[id]{scroll-margin-top:96px}

/* The container is 1280px of CONTENT with the gutter outside it, which is how
   the handoff prototype renders (it had no border-box reset, so its max-width
   applied to the content box). Total container width is therefore 1336px.
   We keep border-box globally and add the gutters back here instead. */
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--red);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r-tile) 0;
  font-size:13px;font-weight:600;
}
.skip:focus{left:0}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── shared type ────────────────────────────────────────────────────────── */
.h2{font-size:clamp(28px,3.4vw,44px);line-height:1.06;letter-spacing:-.03em;font-weight:600}
.h2--sm{font-size:clamp(26px,3.2vw,40px)}
.h3{font-size:clamp(24px,2.6vw,34px);line-height:1.08;letter-spacing:-.03em;font-weight:600}

.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);
  margin-bottom:22px;
}
.eyebrow--center{
  display:block;text-align:center;letter-spacing:.2em;color:var(--red);
}
.eyebrow__rule{width:26px;height:1px;background:var(--red);flex:none}

.label{
  font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim-2);margin-bottom:12px;
}

/* ── media wells ────────────────────────────────────────────────────────── */
.media{position:relative;overflow:hidden;background:var(--well)}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media--process{border-radius:var(--r-lg);aspect-ratio:4/3.4}
/* content-box + 24px padding is carried over from the prototype: the aspect box
   there sized off the content, making this well ~12px taller than a true 4:3.
   Kept so the page matches the approved design pixel for pixel. Drop the
   padding and the box-sizing together if you ever want a clean 4:3. */
.media--big{
  box-sizing:content-box;padding:24px;
  border-radius:var(--r-card);aspect-ratio:4/3;background:var(--panel-alt);
}
.media--row{border-radius:var(--r);aspect-ratio:1/1}

/* ── buttons & tags ─────────────────────────────────────────────────────── */
.btn{
  display:inline-block;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;white-space:nowrap;
  padding:11px 22px;transition:background var(--t),color var(--t);
}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-hover);color:#fff}
.btn--lg{padding:14px 24px}
.btn--white{background:rgba(255,255,255,.95);color:var(--ink);padding:14px 22px}
.btn--white:hover{background:#FFFFFF;color:var(--ink)}
.btn--black{background:var(--ink);color:#fff;padding:13px 22px}
.btn--black:hover{background:var(--red);color:#fff}
.btn--ghost{background:var(--band);color:var(--ink)}
.btn--ghost:hover{background:#EBEBEB;color:var(--ink)}
.btn--flex{flex:1;text-align:center;padding:12px;font-size:12px}

.tag{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:var(--r-pill);font-size:11px;font-weight:500;
  padding:7px 12px;
}
.tag--red{background:var(--red);color:#fff;font-size:12px;font-weight:600;padding:10px 16px;margin-top:22px}
.tag--outline{border:1px solid var(--line-2);padding:6px 11px}
.tag--grey{background:var(--band)}


/* ── header ─────────────────────────────────────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.hdr__row{display:flex;align-items:center;gap:32px;padding-block:16px}
.hdr__brand{display:flex;align-items:center;gap:12px;flex:none;color:var(--ink)}
.hdr__brand img{height:40px;width:auto}
.hdr__brand span{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.15;max-width:130px}
.hdr__nav{display:flex;gap:22px;font-size:14px;font-weight:500;white-space:nowrap;min-width:0;overflow:hidden}
.hdr__nav a{color:var(--dim-nav);transition:color var(--t)}
.hdr__nav a:hover{color:var(--red)}
.hdr__cta{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
/* The CTA carries the full number on desktop and "Call now" on mobile. At 375px
   the full label is 171px wide, which with the 197px brand overflows the 343px
   row and drops the button onto a stranded row of its own: the exact failure
   the handoff warned about ("it read as broken when it sat mid-row"). The short
   label keeps it pinned right on the brand's row, as specified. The full number
   stays in the aria-label, and appears in the hero, contact panel and footer. */
.hdr__call-short{display:none}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{padding-block:34px 0}
.hero .eyebrow--center{margin-bottom:22px}
.hero__h1{
  text-align:center;font-size:clamp(38px,5.6vw,74px);line-height:1.02;
  letter-spacing:-.035em;font-weight:600;margin:0 auto 28px;max-width:18ch;
}
/* The photo owns the aspect ratio, not the panel. That lets the caption band
   overlay the image on desktop but drop below it on mobile, where a four-across
   group shot cannot survive a portrait crop. */
.hero__panel{position:relative}
.hero__media{
  position:relative;border-radius:var(--r-panel);overflow:hidden;
  background:var(--panel);aspect-ratio:16/9;
}
/* 42% rather than 50% keeps the sign above their heads in frame and crops the
   feet instead, which is the half of the picture nobody needs. */
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
/* Scrim sits only behind the text band at the bottom, so the crew and the
   building read at full brightness. The photo is darkest in its lower half, so
   the image itself is lifted slightly as well. */
.hero__media img{filter:brightness(1.2)}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.62) 30%,rgba(0,0,0,0) 42%)}
.hero__band{
  position:absolute;inset:auto 0 0 0;padding:34px;
  display:flex;align-items:end;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.hero__band p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.9);margin:0;max-width:36ch}
.hero__actions{display:flex;gap:10px;flex-wrap:wrap}

/* ── process ────────────────────────────────────────────────────────────── */
.process{background:var(--band);margin-top:96px}
.process__inner{padding-block:var(--sec)}
/* Five-step timeline: numbered steps joined by a red line, each with a round
   photo. The line runs through the centre of the circles, so its top offset is
   the title row plus half the circle. */
.tl__head{text-align:center;max-width:62ch;margin:0 auto 48px}
.tl__head .eyebrow{justify-content:center}
.tl__h2{margin:10px 0 12px}
.tl__lede{font-size:16px;line-height:1.6;color:var(--dim);margin:0}
.tl__steps{
  --circle:clamp(110px,11vw,160px);
  list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;
}
.tl__steps::before{content:"";position:absolute;left:10%;right:10%;top:calc(58px + 8px + var(--circle) / 2);height:3px;background:var(--red)}
.tl__step{position:relative;text-align:center}
.tl__top{position:relative;height:58px;display:flex;align-items:flex-end;justify-content:center}
.tl__num{position:absolute;left:50%;top:-6px;transform:translateX(-78%);font-size:64px;font-weight:700;letter-spacing:-.04em;line-height:1;color:rgba(0,0,0,.07)}
.tl__title{position:relative;font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:normal;margin:0 0 8px}
.tl__photo{
  position:relative;width:var(--circle);aspect-ratio:1;margin:8px auto 18px;
  border-radius:50%;border:4px solid var(--red);overflow:hidden;background:#fff;
  box-shadow:0 0 0 6px var(--band);
}
.tl__photo img{width:100%;height:100%;object-fit:cover}
/* Step one is the phone call, so its circle is the logo and the number, and
   the whole circle dials it. */
.tl__photo--logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;text-decoration:none}
.tl__photo--logo img{width:72%;height:auto;object-fit:contain}
.tl__phone{font-size:clamp(11px,1vw,14px);font-weight:700;letter-spacing:-.01em;color:var(--red);white-space:nowrap}
.tl__photo--logo:hover .tl__phone{color:var(--red-hover)}
.tl__tel{display:none}
.tl__body{font-size:14px;line-height:1.55;color:var(--dim);margin:0 auto;max-width:22ch}
/* 4:3 is the shape of four of the seven reel photos, so those fill the frame
   exactly; the three portrait ones crop to their middle. Kept narrower than the
   timeline so the crop stays modest and nothing looks zoomed. */
.tl__reel{max-width:720px;margin:44px auto 0}
.tl__reel .reel__stage{aspect-ratio:4/3}
/* On a phone the section button moves into the pack-out photo, top left. */
.media__quote{display:none}

/* ,, reel (pack-out photos, process section) ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, */
.reel{position:relative}
.reel__stage{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--well);aspect-ratio:4/3.4;
}
.reel__slide{
  position:absolute;inset:0;margin:0;
  opacity:0;transition:opacity 380ms var(--ease);
}
.reel__slide.is-on{opacity:1}
.reel__slide img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}

/* same pill vocabulary as the chip rail on the pack-out card */
.reel__rail{
  position:absolute;left:50%;transform:translateX(-50%);bottom:14px;
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.94);border-radius:var(--r-pill);
  padding:7px 12px 7px 8px;max-width:calc(100% - 24px);
}
.reel__pause{
  flex:none;width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;transition:background var(--t);
  /* 44px hit box, but background-clip keeps the ink inside the 22px circle:
     without it the padding paints too and you get a 44px black blob */
  padding:11px;margin:-11px;box-sizing:content-box;background-clip:content-box;
}
.reel__pause:hover{background:var(--red);background-clip:content-box}
.reel__iplay{display:none}
.reel.is-paused .reel__ipause{display:none}
.reel.is-paused .reel__iplay{display:block}

.reel__dots{display:flex;align-items:center;gap:7px;margin-left:12px}
.reel__dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:rgba(0,0,0,.22);transition:background var(--t);
  /* the dot stays 7px; the tappable area around it does not */
  padding:12px;margin:-12px;box-sizing:content-box;background-clip:content-box;
}
.reel__dot:hover{background:rgba(0,0,0,.45);background-clip:content-box}
.reel__dot.is-on{background:var(--red);background-clip:content-box}

@media (max-width:760px){
  .reel__rail{bottom:10px;gap:8px;padding:6px 10px 6px 7px}
  .reel__dots{margin-left:10px;gap:6px}
}

.loss{padding-block:var(--sec) 0}
.loss__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:44px;align-items:center;
}
.media--loss{border-radius:var(--r-lg);aspect-ratio:4/3}
.loss__h2{margin:0 0 18px;max-width:20ch}
.loss__body{font-size:15px;line-height:1.7;color:var(--dim);margin:0 0 20px;max-width:54ch}

.comm{padding-block:var(--sec) 0}
.comm__panel{
  position:relative;overflow:hidden;border-radius:var(--r-panel);
  background:var(--ink);color:#FFFFFF;padding:48px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:40px;align-items:center;
}
/* Label goes white here. Red text on black is 3.8:1 and fails AA, and there is
   no red that passes on both black and the light bands. The rule stays red:
   as a graphic it only needs 3:1. */
.comm .eyebrow{color:#FFFFFF}
.comm .eyebrow__rule{background:var(--red)}
.comm__body{font-size:15px;line-height:1.7;color:var(--on-dark);margin:14px 0 0;max-width:52ch}
.comm__tags{display:flex;gap:8px;flex-wrap:wrap;justify-self:end}
/* Residential runs the same panel as Commercial so the two read as a pair,
   but on the light band: two ink panels stacked would drop the light/dark
   alternation the rest of the page is built on. Re-states the three things
   the ink panel overrides, rather than restyling the components inside. */
.comm__panel--light{background:var(--band);color:var(--text)}
.comm--duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px}
.comm--duo .comm__panel{grid-template-columns:1fr;align-content:start;gap:22px;padding:36px}
.comm--duo .comm__tags{justify-self:start}
.comm__panel--light .eyebrow{color:var(--red)}
.comm__panel--light .comm__body{color:var(--dim)}
.tag--ondark{
  border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.82);
  padding:9px 14px;font-size:12px;
}

/* ── services feature ───────────────────────────────────────────────────── */
.feature{padding-block:var(--sec) 0}
.feature__head{display:flex;align-items:end;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:34px}
.feature__h2{margin:0;max-width:24ch}
.feature__thumbs{display:flex;gap:10px}
.feature__thumbs img{width:62px;height:62px;border-radius:var(--r-sm);object-fit:cover}
.feature__panel{
  position:relative;border-radius:var(--r-panel);overflow:hidden;
  background:var(--panel-alt);padding:40px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:40px;min-height:400px;
  /* centred, not bottom-aligned. The right card is ~460px and the left column
     was 158px, so end-alignment pooled all 300px of slack into the top-left
     corner and read as a hole. Centring splits it, and the statement below is
     sized to actually occupy the column. */
  align-items:center;
}
/* This is the panel's statement, not body copy. At 15px it read as a caption
   stranded in a large box; at this size it carries the column. */
.feature__lede{
  font-size:clamp(17px,1.9vw,26px);line-height:1.5;font-weight:500;margin:0;
  max-width:24ch;text-transform:uppercase;letter-spacing:.01em;
}
.resto{background:var(--bg);border-radius:var(--r);padding:20px}
.resto__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.resto__title{font-size:15px;font-weight:600}
.resto__sub{font-size:12px;color:var(--dim-2)}
.resto__free{font-size:13px;font-weight:600;color:var(--red)}
.resto__tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.tile{position:relative;border-radius:var(--r-tile);overflow:hidden;aspect-ratio:1/1;background:var(--well)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile__pill{
  position:absolute;left:8px;bottom:8px;color:#fff;border-radius:var(--r-pill);
  padding:4px 10px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.tile__pill--before{background:rgba(0,0,0,.75)}
.tile__pill--after{background:var(--red)}
.resto__body{font-size:13px;line-height:1.6;color:var(--dim);margin:0 0 16px}
.resto__actions{display:flex;gap:8px}

/* ── services grid ──────────────────────────────────────────────────────── */
.svc{padding-block:var(--sec) 0}
.svc__head{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:30px}
.svc__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:26px}
.chiprail{
  position:absolute;left:50%;transform:translateX(-50%);bottom:16px;
  display:flex;gap:6px;background:rgba(255,255,255,.94);
  border-radius:var(--r-pill);padding:6px;max-width:calc(100% - 24px);
}
.chiprail span{
  padding:7px 12px;font-size:11px;font-weight:500;
  border-radius:var(--r-pill);background:var(--band);white-space:nowrap;
}
.svc__title{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:normal;margin:20px 0 4px}
.svc__sub{font-size:14px;font-weight:600;color:var(--red);margin-bottom:10px}
.svc__body{font-size:14px;line-height:1.65;color:var(--dim);margin:0}
.svc__rows{display:grid;gap:20px;align-content:start}
.row{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center}
.row__title{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:normal;margin:0 0 3px}
.row__sub{font-size:13px;font-weight:600;color:var(--red);margin-bottom:8px}
.row__body{font-size:13px;line-height:1.6;color:var(--dim);margin:0 0 10px}
.row__tags{display:flex;gap:6px;flex-wrap:wrap}
/* Four linked rows beside the pack-out card, exactly as tall as its picture.
   The picture is 4:3 in a content-box with 24px padding, in one of two grid
   columns with a 26px gap, so its height can be computed from the grid width. */
.svc__grid{container-type:inline-size}
.svc__rows--four{gap:12px}
.row--compact{grid-template-columns:118px 1fr;gap:16px;background:var(--band);border-radius:var(--r-card);padding:10px;align-items:center}
.row--compact .media--row{border-radius:12px}
.row--compact .row__sub{margin-bottom:2px}
.row--compact .row__body{margin:0}
.row--compact:hover .row__title{color:var(--red)}
@container (min-width:900px){
  .svc__rows--four{
    --h:calc(((100cqw - 26px) / 2 - 48px) * .75 + 48px);
    height:var(--h);align-self:start;grid-template-rows:repeat(4,minmax(0,1fr));
  }
  .row--compact{grid-template-columns:calc((var(--h) - 36px) / 4 - 20px) 1fr;min-height:0}
  .row--compact .row__title{font-size:16px}
  .row--compact .row__sub{font-size:12px}
}
@container (min-width:900px) and (max-width:1000px){
  .row--compact .row__sub{display:none}
}
.svc__note{font-size:13px;line-height:1.7;color:var(--dim-2);margin:22px 0 0;max-width:76ch}

/* ── cleaning services ──────────────────────────────────────────────────── */
.house{padding-block:var(--sec) 0}
.house__panel{
  position:relative;border-radius:var(--r-panel);overflow:hidden;
  background:var(--panel);padding:44px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:32px;align-items:center;
}
.house__panel .h3{margin:0 0 14px}
.house__body{font-size:14px;line-height:1.7;color:var(--dim);margin:0;max-width:46ch}
.house__card{background:var(--bg);border-radius:var(--r);padding:24px}
.house__phone{
  display:block;font-size:26px;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:4px;transition:color var(--t);
}
.house__phone:hover{color:var(--red)}
.house__email{font-size:14px;color:var(--dim);transition:color var(--t)}
.house__email:hover{color:var(--red)}
.house__chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}
.house__types{display:flex;gap:6px;flex-wrap:wrap;margin-top:20px}
.house__illos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.house__illos img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
  background:var(--band);border-radius:var(--r-tile);padding:10px;
}

/* ── about ──────────────────────────────────────────────────────────────── */
.about{padding-block:var(--sec) 0}
.about__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:44px;align-items:center;
}
.about__fig{margin:0}
.about__fig img{width:100%;height:auto;border-radius:var(--r-lg)}
.about__fig figcaption{font-size:12px;font-weight:500;color:var(--dim-2);margin-top:12px}
.about__h2{margin:0 0 20px;max-width:22ch}
.about .eyebrow{margin-bottom:20px}
.about__body{font-size:15px;line-height:1.7;color:var(--dim);margin:0 0 14px}
.about__body--last{margin-bottom:26px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}
.stat{background:var(--band);border-radius:var(--r-sm);padding:18px}
.stat__fig{font-size:24px;font-weight:600;letter-spacing:-.02em}
.stat__label{font-size:12px;color:var(--dim-2);margin-top:3px}

/* ,, link cards + clean cards (service pages) ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, */
.linkcard{
  display:block;color:inherit;
  border:1px solid var(--line);border-radius:var(--r-card);
  padding:16px 16px 18px;transition:border-color var(--t),background var(--t);
}
.linkcard:hover{border-color:var(--line-2);background:var(--band)}
.linkcard .media--row{aspect-ratio:4/3;border-radius:var(--r-tile);margin-bottom:16px}
.linkcard__title{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:normal;margin:0 0 6px}
.linkcard__body{font-size:13px;line-height:1.6;color:var(--dim);margin:0 0 12px}
.linkcard__go{font-size:13px;font-weight:600;color:var(--red)}

.cleancard{background:var(--band);border-radius:var(--r);padding:22px}
.cleancard__icon{display:block;color:var(--red);margin:0 0 12px}
.cleancard__h{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:normal;margin:0 0 7px}
.cleancard p{font-size:13px;line-height:1.6;color:var(--dim);margin:0}
.cleancard p a{color:var(--red);font-weight:600;white-space:nowrap}
.cleancard p a:hover{color:var(--red-hover)}

.sitelinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.sitelinks a{
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:12px 16px;font-size:13px;font-weight:600;
  transition:background var(--t),border-color var(--t);
}
.sitelinks a:hover{background:var(--bg);border-color:var(--ink)}

/* ── subpage furniture (subpages) ─────────────────────────────────────── */
.page-head{padding-block:56px 0}
.page-head__h1{margin:0 0 18px;max-width:20ch}
.page-head__lede{font-size:16px;line-height:1.7;color:var(--dim);margin:0;max-width:62ch}

.crew{padding-block:40px 0}
/* A banner, not a full screen of photograph. Left at its natural ratio a
   1100x825 frame renders ~960px tall at 1440 and pushes the whole page below
   the fold. 3/1 brings that to ~427px. Both frames survive the band: the
   in-home shot keeps its framing, wall and cabinet, and the facility shot
   keeps the red totes along the top. */
.crew__media{
  border-radius:var(--r-panel);overflow:hidden;background:var(--panel);
  aspect-ratio:3/1;
}
.crew__media img{width:100%;height:100%;display:block;object-fit:cover}
/* packout-01 is 825x1100. A 3/1 band keeps a quarter of it and slices the
   numbered storage vaults, which are the whole point of the photo. */
.crew__media:has(img[src$="packout-01.jpg"]){aspect-ratio:2.4/1}
.crew__media img[src$="packout-01.jpg"]{object-position:50% 38%}
/* Logo lockup band. The PNG has a real alpha channel, so it sits on the grey
   ground with no white box behind it. Contained and capped, never stretched. */
.logoband{
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);border-radius:var(--r-panel);
  padding:clamp(26px,3.4vw,44px) var(--gut);
}
.logoband img{width:100%;max-width:420px;height:auto}
/* The About page runs head -> lockup -> story with nothing between them but
   air: the section defaults are sized for photographs, and a mark on a white
   ground does not need that much room. Pulls the three blocks together. */
body[data-page="about"] .crew{padding-block:26px 0}

/* ── blog ───────────────────────────────────────────────────────────────── */
.post{padding-block:var(--sec) 0}
.post__meta{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2);margin-bottom:18px}
.post__body{max-width:68ch}
.post__body h2{font-size:clamp(1.3rem,2.6vw,1.65rem);margin:38px 0 12px}
.post__body h3{font-size:1.05rem;margin:26px 0 8px}
.post__body p{font-size:16px;line-height:1.75;color:var(--dim);margin:0 0 16px}
.post__body ul{margin:0 0 18px;padding-left:20px}
.post__body li{font-size:16px;line-height:1.75;color:var(--dim);margin-bottom:8px}
.post__body a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.post__body a:hover{color:var(--red-hover)}
.post__body strong{color:var(--text);font-weight:600}
.postcard{background:var(--band);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:8px}
.postcard__meta{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2)}
.postcard__h{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.25;margin:0}
.postcard__h a{display:block}
.postcard p{font-size:13px;line-height:1.6;color:var(--dim);margin:0}
.postcard__go{font-size:13px;font-weight:600;color:var(--red);margin-top:auto;padding-top:6px}

/* Before-and-after gallery. The source files were two-panel collages with a
   coloured frame; they are split into separate before and after images so the
   pair can be laid out properly and labelled. */
.ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:26px}
.ba__pair{margin:0}
.ba__shots{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ba__shot{position:relative;border-radius:var(--r);overflow:hidden;background:var(--well);aspect-ratio:1/1}
.ba__shot img{width:100%;height:100%;object-fit:cover;display:block}
.ba__tag{
  position:absolute;left:8px;bottom:8px;
  background:rgba(0,0,0,.72);color:#fff;
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:var(--r-pill);
}
.ba__tag--after{background:var(--red)}
.ba figcaption{font-size:13px;color:var(--dim);margin-top:10px}

/* ── local + fleet (about) ─────────────────────────────────────────────── */
.local{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px 48px;margin-bottom:30px;align-items:start}
.local .about__body{max-width:62ch}
.local .about__body--last{margin-bottom:0}
.fleet{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fleet__shot{margin:0;border-radius:var(--r-card);overflow:hidden;background:var(--well);aspect-ratio:4/3}
.fleet__shot img{width:100%;height:100%;object-fit:cover}
.row__body a{color:var(--red);font-weight:600;padding-block:12px;margin-block:-12px}

.page-cta{padding-block:var(--sec)}
.page-cta__panel{
  border-radius:var(--r-panel);background:var(--band);padding:44px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.page-cta__panel .h3{margin:0 0 10px}
.page-cta__panel p{font-size:15px;line-height:1.7;color:var(--dim);margin:0;max-width:46ch}
.page-cta__actions{display:flex;gap:10px;flex-wrap:wrap}

/* the current page in the nav */
.hdr__nav a[aria-current="page"]{color:var(--red)}

/* ── meet the team ─────────────────────────────────────────────────────── */
.team{padding-block:var(--sec) 0}
.team__h2{margin:0 0 34px;max-width:24ch}
/* 140px floor gives two-up on a phone and four across on desktop: auto-fit
   collapses the empty tracks, so four cards always fill the row. */
.team__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:20px}
/* Card lists that carry a sentence rather than a label. 140px tracks are right
   for three linkcards or four people, but they let nine text cards spread to
   seven columns with two orphans underneath. 340px lands on three columns at
   full width, two on tablet, one on mobile, with no extra breakpoint. */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px}
.member{margin:0}
.member__photo{
  position:relative;overflow:hidden;border-radius:var(--r);
  aspect-ratio:3/4;background:var(--well);
}
.member__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.member__name{font-size:16px;font-weight:600;letter-spacing:-.01em;margin-top:14px}
.member__role{font-size:13px;color:var(--dim-2);margin-top:2px}
.member__bio{font-size:13px;line-height:1.6;color:var(--dim);margin:8px 0 0}

/* Bios. A 110-word bio in a 232px grid column is a very tall thin stack, so the
   team reads as rows instead: photo left at a fixed width, copy beside it with a
   measure cap. Reuses .member__photo so the crop matches the rest of the site. */
/* A single pull quote on a service page. Uses the same card vocabulary as the
   homepage review cards rather than a bare rule, which read as foreign. */
.pullquote{
  margin:var(--sec) 0 0;max-width:72ch;
  background:var(--band);border-radius:var(--r-card);padding:26px;
}
.pullquote__stars{color:var(--red);letter-spacing:.24em;font-size:13px;margin-bottom:14px}
.pullquote blockquote{margin:0}
.pullquote p{font-size:16px;line-height:1.55;margin:0 0 16px;color:var(--text)}
.pullquote__by{font-size:12px;font-weight:600;color:var(--dim-2)}

/* FAQ accordion. Same <details> technique as the bios: everything is in the
   DOM and indexed, the page just is not a wall of open text. */
.faq{padding-block:var(--sec) 0}
.faq__h2{margin:0 0 22px}
.faq__list{display:grid;gap:10px;max-width:78ch}
.faq__item{background:var(--band);border-radius:var(--r);padding:4px 20px}
.faq__item summary{
  display:block;list-style:none;cursor:pointer;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  padding-block:16px;position:relative;padding-right:28px;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);
  font-size:18px;font-weight:400;color:var(--red);line-height:1;
}
.faq__item[open] summary::after{content:"\2013"}
.faq__item p{font-size:14px;line-height:1.7;color:var(--dim);margin:0 0 18px;max-width:68ch}

/* Visible breadcrumb. The BreadcrumbList schema was already on 40 pages with
   nothing on screen to match it; this is that same data made visible. */
.crumbs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-top:22px;font-size:12px;color:var(--dim-2);
}
.crumbs a{color:var(--dim-2);padding-block:13px;margin-block:-13px}  /* 40px target */
.crumbs a:hover{color:var(--red)}
.crumbs__sep{color:var(--line-2)}
.crumbs [aria-current]{color:var(--text);font-weight:600}

.bios{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:34px 28px;align-items:start}
.bio{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:start}
.bio .member__photo{margin:0}
.bio__name{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0;line-height:1.2}
.bio__role{font-size:12px;font-weight:600;color:var(--red);margin-top:4px;line-height:1.4}
.bio__body{font-size:14px;line-height:1.7;color:var(--dim);margin:12px 0 0;max-width:66ch}
/* The bios are the client's own words and are used verbatim, which makes them
   long. First paragraph shows; the rest sits behind a native <details> so the
   page stays readable. Content inside details is still in the DOM and indexed. */
.bio__more{margin-top:6px}
.bio__more summary{
  display:inline-block;list-style:none;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--red);
  padding-block:12px;margin-block:-12px;                 /* 18 -> 42 tap target */
}
.bio__more summary::-webkit-details-marker{display:none}
.bio__more summary::after{content:" \2193"}
.bio__more[open] summary::after{content:" \2191"}
.bio__more summary:hover{color:var(--red-hover)}
.bio__more .bio__body:first-of-type{margin-top:14px}
.team--sub{padding-block:38px 0}
.team--sub .team__h2{margin-bottom:18px;font-size:clamp(1.15rem,2.2vw,1.4rem)}
.sister-card{
  margin:0;                                  /* figure defaults to 1em 40px */
  display:flex;gap:18px;align-items:flex-start;
  background:var(--band);border-radius:var(--r);padding:18px;
  max-width:600px;
}
.sister-card__photo{
  flex:none;width:112px;aspect-ratio:1;overflow:hidden;
  border-radius:12px;background:var(--well);
}
.sister-card__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;display:block}
.sister-card__name{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0}
.sister-card__role{font-size:12px;color:var(--dim-2);margin-top:2px}
.sister-card__bio{font-size:13px;line-height:1.6;color:var(--dim);margin:8px 0 0}
.sister-card__bio a{color:var(--red);font-weight:600;padding-block:12px}

/* ── reviews ────────────────────────────────────────────────────────────── */
.reviews{padding-block:var(--sec) 0}
.reviews__band{
  border-radius:var(--r-panel);background:var(--panel);padding:40px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:32px;align-items:center;margin-bottom:26px;
}
.reviews__count{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:2}
.reviews__pull{
  font-size:clamp(20px,2.2vw,28px);line-height:1.3;letter-spacing:-.02em;
  font-weight:500;margin:0;
}
.reviews__cta{justify-self:end}
.reviews__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
.quote{background:var(--band);border-radius:var(--r-card);padding:26px}
.quote__stars{color:var(--red);letter-spacing:.24em;font-size:13px;margin-bottom:14px}
.quote__text{font-size:16px;line-height:1.55;margin:0 0 16px}
.quote__by{font-size:12px;font-weight:600;color:var(--dim-2)}
.reviews__link{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:20px;
  background:var(--band);border-radius:var(--r-card);padding:18px 22px;
  color:var(--ink);transition:background var(--t);
}
.reviews__link:hover{background:#EBEBEB;color:var(--ink)}
.reviews__linktext{font-size:13px;font-weight:600}
.reviews__thumbs{display:flex;gap:8px;margin-left:auto}
.reviews__thumbs img{
  height:54px;width:74px;object-fit:cover;object-position:top left;
  border-radius:8px;background:#fff;
  /* min-width:0 lets these shrink. Without it a flex item will not go below its
     specified width, so below ~410px the four thumbs (4x74 + 24 gap = 320) ran
     21px past the row's right padding. They crop a little more instead now. */
  min-width:0;
}

/* ── contact ────────────────────────────────────────────────────────────── */
.contact{padding-block:var(--sec) 0}
.contact__panel{
  border-radius:var(--r-panel);background:var(--band);padding:44px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:48px;align-items:start;
}
.contact .eyebrow{margin-bottom:20px}
.contact__h2{margin:0 0 16px}
.contact__body{font-size:15px;line-height:1.7;color:var(--dim);margin:0 0 28px;max-width:42ch}
.contact__phone{
  display:inline-block;font-size:clamp(28px,3.2vw,40px);font-weight:600;
  letter-spacing:-.03em;color:var(--ink);transition:color var(--t);
}
.contact__phone:hover{color:var(--red)}
.contact__info{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;margin-top:34px}
.contact__label{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);margin-bottom:8px;
}
.contact__value{font-size:14px;line-height:1.6;color:rgba(0,0,0,.7)}
.contact__value a{color:var(--red);transition:color var(--t)}
.contact__value a:hover{color:var(--red-hover)}

/* ── quote form ─────────────────────────────────────────────────────────── */
.form{background:var(--bg);border-radius:var(--r-card);padding:32px}
.form__label{margin-bottom:22px}
.form__fields{display:grid;gap:16px}
.form__pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:16px}
.field{display:block}
.field__label{display:block;font-size:12px;font-weight:500;color:var(--dim);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;box-sizing:border-box;background:var(--band);
  border:1px solid var(--line);border-radius:var(--r-tile);
  padding:13px 15px;font-family:var(--sans);font-size:14px;color:var(--ink);
}
.field textarea{line-height:1.6;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline-offset:1px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__submit{width:100%;padding:16px;text-align:center}
.form__error{font-size:13px;line-height:1.5;color:var(--red-hover);margin:0;font-weight:500}
.form__note{font-size:12px;line-height:1.6;color:var(--dim-2);margin:0;text-align:center}
.form__sent{padding:30px 0}
.form__sent-h{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.form__sent-body{font-size:15px;line-height:1.7;color:var(--dim);margin:0}
.form__sent-link{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.form__sent-link:hover{color:var(--red-hover)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-footer{padding:var(--sec) var(--gut) 28px}
.site-footer__panel{
  /* 1280px of content + 48px padding each side: see .wrap note above */
  max-width:calc(var(--wrap) + 96px);margin-inline:auto;position:relative;overflow:hidden;
  border-radius:var(--r-panel);background:var(--ink);color:#FFFFFF;padding:48px;
}
.site-footer__glow{
  position:absolute;right:-60px;bottom:-120px;width:460px;height:300px;
  background:radial-gradient(ellipse at center,rgba(212,0,0,.5),rgba(212,0,0,0) 70%);
  pointer-events:none;
}
.site-footer__top{
  position:relative;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:40px;padding-bottom:44px;
}
.site-footer__plate{display:inline-flex;background:#FFFFFF;border-radius:14px;padding:12px 16px;margin-bottom:18px}
.site-footer__plate img{height:52px;width:auto}
.site-footer__blurb{font-size:14px;line-height:1.7;color:var(--on-dark);margin:0;max-width:40ch}
.site-footer__contact{justify-self:end;text-align:right}
.site-footer__label{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-2);margin-bottom:12px;
}
.site-footer__phone{
  display:block;font-size:clamp(26px,3vw,36px);font-weight:600;
  letter-spacing:-.03em;color:#FFFFFF;margin-bottom:6px;transition:color var(--t);
}
.site-footer__phone:hover{color:var(--red)}
.site-footer__email{font-size:14px;color:var(--on-dark);transition:color var(--t)}
.site-footer__email:hover{color:var(--red)}
.site-footer__cols{
  position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:28px;border-top:1px solid var(--on-dark-line);padding-top:34px;
}
.site-footer__h{font-size:13px;font-weight:600;margin-bottom:14px}
.site-footer__links{display:grid;gap:9px;font-size:14px;justify-items:start}
.site-footer__links a{color:var(--on-dark);transition:color var(--t)}
.site-footer__links a:hover{color:#FFFFFF}
.site-footer__addr{font-size:14px;line-height:1.7;color:var(--on-dark)}
/* Certifications, spelled out rather than summarised as "IICRC certified".
   Sits above the legal bar so it reads as a credential line, not fine print. */
.site-footer__certs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:34px;padding-top:24px;border-top:1px solid var(--on-dark-line);
}
.site-footer__certs-label{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#FFFFFF;margin-right:4px;
}
.site-footer__cert{
  border:1px solid var(--on-dark-line);border-radius:var(--r-pill);
  padding:6px 12px;font-size:11px;font-weight:500;color:rgba(255,255,255,.82);
}
.site-footer__bar a{color:rgba(255,255,255,.82);text-decoration:underline;text-underline-offset:2px;padding-block:13px}  /* 14 -> 40 */
.site-footer__bar a:hover{color:#FFFFFF}

.site-footer__bar{
  position:relative;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:20px;font-size:12px;color:var(--on-dark-2);
}



/* ============================================================================
   Tap targets

   Each rule grows the hit box with padding and cancels the geometry with an
   equal negative margin, so nothing moves on screen. Placed after the
   component rules so it wins, and written out longhand rather than with
   margin-block, because several of these elements already carry a margin on
   one side that must be preserved.

   Inline links (the email addresses) take padding alone: vertical padding on
   an inline box enlarges the hit area without affecting the line box.

   The footer link lists are the one compromise. Their 9px grid gap caps a
   layout-neutral target at 25px: enough for WCAG 2.2 AA (24x24), short of our
   own 40px preference. Going further would mean opening up the gap, which
   would change the design. Noted in the README.
   ========================================================================= */
.hdr__brand{padding-block:5px;margin-block:-5px}                     /* 34 -> 44 */
.house__phone{padding-block:7px;margin-top:-7px;margin-bottom:-3px}  /* 31 -> 45, keeps its 4px gap */
.contact__phone{padding-block:6px;margin-block:-6px}                 /* 33 -> 45 */
.site-footer__phone{padding-block:7px;margin-top:-7px;margin-bottom:-1px} /* 31 -> 45, keeps its 6px gap */
.house__email,.contact__value a,.site-footer__email{padding-block:12px}   /* 17 -> 41 */
.site-footer__links a{padding-block:4px;margin-block:-4px}           /* 17 -> 25 */
.btn--flex{padding-block:13px;margin-block:-1px}                     /* 38 -> 40 */
.hdr__nav a{padding-block:12px;margin-block:-12px}                   /* 17 -> 41, desktop */
/* Links added with the service, city and blog pages. Same technique: grow the
   hit box, cancel the geometry, nothing moves. */
.postcard__h a{padding-block:9px;margin-block:-9px}                  /* 23 -> 41 */
.cleancard__h a{padding-block:11px;margin-block:-11px}               /* 20 -> 42 */
.post__body a{padding-block:11px}                                    /* 18 -> 40 */
.eyebrow a{padding-block:14px;margin-block:-14px}                    /* 15 -> 43 */
/* Links added with the area hub and the city pages. The hub's "by service, by
   place" lists put several links in one paragraph, which left them at 15px. */
.cleancard p a{padding-block:13px;margin-block:-13px}                /* 15 -> 41 */
.comm__body a{padding-block:12px}                                    /* 18 -> 42 */
.loss__body a{padding-block:12px}                                    /* 18 -> 42 */
a.tag{padding-block:13px;margin-block:-3px}                          /* 35 -> 41 */

/* ============================================================================
   Responsive: one breakpoint, as designed. The handoff prototype did this with
   !important attribute-substring hacks because it was inline-styled; this is
   the same set of rules written properly.
   ========================================================================= */
/* Below this the picture-height rows would be too short to read, so the four
   rows drop under the pack-out card instead. */
@media (max-width:980px){
  .svc__grid{grid-template-columns:1fr}
}

@media (max-width:900px){
  /* The nav grew from five items to six. It moves to its own row here, the same
     shape it already takes on a phone, rather than letting overflow:hidden clip
     the last item silently somewhere between 760 and 900. */
  .hdr__row{flex-wrap:wrap;gap:10px 20px}
  .hdr__cta{margin-left:auto}
  .hdr__nav{
    order:3;width:100%;overflow:visible;flex-wrap:wrap;
    gap:0 20px;white-space:normal;
    border-top:1px solid rgba(0,0,0,.08);padding-top:2px;
  }
  .hdr__nav a{padding-block:12px}
}

@media (max-width:760px){

  .local{grid-template-columns:1fr}
  .sister-card{padding:14px;gap:14px;flex-direction:column}
  .sister-card__photo{width:104px}
  .fleet{grid-template-columns:1fr 1fr;gap:8px}
  .fleet--3 .fleet__shot:first-child{grid-column:1 / -1}
  .fleet__shot{border-radius:var(--r)}
  .bio{grid-template-columns:1fr;gap:14px}
  .bio .member__photo{max-width:150px}

  /* header wraps to three rows: brand | CTA pinned right | nav below */
  .hdr__row{flex-wrap:wrap;gap:10px 12px;padding:10px 16px;align-items:center}
  /* flex-basis 0, not auto: with auto the brand's 197px max-content is what the
     wrap algorithm measures, so at =<340px the row breaks and the CTA lands on a
     stranded row of its own. At 0 the brand+CTA always share line one and the
     brand then grows into whatever is left, wrapping the wordmark instead. */
  .hdr__brand{flex:1 1 0;min-width:0}
  .hdr__brand img{height:34px}
  .hdr__brand span{font-size:13px;max-width:108px}
  .hdr__cta{margin-left:auto;flex:none}
  .hdr__call-full{display:none}
  .hdr__call-short{display:inline}
  /* padding-block 15 + margin-block -5 gives a 44px hit box while the button
     still renders at its designed 34px. Do NOT reach for inline-flex here to
     get the height: flex turns each text run into its own flex item and strips
     the whitespace between them, so "Call now →" renders as "Callnow→". */
  .hdr__cta .btn{padding:15px 16px;margin-block:-5px;font-size:12px}
  /* One line, always. The six labels measure 254px at 13px, and 5 gaps of 18px
     put the row at 344px against a 343px container: it wrapped by a single
     pixel. 12.5px text with space-between distributing whatever is left keeps
     all six on one row down to 320, where the gaps close to about 9px. */
  .hdr__nav{
    order:3;width:100%;overflow:visible;flex-wrap:nowrap;
    justify-content:space-between;
    gap:0 6px;font-size:12.5px;white-space:nowrap;
    border-top:1px solid rgba(0,0,0,.1);padding-top:2px;
  }
  .hdr__nav a{padding-block:13px}  /* 41px tap target on the nav row */

  /* section.wrap, not bare section: .wrap's own padding-inline would
     otherwise win on specificity and leave mobile gutters at 28px */
  section,section.wrap{padding-inline:16px}

  /* Mobile hero: 4/3 keeps the whole group in frame: a 3/4 portrait crop of a
     landscape group shot would slice Jon and Jesse off the ends. The caption
     then moves out from over the photo and sits below it, so the picture is
     never covered and the copy is never fighting a scrim for contrast. */
  /* No crop at all on mobile: the crew spans the full frame width, so any
     portrait or square box would slice the people on the ends. Letting the
     photo keep its own ratio also means this survives a future photo swap. */
  .hero__media{aspect-ratio:auto}
  /* 16/7 over a 343px column is a 150px letterbox; give the band some height back.
     The two :has() rules above are more specific than a bare .crew__media, so a
     plain override here loses to them and those pages keep a desktop band on a
     phone. They have to be restated at the same specificity. */
  .crew__media,
  .crew__media:has(img[src$="packout-01.jpg"]){aspect-ratio:4/3}
  .crew__media img[src$="packout-01.jpg"]{object-position:50% 50%}
  .hero__media img{position:static;width:100%;height:auto}
  .hero__scrim{display:none}
  .hero__band{
    position:static;padding:20px 0 0;gap:16px;
    flex-direction:column;align-items:flex-start;
  }
  .hero__band p{color:var(--dim);font-size:15px;max-width:none}
  /* the white pill was legible over the photo; on the page ground it is not */
  .hero__band .btn--white{background:var(--band);color:var(--ink)}
  .hero__band .btn--white:hover{background:#EBEBEB;color:var(--ink)}

  .process__inner{padding:24px}
  .tl__head{text-align:left;margin-bottom:28px}
  .tl__head .eyebrow{justify-content:flex-start}
  .tl__steps{grid-template-columns:1fr;gap:18px;--circle:84px}
  .tl__steps::before{left:40px;right:auto;top:10px;bottom:10px;width:3px;height:auto}
  .tl__step{display:grid;grid-template-columns:var(--circle) 1fr;gap:4px 16px;align-items:center;text-align:left}
  .tl__top{display:contents}
  .tl__num{display:none}
  .tl__photo{grid-row:1 / span 2;margin:0;border-width:3px;box-shadow:0 0 0 5px var(--band)}
  .tl__title{grid-column:2;align-self:end;margin:0;font-size:18px}
  .tl__body{grid-column:2;align-self:start;max-width:none;margin:0}
  .tl__reel{margin-top:28px}
  .tl__phone{display:none}
  .tl__photo--logo img{width:78%}
  .tl__tel{display:inline-block;font-weight:700;color:var(--red);padding-block:10px;margin-block:-10px}
  /* footer links become 40px rows on a phone rather than 25px ones 9px apart */
  .site-footer__links{gap:0}
  .site-footer__links a{padding-block:12px;margin-block:0}
  #services .svc__head .btn{display:none}
  .media__quote{display:inline-flex;position:absolute;top:14px;left:14px;z-index:2}
  .tl__reel .reel__stage{aspect-ratio:4/3.4}
  .comm__panel{padding:24px}
  .comm__tags{justify-self:start}

  .feature__panel,
  .house__panel,
  .contact__panel,
  .reviews__band{padding:24px}

  .row{grid-template-columns:1fr}
  .row .media--row{max-width:180px}
  .row--compact{grid-template-columns:88px 1fr;gap:14px;padding:10px}
  .row--compact .media--row{max-width:none}
  .svc__rows--four{grid-template-rows:none}

  /* 16px stops iOS zooming the page on focus */
  .field input,.field select,.field textarea{font-size:16px}


  .page-head{padding-block:36px 0}
  .page-cta__panel{padding:24px}

  .site-footer{padding:48px 12px 20px}
  .site-footer__panel{padding:28px}
  .site-footer__contact{justify-self:start;text-align:left}
}

/* ── reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  html{scroll-behavior:auto}
  .reel__slide{transition:none}
  /* without this the visibility delay outlives the zeroed transition and the
     closed panel lingers as an invisible hit area */
}