/* =====================================================================
   Telangana Urban Innovation Summit 2026

   Palette is taken from the summit logo itself:
     indigo  #030460  Charminar + "TELANGANA / INNOVATION / SUMMIT"
     azure   #0075b1  the mark's mid blue
     cyan    #04b7d8  "URBAN" and the date pill
     sky     #a1e7f3  the Telangana map silhouette
     leaf    #3c8709  the leaf in "URBAN" (used sparingly)
   Each role below is the nearest step to a brand colour that still clears
   WCAG AA on the surface it actually sits on.

   Layout follows the Elets summit house style: light and airy, rounded
   soft-tinted cards, two-tone headings, pill CTAs, and one dark bento
   section for the city figures.

   Type: Inter only — weight and tracking carry the display hierarchy.
   ===================================================================== */

:root {
  /* ---- ink (from the logo's indigo) ---- */
  --ink: #030460;
  --text: #3d4a63;
  --muted: #5b6b84;
  --muted-2: #5f6e87;

  /* ---- base surfaces ---- */
  --paper: #ffffff;
  --wash: #f4f9fc;

  /* ---- soft card tints, all drawn from the map's sky blue ---- */
  --tint-1: #e8f5fa;
  --tint-2: #e3f4f6;
  --tint-3: #eaf0fb;
  --tint-4: #e9f6f0;

  /* ---- dark plate (deep logo indigo) ---- */
  --plate: #0a0f4a;
  --plate-2: #131c6d;
  --on-plate: #e9eeff;
  --on-plate-muted: #a9bbe4;

  /* ---- accents ---- */
  --accent: #006ea6;
  --accent-deep: #005a8a;
  --accent-bright: #04b7d8;
  --accent-ui: #04a2bf;
  --accent-soft: #e0f4f9;
  --sky: #a1e7f3;
  --leaf: #3c8709;

  --line: #dfe9f2;
  --line-2: #cfdded;
  --line-plate: rgba(255, 255, 255, 0.16);

  /* Pinned-section photograph. Declared here, not in the markup: a relative
     url() in a custom property resolves against this stylesheet's own URL. */
  --bg: url(../images/bg/city.webp);
  --bg-sm: url(../images/bg/city-sm.webp);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(3, 4, 96, 0.05), 0 6px 16px rgba(3, 4, 96, 0.06);
  --shadow: 0 2px 6px rgba(3, 4, 96, 0.06), 0 16px 40px rgba(3, 4, 96, 0.1);
  --shadow-lg: 0 8px 24px rgba(3, 4, 96, 0.1), 0 32px 72px rgba(3, 4, 96, 0.14);

  --container: 1240px;
  --gutter: clamp(18px, 4vw, 48px);
  --pad: clamp(64px, 8vw, 116px);
  --pad-sm: clamp(48px, 6vw, 84px);
  --header-h: 84px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 28px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.62;
  letter-spacing: -0.006em;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 300;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
}

.skip-link:focus { top: 16px; }

/* =====================================================================
   Layout primitives
   ===================================================================== */
.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.sec { padding-block: var(--pad); }
.sec--sm { padding-block: var(--pad-sm); }
.sec--wash { background: var(--wash); }

/* ---------- Section head ---------- */
.shead {
  /*max-width: 760px;*/
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}

.shead--left {
  margin-inline: 0;
  text-align: left;
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.h2,
.cdown__title {
  /* 42px on anything wider than a phone; below that it scales with the
     screen so the longest title still sits on ONE line. */
  font-size: clamp(20px, 6vw, 42px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.032em;
  white-space: nowrap;
  /* the logo's ramp — navy through brand blue to cyan — run through the type.
     Shrink-to-fit so the ramp spans the words, not the whole container;
     still a block, so the eyebrow above keeps its own line. */
  display: block;
  width: fit-content;
  max-width: 100%;
  color: var(--ink);                       /* fallback for engines without clip:text */
  background-image: linear-gradient(92deg, #030460 0%, #006ea6 52%, #04b7d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* a shrink-wrapped title follows its head's alignment: centred heads
   centre it, left-aligned heads leave it at the left edge */
.shead .h2,
.enq__intro .h2,
.hyd__head .h2,
.cdown__lead .h2 { margin-inline: auto; }
.shead--left .h2 { margin-inline: 0; }

/* js/script.js sets this on a title that cannot stay on one line above 20px */
.h2.is-wrapped,
.cdown__title.is-wrapped { white-space: normal; text-wrap: balance; }

.h2 em {
  font-style: normal;
  color: inherit;
  -webkit-text-fill-color: transparent;
}

/* On dark ground the same ramp runs light: white through sky to cyan. */
.plate .h2,
.foc__title,
.cdown__title,
.enq .h2 {
  color: #fff;
  background-image: linear-gradient(92deg, #ffffff 0%, #a1e7f3 55%, #04b7d8 100%);
}


.shead p {
  margin-top: 18px;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--muted);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 26px 0 10px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 15.5px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

/* The circular glyph that leads every primary CTA in this house style. */
.btn i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.btn i svg { width: 17px; height: 17px; }
.btn:hover i { transform: translateX(2px); }

.btn--primary {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn--solid {
  background: var(--accent);
  color: #fff;
}

.btn--solid i { background: rgba(255, 255, 255, 0.2); }
.btn--solid:hover { background: var(--accent-deep); transform: translateY(-2px); }

.btn--ghost {
  padding: 0 26px;
  border: 1px solid #7f8d9c;
  color: var(--ink);
  background: #fff;
}

.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--onplate {
  padding: 0 26px;
  border: 1px solid var(--line-plate);
  color: #fff;
}

.btn--onplate:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

/* =====================================================================
   Top strip + header
   ===================================================================== */
.topstrip {
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.topstrip__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
}

.orgmark {
  display: flex;
  align-items: center;
  gap: 12px;
}

.orgmark small {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}

.orgmark img { height: 26px; width: auto; }

.orgmark p {
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
  max-width: 36ch;
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: saturate(1.5) blur(12px);
  -webkit-backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--header-h);
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand__mark { height: 58px; width: auto; }

.brand__sep {
  width: 1px;
  height: 28px;
  background: var(--line-2);
}

.brand__txt { display: flex; flex-direction: column; line-height: 1.15; }

.brand__txt strong {
  font-size: 14.5px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.brand__txt span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}

.nav a {
  position: relative;
  white-space: nowrap;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 550;
  color: var(--muted);
  transition: color 0.18s ease, background 0.18s ease;
}

.nav a:hover { color: var(--ink); background: var(--wash); }

.nav a.is-active,
.nav a[aria-current="page"] {
  color: var(--accent-deep);
  background: var(--accent-soft);
}

.header__cta {
  min-height: 46px;
  padding: 0 20px 0 6px;
  font-size: 14px;
  flex-shrink: 0;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line-2);
}

.header__cta i { width: 32px; height: 32px; }
.header__cta i svg { width: 15px; height: 15px; }
.header__cta:hover { transform: none; box-shadow: var(--shadow-sm); border-color: transparent; }

.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-left: auto;
}

.hamburger span {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .hamburger span:nth-child(2) { opacity: 0; }
.menu-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  inset: calc(var(--header-h) + 1px) 0 auto 0;
  z-index: 99;
  padding: 10px var(--gutter) 22px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  max-height: calc(100svh - var(--header-h));
  overflow-y: auto;
}

.mobile-menu a {
  display: flex;
  align-items: center;
  min-height: 50px;
  font-size: 15.5px;
  font-weight: 550;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.mobile-menu a:last-of-type { border-bottom: 0; }
.mobile-menu .btn { margin-top: 14px; width: 100%; justify-content: center; }
.menu-open .mobile-menu { display: block; }

.mobile-menu a.is-active,
.mobile-menu a[aria-current="page"] {
  color: var(--accent-deep);
  background: var(--accent-soft);
  padding-inline: 12px;
  margin-inline: -12px;
}

/* ---------- Sticky side CTA ----------
   A persistent tab pinned to the right edge, on top of everything, so the
   primary CTA is always one tap away without competing with the header on
   narrow screens where the header's own button is hidden. */
.side-cta {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 150;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 9px 20px;
  border-radius: 14px 0 0 14px;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: #fff;
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  transition: padding-right 0.22s ease, box-shadow 0.22s ease;
}

.side-cta:hover,
.side-cta:focus-visible {
  padding-right: 15px;
}

.side-cta__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.side-cta__text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The off-canvas menu is also fixed and full-width — don't let the tab
   float on top of it while it's open. */
.menu-open .side-cta { display: none; }

@media (max-width: 560px) {
  .side-cta {
    gap: 7px;
    padding: 12px 7px 15px;
  }

  .side-cta__icon svg { width: 15px; height: 15px; }
  .side-cta__text { font-size: 11px; letter-spacing: 0.07em; }
}

/* =====================================================================
   1. Hero — light, airy, centred
   ===================================================================== */
.hero {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;   /* the banner is the last thing in the hero now */
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(900px 480px at 50% -10%, #ddf2fa 0%, transparent 64%),
    radial-gradient(780px 460px at 86% 16%, #e6f0fd 0%, transparent 60%),
    radial-gradient(700px 420px at 10% 28%, #e4f6f4 0%, transparent 60%),
    var(--paper);
}

/* Soft dotted dome — the house "hero object", drawn rather than photographed. */
.hero__dome {
  position: absolute;
  left: 50%;
  bottom: -58%;
  width: min(1060px, 106%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, rgba(4, 183, 216, 0.08) 0%, transparent 62%),
    repeating-radial-gradient(circle at 50% 50%,
      rgba(4, 183, 216, 0.1) 0 1.5px, transparent 1.5px 22px);
  border: 1px solid rgba(4, 183, 216, 0.14);
  pointer-events: none;
  mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}

.hero__in {
  position: relative;
  z-index: 1;
  padding-top: clamp(34px, 4vw, 58px);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.chip svg { width: 15px; height: 15px; color: var(--accent); }
.chip--accent { background: var(--accent-soft); border-color: transparent; color: var(--accent-deep); }

/* The client's own event banner is the masthead. It already carries the
   logo, the date, both organisers and the skyline, so nothing is set over
   it and no second lockup follows it. line-height: 0 kills the descender
   gap an inline image would otherwise leave beneath itself. */
.hero__banner {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: none;
  line-height: 0;
}

.hero__banner img {
  display: block;
  width: 100%;
  height: auto;
}

.js-motion .hero__banner img {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.js-motion .hero__banner.is-in img { opacity: 1; }

/* ---- the partner strip ----
   The banner artwork carried this bar baked in, with its captions at 7px:
   the reason the logos blurred. Now it is HTML on top of a trimmed banner,
   with the same three groups in the same places and the centre tab hanging
   below the bar as it did in the artwork. */
.hero__strip {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px clamp(14px, 3vw, 40px);
  padding: clamp(10px, 1.4vw, 18px) var(--gutter) 0;
  background: #fff;
}

.hero__strip-group {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding-bottom: clamp(12px, 1.5vw, 20px);
}

/* the hanging tab under Host Partners */
.hero__strip-group--host {
  padding-inline: clamp(12px, 2.2vw, 30px);
  padding-bottom: clamp(12px, 1.5vw, 18px);
  margin-bottom: -12px;
  border-radius: 0 0 28px 28px;
  background: #fff;
  box-shadow: 0 12px 22px -16px rgba(3, 4, 96, 0.35);
}

.hero__strip-cap {
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}

.hero__strip-logos {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
}

.hero__strip img { display: block; width: auto; }
.hero__strip-logo--elets { height: clamp(34px, 4vw, 58px); }
.hero__strip-logo--egov  { height: clamp(34px, 4vw, 56px); }
.hero__strip-logo--seal  { height: clamp(54px, 6vw, 84px); }
.hero__strip-logo--ghmc  { height: clamp(40px, 4.6vw, 64px); }

.hero__strip-div { width: 1px; align-self: stretch; background: var(--line-2); }

.hero__strip-seal { display: grid; justify-items: center; gap: 4px; }

.hero__strip-seal small {
  font-size: clamp(7.5px, 0.7vw, 9.5px);
  line-height: 1.25;
  text-align: center;
  color: var(--text);
}

.hero__strip-seal small b { display: block; font-weight: 700; }

/* the bar sits above the banner; nothing else should be hidden under it */
.hero__banner { z-index: 1; }

@media (max-width: 640px) {
  /* One tight row, the desktop arrangement scaled down: three groups
     across, captions at 9px, logos sized so the row fits a 320px screen
     without wrapping. The centre tab keeps a shallow hang. */
  .hero__strip {
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px clamp(8px, 2.5vw, 16px);
    padding: 8px var(--gutter) 0;
  }
  .hero__strip-group { gap: 4px; padding-bottom: 10px; }
  .hero__strip-group--host {
    padding: 0 clamp(6px, 2vw, 12px) 9px;
    margin-bottom: -6px;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 8px 14px -12px rgba(3, 4, 96, 0.35);
  }
  .hero__strip-cap { font-size: 9px; }
  .hero__strip-logos { gap: 8px; }
  .hero__strip-logo--elets { height: 27px; }
  .hero__strip-logo--egov  { height: 26px; }
  .hero__strip-logo--seal  { height: 42px; }
  .hero__strip-logo--ghmc  { height: 31px; }
  .hero__strip-seal { gap: 3px; }
  .hero__strip-seal small { font-size: 7px; line-height: 1.2; max-width: 100px; }
}

@media (max-width: 400px) {
  /* the captions are wider than the logos under them, so they are what
     decides whether three groups fit: rein them in before the logos */
  .hero__strip { gap: 6px 8px; }
  .hero__strip-cap { font-size: 8.5px; }
  .hero__strip-group--host { padding-inline: 7px; }
  .hero__strip-logos { gap: 7px; }
  .hero__strip-seal small { max-width: 84px; }
}

@media (max-width: 340px) {
  .hero__strip-cap { font-size: 8px; max-width: 60px; text-align: center; line-height: 1.15; }
  .hero__strip-logo--elets { height: 23px; }
  .hero__strip-logo--egov  { height: 22px; }
  .hero__strip-logo--seal  { height: 36px; }
  .hero__strip-logo--ghmc  { height: 27px; }
  .hero__strip-logos { gap: 6px; }
  .hero__strip-seal small { max-width: 80px; font-size: 6.5px; }
}


.hero__lede-wrap {
  position: relative;
  z-index: 1;
  padding-top: clamp(32px, 5vw, 52px);
}

.hero__lede {
  max-width: 62ch;
  margin: 0 auto;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.62;
  color: var(--text);
}

.hero__countdown-wrap {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* ---------- Countdown ----------
   A split band: the pitch on the left, four dials on the right. Each dial
   carries a live progress ring (SVG stroke-dashoffset, driven from JS) so
   the seconds sweep, the minutes creep and the days barely move — the
   motion itself tells you which number is worth watching. */
.cdown {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  width: 100%;
  padding: clamp(22px, 3vw, 40px) clamp(20px, 3.4vw, 48px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 150% at 88% 50%, rgba(4, 183, 216, 0.20) 0%, transparent 62%),
    linear-gradient(118deg, var(--plate) 0%, var(--plate-2) 52%, #0b4b6b 120%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 20px 48px rgba(3, 4, 96, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  overflow: hidden;
  text-align: left;
}

/* Faint engineering grid, fading out to the left so it never fights the copy. */
.cdown__mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 46px);
  mask-image: linear-gradient(90deg, transparent 8%, #000 62%);
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 62%);
}

/* ---- left: the pitch ---- */
.cdown__lead {
  position: relative;
  min-width: 0;
}

.cdown__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sky);
}

.cdown__pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-bright);
  animation: cdPip 2.2s ease-out infinite;
}

@keyframes cdPip {
  0%   { box-shadow: 0 0 0 0 rgba(4, 183, 216, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(4, 183, 216, 0); }
  100% { box-shadow: 0 0 0 0 rgba(4, 183, 216, 0); }
}

.cdown__title {
  margin-top: 16px;
  font-size: clamp(20px, 6vw, 42px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
  white-space: nowrap;

  display: inline-block;

}

.cdown__title em {
  font-style: normal;
  color: var(--accent-bright);
}

.cdown__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 14px;
  font-size: clamp(13px, 1.15vw, 15px);
  font-weight: 600;
  color: var(--on-plate-muted);
}

.cdown__meta span { display: inline-block; white-space: nowrap; }
.cdown__meta svg { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; color: var(--accent-bright); }
.cdown__meta sup { font-size: 0.62em; line-height: 0; }
.cdown__meta-dot { opacity: 0.5; }

/* ---- right: the dials ---- */
.cdown__dials {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(4px, 0.7vw, 10px);
  flex-shrink: 0;
}

.cdown__dial {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(74px, 8.4vw, 118px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.10), rgba(4, 12, 48, 0.55));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 22px rgba(3, 4, 96, 0.35);
}

.cdown__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.cdown__ring-track,
.cdown__ring-bar {
  fill: none;
  stroke-width: 4;
}

.cdown__ring-track { stroke: rgba(255, 255, 255, 0.12); }

.cdown__ring-bar {
  stroke: var(--accent-bright);
  stroke-linecap: round;
  /* 2πr for r=44 */
  stroke-dasharray: 276.46;
  stroke-dashoffset: 276.46;
  filter: drop-shadow(0 0 5px rgba(4, 183, 216, 0.75));
  transition: stroke-dashoffset 0.6s cubic-bezier(0.3, 0.8, 0.3, 1);
}

/* The seconds hand resets 59→0; a transition there would run backwards. */
.cdown__dial--sec .cdown__ring-bar { transition-duration: 0.35s; }
.cdown__ring-bar.is-jump { transition: none; }

.cdown__dial-in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.cdown__fig {
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.cdown__fig.is-tick { animation: cdTick 0.42s cubic-bezier(0.2, 0.8, 0.2, 1); }

@keyframes cdTick {
  0%   { transform: translateY(-38%); opacity: 0; filter: blur(2px); }
  60%  { filter: blur(0); }
  100% { transform: none; opacity: 1; }
}

.cdown__label {
  font-size: clamp(8px, 0.72vw, 10px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-plate-muted);
}

.cdown__sep {
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 700;
  color: var(--accent-bright);
  opacity: 0.7;
  animation: cdBlink 2s ease-in-out infinite;
}

@keyframes cdBlink {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 0.22; }
}

/* Below ~980px the two halves stop fitting side by side. */
@media (max-width: 980px) {
  .cdown {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(22px, 3vw, 32px);
  }

  .cdown__mesh {
    mask-image: linear-gradient(180deg, transparent 6%, #000 70%);
    -webkit-mask-image: linear-gradient(180deg, transparent 6%, #000 70%);
  }

  .cdown__meta { justify-content: center; }
  .cdown__dials { justify-content: center; width: 100%; }
  .cdown__dial { width: clamp(78px, 19vw, 112px); }
}

/* Four dials plus colons stop fitting on a phone — drop the colons. */
@media (max-width: 560px) {
  .cdown { padding-inline: 16px; }
  .cdown__sep { display: none; }
  .cdown__dials { gap: 10px; }
  .cdown__dial { width: calc(25% - 8px); min-width: 66px; }
}

@media (max-width: 380px) {
  .cdown__dials { flex-wrap: wrap; gap: 12px; }
  .cdown__dial { width: calc(50% - 6px); }
}

@media (prefers-reduced-motion: reduce) {
  .cdown__pip,
  .cdown__sep { animation: none; }
  .cdown__fig.is-tick { animation: none; }
  .cdown__ring-bar { transition: none; }
}

.hero__stats-wrap {
  position: relative;
  z-index: 1;
  padding-top: clamp(28px, 4vw, 40px);
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
}

.hero__stat {
  padding: clamp(16px, 2vw, 22px) 10px;
  border-radius: var(--r-lg);
  background: var(--tint-1);
}

.hero__stat:nth-child(4n + 2) { background: var(--tint-2); }
.hero__stat:nth-child(4n + 3) { background: var(--tint-4); }
.hero__stat:nth-child(4n + 4) { background: var(--tint-3); }

.hero__stat-fig {
  display: block;
  font-size: clamp(23px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hero__stat-label {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__theme {
  max-width: 60ch;
  margin: 26px auto 0;
  font-size: clamp(16.5px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

/* =====================================================================
   2. About — plate card: copy left, graphic right
   ===================================================================== */
/* the card now hands straight over to the dark Urban Moment plate, so it
   keeps a breath of the page's light ground beneath it */
#about { padding-bottom: clamp(40px, 5vw, 72px); }

.about-plate__card {
  --plate-pad: clamp(32px, 4.5vw, 64px);
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: var(--plate-pad);
  background: linear-gradient(135deg, #ffffff 0%, var(--tint-1) 55%, var(--tint-3) 100%);
  box-shadow: var(--shadow-lg);
}

/* A quiet tech motif — dotted grid + thin diagonal lines, faded out from the
   top-right corner so it never competes with the copy on the left. */
.about-plate__pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(52deg, rgba(0, 110, 166, 0.1) 0 1px, transparent 1px 64px),
    repeating-radial-gradient(circle at 100% 0%, rgba(0, 110, 166, 0.16) 0 1.5px, transparent 1.5px 20px);
  mask-image: radial-gradient(620px 460px at 100% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(620px 460px at 100% 0%, #000 0%, transparent 72%);
}

.about-plate__badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.about-plate__badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.about-plate__card .about,
.about-plate__card .about-plate__head {
  position: relative;
  z-index: 1;
}

/* Float layout, not grid: the graphic is shorter than the copy, so once the
   text clears it, the theme box (and anything after) runs the card's full
   width instead of leaving a blank column standing beside a short image. */
.about {
  display: block;
}

.about__body { margin-top: 24px; }

.about__copy p {
  font-size: clamp(16px, 1.25vw, 17.5px);
  line-height: 1.68;
  color: var(--text);
}

.about__copy p + p { margin-top: 18px; }
.about__copy b { font-weight: 650; color: var(--ink); }

.about__theme {
  clear: both;
  margin-top: 30px;
  padding: 22px 26px;
  border-radius: var(--r);
  background: var(--tint-3);
  border-left: 4px solid var(--accent);
}

.about__theme b {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.about__theme p {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 650;
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.about__visual {
  position: relative;
  z-index: 1;
  float: right;
  width: min(46%, 620px);
  margin-left: clamp(28px, 4vw, 56px);
  margin-bottom: clamp(20px, 3vw, 32px);
  /* The graphic is landscape, so extra height never enlarges it — width is
     the only lever. Bleed it past the card's own right padding, clipped by
     the card's rounded corner, so it reads bigger without cropping. */
  margin-right: calc(-1 * var(--plate-pad));
}

.about__visual picture {
  display: block;
  width: 100%;
}

.about__visual img {
  width: 100%;
  height: auto;
  border-radius: 25px;   
  display: block;
  filter: drop-shadow(0 20px 36px rgba(3, 4, 96, 0.18));
}

/* =====================================================================
   2b. Why Telangana, Why Now — the sponsor-facing case, copy + photo on
   top, a dark stat plate underneath (reuses .plate/.bento/.cell as-is —
   same count-up + stagger wiring the Greater Hyderabad section already
   has, no JS changes needed).
   ===================================================================== */
.whyt {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.whyt__body { margin-top: 24px; }

.whyt__body p {
  font-size: clamp(16px, 1.25vw, 17.5px);
  line-height: 1.68;
  color: var(--text);
}

.whyt__body p + p { margin-top: 18px; }

.whyt__visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

.whyt-plate {
  margin-top: clamp(48px, 6vw, 80px);
}

/* as its own section it follows the dark Urban Moment plate directly: no
   margin, a lighter top padding, and a hairline where the two plates meet */
.whyt-sec .whyt-plate {
  margin-top: 0;
  padding-top: clamp(44px, 5vw, 64px);
  border-top: 1px solid rgba(161, 231, 243, 0.14);
}

.whyt-plate .shead { margin-bottom: clamp(26px, 3vw, 40px); }

/* ---- the four priority programmes, a row of pillars under the figures ---- */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.pillar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-plate);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(8, 13, 62, 0.5);
  transition: border-color 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.pillar:hover { border-color: rgba(4, 183, 216, 0.45); transform: translateY(-3px); }

.pillar__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  color: var(--accent-bright);
  background: rgba(4, 183, 216, 0.12);
  border: 1px solid rgba(4, 183, 216, 0.3);
}

.pillar__icon svg { width: 21px; height: 21px; }

.pillar > div { min-width: 0; }

.pillar__kicker {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky);
}

.pillar__title {
  margin-top: 3px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}

@media (max-width: 1024px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pillar { padding: 14px 16px; }
}

/* ---- the five figures: a hero and a 2x2 ----
   The headline number gets the room — a ring that fills to its value and
   the India comparison its caption makes — and the other four sit as a
   2x2 beside it, the figure doing the talking and the icon reduced to a
   corner chip. Every colour is the logo's. */
.bento.whyt__stats {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-flow: row;
  gap: 14px;
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 24px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
    rgba(8, 13, 62, 0.58);
  border: 1px solid var(--line-plate);
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.75, 0.25, 1);
}

/* a rule of light along the foot of each card, drawn in as the grid arrives */
.stat::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-bright), var(--sky) 70%, transparent);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.2, 0.75, 0.25, 1);
  transition-delay: calc(var(--i, 0) * 90ms + 0.2s);
}

.js-motion .bento:not(.is-in) .stat::after { transform: scaleX(0); }

.stat:hover { border-color: rgba(4, 183, 216, 0.45); transform: translateY(-3px); }

.stat__icon {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(4, 183, 216, 0.14);
  border: 1px solid rgba(4, 183, 216, 0.3);
  color: var(--accent-bright);
}

.stat__icon svg { width: 18px; height: 18px; }

.stat .cell__tag { padding-right: 48px; }

.stat__fig {
  margin-top: 12px;
  font-size: clamp(34px, 3.2vw, 46px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: fit-content;
  color: #fff;
  background-image: linear-gradient(92deg, #ffffff 0%, #a1e7f3 60%, #04b7d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat__fig span {
  font-size: 0.42em;
  font-weight: 700;
  margin-left: 4px;
  letter-spacing: 0;
}

.stat__label {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--on-plate-muted);
}

/* ---- the hero ---- */
.stat--hero {
  grid-row: span 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(18px, 2vw, 30px);
  row-gap: 20px;
  padding: clamp(24px, 2.4vw, 34px);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(4, 183, 216, 0.18), transparent 60%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
    rgba(8, 13, 62, 0.62);
}

.stat--hero .stat__fig { font-size: clamp(44px, 4.4vw, 64px); }
.stat__body { min-width: 0; }

.stat__ring {
  position: relative;
  flex: 0 0 auto;
  width: clamp(120px, 12vw, 168px);
  aspect-ratio: 1;
}

.stat__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.stat__ring-track,
.stat__ring-bar { fill: none; stroke-width: 9; stroke-linecap: round; }
.stat__ring-track { stroke: rgba(255, 255, 255, 0.1); }

/* r=52 -> circumference 326.7; 50.08% of it drawn */
.stat__ring-bar {
  stroke: var(--accent-bright);
  stroke-dasharray: 326.7;
  stroke-dashoffset: 163.1;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.2, 0.75, 0.25, 1) 0.3s;
}

.js-motion .bento:not(.is-in) .stat__ring-bar { stroke-dashoffset: 326.7; }

/* the economy hero: the ring fills to a third, the 2034 milestone's share
   of the 2047 goal */
.stat__ring-bar--third { stroke-dashoffset: 217.9; }
.js-motion .bento:not(.is-in) .stat__ring-bar--third { stroke-dashoffset: 326.7; }

.stat__ring-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--sky);
}

.stat__ring-icon svg { width: 30%; height: 30%; transform: none; }   /* the ring's own svg is rotated; the icon must not be */

/* the comparison the caption makes, drawn as two bars */
.stat__compare {
  grid-column: 1 / -1;          /* the full width of the hero, under ring and body */
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-plate);
  display: grid;
  gap: 9px;
}

.stat__compare div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.stat__compare dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-plate-muted);
}

.stat__compare dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.stat__compare i {
  display: block;
  height: 8px;
  width: var(--w);
  max-width: calc(100% - 52px);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.2, 0.75, 0.25, 1) 0.5s;
}

.stat__compare div:last-child i { background: rgba(255, 255, 255, 0.28); }

.js-motion .bento:not(.is-in) .stat__compare i { transform: scaleX(0); }

.stat__compare b {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cell__tag {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky);
}

.whyt__stats .cell__fig { margin-top: 10px; }

.whyt__sources {
  margin-top: 28px;
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
  color: var(--on-plate-muted);
}

@media (max-width: 1180px) {
  .bento.whyt__stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stat--hero { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 860px) {
  .stat__fig { font-size: 32px; }
}

@media (max-width: 1024px) {
  .whyt { grid-template-columns: minmax(0, 1fr); }
  .whyt__visual { order: -1; }
}

@media (max-width: 560px) {
  .bento.whyt__stats { grid-template-columns: minmax(0, 1fr); }
  .stat--hero { grid-template-columns: minmax(0, 1fr); }
  .stat__ring { width: 120px; }
}

/* =====================================================================
   4. Greater Hyderabad — the dark bento moment
   ===================================================================== */
.plate {
  position: relative;
  padding-block: var(--pad);
  background-color: var(--plate);
  color: var(--on-plate);
  overflow: hidden;
}

.plate .eyebrow { color: var(--sky); }
/* .plate .h2 colour: set with the light gradient beside .h2 */

.plate .shead p { color: var(--on-plate-muted); }

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 14px;
}

.cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 176px;
  padding: 24px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
    rgba(8, 13, 62, 0.58);
  border: 1px solid var(--line-plate);
  overflow: hidden;
}

/* Two cells run wide so the grid reads as a bento, not a uniform tile field. */
.cell--wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 24px; }
.cell--wide .cell__body { flex: 1; margin-top: 0; }

.cell__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(150deg, var(--accent), var(--accent-deep));
  color: #fff;
  flex-shrink: 0;
}

.cell__icon svg { width: 21px; height: 21px; }

.cell__body { margin-top: auto; }

.cell__fig {
  font-size: clamp(27px, 2.8vw, 39px);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.038em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cell__fig span {
  font-size: 0.46em;
  font-weight: 600;
  color: var(--sky);
  margin-left: 5px;
  letter-spacing: 0;
}

.cell__label {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--on-plate-muted);
}

/* =====================================================================
   4b. Greater Hyderabad — a framed photograph with callouts pinned on it

   The photo is the subject, so it is shown as one: a wide frame on the
   light page, uncovered apart from a soft vignette at the edges. Four
   headline figures sit on it as map-style callouts, each on its own pin;
   six more run in a strip under the frame. Nothing is boxed over the city.
   ===================================================================== */
.hyd { background: var(--wash); }

.hyd__frame {
  position: relative;
  margin: 0;
  border-radius: clamp(18px, 2.2vw, 30px);
  overflow: hidden;
  background: #04102e;
  box-shadow: 0 2px 6px rgba(3, 4, 96, 0.08), 0 44px 90px -40px rgba(3, 4, 96, 0.55);
  /* taller than the photo's own ratio: the head sits in the dark sky at the
     top and the strip along the foot, with the pins in between */
  aspect-ratio: 1920 / 900;
}

.hyd__photo,
.hyd__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* only the edges darken, so the callouts read against the border and the
   middle of the picture stays exactly as photographed */
.hyd__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 4, 40, 0.72) 0%, rgba(3, 4, 40, 0.3) 24%, rgba(3, 4, 40, 0) 42%, rgba(3, 4, 40, 0) 62%, rgba(3, 4, 40, 0.74) 100%),
    linear-gradient(90deg, rgba(3, 4, 40, 0.24) 0%, rgba(3, 4, 40, 0) 22%, rgba(3, 4, 40, 0) 78%, rgba(3, 4, 40, 0.24) 100%);
}

/* ---- the head, on the photograph ---- */
.hyd__head {
  position: absolute;
  left: clamp(18px, 2.4vw, 34px);
  right: clamp(18px, 2.4vw, 34px);
  top: clamp(22px, 3vw, 44px);
  text-align: center;
  color: #fff;
}

.hyd__head .eyebrow { color: var(--sky); }
.hyd__head .h2 {
  margin-inline: auto;
  background-image: linear-gradient(92deg, #ffffff 0%, #a1e7f3 55%, #04b7d8 100%);
  filter: drop-shadow(0 2px 14px rgba(3, 4, 40, 0.75));
}
.hyd__head .orn { margin-top: 14px; }
.hyd__head .orn span { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* ---- the pins ---- */
.hyd__pins { position: absolute; inset: 0; display: block; margin: 0; }

.hyd__pin {
  position: absolute;
  --dx: 0;
  --dy: 0;
}

/* positions are the photo's quiet zones, measured; the dot marks the spot,
   the card hangs off it */
.hyd__pin--a { left: 8%;  top: 40%; }
.hyd__pin--b { left: 58%; top: 36%; }
.hyd__pin--c { left: 60%; top: 60%; }
.hyd__pin--d { left: 24%; top: 62%; }

.hyd__pin-dot {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 0 4px rgba(4, 183, 216, 0.28), 0 0 0 1px #fff inset;
}

.hyd__pin-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(4, 183, 216, 0.7);
  opacity: 0;
}

@keyframes hydPing { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.1); opacity: 0; } }
.js-motion .hyd__pin-dot::after { animation: hydPing 2.6s ease-out infinite; }
.js-motion .hyd__pin:nth-child(2) .hyd__pin-dot::after { animation-delay: 0.65s; }
.js-motion .hyd__pin:nth-child(3) .hyd__pin-dot::after { animation-delay: 1.3s; }
.js-motion .hyd__pin:nth-child(4) .hyd__pin-dot::after { animation-delay: 1.95s; }

.hyd__pin-card {
  position: absolute;
  left: 14px;
  top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px -12px rgba(3, 4, 40, 0.7);
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(0.2, 0.75, 0.25, 1), box-shadow 0.35s ease;
}

/* a leader from the dot to the card */
.hyd__pin-card::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.75);
}

.hyd__pin:hover .hyd__pin-card { transform: translateY(-3px); box-shadow: 0 16px 36px -12px rgba(3, 4, 40, 0.8); }

.hyd__pin-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--accent), var(--accent-bright));
  color: #fff;
}

.hyd__pin-icon svg { width: 19px; height: 19px; }

.hyd__pin-body { display: grid; line-height: 1.1; }

.hyd__pin-fig {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.hyd__pin-fig span { font-size: 0.55em; font-weight: 700; margin-left: 4px; color: var(--accent); }

.hyd__pin-label {
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* the callouts near the right edge open to the left */
.hyd__pin--b .hyd__pin-card,
.hyd__pin--c .hyd__pin-card { left: auto; right: 14px; }
.hyd__pin--b .hyd__pin-card::before,
.hyd__pin--c .hyd__pin-card::before { left: auto; right: -14px; }

/* pins arrive after the photo, one by one */
.js-motion .hyd__pins.is-in .hyd__pin { opacity: 1; transform: none; }
.js-motion .hyd__pin {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.75, 0.25, 1);
  transition-delay: calc(var(--i, 0) * 140ms + 0.35s);
}

/* ---- caption ---- */
.hyd__cap {
  position: absolute;
  left: clamp(18px, 2.4vw, 34px);
  right: clamp(18px, 2.4vw, 34px);
  bottom: clamp(66px, 7.4vw, 84px);
  display: flex;
  align-items: baseline;
  gap: 14px;
  max-width: 54ch;
  margin-left: auto;          /* under the right-hand pin, clear of the left one */
  text-align: right;
  justify-content: flex-end;
  flex-wrap: wrap;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 10px rgba(3, 4, 40, 0.8);
}

.hyd__cap-k {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

/* ---- the strip under the frame ---- */
.hyd__strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 0;
  margin: 0;
  overflow: hidden;
  background: rgba(4, 12, 46, 0.55);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.hyd__ticks,
.bento.hyd__ticks {
  display: flex;
  flex: 0 0 auto;
  gap: 0;
  margin: 0;
  padding: 0;
  width: max-content;
}

.hyd__tick {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 1 !important;
  transform: none !important;
  padding: 13px clamp(18px, 2.4vw, 34px);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--accent-bright);
  white-space: nowrap;
}

.hyd__tick svg { width: 20px; height: 20px; flex: 0 0 auto; }

.hyd__tick-fig {
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.hyd__tick-fig span { font-size: 0.55em; font-weight: 700; margin-left: 3px; color: var(--sky); }
.hyd__tick-label { font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.72); }

@keyframes hydStrip { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
.js-motion .hyd__ticks { animation: hydStrip 46s linear infinite; }
.hyd__strip:hover .hyd__ticks { animation-play-state: paused; }

/* ---- responsive ----
   On narrower desktops the frame shrinks faster than the pills, so the
   two lower pins move apart and the pills tighten. Under 1024px the
   callouts leave the picture and line up under it: the photo is too small
   to carry four pins without covering it. */
@media (max-width: 1180px) {
  .hyd__pin--c { left: 70%; top: 68%; }
  .hyd__pin--d { left: 16%; top: 68%; }
  .hyd__pin-card { padding: 8px 14px 8px 8px; gap: 10px; }
  .hyd__pin-icon { width: 36px; height: 36px; }
  .hyd__pin-fig { font-size: 20px; }
  .hyd__pin-label { font-size: 11px; }
}

@media (max-width: 1024px) {
  .hyd__frame { aspect-ratio: 16 / 8.2; }
  .bento.hyd__pins {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    background: #04102e;
  }
  .hyd__pin { position: static; }
  .hyd__pin-dot { display: none; }
  .hyd__pin-card,
  .hyd__pin--b .hyd__pin-card,
  .hyd__pin--c .hyd__pin-card {
    position: static;
    left: auto;
    right: auto;
    border-radius: 16px;
    white-space: normal;
  }
  .hyd__pin-card::before { display: none; }
  .hyd__frame { display: grid; grid-template-rows: auto auto auto auto; grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; }
  .hyd__photo, .hyd__vignette, .hyd__head { grid-row: 1; grid-column: 1; }
  .hyd__photo { aspect-ratio: 16 / 9.6; }
  .hyd__vignette { display: block; position: static; pointer-events: none; }
  .hyd__head { position: static; align-self: center; padding: 18px 16px; z-index: 1; min-width: 0; }
  /* on the photo there is no room to shrink a long title to one line and
     keep it readable, so here it wraps — balanced, centred, two lines */
  .hyd__head .h2 { max-width: 100%; white-space: normal; text-wrap: balance; font-size: clamp(24px, 7vw, 36px); }
  .hyd__pins { grid-row: 2; }
  .hyd__cap { grid-row: 3; position: static; margin-left: 0; text-align: left; justify-content: flex-start; max-width: none; }
  .hyd__strip { position: static; grid-row: 4; }
  .hyd__cap { position: static; margin: 0; padding: 12px 14px 4px; color: var(--muted); text-shadow: none; max-width: none; background: #04102e; color: rgba(255,255,255,0.86); }
}

/* "10,472.7 sq. km" is wider than half a small phone, so under 560px the
   pills take a row each and the widest figure has the room it needs */
@media (max-width: 560px) {
  .bento.hyd__pins { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; padding: 10px; }
  .hyd__pin-card { padding: 8px 14px 8px 8px; }
  .hyd__pin-fig { font-size: 22px; }
  .hyd__pin-label { font-size: 12px; }
  .hyd__cap { flex-direction: column; gap: 4px; }
}

/* in the under-photo layout the pills are grid cells: text must wrap, and
   nothing may be wider than its cell */
@media (max-width: 1024px) {
  .hyd__pin-card { min-width: 0; }
  .hyd__pin-body { min-width: 0; }
  .hyd__pin-label { white-space: normal; overflow-wrap: anywhere; }
  /* the number and its unit stay one piece; only the label wraps */
  .hyd__pin-fig { white-space: nowrap; font-size: clamp(18px, 4.4vw, 24px); }
  .hyd__pin-fig span { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .hyd__pin-dot::after { animation: none; }
  .js-motion .hyd__ticks { animation: none; }
  .js-motion .hyd__pin { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   5. Key Discussion Areas — colour-coded numbered cards

   Every track is visible at once instead of two at a time behind arrows.
   The grid staggers itself in as the section arrives (js/anim.js adds
   .stagger / .is-in), each card draws its accent rule, and the card under
   the cursor lights up. With JS off it is a plain, finished grid.

   Each card carries its own colour as three custom properties and derives
   everything else — tile, numeral, bullets, wash, hover glow — as one alpha
   of it. That is what keeps six different hues reading as one system.
   ===================================================================== */
.disc {
  position: relative;
  overflow: hidden;
}

/* Faint blueprint grid behind the cards, masked away towards the edges.
   The mask lives on the wrapper so that it stays put while the grid inside
   it moves. */
.disc__mesh {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(128% 92% at 50% 8%, #000 18%, transparent 76%);
  mask-image: radial-gradient(128% 92% at 50% 8%, #000 18%, transparent 76%);
}

/* One cell larger than its frame on every side, so a drift of exactly one
   72px cell loops seamlessly — and it travels on a transform, which the
   compositor carries without repainting anything. */
.disc__grid {
  position: absolute;
  top: -72px;
  left: -72px;
  width: calc(100% + 144px);
  height: calc(100% + 144px);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.85;
}

@keyframes discDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(72px, 72px, 0); }
}

.js-motion .disc__grid { animation: discDrift 54s linear infinite; }

/* Two lines of light walking the grid — one down, one across. Each is a
   band inside a box three times the section's size, so a transform (never a
   layout property) carries it the whole way. */
.disc__mesh::before,
.disc__mesh::after {
  content: "";
  position: absolute;
  opacity: 0;
}

.disc__mesh::before {
  left: 0;
  right: 0;
  top: -100%;
  height: 300%;
  /* a 2px line, and a soft halo carried along under it */
  background:
    linear-gradient(180deg,
      transparent calc(33.333% - 1px),
      rgba(4, 183, 216, 0.62) 33.333%,
      transparent calc(33.333% + 1px)),
    linear-gradient(180deg,
      transparent 32.5%,
      rgba(4, 183, 216, 0.11) 33.333%,
      transparent 34.2%);
}

.disc__mesh::after {
  top: 0;
  bottom: 0;
  left: -100%;
  width: 300%;
  background:
    linear-gradient(90deg,
      transparent calc(33.333% - 1px),
      rgba(0, 110, 166, 0.42) 33.333%,
      transparent calc(33.333% + 1px)),
    linear-gradient(90deg,
      transparent 32.5%,
      rgba(0, 110, 166, 0.09) 33.333%,
      transparent 34.2%);
}

@keyframes discScanY {
  0%        { transform: translateY(-4%); opacity: 0; }
  12%, 82%  { opacity: 1; }
  100%      { transform: translateY(37%); opacity: 0; }
}

@keyframes discScanX {
  0%        { transform: translateX(-4%); opacity: 0; }
  12%, 82%  { opacity: 1; }
  100%      { transform: translateX(37%); opacity: 0; }
}

.js-motion .disc__mesh::before { animation: discScanY 17s linear infinite; }
.js-motion .disc__mesh::after  { animation: discScanX 23s linear infinite 6s; }

.disc > .container { position: relative; z-index: 1; }

.disc__lede {
  max-width: 70ch;
  margin: 18px auto 0;
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  line-height: 1.65;
  color: var(--muted);
}

.tracks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 22px);
}

/* ---- the palette ----
   --c   the card's identity colour, solid
   --c-rgb the same colour as a bare triplet, so every tint is one alpha of it
   --c2  the lighter partner each gradient runs to */
.track {
  --c: #006ea6;
  --c-rgb: 0, 110, 166;
  --c2: #04b7d8;
}

/* Six hues, each assigned to the card that keeps it furthest from its
   neighbours. Two rules decide the set, and both are measured, not guessed:
   white on the lightest point of every tile gradient clears 3.4:1, and no
   two cards that touch in any layout come within dE2000 13 of each other —
   under normal vision AND under the two common colour-blindnesses. That
   second rule is why the tiles differ in lightness as well as hue:
   lightness is the one channel dichromacy leaves intact. */
.track:nth-child(1) { --c: #006ea6; --c-rgb: 0, 110, 166;  --c2: #038fd7; } /* brand blue   */
.track:nth-child(2) { --c: #125329; --c-rgb: 18, 83, 41;   --c2: #1b753b; } /* forest green */
.track:nth-child(3) { --c: #0a5f57; --c-rgb: 10, 95, 87;   --c2: #108177; } /* deep teal    */
.track:nth-child(4) { --c: #2d3589; --c-rgb: 45, 53, 137;  --c2: #4550bf; } /* indigo       */
.track:nth-child(5) { --c: #b0326b; --c-rgb: 176, 50, 107; --c2: #ce5b8f; } /* wine rose    */
.track:nth-child(6) { --c: #8b681c; --c-rgb: 139, 104, 28; --c2: #ae8326; } /* bronze       */

.track {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.3vw, 32px) clamp(22px, 2vw, 28px) clamp(28px, 2.4vw, 34px);
  border-radius: var(--r-lg);
  /* the card's own colour, washed out to nothing a third of the way down */
  background: linear-gradient(180deg, rgba(var(--c-rgb), 0.075), rgba(var(--c-rgb), 0) 55%), var(--paper);
  border: 1px solid rgba(var(--c-rgb), 0.16);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  /* Slow by default: this is the speed the auto-walk lights a card at, and
     the speed everything settles back down at. Hover overrides it below,
     because a card answering the pointer should feel immediate. */
  transition: transform 0.9s cubic-bezier(0.22, 0.68, 0.24, 1),
              box-shadow 0.9s ease,
              border-color 0.9s ease;
}

.track:hover { transition-duration: 0.3s; }

/* The accent rule draws itself in just behind its card's own entrance, so
   the row reads left to right. */
.track::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--c), var(--c2));
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.2, 0.75, 0.25, 1),
              height 0.6s ease;
  transition-delay: calc(var(--i, 0) * 55ms + 0.18s), 0s;
}

.js-motion .tracks:not(.is-in) .track::before { transform: scaleX(0); }

/* Cursor spotlight. --mx/--my are written by js/script.js; with no pointer
   and no script the layer simply never fades in. */
.track__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
              rgba(var(--c-rgb), 0.18), transparent 68%);
  transition: opacity 0.35s ease;
}

.track:hover .track__glow { opacity: 1; }

.track__num {
  position: absolute;
  top: 4px;
  right: 18px;
  font-size: clamp(58px, 5.4vw, 78px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: rgba(var(--c-rgb), 0.13);
  -webkit-text-stroke: 1.4px rgba(var(--c-rgb), 0.42);
  transition: color 0.35s ease, -webkit-text-stroke-color 0.35s ease;
}

.track__icon {
  display: grid;
  place-items: center;
  width: clamp(48px, 4.2vw, 56px);
  height: clamp(48px, 4.2vw, 56px);
  border-radius: 16px;
  background: linear-gradient(152deg, var(--c), var(--c2));
  color: #fff;
  box-shadow: 0 10px 20px -10px rgba(var(--c-rgb), 0.7),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.35s cubic-bezier(0.2, 0.75, 0.25, 1), box-shadow 0.35s ease;
}

.track__icon svg { width: 52%; height: 52%; }

.track__title {
  margin-top: clamp(18px, 1.7vw, 24px);
  font-size: clamp(18px, 1.4vw, 21px);
  font-weight: 750;
  line-height: 1.26;
  letter-spacing: -0.024em;
  color: var(--ink);
}

.track__list {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--c-rgb), 0.22);
  display: grid;
  gap: 10px;
}

.track__list li {
  position: relative;
  padding-left: 24px;
  font-size: 14.8px;
  line-height: 1.54;
  color: var(--muted);
}

.track__list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: linear-gradient(140deg, var(--c2), var(--c));
}

/* ---- lit ----
   One state, two triggers: :hover for the visitor, .is-lit for the slow
   walk js/script.js runs when nobody is pointing at anything. The stagger
   owns transform until the grid is in, so the lift is restated at the same
   weight to win the cascade. */
.track:hover,
.track.is-lit,
.js-motion .stagger.is-in > .track:hover,
.js-motion .stagger.is-in > .track.is-lit {
  /* Up and forward: the lift is what the eye reads first, the scale keeps
     it inside the gutter so it never crowds the card beside it. */
  transform: translateY(-14px) scale(1.028);
}

.track:hover,
.track.is-lit {
  /* Over its neighbours, so the shadow falls on them and not under them. */
  z-index: 3;
  border-color: rgba(var(--c-rgb), 0.55);
  box-shadow: 0 4px 12px rgba(3, 4, 96, 0.07),
              0 36px 64px -26px rgba(var(--c-rgb), 0.78);
}

/* The accent rule thickens as the card comes forward. */
.track:hover::before,
.track.is-lit::before { height: 5px; }

.track:hover .track__icon,
.track.is-lit .track__icon {
  transform: rotate(-6deg) scale(1.12);
  box-shadow: 0 18px 30px -10px rgba(var(--c-rgb), 0.9),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.track:hover .track__num,
.track.is-lit .track__num {
  color: rgba(var(--c-rgb), 0.24);
  -webkit-text-stroke-color: rgba(var(--c-rgb), 0.72);
}

/* The walk's glow sits centred under the heading rather than wherever a
   pointer last was, and fades at the pace of everything else it lights. */
.track.is-lit .track__glow {
  opacity: 1;
  background: radial-gradient(360px circle at 50% 0%,
              rgba(var(--c-rgb), 0.26), transparent 72%);
}

.track__glow,
.track.is-lit .track__glow { transition: opacity 0.9s ease; }
.track:hover .track__glow { transition-duration: 0.35s; }

.track__icon,
.track__num { transition-duration: 0.9s; }

.track:hover .track__icon,
.track:hover .track__num { transition-duration: 0.35s; }

/* A single slow pass of light across the card it is the turn of. */
.track::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(var(--c-rgb), 0.16) 50%,
    transparent 62%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0;
}

@keyframes trackSheen {
  from { background-position: 150% 0; opacity: 0.35; }
  30%  { opacity: 1; }
  to   { background-position: -60% 0; opacity: 0; }
}

.js-motion .track.is-lit::after { animation: trackSheen 3.4s ease-in-out; }

@media (max-width: 1100px) {
  .tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .tracks { grid-template-columns: minmax(0, 1fr); }
  .track__num { font-size: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .track,
  .track::before,
  .track__icon,
  .track__num,
  .track__glow { transition: none; }

  .js-motion .tracks:not(.is-in) .track::before { transform: none; }

  /* Nothing moves on its own: the drifting grid, the two lines of light and
     the sheen all stop, and js/script.js never starts the walk. */
  .js-motion .disc__grid,
  .js-motion .disc__mesh::before,
  .js-motion .disc__mesh::after,
  .js-motion .track.is-lit::after { animation: none; }

  .disc__mesh::before,
  .disc__mesh::after { display: none; }
}

/* =====================================================================
   6. Focus Areas — the "Project Objectives" layout

   Built to the client's reference: a navy wedge with a diagonal edge
   filling the left of the section, the heading top-left inside it, the
   target graphic sitting across the navy/light boundary, and one column of
   pill-shaped cards down the right — each a coloured disc, a connector, a
   title and a line of copy. Every colour is one of the logo's own four.
   ===================================================================== */
.foc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #f5f8fb;
  /* tighter than the site default, so the section fits one screen */
  padding-block: clamp(36px, 4.5vh, 64px);
}

/* The wedge. On desktop its right edge runs from ~60% across at the top
   down to ~26% at the bottom, the same fall as the reference. */
.foc__wedge {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(60% 70% at 18% 80%, rgba(4, 183, 216, 0.22), transparent 70%),
    linear-gradient(170deg, #030460 0%, #071a6a 55%, #06225c 100%);
  clip-path: polygon(0 0, 60% 0, 26% 100%, 0 100%);
}

.foc__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

/* ---- left: badge, title, target ---- */
.foc__stage {
  position: relative;
  color: #fff;
  min-height: 100%;
}

.foc__badge {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: clamp(18px, 2.4vw, 32px);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--accent-bright);
}

.foc__badge svg { width: 22px; height: 22px; }

.foc__title {

  font-size: clamp(22px, 6vw, 42px);
  line-height: 1.02;
  color: #fff;
  text-align: left;
  white-space: nowrap;     /* one row, always */
}

.foc__sub {
  margin-top: 10px;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--sky);
}

.foc__art {
  /* also bounded by the viewport height, so the whole section stays on one
     screen from a 768px laptop upwards */
  width: min(100%, 470px, 50vh);
  margin: clamp(16px, 2vw, 28px) 0 0 -4%;   /* lets the board sit across the diagonal */
  /* the reference's board is seen from the side: tilt ours the same way */
  transform: perspective(1200px) rotateY(-17deg) rotateX(3deg);
  transform-origin: 40% 50%;
  filter: drop-shadow(0 34px 34px rgba(0, 0, 0, 0.42));
}

.foc__art svg { width: 100%; height: auto; display: block; }

/* ---- right: the cards, in a scroller the height of one screen ----
   The fade at the foot says "there is more"; the first card is never under
   the top fade at rest because the padding clears it. */
.foc__scroll {
  position: relative;
  max-height: clamp(400px, calc(100vh - 210px), 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 10px 64px 6px;
  /* no scrollbar drawn: the list still scrolls by wheel, finger and keys,
     and the fade at the foot is what says there is more */
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 64px), transparent 100%);
  border-radius: 6px;
}

.foc__scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.foc__scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.foc__list {
  display: grid;
  gap: clamp(12px, 1.4vw, 20px);
}

/* Each card names its colour once; the disc, its ring, the connector, the
   number and the hover border all come from it. The four are the logo's. */
.foc__item {
  --fc: var(--accent-bright);
  --fg: var(--ink);            /* the glyph colour that reads on --fc */
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 18px);
  padding: clamp(12px, 1.2vw, 16px) clamp(20px, 2vw, 30px) clamp(12px, 1.2vw, 16px) clamp(12px, 1.2vw, 16px);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(3, 4, 96, 0.04), 0 14px 34px -16px rgba(3, 4, 96, 0.22);
  transition: transform 0.35s cubic-bezier(0.2, 0.75, 0.25, 1), box-shadow 0.35s ease;
}

.foc__item--a { --fc: #04b7d8; --fg: #030460; }  /* logo cyan  */
.foc__item--b { --fc: #006ea6; --fg: #ffffff; }  /* brand blue */
.foc__item--c { --fc: #3c8709; --fg: #ffffff; }  /* leaf green */
.foc__item--d { --fc: #030460; --fg: #04b7d8; }  /* logo navy  */

/* the disc, with the pale outer ring the reference draws around each one */
.foc__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(54px, 4.8vw, 68px);
  height: clamp(54px, 4.8vw, 68px);
  border-radius: 50%;
  background: var(--fc);
  color: var(--fg);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--fc) 14%, #fff),
              0 12px 22px -12px color-mix(in srgb, var(--fc) 85%, transparent);
  transition: transform 0.35s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.foc__icon svg { width: 46%; height: 46%; }

/* the run of line and dot between disc and words */
.foc__link {
  flex: 0 0 auto;
  position: relative;
  width: clamp(18px, 2vw, 32px);
  height: 2px;
  margin-left: 4px;
  border-radius: 2px;
  background: var(--fc);
}

.foc__link::before,
.foc__link::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  translate: 0 -50%;
  border-radius: 50%;
  background: var(--fc);
}

.foc__link::before { left: -3px; }
.foc__link::after { right: -3px; }

.foc__text { min-width: 0; }

.foc__name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.foc__num {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--fc);
}

.foc__text p {
  margin-top: 5px;
  font-size: clamp(13px, 1vw, 14.5px);
  line-height: 1.5;
  color: var(--muted);
}

.foc__item:hover {
  transform: translateX(6px);
  box-shadow: 0 1px 2px rgba(3, 4, 96, 0.04), 0 22px 44px -18px rgba(3, 4, 96, 0.3);
}

.foc__item:hover .foc__icon { transform: scale(1.06) rotate(-6deg); }

/* ---- responsive ----
   Below 1100px the wedge becomes a band across the top, the stage lays the
   heading beside the target, and the cards follow underneath. */
/* Short laptop screens: pull the heading in so stage and list both fit. */
@media (min-width: 1101px) and (max-height: 820px) {
  .foc__badge { margin-bottom: 14px; }
  .foc__sub { font-size: clamp(18px, 1.8vw, 24px); margin-top: 6px; }
}

@media (max-width: 1100px) {
  .foc__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 40px); }
  .foc__wedge { clip-path: polygon(0 0, 100% 0, 100% 34%, 0 46%); }
  .foc__scroll { max-height: clamp(420px, 62vh, 640px); }
  .foc__art { width: 100%; }
  .foc__art { transform: perspective(1200px) rotateY(-12deg); }
  .foc__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    column-gap: clamp(18px, 3vw, 36px);
  }
  .foc__badge { grid-column: 1; }
  .foc__title { grid-column: 1; }
  .foc__sub { grid-column: 1; }
  .foc__art { grid-column: 2; grid-row: 1 / span 3; width: 100%; margin: 0; }
}

@media (max-width: 640px) {
  .foc__wedge { clip-path: polygon(0 0, 100% 0, 100% 30%, 0 38%); }
  .foc__stage { grid-template-columns: minmax(0, 1fr); }
  .foc__art { grid-column: 1; grid-row: auto; width: min(100%, 320px); margin: 18px auto 0; }
  .foc__item { border-radius: 30px; padding-right: 16px; }
  .foc__link { display: none; }
  .foc__name { flex-wrap: wrap; gap: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .foc__item, .foc__icon { transition: none; }
  .foc__scroll { scroll-behavior: auto; }
}

/* =====================================================================
   7. Who Will Be in the Room — pinned photo backdrop, glass cards
   ===================================================================== */
.whoroom {
  --bg: url(../images/bg/bg_1.jpeg);   
  --bg-sm: url(../images/bg/bg_1.jpeg);   
}

.whoroom__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(40px, 5vw, 64px);
}

.whoroom__card {
  position: relative;
  padding: 28px 26px 30px;
  border-radius: var(--r-lg);
  background: rgba(10, 15, 74, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

.whoroom__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--card-accent, var(--accent-bright));
}

/* Five accents, all drawn from the logo — cyan, the leaf green, the pale sky,
   the brand blue — plus white. The two brand hues that are too dark to read
   on the navy glass (leaf #3c8709, blue #006ea6) are lifted to a lighter
   tint of the same hue; the number badge keeps navy type on every one. */
.whoroom__card--a { --card-accent: #04b7d8; }  /* logo cyan            */
.whoroom__card--b { --card-accent: #62c22a; }  /* leaf green, lifted   */
.whoroom__card--c { --card-accent: #a1e7f3; }  /* logo sky             */
.whoroom__card--d { --card-accent: #3aa6e0; }  /* brand blue, lifted   */
.whoroom__card--e { --card-accent: #ffffff; }  /* white                */

/* The fifth category has no partner on its row. It spans both columns only
   so that it can be centred in them — the width stays exactly one column,
   so it matches the four cards above it. */
.whoroom__card--solo {
  grid-column: 1 / -1;
  width: 100%;
  max-width: calc(50% - 10px);   /* one column of the 2-up grid, gap 20px */
  margin-inline: auto;
}

/* The drawing that fills the empty top-right of each card. It is a
   watermark: the card's own accent colour, low opacity, and masked so it
   dissolves away from the corner it is anchored to rather than running
   under the heading. The card's backdrop-filter makes it a stacking
   context, so z-index -1 puts this above the glass and below every word. */
.whoroom__art {
  position: absolute;
  z-index: -1;
  top: -10px;
  right: -14px;
  width: clamp(132px, 34%, 212px);
  color: var(--card-accent, var(--accent-bright));
  opacity: 0.34;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(135% 135% at 100% 0%, #000 46%, transparent 88%);
  mask-image: radial-gradient(135% 135% at 100% 0%, #000 46%, transparent 88%);
}

.whoroom__art svg {
  display: block;
  width: 100%;
  height: auto;
}

.whoroom__num {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--card-accent, var(--accent-bright));
  color: var(--plate);
  font-size: 13.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.whoroom__icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  vertical-align: middle;
}

.whoroom__icon svg { width: 20px; height: 20px; }

.whoroom__card h3 {
  margin-top: 18px;
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: #fff;
}

.whoroom__card ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin-top: 16px;
}


.whoroom__card li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--on-plate-muted);
}

.whoroom__card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--card-accent, var(--accent-bright));
}

@media (max-width: 860px) {
  .whoroom__grid { grid-template-columns: minmax(0, 1fr); }
  /* One column: there is nothing left to centre it against. */
  .whoroom__card--solo { max-width: none; }
}

@media (max-width: 560px) {
  .whoroom__card ul { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   8. Speakers — the confirmed 2026 line-up

   The portraits are 400px cut-outs on transparency, so each sits on its
   own tinted disc rather than in a photo box; the disc is what gives the
   row a consistent silhouette when the crops themselves vary.
   ===================================================================== */
.spks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, 2.2vw, 28px);
}

.spk {
  flex: 0 1 clamp(240px, 30%, 340px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 20px 28px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Row 1 — the chair alone, a touch larger, with a tag so the hierarchy reads
   even before you get to the name. */
.spks--lead { margin-bottom: clamp(18px, 2.2vw, 28px); }

.spk--lead {
  flex-basis: clamp(280px, 34%, 400px);
  padding-top: 22px;
}

/* a card without the chair's tag gets the height the tag pill occupies, so
   every photo on a row sits level with the chair's */
.spk:not(:has(> .spk__tag))::before {
  content: "";
  display: block;
  height: 26px;         /* the tag's own height */
  margin-bottom: 16px;  /* and its margin */
}

/* the accent ring marks the Program Chair alone; the two beside him share
   his size but not his ring */
.spk:has(> .spk__tag) {
  border-color: rgba(0, 110, 166, 0.28);
  box-shadow: var(--shadow-sm), 0 0 0 4px var(--accent-soft);
}

/* the two featured portraits run larger than the row below; the 88% cap
   keeps a margin inside the narrow paired cards between 480 and 640px */
.spk--lead .spk__photo { width: min(clamp(200px, 19vw, 256px), 88%); }

/* the Guest of Honor is the senior dignitary on the row, so his portrait
   takes one more step up than the keynote speaker's beside it */
.spk--honor .spk__photo { width: min(clamp(224px, 22vw, 296px), 98%); }
.spk--lead .spk__name  { font-size: 19px; }
.spk--lead .spk__role  { font-size: 15px; }

.spk__tag {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* the two lead roles, each in a logo colour of its own so the three tags
   read as three different roles at a glance */
.spk__tag--honor   { background: var(--ink); }                          /* logo navy  */
.spk__tag--keynote { background: var(--accent-bright); color: var(--ink); } /* logo cyan  */

.spk__gov {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.spk:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.spk__photo {
  width: clamp(150px, 15vw, 190px);
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r);
  overflow: hidden;
  background: linear-gradient(160deg, var(--tint-1), var(--tint-4));
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.spk__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  display: block;
}

.spk__name {
  margin-top: 18px;
  font-size: 16.5px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.spk__name span {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  vertical-align: middle;
}

.spk__role {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--accent);
}

.spk__org {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

@media (max-width: 860px) {
  .spk { flex-basis: clamp(210px, 46%, 300px); }
  .spk--lead { flex-basis: clamp(210px, 46%, 300px); }
}

@media (max-width: 480px) {
  .spk, .spk--lead { flex-basis: 100%; max-width: 320px; }
}

/* =====================================================================
   7c. India's Urban Moment — four figures in one frame, on a timeline
   The summit's own Hussain Sagar photograph sits under a navy scrim and a
   faint dot mesh. One glass frame holds the four figures as compact
   cells; the timeline runs along the frame's foot with a dot and a year
   under each cell and a light travelling along it. Under 900px the frame
   stacks its cells and the line stands up on the left. Reuses .plate and
   .bento so the stagger and count-up in js/anim.js just work.
   ===================================================================== */
.momt {
  --momt-a: #04b7d8;   /* logo cyan  */
  --momt-b: #62c22a;   /* logo leaf, lifted for dark ground */
  --momt-c: #3aa6e0;   /* logo blue, lifted for dark ground */
  --momt-d: #f2c14e;   /* a warm gold for the money figure */
  --momt-line: rgba(161, 231, 243, 0.55);
  --rail: 56px;        /* the rail the vertical timeline stands in, under 900px */
  padding-block: clamp(56px, 7vw, 96px);
  background: #061245;
  isolation: isolate;
}

.momt__photo { position: absolute; inset: 0; z-index: 0; margin: 0; }

.momt__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  filter: saturate(0.85);
}

/* navy over the photograph: dark at the head and the foot so the title and
   the frame read, the skyline left visible through the middle band */
.momt__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 10% 0%, rgba(4, 183, 216, 0.22), transparent 70%),
    radial-gradient(40% 40% at 92% 100%, rgba(98, 194, 42, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(3, 4, 64, 0.94) 0%, rgba(4, 12, 74, 0.78) 30%, rgba(4, 12, 74, 0.66) 60%, rgba(3, 4, 64, 0.92) 100%);
}

/* a faint dot mesh, like a planner's grid, fading out toward the middle */
.momt__mesh {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(rgba(161, 231, 243, 0.22) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 45%, transparent 60%, #000 100%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 45%, transparent 60%, #000 100%);
  opacity: 0.55;
}

.momt .container { position: relative; z-index: 2; }

/* the eyebrow carries a short leaf-green rule, as the logo's leaf does */
.momt .momt__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--momt-b);
}

.momt .momt__eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* the title crosses the pale monument in the photograph, so it carries the
   same soft shadow the Greater Hyderabad head does */
.momt .h2 { filter: drop-shadow(0 2px 14px rgba(3, 4, 40, 0.75)); }

/* ---- the frame: one glass panel, four cells ---- */
.bento.momt__tl {
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: 0;
  align-items: stretch;
  margin: clamp(26px, 3vw, 40px) 0 52px;   /* room beneath for the year chips */
  padding: 0;
  list-style: none;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04) 60%),
    rgba(6, 14, 74, 0.5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.7);
}

/* the timeline runs along the frame's foot and past both ends */
.momt__tl::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: -5%;
  right: -5%;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--momt-line) 8%, var(--momt-line) 92%, transparent);
  pointer-events: none;
}

/* a light travelling along the line, as traffic does along a road */
.momt__tl::after {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: -3px;
  left: 0;
  width: 180px;
  height: 6px;
  border-radius: 3px;
  background: radial-gradient(closest-side, rgba(4, 183, 216, 0.95), rgba(4, 183, 216, 0));
  filter: blur(0.5px);
  pointer-events: none;
  opacity: 0;
}

.js-motion .momt__tl.is-in::after { animation: momtRun 7.5s linear 0.8s infinite; }

@keyframes momtRun {
  0%   { left: -180px; opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ---- a cell ---- */
.momt__item {
  --c: var(--momt-a);
  position: relative;
  min-width: 0;
}

.momt__item--b { --c: var(--momt-b); }
.momt__item--c { --c: var(--momt-c); }
.momt__item--d { --c: var(--momt-d); }

/* thin dividers between the cells */
.momt__item + .momt__item { border-left: 1px solid rgba(255, 255, 255, 0.12); }

/* a hairline in the cell's colour along its top edge */
.momt__item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 14%;
  right: 14%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  transition: transform 0.9s cubic-bezier(0.2, 0.75, 0.25, 1) 0.3s;
}

.momt__card {
  position: relative;
  display: flex;
  align-items: flex-start;   /* figures line up across the row whatever their caption's length */
  gap: 14px;
  height: 100%;
  padding: clamp(18px, 1.8vw, 24px) clamp(16px, 1.6vw, 22px) clamp(30px, 2.4vw, 34px);   /* the foot leaves room for the dot */
  overflow: hidden;
  border-radius: inherit;
  transition: transform 0.35s cubic-bezier(0.2, 0.75, 0.25, 1), opacity 0.6s ease, background-color 0.35s ease;
}

.momt__item:hover .momt__card,
.momt__item:focus-within .momt__card { background-color: rgba(255, 255, 255, 0.05); }

.momt__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 6%, transparent);
}

.momt__icon svg { width: 23px; height: 23px; }

.momt__card .cell__body { margin-top: 0; padding-top: 6px; min-width: 0; }   /* the figure's centre meets the icon's */

.momt__card .cell__fig {
  font-size: clamp(28px, 2.3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(3, 4, 40, 0.5);
}

.momt__card .cell__fig span {
  font-size: 0.56em;
  font-weight: 700;
  color: var(--c);
  margin-left: 2px;
}

.momt__card .cell__label {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(233, 238, 255, 0.82);
  text-wrap: balance;
}

/* a soft light in the cell's colour, low in the corner, brighter on hover */
.momt__spark {
  position: absolute;
  z-index: -1;
  right: -30%;
  bottom: -60%;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 28%, transparent), transparent 62%);
  opacity: 0.55;
  transition: opacity 0.4s ease, transform 0.6s ease;
}

.momt__item:hover .momt__spark,
.momt__item:focus-within .momt__spark { opacity: 1; transform: scale(1.15); }

/* ---- the node: a dot on the line under the cell, with its year ---- */
.momt__node {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, calc(100% - 7px));   /* the dot's centre sits on the line; the chip hangs beneath */
  display: grid;
  justify-items: center;
  row-gap: 8px;
  pointer-events: none;
}

.momt__node i {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 4px #071246, 0 0 0 5px color-mix(in srgb, var(--c) 45%, transparent), 0 0 22px color-mix(in srgb, var(--c) 70%, transparent);
  transition: transform 0.6s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.momt__node b {
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: rgba(3, 4, 40, 0.78);
  color: var(--c);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- arrival: cells fade in, dots pop, hairlines draw ---- */
.js-motion .momt__tl:not(.is-in) .momt__card { opacity: 0; transform: translateY(14px); }
.js-motion .momt__tl:not(.is-in) .momt__item::before { transform: scaleX(0); }
.js-motion .momt__tl:not(.is-in) .momt__node i { transform: scale(0); }
.js-motion .momt__tl .momt__card,
.js-motion .momt__tl .momt__node i { transition-delay: calc(var(--i, 0) * 0.12s); }
.js-motion .momt__tl .momt__item::before { transition-delay: calc(0.3s + var(--i, 0) * 0.12s); }

@media (max-width: 1180px) {
  .bento.momt__tl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .momt__card { flex-direction: column; align-items: flex-start; gap: 12px; }
  .momt__card .cell__body { padding-top: 0; }
}

/* ---- under 900px the line stands up on the left and the cells stack ---- */
@media (max-width: 900px) {
  .momt { --rail: 66px; }
  /* the frame hugs its content, and the rail-and-frame group sits centred */
  .bento.momt__tl {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin: clamp(26px, 3vw, 40px) max(0px, calc((100% - 640px - var(--rail)) / 2)) 0 max(var(--rail), calc((100% - 640px + var(--rail)) / 2));
  }
  .momt__tl::before {
    left: calc(var(--rail) / -2 - 1px);
    right: auto;
    top: 8px;
    bottom: 8px;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, transparent, var(--momt-line) 5%, var(--momt-line) 95%, transparent);
  }
  .momt__tl::after {
    top: 0;
    bottom: auto;
    left: calc(var(--rail) / -2 - 3px);
    width: 6px;
    height: 160px;
  }
  .js-motion .momt__tl.is-in::after { animation-name: momtRunV; }
  .momt__item + .momt__item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  /* the hairline faces the line, on the cell's left edge */
  .momt__item::before { top: 14%; bottom: 14%; left: -1px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, transparent, var(--c), transparent); }
  .js-motion .momt__tl:not(.is-in) .momt__item::before { transform: scaleY(0); }
  .js-motion .momt__tl:not(.is-in) .momt__card { transform: translateX(-14px); }
  .momt__card { flex-direction: row; align-items: center; gap: 16px; padding: 16px 18px; }
  .momt__card .cell__body { padding-top: 0; flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 2px; }
  .momt__card .cell__fig { font-size: 32px; min-width: 2.75em; }   /* as wide as $2.4T, so the captions form one column */
  .momt__card .cell__label { margin-top: 0; font-size: 13.5px; max-width: 36ch; flex: 1 1 200px; }
  /* the node moves to the rail: the dot on the row's midline, the chip beneath */
  .momt__node { left: calc(var(--rail) / -2); top: 50%; bottom: auto; transform: translate(-50%, -7px); row-gap: 6px; }
  .momt__node b { transform: none; font-size: 9.5px; padding: 3px 6px; letter-spacing: 0.06em; }
}

@keyframes momtRunV {
  0%   { top: -160px; opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@media (max-width: 480px) {
  .momt__card { gap: 14px; padding: 14px 14px 14px 16px; }
  .momt__card .cell__body { display: block; }
  .momt__icon { width: 42px; height: 42px; border-radius: 13px; }
  .momt__icon svg { width: 21px; height: 21px; }
  .momt__card .cell__fig { font-size: 30px; min-width: 0; }
  .momt__card .cell__label { margin-top: 4px; font-size: 13px; max-width: none; }
  .momt__spark { right: -20%; bottom: -70%; width: 60%; }
  /* the landscape photograph is cover-cropped into a tall box here, so it
     reads as light and dark patches: hold the sky and deepen the scrim */
  .momt__photo img { object-position: 50% 20%; }
  .momt__scrim {
    background:
      radial-gradient(60% 55% at 10% 0%, rgba(4, 183, 216, 0.22), transparent 70%),
      radial-gradient(40% 40% at 92% 100%, rgba(98, 194, 42, 0.14), transparent 70%),
      linear-gradient(180deg, rgba(3, 4, 64, 0.94) 0%, rgba(4, 12, 74, 0.86) 30%, rgba(4, 12, 74, 0.8) 60%, rgba(3, 4, 64, 0.92) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .momt__card, .momt__spark, .momt__node i { transition: none; }
  .js-motion .momt__tl.is-in::after { animation: none; }
}

/* =====================================================================
   8b. Past Speakers
   ===================================================================== */
.people {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.person {
  margin: 0;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 1px 1px 1px 1px #ccc;
}

.person:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.person__photo {
  position: relative;
  aspect-ratio: 1;
  /*background: linear-gradient(160deg, var(--tint-1), var(--tint-4));*/
  background: linear-gradient(55deg, #12196d, #0077b5);
  overflow: hidden;
}

/* Full colour, always — no grayscale on people or on partner marks. */
.person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}

/* the summit's leading roles, as a pill on the portrait: navy for the Chief
   Guest, cyan for the Special Guest, blue for the Program Chair (the same
   three colours the upcoming-speaker tags use) */
.person__tag {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(3, 4, 40, 0.28);
}

.person__tag--chief   { background: var(--ink); }
.person__tag--special { background: var(--accent-bright); color: var(--ink); }

.person__photo .monogram {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  opacity: 0.6;
}

.person figcaption { padding: 15px 16px 18px; }

.person__name {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.person__role { margin-top: 6px; font-size: 12.5px; line-height: 1.42; color: var(--muted); }

/* =====================================================================
   8c. Our Hyderabad Legacy — the film

   A 17MB, 97-second film with narration, so it is not wallpaper: nothing
   is fetched until someone asks for it (preload="none"), and the poster
   holds the section in the meantime. The native controls carry it with no
   JS at all; js/script.js only swaps in the nicer facade on top.
   ===================================================================== */
/* The logo's three colours, in the logo's own order: the deep indigo it is
   drawn in, the cyan of the wordmark, and a breath of the leaf green. The
   base stays dark enough for white type at every stop, and the two light
   washes sit in the section's margins, never under a title. */
.legacy {
  position: relative;
  padding-block: var(--pad);
  background:
    radial-gradient(60% 46% at 6% 6%, rgba(4, 183, 216, 0.24), transparent 62%),
    radial-gradient(44% 30% at 50% 100%, rgba(60, 135, 9, 0.22), transparent 66%),
    radial-gradient(34% 22% at 94% 2%, rgba(161, 231, 243, 0.12), transparent 66%),
    linear-gradient(158deg, #030460 0%, #06215c 34%, #073a5e 58%, #061a51 78%, #030460 100%);
}

/* Light thrown from behind the frame, so the film sits in the section
   rather than on it. */
/* the light behind the films: centred high, behind the frames, and never
   bright under the title blocks beneath them */
.legacy__glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 40%;
  width: min(1100px, 92%);
  aspect-ratio: 16 / 7;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(ellipse at center,
              rgba(4, 183, 216, 0.16), rgba(4, 183, 216, 0.04) 45%, transparent 70%);
  filter: blur(26px);
}

.legacy > .container { position: relative; z-index: 1; }

/* ---- three films: the Hyderabad film leads, the other two stack beside it ---- */
/* two films, equal partners, side by side */
.legacy__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 36px);
  max-width: 1120px;
  margin: clamp(34px, 4vw, 52px) auto 0;
  align-items: start;
}

.legacy__item { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---- the title block under each frame ---- */
.legacy__meta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 4px;
  text-shadow: 0 1px 14px rgba(3, 4, 40, 0.75);
}

.legacy__num {
  flex: 0 0 auto;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
}

.legacy__text { min-width: 0; }

.legacy__kicker {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky);
}

.legacy__title {
  margin-top: 4px;
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #fff;
}


.legacy__blurb {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--on-plate-muted);
}

.legacy__blurb { max-width: 48ch; }

/* the runtime, as a small chip in the frame's corner */
.legacy__dur {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(3, 4, 40, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.legacy__frame.is-playing .legacy__dur { opacity: 0; }

.legacy__frame--lead { grid-row: 1 / span 2; }

.legacy__frame {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: clamp(14px, 2vw, 26px);
  overflow: hidden;
  background: #05082a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14),
              0 2px 8px rgba(0, 0, 0, 0.4),
              0 40px 90px -30px rgba(0, 0, 0, 0.85),
              0 0 70px -20px rgba(4, 183, 216, 0.4);
}

.legacy__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #05082a;
}

/* ---- the facade ----
   Hidden until the script says the page can drive the video itself. Until
   then (and forever, with JS off) the browser's own controls are on top of
   the poster and everything works. */
.legacy__play {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, rgba(3, 4, 40, 0.1) 0%, rgba(3, 4, 40, 0.5) 100%);
  color: #fff;
  cursor: pointer;
  place-items: center;
  align-content: center;
  gap: 16px;
  transition: background 0.4s ease, opacity 0.45s ease;
}

.js-video .legacy__play { display: grid; }
.legacy__play:hover { background: linear-gradient(180deg, rgba(3, 4, 40, 0.05) 0%, rgba(3, 4, 40, 0.42) 100%); }
.legacy__frame.is-playing .legacy__play { opacity: 0; pointer-events: none; }

/* Three layers: a glass disc that picks up the frame behind it, the solid
   accent core, and the glyph. --play sizes all of them together. */
.legacy__play {
  --play: clamp(72px, 9.5vw, 104px);
}

.legacy__item .legacy__play { --play: clamp(64px, 7vw, 88px); }

.legacy__play-btn {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--play);
  height: var(--play);
  border-radius: 50%;
  background:
    radial-gradient(120% 120% at 30% 18%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 52%),
    linear-gradient(152deg, var(--accent-bright) 0%, var(--accent) 62%, var(--accent-deep) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    0 0 0 9px rgba(255, 255, 255, 0.14),
    0 0 0 10px rgba(255, 255, 255, 0.22),
    0 18px 40px -14px rgba(4, 183, 216, 0.9),
    0 6px 16px rgba(3, 4, 96, 0.45);
  transition: transform 0.4s cubic-bezier(0.2, 0.75, 0.25, 1),
              box-shadow 0.4s ease;
}

.legacy__play-btn svg {
  width: 38%;
  height: 38%;
  margin-left: 7%;   /* a triangle reads off-centre when it is truly centred */
  filter: drop-shadow(0 2px 4px rgba(3, 4, 96, 0.35));
  color: #fff;
}

.legacy__play:hover .legacy__play-btn,
.legacy__play:focus-visible .legacy__play-btn {
  transform: scale(1.07);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.6) inset,
    0 0 0 11px rgba(255, 255, 255, 0.2),
    0 0 0 12px rgba(255, 255, 255, 0.3),
    0 22px 50px -14px rgba(4, 183, 216, 1),
    0 6px 16px rgba(3, 4, 96, 0.5);
}

/* Two rings breathing outwards, half a cycle apart. */
.legacy__play-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--play);
  height: var(--play);
  translate: -50% -50%;
  border-radius: 50%;
  border: 1.5px solid rgba(161, 231, 243, 0.5);
  opacity: 0;
  pointer-events: none;
}

@keyframes legacyPulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  75%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

.js-motion .legacy__play-ring { animation: legacyPulse 3.2s cubic-bezier(0.2, 0.7, 0.3, 1) infinite; }
.js-motion .legacy__play-ring--2 { animation-delay: 1.6s; }

@media (max-width: 640px) {
  .legacy__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .legacy__item .legacy__play { --play: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .legacy__play-ring { animation: none; }
  .legacy__play-btn, .legacy__play { transition: none; }
}

/* =====================================================================
   8d. Glimpses of Past Editions — two rows running opposite ways

   Each row holds the same photographs twice, and the track travels exactly
   half its own width, so the loop meets itself with no jump. The motion is
   a transform, so it costs the compositor and nothing else. Hover, focus or
   a touch stops it; reduced motion never starts it.
   ===================================================================== */
.glimpse { overflow: hidden; }

.glimpse__rows {
  display: grid;
  gap: clamp(10px, 1.2vw, 16px);
  margin-top: clamp(34px, 4vw, 52px);
}

.glimpse__row {
  overflow: hidden;
  /* the strip fades out at both ends rather than being chopped off */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.glimpse__track {
  display: flex;
  gap: clamp(10px, 1.2vw, 16px);
  width: max-content;
}

@keyframes glimpseRunL {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes glimpseRunR {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.js-motion .glimpse__track { animation: glimpseRunL 128s linear infinite; }
.js-motion .glimpse__row[data-dir="r"] .glimpse__track { animation-name: glimpseRunR; animation-duration: 156s; }

/* The visitor's attention wins: anything they do to the strip stops it. */
.glimpse__rows:hover .glimpse__track,
.glimpse__rows:focus-within .glimpse__track,
.glimpse__rows.is-held .glimpse__track { animation-play-state: paused; }

.glimpse__item {
  position: relative;
  flex: 0 0 auto;
  width: clamp(208px, 25vw, 330px);
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--tint-1);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: transform 0.4s cubic-bezier(0.2, 0.75, 0.25, 1), box-shadow 0.4s ease;
}

.glimpse__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.75, 0.25, 1);
}

/* The magnifier badge, which only appears on the photo being pointed at. */
.glimpse__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(44px circle at 50% 50%, rgba(0, 110, 166, 0.92) 0 43px, transparent 44px),
    linear-gradient(0deg, rgba(3, 4, 96, 0.34), rgba(3, 4, 96, 0.34));
  opacity: 0;
  transition: opacity 0.35s ease;
}

.glimpse__zoom {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 34px;
  height: 34px;
  color: #fff;
  opacity: 0;
  scale: 0.8;
  transition: opacity 0.35s ease, scale 0.35s cubic-bezier(0.2, 0.75, 0.25, 1);
  pointer-events: none;
}

.glimpse__item:hover,
.glimpse__item:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow); }
.glimpse__item:hover img,
.glimpse__item:focus-visible img { transform: scale(1.06); }
.glimpse__item:hover::after,
.glimpse__item:focus-visible::after { opacity: 1; }
.glimpse__item:hover .glimpse__zoom,
.glimpse__item:focus-visible .glimpse__zoom { opacity: 1; scale: 1; }

/* ---- the lightbox ----
   A native <dialog>, so the browser owns Escape, the focus trap and the
   inertness of the page behind it. */
.lightbox {
  width: min(96vw, 1200px);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: clamp(12px, 1.6vw, 20px);
  background: transparent;
  overflow: visible;
  color: #fff;
}

.lightbox::backdrop {
  background: rgba(2, 3, 26, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 40vh;
}

.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 84vh;
  border-radius: clamp(10px, 1.4vw, 16px);
  background: #0a0f4a;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(10, 15, 74, 0.72);
  color: #fff;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.lightbox__close svg,
.lightbox__nav svg { width: 21px; height: 21px; }

.lightbox__close:hover,
.lightbox__nav:hover {
  background: var(--accent);
  border-color: var(--accent-bright);
  transform: scale(1.06);
}

.lightbox__close { top: -18px; right: -14px; }
.lightbox__nav--prev { left: -16px; top: 50%; translate: 0 -50%; }
.lightbox__nav--next { right: -16px; top: 50%; translate: 0 -50%; }

.lightbox__meta {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-plate-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .lightbox { width: 94vw; }
  .lightbox__close { top: -16px; right: -6px; width: 40px; height: 40px; }
  .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__nav--prev { left: -6px; }
  .lightbox__nav--next { right: -6px; }
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .glimpse__track { animation: none; }
  .glimpse__item, .glimpse__item img, .glimpse__item::after, .glimpse__zoom { transition: none; }
}

/* =====================================================================
   9. Past Partners
   ===================================================================== */
.logos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.logos div {
  display: grid;
  place-items: center;
  height: 112px;
  padding: 18px;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--line);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.logos div:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }

.logos img {
  max-height: 48px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* =====================================================================
   10. CTA band
   ===================================================================== */
.cta {
  position: relative;
  padding: clamp(56px, 7vw, 96px) clamp(24px, 4vw, 56px);
  border-radius: var(--r-xl);
  text-align: center;
  overflow: hidden;
  background-color: var(--plate);
  color: #fff;
}

.cta h2 {
  max-width: 20ch;
  margin-inline: auto;
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.cta__tag {
  display: inline-block;
  margin-top: 20px;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(8, 13, 62, 0.55);
  border: 1px solid var(--line-plate);
  font-size: 14px;
  font-weight: 600;
  color: var(--sky);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}

/* =====================================================================
   11. Connect
   ===================================================================== */
.contacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 900px;
  margin-inline: auto;
}

.contact {
  padding: 30px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.contact:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.contact__avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--accent), var(--accent-deep));
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.contact h3 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.contact__links { margin-top: 14px; display: grid; gap: 4px; justify-items: start; }

/* The index page centres its contact cards; the form page's rail is left-aligned. */
.contact--center .contact__links { justify-items: center; }
.contact--center .contact__links a { justify-content: center; }

.contact__links a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  font-size: 15.5px;
  font-weight: 550;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color 0.18s ease;
}

.contact__links a:hover { color: var(--accent); }

.connect__cta { text-align: center; margin-top: 36px; }

/* =====================================================================
   12. Footer — four columns: brand · quick links · organisers · get in touch
   ===================================================================== */
.footer {
  background:
    radial-gradient(760px 420px at 12% 0%, #14306e 0%, transparent 60%),
    var(--plate);
  color: var(--on-plate);
  padding: clamp(56px, 6vw, 88px) 0 0;
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 4.2fr) minmax(0, 2.4fr) minmax(0, 3.2fr) minmax(0, 3fr);
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(36px, 4vw, 52px);
}

.footer__logo {
  width: min(250px, 78%);
  height: auto;
  padding: 13px 17px;
  margin-bottom: 20px;
  background: #fff;
  border-radius: var(--r);
}

.footer__theme {
  max-width: 44ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--on-plate-muted);
}

.footer__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.footer__facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line-plate);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.footer__facts svg { width: 14px; height: 14px; color: var(--accent-bright); }

.footer h4 {
  margin-bottom: 16px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
}

.footer__col a {
  display: flex;
  align-items: center;
  min-height: 36px;
  font-size: 14.5px;
  color: var(--on-plate-muted);
  transition: color 0.18s ease, padding-left 0.18s ease;
}

.footer__col a:hover { color: #fff; padding-left: 5px; }

/* Organisers: a role label above each named body. */
.footer__orgs { display: grid; gap: 16px; }

.footer__orgs dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 4px;
}

.footer__orgs dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: 550;
  color: #fff;
}

/* Get in touch: an icon beside each contact. */
.footer__touch { display: grid; gap: 18px; }

.footer__touch a {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14.5px;
  color: var(--on-plate-muted);
  transition: color 0.18s ease;
  font-variant-numeric: tabular-nums;
}

.footer__touch a:hover { color: #fff; }

.footer__touch svg {
  width: 17px;
  height: 17px;
  margin-top: 3px;
  color: var(--accent-bright);
  flex-shrink: 0;
}

.footer__touch b { display: block; font-weight: 650; color: #fff; }

.footer .btn--solid { margin-top: 22px; }

.socials { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }

.socials a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line-plate);
  color: #fff;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.socials a:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  transform: translateY(-2px);
}

.socials svg { width: 16px; height: 16px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 0 26px;
  border-top: 1px solid var(--line-plate);
  font-size: 13px;
  color: var(--on-plate-muted);
}

.footer__bottom .tag { font-weight: 600; color: var(--accent-bright); }

/* =====================================================================
   Fixed (parallax) section backgrounds

   House technique, matching the Elets summit sites: the photo is a
   background layer under a dark gradient scrim, pinned with
   background-attachment: fixed and released to `scroll` on small screens
   — pinned backgrounds cause sideways-scroll and repaint bugs on phones,
   and iOS Safari ignores `fixed` altogether.

   Each section names its own image in --bg; if none is set the section
   keeps its existing gradient and nothing breaks.
   ===================================================================== */
.pinned {
  position: relative;
  background-image:
    linear-gradient(135deg, rgba(3, 4, 96, 0.72) 0%, rgba(10, 15, 74, 0.62) 55%, rgba(6, 60, 92, 0.66) 100%),
    var(--bg, none);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, fixed;
}

/* Photo-forward: a light scrim so the banner is clearly visible. Safe because
   every piece of text here sits on the intro panel or on a white card, not on
   the photograph itself. */
.pinned--bright {
  background-image:
    linear-gradient(135deg, rgba(3, 4, 96, 0.46) 0%, rgba(10, 15, 74, 0.38) 55%, rgba(6, 60, 92, 0.42) 100%),
    var(--bg, none);
}

/* A lighter scrim where the section already carries a lot of white type. */
.pinned--soft {
  background-image:
    linear-gradient(135deg, rgba(3, 4, 96, 0.66) 0%, rgba(10, 15, 74, 0.58) 55%, rgba(8, 70, 104, 0.62) 100%),
    var(--bg, none);
}

@media (max-width: 991px) {
  /* Pinned backgrounds misbehave on phones — let them scroll with the page,
     and serve the lighter image since it is no longer covering the viewport. */
  .pinned {
    background-attachment: scroll, scroll;
    background-image:
      linear-gradient(135deg, rgba(3, 4, 96, 0.72) 0%, rgba(10, 15, 74, 0.62) 55%, rgba(6, 60, 92, 0.66) 100%),
      var(--bg-sm, var(--bg, none));
  }

  .pinned--soft {
    background-image:
      linear-gradient(135deg, rgba(3, 4, 96, 0.66) 0%, rgba(10, 15, 74, 0.58) 55%, rgba(8, 70, 104, 0.62) 100%),
      var(--bg-sm, var(--bg, none));
  }

  .pinned--bright {
    background-image:
      linear-gradient(135deg, rgba(3, 4, 96, 0.46) 0%, rgba(10, 15, 74, 0.38) 55%, rgba(6, 60, 92, 0.42) 100%),
      var(--bg-sm, var(--bg, none));
  }
}

@media (prefers-reduced-motion: reduce) {
  .pinned {
    background-attachment: scroll, scroll;
  }
}

/* =====================================================================
   Section ornament — the divider under a centred heading
   ===================================================================== */
.orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}

.orn::before,
.orn::after {
  content: "";
  width: clamp(48px, 7vw, 92px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-bright));
}

.orn::after { background: linear-gradient(90deg, var(--accent-bright), transparent); }

.orn span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.orn svg { width: 16px; height: 16px; }

.plate .orn span,
.enq .orn span { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* =====================================================================
   Enquiries
   ===================================================================== */
.enq {
  position: relative;
  padding-block: var(--pad);
  /* Colour only — the pinned layers own background-image, and a shorthand
     here would reset them. */
  background-color: var(--plate);
  --bg: url(../images/bg/bg_removecontactus.png);
  --bg-sm: url(../images/bg/bg_removecontactus.png);  
  color: var(--on-plate);
  overflow: hidden;
}

.enq__intro {
  max-width: 780px;
  margin: 0 auto clamp(56px, 7vw, 92px);
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 48px);
  border-radius: var(--r-lg);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), rgb(8 13 62 / 28%);
  border: 1px solid var(--line-plate);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  text-align: center;
}

.enq__intro h2 { color: #fff; }

.enq__intro p {
  margin-top: 22px;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.65;
  /* color: var(--on-plate-muted); */
  color: #ffff;   
}

.enq__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
  max-width: 980px;
  margin-inline: auto;
}

/* The badge sits half outside the card, so the card needs the top room. */
.enq__card {
  position: relative;
  padding: 62px 28px 32px;
  border-radius: var(--r-lg);
  background: #fff;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.enq__card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 50%;
  transform: translateX(-50%);
  width: 176px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
}

.enq__badge {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--accent-bright), var(--accent));
  color: #fff;
  border: 5px solid var(--plate);
  box-shadow: 0 8px 24px rgba(4, 183, 216, 0.3);
}

.enq__badge svg { width: 26px; height: 26px; }

.enq__tag {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.enq__card h3 {
  margin-top: 16px;
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.enq__links { margin-top: 14px; display: grid; gap: 2px; justify-items: center; }

.enq__links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: 15.5px;
  font-weight: 550;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color 0.18s ease;
}

.enq__links a:hover { color: var(--accent); }
.enq__links svg { width: 16px; height: 16px; color: var(--accent-bright); flex-shrink: 0; }

/* =====================================================================
   11. Publications — the spread

   Four covers dealt out by hand onto a lit plate instead of ruled into a
   grid. The captions are gone, so the covers have to carry the section on
   their own and the fan only laps them by 15% — every masthead still reads
   whole, which is the point when the client is a publisher.

   Geometry contract, so the row can never widen the document:
     row = 4·cw − 3·ov,  ov = 0.15·cw  →  3.55·cw
     cw  = min(320px, 27.8%)           →  row ≤ 98.7% of the stage
   Width and the negative margin both resolve against the same flex content
   box, so they stay in lockstep at every width.

   All motion is finite — the deal, one sheen per cover and a single slow
   settle are finished inside 4.7s. Nothing loops, so no compositor layer
   is held for the life of the page and WCAG 2.2.2 needs no pause control,
   which matters here because a control would need a label and this section
   is not allowed one new word.
   ===================================================================== */
.pubs {
  display: block;
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: radial-gradient(122% 94% at 50% 0%,
              var(--paper) 0%, var(--tint-1) 52%, var(--tint-3) 100%);
  box-shadow: var(--shadow-sm);
  padding-block: clamp(46px, 5.4vw, 80px) clamp(52px, 6vw, 88px);
  padding-inline: clamp(20px, 3vw, 40px);
}

/* The light the spread is laid out under — it is what stops the plate
   reading as a flat rectangle, and what the covers appear to be lit by. */
.pubs::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4%;
  z-index: 0;
  width: min(820px, 82%);
  aspect-ratio: 3 / 2;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(4, 183, 216, 0.22), rgba(4, 183, 216, 0) 72%);
  pointer-events: none;
}

/* The z-index lives here rather than on .pubs so the covers' own 1–4
   layering is sealed inside one stacking context and can never out-paint
   the plate or the light behind them. */
.pubs__stage {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;

  --cw: min(320px, 27.8%);          /* one cover */
  --ov: calc(var(--cw) * 0.15);     /* how far the next cover laps this one */
  --give: clamp(5px, 0.55vw, 8px);  /* how far neighbours make room on hover */
}

/* Seats the fan on the plate instead of leaving it floating above one. */
.pubs__stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -26px;
  z-index: 0;
  width: 74%;
  height: 56px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(3, 4, 96, 0.15), rgba(3, 4, 96, 0) 78%);
  filter: blur(11px);
  pointer-events: none;
}

/* ---------- one cover ----------
   .pub itself never moves: it is the hit target. Everything the eye sees
   move happens on a child, so the cursor cannot fall off the card it is
   hovering and set the lift flickering on and off. */
.pub {
  position: relative;
  z-index: var(--layer, 1);
  flex: 0 0 auto;
  width: var(--cw);
  margin: 0;

  --n: 0;
  --rot: 0deg;
  --dy: 0px;
  --sd: 0ms;                        /* settle phase  */
  --sdur: 3s;                       /* settle length */

  /* The interaction pose, all defaulted, so the transform below is always
     valid: with no script and no pointer it resolves to the resting fan
     and nothing degrades to `none`. */
  --lift: 0px;
  --straight: 1;
  --pop: 1;
  --push: 0px;
  --shrink: 1;
  --sheet-shadow: var(--shadow);

  /* Entrance start, written as a share of the cover's OWN width: the
     centre-to-centre step is 0.85·cw and card n sits (n − 1.5) steps off
     centre, so this squares all four into one stack at any breakpoint. */
  --x0: calc((1.5 - var(--n)) * 85%);
  --y0: 38px;
}

.pub + .pub { margin-left: calc(var(--ov) * -1); }

/* Extends the hit area past the card's lifted bottom edge so a cursor
   resting low on a cover keeps it out rather than chattering. Vertical
   only — a wide lateral pad would steal hover from the neighbour it laps. */
.pub::after {
  content: "";
  position: absolute;
  inset: -16px -4px;
  z-index: -1;
}

/* The hand. Deliberately uneven: a real spread is never symmetrical. */
.pubs__stage .pub:nth-child(1) { --n: 0; --rot: -8.6deg; --dy: 22px; --sd:   0ms; --sdur: 2.8s; --layer: 1; }
.pubs__stage .pub:nth-child(2) { --n: 1; --rot: -2.6deg; --dy:  2px; --sd: 170ms; --sdur: 3.1s; --layer: 2; }
.pubs__stage .pub:nth-child(3) { --n: 2; --rot:  3.2deg; --dy:  6px; --sd:  80ms; --sdur: 2.9s; --layer: 3; }
.pubs__stage .pub:nth-child(4) { --n: 3; --rot:  9.2deg; --dy: 18px; --sd: 250ms; --sdur: 3.0s; --layer: 4; }

/* Layer 1 — the entrance and nothing else, so the deal's fill mode can
   never trap the hover transform underneath it. */
.pub__inner { display: block; position: relative; }

/* Layer 2 — the resting tilt, the hover pose and the settle breath. The
   pin hangs off this element too, so tab and cover move as one rigid
   object instead of the tab retracting every time the cover breathes. */
.pub__card {
  display: block;
  position: relative;
  z-index: 1;
  transform: translate3d(var(--push), calc(var(--dy) - var(--lift)), 0)
             rotate(calc(var(--rot) * var(--straight)))
             scale(calc(var(--pop) * var(--shrink)));
  transition: transform 0.44s cubic-bezier(0.2, 0.8, 0.22, 1);
}

/* The house pin, kept — it is the one thread back to the reference rail. */
.pub__card::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 12px;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  box-shadow: 0 3px 8px rgba(3, 4, 96, 0.25);
}

/* Layer 3 — the paper mount. It clips the sheen so the light can never
   escape the cover, and it owns the shadow so the lift reads as depth. */
.pub__sheet {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 6px;
  background: var(--paper);
  border-radius: var(--r-sm);
  box-shadow: var(--sheet-shadow);
  transition: box-shadow 0.44s cubic-bezier(0.2, 0.8, 0.22, 1);
}

/* The four files are 544–561px wide at 760 tall, so the ratio is pinned
   here and object-fit takes the ~2% difference off the sides. */
.pub__sheet img {
  display: block;
  width: 100%;
  aspect-ratio: 55 / 76;
  object-fit: cover;
  object-position: 50% 0;
  border-radius: calc(var(--r-sm) - 5px);
  border: 0;                        /* the mount is the frame now */
  box-shadow: none;
}

/* One pass of light per cover, fired on the tail of its own deal. */
.pub__sheet::after {
  content: "";
  position: absolute;
  inset: -24% -45%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(104deg,
              rgba(255, 255, 255, 0) 40%,
              rgba(255, 255, 255, 0.85) 50%,
              rgba(255, 255, 255, 0) 60%);
}

/* The pin used to hang off .pub. This keeps a half-applied edit from
   drawing a second one. */
.pub::before { content: none; }

/* =====================================================================
   Pulling one cover out of the fan

   Each state is a variable swap, so pointer and keyboard share one pose.
   The cover straightens only part of the way (0.45 of its resting angle)
   and lifts 16px — enough to read as picked up, small enough that its
   corners do not swing out from under the pointer. Neighbours make room
   but keep their colour: these are the client's own mastheads and dimming
   them is the quickest way to be asked why they look faded.
   ===================================================================== */
@media (hover: hover) {
  .pubs__stage .pub:hover {
    --lift: 16px;
    --straight: 0.45;
    --pop: 1.05;
    --layer: 20;
    --sheet-shadow: var(--shadow-lg), 0 0 0 3px rgba(4, 183, 216, 0.3);
  }

  /* `~` reaches the covers after the hovered one. :has() adds the ones
     before it and is kept in its OWN rule, never grouped with the `~`
     selector — one unknown selector invalidates a whole list, which would
     take the working half down with it on an older engine. */
  .pubs__stage .pub:hover ~ .pub { --push: var(--give); --shrink: 0.985; }

  .pubs__stage .pub:has(~ .pub:hover) {
    --push: calc(var(--give) * -1);
    --shrink: 0.985;
  }
}

/* The same gesture for the keyboard, the day a cover becomes a link. */
.pubs__stage .pub:focus-within {
  --lift: 16px;
  --straight: 0.45;
  --pop: 1.05;
  --layer: 20;
  --sheet-shadow: var(--shadow-lg), 0 0 0 3px rgba(4, 183, 216, 0.3);
}

/* =====================================================================
   Motion

   Gated on .js-motion AND .js-reveal: anim.js adds the first, the inline
   head script the second, and both are dropped under reduced motion or a
   missing observer. The opacity:0 pre-state sits behind the same gate, so
   no failure mode can strand a cover invisible, and the resting design IS
   the last keyframe, so nothing is ever left half-played.
   ===================================================================== */
.js-motion.js-reveal .pubs:not(.is-visible) .pub__inner {
  opacity: 0;
  will-change: transform;           /* promoted only while it is waiting */
}

/* 1. The deal — one square stack at centre, opening left to right. */
.js-motion.js-reveal .pubs.is-visible .pub__inner {
  animation: pubDeal 860ms cubic-bezier(0.22, 0.86, 0.26, 1) both;
  animation-delay: calc(220ms + var(--n) * 95ms);
}

@keyframes pubDeal {
  0% {
    opacity: 0;
    /* Translate first so the horizontal step is true horizontal; the
       counter-rotation then cancels the card's own tilt underneath, and
       the four genuinely square up into one stack rather than a skewed
       one that is up to 40px out on the end cards. */
    transform: translate3d(var(--x0), var(--y0), 0)
               rotate(calc(var(--rot) * -1))
               scale(0.9);
  }
  26% { opacity: 1; }               /* readable as a stack before it opens */
  68% {
    /* An explicit overshoot beat rather than a bouncy bezier, so the flick
       past the resting angle stays controllable. */
    transform: translate3d(calc(var(--x0) * 0.05), -9px, 0)
               rotate(calc(var(--rot) * 0.12))
               scale(1.028);
  }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

/* 2. One sheen per cover, rippling along the fan in the direction it was
   dealt, then retired. A light that keeps sweeping every few seconds is
   the most template-looking effect on the web; once is an event. */
.js-motion.js-reveal .pubs.is-visible .pub__sheet::after {
  animation: pubSheen 1.05s cubic-bezier(0.3, 0.6, 0.25, 1) backwards;
  animation-delay: calc(820ms + var(--n) * 95ms);
}

@keyframes pubSheen {
  0%   { opacity: 0;    transform: translate3d(-150%, 0, 0) skewX(-16deg); }
  12%  { opacity: 0.34; }
  82%  { opacity: 0.34; }
  100% { opacity: 0;    transform: translate3d(150%, 0, 0) skewX(-16deg); }
}

/* 3. One slow breath each, on four lengths that never line up, so the
   spread settles like paper instead of snapping to a stop. It drives the
   individual translate/rotate properties, which compose on top of the
   card's transform rather than fighting it for the same slot. */
.js-motion.js-reveal .pubs.is-visible .pub__card {
  animation: pubSettle var(--sdur) cubic-bezier(0.45, 0, 0.55, 1) backwards;
  animation-delay: calc(1400ms + var(--sd));
}

@keyframes pubSettle {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50%      { translate: 0 -7px; rotate: 0.5deg; }
}

/* 4. The plate's light comes up under the cards as they land. */
.js-motion.js-reveal .pubs.is-visible::before {
  animation: pubsBloom 1.25s cubic-bezier(0.2, 0.75, 0.25, 1) 120ms backwards;
}

@keyframes pubsBloom {
  from { opacity: 0.35; transform: translateX(-50%) scale(0.88); }
  to   { opacity: 1;    transform: translateX(-50%) scale(1); }
}

/* =====================================================================
   Responsive
   ===================================================================== */

/* The covers shrink, so the angles flatten with them — a tilt that reads
   as a considered layout on a 320px cover reads as a mistake on a 200px
   one. */
@media (max-width: 980px) {
  .pubs__stage .pub:nth-child(1) { --rot: -6.4deg; --dy: 15px; }
  .pubs__stage .pub:nth-child(2) { --rot: -2.0deg; --dy:  2px; }
  .pubs__stage .pub:nth-child(3) { --rot:  2.4deg; --dy:  5px; }
  .pubs__stage .pub:nth-child(4) { --rot:  6.6deg; --dy: 13px; }

  .pubs__stage::after { bottom: -18px; height: 42px; }

  .pubs__stage .pub:focus-within { --lift: 12px; --pop: 1.04; }
}

@media (hover: hover) and (max-width: 980px) {
  .pubs__stage .pub:hover { --lift: 12px; --pop: 1.04; }
}

/* Phone and small tablet — the fan folds onto two rows rather than
   collapsing into a pile. Two overlapping pairs keep the hand-dealt read
   and still show 85% of every cover, where a four-deep stack would hide
   three mastheads behind one and run close to 900px tall. */
@media (max-width: 700px) {
  .pubs {
    border-radius: var(--r-lg);
    padding-block: 42px 46px;
    padding-inline: clamp(16px, 4.5vw, 24px);
  }

  .pubs__stage {
    flex-wrap: wrap;
    row-gap: clamp(22px, 6vw, 34px);
    --cw: min(53%, 300px);
    --give: 0px;
  }

  .pubs__stage::after { display: none; }

  /* Row two starts a fresh line, so it must not inherit the lap. */
  .pubs__stage .pub:nth-child(3) { margin-left: 0; }

  .pub { --y0: 30px; }
  .pub::after { inset: -12px -4px; }
  .pub__sheet { padding: 5px; }

  /* Each pair deals out of its own row's centre, so --x0 is half a step. */
  .pubs__stage .pub:nth-child(1) { --rot: -4.0deg; --dy: 10px; --x0:  42.5%; }
  .pubs__stage .pub:nth-child(2) { --rot:  3.2deg; --dy:  0px; --x0: -42.5%; }
  .pubs__stage .pub:nth-child(3) { --rot: -3.4deg; --dy:  9px; --x0:  42.5%; }
  .pubs__stage .pub:nth-child(4) { --rot:  4.2deg; --dy:  0px; --x0: -42.5%; }

  .pubs__stage .pub:focus-within { --lift: 10px; --pop: 1.03; }
}

@media (hover: hover) and (max-width: 700px) {
  .pubs__stage .pub:hover { --lift: 10px; --pop: 1.03; }
}

/* =====================================================================
   Reduced motion

   anim.js never adds .js-motion and script.js strips .js-reveal under this
   preference, so none of the animation above is even selected. This block
   is for the visitor who turns the setting on mid-session, and it lands on
   the same finished composition: the tilt and the overlap are layout, not
   movement, so the spread survives whole and still looks like something a
   person arranged rather than a grid that failed to animate. Hover keeps
   the ring and the deeper shadow but stops moving the cover.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pubs::before,
  .pubs .pub__inner,
  .pubs .pub__card,
  .pubs .pub__sheet,
  .pubs .pub__sheet::after {
    animation: none !important;
    transition: none !important;
  }

  .pubs .pub__inner { opacity: 1 !important; transform: none !important; }
  .pubs .pub__card { translate: none !important; rotate: none !important; }
  .pubs .pub__sheet::after { opacity: 0 !important; }
  .pubs::before { opacity: 1; transform: translateX(-50%) scale(1); }

  .pubs__stage .pub:hover,
  .pubs__stage .pub:focus-within { --lift: 0px; --straight: 1; --pop: 1; }

  .pubs__stage .pub:hover ~ .pub { --push: 0px; --shrink: 1; }
  .pubs__stage .pub:has(~ .pub:hover) { --push: 0px; --shrink: 1; }
}

/* =====================================================================
   Motion

   Everything here is scoped to .js-motion, which js/anim.js adds to
   <html> itself. No script, no class, nothing hidden — the page is
   fully readable as static HTML. The whole block is also switched off
   under prefers-reduced-motion below.
   ===================================================================== */

/* ---- headings reveal word by word ---- */
.js-motion .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) rotate(1.2deg);
  transition: opacity 0.62s cubic-bezier(0.2, 0.75, 0.25, 1),
              transform 0.62s cubic-bezier(0.2, 0.75, 0.25, 1);
  transition-delay: calc(var(--w, 0) * 42ms);
  will-change: opacity, transform;
}

.js-motion .is-in .w,
.js-motion.is-in .w {
  opacity: 1;
  transform: none;
}

/* The heading itself must never clip a descender mid-animation. */
.js-motion .hero h1,
.js-motion .h2,
.js-motion .cta h2 { overflow: visible; }

/* ---- grids stagger their children ---- */
.js-motion .stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s cubic-bezier(0.2, 0.75, 0.25, 1),
              transform 0.55s cubic-bezier(0.2, 0.75, 0.25, 1);
  transition-delay: calc(var(--i, 0) * 55ms);
}

.js-motion .stagger.is-in > * {
  opacity: 1;
  transform: none;
}

/* Hover lifts are owned by the card rules; once a card has arrived, hand
   transform back so the two do not fight. */
.js-motion .stagger.is-in > *:hover { transition-delay: 0s; }

/* ---- the counting figures hold their width while the digits change ---- */
.cell__fig { font-variant-numeric: tabular-nums; }

/* ---- hero object drifts, very slowly ---- */
@keyframes domeDrift {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-18px) scale(1.015); }
}

.js-motion .hero__dome {
  animation: domeDrift 14s ease-in-out infinite;
}

/* ---- the hero CTA breathes once to draw the eye ---- */
@keyframes ctaPulse {
  0%, 100% { box-shadow: var(--shadow); }
  50% { box-shadow: var(--shadow), 0 0 0 10px rgba(13, 116, 126, 0.08); }
}

.js-motion .hero__actions .btn--primary {
  animation: ctaPulse 3.6s ease-in-out 1.2s infinite;
}

.js-motion .hero__actions .btn--primary:hover { animation-play-state: paused; }

/* =====================================================================
   Reveal on scroll
   ===================================================================== */
.js-reveal .reveal:not(.is-visible) { opacity: 0; transform: translateY(18px); }

.js-reveal .reveal {
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js-reveal .reveal[data-delay="1"] { transition-delay: 0.07s; }
.js-reveal .reveal[data-delay="2"] { transition-delay: 0.14s; }
.js-reveal .reveal[data-delay="3"] { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js-reveal .reveal,
  .js-reveal .reveal:not(.is-visible) {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js-motion .w,
  .js-motion .stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .js-motion .hero__dome,
  .js-motion .hero__actions .btn--primary {
    animation: none !important;
  }

  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* =====================================================================
   Responsive
   ===================================================================== */
/* The logo carries the summit name and date itself, so no text wordmark is
   set beside it. */
.brand__txt, .brand__sep { display: none; }

@media (max-width: 1180px) {
  .people, .parts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .logos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cell--wide { grid-column: span 2; }
}

/* Nine nav items plus the CTA stop clearing the bar below this width. */
@media (max-width: 1279px) {
  .nav, .header__cta { display: none; }
  .hamburger { display: flex; }
}

@media (max-width: 1024px) {

  .about__visual {
    float: none;
    width: 100%;
    margin: 0 0 28px;
  }

  .people, .parts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .topstrip__in { flex-direction: column; align-items: flex-start; gap: 10px; }
  .enq__cards { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell--wide { grid-column: span 2; }
  .people, .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contacts { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .cell--wide { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cell--wide .cell__body { margin-top: auto; }
  .parts { grid-template-columns: minmax(0, 1fr); }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__actions .btn, .cta__actions .btn { width: 100%; justify-content: center; }
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Two footer columns are still too narrow on a phone for the "Get in
     Touch" column's email addresses and its full-width button — stack to
     one column instead of letting them clip. */
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .footer__brand { grid-column: auto; }
  .footer .btn--solid { width: 100%; justify-content: center; }
}


  :root {
    --green: #68b23a;
    --green-d: #55992c;
    --teal: #33b4c8;
    --teal-d: #2694a6;
    --blue: #2f77c9;
    --purple: #5f4fa8;
    --purple-d: #4b3d88;
    --navy: #14163a;
    --navy-2: #1b1f47;
    --navy-3: #2a2168;
    --ink: #141a2e;
    --mute: #5b6b82;
    --line: #e6ecf3;
    --soft: #f2f7ef;
    --radius: 18px;
    --shadow: 0 18px 50px rgba(20, 22, 58, .10);
    --shadow-lg: 0 30px 70px rgba(20, 22, 58, .18);
    --grad: linear-gradient(120deg, var(--green) 0%, var(--teal) 50%, var(--purple) 100%);
}
.col-sm-6 {
    width: 50%;
}

.col-lg-4 {
    width: 33.333333%;
}

.section-title {
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    line-height: 1.15;
    margin-bottom: 1rem;
    letter-spacing: -.5px;
}
.text-center {
    text-align: center !important;
}
.mb-5 {
    margin-bottom: 3rem !important;
}
@media (max-width: 575.98px) {
    .col-sm-6 {
        width: 100%;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .col-sm-6 {
        width: 50%;
    }
}

@media (min-width: 992px) {
    .col-lg-4 {
        width: 33.333333%;
    }
}
@media (min-width: 992px) {
    #partnerFeatured {
        display: flex;
        flex-wrap: nowrap;
    }

    #partnerFeatured > .col-lg-4 {
        width: 33.333333%;
        flex: 0 0 33.333333%;
		padding:0px 12px 0px 12px;
    }
}
.text-white {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}
.eyebrow-light {
    color: rgb(167, 217, 138);
}
.section-dark .section-lead {
    color: rgb(170, 182, 212);
}
.section p {
    color: var(--mute);
    line-height: 1.75;
}
.section-lead {
    color: var(--mute);
    max-width: 720px;
    font-size: 1.05rem;
    margin: 0px auto;
}
.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}
  .section-dark {
    background: radial-gradient(120% 120% at 80% 0%, #241c56 0%, var(--navy) 60%);
    color: #cdd4ea;
}
    #partners {
    position: relative;
    overflow: hidden;
}
.section-dark {
    background: radial-gradient(120% 120% at 80% 0%, #241c56 0%, var(--navy) 60%);
    color: #cdd4ea;
}
.section {
    padding: 100px 0;
    position: relative;
}

/* ---------- Past Partners ---------- */
.section-dark .section-lead{color:#aab6d4;}
#partners{position:relative;overflow:hidden;}
#partners::before{content:"";position:absolute;top:-150px;left:-120px;width:460px;height:460px;background:var(--grad);filter:blur(130px);opacity:.16;border-radius:50%;pointer-events:none;z-index:0;}
#partners::after{content:"";position:absolute;bottom:-160px;right:-120px;width:420px;height:420px;background:var(--teal);filter:blur(140px);opacity:.12;border-radius:50%;pointer-events:none;z-index:0;}
#partners .container{position:relative;z-index:1;}

.pf-card{
  position:relative;background:#fff;border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:22px 18px;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:14px;
  box-shadow:0 16px 34px rgba(0,0,0,.28);transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease;
}
.pf-card:hover{transform:translateY(-8px);box-shadow:0 30px 56px rgba(0,0,0,.45);border-color:rgba(51,180,200,.75);}
.pf-logo{order:1;display:grid;place-items:center;width:100%;height:76px;}
.pf-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.82;transition:.35s ease;}
.pf-card:hover .pf-logo img{filter:grayscale(0);opacity:1;transform:scale(1.04);}
.pf-tier{
  order:2;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal-d);background:rgba(51,180,200,.12);padding:.3rem .8rem;border-radius:30px;text-align:center;
}
#partnerFeatured .pf-card{padding:30px 26px;overflow:hidden;border-color:rgba(104,178,58,.3);}
#partnerFeatured .pf-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad);}
#partnerFeatured .pf-logo{height:104px;}
#partnerFeatured .pf-logo img{filter:none;opacity:1;}
#partnerFeatured .pf-tier{color:var(--green-d);background:rgba(104,178,58,.14);}

/* ---------- Lead partners strip (sits below fixed navbar) ---------- */
.lead-partners{background:#fff;border-bottom:1px solid var(--line);padding:120px 0 26px;box-shadow:0 6px 18px rgba(20,22,58,.05);}
.lead-partners .container{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;}
.lp-group{display:flex;flex-direction:column;align-items:center;gap:12px;flex:1 1 auto;text-align:center;min-width:0;}
.lp-label{font-family:'Plus Jakarta Sans';font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);}
.lp-logos{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;}
.lp-logos img{height:56px;width:auto;max-width:100%;object-fit:contain;transition:transform .3s ease;}
.lp-logos img.lp-emblem{height:72px;}   /* square seal needs more height to match wordmarks */
.lp-logos img:hover{transform:scale(1.05);}
.lp-divider{align-self:stretch;width:1px;min-height:70px;background:var(--line);flex:0 0 auto;}

@media(max-width:991px){
  .lead-partners{padding:92px 0 24px;}
  .lead-partners .container{gap:22px;}
  .lp-logos img{height:50px;}
  .lp-logos img.lp-emblem{height:62px;}
}
/* Mobile — fit all groups on ONE line (no scroll) so every logo stays visible */
@media(max-width:767px){
  .lead-partners{padding:78px 0 18px;}
  .lead-partners .container{flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:8px;overflow:visible;}
  .lp-group{flex:0 1 auto;min-width:0;gap:8px;}
  .lp-label{font-size:.54rem;letter-spacing:.05em;line-height:1.25;}
  .lp-divider{align-self:center;width:1px;height:auto;min-height:46px;}
  .lp-logos{gap:8px;flex-wrap:nowrap;}
  .lp-logos img{height:30px;}
  .lp-logos img.lp-emblem{height:38px;}
}
@media(max-width:400px){
  .lead-partners .container{gap:5px;}
  .lp-logos{gap:6px;}
  .lp-label{font-size:.48rem;}
  .lp-logos img{height:25px;}
  .lp-logos img.lp-emblem{height:32px;}
}
/* marquee logo wall — full-bleed */
.partner-marquee{display:flex;flex-direction:column;gap:18px;margin-top:48px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.marquee-row{overflow:hidden;}
.marquee-track{display:flex;gap:18px;width:max-content;animation:marqueeL 44s linear infinite;will-change:transform;}
.marquee-row[data-dir="r"] .marquee-track{animation-name:marqueeR;animation-duration:52s;}
.partner-marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marqueeL{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes marqueeR{from{transform:translateX(-50%);}to{transform:translateX(0);}}
.p-tile{
  flex:0 0 auto;width:176px;height:175px;background:#fff;border:1px solid rgba(255,255,255,.16);
  border-radius:14px;display:grid;place-items:center;padding:14px 18px;
  box-shadow:0 14px 30px rgba(0,0,0,.28);transition:transform .3s ease,border-color .3s ease;
}
.p-tile:hover{transform:translateY(-5px);border-color:rgba(51,180,200,.7);}
.p-tile img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .35s ease;}
.p-tile:hover img{transform:scale(1.05);}
@media(max-width:575px){.p-tile{width:140px;height:82px;}}
#partnerFeatured .pf-tier{color:var(--green-d);background:rgba(104,178,58,.12);}