/* ==========================================================================
   Africa Brand | page-about.css | About page only (spec 5.2)
   Loaded after main.css. Adds the components main.css does not carry: the video
   facade (4.13), the Our Approach steps rail (4.8), the Nationwide 2+1 stack, the
   What We Stand For layout and the Industries watermark placement.
   Token colours only (rgba values are the spec recipes); no filter below 768px.
   ========================================================================== */

/* ---- 1. Story hero: the portrait piece is capped so the hero stays near one viewport. The copy column carries two
        lead paragraphs (taller than Home), so the hero threads are boxed to a fixed band at the base and the grid keeps
        enough bottom padding for both paths to pass under the buttons and the piece caption at every width. ---- */
.piece--portrait { max-width: 440px; margin-left: auto; }
#story .hero__grid { padding-bottom: clamp(5.5rem, 10vh, 7rem); }
#story .hero__inner .thread { top: auto; bottom: 0; height: 170px; }
/* Dark inner sections: the pair sits in the bottom 170px (inside --section-y), clear of the last caption or quote. */
.thread--base { top: auto; bottom: 0; height: 170px; }

/* ---- 2. Video facades (4.13): 7/12 and 5/12, no iframe until the play button is clicked ---- */
.video-layout { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
.video-layout > * { min-width: 0; }
.video { aspect-ratio: 16 / 9; cursor: pointer; }
.video--playing { cursor: default; }
.video .proj__chip { pointer-events: none; }
.video__play { --bevel-angle: 210deg; position: absolute; left: 50%; top: 50%; z-index: 2; width: 72px; height: 72px; margin: -36px 0 0 -36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid transparent; background: var(--grad-molten) padding-box, var(--chrome-bevel) border-box; color: var(--chrome-100); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), var(--glow-btn); cursor: pointer; transition: transform .3s var(--ease), --bevel-angle .8s var(--ease); }
.video__play svg { width: 30px; height: 30px; fill: currentColor; margin-left: 3px; }
.video__play:hover, .video:hover .video__play { --bevel-angle: 570deg; transform: scale(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 34px -4px rgba(232,99,43,.9), 0 0 80px -16px rgba(212,33,43,1); }
.video__play:focus-visible { outline-offset: 4px; border-radius: 50%; }
.video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--oxblood); }

/* ---- 3. Nationwide: split panel (.feature) with a 2+1 project stack on the right ---- */
.nation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.nation-grid .proj--wide { grid-column: 1 / -1; }
.nation-grid .proj--wide .glow-frame__media { aspect-ratio: 16 / 9; }
.nation-sub h3 { font-size: var(--fs-h3); }

/* ---- 4. Our Approach: five steps on a chrome rail (4.8). The rail is an inline SVG that main.js draws
        with the section's latched --d (the section carries data-draw); beads light as the pour reaches them. ---- */
.steps-wrap { position: relative; }   /* the rail SVG is a sibling of the ol (an ol may only contain li), anchored here */
.steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
.steps__rail { top: 0; height: 12px; }
.steps__rail .thread__line { stroke: url(#railChrome); stroke-width: 2; }
.step { position: relative; padding-top: 26px; }
.step__bead { position: absolute; left: 0; top: 0; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--chrome-100), var(--chrome-500) 55%, var(--chrome-700)); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px rgba(74,10,18,.18); }
.step--lit .step__bead { box-shadow: 0 0 0 3px var(--paper), 0 0 16px -2px rgba(212,33,43,.6), var(--glow-node); }
.step__card { --bevel-angle: 200deg; position: relative; display: flex; flex-direction: column; gap: .45rem; height: 100%; padding: 1.4rem 1.25rem 1.5rem; border-radius: var(--r-lg); border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--chrome-bevel-soft) border-box; box-shadow: var(--shadow-light); transition: transform .35s var(--ease), --bevel-angle 1s var(--ease); }
.step__card:hover { --bevel-angle: 560deg; transform: translateY(-4px); box-shadow: 0 1px 0 #fff inset, 0 24px 44px -22px rgba(212,33,43,.35); }
.step__num { display: block; font: 800 2.2rem/1 var(--font-display); letter-spacing: -.02em; margin-bottom: .2rem; }
.step h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.25; }
.step p { font-size: .92rem; line-height: 1.55; color: var(--ink-2); }

/* ---- 5. What We Stand For: 2x2 quotes beside two small tiles ---- */
.values-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.values-layout > * { min-width: 0; }
/* At quote size (27px) the standard chrome recipe's dark horizon stop reads as a strike-through, so the lead phrase
   uses the same silver-to-cream-to-amber ramp without the band (tokens only; the sweep layer is unchanged). */
.forge .quote .chrome { background-image: var(--chrome-sweep), linear-gradient(180deg, var(--chrome-100) 0%, var(--chrome-300) 38%, var(--cream) 64%, var(--amber) 100%); }
.quote-grid > [data-reveal]:nth-child(2) { transition-delay: .08s; }
.quote-grid > [data-reveal]:nth-child(3) { transition-delay: .16s; }
.quote-grid > [data-reveal]:nth-child(4) { transition-delay: .24s; }
.values-media > [data-reveal]:nth-child(2) { transition-delay: .12s; }

/* ---- 6. Industries: the crimson watermark sits behind the chip rows on the right ---- */
.industries-sec .africa-wrap { z-index: -1; right: -4%; top: 50%; width: min(80vh, 620px); transform: translateY(-50%); }
.industries-sec .industries { margin-top: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1279px) {
  /* Below 1280 the two quote columns would be under 230px each beside the tiles: stack the pair under the 2x2 grid. */
  .values-layout { grid-template-columns: 1fr; }
  .values-media { max-width: 640px; }
}
@media (max-width: 1023px) {
  .piece--portrait { margin-left: 0; }
  /* --section-y is about 102px at 768: a 140px band keeps the upper path's apex 18px under the last caption. */
  .thread--base { height: 140px; }
  .video-layout { grid-template-columns: 1fr; }
  .video-item--sm { max-width: 560px; }
  /* 3 + 2 on a six-track grid so the second row leaves no hole; each step draws its own static rail segment. */
  .steps { grid-template-columns: repeat(6, 1fr); }
  .step { grid-column: span 2; }
  .step:nth-last-child(-n+2) { grid-column: span 3; }
  .steps__rail { display: none; }
  .step::before { content: ""; position: absolute; left: 6px; right: -1.25rem; top: 5px; height: 2px; opacity: .8; background: linear-gradient(90deg, var(--chrome-400), var(--chrome-100) 50%, var(--chrome-400)); }
  .step:nth-child(3)::before, .step:last-child::before { right: 0; }
}
@media (max-width: 767px) {
  /* Vertical steps with the rail on the left (a static chrome line; the drawn SVG stays hidden with the other threads). */
  .steps { grid-template-columns: 1fr; gap: .75rem; padding-left: 28px; }
  .steps::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; opacity: .8; background: linear-gradient(180deg, var(--chrome-400), var(--chrome-100) 50%, var(--chrome-400)); }
  .step, .step:nth-last-child(-n+2) { grid-column: auto; padding-top: 0; }
  .step::before { display: none; }
  .step__bead { left: -28px; top: 1.15rem; }
  .step__card { padding: 1.1rem 1rem 1.2rem; gap: .3rem; }
  .step__num { font-size: 1.7rem; }
  .step h3 { font-size: 1rem; }
  .step p { font-size: .88rem; line-height: 1.45; }
  .video__play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .video__play svg { width: 24px; height: 24px; }
}
@media (max-width: 639px) {
  #story .hero__grid { padding-bottom: 5rem; }
  #story .hero__inner .thread { height: 140px; }
  .video-layout { gap: .75rem; }
  .nation-grid { gap: .75rem; }
  .nation-grid .proj .glow-frame__media { aspect-ratio: 16 / 10; }
  .nation-grid .proj--wide .glow-frame__media { aspect-ratio: 16 / 9; }
  .nation-grid .proj__cat { display: none; }
  .nation-grid .proj__meta { padding-top: .3rem; }
  .nation-grid .proj__title { font-size: .88rem; line-height: 1.25; text-wrap: balance; }
  .nation-grid .proj--wide .proj__title { font-size: 1rem; }
  .nation-sub h3 { font-size: 1.2rem; }
  .quote-grid { gap: .9rem; }
  .quote { font-size: 1.1rem; max-width: none; }
  .steps { gap: .5rem; }
}

/* ---- 5b. What We Stand For readability: the lead phrase is the title, the sentence is body copy.
   Whole paragraphs in display type read as a wall of bold text in the narrow quote columns. ---- */
.values-layout .quote {
  max-width: none;
  padding: .15rem 0 .15rem 1.25rem;
  font: 400 var(--fs-body)/1.65 var(--font-body);
  letter-spacing: 0;
  color: var(--fg-2, var(--text-on-dark-2));
  text-wrap: pretty;
}
.values-layout .quote .chrome {
  display: block;
  margin-bottom: .5rem;
  font: 800 clamp(1.3rem, 1.05rem + .8vw, 1.7rem)/1.15 var(--font-display);
  letter-spacing: -.01em;
}
.values-layout .quote-grid { gap: 2.25rem 2.75rem; }
@media (max-width: 639px) { .values-layout .quote-grid { gap: 1.5rem; } }