/* ════════════════════════════════════════════════════════════════════
   CELL 3 — WHAT LEAVES THIS SHOP · "BUILT TO BE REMEMBERED"
   ALL selectors scoped under #cell-3 (no leak into siblings).
   Authority: picks.json cell:3 + WOW_CONTRACTS cell:3 + locked board
   (section-03) + DESIGN.md. Palette from tokens.css ONLY (base #222222 ·
   accent #C2231B Signal Red · support #B7BCC1 Polished Steel · breath
   #E9E6E1 Primer Gray · ink-deep #141414). Radius 0 = machined edge.

   One job (DESIGN.md rhythm): CAPABILITY, rendered as stamped spec-plates.
   Ambient life = the red service-stripe GAUGE (fills on entry, idle tremor).
   Red only ever as the thin stripe / the CTA plate — never a field.
   Continuous dark run: cell-2 (ink) → THIS (ink) → cell-4 (ink); no seam.
   ════════════════════════════════════════════════════════════════════ */

/* the section keeps the default .section vertical padding (dark run rhythm).
   isolate so the gauge/sheen blends never reach siblings. */
#cell-3 {
  isolation: isolate;
  /* R85: plates band belongs to the hero's odometer — tighten the top */
  padding-block-start: calc(var(--section-pad-y) * 0.2);
}
#cell-3 .svc {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

/* ---- SECTION HEAD ---- */
#cell-3 .svc__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
/* eyebrow — Plex Mono caps + steel hairline lead-in (DESIGN.md text system,
   same primitive family as cell-1's hero eyebrow) */
#cell-3 .svc__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  color: var(--support);
  margin: 0;
}
#cell-3 .svc__eyebrow-rule {
  display: inline-block;
  width: clamp(1.75rem, 4vw, 3rem);
  height: 1px;
  background: var(--support);
  flex: none;
}
/* H2 — display caps, Primer-white on charcoal (H2 section step, DESIGN.md).
   Big Shoulders 800 to match the hero's fixed "too-tall" weight decision. */
#cell-3 .svc__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--step-section);
  line-height: 0.96;
  letter-spacing: 0.008em;
  color: var(--breath);
}

/* ════════════════════════════════════════════════════════════════════
   THREE SPEC-PLATE TILES
   ════════════════════════════════════════════════════════════════════ */
#cell-3 .svc__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.1rem, 2vw, 1.9rem);
  /* every plate in a row stretches to the tallest — the equal-height contract
     that lets the button footer (margin-top:auto) land on ONE shared baseline
     regardless of blurb line-count (anti-fail #5, made explicit not implicit). */
  align-items: stretch;
}

/* one tile = a stamped steel plate: photo top, dark instrument panel below.
   Machined 0px edge, a brushed-steel hairline frame, a pressed-steel drop so
   it reads as a real plate sitting on the charcoal floor. */
#cell-3 .svc-plate {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, var(--ink-800) 0%, #262626 100%);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  box-shadow: 0 2px 0 rgba(0,0,0,0.45),
              inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  /* P2 row 6: the WHOLE tile is now an <a> link to its filtered projects view.
     Reset the anchor so it renders exactly as the old article did (no underline,
     inherited colour) — the tile press below is the affordance. */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  /* plate-press hover uses transform; promote only while interactive */
  transition: transform 140ms var(--ease-out),
              box-shadow 140ms var(--ease-out),
              border-color 140ms var(--ease-out);
}
/* keyboard focus lands a visible ring on the whole plate (a11y for the link) */
#cell-3 .svc-plate:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- TILE MEDIA — the restored car, ONE consistent grade (cohesion with
   cell-1's hero: slight desat + warm lift, honest tungsten daylight). ----
   Frame is 4:3 (shorter than 3:2) so the plate face reads with the board's
   presence — less dead sky/tree headroom, the car fills more of the plate. */
#cell-3 .svc-plate__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-850);
  border-bottom: 1px solid var(--ink-700);
}
#cell-3 .svc-plate__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* per-car seat so each body sits full in the frame (the three photos frame
     their subject differently — one object-position can't serve all three) */
  object-position: center 60%;
  /* THE ONE CONSISTENT GRADE — identical filter chain to cell-1's hero photo
     so every image across the site sits in the same tungsten world. */
  filter: saturate(0.92) contrast(1.03) brightness(1.0) sepia(0.16) hue-rotate(-8deg);
  transition: transform 480ms var(--ease-out);
}
/* per-car object-position — seat each body full in the 4:3 plate:
   P0049 Buick sits low with tall tree headroom → pull the frame DOWN to the car;
   P0026 Camaro is centred → hold centre; P0023 Chevelle sits mid → slight down. */
#cell-3 .svc-plate:nth-child(1) .svc-plate__photo { object-position: center 72%; }
#cell-3 .svc-plate:nth-child(2) .svc-plate__photo { object-position: center 56%; }
#cell-3 .svc-plate:nth-child(3) .svc-plate__photo { object-position: center 60%; }
/* a faint top-down darkening so the panel seam reads and the plate feels lit
   from the shop worklight above (never a heavy vignette — T2.26/DESIGN.md) */
#cell-3 .svc-plate__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(20,20,20,0.00) 55%,
    rgba(20,20,20,0.22) 82%,
    rgba(20,20,20,0.40) 100%);
}

/* SHEEN — a slow tungsten highlight crawling across the photo, ambient life
   on the plate face (compositor-cheap: transform-only translate of a soft
   diagonal band). Distinct from the gauge; keeps the media alive at rest. */
#cell-3 .svc-plate__sheen {
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  /* P2 rows 2+3 — TRUE-ZERO EDGE-FADE (T2.19 / wave §4.2): the swipe must reach
     alpha 0 at every frame edge so no rectangle/hard luminance step is visible at
     crawl. Horizontal: the light band's tails are widened to a fully-transparent
     0%/100% (already alpha 0) with the bright core narrowed so the ramp is gradual
     — no step at any translate position. */
  background: linear-gradient(105deg,
    rgba(255, 178, 110, 0.00) 0%,
    rgba(255, 182, 116, 0.04) 38%,
    rgba(255, 186, 120, 0.10) 46%,
    rgba(255, 200, 140, 0.15) 50%,
    rgba(255, 186, 120, 0.10) 54%,
    rgba(255, 182, 116, 0.04) 62%,
    rgba(255, 178, 110, 0.00) 100%);
  /* Vertical: feather the top+bottom edges to transparent so the band never paints
     a hard horizontal line against the photo frame as it crawls. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  transform: translateX(-140%);
}

/* ---- TILE PANEL — the instrument panel below the photo ---- */
#cell-3 .svc-plate__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: clamp(1.15rem, 1.8vw, 1.7rem);
  flex: 1 1 auto;
}
/* namerow fixes the vertical slot so all three names align on the same
   baseline even if one wraps (anti-fail #5 — kill the step-ladder). */
#cell-3 .svc-plate__namerow {
  display: flex;
  align-items: flex-end;
  min-height: 1.05em;
}
/* service name — display caps, ALL THREE the same size (var(--step-1) via the
   token ramp, held identical); never re-sized per tile. */
#cell-3 .svc-plate__name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: var(--breath);
  margin: 0;
}
/* red hairline accent under the name (board: the short red rule) */
#cell-3 .svc-plate__accent {
  display: block;
  width: 2.4rem;
  height: 2px;
  background: var(--accent);
  margin-top: 0.15rem;
}

/* ════════════════════════════════════════════════════════════════════
   RED SERVICE-STRIPE GAUGE — the ambient life of this section.
   A thin tach-style bar: a dark track, a red fill that reaches its resting
   reading (--gauge, 0..1) and a bright needle at the fill's leading edge that
   idle-trembles (powered-on, not printed). ALIVE AT t0: the fill width is set
   from --gauge directly, so with motion OFF the bar is already at its reading.
   With motion on, js sweeps it 0→reading once on scroll-in, then the needle
   tremor keeps running (own-clock atmosphere, per WOW contract).
   Compositor-cheap: fill animates transform: scaleX; needle animates transform.
   ════════════════════════════════════════════════════════════════════ */
#cell-3 .svc-plate__gauge {
  position: relative;
  height: 8px;
  margin: 0.35rem 0 0.2rem;
  /* the tach ticks — a faint ruled scale behind the bar (spec-sheet honesty) */
  background:
    repeating-linear-gradient(to right,
      rgba(183,188,193,0.16) 0 1px,
      transparent 1px 10%);
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.5);
  overflow: hidden;
}
/* recessed track groove */
#cell-3 .svc-plate__gauge-track {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #161616, #202020);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
/* the red fill — anchored left, scaled along X to the reading. Default (no JS
   / reduced-motion) sits AT the reading via --gauge. */
#cell-3 .svc-plate__gauge-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--gauge, 0.7));
  background: linear-gradient(to right,
    #8f1810 0%,
    var(--accent) 62%,
    #e0473d 100%);
  box-shadow: 0 0 8px rgba(194,35,27,0.45);
}
/* the needle — a bright vertical tick riding the fill's leading edge. Its left
   position tracks the reading (--gauge as a percentage). Idle tremor is a tiny
   translateX keyframe (≤1px), so the gauge reads "running" at rest. */
#cell-3 .svc-plate__gauge-needle {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: calc(var(--gauge, 0.7) * 100%);
  width: 2px;
  margin-left: -1px;
  background: #ffd8cf;
  box-shadow: 0 0 6px rgba(255,120,100,0.9);
}

/* ---- BLURB — their FAQ voice, Plex Sans, steel-lit on the panel ---- */
#cell-3 .svc-plate__blurb {
  font-family: var(--font-body);
  font-size: var(--step-mini);
  line-height: 1.5;
  color: var(--slate-300);
  margin: 0.15rem 0 0;
  max-width: 34ch;
}

/* ---- TILE BUTTON — a stamped brushed-steel plate, machined 0px edge,
   Plex Mono caps, pressed-steel drop, arrow. ---- ANTI-FAIL #5 (step-ladder):
   the button is the panel's FOOTER — margin-top:auto shoves it to the bottom of
   the flex-column panel, and because every plate stretches to equal height
   (grid align-items:stretch) the panel floor is a SHARED card-bottom baseline.
   So all three buttons align on ONE line no matter how many lines the blurb
   above runs (Concours 5 · Resto-Mods 3 · Street Rods 4). The button is NOT
   coupled to its body's length. */
#cell-3 .svc-plate__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  align-self: flex-start;
  margin-top: auto;
  padding: 0.72rem 1.05rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--breath);
  background: linear-gradient(to bottom, #2f2f2f 0%, #232323 100%);
  border: 1px solid var(--slate-600);
  border-radius: var(--radius);
  box-shadow: 0 2px 0 rgba(0,0,0,0.55),
              inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform 140ms var(--ease-out),
              box-shadow 140ms var(--ease-out),
              border-color 140ms var(--ease-out),
              color 140ms var(--ease-out);
}
#cell-3 .svc-plate__btn-arrow {
  color: var(--accent);
  transition: transform 140ms var(--ease-out);
}

/* ════════════════════════════════════════════════════════════════════
   PLATE-PRESS HOVER (KEEP #11) — scale-not-shift, ≤150ms, hover-capable only
   (T2.27 / motion lib §1.2). The plate presses DOWN a touch (its drop shrinks),
   the steel warms, the photo eases in a hair, the arrow steps.
   ════════════════════════════════════════════════════════════════════ */
@media (hover: hover) {
  #cell-3 .svc-plate:hover {
    transform: translateY(2px) scale(1.006);
    border-color: var(--slate-600);
    box-shadow: 0 0 0 rgba(0,0,0,0.45),
                inset 0 1px 0 rgba(255,255,255,0.06),
                0 10px 30px -18px rgba(0,0,0,0.7);
  }
  #cell-3 .svc-plate:hover .svc-plate__photo {
    transform: scale(1.03);
  }
  #cell-3 .svc-plate__btn:hover {
    transform: translateY(2px) scale(1.01);
    box-shadow: 0 0 0 rgba(0,0,0,0.55),
                inset 0 1px 0 rgba(255,255,255,0.06);
    border-color: var(--support);
    color: #fff;
  }
  #cell-3 .svc-plate__btn:hover .svc-plate__btn-arrow {
    transform: translateX(3px);
  }
}

/* ════════════════════════════════════════════════════════════════════
   IN-HOUSE CRAFTS SPEC-SHEET — a shop work-order line: steel hairlines top
   and bottom, Plex Mono caps, dot-separated. ~Claims line 26 CONFIRMED.
   ════════════════════════════════════════════════════════════════════ */
#cell-3 .svc__crafts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  text-align: center;
  margin-top: var(--space-xs);
}
#cell-3 .svc__crafts-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--ink-700) 12%,
    var(--ink-700) 88%,
    transparent 100%);
}
#cell-3 .svc__crafts-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.9rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.82rem, 1.35vw, 1.02rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--breath);
}
#cell-3 .svc__craft { white-space: nowrap; }
#cell-3 .svc__craft-dot { color: var(--accent); }
#cell-3 .svc__crafts-caption {
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--slate-400);
}

/* ════════════════════════════════════════════════════════════════════
   RED STAMPED-PLATE CTA — the board's "SEE EVERY SERVICE" plate, machined
   steel with corner bolts. Red as a PLATE only (never a field). Alive-at-t0
   ready-glow, plate-press on hover.
   ════════════════════════════════════════════════════════════════════ */
#cell-3 .svc__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xs);
}
#cell-3 .svc__cta-plate {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(15rem, 30vw, 20rem);
  padding: 1.05rem 2.4rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to bottom, #d1291f 0%, var(--accent) 52%, #a51a12 100%);
  border: 1px solid #7d140e;
  border-radius: var(--radius);
  box-shadow: 0 3px 0 var(--terracotta-deep),
              inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform 140ms var(--ease-out),
              box-shadow 140ms var(--ease-out);
}
#cell-3 .svc__cta-label { position: relative; z-index: 1; }
/* the four stamped corner bolts (license-plate hardware) */
#cell-3 .svc__cta-bolt {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffb3ab 0%, #7d140e 75%);
  box-shadow: inset 0 0 1px rgba(0,0,0,0.6);
}
#cell-3 .svc__cta-bolt--tl { top: 8px;  left: 10px; }
#cell-3 .svc__cta-bolt--tr { top: 8px;  right: 10px; }
#cell-3 .svc__cta-bolt--bl { bottom: 8px; left: 10px; }
#cell-3 .svc__cta-bolt--br { bottom: 8px; right: 10px; }
@media (hover: hover) {
  #cell-3 .svc__cta-plate:hover {
    transform: translateY(2px) scale(1.006);
    box-shadow: 0 1px 0 var(--terracotta-deep),
                inset 0 1px 0 rgba(255,255,255,0.22);
  }
}

/* ════════════════════════════════════════════════════════════════════
   MOTION LAYER — added only when js confirms motion is on (root.cell3-ready).
   Static (root.cell3-static / reduced-motion / no-JS): everything above is
   already the correct RESTING state (gauge filled, plate lit). t0-safe.
   ════════════════════════════════════════════════════════════════════ */

/* SHEEN CRAWL — slow tungsten highlight across each plate photo, staggered so
   the three don't pulse in lockstep. Own-clock ambient (atmosphere is allowed
   its own clock per WOW contract). transform-only = compositor-cheap. */
@keyframes svc-sheen {
  0%   { transform: translateX(-140%); }
  62%  { transform: translateX(240%); }
  100% { transform: translateX(240%); }   /* long dark rest between passes */
}
.cell3-ready #cell-3 .svc-plate__sheen {
  animation: svc-sheen 9s ease-in-out infinite;
  will-change: transform;
}
.cell3-ready #cell-3 .svc-plate:nth-child(2) .svc-plate__sheen { animation-delay: 3s; }
.cell3-ready #cell-3 .svc-plate:nth-child(3) .svc-plate__sheen { animation-delay: 6s; }

/* NEEDLE TREMOR — a barely-perceptible ≤1px jitter so the gauge reads "powered
   on" at rest (WOW contract: idle needle-tremor). Irregular so it's engine
   idle, not a sine. Only runs after the sweep-in (js adds .gauge-live). */
@keyframes svc-needle-idle {
  0%,100% { transform: translateX(0); }
  18% { transform: translateX(0.6px); }
  33% { transform: translateX(-0.4px); }
  52% { transform: translateX(0.8px); }
  71% { transform: translateX(-0.5px); }
  86% { transform: translateX(0.3px); }
}
.cell3-ready #cell-3 .svc-plate.gauge-live .svc-plate__gauge-needle {
  animation: svc-needle-idle 1.7s ease-in-out infinite;
  will-change: transform;
}

/* SWEEP-IN — before the gauge goes live, js holds fill+needle at 0 and hands
   them a one-shot transition to the reading. These are the pre-sweep (empty)
   and transition rules; js flips .gauge-live to release them to --gauge. */
.cell3-ready #cell-3 .svc-plate:not(.gauge-live) .svc-plate__gauge-fill {
  transform: scaleX(0);
}
.cell3-ready #cell-3 .svc-plate:not(.gauge-live) .svc-plate__gauge-needle {
  left: 0;
}
.cell3-ready #cell-3 .svc-plate .svc-plate__gauge-fill {
  transition: transform 900ms var(--ease-out);
}
.cell3-ready #cell-3 .svc-plate .svc-plate__gauge-needle {
  transition: left 900ms var(--ease-out);
}
.cell3-ready #cell-3 .svc-plate.gauge-live .svc-plate__gauge-fill {
  transform: scaleX(var(--gauge, 0.7));
}
.cell3-ready #cell-3 .svc-plate.gauge-live .svc-plate__gauge-needle {
  left: calc(var(--gauge, 0.7) * 100%);
}

/* READY-GLOW on the red CTA plate — a slow ambient pulse behind it so it's
   alive at rest (WOW contract ready-pulse family). opacity-only, pre-rendered
   glow on ::before — never an animated blur. */
#cell-3 .svc__cta-plate::before {
  content: '';
  position: absolute;
  inset: -6px;
  z-index: 0;
  border-radius: var(--radius);
  background: radial-gradient(60% 120% at 50% 50%, rgba(194,35,27,0.42), rgba(194,35,27,0) 72%);
  opacity: 0.5;
  pointer-events: none;
}
@keyframes svc-cta-glow { 0%,100% { opacity: 0.34; } 50% { opacity: 0.62; } }
.cell3-ready #cell-3 .svc__cta-plate::before {
  animation: svc-cta-glow 3.6s ease-in-out infinite;
  will-change: opacity;
}

/* reveal primitive (base.css) already hides [data-reveal] under .js and shows
   .is-in; motion.js orchestrates section reveals globally. Nothing here gates
   CONTENT behind reveal — the tiles/gauge/crafts are all present at t0. */

/* reduced-motion belt-and-suspenders: kill every ambient animation, seat the
   gauge at its reading (base rule already does), no sheen/tremor/glow. */
@media (prefers-reduced-motion: reduce) {
  #cell-3 .svc-plate__sheen,
  #cell-3 .svc-plate__gauge-needle,
  #cell-3 .svc__cta-plate::before { animation: none !important; }
  #cell-3 .svc-plate__gauge-fill { transition: none !important; transform: scaleX(var(--gauge, 0.7)); }
  #cell-3 .svc-plate__gauge-needle { transition: none !important; left: calc(var(--gauge, 0.7) * 100%); }
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile is desktop RECOMPOSED, not squished (T2.31).
   ════════════════════════════════════════════════════════════════════ */

/* tablet: 3 → 2 across, the third drops to a full-width row */
@media (max-width: 900px) {
  #cell-3 .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #cell-3 .svc-plate:nth-child(3) { grid-column: 1 / -1; }
  /* the full-width third tile goes photo-left / panel-right so it doesn't
     become a tall lonely stack */
  #cell-3 .svc-plate:nth-child(3) {
    flex-direction: row;
  }
  #cell-3 .svc-plate:nth-child(3) .svc-plate__media {
    flex: 0 0 44%;
    aspect-ratio: auto;
    border-bottom: none;
    border-right: 1px solid var(--ink-700);
  }
  #cell-3 .svc-plate:nth-child(3) .svc-plate__panel {
    justify-content: center;
  }
}

/* mobile: single column, tiles stack; the third returns to the standard
   photo-top layout */
@media (max-width: 620px) {
  #cell-3 .svc__grid { grid-template-columns: 1fr; }
  #cell-3 .svc-plate:nth-child(3),
  #cell-3 .svc-plate:nth-child(3) { flex-direction: column; }
  #cell-3 .svc-plate:nth-child(3) .svc-plate__media {
    flex: none;
    aspect-ratio: 3 / 2;
    border-bottom: 1px solid var(--ink-700);
    border-right: none;
  }
  #cell-3 .svc-plate__blurb { max-width: none; }
  #cell-3 .svc__crafts-label { gap: 0.4rem 0.7rem; letter-spacing: 0.12em; }
  #cell-3 .svc__cta-plate { width: 100%; min-width: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   UNDERROW (R77) — CTA plate LEFT + crafts line filling the remaining width.
   ════════════════════════════════════════════════════════════════════ */
/* R78: section exhale reduced (144px -> 96px) + the crafts block compressed to
   read the SAME height as the CTA plate (caption deleted, rule gaps tightened)
   so the row is uniform. Cards->underrow gap stays = title->cards gap (52px). */
#cell-3 { padding-block-end: 6rem; }
#cell-3 .svc__underrow {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  /* the .svc wrap already adds its 52px flex gap; pull back so the visual
     cards->underrow gap matches the title->cards gap (~22px) */
  margin-top: -30px;
}
#cell-3 .svc__underrow .svc__crafts { gap: 0.9rem; }
/* R79: stretch the spec line across its full width — words distribute to the
   edges so the line reaches left toward the plate instead of pooling centred */
#cell-3 .svc__underrow .svc__crafts-label {
  width: 100%;
  justify-content: space-between;
}
#cell-3 .svc__underrow .svc__cta { margin-top: 0; flex: none; justify-content: flex-start; }
#cell-3 .svc__underrow .svc__crafts { margin-top: 0; flex: 1; min-width: 0; }
@media (max-width: 900px) {
  #cell-3 .svc__underrow { flex-direction: column-reverse; align-items: stretch; gap: var(--space-m); }
  #cell-3 .svc__underrow .svc__cta { justify-content: center; }
  /* MOB pass: the R79 edge-to-edge stretch is a DESKTOP composition (line
     reaching toward the plate). Stacked, space-between justifies ragged
     wrapped lines with dangling dots — pool the words centred instead. */
  #cell-3 .svc__underrow .svc__crafts-label { justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════
   CREDENTIAL LINE (R86, recomposed R93b) — one quiet typographic row
   CENTERED under the hero's data plate, pushed up against its bleed-over
   butt (Dex mock read). Icons run a touch taller than the text cap height
   so the marks stay readable at whisper scale. Red micro-dots separate.
   ════════════════════════════════════════════════════════════════════ */
#cell-3 .cred {
  /* the bleed plate hangs over this section's top — the row tucks up right
     against its bottom edge (David: "pushed up right against its butt";
     probed: 49px of section padding reclaimed to ~18px of air at 1440) */
  margin: -11px 0 clamp(2rem, 1.5rem + 2vw, 3.2rem);
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: clamp(1.3rem, 2.4vw, 2.2rem);
  row-gap: 0.7rem;
}
#cell-3 .cred__item {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 0.8vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-400);
  text-align: left;
}
/* red micro-dot between items (not after the last) */
#cell-3 .cred__item + .cred__item::before {
  content: "";
  position: absolute;
  left: calc(clamp(1.3rem, 2.4vw, 2.2rem) / -2);
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
}
#cell-3 .cred__icon {
  flex: none;
  /* R93b: icons run taller than the text cap height (mock read) — the mark
     stays legible while the words whisper */
  width: 2.1rem;
  height: 2.1rem;
  opacity: 0.85;
}
#cell-3 .cred__item:nth-child(1) .cred__icon { width: 3.1rem; height: 1.4rem; } /* R89b-R3: David's handshake gen is wide art (2.2:1) — wide slot, same optical mass */
#cell-3 .cred__item:nth-child(2) .cred__icon { width: 2.3rem; height: 2.3rem; }
#cell-3 .cred__item:nth-child(3) .cred__icon { width: 2.5rem; height: 2.5rem; }
#cell-3 .cred__icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.55)); }
@media (max-width: 760px) {
  #cell-3 .cred { flex-direction: column; row-gap: 0.9rem; margin-top: 0; }
  #cell-3 .cred__item + .cred__item::before { display: none; }
}
@media (max-width: 620px) {
  /* R98: three equal breaths — uniform icon-box heights so the stacked rows
     read evenly (mixed 1.4/2.3/2.5rem heights made the third gap look bigger);
     margin-bottom shrinks because the re-homed phone tile lands right below
     (cell-1.js drops it after this list at ≤620) and owns the section gap */
  #cell-3 .cred { row-gap: 0.85rem; margin-bottom: 0.95rem; }
  #cell-3 .cred__item:nth-child(2) .cred__icon { width: 1.9rem; height: 1.5rem; }
  #cell-3 .cred__item:nth-child(3) .cred__icon { width: 2.1rem; height: 1.45rem; }
}