/* AUTONOMY — homepage rebuild styles (forward-thinking) */

/* =========================================================
   SELECTED WORK — the proof leads
   ========================================================= */
.work-lead {
  background: var(--paper);
  padding: clamp(46px, 5.8vh, 69px) var(--gutter);
}
.work-lead__inner {
  max-width: var(--max);
  margin: 0 auto;
}
.work-lead__head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 4vw, 80px);
  align-items: end;
  margin-bottom: clamp(35px, 4.3vh, 52px);
}
.work-lead__lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-700);
  font-weight: 500;
  letter-spacing: -0.005em;
  max-width: 44ch;
  margin: 0;
}

/* Browser chrome (shared) */
.browser-chrome {
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
  padding: 11px 16px;
  background: #F2F0EC;
  border-bottom: 1px solid var(--line);
}
.browser-chrome--sm {
  padding: 8px 12px;
  grid-template-columns: 44px 1fr 44px;
}
.browser-chrome__dots {
  display: flex;
  gap: 6px;
}
.browser-chrome__dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(14,16,20,0.16);
}
.browser-chrome--sm .browser-chrome__dots span { width: 8px; height: 8px; }
.browser-chrome__dots span:first-child { background: #FF5F57; }
.browser-chrome__dots span:nth-child(2) { background: #FEBC2E; }
.browser-chrome__dots span:nth-child(3) { background: #28C840; }
.browser-chrome__url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-500);
  text-align: center;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser-chrome--sm .browser-chrome__url { font-size: 10px; }

/* Featured case */
.work-featured {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: stretch;
  margin-bottom: clamp(20px, 2.5vh, 32px);
}
.work-featured__media {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(14,16,20,0.12), 0 8px 20px rgba(14,16,20,0.06);
  text-decoration: none;
  color: inherit;
  isolation: isolate;
}
.work-featured__media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.work-featured__media:hover img { transform: scale(1.015); }
.work-featured__live {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 12px;
  background: rgba(10, 12, 16, 0.78);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  z-index: 2;
}
.work-featured__live .pulse {
  width: 7px; height: 7px;
  background: #5ED27F;
  box-shadow: 0 0 0 4px rgba(94, 210, 127, 0.20);
}
.work-featured__meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 2vw, 32px) 0;
}
.work-featured__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.work-featured__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -0.036em;
  margin: 14px 0 0 0;
  color: var(--ink-900);
}
.work-featured__copy {
  margin: 16px 0 0 0;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink-700);
  letter-spacing: -0.005em;
  max-width: 38ch;
}
.work-featured__copy strong {
  font-weight: 700;
  color: var(--ink-900);
}
.work-featured__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2vw, 28px) clamp(20px, 2.5vw, 36px);
  margin-top: clamp(20px, 2.5vh, 29px);
  padding-top: clamp(17px, 2.2vh, 23px);
  border-top: 1px solid var(--line);
}
.work-stat {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms var(--ease-out) calc(var(--i, 0) * 110ms),
    transform 800ms var(--ease-out) calc(var(--i, 0) * 110ms);
}
.work-featured__stats.is-in .work-stat {
  opacity: 1;
  transform: none;
}
.work-stat__num {
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.work-stat__unit {
  font-size: 0.42em;
  color: var(--ink-400);
  margin-left: 2px;
  font-weight: 600;
}
.work-stat__label {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.work-featured__cta { margin-top: clamp(14px, 1.4vh, 20px); }

/* Compact "also live" strip */
.work-strip {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  padding-top: clamp(14px, 1.8vh, 20px);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.work-strip__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  margin-right: 4px;
}
.work-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  transition: transform 240ms var(--ease-out), border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.work-strip__item:hover {
  transform: translateY(-2px);
  border-color: rgba(14,16,20,0.20);
  box-shadow: 0 10px 24px rgba(14,16,20,0.06);
}
.work-strip__item img {
  width: 56px;
  height: 40px;
  object-fit: cover;
  object-position: top center;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #F2F0EC;
}
.work-strip__item span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.work-strip__item strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.018em;
  color: var(--ink-900);
}
.work-strip__item em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-500);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.work-strip__more {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.012em;
  color: var(--ink-900);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 220ms var(--ease-out);
}
.work-strip__more:hover { opacity: 0.6; }

/* (legacy grid styles kept for now, but unused on homepage) */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  margin-bottom: clamp(29px, 3.6vh, 40px);
}
.work-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 240ms var(--ease-out);
  isolation: isolate;
}
.work-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 56px rgba(14,16,20,0.10);
  border-color: rgba(14,16,20,0.18);
}
.work-card__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #F2F0EC;
  border-bottom: 1px solid var(--line);
}
.work-card__media img {
  display: block;
  width: 100%;
  height: calc(100% - 30px);
  object-fit: cover;
  object-position: top center;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.work-card:hover .work-card__media img { transform: scale(1.04); }
.work-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}
.work-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}
.work-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.024em;
  margin: 0;
  color: var(--ink-900);
}
.work-card__pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: rgba(14, 16, 20, 0.04);
  border: 1px solid var(--line);
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  font-weight: 600;
}
.work-card__copy {
  margin: 0 0 18px 0;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink-700);
  letter-spacing: -0.005em;
}
.work-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.work-card__stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.work-card__stat-num em {
  font-style: normal;
  font-size: 0.6em;
  color: var(--ink-400);
  margin-left: 2px;
  font-weight: 700;
}
.work-card__stat-lbl {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.work-lead__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: clamp(17px, 2.2vh, 23px);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

@media (max-width: 1100px) {
  .work-featured { grid-template-columns: 1fr; }
  .work-featured__meta { padding: 8px 0 0; }
}
@media (max-width: 720px) {
  .work-lead__head { grid-template-columns: 1fr; gap: 24px; }
  .work-featured__name { font-size: clamp(28px, 8vw, 40px); }
  .work-strip__more { margin-left: 0; width: 100%; padding-top: 4px; }
}


/* Split card (For Dealerships / For OEMs) — subtle zoom on hover */
.split-card img {
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), filter 600ms var(--ease-out) !important;
}
.split-card:hover img {
  transform: scale(1.05);
  filter: saturate(0.95) brightness(0.85) !important;
}

/* Hero kinetic words */
.kw { line-height: inherit; }
.hero-headline .kw:nth-of-type(2) { color: rgba(255, 255, 255, 0.5); }

/* Scroll-pinned platform showcase */
.pin {
  position: relative;
  background: #0A0C12;
  color: #fff;
}
/* Light variant — keeps device mockups self-contained inside */
.pin.pin--light {
  background: var(--paper, #fff);
  color: var(--ink-900);
}
.pin.pin--light .stage { opacity: 1; }
.pin.pin--light .stage__no { color: var(--ink-400); }
.pin.pin--light .stage.is-active .stage__no { color: var(--ink-900); }
.pin.pin--light .stage__title { color: var(--ink-500); }
.pin.pin--light .stage.is-active .stage__title { color: var(--ink-900); }
.pin.pin--light .stage__body { color: var(--ink-700); }
.pin__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.pin__left {
  position: relative;
}
.pin__right {
  position: relative;
  height: 75vh;
}
.stage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.stage {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: start;
  opacity: 0.32;
  /* Opacity is scroll-driven inline; transform transition stays for subtle settle */
  transition: transform 320ms var(--ease-out);
}
.stage.is-active { opacity: 1; }
.stage__no {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  padding-top: 10px;
  letter-spacing: 0.04em;
  transition: color 320ms var(--ease-out);
}
.stage.is-active .stage__no { color: rgba(255,255,255,0.85); }
.stage__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin: 0;
  color: #fff;
}
.stage__body {
  margin-top: 0;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 420ms var(--ease-out), opacity 320ms var(--ease-out), margin-top 320ms var(--ease-out);
}
.stage.is-active .stage__body {
  max-height: 220px;
  opacity: 1;
  margin-top: 12px;
}

.panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.97) translateY(14px);
  /* Opacity + transform set inline by scroll handler — no CSS transition (avoids lag against scroll). */
  pointer-events: none;
  will-change: opacity, transform;
}
.panel.is-active {
  pointer-events: auto;
  z-index: 2;
  opacity: 1;
  transform: none;
}

/* Device mockups. The image already contains its own bezel, browser chrome and
   drop shadow, so nothing is drawn around it: no frame, no border, no radius,
   none of the 100px shadow the built mocks carry. Flattened onto white at
   import, which is exactly the section background, so the soft shadow blends. */
.panel__shot {
  display: block;
  width: 100%;
  height: auto;
  max-width: 645px;
}

/* Static (de-pinned) variant: a normal content-height section, no scroll pin,
   so there is no oversized viewport to leave empty gaps. All stages shown, one
   dashboard panel displayed. !important beats the scroll handler's inline styles. */
.pin--static .pin__inner {
  position: static;
  height: auto;
  align-items: start;
  padding-top: clamp(56px, 8vh, 96px);
  padding-bottom: clamp(56px, 8vh, 96px);
}
/* Desktop only: dashboard stays in view (sticky) while the stages scroll past;
   the section is only as tall as its content, so there is no pinned-viewport
   gap. Scoped to >=901px so the mobile @media rules below aren't overridden by
   this higher-specificity selector (mobile stacks the panels instead). */
@media (min-width: 901px) {
  .pin--static .pin__right {
    position: sticky;
    top: clamp(84px, 16vh, 150px);
    height: 62vh;
    min-height: 360px;
  }
}
/* Bodies stay open so the section height is fixed while the highlight cycles
   (no layout jump). is-active still drives the bright/dim stage highlight. */
.pin--static .stage__body {
  max-height: 260px !important;
  opacity: 1 !important;
  margin-top: 12px !important;
}
.pin--static .panel { transition: opacity 450ms var(--ease-out-expo), transform 600ms var(--ease-out); }
/* No-JS fallback: show the first mockup. Once the driver adds .pin--js, the
   active panel is controlled by .is-active instead. */
.pin--static:not(.pin--js) .panel:first-child { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pin--static .panel { transition: none; }
}

/* Bento */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
}
.bento__cell {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: border-color 240ms var(--ease-out), background 240ms var(--ease-out);
}
.bento__cell--dark {
  background: #0A0C12;
  color: #fff;
  border-color: rgba(255,255,255,0.10);
}
.bento__cell:hover { border-color: var(--ink-900); }
.bento__cell--dark:hover { border-color: rgba(255,255,255,0.3); background: #0F1117; }
.bento--span-2 { grid-column: span 2; }
.bento--span-3 { grid-column: span 3; }
.bento--span-4 { grid-column: span 4; }
.bento--rows-2 { grid-row: span 2; }
.bento__inner {
  /* Static — no mouse-driven translate. Hover affordance lives on .bento__cell border. */
  padding: 0;
}
.bento__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-500);
}
.bento__cell--dark .bento__label { color: rgba(255,255,255,0.5); }
.bento__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.024em;
  margin: 16px 0 0 0;
}
.bento__body {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-700);
  max-width: 38ch;
}
.bento__cell--dark .bento__body { color: rgba(255,255,255,0.65); }

.ichip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 22, 32, 0.04);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-900);
  text-align: center;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.bento__cell:hover .ichip { background: rgba(15, 22, 32, 0.06); }

/* Bento reveal animations (gauge / bars / swatches) */
.gauge-fill {
  stroke-dashoffset: 226;
  transition: stroke-dashoffset 1600ms cubic-bezier(0.65, 0, 0.35, 1) 260ms;
}
.bento.is-in .gauge-fill { stroke-dashoffset: 4.5; }

.scale-bar {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 90ms + 360ms);
}
.bento.is-in .scale-bar { transform: scaleY(1); }

.swatch {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 600ms var(--ease-out) calc(var(--i, 0) * 80ms + 240ms),
    transform 700ms var(--ease-out) calc(var(--i, 0) * 80ms + 240ms);
}
.bento.is-in .swatch { opacity: 1; transform: none; }
/* Brand card: tiny pulse on hover so swatches feel alive */
.bento__cell:hover .swatch { animation: swatch-pop 700ms var(--ease-out) calc(var(--i, 0) * 60ms) both; }
@keyframes swatch-pop {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-3px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 200px; }
  /* Big cards drop to full width, stacked */
  .bento--span-3 { grid-column: span 6; }
  .bento--span-4 { grid-column: span 6; }
  /* Small cards form a clean 3-across row (no orphan) */
  .bento--span-2 { grid-column: span 2; }
}
@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr; }
  .bento--span-2, .bento--span-3, .bento--span-4 { grid-column: span 1; }
  .bento--rows-2 { grid-row: span 1; }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.78); }
}

/* Customer-story stat cards */
.story-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.story-stat {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 700ms var(--ease-out) calc(var(--i, 0) * 110ms),
    transform 800ms var(--ease-out) calc(var(--i, 0) * 110ms),
    box-shadow 320ms var(--ease-out),
    background 320ms var(--ease-out);
  position: relative;
  overflow: hidden;
}
.story-stats.is-in .story-stat {
  opacity: 1;
  transform: none;
}
.story-stat:hover {
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 22, 32, 0.06);
}
.story-stat::after {
  /* subtle sheen on reveal */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
  opacity: 0;
}
.story-stats.is-in .story-stat::after {
  animation: stat-sheen 1100ms var(--ease-out) calc(var(--i, 0) * 110ms + 220ms) forwards;
}
@keyframes stat-sheen {
  0%   { opacity: 0; transform: translateX(-120%); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(120%); }
}

/* Logo wall on dark */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  border-left: 1px solid rgba(255,255,255,0.10);
}
.logo-wall .cell {
  background: transparent;
  border-right: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  padding: 28px 40px;
  transition: background 240ms var(--ease-out);
}
.logo-wall .cell:hover { background: rgba(255,255,255,0.04); }
.logo-wall .cell img {
  max-height: 44px;
  max-width: 72%;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.78;
  transition: opacity 240ms var(--ease-out);
}
/* Per-logo sizing so the visual mass reads roughly the same despite wildly different aspect ratios */
.logo-wall .cell img[alt="Audi"]              { max-height: 30px; }
.logo-wall .cell img[alt="Volkswagen"]        { max-height: 60px; max-width: 60%; }
.logo-wall .cell img[alt="Sandown"]           { max-height: 32px; }
.logo-wall .cell img[alt="Sandicliffe"]       { max-height: 28px; }
.logo-wall .cell img[alt="Acklam"]            { max-height: 28px; }
.logo-wall .cell img[alt="All Electric, since 1917"] { max-height: 56px; }
.logo-wall .cell img[alt="Prestige Cars Kent"] { max-height: 60px; max-width: 60%; }
.logo-wall .cell:hover img { opacity: 1; }
@media (max-width: 900px) {
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .logo-wall .cell { height: 120px; padding: 20px 28px; }
}

/* Display/title/eyebrow-row classes moved to site.css so all pages share them */

/* Marquee row */
.partner-strip {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.partner-track {
  display: flex;
  align-items: center;
  gap: 64px;
  animation: scroll 60s linear infinite;
  width: max-content;
  white-space: nowrap;
}
.partner-track:hover { animation-play-state: paused; }
.partner-track > span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: rgba(255,255,255,0.55);
  transition: color 220ms var(--ease-out);
}
.partner-track > span:hover { color: #fff; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Magnetic CTA */
.cta-mag {
  transition: transform 240ms var(--ease-out), background 240ms var(--ease-out);
}

/* Live pulse */
.pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: #5ED27F;
  box-shadow: 0 0 0 4px rgba(94, 210, 127, 0.18);
  animation: pulsate 1.8s ease-in-out infinite;
}
@keyframes pulsate {
  0%, 100% { box-shadow: 0 0 0 4px rgba(94, 210, 127, 0.18); }
  50% { box-shadow: 0 0 0 8px rgba(94, 210, 127, 0.04); }
}

/* Glass card */
.glass {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
}
.glass--light {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}

/* Section colour theme transitions via :target / scroll-snap optional */
.theme-flip {
  background: #0A0C12;
  color: #fff;
}

/* Diagonal divider */
.diag-divider {
  display: block;
  width: 100%;
  height: 80px;
  background: linear-gradient(180deg, var(--from, #fff) 0%, var(--from, #fff) 50%, var(--to, #0A0C12) 50%, var(--to, #0A0C12) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
}

/* =========================================================
   MOBILE — stack everything, kill the scroll-pinned mechanic,
   keep type rhythm + breathing room intact.
   ========================================================= */
@media (max-width: 900px) {
  /* Pin section: drop sticky scroll, stack stages and panels */
  .pin { height: auto !important; }
  .pin__inner {
    position: relative;
    top: auto;
    height: auto;
    grid-template-columns: 1fr;
    gap: 56px;
    padding: clamp(52px, 7.2vh, 81px) var(--gutter);
  }
  /* ---- Editorial rhythm (mobile) --------------------------------------
     No instruments and no carousel. On a phone all four features are simply
     present, so the work is hierarchy and rhythm, set the way the rest of
     the site is set. */

  /* Every feature reads at full contrast. There is no "current" feature on a
     phone, so nothing is dimmed to imply one. */
  .pin .stage { opacity: 1; }
  .pin .stage__body { max-height: 220px; opacity: 1; margin-top: 12px; }
  .pin.pin--light .stage__no { color: var(--ink-400); }
  .pin.pin--light .stage__title,
  .pin.pin--light .stage.is-active .stage__title { color: var(--ink-900); }

  /* No-JS fallback: the mocks stay in their own column and stack readably. */
  .pin__right { height: auto; display: flex; flex-direction: column; gap: 32px; }
  .panel {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Phone mockups take over from the laptops below 900px. They are already
     phone-shaped, so they are not cropped, just sized down to read as a device
     beside the copy: at full column width each would be 600px tall. */
  .panel__shot { max-width: 210px; margin-inline: auto; }

  /* Each feature is an entry in an index: its number sits on a hairline that
     runs out to the measure, with the copy full width beneath. That gives the
     numbered-index reading without a hanging column stealing width, which is
     why the 48px gutter was dropped at 640px in the first place. */
  .stage-list { display: flex; flex-direction: column; gap: clamp(34px, 4.6vh, 44px); }
  .stage-list .stage { grid-template-columns: 1fr; gap: 0; }
  .stage__no {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 0;
    margin-bottom: 11px;
  }
  .stage__no::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--line);
  }
  .stage__title { font-size: clamp(23px, 6.2vw, 28px); }

  /* The driver moves each mockup into its own feature, so this spacing belongs
     to the feature rather than sitting between two of them. */
  .panel--inline { margin: 18px 0 0; }

  /* Customer story stats: 4 cols → 2x2 */
  .story-stats { grid-template-columns: repeat(2, 1fr) !important; row-gap: 32px !important; }
  .story-stat .num { font-size: clamp(36px, 9vw, 56px) !important; }

  /* Dealerships / OEMs split: stack to 1 col, taller cards */
  section > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .split-card { aspect-ratio: 5/4 !important; }
  .split-card__cta { width: 60px !important; height: 60px !important; right: 18px !important; bottom: 18px !important; }
  .split-card [style*="font-size:clamp(34px"] { font-size: clamp(28px, 7vw, 40px) !important; }

  /* Trusted-by + Final CTA: internal padding scales down a touch */
  .logo-wall { grid-template-columns: repeat(2, 1fr) !important; }
  .logo-wall .cell { height: 120px !important; padding: 20px 24px !important; }
}

@media (max-width: 720px) {
  /* Pin: ease horizontal padding so big mocks don't blow out */
  .pin__inner { padding: clamp(40px, 5.8vh, 58px) var(--gutter); }

  /* Customer story stats: 2x2 with tighter gap */
  .story-stats { row-gap: 28px !important; column-gap: 24px !important; }

  /* Hero lede shrinks so the row breathes */
  .hero-card__lede { font-size: 15px !important; }
}

@media (max-width: 520px) {
  /* Customer story stats: stack vertically — 4 items, comfortable rhythm */
  .story-stats {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 20px !important;
    row-gap: 24px !important;
  }
  /* Dark cards: scale internal padding so content reads well */
  section[style*="background:#0A0C12"],
  section > div[style*="background:#0A0C12"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

@media (max-width: 640px) {
  /* item 6: stack the "01" numeral above the heading so heading/body span the
     full container width (was a 48px + 18px left gutter). */
  .stage { grid-template-columns: 1fr; gap: 4px; }
  /* item 5: keep real content text at >= 12px on mobile. Decorative mock-UI
     text (browser frames, dashboard chrome) is intentionally left small. */
  .stage__no { padding-top: 0; font-size: 12px; }
  .tiny { font-size: 12px; }
  .cstory__stats > div > *:last-child { font-size: 12px !important; }
  /* carousel client meta line, e.g. "AM100 · Live June 2025 · sandicliffe.co.uk" */
  .cstory__foot > div:first-child > div:last-child { font-size: 12px !important; }
}

@media (min-width: 640px) and (max-width: 1024px) {
  /* P4: trusted-by logo wall reads better as 3 columns on tablets (was 2). */
  .logo-wall { grid-template-columns: repeat(3, 1fr) !important; }
}