/* ============================================================================
   about-us.styles.css — page-specific styling for the About Us page.
   All selectors are scoped under .ab-* (or [data-section^="about-"]) so nothing
   here can touch Home / Meet the Team / Training. Design tokens, fonts, the nav,
   footer, back-to-top arrow and .wrap width all come from the shared home CSS —
   this file only adds the About sections.
   ============================================================================ */

/* section rhythm (tightened — smaller gaps between blocks) ---------------- */
.ab-sec{padding:clamp(28px,3.6vw,52px) 0}
.ab-sec h2{font-family:'Manrope',system-ui,sans-serif;font-weight:800;letter-spacing:-.022em;line-height:1.05;font-size:clamp(2rem,3.8vw,3.15rem);margin:0}

/* eyebrow (reuses shared .eyebrow/.etrack marquee) ------------------------ */
.ab-eyebrow{margin-bottom:22px}
.ab-eyebrow.d .etrack span{color:var(--gold)}
.ab-eyebrow.d .etrack i{color:rgba(10,31,77,.32)}
/* hero eyebrow "Our story" + its dots in white */
.ab-hero .ab-eyebrow .etrack span,.ab-hero .ab-eyebrow .etrack i{color:#fff}
/* dark-field CTA eyebrow ("The people") in amber-yellow */
.ab-team-cta .ab-eyebrow .etrack,.ab-team-cta .ab-eyebrow .etrack i{color:var(--amber)}
/* supply-chain eyebrow: red text, muted-navy dots (matching "What defines us") */
.ab-values .ab-eyebrow .etrack{color:var(--red)}
.ab-values .ab-eyebrow .etrack i{color:rgba(10,31,77,.32)}

/* ------------------------------------------- HERO + INTRO (editorial split) --
   One site photo as a STATIC half-screen background on the left; it spans the hero
   copy, the stats and the intro (several blocks). The About copy sits on the right on
   the navy field. The photo is enlarged to COVER the panel and anchored to its RIGHT
   edge (on the centre line), so the right edge stays put while the left edge reveals
   more/less of the frame as the viewport widens. */
.ab-hero.ab-split{display:block;position:relative;overflow:hidden;background:#071436;min-height:0;align-items:initial;
  padding:clamp(120px,11vh,132px) 0 clamp(46px,6vw,80px)}
/* left half, full section height, bleeds to the viewport edge; scrolls with the section (not sticky) */
.ab-split-media{position:absolute;left:0;top:0;bottom:0;width:50vw;margin:0;overflow:hidden;z-index:0}
.ab-split-media img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block;transform:scale(1.04);animation:abhz 40s ease-in-out infinite alternate}
@keyframes abhz{from{transform:scale(1.04)}to{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.ab-split-media img{animation:none;transform:none}}
/* soften the right edge into the navy so the photo/copy seam is not a hard line */
.ab-split-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,20,54,0) 58%,rgba(7,20,54,.5) 86%,#071436 100%)}
html.js .ab-split-media.ab-rev{transform:none}   /* opacity-only reveal on the background */
/* copy in the right half, clear of the photo */
.ab-split-head,.ab-split .ab-stats,.ab-split-intro{position:relative;z-index:1;width:50%;margin-left:auto;padding-left:clamp(26px,3.4vw,64px)}
/* lower the hero head text a little and reserve a right gutter for the FMB badge */
.ab-split-head{padding-top:clamp(12px,1.8vw,24px);padding-right:clamp(94px,12.5vw,172px)}
.ab-split .ab-stats{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;margin-top:clamp(18px,2.2vw,28px)}
.ab-split .ab-chip{flex:1 1 clamp(140px,20%,178px)}
.ab-split-intro{margin-top:clamp(10px,1.8vw,22px);padding-top:clamp(20px,2.4vw,30px);border-top:1px solid rgba(255,255,255,.13)}

/* copy on the navy field */
.ab-split .ab-eyebrow{margin-bottom:15px}
.ab-split-head h1{font-family:'Manrope',system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:.92;font-size:clamp(2.6rem,4.6vw,4.4rem);color:#fff;margin:0}
.ab-split-head h1 .r{color:var(--gold-hi)}
.ab-split .ab-lead{margin-top:18px;max-width:52ch;color:rgba(255,255,255,.86);font-size:clamp(1.04rem,1.35vw,1.22rem);line-height:1.55}
.ab-split-intro h2{font-family:'Manrope',system-ui,sans-serif;font-weight:800;letter-spacing:-.022em;line-height:1.08;font-size:clamp(1.7rem,2.5vw,2.4rem);color:#fff;margin:0}
.ab-split-intro .ab-since{margin:14px 0 0;font-family:'PlexMono',ui-monospace,monospace;font-size:clamp(.95rem,1.1vw,1.08rem);letter-spacing:.03em;color:rgba(255,255,255,.66)}
.ab-split-intro .ab-since b{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
.ab-split-intro>p{margin:18px 0 0;color:rgba(255,255,255,.82);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.7;max-width:62ch}
.ab-split-intro .ab-quote{margin:20px 0 0;padding:0;font-family:'Fraunces',Georgia,serif;font-weight:300;font-style:italic;font-size:clamp(1.4rem,2.3vw,1.95rem);line-height:1.26;letter-spacing:-.01em;color:#fff}
.ab-split-intro .ab-do{margin-top:clamp(20px,2.4vw,30px);display:flex;align-items:center;gap:clamp(12px,1.8vw,22px);flex-wrap:wrap}
.ab-split-intro .ab-do-lbl{flex:none;font-family:'PlexMono',ui-monospace,monospace;font-size:clamp(.86rem,1vw,.96rem);letter-spacing:.12em;text-transform:uppercase;color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:4px}
.ab-split-intro .ab-do-list{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.ab-split-intro .ab-do-list li{display:inline-flex}
.ab-split-intro .ab-do-list a{font-family:'PlexMono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.86);padding:9px 15px;border:1px solid rgba(255,255,255,.22);border-radius:40px;background:rgba(255,255,255,.04);text-decoration:none;transition:border-color .3s var(--e),color .3s var(--e),background .3s var(--e),transform .3s var(--e),box-shadow .3s var(--e)}
.ab-split-intro .ab-do-list a:hover,.ab-split-intro .ab-do-list a:focus-visible{border-color:var(--amber);color:#fff;background:rgba(236,184,76,.16);transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(236,184,76,.45)}
/* "What we do": the block is a reveal trigger; label + each pill animate in one after another */
/* label fades in, then each pill POPS in one after another (scale + slight overshoot) —
   slower and clearly staggered so they read one-by-one */
@keyframes ab-do-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
html.js .ab-do .ab-do-lbl,html.js .ab-do .ab-do-list li{opacity:0}
html.js .ab-do.is-in .ab-do-lbl{opacity:1;transition:opacity .5s var(--e)}
html.js .ab-do.is-in .ab-do-list li{animation:ab-do-pop .65s cubic-bezier(.34,1.56,.64,1) both}
html.js .ab-do.is-in .ab-do-list li:nth-child(1){animation-delay:.06s}
html.js .ab-do.is-in .ab-do-list li:nth-child(2){animation-delay:.20s}
html.js .ab-do.is-in .ab-do-list li:nth-child(3){animation-delay:.34s}
html.js .ab-do.is-in .ab-do-list li:nth-child(4){animation-delay:.48s}
html.js .ab-do.is-in .ab-do-list li:nth-child(5){animation-delay:.62s}
html.js .ab-do.is-in .ab-do-list li:nth-child(6){animation-delay:.76s}
/* both hero eyebrows are white ("Our story" and "Who we are") */
.ab-split .ab-eyebrow-intro .etrack span,.ab-split .ab-eyebrow-intro .etrack i{color:#fff}
/* reused .ab-chip stat styling */
.ab-chip{display:flex;flex-direction:column;gap:4px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.ab-chip b{font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:clamp(1.7rem,2.1vw,2.05rem);line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.ab-chip b::after{content:"";display:block;width:28px;height:2px;border-radius:2px;background:var(--red);margin-top:7px}
.ab-chip span{font-family:'PlexMono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.35;max-width:14ch}
/* this chip carries a worded value ("TRUSTED"): nudge it down and keep it on one
   line so it fits the same-size card as the numeric stats */
.ab-chip-net b{font-size:clamp(1.2rem,1.7vw,1.55rem);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
/* FMB credential badge — the recognizable red logo (linked) pinned to the top-right
   of the hero head; the head text is lowered a little so it sits clear of the badge */
.ab-hero-fmb{position:absolute;top:clamp(12px,2vw,30px);right:clamp(8px,1.6vw,26px);display:block;line-height:0;border-radius:12px;overflow:hidden;
  box-shadow:0 16px 34px -16px rgba(0,0,0,.6);transition:transform .3s var(--e),box-shadow .3s var(--e)}
.ab-hero-fmb img{height:clamp(72px,9.4vw,140px);width:auto;display:block}
.ab-hero-fmb:hover,.ab-hero-fmb:focus-visible{transform:translateY(-2px);box-shadow:0 22px 42px -16px rgba(0,0,0,.66)}
/* re-assert the lift over the reveal's transform:none (matches the .ab-card pattern) */
html.js .ab-rev.is-in.ab-hero-fmb:hover,html.js .ab-rev.is-in.ab-hero-fmb:focus-visible{transform:translateY(-2px)}

/* ------------------------------------------------ WHAT DEFINES US (light) --
   A human, narrative section: eyebrow + big heading + intro, a large unattributed
   manifesto statement (not a quote), then two character sub-blocks. */
.ab-defines{background:var(--cream);color:var(--ink)}
/* Two independent columns: the heading + first supporting paragraph on the left,
   the opening line + second supporting paragraph on the right. Each column flows
   on its own (no shared grid rows), so paragraphs sit directly under the block
   above them with an even gap and there is never an alignment void. Collapses to
   a single column, in reading order, on narrow screens. */
.ab-defines-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(30px,4.5vw,72px);align-items:start}
.ab-defines-eyebrow{grid-column:1 / -1;margin:0 0 clamp(4px,0.6vw,8px)}
/* the marquee eyebrow carries a global 22px bottom margin; zero it here so the
   gap to the heading is only the small wrapper margin above (fixes an oversized
   eyebrow -> heading gap that the wrapper reductions alone could not close) */
.ab-defines-eyebrow .ab-eyebrow{margin-bottom:0}
.ab-defines-col{display:flex;flex-direction:column;gap:clamp(13px,1.5vw,18px)}
.ab-defines-head{text-align:left}
.ab-defines-head h2{font-family:'Manrope',system-ui,sans-serif;font-weight:800;letter-spacing:-.024em;line-height:1.05;font-size:clamp(2rem,3.8vw,3.15rem);color:var(--ink);margin:0}
.ab-defines-intro{color:#294066}
.ab-defines-intro p{margin:0;font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.72}
.ab-defines-bp{margin:0;color:#294066;font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.72}
/* pull-quote — a clean, centred statement with a short red rule above; no card,
   background, quote marks or paint effect, just the serif line. */
.ab-manifesto{max-width:800px;margin:clamp(24px,3.2vw,44px) auto clamp(40px,5.4vw,72px);padding:0;text-align:center;
  font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:clamp(1.5rem,3vw,2.5rem);
  line-height:1.22;letter-spacing:-.012em;color:var(--ink)}
.ab-manifesto::before{content:"";display:block;width:54px;height:3px;background:var(--red);border-radius:2px;margin:0 auto clamp(20px,2.6vw,30px)}
/* two character blocks, each tidied under a thin divider rule */
.ab-defines-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.ab-defines-grid article{border-top:1px solid rgba(10,31,77,.16);padding-top:clamp(18px,2vw,26px)}
.ab-defines-grid h3{font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:clamp(1.25rem,1.7vw,1.6rem);letter-spacing:-.01em;line-height:1.22;color:var(--ink);margin:0 0 14px}
.ab-defines-grid p{margin:0 0 16px;color:#294066;font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.7}
.ab-defines-grid p:last-child{margin-bottom:0}

/* ----------------------------------- SUPPLY CHAIN (light field, blue cards) -
   The field blends with the light-blue blocks either side; the periwinkle
   cards (the paint-roller blue) now carry the colour instead. */
.ab-values{background:var(--cream);color:var(--ink);padding:clamp(20px,2.6vw,38px) 0 clamp(22px,2.6vw,40px)}
/* a slim periwinkle frame (same blue as the cards) around the block */
.ab-values-frame{background:#D3E1F2;border:1.5px solid #8FA6CE;border-radius:clamp(20px,2.4vw,30px);
  padding:clamp(26px,3.4vw,46px) clamp(20px,3vw,44px);overflow:hidden}
.ab-head{max-width:none;margin:0 auto clamp(18px,2.4vw,34px);text-align:center}
.ab-head .ab-eyebrow{display:inline-block}
.ab-head h2{white-space:nowrap;color:var(--ink)}   /* keep "Built on a responsible supply chain" on one line */
.ab-sub{margin:16px auto 0;color:rgba(10,31,77,.62);font-size:clamp(1rem,1.3vw,1.16rem);line-height:1.6;max-width:56ch}
.ab-vgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.6vw,24px);align-items:start}
.ab-card{position:relative;padding:clamp(22px,1.9vw,30px);border-radius:16px;
  background:#fff;border:1px solid rgba(10,31,77,.12);
  box-shadow:0 16px 34px -22px rgba(10,31,77,.34);
  transition:transform .45s var(--e),border-color .45s var(--e),box-shadow .45s var(--e)}
.ab-card:nth-child(2n){margin-top:clamp(12px,1.2vw,16px)}   /* delicate vertical rhythm: cards 2 & 4 a touch lower */
.ab-cnum{display:block;font-family:'PlexMono',ui-monospace,monospace;font-size:clamp(1.4rem,1.8vw,1.7rem);letter-spacing:.06em;color:var(--red);margin-bottom:16px}
.ab-card h3{font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:1.16rem;letter-spacing:-.01em;line-height:1.2;margin:0 0 10px;color:var(--ink)}
.ab-card p{margin:0;color:rgba(10,31,77,.84);font-size:.96rem;line-height:1.6}
/* cards slide in from the right, one after another, once 2/3 of the row is in
   view; JS toggles .is-in and re-plays it each time the row re-enters view */
html.js .ab-vgrid .ab-card{opacity:0;transform:translateX(72px);transition:opacity .5s var(--e),transform .5s var(--e)}
html.js .ab-vgrid.is-in .ab-card{opacity:1;transform:none}
/* one after another: each card starts only once the previous has finished (stagger >= duration) */
html.js .ab-vgrid.is-in .ab-card:nth-child(2){transition-delay:.55s}
html.js .ab-vgrid.is-in .ab-card:nth-child(3){transition-delay:1.1s}
html.js .ab-vgrid.is-in .ab-card:nth-child(4){transition-delay:1.65s}
/* hover: gentle 4px lift, border a touch redder, shadow a touch deeper (higher
   specificity than the reveal's transform:none so it takes effect once shown) */
.ab-card:hover,html.js .ab-vgrid.is-in .ab-card:hover{transform:translateY(-4px);border-color:rgba(200,16,46,.40);box-shadow:0 22px 40px -22px rgba(10,31,77,.36)}

/* (the "our people" copy is now folded into the who-we-are body — one block) */

/* -------------------- MEET-THE-TEAM CTA (light-blue field, navy card) ------
   Shares the light-blue field with the accreditation marquee that follows. */
.ab-team-cta{background:var(--cream);padding-top:clamp(30px,3.4vw,54px);padding-bottom:clamp(16px,1.9vw,26px)}
.ab-cta-card{position:relative;display:flex;align-items:center;justify-content:space-between;gap:clamp(28px,5vw,72px);padding:clamp(34px,4.6vw,68px);border-radius:28px;background:linear-gradient(150deg,#1c4488 0%,#123468 66%);border:1px solid var(--line);overflow:hidden;text-decoration:none;color:#fff;transition:transform .5s var(--e),box-shadow .5s var(--e)}
.ab-cta-card::before{content:"";position:absolute;inset:0;border:1.5px solid rgba(236,184,76,.5);border-radius:34px;transform:translate(16px,16px);pointer-events:none;z-index:0}
/* the Meet-the-Team hero team photo, semi-transparent, as the card's backdrop */
.ab-cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 26%;opacity:.30;z-index:0;pointer-events:none}
.ab-cta-card:hover{transform:translateY(-3px);box-shadow:0 40px 90px rgba(0,0,0,.4)}
.ab-cta-copy{position:relative;z-index:2;max-width:60ch}
.ab-cta-card h2{color:#fff;margin:0 0 14px}
.ab-cta-copy>p{margin:0;color:var(--muted);font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.66;max-width:52ch}
.ab-cta-btn{margin-top:28px}
.ab-cta-btn svg{width:18px;height:18px;margin-left:2px;transition:transform .4s var(--e)}
.ab-cta-card:hover .ab-cta-btn svg{transform:translateX(5px)}
.ab-cta-arrow{position:relative;z-index:2;flex:none;width:clamp(84px,9vw,120px);height:clamp(84px,9vw,120px);border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.ab-cta-arrow svg{width:44%;height:44%;transition:transform .5s var(--e)}
.ab-cta-card:hover .ab-cta-arrow svg{transform:translateX(6px)}

/* ---------------------- accreditations marquee (light-blue field) --------- */
/* .acmarq/.actrack/.accard + the linear `acmove` animation come from the shared
   home CSS; only the light-blue field is page-specific (matches Meet the Team). */
.ab-accred{background:var(--cream);padding:clamp(1px,0.4vw,5px) 0 clamp(26px,3.4vw,42px)}
.ab-accred .acmarq{max-width:none;margin-top:clamp(8px,1.4vw,20px)}   /* local override of the shared 46-88px marquee gap; Home unaffected */

/* reveal (matches the site's scroll-reveal; text always renders if JS is off) */
html.js .ab-rev{opacity:0;transform:translateY(24px);transition:opacity .9s var(--e),transform .9s var(--e);transition-delay:var(--d,0ms);will-change:opacity,transform}
html.js .ab-rev.is-in{opacity:1;transform:none}

/* ---------------------------------------------------------- responsive ---- */
@media(max-width:1080px){
  .ab-vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-card:nth-child(2n){margin-top:clamp(8px,1vw,12px)}   /* reduce the stagger on tablet */
  /* the shared nav hides .nlinks < 1080px; make the burger actually open them */
  .navwrap.nav-open .nlinks{display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;top:calc(100% + 10px);left:clamp(12px,3vw,24px);right:clamp(12px,3vw,24px);
    padding:14px;border-radius:18px;background:rgba(9,20,48,.97);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.5);z-index:60}
  .navwrap.nav-open .nlinks a{width:100%;justify-content:flex-start}
  .navwrap.nav-open .dmenu{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    box-shadow:none;background:transparent;padding-left:12px}
}
@media(max-width:860px){
  /* stack: eyebrow+H1+lead, then photo, then stats, then intro (DOM order) */
  .ab-split-media{position:static;width:auto;max-width:520px;margin:6px auto 0;border-radius:18px}
  .ab-split-media::after{display:none}
  .ab-split-media img{height:auto;object-position:center}
  .ab-split-head,.ab-split .ab-stats,.ab-split-intro{width:auto;margin-left:0;padding-left:0}
  .ab-cta-card{flex-direction:column;align-items:flex-start;text-align:left}
  .ab-cta-arrow{align-self:flex-end}
}
@media(max-width:800px){
  /* single column, in reading order: heading -> opening line -> two supporting paragraphs */
  .ab-defines-lead{display:flex;flex-direction:column;column-gap:0;gap:clamp(16px,3.4vw,24px)}
  .ab-defines-eyebrow{order:0;margin-bottom:0}
  .ab-defines-col{display:contents}
  .ab-defines-head{order:1}
  .ab-defines-intro{order:2}
  /* the eyebrow is the lead's first child, so the columns are children 2 & 3;
     target them by position (a :first-child/:last-child selector on .ab-defines-col
     never matched, leaving the left paragraph at order:0 — i.e. ABOVE the heading) */
  .ab-defines-col:nth-child(2) .ab-defines-bp{order:3}
  .ab-defines-col:nth-child(3) .ab-defines-bp{order:4}
  .ab-defines-grid{grid-template-columns:1fr;gap:clamp(26px,6vw,40px)}
}
@media(max-width:720px){
  .ab-head h2{white-space:normal}   /* allow the heading to wrap on small screens */
  .ab-split-media{max-width:100%}
}
@media(max-width:560px){
  .ab-vgrid{grid-template-columns:1fr}
  .ab-card:nth-child(2n){margin-top:0}   /* drop the stagger on mobile */
  .ab-stats{gap:10px}
  .ab-chip{padding:12px 16px}
}
@media(prefers-reduced-motion:reduce){
  html.js .ab-rev,html.js .ab-vgrid .ab-card{opacity:1;transform:none;transition:none}
  .ab-card:hover,html.js .ab-vgrid.is-in .ab-card:hover{transform:none}   /* no hover lift under reduced motion */
  .ab-cta-card,.ab-cta-btn svg,.ab-cta-arrow svg{transition:none}
  .actrack{animation:none}
  html.js .ab-do .ab-do-lbl,html.js .ab-do .ab-do-list li{opacity:1;transform:none;transition:none;animation:none}
  .ab-split-intro .ab-do-list a:hover,.ab-split-intro .ab-do-list a:focus-visible{transform:none}
}