/* ==========================================================================
   EMTR homepage rebuild — angle: TYPOGRAPHIC (S1155)
   Enormous display type is the composition device. Archivo 900 carries the
   openers; photos sit as inset plates, masks and bleeds the type overlaps.
   All colour rides the existing tokens (var(--hue)) — nothing hard-coded.
   Loads after css/styles.css. Overrides existing rules where the spec asks.
   ========================================================================== */

/* ---------- shared helpers ---------- */
.rb-eyebrow-sp { letter-spacing: 0.18em; }

/* The real cause of the ~339-380px desktop overshoot two hostile reviews measured was
   .tsvc__frame's old `margin-right: calc(50% - 50vw)`, applied two containment levels
   deep (inside .wrap AND a 2-col grid) where 50% resolved against the frame's own
   narrow box, not the viewport — rendering the sticky plate at roughly double its
   intended width. Fixed at the root: .tsvc__body now sits outside .wrap entirely (the
   same pattern .tabout__photo and .twork__masonry already use), so the frame's own
   grid track ends exactly at the true viewport edge with no vw-calc hack at all.
   overflow-x:clip stays as a belt-and-braces backstop per composition_spec hard rule 6
   ("the page body must never scroll horizontally") — body already carries
   overflow-x:hidden but does not reliably suppress the root scrolling box while Lenis
   is active — not as a mask for a still-broken layout. */
html { overflow-x: clip; }

/* ====================================================================
   S1176 DISPATCH angle — hero kicker, header call link, dispatch card.
   ==================================================================== */
.hero-h1__kicker {
  display: block; font-family: var(--font-body); font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.02em; color: var(--paper); opacity: 0.85;
  margin-bottom: 0.6rem;
}
@media (max-width: 767px) { .hero-h1__kicker { font-size: 0.88rem; } }

/* header phone-only call link, next to the hamburger (mirrors .nav__phone, inverse breakpoint) */
.nav__call {
  display: none; align-items: center; gap: 0.5rem; color: var(--paper);
  min-height: 44px; min-width: 44px; padding: 0.4rem 0.5rem; text-decoration: none;
}
.nav__call svg { flex: none; color: var(--blue-bright); }
.nav__call span { font-size: 0.82rem; font-weight: 600; }
@media (max-width: 1080px) { .nav__call { display: inline-flex; } }
@media (max-width: 400px) { .nav__call span { display: none; } }

/* the dispatch card: phone-only, sits right under the H1, replaces sub + actions on phone */
.hero__dispatch { display: none; }
@media (max-width: 767px) {
  .hero { min-height: 74svh; }
  .hero__inner { padding-top: 4rem; padding-bottom: 1.6rem; }
  .hero__sub, .hero__actions { display: none; }
  .hero__dispatch {
    display: block; margin-top: 1.3rem;
    background: oklch(0.14 0.02 var(--hue) / 0.92); border: 1px solid var(--line);
  }
  .hero__dispatch-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 48px; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line);
    text-decoration: none; color: var(--paper);
  }
  .hero__dispatch-row:last-child { border-bottom: 0; }
  .hero__dispatch-k { color: var(--faint); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; flex: none; }
  .hero__dispatch-v { font-weight: 700; font-size: 1.02rem; }
  .hero__dispatch-note { font-family: var(--font-body); font-weight: 500; font-size: 0.84rem; color: var(--muted); text-align: right; max-width: 60%; }
}

/* ====================================================================
   COVERAGE — the map becomes the composition
   ==================================================================== */
.tcov { position: relative; min-height: 78svh; background: var(--ink-2); }
.tcov__map { position: absolute; inset: 0; z-index: 0; }
.tcov__map .coverage-map__leaflet { position: absolute; inset: 0; }
.tcov__map .coverage-map__label { right: 1.6rem; left: auto; bottom: 1.6rem; text-align: right; }
/* normal-flow panel (not absolute/centred): its own content height sets the section's real
   height, so a tall hero-scale heading can never be centred off the top of the viewport. The
   map behind it is absolute inset:0, so it always matches whatever height that turns out to be. */
.tcov__panel { position: relative; z-index: 2; width: min(560px, 88vw); padding: 6rem var(--gutter) 3rem; }
.tcov__panel-inner {
  background: oklch(0.15 0.02 var(--hue) / 0.92); border: 1px solid var(--line);
  padding: clamp(1.8rem, 3vw, 2.8rem); box-shadow: var(--shadow); backdrop-filter: blur(8px);
}
.tcov h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 0.98; margin-top: 0.9rem; letter-spacing: -0.02em; }
.tcov__big { color: var(--blue-bright); }
.tcov p { color: var(--muted); margin-top: 1.1rem; max-width: 44ch; }
.tcov .docket, .tcov .checklist { max-width: 44ch; }
.tcov .btn { margin-top: 1.8rem; }
@media (max-width: 900px) {
  .tcov { min-height: auto; display: flex; flex-direction: column; }
  .tcov__map { position: relative; height: 55svh; order: 2; }
  .tcov__panel { position: relative; order: 1; inset: auto; width: 100%; padding: clamp(3rem, 8vw, 4rem) var(--gutter) 2rem; }
  .tcov__panel-inner { box-shadow: none; }
}
@media (max-width: 767px) {
  .tcov__map { height: 34svh; }
  .tcov__panel { padding: clamp(1.6rem, 6vw, 2.2rem) var(--gutter) 1.4rem; }
  .tcov__panel-inner { padding: clamp(1.3rem, 4vw, 1.8rem); }
  .tcov h2 { font-size: clamp(2rem, 8vw, 2.6rem); }
}

/* ====================================================================
   SERVICES (flagship) — rows left, sticky crossfading plate right
   ==================================================================== */
.tsvc { padding-block: clamp(3.4rem, 6vw, 6rem); position: relative; }
.tsvc__head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.tsvc h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: 0.7rem; letter-spacing: -0.01em; }
.tsvc__head p { color: var(--muted); margin-top: 1rem; }
/* .tsvc__body is a DIRECT CHILD OF THE SECTION (not nested inside .wrap) so the sticky
   frame's right edge is the grid's own right edge, which is the true viewport edge, at
   1fr of a 100vw-wide auto-block grid — the same "sit outside the constrained grid"
   pattern .tabout__photo and .twork__masonry already use. No vw-bleed calc needed. */
.tsvc__body { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.tsvc__rows {
  border-top: 1px solid var(--line);
  /* aligns the rows column's text with the rest of the page's .wrap inner edge, since
     this column's own box now starts at the true viewport left edge (x:0), not .wrap's */
  padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}
/* K2: the live site's <details class="job"> accordion markup, dropped into the rail
   composition. .job's own rules (styles.css, untouched) already give hairline rows, no
   card background, no radius (composition_spec rule 9) and the +/- glyph; we only add the
   chapter-photo-rail specific spacing + the feature row's scale here. */
.tsvc__job.job { padding: 0; }
.tsvc__job.job > summary { padding-left: 0; padding-right: 0; }
.tsvc__job .job__body { padding-left: calc(52px + 2.3rem); padding-right: 0; }
.tsvc__job .job__body p { max-width: 56ch; }
.tsvc__job.job--feature .job__name { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.tsvc__band { display: none; }
.tsvc__frame {
  position: sticky; top: 6.5rem; height: calc(100svh - 9rem); min-height: 360px;
  overflow: hidden;
}
.tsvc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease); }
.tsvc__img.is-active { opacity: 1; }
.tsvc__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, oklch(0.1 0.03 var(--hue) / 0.55), transparent 40%); pointer-events: none; }
@media (max-width: 900px) {
  .tsvc__body { grid-template-columns: minmax(0, 1fr); padding-inline: var(--gutter); }
  .tsvc__rows { padding-left: 0; }
  .tsvc__frame { display: none; }
  .tsvc__band { display: block; position: relative; height: 46svh; margin-inline: calc(-1 * var(--gutter)); overflow: hidden; }
  .tsvc__band img { width: 100%; height: 100%; object-fit: cover; display: block; }
}
/* K2 phone override: no per-chapter bands, one 40svh band (chapter 1) above the whole list,
   then all ten rows flat — the M3 budget (services < 1400px at 390) depends on this. */
@media (max-width: 767px) {
  .tsvc { padding-block: 1.2rem; }
  .tsvc__band[data-chapter="2"], .tsvc__band[data-chapter="3"], .tsvc__band[data-chapter="4"], .tsvc__band[data-chapter="5"] { display: none; }
  .tsvc__band[data-chapter="1"] { height: 40svh; }
  .tsvc__job.job > summary { padding: 1rem 0; }
  .tsvc__job .job__body { padding-left: 0; padding-bottom: 1rem; }
}

/* ====================================================================
   WE KNOW DIESEL — full-bleed plate, panel overlapping its bottom edge
   ==================================================================== */
.tdiesel { position: relative; min-height: 80svh; padding-bottom: clamp(6rem, 11vw, 9.5rem); overflow: visible; }
.tdiesel__photo { position: absolute; inset: 0; height: 80svh; overflow: hidden; }
.tdiesel__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tdiesel__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, oklch(0.13 0.02 var(--hue) / 0.88) 0%, transparent 46%); }
.tdiesel__panel {
  position: absolute; left: var(--gutter); bottom: 0; transform: translateY(38%); z-index: 2;
  max-width: min(640px, 88vw); background: oklch(0.14 0.02 var(--hue) / 0.95); border: 1px solid var(--line);
  padding: clamp(1.8rem, 3vw, 2.8rem); box-shadow: var(--shadow);
}
.tdiesel h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.02; margin-top: 0.8rem; letter-spacing: -0.015em; }
.tdiesel__big { color: var(--blue-bright); display: block; }
.tdiesel p { color: var(--muted); margin-top: 1rem; }
@media (max-width: 820px) {
  .tdiesel { min-height: auto; padding-bottom: 0; }
  .tdiesel__photo { position: relative; height: 50svh; }
  .tdiesel__panel { position: relative; left: 0; bottom: auto; transform: none; max-width: 100%; margin: -2.4rem var(--gutter) 0; }
}
@media (max-width: 767px) {
  .tdiesel__photo { height: 36svh; }
  .tdiesel__panel { padding: clamp(1.3rem, 4vw, 1.8rem); margin-top: -1.8rem; }
  .tdiesel h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .tdiesel .enginefamilies { margin-top: 0.9rem; }
}

/* ====================================================================
   IMAGE BAND — keep centred, kill the fixed-attachment / flat-scrim slop
   ==================================================================== */
#downtime .imageband__bg { width: 100%; height: 100%; object-fit: cover; display: block; background-attachment: scroll; }
#downtime::after { background: linear-gradient(180deg, oklch(0.14 0.03 var(--hue) / 0.60) 0%, oklch(0.14 0.03 var(--hue) / 0.35) 45%, oklch(0.14 0.03 var(--hue) / 0.72) 100%); }
#downtime h2 { font-size: clamp(2.8rem, 6.5vw, 5rem); letter-spacing: -0.02em; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #downtime .imageband__bg { animation: ibParallax linear; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes ibParallax { from { transform: scale(1.06) translateY(-3%); } to { transform: scale(1.06) translateY(3%); } }

/* ====================================================================
   HOW IT WORKS — the one ghost-numeral moment on the page. All four
   candidates failed this the same way (a boxed thumbnail beside an
   outline numeral); rebuilt per graft_spec s1155 #4 as three stacked
   edge-bleed rows, the numeral straddling the photo/text boundary.
   ==================================================================== */
.thow { padding-block: clamp(3.4rem, 6vw, 6rem) 0; position: relative; }
.thow__head { max-width: 56ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.thow h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-top: 0.6rem; }

.thow__rows { display: flex; flex-direction: column; }
.thow__row {
  position: relative; display: grid; min-height: 60svh;
  border-top: 1px solid var(--line);
}
.thow__row--left { grid-template-columns: 54% 46%; }
.thow__row--right { grid-template-columns: 46% 54%; }

.thow__photo { position: relative; overflow: hidden; background: var(--ink); }
.thow__photo img, .thow__photo .thow__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.thow__photo--clip { background: var(--ink-2); }

.thow__num {
  position: absolute; top: 50%; z-index: 2; pointer-events: none; user-select: none;
  transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 900; font-size: clamp(7rem, 26vw, 30rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.6px var(--line); opacity: 1;
}
@supports not (-webkit-text-stroke: 1px red) { .thow__num { color: var(--line); opacity: 0.22; } }
.thow__row--left .thow__num { left: 54%; }
.thow__row--right .thow__num { left: 46%; }

.thow__text {
  position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(2rem, 5vw, 3rem);
}
.thow__row--left .thow__text { padding-inline: clamp(4.5rem, 9vw, 7.5rem) var(--gutter); }
.thow__row--right .thow__text { padding-inline: var(--gutter) clamp(4.5rem, 9vw, 7.5rem); }
.thow__text h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 1.7vw, 1.55rem); }
.thow__text p { color: var(--muted); margin-top: 0.6rem; max-width: 32ch; }

@media (max-width: 900px) {
  .thow__row--left, .thow__row--right { grid-template-columns: 1fr; }
  .thow__photo { height: 52svh; order: -1; }
  .thow__text { order: 2; padding: clamp(1.7rem, 5vw, 2.2rem) var(--gutter) clamp(2.6rem, 7vw, 3.2rem) !important; }
  .thow__num {
    top: 0.9rem; left: 0.9rem !important; transform: none;
    font-size: clamp(5rem, 42vw, 8rem);
  }
}
/* M3: rows at ~40svh each on phone, tighter head + text padding for the height budget */
@media (max-width: 767px) {
  .thow { padding-block: clamp(1.8rem, 6vw, 2.4rem) 0; }
  .thow__head { margin-bottom: clamp(1.2rem, 4vw, 1.6rem); }
  .thow__photo { height: 40svh; }
  .thow__text { padding: 1.1rem var(--gutter) 1.6rem !important; }
  .thow__text p { max-width: none; }
}

/* ====================================================================
   FLEET CARE — four points as four photo plates, Anduril grammar
   ==================================================================== */
.tfc { padding-block: clamp(3.4rem, 6vw, 6rem); }
.tfc__head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.tfc h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-top: 0.7rem; }
.tfc__head p { color: var(--muted); margin-top: 1rem; }
.tfc__grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 220px; gap: 10px; }
.tfc__plate { position: relative; overflow: hidden; }
.tfc__plate--wide { grid-column: span 3; }
.tfc__plate--narrow { grid-column: span 2; }
.tfc__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tfc__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1.4rem 1.2rem; background: linear-gradient(0deg, oklch(0.1 0.03 var(--hue) / 0.86), transparent 78%); }
.tfc__name { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; color: var(--paper); }
.tfc__desc { display: block; color: var(--muted); font-size: 0.9rem; margin-top: 0.3rem; max-width: 34ch; }
@media (max-width: 780px) {
  .tfc__grid { grid-template-columns: 1fr; grid-auto-rows: 280px; }
  .tfc__plate--wide, .tfc__plate--narrow { grid-column: span 1; }
}
/* M3: Fleet Care as a 2x2 grid of shorter plates on phone (under the composition_spec's
   one-wide-column tablet treatment above, which still covers 768-780) */
@media (max-width: 767px) {
  .tfc { padding-block: clamp(1.8rem, 6vw, 2.4rem); }
  .tfc__head { margin-bottom: clamp(1.2rem, 4vw, 1.6rem); }
  .tfc__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: 8px; }
  .tfc__plate--wide, .tfc__plate--narrow { grid-column: span 1; }
  .tfc__cap { padding: 0.9rem 0.8rem 0.7rem; }
  .tfc__name { font-size: 0.86rem; }
  .tfc__desc { font-size: 0.74rem; margin-top: 0.15rem; }
}

/* ====================================================================
   ABOUT — a person, not the trucks again. ERA-offset pair grafted from
   the photo-led candidate per graft_spec s1155 #1: dark panel, a main
   plate running taller than the panel and bleeding to the right edge,
   a smaller second plate offset further right and lower.
   ==================================================================== */
.tabout { padding-block: clamp(3.4rem, 6vw, 6rem); display: grid; grid-template-columns: 0.95fr 0.68fr 0.32fr; align-items: stretch; gap: 0; min-height: 70svh; background: var(--ink-2); }
.tabout__panel { grid-column: 1; align-self: center; display: flex; flex-direction: column; justify-content: center; padding: clamp(1.2rem, 3vw, 2rem) clamp(var(--gutter), 4vw, 3rem) clamp(1.2rem, 3vw, 2rem) var(--gutter); z-index: 2; }
.tabout h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.4rem, 2.6vw, 2.2rem); margin-top: 0.8rem; }
.tabout__panel p { color: var(--muted); margin-top: 1.1rem; max-width: 50ch; }
.tabout__panel .checklist { max-width: 50ch; }
.tabout__photo { grid-column: 2; position: relative; overflow: hidden; margin-block: -3.2rem; }
.tabout__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tabout__photo2 { grid-column: 3; position: relative; align-self: end; height: 44%; margin-right: var(--gutter); margin-bottom: 1.4rem; overflow: hidden; }
.tabout__photo2 img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* K5 + M3: About "Read more" disclosure (pure-CSS checkbox toggle, not <details> — needs to
   stay closed on phone and be forced fully visible on desktop without a JS state flip). */
.tabout__more-btn { display: none; }
.tabout__more-toggle:focus-visible ~ .tabout__more-btn { outline: 2px solid var(--blue-bright); outline-offset: 2px; }

/* K5: the Instagram strip, last block of #about, spans the full section width */
.tabout__insta { grid-column: 1 / -1; padding: clamp(2rem, 4vw, 3rem) var(--gutter) 0; }
.tabout__insta-head { margin-bottom: 1.2rem; }
.tabout__insta-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, 2vw, 1.5rem); margin-top: 0.5rem; }
.tabout__insta-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.tabout__insta-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; }
.tabout__insta-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.tabout__insta-tile:hover img { transform: scale(1.06); }
.tabout__insta .btn { margin-top: 1.4rem; }

@media (max-width: 900px) {
  /* minmax(0,1fr), not a bare 1fr: a bare fr track sizes to the widest item's
     min-content, and the scroll-snap strip's flex-shrink:0 tiles have a large
     one — that was overflowing the whole column (panel included) past 390px. */
  .tabout { grid-template-columns: minmax(0, 1fr); min-height: auto; padding-block: clamp(2.4rem, 6vw, 3.4rem); }
  .tabout__panel { grid-column: 1; padding-inline: var(--gutter); min-width: 0; }
  .tabout__photo { grid-column: 1; order: -1; height: 60svh; margin: 0 0 2rem; }
  .tabout__photo2 { display: none; }
  .tabout__insta { grid-column: 1; padding-inline: var(--gutter); min-width: 0; }
}
@media (max-width: 767px) {
  .tabout { padding-block: clamp(1.6rem, 6vw, 2.2rem); }
  .tabout__photo { height: 44svh; margin-bottom: 1.4rem; }
  /* the two paragraphs collapse behind "Read more"; the checklist stays visible */
  .tabout__copy { display: none; }
  .tabout__more-btn {
    display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.9rem;
    color: var(--blue-bright); font-weight: 600; font-size: 0.9rem; cursor: pointer;
    min-height: 44px; align-items: center;
  }
  .tabout__more-toggle:checked ~ .tabout__copy { display: block; margin-top: 0.9rem; }
  .tabout__more-toggle:checked ~ .tabout__more-btn { display: none; }
  .tabout__panel .checklist { margin-top: 1.3rem; }
  .tabout__insta { padding-top: 1.8rem; }
  .tabout__insta-strip {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    padding-bottom: 0.3rem; -webkit-overflow-scrolling: touch; min-width: 0;
  }
  .tabout__insta-tile { flex: 0 0 42vw; scroll-snap-align: start; }
}

/* ====================================================================
   OUR WORK — the strongest material at its true size. Edge-to-edge
   (no .wrap), six-column dense grid, three tile sizes, per graft_spec
   s1155 #2. Head stays contained in .wrap above it.
   ==================================================================== */
.twork { padding-block: clamp(3.4rem, 6vw, 6rem); }
.twork__head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.twork h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 5.4vw, 4.4rem); margin-top: 0.7rem; letter-spacing: -0.02em; }
.twork__head p { color: var(--muted); margin-top: 1rem; }
.twork__masonry.gallery {
  display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 180px; grid-auto-flow: dense;
  gap: 10px; max-width: none; margin: 0;
}
.twork__masonry .tw { border: 0; border-radius: 0; aspect-ratio: auto; }
.twork__masonry .tw--df { grid-column: span 2; grid-row: span 2; }
.twork__masonry .tw--lg { grid-column: span 4; grid-row: span 2; }
.twork__masonry .tw--tall { grid-column: span 2; grid-row: span 3; }
.twork__masonry figcaption { opacity: 1; transform: none; padding: 1.6rem 1.1rem 0.9rem; }
/* M3: Our Work becomes a single horizontal scroll-snap strip on phone, all ten tiles
   (both clips included), captions visible, ~72vw per tile. */
@media (max-width: 767px) {
  .twork { padding-block: clamp(1.8rem, 6vw, 2.4rem); }
  .twork__head { margin-bottom: clamp(1.2rem, 4vw, 1.6rem); }
  .twork h2 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .twork__masonry.gallery {
    display: flex; grid-template-columns: none; gap: 8px; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter));
  }
  .twork__masonry .tw {
    flex: 0 0 72vw; grid-column: auto !important; grid-row: auto !important;
    aspect-ratio: 3 / 4; scroll-snap-align: start;
  }
  .twork__masonry figcaption { padding: 1.1rem 0.8rem 0.7rem; }
}
@media (min-width: 768px) and (max-width: 900px) {
  .twork__masonry.gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 8px; }
  .twork__masonry .tw { grid-column: span 1 !important; grid-row: auto !important; aspect-ratio: 3 / 4; }
  .twork__masonry .tw:nth-child(3n+2) { aspect-ratio: 1 / 1; }
}

/* ====================================================================
   FAQ — questions over dark ground
   ==================================================================== */
/* questions over the machine, not text on a flat panel — a full-bleed dark ground
   (cat966_wide, second use on the page, non-adjacent to its Fleet Care use, a
   different crop) under an ink scrim so the rows read as sitting on the photo. */
.tfaq { position: relative; padding-block: clamp(3.4rem, 6vw, 6rem); overflow: hidden; background: var(--ink-2); }
.tfaq__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tfaq::after { content: ""; position: absolute; inset: 0; z-index: 1; background: oklch(0.09 0.02 var(--hue) / 0.8); }
.tfaq > .wrap { position: relative; z-index: 2; }
.tfaq__head { max-width: 56ch; margin-bottom: clamp(1.8rem, 3.4vw, 2.6rem); }
.tfaq h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.4rem, 2.3vw, 1.9rem); margin-top: 0.7rem; }
.tfaq__list { border-top: 1px solid var(--line); }
.tfaq .faq__item { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 0; }
.tfaq .faq__item summary { padding: 1.25rem 0; }
.tfaq .faq__body { padding: 0 0 1.25rem; }
@media (max-width: 900px) {
  .tfaq { padding-top: 0; }
  .tfaq__bg { position: relative; height: 40svh; }
  .tfaq::after { content: none; }
  .tfaq__head { padding-top: clamp(1.8rem, 6vw, 2.4rem); }
}
@media (max-width: 767px) {
  .tfaq { padding-bottom: clamp(1.6rem, 6vw, 2.2rem); }
  .tfaq__head { padding-top: 1.4rem; margin-bottom: 1rem; }
  .tfaq .faq__item summary { padding: 1rem 0; }
}

/* ====================================================================
   CONTACT — full-bleed dark CTA band, hero-scale H2
   ==================================================================== */
.tcta { background: var(--ink-2); border-bottom: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 5rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.tcta__inner { max-width: 62ch; text-align: left; }
.tcta h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 5.8vw, 4.8rem); line-height: 0.98; letter-spacing: -0.02em; }
.tcta p { color: var(--muted); margin-top: 1.1rem; max-width: 48ch; font-size: 1.1rem; }
.tcta .actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; justify-content: flex-start; }

/* M5: enquiry form phone order (Urgency, Name, Phone, Location, message visible; Email +
   Vehicle behind a details "optional" disclosure). The details closes natively on phone
   (no `open` attribute); on desktop we force its content permanently visible with a plain
   author rule beating the UA's `details:not([open]) > * { display:none }` default, so the
   two fields sit inline in the two-column form exactly like every other field pair. */
.form__more { border: 1px solid var(--line); margin: 0.3rem 0 1.1rem; }
.form__more summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1rem; font-size: 0.9rem; color: var(--muted); min-height: 44px;
}
.form__more summary::-webkit-details-marker { display: none; }
.form__more-row { padding: 0 1rem 1rem; }
@media (max-width: 767px) {
  .tcta { padding-block: clamp(1.8rem, 6vw, 2.2rem); margin-bottom: clamp(1.6rem, 5vw, 2.2rem); }
  .contact { gap: clamp(1.6rem, 5vw, 2.2rem); }
}
@media (min-width: 900px) {
  .form__more { border: 0; margin: 0; }
  .form__more summary { display: none; }
  .form__more-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1.1rem; padding: 0; }
}

/* ====================================================================
   Parallax — subtle "moves slower" float, transform only, gated.
   Reduced motion and browsers without support simply keep the default
   (unenhanced) position: this whole block is pure enhancement.
   ==================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tcov__panel-inner, .tdiesel__panel {
      animation: rbFloat linear; animation-timeline: view(); animation-range: entry 0% cover 60%;
    }
    /* photo layers need the overscan baked into the same transform value (scale
       first) so the translate drift never reveals an edge under the crop */
    .tabout__parallax {
      animation: rbFloatPhoto linear; animation-timeline: view(); animation-range: entry 0% cover 60%;
    }
  }
}
@keyframes rbFloat { from { transform: translateY(-2%); } to { transform: translateY(2%); } }
@keyframes rbFloatPhoto { from { transform: scale(1.07) translateY(-2%); } to { transform: scale(1.07) translateY(2%); } }

/* ---------- laptop / short-screen safety (1366x768 class) ---------- */
@media (min-width: 901px) and (max-height: 820px) {
  .tcov { min-height: 70svh; }
  .tdiesel { min-height: 70svh; }
}

/* ---------- reduced motion: kill the crossfade + hold final state ---------- */
@media (prefers-reduced-motion: reduce) {
  .tsvc__img { transition: none; }
}

/* ====================================================================
   M3 ROUND 2 — the first pass (40svh/46svh bands, existing padding
   clamps) still measured 12785px at 390 against a 9000px cap. These
   overrides land last on purpose (cascade order, no !important land-
   grab) and tighten every phone band + padding rhythm a second time.
   Desktop (900px+) is untouched by everything below.
   ==================================================================== */
@media (max-width: 767px) {
  /* Coverage: the map is a locator, not a hero photo on phone */
  .tcov__map { height: 22svh; }
  .tcov__panel { padding: 1.6rem var(--gutter) 1.2rem; }
  .tcov__panel-inner { padding: 1.1rem 1.3rem; }
  .tcov h2 { font-size: clamp(1.7rem, 7vw, 2.1rem); margin-top: 0.6rem; }
  .tcov p { margin-top: 0.7rem; }
  .tcov .docket { margin-top: 0.9rem; }
  .tcov .docket__row { padding-block: 0.35rem; }
  .tcov .checklist { margin-top: 0.7rem; }
  .tcov .checklist li { padding: 0.3rem 0; }
  .tcov .btn { margin-top: 1.1rem; }

  /* Services: K2 mandates exactly 40svh for the one phone band (non-negotiable);
     everything else around it is fair game and stays tight. */
  .tsvc__head { margin-bottom: 0.7rem; }
  .tsvc__head p { margin-top: 0.4rem; font-size: 0.9rem; }
  .tsvc__head p { margin-top: 0.6rem; }
  .tsvc__job.job > summary { padding: 0.5rem 0; min-height: 44px; }
  .tsvc__job.job > summary .job__name { font-size: 0.98rem; }
  .tsvc__job .job__body { padding-bottom: 0.6rem; }
  .tsvc__job .job__body p { margin-top: 0; font-size: 0.9rem; }
  .tsvc__job .job__body .btn { margin-top: 0.6rem; }
  .tsvc__job.job--feature .job__name { font-size: 1.2rem; }

  /* Diesel: shorter photo, tighter panel */
  .tdiesel__photo { height: 24svh; }
  .tdiesel__panel { padding: 1.1rem 1.3rem; margin-top: -1.4rem; }
  .tdiesel h2 { font-size: clamp(1.5rem, 6.5vw, 1.9rem); margin-top: 0.6rem; }
  .tdiesel p { margin-top: 0.7rem; }
  .tdiesel .enginefamilies { margin-top: 0.7rem; }
  .tdiesel .makes { margin-top: 0.7rem; }

  /* How it works: keep ~40svh photos (M3), squeeze everything else */
  .thow__row { min-height: auto; }
  .thow__head { margin-bottom: 0.35rem; }
  .thow__text { padding: 0.4rem var(--gutter) 0.5rem !important; }
  .thow__text h3 { font-size: 1.05rem; }
  .thow__text p { margin-top: 0.3rem; font-size: 0.88rem; }

  /* Fleet Care: shorter plates, tighter head */
  .tfc__head { margin-bottom: 1rem; }
  .tfc__head p { margin-top: 0.6rem; }
  .tfc__grid { grid-auto-rows: 128px; }

  /* About: shorter photo band, tighter insta strip */
  .tabout__photo { height: 34svh; margin-bottom: 1rem; }
  .tabout h2 { margin-top: 0.6rem; }
  .tabout__panel .checklist { margin-top: 1rem; }
  .tabout__panel .checklist li { padding: 0.25rem 0; }
  .tabout__insta { padding-top: 1.3rem; }
  .tabout__insta-head { margin-bottom: 0.8rem; }

  /* Our Work: tighter head */
  .twork__head { margin-bottom: 0.9rem; }
  .twork__head p { margin-top: 0.5rem; }

  /* FAQ: shorter ground band, tighter rows */
  .tfaq__bg { height: 22svh; }
  .tfaq__head { padding-top: 1.1rem; margin-bottom: 0.8rem; }
  .tfaq h2 { font-size: clamp(1.3rem, 6vw, 1.6rem); margin-top: 0.5rem; }
  .tfaq .faq__item summary { padding: 0.85rem 0; }
  .tfaq .faq__body { padding-bottom: 0.85rem; }

  /* Contact: the largest remaining section — trim the CTA band, the
     info cards and the form's own rhythm without touching field ids,
     names or the two-column desktop layout above 900px. */
  .tcta { padding-block: 1.4rem; margin-bottom: 1.3rem; }
  .tcta h2 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .tcta p { margin-top: 0.7rem; }
  .tcta .actions { margin-top: 1.2rem; gap: 0.7rem; }
  .contact { gap: 1.2rem; }
  .contact__info .eyebrow + h2 { margin-top: 0.5rem; }
  .contact__info p { margin-top: 0.6rem; }
  .contact__cards { margin-top: 1.1rem; gap: 0.6rem; }
  .cc { padding: 0.7rem 0.8rem !important; }
  .form { padding: 1.3rem !important; }
  .field { margin-bottom: 0.7rem; }
  .field textarea { min-height: 84px; }
  .form__note { margin-top: 0.3rem; }
}

/* ====================================================================
   M3 ROUND 3 — round 2 still measured 11,498px at 390 against the
   9000px cap. Services' one mandatory K2 band stays at 40svh (that
   number is non-negotiable); every other band and every section not
   given an exact number in the brief takes a second, harder cut here.
   Desktop (900px+) is still untouched.
   ==================================================================== */
@media (max-width: 767px) {
  .tcov__map { height: 10svh; }
  .tcov__panel { padding: 0.9rem var(--gutter) 0.8rem; }
  .tcov__panel-inner { padding: 0.75rem 0.9rem; }
  .tcov h2 { font-size: clamp(1.3rem, 5.5vw, 1.55rem); margin-top: 0.4rem; }
  .tcov .docket { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.1rem 0.6rem; margin: 0.6rem 0; }
  /* stacked label-over-value, not side-by-side: "24/7 Breakdown" has no room to sit
     beside "Hours" in a half-width flex row without being clipped by .docket's own
     overflow:hidden (styles.css, untouched) — full cell width lets it wrap instead. */
  .tcov .docket__row { flex-direction: column; align-items: flex-start; gap: 0.05rem; padding-block: 0.25rem; min-width: 0; }
  .tcov .docket__k, .tcov .docket__v { overflow-wrap: break-word; max-width: 100%; }
  .tcov .docket__v { font-size: 0.88rem; }
  .tcov .checklist { margin-top: 0.5rem; gap: 0.3rem; }
  .tcov .checklist li { padding: 0.05rem 0; font-size: 0.82rem; }
  .tcov .checklist svg { width: 15px; height: 15px; }
  .tcov .btn { margin-top: 0.7rem; padding-block: 0.6rem; }
  .tcov p { font-size: 0.88rem; }

  .tdiesel__photo { height: 10svh; }
  .tdiesel__panel { padding: 0.7rem 0.9rem; margin-top: -0.8rem; }
  .tdiesel h2 { font-size: clamp(1.25rem, 5.5vw, 1.5rem); }
  .tdiesel p { font-size: 0.88rem; }
  .tdiesel .enginefamilies { margin-top: 0.4rem; }
  .tdiesel .enginefamilies li { font-size: 0.75rem; }
  .tdiesel .makes { margin-top: 0.4rem; font-size: 0.78rem; }

  .thow__photo { height: 24svh; }
  .tfaq__bg { height: 12svh; }
  .tfaq__head { padding-top: 0.7rem; margin-bottom: 0.5rem; }
  .tfaq h2 { font-size: clamp(1.1rem, 5vw, 1.3rem); margin-top: 0.4rem; }
  .tfaq p.faq__call { margin-top: 0.5rem; font-size: 0.88rem; }
  .tfaq .faq__item summary { padding: 0.45rem 0; font-size: 0.88rem; min-height: 44px; }
  .tfaq .faq__body { padding-bottom: 0.55rem; }
  .tfaq .faq__body p { font-size: 0.86rem; }

  /* name-only captions at this height: the wide plates' longer names ("On the road,
     not in for repair", "On site, around your run") were clipping by their own
     .tfc__plate overflow:hidden with the description still fighting for the same
     84px box. Drop the description on phone, keep the name legible. */
  .tfc__grid { grid-auto-rows: 88px; gap: 6px; }
  .tfc__cap { padding: 0.5rem 0.55rem 0.4rem; }
  .tfc__desc { display: none; }
  .tfc__name { font-size: 0.82rem; line-height: 1.25; }
  .tfc__head { margin-bottom: 0.8rem; }
  .tfc__head p { font-size: 0.88rem; }

  .tabout__photo { height: 14svh; }
  .tabout__panel { padding-block: 0.7rem; }
  .tabout__panel p { margin-top: 0.5rem; }
  .tabout h2 { font-size: clamp(1.1rem, 5vw, 1.3rem); }
  .tabout__panel p { font-size: 0.88rem; }
  .tabout__insta-strip { gap: 8px; }
  .tabout__insta-tile { flex-basis: 30vw; }
  .tabout__insta .btn { margin-top: 0.7rem; padding-block: 0.55rem; }
  .tabout__panel .checklist { gap: 0.35rem; }
  .tabout__panel .checklist li { font-size: 0.85rem; }
  .tabout__more-btn { margin-top: 0.5rem; }
  .tabout__insta-h { font-size: 1.05rem; }

  .twork__masonry .tw { aspect-ratio: 5 / 4; }

  .tcta { padding-block: 0.5rem; margin-bottom: 0.4rem; }
  .contact { gap: 0.5rem; }
  .tcta h2 { font-size: clamp(1.5rem, 6.5vw, 1.8rem); }
  .tcta p { margin-top: 0.35rem; font-size: 0.88rem; }
  .tcta .actions { margin-top: 0.6rem; }
  .contact__info h2 { font-size: clamp(1.1rem, 5vw, 1.3rem); margin-top: 0.3rem; }
  .contact__info p { font-size: 0.9rem; }
  .contact__cards { margin-top: 0.5rem; gap: 0.3rem; }
  .cc { padding: 0.4rem 0.55rem !important; }
  .cc__value { font-size: 0.92rem; }
  .form { padding: 0.8rem !important; }
  /* Name + Phone stay paired on one row even on phone (still reads Urgency, Name,
     Phone, Location... in DOM/visual order per M5; two short inputs fit at 390). */
  .form .field--row { grid-template-columns: 1fr 1fr !important; gap: 0.6rem; }
  .field label { margin-bottom: 0.25rem; font-size: 0.8rem; }
  .field { margin-bottom: 0.24rem; }
  .contact__cards { margin-top: 0.4rem; }
  .field input, .field select { min-height: 48px; }
  .field textarea { min-height: 66px; }
  .form__more { margin: 0.15rem 0 0.5rem; }
  .form__more summary { padding: 0.5rem 0.7rem; font-size: 0.82rem; min-height: 44px; }
  .form__more-row { padding: 0 0.8rem 0.7rem; }
  .form button[type="submit"] { padding-block: 0.6rem !important; }
  .form__note { margin-top: 0.15rem; font-size: 0.74rem; }
  .form__status { margin-top: 0.3rem; }
  .tcov__panel-inner { box-shadow: none; }
  /* Downtime stays the one centred full-bleed moment (composition_spec), just shorter:
     styles.css's untouched min-height:62vh (523px at 844) is the last real lever left. */
  .imageband { min-height: 42vh; }
  .imageband__inner { padding-block: 1.6rem; }
  .imageband p { margin-top: 0.6rem; font-size: 0.95rem; }
  .imageband .btn { margin-top: 1rem !important; }
}


/* ====================================================================
   S1176 INTEGRATION GRAFTS (main thread, after judging the three candidates)
   1. the header number shows at 390 (number-first proved it fits beside the logo and the toggle);
   2. the phone photo bands that the 9,000px cap had squeezed to slivers (10 to 14svh) get their
      composition back: a map you can read, a truck you can see; the FAQ ground sliver is dropped;
   3. Fleet Care keeps its four descriptions on phone at the taller plate number-first used;
   4. the Google reviews block (real quotes) and the Google row in the dispatch card.
   ==================================================================== */
@media (max-width: 400px) { .nav__call span { display: inline; } }
@media (max-width: 767px) {
  .tcov__map { height: 30svh; }
  .tdiesel__photo { height: 26svh; }
  .tabout__photo { height: 30svh; }
  .tfaq__bg { display: none; }
  .tfaq__head { padding-top: 1.4rem; }
  .tfc__grid { grid-auto-rows: 172px; gap: 5px; }
  .tfc__cap { padding: 0.8rem 0.65rem 0.55rem; }
  .tfc__desc { display: block; font-size: 0.7rem; line-height: 1.3; margin-top: 0.2rem; }
  .tfc__name { font-size: 0.8rem; line-height: 1.15; }
  .hero__dispatch-sub { font-weight: 500; font-size: 0.84rem; color: var(--muted); }
}
.treviews { grid-column: 1 / -1; padding: clamp(2rem, 4vw, 3rem) var(--gutter) 0; }
.treviews__head { margin-bottom: 1rem; }
.treviews__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, 2vw, 1.5rem); margin-top: 0.5rem; }
.treviews__list.logbook { max-width: none; }
.treviews .logrow { padding-inline: 0; }
.treviews .logrow:hover { background: transparent; }
.treviews__link { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.1rem; color: var(--blue-bright); font-weight: 600; font-size: 0.92rem; min-height: 44px; }
@media (max-width: 900px) { .treviews { grid-column: 1; padding-inline: var(--gutter); min-width: 0; } }
@media (max-width: 767px) {
  .treviews { padding-top: 1.4rem; }
  .treviews__list.logbook {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; border-top: 0;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-bottom: 0.3rem;
    -webkit-overflow-scrolling: touch; min-width: 0;
  }
  .treviews .logrow { flex: 0 0 82vw; scroll-snap-align: start; display: block; padding: 0.9rem 0 0.7rem; border-top: 1px solid var(--line); border-bottom: 0; }
  .treviews .logrow__ref { display: block; margin-bottom: 0.4rem; }
  .treviews .logrow blockquote { font-size: 0.92rem; }
  .treviews__link { margin-top: 0.6rem; }
}


/* S1176 REVIEW FIXES: the three text rules this build introduced under 12px, lifted to 0.75rem
   (the dispatch-card labels sit in the first viewport; the Fleet Care descriptions and the form
   note are the other two). Tap targets at exactly 44px were accepted as meeting the spec. */
@media (max-width: 767px) {
  .hero__dispatch-k { font-size: 0.75rem; }
  .tfc__desc { font-size: 0.75rem; }
  .form__note { font-size: 0.78rem; }
}


/* S1176 FLEET CARE PHONE CAPTIONS (Fil, 20 Sep): on a phone the caption sits UNDER the photo on the
   ink ground, not over it. The plate becomes a column: a 118px photo, then the name and one line. */
@media (max-width: 767px) {
  .tfc__grid { grid-auto-rows: auto; gap: 8px; }
  .tfc__plate { display: flex; flex-direction: column; background: var(--ink-2); }
  .tfc__plate img { position: static; width: 100%; height: 118px; object-fit: cover; }
  .tfc__cap { position: static; background: none; padding: 0.55rem 0.6rem 0.7rem; }
  .tfc__name { font-size: 0.86rem; line-height: 1.2; }
  .tfc__desc { font-size: 0.78rem; line-height: 1.35; margin-top: 0.25rem; color: var(--muted); }
}

/* S1202 (23 Sep): the hi-vis network maintenance photo (Katrin's swap 4) is too bright for the standard
   scrim; the description washed out at desktop. Stronger scrim on that tile only, overlay widths only. */
@media (min-width: 768px) {
  .tfc__plate--hivis .tfc__cap { background: linear-gradient(0deg, oklch(0.1 0.03 var(--hue) / 0.95), oklch(0.1 0.03 var(--hue) / 0.72) 55%, transparent 100%); }
}