/* ==========================================================================
   VIVID — ABOUT PAGE
   --------------------------------------------------------------------------
   Page-scoped only. Everything reusable already lives in components.css.
   Rhythm: phead (white) → story (white) → STATS (ink) → capabilities (white)
           → PROCESS (ink) → quality (sunken) → ticker (white) → CTA (red).
   Logical properties only. No gradients, no blurs, no pillowy radii.
   ========================================================================== */


/* ==========================================================================
   1. STORY — editorial column + a hard-edged photo composition.
   ========================================================================== */
.story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  align-items: start;
}
@media (min-width: 960px) {
  .story__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 1rem + 4vw, 5rem);
  }
}

.story__title {
  font-family: var(--font-head);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-snug);
  color: var(--text);
  text-wrap: balance;
}

.story__prose { margin-block-start: var(--sp-6); }
.story__prose p {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relax);
  color: var(--text-muted);
}
.story__prose p + p { margin-block-start: var(--sp-5); }
/* The opening paragraph carries the voice: heavier, inked, and ruled. */
.story__prose p:first-child {
  color: var(--text);
  font-weight: var(--fw-semibold);
  border-inline-start: var(--bw-thick) solid var(--red-brand);
  padding-inline-start: var(--sp-5);
}

/* Pull quote — a solid ink slab, the one loud line on a white section. */
.story__pull {
  position: relative;
  margin-block-start: var(--sp-8);
  padding: var(--sp-6) var(--sp-6);
  background: var(--surface-ink);
  border-radius: var(--r-lg);
  color: var(--text-on-ink);
  box-shadow: var(--hard-red);
}
.story__pull p {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  color: var(--text-on-ink);
}
/* The slab is --surface-ink in BOTH themes (dark in light mode, a lifted
   graphite in dark mode), so its citation must use the ON-INK ramp — the page
   ramp (--text-subtle) inverts with the page and would collapse on the slab. */
.story__pull cite {
  display: block;
  margin-block-start: var(--sp-3);
  font-size: var(--fs-2xs);
  font-style: normal;
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-on-ink-subtle);
}

.story__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-block-start: var(--sp-8);
}

/* --- the composition ------------------------------------------------------
   A solid red block, a big shot sitting on a hard ink offset, a smaller shot
   crossing its corner, and a date stamp. Hard edges only.
   -------------------------------------------------------------------------- */
.story__art {
  position: relative;
  padding-block-end: clamp(3rem, 2rem + 5vw, 5rem);
  padding-inline-end: var(--sp-3);
}
/* The prose column is long; the composition rides along with it. */
@media (min-width: 960px) {
  .story__art {
    position: sticky;
    inset-block-start: calc(var(--hdr-h) + var(--sp-8));
  }
}
.story__block {
  position: absolute;
  inset-block-start: clamp(1.5rem, 3vw, 3rem);
  inset-inline-end: 0;
  inline-size: 58%;
  block-size: 62%;
  background: var(--red-brand);
  border-radius: var(--r-lg);
  z-index: 0;
}
.story__shot {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-lg);
  background: var(--media-bed);
}
.story__shot img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.story__shot:hover img { transform: scale(1.05); }

.story__shot--a {
  inline-size: min(100%, 460px);
  aspect-ratio: 4 / 5;
  margin-inline-end: auto;
  box-shadow: var(--hard-ink);
}
.story__shot--b {
  position: absolute;
  z-index: 2;
  inset-block-end: 0;
  inset-inline-end: var(--sp-3);
  inline-size: 46%;
  max-inline-size: 260px;
  aspect-ratio: 4 / 3;
  box-shadow: var(--hard-white);
}
.story__cap {
  position: absolute;
  z-index: 3;
  inset-block-end: var(--sp-3);
  inset-inline-start: var(--sp-3);
  padding: 6px var(--sp-3);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--invert-fg);
  background: var(--invert-bg);
  border-radius: var(--r-xs);
}
/* Date stamp — a solid white chip with a 2px rule, sitting on the red block. */
.story__stamp {
  position: absolute;
  z-index: 3;
  inset-block-start: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-md);
  box-shadow: var(--hard-ink-sm);
}
.story__stamp-n {
  font-family: var(--font-num);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  color: var(--text);
}
.story__stamp-l {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand-text);
}
@media (max-width: 479px) {
  .story__shot--b { inline-size: 52%; inset-inline-end: 0; }
  .story__block { inline-size: 66%; }
}


/* ==========================================================================
   2. STATS BAND (ink)
   ========================================================================== */
.abstats__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-block-end: var(--sp-8);
}
.abstats__title {
  font-family: var(--font-head);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-snug);
  color: var(--text-on-ink);
  max-inline-size: 22ch;
}
.abstats__note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-8);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-on-ink-muted);
}
/* --brand-on-ink, not --red-400: the band's luminance MOVES between themes and
   this red has to move with it (3.88:1 on the dark band otherwise). */
.abstats__note svg { inline-size: 15px; block-size: 15px; color: var(--brand-on-ink); flex: none; }


/* ==========================================================================
   2b. CAPABILITIES — six cards want a clean 3 × 2, not a 4 + 2 orphan row.
   ========================================================================== */
@media (min-width: 1000px) {
  .about-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ==========================================================================
   3. PROCESS TIMELINE (ink) — the set piece.
   One hairline-gridded slab, eight numbered stations, a red rail across the
   top of each, an oversized ghost numeral, and a phase tag.
   ========================================================================== */
.ptl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line-on-ink);             /* the hairline grid itself */
  border: var(--bw) solid var(--surface-ink-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  list-style: none;
}
@media (min-width: 640px)  { .ptl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .ptl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ptl__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-7) var(--sp-5) var(--sp-6);
  background: var(--surface-ink);
  overflow: hidden;
  transition: background-color var(--dur-3) var(--ease);
}
.ptl__step:hover { background: var(--surface-ink-soft); }

/* The rail: an ink rule across the top of every station… */
.ptl__step::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: var(--surface-ink-line);
}
/* …which fills solid red as you move through it. */
.ptl__step::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: 3px;
  inline-size: 0;
  background: var(--red-brand);
  transition: inline-size var(--dur-4) var(--ease);
}
.ptl__step:hover::after,
.ptl__step:focus-within::after { inline-size: 100%; }

/* The solid red node that pins this station to the rail. */
.ptl__node {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--sp-5);
  inline-size: 30px;
  block-size: 7px;
  background: var(--red-brand);
  border-end-start-radius: 3px;
  border-end-end-radius: 3px;
  transition: inline-size var(--dur-3) var(--ease);
}
.ptl__step:hover .ptl__node { inline-size: 46px; }

/* The GHOST numeral. It must sit ONE STEP off the band, in whichever direction
   the band happens to be lit — --text-2 was a page token, so in dark it flipped
   to near-white and the ghost became a shouting numeral over the title.
   --surface-ink-line is the band's own "one step up" tone in both themes. */
.ptl__num {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-end: var(--sp-4);
  font-family: var(--font-num);
  font-size: clamp(2.75rem, 2rem + 2vw, 3.75rem);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-display);
  line-height: 1;
  color: var(--surface-ink-line);
  pointer-events: none;
  transition: color var(--dur-3) var(--ease);
}
.ptl__step:hover .ptl__num { color: var(--brand-on-ink); }

.ptl__phase {
  position: relative;
  z-index: 1;
  padding-inline-end: var(--sp-12);   /* clear of the numeral, in either dir */
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-on-ink-subtle);
}
.ptl__title {
  position: relative;
  z-index: 1;
  padding-inline-end: var(--sp-8);   /* clear of the numeral */
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  line-height: 1.25;
  color: var(--text-on-ink);
}
.ptl__desc {
  position: relative;
  z-index: 1;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relax);
  color: var(--text-on-ink-subtle);
}

.ptl__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-block-start: var(--sp-8);
}
.ptl__foot p {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-on-ink-muted);
}
.ptl__foot svg { inline-size: 16px; block-size: 16px; color: var(--brand-on-ink); flex: none; }


/* ==========================================================================
   4. QUALITY / GUARANTEE
   ========================================================================== */
.qual__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  align-items: start;
}
@media (min-width: 960px) {
  .qual__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  }
}

.qual__title {
  font-family: var(--font-head);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-snug);
  color: var(--text);
  text-wrap: balance;
}
.qual__body {
  margin-block-start: var(--sp-4);
  max-inline-size: 56ch;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relax);
  color: var(--text-muted);
}

.qual__list {
  display: grid;
  gap: 2px;
  margin-block-start: var(--sp-8);
  list-style: none;
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--line);         /* becomes the hairline between rows */
}
.qual__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  transition: background-color var(--t-fast);
}
.qual__item:hover { background: var(--surface-sunken); }
.qual__tick {
  inline-size: 26px;
  block-size: 26px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  background: var(--invert-bg);
  color: var(--invert-fg);
  margin-block-start: 1px;
}
/* --surface-red is fixed in BOTH themes, so the tick on it must be pinned to the
   ON-RED colour — leaving it on --invert-fg would flip the glyph to near-black
   on red the moment the page went dark. */
.qual__item:hover .qual__tick {
  background: var(--surface-red);
  color: var(--text-on-red);
}
.qual__tick svg { inline-size: 15px; block-size: 15px; }
.qual__k {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
.qual__v {
  display: block;
  margin-block-start: 2px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

/* --- side column: a photo on a solid block + the guarantee card ----------- */
.qual__side { display: grid; gap: var(--sp-8); }

.qual__fig {
  position: relative;
  padding-inline-end: var(--sp-4);
  padding-block-end: var(--sp-4);
}
.qual__fig::before {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 72%;
  block-size: 72%;
  background: var(--red-brand);
  border-radius: var(--r-lg);
}
.qual__fig img {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-lg);
}

.qual__card {
  padding: var(--sp-6);
  background: var(--surface);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-lg);
  box-shadow: var(--hard-ink);
}
.qual__card-title {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  margin-block-start: var(--sp-3);
}
.qual__promises {
  display: grid;
  gap: var(--sp-3);
  margin-block-start: var(--sp-4);
  list-style: none;
}
.qual__promises li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relax);
  color: var(--text-muted);
}
.qual__promises svg {
  inline-size: 17px;
  block-size: 17px;
  flex: none;
  margin-block-start: 3px;
  color: var(--brand-text);
}


/* ==========================================================================
   5. BRAND TICKER (white strip, hard rules top and bottom)
   ========================================================================== */
.abticker {
  padding-block: var(--sp-10);
  border-block: var(--bw) solid var(--line-bold);
  background: var(--surface);
  overflow: hidden;
}
.abticker__label {
  display: block;
  margin-block-end: var(--sp-6);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
  text-align: center;
}


/* ==========================================================================
   6. CLOSING CTA (red band)
   ========================================================================== */
.acta__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.acta__title {
  margin-block-start: var(--sp-1);
  font-family: var(--font-head);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--text-on-red);
  max-inline-size: 18ch;
  text-wrap: balance;
}
.acta__body {
  margin-block-start: var(--sp-5);
  max-inline-size: 56ch;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relax);
  color: var(--text-on-red);
}
.acta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-8);
}
.acta__note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-6);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-on-red);
}
.acta__note svg { inline-size: 15px; block-size: 15px; flex: none; }