/* The Risk Lab — component styles layered on top of style.css.
   Link AFTER style.css. Kept separate for now; fold into style.css
   on the next full pass over that file. */

/* ---------- EXPERIENCE LOGO MARQUEE ----------
   Continuous horizontal logo strip, replacing the fixed grid.
   The grid sized marks by max-height only (.logo-chip.muted img), with
   width:auto — so wide marks (Deloitte, eMAG) rendered far larger than
   squarer ones (DStv, OLX, PayU). Every slot here is a fixed optical box
   constrained on BOTH axes, so all marks read at one weight.
   Motion is slow and linear per Brand Identity Guide p.13 — measured, calm. */
.logo-marquee{
  position:relative;
  overflow:hidden;
  padding:6px 0;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.logo-marquee__track{
  display:flex;
  width:max-content;
  align-items:center;
  animation:logo-scroll 48s linear infinite;
}
.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-within .logo-marquee__track{animation-play-state:paused;}

/* Two identical sets sit in the track. Gap lives inside the set (plus a
   trailing padding) so both sets are exactly equal width and the -50%
   translate loops seamlessly. */
.logo-marquee__set{display:flex;align-items:center;gap:18px;padding-right:18px;flex:0 0 auto;}

.logo-marquee__item{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:150px;
  height:66px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--black);
  transition:border-color .2s ease,background .2s ease;
}
.logo-marquee__item img{
  max-height:30px;
  max-width:118px;
  width:auto;
  height:auto;
  object-fit:contain;
  opacity:.85;
  transition:opacity .2s ease,transform .2s ease;
}
.logo-marquee__item:hover{border-color:var(--grey);background:#050505;}
.logo-marquee__item:hover img{opacity:1;transform:scale(1.06);}

/* Left → right travel. To reverse, swap the two translate values. */
@keyframes logo-scroll{
  from{transform:translate3d(-50%,0,0);}
  to{transform:translate3d(0,0,0);}
}

@media (max-width:680px){
  .logo-marquee__item{width:126px;height:58px;padding:0 10px;}
  .logo-marquee__item img{max-height:26px;max-width:98px;}
  .logo-marquee__set{gap:12px;padding-right:12px;}
}

@media (prefers-reduced-motion:reduce){
  .logo-marquee{mask-image:none;-webkit-mask-image:none;}
  .logo-marquee__track{animation:none;width:100%;}
  .logo-marquee__set{flex-wrap:wrap;justify-content:center;padding-right:0;width:100%;}
  .logo-marquee__set--dup{display:none;}
}

/* ---------- CHECKLIST: 3-COLUMN VARIANT ----------
   Was previously set with an inline grid-template-columns on index.html,
   which outranked the mobile media query and kept three columns on phones. */
.checklist.cols-3{max-width:none;grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){.checklist.cols-3{grid-template-columns:1fr 1fr;}}
@media (max-width:680px){.checklist.cols-3{grid-template-columns:1fr;}}

/* ---------- TWO-ROW LOGO MARQUEE ----------
   Two independent rows so more marks are visible at a glance, especially on
   mobile. Row 2 runs the opposite direction at a different speed and starts
   from a rotated order, so the two rows never show the same pair side by side.
   Row 2 is decorative duplication - it is aria-hidden in the markup. */
.logo-marquee-stack{display:flex;flex-direction:column;gap:14px;}
.logo-marquee-stack .logo-marquee{padding:0;}

.logo-marquee__track--reverse{
  animation-name:logo-scroll-rev;
  animation-duration:62s;
}
@keyframes logo-scroll-rev{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}

@media (max-width:680px){
  .logo-marquee-stack{gap:10px;}
}

@media (prefers-reduced-motion:reduce){
  /* one static wrapped row is enough; hide the decorative second row */
  .logo-marquee-stack .logo-marquee + .logo-marquee{display:none;}
}

/* ---------- AI SECTION COPY ALIGNMENT ----------
   style.css sets `.foundations p{max-width:520px}` for the two-column
   .foundations-grid layout. Inside the centred .text-block (760px) that leaves
   each paragraph flush-left in its 520px box - visibly ~120px left of the
   heading on desktop. It only shows above 520px, which is why mobile looked
   right. Centre the measure without changing it. */
.foundations .text-block p{margin-left:auto;margin-right:auto;}

/* ---------- HERO LOGO: STACKED LOCKUP ----------
   The hero uses the Core Stacked With Descriptor lockup (aspect 1.78) rather
   than the horizontal one (2.84), so the widths are tuned to keep the hero
   balanced.

   Sized for descriptor legibility, not just the guide's 130px floor. The
   descriptor is letterspaced caps and its cap height scales with the lockup:
   259px -> 6-8px caps (too small to read), 320px -> 9px, 420px -> 11px.
   Guide p.10 requires the descriptor stay "fully readable at the size used".

   `width:100%` is load-bearing. The SVG carries intrinsic dimensions of
   259x146, so with max-width alone it caps at 259px and never reaches the
   width it is allowed.

   margin-bottom satisfies the guide p.11 clear-space rule (0.5X, where X is
   the sturgeon icon height at the size in use): sturgeon is 68px at 420px
   -> 34px required, and 52px at 320px -> 26px required. */
.hero-logo{width:100%;max-width:420px;margin:0 auto 40px;}
/* The sturgeon swims off the right edge and back in from the left
   (logo-motion.js); clip it to the hero so it never adds page scroll. */
.hero{overflow:hidden;}
@media (max-width:680px){
  .hero-logo{max-width:320px;margin:0 auto 30px;}
}

/* ---------- TESTIMONIAL CARDS: EQUAL GOLD BANDS ----------
   Each card's three parts (gold band, highlight, quote) sit on rows shared
   across the whole row of cards, so every gold band takes the height of the
   tallest one and the highlights line up. Names stay top-aligned. */
@supports (grid-template-rows: subgrid){
  .testi-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;}
  .testi-head{align-items:flex-start;}
}
/* Names in black: the Guide allows pink as text only on dark backgrounds. */
.testi-head .who b{color:var(--black);}