/* ============================================================================
   Allied Insurance, About (v2) -- page-scoped styles.
   Built ON TOP of the LOCKED homepage system (assets/css/styles.css): reuses the
   shared tokens, the .container/.eyebrow/.btn/.rise grammar, the .statement,
   .intro-band, .legacy, .closer + .footer components verbatim. Only the per-page
   hero-band, the Mission/Vision cards, the Board monogram tiles and the CTA band
   are authored here. Gold / amber / brown on warm cream + dark only. Flat: no
   shadows anywhere. No green, no mint.
   ========================================================================== */

/* ---------- HERO BAND (dark warm-brown panel, gold eyebrow, giant cream head) ---------- */
.about-hero{
  position:relative; min-height:clamp(560px,74vh,780px);
  display:flex; align-items:flex-end; overflow:hidden;
  background:var(--brand-dark); color:var(--cream-on-dark);
  padding:calc(var(--nav-h) + 56px) 0 clamp(48px,7vh,88px);
}
.about-hero__media{ position:absolute; inset:0; z-index:0; }
.about-hero__media img{ width:100%; height:100%; object-fit:cover; object-position:66% 28%; }
.about-hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(28,23,16,.62) 0%, rgba(28,23,16,.18) 34%, rgba(28,23,16,.42) 66%, rgba(28,23,16,.95) 100%),
    linear-gradient(90deg, rgba(28,23,16,.82) 0%, rgba(28,23,16,.34) 48%, rgba(28,23,16,0) 82%);
}
.about-hero__inner{ position:relative; z-index:2; width:100%; }
.about-hero__eyebrow{ margin-bottom:22px; color:var(--gold-bright); }
.about-hero h1{
  font-weight:500; letter-spacing:-.035em; line-height:.94;
  font-size:clamp(44px,8vw,120px); max-width:15ch;
}
.about-hero h1 .beat{ display:block; }
.about-hero h1 .beat-2{ color:var(--cream-70); }
.about-hero h1 .word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; }
.about-hero h1 .word .ch{ display:inline-block; will-change:transform; }
.about-hero__sub{
  margin-top:28px; max-width:58ch; color:var(--cream-70);
  font-size:clamp(16px,1.35vw,20px); line-height:1.55; font-weight:400;
}

/* ---------- MISSION / VISION (light canvas, two flat gold-accented cards) ---------- */
.about-mv{ padding:clamp(64px,11vh,150px) 0; background:var(--canvas); }
.about-mv__head{ max-width:60ch; margin-bottom:clamp(36px,5vh,56px); }
.about-mv__head .eyebrow{ margin-bottom:20px; }
.about-mv__head h2{
  font-weight:500; letter-spacing:-.03em; line-height:1.02;
  font-size:clamp(30px,4.2vw,60px); max-width:15ch;
}
.about-mv__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,28px); }
.mv-card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-panel); padding:clamp(28px,3.4vw,48px);
  display:flex; flex-direction:column; overflow:hidden;
}
.mv-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
}
.mv-card__ic{ width:46px; height:46px; color:var(--amber); }
.mv-card__ic svg{ width:100%; height:100%; }
.mv-card__kicker{
  margin-top:24px; font-size:13px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brown);
}
.mv-card__statement{
  margin-top:14px; font-weight:500; letter-spacing:-.02em; line-height:1.14;
  font-size:clamp(22px,2.35vw,34px); color:var(--ink); max-width:26ch;
}

/* ---------- BOARD OF DIRECTORS (light canvas, gold monogram tiles) ---------- */
.about-board{ padding:clamp(64px,11vh,150px) 0; background:var(--surface); border-top:1px solid var(--line); }
.about-board__head{ max-width:62ch; margin-bottom:clamp(34px,5vh,52px); }
.about-board__head .eyebrow{ margin-bottom:20px; }
.about-board__head h2{
  font-weight:500; letter-spacing:-.03em; line-height:1;
  font-size:clamp(30px,4.2vw,60px);
}
.about-board__head p{ margin-top:18px; color:var(--ink-70); max-width:46ch; }
.board-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.board-tile{
  background:var(--canvas); border:1px solid var(--line); border-radius:var(--r-card);
  padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; align-items:flex-start; gap:22px;
  transition:border-color .4s ease, transform .5s cubic-bezier(.16,1,.3,1), background-color .4s ease;
}
.board-tile:hover{ border-color:var(--gold); transform:translateY(-4px); background:var(--surface); }
.board-mono{
  width:clamp(58px,6vw,74px); height:clamp(58px,6vw,74px); border-radius:var(--pill);
  display:grid; place-items:center; color:var(--ink);
  font-size:clamp(20px,2vw,26px); font-weight:500; letter-spacing:-.01em;
  background:linear-gradient(150deg,#f0cd8c,#d4a24e);
}
.board-tile:nth-child(3n+2) .board-mono{ background:linear-gradient(150deg,#f5e3b0,#e0a53f); }
.board-tile:nth-child(3n+3) .board-mono{ background:linear-gradient(150deg,#e6bb6b,#c0862f); }
.board-name{ font-size:clamp(19px,1.7vw,26px); font-weight:500; letter-spacing:-.02em; color:var(--ink); }

/* ---------- CTA BAND (dark closer, before footer) ---------- */
.about-cta{ padding:clamp(56px,10vh,120px) 0 clamp(48px,8vh,96px); }
.about-cta__grid{
  display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,5vw,64px); align-items:end;
}
.about-cta__eyebrow{ margin-bottom:20px; }
.about-cta h2{
  font-weight:500; letter-spacing:-.03em; line-height:1.02;
  font-size:clamp(30px,4.2vw,62px); max-width:15ch;
}
.about-cta__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:flex-start; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .about-mv__grid{ grid-template-columns:1fr; }
  .board-grid{ grid-template-columns:repeat(2,1fr); }
  .about-cta__grid{ grid-template-columns:1fr; gap:30px; align-items:start; }
}
@media (max-width:560px){
  .board-grid{ grid-template-columns:1fr; }
  .board-tile{ flex-direction:row; align-items:center; gap:18px; }
}

/* ============================================================================
   RICHNESS PASS (v2) -- page-scoped hooks for the shared richness system.
   Every colour still traces to the logo (gold/amber/brown/cream on warm dark);
   no new :root tokens (gate-taste safe). All effects are reduced-motion safe.
   ========================================================================== */

/* ---- 097 Text Glow: the about-hero eyebrow (shared rule is .hero__eyebrow) ---- */
.about-hero__eyebrow[data-component="097"]{ text-shadow:0 0 20px rgba(224,182,87,.35); }

/* ---- 204 Lottie Player: mission/vision animated cover-icons sit in the 46px slot */
.mv-card__ic .cover-lottie{ width:100%; height:100%; }

/* ---- 011 Tilt Card: the mission/vision cards lift into 3D on pointer parallax */
.about-mv__grid{ perspective:1100px; }

/* ---- 303 CircularProgressBar: gold ring drawing in behind the "7 lines" stat --- */
/* The ring is drawn from the digit's own em, but the digit's line box is only
   .86em tall, so a 1.5em ring overhung the box and landed on the label below.
   Ring tightened to 1.16em and every number in the row padded by the remaining
   overhang, which reserves the space AND keeps 19 / 7 / IPEC on one baseline. */
.legacy__stats .legacy__num{ padding-block:.22em; }
.legacy__num--ring .stat-ring{ align-items:center; }
.legacy__num--ring .stat-ring__svg{ width:1.16em; height:1.16em; top:50%; }
.legacy__num--ring .stat-ring > span{ position:relative; z-index:1; }

/* ---------- reduced motion: no-JS safe hero headline ---------- */
@media (prefers-reduced-motion:reduce){
  .about-hero h1 .word .ch{ transform:none !important; }
}