/* BNP parity chrome: the source site uses a short corporate header and a
   light footer with a navy legal strip, rather than the generic dark footer. */
.bnp-compact-header {
  border-bottom: none !important; /* drop the default tenant-line divider */
}
.bnp-compact-header nav a {
  color: var(--tenant-slate);
}
/* Nav links match the source exactly: Calibri 19px, medium weight (the
   platform default 14px/600 reads cramped against the source's airy bar). */
.bnp-compact-header nav a.st-nav-link {
  font-size: 1.1875rem; /* 19px */
  font-weight: 500;
}
/* Dropdown panel links — the source sizes these the same as the
   top-level bar (19px/500), not the platform default 14px. */
.bnp-compact-header nav a.st-nav-sublink {
  font-size: 1.1875rem; /* 19px */
  font-weight: 500;
}
/* Header Contact Us button — the source's primaryButton sm: navy fill,
   15px/700, and the two-corner notch (12px 0) with the radius-morph hover. */
.bnp-compact-header nav a.st-nav-cta {
  border-radius: 12px 0;
  font-size: 0.9375rem; /* 15px */
  font-weight: 700;
  padding: 12px 20px;
  color: #fff; /* white text on the navy fill — the generic nav-a rule sets slate, this must override */
  transition: background-color 300ms linear, border-radius 0.3s ease;
}
.bnp-compact-header nav a.st-nav-cta:hover {
  border-radius: 12px;
  background-color: #14356e;
  opacity: 1;
}
.bnp-light-footer {
  border-top: none;
}
.bnp-light-footer > span:first-child { display: none; }
.bnp-light-footer .text-white,
.bnp-light-footer .text-white\/45,
.bnp-light-footer .text-white\/70,
.bnp-light-footer .text-white\/80,
.bnp-light-footer .text-white\/85 {
  color: var(--tenant-brand);
}
.bnp-light-footer .bg-white\/10 {
  background: color-mix(in srgb, var(--tenant-brand) 10%, transparent);
  color: var(--tenant-brand);
}
.bnp-light-footer .border-white\/15 {
  border-color: var(--tenant-line);
}
.bnp-light-footer .text-gray-300,
.bnp-light-footer .text-gray-400 {
  color: var(--tenant-slate);
}

/* ── BNP fidelity pass: foundation layer (2026-08-20) ──────────────────────
   Source of truth: the BNP WP theme SCSS (docroot/app/themes/bnp-associates).
   Signatures ported here: the two-corner "notch" radius, Calibri type scale,
   bone cards on warm neutrals, plain gray kickers, and DELIBERATE stillness
   (the source theme has no card hovers or reveals). Structural treatments
   (flowlines, hero overlay, icon chips, map pins) land as render overrides. */

/* Type scale — EXACT source values (responsive.scss): two fixed steps, not
   fluid clamps. Desktop ≥992px / below (source tablet+mobile are identical). */
.st-display, .st-h1 { font-size: 2.75rem; line-height: 3.25rem; font-weight: 700; } /* 44/52 */
.st-h2 { font-size: 2rem; line-height: 2.5rem; font-weight: 700; }                  /* 32/40 */
.st-h3 { font-size: 1.75rem; line-height: 2.25rem; font-weight: 700; }              /* 28/36 */
.st-h4 { font-size: 1.375rem; line-height: 2rem; font-weight: 700; }                /* 22/32 */
.st-h5 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; }             /* 18/28 */
.st-h6 { font-size: 1rem; line-height: 1.5rem; font-weight: 700; }                  /* 16/24 */
.prose-tenant { font-size: 1.0625rem; line-height: 1.5rem; }                        /* 17/24 */
@media (min-width: 992px) {
  .st-display, .st-h1 { font-size: 3.75rem; line-height: 4.125rem; }  /* 60/66 */
  .st-h2 { font-size: 2.75rem; line-height: 3.25rem; }                /* 44/52 */
  .st-h3 { font-size: 2.25rem; line-height: 3rem; }                   /* 36/48 */
  .st-h4 { font-size: 1.75rem; line-height: 2.375rem; }               /* 28/38 */
  .st-h5 { font-size: 1.375rem; line-height: 2rem; }                  /* 22/32 */
  .st-h6 { font-size: 1.125rem; line-height: 1.75rem; }               /* 18/28 */
  .prose-tenant { font-size: 1.1875rem; line-height: 1.75rem; }       /* 19/28 */
}

/* Buttons — navy fill rides the tokens; the notch + hover radius-morph is
   the theme's one interaction flourish (background 300ms, radius 300ms). */
a.st-cta, button.st-cta {
  border-radius: 12px 0;
  font-weight: 700;
  padding: 12px 24px;
  transition: background-color 300ms linear, border-radius 0.3s ease;
}
a.st-cta:hover, button.st-cta:hover {
  border-radius: 12px;
  opacity: 1;
}
/* Hover colours follow the source per VARIANT (buttons.scss): a filled button
   darkens to primary-700; an OUTLINED one fills with the muted light blue and
   darkens its text + border with it. The platform CTA carries its colours
   inline, so a blanket background repaint leaves an outlined button's navy
   text on a navy fill — 1.24:1, measured on the hero's second button
   2026-08-30. Style the variant hooks, never `.st-cta` wholesale. */
a.st-cta--solid:hover, button.st-cta--solid:hover,
a.st-cta--accent:hover, button.st-cta--accent:hover {
  background-color: #14356e !important; /* $light-surface-action-hover */
}
a.st-cta--outline:hover, button.st-cta--outline:hover {
  background-color: #deebf3 !important; /* $light-surface-action-hover-muted */
  border-color: #14356e !important;     /* $light-border-action-hover */
  color: #14356e !important;            /* $light-text-action-hover */
}

/* Kickers — BNP uses a plain gray pre-headline, not a pill badge. Inline
   style on the pill carries colors, hence the !importants. */
.st-eyebrow {
  background: none !important;
  border: none !important;
  color: #7f8184 !important;
  padding: 0;
  border-radius: 0;
  font-size: 1.0625rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

/* Cards — bone fill comes from the cardSurface token; the notch is CSS. */
.st-card { border-radius: 8px 0; }
.group\/svc { border-radius: 8px 0; }

/* Stillness — the source theme has NO card hover motion. Suppress the
   platform's hover lift/shadow on cards for this tenant only. */
.st-card, .group\/svc, .group\/feat, .group\/card {
  transition: none;
}
.group\/svc:hover, .st-card:hover {
  transform: none;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* ── BNP override components (hero / stats / icon cards) ─────────────────── */
:root {
  --bnp-line-blue: #5b9ac5;   /* flowline + secondary accent */
  --bnp-red-accent: #be462c;  /* tertiary accent */
  --bnp-teal: #8bc9ba;        /* quinary accent */
  --bnp-kicker: #7f8184;      /* pre-headline gray */
  --bnp-navy-deep: #0a1e4a;   /* solid dark band bg (deeper than the brand navy) */
}

/* Flowline — thin light-blue bracket with dot terminals (the theme motif). */
.bnp-flowline {
  position: absolute;
  pointer-events: none;
  border: 0 solid var(--bnp-line-blue);
  z-index: 0;
}
.bnp-flowline::before,
.bnp-flowline::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bnp-line-blue);
}
.bnp-flowline--tr {
  top: -20px;
  right: -20px;
  width: 201px;
  height: 200px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-top-right-radius: 14px;
}
.bnp-flowline--tr::before { top: -4px; left: -4px; }
.bnp-flowline--tr::after { bottom: -4px; right: -4px; }
@media (max-width: 767px) { .bnp-flowline { display: none; } }

/* Hero */
.bnp-hero { padding: 96px 0 48px; }
.bnp-hero--banner { background: var(--tenant-mist); padding: 96px 0 64px; }
/* Imageless hero: the source centers the copy in a constrained column (868 of
   a 1440 viewport, ~66% of the shell) instead of ranging it left against the
   empty half where the photo would be. The breadcrumb centers with it — it is
   part of the same stack, and left-ranged above centered copy reads as a
   mistake. */
.bnp-hero--centered .bnp-hero-copy {
  max-width: 66%;
  margin-inline: auto;
  text-align: center;
}
/* The 36rem cap on .bnp-hero-sub is sized for the SIDE-BY-SIDE hero, where
   the copy owns half the shell. In the centered variant it makes the intro
   noticeably narrower than the heading above it (576 vs the source's 868). */
.bnp-hero--centered .bnp-hero-sub { max-width: 100%; margin-inline: auto; }
/* The crumb is a flex row, so centering its text needs the row centered too. */
.bnp-hero--centered .bnp-hero-copy nav[aria-label="Breadcrumb"] { justify-content: center; }
/* Buttons follow the copy. */
.bnp-hero--centered .bnp-hero-copy > div:last-child:not(.bnp-hero-media) { justify-content: center; }
@media (max-width: 767px) {
  .bnp-hero--centered .bnp-hero-copy { max-width: 100%; }
}
.bnp-hero-sub { margin-top: 20px; font-size: 1.1875rem; line-height: 1.75rem; color: var(--tenant-slate); max-width: 36rem; } /* 19/28 — source value (Calibri runs small; the 17px detour was compensating for Inter) */
.bnp-hero-media { position: relative; margin-top: 6px; }
/* The hero photo sits in a FRAME so the raster tint clips to the photo and
   not the column — interior heroes crop to 76% of it (see .bnp-hero--int). */
.bnp-hero-frame { position: relative; display: block; }
.bnp-hero-img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
}
/* Hero media can be a looping video (the contact globe), not just a photo —
   same frame geometry as .bnp-hero-img, cover-fit, no inline-video gap and
   no default player chrome. */
.bnp-hero-video {
  display: block;
  object-fit: cover;
}

/* ── Raster image overlay (.bnp-overlay) ─────────────────────────────────
   The source theme lays a 600×600 gradient PNG over every photo at a flat
   30% alpha, no blend mode, radius matched — red on feature imagery, blue on
   card imagery. See components/blocks/tenants/bnp-associates/overlay.tsx for
   which block picks which. z-index 2 clears the photo (heroes sit at 1);
   chips and tags on top of a photo sit at 3. */
.bnp-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  pointer-events: none;
}
.bnp-overlay--red { background-image: url("/bnp/overlay-red.png"); }
.bnp-overlay--blue { background-image: url("/bnp/overlay-blue.png"); }
/* Notched images (the news feature) carry the source's 12px/0 corner pair. */
.bnp-overlay--notch { border-radius: 12px 0; }

/* Stats band — .statBox.boxed: flowline-braced boxes, light-weight numbers. */
.bnp-stats-band { padding: 20px 0 64px; background: var(--tenant-surface); }
/* "Gray" reads as a CONTINUATION of the hero, not a separate grey slab: it
   starts at the hero gradient's end colour (#edf1f8, see .bnp-hero) and fades
   to white, so the band dissolves instead of drawing a hard seam under the
   hero. Matching the hero colour is the point — a flat grey here banded
   against the hero's blue-tinted fade. */
.bnp-stats-band--mist {
  background-color: #ffffff;
  background-image:
    linear-gradient(180deg, rgba(20, 53, 110, 0.05) 0%, rgba(20, 53, 110, 0) 100%),
    repeating-linear-gradient(0deg, rgba(20, 53, 110, 0.035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(20, 53, 110, 0.035) 0 1px, transparent 1px 64px);
}
/* Dark band: navy with inverted text, matching the other dark bands. */
.bnp-stats-band--dark { background: var(--bnp-navy-deep); }
.bnp-stats-band--dark .st-h2 { color: var(--tenant-on-brand); }
.bnp-stats-band--dark .bnp-stat-value { color: #ffffff; }
.bnp-stats-band--dark .bnp-stat-label { color: rgba(255, 255, 255, 0.75); }
.bnp-stats-band--dark .bnp-stat::before { border-color: rgba(255, 255, 255, 0.35); }
.bnp-stats-band--dark .bnp-stat::after { background: rgba(255, 255, 255, 0.55); }
.bnp-stats { display: flex; flex-wrap: wrap; gap: 28px; }
.bnp-stat { position: relative; flex: 1 1 160px; padding: 16px 16px 16px 20px; }
.bnp-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 1px solid var(--bnp-line-blue);
  border-bottom: 1px solid var(--bnp-line-blue);
  border-bottom-left-radius: 14px;
  pointer-events: none;
}
.bnp-stat::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -3.5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bnp-line-blue);
}
.bnp-stat-value { font-size: 1.75rem; line-height: 2.25rem; font-weight: 400; color: #101820; } /* 28/36 */
.bnp-stat-label { margin: 0; font-size: 1.0625rem; line-height: 1.5rem; color: var(--bnp-kicker); }
@media (min-width: 992px) {
  .bnp-stat-value { font-size: 2.25rem; line-height: 3rem; }          /* 36/48, weight 400 */
  .bnp-stat-label { font-size: 1.1875rem; line-height: 1.75rem; }     /* 19/28 — source value */
}

/* Icon service cards — .cardIcon + .iconBackground.large anatomy. */
.bnp-icon-section { padding: 64px 0 96px; background: var(--tenant-surface); }
/* Continuation of the band above (headerless — see the override). The source
   renders the media object and its icon cards as ONE section, so two blocks
   here stack two band paddings: 96px from the block above plus 64px of our
   own = a 160px trench where the source has ~56px. Cancel our top padding and
   pull up through most of the preceding block's. */
.bnp-icon-section--cont { padding-top: 0; margin-top: -40px; }
/* The icon band's light-BLUE gradient is tone "tint" (the source's
   block-backgrond-gradient-light-blue). Sampled off the live band: 128,177,210
   at the top and bottom, lightening to 144,191,211 through the middle —
   symmetric, near-flat horizontally. Bone cards and the navy heading both read
   fine on it. It used to ride on "mist", so the picker's Light rendered blue;
   mist is the site's bone now, like every other band. */
.bnp-icon-section--tint {
  background: linear-gradient(180deg, #80b1d2 0%, #90bfd3 50%, #80b1d2 100%);
}
.bnp-icon-section--mist { background: var(--tenant-mist); }
/* ...and a continuation SCROLLER's cards read LEFT, like the dark variant's
   (source cardIconsScrollFluid). A continuation band that WRAPS — the
   homepage's five service cards — is the source's centered .cardIcon grid:
   centered card copy, 3 + 2 with the remainder row centered (measured on the
   live homepage 2026-10-26; the client flagged our left-ranged row). */
.bnp-icon-section--cont .st-carousel .bnp-icon-card { align-items: flex-start; text-align: left; }
/* Centered flex wrap, NOT a grid — 3 across, the remainder row centers
   (the source's justify-content:center on fixed-width columns: 5 cards ⇒
   3 + 2 centered). */
.bnp-icon-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.bnp-icon-grid .bnp-icon-card { flex: 0 1 calc((100% - 48px) / 3); }
@media (max-width: 991px) {
  .bnp-icon-grid .bnp-icon-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 640px) {
  .bnp-icon-grid .bnp-icon-card { flex-basis: 100%; }
}
.bnp-icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--tenant-card);
  border: 1px solid var(--tenant-line);
  border-radius: 8px 0;
  padding: 40px 32px;
  text-decoration: none;
  /* No explicit height — flex align-items:stretch equalizes each row (a
     percentage height here defeats it); the CTA pins via margin-top:auto. */
}
.bnp-icon-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 80px;
  margin-bottom: 28px;
  background: var(--tenant-surface);
  border: 1px solid var(--tenant-red);
  border-radius: 12px 0;
  box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.07);
  color: var(--tenant-red);
}
.bnp-c2 { border-color: var(--bnp-line-blue); color: var(--bnp-line-blue); }
.bnp-c3 { border-color: var(--bnp-red-accent); color: var(--bnp-red-accent); }
.bnp-c4 { border-color: var(--bnp-teal); color: var(--bnp-teal); }
.bnp-icon-card h3 { margin-bottom: 8px; font-size: 1.375rem; line-height: 2rem; } /* 22/32 — matches the source's card title sizing */
.bnp-icon-copy { margin: 0; font-size: 1.1875rem; line-height: 1.75rem; color: var(--tenant-slate); } /* 19/28 — source p */
.bnp-icon-cta { margin-top: auto; padding-top: 28px; color: var(--tenant-red); font-weight: 700; font-size: 1.1875rem; } /* 19/28 — .links.medium */
@media (max-width: 991px) {
  .bnp-icon-card { padding: 32px 24px; }
  .bnp-hero, .bnp-hero--banner { padding-top: 48px; }
}

/* Calibri — self-hosted (it's a Microsoft font; most visitors don't have it
   installed, so naming it in fontBody alone silently falls back). Same four
   faces the source site ships. */
@font-face {
  font-family: "Calibri";
  src: url("/bnp/fonts/calibri-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Calibri";
  src: url("/bnp/fonts/calibri-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Calibri";
  src: url("/bnp/fonts/calibri-italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Calibri";
  src: url("/bnp/fonts/calibri-bold-italic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ── Navy accordion band (accordion_media) ────────────────────────────────── */
.bnp-accordion-band { background: var(--tenant-brand); padding: 96px 0; overflow: visible; }
.bnp-accordion-head { max-width: 44rem; margin-bottom: 40px; }
.bnp-accordion-band .st-h2 { color: var(--tenant-on-brand); }
.bnp-accordion-intro { margin-top: 12px; font-size: 1.1875rem; line-height: 1.75rem; color: var(--tenant-on-brand); opacity: 0.92; }
.bnp-kicker-dark { color: var(--bnp-line-blue); font-size: 1.0625rem; margin-bottom: 8px; }
.bnp-accordion-media { position: relative; }
.bnp-accordion-img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}
.bnp-flowline--tl {
  top: -20px;
  left: -20px;
  width: 201px;
  height: 200px;
  border-top-width: 1px;
  border-left-width: 1px;
  border-top-left-radius: 14px;
}
.bnp-flowline--tl::before { top: -4px; right: -4px; }
.bnp-flowline--tl::after { bottom: -4px; left: -4px; }

/* Rows: .accordionStyle.boxed — bone notched rows, +/− indicator. */
.bnp-acc { background: var(--tenant-card); border-radius: 12px 0; margin-bottom: 24px; }
.bnp-acc:last-child { margin-bottom: 0; }
.bnp-acc-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: var(--tenant-ink);
  cursor: pointer;
  list-style: none;
}
.bnp-acc-head::-webkit-details-marker { display: none; }
.bnp-acc-head:hover { color: #14356e; }
.bnp-acc[open] { background: var(--tenant-card); }
/* flex: none — a question long enough to wrap otherwise squeezes the 26px
   ring into an oval (client staging review 2026-10-27, last BHS FAQ row). */
.bnp-acc-icon { flex: none; margin-left: auto; color: var(--tenant-red); font-size: 1.5rem; font-weight: 300; line-height: 1; }
/* +/- drawn from two absolutely centred rules rather than typeset characters.
   A "+" sits on the baseline, not the optical centre of the ring, so it read
   high — and the open state made it worse by swapping to an en-dash at a
   different weight, which lands somewhere else again. Two bars cannot be
   off-centre, and both states now share one geometry. currentColor keeps
   whatever colour the ring already resolves to. */
.bnp-acc-icon::before,
.bnp-acc-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
}
.bnp-acc-icon::before { width: 10px; height: 1.5px; transform: translate(-50%, -50%); }
.bnp-acc-icon::after { width: 1.5px; height: 10px; transform: translate(-50%, -50%); }
.bnp-acc[open] .bnp-acc-icon::after { display: none; }
.bnp-acc-body { padding: 0 24px 20px; color: var(--tenant-slate); }
.bnp-acc-body p:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .bnp-acc { margin-bottom: 20px; } }

/* ── News / insights (featured_news) ─────────────────────────────────────── */
.bnp-news-section { background: var(--tenant-surface); padding: 96px 0; }
.bnp-news-intro { margin-top: 12px; font-size: 1.1875rem; line-height: 1.75rem; color: var(--tenant-slate); }
.bnp-news-link { text-decoration: none; display: block; }
.bnp-news-feature-media { position: relative; }
.bnp-news-feature-img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 9; /* source postSlider feature crop (audit-measured on home + /news) */
  object-fit: cover;
  border-radius: 12px 0; /* the feature image gets the notch (source override) */
}
.bnp-news-tagwrap { position: absolute; bottom: 20px; left: 20px; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; }
.bnp-news-feature-title { margin-top: 24px; padding: 0 24px; color: #101820; }
.bnp-news-feature-body { margin-top: 12px; padding: 0 24px; font-size: 1.1875rem; line-height: 1.75rem; color: var(--tenant-slate); }
.bnp-news-more { display: inline-block; margin-top: 20px; font-weight: 900; }
.bnp-news-stories { display: flex; flex-direction: column; gap: 16px; }
/* Story rows (source .cardImageHorizontal, measured 2026-09-03 @1473: row 162
   tall, image column 190 wide filling the body height (134), body padded
   20px 0, tag chip then a 22px title). The thumb stretches with the body,
   so a row never falls under the source's height. */
.bnp-news-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; }
.bnp-news-thumb { background-size: cover; background-position: center; border-radius: 12px 0; min-height: 134px; height: 100%; }
.bnp-news-row-body { padding: 14px 0; }
.bnp-news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 12px; }
.bnp-news-row-tags { display: contents; }
.bnp-news-date { color: var(--tenant-ink); font-size: 1.0625rem; }

/* Tag chips (navy filled — the source's quarternary style). */
.bnp-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 4px;
  background: var(--tenant-red);
  color: #ffffff;
  font-size: 1.0625rem;
  line-height: 1.5rem;
  font-weight: 500;
}

/* Map markers — the source's RED pins (the shared block fills with the
   action token, which is navy on this tenant). Inline styles, hence !important. */
.map-marker .st-map-halo { background: color-mix(in srgb, var(--bnp-red-accent) 45%, transparent) !important; }
.map-marker span:not(.st-map-halo) { background: var(--bnp-red-accent) !important; }

/* ── Visual-compare round (2026-08-20, vs live bnpassociates.com) ────────── */

/* Hero band: subtle light gradient (not flat white). */
.bnp-hero { background: linear-gradient(160deg, #ffffff 35%, #edf1f8 100%); }

/* Accordion band: the source's navy GRADIENT + layout corrections. */
.bnp-accordion-band {
  position: relative;
  background: linear-gradient(135deg, #14356e 14%, #0f2852 76%);
  overflow: visible;
}
.bnp-accordion-intro-grid { display: grid; gap: 24px; margin-bottom: 40px; }
@media (min-width: 992px) { .bnp-accordion-intro-grid { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } }
/* Opt-in centered intro — introAlign "centered" on the block (standalone
   statement bands, e.g. the careers accordion band). Stacks + centers the
   heading and copy, matching the .bnp-ghost-head statement-heading
   treatment; default stays the two-column split above. */
.bnp-accordion-intro-grid--centered { grid-template-columns: 1fr; gap: 12px; justify-items: center; text-align: center; }
/* Full content width, like every source section head: the careers band's
   "We are always looking for exceptional individuals to join our team." is
   ONE line on the source (client staging review — a 44rem cap broke it in
   two with empty space either side). */
.bnp-accordion-intro-grid--centered > div,
.bnp-accordion-intro-grid--centered > p { max-width: none; }
@media (min-width: 992px) { .bnp-accordion-intro-grid--centered { grid-template-columns: 1fr; gap: 12px; } }
.bnp-accordion-head { display: none; } /* superseded by the intro grid */
/* 4:3 crop — audit-measured on every accordion band (home, apron, and the
   sky-blue interior variants all render 1.333; who-we-help's 3:2 asset is
   cropped by the source too). */
.bnp-accordion-img { aspect-ratio: 4 / 3; }
.bnp-acc-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--tenant-red);
  border-radius: 50%;
  font-size: 1.125rem;
  line-height: 1;
}

/* Ghost card grid (Client Success Stories): centered head, unboxed cards. */
/* 96/96 is the source's band rhythm for these (measured on the projects card
   wall). 120/144 was ~40% over, which compounded badly wherever they stack. */
.bnp-ghost-section { background: var(--tenant-surface); padding: 96px 0; }
/* Consecutive ghost sections are a STACK, not separate bands. who-we-help runs
   four curated project lists back to back; at 144 bottom + 120 top that is
   264px of dead space between each, where the source runs 80 (and zeroes the
   middle ones outright). Collapse the shared gap to the source's 80. */
.bnp-ghost-section:has(+ .bnp-ghost-section) { padding-bottom: 40px; }
.bnp-ghost-section + .bnp-ghost-section { padding-top: 40px; }
/* The band that EXITS a stack drops its top padding: the stack above already
   ends with a full gap, so a second one doubles it. Requires TWO consecutive
   ghost sections, which is what distinguishes who-we-help's supply-chain band
   (exits four stacked lists; source paddingTopNone) from about's, which
   follows a single card band and keeps its padding (source paddingTopMD). */
.bnp-ghost-section + .bnp-ghost-section ~ section:not(.bnp-ghost-section):not([class*="bnp-"]) { padding-top: 0; }
/* Section heads span the full content width on the source (measured
   2026-10-26: Portfolio Companies, Client Success Stories, Simulation Project
   Samples — all 1316 of a 1316 container at 1440). A 44rem cap wrapped the
   portfolio intro into a narrow centered column (client staging review). */
.bnp-ghost-head { text-align: center; margin: 0 auto 48px; }
.bnp-ghost-grid { display: grid; gap: 28px; }
@media (min-width: 992px) { .bnp-ghost-grid { grid-template-columns: repeat(3, 1fr); } }
/* Equal-height cards; Read More + flowline pin to the bottom so links and
   brackets align across the row regardless of body length. */
/* Source columns have 14px padding — the content indent. Match it. */
.bnp-ghost-grid > * { height: 100%; padding: 14px; }
.bnp-ghost-card { position: relative; display: flex; flex-direction: column; height: 100%; padding-bottom: 28px; }
/* Source cardImage ghost imagery is 16:9 in the NOTCH frame — 12px on two
   corners, square on the other two (re-measured 2026-10-26 on /, /projects/,
   /who-we-help/, /baggage-handling-systems/, /bnp-group/ and /contact/: every
   unboxed card photo is `border-radius: 12px 0`; the client flagged our
   uniform 12px on the projects list). Boxed rail cards and video thumbnails
   stay uniformly rounded, like the source's. */
.bnp-ghost-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px 0; }
.bnp-boxed-card .bnp-ghost-img,
.bnp-ghost-img--sq,
.bnp-ghost-img--r43 { border-radius: 12px; }
/* No horizontal padding: .bnp-ghost-copy supplies the 24px content inset for
   the whole copy stack. The title carrying its own 24px too indented it past
   the pre-headline and body (the source aligns all three flush). */
.bnp-ghost-title { margin-top: 24px; }
.bnp-ghost-body { margin-top: 12px; padding: 0; font-size: 1.1875rem; line-height: 1.75rem; color: #101820; }
.bnp-ghost-more { display: inline-block; margin-top: auto; padding-top: 20px; margin-left: 24px; align-self: flex-start; color: var(--tenant-red); font-weight: 900; font-size: 1.1875rem; }
/* Vertical line left-aligns with the image (card edge); content is inset
   24px (the source ghost-card body padding), so the bracket wraps the link. */
.bnp-flowline--card {
  left: 0;
  right: 8%;
  bottom: 6px;
  height: 56px;
  border-left-width: 1px;
  border-bottom-width: 1px;
  border-bottom-left-radius: 14px;
}
.bnp-flowline--card::before { top: -4px; left: -4.5px; }
.bnp-flowline--card::after { right: -4px; bottom: -4.5px; }

/* Mini banner (careers): light bordered panel with the plane graphic. */
.bnp-mini-wrap { padding: 96px 0 48px; }
.bnp-mini {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #f3f3f2 url("/bnp/banner-mini-bg.svg") no-repeat 65% center;
  border: 1px solid var(--tenant-line);
  border-radius: 12px 0;
  padding: 20px 48px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.bnp-mini-heading { font-size: 1.375rem; line-height: 2rem; font-weight: 700; color: var(--tenant-ink); margin: 0; max-width: 34rem; }
.bnp-mini-sub { margin: 4px 0 0; font-size: 1.0625rem; color: var(--tenant-slate); }
.bnp-mini-actions .st-cta { margin: 0; }
.bnp-flowline--mini {
  right: -14px;
  bottom: -17px;
  width: min(672px, 60%);
  height: 100px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-bottom-right-radius: 14px;
}
.bnp-flowline--mini::before { top: -4px; right: -4.5px; }
.bnp-flowline--mini::after { left: -4px; bottom: -4.5px; }
@media (max-width: 767px) { .bnp-mini { background-image: none; padding: 20px 24px; } }

/* News band: light-blue gradient, light-blue chips. */
/* News band background follows the block tone (it was hardcoded to the
   gradient, so "White" rendered blue). tint = the source's sky gradient. */
.bnp-news-section--tint { background: linear-gradient(135deg, #bdd7e8 0%, #8fb8d4 100%); }
.bnp-news-section--mist { background: var(--tenant-mist); }
.bnp-news-section--dark { background: var(--bnp-navy-deep); }
.bnp-news-section--dark .st-h2,
.bnp-news-section--dark .bnp-news-feature-title,
.bnp-news-section--dark .bnp-news-row h3 { color: #ffffff; }
.bnp-news-section--dark .bnp-news-intro,
.bnp-news-section--dark .bnp-news-feature-body,
.bnp-news-section--dark .bnp-news-date { color: rgba(255, 255, 255, 0.85); }
.bnp-tag { background: var(--bnp-line-blue); }
.bnp-news-morewrap { position: relative; padding: 0 24px 28px; display: block; }

/* Team: staggered two-column photo grid. */
.bnp-team-section { background: var(--tenant-surface); padding: 96px 0; }
.bnp-stagger { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.bnp-stagger-col { display: flex; flex-direction: column; gap: 28px; }
.bnp-stagger-offset { margin-top: 82px; }
.bnp-stagger-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; }
@media (max-width: 767px) { .bnp-stagger-offset { margin-top: 40px; } }

/* Source buttons carry no arrow glyphs. */
.st-cta svg { display: none; }

/* Multi-image hero collage (hero.images[]) — main image large, two subs
   staggered below, matching the source's solutions-page hero arrangement. */
.bnp-hero-collage {
  position: relative;
  z-index: 1;
  display: grid;
  /* Live geometry (measured): sub1 56.5% of column | 27px gap | sub2 the
     rest (~39%); main is 82.6% of the column, right-aligned, 3:2. Sub tops
     align (no stagger) — sub2 runs deeper because it's portrait (5:6). */
  grid-template-columns: 56.5% 1fr;
  gap: 28px 27px;
}
/* Frames are the grid items (each holds one photo + its raster tint); the
   images fill them. Placement/width moved off the images for the same reason
   as the hero frame above — the tint must stop at the photo. */
/* align-self: start is load-bearing. An <img> with an aspect-ratio is exempt
   from grid's default stretch (the align spec treats stretch as start for a
   box with a preferred ratio), so the two subs used to keep their own heights
   and sub2 ran deeper. A plain span has no such exemption and WOULD stretch to
   the row — dragging sub1's tint 61px past its photo. */
.bnp-collage-frame { position: relative; display: block; align-self: start; }
.bnp-collage-frame--main { grid-column: 1 / -1; width: 82.6%; justify-self: end; }
.bnp-hero-collage-main { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; }
.bnp-hero-collage-sub { width: 100%; object-fit: cover; border-radius: 12px; }
.bnp-hero-collage-sub1 { aspect-ratio: 3 / 2; }
.bnp-hero-collage-sub2 { aspect-ratio: 5 / 6; }

/* Snap-scrolling card rail (carousel variants — matches the source sliders,
   server-rendered, no JS). */
.bnp-rail {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 16px;
}
.bnp-rail > * { flex: 0 0 82%; scroll-snap-align: start; }
@media (min-width: 640px) { .bnp-rail > * { flex-basis: 46%; } }
@media (min-width: 992px) { .bnp-rail > * { flex-basis: 31%; } }
.bnp-icon-rail > .bnp-icon-card { flex-basis: 82%; }
@media (min-width: 640px) { .bnp-icon-rail > .bnp-icon-card { flex-basis: 46%; } }
@media (min-width: 992px) { .bnp-icon-rail > .bnp-icon-card { flex-basis: 31%; } }

/* Boxed card style (card_style "boxed") — bone panel with border + notch,
   image inside, per the source's contained/boxed project cards. */
.bnp-boxed-card {
  background: var(--tenant-card);
  border: 1px solid var(--tenant-line);
  border-radius: 8px 0;
  padding: 24px 24px 40px;
}
.bnp-boxed-card .bnp-ghost-img { border-radius: 12px; aspect-ratio: 3 / 2; } /* boxed cards are 3:2 (ghost is 16:9) */
.bnp-boxed-card .bnp-ghost-img--r43 { aspect-ratio: 4 / 3; } /* video cards crop 4:3 */
/* A boxed card supplies its own 24px panel inset, so the copy container must
   not add a second one — the source puts the image, heading, body and link all
   on the same left edge. (.bnp-ghost-copy's padding exists for GHOST cards,
   which have no panel to inset them.) */
.bnp-boxed-card .bnp-ghost-copy { padding-left: 0; padding-right: 0; }
.bnp-boxed-card .bnp-ghost-more { margin-left: 0; }
.bnp-boxed-card .bnp-flowline--card { display: none; }

/* ── Apron visual pass (2026-08-23) ──────────────────────────────────────── */
/* Red category tag (solutions hero eyebrow). */
.bnp-tag--red { background: var(--bnp-red-accent); }
/* Hero tag chips — the source's .tag primary/tertiary (measured 2026-09:
   blue chip + slate text on baggage, teal chip + slate text on cargo/
   supply-chain/simulation). The red chip (default) carries white text. */
.bnp-tag--primary { background: var(--bnp-line-blue); color: #101820; }
.bnp-tag--tertiary { background: var(--bnp-teal); color: #101820; }
/* Collage geometry lives on the base .bnp-hero-collage rules above. The
   collage hero band carries the source's deep bottom padding (3XL = 180px). */
.bnp-hero--collage { padding-bottom: 180px; }
/* The collage crumb floats ABOVE the copy stack, out of flow, so the
   breadcrumb never pushes the tag/heading down — everything else sits exactly
   where it did before the crumb existed. bottom:100% + the nav's own mb-6
   leaves the gap to the tag. */
.bnp-hero--collage .bnp-hero-copy { position: relative; }
.bnp-hero--collage .bnp-hero-copy > nav[aria-label="Breadcrumb"] {
  position: absolute;
  bottom: calc(100% + 20px); /* +20px: user-tuned lift above the default gap */
  left: 0;
}
/* Breadcrumb type matches the source #breadcrumbs: 17px on a 24px line
   (ours shipped at 14px), links medium, and the page you're on bold
   (the source's .breadcrumb_last convention). */
nav[aria-label="Breadcrumb"] { font-size: 17px; line-height: 24px; }
nav[aria-label="Breadcrumb"] a { font-weight: 500; }
nav[aria-label="Breadcrumb"] .st-crumb-current { font-weight: 700; }
/* Faint blueprint grid on the hero band (the source's background texture). */
.bnp-hero {
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0) 35%, rgba(20, 53, 110, 0.05) 100%),
    repeating-linear-gradient(0deg, rgba(20, 53, 110, 0.035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(20, 53, 110, 0.035) 0 1px, transparent 1px 64px);
}
/* A hero followed by a stats band is ONE section on the source, so the join
   must be invisible. A DIAGONAL tint cannot join cleanly to anything: its
   bottom edge runs 253 at the left to 243 at the right, so a flat band below
   steps by up to 16 — the line you can see. Vertical tint gives the hero a
   UNIFORM bottom edge that the band below can match exactly. */
.bnp-hero:has(+ .bnp-stats-band) {
  background-image:
    linear-gradient(180deg, rgba(20, 53, 110, 0) 0%, rgba(20, 53, 110, 0.05) 100%),
    repeating-linear-gradient(0deg, rgba(20, 53, 110, 0.035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(20, 53, 110, 0.035) 0 1px, transparent 1px 64px);
}
/* TL flowline (solutions collage heroes bracket the top-left). */
/* (positions defined earlier: .bnp-flowline--tl) */
/* Checklist: two columns on desktop, like the source's icon list. */
@media (min-width: 992px) {
  /* multicolumn (not grid): fills column-major like the source list. */
  .st-checklist { columns: 2; column-gap: 32px; }
  /* margin-bottom needs !important: Tailwind's space-y sets margin-bottom: 0
     on every sibling after the first with (0,3,0) specificity — it out-ranks
     this (0,1,1) rule and collapsed the rhythm to a single gap. */
  .st-checklist > li { margin-top: 0 !important; margin-bottom: 24px !important; break-inside: avoid; }
}

/* media_object checklist composition (Efficient Aircraft Turnaround). */
.bnp-mo-media { position: relative; }
.bnp-mo-img { position: relative; z-index: 1; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; }

/* ── Apron visual pass, round 2 (2026-08-23) ─────────────────────────────── */

/* Deep-navy solid band (media_object tone=brand). Trailing padding shrinks so
   a dark icon slider below joins it into ONE continuous navy field (source:
   a single band holding both; 16 + 16 = the source's 32px internal gap). */
section.bnp-band-dark { background: var(--bnp-navy-deep); padding-bottom: 16px; }
/* 44px, not 16: the dark band above contributes 16px of its own, so 16 here
   left a 32px gap where the source measures 60 — visibly tighter than the
   light continuation bands at 56. */
.bnp-icon-section.bnp-icon-section--dark { background: var(--bnp-navy-deep); padding: 44px 0 96px; }
/* The source's dark slider cards are LEFT-aligned (the light grid is centered). */
.bnp-icon-section--dark .bnp-icon-card { align-items: flex-start; text-align: left; }

/* Boxed slider band (Our Team …) runs tighter on the source (80px, not 120). */
.bnp-ghost-section:has(.bnp-boxed-card) { padding: 80px 0; }

/* BNP imagery is uniformly 12px-rounded and flat — normalize the shared
   MediaObject image (token radius + soft shadow otherwise leak through).
   Ratio is NATURAL: the source renders media_object photos uncropped and the
   ratio varies per band (home "Leading the Air" 4:3, who-we-help "Innovative
   Supply Chain" 3:2 — audit-measured); imported assets carry those exact
   dimensions, so auto reproduces each band. */
img.rounded-tenant { border-radius: 12px; box-shadow: none; aspect-ratio: auto; }

/* Offices map band: sits flush under the section above it; the map runs
   nearly shell-wide (source insets it 58px a side). !important beats the
   component's inline max-width: 1100px. */
section:has(.map-marker) { padding-top: 0; }
section:has(.map-marker) .relative.mx-auto.w-full { max-width: calc(100% - 116px) !important; }

/* Light accordion band (accordion_media tone=surface/mist) — the source's
   sky-blue gradient texture (sampled #9cc6d4 → #7eafd0) with dark type and
   uniformly rounded rows; navy gradient stays the default (homepage). */
.bnp-accordion-band--light {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 64px),
    radial-gradient(120% 90% at 50% 40%, #9cc6d4 0%, #7eafd0 75%);
}
.bnp-accordion-band--light .st-h2 { color: #101820; }
.bnp-accordion-band--light .bnp-accordion-intro { color: var(--tenant-ink); opacity: 1; }
.bnp-accordion-band--light .bnp-kicker-dark { color: #101820; }
.bnp-accordion-band--light .bnp-acc { border-radius: 12px; }
/* Collage flowline hugs the MAIN image's top-left corner (live: 20px out),
   not the media column's — the main image is 82.6% wide, right-aligned, so
   its left edge sits at 17.4% of the column. */
.bnp-hero--collage .bnp-flowline--tl { left: calc(17.4% - 20px); }

/* Pathway flowline under the collage hero — the source's `svg.flowLine`: a
   903×286 stroke that starts with a dot beneath the wide sub image, drops,
   runs left across the band along the copy column's edge and falls 60px into
   the next block, ending in a second dot. Measured on /solutions-apron-
   systems/ at 1488: left = the copy column's content edge, bottom = -60px,
   size fixed (the source does not scale it). The source hides it ≤1200px,
   where the fixed width no longer fits the container — same breakpoint here.
   The band must stay overflow-visible so the tail can hang below it. */
.bnp-hero--collage { position: relative; overflow: visible; }
.bnp-flowline-path {
  position: absolute;
  bottom: -60px;
  left: max(2rem, calc(50% - 668px)); /* .st-shell content edge: 1400 max − 2×32 padding */
  width: 903px;
  height: 286px;
  z-index: 1;
  color: var(--bnp-line-blue);
  pointer-events: none;
}
@media (max-width: 1200px) { .bnp-flowline-path { display: none; } }

/* Buttons on the deep-navy band are WHITE with navy text (source .light). */
section.bnp-band-dark a.st-cta, section.bnp-band-dark button.st-cta { background-color: #ffffff !important; color: var(--tenant-brand) !important; }
/* …and dim to primary-200 on hover, keeping the navy text ($dark-surface-
   action-hover / $dark-text-on-action). The old rule re-asserted white, so a
   button on a navy band had no hover state at all. */
section.bnp-band-dark a.st-cta:hover, section.bnp-band-dark button.st-cta:hover {
  background-color: #d1d9e7 !important;
  color: var(--tenant-brand) !important;
}

/* ── Interior pass (2026-08-25, STELDRIS-136): every non-home page + the
   collection surfaces. Geometry below is audit-measured against the live
   site (scripts/fidelity-audit.mjs) — change only with numbers in hand. */

/* Interior split hero: 3:2 crop at ~76% of the media column (≈36% of shell),
   right-aligned, no raster overlay. Item pages (project/news singles) crop
   4:3 and run wider (≈42% of shell). Homepage keeps the square + overlay. */
/* The WIDTH lives on the frame, the crop on the image: the raster tint fills
   the frame, so a width on the image alone would let the tint overhang the
   photo by the remaining 24%. Rendered geometry is unchanged. */
.bnp-hero--int .bnp-hero-frame { width: 76%; margin-left: auto; }
.bnp-hero--item .bnp-hero-frame { width: 88%; }
.bnp-hero--int .bnp-hero-img { aspect-ratio: 3 / 2; }
.bnp-hero--item .bnp-hero-img { aspect-ratio: 4 / 3; }
@media (max-width: 1023px) {
  .bnp-hero--int .bnp-hero-frame, .bnp-hero--item .bnp-hero-frame { width: 100%; }
}

/* News single hero: the `sub` slot carries the article's DATELINE, not intro
   copy. Source is `<p class="dateNews">August 6, 2026</p>` under the h1, sized
   by `.newsHero .heroLeft p { font-size: 21px }` in body ink — where the shared
   hero sub is 19px slate for a paragraph of lede. */
.bnp-hero--item-news .bnp-hero-sub {
  font-size: 1.3125rem; /* 21px */
  line-height: 2rem;
  color: var(--tenant-ink);
}

/* 4-across ghost grids (offices, portfolio, team groups, project samples —
   any band holding 4+ image cards; the source's column count). */
@media (min-width: 992px) { .bnp-ghost-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 28px; } }
/* 4-up columns carry NO side padding on the source: offices, portfolio, team
   and project samples sit 308 wide with a 28px gutter at 1440 (measured
   2026-10-26). The 14px column inset made our office photos ~23px narrower
   per card — the "increase the office image size" item. */
.bnp-ghost-grid--4 > * { padding-left: 0; padding-right: 0; }
@media (min-width: 640px) and (max-width: 991px) { .bnp-ghost-grid--4 { grid-template-columns: repeat(2, 1fr); } }

/* Per-shape image crops (source values): office/address cards 3:2, team
   bio cards 1:1, video-sample cards 4:3; plain ghost stays 16:9. */
.bnp-ghost-img--r32 { aspect-ratio: 3 / 2; }
.bnp-ghost-img--sq { aspect-ratio: 1 / 1; }
.bnp-ghost-img--r43 { aspect-ratio: 4 / 3; }

/* Office-card address lines (detail_html rendered inline under the title). */
/* No horizontal padding: .bnp-ghost-copy already supplies the content inset for
   the whole copy stack, exactly as it does for .bnp-ghost-title/-body. Carrying
   its own 24px too pushed the address one step right of the title it belongs to
   (visible at every width; on a 390px phone it left the address 218px wide). */
.bnp-ghost-detail { margin-top: 10px; padding: 0; font-size: 1.0625rem; line-height: 1.5rem; color: var(--tenant-slate); }
.bnp-ghost-detail p { margin: 0; }

/* Video play chip (project-sample cards — the video opens in the dialog). */
.bnp-ghost-media { position: relative; }
.bnp-play-chip {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3; /* clears the raster tint at 2 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--tenant-brand);
}

/* Value cards (imageless card_grid — Our Values): bone boxed, centered,
   sharing the icon-card wrap (3 across, remainder row centered). */
.bnp-icon-grid > * { flex: 0 1 calc((100% - 48px) / 3); }
@media (max-width: 991px) { .bnp-icon-grid > * { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 640px) { .bnp-icon-grid > * { flex-basis: 100%; } }
.bnp-value-card {
  height: 100%;
  background: var(--tenant-card);
  border: 1px solid var(--tenant-line);
  border-radius: 8px 0;
  padding: 40px 32px;
  text-align: center;
}
.bnp-value-card .bnp-ghost-title { margin-top: 0; padding: 0; }
.bnp-value-card .bnp-ghost-body { padding: 0; }

/* Dark card band (tone=brand / ink): deep navy field, light boxed cards,
   white header type. (The About timeline used to render here as a 35-card
   dark carousel; since v6.55 it is a `timeline` collection — see the
   .bnp-timeline-* rules below.) */
.bnp-ghost-section--dark { background: var(--bnp-navy-deep); }
.bnp-ghost-section--dark .st-h2 { color: #ffffff; }
.bnp-ghost-section--dark .bnp-news-intro { color: rgba(255, 255, 255, 0.85); }
.bnp-ghost-section--dark .st-eyebrow { color: rgba(255, 255, 255, 0.7) !important; }

/* Sky card band (tone "tint" — the cross-page expertise rail on Meet Our
   Team, related-project bands): the sky-blue gradient behind bone cards.
   `--sky` kept as an alias for any hand-written markup. */
.bnp-ghost-section--tint,
.bnp-ghost-section--sky {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 64px),
    radial-gradient(120% 90% at 50% 40%, #9cc6d4 0%, #7eafd0 75%);
}

/* Sky-blue light accordion band images crop 4:3 (audit-measured on the
   simulation/cargo/BHS "Common Questions" bands; the navy homepage/apron
   variant stays natural — verified separately). */
.bnp-accordion-band--light .bnp-accordion-img { aspect-ratio: 4 / 3; }

/* Photo strip (careers "our people"): full-bleed row of 4:5 crops, arrows
   centered below. Track widths ≈5 visible per viewport. */
.bnp-strip-section { background: var(--tenant-surface); padding: 96px 0 64px; }
.bnp-strip { margin-top: 8px; }
.bnp-strip-track { gap: 12px !important; }
.bnp-strip-track > * { width: 70%; }
@media (min-width: 640px) { .bnp-strip-track > * { width: 34%; } }
@media (min-width: 992px) { .bnp-strip-track > * { width: 20.5%; } }
.bnp-strip-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }

/* Centered CTA panels: sky gradient (tone=mist — BNP Group) and deep navy
   (tone=ink — item-page "Partnering for Results"). */
.bnp-cta-panel-wrap { padding: 48px 0; }
.bnp-cta-panel { border-radius: 12px; padding: 56px 48px; text-align: center; }
.bnp-cta-panel--sky {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 64px),
    radial-gradient(120% 90% at 50% 40%, #9cc6d4 0%, #7eafd0 75%);
}
.bnp-cta-panel--sky .bnp-cta-panel-heading { color: #101820; }
.bnp-cta-panel--sky .bnp-cta-panel-sub { color: #101820; }
.bnp-cta-panel--navy { background: linear-gradient(135deg, #14356e 8%, var(--bnp-navy-deep) 70%); }
.bnp-cta-panel--navy .bnp-cta-panel-heading { color: #ffffff; }
.bnp-cta-panel--navy .bnp-cta-panel-sub { color: rgba(255, 255, 255, 0.88); }
.bnp-cta-panel--navy a.st-cta:not([class*="outline"]) { background-color: #ffffff !important; color: var(--tenant-brand) !important; }
.bnp-cta-panel-heading { max-width: 46rem; margin: 0 auto; }
.bnp-cta-panel-sub { max-width: 44rem; margin: 16px auto 0; font-size: 1.1875rem; line-height: 1.75rem; }
/* The sky panel's copy uses the panel's full width on the source (/bnp-group/
   "Leading the Air Transportation…": heading and sub span the container —
   client staging review flagged the narrow column). */
.bnp-cta-panel--sky .bnp-cta-panel-heading,
.bnp-cta-panel--sky .bnp-cta-panel-sub { max-width: none; }
.bnp-cta-panel-actions { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* Vision/Mission outlined cards (columns of heading-led rich text). */
.bnp-cols-section { padding: 48px 0; }
.bnp-outline-card {
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--bnp-line-blue) 55%, transparent);
  border-radius: 12px 0;
  padding: 28px 32px 32px;
}
.bnp-outline-card h1, .bnp-outline-card h2, .bnp-outline-card h3 {
  color: var(--tenant-brand);
  font-size: 1.75rem;
  line-height: 2.375rem;
  margin-bottom: 8px;
}

/* ── Collection item pages (projects / news singles) ──────────────────────
   The template's columns block renders the body left + the fields sidebar
   right on one bone panel (the source's project-single layout). */
.bnp-item-body { background: var(--tenant-card); border-radius: 12px; padding: 48px; }
.bnp-item-grid { display: grid; gap: 40px; }
@media (min-width: 992px) { .bnp-item-grid { grid-template-columns: 1.9fr 1fr; gap: 64px; } }
.item-fields { display: flex; flex-direction: column; gap: 28px; margin: 0; }
.item-fields-heading { font-size: 1.375rem; line-height: 2rem; color: var(--tenant-ink); margin-bottom: 16px; }
.item-field { position: relative; padding: 4px 0 12px 20px; }
.item-field::before {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 1px solid var(--bnp-line-blue);
  border-bottom: 1px solid var(--bnp-line-blue);
  border-bottom-left-radius: 14px;
  pointer-events: none;
}
.item-field::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -3.5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bnp-line-blue);
}
.item-field dt { font-size: 1.375rem; line-height: 2rem; font-weight: 700; color: var(--tenant-ink); margin-bottom: 6px; }
.item-field dd { margin: 0; font-size: 1.0625rem; line-height: 1.5rem; color: var(--tenant-slate); }
.item-field-list { margin: 0; padding-left: 20px; list-style: disc; }
.item-field-list li { margin-bottom: 4px; }

/* News article body. A news single renders its copy through the SHARED
   rich_text block (.st-prose-sec > .prose-tenant), not the columns/fields
   panel the project singles use — so the shared 70ch measure in
   app/globals.css was the only constraint and left the column narrow against
   this site's 19px body type. The item hero already tags the collection
   (.bnp-hero--item-news) and is a sibling section inside <main>, so the
   sibling combinator scopes the wider measure to news singles without
   touching project singles or ordinary pages. */
.bnp-hero--item-news ~ .st-prose-sec .prose-tenant { max-width: 84ch; }

/* ...and close the trench under it. The shared rich_text band ends on 96px
   (lg:py-24) and the related-news band below opens on another 96, so the
   article ran out into ~192px of dead space before the next block. Halve both
   sides — the two bands share a surface background, so they read as one
   continuous page, not two separated bands. Scoped to news singles. */
.bnp-hero--item-news ~ .st-prose-sec { padding-bottom: 48px; }
.bnp-hero--item-news ~ .st-prose-sec + section { padding-top: 48px; }

/* Imageless mist card band (Our Values): plain mist field behind bone cards. */
.bnp-ghost-section--mist { background: var(--tenant-mist); }

/* Deep-navy media_object bands crop their photo 4:3 (audit-measured on
   apron, simulation, and BHS — all r=1.333 at the source; natural otherwise). */
section.bnp-band-dark img.rounded-tenant { aspect-ratio: 4 / 3; }

/* ── Footer parity (2026-08-24) ────────────────────────────────────────────
   Source: warm off-white bg (#faf9f7), 19px/500 links, LinkedIn as a white
   circle with navy icon (not the translucent platform default). */
.bnp-light-footer {
  background-color: #faf9f7;
}
/* Footer nav links — 19px/500 like the source (platform default is 14px/400). */
.bnp-light-footer .st-footer-link {
  font-size: 1.1875rem; /* 19px */
  font-weight: 500;
}
/* LinkedIn icon — source: primaryButtonIcon, a 48px white square with the
   BNP notch radius (12px 12px 12px 0) and a soft drop shadow. The platform
   default is a 32px translucent circle — override size, shape, and shadow. */
.bnp-light-footer .bg-white\/10 {
  width: 48px;
  height: 48px;
  padding: 12px;
  background-color: #fff !important;
  color: var(--tenant-brand) !important;
  border: 1px solid var(--tenant-brand);
  border-radius: 12px 12px 12px 0;
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.07);
}
.bnp-light-footer .bg-white\/10:hover {
  background-color: #f5f5f5 !important;
}
.bnp-light-footer .bg-white\/10 svg {
  width: 18px;
  height: 18px;
}

/* Footer column headings — source: 22px/700, no uppercase transform.
   The platform default is 11.2px/600/uppercase (a tiny label). */
.bnp-light-footer .st-footer-heading {
  font-size: 1.375rem; /* 22px */
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
}

/* ── Collection ghost cards: tag on image, pre-headline, title sizing ──
   Source: .cardImage.ghost — tag.tertiary on the image (teal bg, dark text,
   17px), .preHeadline above the title (17px gray, shows region), title at
   28px/700 (h2.h4). */

/* Tag positioned on the image (bottom-left, inside the media wrapper). */
.bnp-ghost-media { position: relative; }
.bnp-ghost-tag {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 3; /* clears the raster tint at 2 */
  /* A project can carry more than one solution — a wrapping row, not a stack.
     The source measures 8px here, but its chips carry per-solution icons that
     add internal padding and visual separation; ours are text-only until those
     glyphs are exported, so 8px reads as two blocks jammed together. 12px
     restores the source's apparent rhythm. Revisit if the icons land. */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  right: 16px;
}
/* Solution chips. The source runs a FOUR-VARIANT palette keyed to the solution
   VALUE (.tag.primary|.secondary|.tertiary|.neutral), not one colour for all —
   so a chip's colour is data, not decoration. Geometry stays inherited from
   .bnp-tag (4px 12px, radius 4px, 17/24, w500), which already matches the
   source exactly; the notch signature does NOT apply to these chips.
   Every mapping below was measured on the live source (2026-08-27), the
   minority values via the ?solution= filtered listings — none inferred. */
/* Category chips (news) — source .tag.primary: light blue, white 600 text. */
.bnp-tag--category {
  background: var(--bnp-line-blue);
  border: 1px solid var(--bnp-line-blue);
  color: #ffffff;
  font-weight: 600;
}
.bnp-tag--solution {
  gap: 6px;
  border: 1px solid transparent;
  /* tertiary — the majority set: apron-systems, digital-airport-systems,
     operational-performance, air-traffic, apron-services, warehousing-solutions */
  background: var(--bnp-teal);
  border-color: var(--bnp-teal);
  color: #101820;
}
/* secondary — rust, the only variant with white text */
.bnp-tag--solution.bnp-tag--sol-simulation {
  background: var(--bnp-red-accent);
  border-color: var(--bnp-red-accent);
  color: #ffffff;
}
/* primary — light blue */
.bnp-tag--solution.bnp-tag--sol-cargo-solutions {
  background: var(--bnp-line-blue);
  border-color: var(--bnp-line-blue);
  color: #101820;
}
/* neutral — white with a warm hairline. The single most common value
   (28 of 65 projects), which is why one hardcoded chip colour was so visible. */
.bnp-tag--solution.bnp-tag--sol-baggage-handling-systems {
  background: #ffffff;
  border-color: #f2f0eb;
  color: #101820;
}

/* Pre-headline — region above the title. */
.bnp-ghost-preheadline { line-height: 1.75rem;
  font-size: 1.0625rem; /* 17px */
  color: var(--bnp-kicker); /* #7f8184 */
  margin-bottom: 8px;
  font-weight: 400;
}

/* Ghost card title — source is h2.h4 at 28px (not h3.h5 at 22px). */
.bnp-ghost-title.st-h4 {
  font-size: 1.75rem; /* 28px */
  line-height: 2.375rem; /* 38px */
  font-weight: 700;
}

/* Copy container — aligns pre-headline, title, and body (source: .cardImageCopy).
   Source's .cardImageBody has 24px padding — that's the content indent. */
.bnp-ghost-copy {
  padding: 24px; /* matches source .cardImageBody — column (14px) + copy (24px) = 38px indent */
  padding-bottom: 0;
}
.bnp-ghost-copy .bnp-ghost-preheadline { line-height: 1.75rem;
  margin-bottom: 0; /* tight to the title */
}

/* ── Bio dialog (team modal) ──────────────────────────────────────────────
   The source's teamModal is a 740px white panel: a SQUARE thumbnail and the
   name/role on one row, then the bio full-width beneath both — not the shared
   default's tall photo beside a single text column. `display: contents` on the
   body lifts title/role/prose into this grid so the structure can be rebuilt
   from CSS alone (the component stays shared). Values measured from the live
   modal, 2026-08-27. */
[data-tenant="bnp-associates"] .st-detail {
  /* The panel's radius/background are INLINE on the component (so they can't
     be overridden by a class); they read these custom properties first. */
  --st-detail-radius: 8px;
  --st-detail-bg: #ffffff;
  --st-detail-role-color: #101820; /* source uses body ink, not the link accent */
  --st-detail-prose-color: #101820;
  display: grid;
  grid-template-columns: 143px minmax(0, 1fr);
  /* Rows: thumb/name, role, then the bio taking the remaining height.
     minmax(0, 1fr) is what lets the bio row SHRINK below its content so it can
     scroll; an auto row would size to the full bio and the panel (max-h-85vh,
     overflow-hidden) would simply clip the tail off. */
  grid-template-rows: auto auto minmax(0, 1fr);
  column-gap: 28px;
  row-gap: 0;
  max-width: 740px;
  padding: 28px;
}
[data-tenant="bnp-associates"] .st-detail-media {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 143px;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  object-fit: cover;
  align-self: start;
}
[data-tenant="bnp-associates"] .st-detail-body {
  display: contents; /* title/role/prose become grid items of .st-detail */
}
[data-tenant="bnp-associates"] .st-detail-title {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0;
  font-size: 1.75rem;      /* 28px */
  line-height: 2.375rem;   /* 38px */
  font-weight: 700;
  color: var(--tenant-ink);
}
[data-tenant="bnp-associates"] .st-detail-role {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
  font-size: 1.1875rem;    /* 19px */
  line-height: 1.75rem;    /* 28px */
  font-weight: 400;
}
/* Bio copy spans the full panel BELOW the thumbnail — the structural
   difference from the shared default. */
[data-tenant="bnp-associates"] .st-detail-prose {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 28px;
  /* The scroll container. `display: contents` on .st-detail-body removed the
     box that used to carry overflow-y-auto, so long bios had nothing to
     scroll in and were clipped by the panel (found 2026-08-27).
     min-height: 0 is required — a grid item's default min-height: auto
     refuses to shrink below its content and defeats the overflow. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 1.1875rem;    /* 19px */
  line-height: 1.75rem;    /* 28px */
  color: #101820;
}
[data-tenant="bnp-associates"] .st-detail-prose p + p { margin-top: 1rem; }
/* Bio dialog link ("View LinkedIn Profile", source .links.medium: bold text
   link with a trailing arrow, set apart from the bio) — same voice as the
   card "Read More" flowline links. Opens in a new tab (CardDetail). */
[data-tenant="bnp-associates"] .st-detail-prose a {
  display: inline-block;
  margin-top: 20px;
  color: var(--tenant-red);
  font-weight: 900;
  font-size: 1.0625rem;
  text-decoration: none;
}
[data-tenant="bnp-associates"] .st-detail-prose a::after { content: " \2192"; }
[data-tenant="bnp-associates"] .st-detail-prose a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  [data-tenant="bnp-associates"] .st-detail { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; padding: 20px; }
  [data-tenant="bnp-associates"] .st-detail-media { width: 96px; }
  [data-tenant="bnp-associates"] .st-detail-title { font-size: 1.375rem; line-height: 1.875rem; }
}

/* ── Slider pagination (2026-08-30) ────────────────────────────────────────
   The source paginates every slider with ARROWS ONLY — no dot row anywhere —
   and puts the pair in a different place per band. Rules below are the source
   theme's own values (.arrowContainer / .timelineWrapper .timelineTop, read
   off bnpassociates.com's style.css), mapped onto the shared CardCarousel's
   st-carousel-* hooks:

     · icon cards  (.cardIconsScrollFluid)   → top-right, 10px above the track
     · card rails  (.cardImageSliderWrapper) → flanking the track, 45% down
     · timeline    (.timelineWrapper)        → flanking, in a band above the cards
     · photo strip (.imageGalleryWrapper)    → centered 48px below the track

   Placement is the only thing that varies; the pill itself is one rule. */

/* Dots: the source has none. Suppressing them here (rather than a prop) keeps
   the shared carousel unchanged for the other ~105 sites. */
[data-tenant="bnp-associates"] .st-pagination-dots { display: none; }

[data-tenant="bnp-associates"] .st-carousel-controls { gap: 12px; }
[data-tenant="bnp-associates"] .st-carousel-btn {
  height: 48px;
  width: 48px;
  border: 0;
  border-radius: 80px;
  /* --tenant-accent is BNP's #194289 — the source's slider-button navy (the
     brand token is the deeper #0f2852 used for bands and cards). */
  background: var(--tenant-accent);
  color: #fff;
  box-shadow: 0 20px 26px 0 rgba(0, 0, 0, 0.09);
  transition: background-color 300ms linear;
}
[data-tenant="bnp-associates"] .st-carousel-btn:hover { background: #14356e; }
[data-tenant="bnp-associates"] .st-carousel-btn:focus-visible {
  outline: 2px solid var(--bnp-line-blue);
  outline-offset: 6px;
}
/* Source glyph is a full arrow (fa-arrow-left/right), not the platform's
   chevron. Masking currentColor keeps the two colour schemes below working
   without a second icon. */
[data-tenant="bnp-associates"] .st-carousel-btn svg { display: none; }
[data-tenant="bnp-associates"] .st-carousel-btn::before {
  content: "";
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: var(--bnp-arrow) center / contain no-repeat;
  mask: var(--bnp-arrow) center / contain no-repeat;
}
[data-tenant="bnp-associates"] .st-carousel-prev {
  --bnp-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E");
}
[data-tenant="bnp-associates"] .st-carousel-next {
  --bnp-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* Icon-card band — source: .cardIconsScrollFluid .arrowContainer
   { right: 48px; top: -10px } , centered above at ≤767px.
   top is -27px, not the source's -10px: Ari's call 2026-08-30 — the pair sits
   mostly on the band and only clips the card corner, which reads cleaner
   on the navy than the source's near-full overlap. */
[data-tenant="bnp-associates"] .bnp-icon-section .st-carousel { position: relative; }
[data-tenant="bnp-associates"] .bnp-icon-section .st-carousel-controls {
  position: absolute;
  top: -27px;
  right: 48px;
  margin: 0;
  z-index: 2;
}
@media (max-width: 767px) {
  [data-tenant="bnp-associates"] .bnp-icon-section .st-carousel-controls {
    top: -22px;
    right: 50%;
    transform: translateX(50%);
  }
}
/* Dark band inverts the pill (source: .cardIconSliderWrapper.dark). */
[data-tenant="bnp-associates"] .bnp-icon-section--dark .st-carousel-btn {
  background: #fff;
  color: var(--tenant-accent);
}
[data-tenant="bnp-associates"] .bnp-icon-section--dark .st-carousel-btn:hover { background: #e8eef5; }

/* Card rail — source: .cardImageSliderWrapper .arrowContainer
   { left: -70px; width: calc(100% + 140px); top: 45%; space-between },
   collapsing to a centered pair below the track at ≤1200px.
   Our shell is wider than the source's container, so the full -70px only fits
   once the viewport gutter can hold it (≥1480px); below that the pair hugs the
   rail edge instead of pushing a horizontal scrollbar. */
[data-tenant="bnp-associates"] .bnp-ghost-section .st-carousel { position: relative; }
[data-tenant="bnp-associates"] .bnp-ghost-section:not(.bnp-ghost-section--dark) .st-carousel-controls {
  position: absolute;
  top: 45%;
  left: -24px;
  right: -24px;
  margin: 0;
  justify-content: space-between;
  z-index: 2;
}
@media (min-width: 1480px) {
  [data-tenant="bnp-associates"] .bnp-ghost-section:not(.bnp-ghost-section--dark) .st-carousel-controls {
    left: -70px;
    right: -70px;
  }
}
@media (max-width: 1200px) {
  [data-tenant="bnp-associates"] .bnp-ghost-section:not(.bnp-ghost-section--dark) .st-carousel-controls {
    position: static;
    margin: 20px auto 0;
    justify-content: center;
  }
}

/* Timeline rail (About) — source: .timelineWrapper .timelineTop .slick-control
   { position: absolute; top: 20px; left/right: -68px }  (0 at ≤1488px), white
   pill with a navy glyph, sitting in a band ABOVE the cards. */
[data-tenant="bnp-associates"] .bnp-ghost-section--dark .st-carousel {
  position: relative;
  padding-top: 88px;
}
[data-tenant="bnp-associates"] .bnp-ghost-section--dark .st-carousel-controls {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin: 0;
  justify-content: space-between;
  z-index: 2;
}
@media (min-width: 1480px) {
  [data-tenant="bnp-associates"] .bnp-ghost-section--dark .st-carousel-controls {
    left: -68px;
    right: -68px;
  }
}
[data-tenant="bnp-associates"] .bnp-ghost-section--dark .st-carousel-btn {
  background: #fff;
  color: var(--tenant-accent);
}
[data-tenant="bnp-associates"] .bnp-ghost-section--dark .st-carousel-btn:hover { background: #e8eef5; }

/* Photo strip (Careers) — source: .imageGalleryWrapper .arrowContainer
   { justify-content: center; margin-top: 48px; position: static }. */
[data-tenant="bnp-associates"] .bnp-strip .st-carousel-controls { margin-top: 48px; }

/* ── Hover parity pass (2026-08-30) ──────────────────────────────────────────
   The source theme has ONE hover vocabulary: anything interactive moves to
   $light-text-action-hover (#14356e), and anything that fills, fills with
   $light-surface-action-hover-muted (#deebf3). The platform's own hover
   utilities were being out-specified by this file's colour rules, so footer
   links changed nothing on hover and nav rows moved only to a near-invisible
   mist tint (computed-style sweep over 14 pages). Buttons are handled
   with the `.st-cta--*` hooks above; these are the remaining surfaces. */

/* Header — top-level nav settles on the action-hover navy (the platform picks
   the brand navy, which is nearly the resting colour), dropdown rows take the
   source's muted-blue fill (.parentActive:hover). */
.bnp-compact-header nav a.st-nav-link:hover,
.bnp-compact-header nav .group:hover > a.st-nav-link { color: #14356e; }
.bnp-compact-header nav a.st-nav-sublink:hover {
  background-color: #deebf3;
  color: #14356e;
}

/* Body copy links (.links:hover in the source). The platform hovers to
   redBright, which is LIGHTER than the resting colour — the source darkens. */
.prose-tenant a:hover { color: #14356e; }

/* Light footer — the shared footer hovers its links to white, which this
   file's light-footer recolouring cancels out (and would otherwise paint
   white-on-white). Anchor it on the action-hover navy instead; the selector
   covers nav columns, legal links, social chips and any contact block. */
.bnp-light-footer a:hover { color: #14356e; }
/* …and the nav columns underline with it (.footerFluid .FooterMenu li a:hover). */
.bnp-light-footer .st-footer-link:hover { text-decoration: underline; }

/* Accordion rows — source .accordionStyle.boxed.beefup:hover shifts the row
   from neutral-300 to neutral-400 (our --tenant-card → --tenant-line) on top
   of the head-colour change already set above. */
.bnp-acc { transition: background-color 300ms linear; }
.bnp-acc:hover { background: var(--tenant-line); }

/* ── Timeline band (About "Over 55 Years of Experience") — layout "timeline",
   rendered by tenants/bnp-associates/timeline.tsx (2026-08-31). Source of
   truth: .timelineWrapper on bnpassociates.com/about, audit-measured. Each
   slide is a year label whose 1px bottom border IS the rail — slides abut
   (track gap 0), so the borders join into one continuous line; the visible
   gap between cards is the card's own 20px right margin. ─────────────────── */
.bnp-timeline-section { background: var(--bnp-navy-deep); padding: 96px 0; }
.bnp-timeline-head { margin-bottom: 40px; }
.bnp-timeline-head .st-h1,
.bnp-timeline-head .st-h2 { color: #fff; }
.bnp-timeline-head .st-eyebrow { color: rgba(255, 255, 255, 0.7); }
.bnp-timeline-intro { color: rgba(255, 255, 255, 0.85); margin-top: 12px; max-width: 44rem; }

.bnp-timeline-track { gap: 0 !important; }
.bnp-timeline-track > * { width: 100%; }
@media (min-width: 640px) { .bnp-timeline-track > * { width: 50%; } }
@media (min-width: 1024px) { .bnp-timeline-track > * { width: 33.3333%; } }

/* Year rail label (source .timelineYear .year: 17px/700 white, centered,
   16px above the hairline, 24px between the line and the card). */
.bnp-timeline-rail-year {
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #faf9f7; /* source's bone hairline */
  margin-bottom: 24px;
}

/* Card (source .timelineCard > .timelineCardBody): brand-navy panel, light
   blue hairline border, BNP's two-corner notch, natural height (the source
   does NOT equalize card heights — short milestones end higher). */
.bnp-timeline-card {
  background: var(--tenant-brand);
  border: 1px solid #9dc2dc; /* source .timelineCardBody border-color */
  border-radius: 12px 0;
  padding: 24px;
  margin-right: 20px;
  box-shadow: 0 20px 26px 0 rgba(0, 0, 0, 0.09);
}
.bnp-timeline-year {
  /* Calibri like every BNP heading — a bare <h3> otherwise takes the
     platform's display face (Sora), which is what the client saw. */
  font-family: var(--tenant-font-heading);
  letter-spacing: normal;
  color: var(--bnp-teal);
  font-size: 1.75rem;      /* 28px */
  line-height: 2.375rem;   /* 38px */
  font-weight: 700;
  margin-bottom: 16px;
}
.bnp-timeline-story {
  color: #fff;
  font-size: 1.1875rem;    /* 19px */
  line-height: 1.75rem;    /* 28px */
  margin-bottom: 24px;
}
.bnp-timeline-media { position: relative; }
.bnp-timeline-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}
/* The raster tint fills the media wrapper — clip it to the photo's radius. */
.bnp-timeline-media > .bnp-overlay { border-radius: 12px; }

/* Arrows flank the year rail (source .timelineTop .slick-control: top 20px,
   ±68px outside the container at wide viewports, flush at the edges below —
   same pattern as the dark card rail above). */
.bnp-timeline-section .st-carousel { position: relative; }
.bnp-timeline-section .st-carousel-controls {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin: 0;
  justify-content: space-between;
  z-index: 2;
}
@media (min-width: 1480px) {
  .bnp-timeline-section .st-carousel-controls {
    left: -68px;
    right: -68px;
  }
}
/* White pill / navy glyph on the dark band (source .timelineTop buttons). */
.bnp-timeline-section .st-carousel-btn {
  background: #fff;
  color: var(--tenant-accent);
}
.bnp-timeline-section .st-carousel-btn:hover { background: #e8eef5; }

/* ── Visitor filters on collection lists (projects archive) — source
   .filterBar.horizontal.ghost + .pagination, measured 2026-09-03: controls
   in a centered row (flex 1, max 260px, gap 16), white 50px fields with 1px
   #d9d8d6 borders and 4px radius, 19px body type; pagination 48px below the
   grid, 19px navy links in 1px navy 4px-radius boxes, current = filled. The
   shell is multi-select (checkbox dropdowns + chips); these rules only
   re-skin its st-filter-* hooks. ─────────────────────────────────────────── */
[data-tenant="bnp-associates"] .st-filter { margin-bottom: 40px; }
[data-tenant="bnp-associates"] .st-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
[data-tenant="bnp-associates"] .st-filter-field { flex: 1 1 200px; max-width: 260px; min-width: 0; }
[data-tenant="bnp-associates"] .st-filter-search { flex-basis: 300px; max-width: 320px; }
[data-tenant="bnp-associates"] .st-filter-control,
[data-tenant="bnp-associates"] .st-filter-trigger {
  background: #fff;
  border: 1px solid #d9d8d6;
  border-radius: 4px;
  color: #101820;
  min-height: 50px;
  font-size: 1.0625rem;
}
[data-tenant="bnp-associates"] .st-filter-trigger[data-active="true"] { border-color: var(--tenant-accent); }
[data-tenant="bnp-associates"] .st-filter-control:focus,
[data-tenant="bnp-associates"] .st-filter-trigger:focus-visible { outline: 2px solid #5b9ac5; outline-offset: 2px; box-shadow: none; }
[data-tenant="bnp-associates"] .st-filter-badge { background: var(--tenant-accent); }
[data-tenant="bnp-associates"] .st-filter-panel { border-radius: 4px; border-color: #d9d8d6; }
[data-tenant="bnp-associates"] .st-filter-option { font-size: 1rem; }
[data-tenant="bnp-associates"] .st-filter-checkbox { accent-color: var(--tenant-accent); }
[data-tenant="bnp-associates"] .st-filter-summary { justify-content: center; }
[data-tenant="bnp-associates"] .st-filter-count { flex: 0 0 auto; color: #666; font-size: 1rem; }
[data-tenant="bnp-associates"] .st-filter-chip { border-radius: 4px; background: #faf9f7; border-color: #d9d8d6; color: #101820; font-size: 0.9375rem; }
[data-tenant="bnp-associates"] .st-filter-chip:hover { border-color: var(--tenant-accent); }
[data-tenant="bnp-associates"] .st-filter-clear { color: var(--tenant-accent); font-size: 0.9375rem; }
[data-tenant="bnp-associates"] .st-filter-pagination { margin-top: 48px; gap: 8px; }
[data-tenant="bnp-associates"] .st-filter-page {
  min-height: 50px;
  min-width: 48px;
  padding: 12px 14px;
  border: 1px solid var(--tenant-accent);
  border-radius: 4px;
  background: #fff;
  color: var(--tenant-accent);
  font-size: 1.1875rem;
  font-weight: 400;
}
[data-tenant="bnp-associates"] .st-filter-page--current { background: var(--tenant-accent); color: #fff; font-weight: 600; }

/* ── Mobile pass (2026-09-10) ─────────────────────────────────────────────────
   Findings from a 390px/320px audit of all 16 pages. The source theme treats
   tablet and mobile identically and calls desktop ≥992px (see the type scale at
   the top of this file), so these follow that same line. */

/* Header: the shared chrome swaps drawer→nav at Tailwind's `md` (768px), but the
   nav needs 800px for 7 links plus the CTA — at 768px (iPad Mini portrait) it
   pushed the document to 801px and every page scrolled sideways. This site's
   design system has no tablet nav at all, so hold the drawer until 992px.
   st-header-desktop / st-header-mobile are stable hooks on the shared chrome. */
@media (max-width: 991px) {
  [data-tenant="bnp-associates"] .st-header-desktop { display: none; }
  [data-tenant="bnp-associates"] .st-header-mobile { display: block; }
}

/* News rows: the 190px thumbnail column is a desktop measurement. Held at 390px
   it left the headline 124px (four and five line wraps), and at 320px it
   overflowed the page outright. Stack it — the full 342px gives two lines. */
@media (max-width: 767px) {
  .bnp-news-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bnp-news-thumb { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
  .bnp-news-row-body { padding: 0 0 4px; }
}

/* Card insets are desktop column measurements that compound once a card is
   full-width: 24 (.st-shell) + 14 (grid item) + 24 (.bnp-ghost-copy) left the
   office-card address 218px of 390 — 44% of the screen spent on gutters. On
   mobile the shell gutter is the only inset the copy needs. Boxed cards keep
   their own panel padding (.bnp-boxed-card), which is untouched here. */
@media (max-width: 767px) {
  .bnp-ghost-grid > * { padding: 0; }
  .bnp-ghost-copy { padding: 20px 0 0; }
  .bnp-ghost-more { margin-left: 0; }
}

/* Footer link rows are 19px tall — text with no hit area. Pad them to a 44px
   target without changing the visual rhythm (the column already gaps wider). */
[data-tenant="bnp-associates"] .st-footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* One link beside a five-link column reads as a layout error at 155px wide.
   Single column below 640px. */
@media (max-width: 639px) {
  [data-tenant="bnp-associates"] .st-footer-nav { grid-template-columns: minmax(0, 1fr); }
}

/* Offices map: the source ships tappable pins on mobile and so do we — it just
   sizes them for the map it has, and we were holding desktop numbers. Measured
   on www.bnpassociates.com at 390px: map 354px wide, pin 12px with a 2px ring
   (desktop is 15/3), i.e. 3.4% of map width against our 7.1%. Two causes, both
   fixed here: the 58px-a-side source inset above is a fixed 116px, which is 4%
   of a 1400px shell but 34% of a 342px one, squeezing our map to 226px; and the
   pin never shrank. With both restored we land on the source: 342x172 vs its
   354x178, 3.4px minimum pin gap vs its 3.5, 14 overlapping pin pairs vs its 14.
   --st-map-hit drops to 24px — the WCAG 2.5.8 AA minimum —
   because a 44px target on a 354px map covers its neighbours, which is what
   actually makes a cluster untappable. */
@media (max-width: 991px) {
  [data-tenant="bnp-associates"] section:has(.map-marker) .relative.mx-auto.w-full {
    max-width: 100% !important;
  }
  [data-tenant="bnp-associates"] section:has(.map-marker) {
    --st-map-dot: 12px;
    --st-map-dot-ring: 2px;
    --st-map-hit: 24px;
  }
  /* The idle pulse is ours, not the source's, and it roughly doubles each pin's
     visual footprint — the thing that made mobile clusters read as blobs even
     once the dots were sized right. Desktop keeps it (approved there, and at a
     12px minimum gap it costs nothing); this tenant's DNA is stillness anyway. */
  [data-tenant="bnp-associates"] .map-marker .st-map-halo { display: none; }
}

/* ── Mobile header + menu, matched to the source (2026-09-10) ────────────────
   Measured on www.bnpassociates.com at 390px: bar 91px tall with a 77x90 logo;
   the menu is a FULL-WIDTH white panel (#slidePanel1, 390x844), not a partial
   drawer, with bone pills for the nav rows — 52px tall, 19px/400 in #194289,
   an inline arrow on leaf rows and a circled + on rows that expand — and the
   Contact Us row promoted to a solid navy button at the foot.
   Everything below is styling on the shared chrome's st-mobile-* hooks; the
   markup is untouched. Not reproduced: the source's in-menu search row and its
   second (outline) CTA, both of which need markup the shared chrome doesn't
   have — see the audit notes. */
@media (max-width: 991px) {
  /* Bar: the logo was capped at 40px against the source's 90px. */
  [data-tenant="bnp-associates"] .st-header-mobile,
  [data-tenant="bnp-associates"] .st-mobile-head { --st-mobile-logo-h: 78px; --st-mobile-logo-max-w: 13rem; }

  /* Panel runs the full width, like the source's slide panel. */
  [data-tenant="bnp-associates"] .st-mobile-panel { width: 100%; max-width: none; }

  /* Head is white with the mark on it, not a navy band with the site name. */
  [data-tenant="bnp-associates"] .st-mobile-head {
    background: #fff;
    color: var(--tenant-ink);
    border-bottom: 1px solid var(--tenant-line);
    padding: 12px 20px;
  }
  [data-tenant="bnp-associates"] .st-mobile-head button { color: var(--tenant-ink); }
  /* Band is light here, so swap the default site-name for the mark (the shared
     chrome ships the name visible because the band is brand-coloured by default). */
  [data-tenant="bnp-associates"] .st-mobile-head-logo { display: block; }
  [data-tenant="bnp-associates"] .st-mobile-head-name { display: none; }
  [data-tenant="bnp-associates"] .st-mobile-head button:hover { background: var(--tenant-mist); }

  /* Rows: bone pills on the card token, carrying the 8px/0 card notch. */
  [data-tenant="bnp-associates"] .st-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 20px 28px;
  }
  [data-tenant="bnp-associates"] .st-mobile-row,
  [data-tenant="bnp-associates"] .st-mobile-item--leaf {
    background: var(--tenant-card);
    border-radius: 8px 0;
  }
  [data-tenant="bnp-associates"] .st-mobile-item {
    padding: 14px 15px;
    font-size: 1.1875rem;   /* 19px, source */
    font-weight: 400;       /* source rows are regular, not semibold */
    line-height: 1.5rem;
    color: #194289;
    border-radius: 8px 0;
  }
  [data-tenant="bnp-associates"] .st-mobile-item:hover { background: var(--tenant-card); }

  /* Leaf rows carry the arrow inline after the label (source), not right-aligned. */
  [data-tenant="bnp-associates"] .st-mobile-item--leaf .st-mobile-item-label::after {
    content: " →";
    white-space: nowrap;
  }

  /* Expanding rows carry a circled +/− instead of the platform chevron. */
  /* Circled +/- drawn from two bars rather than a glyph: a typeset "+" sits on
     the baseline, not the optical centre of the ring, so it always reads a
     couple of pixels high however the padding is nudged. Two absolutely
     centred rules cannot be off-centre. */
  [data-tenant="bnp-associates"] .st-mobile-toggle {
    position: relative;
    width: 26px;
    height: 26px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    color: #194289;
  }
  [data-tenant="bnp-associates"] .st-mobile-toggle svg { display: none; }
  [data-tenant="bnp-associates"] .st-mobile-toggle::before,
  [data-tenant="bnp-associates"] .st-mobile-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
  }
  [data-tenant="bnp-associates"] .st-mobile-toggle::before {
    width: 10px;
    height: 1.5px;
    transform: translate(-50%, -50%);
  }
  [data-tenant="bnp-associates"] .st-mobile-toggle::after {
    width: 1.5px;
    height: 10px;
    transform: translate(-50%, -50%);
  }
  /* aria-expanded lives on the row button now that the whole row toggles. */
  [data-tenant="bnp-associates"] .st-mobile-item--parent[aria-expanded="true"] .st-mobile-toggle::after {
    display: none;
  }

  /* Submenu: drop the platform's left rule, indent on the pill grid instead. */
  [data-tenant="bnp-associates"] .st-mobile-sub {
    margin: 8px 0 0;
    padding: 0 0 0 24px;   /* source indents children 24px from the parent pill */
    border-left: 0;
    gap: 8px;
  }
  [data-tenant="bnp-associates"] .st-mobile-sub a {
    background: var(--tenant-card);
    border-radius: 8px 0;
    color: #194289;
    font-size: 1.1875rem;
    font-weight: 400;
    line-height: 1.5rem;
    padding: 14px 15px;
  }

  /* The last row is Contact Us — the source promotes it to a solid navy CTA,
     the same promotion PlainHeader already does on desktop. */
  [data-tenant="bnp-associates"] .st-mobile-list > a.st-mobile-item--leaf:last-child {
    margin-top: 12px;
    background: var(--tenant-brand);
    color: #fff;
    font-weight: 700;
    text-align: center;
    border-radius: 12px 0;
    padding: 15px 24px;
  }
  [data-tenant="bnp-associates"] .st-mobile-list > a.st-mobile-item--leaf:last-child .st-mobile-item-label::after {
    content: none;
  }
}

/* ── Client staging review (2026-10-26) ─────────────────────────────────────
   The client's staging issues list, matched against bnpassociates.com
   (measured in a headless browser at 1440 the same day). */

/* Headings: every BNP heading is Calibri. A heading without an st-h* class
   otherwise falls back to the platform's display face (Sora) — the About
   timeline years and the careers mini banner were rendering in it. */
[data-tenant="bnp-associates"] :is(h1, h2, h3, h4, h5, h6) { font-family: var(--tenant-font-heading); }

/* Footer copyright row — source .footerCopyFluid: a full-width brand-navy bar,
   19px white text centered. The row lives inside the footer's container, so
   the bar bleeds to the viewport edges with a spread shadow + clip. */
.bnp-light-footer .st-footer-legal {
  position: relative;
  justify-content: center;
  margin-top: 48px;
  padding: 18px 0;
  border-top: 0;
  background: var(--tenant-brand);
  box-shadow: 0 0 0 100vmax var(--tenant-brand);
  clip-path: inset(0 -100vmax);
  color: #fff;
  font-size: 1.1875rem;
  line-height: 1.75rem;
  text-align: center;
}
.bnp-light-footer .st-footer-legal a { color: #fff; }
/* The row is the footer's last child; its container's bottom padding would
   leave a white strip under the bar. */
.bnp-light-footer > .st-shell:has(> .st-footer-legal) { padding-bottom: 0; }

/* Stacked project lists (/who-we-help/: "Explore Project Solutions", then one
   band per solution) — source: heading LEFT, "View All …" button RIGHT on one
   row, the solution titles one step smaller (h3 36/48). A lone list band
   (homepage Client Success Stories) keeps its centered head. */
.bnp-ghost-section:has(+ .bnp-ghost-section) .bnp-ghost-head,
.bnp-ghost-section + .bnp-ghost-section .bnp-ghost-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  text-align: left;
  margin-bottom: 40px;
}
.bnp-ghost-section:has(+ .bnp-ghost-section) .bnp-ghost-head > div,
.bnp-ghost-section + .bnp-ghost-section .bnp-ghost-head > div { margin-top: 0; justify-content: flex-end; }
.bnp-ghost-section + .bnp-ghost-section .bnp-ghost-head .st-h2 { font-size: 2.25rem; line-height: 3rem; }
/* A header-only band (no cards) is just that row. */
.bnp-ghost-grid:empty { display: none; }
.bnp-ghost-section:has(.bnp-ghost-grid:empty) .bnp-ghost-head { margin-bottom: 0; }

/* Video sample cards (/simulation/) — the thumbnail IS the control: no link
   row, no flowline; the label sits flush under the image at 22/32 on one
   line (source: h2.h5 308 wide, no inset). */
.bnp-ghost-card--video { padding-bottom: 0; }
.bnp-ghost-card--video .bnp-ghost-copy { padding: 0; }
.bnp-ghost-card--video .bnp-ghost-title { margin-top: 20px; font-size: 1.375rem; line-height: 2rem; }

/* Team cards: the bio dialog's trigger button sits between the grid cell and
   the card, and as a block it broke the equal-height chain — so "View Bio"
   and its flowline floated up on cards with short titles. Make the cell a
   grid so the button (itself a grid) stretches, and the card fills it. */
.bnp-ghost-grid > div:has(> button[aria-haspopup="dialog"]) { display: grid; }

/* About "Advanced Technology" — the White (surface) accordion band is the
   source's plain grid field (the hero texture), not the sky-blue FAQ band. */
.bnp-accordion-band--white {
  background-color: #fff;
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0) 35%, rgba(20, 53, 110, 0.05) 100%),
    repeating-linear-gradient(0deg, rgba(20, 53, 110, 0.035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(20, 53, 110, 0.035) 0 1px, transparent 1px 64px);
}
/* Video in the accordion media slot: poster + a large play chip; the whole
   frame opens the film in the dialog. */
.bnp-accordion-video { position: relative; display: block; }
.bnp-play-chip--lg { width: 72px; height: 72px; }

/* Homepage connector — the navy band's line drops into the next section and
   lands on the centered head (source svg.flowLine: starts 93px inside the
   band, ends at the heading 194px below it). Only where the next band is a
   lone list band; a stack of lists (/who-we-help/) has none on the source. */
.bnp-accordion-connector {
  position: absolute;
  top: calc(100% - 93px);
  left: calc(50% - 4px);
  z-index: 1;
  color: var(--bnp-line-blue);
  pointer-events: none;
}
/* (:has() cannot nest, so: shown by default, hidden unless a list band
   follows, and hidden when the list band below starts a stack.) */
.bnp-accordion-band:not(:has(+ .bnp-ghost-section)) .bnp-accordion-connector,
.bnp-accordion-band:has(+ .bnp-ghost-section + .bnp-ghost-section) .bnp-accordion-connector { display: none; }
.bnp-accordion-band:has(> .bnp-accordion-connector) + .bnp-ghost-section:not(:has(+ .bnp-ghost-section)) { padding-top: 196px; }
@media (max-width: 991px) {
  .bnp-accordion-band .bnp-accordion-connector { display: none; }
  .bnp-accordion-band:has(> .bnp-accordion-connector) + .bnp-ghost-section { padding-top: 96px; }
}

/* /news opens on its featured band: the hero's white grid field and a
   full-width h1 above both columns (source featuredNewsFuild on /news/). */
.bnp-news-section--lead {
  background-color: #fff;
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0) 35%, rgba(20, 53, 110, 0.05) 100%),
    repeating-linear-gradient(0deg, rgba(20, 53, 110, 0.035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(20, 53, 110, 0.035) 0 1px, transparent 1px 64px);
}

/* /projects: the heading and Featured Projects are ONE grid band on the
   source (featuredNewsFuild, 0 → 1140), ending before the full list. The
   banner hero and the featured band join seamlessly, the grid runs on. */
.bnp-hero:has(+ .bnp-news-section) {
  padding-bottom: 0;
  /* Grid only — the tint lives on the band below, so the join has no step. */
  background-image:
    repeating-linear-gradient(0deg, rgba(20, 53, 110, 0.035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(20, 53, 110, 0.035) 0 1px, transparent 1px 64px);
}
.bnp-hero + .bnp-news-section {
  padding-top: 48px;
  background-color: #fff;
  background-image:
    linear-gradient(180deg, rgba(20, 53, 110, 0) 0%, rgba(20, 53, 110, 0.05) 100%),
    repeating-linear-gradient(0deg, rgba(20, 53, 110, 0.035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(20, 53, 110, 0.035) 0 1px, transparent 1px 64px);
}

/* Collection singles: "← Back to Projects" in place of the full trail (the
   source's project single), set like the breadcrumb it replaces. */
.bnp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 1.0625rem;
  line-height: 1.5rem;
  font-weight: 700;
  color: var(--tenant-accent);
  text-decoration: none;
}
.bnp-back-link:hover { color: #14356e; text-decoration: underline; }

/* /bnp-group: the source has no pathway line under its collage hero, and
   ours ran into the sky panel below. Hide it where the hero runs into a
   centered CTA panel. */
.bnp-hero--collage:has(+ .bnp-cta-panel-wrap) .bnp-flowline-path { display: none; }

/* Carousel pause button (autoplaying timeline + careers photo strip): the
   same pill as the arrows, with a pause / play glyph. */
[data-tenant="bnp-associates"] .st-carousel-pause {
  --bnp-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h3.5v14H7zM13.5 5H17v14h-3.5z'/%3E%3C/svg%3E");
}
[data-tenant="bnp-associates"] .st-carousel-pause[aria-label="Play carousel"] {
  --bnp-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
/* Timeline: arrows flank the rail; the pause button joins the NEXT arrow on
   the right rather than landing mid-rail. */
.bnp-timeline-section .st-carousel-pause { order: 2; margin-left: auto; }
.bnp-timeline-section .st-carousel-next { order: 3; }

/* ── Contact band (bnp_contact) ─────────────────────────────────────────────
   Source form-media-object (service pages) and form-basic (/contact/,
   /bnp-group/), measured 2026-10-26. */
.bnp-contact { position: relative; }
.bnp-contact-grid { display: grid; gap: 40px; align-items: start; }
.bnp-contact-intro { font-size: 1.1875rem; line-height: 1.75rem; }
.bnp-contact-intro p { margin: 0; }
.bnp-contact-form-col { position: relative; }
.bnp-contact-panel {
  position: relative;
  z-index: 1;
  background: #faf9f7;
  border: 1px solid var(--tenant-line);
  border-radius: 8px;
  padding: 40px 32px;
  box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.07);
}
.bnp-contact-note { color: var(--tenant-slate); }
/* Corner bracket beside the form (source .flowLineForm: 200×300, 20px out). */
.bnp-flowline--form {
  top: -20px;
  right: -20px;
  width: 200px;
  height: 300px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-top-right-radius: 14px;
}
.bnp-flowline--form::before { top: -4px; left: -4px; }
.bnp-flowline--form::after { bottom: -4px; right: -4.5px; }

/* Service-page band: deep-navy grid field; heading + intro, then photo + form. */
.bnp-contact--band {
  padding: 144px 0 96px;
  background-color: #0f2852;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 64px),
    linear-gradient(135deg, #14356e 14%, #0f2852 76%);
}
.bnp-contact--band .bnp-contact-heading { color: #fff; }
.bnp-contact-accent { color: #f9df8d; }
.bnp-contact--band .bnp-contact-intro { color: #faf9f7; }
.bnp-contact-media { position: relative; }
.bnp-contact-img { position: relative; z-index: 1; width: 100%; aspect-ratio: 610 / 419; object-fit: cover; border-radius: 12px; }
@media (min-width: 992px) {
  .bnp-contact--band .bnp-contact-grid { grid-template-columns: 1fr 1fr; column-gap: 96px; row-gap: 48px; }
}

/* Light band with the globe: heading/intro/checklist/button left over the
   looping globe (27% opacity, far larger than its column), form right. */
.bnp-contact--globe { padding: 80px 0 64px; background: var(--tenant-surface); overflow-x: clip; }
.bnp-contact--lead { padding-top: 96px; }
.bnp-contact--globe .bnp-contact-heading { color: var(--tenant-ink); }
.bnp-contact--globe .bnp-contact-intro { margin-top: 20px; color: #101820; }
.bnp-contact-copy { position: relative; isolation: isolate; }
.bnp-contact-globe {
  position: absolute;
  top: -46px;
  left: -336px;
  width: 1344px;
  max-width: none;
  height: 756px;
  object-fit: contain;
  opacity: 0.27;
  z-index: -1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .bnp-contact-globe { display: none; } }
.bnp-contact-checklist { margin: 24px 0 0; padding: 0; list-style: none; }
.bnp-contact-checklist li { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 1.1875rem; line-height: 1.75rem; color: #101820; }
.bnp-contact-checklist svg { flex-shrink: 0; color: var(--bnp-line-blue); }
.bnp-contact-cta { margin-top: 32px; }
/* "Visit BNP Group" leaves the site — the source marks it with ↗. */
.bnp-contact-cta a[target="_blank"]::after { content: "↗"; margin-left: 4px; }
@media (min-width: 992px) {
  .bnp-contact--globe .bnp-contact-grid { grid-template-columns: 1fr 1fr; column-gap: 64px; }
}
@media (max-width: 991px) {
  .bnp-contact--band { padding: 72px 0; }
  .bnp-contact-globe { left: -50%; width: 200%; height: auto; }
}

/* The site form inside the panel (shared SiteForm — its colours are inline,
   hence !important): 19px labels, rust asterisk, 47px white fields with the
   warm hairline, a notched navy Submit that sizes to its label. */
.bnp-contact-panel form {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  column-gap: 16px !important;
  row-gap: 24px !important;
}
.bnp-contact-panel form label { font-size: 1.1875rem !important; font-weight: 400 !important; color: #101820 !important; margin-bottom: 4px; }
.bnp-contact-panel .st-form-req { color: #983823; }
.bnp-contact-panel form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.bnp-contact-panel form select,
.bnp-contact-panel form textarea {
  background-color: #fff !important;
  border: 1px solid #d9d8d6 !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
  font-size: 1.0625rem !important;
  color: #101820 !important;
}
.bnp-contact-panel form textarea { min-height: 150px; }
.bnp-contact-panel form select {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 48px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23101820' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
}
.bnp-contact-panel form button[type="submit"] {
  justify-self: start;
  width: auto !important;
  padding: 12px 24px !important;
  border-radius: 12px 0 !important;
  background: var(--tenant-accent) !important;
  color: #fff !important;
  font-size: 1.125rem;
  font-weight: 700;
}
.bnp-contact-panel form button[type="submit"]:hover { border-radius: 12px !important; background: #14356e !important; }