/* ══════════════════════════════════════════════════════════════
   YCSF 2026 — section styles.
   Every number is measured from the artboard (1 pt = 1 CSS px).
   Sections appear here in page order.
   ══════════════════════════════════════════════════════════════ */

/* ── reveal-on-scroll (subtle; off with ?flat) ────────────────
   Scoped to .js so the page is fully readable without JavaScript. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
[data-reveal].is-in,
.is-flat [data-reveal] { opacity: 1; transform: none; }


/* ══ PATRONAGE (artboard 850 → 1345) ═══════════════════════════ */

.pat { padding-top: var(--s-section); }
/* no heading above the card any more, so the section's own top padding is
   the whole gap — --s-head here would double it */
.pat__stage { margin-top: 0; }

.pat-card {
  position: relative;
  /* the artboard insets the card to 82.5 % of the column (891.5 of 1080);
     holding that proportion keeps it in the page's grid at every width —
     a fixed px cap left it stranded mid-column on wide screens */
  width: 82.5%;
  aspect-ratio: 891.5 / 255;
  min-height: 255px;
  margin-inline: auto;
  --chamfer: polygon(0 0, calc(100% - 20.4px) 0, 100% 20.4px, 100% 100%, 20.4px 100%, 0 calc(100% - 20.45px));
}
.pat-card__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 2;
}
.pat-card__glow {
  position: absolute;
  inset: 0;
  clip-path: var(--chamfer);
  background: radial-gradient(ellipse 337.09px 266.24px at 576.59px 282.11px,
              rgba(26, 107, 60, 1) 0%, rgba(26, 107, 60, 0) 100%);
  z-index: 1;
}
/* The card now holds the "Under the Umbrella of" slide: a lead line, the
   three ministry marks and a closing paragraph, centred in the frame. The
   portrait-era rules below are left in place — .pat-card__portrait,
   __pcrop and __copy — so the previous layout can be restored by markup
   alone; nothing selects them now. */
.pat-card__inner {
  position: relative;
  z-index: 3;
  display: grid;
  /* minmax(0, 1fr), not the default auto track: the lockup asks for
     max-content, an auto track grows to give it, and its max-width: 100%
     then resolves against that grown track — so it never capped and the
     lead ran 160px past the card on a phone. A bounded track breaks the
     circle and the line wraps instead. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  gap: clamp(16px, 2.2%, 30px);
  padding: clamp(26px, 4%, 46px) clamp(22px, 5%, 76px);
  text-align: center;
}
/* The lead line and the marks are one lockup: the wrapper takes the width of
   its widest child — the lead, on one line — and the marks then stretch to
   that width and space themselves apart. So the first mark starts under the
   lead's first word and the last ends under its last, in whichever language,
   without a hard-coded width that would only ever suit English. */
.pat-lockup {
  width: max-content;
  max-width: 100%;
  display: grid;
  gap: clamp(16px, 2.2%, 30px);
  justify-items: center;
}

.pat-card__inner .pat-lead {
  margin: 0;
  /* a step up from the --t-lede ramp and set in semibold: this line is the
     card's title now that the section heading is gone. Scaled off the token
     rather than given a fixed clamp, so the Arabic and Chinese sheets — which
     move --t-lede for their own scripts — stay in proportion. */
  font-size: calc(var(--t-lede) * 1.22);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
/* Even GAPS, not even columns. Three equal columns put each mark on an even
   centre, but the marks measure 192, 169 and 106 wide, so the air between
   them came out 73px then 116px and the group's optical centre sat left of
   the card's. One flex row with a fixed gap spaces the artwork itself
   evenly and centres the run; the rule sits at the gap's midpoint, so the
   air either side of it matches. */
.pat-marks {
  --gap: clamp(24px, 4.6vw, 68px);
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  /* one mark now — the deck dropped Investment and Industry — so the row
     centres instead of stretching to the lead line the way three did */
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  /* stretch, not center: each rule is a share of its own item's height, and
     the items are as tall as their artwork — 48px for Industry against
     106px for Energy — so the two rules came out different lengths. Stretched
     items are all the row's height, so both rules measure the same. */
  gap: var(--gap);      /* the floor when the lockup is narrower than the run */
  width: 100%;
  max-width: 100%;
}
.pat-marks li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The rules are flex items, not pseudo-elements hung off the marks. With
   justify-content: space-between the row hands out its spare space between
   items, so a five-item run puts an equal gap either side of every rule —
   which is what centres them. A pseudo-element could only be offset from
   its mark by the `gap` value, and `gap` is just the floor here: the real
   air between marks is whatever space-between distributed, so the rule sat
   34px from one neighbour and 100px from the other. */
.pat-sep {
  flex: 0 0 1px;
  align-self: center;
  height: 68%;
  background: rgba(255, 255, 255, .30);   /* the sponsor rail's weight */
}
/* Sized so the three WORDMARKS come out the same, not the three boxes.
   Investment and Industry are horizontal lockups; Energy is stacked — its
   emblem sits above its name, so matching it on box height shrank its type
   to a quarter of the others'. It takes roughly double the height instead. */
.pat-mark { display: block; width: auto; }
.pat-mark--1 { height: clamp(37px, 3.80vw, 55px); width: clamp(129px, 13.34vw, 193px); }
.pat-mark--2 { height: clamp(32px, 3.34vw, 48px); }
/* The Energy file carried 73px of transparent padding either side of its
   artwork, so its BOX reached the lead's last word while its ink stopped
   short. assets/img/pat-energy.webp is the same mark trimmed to its ink;
   the height comes down in proportion (250/316) so the mark itself is
   exactly the size it was, just no longer floating inside empty space. */
.pat-mark--3 { height: clamp(56px, 5.82vw, 85px); }

/* The single lockup from "Patronage copy.pptx", on the same ground the deck
   gives it: the slide is cream, so the ORIGINAL dark artwork sits on a cream
   chip rather than being recoloured. content-box keeps the artwork at the
   size it had before the chip's padding was added. */
/* air around the logo: the inner grid's gap alone left it tight against the
   lead line and the paragraph */
.pat-marks--one { margin-block: clamp(10px, 1.8vw, 26px); }

/* the lockup sits straight on the ground — no chip — so it uses the
   cream-recoloured artwork (pat-energy-wide.webp); the deck's original is
   dark-on-cream and would vanish here */
.pat-mark--energy { height: clamp(57px, 5.94vw, 88px); width: auto; }
.pat-card__inner .pat-body {
  margin: 0;
  /* a definite width, not shrink-to-fit: as a centred grid item the box took
     its own content's measure, and Chinese — which breaks anywhere and has no
     spaces — settled 150px narrower than the English block. `ch` is no help
     either, since it is the width of a "0" in whichever font is running. */
  width: 100%;
  max-width: 850px;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-soft);
}

.pat-card__portrait {
  position: absolute;
  left: -7.15%;
  bottom: -11.52%;              /* 29.4 / 255.2 — the artboard's overhang split,
                                   so the headdress clears the heading above */
  width: 45.72%;
  height: auto;
  aspect-ratio: 407.62 / 362.08;
}

/* The artboard cuts the portrait at the card's own left border and bottom
   chamfer while letting the headdress cross the top edge. Clipping the
   wrapper — which is the card's shape, opened upwards — keeps that true at
   any card size; the old fixed-px polygon only worked at 407×362. */
.pat-card__pcrop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: -60%;
  z-index: 3;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20.4px 100%, 0 calc(100% - 20.45px));
}
.pat-card__copy {
  position: absolute;
  left: 35.6%;                              /* clears the portrait */
  top: 8.2%;
  width: 58.6%;
  max-width: 640px;
  text-align: center;
  z-index: 4;
  color: var(--ink);
}
.pat-lead {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.4;
}
.pat-name {
  margin: 19.9px 0 0;
  font-weight: 700;
  font-size: var(--t-sub);
  line-height: 1.3;
}
.pat-role {
  margin: 0;
  font-size: var(--t-micro);
  line-height: 1.35;
}
.pat-body {
  margin: 17.5px 0 0;
  font-size: var(--fs-body);
  line-height: 1.45;
}


/* ══ THE FORUM IN NUMBERS (artboard 1345 → 1600) ═══════════════ */

.nums { padding-top: var(--s-section); padding-bottom: 11.05px; }
.nums__eyebrow { margin-bottom: var(--s-tight); }

.nums__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: var(--col);
  margin-inline: auto;
}
.nums__cell {
  position: relative;
  text-align: center;
  padding-top: 29.7px;                      /* halo/divider sit above the numeral */
}
.nums__cell + .nums__cell::before {         /* 1px white divider on the interior boundaries */
  content: '';
  position: absolute;
  left: -0.5px;
  top: 25.7px;
  width: 1px;
  height: 115.8px;
  background: var(--white);
}
.nums__fig {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-numeral);
  line-height: 1.1;
}
.nums__val {
  position: relative;
  z-index: 1;                 /* above its halo */
  display: inline-block;
  /* the artboard's #1a6b3c → #b12a28 measured 2.29:1 and 2.31:1 on this
     ground — the least readable text on the page. Same hues, lifted to AA. */
  background: linear-gradient(90deg, var(--num-a) 0%, var(--num-b) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nums__glow {                 /* atmospheric halo, riding above the numeral */
  position: absolute;
  left: 50%;
  /* same 31px lift as .stat-glow, worked from this halo's own 110.16px box:
     top + 55.08 - 24 = -31  ->  top: -62.1 */
  top: -62.1px;
  transform: translateX(-50%);
  height: 110.16px;
  width: auto;
  max-width: none;
  opacity: .42;
  z-index: 0;
  pointer-events: none;
}
.nums__cell:first-child .nums__glow { height: 103.44px; }
.nums__cap {
  margin: 20.75px 0 0;
  font-weight: 600;
  font-size: var(--t-small);
  line-height: 1.25;
  color: var(--ink);
}


/* ══ ABOUT THE FORUM (artboard 1600 → 2040) ════════════════════ */

.about { padding-top: var(--s-section); text-align: center; }
.about__title {
  margin: 21.85px 0 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 1.18;
  color: var(--ink);
}
.about__body {
  max-width: min(920px, 70ch);
  margin: var(--s-tight) auto 0;
  font-size: var(--t-lede);
  line-height: 1.6;
  color: var(--ink);
}
.about__rule {
  width: 56%;
  max-width: 900px;
  height: 1px;
  border: 0;
  margin: var(--s-section) auto 0;   /* balanced: same space above as below */
  background: linear-gradient(90deg, #b12a28 0%, #f3eee2 81.5%, #f3eee2 100%);
}


/* ══ MAIN PILLARS ══════════════════════════════════════════════
   The artboard stacks four copies of one coverflow widget to show
   the four slides; this is the single widget.
   Active card 505 × 302.65, peeks = scale(.693) ± 338.25px.
   ────────────────────────────────────────────────────────────── */

.pillars {
  position: relative;
  padding-top: var(--s-section);
  /* the coverflow is driven off the column so it grows with the page */
  --pcard: calc(var(--col) * .4676);        /* 505 / 1080  */
  --ppeek: calc(var(--col) * .3132);        /* 338.25/1080 */
}

.pillars__stage {
  position: relative;
  height: calc(var(--pcard) * .5993);       /* 302.65 / 505 */
  margin-top: var(--s-head);
  touch-action: pan-y;
}

.pillar {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--pcard);
  height: 100%;
  margin-left: calc(var(--pcard) / -2);
  border-radius: calc(var(--pcard) * .0396);
  cursor: pointer;
  transition: transform .55s cubic-bezier(.4, .01, .2, 1),
              opacity .55s cubic-bezier(.4, .01, .2, 1),
              box-shadow .55s ease;
}
.pillar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  border-radius: inherit;
}
.pillar__tab {
  position: absolute;
  left: 50%;
  top: -12.85px;
  width: 88.2px;
  height: 25.7px;
  margin-left: -44.1px;
  border-radius: 12.85px;
  background: var(--red);
  z-index: 2;
  transition: background .45s ease, box-shadow .45s ease;
}

.pillar.is-centre {
  transform: none;
  opacity: 1;
  z-index: 3;
  box-shadow: 0 22px 55px var(--shadow-strong);
  cursor: default;
}
.pillar.is-centre .pillar__tab {
  background: var(--cream);
  box-shadow: 0 0 12px 2px rgba(243, 238, 226, .28);
}
.pillar.is-prev   { transform: translate(calc(var(--ppeek) * -1), -5.3px) scale(.693); opacity: .59; z-index: 1; }
.pillar.is-next   { transform: translate(var(--ppeek), -5.3px) scale(.693);  opacity: .59; z-index: 1; }
.pillar.is-hidden { transform: scale(.693); opacity: 0; z-index: 0; pointer-events: none; }

.pillars__arrow {
  position: absolute;
  top: calc(50% - 18.9px);
  width: 37.7px;
  height: 37.8px;
  color: var(--red);
  z-index: 4;
  transition: transform .25s ease, filter .25s ease;
}
.pillars__arrow--prev { left: -29.7px; }
.pillars__arrow--next { right: -29.7px; }
.pillars__arrow:hover { filter: brightness(1.25); transform: scale(1.08); }
.pillars__arrow .i { display: block; }

/* captions cross-fade with the slide */
.pillars__caps {
  position: relative;
  /* The box takes its height from whichever caption is showing — see
     .pillar-cap.is-on below. A fixed reserve sized for the TALLEST caption
     left up to 53px of dead space under the shorter ones, the one seam on
     the page that did not match the shared rhythm; measuring it from JS
     fixed that but read the height before a resize had reflowed, so the box
     came out 8px short until the next slide change. Letting CSS do it has
     neither failure mode. min-height is only the no-JS fallback, before any
     caption carries .is-on. */
  min-height: 0;
  margin-top: var(--s-head);
  text-align: center;
}
.pillar-cap {
  position: absolute;
  inset: 0 0 auto 0;                         /* top-anchored: own height = its content */
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
/* the one on screen sits in flow, so the container is exactly as tall as it
   is — the others stay absolute and cross-fade over the same space */
.pillar-cap.is-on { position: static; }
.pillar-cap.is-on { opacity: 1; pointer-events: auto; }
.pillar-cap h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-title);
  line-height: 1.2;
  color: var(--red);
  text-transform: uppercase;
}
.pillar-cap p {
  max-width: min(620px, var(--measure));
  margin: 17.62px auto 0;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink);
}

/* ambient green glows behind the pillars band */
.pillars::before,
.pillars::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 900px;
  pointer-events: none;
  z-index: -1;
}
.pillars::before {                            /* right edge, level with the carousel */
  top: -146px;
  background: radial-gradient(387px 450px at 100% 50%, rgba(26, 107, 60, .88), rgba(26, 107, 60, 0) 100%);
}
.pillars::after {                             /* left edge, at the foot of the band */
  top: 494px;
  background: radial-gradient(387px 450px at 0 50%, rgba(26, 107, 60, .88), rgba(26, 107, 60, 0) 100%);
}


/* ══ FORUM OBJECTIVES ══════════════════════════════════════════ */

.obj { padding-top: var(--s-section); }
.obj__intro {
  margin: 11.42px 0 0;
  max-width: var(--measure);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
}

/* the artboard's own column origins are 100 / 489.76 / 907.94 and the
   row pitch is a fixed 224.2 regardless of paragraph length */
.obj__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(28px, 6.8%, 88px);
  row-gap: clamp(36px, 4.4vw, 62px);
  margin-top: var(--s-head);
}

.goal { width: 100%; }
.goal__n {
  display: block;
  float: left;
  width: 87.3px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-numeral);
  line-height: 1;
  color: var(--ink);
}
.goal__t {
  width: 245px;
  margin: 2.9px 0 0 87.3px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-sub);
  line-height: 1.25;
  color: var(--ink);
}
.goal__rule {
  position: relative;
  display: block;
  clear: both;
  width: 100%;
  height: 2px;
  margin-top: 9.09px;
  background: linear-gradient(90deg, #b12a28 0%, #1a6b3c 81.1%, #1a6b3c 100%);
}
.goal__rule::before {
  content: '';
  position: absolute;
  inset: -2px 0;
  background: inherit;
  filter: blur(2px);
  opacity: .55;
}
.goal__p {
  margin: 12.43px 0 0;
  width: 100%;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
}


/* ══ INITIAL PROGRAM ═══════════════════════════════════════════ */

/* open state */


/* ══ SPECIAL HALL / LOCAL CONTENT ══════════════════════════════ */

.hall { position: relative; padding-top: var(--s-section); }
.hall::before {                                /* ambient glow behind this band */
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -595px;
  top: -95px;
  width: 1190px;
  height: 1190px;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle closest-side, rgba(26, 107, 60, .42) 0%, rgba(26, 107, 60, 0) 100%);
}
.hall__title { max-width: 100%; }
.hall__intro {
  margin: 14.42px 0 0;
  max-width: var(--measure);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
}

.hall__grid {
  display: grid;
  /* minmax(0, 1fr): a plain 1fr floors at min-content, and the longest
     caption forced 290px tracks — 870px of grid inside a 648px column at
     tablet width, which clipped the third item clean off the right edge */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* stretch, not center: a centred grid item sizes to max-content, so the
     captions pushed each item wider than its track and the third one hung
     off the right edge. The item is a centring flex column already. */
  justify-items: stretch;
  margin-top: var(--s-head);
  text-align: center;
}
.hall__item { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.hall__ring {
  position: relative;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.hall__ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ring-grad);
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(circle closest-side at 50% 50%, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
.hall__item:nth-child(1) .hall__ring { --ring-grad: linear-gradient(90deg, #1a6b3c, #375f38); }
.hall__item:nth-child(2) .hall__ring { --ring-grad: linear-gradient(90deg, #575134, #744430); }
.hall__item:nth-child(3) .hall__ring { --ring-grad: linear-gradient(90deg, #94362c, #b12a28); }
.hall__ring .i { position: relative; z-index: 1; color: var(--ink); }

.hall__cap {
  width: 290px;
  margin: 26.34px 0 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-cap);
  line-height: 1.25;
  color: var(--ink);
}

.hall__rule {
  width: 93.5%;
  height: 2px;
  margin: var(--s-block) auto 0;
  background: linear-gradient(90deg, #b12a28 0%, #1a6b3c 81.6%, #1a6b3c 100%);
}
.hall__rule::after {
  inset: -4px 0;
  background: linear-gradient(90deg, rgba(177, 42, 40, .5) 0%, rgba(26, 107, 60, .5) 81.6%);
  filter: blur(3px);
}


/* ══ EXHIBITION ZONES ══════════════════════════════════════════ */

.zones { padding-top: var(--s-section); }
.zones__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: clamp(10px, 1.1%, 18px);
  margin-top: var(--s-head);
}

.zone {
  position: relative;
  width: 100%;
  min-height: 321px;
  padding: 70px 22.4px 26px 21.7px;   /* header sits in the 70px top pad */
  /* subgrid: title, rule and body share their row heights with the other
     cards in the same row, so a 4-line title cannot push one card's rule
     and copy out of line with its neighbours */
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-content: start;
  border-radius: 10px;
}
.zone__border {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 3px;
  background: linear-gradient(90deg, var(--a), var(--b));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.zone__head {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 70px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, var(--a), var(--b));
  display: flex;
  align-items: center;
  padding-left: 21.8px;
}
.zone__head .i {
  color: var(--ink);
  flex: none;
  width: 42px;
  height: 42px;
}
.zone__head span {
  margin-left: 18.3px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-label);
  line-height: 1.2;
  color: var(--ink);
  text-transform: uppercase;
  white-space: nowrap;
}
.zone__t {
  margin: 13.1px 0 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-sub);
  line-height: 1.2;
  color: var(--ink);
  text-transform: uppercase;
}
.zone__rule {
  margin-top: 20.7px;
  height: 1px;
  background: var(--cream);
}
.zone__body {
  display: flex;
  align-items: flex-start;
  padding: 26px 0 0;          /* one constant gap under the rule on all eight */
}
.zone__body p {
  width: 100%;
  margin: 0;
  font-family: var(--f-alt);
  font-weight: 300;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink);
}


/* ══ TARGET AUDIENCE / AUDIENCE CATEGORIES ═════════════════════
   ring row Ø97, stroke 2, pitch 205.375; the stroke colour is one
   red→green gradient mapped across the whole row.
   ────────────────────────────────────────────────────────────── */

.aud { padding-top: var(--s-section); }
.aud .h-section { margin-bottom: var(--s-head); }

.aud-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
  text-align: center;
}
.aud-item { display: flex; flex-direction: column; align-items: center; }

.aud-ring {
  width: 97px;
  height: 97px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
}
.aud-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ring-grad);
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(circle closest-side at 50% 50%, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
.aud-item:nth-child(1) .aud-ring { --ring-grad: linear-gradient(90deg, #1a6b3c, #2a643a); }
.aud-item:nth-child(2) .aud-ring { --ring-grad: linear-gradient(90deg, #3c5c38, #4c5635); }
.aud-item:nth-child(3) .aud-ring { --ring-grad: linear-gradient(90deg, #5d4e33, #6e4731); }
.aud-item:nth-child(4) .aud-ring { --ring-grad: linear-gradient(90deg, #7f3f2f, #8f392c); }
.aud-item:nth-child(5) .aud-ring { --ring-grad: linear-gradient(90deg, #a1312a, #b12a28); }

.aud-ico, .aud-ring .ico, .hall__ring .ico { color: var(--ink); position: relative; z-index: 1; }

.aud-cap {
  margin: 15.21px 0 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-cap);
  line-height: 1.25;
  color: var(--ink);
  max-width: 190px;
}

.aud-rule {
  width: 93.5%;
  margin: var(--s-block) auto 0;
  background: linear-gradient(90deg, #b12a28 0%, #1a6b3c 81.7%);
}
.aud-rule::after {
  background: linear-gradient(90deg, rgba(177, 42, 40, .5) 0%, rgba(26, 107, 60, .5) 81.7%);
  inset: -4px 0;
  filter: blur(4px);
}

.aud--cat { padding-top: var(--s-section); }
.aud--cat .h-section { margin-bottom: var(--s-head); }
.aud--cat .aud-cap { margin-top: 20.24px; }
.aud--cat .aud-rule { margin-top: var(--s-block); }

.stat-num {
  position: relative;
  display: inline-block;
  margin: 20.76px 0 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-numeral);
  line-height: 1.1;
}
.stat-val {
  position: relative;
  z-index: 1;
  display: inline-block;
  background: linear-gradient(90deg, var(--num-b) 0%, var(--num-a) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Every figure on the page is a Latin numeral sitting in front of a halo
   image cut from the artboard — and the artboard set them in Conthrax. The
   Arabic and Chinese sheets repoint --f-display at Bukra and PingFang for
   their own scripts, which reshaped the digits and left the baked halo
   showing behind them as a ghost. The numerals are pinned to the face their
   artwork was drawn from, so all three editions render identically. */
.nums__fig,
.nums__val,
.stat-num,
.stat-fig,
.stat-val {
  font-family: 'Conthrax', var(--f-display);
  /* and the leading, for the same reason: css/ar.css raises body line-height
     to 1.7 for the script, which grew these line boxes and slid the halo off
     the digits. .stat-num matters most: it is the halo's positioned ancestor,
     so its 64px Arabic line box pushed the numeral 14px down inside it while
     the halo stayed put. */
  line-height: 1.1;
}

.stat-glow {                  /* atmospheric halo, riding above the numeral */
  position: absolute;
  left: 50%;
  /* Offset so the halo reads as a distinct glow ABOVE the figure rather than
     a tight bloom behind it — the client's reference. The sums: the halo box
     is 103px and the numeral's line box 48px, so the halo's centre sits at
     top + 51.5 and the numeral's at 24; top: -58.5 puts the halo 31px above
     the numeral, about 0.65 of its height. Horizontally both stay centred —
     with the plus on the right of BOTH the artwork and the live figure, the
     two line up. */
  top: -58.5px;
  width: 168px;
  height: 103px;               /* resolved up front — an unsized lazy img paints small and high while it decodes */
  max-width: none;             /* the numeral shrink-wraps; do not let img{max-width:100%} clamp the glow */
  transform: translateX(-50%);
  opacity: .42;
  z-index: 0;
  pointer-events: none;
}
.aud-item:nth-child(2) .stat-glow,
.aud-item:nth-child(3) .stat-glow { width: 165px; height: 103px; }
.aud-item:nth-child(4) .stat-glow,
.aud-item:nth-child(5) .stat-glow { width: 166px; height: 103px; }


/* ══ 2026 SPEAKERS ═════════════════════════════════════════════ */

.spk-band {
  position: relative;
  padding-top: var(--s-section);
  padding-bottom: var(--s-block);
  /* the row was frozen at the artboard's 228px card while the column grew to
     1520, so it filled only half the width. Both card and gutter now scale
     off --col, holding the artboard's 18.9% gutter at every width. */
  --spk-card: calc(var(--col) * .2111);   /* 228 / 1080 */
  --spk-gap:  calc(var(--spk-card) * .1886);
}
.spk-band::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: -11px;
  bottom: 0;
  pointer-events: none;
  z-index: -1;
  /* the artboard's glow ramps linearly up the band and falls off
     horizontally about x 617 — a linear ramp with a radial mask */
  background: linear-gradient(to bottom, rgba(26, 107, 60, 0) 44%, rgba(26, 107, 60, .58) 100%);
  -webkit-mask: radial-gradient(46% 100% at 48.2% 100%, #000 0%, #000 34%, rgba(0, 0, 0, .35) 78%, transparent 100%);
  mask: radial-gradient(46% 100% at 48.2% 100%, #000 0%, #000 34%, rgba(0, 0, 0, .35) 78%, transparent 100%);
}

.spk__stage {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: var(--s-head) auto 0;
}
.spk__viewport {
  width: min(calc(var(--spk-card) * 3 + var(--spk-gap) * 2),
             calc(100vw - 2 * var(--gutter) - 200px));
  overflow: hidden;
  /* room for the hover lift without moving the row */
  padding-block: 14px;
  margin-block: -14px;
}
.spk__track {
  display: flex;
  gap: var(--spk-gap);
  transition: transform .5s cubic-bezier(.4, .01, .2, 1);
}

.spk__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 228 / 274;
  background: linear-gradient(180deg, rgba(0, 92, 79, 0) 0%, rgba(0, 92, 79, 1) 100%);
  overflow: hidden;
  clip-path: inset(-114% 0 0 0);
}
/* the crops are expressed against the frame, so they hold at any card size */
.spk__frame img {
  position: absolute;
  width: auto;
  max-width: none;
}
.spk--1 .spk__frame img { left: -18.86%; top: -19.71%; width: 140.79%; height: auto; }
.spk--2 .spk__frame img { left: -40.79%; top: -24.09%; width: 185.53%; height: auto; }
.spk--3 .spk__frame img { left: -17.11%; top:  -8.39%; width: 132.46%; height: auto; }
/* Keyed by class rather than :nth-child — the carousel clones the run to
   loop, and position-based rules would land the wrong crop on the copies. */
.spk--4 .spk__frame img { left: -16%; top: -4%; width: 132%; height: auto; }

.spk__bar {
  display: block;
  width: calc(100% + 2px);
  height: 4px;
  margin: -2px -1px 0;
  background: linear-gradient(90deg, #b12a28 0%, #1a6b3c 80%, #1a6b3c 100%);
}
.spk__name {
  margin: 10.24px 0 0;
  font-family: var(--f-cairo);
  font-weight: 700;
  font-size: var(--t-name);
  line-height: 1.2;
  color: var(--ink-strong);
  text-transform: uppercase;
}
.spk__role {
  margin: 5.05px 0 0;
  font-family: var(--f-cairo);
  font-weight: 400;
  font-size: var(--t-sub);
  line-height: 1.3;
  color: var(--muted);
  text-transform: uppercase;
}

.spk__arrow {
  /* the artboard's thin outline ring reads as a smudge on the dark band;
     same solid treatment as the Highlighted Features arrows */
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: clamp(46px, 3.6vw, 58px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--cream);
  background: rgba(var(--scrim-photo), .82);
  border: 1.5px solid rgba(177, 42, 40, .85);
  backdrop-filter: blur(3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
  z-index: 3;
  transition: transform .3s cubic-bezier(.34, 1.3, .5, 1),
              background .3s ease, border-color .3s ease, opacity .25s ease;
}
.spk__arrow--prev { left: calc(-1 * (clamp(46px, 3.6vw, 58px) + 16px)); }
.spk__arrow--next { right: calc(-1 * (clamp(46px, 3.6vw, 58px) + 16px)); }
.spk__arrow:hover,
.spk__arrow:focus-visible {
  transform: scale(1.08);
  background: var(--red);
  border-color: var(--red);
}
.spk__arrow[disabled] { opacity: .28; cursor: default; transform: none; }
.spk__arrow .i { display: block; width: 15px; height: 18px; }

.spk__rule {
  width: 1010px;
  height: 2px;
  margin: 0 auto;
  background: linear-gradient(90deg, #b12a28 0%, #1a6b3c 80%, #1a6b3c 100%);
}
.spk__rule::after {
  inset: -4px 0;
  background: linear-gradient(90deg, rgba(177, 42, 40, .5) 0%, rgba(26, 107, 60, .5) 80%);
  filter: blur(2.5px);
}


/* ══ SPONSORS ══════════════════════════════════════════════════ */

.spons { padding-top: var(--s-section); }
/* ══ SPONSORS — one sliding row ════════════════════════════════
   All six marks run on a single rail that scrolls continuously. The set is
   duplicated in the markup and the track travels exactly -50%, so the second
   copy lands where the first began and the seam never shows. */

.spons__rail {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);      /* full-bleed, past the column */
  margin-top: var(--s-head);
  overflow: hidden;
  /* the run fades out at both edges rather than being cut off */
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.spons__track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: spons-slide 46s linear infinite;
}
.spons__rail:hover .spons__track,
.spons__rail:focus-within .spons__track { animation-play-state: paused; }

@keyframes spons-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.spons__cell {
  flex: none;
  display: grid;
  place-items: center;
  padding-inline: clamp(20px, 2.6vw, 46px);
}
.spons__cell--sep { padding-inline: 0; }

.spons__sep {
  display: block;
  width: 1px;
  height: clamp(88px, 9vw, 132px);
  background: rgba(255, 255, 255, .30);
}

/* each mark keeps its own drawn size, capped so the tallest never sets the
   rail height on its own */
.spons__logo   { display: block; object-fit: contain; }
.spons__logo--1  { color: var(--ink); width: 234px; height: 67px; }
.spons__logo--2  { width: 132px; height: 132px; }
.spons__logo--3  { width: 250px; height: 71px; }
.spons__logo--4  { width: 122px; height: 122px; }
.spons__logo--p1 { width: 126px; height: 126px; }
.spons__logo--p2 { width: 218px; height: 83px; }

@media (max-width: 599px) {
  .spons__logo--1  { width: 176px; height: 50px; }
  .spons__logo--2  { width: 96px;  height: 96px; }
  .spons__logo--3  { width: 186px; height: 53px; }
  .spons__logo--4  { width: 90px;  height: 90px; }
  .spons__logo--p1 { width: 92px;  height: 92px; }
  .spons__logo--p2 { width: 160px; height: 61px; }
  .spons__sep      { height: 72px; }
  .spons__track    { animation-duration: 34s; }
}

/* a rail that moves on its own is exactly what this setting is for */
@media (prefers-reduced-motion: reduce) {
  .spons__track { animation: none; justify-content: center; width: 100%; flex-wrap: wrap; }
  .spons__rail  { -webkit-mask: none; mask: none; }
}

.ftr { position: relative; padding-bottom: clamp(28px, 3vw, 52px); margin-top: var(--s-block); }

.ftr__rule {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, #b12a28 0%, #1a6b3b 81.25%);
  /* was 37.62px — the columns sit lower so the band under them shrinks */
  margin: 0 0 62px;
}
.ftr__rule::after {
  inset: -5px 0;
  background: linear-gradient(90deg, rgba(177, 42, 40, .45) 0%, rgba(26, 107, 59, .45) 81.25%);
  filter: blur(2.2px);
}

.ftr__cols {
  display: grid;
  /* contact | quick links | map | dates & timings — the timings hold the
     right-hand column on desktop, and being last in the DOM they also fall
     to the bottom of the stack on a phone. The last two carry equal
     fractions so the map and the table read as a matched pair. */
  /* minmax(0, fr), not bare fr: the timings' nowrap values push that
     track's min-content above its fraction, and the extra width is taken
     from the map's track — 286px vs 184px at 1100. Zero-floor tracks keep
     the last two genuinely equal. */
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .74fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  width: var(--col);
  margin-inline: auto;
  padding-bottom: clamp(8px, 1vw, 16px);
}
.ftr__col--b { position: relative; }
.ftr__col--b::before {         /* one divider now that there are two columns */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.ftr__col--b::before { left: 0; }
.ftr__col--b::after  { right: -2px; }

/* first column has no rule before it, so it sits on the page margin */
.ftr__col--a { padding-left: 0; }
.ftr__col--links { padding-left: clamp(24px, 4.5%, 46px); position: relative; }
.ftr__col--links::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--line);
}
.ftr__col--b {
  padding-left: clamp(24px, 4.5%, 46px);
  display: flex;
  flex-direction: column;
  /* the map used to close the row, so it was pushed right; with the timings
     column after it, it sits at the head of its own column instead */
  align-items: flex-start;
}
.ftr__col--b > * { width: 100%; }
.ftr__col--c { padding-left: clamp(24px, 4.5%, 46px); position: relative; }
.ftr__col--c::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--line);
}

.ftr__head {
  display: flex;
  align-items: center;
  margin: 0;
  padding-top: 38.22px;
  font-family: var(--f-alt);
  font-weight: 700;
  font-size: var(--t-sub);
  line-height: 1.8;
  color: var(--ink-strong);
  text-transform: uppercase;
  white-space: nowrap;
}
.ftr__ico { color: var(--red); }

.ftr__head--contact { margin-left: 0; }
.ftr__head--contact .ftr__ico { margin-right: 19px; }
.ftr__head--links   { margin-left: 0; }
.ftr__head--links .ftr__ico { margin-right: 17.22px; }
.ftr__col--b .ftr__ico { margin-right: 11.07px; }
.ftr__col--c .ftr__ico { margin-right: 11.42px; }

.ftr__line {
  margin: 0;
  }
.ftr__line:first-of-type { margin-top: 12px;
  font-family: var(--f-alt);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
}
.ftr__line a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.ftr__social { display: flex; gap: 20.16px; margin-top: 22.89px; }
.ftr__social a {
  display: block;
  color: var(--red);
  transition: color .25s ease, transform .25s ease;
}
.ftr__social a:hover { color: #d13a37; transform: translateY(-2px); }

.ftr__links {
  margin-top: 12px;
  font-family: var(--f-alt);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
}
.ftr__links a { transition: color .2s ease; }
.ftr__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }


.ftr__map-frame { display: block; }
.ftr__map {
  width: 100%;
  height: auto;
  aspect-ratio: 298 / 277;
  object-fit: cover;
  margin: 0;
}

/* Desktop: the map and the timings table are a matched pair — same column
   fraction, same left inset, and ONE shared fixed height. No stretching
   chains: a single value both boxes obey, sized to clear the table's
   natural height at every desktop width. */
@media (min-width: 1100px) {
  /* one shared box for the pair: --ftr-box is the height, --ftr-boxw the
     width — narrower than the column on request, and min(100%) so a tight
     viewport can never force it past its track */
  .ftr__cols {
    --ftr-box:  clamp(214px, 15vw, 282px);
    --ftr-boxw: min(100%, clamp(246px, 17.6vw, 330px));
  }
  /* scoped under the column so it outweighs the base `.ftr__table
     { width: 100% }` that sits later in the file — order alone lost twice */
  .ftr__col--c .ftr__table { height: var(--ftr-box); width: var(--ftr-boxw); }
  .ftr__map-frame {
    position: relative;
    display: block;
    width: var(--ftr-boxw);
    height: var(--ftr-box);
  }
  .ftr__map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
  }
}

.ftr__table {
  width: 100%;
  margin: 12px 0 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--f-alt);
}
.ftr__table th:nth-child(1), .ftr__table td:nth-child(1) { width: 29%; }
.ftr__table th:nth-child(2), .ftr__table td:nth-child(2),
.ftr__table th:nth-child(3), .ftr__table td:nth-child(3) { width: 35.5%; }
.ftr__table td b, .ftr__table td .lb { white-space: nowrap; }
/* The artboard split the timings into EXHIBITORS and VISITORS columns; only
   one set of times was supplied, so this variant runs Date | Timings. */
.ftr__table--two th:nth-child(1), .ftr__table--two td:nth-child(1) { width: 42%; }
.ftr__table--two th:nth-child(2), .ftr__table--two td:nth-child(2) { width: 58%; }

.ftr__table thead th {
  height: auto;
  padding: 9px 6px;
  background: var(--red);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--t-micro);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  padding: 11px 6px;
}
.ftr__table tbody td {
  height: auto;
  padding: 12px 6px;
  text-align: center;
  vertical-align: middle;
  font-weight: 300;
  font-size: var(--t-micro);
  line-height: 1.35;
  color: var(--ink);
}
.ftr__table tbody td b { font-weight: 700; }
.ftr__table tbody tr:nth-child(odd)  td { background: var(--surface); }
.ftr__table tbody tr:nth-child(even) td { background: var(--line-soft); }
.ftr__table th + th, .ftr__table td + td { border-left: 1px solid #152836; }

.ftr__bottom {
  display: grid;
  justify-items: center;
  gap: 24px;
  width: var(--col);
  margin: clamp(46px, 4.6vw, 74px) auto 0;
  padding-top: clamp(26px, 2.6vw, 40px);
  border-top: 1px solid var(--line-soft);
}
.ftr__copy {
  margin: 0;
  text-align: center;
  font-family: var(--f-alt);
  font-weight: 300;
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--ink-soft);
}



/* ══ CIRCLED ICON ROWS — entrance + hover ══════════════════════
   The rings are gradient-masked circles and the icons are masked
   shapes, so both animate cleanly with transform/filter alone —
   no layout is touched, and nothing reflows on hover.
   ────────────────────────────────────────────────────────────── */

/* the row itself no longer fades as a block; its items come in one
   after another, which reads far better on a 3-up or 5-up row */
.js [data-reveal="stagger"] { opacity: 1; transform: none; }
.js [data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .62s cubic-bezier(.22,.61,.36,1),
              transform .62s cubic-bezier(.22,.61,.36,1);
}
[data-reveal="stagger"].is-in > *,
.is-flat [data-reveal="stagger"] > * { opacity: 1; transform: none; }
[data-reveal="stagger"].is-in > *:nth-child(1) { transition-delay: .00s; }
[data-reveal="stagger"].is-in > *:nth-child(2) { transition-delay: .09s; }
[data-reveal="stagger"].is-in > *:nth-child(3) { transition-delay: .18s; }
[data-reveal="stagger"].is-in > *:nth-child(4) { transition-delay: .27s; }
[data-reveal="stagger"].is-in > *:nth-child(5) { transition-delay: .36s; }

/* ── hover / focus ─────────────────────────────────────────── */
.hall__item,
.aud-item { --glow: var(--green); }

.hall__ring,
.aud-ring {
  transition: transform .38s cubic-bezier(.34,1.4,.5,1),
              filter .38s ease;
}
.hall__ring .i,
.aud-ring .i {
  transition: transform .38s cubic-bezier(.34,1.4,.5,1);
}
.hall__cap,
.aud-cap {
  transition: color .3s ease;
}

.hall__item:hover .hall__ring,
.hall__item:focus-within .hall__ring,
.aud-item:hover .aud-ring,
.aud-item:focus-within .aud-ring {
  transform: scale(1.045);
  filter: drop-shadow(0 0 12px var(--glow));
}
.hall__item:hover .hall__ring .i,
.aud-item:hover .aud-ring .i { transform: scale(1.09); }
.hall__item:hover .hall__cap,
.aud-item:hover .aud-cap { color: #fff; }

/* each ring glows in its own slice of the row's red→green ramp */
.hall__item:nth-child(1) { --glow: #1a6b3c; }
.hall__item:nth-child(2) { --glow: #744430; }
.hall__item:nth-child(3) { --glow: #b12a28; }
.aud-item:nth-child(1) { --glow: #1a6b3c; }
.aud-item:nth-child(2) { --glow: #445836; }
.aud-item:nth-child(3) { --glow: #6e4731; }
.aud-item:nth-child(4) { --glow: #8f392c; }
.aud-item:nth-child(5) { --glow: #b12a28; }

/* the stat numerals lift a touch with their cell */
.nums__cell { transition: transform .38s cubic-bezier(.34,1.4,.5,1); }
.nums__cell:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .hall__ring, .aud-ring, .hall__ring .i, .aud-ring .i, .nums__cell { transition: none; }
  .hall__item:hover .hall__ring, .aud-item:hover .aud-ring,
  .hall__item:hover .hall__ring .i, .aud-item:hover .aud-ring .i,
  .nums__cell:hover { transform: none; }
}


/* ── zone cards: hover, and the stagger needs eight steps ─────── */
[data-reveal="stagger"].is-in > *:nth-child(6) { transition-delay: .45s; }
[data-reveal="stagger"].is-in > *:nth-child(7) { transition-delay: .54s; }
[data-reveal="stagger"].is-in > *:nth-child(8) { transition-delay: .63s; }

.zone {
  transition: transform .4s cubic-bezier(.34, 1.3, .5, 1), filter .4s ease;
}
.zone__head, .zone__border { transition: filter .4s ease; }
.zone:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 14px 26px var(--shadow));
}
.zone:hover .zone__head,
.zone:hover .zone__border { filter: brightness(1.14) saturate(1.06); }

/* ── divider rules light up as they scroll in ─────────────────── */
.rule::before,
.about__rule::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, .92) 50%,
              rgba(255, 255, 255, 0) 100%);
  background-size: 18% 100%;
  background-repeat: no-repeat;
  background-position: -20% 0;
  opacity: 0;
  pointer-events: none;
}
.about__rule { position: relative; }
.rule.is-lit::before,
.about__rule.is-lit::before {
  animation: rule-sweep 1.55s cubic-bezier(.32, .72, .35, 1) .1s forwards;
}
@keyframes rule-sweep {
  0%   { background-position: -20% 0; opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { background-position: 120% 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .zone { transition: none; }
  .zone:hover { transform: none; }
  .rule.is-lit::before, .about__rule.is-lit::before { animation: none; }
}


/* ── the six objectives rules light up in sequence, like the
      section dividers (::before already carries their blur glow,
      so the sweep rides ::after) ─────────────────────────────── */
.goal__rule::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, .95) 50%,
              rgba(255, 255, 255, 0) 100%);
  background-size: 26% 100%;
  background-repeat: no-repeat;
  background-position: -30% 0;
  opacity: 0;
  pointer-events: none;
}
[data-reveal="stagger"].is-in .goal__rule::after {
  animation: rule-sweep 1.35s cubic-bezier(.32, .72, .35, 1) forwards;
}
[data-reveal="stagger"].is-in > *:nth-child(1) .goal__rule::after { animation-delay: .30s; }
[data-reveal="stagger"].is-in > *:nth-child(2) .goal__rule::after { animation-delay: .39s; }
[data-reveal="stagger"].is-in > *:nth-child(3) .goal__rule::after { animation-delay: .48s; }
[data-reveal="stagger"].is-in > *:nth-child(4) .goal__rule::after { animation-delay: .57s; }
[data-reveal="stagger"].is-in > *:nth-child(5) .goal__rule::after { animation-delay: .66s; }
[data-reveal="stagger"].is-in > *:nth-child(6) .goal__rule::after { animation-delay: .75s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal="stagger"].is-in .goal__rule::after { animation: none; }
}


/* ── sponsor lockups: they are partners, so the hover is a lift and a
      lift in presence, nothing playful ─────────────────────────────── */
.spons__logo {
  opacity: 1;
  transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.3, .5, 1),
              filter .35s ease;
}
/* the rail pauses under the cursor, so the hovered mark lifts while the rest
   of the run dims rather than everything sliding out from under the pointer */
.spons__rail:hover .spons__logo { opacity: .5; }
.spons__rail .spons__logo:hover {
  opacity: 1;
  transform: translateY(-5px) scale(1.045);
  filter: drop-shadow(0 8px 20px var(--shadow-strong));
}

@media (prefers-reduced-motion: reduce) {
  .spons__logo { transition: opacity .2s ease; }
  .spons__rail .spons__logo:hover { transform: none; }
}


/* ── icons: light travels through the glyph on hover ───────────
   The icons are single-path masks, so there are no sub-parts to
   move. Instead the fill behind the mask becomes a gradient and
   sweeps, which animates the inside of the shape itself. */



@keyframes icon-sweep {
  from { background-position: 100% 0; }
  to   { background-position: -110% 0; }
}

/* The masked icons are painted with a flat currentColor fill. Swapping
   that for a gradient carrying one bright band, then travelling the
   band across the glyph, lights the inside of the shape — which is
   what the keyframe above was authored for but was never wired to. */
.hall__ring .i,
.aud-ring .i {
  background: linear-gradient(100deg,
              currentColor 0%, currentColor 42%,
              #ffffff 50%,
              currentColor 58%, currentColor 100%);
  background-size: 240% 100%;
  background-position: 100% 0;
}
.hall__item:hover .hall__ring .i,
.aud-item:hover .aud-ring .i {
  animation: icon-sweep 1.15s cubic-bezier(.32, .72, .35, 1) forwards;
}

/* The zone title shares a subgrid row sized by the tallest title in the
   row, so a three-line title left a line's worth of empty space between
   itself and its rule. Anchored to the bottom of its row, that space moves
   up under the coloured header where it reads as padding, and the rules
   stay aligned across the row. */
.zone__t { align-self: end; }

/* and once as the section scrolls in, in step with the rule sweep */
@keyframes icon-pop {
  0%   { transform: scale(.72); opacity: 0; }
  55%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* inline-SVG icons cannot take a background fill, so they keep the
   scale kick the home page already gives them */
.zone:hover .zone__head .ico { transform: scale(1.05); transition: transform .4s ease; }

/* the glyph also gives a small kick, offset from the ring's own scale */
.aud-item:hover .aud-ring .ico,
.hall__item:hover .hall__ring .ico {
  transform: scale(1.05);
  transition: transform .4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .aud-item:hover .aud-ring .i,
  .hall__item:hover .hall__ring .i,
  .zone:hover .zone__ico { transform: none; }
  [data-reveal="stagger"].is-in .zone__ico path { animation: none; }
}


/* ══ ICON INTERNALS ════════════════════════════════════════════
   The icons are inline SVG now, so every sub-shape inside them is
   addressable. On hover the gears turn about their own centres and
   the remaining parts lift in sequence — the elements inside the
   icon animate, not just the icon as a whole.
   ────────────────────────────────────────────────────────────── */
.ico {
  display: block;
  overflow: visible;
  color: var(--ink);
}
.aud-ring .ico { width: 56%; height: auto; }
.hall__ring .ico { width: 58%; height: auto; }
.zone__head .ico { width: 42px; height: 42px; }

.ico path {
  transform-box: view-box;
  transition: transform .55s cubic-bezier(.34, 1.35, .5, 1);
}
.ico path[data-spin] {
  transition: transform 1.1s cubic-bezier(.25, .8, .3, 1);
}

/* the one detail worth having: gears turn slowly, nothing else moves */
.aud-item:hover .ico path[data-spin],
.aud-item:focus-within .ico path[data-spin],
.hall__item:hover .ico path[data-spin],
.hall__item:focus-within .ico path[data-spin] { transform: rotate(60deg); }


@media (prefers-reduced-motion: reduce) {
  .ico path { transition: none; }
  .aud-item:hover .ico path,
  .hall__item:hover .ico path,
  .zone:hover .ico path { transform: none; }
}


/* ══ HIGHLIGHTED FEATURES ══════════════════════════════════════
   Five cards side by side that flip on hover to reveal the
   description, with prev/next arrows to slide the row.
   ────────────────────────────────────────────────────────────── */
.feats { padding-top: var(--s-section); }

.feats__stage {
  position: relative;
  margin-top: var(--s-head);
}
.feats__viewport { overflow: hidden; }

.feats__track {
  display: flex;
  gap: clamp(12px, 1.4%, 22px);
  transition: transform .55s cubic-bezier(.32, .72, .35, 1);
  will-change: transform;
}

.feat {
  flex: 0 0 calc((100% - 3 * clamp(12px, 1.4%, 22px)) / 4);
  aspect-ratio: 1 / 1.18;
  perspective: 1200px;
  cursor: pointer;
  border-radius: 12px;
}
.feat__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition-timing-function: cubic-bezier(.4, .12, .2, 1);
}
.feat:hover .feat__inner,
.feat:focus-visible .feat__inner,
.feat.is-flipped .feat__inner { transform: rotateY(180deg); }

.feat__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.feat__face--front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.feat__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(var(--scrim-photo), .94) 0%, rgba(var(--scrim-photo), .74) 26%,
              rgba(var(--scrim-photo), .12) 58%, rgba(var(--scrim-photo), 0) 100%);
}
.feat__title {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-cap);
  line-height: 1.25;
  color: var(--ink);
  text-transform: uppercase;
}
/* an acronym that carries its own casing through an all-caps run —
   "MoUs Signing" was rendering as the word MOUS */
.feat__title .cased { text-transform: none; }

.feat__face--back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: clamp(16px, 1.5vw, 26px);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(26, 107, 60, .40) 0%, rgba(26, 107, 60, 0) 62%),
    radial-gradient(120% 100% at 100% 100%, rgba(177, 42, 40, .34) 0%, rgba(177, 42, 40, 0) 62%),
    var(--bg-2);
  border-color: var(--line);
}
.feat__title--back {
  position: static;
  color: var(--ink);
  font-size: var(--t-cap);
}
.feat__face--back p {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-soft);
}

.feats__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;              /* separate property, so transform stays free for :hover scale */
  display: grid;
  place-items: center;
  width: clamp(44px, 3.4vw, 54px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(var(--scrim-photo), .82);
  border: 1.5px solid rgba(177, 42, 40, .85);
  backdrop-filter: blur(3px);
  box-shadow: 0 6px 18px var(--shadow);
  z-index: 3;
  transition: transform .3s cubic-bezier(.34, 1.3, .5, 1),
              background .3s ease, border-color .3s ease, opacity .25s ease;
}
/* fully clear of the cards, sitting in the gutter */
.feats__arrow--prev { left: calc(-1 * (clamp(44px, 3.4vw, 54px) + 14px)); }
.feats__arrow--next { right: calc(-1 * (clamp(44px, 3.4vw, 54px) + 14px)); }
.feats__arrow:hover,
.feats__arrow:focus-visible {
  transform: scale(1.08);
  background: var(--red);
  border-color: var(--red);
}
.feats__arrow:disabled { opacity: .28; cursor: default; transform: none; }
/* the extracted glyph carries its own ring — drop it, the button is the ring */
.feats__arrow .i { width: 14px; height: 17px; }

@media (prefers-reduced-motion: reduce) {
  .feat__inner, .feats__track { transition: none; }
}

/* the map is a real link now — say so */
.ftr__map-link {
  display: block;
  margin-top: 12px;
  color: var(--ink-soft);
  transition: color .3s ease, transform .35s cubic-bezier(.34, 1.25, .5, 1);
}
.ftr__map-link:hover,
.ftr__map-link:focus-visible { color: var(--ink); transform: translateY(-3px); }
.ftr__map-link:hover .ftr__map { box-shadow: 0 12px 28px var(--shadow-strong); }
.ftr__map { transition: box-shadow .35s ease; }

/* the ink variants only exist for the light theme */


/* ══ SECTION RHYTHM ════════════════════════════════════════════
   One padding value top and bottom on every section — the rhythm
   the light build established, now shared by both themes. */
.pat, .nums, .about, .obj, .feats, .zones,
.aud, .spons, .pillars, .hall, .spk-band {
  padding-top: var(--s-section);
  padding-bottom: var(--s-section);
}


/* ══ SPEAKER PORTRAITS — frame ═════════════════════════════════
   Each portrait sits in a brand-gradient frame. On hover a bright
   arc traces around that frame — a light running the perimeter,
   like a loading ring. The portrait itself is never touched.
   ────────────────────────────────────────────────────────────── */
@property --spk-spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.spk {
  width: var(--spk-card);
  flex: none;
  text-align: center;
  position: relative;
}

/* The frame is drawn on the portrait's own box. It used to sit 4px outside
   on .spk, where the carousel viewport's overflow:hidden clipped its top
   edge and the outer edges of the first and last card. */
.spk__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
  padding: 2px;
  background: linear-gradient(150deg, var(--green) 0%, #7a5a2e 52%, var(--red) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .85;
  pointer-events: none;
  z-index: 3;
}




/* the light that runs the perimeter */
.spk__frame::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 4px;
  padding: 2px;
  background: conic-gradient(from var(--spk-spin),
              rgba(255, 255, 255, 0)    0deg,
              rgba(255, 255, 255, 0)  268deg,
              rgba(255, 255, 255, .5) 310deg,
              #ffffff                 342deg,
              rgba(255, 255, 255, 0)  360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 4;
}
.spk:hover .spk__frame::after,
.spk:focus-within .spk__frame::after {
  opacity: 1;
  animation: spk-trace 1.9s linear infinite;
}
@keyframes spk-trace { to { --spk-spin: 360deg; } }

.spk:hover .spk__frame::before,
.spk:focus-within .spk__frame::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .spk:hover .spk__frame::after { animation: none; opacity: .55; }
}






/* ══ SECTION STANDFIRSTS ═══════════════════════════════════════
   Short centred blocks. `text-wrap: pretty` only tunes the last
   line, so these were breaking 654px / 125px; `balance` evens
   them. Declared here because the section rules above set
   `margin: … 0 0`, which would otherwise kill the centring. */
.obj__intro,
.hall__intro {
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
  max-width: min(62ch, 720px);
}
.about__body {
  text-wrap: balance;
}


/* ══ SPEAKERS — living background ══════════════════════════════
   Two brand-coloured auroras drift behind the portraits on a long,
   offset loop, so the band is never quite still. Hovering the row
   raises them and speeds the drift; they sit behind everything and
   never take pointer events.
   ────────────────────────────────────────────────────────────── */
.spk-band::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .92;                 /* matched to the light band, which paints the
                                   same radials as its own background */
  background-repeat: no-repeat;
  background-image:
    radial-gradient(38% 58% at 22% 38%, rgba(26, 107, 60, .95) 0%, rgba(26, 107, 60, 0) 68%),
    radial-gradient(34% 52% at 78% 62%, rgba(177, 42, 40, .78) 0%, rgba(177, 42, 40, 0) 68%),
    radial-gradient(28% 44% at 52% 20%, rgba(45, 161, 94, .55) 0%, rgba(45, 161, 94, 0) 70%);
  background-size: 160% 160%, 150% 150%, 140% 140%;
  animation: spk-aurora-a 26s ease-in-out infinite alternate,
             spk-aurora-b 34s ease-in-out infinite alternate;
  transition: opacity .8s ease;
}

@keyframes spk-aurora-a {
  from { background-position:  2% 14%, 96% 84%, 38%  2%; }
  to   { background-position: 46% 62%, 44% 26%, 72% 44%; }
}
@keyframes spk-aurora-b {
  from { background-size: 160% 160%, 150% 150%, 140% 140%; }
  to   { background-size: 190% 190%, 128% 128%, 168% 168%; }
}

/* hovering the row lifts the auroras and quickens the drift */
.spk-band:hover::after {
  opacity: .92;
  animation-duration: 13s, 17s;
}

@media (prefers-reduced-motion: reduce) {
  .spk-band::after { animation: none; opacity: .5; }
  .spk-band:hover::after { animation: none; opacity: .6; }
}


/* ══ CONTACT FORM ══════════════════════════════════════════════ */

.contact { padding-block: var(--s-section); }
.contact .eyebrow { margin-bottom: var(--s-tight); }
.contact__title { text-align: center; }
.contact__intro {
  max-width: 62ch;
  margin: var(--s-tight) auto 0;
  text-align: center;
  font-family: var(--f-alt);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: balance;
}

.contact__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  max-width: 880px;
  margin-top: var(--s-head);
}
.fld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.fld--wide { grid-column: 1 / -1; }

.fld label {
  font-family: var(--f-alt);
  font-weight: 600;
  font-size: var(--t-micro);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.req { color: var(--red); }

.fld input,
.fld select,
.fld textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-strong);
  font-family: var(--f-alt);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fld textarea { resize: vertical; min-height: 120px; }
.fld input::placeholder,
.fld textarea::placeholder { color: var(--ink-soft); }

.fld input:focus-visible,
.fld select:focus-visible,
.fld textarea:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(45, 161, 94, .22);
}
/* the invalid state is only set once a submit has been attempted, so the form
   does not scold anyone mid-typing */
.fld.is-bad input,
.fld.is-bad select,
.fld.is-bad textarea { border-color: var(--red); }
.fld__err {
  margin: 0;
  font-family: var(--f-alt);
  font-size: var(--t-micro);
  line-height: 1.4;
  color: var(--red);
}

.contact__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
.contact__btn { flex: none; cursor: pointer; border: 0; }
.contact__note {
  margin: 0;
  font-family: var(--f-alt);
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--ink-soft);
}
.contact__note.is-bad { color: var(--red); }


/* ══ LANGUAGE SWITCH ═══════════════════════════════════════════
   Shown on both editions, so it cannot live in zh.css — the English
   page never loads that file and the links came out unstyled. */
.lang {
  position: absolute;
  top: clamp(14px, 3vw, 26px);
  left: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-alt);
  font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 500;
  line-height: 1;
}
.lang a {
  color: rgba(243, 238, 226, .62);
  text-decoration: none;
  padding: 5px 9px;
  border-radius: 5px;
  border: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.lang a:hover,
.lang a:focus-visible {
  color: var(--cream);
  border-color: rgba(243, 238, 226, .3);
}
.lang a[aria-current="true"] {
  color: var(--cream);
  background: rgba(243, 238, 226, .12);
  border-color: rgba(243, 238, 226, .28);
}
.lang .div { color: rgba(243, 238, 226, .3); }

@media (max-width: 599px) {
  .lang { top: 10px; }
}

/* ══ Around Yanbu ═══════════════════════════════════════════════
   Built to the Illustrator artboard "YANBU Slide.ai" (1280 x 1316.8), a web
   design rather than a deck page: a coverflow of destination cards on a dark
   green ground. Each card is a green→red gradient panel carrying a tilted
   photo, with a cream body overlapping it from below and the button
   straddling the card's bottom edge. Colours are sampled from the artboard —
   ground #1B2A22 into #1A6038, cards #F3EEE2, titles #B12927, meta #346940.

   Geometry, in artboard units (1280 wide): card 361 = 28.2vw, centre-to-
   centre 306 = 24vw. The negative inline margin makes up the difference, so
   the neighbours tuck behind rather than sitting apart. */

.ay-band {
  --ay-red:    #b12927;
  --ay-green:  #346940;
  --ay-body:   #1b2a22;
  --ay-panel:  #f3eee2;
  --ay-w:      28.2vw;   /* 361 / 1280 on the artboard   */
  --ay-peek:   23.9vw;   /* 306 / 1280, centre to centre */

  position: relative;
  isolation: isolate;
  padding-block: var(--s-section) calc(var(--s-section) + 20px);
  background:
    radial-gradient(115% 74% at 50% 116%, #1a6b3c 0%, rgba(26, 107, 60, 0) 64%),
    #1b2a22;
  color: var(--cream);
}

/* the header is centred over the column, like every other section title */
.ay-band .wrap { text-align: center; }
.ay__h { color: var(--cream); }
.ay__lede {
  margin: 16px auto 0;
  max-width: 84ch;
  font-size: clamp(14px, 1.02vw, 17px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--cream);
}

/* ── the coverflow ──────────────────────────────────────────── */
.ay__stage {
  position: relative;
  margin-top: var(--s-head);
}
/* The artboard shows three cards — the active one with a neighbour either
   side — and it wraps, so the run never runs out. That is a positioned
   coverflow rather than a sliding rail: each card is placed by a transform
   and JS only moves the is-prev / is-centre / is-next labels around. The
   same device as Main Pillars, on this section's geometry. */
.ay__viewport {
  position: relative;
  overflow: hidden;
  padding-block: 8px 30px;
}
.ay__track { position: relative; height: 100%; }

.ay {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--ay-w);
  height: 100%;
  margin-left: calc(var(--ay-w) / -2);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: linear-gradient(100deg, #1a6b3c 0%, #7d3730 62%, #b12927 100%);
  padding: 0 0 26px;
  opacity: 1;
  transform: scale(.78);
  transition: transform .6s cubic-bezier(.4, .01, .2, 1),
              opacity .6s cubic-bezier(.4, .01, .2, 1);
  cursor: pointer;
}
.ay.is-centre {
  transform: none;
  z-index: 3;
  cursor: default;
  filter: drop-shadow(0 22px 46px rgba(8, 18, 12, .5));
}
.ay.is-prev  { transform: translateX(calc(var(--ay-peek) * -1)) scale(.78); z-index: 1; }
.ay.is-next  { transform: translateX(var(--ay-peek)) scale(.78);            z-index: 1; }
.ay.is-hidden { transform: scale(.78); opacity: 0; z-index: 0; pointer-events: none; }

/* the neighbours sit under a green veil on the artboard, which is what keeps
   the centre card reading as the one in focus */
.ay::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(27, 42, 34, .58);
  transition: opacity .6s ease;
  pointer-events: none;
  z-index: 4;
}
.ay.is-centre::after { opacity: 0; }

/* the photo, tilted, over a second copy peeking out behind it */
.ay__panel {
  position: relative;
  aspect-ratio: 361 / 250;
  margin: 26px 22px 0;
}
.ay__tab {
  position: absolute;
  left: 50%;
  top: -38px;
  width: 62px;
  height: 17px;
  margin-left: -31px;
  border-radius: 99px;
  background: var(--cream);
  z-index: 2;
}
.ay__stack { position: absolute; inset: 6% 0; }
.ay__stack::before {
  content: "";
  position: absolute;
  inset: 4% -6% 4% 12%;
  border-radius: 12px;
  background: rgba(120, 132, 180, .5);
  transform: rotate(2.4deg);
}
.ay__pic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transform: rotate(-2.6deg);
  box-shadow: 0 8px 20px rgba(8, 18, 12, .38);
  opacity: 0;
  transition: opacity .7s ease;
}
.ay__pic.is-on { opacity: 1; }

/* the cream body rides up over the gradient panel */
.ay__body {
  position: relative;
  z-index: 2;
  flex: 1;                         /* fills the stretched card */
  margin: -34px 12px 0;
  padding: 26px 20px 30px;
  border-radius: 20px;
  background: var(--ay-panel);
  color: var(--ay-body);
}

.ay__t {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(18px, 1.72vw, 27px);
  line-height: 1.15;
  color: var(--ay-red);
  border-inline-start: 3px solid var(--ay-red);
  padding-inline-start: 12px;
  padding-bottom: 4px;
}
.ay__meta {
  margin: 0;
  padding: 4px 0 2px 12px;
  border-inline-start: 3px solid var(--ay-red);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(10px, .86vw, 13px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ay-green);
}
.ay__list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.ay__list li {
  position: relative;
  padding-inline-start: 16px;
  font-size: clamp(12px, .96vw, 15px);
  line-height: 1.4;
  color: var(--ay-body);
}
.ay__list li::before {
  content: "·";
  position: absolute;
  inset-inline-start: 2px;
  top: -.15em;
  font-size: 1.5em;
  line-height: 1.2;
  color: rgba(27, 42, 34, .6);
}

/* transitions are frozen under Chrome's --virtual-time-budget, so a ?flat
   capture would photograph the track at translateX(0) — pinned left — even
   though the live page is centred. */
.is-flat .ay__track,
.is-flat .ay,
.is-flat .ay__pic { transition: none; }

/* the button straddles the card's bottom edge */
.ay__cta {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 62%;
  white-space: nowrap;
  padding: 9px 20px;
  border-radius: 8px;
  background: linear-gradient(100deg, #1a6b3c, #b12927 78%);
  color: var(--cream);
  font-size: clamp(11px, .9vw, 14px);
  font-weight: 600;
  text-decoration: none;
  transition: filter .25s ease;
}
.ay__cta:hover,
.ay__cta:focus-visible { filter: brightness(1.14); }
.ay__cta .i { background: currentColor; }

.ay__arrow {
  position: absolute;
  top: 50%;
  margin-top: -21px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ay-red);
  cursor: pointer;
  z-index: 6;
  transition: transform .25s ease, filter .25s ease;
}
.ay__arrow:hover { transform: scale(1.12); }
.ay__arrow .i { width: 34px; height: 34px; }
.ay__arrow--prev { left: -6px; }
.ay__arrow--next { right: -6px; }

.ay__dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.ay__dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(243, 238, 226, .4);
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
}
.ay__dots button.is-on { width: 20px; background: var(--cream); }

.ay__note {
  margin: 22px 0 0;
  text-align: center;
  font-size: clamp(10px, .76vw, 12px);
  color: rgba(243, 238, 226, .55);
}


/* ══ ZONE ICONS — inline vector, animated per shape ══════════════
   The eight zone glyphs were flattened into single-colour masks, so
   only the whole glyph could move. Inlined, each of their 52 shapes
   is its own <path> and can be animated separately: the parts scale
   into place one after another as the row reveals, which reads as the
   icon assembling itself. Artwork is unchanged — these are the same
   files from the artboard, drawn rather than masked. */
.zone__ico {
  width: 42px;
  height: 42px;
  flex: none;
  color: var(--ink);
  overflow: visible;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.zone__ico path {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes zone-path-in {
  from { opacity: 0; transform: scale(.5); }
  60%  { opacity: 1; transform: scale(1.08); }
  to   { opacity: 1; transform: none; }
}
[data-reveal="stagger"].is-in .zone__ico path {
  animation: zone-path-in .52s cubic-bezier(.22, .61, .36, 1) backwards;
  animation-delay: calc(var(--card-d, 0s) + var(--p) * .05s);
}
[data-reveal="stagger"].is-in > *:nth-child(1) .zone__ico { --card-d: .30s; }
[data-reveal="stagger"].is-in > *:nth-child(2) .zone__ico { --card-d: .39s; }
[data-reveal="stagger"].is-in > *:nth-child(3) .zone__ico { --card-d: .48s; }
[data-reveal="stagger"].is-in > *:nth-child(4) .zone__ico { --card-d: .57s; }
[data-reveal="stagger"].is-in > *:nth-child(5) .zone__ico { --card-d: .66s; }
[data-reveal="stagger"].is-in > *:nth-child(6) .zone__ico { --card-d: .75s; }
[data-reveal="stagger"].is-in > *:nth-child(7) .zone__ico { --card-d: .84s; }
[data-reveal="stagger"].is-in > *:nth-child(8) .zone__ico { --card-d: .93s; }

/* hover: the glyph leans, and its shapes breathe apart very slightly */
.zone:hover .zone__ico { transform: scale(1.1) rotate(-5deg); }
.zone__ico path { transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.zone:hover .zone__ico path:nth-child(odd)  { transform: scale(1.05); }
.zone:hover .zone__ico path:nth-child(even) { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .zone__ico, .zone__ico path { transition: none; }
  [data-reveal="stagger"].is-in .zone__ico path { animation: none; }
  .zone:hover .zone__ico, .zone:hover .zone__ico path { transform: none; }
}