/* ============================================================================
   ABOUT US cluster · page-specific styles
   ----------------------------------------------------------------------------
   Shared core (tokens, navbar, buttons, footer, reveal, reduced-motion) lives
   in css/styles.css — this file styles the About pages:
   ·  .au-*  — OUR COMPANY (our-company.html), built 1:1 from "About us Css.md"
              + About.svg (2026-08-19). Shared utilities (.au-wrap, .au-pill,
              .au-h1, .au-more, .au-hero, .au-cta …) are reused by both pages.
   ·  .al-*  — OUR LEADERSHIP (our-leadership.html), built 1:1 from
              "Our Team Css.md" + "Our Leadership.svg" (2026-08-19).
   1440 design, fluid 1280–1600 per the site standard.
   Wave decorations = assets/img/about/wave-*.svg (extracted from About.svg,
   opacity/blur baked into the SVGs themselves).
   ============================================================================ */

/* ---- shared wrap: the design's 1280 content column ---- */
.au-wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.au-wrap--wide { max-width: 1440px; }   /* meet-team band: 1320 + margins in the 1440 design */

/* ---- section head (eyebrow + centered h2) — story/offices pattern ---- */
.au-head {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; text-align: center;
}
.au-eyebrow {
  margin: 0;
  font-size: 13px; font-weight: 500; line-height: 17px;
  letter-spacing: 0.78px; text-transform: uppercase;
  color: var(--brand);   /* #FF5F16 by marketing's decision (2026-10-13); the AA shade #c03e0b (5.2:1) before it */
}
.au-h2 {
  margin: 0;
  font-size: 40px; font-weight: 400; line-height: 46px;
  letter-spacing: -1px; color: var(--text-strong);
}

/* ============================================================
   HERO — "About" pill + H1
   ============================================================ */
.au-hero {
  position: relative;
  background: linear-gradient(0deg, rgba(250, 87, 62, 0.01), rgba(250, 87, 62, 0.01)), var(--bg);
  overflow: hidden;
  padding: 48px 0 96px;
}
/* wavy line-art decorations (blur + 0.1 opacity baked in the SVGs) */
.au-wave {
  position: absolute; pointer-events: none; user-select: none;
  max-width: none;
}
.au-hero__wave-top { width: 5186px; left: 50%; transform: translateX(-46%); top: -1240px; }
.au-hero__wave     { width: 5017px; left: 50%; transform: translateX(-50%); top: 10px; }

.au-hero__inner { position: relative; z-index: 1; }
.au-pill {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  background: rgba(255, 95, 22, 0.08);
  border: 1px solid rgba(255, 95, 22, 0.18);
  border-radius: 99px;
  font-size: 13px; font-weight: 500; line-height: 17px;
  letter-spacing: -0.32px; color: var(--brand);   /* #FF5F16 by marketing's decision (2026-10-13); the AA shade #c03e0b before it */
}
.au-h1 {
  margin: 42px 0 0;
  font-size: 56px; font-weight: 400; line-height: 59px;
  letter-spacing: -1.568px; color: var(--text-strong);
}

/* ============================================================
   CEO QUOTE — name + quote left, portrait right
   ============================================================ */
.au-quote {
  position: relative;
  background: var(--surface);
  padding: 98px 0 36px;
}
.au-quote__grid {
  position: relative;   /* anchors the CEO's bio popover + frost (correction 42, 2026-10-16) */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 569px);
  gap: clamp(60px, 8vw, 118px);
  align-items: start;
}
.au-quote__name {
  margin: 0;
  font-size: 40px; font-weight: 400; line-height: 57px;
  letter-spacing: -0.52px; color: var(--headline);
}
.au-quote__role {
  margin: 0 0 38px;
  font-size: 32px; font-weight: 400; line-height: 57px;
  letter-spacing: -0.52px; color: #757575;
}
.au-quote__text {
  margin: 0; max-width: 582px;
  font-size: 24px; font-weight: 400; line-height: 40px;
  color: var(--text-strong);
}
.au-quote__media { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.au-quote__photo {
  width: 100%; max-width: 569px; height: auto;
  border-radius: 40px;
  display: block;
}
.au-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500;
  color: var(--text-strong); text-decoration: none;
}
.au-more:hover { color: var(--brand); }   /* #FF5F16 by marketing's decision (2026-10-13) */
.au-more svg { transition: transform .2s ease; }
.au-more:hover svg { transform: translateX(3px); }

/* ============================================================
   LEADERSHIP GRID — 6 portrait cards (corrected design 2026-08-19)
   photo 392×478 r40 in a 403 col; name/role 22px; Learn-more 14px
   ============================================================ */
.au-team { background: var(--surface); padding: 24px 0 64px; }
.au-team__grid {
  position: relative;   /* anchors the Learn-more bio popover + frost overlay */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 76px 68px;   /* design: 392 photos on a ~1320 grid — photo-edge gaps measured ~68 col / ~76 row */
}
.au-tcard { display: flex; flex-direction: column; }
.au-tcard__photo {
  width: 100%; aspect-ratio: 392 / 478; height: auto;
  object-fit: cover;
  border-radius: 40px;
  display: block;
}
.au-tcard__name {
  margin: 18px 0 0;
  font-size: 22px; font-weight: 400; line-height: 29px;
  color: var(--headline);
}
.au-tcard__role {
  margin: 0 0 10px;
  font-size: 22px; font-weight: 400; line-height: 29px;
  color: #757575;   /* AA: design #999999 = 2.85:1 on white (fails 22px/400); #757575 = 4.61:1 */
}
.au-more--sm { font-size: 14px; font-weight: 400; }
.au-more--pop { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }

/* ---- Learn-more bio popover (design: Group 5832 — 427×395 white r40 card
        over a frosted neighbour card) ---- */
.au-pop-frost {
  position: absolute; z-index: 5;
  background: rgba(10, 23, 51, 0.05);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 40px;
  opacity: 0;
  transition: opacity .2s ease;
}
.au-pop-frost.is-open { opacity: 1; }
.au-pop {
  position: absolute; z-index: 6;
  width: 427px; min-height: 395px;
  padding: 46px 36px 36px;
  background: #fff;
  border-radius: 40px;
  box-shadow: 0 30px 80px rgba(10, 23, 51, 0.18), 0 6px 20px rgba(10, 23, 51, 0.08);
  opacity: 0; transform: scale(.96);
  transition: opacity .2s ease, transform .2s ease;
}
.au-pop.is-open { opacity: 1; transform: none; }
.au-pop__x {
  position: absolute; top: 18px; right: 18px;
  width: 25px; height: 25px;
  display: flex; align-items: center; justify-content: center;
  background: #0A1733; color: #fff;
  border: 0; border-radius: 50%; cursor: pointer;
}
.au-pop__x svg { width: 10px; height: 10px; }
.au-pop__name {
  margin: 0;
  font-size: 22px; font-weight: 400; line-height: 29px;
  color: #000;
}
.au-pop__role {
  margin: 2px 0 18px;
  font-size: 22px; font-weight: 400; line-height: 29px;
  color: #757575;   /* AA: design #999999 fails at 22px/400 on white */
}
.au-pop__bio { max-width: 355px; }
.au-pop__bio p {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 400; line-height: 16px;
  color: #0A1733;
}
.au-pop__bio p:last-child { margin-bottom: 0; }
/* the CEO's card (correction 42, 2026-10-16): inside his photo with a 24 px frame of it visible; the bio at
   16 / 24 across the card's full width (the 12 px / 355 px column above is the three C-level cards' design) */
.au-pop--ceo .au-pop__bio { max-width: none; }
.au-pop--ceo .au-pop__bio p { font-size: 16px; line-height: 24px; margin-bottom: 16px; }
.au-pop--ceo .au-pop__bio p:last-child { margin-bottom: 0; }

/* ============================================================
   OUR STORY — centered head + lead left / timeline right
   ============================================================ */
.au-story {
  position: relative;
  background: var(--bg);
  overflow: hidden;
  padding: 100px 0 110px;
}
.au-story__wave { width: 5178px; right: 55%; top: 260px; }
/* concentric rings, rebuilt inline (see markup) */
.au-rings { position: absolute; pointer-events: none; }

.au-story__inner { position: relative; z-index: 1; }
.au-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 552px) minmax(0, 1fr);   /* 2026-09-17: was 420 — the new lead breaks on 3 lines like the reference
                                                               ("…make sense of / …twenty years ago is now / …rely on."): probe window
                                                               [544, 562) — its widest line is 543.6, the next word makes 562.2 */
  gap: clamp(48px, 6vw, 96px);
  margin-top: 96px;
}
.au-story__lead {
  margin: 0;
  font-size: 24px; font-weight: 400; line-height: 28px;
  letter-spacing: -0.32px; color: var(--text);
}
.au-tl { position: relative; padding-left: 80px; }
/* Figma geometry: rail at x0, dots 39px to its RIGHT (centre x40, NOT on the
   rail), text at x80 — the dots float in the gutter between rail and copy */
/* rail = a neutral track + a "signal" that DRAWS ITSELF with scroll (ported
   from the intelica-concept Nosotros timeline): about.js drives --tl-progress
   0→1 (the tip chases a point ~2/3 down the viewport) and lights each dot as
   it passes. The signal is solid coral #FA573E (2026-10-16, deck slides 43-45:
   the coral-to-steel-blue gradient of 2026-09 went); the clip-path reveal (NOT
   scaleY) stays. No JS / reduced motion = fully drawn. */
.au-tl::before {
  /* the track — spans first-dot-centre to last-dot-centre (about.js
     measures --tl-end so the rail doesn't trail below the final dot) */
  content: ""; position: absolute; left: 0; top: 15px; bottom: var(--tl-end, 15px);
  width: 2px; background: var(--border);
}
.au-tl::after {
  /* the signal */
  content: ""; position: absolute; left: 0; top: 15px; bottom: var(--tl-end, 15px);
  width: 2px;
  background: #FA573E;
  clip-path: inset(0 0 calc((1 - var(--tl-progress, 1)) * 100%) 0);
  will-change: clip-path;
}
.au-tl__item { position: relative; z-index: 1; padding-bottom: 44px; }
.au-tl__item:last-child { padding-bottom: 0; }
.au-tl__item::before {
  content: ""; position: absolute; left: -47px; top: 8px;   /* Figma: dot centre 40px left of the text, 39px right of the rail */
  width: 14px; height: 14px; box-sizing: border-box;
  background: var(--surface);
  border: 3px solid #FA573E; border-radius: 7px;
  transition: border-color .45s ease;
}
/* JS took over: dots rest neutral until the signal's tip passes them */
.au-tl--js .au-tl__item:not(.is-lit)::before { border-color: var(--border); }
.au-tl--js .au-tl__item.is-lit::before { animation: au-tl-lit .8s ease; }
@keyframes au-tl-lit {
  0% { box-shadow: 0 0 0 rgba(250, 87, 62, 0); }
  40% { box-shadow: 0 0 14px rgba(250, 87, 62, 0.55); }
  100% { box-shadow: 0 0 0 rgba(250, 87, 62, 0); }
}
.au-tl__title {
  margin: 0 0 6px;
  font-size: 20px; font-weight: 500; line-height: 26px;
  letter-spacing: -0.4px; color: var(--text-strong);
}
.au-tl__desc {
  margin: 0;
  font-size: 15px; font-weight: 400; line-height: 23px;
  letter-spacing: -0.32px; color: var(--text);
}

/* ============================================================
   EXPERTS — fixed-navy band (both themes, like the presence band):
   centred header + three white capability cards. Rebuilt 2026-09-17
   from the Figma export (Background (2).svg, 1440x516) + CSS dump.
   Geometry normalised from the export's per-card slips (cards 316 /
   325 / 274 wide at three different y, titles 15.7 / 15.7 / 18 px,
   descs 10.7 / 15 / 14 px): three equal 326 cards on card 2's type
   scale (title 16/20 500, desc 15/23 400 #565656), top-aligned,
   equal height. The 08-24 globe / feature rows / logo strip are gone.
   PARKED 2026-10-16 (correction 46): the band's markup is a //- block
   comment in src/pages/our-company.pug — off the page, kept for the
   user's decision before the mobile pass; these rules stay for the restore.
   ============================================================ */
.au-experts {
  position: relative; overflow: hidden;
  /* navy base + the export's two warm radial glows (dump: Gradient) */
  background:
    radial-gradient(120.21% 141.42% at 85% 0%, rgba(255, 95, 22, 0.14) 0%, rgba(255, 95, 22, 0) 55%),
    radial-gradient(141.42% 141.42% at 0% 100%, rgba(255, 171, 87, 0.1) 0%, rgba(255, 171, 87, 0) 55%),
    #0A1733;
}
.au-experts__inner { position: relative; padding-top: 86px; padding-bottom: 37px; }   /* dump: Header top 56 + an empty 15.5 slot + gap 14 = h2 box at 85.5; bottom 37 = the export's 516 total with the 227-tall cards (design: 34 under its tallest card) */
.au-experts__head {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; text-align: center;
}
.au-experts__h2 {
  margin: 0;
  font-size: 40px; font-weight: 400; line-height: 44px;
  letter-spacing: -1.12px; color: #fff;
}
.au-experts__h2 b { font-weight: 400; color: #FA573E; }   /* the render paints "Backed by experience." coral (the dump says #FFF — the SVG wins) */
.au-experts__lead {
  margin: 0; max-width: 588px;   /* design box 580; Chrome measures line 1 ("…first-hand") at 579.7 → any cap in [580, 596) reproduces the "— and solved…" break */
  font-size: 15px; font-weight: 400; line-height: 22px;
  letter-spacing: -0.32px; color: rgba(255, 255, 255, 0.6);
}
.au-experts__cards {
  display: flex; justify-content: space-between; align-items: stretch;
  width: min(1214px, 100%); margin: 64px auto 0;   /* design row 106→1319 = 1213 wide; cards start 253–267, header ends 190.5 */
}
.au-xcard {
  box-sizing: border-box; width: 326px; flex: 0 0 326px;
  padding: 23px 23px 37px;                          /* dump: 22.79 / 22.79 / 37.03 */
  background: #fff; border: 1px solid #EDEDED; border-radius: 18px;
}
.au-xcard__icon { display: block; width: 32px; height: 32px; }   /* the supplied tinted 32px tiles, used verbatim */
.au-xcard__title {
  margin: 14px 0 0;                                 /* dump: gap 6.69 + h4 padding-top 7.55 */
  font-size: 16px; font-weight: 500; line-height: 20px;
  letter-spacing: -0.32px; color: #0A1733;
}
.au-xcard__desc {
  margin: 7px 0 0;                                  /* dump: gap 6.69 */
  font-size: 15px; font-weight: 400; line-height: 23px;
  letter-spacing: -0.32px; color: #565656;
}

/* ============================================================
   MEET OUR TEAM — orange rounded band → Our Leadership
   ============================================================ */
.au-meet { background: var(--bg); padding: 56px 0 8px; }
.au-meet__band {
  display: flex; align-items: center; justify-content: space-between;
  gap: 48px; flex-wrap: wrap;
  padding: 64px 56px;
  background: #FA573E;   /* the coral accent by marketing's decision (2026-10-16, deck slides 43-45); #FF5F16 --brand (2026-10-13)
                            and the AA shade --brand-strong (4.62:1 behind the 20px white subtitle) before it */
  border-radius: 30px;
}
.au-meet__h2 {
  margin: 0;
  font-size: 52px; font-weight: 400; line-height: 57px;
  letter-spacing: -0.52px; color: #fff;
  max-width: 440px;   /* 2026-09-17 copy "Meet our commercial team" breaks "Meet our / commercial team" like the reference:
                         probe window [404, 491) — "commercial team" 403.2 must fit, "Meet our commercial" 491.8 must not */
}
.au-meet__right {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  flex: 0 0 calc(50% - 24px);   /* the reference lays the band out as two equal columns (gap 48): the sub + button start at
                                    the band's midline + 24. Was max-width: 604px — with the shorter 2026-09-17 sub the
                                    space-between row would have pushed the column to the far right edge */
}
.au-meet__sub {
  margin: 0;
  font-size: 20px; font-weight: 400; line-height: 28px;
  color: #fff;
}
.au-meet__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 24px;
  background: #fff; color: #0C1833;
  border-radius: 999px;
  font-size: 18px; font-weight: 400; line-height: 25px;
  letter-spacing: -0.452px; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.au-meet__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .25); }
.au-meet__btn svg { transition: transform .2s ease; }
.au-meet__btn:hover svg { transform: translateX(3px); }

/* ============================================================
   OFFICES — "Where we are", 3×2 card grid
   ============================================================ */
.au-offices { background: var(--bg); padding: 96px 0 40px; }
/* 2026-09-17: the six address cards (city + region chip + address) became plain "City, Country" pills per the
   user's reference — shrink-wrapped white pills, ~197×77 min, label 20/26 500 navy.
   2026-10-16 (correction 40): seven pills, 3 on the first row + 4 on the second per the Figma reference — a
   12-column grid, the first three pills span 4 columns, the rest span 3, each centred in its span (the grid is
   1157 px at 1536 / 1178 at 1280; a quarter = 289 px, the widest pill 230 px) */
.au-offices__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  justify-items: center; align-items: center;
  row-gap: 48px; column-gap: 0;
  margin: 64px 0 0; padding: 0; list-style: none;
}
.au-office { grid-column: span 3; }
.au-office:nth-child(-n + 3) { grid-column: span 4; }
.au-office {
  display: flex; align-items: center; justify-content: center;
  min-width: 196px; min-height: 77px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid #EDEDED;
  border-radius: 20px;
  font-size: 20px; font-weight: 500; line-height: 26px;
  letter-spacing: -0.4px; color: var(--text-strong);
  text-align: center;
}

/* ============================================================
   CLOSING CTA — centered head + two buttons over wave/rings art
   ============================================================ */
.au-cta {
  position: relative;
  background: var(--bg);
  overflow: hidden;
  padding: 140px 0 150px;
}
.au-cta__wave { width: 5017px; left: 50%; transform: translateX(-52%); top: -40px; }
.au-cta__rings { left: 50%; transform: translateX(-50%); top: -140px; }
.au-cta__inner {
  position: relative; z-index: 1;
  max-width: 800px; margin-inline: auto;   /* 2026-09-17: was 720 (= 597 of content at 1536) — the new lead's first line needs 635 */
  display: flex; flex-direction: column; align-items: center;
  gap: 20px; text-align: center;
  padding-inline: var(--gutter);
}
.au-cta__h2 {
  margin: 0; max-width: 500px;
  font-size: 40px; font-weight: 400; line-height: 46px;
  letter-spacing: -1px; color: var(--text-strong);
}
.au-cta__lead {
  margin: 0; max-width: 660px;   /* 2026-09-17 copy breaks "…or a long-term / advisory partner — we'd love to talk." like the reference:
                                    probe window [635, 705) — line 1 measures 634.5, "+ advisory" 705.5 (the old 636 sat 1.5px from the edge) */
  font-size: 18px; font-weight: 400; line-height: 28px;
  letter-spacing: -0.32px; color: var(--text);
}
/* 2026-09-17: the "Contact us" + "See incontrol" buttons became the site's email pill (styles.css .closer__* anatomy,
   493×58, validated by main.js) — only the vertical rhythm is page-specific (reference: ~26 under the lead) */
.au-cta__form, .au-cta__done { margin-top: 8px; }

/* ============================================================================
   AL — OUR LEADERSHIP (our-leadership.html)
   ============================================================================ */

/* ============================================================
   AL §1 · HERO — About pill (left) + centered H1 + centered lead
   (markup doubles the class with .au-hero to reuse bg + waves)
   ============================================================ */
.al-hero { padding: 34px 0 77px; }
/* this hero is much shorter than the company one — one wave, re-anchored
   (the company positions put its dense bloom over the whole strip) */
.al-hero .au-hero__wave { top: -160px; transform: translateX(-42%); }
.al-hero__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.al-hero__inner .au-pill { align-self: flex-start; }
.al-hero__h1 { margin-top: 10px; }
.al-hero__lead {
  /* 2026-10-16 (correction 40, the fix round): positioned like the Figma — the text LEFT-aligned, its ink 372 px left of the
     title's centre and 78 px under the title's ink (both crops measured by ink bands at 1.097 / 1.425 scale); the 57 px right
     margin shifts the centred 689 px box 28.5 px left ((689 + 57) / 2 = 373). Was `margin: 90px 0 0`, centred text. */
  margin: 60px 57px 0 0; max-width: 689px; text-align: left;
  font-size: 19px; font-weight: 400; line-height: 29px;
  letter-spacing: -0.32px; color: var(--text);
}

/* ============================================================
   AL §2 · TEAM GRID — 10 cards on a staggered 4-col grid
   (design: photos 296×444 r40, col pitch 344/gap 48, row pitch 637;
   row 2 occupies cols 2–4 since correction 41 (2026-10-16; was cols 3–4), row 3 cols 2–4 — deliberate stagger)
   ============================================================ */
.al-team { background: var(--surface); padding: 72px 0 74px; }
.al-team__grid {
  position: relative;   /* anchors the Learn-more bio popover + frost overlay (correction 49) */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 37px 48px;
}
.al-tcard { display: flex; flex-direction: column; align-items: flex-start; }
/* stagger placement (auto row, pinned column) */
.al-tcard--c2 { grid-column: 2; }
.al-tcard--c3 { grid-column: 3; }
.al-tcard--c4 { grid-column: 4; }
.al-tcard__photo {
  width: 100%; aspect-ratio: 296 / 444; height: auto;
  object-fit: cover;
  border-radius: 40px;   /* design: one card exports r44 + one 298×447 — normalized, obvious slips */
  display: block;
}
.al-tcard__photo--placeholder { background: var(--border); }   /* correction 54 (2026-10-17): a card without a photo yet (Ysabel Palomino, Alonso Mansilla) shows a grey block in the photo's shape — light #d9d9d9 / dark #26314c via the token; the div inherits the img rule's aspect-ratio + radius */
/* captions may bleed ~27px into the column gap like the design (its text
   boxes are wider than the 296px photo) — keeps long roles on one line */
.al-tcard__name,
.al-tcard__role,
.al-tcard__region { align-self: stretch; margin: 0 -27px 0 0; }   /* zero the UA h3/p margins; keep the -27 right bleed. per-element margin-top below sets the rhythm */
/* caption rhythm mirrors the Our Company cards (.au-tcard), per the user —
   tighter than the Figma auto-layout: photo →18→ name →0→ role →3→ region →10→ Learn more */
.al-tcard__name {
  margin-top: 18px;
  font-size: 22px; font-weight: 400; line-height: 29px;
  color: var(--headline);
}
.al-tcard__role {
  margin-top: 0;
  font-size: 22px; font-weight: 400; line-height: 29px;
  color: #757575;   /* AA: design #999999 fails at 22px/400 on white (same call as .au-tcard__role) */
}
.al-tcard__region {
  margin-top: 3px;
  font-size: 15px; font-weight: 400; line-height: 20px;
  color: #757575;
}
.al-tcard .au-more { margin-top: 10px; gap: 10px; }   /* matches Our Company's role→Learn-more gap */
.al-tcard .au-more .icon { width: 20px; height: 20px; }   /* design arrow is a 20px icon, not the site 16px */

/* ============================================================
   AL §3 · SUCCESS STORIES — dark rounded band (h2 left, sub+btn right)
   bg = site navy #0A1733 (matches the footer / experts band; the Figma
   dump's #1F1D30 plum-navy was swapped to match the site, per the user)
   ============================================================ */
.al-band { background: var(--surface); padding: 0 0 100px; }
.al-band__box {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  padding: 64px 40px;
  background: #0A1733;
  border-radius: 30px;
}
.al-band__h2 {
  margin: 0;
  font-size: 52px; font-weight: 400; line-height: 57px;
  letter-spacing: -0.52px; color: #fff;
}
.al-band__right { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 604px; }
.al-band__sub {
  margin: 0;
  font-size: 20px; font-weight: 400; line-height: 28px;
  color: #fff;
}
.al-band__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 24px;
  background: #fff; color: #0F1933;
  border-radius: 999px;
  font-size: 18px; font-weight: 400; line-height: 25px;
  letter-spacing: -0.452px; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.al-band__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .25); }
.al-band__btn .icon { width: 24px; height: 24px; }   /* design arrow drawn ~17px wide */
.al-band__btn svg { transition: transform .2s ease; }
.al-band__btn:hover svg { transform: translateX(3px); }

/* ============================================================
   AL §4 · TESTIMONIALS — eyebrow/h2/counter + sliding quote card
   + progress dashes + prev/next arrows (js/leadership.js)
   ============================================================ */
.al-tm { background: var(--bg); padding: 0; }
.al-tm__inner { border-top: 1px solid #EDEDED; padding-top: 56px; }
.al-tm .au-eyebrow { letter-spacing: 1.04px; }   /* this design tracks the eyebrow wider than our-company's 0.78 */
.al-tm__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.al-tm__headleft { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.al-tm__h2 {
  margin: 0; max-width: 668px;
  font-size: 56px; font-weight: 400; line-height: 56px;
  letter-spacing: -1.568px; color: var(--text-strong);
}
.al-tm__count {
  font-size: 14px; font-weight: 400; line-height: 18px;
  letter-spacing: -0.32px; color: var(--text); white-space: nowrap;
}
.al-tm__count b { font-weight: 400; color: var(--text-strong); }

.al-tm__viewport { overflow: hidden; margin-top: 48px; transition: height .5s cubic-bezier(.5, 0, .2, 1); }
/* flex-start so slides keep their own natural height (the image card is shorter
   than the quote card) — js/leadership.js animates the viewport to the active one */
.al-tm__track { display: flex; align-items: flex-start; transition: transform .55s cubic-bezier(.5, 0, .2, 1); }
.al-tm__slide {
  flex: 0 0 100%; min-width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column;
  min-height: 480px;
  padding: 81px clamp(48px, 6vw, 89px) 81px;
  background: var(--surface);
  border: 1px solid #EDEDED;
  border-radius: 28px;
}
.al-tm__client {
  margin: 0;
  font-size: 11px; font-weight: 400; line-height: 14px;
  letter-spacing: 1.32px; text-transform: uppercase;
  color: var(--brand);   /* #FF5F16 by marketing's decision (2026-10-13), like .au-eyebrow */
}
.al-tm__mark {
  display: block; height: 47px; margin: 40px 0 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 117.6px; line-height: 47px; letter-spacing: -1.1px;
  color: #FF5F16;
  user-select: none;
}
.al-tm__text {
  margin: 17px 0 40px; max-width: 758px;
  font-size: 44px; font-weight: 400; line-height: 52px;
  letter-spacing: -1.1px; color: var(--text-strong);
}
.al-tm__text--long { font-size: 32px; line-height: 44px; letter-spacing: -0.7px; }
.al-tm__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px;
  margin-top: auto;   /* pins the attribution to the card bottom on short quotes */
  padding-top: 32px;
  border-top: 1px solid #EDEDED;
}
.al-tm__person { display: flex; align-items: center; gap: 14px; }
.al-tm__avatar {
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 95, 22, 0.1);
  border-radius: 50%; overflow: hidden;
  font-size: 13px; font-weight: 600; letter-spacing: -0.32px; color: var(--brand);   /* #FF5F16 by marketing's decision (2026-10-13) */
}
.al-tm__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-tm__meta { display: flex; flex-direction: column; gap: 2px; }
.al-tm__name { font-size: 15px; font-weight: 500; line-height: 20px; letter-spacing: -0.32px; color: var(--text-strong); }
.al-tm__role { font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: -0.32px; color: var(--text); }
.al-tm__stats { display: flex; gap: 40px; }
.al-tm__stat { display: flex; flex-direction: column; gap: 4px; }
.al-tm__statval {
  font-size: 28px; font-weight: 500; line-height: 36px;
  letter-spacing: -0.7px; color: var(--brand);   /* 28px = large text, --brand passes 3:1 */
}
.al-tm__statlabel {
  font-size: 11px; font-weight: 400; line-height: 14px;
  letter-spacing: 0.44px; text-transform: uppercase; color: var(--text);
}

/* ---- image card variant (Frame 7210.svg): landscape photo left ·
        logo/quote/attribution right, no card chrome ---- */
.al-tm__slide--split {
  flex-direction: row; align-items: center;
  gap: clamp(40px, 5vw, 80px);
  /* keep the base card chrome (border · surface bg · radius · padding) so this
     reads as a card like slide 1 — the raw Figma frame had none */
}
.al-tm__photo {
  flex: 1 1 0; min-width: 0;
  aspect-ratio: 600 / 480;         /* keep the design's LANDSCAPE image — never a tall strip */
  border-radius: 24px; overflow: hidden; position: relative;
}
/* absolute img so its intrinsic size can't drive the flex layout */
.al-tm__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.al-tm__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.al-tm__logo { height: 32px; width: auto; display: block; }
.al-tm__quote {
  margin: 64px 0 0; max-width: 600px;   /* design: 64px gap logo → quote */
  font-size: 32px; font-weight: 400; line-height: 1.2;
  letter-spacing: -0.025em; color: var(--text-strong);   /* design #0E1624; token keeps it themeable */
}
.al-tm__attrib { margin-top: 40px; }   /* design: 40px gap quote → attribution */
.al-tm__cname {
  margin: 0;
  font-size: 18px; font-weight: 600; line-height: 1.5;
  letter-spacing: -0.02em; color: var(--text-strong);
}
.al-tm__crole {
  margin: 2px 0 0;
  font-size: 16px; font-weight: 400; line-height: 1.5;
  letter-spacing: -0.02em; color: var(--text-strong); opacity: .5;
}

.al-tm__controls { display: flex; align-items: center; justify-content: space-between; margin-top: 80px; }
.al-tm__dashes { display: flex; gap: 8px; }
.al-tm__dash {
  position: relative; width: 28px; height: 14px;
  padding: 0; border: 0; background: none; cursor: pointer;
  transition: width .3s ease;
}
.al-tm__dash::after {
  content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px;
  background: #757575;   /* AA 1.4.11: design #EDEDED = 1.13:1 on --bg (invisible to low vision) */
}
.al-tm__dash.is-active { width: 44px; }
.al-tm__dash.is-active::after { background: var(--brand); }   /* #FF5F16 by marketing's decision (2026-10-13) */
.al-tm__btns { display: flex; gap: 8px; }
.al-tm__btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: #0A1733; color: #fff;
  border: 0; border-radius: 50%; cursor: pointer;
}
.al-tm__btn svg { width: 14px; height: 14px; }
.al-tm__btn:disabled { opacity: .35; cursor: default; }

/* ============================================================
   DARK THEME
   ============================================================ */
:root[data-theme="dark"] .au-hero {
  background: linear-gradient(0deg, rgba(250, 87, 62, 0.02), rgba(250, 87, 62, 0.02)), var(--bg);
}
:root[data-theme="dark"] .au-pill { background: rgba(255, 95, 22, 0.12); }
:root[data-theme="dark"] .au-office { border-color: var(--border); }
:root[data-theme="dark"] .au-quote__role { color: var(--text); }
:root[data-theme="dark"] .au-tcard__role { color: var(--text); }
:root[data-theme="dark"] .au-pop { background: var(--surface); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
:root[data-theme="dark"] .au-pop__name { color: var(--headline); }
:root[data-theme="dark"] .au-pop__role { color: var(--text); }
:root[data-theme="dark"] .au-pop__bio p { color: var(--text-strong); }
:root[data-theme="dark"] .au-pop-frost { background: rgba(255, 255, 255, 0.06); }
/* the wave line-art is drawn for a light ground — lift it slightly on dark */
:root[data-theme="dark"] .au-wave { opacity: .55; filter: invert(1) hue-rotate(180deg); }
/* ---- .al-* (Our Leadership) ---- */
:root[data-theme="dark"] .al-tcard__role,
:root[data-theme="dark"] .al-tcard__region { color: var(--text); }
:root[data-theme="dark"] .al-tm__inner,
:root[data-theme="dark"] .al-tm__slide,
:root[data-theme="dark"] .al-tm__foot { border-color: var(--border); }
:root[data-theme="dark"] .al-tm__dash::after { background: #66779e; }   /* AA 1.4.11: 4.2:1 on --bg (the landing's #3f4d6b = 2.3:1 fails) */
:root[data-theme="dark"] .al-tm__dash.is-active::after { background: var(--brand); }   /* NOT redundant: the dark inactive rule above out-specifies .al-tm__dash.is-active::after */
:root[data-theme="dark"] .al-tm__btn { background: #2b3a5c; }           /* landing tm nav-btn precedent */

/* ============================================================
   RESPONSIVE (fluid 1280–1600; body min-width 1280 like the site)
   ============================================================ */
@media (max-width: 1380px) {
  .au-quote__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); }
}

/* ============================================================
   REDUCED MOTION — kill this page's hover micro-motions
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .au-more svg, .au-meet__btn, .au-meet__btn svg,
  .au-pop, .au-pop-frost { transition: none; }
  .au-more:hover svg, .au-meet__btn:hover, .au-meet__btn:hover svg,
  .al-tm__track, .al-tm__viewport, .al-tm__dash, .al-band__btn, .al-band__btn svg { transition: none; }
  .al-band__btn:hover, .al-band__btn:hover svg { transform: none; }
  /* story timeline: signal fully drawn, all dots lit, no pulse
     (about.js also skips its scroll listeners under reduced motion) */
  .au-tl::after { clip-path: none; }
  .au-tl--js .au-tl__item:not(.is-lit)::before { border-color: #FA573E; }
  .au-tl__item::before { transition: none; }
  .au-tl--js .au-tl__item.is-lit::before { animation: none; }
}