/* ==========================================================================
   INSPIRE ASIA — shared stylesheet
   Design authority: INSPIRE_ASIA_Website_Copy_Deck_1.md → DESIGN SYSTEM
   Aligned to AAG "Our Brand Guardrails" (Canva, 2026)
   ========================================================================== */

:root {
  /* Permanent palette — never changes between editions */
  --navy: #002d51;        /* Midnight Navy — structure, headers, footers, text on light */
  --gold: #d3b973;        /* Golden Crown — accents, rules, premium moments */
  --ochre: #d65747;       /* Alice Ochre — links, hovers, the pipe in lockups */
  --ground: #f2f3f5;      /* Not White — page ground, never pure white */
  --plum: #220021;        /* Dark Plum — eVersity contexts only */

  /* Rotates each edition — Manila 2026 warm amber */
  --edition: #d98e32;

  --navy-soft: rgba(0, 45, 81, 0.78);   /* body text on light */
  --navy-faint: rgba(0, 45, 81, 0.12);
  --font-head: "Roboto Slab", serif;
  --font-body: "Montserrat", sans-serif;
  --measure: 62ch;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--navy-soft);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
}

h1 { font-size: clamp(1.9rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }

p { max-width: var(--measure); }

a { color: var(--ochre); text-decoration: none; transition: color 0.18s ease; }
a:hover, a:focus-visible { color: var(--navy); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.container { width: min(1120px, 100% - 2 * var(--pad)); margin-inline: auto; }

section { padding-block: clamp(3rem, 7vw, 5.5rem); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ochre);
  display: block;
  margin-bottom: 0.75rem;
}

.gold-rule {
  border: 0;
  height: 3px;
  width: 64px;
  background: var(--gold);
  margin: 1.25rem 0 1.75rem;
}

/* --------------------------------------------------------------------------
   The lockup — Roboto Slab Bold navy, pipe in Alice Ochre.
   The typographic lockup IS the mark: INSPIRE ASIA never gains a logo.
   -------------------------------------------------------------------------- */
.lockup {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy);
  white-space: nowrap;
}
.lockup .pipe { color: var(--ochre); padding-inline: 0.3em; }
.on-navy .lockup, .lockup.on-navy { color: #fff; }

.acronym-line {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 2px solid var(--gold);
}

.site-header .bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
}

.site-header .lockup { font-size: 1.02rem; color: #fff; }
.site-header .lockup:hover { text-decoration: none; }

.nav-toggle {
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border-radius: 3px;
  cursor: pointer;
}

.site-nav { display: none; flex-basis: 100%; }
.site-nav.open { display: block; }

.site-nav ul {
  list-style: none;
  padding-block: 0.5rem 1.1rem;
}

.site-nav a {
  display: block;
  padding: 0.55rem 0;
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  color: #fff;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--gold); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--gold); }
.site-nav a.nav-cta {
  color: var(--navy);
  background: var(--gold);
  border-radius: 3px;
  padding: 0.55rem 1rem;
  text-align: center;
  font-weight: 600;
  margin-top: 0.4rem;
}
.site-nav a.nav-cta:hover { background: #fff; color: var(--navy); }

@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .site-nav { display: block !important; }
  .site-nav ul { display: flex; align-items: center; gap: 1.15rem; padding-block: 0; }
  .site-nav a { padding: 0.25rem 0; font-size: 0.8rem; }
  .site-nav a.nav-cta { margin-top: 0; padding: 0.5rem 1rem; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.9rem 1.7rem;
  border-radius: 3px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn-primary { background: var(--ochre); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--navy); color: #fff; text-decoration: none; }
.on-navy .btn-primary:hover { background: var(--gold); color: var(--navy); }
.btn-ghost { border-color: var(--gold); color: var(--navy); background: transparent; }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--gold); color: var(--navy); text-decoration: none; }
.on-navy .btn-ghost, .btn-ghost.on-navy { color: var(--gold); }
.on-navy .btn-ghost:hover, .btn-ghost.on-navy:hover { color: var(--navy); }

/* --------------------------------------------------------------------------
   Signature device 1 — the callout: circle with one squared corner (top-right).
   Device layer only; solid fills for everyday containers. The supplied gold
   frame PNGs replace .callout-goldframe when exported (see README).
   -------------------------------------------------------------------------- */
.callout {
  border-radius: 50%;
  border-top-right-radius: 0;
}
.callout-fill-navy { background: var(--navy); color: #fff; }
.callout-fill-edition { background: var(--edition); color: #fff; }
/* Official gold-frame exports: callout-goldframe.png (w3, default) and
   callout-goldframe-w5.png (thicker stroke — use when rendered below ~120px). */
.callout-goldframe {
  background: url("../assets/callout-goldframe.png") center / contain no-repeat;
}
.callout-goldframe-w5 {
  background: url("../assets/callout-goldframe-w5.png") center / contain no-repeat;
}

.callout-tile {
  width: clamp(120px, 16vw, 168px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.1rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Signature device 2 — the speech bubble (the summit IS a conversation)
   -------------------------------------------------------------------------- */
.speech-bubble {
  position: relative;
  background: #fff;
  border: 2px solid var(--gold);
  border-radius: 18px;
  padding: 1.6rem 1.8rem;
  max-width: 640px;
}
.speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 42px;
  width: 24px;
  height: 24px;
  background: inherit;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: skewX(38deg) rotate(45deg);
  border-bottom-right-radius: 4px;
}
.speech-bubble.on-navy-bubble {
  background: var(--navy);
  color: #fff;
}
.speech-bubble.on-navy-bubble h3 { color: var(--gold); }

/* Presenter section: speech bubble balanced by a large AAG mark */
.presenter-row {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  flex-wrap: wrap;
}
.presenter-row .speech-bubble { flex: 1 1 380px; }
.presenter-row .presenter-logo {
  flex: 0 1 auto;
  width: clamp(280px, 32vw, 460px);
  height: auto;
  margin-inline: auto;
}

/* From the Founder — solid gold medallion is the founder's treatment alone;
   the gold frame outline stays reserved for speakers and VIPs */
.founder-row {
  display: flex;
  align-items: flex-end;
  gap: clamp(2rem, 5vw, 4.5rem);
  flex-wrap: wrap;
}
.founder-portrait {
  flex: 0 1 auto;
  width: clamp(260px, 30vw, 400px);
  height: auto;
  margin-inline: auto;
  /* bleed through the section padding so the crop sits flush on the navy band */
  margin-bottom: calc(-1 * clamp(3rem, 7vw, 5.5rem));
}
.founder-words { flex: 1 1 380px; align-self: center; padding-bottom: 1rem; }
/* When the row stacks, the bleed would pull text under the portrait —
   put the words first and let the portrait close the section instead */
@media (max-width: 767px) {
  .founder-portrait { order: 2; }
  .founder-words { order: 1; padding-bottom: 0; }
}
.founder-sign {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--navy);
  margin-top: 1.5rem;
}
.founder-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-top: 0.25rem;
}
.founder-cred {
  font-size: 0.88rem;
  line-height: 1.6;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--navy-faint);
}

/* --------------------------------------------------------------------------
   Signature device 3 — fast forwards (>>>): navy / ochre / gold sequence
   -------------------------------------------------------------------------- */
.ff { display: inline-flex; gap: 0.28rem; align-items: center; }
.ff span {
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 12px solid var(--navy);
}
.ff span:nth-child(2) { border-left-color: var(--ochre); }
.ff span:nth-child(3) { border-left-color: var(--gold); }
.ff.on-navy span:first-child { border-left-color: var(--ground); }

.section-divider {
  display: flex;
  justify-content: center;
  padding-block: 0.5rem;
}

/* --------------------------------------------------------------------------
   Hero — navy ground, host-country halftone (device 4) in the edition accent
   -------------------------------------------------------------------------- */
.hero {
  background: var(--navy);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 9vw, 7rem);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/ph-halftone.svg?v=3") no-repeat right -8% center / auto 118%;
  opacity: 0.5;
  pointer-events: none;
}
.hero .container { position: relative; }
.hero h1 { color: #fff; }
.hero .hero-presenter {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.hero .hero-presenter img {
  height: clamp(56px, 9vw, 88px);
  width: auto;
}
.hero .hero-presenter span {
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.hero .lockup-line {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.hero .lockup-line .pipe { color: var(--ochre); padding-inline: 0.3em; }
.hero .acronym-line { color: rgba(255, 255, 255, 0.75); max-width: 46ch; margin-bottom: 1.6rem; }
.hero .theme { margin-bottom: 1.2rem; max-width: 22ch; }
.hero .kicker {
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  max-width: 52ch;
  margin-bottom: 2rem;
}
.hero .meta-line {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   Tiles & cards
   -------------------------------------------------------------------------- */
.tile-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
  .tile-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .tile-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.tile {
  background: #fff;
  border-top: 3px solid var(--gold);
  padding: 1.6rem 1.5rem;
}
.tile h3 { margin-bottom: 0.6rem; }
.tile.tile-navy { background: var(--navy); border-top-color: var(--ochre); color: rgba(255,255,255,0.85); }
.tile.tile-navy h3 { color: var(--gold); }

.substrip { background: #fff; border-block: 1px solid var(--navy-faint); }
.substrip .tile { border-top: none; padding-inline: 0; background: none; }
.substrip .tile h3 { color: var(--ochre); font-size: 1.05rem; }

/* Edition card */
.edition-card {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.88);
  padding: clamp(2rem, 5vw, 3.25rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  position: relative;
  overflow: hidden;
}
.edition-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/ph-halftone.svg?v=3") no-repeat right -12% center / auto 130%;
  opacity: 0.35;
  pointer-events: none;
}
.edition-card > * { position: relative; }
.edition-card h2 { color: #fff; }
.edition-badge {
  display: inline-block;
  background: var(--edition);
  color: #fff;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: 2px;
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Programme timeline
   -------------------------------------------------------------------------- */
.timeline { list-style: none; max-width: 760px; }
.timeline li {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 1.1rem;
  padding-block: 0.95rem;
  border-left: 2px solid var(--gold);
  padding-left: 1.2rem;
  margin-left: 0.4rem;
  position: relative;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 1.55rem;
  width: 12px;
  height: 12px;
  background: var(--ochre);
  border-radius: 50%;
  border-top-right-radius: 0; /* the callout, in miniature */
}
.timeline .time {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  font-size: 0.95rem;
  white-space: nowrap;
}
.timeline .session { font-size: 0.95rem; }
.timeline li.signature { background: #fff; border-left-color: var(--ochre); }
.timeline li.signature::before { background: var(--gold); }
.timeline li.signature .session strong { color: var(--ochre); }

.programme-note {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--navy-soft);
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   Speaker cards — silhouette placeholders, "to be announced"
   -------------------------------------------------------------------------- */
.speaker-card {
  background: #fff;
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
  border-top: 3px solid var(--gold);
}
.speaker-card .silhouette {
  width: 128px;
  aspect-ratio: 1;
  margin: 0 auto 1.2rem;
  background: var(--navy);
  border-radius: 50%;
  border-top-right-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/* head-and-shoulders silhouette */
.speaker-card .silhouette::before {
  content: "";
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(211, 185, 115, 0.55);
}
.speaker-card .silhouette::after {
  content: "";
  position: absolute;
  bottom: -12%;
  left: 50%;
  transform: translateX(-50%);
  width: 64%;
  aspect-ratio: 1.35;
  border-radius: 50% 50% 0 0;
  background: rgba(211, 185, 115, 0.55);
}
.speaker-card.premium .silhouette {
  background: url("../assets/callout-goldframe.png") center / contain no-repeat;
}
.speaker-card.premium .silhouette::before,
.speaker-card.premium .silhouette::after { background: rgba(0, 45, 81, 0.35); }
/* keep the bust inside the frame's inner edge */
.speaker-card.premium .silhouette::before { top: 29%; width: 26%; }
.speaker-card.premium .silhouette::after { bottom: 13%; width: 46%; }
.speaker-card .category {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ochre);
  display: block;
  margin-bottom: 0.5rem;
}
.speaker-card h3 { font-size: 1.08rem; margin-bottom: 0.5rem; }
.speaker-card .tba {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--ground);
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
  margin-top: 0.75rem;
}
.speaker-card p { font-size: 0.9rem; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Partner logo band placeholders
   -------------------------------------------------------------------------- */
.logo-band {
  display: grid;
  gap: 1rem;
  /* minmax(0, …) rather than a bare 1fr: a bare 1fr floors each track at its
     content's min-content width, and a partner logo's intrinsic width is wider
     than half a phone screen, so two tracks pushed the page into a horizontal
     scroll as far up as 390px. The images are already capped at 78% of the
     slot, so nothing needs the floor. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .logo-band { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .logo-band { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.logo-slot {
  background: #e4e6ea;
  color: #8b93a1;
  aspect-ratio: 8 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Forms (Register / EOI)
   -------------------------------------------------------------------------- */
.form-card {
  background: #fff;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 3px solid var(--gold);
  max-width: 640px;
}
.form-field { margin-bottom: 1.25rem; }
.form-field label {
  display: block;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--navy);
  padding: 0.75rem 0.9rem;
  border: 1px solid #c6ccd6;
  border-radius: 3px;
  background: var(--ground);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}
.form-note { font-size: 0.84rem; font-style: italic; margin-top: 1.25rem; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq-list { max-width: 760px; }
.faq-list details {
  background: #fff;
  border-left: 3px solid var(--gold);
  margin-bottom: 0.85rem;
}
.faq-list summary {
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  font-size: 1.02rem;
  padding: 1.1rem 1.3rem;
  list-style: none;
  position: relative;
  padding-right: 3rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ochre);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.3rem;
}
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { padding: 0 1.3rem 1.2rem; }

/* --------------------------------------------------------------------------
   Bands & sections
   -------------------------------------------------------------------------- */
.band-navy { background: var(--navy); color: rgba(255, 255, 255, 0.88); }
.band-navy h2, .band-navy h3 { color: #fff; }
.band-navy .eyebrow { color: var(--gold); }
.band-white { background: #fff; }

.cta-band {
  background: var(--navy);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/ph-halftone.svg?v=3") no-repeat left -14% center / auto 150%;
  opacity: 0.22;
  pointer-events: none;
}
.cta-band .container { position: relative; }
.cta-band h2 { color: #fff; margin-bottom: 1rem; }
.cta-band p { margin-inline: auto; margin-bottom: 1.75rem; }

/* --------------------------------------------------------------------------
   Footer — band + legal
   -------------------------------------------------------------------------- */
/* Presenter logo strip — eVersity lockup permitted in footer/partner contexts only */
.footer-logos {
  background: #fff;
  border-top: 1px solid var(--navy-faint);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.footer-logos .container {
  width: min(1360px, 100% - 2 * var(--pad));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 4.5vw, 4rem);
  flex-wrap: wrap;
}
.footer-logos img { height: clamp(110px, 15vw, 200px); width: auto; }
/* AAG presents; the three institutions/platforms sit a step smaller, equal */
.footer-logos .sub-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.footer-logos .sub-brand img { height: clamp(56px, 7vw, 84px); }
.footer-logos .sub-brand span {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: #8b93a1;
}
/* eVersity's tight crop reads oversized — tame it to optical parity */
.footer-logos .sub-brand .eversity { height: clamp(50px, 6vw, 74px); }

.footer-band {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.85);
  border-top: 2px solid var(--gold);
  padding-block: 1.6rem;
  font-size: 0.86rem;
}
.footer-band .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
}
.footer-band .aag-white { height: 34px; width: auto; }
.footer-band .powered-by {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
}
.footer-band .eversity-white { height: 26px; width: auto; opacity: 0.9; }
@media (min-width: 960px) { .footer-band .powered-by { margin-left: auto; } }
.footer-band a { color: var(--gold); font-weight: 600; }
.footer-band a:hover { color: #fff; }
.footer-band .dot { color: var(--ochre); }

.footer-legal {
  background: #001c33;
  color: rgba(255, 255, 255, 0.6);
  padding-block: 1.4rem;
  font-size: 0.76rem;
}
.footer-legal .container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}
.footer-legal a { color: rgba(255, 255, 255, 0.6); }
.footer-legal a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   Page hero (interior pages)
   -------------------------------------------------------------------------- */
.page-hero {
  background: var(--navy);
  color: #fff;
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.page-hero h1 { color: #fff; max-width: 24ch; }
.page-hero .eyebrow { color: var(--gold); }
.page-hero p { color: rgba(255, 255, 255, 0.82); margin-top: 1rem; }
.page-hero.with-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/ph-halftone.svg?v=3") no-repeat right -10% center / auto 140%;
  opacity: 0.35;
  pointer-events: none;
}
.page-hero .container { position: relative; }

/* Two-panel day-at-a-glance */
.panel-pair { display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .panel-pair { grid-template-columns: 1fr 1fr; } }
.day-panel { background: #fff; padding: 1.9rem 1.7rem; border-top: 3px solid var(--gold); }
.day-panel.pm { border-top-color: var(--ochre); }
.day-panel h3 .half {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: 0.4rem;
}

/* Contact blocks */
.contact-grid { display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-card { background: #fff; padding: 1.7rem 1.5rem; border-top: 3px solid var(--gold); }
.contact-card h3 { font-size: 1.02rem; margin-bottom: 0.5rem; }
.contact-card .placeholder {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #8b93a1;
  background: var(--ground);
  padding: 0.4rem 0.7rem;
  border-radius: 2px;
  display: inline-block;
}

.social-row { display: flex; gap: 1rem; margin-top: 1rem; }
.social-row a {
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Utility */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.center { text-align: center; }
.center p, .center .gold-rule { margin-inline: auto; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Confirmed speaker — photo in the callout, gold frame on top (speaker tier) */
.speaker-card .speaker-photo {
  width: 128px;
  aspect-ratio: 1;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  border-top-right-radius: 0;
  overflow: hidden;
  position: relative;
  background: var(--ground);
}
.speaker-card .speaker-photo img {
  /* clip to the gold ring's inner edge so the portrait never bleeds past the stroke */
  position: absolute;
  inset: 5.5%;
  width: 89%;
  height: 89%;
  border-radius: 50%;
  border-top-right-radius: 0;
  object-fit: cover;
  object-position: center;
}
.speaker-card .speaker-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/callout-goldframe.png") center / contain no-repeat;
}
/* The role is the heading, the organisation the line under it. Weight and size
   carry the difference now, and the organisations lose their bullets, so the
   only bullets left on the card mark parts of an organisation rather than
   organisations themselves. */
.speaker-card .speaker-role {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--navy);
  margin-bottom: 0.12rem;
}

/* Featured tier — confirmed speakers, larger presentation */
.featured-speakers { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .featured-speakers { grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); } }
/* Grid rather than flex, so the bio can run the full width beneath both
   columns instead of being trapped in the narrow one beside the portrait.
   Titles have grown - KV holds three organisations, Dr Cordova five roles -
   and a half-width column could not carry them and a bio as well. */
.speaker-card.featured {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "photo words"
    "bio   bio";
  align-items: start; /* pin the portrait to the top so every ring sits at the same height, whatever the title length */
  /* Cards stretch to match the tallest in the row. The photo/words row takes
     the spare height and the bio row hugs the bottom, so every card's
     "About & at the summit" toggle closes on the same line. */
  grid-template-rows: 1fr auto;
  column-gap: clamp(1.2rem, 2.4vw, 1.8rem);   /* the old gap, less 20% */
  row-gap: clamp(0.9rem, 1.8vw, 1.3rem);
  text-align: left;
  /* Vertical padding unchanged; horizontal cut by 30% to buy the width the
     longer titles need. */
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.225rem, 2.1vw, 1.75rem);
}
.speaker-card.featured .speaker-photo {
  grid-area: photo;
  width: clamp(160px, 18vw, 208px);
  margin: 0.35rem 0 0; /* optical alignment with the category eyebrow */
  flex-shrink: 0;
}
.speaker-card.featured .featured-words { grid-area: words; }
.speaker-card.featured .featured-bio {
  grid-area: bio;
  margin-inline: 0;
  margin-bottom: 0;
}
.speaker-card.featured h3 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.speaker-card.featured .featured-words p { margin-inline: 0; }

/* The organisations a speaker represents, one per line under their title.
   A list rather than <br>-separated text: these are three separate bodies,
   and the bullets are what make the boundary visible once a line wraps. */
/* A speaker may hold several distinct roles, each at its own body: the title
   is a heading and the organisations sit under it. Tighten the gap between a
   heading and its own list, and open one above the next heading, so the pairs
   read as pairs rather than as one long ladder. */
.speaker-role + .role-orgs { margin-top: 0; }
.role-orgs + .speaker-role { margin-top: 0.85rem; }

.role-orgs {
  list-style: none;
  margin: 0 0 0.55rem;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--navy);
}
.role-orgs li {
  position: relative;
  margin-bottom: 0.08rem;
  line-height: 1.4;
}
/* top-level organisations carry no bullet */
/* One level of nesting, for the parts of an organisation rather than another
   organisation - Dr Cordova's two colleges within one university. Hollow ring
   against the parent's solid dot, and italic, so the subordinate relationship
   is visible without a second colour. */
.role-orgs ul {
  list-style: none;
  margin: 0.12rem 0 0.1rem;
  padding-left: 1.05rem;
  font-style: italic;
  letter-spacing: 0.01em;
}
.role-orgs ul li::before {
  content: "";
  position: absolute;
  left: -1.05rem;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

/* Navy with a quiet underline, the same treatment the contact page's
   organisation links use - these read as titles first, links second. */
.role-orgs a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: rgba(0, 45, 81, 0.35);
  text-underline-offset: 3px;
}
.role-orgs a:hover, .role-orgs a:focus-visible {
  color: var(--ochre);
  text-decoration-color: currentColor;
}
/* The expansion of an initialism, subordinate to the name it follows. */
.role-orgs .org-expand { letter-spacing: 0.01em; }

@media (max-width: 559px) {
  .speaker-card.featured {
    grid-template-columns: 1fr;
    grid-template-areas: "photo" "words" "bio";
    text-align: center;
  }
  .speaker-card.featured .speaker-photo { margin: 0 auto; }
  /* Centred text and left-hung bullets do not agree; let the list centre too. */
  .role-orgs ul { padding-left: 0; }
  .role-orgs ul li::before { display: none; }
}

/* Programme Partners tier — presenting on the day; distinct from endorsers */
.pp-row { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.pp-tile {
  background: #fff;
  border-top: 3px solid var(--gold);
  padding: 1.7rem 2.2rem 1.4rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.pp-tile img { height: clamp(72px, 9vw, 96px); width: auto; }
.pp-tile span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ochre);
}

.session-credit { color: var(--ochre); font-weight: 600; white-space: nowrap; }

/* Legal documents (privacy, terms) */
.legal { max-width: 760px; }
.legal h3 { margin-top: 2rem; margin-bottom: 0.6rem; }
.legal p { margin-bottom: 0.9rem; }
.legal ul { margin: 0 0 0.9rem 1.4rem; }
.legal li { margin-bottom: 0.45rem; }

/* Memberships strip — AAG's own memberships; distinct from summit partners */
/* Endorsing organisations, carried into the footer of every page.
   THE TILES ARE THE PARTNERS-PAGE TILES, reused verbatim: same .logo-slot
   .logo-real markup, same sizing rules, including the per-mark tuning done on
   that page. Only the card chrome is dropped here, because a white card on a
   white footer is invisible and its gold rule would read as a second component
   bolted on.
   That reuse is deliberate rather than convenient — it makes the partners page
   the single source of truth for how big each mark sits. Re-tune it there and
   the footer follows on its own. Do NOT copy the sizes into footer-specific
   rules; that is how the two drift apart. */
.footer-logos .partner-strip {
  flex-basis: 100%;
  /* Grid, not flex: grid rows stretch their tiles to a common height, so the
     labels sit on one baseline without anything having to be kept in step.
     A flex row let each tile keep its own height and the crest ran 3px taller.
     Four across, two on a phone — four would leave a 3+1 orphan at 375px. */
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.8rem);
  margin-top: clamp(1rem, 2.2vw, 1.6rem);
}
@media (max-width: 620px) {
  .footer-logos .partner-strip { grid-template-columns: repeat(2, auto); }
}
.footer-logos .partner-strip .logo-slot.logo-real {
  background: transparent;
  border-top: none;
  /* width drives everything: .logo-slot carries aspect-ratio 8/5, and the mark
     caps are percentages of the tile, so the whole set scales together */
  /* roughly double the first pass, at Ingrid's request: big enough that the
     lockups are legible on their own, which is why the acronym labels below
     them have gone. The marks keep their partners-page proportions — this is
     the same tile, scaled. */
  width: clamp(140px, 22vw, 316px);
  /* the tile's own 0.5rem gap is ~3% of a 320px partners-page tile and ~8% of
     one this size, which is enough to push the tallest marks past the 8/5 box
     and leave the row with tiles of four different heights. Spacing here comes
     from the image's auto margins instead. The mark caps are untouched. */
  gap: 0;
}
.footer-logos .partner-strip .logo-slot.logo-real img {
  /* DO NOT REMOVE EITHER OF THESE.
     The tile is a flex column, so the mark is a flex item and defaults to
     flex-shrink: 1. At this size the content is close enough to the tile that
     the browser shrinks the image's HEIGHT to make it fit — width unchanged —
     which stretches the artwork rather than scaling it. Measured before this
     was added: Invest & Trade WA rendered at 1.87:1 against a true 3.26:1, so
     a government coat of arms was being squashed by well over a third.
     It does not happen on the partners page because those tiles are large
     enough never to trigger the shrink, which is exactly why it is easy to
     ship. object-fit is the second line of defence: if anything ever does
     squeeze the box, the mark letterboxes instead of distorting. */
  /* THE ACTUAL CAUSE of the distortion above: .footer-logos img sets an
     explicit `height` for the brand-family row, and these tiles sit inside
     that same block, so they inherited it. Height was then clamped by
     max-height and width independently by max-width — two dimensions set
     separately, so the artwork stretched to fill rather than scaling.
     Releasing height lets the max-* pair act as constraints again, which is
     what preserves the aspect ratio. */
  height: auto;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}
.footer-logos .memberships {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9rem 1.4rem;
  margin-top: clamp(1.1rem, 2.5vw, 1.75rem);
  padding-top: clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid var(--navy-faint);
}
.footer-logos .memberships span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8b93a1;
}
.footer-logos .memberships img { height: clamp(38px, 4.5vw, 52px); width: auto; }
.footer-logos .memberships img.wam { height: clamp(48px, 5.5vw, 64px); }

/* Featured speaker awaiting portrait — silhouette seated inside the gold ring */
.speaker-card .speaker-photo .silhouette {
  position: absolute;
  inset: 5.5%;
  width: 89%;
  height: 89%;
  margin: 0;
  border-radius: 50%;
  border-top-right-radius: 0;
}

/* Confirmed partner tile in the logo band */
.logo-slot.logo-real {
  background: #fff;
  flex-direction: column;
  display: flex;
  gap: 0.5rem;
  border-top: 3px solid var(--gold);
}
.logo-slot.logo-real img { max-height: 62%; max-width: 78%; width: auto; }
/* crest-shaped marks (near-square) read smaller than wide lockups at the same cap; let them stand taller */
.logo-slot.logo-real img[src*="iachtp"] { max-height: 80%; }
/* wide government lockups need width more than height; Austrade's file also
   carries internal padding, so both get a larger box than the default */
.logo-slot.logo-real img[src*="invest-trade-wa"],
.logo-slot.logo-real img[src*="austrade"] { max-width: 96%; max-height: 82%; }
.logo-slot.logo-real { justify-content: flex-start; }
.logo-slot.logo-real img { margin-top: auto; margin-bottom: auto; }
/* labels share one baseline at the foot of every tile */
.logo-slot.logo-real span { color: var(--navy); letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 600; margin-bottom: 0.9rem; }

/* AAG group direct contacts on the Contact page */
.contact-card p { font-size: 0.86rem; margin-bottom: 0.45rem; }
/* Links inside contact cards: navy, quietly underlined — recognisably links without the ochre shout */
.contact-card a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: rgba(0, 45, 81, 0.35);
  text-underline-offset: 3px;
}
.contact-card a:hover, .contact-card a:focus-visible { color: var(--ochre); text-decoration-color: currentColor; }

/* Homepage: hero CTA row, proof line, speaker preview, agenda glance */
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.substrip .org-proof {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--navy-faint);
  font-size: 0.85rem;
  color: #66707f;
}
.mini-speakers { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; }
.mini-speakers .speaker-card { flex: 0 1 280px; width: 280px; } /* fixed width: cards match whether a row holds one speaker or four */
.glance {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.7rem 1.6rem;
  max-width: 980px;
}
.glance li { font-size: 0.93rem; border-left: 3px solid var(--gold); padding-left: 0.75rem; }
.glance b { font-family: var(--font-head); color: var(--navy); margin-right: 0.4rem; }

/* Regions represented — speakers page banner */
.regions-band { padding-block: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--navy-faint); }
.regions-band .center-eyebrow { text-align: center; }
.regions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  margin-top: 0.5rem;
}
.region {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  font-size: 1.05rem;
}
.region-flag {
  height: 1.9rem;
  width: auto;
  /* the Philippine hoist is white, so the edge needs defining on a white band */
  border: 1px solid var(--navy-faint);
  border-radius: 2px;
}
.regions-note {
  text-align: center;
  margin: 1.4rem auto 0;
  font-size: 0.88rem;
  color: #66707f;
}
.region-map { height: 2.7rem; width: auto; }

/* Presenter strip — the full-colour AAG mark on white, above the navy hero */
.presents-strip {
  background: #fff;
  padding-block: clamp(1rem, 2.2vw, 1.6rem);
}
.presents-strip .container {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  /* The logo is 196px wide at its 110px floor, and "presents" is one
     letter-spaced word that cannot break. Below about 355px the two no longer
     fit side by side and the row pushed the whole page into a horizontal
     scroll. Let the credit drop under the logo instead of shrinking either. */
  flex-wrap: wrap;
}
.presents-strip img { height: clamp(110px, 15vw, 200px); width: auto; }
.presents-strip span {
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8b93a1;
}

/* The short gold rule is redundant when gold-topped components sit right
   below it — a small dash above long dashes. Hide it in those sections. */
.gold-rule:has(+ .tile-grid),
.gold-rule:has(+ .panel-pair),
.gold-rule:has(+ .featured-speakers),
.gold-rule:has(+ .mini-speakers),
.gold-rule:has(+ .pp-row),
.gold-rule:has(+ .contact-grid),
.gold-rule:has(+ .org-grid),
.gold-rule:has(+ .event-panels),
.gold-rule:has(+ .logo-band),
.gold-rule:has(+ p + .tile-grid),
.gold-rule:has(+ p + .pp-row),
.gold-rule:has(+ p + .form-card) {
  /* collapse to a 20px spacer: the dash disappears but the heading keeps
     clear air above the component's own gold top line (Lloyd, 20 Aug) */
  height: 0;
  background: none;
  margin: 0 0 20px;
}


/* ---------- Event photography — featuring, not pitching ----------
   Frames use the signature squared top-right corner; captions are
   reportage (event · place · date). No CTAs near photos. */
.event-feature { margin-top: 1.6rem; }
.event-feature .lead {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 14px; border-top-right-radius: 0;
}
.event-gallery {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; margin-top: 0.9rem;
}
@media (min-width: 820px) { .event-gallery { grid-template-columns: repeat(4, 1fr); } }
.event-gallery img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 10px; border-top-right-radius: 0;
}
.event-caption {
  max-width: none;
  margin-top: 0.75rem; font-size: 0.82rem; line-height: 1.55; color: var(--muted, #6b7482);
}
.event-caption strong { color: var(--navy); font-weight: 600; }
.event-panels { display: grid; gap: 1.25rem; }
.event-panel { background: #fff; padding: 1.9rem 1.7rem; border-top: 3px solid var(--gold); }
.event-panel.pm { border-top-color: var(--ochre); }
.event-panel h3 .half {
  display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ochre); margin-bottom: 0.4rem;
}
.event-panel h3 { margin-bottom: 0.6rem; }
.event-panel > p { max-width: none; }
.event-panel .proof { margin-top: 0.6rem; font-size: 0.9rem; color: var(--navy); font-weight: 600; }
/* Programme: a single field photo beneath the signature session */
.field-photo { margin: 1.4rem 0 0; max-width: 760px; }
.field-photo img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 14px; border-top-right-radius: 0;
}
.field-photo figcaption { margin-top: 0.6rem; font-size: 0.82rem; line-height: 1.55; color: var(--muted, #6b7482); }
.field-photo figcaption strong { color: var(--navy); font-weight: 600; }

/* About — in the room: a row of field photographs beneath the founder block */
.field-row { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .field-row { grid-template-columns: repeat(3, 1fr); } }
.field-row figure { margin: 0; }
.field-row img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 12px; border-top-right-radius: 0;
}
.field-row figcaption { margin-top: 0.55rem; font-size: 0.8rem; line-height: 1.5; color: var(--muted, #6b7482); }
.field-row figcaption strong { color: var(--navy); font-weight: 600; }
/* Home — already in practice: three windows, one per recent event */
.practice-strip { display: grid; gap: 1rem; }
@media (min-width: 720px) { .practice-strip { grid-template-columns: repeat(3, 1fr); } }
.practice-strip a { display: block; color: inherit; text-decoration: none; }
.practice-strip img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 12px; border-top-right-radius: 0;
}
.practice-strip .cap { margin-top: 0.6rem; font-size: 0.82rem; line-height: 1.5; color: var(--muted, #6b7482); }
.practice-strip .cap strong { display: block; color: var(--navy); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.1rem; }

/* The AAG Group — direct contacts: 2×2, logo as the identity (left), details (right) */
/* Two-up only when each card can hold its own two columns. At 760px they could
   not: a card got half the container, spent 200px of it on the logo track and
   48 on padding, and left about 70px for an address — which then broke one word
   per line. minmax lets the count follow the room, the way .featured-speakers
   already does; min(…, 100%) keeps it from overflowing a container narrower
   than the floor. */
.org-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
}
.org-card {
  background: #fff; border-top: 3px solid var(--gold);
  /* The logo track gives way before the text does. At 200px fixed it did not:
     on a two-up card around 460px wide it kept its full width and left the
     addresses less room than the longest of them needs. */
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr; align-items: center; gap: 1.5rem;
  padding: 1.6rem 1.6rem 1.6rem 1.4rem; min-height: 150px;
}
.org-logo { height: 96px; display: flex; align-items: center; justify-content: center; }
.org-logo img { max-height: 64px; max-width: 100%; width: auto; height: auto; }
.org-logo img.aag { max-height: 120px; }        /* map halo: size by letterform */
.org-logo img.eversity { max-height: 50px; }
.org-details p { margin: 0 0 0.4rem; font-size: 0.92rem; line-height: 1.45; }
.org-details p:last-child { margin-bottom: 0; }
.org-details a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(0,45,81,0.35); text-underline-offset: 3px; font-weight: 500; }
.org-details a:hover, .org-details a:focus-visible { color: var(--ochre); text-decoration-color: currentColor; }
.org-details .org-meta { font-size: 0.8rem; color: #6b7482; letter-spacing: 0.02em; margin-top: 0.3rem; }
@media (max-width: 479px) {
  .org-card { grid-template-columns: 1fr; text-align: center; }
  .org-logo { height: 84px; }
  /* support@eversityonlinecampus.com is one unbreakable token roughly as wide
     as the whole card here, so it has to break. `anywhere` rather than
     `break-word` because only `anywhere` also lowers the min-content
     contribution, which is the half that stops the card forcing a page scroll.
     Scoped to this width so it never breaks an address that had room. */
  .org-details { overflow-wrap: anywhere; }
}

/* Day at a Glance: the heading's two sentences align with the two panels below */
.split-heading { display: grid; gap: 1.25rem; margin-bottom: 1.4rem; }
@media (min-width: 820px) {
  .split-heading { grid-template-columns: 1fr 1fr; }
  .split-heading .pm-half { display: block; }
}
@media (max-width: 819px) { .split-heading span { display: block; } }

/* Return to top — one floating control, injected on every page by main.js.
   Sits under the sticky header's z-index so an open mobile nav always wins. */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  /* clear of the iPhone home indicator */
  margin-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 40;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 45, 81, 0.25);
  /* visibility, not just opacity, so it leaves the tab order while hidden */
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold); color: var(--navy); }
.to-top:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.to-top svg { display: block; width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
@media print { .to-top { display: none; } }

/* Venue band with the Quezon Memorial Circle running behind it.
   The tiles are opaque white so they need no help; it is the eyebrow and the
   heading that float, so the scrim is weighted to the top where they sit and
   eases off by the time it reaches the tiles. That fade is also the effect
   itself, not just a legibility fix. */
/* Video bands ---------------------------------------------------------------

   A section with footage running behind it. Two exist, both on manila-2026:
   the Why Manila band near the top and the venue band lower down. What follows
   is the shared mechanism; each band then brings its own scrim, because what
   sits on top of them differs and that is what a scrim has to answer to. */

.video-band { position: relative; isolation: isolate; overflow: hidden; }

.video-band-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  /* Longhands, not the shorthand: each band sets its own background-image
     below, and the shorthand would reset it depending on rule order. */
  background-color: var(--navy);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* 16:9 source into a much wider, shorter band: size to the larger axis and
   centre, which is object-fit: cover done by hand, since an iframe has none. */
.video-band-media iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 177.78vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  border: 0;
  pointer-events: none;
}

/* No autoplaying motion for anyone who has asked not to have it. Each band's
   still remains, so both keep their look. */
@media (prefers-reduced-motion: reduce) {
  .video-band-media iframe { display: none; }
}

/* The white frame. Same vocabulary as .tile and .day-panel — #fff under a gold
   rule — so it reads as part of the site rather than as a caption laid over a
   video. Being opaque is the point: the copy inside keeps the section's own
   navy-on-white colours and owes nothing to what the footage is doing behind
   it, which a scrim can only ever negotiate with. */
.video-panel {
  background: #fff;
  border-top: 3px solid var(--gold);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  /* Hug the copy rather than guess a width: the paragraph is already capped at
     the 62ch measure, so the panel sizes to whichever of it and the heading is
     wider, and the skyline stays visible beside it. Falls to full width on its
     own once the container is narrower than the text wants to be. */
  width: fit-content;
  max-width: min(100%, 56rem);
  box-shadow: 0 6px 28px rgba(0, 45, 81, 0.28);
}
.video-panel > :last-child { margin-bottom: 0; }

/* Why Manila — an aerial timelapse of the skyline at night. The scrim is much
   lighter than the venue band's below: that footage is already dark, and a
   heavy veil over it yields a flat navy rectangle rather than a city. It is
   here to seat the panel and hold the band in the palette, not to carry any
   text. */
.skyline-video-media {
  background-image: url("https://customer-kafouaoxj626m9k9.cloudflarestream.com/c1322a0f27a10a617f5a437274dd6407/thumbnails/thumbnail.jpg");
}
.skyline-video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(0, 45, 81, 0.46) 0%,
    rgba(0, 45, 81, 0.30) 100%
  );
}
/* The divider rides on the footage rather than on the page ground below it, so
   the band runs past the chevrons instead of stopping above them. The section's
   own bottom padding is trimmed to match, or the gap below them doubles. */
.video-band > .section-divider { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.skyline-video { padding-bottom: clamp(1.75rem, 4vw, 2.75rem); }

/* This site is read on Philippine mobile data, and this band sits high enough
   up the page that a lazy iframe loads straight away. Once the panel goes full
   width the footage is mostly hidden behind it anyway, so serve the still
   alone and spend nothing. */
@media (max-width: 767px) {
  .skyline-video-media iframe { display: none; }
}

/* Venue & logistics — the Quezon Memorial Circle. Faded heaviest at the top,
   where the eyebrow and heading sit directly on it; the tiles below are opaque
   white and read over the lighter end untouched. */
.venue-video-media {
  background-image: url("https://customer-kafouaoxj626m9k9.cloudflarestream.com/ab633c0ed76b029d5bbd690acb5e265d/thumbnails/thumbnail.jpg");
}
.venue-video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(0, 45, 81, 0.88) 0%,     /* eyebrow and h2 sit in here */
    rgba(0, 45, 81, 0.72) 38%,
    rgba(0, 45, 81, 0.46) 100%    /* tiles float on this */
  );
}
.venue-video h2 { color: #fff; }
/* Ochre has too little contrast on navy; gold is the pairing the hero already
   uses on a dark band. */
.venue-video .eyebrow { color: var(--gold); }

/* Featured speaker bios collapse behind a quiet toggle so cards stay even */
.speaker-card.featured details.bio { grid-area: bio; margin-top: 0.8rem; margin-inline: 0; }
.speaker-card.featured details.bio summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-body); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ochre);
}
.speaker-card.featured details.bio summary::-webkit-details-marker { display: none; }
.speaker-card.featured details.bio summary::before {
  content: ""; width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 7px solid var(--gold); transition: transform 0.18s ease;
}
.speaker-card.featured details.bio[open] summary::before { transform: rotate(90deg); }
.speaker-card.featured details.bio summary:hover { color: var(--navy); }
.speaker-card.featured details.bio .featured-bio { margin-top: 0.6rem; }

/* Home speaker preview: one shared anatomy, quiet org lines, level cards */
.mini-speakers .speaker-card { display: flex; flex-direction: column; align-items: center; }
.mini-speakers .speaker-photo { margin-bottom: 1.45rem; }
.mini-speakers h3 { min-height: 2.6em; display: flex; align-items: flex-start; justify-content: center; }
.mini-speakers .speaker-role { font-size: 0.88rem; margin-bottom: 0.25rem; min-height: 2.45em; }
.mini-speakers .role-orgs { font-size: 0.78rem; color: #6b7482; line-height: 1.45; }
.mini-speakers .role-orgs li { margin-bottom: 0.05rem; }