/* airapac.org mockup v2. Structure, grid, type scale, radii, spacing and the five
   micro-animations are reproduced from a live measurement of bcg.com taken on
   7 October 2026. Colour, type families, copy and images are AIR APAC's own.
   Mobile first. Tiers: base, 768, 1024, 1440. No clamp() on type, as measured. */

/* ----------------------------------------------------------------- typefaces */
/* Self-hosted so the mockup makes no external request at all. The three families
   are the AIR APAC substitutes for BCG's sans and serif, per G5: Newsreader for
   the serif heading role, Inter for the sans role, JetBrains Mono for eyebrows.
   These are the latin subsets of the same files Google Fonts served before, so
   the rendering is unchanged and the network dependency is gone. Inter is a
   variable file, declared once per weight as Google's own stylesheet did. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/newsreader-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-700.woff2') format('woff2');
}

/* ------------------------------------------------------------------ tokens */
:root {
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --font-weight-headings: 300;

  /* The palette for this experiment. It follows BCG's own four-role arrangement
     and maps their greens onto blues. BCG's structure is a deep primary, a much
     darker variant, one bright high-chroma accent and white, with warm neutrals
     alongside. The roles are kept; only the hue moves.
       BCG #147B58 primary                       -> --blue-700
       BCG #144622 Parsley, the darker variant   -> --blue-800
       BCG #0C2B15 headings and dark band ground -> --blue-800, because BCG uses
                                                    one value for both
       BCG #96F878 Mint, the bright accent       -> --blue-200
       BCG #71DC68 accent on hover               -> --blue-300
       BCG #E3FDDB pale ground                   -> --blue-100
       BCG #F1EEEA warm neutral                  -> --paper, deliberately still
                                                    warm, as BCG pairs a cool
                                                    brand with warm neutrals
       BCG #212427 near black                    -> --ink
     The ramp is deliberately NOT matched to BCG's greens by relative luminance.
     Blue carries far less luminance than green at the same perceived lightness,
     so a luminance match would render every mid tone almost black. These values
     are chosen to look as present as BCG's greens look, and every text, ground
     and pill pair is contrast audited in the verification pass. */
  --blue-900: #04263f;      /* deepest: hover fill on the light grounds */
  --blue-800: #073a5e;      /* headings, and the dark band ground */
  --blue-700: #0b5581;      /* the primary */
  --blue-600: #0f6fa6;
  --blue-500: #1488c4;
  --blue-400: #3aa6dc;
  --blue-300: #6ecbf2;      /* the accent on hover */
  --blue-200: #a6e1fa;      /* the bright accent: every pill, on every ground */
  --blue-100: #d9f0fd;      /* the pale ground */
  --paper: #f7f5f2;         /* warm neutral, beige ground, footer */
  --ink: #1b1f24;           /* body text */
  --white: #ffffff;
  --gray-200: #f1f1f2;      /* secondary hover fill */
  --gray-300: #d7d9dd;      /* header border when the menu is open */
  --muted: #7b8592;         /* BCG #898888 role: placeholders, hairlines, disabled */
  --glass: rgba(255, 255, 255, 0.7);

  /* radius scale in use */
  --radius-5: 5px;
  --radius-10: 10px;
  --radius-15: 15px;
  --radius-20: 20px;
  --radius-25: 25px;
  --radius-30: 30px;
  --radius-70: 70px;
  --button-radius: var(--radius-15);

  --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.08);

  /* page margins and section padding step with the breakpoints */
  --page-margin: 16px;
  --section-pad-y: 32px;
  --max-content-width: 1280px;

  /* the house easing, used by 188 background transitions on the live page */
  --ease-house: cubic-bezier(0.64, 2, 0.67, 1.53);
}
@media (min-width: 768px) {
  :root { --page-margin: 40px; --section-pad-y: 40px; }
}
@media (min-width: 1024px) {
  :root { --page-margin: 40px; --section-pad-y: 48px; }
}
@media (min-width: 1440px) {
  :root { --page-margin: 80px; --section-pad-y: 56px; }
}

/* ------------------------------------------------- colour-scheme system */
/* Each module declares foreground-on-background. Button, link and eyebrow
   colours derive from the pair, never hand-set per module.
   This is BCG's arrangement, restored. Measured on the live page, BCG puts the
   SAME bright accent on every ground: #96F878 mint as the pill fill on the pale
   green band and on the deep green band alike, always with near-black text. The
   accent is distinguished by chroma, not by luminance, so it does not need to
   invert. An earlier version of this mockup had no high-chroma partner for navy
   and had to invert the pill instead, which is the one place it read quieter
   than BCG. Blues have that partner, so the accent is now single and constant. */
[data-color-scheme] { background: var(--bg); color: var(--fg); }
[data-color-scheme="black-on-white"],
[data-color-scheme="black-on-pale"],
[data-color-scheme="black-on-beige"] {
  --fg: var(--ink);
  --heading: var(--blue-800);
  --eyebrow: var(--blue-800);
  --pill-bg: var(--blue-200);
  --pill-fg: var(--ink);
  --pill-hover: var(--blue-300);
  --secondary-hover: var(--gray-200);
  --focus: var(--blue-800);
}
[data-color-scheme="black-on-white"] { --bg: var(--white); }
[data-color-scheme="black-on-pale"]  { --bg: var(--blue-100); }
[data-color-scheme="black-on-beige"] { --bg: var(--paper); }
[data-color-scheme="white-on-blue"] {
  --bg: var(--blue-800);
  --fg: var(--white);
  --heading: var(--white);
  --eyebrow: var(--white);
  --pill-bg: var(--blue-200);
  --pill-fg: var(--ink);
  --pill-hover: var(--blue-300);
  --secondary-hover: rgba(255, 255, 255, 0.12);
  --focus: var(--paper);
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 140%;
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--focus, var(--blue-700)); outline-offset: 3px; }

/* -------------------------------------------------------------- headings */
/* Every heading computes to 300. Serif for the statements (h1, h2), sans for
   the operational titles (h3 and everything else). */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--font-weight-headings);
  color: var(--heading, var(--blue-700));
}
h1, h2 { font-family: var(--serif); line-height: 100%; letter-spacing: -0.005em; }
h3, h4, h5, h6 { font-family: var(--sans); line-height: 120%; }
h1 { font-size: 48px; line-height: 110%; }
h2 { font-size: 38px; line-height: 110%; }
h3 { font-size: 24px; }
@media (min-width: 768px) {
  h1 { font-size: 64px; line-height: 100%; }
  h2 { font-size: 44px; line-height: 100%; }
  h3 { font-size: 32px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 72px; }
  h2 { font-size: 48px; }
  h3 { font-size: 38px; line-height: 110%; }
}
@media (min-width: 1440px) {
  h1 { font-size: 86px; }
  h2 { font-size: 52px; }
  h3 { font-size: 44px; line-height: 100%; }
}

.description { font-size: 18px; line-height: 130%; font-weight: 300; }
.description--lg { font-size: 20px; line-height: 120%; }
.body { font-size: 16px; line-height: 140%; font-weight: 400; }
@media (min-width: 1024px) {
  .description { font-size: 20px; }
  .description--lg { font-size: 24px; }
}

/* Every eyebrow: uppercase, 14 px, 700, line-height 100 %. JetBrains Mono is the
   G5 house assignment and the one deliberate divergence from the sans measured. */
.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--eyebrow, var(--blue-700));
}

/* ------------------------------------------------- 5.1 link underline wipe */
/* Twice-wide gradient with a transparent notch at 47 to 53 %. At rest the notch
   sits under the word; on hover the run slides across. Overshoot bezier. */
a, .link, a.link, .link--micro {
  --textColor: currentColor;
  --hrGapColor: transparent;
  --transitionSpeed: 0.5s;
  color: var(--textColor);
  background-image: linear-gradient(90deg,
      var(--textColor), var(--textColor) 47%,
      var(--hrGapColor) 0, var(--hrGapColor) 53%,
      var(--textColor) 0, var(--textColor));
  background-repeat: no-repeat;
  background-size: 210% 1px;
  background-position: 101% bottom;
  padding-bottom: 2px;
  transition: background var(--transitionSpeed) cubic-bezier(.64, 2, .67, 1.53) allow-discrete;
}
a:hover, .link:hover, a.link:hover, .link--micro:hover { background-position: 0 bottom; }
/* anchors that wrap media, an icon or a lockup carry no underline */
.brand, .footer-home, .cell-media, .card-media, .promo13-media, .iconbtn, .icon-link { background-image: none; padding-bottom: 0; }
/* small text links keep their visual box but gain a 24 px tap box: the extra
   top padding is cancelled by a negative margin, so layout is unchanged */
.link--micro, .chips .link, .footer-nav a, .footer-lens a, .footer-legal a { padding-top: 6px; margin-top: -6px; }
.link--micro.eyebrow, .header-pill .link--micro { padding-top: 8px; margin-top: -8px; }
.link--micro {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 100%;
  text-transform: uppercase;
}
.link--micro.eyebrow { font-family: var(--mono); font-size: 14px; display: inline-block; }

/* --------------------------------------------------------- 5.2 pill buttons */
/* pill: no arrow, no padding swap. pill--action: arrow, padding swap, fly-out and
   fly-in. Both 48 tall, radius 15, 16/700 uppercase. */
.pill {
  --cta-button-animation-timing: 0.35s;
  --cta-button-icon-rest-position: 30px;
  --cta-button-icon-hidden-position: -25px;
  --cta-button-expanded-padding: 55px;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  border: none;
  padding: 13px 24px;
  background: var(--pill-bg, var(--blue-700));
  color: var(--pill-fg, var(--paper));
  border-radius: var(--button-radius);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 100%;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
  max-width: 500px;
  cursor: pointer;
  transition: padding var(--cta-button-animation-timing), background 0.5s var(--ease-house);
}
.pill:hover { background: var(--pill-hover, var(--blue-900)); }
.pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (min-width: 768px) {
  .pill { min-height: 48px; font-size: 16px; }
}
.pill--action { padding: 13px var(--cta-button-expanded-padding) 13px 24px; }
.pill--action svg {
  position: absolute;
  right: var(--cta-button-icon-rest-position);
  top: 33%;
  height: 14px;
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: scale(1.3);
  animation: global-button-arrow-reset var(--cta-button-animation-timing) ease-in-out 0s 1 forwards;
}
.pill--action:hover { padding-right: 32px; padding-left: var(--cta-button-expanded-padding); }
.pill--action:hover svg {
  animation: global-button-arrow-animate var(--cta-button-animation-timing) ease-in-out 0s 1 forwards;
}
@keyframes global-button-arrow-animate {
  0%   { right: var(--cta-button-icon-rest-position); }
  50%  { right: var(--cta-button-icon-hidden-position); }
  52%  { left: var(--cta-button-icon-hidden-position); }
  100% { left: var(--cta-button-icon-rest-position); }
}
@keyframes global-button-arrow-reset {
  0%   { left: var(--cta-button-icon-rest-position); }
  50%  { left: var(--cta-button-icon-hidden-position); }
  52%  { right: var(--cta-button-icon-hidden-position); }
  100% { right: var(--cta-button-icon-rest-position); }
}
.pill--secondary {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 1px currentColor;
}
.pill--secondary:hover { background: var(--secondary-hover); }

/* ------------------------------------------------------ 5.3 scroll reveal */
/* CSS-only, paused until the observer flips data-scrolled on the wrapper. The
   0 % / 1 % two-step holds the offset for the whole run and releases at the end:
   a snap into place, not a slide. Guarded by html.js so content reads without
   scripting. */
.js [data-animate-on-scroll][data-animate],
.js [data-animate-on-scroll] [data-animate] {
  animation-fill-mode: both;
  animation-duration: .25s;
  animation-play-state: paused;
  animation-timing-function: ease-out;
}
.js [data-animate-on-scroll][data-scrolled],
.js [data-animate-on-scroll][data-scrolled] [data-animate] { animation-play-state: running; }
.js [data-animate-on-scroll][data-animate=fade],
.js [data-animate-on-scroll] [data-animate=fade]       { animation-name: fade; }
.js [data-animate-on-scroll][data-animate=fromBottom],
.js [data-animate-on-scroll] [data-animate=fromBottom] { animation-name: fromBottom; }
.js [data-animate-on-scroll][data-animate=fromLeft],
.js [data-animate-on-scroll] [data-animate=fromLeft]   { animation-name: fromLeft; }
.js [data-animate-on-scroll][data-animate=fromRight],
.js [data-animate-on-scroll] [data-animate=fromRight]  { animation-name: fromRight; }
@keyframes fade       { 0% { opacity: 0 } to { opacity: 1 } }
@keyframes fromBottom { 0% { opacity: 0 } 1% { opacity: 0; transform: translateY(400px) } to { opacity: 1 } }
@keyframes fromLeft   { 0% { opacity: 0; transform: none } 1% { opacity: 0; transform: translate(-400px) } to { opacity: 1; transform: none } }
@keyframes fromRight  { 0% { opacity: 0; transform: none } 1% { opacity: 0; transform: translate(400px) } to { opacity: 1; transform: none } }
@keyframes promoReveal      { 0% { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } }
@keyframes contentCardEnter { 0% { transform: translateY(12px) } to { transform: translateY(0) } }
@keyframes contentCardLeave { 0% { transform: translateY(0) } to { transform: translateY(-8px) } }
@media (prefers-reduced-motion: reduce) {
  .js [data-animate-on-scroll][data-animate],
  .js [data-animate-on-scroll] [data-animate] { animation: none; opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ 5.5 header */
/* Fixed, transparent wrapper. Two floating glass pills inset by the page margin. */
.site-header {
  position: fixed;
  top: 16px;
  left: var(--page-margin);
  right: var(--page-margin);
  height: 73px;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: transparent;
  border: 0;
  transition: margin 0.25s ease-in, width 0.25s ease-in, background 0.25s ease-in;
}
@media (min-width: 1024px) { .site-header { top: 40px; } }
.header-pill {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 12px;
  gap: 12px;
  background: var(--glass);
  border-radius: var(--radius-20);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--box-shadow);
  z-index: 2;
  transition: border-radius 0.25s ease-in, box-shadow 0.25s ease-in;
}
.header-pill--right { padding: 0 24px 0 16px; gap: 20px; }
@media (min-width: 768px) {
  .header-pill { height: 72px; }
}
.burger {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-10);
  background: var(--blue-100);
  color: var(--blue-700);
  cursor: pointer;
  transition: background 0.5s var(--ease-house);
}
.burger:hover { background: var(--blue-200); }
.burger-box { position: relative; width: 24px; height: 24px; }
.burger .ico { position: absolute; inset: 0; }
.burger .ico-x { opacity: 0; }
body[data-mega-menu-is-open] .burger .ico-list { opacity: 0; }
body[data-mega-menu-is-open] .burger .ico-x { opacity: 1; }
.brand { display: block; height: 30px; }
.brand img { height: 30px; width: auto; }
.icon-link { display: grid; place-items: center; width: 24px; height: 24px; color: var(--blue-700); }
.header-pill .link--micro { font-size: 14px; color: var(--blue-700); }

/* Mega menu open: the header loses the pill treatment and becomes a flat white bar. */
body[data-mega-menu-is-open] .site-header {
  top: 0; left: 0; right: 0;
  width: 100%;
  margin: 0;
  height: 113px;
  padding: 20px var(--page-margin);
  background: var(--white);
  border-bottom: 1px solid var(--gray-300);
}
body[data-mega-menu-is-open] .header-pill {
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: transparent;
}
.megamenu-scrim {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(10, 11, 13, 0.3);
}
.megamenu {
  position: fixed;
  top: 113px; left: 0; right: 0;
  z-index: 35;
  background: var(--white);
  border-bottom: 1px solid var(--gray-300);
  border-radius: 0 0 var(--radius-30) var(--radius-30);
  padding: 40px var(--page-margin) 56px;
  max-height: calc(100vh - 113px);
  overflow: auto;
}
.megamenu-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .megamenu-grid { grid-template-columns: repeat(4, 1fr); column-gap: 24px; } }
.megamenu-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.megamenu .eyebrow { margin-bottom: 4px; }
.megamenu a { font-size: 20px; line-height: 120%; font-weight: 300; }

/* -------------------------------------------------------------- 6.1 hero */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
/* The ambient field. BCG's own hero effect, translated into the blue ramp. BCG runs
   a 10 s looping film: high key, no hard edge, a bright floor across the bottom third
   that is brightest low and left, two or three soft dark lobes descending from the top
   edge and separated by a brighter column, a bright column down the left edge, and a
   deepest note at the top right over 6 to 10 percent of the area.

   WHY THE PREVIOUS VERSION COULD NOT BE SEEN TO MOVE, measured rather than assumed.
   It ran six drift animations that translated very large, very blurred ellipses by 2
   to 4 vw over 20 to 43 s. Against BCG's own film that is a peak accumulated change
   of 1.77 at 480 x 270 and a visible (high pass) change of 0.333 per 0.5 s, against
   the film's 12.69 and 2.762, and it never returns to its start: six animations on
   six different periods never form a cycle. Translating a shape whose own surface
   carries almost no gradient moves almost no pixels. The film is not translated
   either: phase correlation over all 99 of its frame pairs returns exactly 0 px of
   global shift. It changes in place.

   WHAT THIS DOES INSTEAD, all four changes measured.
   1. One ten second cycle for every moving part, so the field is a single loop. The
      film is 10.03 s and loops without a visible join.
   2. An asymmetric excursion that peaks at a third of the cycle and takes the rest of
      it to return, which is the film's own shape: 2.02 at 0.5 s, peak 13.15 at 3.3 s,
      6.09 at 4.0 s, 0.94 at 9.9 s. Measured here: peak at 3.5 s, end of cycle 0.000
      of peak, which the previous build could not do at all (it ended at 1.000).
   3. The movement carried by in place changes of depth. The two dark lobes and the
      pale forms under them move in opposite directions, so the alternation across the
      top travels while the picture itself never slides.
   4. A resting composition re-centred inside BCG's envelope. The accepted frame sat
      at bottom-top +30.4 against a ceiling of 30, pinned to the boundary on four
      criteria at once, and a composition on the boundary cannot move in any direction.
      The wash over the top and the shade into the bottom right corner bring it to
      +24.2 with all fourteen static criteria passing, which is the headroom the
      excursion spends.

   THE HONEST LIMIT. This field cannot reach the film's motion amplitude. Measured on
   twenty variants: an in place opacity excursion on these soft forms reaches 0.8 to
   1.8, and the excursions that do reach 5 to 9 (a wide soft veil, or a brightness
   filter on the field) drop the band residual below the film's own floor of 10.4 at
   the darkest phase, because a smooth high key field has no fine texture to keep. The
   film's motion is carried largely by texture that a CSS gradient field does not have.
   See README, "The hero field, rebuilt".

   Everything here is a longhand. The animation shorthand resets timing function and
   iteration count set on the shared rule, which is the bug that froze the first build
   after a single pass. */

.hero-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 46vw 42vh at 94% 2%,
      rgba(92, 184, 224, 0.55) 0%, rgba(92, 184, 224, 0.22) 50%,
      rgba(92, 184, 224, 0.06) 78%, rgba(92, 184, 224, 0) 100%),
    linear-gradient(90deg,
      rgba(143, 206, 236, 0) 32%, rgba(143, 206, 236, 0.42) 100%),
    linear-gradient(180deg,
      #e4f5fe 0%, #e4f5fe 30%, #e8f6fe 64%, #e8f6fe 100%);
}
/* The re-centring layer. A light wash over the top sixth and a soft shade into the
   bottom right corner. It moves the resting frame off the envelope boundary: measured,
   bottom-top +30.4 to +24.2 with all fourteen static criteria still passing. */
.hero-field::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.055) 32%,
      rgba(255, 255, 255, 0) 56%),
    radial-gradient(ellipse 62vw 42vh at 88% 100%,
      rgba(124, 196, 228, 0.30) 0%, rgba(124, 196, 228, 0) 72%);
}
/* The excursion: one wide soft field over the upper half that deepens and lifts in
   place. This is the form that carries the amplitude, because a change of depth over
   a large area moves the mean of the picture while a displacement of the same area
   does not. */
.hero-field::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100vw 62vh at 48% -12%,
      rgba(114, 190, 226, 0.45) 0%, rgba(114, 190, 226, 0.24) 30%,
      rgba(114, 190, 226, 0.10) 58%, rgba(114, 190, 226, 0) 100%),
    radial-gradient(ellipse 90vw 50vh at 62% 6%,
      rgba(124, 196, 228, 0.32) 0%, rgba(124, 196, 228, 0.12) 50%,
      rgba(124, 196, 228, 0) 100%);
  animation-name: field-excursion;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
@keyframes field-excursion {
  0%   { opacity: 0.10; }
  33%  { opacity: 0.62; }
  80%  { opacity: 0.17; }
  100% { opacity: 0.10; }
}
.hero-field .field-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: opacity;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.field-shape--floor { width: 84vw; height: 58vh; left: -30vw; top: 56vh;
  filter: blur(80px);
  background: radial-gradient(ellipse closest-side, #f0f9ff 0%, #f0f9ff 20%, rgba(240, 249, 255, 0.52) 46%, rgba(240, 249, 255, 0.18) 76%, rgba(240, 249, 255, 0) 100%);
  animation-name: field-hold; animation-delay: -1.2s; }
.field-shape--leftcol { width: 52vw; height: 108vh; left: -24vw; top: -2vh;
  filter: blur(90px);
  background: radial-gradient(ellipse closest-side, rgba(238, 248, 255, 0.66) 0%, rgba(238, 248, 255, 0.66) 40%, rgba(238, 248, 255, 0.32) 74%, rgba(238, 248, 255, 0) 100%);
  animation-name: field-hold; animation-delay: -2.4s; }
.field-shape--lobeL { width: 38vw; height: 56vh; left: 18vw; top: -24vh;
  filter: blur(52px);
  background: radial-gradient(ellipse closest-side, rgba(92, 184, 224, 0.90) 0%, rgba(92, 184, 224, 0.90) 42%, rgba(92, 184, 224, 0.40) 74%, rgba(92, 184, 224, 0) 100%);
  animation-name: field-deepen; animation-delay: -0.6s; }
.field-shape--lobeR { width: 48vw; height: 58vh; left: 63vw; top: -27vh;
  filter: blur(58px);
  background: radial-gradient(ellipse closest-side, rgba(92, 184, 224, 0.82) 0%, rgba(92, 184, 224, 0.82) 42%, rgba(92, 184, 224, 0.36) 74%, rgba(92, 184, 224, 0) 100%);
  animation-name: field-deepen; animation-delay: -1.4s; }
.field-shape--midcol { width: 20vw; height: 86vh; left: 41vw; top: -12vh;
  filter: blur(18px);
  background: radial-gradient(ellipse closest-side, rgba(244, 251, 255, 0.58) 0%, rgba(244, 251, 255, 0.58) 40%, rgba(244, 251, 255, 0.26) 74%, rgba(244, 251, 255, 0) 100%);
  animation-name: field-lift; animation-delay: -0.9s; }
/* The fine contrast strips. Sharper than the large forms so the band residual has
   headroom: measured, the resting residual is 12.3 with these against 11.9 without,
   and the film's own range is 10.4 to 17.3. The dark and pale strip are a matched
   pair at the same height, so their opposing weights leave the vertical profile
   where it was and only the fine contrast changes. */
.field-shape--pair-d { width: 10vw; height: 52vh; left: 60vw; top: -6vh;
  filter: blur(6px);
  background: radial-gradient(ellipse closest-side, rgba(92, 184, 224, 0.88) 0%, rgba(92, 184, 224, 0.88) 40%, rgba(92, 184, 224, 0.38) 74%, rgba(92, 184, 224, 0) 100%);
  animation-name: field-deepen; animation-delay: -1.1s; }
.field-shape--pair-p { width: 10vw; height: 52vh; left: 76vw; top: -6vh;
  filter: blur(6px);
  background: radial-gradient(ellipse closest-side, rgba(238, 248, 255, 0.92) 0%, rgba(238, 248, 255, 0.92) 40%, rgba(238, 248, 255, 0.40) 74%, rgba(238, 248, 255, 0) 100%);
  animation-name: field-lift; animation-delay: -1.1s; }
.field-shape--midlift { width: 84vw; height: 46vh; left: -10vw; top: 19vh;
  filter: blur(18px);
  background: radial-gradient(ellipse closest-side, rgba(244, 251, 255, 0.64) 0%, rgba(244, 251, 255, 0.64) 42%, rgba(244, 251, 255, 0.26) 74%, rgba(244, 251, 255, 0) 100%);
  animation-name: field-lift; animation-delay: -2.0s; }
.field-shape--rightpush { width: 40vw; height: 90vh; left: 78vw; top: 30vh;
  filter: blur(90px);
  background: radial-gradient(ellipse closest-side, rgba(238, 248, 255, 0.34) 0%, rgba(238, 248, 255, 0.34) 40%, rgba(238, 248, 255, 0.14) 74%, rgba(238, 248, 255, 0) 100%);
  animation-name: field-hold; animation-delay: -3.1s; }

/* The excursion shape: in place, asymmetric, peaking at a third of the cycle. */
@keyframes field-deepen {
  0%   { opacity: 1; }
  33%  { opacity: 1.16; }
  80%  { opacity: 0.98; }
  100% { opacity: 1; }
}
@keyframes field-lift {
  0%   { opacity: 1; }
  33%  { opacity: 0.84; }
  80%  { opacity: 1.01; }
  100% { opacity: 1; }
}
/* The shapes that only hold the composition. They carry a shallow counter movement so
   the whole field is one loop rather than a moving layer over a frozen one. */
@keyframes field-hold {
  0%   { opacity: 1; }
  33%  { opacity: 1.05; }
  80%  { opacity: 0.99; }
  100% { opacity: 1; }
}
.hero-field[data-paused] .field-shape,
.hero-field[data-paused]::after { animation-play-state: paused; }

/* Reduced motion: the field keeps its gradients and takes no animation, so it is the
   field at rest, and the control is removed, as bcg.com removes its film control when
   there is no film. site.js does not wire the control under this query either. */
@media (prefers-reduced-motion: reduce) {
  .hero-field .field-shape,
  .hero-field::after { animation-name: none; }
  .hero-toggle { display: none; }
}

.hero-heading {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: normal;
  row-gap: 32px;
  margin: 0 var(--page-margin);
}
.hero-heading > * { grid-column: 1 / -1; }
.hero-heading .eyebrow { align-self: end; }
/* The hero declares black-on-white in the markup, as bcg.com's hero does, so the h1
   and the eyebrow take --blue-800 from the scheme, the one value every h2 on the
   page uses. No per-hero colour override. */
@media (min-width: 1024px) {
  .hero-heading { row-gap: 48px; }
  .hero-heading > * { grid-column: 1 / span 10; }
}
@media (min-width: 1440px) {
  .hero-heading { width: var(--max-content-width); margin: 0 auto; }
}

/* --------------------------------------------------------------- bands */
.band { padding: var(--section-pad-y) var(--page-margin); }
.band--list25 { padding-bottom: 0; }
.band--promo13 { padding: 0; }
.band--subscribe { padding: 0; }
.band-inner { max-width: var(--max-content-width); margin: 0 auto; }

/* ------------------------------------------------------------ 6.2 chips */
.band--chips { display: flex; justify-content: center; }
.chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  padding: 24px;
  text-align: left;
  border-radius: var(--radius-20);
  overflow: clip;
  box-shadow: var(--box-shadow);
  background: transparent;
}
.chips-label { font-size: 14px; line-height: 100%; font-weight: 400; color: var(--blue-700); }
.chips-items { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.chips-items .link { font-size: 16px; font-weight: 700; line-height: 100%; }
@media (min-width: 768px) {
  .chips { flex-direction: row; align-items: center; gap: 30px; }
  .chips-items { gap: 30px; }
}
@media (min-width: 1024px) {
  .chips { gap: 40px; }
  .chips-items { gap: 40px; }
}

/* ------------------------------------------- 6.3 module header + carousel */
.module-header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 16px;
  row-gap: 24px;
  max-width: var(--max-content-width);
  margin: 0 auto 40px;
}
.module-header h2 { grid-column: 1 / -1; }
.module-header .description { grid-column: 1 / -1; }
.module-header-link { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 1024px) {
  .module-header { column-gap: 24px; row-gap: 32px; margin-bottom: 68px; }
  /* 954 px measured = 9 columns of 84.664 plus 8 gaps of 24 */
  .module-header h2 { grid-column: 1 / span 9; }
  .module-header .description { grid-column: 1 / span 9; grid-row: 2; }
  .module-header-link { grid-column: 11 / span 2; grid-row: 2; justify-self: end; align-self: end; }
}

/* 5.6 carousel: scroll-snap track standing in for the drag plugin */
.carousel {
  position: relative;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 0 60px;
  outline-offset: 4px;
}
.carousel-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.carousel-viewport::-webkit-scrollbar { display: none; }
.carousel-viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.carousel-viewport.is-dragging .cell { pointer-events: none; }
.carousel-slider { display: flex; align-items: flex-start; }
.cell {
  position: relative;
  flex: 0 0 auto;
  width: calc(100vw - 2 * var(--page-margin));
  height: 405px;
  margin: 0 24px 0 0;
  border-radius: var(--radius-20);
  overflow: hidden;
  scroll-snap-align: start;
}
.cell:last-child { margin-right: 0; }
@media (min-width: 768px) {
  .cell { width: 302px; height: 403px; }
  .cell--wide { width: 616px; height: 405px; }
}
.cell-media { position: absolute; inset: 0; background-image: none; }
.cell-media img { width: 100%; height: 100%; object-fit: cover; }
.cell-stat {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: var(--radius-15);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--box-shadow);
  color: var(--blue-700);
}
.cell-stat b { font-family: var(--serif); font-weight: 300; font-size: 28px; line-height: 100%; }
.cell-stat small { font-family: var(--mono); font-size: 10px; line-height: 100%; letter-spacing: 0.06em; text-transform: uppercase; }
.cell-panel {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: var(--radius-20);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--box-shadow);
  color: var(--ink);
}
.cell-panel h3 { font-size: 24px; line-height: 120%; }
.cell-panel .description { font-size: 16px; line-height: 130%; }
.cell-panel .pill { align-self: flex-start; }
@media (min-width: 768px) {
  .cell--wide .cell-panel { left: 50%; top: 16px; }
  .cell--wide .cell-panel h3 { font-size: 32px; }
}
.carousel-dots {
  position: absolute;
  bottom: 20px; right: 0;
  display: flex;
  justify-content: flex-end;
  height: 20px;
}
.carousel-dot {
  --dot-color: var(--blue-200);
  flex-shrink: 0;
  width: 20px; height: 20px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-70);
  background-color: var(--dot-color);
  background-clip: content-box;
  opacity: 1;
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
}
.carousel-dot.is-selected { --dot-color: var(--blue-700); border-color: var(--blue-700); }
.carousel-dots li { display: block; }

/* ------------------------------------------------------- 6.4 dark promo */
.promo2 {
  max-width: var(--max-content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  row-gap: 24px;
  padding: 32px;
  border-radius: var(--radius-25);
}
.promo2 h2 { grid-column: 1 / -1; padding-right: 0; color: var(--white); }
.promo2-aside { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
@media (min-width: 1024px) {
  .promo2 { column-gap: 40px; min-height: 238px; }
  .promo2 h2 { grid-column: 1 / span 6; padding-right: 50px; }
  .promo2-aside { grid-column: 7 / span 6; justify-content: space-between; }
}

/* ------------------------------------------------ 6.5 pale promo + media */
.promo-layout {
  max-width: var(--max-content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 16px;
  row-gap: 32px;
}
.promo26-content { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; }
.promo26-content .eyebrow { margin-bottom: 24px; }
.promo26-title { margin-bottom: 24px; }
.promo26-content .description { margin-bottom: 24px; }
.attribution { margin-bottom: 32px; }
.promo26-media { grid-column: 1 / -1; border-radius: var(--radius-20); overflow: hidden; }
.promo26-media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .promo-layout { column-gap: 40px; }
  .promo26-content { grid-column: 1 / span 5; }
  .promo26-media { grid-column: 6 / span 7; align-self: start; }
}
@media (min-width: 1440px) {
  .promo26-title { font-size: 56px; }
  .promo26-media { height: 413px; }
  /* text block matches the media height; the pill sits on the media's bottom edge */
  .promo26-content { min-height: 413px; }
  .promo26-content .pill { margin-top: auto; }
  .promo26-content .eyebrow { margin-bottom: 24px; }
  .promo26-title { margin-bottom: 24px; }
  .promo26-content .description { margin-bottom: 28px; }
  .attribution { margin-bottom: 36px; }
}

/* --------------------------------------------------- 6.6 mixed card grid */
.list-items {
  max-width: var(--max-content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 16px;
  row-gap: 16px;
}
.card {
  position: relative;
  grid-column: 1 / -1;
  overflow: hidden;
  border-radius: var(--radius-20);
  padding: 40px;
  min-height: 244px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.card--tall { min-height: 346px; }
.card--b { min-height: 296px; }
.card-media { position: absolute; inset: 0; background-image: none; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media::after {
  /* legibility scrim for white text on a photograph; not on the measured page */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21, 22, 58, 0.05) 30%, rgba(21, 22, 58, 0.78) 100%);
}
.card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.card-title { color: var(--white); font-family: var(--serif); line-height: 100%; }
.card-title .link { --textColor: var(--white); }
.card--solid::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(143, 147, 196, 0.35), rgba(32, 34, 84, 0) 60%);
}
@media (min-width: 768px) {
  .card--tall { grid-column: 1 / span 6; grid-row: span 2; min-height: 556px; }
  .card--b, .card--c { grid-column: 7 / span 6; }
  .card--b { min-height: 296px; }
  .card--c { min-height: 244px; }
  .card-title { font-size: 38px; }
}
@media (min-width: 1440px) {
  .card-title { font-size: 52px; }
}

/* ------------------------------------------------------ 6.7 centred */
.centred {
  max-width: var(--max-content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
}
.centred-col {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.centred-col .eyebrow { margin-bottom: 0; }
.centred-col h2 { margin-bottom: 8px; }
.centred-col .description { margin-bottom: 8px; }
@media (min-width: 1024px) {
  .centred-col { grid-column: 3 / span 8; }
}
@media (min-width: 1440px) {
  .centred { min-height: 411px; }
  .centred-col { gap: 32px; }
}

/* ------------------------------------------------------- 6.8 split promo */
.promo13 { display: grid; grid-template-columns: 1fr; }
.promo13-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--section-pad-y) var(--page-margin);
}
.promo13-content .eyebrow { margin-bottom: 16px; }
.promo13-content h3 { margin-bottom: 24px; }
.promo13-content .body { margin-bottom: 40px; }
.button-row { display: flex; flex-wrap: wrap; gap: 16px; }
.promo13-media { display: block; min-height: 260px; background-image: none; }
.promo13-media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .promo13 { grid-template-columns: 7fr 5fr; }
  .promo13-content { padding: var(--page-margin); justify-content: center; }
  .promo13-media { min-height: 0; }
}
@media (min-width: 1440px) {
  .promo13 { grid-template-columns: 840px 1fr; }
  .promo13-content { padding: 80px; }
}

/* ---------------------------------------------------- 6.9 newsletter band */
.subscribe {
  max-width: calc(var(--max-content-width) + 2 * var(--page-margin));
  margin: 0 auto;
  padding: var(--section-pad-y) var(--page-margin);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.subscribe-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.subscribe-eyebrow { font-size: 22px; line-height: 120%; font-weight: 300; }
.subscribe-form {
  padding: 24px;
  border-radius: var(--radius-25);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--box-shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.subscribe-label { font-size: 22px; line-height: 120%; font-weight: 300; }
/* Status line for the two forms that post to the container's API
   (/api/newsletter and /api/assessment-interest). */
.form-note { margin: 0; font-size: 15px; line-height: 150%; }
.subscribe-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.subscribe-fields input {
  flex: 1 1 200px;
  min-width: 0;
  height: 54px;
  padding: 0 24px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-15);
  background: var(--white);
  font: 400 16px/100% var(--sans);
  color: var(--fg);
}
.subscribe-fields input::placeholder { color: var(--heading); opacity: 1; }
.subscribe-fields input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (min-width: 768px) {
  /* Stack the label above the fields until the form can comfortably hold both. */
  .subscribe-form { padding: 32px 40px; }
  .subscribe-label { flex: 1 1 auto; }
  .subscribe-fields { flex: 0 0 auto; flex-wrap: nowrap; }
  .subscribe-fields input { flex: 0 0 300px; }
}
@media (min-width: 1024px) {
  .subscribe-form {
    padding: 40px 56px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .subscribe-eyebrow, .subscribe-label { font-size: 28px; }
}
@media (min-width: 1440px) {
  /* Keep the desktop rhythm, with the form in flow so wrapped text adds height. */
  .subscribe { padding-block: 40px 80px; gap: 10px; }
  .subscribe-form { min-height: 134px; }
}

/* -------------------------------------------------------------- 6.10 footer */
.site-footer {
  position: relative;
  padding: var(--section-pad-y) 0;
}
/* The curve notches: 30 x 30 inverse-radius fills in the footer ground, sitting
   30 px above the footer's top edge, painted over the navy band. */
.footer-curve {
  position: absolute;
  top: -30px;
  width: 30px; height: 30px;
  fill: var(--paper);
  z-index: 1;
  pointer-events: none;
}
.footer-curve--left { left: 0; }
.footer-curve--right { right: 0; }

.footer-promo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 0 var(--page-margin);
  margin-bottom: 56px;
}
.footer-statement { font-size: 24px; line-height: 120%; font-weight: 300; color: var(--blue-700); }
.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}
.footer-links li { height: 53px; }
.footer-links a { display: inline-block; font-size: 20px; line-height: 120%; font-weight: 300; }
.footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-ask { font-size: 24px; line-height: 120%; font-weight: 400; color: var(--blue-700); }
@media (min-width: 1024px) {
  .footer-promo { grid-template-columns: 308px 1fr 308px; column-gap: 64px; margin-bottom: 72px; }
  .footer-statement { font-size: 32px; }
  .footer-links a { font-size: 24px; }
  .footer-ask { font-size: 28px; }
}
@media (min-width: 1440px) {
  .footer-promo { column-gap: 124px; min-height: 215px; margin-bottom: 96px; }
  /* measured 92 px columns would wrap our longer link labels; see README */
  .footer-links { grid-template-columns: repeat(2, max-content); column-gap: 40px; }
}

.footer-content { padding: 0 var(--page-margin); }
.footer-lens {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  font-size: 12px;
  line-height: 140%;
  color: var(--blue-700);
}
.footer-lens-sep { color: var(--muted); }
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  padding: 32px 0;
}
.footer-home { display: block; flex: 0 0 auto; }
.footer-home img { height: 40px; width: auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 16px 24px; flex: 1 1 auto; }
.footer-nav a { font-size: 12px; }
.footer-social { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-left: auto; }
.footer-social .eyebrow { font-size: 12px; margin-right: 8px; }
.iconbtn {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-10);
  background: var(--white);
  color: var(--blue-700);
  background-image: none;
  box-shadow: var(--box-shadow);
  transition: background 0.5s var(--ease-house);
}
.iconbtn:hover { background: var(--blue-100); }
.iconbtn .ico { width: 18px; height: 18px; }
.footer-legal { display: flex; flex-direction: column; gap: 12px; font-size: 12px; line-height: 140%; margin-bottom: 24px; }
.footer-copyright { font-size: 12px; line-height: 140%; }
@media (min-width: 1024px) {
  .footer-row { min-height: 123px; padding: 0; gap: 40px; }
  .footer-nav { justify-content: center; }
}

/* ---------------------------------------------------- 17 second answer loop */
/* The figure keeps its measured geometry. Only this inner stage is new. */
.answer-loop {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  overflow: hidden;
  isolation: isolate;
  background: var(--blue-100);
  color: var(--ink);
}
.answer-field { position: absolute; inset: 0; overflow: hidden; }
.answer-field::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background: repeating-linear-gradient(17deg, var(--blue-900) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(103deg, var(--paper) 0 1px, transparent 1px 4px);
}
.answer-sphere {
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 27%, var(--paper), var(--blue-100) 24%, var(--blue-200) 58%, var(--blue-300) 82%, var(--blue-500));
  box-shadow: 10px 16px 28px color-mix(in srgb, var(--blue-700) 12%, transparent);
  filter: blur(1px);
}
.answer-sphere:nth-child(1) { left: -18%; top: -62%; }
.answer-sphere:nth-child(2) { left: 32%; top: -56%; width: 68%; }
.answer-sphere:nth-child(3) { left: 70%; top: 12%; width: 52%; }
.answer-sphere:nth-child(4) { left: 16%; top: 48%; width: 65%; }
.answer-sphere:nth-child(5) { left: -26%; top: 30%; width: 64%; }
.answer-badge {
  position: absolute;
  left: calc(50% - 30px);
  top: calc(50% - 30px);
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--paper);
  color: var(--blue-700);
  box-shadow: var(--box-shadow);
  opacity: 0;
}
.answer-badge svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.answer-question {
  position: absolute;
  inset: 39% 6% auto;
  min-height: 22%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border-radius: 12px;
  background: var(--glass);
  color: var(--blue-700);
  font-size: 20px;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
}
.answer-question-text { display: block; }
.answer-card {
  position: absolute;
  inset: 13% 15%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  opacity: 0;
}
.answer-card:first-child { opacity: 1; }
.answer-eyebrow {
  padding: 5px 8px;
  border: 1px solid var(--muted);
  border-radius: var(--radius-5);
  font: 700 10px/1 var(--mono);
  text-transform: uppercase;
  color: var(--eyebrow);
}
.answer-card h3 { font: 300 28px/1.1 var(--serif); color: var(--ink); }
.promo26-media .answer-card img { width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; min-height: 0; }
.answer-card p { font-size: 14px; line-height: 1.4; }
.answer-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--blue-700);
}
.answer-controls[hidden] { display: none; }
.answer-progress { width: 3ch; font: 10px/1 var(--mono); text-align: right; }
.answer-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 5px;
  padding: 0;
  /* The measured player control is the one neutral outside the house ramp. */
  background: #F2F2F2;
  color: var(--blue-900);
  cursor: pointer;
}
.answer-toggle svg { width: 18px; height: 18px; }
.answer-pause { fill: none; stroke: currentColor; stroke-width: 3; }
.answer-play { fill: currentColor; }
.answer-toggle[aria-pressed="true"] .answer-pause,
.answer-toggle[aria-pressed="false"] .answer-play { display: none; }
@container (max-width: 600px) {
  .answer-card { inset: 9% 12%; padding: 16px; gap: 8px; }
  .answer-card h3 { font-size: 24px; }
  .answer-card p { font-size: 12px; }
  .answer-question { font-size: 17px; padding: 12px 16px; }
}
@container (max-width: 400px) {
  .answer-card { inset: 5% 12% 5% 4%; padding: 10px; gap: 5px; }
  .answer-card h3 { font-size: 18px; }
  .answer-card p { font-size: 11px; line-height: 1.3; }
  .answer-eyebrow { font-size: 9px; padding: 4px 6px; }
  .answer-question { inset-inline: 4%; font-size: 15px; }
  .answer-controls { right: 4px; bottom: 4px; flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .answer-loop .answer-controls { display: none; }
  .answer-loop .answer-question, .answer-loop .answer-badge,
  .answer-loop .answer-card { opacity: 0 !important; }
  .answer-loop .answer-card:first-child { opacity: 1 !important; }
  .answer-loop .answer-sphere { transform: none !important; }
}

/* ================================================================ 7. imagery
   The bands added on 7 October 2026 to lift the page to BCG's photographic
   density. They reuse the measured band, module header, card and carousel
   grammar above and add nothing new to it: a tile grid, a two up card row, a
   wide photograph over the centred module, a places band, and the register
   strip that now separates the two wide photographs which used to touch.

   Every photograph is served as WebP with the JPEG as the fallback, so
   <picture> is in the layout and has to be transparent to it. */
picture { display: contents; }

/* ------------------------------------------------- 7.1 publications tiles */
/* Six photographs on the pale ground, a mono eyebrow and a serif title under
   each. The tiles band reuses .module-header, so its header lines up with the
   carousel header exactly. */
.tiles {
  max-width: var(--max-content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 16px;
}
.tile { display: flex; flex-direction: column; gap: 16px; }
.tile-media {
  display: block;
  background-image: none;
  border-radius: var(--radius-20);
  overflow: hidden;
  aspect-ratio: 832 / 600;
}
.tile-media img { width: 100%; height: 100%; object-fit: cover; }
.tile-body { display: flex; flex-direction: column; gap: 8px; }
.tile-title { font-family: var(--serif); font-size: 24px; line-height: 110%; font-weight: var(--font-weight-headings); }
@media (min-width: 768px) {
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 48px 16px; }
  .tile-title { font-size: 26px; }
}
@media (min-width: 1024px) {
  .tiles { grid-template-columns: repeat(3, 1fr); gap: 56px 16px; }
  .tile-title { font-size: 28px; }
}

/* ------------------------------------------------------ 7.2 two up promo */
/* Two photograph cards side by side, each the same construction as the cards
   in band 7: photograph, navy scrim, white text over the bottom edge. */
.duo {
  max-width: var(--max-content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.card--duo { min-height: 300px; grid-column: auto; }
@media (min-width: 768px) {
  .duo { grid-template-columns: repeat(2, 1fr); }
  .card--duo { min-height: 380px; }
}
@media (min-width: 1440px) {
  .card--duo { min-height: 420px; }
}

/* --------------------------------------------- 7.3 centred module media */
/* The wide photograph sits above the centred column and spans the full
   container, so the band reads as a plate then a statement. */
.centred-media {
  grid-column: 1 / -1;
  display: block;
  background-image: none;
  border-radius: var(--radius-20);
  overflow: hidden;
  aspect-ratio: 2560 / 860;
  margin-bottom: 8px;
}
.centred-media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1440px) {
  .centred-media { margin-bottom: 40px; }
}

/* --------------------------------------------------------- 7.4 places */
/* Photograph left, copy right, then a three tile strip of the region. */
.places {
  max-width: var(--max-content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.places-media {
  display: block;
  background-image: none;
  border-radius: var(--radius-20);
  overflow: hidden;
  aspect-ratio: 1264 / 920;
}
.places-media img { width: 100%; height: 100%; object-fit: cover; }
.places-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.places-content h2 { margin-bottom: 0; }
.places-content .description { margin-bottom: 8px; }
.places-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.places-tile {
  display: block;
  border-radius: var(--radius-20);
  overflow: hidden;
  aspect-ratio: 832 / 520;
}
.places-tile img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .places { grid-template-columns: repeat(12, 1fr); gap: 40px 16px; }
  .places-media { grid-column: 1 / span 6; }
  .places-content { grid-column: 7 / span 6; }
  .places-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .places { gap: 56px 40px; }
  .places-media { aspect-ratio: 1264 / 920; }
}

/* ------------------------------------------------------- 7.5 register */
/* A three column strip: eyebrow and title, the body, the link. It gives the
   page a breath between the split promo's photograph and the newsletter
   band's, which previously met on one hard horizontal line. */
.register {
  max-width: var(--max-content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.register-lead { display: flex; flex-direction: column; gap: 12px; }
.register h2 { font-size: 32px; }
.register .link--micro { justify-self: start; }
@media (min-width: 1024px) {
  .register { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
  .register-lead { grid-column: 1 / span 5; }
  .register .description { grid-column: 6 / span 4; }
  .register .link--micro { grid-column: 11 / span 2; justify-self: end; }
  .register h2 { font-size: 44px; }
}

/* --------------------------------------------- 7.6 newsletter band media */
/* Restored here: the band carries a photograph again, now that the register
   strip above it supplies the separation the earlier photo clash was missing.
   In flow below 1440, so nothing can overlap at any width; at 1440 and above
   the photograph takes the right 708 px and the copy and form hold the left. */
.subscribe { position: relative; }
.subscribe-media {
  border-radius: var(--radius-20);
  overflow: hidden;
  aspect-ratio: 1416 / 996;
  max-height: 380px;
}
.subscribe-media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  /* Photograph on the right, copy and form on the left, no overlap at any
     width. 42 per cent of the band content until 1440, then the measured 708. */
  .subscribe {
    min-height: 420px;
    justify-content: space-between;
    padding-right: calc(42% + var(--page-margin) + 24px);
  }
  .subscribe-media {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 42%;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .subscribe-form {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 28px 32px;
  }
  .subscribe-fields { flex-wrap: wrap; }
  .subscribe-fields input { flex: 1 1 180px; }
}
@media (min-width: 1440px) {
  .subscribe { min-height: 498px; padding-right: calc(708px + var(--page-margin) + 24px); }
  .subscribe-media { width: 708px; }
}

/* ---------------------------------------------------------- footer sitemap */
/* The live site's footer carries a four column sitemap. The redesign keeps it,
   because the rule for round 2 is that no live page loses its way in. Added by
   the integrator; tokens only. */
.footer-sitemap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px 32px;
  padding: 32px 0;
  border-top: 1px solid var(--gray-300);
  border-bottom: 1px solid var(--gray-300);
}
.footer-sitemap h3 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin: 0 0 12px;
}
.footer-sitemap ul { list-style: none; margin: 0; padding: 0; }
.footer-sitemap li { margin-bottom: 8px; }
.footer-sitemap a { font-size: 14px; line-height: 140%; }
@media (min-width: 768px) {
  .footer-sitemap { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer-sitemap { grid-template-columns: repeat(4, 1fr); }
}