/* ============================================================
   UK–PAKISTAN BUSINESS SUMMIT 2026
   Corporate single-page design system
   Zero border-radius. No gradients. Flat, editorial, structured.
   ============================================================ */

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

:root {
  --c-red: #C8102E;
  --c-red-dark: #9E0C24;
  --c-navy: #012169;
  --c-navy-dark: #001548;
  --c-white: #FFFFFF;
  --c-gray: #F4F5F7;
  --c-border: #E5E7EB;
  --c-text: #0A1633;
  --c-muted: #5A6378;
  /* Round 27 — Pakistan green as third brand color */
  --green: #017A3C;
  --green-dark: #015A2C;
  --green-light: #E8F5ED;

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

  --container: 1200px;
  --section-y: 96px;
  /* Rev 36 — was 104px, sized to hold the summit badge. The badge now
     hangs out of the bar on its own panel, so the bar only has to hold
     the links and the CTA and the extra height read as dead padding. */
  --nav-h: 76px;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
}

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

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: 16px;
}

/* ----------- Layout primitives ----------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}

.section {
  padding: var(--section-y) 0;
}

.section--gray {
  background: var(--c-gray);
}

.section--navy {
  background: var(--c-navy);
  color: var(--c-white);
}

/* ----------- Typography ----------- */
.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-red);
  margin: 0 0 18px;
}

.eyebrow--light {
  color: #FF8A99;
}

.section-title {
  font-family: var(--font-sans);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.5px;
  text-transform: none;
  color: var(--c-navy);
  margin: 0 0 20px;
  line-height: 1.15;
}

.section--navy .section-title {
  color: var(--c-white);
}

/* Short restrained red rule under the heading (the single accent) */
.section-title__bar {
  display: block;
  width: 44px;
  height: 3px;
  background: var(--c-red);
  margin: 0 0 24px;
}

.section-header--center .section-title__bar {
  margin-left: auto;
  margin-right: auto;
}

.section-intro {
  font-size: 18px;
  color: var(--c-muted);
  max-width: 680px;
  margin: 0 0 64px;
  line-height: 1.7;
}

.section-header--center {
  text-align: center;
}

.section-header--center .section-intro {
  margin-left: auto;
  margin-right: auto;
}

.section-header {
  margin-bottom: 64px;
}

/* ----------- Buttons ----------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
  border-radius: 4px;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  cursor: pointer;
  white-space: nowrap;
}

.btn--primary {
  background: var(--c-red);
  color: var(--c-white);
}

.btn--primary:hover {
  background: var(--c-red-dark);
}

.btn--ghost {
  background: transparent;
  border: 1.5px solid var(--c-border);
  color: var(--c-navy);
}

.btn--ghost:hover {
  border-color: var(--c-navy);
  background: var(--c-navy);
  color: var(--c-white);
}

.btn--ghost-light {
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  color: var(--c-white);
}

.btn--ghost-light:hover {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-navy);
}

/* Hero "View Packages" — solid white by default, slightly darker on hover */
.hero__ctas .btn--ghost-light {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-navy);
}
.hero__ctas .btn--ghost-light:hover {
  background: #E6E9F0;
  border-color: #E6E9F0;
  color: var(--c-navy);
}

.btn--block {
  width: 100%;
}

.btn--sm {
  padding: 12px 24px;
  font-size: 13px;
}

/* ============================================================
   NAVBAR — Clean sticky top bar
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  transition: box-shadow 220ms ease;
}

.nav.scrolled {
  box-shadow: 0 4px 18px rgba(1, 33, 105, 0.10);
}

.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.nav__logo {
  height: 72px;
  width: auto;
  display: block;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

.nav__link {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-navy);
  transition: color 200ms ease;
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--c-red);
}

.nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--c-red);
}

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

.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-red);
  color: var(--c-white);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 4px;
  transition: background-color 200ms ease;
  white-space: nowrap;
}

.nav__cta:hover {
  background: var(--c-red-dark);
}

.nav__hamburger {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-navy);
}

/* Mobile slide-down menu */
.nav__mobile {
  position: fixed;
  inset: 0;
  background: var(--c-white);
  transform: translateY(-110%);
  transition: transform 200ms ease;
  z-index: 95;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  padding-top: calc(var(--nav-h) + 12px);
}

.nav__mobile.is-open {
  transform: translateY(0);
  visibility: visible;
}

.nav__mobile-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  line-height: 1;
  color: var(--c-navy);
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 2;
}

.nav__mobile-link {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 32px;
  border-bottom: 1px solid var(--c-border);
  border-left: 3px solid transparent;
  color: var(--c-navy);
  font-size: 17px;
  font-weight: 600;
}

.nav__mobile-link.is-active {
  border-left-color: var(--c-red);
  color: var(--c-red);
}

.nav__mobile-cta {
  margin-top: auto;
  display: block;
  text-align: center;
  background: var(--c-red);
  color: var(--c-white);
  padding: 20px;
  font-weight: 600;
  font-size: 15px;
}

/* ============================================================
   SECTION 2 — HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--c-white);
  padding: 100px 32px;
}

@media (min-height: 760px) {
  .hero {
    min-height: calc(100vh - var(--nav-h));
  }
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  background: #051335;
}

/* Single solid overlay for readability — replaces text-shadow halos */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(1, 17, 52, 0.5) 0%, rgba(1, 17, 52, 0.66) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  width: 100%;
  text-align: center;
}

.hero__eyebrow {
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.hero__chip {
  display: inline-block;
}

.hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 0 24px;
  font-size: clamp(40px, 6vw, 74px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.08;
  color: var(--c-white);
}

/* Title is a single clean white wordmark — no per-word colours */
.hero__cc--uk,
.hero__cc--pk,
.hero__dash,
.hero__year {
  color: inherit;
}

.hero__subtitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0 0 40px;
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
}

.hero__title .line,
.hero__subtitle .line {
  display: inline-block;
  max-width: 100%;
}

.countdown {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 26px;
  margin: 0 0 40px;
  flex-wrap: wrap;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.countdown__value {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-white);
}

.countdown__label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.65);
}

.countdown__sep {
  display: flex;
  align-items: center;
  font-size: 30px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.35);
}

.hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero__location {
  position: absolute;
  right: 32px;
  bottom: 26px;
  z-index: 2;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   TAGLINE STRIP (replaces heavy navy theme-banner)
   ============================================================ */
.tagline {
  background: var(--c-gray);
  border-bottom: 1px solid var(--c-border);
  padding: 56px 0;
  text-align: center;
}

.tagline__text {
  max-width: 880px;
  margin: 0 auto 14px;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-navy);
}

.tagline__meta {
  margin: 0;
  font-size: 13.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ============================================================
   SECTION 3 — WHY ATTEND
   ============================================================ */
.why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-bottom: 72px;
}

.why__col-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--c-navy);
  color: var(--c-navy);
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
}

.why__col-icon--red {
  border-color: var(--c-red);
  color: var(--c-red);
}

.why__col-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 0 0 16px;
}

.why__col-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-text);
  margin: 0;
}

.why__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.why__list li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
}

.why__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: var(--c-red);
}

.why__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: 32px 0;
}

.why__stat {
  text-align: center;
  padding: 0 16px;
  border-right: 1px solid var(--c-border);
}

.why__stat:last-child {
  border-right: 0;
}

.why__stat-num {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 700;
  color: var(--c-red);
  line-height: 1;
}

.why__stat-label {
  display: block;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 10px;
}

/* ============================================================
   SECTION 4 — PACKAGES
   ============================================================ */
.pkg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.pkg {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
}

.pkg__band {
  background: var(--c-navy);
  color: var(--c-white);
  padding: 18px 28px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.pkg__band--red {
  background: var(--c-red);
}

.pkg__body {
  padding: 36px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pkg__price-wrap {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
}

.pkg__price {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 700;
  color: var(--c-red);
  line-height: 1;
}

.pkg__price-unit {
  font-size: 14px;
  color: var(--c-muted);
}

.pkg__divider {
  height: 1px;
  background: var(--c-border);
  margin: 24px 0;
}

.pkg__sub {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 0 0 16px;
}

.pkg__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pkg__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--c-text);
  line-height: 1.55;
}

.pkg__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--green);
}

.pkg__terms {
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.65;
  margin: 0 0 24px;
}

.pkg .btn {
  margin-top: auto;
}

.pkg-note {
  margin-top: 24px;
  background: var(--c-navy);
  color: var(--c-white);
  padding: 18px 24px;
  font-size: 14px;
  line-height: 1.55;
}

.addons {
  margin-top: 56px;
}

.addons__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 0 0 24px;
}

.addons__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.addon {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  padding: 24px 20px;
}

.addon__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--c-red);
  color: var(--c-red);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 14px;
}

.addon__name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 0 0 6px;
}

.addon__desc {
  font-size: 13px;
  color: var(--c-muted);
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   SECTION 5 — SPONSORSHIPS
   ============================================================ */
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.sponsor {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
}

.sponsor__band {
  height: 8px;
}

.sponsor__band--bronze {
  background: #8C5A2B;
}

.sponsor__band--silver {
  background: #9CA3AF;
}

.sponsor__band--gold {
  background: #C8A24B;
}

.sponsor__band--vip {
  background: var(--c-red);
}

.sponsor__body {
  padding: 32px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sponsor__num {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c-navy);
  margin-bottom: 16px;
  line-height: 1;
}

.sponsor__name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 0 0 10px;
}

.sponsor__price {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--c-red);
  margin: 0 0 10px;
  line-height: 1;
}

.sponsor__tag {
  font-size: 13px;
  font-style: italic;
  color: var(--c-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}

.sponsor__divider {
  height: 1px;
  background: var(--c-border);
  margin-bottom: 20px;
}

.sponsor__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  flex: 1;
}

.sponsor__list li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text);
}

.sponsor__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 7px;
  height: 7px;
  background: var(--c-red);
}

.sponsor .btn {
  margin-top: auto;
}

.recognition-band {
  margin-top: 56px;
  background: var(--c-navy);
  color: var(--c-white);
  padding: 32px 40px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
}

.recognition-band__label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFB3BD;
}

.recognition-band__text {
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   SECTION 6 — ORGANIZATIONS LOGO GRID
   ============================================================ */
.orgs-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.org-tile {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.org-tile img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ============================================================
   SECTION 7 — TIMELINE (self-contained numbered cards, vertical stack)
   ============================================================ */
.tl-stack {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tl-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  background: var(--c-white);
  border: 1px solid var(--c-navy);
  padding: 40px 48px;
  align-items: start;
}

.tl-row__num {
  display: flex;
  flex-direction: column;
}

.tl-row__big {
  font-family: var(--font-sans);
  font-size: 64px;
  font-weight: 800;
  color: var(--c-red);
  line-height: 1;
  letter-spacing: -1px;
}

.tl-row__rule {
  display: block;
  width: 60px;
  height: 2px;
  background: var(--c-navy);
  margin-top: 16px;
}

.tl-row__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tl-row__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 0;
  line-height: 1.3;
}

.tl-row__date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-red);
  margin: 0;
}

.tl-row__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.tl-row__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-navy);
}

.tl-row__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  background: var(--c-red);
}

/* ============================================================
   SECTION 8 — SUMMIT 2025
   ============================================================ */
.s25 {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.s25__text {
  padding: 64px;
}

.s25__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-red);
  margin: 0 0 16px;
}

.s25__heading {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 700;
  color: var(--c-navy);
  line-height: 1.2;
  margin: 0 0 20px;
}

.s25__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text);
  margin: 0 0 28px;
}

.s25__stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.s25__stat {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-left: 16px;
  border-left: 4px solid var(--c-red);
}

.s25__stat-num {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-navy);
}

.s25__stat-text {
  font-size: 14px;
  color: var(--c-muted);
}

.s25__media {
  position: relative;
  background: #051335;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.s25__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}

.s25__play {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 84px;
  border: 2px solid var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.s25__play::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 22px solid var(--c-red);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 4px;
}

.s25__caption {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  z-index: 1;
}

/* ============================================================
   SECTION 9 — ABOUT UPTIB
   ============================================================ */
.about__intro {
  max-width: 880px;
  margin: 0 auto 64px;
  text-align: center;
  font-size: 17px;
  line-height: 1.75;
  color: var(--c-text);
}

.about__sub {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-muted);
  margin: 6px 0 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.func-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.func {
  background: var(--c-white);
  border: 1px solid var(--c-navy);
  padding: 32px;
}

.func__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--c-navy);
  color: var(--c-navy);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
}

.func__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 0 0 10px;
  line-height: 1.3;
}

.func__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-muted);
  margin: 0;
}

.milestones {
  margin-top: 64px;
  background: var(--c-navy);
  color: var(--c-white);
  padding: 32px 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.milestone__date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFB3BD;
  margin: 0 0 8px;
}

.milestone__text {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   SECTION 10 — GALLERY CAROUSEL
   ============================================================ */
.gal {
  position: relative;
  padding: 0 0;
}

.gal__viewport {
  overflow: hidden;
}

.gal__track {
  display: flex;
  gap: 16px;
  transition: transform 400ms ease;
}

.gal__slide {
  flex: 0 0 calc((100% - 48px) / 4);
  padding: 0;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  overflow: hidden;
  cursor: pointer;
}

.gal__media {
  display: block;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  transition: transform 200ms ease;
}

.gal__slide:hover .gal__media {
  transform: scale(1.03);
}

.gal__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: 2px solid var(--c-navy);
  color: var(--c-navy);
  background: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  z-index: 3;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.gal__arrow:hover {
  background: var(--c-navy);
  color: var(--c-white);
}

.gal__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.gal__arrow--prev {
  left: -24px;
}

.gal__arrow--next {
  right: -24px;
}

.gal__dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 32px;
}

.gal__dot {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--c-navy);
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.gal__dot.is-active {
  background: var(--c-red);
  border-color: var(--c-red);
}

/* ============================================================
   SECTION 11 — FAQ
   ============================================================ */
.faq {
  max-width: 900px;
  margin: 0 auto;
}

.faq__item {
  border-bottom: 1px solid var(--c-border);
}

.faq__q {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  text-align: left;
}

.faq__num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--c-red);
  min-width: 28px;
}

.faq__qtext {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-navy);
  line-height: 1.4;
}

.faq__toggle {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--c-navy);
  color: var(--c-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  transition: background-color 200ms ease, color 200ms ease;
}

.faq__item.is-open .faq__toggle {
  background: var(--c-red);
  border-color: var(--c-red);
  color: var(--c-white);
}

.faq__a {
  display: none;
  padding: 0 24px 24px 56px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-muted);
}

.faq__item.is-open .faq__a {
  display: block;
}

/* ============================================================
   SECTION 12 — REGISTRATION FORM
   ============================================================ */
.reg {
  background: var(--c-navy);
  color: var(--c-white);
}

.reg__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

/* The reg section has a navy background, so the (navy) title was invisible. */
.reg .section-title {
  color: var(--c-white);
}

/* Make the "— Reserve Your Seat —" eyebrow more prominent */
.reg__header .eyebrow {
  font-size: 14px;
  letter-spacing: 4px;
  font-weight: 700;
}

.reg__intro {
  color: #D6DAE5;
  font-size: 15px;
  line-height: 1.65;
  margin-top: 8px;
}

.reg__card {
  background: var(--c-white);
  color: var(--c-text);
  max-width: 960px;
  margin: 0 auto;
  padding: 64px;
  border: 1px solid var(--c-border);
}

.reg__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}

.reg__field {
  display: flex;
  flex-direction: column;
}

.reg__field--full {
  grid-column: 1 / -1;
}

.reg__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-navy);
  margin-bottom: 8px;
}

.reg__label .req {
  color: var(--c-red);
}

/* Small icon preceding each form label */
.reg__label-ico {
  display: inline-flex;
  vertical-align: -2px;
  margin-right: 7px;
  color: var(--green);
}

.reg__label-ico svg {
  width: 14px;
  height: 14px;
  display: block;
}

.reg__input {
  width: 100%;
  border: 1px solid var(--c-border);
  padding: 14px 16px;
  border-radius: 0;
  background: var(--c-white);
  color: var(--c-text);
  transition: border-color 200ms ease;
}

.reg__input:focus {
  outline: none;
  border: 2px solid var(--c-navy);
  padding: 13px 15px;
}

/* A hidden form field must stay hidden — .reg__field's flex display would
   otherwise override the [hidden] attribute (e.g. the "specify" field that
   only appears when "Other" is chosen for Type of Business). */
.reg__field[hidden] {
  display: none;
}

/* Native select uses the same styling as inputs */
select.reg__input {
  appearance: auto;
  cursor: pointer;
}

.reg__sub-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 40px 0 16px;
}

.reg__radio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Delegate Pass spans the full width so it reads as a distinct registration
   type, separate from the exhibitor packages below it. */
.reg__radio--full {
  grid-column: 1 / -1;
}

.reg__radio {
  position: relative;
  display: block;
  cursor: pointer;
}

.reg__radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.reg__radio-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  border: 1px solid var(--c-border);
  transition: border-color 200ms ease;
  position: relative;
}

.reg__radio input:checked+.reg__radio-card {
  border: 2px solid var(--c-red);
  padding: 23px;
}

.reg__radio input:checked+.reg__radio-card::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  background: var(--c-red);
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.reg__radio-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-navy);
}

.reg__radio-desc {
  font-size: 14px;
  color: var(--c-muted);
}

.reg__checks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.reg__check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--c-text);
  cursor: pointer;
}

.reg__check input {
  width: 18px;
  height: 18px;
  border-radius: 0;
  accent-color: var(--c-red);
}

/* Delegate progressive-disclosure panel — clean white with a green accent edge */
.reg__delegate {
  margin-top: 16px;
  padding: 24px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--green);
  box-shadow: 0 8px 24px rgba(1, 33, 105, 0.06);
}

/* Gap between the delegate area and the exhibitor packages grid */
.reg__radio-grid--packages {
  margin-top: 16px;
}

.reg__delegate[hidden],
.reg__addons[hidden] {
  display: none;
}

.reg__step-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 0 0 14px;
}

.reg__addons {
  margin-top: 24px;
}

.reg__step-note {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--c-muted);
}

.reg__addon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.reg__addon {
  position: relative;
  display: block;
  cursor: pointer;
}

.reg__addon--full {
  grid-column: 1 / -1;
}

.reg__addon input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.reg__addon-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 40px 16px 16px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  transition: border-color 200ms ease;
}

.reg__addon input:checked + .reg__addon-card {
  border: 2px solid var(--green);
  padding: 15px 39px 15px 15px;
}

.reg__addon input:checked + .reg__addon-card::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  background: var(--green);
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.reg__addon input:focus-visible + .reg__addon-card {
  outline: 2px solid var(--c-navy);
  outline-offset: 2px;
}

.reg__addon-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-navy);
}

.reg__addon-desc {
  font-size: 13px;
  color: var(--c-muted);
}

.reg__total {
  margin: 22px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-navy);
}

.reg__total strong {
  margin-left: 6px;
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--green);
}

.reg__fineprint {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--c-muted);
}

@media (max-width: 640px) {
  .reg__addon-grid {
    grid-template-columns: 1fr;
  }
}

.reg__terms {
  margin-top: 32px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text);
}

.reg__terms input {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--c-red);
}

.reg__submit {
  margin-top: 32px;
  font-size: 16px;
  padding: 20px;
}

.reg__hint {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--c-muted);
}

.bank-strip {
  margin: 48px auto 0;
  background: var(--c-navy-dark);
  color: var(--c-white);
  padding: 20px 32px;
  font-size: 13px;
  letter-spacing: 0.5px;
  line-height: 1.7;
  text-align: center;
  max-width: 960px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--c-navy);
  color: var(--c-white);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 48px;
  padding: 72px 0 56px;
}

.footer__logo {
  height: 120px;
  margin-bottom: 20px;
  filter: brightness(0) invert(1);
}

.footer__tag {
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-red);
  margin: 0 0 12px;
  font-weight: 600;
}

.footer__brandname {
  font-size: 14px;
  color: #D6DAE5;
  margin: 0 0 16px;
  line-height: 1.55;
}

.footer__flags {
  font-size: 22px;
  letter-spacing: 8px;
}

.footer__heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0 0 20px;
}

.footer__heading::after {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--c-red);
  margin-top: 8px;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__links a {
  font-size: 14px;
  color: #C7CCD9;
  transition: color 200ms ease;
}

.footer__links a:hover {
  color: var(--c-red);
}

.footer__contact {
  font-size: 14px;
  line-height: 1.7;
  color: #C7CCD9;
}

.footer__contact strong {
  display: block;
  color: var(--c-white);
  margin-bottom: 4px;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.footer__contact strong:first-child {
  margin-top: 0;
}

.footer__bottom {
  background: var(--c-navy-dark);
  padding: 18px 0;
  font-size: 13px;
  color: #C7CCD9;
}

.footer__bottom-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1280px) {
  .nav__links {
    gap: 20px;
  }
}

@media (max-width: 1180px) {
  .nav__links {
    gap: 16px;
  }

  .nav__link {
    font-size: 12px;
    letter-spacing: 0.3px;
  }
}

@media (max-width: 1100px) {
  .addons__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .sponsor-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .func-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .orgs-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .sectors-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .addl-services {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 1023px) {
  :root {
    --section-y: 72px;
  }

  .nav__links {
    display: none;
  }

  .nav__actions {
    margin-left: auto;
  }

  .nav__cta {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  .nav__logo {
    height: 44px;
  }

  .container {
    padding: 0 20px;
  }

  .footer__logo {
    height: 96px;
  }

  .why__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .why__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 0;
  }

  .why__stat:nth-child(2) {
    border-right: 0;
  }

  .pkg-grid {
    grid-template-columns: 1fr;
  }

  .pkg__body {
    padding: 28px 24px;
  }

  .reg__card {
    padding: 32px 24px;
  }

  .recognition-band {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px;
  }

  .milestones {
    grid-template-columns: repeat(2, 1fr);
  }

  .s25 {
    grid-template-columns: 1fr;
  }

  .s25__text {
    padding: 40px 28px;
  }

  .s25__media {
    min-height: 280px;
  }

  .tl-row {
    padding: 32px 24px;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .tl-row__big {
    font-size: 48px;
  }

  .gal__slide {
    flex: 0 0 calc((100% - 16px) / 2);
  }

  .gal__arrow--prev {
    left: 8px;
  }

  .gal__arrow--next {
    right: 8px;
  }

  .hl-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* ============================================================
   ROUND 2 ADDITIONS
   ============================================================ */

/* Quiet visa-disclaimer footnote at the bottom of the packages section.
   Replaces the round-2 red `.visa-band` alert — the loud red treatment was
   scaring visitors away. Same legal text, footnote presentation. */
.packages-disclaimer {
  max-width: 880px;
  margin: 48px auto 32px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-muted);
  background: transparent;
  border: none;
  padding: 0;
}

/* ===== Delegate Participation section ===== */
.delegate-includes {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  /* border-left: 4px solid var(--green); */
  padding: 28px 32px;
  margin-bottom: 28px;
}

.delegate-includes__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 0 0 16px;
}

.delegate-includes__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.delegate-includes__list li,
.delegate-card__list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--c-text);
  line-height: 1.5;
}

.delegate-includes__list li::before,
.delegate-card__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green);
  font-weight: 700;
}

.delegate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.delegate-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  padding: 36px 32px;
}

.delegate-card--featured {
  border: 2px solid var(--green);
  box-shadow: 0 16px 40px rgba(1, 33, 105, 0.08);
}

.delegate-card__pkg {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 6px;
}

.delegate-card__name {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 0 0 8px;
}

.delegate-card__price {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--green);
  margin: 0 0 12px;
}

.delegate-card__tag {
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-muted);
  margin: 0 0 20px;
}

.delegate-card__tag strong {
  color: var(--c-navy);
}

.delegate-card__list {
  flex: 1;
  list-style: none;
  margin: 0 0 18px;
  padding: 20px 0 0;
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.delegate-card__list li {
  font-size: 14.5px;
}

.delegate-card__note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--c-muted);
}

.delegate-card__note--accent {
  color: var(--green);
  font-weight: 600;
}

@media (max-width: 760px) {
  .delegate-grid,
  .delegate-includes__list {
    grid-template-columns: 1fr;
  }
}

/* Sub-section heading (used for "For Individual Delegates" / "For Companies & Exhibitors") */
.sub-head {
  margin: 0 0 32px;
}

.sub-head__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 0 0 6px;
}

.sub-head__text {
  font-size: 14px;
  color: var(--c-muted);
  margin: 0;
}

/* Divider line between sub-sections */
.sub-divider {
  border: 0;
  height: 1px;
  background: var(--c-navy);
  width: 60%;
  margin: 64px auto 48px;
  opacity: 0.4;
}

/* Sponsor band navy variant (used for exhibitor cards 1 & 3) */
.sponsor__band--navy {
  background: var(--c-navy);
}

/* Exhibitor grid is alias of sponsor-grid; keep gap consistent */
.exhibitor-grid {
  margin-top: 0;
}

/* Additional services strip (below exhibitor grid) */
.addl-services {
  margin-top: 24px;
  background: var(--c-navy);
  color: var(--c-white);
  padding: 18px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.addl-services__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFB3BD;
  flex-shrink: 0;
}

.addl-services__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0;
}

.addl-services__list li {
  font-size: 13px;
  color: var(--c-white);
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  letter-spacing: 0.3px;
}


/* ----- Section-level Register Now CTA (centered, beneath card grids) ----- */
.section-cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* ----- Key Sectors section ----- */
.sectors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sec-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
}

.sec-card__media {
  aspect-ratio: 16 / 9;
  background: #051335;
  overflow: hidden;
}

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

.sec-card__body {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.sec-card__num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--c-red);
  text-transform: uppercase;
}

.sec-card__title {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 0;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

.sec-card__sub {
  font-size: 13px;
  font-style: italic;
  color: var(--c-muted);
  margin: 0;
}

.sec-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text);
  margin: 0;
}

.sec-card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.sec-card__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-navy);
}

.sec-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  background: var(--c-red);
}

.sec-others {
  background: var(--c-white);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 28px 32px;
  margin-top: 24px;
}

.sec-others__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 0 0 12px;
}

.sec-others__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-muted);
  margin: 0 0 10px;
}

.sec-others__note {
  font-size: 13px;
  color: var(--c-muted);
  margin: 0;
}

/* ----- Highlights section: 4-up YouTube thumbnail grid ----- */
.hl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.hl-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: var(--c-navy);
  border: 3px solid transparent;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  transition: border-color 200ms ease;
}

.hl-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 200ms ease;
}

.hl-thumb:hover {
  border-color: var(--c-red);
}

.hl-thumb:hover img {
  opacity: 1;
}

.hl-thumb__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border: 2px solid var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(1, 33, 105, 0.55);
  transition: transform 200ms ease;
}

.hl-thumb__play::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 18px solid var(--c-red);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 4px;
}

.hl-thumb:hover .hl-thumb__play {
  transform: translate(-50%, -50%) scale(1.05);
}

/* ----- Modal / lightbox (shared) ----- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.modal.is-open {
  display: flex;
}

.modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: var(--c-navy);
  border: 2px solid var(--c-white);
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  z-index: 2;
}

.modal__close:hover {
  background: var(--c-red);
  border-color: var(--c-red);
}

.modal__frame {
  width: 100%;
  max-width: 1100px;
  background: #000;
}

.modal__frame--image {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
}

.modal__video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 */
}

.modal__video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.modal__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0A1633;
}

.modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: var(--c-navy);
  border: 2px solid var(--c-white);
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  z-index: 2;
}

.modal__nav:hover {
  background: var(--c-red);
  border-color: var(--c-red);
}

.modal__nav--prev {
  left: 24px;
}

.modal__nav--next {
  right: 24px;
}

@media (max-width: 700px) {
  .hero__location {
    display: none;
  }

  .hero {
    padding: 96px 16px;
  }

  .nav__logo {
    height: 44px;
  }

  .nav__brand {
    padding: 16px 40px 40px 16px;
    border-radius: 0 0 48px 0;
  }

  .footer__logo {
    height: 80px;
  }

  .countdown__unit {
    min-width: 60px;
    padding: 8px 10px;
  }

  .countdown__value {
    font-size: 26px;
  }

  .countdown__sep {
    font-size: 18px;
  }

  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
    max-width: 320px;
    margin: 0 auto;
    width: 100%;
  }

  .hero__ctas .btn {
    width: 100%;
  }

  .addons__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .orgs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sectors-grid {
    grid-template-columns: 1fr;
  }

  .sec-others {
    padding: 24px;
  }

  .sponsor-grid {
    grid-template-columns: 1fr;
  }

  .func-grid {
    grid-template-columns: 1fr;
  }

  .func-cell {
    padding: 32px 24px;
    min-height: auto;
  }

  .milestones {
    grid-template-columns: 1fr;
  }

  .reg__grid {
    grid-template-columns: 1fr;
  }

  .reg__radio-grid {
    grid-template-columns: 1fr;
  }

  .reg__checks {
    grid-template-columns: 1fr;
  }

  .footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 0 32px;
  }

  .footer__bottom-inner {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }

  .gal__slide {
    flex: 0 0 100%;
  }

  .hl-grid {
    grid-template-columns: 1fr;
  }

  .section-title {
    font-size: 26px;
    letter-spacing: 1.5px;
  }

  .reg__card {
    padding: 24px 16px;
  }

  .s25__text {
    padding: 32px 20px;
  }

  .modal {
    padding: 12px;
  }

  .modal__close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }

  .modal__nav {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .modal__nav--prev {
    left: 8px;
  }

  .modal__nav--next {
    right: 8px;
  }
}

/* ============================================================
   ROUND 13 — EDITORIAL REDESIGN
   Magazine-style varied layouts replacing the repeating card-grid pattern.
   ============================================================ */

/* ----- Theme Banner (below hero) ----- */
.theme-banner {
  background: var(--c-navy);
  color: var(--c-white);
  padding: 48px 0;
  text-align: center;
}

.theme-banner__tag {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  line-height: 1.4;
  max-width: 980px;
  margin: 0 auto 24px;
  color: var(--c-white);
}

.theme-banner__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0 0 32px;
}

.theme-banner__sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.5);
}

.theme-banner__ico {
  margin-right: 6px;
}

.theme-banner__ctas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 880px;
  margin: 0 auto;
}

.theme-banner__ctas .btn,
.theme-banner__ctas .theme-banner-btn {
  width: 100%;
}

/* Round 24 — alternating red / yellow CTAs (yellow used ONLY here, deliberate local accent). */
.theme-banner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 0;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease;
}

.theme-banner-btn--red {
  background-color: #C8102E;
  color: #FFFFFF;
}

.theme-banner-btn--red:hover {
  background-color: #9E0C24;
}

.theme-banner-btn--green {
  background-color: var(--green);
  color: #FFFFFF;
  /* white on green has plenty of contrast */
}

.theme-banner-btn--green:hover {
  background-color: var(--green-dark);
}

/* ----- Why Attend — 6 editorial entries ----- */
.why-stack {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-top: 24px;
}

.why-entry {
  display: block;
  max-width: 720px;
}

.why-entry--left {
  margin-right: auto;
}

.why-entry--right {
  margin-left: auto;
  text-align: right;
}

.why-entry__num {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-red);
  margin: 0 0 14px;
}

.why-entry__digit {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  margin-right: 6px;
}

.why-entry__title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-navy);
  margin: 0 0 16px;
}

.why-entry__body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--c-text);
  margin: 0 0 12px;
}

.why-entry__tag {
  font-size: 13px;
  color: var(--c-muted);
  margin: 0;
}

.why-closing {
  text-align: center;
  margin-top: 88px;
  padding-top: 56px;
  border-top: 1px solid var(--c-border);
}

.why-closing p {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2vw, 26px);
  color: var(--c-navy);
  margin: 0 0 24px;
  line-height: 1.4;
}

/* ----- Statistics Strip ----- */
/* Why Attend — uniform card grid */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.why-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 32px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.why-card:hover {
  border-color: #d3d8e0;
  box-shadow: 0 10px 30px rgba(1, 33, 105, 0.06);
}

.why-card__num {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--c-red);
  margin-bottom: 16px;
}

.why-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 10px;
}

.why-card__body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--c-muted);
  margin: 0;
}

/* Stats — clean bordered row (was a green full-bleed band) */
.stats-strip {
  background: var(--c-white);
  color: var(--c-text);
  padding: 0 0 var(--section-y);
}

.stats-strip__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.stats-strip__item {
  text-align: center;
  padding: 16px 24px;
  border-left: 1px solid rgba(0, 0, 0, 0.07);
}

.stats-strip__item:first-child {
  border-left: 0;
}

.stats-strip__num {
  display: block;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  line-height: 1;
  color: var(--c-red);
  margin-bottom: 12px;
  white-space: nowrap;
}

.stats-strip__num--range {
  font-size: clamp(34px, 4vw, 52px);
}

.stats-strip__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1.5;
}

/* ----- Sectors — Icon grid + featured editorial ----- */
.sec-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  margin-bottom: 80px;
}

.sec-icon {
  background: var(--c-white);
  padding: 32px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.sec-icon__svg {
  width: 36px;
  height: 36px;
  color: var(--c-navy);
}

.sec-icon__name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 0;
  line-height: 1.3;
}

.sec-icon__tag {
  font-size: 12px;
  color: var(--c-muted);
  margin: 0;
  letter-spacing: 0.5px;
}

.sec-features {
  display: flex;
  flex-direction: column;
  gap: 64px;
  margin-bottom: 64px;
}

.sec-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.sec-feature--flip .sec-feature__media {
  order: 2;
}

.sec-feature--flip .sec-feature__text {
  order: 1;
}

.sec-feature__media {
  background: #051335;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

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

.sec-feature__text {
  padding: 16px 0;
}

.sec-feature__num {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--c-red);
  margin-bottom: 14px;
}

.sec-feature__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 8px;
  line-height: 1.2;
}

.sec-feature__sub {
  font-size: 15px;
  color: var(--c-muted);
  margin: 0 0 20px;
}

.sec-feature__body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-text);
  margin: 0 0 24px;
}

.sec-feature__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sec-feature__tags li {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-navy);
  padding: 6px 12px;
  border: 1px solid var(--c-border);
  background: var(--c-white);
}

/* ----- Packages — Featured + supporting + comparison ----- */
.pkg-featured {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  background: var(--c-white);
}

.pkg-featured__left {
  /* Round 36 — featured package panel is green: a felt green block in the
     packages section (its tick bullets are already green, so it reads as a
     cohesive "green package"). */
  background: var(--green);
  color: var(--c-white);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pkg-featured__badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 16px;
}

.pkg-featured__name {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  color: var(--c-white);
  margin: 0 0 12px;
  line-height: 1.15;
  text-transform: uppercase;
}

.pkg-featured__price {
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: 700;
  color: var(--c-white);
  margin: 0 0 12px;
  line-height: 1;
}

.pkg-featured__tag {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.pkg-featured__right {
  padding: 48px 40px;
  border: 1px solid var(--c-border);
  border-left: 0;
  background: var(--c-white);
}

.pkg-featured__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
}

.pkg-featured__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--c-text);
  line-height: 1.55;
}

.pkg-featured__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--green);
}

.pkg-featured__cta {
  margin: 0 0 64px;
  border-color: var(--green);
  color: var(--green);
}

.pkg-featured__cta:hover {
  background: var(--green);
  color: var(--c-white);
}

.pkg-support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}

.pkg-support {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  padding: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pkg-support__band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
}

.pkg-support__band--navy {
  background: var(--c-navy);
}

.pkg-support__band--red {
  background: var(--c-red);
}

.pkg-support__num {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c-navy);
  margin: 12px 0 4px;
  line-height: 1;
}

.pkg-support__name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 0;
}

.pkg-support__price {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--c-red);
  margin: 0 0 4px;
  line-height: 1;
}

.pkg-support__tag {
  font-size: 13px;
  color: var(--c-muted);
  margin: 0 0 12px;
}

.pkg-support__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--c-border);
  padding-top: 12px;
}

.pkg-support__list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-text);
}

.pkg-support__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  background: var(--green);
}

/* Comparison Table */
.pkg-table-wrap {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  overflow-x: auto;
  margin-bottom: 0;
}

.pkg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 760px;
}

.pkg-table th,
.pkg-table td {
  padding: 16px 18px;
  text-align: center;
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}

.pkg-table thead th {
  background: var(--c-navy);
  color: var(--c-white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.4;
}

.pkg-table__price {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: 16px;
  color: #FFB3BD;
  font-weight: 600;
  letter-spacing: 0;
}

.pkg-table thead th.pkg-table__star {
  background: var(--c-red);
}

.pkg-table tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--c-navy);
  background: var(--c-gray);
}

.pkg-table .pkg-table__feat {
  width: 32%;
}

.pkg-table tbody td {
  color: var(--c-text);
}

.pkg-table tbody td.pkg-table__star {
  background: #FFF4F4;
  color: var(--c-navy);
  font-weight: 600;
}

.pkg-table tbody tr:last-child th,
.pkg-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ----- Sponsorships — Tier Ladder ----- */
.sponsor-ladder {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 56px;
}

.sponsor-rung {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sponsor-rung__band {
  height: 8px;
}

.sponsor-rung--bronze {
  flex: 0 0 20%;
  min-height: 380px;
}

.sponsor-rung--silver {
  flex: 0 0 22%;
  min-height: 420px;
}

.sponsor-rung--gold {
  flex: 0 0 25%;
  min-height: 480px;
}

.sponsor-rung--vip {
  flex: 0 0 33%;
  min-height: 560px;
}

.sponsor-rung--bronze .sponsor-rung__band {
  background: #8C5A2B;
}

.sponsor-rung--silver .sponsor-rung__band {
  background: #9CA3AF;
}

.sponsor-rung--gold .sponsor-rung__band {
  background: #C8A24B;
}

.sponsor-rung--vip .sponsor-rung__band {
  background: var(--c-red);
}

.sponsor-rung__body {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sponsor-rung__num {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c-navy);
  margin: 0 0 10px;
  line-height: 1;
}

.sponsor-rung__name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 0 0 8px;
}

.sponsor-rung__price {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--c-red);
  margin: 0 0 6px;
  line-height: 1;
}

.sponsor-rung__tag {
  font-size: 13px;
  color: var(--c-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}

.sponsor-rung__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  border-top: 1px solid var(--c-border);
  padding-top: 14px;
}

.sponsor-rung__list li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-text);
}

.sponsor-rung__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  background: var(--c-red);
}

.sponsor-rung .btn {
  align-self: flex-start;
}

/* ============================================================
   ENGAGEMENT TIMELINE — Round 22 clean-slate rebuild.
   New class names (all `tl-*`) so no existing rule in the cascade
   can paint the cards. `!important` on every paint-affecting rule
   to defeat framework defaults or stray inherited backgrounds.
   ============================================================ */
.tl-section {
  background-color: #012169 !important;
  color: #FFFFFF !important;
  padding: 96px 0 !important;
  width: 100% !important;
}

.tl-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  background-color: transparent !important;
}

/* Header */
.tl-header {
  margin-bottom: 56px;
}

.tl-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.tl-dot {
  width: 8px;
  height: 8px;
  background-color: #C8102E !important;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.tl-heading-row {
  display: flex;
  align-items: last baseline;
  gap: 40px;
}

.tl-heading {
  color: #FFFFFF !important;
  font-size: 56px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  flex-shrink: 0;
}

.tl-line {
  flex: 1;
  height: 5px;
  border-radius: 155px;
  background-color: #012169 !important;
}

/* Cards row */
.tl-cards-wrapper {
  position: relative;
}

.tl-cards {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 8px;
}

.tl-cards::-webkit-scrollbar {
  display: none;
}

/* Card — SOLID slightly-lighter navy so it visibly stands out from the section bg.
   `!important` here to defeat any inherited white background. */
.tl-card {
  background-color: #0A2580 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  flex: 0 0 calc((100% - 60px) / 4);
  min-width: calc((100% - 60px) / 4);
  min-height: 320px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.tl-number {
  color: #FFFFFF !important;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 16px;
}

.tl-title {
  color: #FFFFFF !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 12px 0;
}

.tl-date {
  color: #FF4A65 !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.tl-spacer {
  flex: 1 1 auto;
  min-height: 40px;
}

/* Round 33 — Timeline cards were an all-navy block. Each card now carries a
   top accent bar marking its place in the UK<->Pakistan journey, so the two
   flag colours punctuate the milestones instead of pure blue.
   Default = subtle light bar · Pakistan-side phase = green · UK-side = red. */
.tl-card {
  border-top: 3px solid rgba(255, 255, 255, 0.22) !important;
}

.tl-card--pakistan {
  border-top-color: var(--green) !important;
}

.tl-card--pakistan .tl-date {
  /* brightened green for legibility on the navy card */
  color: #2FBF71 !important;
}

.tl-card--uk {
  border-top-color: var(--c-red) !important;
}

.tl-desc {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}

/* Arrows — flank the cards row, vertically centered */
.tl-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background-color: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  font-size: 20px;
  cursor: pointer;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.tl-arrow-left {
  left: -22px;
}

.tl-arrow-right {
  right: -22px;
}

.tl-arrow:hover {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

/* CTA strip */
.tl-cta {
  margin-top: 48px;
  background-color: rgba(0, 0, 0, 0.3) !important;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.tl-cta-left {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #FFFFFF;
  font-size: 15px;
}

.tl-cta-text {
  color: #FFFFFF;
}

.tl-flag {
  background-color: rgba(255, 255, 255, 0.15);
  padding: 4px 8px;
  font-weight: 700;
  font-size: 12px;
  color: #FFFFFF;
  letter-spacing: 1px;
}

.tl-cta-button {
  background-color: #C8102E !important;
  color: #FFFFFF !important;
  padding: 14px 28px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 !important;
  border: 0;
  display: inline-block;
}

.tl-cta-button:hover {
  background-color: #9E0C24 !important;
}

@media (max-width: 1024px) {
  .tl-card {
    flex: 0 0 calc((100% - 20px) / 2);
    min-width: calc((100% - 20px) / 2);
  }
}

@media (max-width: 640px) {
  .tl-heading {
    font-size: 36px;
  }

  .tl-heading-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .tl-line {
    width: 100%;
    height: 3px;
  }

  .tl-card {
    flex: 0 0 85%;
    min-width: 85%;
  }

  .tl-arrow-left {
    left: 4px;
  }

  .tl-arrow-right {
    right: 4px;
  }

  .tl-cta {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
}

/* ----- Summit 2025 + Highlights (merged) ----- */
.anchor-alias {
  display: block;
  position: relative;
  top: -100px;
  visibility: hidden;
}

.s25-feature {
  display: block;
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  background: var(--c-navy);
  cursor: pointer;
  border: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.s25-feature__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 200ms ease;
}

.s25-feature:hover .s25-feature__thumb {
  opacity: 1;
}

.s25-feature__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border: 2px solid var(--c-white);
  background: rgba(1, 33, 105, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms ease;
}

.s25-feature__play::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 28px solid var(--c-red);
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  margin-left: 5px;
}

.s25-feature:hover .s25-feature__play {
  transform: translate(-50%, -50%) scale(1.05);
}

.s25-feature__caption {
  text-align: center;
  font-size: 13px;
  color: var(--c-muted);
  margin: 16px 0 56px;
}

.s25-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 64px;
  padding: 48px 0;
  /* border-top: 1px solid var(--c-border); */
  /* border-bottom: 1px solid var(--c-border); */
}

.s25-stat {
  text-align: center;
  padding: 0 24px;
}

.s25-stat__num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 700;
  color: var(--c-red);
  margin-bottom: 12px;
  line-height: 1.2;
}

.s25-stat__text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-text);
  margin: 0;
}

/* ----- About UPTIB — Image-led narrative ----- */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 80px;
}

.about-split__media {
  background: #051335;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--c-border);
}

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

.about-split__text p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--c-text);
  margin: 0 0 20px;
}

.about-split__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-red);
  margin: 24px 0 12px !important;
}

.about-split__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.about-split__chips li {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--c-navy);
  padding: 6px 14px;
  border: 1px solid var(--c-navy);
  background: var(--c-white);
}

/* About UPTIB — 4×2 numbered function grid (round 16, replaces .func-rows).
   Hairlines between cells via `gap: 1px` on a border-colored grid background;
   no outer border on the grid container itself. */
.func-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background-color: var(--c-border);
  margin-bottom: 64px;
}

.func-cell {
  background: var(--c-white);
  padding: 40px 32px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.func-cell__num {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 800;
  color: var(--c-red);
  line-height: 1;
}

.func-cell__rule {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--c-navy);
  margin-top: -6px;
}

.func-cell__icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-navy);
  margin-top: 4px;
}

.func-cell__icon svg {
  width: 100%;
  height: 100%;
}

.func-cell__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 0;
  line-height: 1.3;
}

.func-cell__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-muted);
  margin: 0;
}

.milestones-band {
  background: var(--green);
  color: var(--c-white);
  padding: 40px 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.milestones-band__item {
  text-align: center;
  padding: 0 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.milestones-band__item:last-child {
  border-right: 0;
}

.milestones-band__date {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 700;
  color: var(--c-white);
  margin: 0 0 8px;
  line-height: 1;
  letter-spacing: 1px;
}

.milestones-band__event {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-white);
  margin: 0 0 4px;
  line-height: 1.35;
}

.milestones-band__loc {
  font-size: 12px;
  color: #C7CCD9;
  margin: 0;
  letter-spacing: 0.5px;
}

/* ----- Organizations — Marquee + CTA block ----- */
.marquee {
  width: 100%;
  overflow: hidden;
  background: var(--c-white);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: 32px 0;
  margin-bottom: 56px;
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: marquee-scroll 60s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__track img {
  height: 80px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.orgs-cta {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 48px;
  align-items: center;
  padding: 32px 0;
  border-top: 1px solid var(--c-border);
}

.orgs-cta__heading {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 12px;
  line-height: 1.25;
}

.orgs-cta__text p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-text);
  margin: 0;
}

.orgs-cta__action {
  text-align: right;
}

.orgs-cta__note {
  font-size: 13px;
  color: var(--c-muted);
  margin: 12px 0 0;
}

/* ----- Gallery — Masonry ----- */
.masonry {
  column-count: 4;
  column-gap: 12px;
  margin-bottom: 24px;
}

.masonry__cell {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 12px;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  overflow: hidden;
  cursor: pointer;
  break-inside: avoid;
}

.masonry__cell img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 200ms ease;
}

.masonry__cell:hover img {
  transform: scale(1.03);
}

.gallery-note {
  text-align: center;
  font-size: 13px;
  color: var(--c-muted);
  margin: 32px 0 0;
}

/* ----- News & Updates ----- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.news-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  transition: border-color 200ms ease;
}

.news-card:hover {
  border-color: var(--c-red);
}

.news-card__media {
  background: #051335;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

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

.news-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

.news-card__date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-red);
  margin: 0;
}

.news-card__title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-navy);
  margin: 0;
  line-height: 1.35;
}

.news-card__snippet {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-muted);
  margin: 0 0 8px;
  flex: 1;
}

.news-card__more {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-red);
}

/* ----- Round 13 responsive ----- */
@media (max-width: 1100px) {
  .theme-banner__ctas {
    grid-template-columns: 1fr 1fr;
  }

  .sec-icons {
    grid-template-columns: repeat(3, 1fr);
  }

  .sec-feature {
    gap: 32px;
  }

  .pkg-featured {
    grid-template-columns: 1fr;
  }

  .pkg-featured__right {
    border-left: 1px solid var(--c-border);
    border-top: 0;
  }

  .pkg-featured__list {
    grid-template-columns: 1fr;
  }

  .pkg-support-grid {
    grid-template-columns: 1fr;
  }

  .sponsor-ladder {
    flex-direction: column;
    align-items: stretch;
  }

  .sponsor-rung {
    flex: 1;
    min-height: auto;
  }

  .about-split {
    grid-template-columns: 1fr;
  }

  .news-grid {
    grid-template-columns: 1fr 1fr;
  }

  .masonry {
    column-count: 3;
  }

  .orgs-cta {
    grid-template-columns: 1fr;
  }

  .orgs-cta__action {
    text-align: left;
  }

  .milestones-band {
    grid-template-columns: repeat(2, 1fr);
    padding: 28px;
  }

  .milestones-band__item {
    border-right: 0;
    margin-bottom: 24px;
  }
}

@media (max-width: 1023px) {
  .stats-strip__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-strip__item {
    border-right: 0;
    border-left: 0;
    padding: 24px;
  }

  .stats-strip {
    padding: 48px 0;
  }

  .sec-feature,
  .sec-feature--flip {
    grid-template-columns: 1fr;
  }

  .sec-feature--flip .sec-feature__media {
    order: 0;
  }

  .sec-feature--flip .sec-feature__text {
    order: 0;
  }

  .why-entry--right {
    text-align: left;
    margin-left: 0;
  }

  .marquee__track img {
    height: 60px;
  }

  .marquee__track {
    gap: 40px;
  }
}

@media (max-width: 700px) {
  .theme-banner__ctas {
    grid-template-columns: 1fr;
  }

  .theme-banner__meta {
    flex-direction: column;
    gap: 10px;
  }

  .theme-banner__sep {
    display: none;
  }

  .why-stack {
    gap: 48px;
  }

  .why-closing {
    margin-top: 48px;
    padding-top: 32px;
  }

  .sec-icons {
    grid-template-columns: repeat(2, 1fr);
  }

  .sec-icon {
    padding: 24px 16px;
  }

  .pkg-featured__left,
  .pkg-featured__right {
    padding: 32px 24px;
  }

  .pkg-featured__price {
    font-size: 44px;
  }

  .s25-stats {
    grid-template-columns: 1fr;
    padding: 32px 0;
    gap: 24px;
  }

  .s25-feature__play {
    width: 72px;
    height: 72px;
  }

  .s25-feature__play::before {
    border-left-width: 22px;
    border-top-width: 13px;
    border-bottom-width: 13px;
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .masonry {
    column-count: 2;
  }

  .milestones-band {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .milestones-band__date {
    font-size: 26px;
  }
}

/* ============================================================
   ROUND 14 — Pill navbar, native YouTube iframes, bento grid,
   image-flip sector tiles, dark gallery.
   ============================================================ */

/* ----- Native YouTube iframe (replaces the old thumbnail+overlay) ----- */
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-frame--featured {
  max-width: 1100px;
  margin: 0 auto;
}

/* ----- Why Attend — Bento grid ----- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 180px;
  gap: 12px;
  margin-top: 24px;
}

.bento__cell {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--c-white);
  border: 1px solid var(--c-border);
}

.bento__cell--feature {
  grid-column: 1 / 7;
  grid-row: 1 / 3;
  border: 0;
}

.bento__cell--stat:not(.bento__cell--stat-wide) {
  grid-column: 7 / 10;
  grid-row: 1 / 2;
}

.bento__cell:nth-child(3) {
  grid-column: 10 / 13;
  grid-row: 1 / 2;
}

/* photo handshake */
.bento__cell:nth-child(4) {
  grid-column: 7 / 10;
  grid-row: 2 / 3;
}

/* 02 B2B */
.bento__cell:nth-child(5) {
  grid-column: 10 / 13;
  grid-row: 2 / 3;
}

/* 03 Programme */
.bento__cell:nth-child(6) {
  grid-column: 1 / 5;
  grid-row: 3 / 4;
}

/* 04 Market */
.bento__cell--stat-wide {
  grid-column: 5 / 13;
  grid-row: 3 / 4;
}

.bento__cell:nth-child(8) {
  grid-column: 1 / 5;
  grid-row: 4 / 5;
}

/* photo event */
.bento__cell:nth-child(9) {
  grid-column: 5 / 9;
  grid-row: 4 / 5;
}

/* 05 Outcomes */
.bento__cell:nth-child(10) {
  grid-column: 9 / 13;
  grid-row: 4 / 5;
}

/* 06 Visibility */

.bento__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bento__overlay {
  position: absolute;
  inset: 0;
  background: rgba(1, 33, 105, 0.55);
}

.bento__content {
  position: relative;
  z-index: 1;
  padding: 32px 36px;
  color: var(--c-white);
}

.bento__num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--c-red);
}

.bento__num--light {
  color: rgba(255, 255, 255, 0.85);
}

.bento__cell--feature .bento__num {
  color: #FFB3BD;
}

.bento__title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 14px;
  color: inherit;
}

.bento__title--sm {
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 10px;
}

.bento__body {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: inherit;
  /* Defensive: clamp the body text to 3 lines so a long copy edit can't break
     the fixed-height bento cells. Anything beyond ellipsizes. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bento__cell--photo {
  padding: 0;
}

.bento__cell--photo .bento__bg {
  position: relative;
  height: 100%;
}

.bento__cell--white {
  background: var(--c-white);
  color: var(--c-text);
  padding: 32px;
  justify-content: center;
}

.bento__cell--white .bento__title {
  color: var(--c-navy);
}

.bento__cell--white .bento__body {
  color: var(--c-text);
}

.bento__cell--navy {
  background: var(--c-navy);
  color: var(--c-white);
  border-color: var(--c-navy);
  padding: 32px;
  align-items: flex-start;
  justify-content: center;
}

.bento__cell--navy .bento__title,
.bento__cell--navy .bento__body {
  color: var(--c-white);
}

.bento__cell--red {
  background: var(--c-red);
  color: var(--c-white);
  border-color: var(--c-red);
  padding: 32px;
  justify-content: center;
}

.bento__cell--red .bento__title,
.bento__cell--red .bento__body {
  color: var(--c-white);
}

.bento__cell--green {
  background: var(--green);
  color: var(--c-white);
  border-color: var(--green);
  padding: 32px;
  justify-content: center;
}

.bento__cell--green .bento__title,
.bento__cell--green .bento__body {
  color: var(--c-white);
}

.bento__cell--stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px;
}

.bento__cell--stat-wide {
  flex-direction: row;
  gap: 28px;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 32px 40px;
}

.bento__stat-num {
  font-family: var(--font-serif);
  font-size: clamp(56px, 6vw, 96px);
  font-weight: 700;
  line-height: 1;
  color: var(--c-white);
}

.bento__cell--stat-wide .bento__stat-num {
  font-size: clamp(72px, 8vw, 128px);
}

.bento__stat-label {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.bento__cell--stat-wide .bento__stat-label {
  margin-top: 0;
  max-width: 360px;
}

/* ----- Key Sectors — Image-flip tiles ----- */
.sec-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background-color: transparent;
}

.sec-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: pointer;
  background: var(--c-navy);
  border-radius: 6px;
  outline: 0;
}

.sec-tile__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 200ms ease;
}

/* Was a flat navy cast over the whole image (dulled every tile). Now a
   bottom-only gradient scrim: the image shows bright and clear, and only the
   strip behind the label text is darkened for readability. */
.sec-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.45) 22%,
    rgba(0, 0, 0, 0) 55%
  );
  transition: opacity 200ms ease;
  z-index: 1;
}

.sec-tile__default,
.sec-tile__hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 24px;
  display: flex;
  flex-direction: column;
  color: var(--c-white);
  transition: opacity 200ms ease;
}

.sec-tile__default {
  justify-content: flex-end;
}

.sec-tile__hover {
  justify-content: space-between;
  opacity: 0;
}

/* Uniform navy reveal on hover (was red/green/navy colour-cycling) */
.sec-tile--navy .sec-tile__hover,
.sec-tile--red .sec-tile__hover,
.sec-tile--green .sec-tile__hover {
  background: rgba(1, 33, 105, 0.94);
}

.sec-tile__icon {
  width: 28px;
  height: 28px;
  color: var(--c-white);
  margin-bottom: 12px;
}

.sec-tile__name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 4px;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.sec-tile__sub {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.sec-tile__desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  margin: 12px 0 0;
}

.sec-tile:hover .sec-tile__bg,
.sec-tile:hover::before,
.sec-tile:hover .sec-tile__default,
.sec-tile:focus-within .sec-tile__bg,
.sec-tile:focus-within::before,
.sec-tile:focus-within .sec-tile__default {
  opacity: 0;
}

.sec-tile:hover .sec-tile__hover,
.sec-tile:focus-within .sec-tile__hover {
  opacity: 1;
}

/* Tap-to-flip on touch (no hover) */
.sec-tile.is-flipped .sec-tile__bg,
.sec-tile.is-flipped::before,
.sec-tile.is-flipped .sec-tile__default {
  opacity: 0;
}

.sec-tile.is-flipped .sec-tile__hover {
  opacity: 1;
}

/* Round 16 — TEST: solid red Sectors section.
   Header text becomes white; grid hairlines become white (gap-fill);
   the .sec-tile--red hover state flips to white-with-navy-text so red tiles
   don't visually merge into the red section background. */
.sectors-red {
  background: var(--c-red);
}

.sectors-red .section-title {
  color: var(--c-white);
}

.sectors-red .section-intro {
  color: rgba(255, 255, 255, 0.85);
}

.sectors-red .eyebrow {
  color: var(--c-white);
}

.sectors-red .section-title__bar {
  background: var(--c-white);
}

.sectors-red .sec-tiles {
  background-color: var(--c-white);
}

.sectors-red .sec-tile--red .sec-tile__hover {
  background: var(--c-white);
  color: var(--c-navy);
}

.sectors-red .sec-tile--red .sec-tile__hover .sec-tile__name,
.sectors-red .sec-tile--red .sec-tile__hover .sec-tile__desc {
  color: var(--c-navy);
}

/* .sec-others navy band stays unchanged — provides bottom anchor. */

/* ----- Gallery — Dark theme ----- */
.gallery-dark {
  background: #0A0A0A;
}

.gallery-dark .section-title {
  color: var(--c-white);
}

.gallery-dark .section-intro {
  color: rgba(255, 255, 255, 0.7);
}

.gallery-dark .masonry__cell {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.gallery-dark .gallery-note {
  color: rgba(255, 255, 255, 0.55);
}

/* ----- About UPTIB — centered intro (image removed) ----- */
.about-intro {
  max-width: 880px;
  margin: 0 auto 80px;
  text-align: center;
}

.about-intro p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--c-text);
  margin: 0 0 20px;
}

.about-intro__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-red);
  margin: 24px 0 12px !important;
}

.about-intro__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.about-intro__chips li {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--c-navy);
  padding: 6px 14px;
  border: 1px solid var(--c-navy);
  background: var(--c-white);
}

/* ----- Round 14 responsive ----- */
@media (max-width: 1100px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 160px;
  }

  .bento__cell--feature {
    grid-column: 1 / 7;
    grid-row: 1 / 3;
  }

  .bento__cell:nth-child(2) {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
  }

  .bento__cell:nth-child(3) {
    grid-column: 4 / 7;
    grid-row: 3 / 4;
  }

  .bento__cell:nth-child(4) {
    grid-column: 1 / 4;
    grid-row: 4 / 5;
  }

  .bento__cell:nth-child(5) {
    grid-column: 4 / 7;
    grid-row: 4 / 5;
  }

  .bento__cell:nth-child(6) {
    grid-column: 1 / 7;
    grid-row: 5 / 6;
  }

  .bento__cell--stat-wide {
    grid-column: 1 / 7;
    grid-row: 6 / 7;
  }

  .bento__cell:nth-child(8) {
    grid-column: 1 / 7;
    grid-row: 7 / 8;
  }

  .bento__cell:nth-child(9) {
    grid-column: 1 / 4;
    grid-row: 8 / 9;
  }

  .bento__cell:nth-child(10) {
    grid-column: 4 / 7;
    grid-row: 8 / 9;
  }

  .sec-tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .bento__cell,
  .bento__cell--feature,
  .bento__cell--stat-wide,
  .bento__cell:nth-child(2),
  .bento__cell:nth-child(3),
  .bento__cell:nth-child(4),
  .bento__cell:nth-child(5),
  .bento__cell:nth-child(6),
  .bento__cell:nth-child(8),
  .bento__cell:nth-child(9),
  .bento__cell:nth-child(10) {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .bento__cell--feature {
    min-height: 320px;
  }

  .bento__cell--photo {
    min-height: 200px;
  }

  .bento__cell--stat,
  .bento__cell--stat-wide {
    min-height: 160px;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  .bento__cell--stat-wide .bento__stat-label {
    margin-top: 12px;
  }

  .sec-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   ROUND 26 — RESPONSIVE OVERRIDES (end-of-file, wins cascade)

   Several base declarations from rounds 14–22 were appended AFTER the
   earlier responsive media queries, which made those earlier responsive
   overrides lose the cascade for selectors like `.func-grid` and `.hl-grid`
   (4-col was sticking on mobile). This block consolidates the responsive
   rules at the very end of the file so they win regardless of when their
   base rules were declared.

   Also adds: global overflow-x safety net + touch-target minimums.
   ============================================================ */

/* Global safety net — prevent any element from causing horizontal page scroll.
   Uses `clip` (not `hidden`): `overflow:hidden` on html/body turns them into a
   scroll container, which breaks `position: sticky` on the navbar past the hero.
   `overflow-x: clip` prevents horizontal scroll WITHOUT establishing a scroll
   container, so the sticky navbar keeps working across all sections. */
html,
body {
  overflow-x: clip;
  max-width: 100vw;
}

img,
video,
iframe {
  max-width: 100%;
}

/* About UPTIB — function grid (called out in round 26) */
@media (max-width: 1023px) {
  .func-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .func-grid {
    grid-template-columns: 1fr !important;
  }

  .func-cell {
    padding: 32px 24px !important;
    min-height: auto !important;
  }

  .func-cell__num {
    font-size: 32px;
  }
}

/* Highlights — 4-up YouTube thumbnail row */
@media (max-width: 1023px) {
  .hl-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .hl-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Summit 2025 stat callouts row */
@media (max-width: 1023px) {
  .s25-stats {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* Sponsorship tier ladder — equal stacked cards on tablet+mobile */
@media (max-width: 1023px) {
  .sponsor-ladder {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .sponsor-rung--bronze,
  .sponsor-rung--silver,
  .sponsor-rung--gold,
  .sponsor-rung--vip {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 320px !important;
  }
}

/* Packages featured card — stack red panel above white panel */
@media (max-width: 1023px) {
  .pkg-featured {
    grid-template-columns: 1fr !important;
  }

  .pkg-featured__right {
    border-left: 1px solid var(--c-border) !important;
    border-top: 0;
  }

  .pkg-featured__list {
    grid-template-columns: 1fr !important;
  }

  .pkg-support-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Packages comparison table — let it scroll horizontally with a hint */
.pkg-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1023px) {
  .pkg-table-wrap::after {
    content: '← scroll →';
    display: block;
    text-align: center;
    color: var(--c-muted);
    font-size: 12px;
    padding: 8px;
  }
}

/* Hero — content scaling on mobile (the centered .line spans + countdown) */
@media (max-width: 640px) {
  .hero {
    padding: 80px 16px !important;
    min-height: 600px;
  }

  .countdown {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .countdown__unit {
    flex: 0 0 calc(50% - 8px);
    min-width: 0;
  }
}

/* Theme banner — buttons already collapse 4→2→1 via existing @media at 1100/700;
   nothing extra needed here, but enforce wrap just in case. */
.theme-banner__ctas {
  flex-wrap: wrap;
}

/* Footer 4-col → 2-col → 1-col (existing rules at 1100/700; ensure tablet 2-col) */
@media (max-width: 1023px) and (min-width: 701px) {
  .footer__inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }
}

/* Touch-target accessibility minimums on phone (≤640px) */
@media (max-width: 640px) {

  .btn,
  .nav__cta,
  .nav__mobile-cta,
  .faq__q,
  .faq__toggle,
  .theme-banner-btn,
  .tl-cta-button,
  .tl-arrow {
    min-height: 44px;
  }

  .faq__toggle {
    min-width: 44px;
  }

  .nav__mobile-link {
    min-height: 56px;
  }
}

/* Form — already collapses to 1 column at ≤700px via existing rule; ensure
   tighter padding on small phones. */
@media (max-width: 640px) {
  .reg__card {
    padding: 32px 20px !important;
  }
}

/* Gallery masonry — already adapts column-count via existing rules; verify a
   final ≤480px fallback to single column so very narrow phones don't crush. */
@media (max-width: 480px) {
  .masonry {
    column-count: 1 !important;
    column-gap: 8px !important;
  }
}

/* ============================================================
   ROUND 32 — Green promoted to a full third brand pillar with a single
   consistent role: the UK–Pakistan "growth / value" accent. It now recurs in
   four deliberate, semantically-grounded places (not scattered):
     1. Theme Banner buttons 2 + 4 (.theme-banner-btn--green)
     2. Footer tagline "Shared Prosperity" (.footer__tag--green, here)
     3. Why-Attend bento cell 06 "Visibility" (.bento__cell--green)
     4. Packages "what's included" list bullets (.pkg*__list li::before)
        + Sectors growth tiles: Rice & Agriculture, Renewable Energy
          (.sec-tile--green)
   ============================================================ */

/* Footer contact-block sub-headings — both red underlines (round 27 leftover
   structure kept; green modifier removed so London + Pakistan match). */
.footer__contact-heading {
  position: relative;
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.footer__contact-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background-color: var(--c-red);
}

/* Footer tagline — split into red + green halves of the partnership */
.footer__tag {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.footer__tag--red {
  color: var(--c-red);
}

.footer__tag--green {
  color: var(--green);
}

.footer__tag-sep {
  color: var(--c-muted);
}

/* ============================================================
   ROUND 31 — Executive Committee leadership section
   ============================================================ */

.exec-row-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 8px;
  margin-bottom: 40px;
}

.exec-card-featured {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  display: flex;
  min-height: 340px;
  overflow: hidden;
}

.exec-card-featured__photo {
  flex: 0 0 40%;
  width: 40%;
  height: auto;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.exec-card-featured__content {
  flex: 1;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.exec-card-featured__accent {
  display: block;
  width: 40px;
  height: 3px;
  background-color: var(--c-red);
  margin-bottom: 16px;
}

.exec-card-featured__name {
  font-size: 22px;
  font-weight: 800;
  color: var(--c-navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
  margin: 0 0 6px;
}

.exec-card-featured__title {
  font-size: 13px;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 20px;
}

.exec-card-featured__message {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-muted);
  font-style: italic;
  padding-left: 16px;
  border-left: 2px solid var(--c-border);
  margin: 0;
}

.exec-row-compact {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

.exec-card-compact {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.exec-card-compact__photo {
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: center top;
  margin: 0 0 24px;
  display: block;
  border-radius: 50%;
  /* DP-style circular crop — third deliberate radius exception */
}

.exec-card-compact__accent {
  display: block;
  width: 32px;
  height: 2px;
  background-color: var(--c-red);
  margin: 0 0 12px;
}

.exec-card-compact__name {
  font-size: 16px;
  font-weight: 800;
  color: var(--c-navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 4px;
}

.exec-card-compact__title {
  font-size: 12px;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0;
}

@media (max-width: 1023px) {
  .exec-card-featured__photo {
    flex: 0 0 35%;
    width: 35%;
  }

  .exec-card-featured__content {
    padding: 24px 20px;
  }

  .exec-card-compact__photo {
    width: 140px;
    height: 140px;
  }
}

@media (max-width: 640px) {

  .exec-row-featured,
  .exec-row-compact {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 28px;
  }

  .exec-card-featured {
    flex-direction: column;
    min-height: auto;
  }

  .exec-card-featured__photo {
    flex: 0 0 auto;
    width: 100%;
    height: 280px;
  }

  .exec-card-featured__content {
    padding: 28px 24px;
  }

  .exec-card-compact__photo {
    width: 140px;
    height: 140px;
  }
}

/* ============================================================
   ROUND 33 — Thin 1px white line between navy form and navy footer
   ============================================================ */
/* .footer {
  border-top: 1px solid rgba(255,255,255,0.15);
} */

/* ============================================================
   CLEAN REDESIGN — Sections 1-12 white-dominant restyle
   (Appended at end so it wins the cascade over older rules)
   ============================================================ */

/* ---- 1. COMMITTEE ---- */
/* Featured leaders: photo left, content right (already ok), just hide accents */
.exec-card-featured__accent,
.exec-card-compact__accent {
  display: none !important;
}

/* Featured card: photo on top on narrow, content clean */
.exec-card-featured {
  border-radius: 6px;
  border: 1px solid var(--c-border) !important;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.exec-card-featured:hover {
  border-color: #d3d8e0 !important;
  box-shadow: 0 10px 30px rgba(1,33,105,0.06);
}

/* Compact card: photo on top, centered */
.exec-card-compact {
  border-radius: 6px;
  border: 1px solid var(--c-border) !important;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.exec-card-compact:hover {
  border-color: #d3d8e0 !important;
  box-shadow: 0 10px 30px rgba(1,33,105,0.06);
}

/* ---- 2. PACKAGES ---- */

/* Featured package: remove green left panel — white card with red top border */
.pkg-featured {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-red) !important;
  border-radius: 6px;
  overflow: hidden;
}

.pkg-featured__left {
  background: var(--c-white) !important;
  color: var(--c-navy) !important;
  padding: 40px 40px 24px !important;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.pkg-featured__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-red) !important;
  background: rgba(200,16,46,0.07);
  padding: 4px 10px;
  border-radius: 3px;
  margin: 0 0 12px;
}

.pkg-featured__name {
  font-family: var(--font-sans) !important;
  font-size: clamp(22px, 2.4vw, 28px) !important;
  font-weight: 700 !important;
  color: var(--c-navy) !important;
  text-transform: none !important;
  margin: 0 0 8px !important;
}

.pkg-featured__price {
  font-family: var(--font-sans) !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  color: var(--c-navy) !important;
  margin: 0 0 8px !important;
}

.pkg-featured__tag {
  font-size: 14px !important;
  color: var(--c-muted) !important;
}

.pkg-featured__right {
  padding: 0 40px 40px !important;
  border-left: 0 !important;
  border-top: 1px solid var(--c-border) !important;
  background: var(--c-white) !important;
}

/* CTA below featured card: use standard ghost button colors */
.pkg-featured__cta {
  border-color: var(--c-border) !important;
  color: var(--c-navy) !important;
  border-radius: 4px;
}
.pkg-featured__cta:hover {
  background: var(--c-navy) !important;
  border-color: var(--c-navy) !important;
  color: var(--c-white) !important;
}

/* Support cards: remove colored top accent bars */
.pkg-support__band {
  display: none !important;
}

.pkg-support {
  border-radius: 6px !important;
  padding-top: 28px !important;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.pkg-support:hover {
  border-color: #d3d8e0 !important;
  box-shadow: 0 10px 30px rgba(1,33,105,0.06);
}

/* Support card number: remove text-stroke outlined style */
.pkg-support__num {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--c-muted) !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  letter-spacing: 1px;
  margin: 0 0 8px !important;
}

/* Support price: navy not red */
.pkg-support__price {
  color: var(--c-navy) !important;
}

/* Comparison table: navy header row, red Strategic Partner column, pink star cells */
.pkg-table thead th {
  background: var(--c-navy) !important;
  color: var(--c-white) !important;
}

.pkg-table__price {
  color: #FFB3BD !important;
  font-family: var(--font-serif) !important;
}

/* Featured column header: red fill */
.pkg-table thead th.pkg-table__star {
  background: var(--c-red) !important;
  color: var(--c-white) !important;
}
.pkg-table thead th.pkg-table__star .pkg-table__price {
  color: var(--c-white) !important;
}

/* Featured column body cells: pink tint */
.pkg-table tbody td.pkg-table__star {
  background: #FFF4F4 !important;
  color: var(--c-navy) !important;
  font-weight: 600 !important;
}

/* Additional services strip: remove navy background */
.addl-services {
  background: var(--c-white) !important;
  color: var(--c-navy) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 6px;
  padding: 18px 24px !important;
}

.addl-services__label {
  color: var(--c-navy) !important;
}

.addl-services__list li {
  color: var(--c-text) !important;
  border-color: var(--c-border) !important;
  border-radius: 3px;
}

/* ---- 3. DELEGATES ---- */

/* Change green left border on .delegate-includes to red */
/* .delegate-includes {
  border-left: 3px solid var(--c-red) !important;
} */

/* Featured delegate card: neutral border, same as the other card (Rev 8 — no red outline) */
.delegate-card--featured {
  border: 1px solid var(--c-border) !important;
  box-shadow: none !important;
}

/* Prices: navy not green */
.delegate-card__price {
  color: var(--c-navy) !important;
}

/* "Best value" note: use muted not green */
.delegate-card__note--accent {
  color: var(--c-muted) !important;
  font-weight: 600;
}

/* ---- 4. SPONSORSHIPS ---- */

/* Replace pyramid with equal-height 4-col uniform grid */
.sponsor-ladder {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  align-items: stretch !important;
  gap: 24px !important;
  margin-bottom: 56px !important;
}

/* Equal cards, no different heights */
.sponsor-rung {
  flex: unset !important;
  min-height: 0 !important;
  width: auto !important;
  border-radius: 6px !important;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  display: flex !important;
  flex-direction: column !important;
}
.sponsor-rung:hover {
  border-color: #d3d8e0 !important;
  box-shadow: 0 10px 30px rgba(1,33,105,0.06);
}

/* Override specific rung sizes from the pyramid system */
.sponsor-rung--bronze,
.sponsor-rung--silver,
.sponsor-rung--gold,
.sponsor-rung--vip {
  flex: unset !important;
  min-height: 0 !important;
  width: auto !important;
}

/* Remove colored top accent bars */
.sponsor-rung__band {
  display: none !important;
}

/* Outlined number: convert to small muted label */
.sponsor-rung__num {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: var(--c-muted) !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  margin: 0 0 8px !important;
}

/* Price: navy not red */
.sponsor-rung__price {
  color: var(--c-navy) !important;
  font-family: var(--font-sans) !important;
}

/* Recognition band: remove navy full-bleed → light bordered box */
.recognition-band {
  background: var(--c-gray) !important;
  color: var(--c-navy) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 6px;
}

.recognition-band__label {
  color: var(--c-navy) !important;
  font-weight: 700;
}

.recognition-band__text {
  color: var(--c-muted) !important;
}

@media (max-width: 1023px) {
  .sponsor-ladder {
    grid-template-columns: repeat(2, 1fr) !important;
    flex-direction: unset !important;
    align-items: unset !important;
  }
}

@media (max-width: 640px) {
  .sponsor-ladder {
    grid-template-columns: 1fr !important;
  }
}

/* ---- 5. TIMELINE ---- */

/* Remove navy full-bleed background — use --c-gray */
.tl-section {
  background-color: var(--c-gray) !important;
  color: var(--c-text) !important;
}

.tl-container {
  background-color: transparent !important;
}

/* Flip all the white text to navy/muted */
.tl-eyebrow {
  color: var(--c-muted) !important;
}

.tl-dot {
  background-color: var(--c-red) !important;
}

.tl-heading {
  color: var(--c-navy) !important;
  font-size: clamp(28px, 4vw, 48px) !important;
}

.tl-line {
  background-color: var(--c-navy) !important;
}

/* Cards: white with border, radius 6px, no dark bg */
.tl-card {
  background-color: var(--c-white) !important;
  border: 1px solid var(--c-border) !important;
  border-top: 3px solid var(--c-red) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.tl-card:hover {
  border-color: #d3d8e0 !important;
  box-shadow: 0 10px 30px rgba(1,33,105,0.06) !important;
}

/* Remove Pakistan/UK accent colors — all use single thin red rule */
.tl-card--pakistan {
  border-top-color: var(--c-red) !important;
}

.tl-card--uk {
  border-top-color: var(--c-red) !important;
}

/* Flip card text from white to navy/muted */
.tl-number {
  color: var(--c-navy) !important;
}

.tl-title {
  color: var(--c-navy) !important;
}

.tl-date {
  color: var(--c-red) !important;
  font-size: 12px !important;
}

.tl-card--pakistan .tl-date {
  color: var(--c-red) !important;
}

.tl-desc {
  color: var(--c-muted) !important;
}

/* Arrows: white/bordered, navy icon */
.tl-arrow {
  background-color: var(--c-white) !important;
  border: 1.5px solid var(--c-border) !important;
  color: var(--c-navy) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(1,33,105,0.10);
}
.tl-arrow:hover {
  background-color: var(--c-navy) !important;
  color: var(--c-white) !important;
  border-color: var(--c-navy) !important;
}

/* CTA strip: light bordered box */
.tl-cta {
  background-color: var(--c-white) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 6px;
  margin-top: 32px !important;
}

.tl-cta-left {
  color: var(--c-navy) !important;
}

.tl-cta-text {
  color: var(--c-navy) !important;
}

.tl-flag {
  background-color: var(--c-gray);
  color: var(--c-navy) !important;
  border: 1px solid var(--c-border);
}

/* CTA button stays red */
.tl-cta-button {
  background-color: var(--c-red) !important;
  color: var(--c-white) !important;
  border-radius: 4px !important;
}
.tl-cta-button:hover {
  background-color: var(--c-red-dark) !important;
}

/* ---- 6. HIGHLIGHTS ---- */

/* Stat numbers: navy not red */
.s25-stat__num {
  color: var(--c-navy) !important;
}

/* ---- 7. ABOUT ---- */

/* func-grid: thin --c-border hairlines, not navy-background gap fill */
.func-grid {
  background-color: var(--c-border) !important;
}

.func-cell {
  background: var(--c-white) !important;
  border-radius: 0;
  transition: border-color 200ms ease;
}

/* func-cell number: keep red eyebrow style is fine */
/* func-cell rule: thin muted line */
.func-cell__rule {
  background: var(--c-border) !important;
}

/* milestones-band: remove green full-bleed → clean light row */
.milestones-band {
  background: var(--c-gray) !important;
  color: var(--c-navy) !important;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.milestones-band__item {
  border-right-color: var(--c-border) !important;
}

.milestones-band__date {
  color: var(--c-navy) !important;
  font-family: var(--font-sans) !important;
}

.milestones-band__event {
  color: var(--c-navy) !important;
}

.milestones-band__loc {
  color: var(--c-muted) !important;
}

/* ---- 8. ORGANIZATIONS ---- */

/* Static grid replaces marquee — .org-grid class added in HTML below */
.org-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 48px;
}

.org-grid__cell {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  transition: border-color 200ms ease;
}

.org-grid__cell:hover {
  border-color: #d3d8e0;
}

.org-grid__cell img {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: filter 200ms ease, opacity 200ms ease;
}

.org-grid__cell:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

@media (max-width: 1023px) {
  .org-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 640px) {
  .org-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Hide the old marquee */
.marquee {
  display: none !important;
}

/* ---- 9. GALLERY ---- */

/* Remove dark background */
.gallery-dark {
  background: #000 !important;
}

.gallery-dark .section-title {
  color: var(--c-white) !important;
}

.gallery-dark .section-intro {
  color: rgba(255, 255, 255, 0.7) !important;
}

.gallery-dark .gallery-note {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Clean uniform grid — 4 col, fixed aspect-ratio */
.masonry {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  column-count: unset !important;
  margin-bottom: 24px !important;
}

.masonry__cell {
  background: var(--c-white) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 !important;
  break-inside: unset !important;
  display: block !important;
  width: 100% !important;
}

.masonry__cell img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (max-width: 1023px) {
  .masonry {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .masonry {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 400px) {
  .masonry {
    grid-template-columns: 1fr !important;
  }
}

/* ---- 10. FAQs ---- */
/* faq__toggle open state: red (already set, just clean/confirm) */
.faq__item.is-open .faq__toggle {
  background: var(--c-red) !important;
  border-color: var(--c-red) !important;
  color: var(--c-white) !important;
}

/* ---- 11. REGISTER ---- */

/* Remove navy full-bleed section bg */
.reg {
  background: var(--c-gray) !important;
  color: var(--c-text) !important;
}

/* Section title: navy (was white-on-navy) */
.reg .section-title {
  color: var(--c-navy) !important;
}

/* Eyebrow in reg header: use standard red */
.reg__header .eyebrow {
  color: var(--c-red) !important;
}

/* Intro text: normal muted */
.reg__intro {
  color: var(--c-muted) !important;
}

/* Label icon: subtle navy instead of green */
.reg__label-ico {
  color: var(--c-muted) !important;
}

/* Delegate panel left accent: red not green */
.reg__delegate {
  border-left: 4px solid var(--c-red) !important;
}

/* Bank strip: light bordered box, navy text */
.bank-strip {
  background: var(--c-gray) !important;
  color: var(--c-navy) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 6px;
}

/* ---- 12. FOOTER — keep navy, just minor cleanup ---- */
/* Footer heading underline stays red (already set in existing CSS — no change needed) */
/* ============================================================
   FEATURE ROW — clean text + image side-by-side (reference style)
   ============================================================ */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.feature-row + .feature-row {
  margin-top: 88px;
}

.feature-row--reverse .feature-row__media {
  order: -1;
}

.feature-row__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.feature-row__lead {
  font-size: 19px;
  line-height: 1.65;
  color: var(--c-text);
  margin: 0 0 24px;
}

.feature-row__title {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 16px;
  line-height: 1.2;
}

.feature-row__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-red);
  margin: 0 0 14px;
}

.feature-list {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feature-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--c-muted);
}

.feature-list li strong {
  color: var(--c-navy);
  font-weight: 600;
}

.feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: var(--c-red);
  border-radius: 50%;
}

@media (max-width: 860px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .feature-row--reverse .feature-row__media {
    order: 0;
  }
  .feature-row__media img {
    max-height: 320px;
  }
  .feature-row + .feature-row {
    margin-top: 48px;
  }
}

/* ============================================================
   COMMITTEE — featured leaders as photo-beside-text rows
   ============================================================ */
.exec-row-featured {
  grid-template-columns: 1fr !important;
  gap: 28px !important;
}

.exec-card-featured {
  display: grid !important;
  grid-template-columns: 240px 1fr;
  gap: 36px;
  align-items: center;
  padding: 28px !important;
}

.exec-card-featured__photo {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
}

.exec-card-featured__name {
  font-size: 22px;
}

.exec-card-featured__title {
  color: var(--c-red);
  font-weight: 600;
  margin-bottom: 12px;
}

.exec-card-featured__message {
  font-style: italic;
  color: var(--c-muted);
  line-height: 1.7;
}

@media (max-width: 700px) {
  .exec-card-featured {
    grid-template-columns: 1fr !important;
    gap: 20px;
    text-align: center;
  }
  .exec-card-featured__photo {
    max-width: 200px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
  }
}

/* ============================================================
   REVISION 1 — change requests (navbar, why-attend, committee,
   sponsorships, about, organizations, gallery, faqs)
   Appended last so it wins the cascade over earlier blocks.
   ============================================================ */

/* ---- 2. WHY ATTEND — 4 equal text cards, no image ---- */
.why-grid--four {
  grid-template-columns: repeat(4, 1fr);
}
.why-grid--four .why-card {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.why-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  color: var(--c-red);
  margin-bottom: 20px;
}
.why-card__icon svg {
  width: 26px;
  height: 26px;
}
@media (max-width: 980px) {
  .why-grid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .why-grid--four { grid-template-columns: 1fr; }
}

/* ---- 3. EXECUTIVE COMMITTEE — top two leaders side-by-side ---- */
.exec-row-featured {
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
}
.exec-card-featured {
  grid-template-columns: 132px 1fr !important;
  gap: 24px !important;
  align-items: center !important;
  text-align: left !important;
  padding: 28px !important;
}
.exec-card-featured__photo {
  width: 132px !important;
  height: 132px !important;
  aspect-ratio: 1 / 1;
}
@media (max-width: 980px) {
  .exec-row-featured { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .exec-card-featured {
    grid-template-columns: 1fr !important;
    justify-items: center;
    text-align: center !important;
  }
  .exec-card-featured__photo { margin: 0 auto !important; }
}

/* ---- 4. SPONSORSHIPS — pricing-tier cards, Gold recommended ---- */
.sponsor-rung {
  overflow: hidden !important;
  transition: transform 220ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
.sponsor-rung:hover {
  transform: translateY(-6px);
}
/* restore the colored top header bar */
.sponsor-rung__band {
  display: block !important;
  height: 6px !important;
}
/* Recommended (Gold) tier — emphasised by border + ribbon + shadow only.
   Rev 9: no translateY offset, so all cards stay the same height and their
   CTAs line up on one baseline. */
.sponsor-rung--gold {
  border: 2px solid var(--c-red) !important;
  box-shadow: 0 14px 38px rgba(1, 33, 105, 0.12) !important;
}
.sponsor-rung__ribbon {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  background: var(--c-red);
  color: var(--c-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-bottom-left-radius: 6px;
}
/* checkmark benefit list (green = success accent) */
.sponsor-rung__list li {
  padding-left: 24px !important;
}
.sponsor-rung__list li::before {
  content: '✓' !important;
  left: 0 !important;
  top: 0 !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  color: var(--green) !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}

/* ---- 5. ABOUT UPTIB — centered intro + 3 capability tiles ---- */
.about-lead {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.about-lead__text {
  font-size: 19px;
  line-height: 1.7;
  color: var(--c-text);
  margin: 0 0 24px;
}
.about-lead .about-intro__chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.about-caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}
.about-cap {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 36px 28px;
  text-align: center;
}
.about-cap__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-gray);
  color: var(--c-red);
  margin-bottom: 18px;
}
.about-cap__icon svg {
  width: 28px;
  height: 28px;
}
.about-cap__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 10px;
}
.about-cap__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-muted);
  margin: 0;
}
@media (max-width: 860px) {
  .about-caps { grid-template-columns: 1fr; }
}

/* ---- 6. ORGANIZATIONS — running logo marquee ---- */
.org-marquee {
  position: relative;
  overflow: hidden;
  margin-bottom: 48px;
  padding: 8px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.org-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: orgMarquee 55s linear infinite;
}
.org-marquee:hover .org-marquee__track {
  animation-play-state: paused;
}
.org-marquee__item {
  flex: 0 0 auto;
  height: 84px;
  margin-right: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.org-marquee__item img {
  max-height: 72px;
  width: auto;
  object-fit: contain;
  /* Rev 3: original colors at all times — no grayscale, full opacity */
  filter: none;
  opacity: 1;
}
@keyframes orgMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .org-marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }
}

/* ---- 7. GALLERY — 10 per row, square thumbs, tight gutter (Rev 3) ---- */
.masonry {
  grid-template-columns: repeat(10, 1fr) !important;
  gap: 4px !important;
}
.masonry__cell {
  aspect-ratio: 1 / 1 !important;
  border-radius: 4px !important;
}
@media (max-width: 992px) {
  .masonry { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 576px) {
  .masonry { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- 8. FAQs — two columns (6 + 6) ---- */
.faq {
  max-width: 1080px !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
  align-items: start;
}
.faq__col {
  display: block;
}
@media (max-width: 768px) {
  .faq {
    grid-template-columns: 1fr;
    max-width: 720px !important;
    gap: 0;
  }
}

/* ============================================================
   REVISION 2 — fixes (sticky fix is in the overflow block above;
   committee photos, full-bleed gallery, navy CTAs, delegate card)
   ============================================================ */

/* ---- 2. COMMITTEE — enlarge the two lead photos (~18% bigger) ---- */
.exec-card-featured {
  grid-template-columns: 156px 1fr !important;
}
.exec-card-featured__photo {
  width: 156px !important;
  height: 156px !important;
}
@media (max-width: 560px) {
  .exec-card-featured {
    grid-template-columns: 1fr !important;
  }
  .exec-card-featured__photo {
    width: 180px !important;
    height: 180px !important;
  }
}

/* ---- 3. GALLERY — full-bleed (break out of .container to full viewport) ---- */
.gallery-dark .masonry {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 0 16px;
}

/* ---- 4. SPONSORSHIPS — Register button: full width, solid navy, bottom-aligned ---- */
.sponsor-rung .btn {
  align-self: stretch !important;
  width: 100% !important;
  margin-top: auto;
  background: var(--c-navy) !important;
  border-color: var(--c-navy) !important;
  color: var(--c-white) !important;
}
.sponsor-rung .btn:hover {
  background: var(--c-navy-dark) !important;
  border-color: var(--c-navy-dark) !important;
}

/* ---- 5. DELEGATE — neutralize red outline on "Without UK Visa" card ---- */
.delegate-card--featured {
  border: 1px solid var(--c-border) !important;
  box-shadow: none !important;
}

/* ---- 6. PACKAGES — main CTAs to solid navy (primary blue) ---- */
#packages .pkg-featured__cta {
  background: var(--c-navy) !important;
  border-color: var(--c-navy) !important;
  color: var(--c-white) !important;
}
#packages .pkg-featured__cta:hover {
  background: var(--c-navy-dark) !important;
  border-color: var(--c-navy-dark) !important;
}
#packages .section-cta .btn--primary {
  background: var(--c-navy) !important;
}
#packages .section-cta .btn--primary:hover {
  background: var(--c-navy-dark) !important;
}

/* ============================================================
   REVISION 3 — timeline arrows to primary blue
   (other Rev 3 changes: nav/section vars, gallery 8-col, marquee
   colors, and sector labels are edited in place above / in HTML)
   ============================================================ */

/* ---- 1. ENGAGEMENT TIMELINE — prev/next arrows: solid navy, darker on hover ---- */
.tl-arrow {
  background-color: var(--c-navy) !important;
  border-color: var(--c-navy) !important;
  color: var(--c-white) !important;
}
.tl-arrow:hover {
  background-color: var(--c-navy-dark) !important;
  border-color: var(--c-navy-dark) !important;
  color: var(--c-white) !important;
}

/* ============================================================
   REVISION 4 — two-page site: anchor offset for sticky nav,
   About page banner + CTA band. (Nav active state reuses the
   existing .nav__link.is-active styling.)
   ============================================================ */

/* Sections clear the sticky navbar when scrolled/jumped to */
section[id] {
  scroll-margin-top: calc(var(--nav-h) + 8px);
}

/* ---- About page: slim page banner ---- */
.page-banner {
  position: relative;
  overflow: hidden;
  background: var(--c-navy);
  color: var(--c-white);
  padding: 0;            /* the image now drives the height */
  text-align: center;
}
.page-banner__bg {
  display: block;
  width: 100%;
  height: auto;          /* full image, proper height, no crop */
  opacity: 1;            /* full colour — no navy tint */
}
.page-banner__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 32px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);  /* keeps text readable on the photo */
}
.page-banner__intro { max-width: 660px; }
.page-banner__tag {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0 0 22px;
}
.page-banner__title {
  font-size: clamp(40px, 5.6vw, 68px);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin: 0 0 22px;
}
.page-banner__title .accent {
  color: var(--c-white);
}
.page-banner__intro {
  font-size: 21px;
  line-height: 1.6;
  color: var(--c-white);
  margin: 0;
}

/* ---- About page: CTA band ---- */
.cta-band {
  background: var(--green);
  color: var(--c-white);
  text-align: center;
}
.cta-band__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 32px;
}
.cta-band__text {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 28px;
}

/* ============================================================
   REVISION 5 — last-word accent, typographic Why-Attend grid,
   tabbed Summit Programme agenda
   ============================================================ */

/* Primary-color last-word accent for headings on light sections */
.section-title .accent,
.feature-row__title .accent,
.expect-item__title .accent,
.agenda__title .accent {
  color: var(--c-red);
}

/* ---- 2. WHY ATTEND — 4 columns, circular outline icon w/ hover fill ---- */
.expect-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
  max-width: 1080px;
  margin: 24px auto 0;
}
.expect-item {
  text-align: center;
}
.expect-item__icon {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  border: 2px solid var(--c-red);
  color: var(--c-red);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  transition: background-color 250ms ease, color 250ms ease;
}
.expect-item__icon svg {
  width: 44px;
  height: 44px;
}
.expect-item:hover .expect-item__icon {
  background: var(--c-red);
  color: var(--c-white);
}
.expect-item__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 12px;
  line-height: 1.3;
}
.expect-item__desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-muted);
  margin: 0 auto;
  max-width: 26em;
}
@media (max-width: 900px) {
  .expect-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }
}
@media (max-width: 560px) {
  .expect-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---- 3. SUMMIT PROGRAMME — tabbed day agenda ---- */
.agenda {
  max-width: 920px;
  margin: 8px auto 0;
}
.agenda__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  border-bottom: 1px solid var(--c-border);
}
.agenda__tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 16px 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-muted);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
}
.agenda__tab-date {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.7;
}
.agenda__tab:hover {
  color: var(--c-navy);
}
.agenda__tab.is-active {
  color: var(--c-red);
  border-bottom-color: var(--c-red);
}
.agenda__panel {
  display: none;
}
.agenda__panel.is-active {
  display: block;
}
.agenda__row {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  padding: 28px 4px;
  border-bottom: 1px solid var(--c-border);
}
.agenda__row:last-child {
  border-bottom: 0;
}
.agenda__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 10px;
}
.agenda__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 8px;
}
.agenda__text {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--c-muted);
  margin: 0 auto;
  max-width: 540px;
}
.agenda__cta {
  max-width: 920px;
  margin: 40px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.agenda__cta-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-navy);
}
@media (max-width: 640px) {
  .agenda__tab { padding: 14px 16px; font-size: 14px; }
  .agenda__row { grid-template-columns: 1fr; gap: 6px; }
  .agenda__label { padding-top: 0; }
  .agenda__cta { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   REVISION 6 — tighten Video↔Organizations gap, footer bg image
   ============================================================ */

/* 1. Trim the shared boundary between the Video (#highlights) and
   Organizations sections (was 96+96=192px → ~88px total). */
#highlights {
  padding-bottom: 44px;
}
#organizations {
  padding-top: 100px;
}

/* 2. Footer — muted London photo behind a semi-transparent navy overlay.
   The navy gradient keeps logos/contact/links fully legible; the
   background-color stays navy underneath as a fallback. */
.footer {
  position: relative;
  background-image:
    linear-gradient(rgba(1, 32, 105, 0.7), rgba(1, 32, 105, 0.88)),
    url("assets/uk-skylines.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============================================================
   REVISION 10 — editorial redesign pass (everything below hero)
   Whitespace + hairlines instead of boxes; one accent; subtle
   reveal-on-scroll. Navbar / hero / fonts / palette untouched.
   ============================================================ */

/* --- Subtle fade-in on scroll --- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- Alternating white / very-light-grey section backgrounds --- */
#why-attend,
#packages,
#sponsorships,
#highlights,
#register {
  background: var(--c-white) !important;
}
#gallery {
  background: #000 !important;
}
#sectors,
#delegates,
#timeline,
#organizations,
#faqs {
  background: var(--c-gray) !important;
}
/* gallery sits on black — keep its title/intro light */
#gallery .section-title {
  color: var(--c-white) !important;
}
#gallery .section-intro,
#gallery .gallery-note {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* --- Hairlines, not heavy borders; drop shadows except a subtle hover lift --- */
.pkg-featured,
.pkg-support,
.sponsor-rung,
.delegate-card,
.delegate-includes,
.recognition-band,
.bank-strip,
.addl-services {
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
}
.pkg-support,
.sponsor-rung,
.delegate-card {
  transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease !important;
}
.pkg-support:hover,
.sponsor-rung:hover,
.delegate-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

/* --- Why Attend — bold UPPERCASE titles (last word accent) --- */
.expect-item__title {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 15px;
}

/* --- Key Sectors — flatten: sharp corners, hairline gutter, keep photos --- */
.sec-tiles {
  gap: 2px !important;
}
.sec-tile {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.sec-tile--navy .sec-tile__hover,
.sec-tile--red .sec-tile__hover,
.sec-tile--green .sec-tile__hover {
  background: rgba(1, 33, 105, 0.90) !important;
}

/* --- Gallery — gentle hover zoom (thumbs already square + tight) --- */
.masonry__cell img {
  transition: transform 320ms ease;
}
.masonry__cell:hover img {
  transform: scale(1.06);
}

/* --- Registration — airy clean card on a white section; fields unchanged --- */
#register {
  background: var(--c-white) !important;
}
.reg__card {
  background: var(--c-white) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(1, 33, 105, 0.06) !important;
}
.reg__input:focus {
  outline: none;
  border-color: var(--c-red) !important;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15) !important;
}

/* ============================================================
   REVISION 11 — reference sponsorship cards, navy stats band,
   all-white sections with one navy + one red accent band
   ============================================================ */

/* --- 3. Backgrounds: NO grey anywhere; white everywhere except two bands --- */
.section--gray { background: var(--c-white) !important; }
#sectors, #delegates, #timeline, #organizations, #faqs, #register, .reg {
  background: var(--c-white) !important;
}
/* small info boxes lose their grey fill (hairline instead) */
.recognition-band,
.bank-strip {
  background: var(--c-white) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Red accent band — the tagline strip */
.tagline {
  background: var(--green) !important;
  border-bottom: 0 !important;
}
.tagline__text { color: var(--c-white) !important; }
.tagline__meta { color: var(--c-white) !important; }

/* --- 2. "What to Expect" numbers bar → solid navy band --- */
.stats-strip {
  background: var(--c-navy) !important;
  padding: 56px 0 !important;
}
.stats-strip__list { border: 0 !important; }
.stats-strip__item { border: 0 !important; }
.stats-strip__num { color: var(--c-white) !important; }
.stats-strip__label { color: #AEC4EC !important; }

/* --- 1. Sponsorship cards — flat white, colored top bar only, ghost CTA --- */
.sponsor-ladder { gap: 32px !important; }
.sponsor-rung {
  background: var(--c-white) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.sponsor-rung:hover {
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
/* colored top bar per tier — the only color block on the card */
.sponsor-rung__band { display: block !important; height: 4px !important; }
.sponsor-rung--bronze .sponsor-rung__band { background: #8C5A2B !important; }
.sponsor-rung--silver .sponsor-rung__band { background: #9CA3AF !important; }
.sponsor-rung--gold   .sponsor-rung__band { background: #C8A24B !important; }
.sponsor-rung--vip    .sponsor-rung__band { background: var(--c-red) !important; }
/* drop the gold "recommended" emphasis */
.sponsor-rung--gold { border: 0 !important; box-shadow: none !important; }
.sponsor-rung__ribbon { display: none !important; }
/* faint outlined tier number, navy */
.sponsor-rung__num {
  font-family: var(--font-serif) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: transparent !important;
  -webkit-text-stroke: 1.5px rgba(1, 33, 105, 0.40) !important;
  margin: 0 0 12px !important;
}
/* tier name navy uppercase (already uppercase in base) */
.sponsor-rung__name { color: var(--c-navy) !important; }
/* price large, red */
.sponsor-rung__price {
  color: var(--c-red) !important;
  font-family: var(--font-serif) !important;
  font-size: 30px !important;
}
/* hairline divider above benefits */
.sponsor-rung__list { border-top: 1px solid rgba(0, 0, 0, 0.08) !important; }
/* red square bullets */
.sponsor-rung__list li { padding-left: 20px !important; }
.sponsor-rung__list li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 7px !important;
  width: 7px !important;
  height: 7px !important;
  background: var(--c-red) !important;
  color: transparent !important;
}
/* outlined (ghost) full-width REGISTER NOW button */
.sponsor-rung .btn {
  align-self: stretch !important;
  width: 100% !important;
  margin-top: auto;
  background: transparent !important;
  border: 1.5px solid var(--c-navy) !important;
  color: var(--c-navy) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px;
}
.sponsor-rung .btn:hover {
  background: var(--c-navy) !important;
  color: var(--c-white) !important;
  border-color: var(--c-navy) !important;
}

/* ============================================================
   REVISION 12 — bordered + bottom-anchored sponsorship cards;
   two more color bands (4 total, distributed, alternating)
   ============================================================ */

/* --- 1. Sponsorship cards: thin light border back; content anchored to bottom --- */
.sponsor-rung,
.sponsor-rung--gold {
  border: 1px solid var(--c-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
/* push the whole content block to the bottom; empty/flex space goes up top */
.sponsor-rung__body {
  justify-content: flex-end !important;
}
.sponsor-rung__list {
  flex: 0 0 auto !important;
}
/* ghost CTA pinned at the very bottom, thicker border */
.sponsor-rung .btn {
  margin-top: 0 !important;
  border-width: 2.5px !important;
}

/* Rev 16: Highlights + Gallery band colours removed — these sections are
   plain white again (separation now comes from the cut-off bands below). */

/* ============================================================
   REVISION 13 — equal-height + tighter sponsorship cards;
   Delegates = navy band; Gallery recoloured to GREEN band
   ============================================================ */

/* --- 1 + 2. Sponsorship cards: equal full height + tighter gutter (wider cards) --- */
.sponsor-ladder {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  align-items: stretch !important;
  gap: 16px !important;
}
.sponsor-rung {
  height: 100% !important;
  align-self: stretch !important;
}

/* Rev 16: Delegates navy band + Gallery green band removed — both are plain
   white again like the other sections. */

/* ============================================================
   REVISION 14 — sponsorship cards size to their own content
   (undo the Rev 13 equal-height); pink price → primary red
   (handled inline above)
   ============================================================ */
.sponsor-ladder {
  align-items: end !important;     /* natural heights, but all cards sit on the same bottom line */
}
.sponsor-rung {
  height: auto !important;          /* size to content */
  align-self: end !important;
}

/* ============================================================
   REVISION 15 — no hover effect on Packages / Delegates /
   Sponsorship cards (static: no move, shadow, or colour shift).
   Card hovers only — the Register buttons keep their own hover.
   ============================================================ */
.pkg-featured:hover,
.pkg-support:hover,
.delegate-card:hover,
.delegate-card--featured:hover,
.delegate-includes:hover,
.sponsor-rung:hover,
.sponsor-rung--gold:hover {
  transform: none !important;
  box-shadow: none !important;
}
/* keep borders identical to the non-hover state */
.pkg-support:hover {
  border-color: rgba(0, 0, 0, 0.08) !important;
}
.sponsor-rung:hover,
.sponsor-rung--gold:hover {
  border: 1px solid var(--c-border) !important;
}

/* ============================================================
   REVISION 16 — full-width cut-off separator bands between
   sections (solid colour + parallax image). The sections
   themselves are plain white; these bands do the separating.
   ============================================================ */
.cut-band {
  position: relative;
  text-align: center;
  color: var(--c-white);
  padding: 88px 32px;
  overflow: hidden;
}
.cut-band__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
}
.cut-band__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 14px;
  opacity: 0.88;
}
.cut-band__title {
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 20px;
}
.cut-band__text {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 28px;
  opacity: 0.92;
}

/* Solid red separator */
.cut-band--red { background: var(--c-red); }
.cut-band--red .cut-band__title .accent { color: var(--c-navy); }

/* Solid navy separator (available for reuse) */
.cut-band--navy { background: var(--c-navy); }
.cut-band--navy .cut-band__title .accent { color: var(--c-red); }

/* Parallax image separator — the background stays fixed while the content
   scrolls over it (the "shutter" reveal). */
.cut-band--parallax {
  background-image:
    linear-gradient(rgba(6, 12, 30, 0.58), rgba(6, 12, 30, 0.66)),
    url("assets/uk-skylines.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 134px 32px;
}
.cut-band--parallax .cut-band__title .accent { color: var(--c-red); }
/* don't let the scroll-reveal transform break the fixed background */
.cut-band--parallax.reveal {
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 768px) {
  .cut-band { padding: 60px 24px; }
  .cut-band--parallax {
    background-attachment: scroll; /* iOS/Android don't reliably support fixed */
    padding: 88px 24px;
  }
}

/* ============================================================
   REVISION 17 — varied / creative dividers: split image+panel,
   photo strip, and an event-photo parallax (so dividers don't
   all look like the same centred colour band).
   ============================================================ */

/* --- Split: image on one side, colour panel on the other --- */
.cut-band--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
  text-align: left;
  align-items: stretch;
  overflow: hidden;
}
.cut-band__media {
  min-height: 340px;
  background-size: cover;
  background-position: center;
}
.cut-band__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 64px 56px;
}
.cut-band--split-navy .cut-band__panel { background: var(--c-navy); }
.cut-band--split-red  .cut-band__panel { background: var(--c-red); }
.cut-band--split-green .cut-band__panel { background: var(--green); }
.cut-band--split-navy .cut-band__title .accent { color: var(--c-red); }
.cut-band--split-red  .cut-band__title .accent { color: var(--c-navy); }
.cut-band--split-green .cut-band__title .accent { color: var(--c-navy); }
.cut-band--split .cut-band__text { max-width: 34em; }
.cut-band--reverse .cut-band__media { order: 2; }   /* image on the right */

/* --- Photo strip with a centred title overlay --- */
.cut-band--photos {
  padding: 0;
  position: relative;
}
.cut-band__photos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.cut-band__photo {
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
}
.cut-band__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: rgba(1, 33, 105, 0.58);
}
.cut-band__overlay .cut-band__title .accent { color: var(--c-red); }

/* --- Simple full-width image divider --- */
.cut-band--image {
  padding: 0;
}
.cut-band--image img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Muted autoplay video divider — full 16:9, never cropped --- */
.cut-band--video {
  position: relative;
  padding: 0;
  width: 100%;
  aspect-ratio: 16 / 9;   /* band height tracks the video so nothing is trimmed */
  overflow: hidden;
  background: #000;
}
.cut-band--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Summit 2025: previous-summit videos in one row --- */
.hl-video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.hl-video-grid .video-frame {
  border-radius: 4px;   /* small, like the buttons */
  overflow: hidden;
}
@media (max-width: 900px) {
  .hl-video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .hl-video-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   REVISION 18 — Summit Programme as alternating text/image rows
   (reference style: centred accent title + hexagon divider + CTA)
   ============================================================ */
.prog-rows {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-top: 8px;
}
.prog-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.prog-row--reverse .prog-row__media { order: -1; }
.prog-row__media img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  display: block;
  border-radius: 4px;   /* small, like the buttons */
}
.prog-row__text {
  text-align: center;
  padding: 0 16px;
}
.prog-row__title {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 4px;
  line-height: 1.2;
}
.prog-row__title .accent { color: var(--c-red); }
.prog-row__body {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--c-muted);
  margin: 0 auto 24px;
  max-width: 34em;
}
/* hexagon ornament between two short hairlines */
.prog-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 18px;
  color: var(--c-muted);
}
.prog-divider::before,
.prog-divider::after {
  content: '';
  width: 44px;
  height: 1px;
  background: var(--c-border);
}
.prog-divider svg { width: 18px; height: 18px; }
.prog-divider--header { margin: 14px auto 22px; }

@media (max-width: 860px) {
  .prog-rows { gap: 48px; }
  .prog-row { grid-template-columns: 1fr; gap: 24px; }
  .prog-row--reverse .prog-row__media { order: 0; }
  .prog-row__media img { max-height: 260px; }
}

/* --- Event-photo parallax (a different image from the London one) --- */
.cut-band--event {
  background-image:
    linear-gradient(rgba(6, 12, 30, 0.60), rgba(6, 12, 30, 0.68)),
    url("assets/previous-summit-images/586806294_25230811076546865_7048382178971711834_n.jpg") !important;
}

@media (max-width: 768px) {
  .cut-band--split { grid-template-columns: 1fr; }
  .cut-band--reverse .cut-band__media { order: 0; }
  .cut-band__panel { padding: 48px 28px; }
  .cut-band__media { min-height: 220px; }
  .cut-band__photos { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   REVISION 19 — Packages section redesign (colourful pricing
   cards with circular icons, coloured checks, recommended ribbon)
   ============================================================ */

/* shared coloured circular checklist (uses --tier of its card) */
.pkg-check-list { list-style: none; margin: 0; padding: 0; }
.pkg-check-list li {
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--c-text);
  margin-bottom: 12px;
}
.pkg-check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--tier, var(--c-red));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

/* ---- Featured (Strategic Partner) ---- */
.pkg-featured {
  --tier: var(--c-red);
  position: relative !important;
  display: block !important;
  background: var(--c-white) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 34px rgba(1, 33, 105, 0.07) !important;
  padding: 34px 36px 28px !important;
  margin-bottom: 28px !important;
  overflow: hidden !important;
}
.pkg-featured__ribbon {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 18px 8px 16px;
  border-bottom-right-radius: 12px;
}
.pkg-ico-sm { width: 13px; height: 13px; }
.pkg-featured__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding-top: 18px;
  margin-bottom: 22px;
}
.pkg-featured__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--c-navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pkg-featured__icon svg { width: 34px; height: 34px; }
.pkg-featured__name {
  font-size: 24px;
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 4px;
}
.pkg-featured__tag {
  font-size: 14px;
  color: var(--c-muted);
  margin: 0;
}
.pkg-featured__price {
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 800;
  color: var(--c-red);
  margin: 0;
  white-space: nowrap;
}
.pkg-featured__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 22px 0;
  margin: 0 0 24px !important;
}
.pkg-featured__list li { margin-bottom: 0; }
.pkg-featured__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--c-navy) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  padding: 16px;
  border-radius: 8px;
  border: 0 !important;
  transition: background-color 180ms ease;
}
.pkg-featured__cta:hover { background: var(--c-navy-dark) !important; }

/* ---- 3 supporting cards (per-tier colour via --tier) ---- */
.pkg-support--green  { --tier: #15924E; }
.pkg-support--blue   { --tier: #2563EB; }
.pkg-support--purple { --tier: #7C3AED; }

.pkg-support-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-bottom: 28px !important;
}
.pkg-support {
  position: relative;
  background: var(--c-white) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-top: 3px solid var(--tier) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(1, 33, 105, 0.05) !important;
  padding: 26px 26px 24px !important;
  display: flex !important;
  flex-direction: column !important;
}
.pkg-support__num {
  display: block;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--tier);
  margin: 0 0 12px;
}
.pkg-support__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.pkg-support__icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tier);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pkg-support__icon svg { width: 28px; height: 28px; }
.pkg-support__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 2px;
}
.pkg-support__price {
  font-size: 24px;
  font-weight: 800;
  color: var(--tier);
  margin: 0 0 2px;
}
.pkg-support__tag {
  font-size: 12.5px;
  color: var(--c-muted);
  margin: 0;
  line-height: 1.4;
}
.pkg-support .pkg-check-list { flex: 1; margin-bottom: 22px; }
.pkg-support__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px;
  border: 1.5px solid var(--tier);
  border-radius: 8px;
  color: var(--tier);
  font-weight: 700;
  font-size: 14.5px;
  background: transparent;
  transition: background-color 180ms ease, color 180ms ease;
}
.pkg-support__cta:hover { background: var(--tier); color: #fff; }

/* ---- Additional services ---- */
.addl-services {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  background: var(--c-white) !important;
  box-shadow: none !important;
  padding: 24px 28px !important;
  margin-bottom: 26px !important;
  display: block !important;
}
.addl-services__label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-navy) !important;
  margin: 0 0 16px !important;
}
.addl-services__ico { width: 22px; height: 22px; color: var(--c-navy); flex: 0 0 auto; }
.addl-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.addl-service {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--c-text);
}
.addl-service__ico { width: 20px; height: 20px; color: var(--c-red); flex: 0 0 auto; }

/* keep the new card shadows static on hover (Rev 15 had removed them) */
.pkg-featured:hover { box-shadow: 0 12px 34px rgba(1, 33, 105, 0.07) !important; }
.pkg-support:hover { box-shadow: 0 8px 24px rgba(1, 33, 105, 0.05) !important; }

@media (max-width: 900px) {
  .pkg-support-grid { grid-template-columns: 1fr !important; }
  .addl-services__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pkg-featured__head { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
  .pkg-featured__list { grid-template-columns: 1fr; }
}

/* ============================================================
   DELEGATE PARTICIPATION — visual rebuild (icon programme card,
   illustrated dual packages, shield disclaimer). Fresh `dlg-`
   namespace so the legacy `.delegate-*` overrides don't apply.
   ============================================================ */
.dlg-intro-note {
  max-width: 640px;
  margin: 10px auto 0;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--c-navy);
}

/* ---- Shared programme card ---- */
.dlg-includes {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fbfcfe 0%, #f6f8fc 100%);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 36px 40px 32px;
  margin: 44px 0 32px;
}
.dlg-skyline {
  position: absolute;
  bottom: 0;
  width: 150px;
  height: auto;
  color: var(--c-navy);
  opacity: 0.07;
  pointer-events: none;
}
.dlg-skyline--left  { left: -10px; }
.dlg-skyline--right { right: -10px; width: 190px; }

.dlg-includes__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.dlg-includes__badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-red);
  color: var(--c-white);
}
.dlg-includes__badge svg { width: 24px; height: 24px; }
.dlg-includes__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-navy);
}

.dlg-includes__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dlg-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.dlg-feature__ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  box-shadow: 0 4px 14px rgba(1, 33, 105, 0.06);
  color: var(--c-red);
}
.dlg-feature__ico svg { width: 22px; height: 22px; }
.dlg-feature__txt {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--c-text);
  padding-top: 3px;
}
.dlg-feature__sub { display: block; color: var(--c-navy); font-weight: 600; }

/* ---- Package cards ---- */
.dlg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.dlg-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 18px;
  padding: 34px 34px 30px;
  box-shadow: 0 18px 44px rgba(1, 33, 105, 0.07);
}
.dlg-card--red  { border-top: 4px solid var(--c-red); }
.dlg-card--blue { border-top: 4px solid var(--c-navy); }

.dlg-card__deco {
  position: absolute;
  top: 26px;
  right: 26px;
  width: 96px;
  filter: drop-shadow(0 10px 16px rgba(1, 33, 105, 0.12));
}
.dlg-card__deco svg { width: 100%; height: auto; }

.dlg-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.dlg-card__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 800;
}
.dlg-card__num--red  { background: #FCE3E7; color: var(--c-red); }
.dlg-card__num--blue { background: #E1EAF8; color: var(--c-navy); }
.dlg-card__pkg {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.dlg-card__pkg--red  { color: var(--c-red); }
.dlg-card__pkg--blue { color: var(--c-navy); }

.dlg-card__name {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 0 0 4px;
}
.dlg-card__price {
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  margin: 0 0 14px;
}
.dlg-card__price--red  { color: var(--c-red); }
.dlg-card__price--blue { color: var(--c-navy); }

.dlg-card__tag {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--c-muted);
  margin: 0 0 22px;
}
.dlg-card__tag strong { color: var(--c-navy); font-weight: 700; }

.dlg-card__list {
  flex: 1;
  list-style: none;
  margin: 0 0 22px;
  padding: 22px 0 0;
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dlg-card__list li {
  position: relative;
  padding-left: 34px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--c-text);
}
.dlg-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}
.dlg-card__list--red li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9'/%3E%3C/svg%3E");
}
.dlg-card__list--blue li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23012169' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9'/%3E%3C/svg%3E");
}

.dlg-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 12px;
  padding: 16px 18px;
}
.dlg-note p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--c-text); }
.dlg-note__ico { flex: 0 0 auto; width: 22px; height: 22px; }
.dlg-note__ico svg { width: 22px; height: 22px; }
.dlg-note--red  { background: #FBEAED; }
.dlg-note--red .dlg-note__ico  { color: var(--c-red); }
.dlg-note--blue { background: #EAF1FB; }
.dlg-note--blue .dlg-note__ico { color: var(--c-navy); }

/* ---- Disclaimer band ---- */
.dlg-disclaimer {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 880px;
  margin: 40px auto 8px;
  padding: 20px 26px;
  background: var(--c-gray);
  border: 1px solid var(--c-border);
  border-radius: 12px;
}
.dlg-disclaimer__ico { flex: 0 0 auto; width: 30px; height: 30px; color: var(--c-navy); opacity: 0.7; }
.dlg-disclaimer__ico svg { width: 30px; height: 30px; }
.dlg-disclaimer p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--c-muted); }

/* ---- Register CTA ---- */
.dlg-register {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.dlg-register svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .dlg-includes__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .dlg-grid { grid-template-columns: 1fr; }
  .dlg-includes { padding: 30px 22px 26px; }
  .dlg-card__deco { width: 78px; top: 22px; right: 18px; }
}
@media (max-width: 520px) {
  .dlg-includes__grid { grid-template-columns: 1fr; }
  .dlg-card__price { font-size: 44px; }
  .dlg-disclaimer { flex-direction: column; text-align: center; }
}

/* ============================================================
   REVISION 20 — tighten sponsorship benefit lists so the 4th
   (VIP) card isn't much taller than the 3rd (Gold)
   ============================================================ */
.sponsor-rung__list {
  gap: 4px !important;
  margin-bottom: 14px !important;
  padding-top: 12px !important;
}
.sponsor-rung__list li {
  line-height: 1.4 !important;
}

/* ============================================================
   REVISION 21 — "What UPTIB Does" 8 activity points (home page)
   Numbered card grid; red number + bar, navy title, gray body.
   ============================================================ */
.oa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  margin-top: 48px;
}
.oa-card {
  background: var(--c-white);
  padding: 30px 26px 32px;
  display: flex;
  flex-direction: column;
  transition: background .25s ease;
}
.oa-card:hover {
  background: var(--c-gray);
}
.oa-card__num {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-red);
}
.oa-card__bar {
  display: block;
  width: 34px;
  height: 3px;
  background: var(--c-red);
  margin: 12px 0 18px;
}
.oa-card__icon {
  color: var(--c-navy);
  margin-bottom: 14px;
}
.oa-card__icon svg {
  width: 26px;
  height: 26px;
}
.oa-card__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-navy);
  margin: 0 0 10px;
  line-height: 1.35;
}
.oa-card__body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-muted);
  margin: 0;
}

@media (max-width: 980px) {
  .oa-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .oa-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   REVISION 22 — About page: green divider bands
   (stats counter strip + CTA band). Strip scoped via modifier
   so the home-page stats strip stays navy.
   ============================================================ */
.stats-strip--green {
  background: var(--green) !important;
}
.stats-strip--green .stats-strip__num,
.stats-strip--green .stats-strip__label {
  color: var(--c-white) !important;
}

/* ============================================================
   REVISION 24 — Home titles: alternate red/green accent words
   ============================================================ */
.section-title .accent--green {
  color: var(--green) !important;
}

/* ============================================================
   REVISION 23 — Footer: all text white (no gray or red accents)
   ============================================================ */
.footer__tag,
.footer__tag--red,
.footer__tag--green,
.footer__tag-sep,
.footer__brandname,
.footer__links a,
.footer__links a:hover,
.footer__contact,
.footer__contact strong,
.footer__bottom,
.footer__bottom a {
  color: var(--c-white) !important;
}

/* ============================================================
   REVISION 25 — ADDITIONAL CONTENT BUILD (Aug 2026)
   New multi-page architecture: 10-item primary nav with Awards
   dropdown, plus Programme / Speakers / Exhibitors / Investment
   Opportunities / B2B Matchmaking / Awards / Sponsors / Media /
   Register / FAQs pages. Everything below is additive.
   ============================================================ */

/* ---------- NAV: wider bar + 10 items + Awards dropdown ---------- */
.nav__inner {
  max-width: 1460px;
  gap: 20px;
}

.nav__links {
  gap: 20px;
}

.nav__link {
  font-size: 13.5px;
  white-space: nowrap;
}

.nav__drop {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__link--drop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav__caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 180ms ease;
}

.nav__drop:hover .nav__caret,
.nav__drop:focus-within .nav__caret {
  transform: rotate(180deg);
}

.nav__drop-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 220px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  box-shadow: 0 12px 32px rgba(1, 33, 105, 0.14);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 1040;
}

.nav__drop:hover .nav__drop-menu,
.nav__drop:focus-within .nav__drop-menu,
.nav__drop.is-open .nav__drop-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* invisible hover bridge so the menu does not close in the gap */
.nav__drop::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.nav__drop-link {
  display: block;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-navy);
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease;
}

.nav__drop-link:hover {
  background: var(--c-gray);
  color: var(--c-red);
}

/* Mobile menu: scrollable list + Awards sub-links */
.nav__mobile-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nav__mobile-sub {
  display: flex;
  flex-direction: column;
  background: var(--c-gray);
  border-bottom: 1px solid var(--c-border);
}

.nav__mobile-sub a {
  padding: 12px 32px 12px 52px;
  font-size: 15px;
  color: var(--c-muted);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.nav__mobile-sub a:last-child {
  border-bottom: 0;
}

.nav__mobile-sub a:hover {
  color: var(--c-red);
}

/* The 10-item bar needs more room — collapse to hamburger earlier */
@media (max-width: 1365px) {
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
}

/* ---------- Shared building blocks ---------- */
.note-line {
  max-width: 900px;
  margin: 32px auto 0;
  text-align: center;
  font-size: 15px;
  color: var(--c-muted);
  line-height: 1.7;
}

.sub-block {
  margin-top: 72px;
}

.sub-block__title {
  font-size: 26px;
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 8px;
}

.sub-block__lead {
  margin: 0 0 20px;
  color: var(--c-muted);
  font-size: 16px;
}

.split-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.split-col__title {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-navy);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--c-red);
}

/* Numbered "who / what" cells — hairline grid */
.who-grid,
.show-grid {
  display: grid;
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
}

.who-grid { grid-template-columns: repeat(5, 1fr); }
.who-grid--six { grid-template-columns: repeat(6, 1fr); }
.who-grid--seven { grid-template-columns: repeat(4, 1fr); }
.who-grid--eight { grid-template-columns: repeat(4, 1fr); }
.show-grid { grid-template-columns: repeat(3, 1fr); }
.show-grid--seven { grid-template-columns: repeat(4, 1fr); }

.who-cell,
.show-cell {
  background: var(--c-white);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background-color 200ms ease;
}

.who-cell:hover,
.show-cell:hover {
  background: var(--c-gray);
}

.who-cell__num,
.show-cell__num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-red);
}

.who-cell__title,
.show-cell__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-navy);
}

.show-cell {
  flex-direction: row;
  align-items: baseline;
  gap: 14px;
}

/* Feature cards */
.feat-grid {
  display: grid;
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
}

.feat-grid--2 { grid-template-columns: repeat(2, 1fr); }
.feat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.feat-grid--4 { grid-template-columns: repeat(4, 1fr); }

.feat-card {
  background: var(--c-white);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feat-card--note {
  background: var(--c-gray);
}

.feat-card__day {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-red);
}

.feat-card__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-navy);
}

.feat-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-muted);
}

.feat-card__link {
  margin-top: auto;
  padding-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-red);
}

.feat-card__link:hover { color: var(--c-red-dark); }

/* Callout band */
.callout-band {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  align-items: center;
  background: var(--c-navy);
  color: var(--c-white);
  padding: 56px 48px;
}

.callout-band__eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.callout-band__title {
  margin: 0 0 14px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-white);
}

.callout-band__title .accent { color: var(--c-red); }

.callout-band__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
}

.callout-band__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.callout-band__actions .btn { justify-content: center; }

.callout-band__actions .btn--outline-navy {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--c-white);
}

.callout-band__actions .btn--outline-navy:hover {
  background: var(--c-white);
  color: var(--c-navy);
}

/* Route band — cross-link between the two registration forms */
.route-band {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 32px;
  background: var(--c-gray);
  border-left: 4px solid var(--c-navy);
}

.route-band__text {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-navy);
}

.route-band__link {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-red);
}

.route-band__link:hover { color: var(--c-red-dark); }

/* Announcement panel (Finalists / Winners / Speakers / Judges) */
.announce {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 56px 48px;
  text-align: center;
  border: 1px solid var(--c-border);
  background: var(--c-white);
}

.announce__mark {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--c-red);
  margin: 0 auto 24px;
}

.announce__title {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 700;
  color: var(--c-navy);
}

.announce__text {
  margin: 0 auto;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-muted);
}

.announce__link {
  display: inline-block;
  margin-top: 24px;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-red);
}

.announce__link:hover { color: var(--c-red-dark); }

/* ---------- Tables (fees, tiers, matrix) ---------- */
.fee-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  background: var(--c-white);
}

.fee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 620px;
}

.fee-table--tiers { min-width: 860px; }
.fee-table--matrix { min-width: 760px; }

.fee-table thead th {
  background: var(--c-navy);
  color: var(--c-white);
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 20px;
  white-space: nowrap;
}

.fee-table tbody th,
.fee-table tbody td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
  line-height: 1.6;
}

.fee-table tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--c-navy);
}

.fee-table tbody td {
  color: var(--c-muted);
}

.fee-table tbody tr:last-child th,
.fee-table tbody tr:last-child td { border-bottom: 0; }

.fee-table tbody tr:hover { background: var(--c-gray); }

.fee-table__amt {
  font-weight: 700;
  color: var(--c-navy) !important;
  white-space: nowrap;
}

.fee-table__free {
  color: var(--green) !important;
  font-weight: 700;
}

.fee-table__row--hl { background: rgba(200, 16, 46, 0.04); }
.fee-table__row--hl th { color: var(--c-red); }

.fee-table--matrix tbody td {
  text-align: center;
  color: var(--c-navy);
  font-weight: 600;
}

.fee-table--matrix thead th:not(:first-child) { text-align: center; }

/* Guest / delegate entry tables inside forms */
.guest-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  margin-top: 8px;
}

.guest-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.guest-table--wide { min-width: 980px; }

.guest-table thead th {
  background: var(--c-gray);
  color: var(--c-navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}

.guest-table tbody th {
  width: 48px;
  text-align: center;
  font-weight: 700;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-border);
}

.guest-table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--c-border);
}

.guest-table .reg__input { margin: 0; }

/* ---------- Programme page ---------- */

/* Rev 11 strips the grey off .section--gray, so the Fees block sits on the same
   white as the Four Days list and their stacked 96px paddings read as one large
   blank band. Halve them so the two sections sit closer together. */
#programme { padding-bottom: 48px; }
#fees      { padding-top: 48px; }

.prg-list {
  --prg-radius: 18px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--c-gray);
  padding: 20px;
}

.prg-day {
  display: grid;
  grid-template-columns: 5fr 7fr;
  background: transparent;
}

.prg-day--reverse .prg-day__media { order: 2; }

.prg-day__media {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  background: var(--c-border);
}

/* Rounded only on the corners that do not meet the neighbouring day's image.
   Image on the left: its left corners are always free; the top-right corner is
   free only on the first day and the bottom-right only on the last. Mirrored
   for the reversed rows. */
.prg-day__media { border-radius: var(--prg-radius) 0 0 var(--prg-radius); }
.prg-day--reverse .prg-day__media { border-radius: 0 var(--prg-radius) var(--prg-radius) 0; }

.prg-day:first-child:not(.prg-day--reverse) .prg-day__media { border-top-right-radius: var(--prg-radius); }
.prg-day:last-child:not(.prg-day--reverse)  .prg-day__media { border-bottom-right-radius: var(--prg-radius); }
.prg-day--reverse:first-child .prg-day__media { border-top-left-radius: var(--prg-radius); }
.prg-day--reverse:last-child  .prg-day__media { border-bottom-left-radius: var(--prg-radius); }

.prg-day__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.prg-day:hover .prg-day__media img { transform: scale(1.04); }

.prg-day__body {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.prg-day__label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-red);
}

.prg-day__date {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-muted);
}

.prg-day__title {
  margin: 14px 0 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-navy);
}

.prg-day__lead {
  margin: 20px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-navy);
}

.prg-day__list {
  margin: 20px 0 0;
  display: grid;
  gap: 10px;
}

.prg-day__list--two { grid-template-columns: 1fr 1fr; }

.prg-day__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--c-muted);
}

.prg-day__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-red);
}

.prg-day__evening {
  margin-top: 28px;
  padding: 20px 24px;
  background: var(--c-navy);
  color: var(--c-white);
}

.prg-day__evening-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.prg-day__evening-text {
  margin: 6px 0 0;
  font-size: 17px;
  font-weight: 700;
}

.prg-day__evening-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #FF9DAF;
}

.prg-day__evening-link:hover { color: var(--c-white); }

/* ---------- Home page fee cards ---------- */
.fee-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
}

.fee-card {
  background: var(--c-white);
  padding: 40px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background-color 220ms ease;
}

.fee-card--feature { background: var(--c-navy); }
.fee-card--feature .fee-card__name,
.fee-card--feature .fee-card__price { color: var(--c-white); }
.fee-card--feature .fee-card__meta { color: rgba(255, 255, 255, 0.7); }
.fee-card--feature .fee-card__num { color: var(--c-red); }
.fee-card--feature .fee-card__cta { color: #FF9DAF; }
.fee-card--feature .fee-card__cta:hover { color: var(--c-white); }

.fee-card__num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-red);
}

.fee-card__name {
  margin: 6px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-navy);
}

.fee-card__meta {
  margin: 0;
  font-size: 13px;
  color: var(--c-muted);
}

.fee-card__price {
  margin: 16px 0 0;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--c-navy);
}

.fee-card__price--free {
  font-size: 22px;
  color: var(--green);
}

.fee-card__unit {
  display: inline-block;
  margin-left: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-muted);
}

.fee-card__cta {
  margin-top: auto;
  padding-top: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-red);
}

.fee-card__cta:hover { color: var(--c-red-dark); }

/* ---------- Exhibitors: stall card ---------- */
.stall-card {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 32px;
  align-items: center;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  padding: 44px 40px;
  margin-bottom: 48px;
}

.stall-card__name {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-navy);
}

.stall-card__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-muted);
}

.stall-card__price {
  text-align: right;
  border-left: 1px solid var(--c-border);
  padding-left: 32px;
}

.stall-card__amount {
  display: block;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  color: var(--c-red);
}

.stall-card__unit {
  display: block;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--c-muted);
}

/* ---------- Speakers: tier speaking entitlements ---------- */
.tier-speak-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
}

.tier-speak {
  background: var(--c-white);
  padding: 34px 30px;
}

.tier-speak__name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-navy);
}

.tier-speak__price {
  margin: 4px 0 18px;
  font-size: 22px;
  font-weight: 800;
  color: var(--c-red);
}

/* ---------- Investment: focus cards ---------- */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
}

.focus-card {
  background: var(--c-white);
  padding: 40px 36px;
}

.focus-card__title {
  margin: 0 0 20px;
  padding-bottom: 14px;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-navy);
  border-bottom: 2px solid var(--c-red);
}

/* ---------- Awards hero ---------- */
.aw-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: #000;
}

/* Same plain-black scrim as .page-banner--photo — no colour tint */
.aw-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.38) 0%,
    rgba(0, 0, 0, 0.22) 45%,
    rgba(0, 0, 0, 0.40) 100%
  );
}

.aw-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.aw-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 96px 32px;
}

.aw-hero__eyebrow {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.aw-hero__title {
  margin: 0 0 18px;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-white);
}

.aw-hero__title .accent { color: var(--c-red); }

.aw-hero__sub {
  margin: 0 0 36px;
  font-size: 19px;
  color: rgba(255, 255, 255, 0.85);
}

.aw-hero__ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Awards: core message + philosophy */
.core-message {
  max-width: 820px;
  margin: 48px auto 0;
  padding: 32px 40px;
  border-left: 4px solid var(--c-red);
  background: var(--c-gray);
}

.core-message__label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-red);
}

.core-message__text {
  margin: 0;
  font-size: 20px;
  font-style: italic;
  line-height: 1.6;
  color: var(--c-navy);
}

.phil-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
}

.phil-cell {
  background: var(--c-white);
  padding: 40px 26px;
}

.phil-cell__num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-red);
}

.phil-cell__title {
  margin: 14px 0 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-navy);
}

.phil-cell__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-muted);
}

/* Awards: category groups */
.cat-group { margin-bottom: 64px; }
.cat-group:last-of-type { margin-bottom: 0; }

.cat-group__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--c-navy);
}

.cat-group__num {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--c-red);
}

.cat-group__title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--c-navy);
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  align-items: stretch;
}

.cat-grid--compact { grid-template-columns: repeat(5, 1fr); }

.cat-card {
  background: var(--c-white);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  transition: background-color 220ms ease;
}

.cat-card:hover { background: var(--c-gray); }

.cat-card--compact { padding: 26px 22px; }

.cat-card--highest { background: var(--c-navy); }
.cat-card--highest:hover { background: var(--c-navy-dark); }
.cat-card--highest .cat-card__name { color: var(--c-white); }
.cat-card--highest .cat-card__text { color: rgba(255, 255, 255, 0.8); }
.cat-card--highest .cat-card__ref { color: var(--c-red); }

.cat-card__ref {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--c-red);
}

.cat-card__name {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-navy);
}

.cat-card__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--c-muted);
}

.cat-card__sub {
  margin: 18px 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-navy);
}

.cat-card__list {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
}

.cat-card__list--two { grid-template-columns: 1fr 1fr; }

.cat-card__list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-muted);
}

.cat-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 2px;
  background: var(--c-red);
}

/* Awards: structure cards */
.struct-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  margin-top: 20px;
}

.struct-card {
  background: var(--c-white);
  padding: 36px 30px;
  border-top: 4px solid transparent;
}

.struct-card--gold { border-top-color: #C9A227; }
.struct-card--silver { border-top-color: #9AA3AE; }
.struct-card--special { border-top-color: var(--c-red); }

.struct-card__name {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-navy);
}

.struct-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-muted);
}

/* Important dates */
.date-list {
  border: 1px solid var(--c-border);
  background: var(--c-white);
}

.date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--c-border);
}

.date-row:last-child { border-bottom: 0; }

.date-row--hl { background: var(--c-navy); }
.date-row--hl .date-row__label { color: rgba(255, 255, 255, 0.75); }
.date-row--hl .date-row__value { color: var(--c-white); }

.date-row__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-navy);
}

.date-row__value {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-red);
}

/* Gala run of show */
.gala-run {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  list-style: none;
  padding: 0;
  margin: 0;
}

.gala-run__item {
  background: var(--c-white);
  padding: 32px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gala-run__time {
  font-size: 26px;
  font-weight: 800;
  color: var(--c-red);
  line-height: 1;
}

.gala-run__label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-navy);
}

/* Gala gallery */
.gala-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.gala-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: opacity 220ms ease;
}

.gala-gallery img:hover { opacity: 0.86; }

/* Awards sponsor cards */
.aw-sponsor-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
}

.aw-sponsor {
  background: var(--c-white);
  padding: 34px 26px;
}

.aw-sponsor__name {
  margin: 0 0 10px;
  padding-bottom: 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-navy);
  border-bottom: 2px solid var(--c-red);
}

.aw-sponsor__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--c-muted);
}

/* ---------- Sponsors page: detail cards ---------- */
.spn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.spn-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
}

.spn-card--title { border-top: 4px solid var(--c-red); }

.spn-card__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--c-border);
}

.spn-card__num {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--c-red);
  padding-top: 6px;
}

.spn-card__name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-navy);
}

.spn-card__tag {
  margin: 4px 0 0;
  font-size: 14px;
  font-style: italic;
  color: var(--c-muted);
}

.spn-card__price {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--c-red);
  white-space: nowrap;
}

.spn-card__lead {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-muted);
}

.spn-card__sub {
  margin: 18px 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-navy);
}

.spn-card__sub:first-of-type { margin-top: 0; }

.spn-card__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.spn-card__slots {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* multi-column check lists reused across the new pages */
.pkg-check-list--two { columns: 2; column-gap: 32px; }
.pkg-check-list--three { columns: 3; column-gap: 32px; }
.pkg-check-list--two li,
.pkg-check-list--three li { break-inside: avoid; }

/* ---------- FAQ page groups ---------- */
.faq-group { margin-bottom: 64px; }
.faq-group:last-child { margin-bottom: 0; }

.faq-group__title {
  margin: 0 0 24px;
  padding-bottom: 14px;
  font-size: 24px;
  font-weight: 700;
  color: var(--c-navy);
  border-bottom: 2px solid var(--c-red);
}

/* One question per row, centred column, centred content.
   Everything here is scoped to .faq-group — which only exists on faqs.html — so
   the two-column FAQ blocks on the home, B2B and investment pages keep their
   current layout. */
.faq-group {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.faq-group__title { text-align: center; }

.faq-group .faq {
  grid-template-columns: 1fr;
  max-width: 820px !important;   /* beats the !important width set in Rev 2 */
  margin-left: auto;
  margin-right: auto;
  gap: 0;
}

/* The markup splits the questions across two .faq__col wrappers. display:contents
   drops those wrappers out of the box tree so every .faq__item becomes a direct
   child of the grid — one continuous list with 01, 02, 03… still in order. */
.faq-group .faq__col { display: contents; }

/* Symmetric side columns keep the question text optically centred between the
   number and the +/- toggle. */
.faq-group .faq__q {
  grid-template-columns: 36px 1fr 36px;
  text-align: center;
}

.faq-group .faq__num { min-width: 0; }
.faq-group .faq__toggle { justify-self: end; }

.faq-group .faq__a {
  padding: 0 36px 24px;
  text-align: center;
}

/* ---------- Long form pages (register / investor / nomination) ---------- */
.reg__card--long {
  max-width: 1040px;
  margin: 0 auto;
}

.reg__fs {
  border: 0;
  padding: 0;
  margin: 40px 0 0;
  min-width: 0;
}

.reg__card--long .reg__fs:first-of-type {
  margin-top: 0;
}

/* first section needs no rule and no gap above it */
.reg__card--long .reg__fs:first-of-type .reg__legend {
  padding-top: 0;
  border-top: 0;
}

.reg__fs--declaration .reg__terms { margin-bottom: 14px; }

/* The legend carries the section rule and the vertical rhythm, because a
   fieldset cannot put padding above its own legend. width:100% is safe
   here — it was the float, not the width, that broke the field grids. */
.reg__legend {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid var(--c-border);
  padding: 28px 0 0;
  margin: 0 0 22px;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-navy);
}

.reg__legend-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  background: var(--c-red);
  color: var(--c-white);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.reg__hint {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-muted);
}

.reg__hint--block {
  display: block;
  margin: 0 0 14px;
  font-size: 14px;
}

.reg__textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.6;
  padding-top: 12px;
  height: auto;
}

.reg__input--file {
  padding: 12px;
  background: var(--c-gray);
}

.reg__note-text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-muted);
}

/* chip-style radio rows */
.reg__chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.reg__chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.reg__chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.reg__chip span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 18px;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-navy);
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.reg__chip:hover span { border-color: var(--c-navy); }

.reg__chip input:checked + span {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
  font-weight: 600;
}

.reg__chip input:focus-visible + span {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}

/* multi-column checkbox grids */
.reg__checks--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}

.reg__checks--three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 24px;
}

/* deadline strip under the nomination form */
.reg__deadline-strip {
  max-width: 1040px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.reg__deadline-strip > div {
  background: var(--c-navy);
  padding: 22px 20px;
  text-align: center;
}

.reg__deadline-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.reg__deadline-value {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-white);
}

.reg__fineprint a {
  color: var(--c-red);
  font-weight: 600;
  text-decoration: underline;
}

/* ============================================================
   REVISION 25 — RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .who-grid,
  .who-grid--six,
  .who-grid--seven,
  .who-grid--eight { grid-template-columns: repeat(3, 1fr); }
  .show-grid,
  .show-grid--seven { grid-template-columns: repeat(2, 1fr); }
  .fee-cards { grid-template-columns: repeat(3, 1fr); }
  .phil-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid--compact { grid-template-columns: repeat(3, 1fr); }
  .aw-sponsor-grid { grid-template-columns: repeat(3, 1fr); }
  .gala-run { grid-template-columns: repeat(3, 1fr); }
  .tier-speak-grid { grid-template-columns: repeat(2, 1fr); }
  .spn-card__cols { grid-template-columns: repeat(2, 1fr); }
  .feat-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .reg__deadline-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .prg-day { grid-template-columns: 1fr; }
  .prg-day--reverse .prg-day__media { order: 0; }
  .prg-day__media { min-height: 240px; }
  /* Stacked: no image ever touches another, so every corner is free. */
  .prg-list .prg-day .prg-day__media { border-radius: var(--prg-radius); }
  .prg-day__body { padding: 36px 28px; }
  .prg-day__title { font-size: 25px; }
  .split-cols { grid-template-columns: 1fr; gap: 36px; }
  .spn-grid { grid-template-columns: 1fr; }
  .focus-grid { grid-template-columns: 1fr; }
  .callout-band { grid-template-columns: 1fr; padding: 40px 28px; }
  .callout-band__title { font-size: 26px; }
  .stall-card { grid-template-columns: 1fr; padding: 32px 26px; }
  .stall-card__price {
    text-align: left;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--c-border);
    padding-top: 24px;
  }
  .struct-grid { grid-template-columns: 1fr; }
  .gala-gallery { grid-template-columns: repeat(2, 1fr); }
  .feat-grid--3 { grid-template-columns: 1fr; }
  .reg__checks--three { grid-template-columns: 1fr 1fr; }
  .pkg-check-list--three { columns: 2; }
}

@media (max-width: 700px) {
  .who-grid,
  .who-grid--six,
  .who-grid--seven,
  .who-grid--eight,
  .show-grid,
  .show-grid--seven,
  .fee-cards,
  .phil-grid,
  .cat-grid,
  .cat-grid--compact,
  .aw-sponsor-grid,
  .tier-speak-grid,
  .feat-grid--2,
  .feat-grid--4,
  .gala-run { grid-template-columns: 1fr; }
  .cat-card__list--two { grid-template-columns: 1fr; }
  .prg-day__list--two { grid-template-columns: 1fr; }
  .spn-card__cols { grid-template-columns: 1fr; gap: 20px; }
  .reg__checks--two,
  .reg__checks--three { grid-template-columns: 1fr; }
  .pkg-check-list--two,
  .pkg-check-list--three { columns: 1; }
  .reg__deadline-strip { grid-template-columns: 1fr; }
  .announce { padding: 40px 24px; }
  .aw-hero { min-height: 420px; }
  .aw-hero__inner { padding: 72px 20px; }
  .core-message { padding: 24px; }
  .core-message__text { font-size: 17px; }
  .route-band { flex-direction: column; align-items: flex-start; }
  .sub-block { margin-top: 48px; }
  .cat-group__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cat-group__title { font-size: 22px; }
  .gala-gallery { grid-template-columns: 1fr; }
  .reg__legend { font-size: 17px; }
  .spn-card { padding: 28px 22px; }
  .spn-card__head { grid-template-columns: auto 1fr; }
  .spn-card__price { grid-column: 1 / -1; }
}

/* ---------- REVISION 25b — page banner for the new pages ----------
   about.html keeps the original uncropped full-image banner. The new pages
   use a fixed-height cropped photo behind a navy scrim, so the heading stays
   legible over any image (bright skies included). */
.page-banner--photo {
  min-height: 380px;
  display: flex;
  align-items: center;
}

.page-banner--photo .page-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Scrim: neutral black at low opacity — no colour cast over the photo, just
   enough darkening to keep the white heading legible. */
.page-banner--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.38) 0%,
    rgba(0, 0, 0, 0.22) 45%,
    rgba(0, 0, 0, 0.40) 100%
  );
  z-index: 1;
}

.page-banner--photo .page-banner__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 72px 32px;
  /* Soft low-opacity black shadow: lifts the heading off the photo without
     darkening the image the way a heavier scrim would. Inherits to the tag,
     title and intro. */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.page-banner--photo .page-banner__title { margin-bottom: 18px; }

.page-banner--photo .page-banner__title .accent { color: var(--c-red); }

.page-banner--photo .page-banner__tag {
  font-size: 14px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 18px;
}

.page-banner--photo .page-banner__intro {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 900px) {
  .page-banner--photo { min-height: 300px; }
  .page-banner--photo .page-banner__inner { padding: 56px 24px; }
}

@media (max-width: 700px) {
  .page-banner--photo { min-height: 260px; }
  .page-banner--photo .page-banner__inner { padding: 48px 20px; }
  .page-banner--photo .page-banner__intro { font-size: 16px; }
  .page-banner--photo .page-banner__tag { font-size: 12px; }
}

/* ============================================================
   REVISION 26 — sponsor ladder extended to the document's 9
   corporate sector tiers. Card anatomy, borders, bands, hover
   and CTA styling are unchanged from the 4-tier ladder; only
   the column count and the 5 new band colours are added.
   Must sit AFTER the Rev 13/14 rules and after the earlier
   responsive @media blocks, or those would win on source order.
   ============================================================ */
.sponsor-ladder--nine {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* New tier band colours (bronze / silver / gold / vip already defined above) */
.sponsor-rung--networking .sponsor-rung__band { background: #7A8496 !important; }
.sponsor-rung--industry   .sponsor-rung__band { background: #5A6378 !important; }
.sponsor-rung--innovation .sponsor-rung__band { background: #3D4A63 !important; }
.sponsor-rung--platinum   .sponsor-rung__band { background: var(--c-navy) !important; }
.sponsor-rung--diamond    .sponsor-rung__band { background: var(--c-navy-dark) !important; }

/* The tag line now carries the slot count, so let it breathe */
.sponsor-ladder--nine .sponsor-rung__tag {
  min-height: 0;
}

@media (max-width: 1023px) {
  .sponsor-ladder--nine {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .sponsor-ladder--nine {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   REVISION 27 — Programme page: Registration Fees rendered with
   the existing .pkg-support card design instead of a plain table.
   Reuses the card component verbatim; only adds one tier colour
   and a 5-card grid that centres the trailing row (3 + 2).
   ============================================================ */

/* Extra tier colour so the recommended 3-day delegate card reads red
   like the rest of the brand's primary emphasis. */
.pkg-support--red { --tier: var(--c-red); }

/* 6-column track lets 5 cards sit as 3 on top and 2 centred below. */
.pkg-support-grid--five {
  grid-template-columns: repeat(6, 1fr) !important;
  align-items: stretch !important;
}

.pkg-support-grid--five > .pkg-support { grid-column: span 2; }
.pkg-support-grid--five > .pkg-support:nth-child(4) { grid-column: 2 / span 2; }
.pkg-support-grid--five > .pkg-support:nth-child(5) { grid-column: 4 / span 2; }

/* The fee cards carry a price + unit rather than a plain price */
.pkg-support__unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-muted);
}

/* Long category names (the stall row) must not push the card taller
   than its neighbours' headings. */
.pkg-support-grid--five .pkg-support__name {
  min-height: 2.6em;
}

@media (max-width: 1100px) {
  .pkg-support-grid--five {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .pkg-support-grid--five > .pkg-support,
  .pkg-support-grid--five > .pkg-support:nth-child(4),
  .pkg-support-grid--five > .pkg-support:nth-child(5) {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .pkg-support-grid--five {
    grid-template-columns: 1fr !important;
  }
  .pkg-support-grid--five > .pkg-support,
  .pkg-support-grid--five > .pkg-support:nth-child(4),
  .pkg-support-grid--five > .pkg-support:nth-child(5) {
    grid-column: auto;
  }
  .pkg-support-grid--five .pkg-support__name {
    min-height: 0;
  }
}

/* ============================================================
   REVISION 28 — Speakers page rebuilt on the home page's own
   components (.expect-item, .dlg-includes, .sponsor-rung).
   Only two layout modifiers are new; every card style is reused.
   ============================================================ */

/* 5 expect-items: 3 on the top row, 2 centred beneath (same 3+2
   centring approach used by .pkg-support-grid--five). */
.expect-grid--five {
  grid-template-columns: repeat(6, 1fr);
}

.expect-grid--five > .expect-item { grid-column: span 2; }
.expect-grid--five > .expect-item:nth-child(4) { grid-column: 2 / span 2; }
.expect-grid--five > .expect-item:nth-child(5) { grid-column: 4 / span 2; }

/* 6 sponsor rungs → 3 across, 2 rows */
.sponsor-ladder--six {
  grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 1023px) {
  .expect-grid--five {
    grid-template-columns: repeat(2, 1fr);
  }
  .expect-grid--five > .expect-item,
  .expect-grid--five > .expect-item:nth-child(4),
  .expect-grid--five > .expect-item:nth-child(5) {
    grid-column: auto;
  }
  .sponsor-ladder--six {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 700px) {
  .expect-grid--five {
    grid-template-columns: 1fr;
  }
  .sponsor-ladder--six {
    grid-template-columns: 1fr !important;
  }
}

/* Rev 28a — speakers page tweaks */

/* Panel head stacked + centred (speakers page only; the home page
   delegates panel keeps its inline badge + title row). */
.dlg-includes--center .dlg-includes__head {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

/* Trim the gap above a section that follows another full-padding section. */
.section--tight-top {
  padding-top: 12px;
}

.section--tight-bottom {
  padding-bottom: 44px;
}

@media (max-width: 1024px) {
  .section--tight-top { padding-top: 8px; }
  .section--tight-bottom { padding-bottom: 32px; }
}

/* ============================================================
   REVISION 29 — Exhibitors page rebuilt on the home page
   components (.expect-item, .pkg-featured, .oa-card, .pkg-table,
   .recognition-band). One new grid modifier only.
   ============================================================ */

/* 9 activity cards → 3 x 3 instead of the 4-up default (which would
   leave a lone card stranded on the third row). */
.oa-grid--nine {
  grid-template-columns: repeat(3, 1fr);
}

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

@media (max-width: 700px) {
  .oa-grid--nine { grid-template-columns: 1fr; }
}

/* ============================================================
   REVISION 30 — shared closing CTA card, used on every sub-page.
   A contained card (not full-bleed, not a divider) laid out
   horizontally: copy on the left, actions on the right.
   One design, content varies per page.
   ============================================================ */
/* The preceding section already contributes a full bottom padding, so the
   CTA section drops its own top padding — halves the gap above the card. */
.section--cta {
  padding-top: 0;
}

.cta-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto auto;
  column-gap: 56px;
  align-items: start;
  padding: 34px 48px;
  background-color: var(--c-navy);
  background-image: url('assets/uk-skylines.jpg');
  background-size: cover;
  background-position: center 40%;
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(1, 33, 105, 0.16);
  text-align: left;
  color: var(--c-white);
  overflow: hidden;
}

/* navy scrim over the photo */
.cta-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(1, 21, 72, 0.95) 0%,
    rgba(1, 33, 105, 0.88) 55%,
    rgba(1, 21, 72, 0.92) 100%
  );
}

.cta-card > * { position: relative; z-index: 2; }

.cta-card__eyebrow {
  grid-column: 1;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.cta-card__title {
  grid-column: 1;
  margin: 0 0 8px;
  font-size: clamp(23px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.18;
  color: var(--c-white);
}

.cta-card__title .accent { color: var(--c-red); }

.cta-card__text {
  grid-column: 1;
  margin: 0;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}

.cta-card__meta {
  grid-column: 1;
  margin: 18px 0 0;
  max-width: 640px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* actions sit in the right-hand column, spanning the full card height */
.cta-card__actions {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  margin: 0;
}

.cta-card__actions .btn {
  min-width: 230px;
  justify-content: center;
}

@media (max-width: 1024px) {
  .cta-card {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 24px;
    padding: 30px 28px;
  }
  .cta-card__actions {
    grid-column: 1;
    grid-row: auto;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 700px) {
  .cta-card { padding: 28px 22px; border-radius: 8px; }
  .cta-card__actions { flex-direction: column; }
  .cta-card__actions .btn { width: 100%; min-width: 0; }
}

/* ============================================================
   REVISION 31 — Investment Opportunities page. Reuses the home
   page components (oa-card, sec-tile, prog-row, sec-others,
   dlg-includes, faq) rather than one repeated block; only the
   7-up card grid needs a new column rule.
   ============================================================ */

/* 7 cards: 4 on the top row, 3 centred beneath */
.oa-grid--seven {
  grid-template-columns: repeat(8, 1fr);
}

.oa-grid--seven > .oa-card { grid-column: span 2; }
.oa-grid--seven > .oa-card:nth-child(5) { grid-column: 2 / span 2; }
.oa-grid--seven > .oa-card:nth-child(6) { grid-column: 4 / span 2; }
.oa-grid--seven > .oa-card:nth-child(7) { grid-column: 6 / span 2; }

@media (max-width: 1024px) {
  .oa-grid--seven { grid-template-columns: repeat(2, 1fr); }
  .oa-grid--seven > .oa-card,
  .oa-grid--seven > .oa-card:nth-child(5),
  .oa-grid--seven > .oa-card:nth-child(6),
  .oa-grid--seven > .oa-card:nth-child(7) { grid-column: auto; }
}

@media (max-width: 700px) {
  .oa-grid--seven { grid-template-columns: 1fr; }
}

/* ---------- Rev 31a — Investment page refinements ---------- */

/* No grey showing through: the 7-up grid has two empty cells on its second
   row, which exposed the hairline background. Use separated bordered cards
   instead of the hairline-gap technique. */
.oa-grid--seven {
  background: transparent;
  border: 0;
  gap: 20px;
}

.oa-grid--seven > .oa-card {
  border: 1px solid var(--c-border);
  background: var(--c-white);
}

/* Investment Forum cards are static — no hover state */
.oa-grid--seven > .oa-card:hover {
  background: var(--c-white);
  border-color: var(--c-border);
}

/* centred variant of the notes band */
.sec-others--center {
  text-align: center;
}

/* tighter vertical rhythm between sections */
.section--compact {
  padding-top: 56px;
  padding-bottom: 56px;
}

@media (max-width: 1024px) {
  .section--compact { padding-top: 44px; padding-bottom: 44px; }
}

/* ============================================================
   REVISION 32 — B2B Matchmaking page. Built from expect-item,
   stats-strip, dlg-includes, oa-card, sec-others, pkg-support
   and the faq accordion — no block repeated within the page.
   ============================================================ */

/* 6 value cards → 3 across, 2 rows */
.expect-grid--six {
  grid-template-columns: repeat(3, 1fr);
}

/* 5 objective cards → 3 on top, 2 centred beneath */
.oa-grid--five {
  grid-template-columns: repeat(6, 1fr);
  background: transparent;
  border: 0;
  gap: 20px;
}

.oa-grid--five > .oa-card {
  grid-column: span 2;
  border: 1px solid var(--c-border);
  background: var(--c-white);
}

.oa-grid--five > .oa-card:hover {
  background: var(--c-white);
  border-color: var(--c-border);
}

.oa-grid--five > .oa-card:nth-child(4) { grid-column: 2 / span 2; }
.oa-grid--five > .oa-card:nth-child(5) { grid-column: 4 / span 2; }

@media (max-width: 1024px) {
  .expect-grid--six { grid-template-columns: repeat(2, 1fr); }
  .oa-grid--five { grid-template-columns: repeat(2, 1fr); }
  .oa-grid--five > .oa-card,
  .oa-grid--five > .oa-card:nth-child(4),
  .oa-grid--five > .oa-card:nth-child(5) { grid-column: auto; }
}

@media (max-width: 700px) {
  .expect-grid--six { grid-template-columns: 1fr; }
  .oa-grid--five { grid-template-columns: 1fr; }
}

/* Rev 32a — navy tier colour for the fifth gala card */
.pkg-support--navy { --tier: var(--c-navy); }

/* Rev 32b — 3-up value grid (media accreditation) */
.expect-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .expect-grid--three { grid-template-columns: 1fr; }
}

/* Rev 32c — links stay legible on the dark gallery/video sections */
.gallery-dark a {
  color: var(--c-red);
  text-decoration: underline;
}

.gallery-dark a:hover {
  color: var(--c-white);
}

/* Rev 32d — when the CTA follows a dark section, its zeroed top padding
   makes the navy card read as one mass with the black band above it.
   This restores a white gap on those pages only. */
.section--cta.section--spaced-top {
  padding-top: 64px;
}

@media (max-width: 700px) {
  .section--cta.section--spaced-top { padding-top: 44px; }
}

/* Rev 33 — Register page: 7-up value grid (4 on top, 3 centred) */
.expect-grid--seven {
  grid-template-columns: repeat(8, 1fr);
}

.expect-grid--seven > .expect-item { grid-column: span 2; }
.expect-grid--seven > .expect-item:nth-child(5) { grid-column: 2 / span 2; }
.expect-grid--seven > .expect-item:nth-child(6) { grid-column: 4 / span 2; }
.expect-grid--seven > .expect-item:nth-child(7) { grid-column: 6 / span 2; }

@media (max-width: 1024px) {
  .expect-grid--seven { grid-template-columns: repeat(2, 1fr); }
  .expect-grid--seven > .expect-item,
  .expect-grid--seven > .expect-item:nth-child(5),
  .expect-grid--seven > .expect-item:nth-child(6),
  .expect-grid--seven > .expect-item:nth-child(7) { grid-column: auto; }
}

@media (max-width: 700px) {
  .expect-grid--seven { grid-template-columns: 1fr; }
}

/* ============================================================
   Rev 33a — form section spacing, final consistency pass
   ============================================================ */

/* The legend already supplies the gap below a section heading. Whatever
   comes first inside the fieldset must not add its own top margin on top
   of it — .reg__sub-title carries margin-top:40px, which is why sections
   opening with a sub-title sat ~62px below the title while sections
   opening with a field sat 22px below it. */
.reg__fs > .reg__legend + * {
  margin-top: 0;
}

/* An older .reg__hint rule centres its text; block-level hints inside the
   long forms must read left-aligned like every other field label. */
.reg__hint--block {
  margin-top: 0;
  text-align: left;
}

/* ============================================================
   Rev 33b — stats strip adapts to however many items it holds
   ============================================================ */

/* The base grid is hard-coded to repeat(5, 1fr), so a four-item strip
   (awards-nomination) left an empty fifth column and the values bunched
   to the left. Auto columns distribute evenly for any count. */
.stats-strip__list {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-columns: none;
  align-items: start;
  gap: 24px;
}

.stats-strip__item {
  padding: 16px 12px;
}

/* long word values (London) must not shrink to the numeric clamp */
.stats-strip__num--range {
  font-size: clamp(32px, 3.4vw, 48px);
}

@media (max-width: 1023px) {
  .stats-strip__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .stats-strip__list {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   REVISION 34 — Awards page rebuilt on the system components.
   Adds a reusable card treatment for oa-grid plus explicit
   column counts, so award groups of 3/4/5/6/10 all sit evenly
   without empty hairline cells showing grey.
   ============================================================ */

.oa-grid--cards {
  background: transparent;
  border: 0;
  gap: 20px;
}

.oa-grid--cards > .oa-card {
  border: 1px solid var(--c-border);
  background: var(--c-white);
}

.oa-grid--cards > .oa-card:hover {
  background: var(--c-white);
  border-color: var(--c-border);
}

.oa-grid--c3 { grid-template-columns: repeat(3, 1fr); }
.oa-grid--c4 { grid-template-columns: repeat(4, 1fr); }
.oa-grid--c5 { grid-template-columns: repeat(5, 1fr); }

/* the single highest award / final milestone reads navy */
.oa-card--highest {
  background: var(--c-navy) !important;
  border-color: var(--c-navy) !important;
}

.oa-card--highest .oa-card__title { color: var(--c-white); }
.oa-card--highest .oa-card__body { color: rgba(255, 255, 255, 0.82); }
.oa-card--highest .oa-card__num { color: var(--c-white); }
.oa-card--highest .oa-card__bar { background: var(--c-white) !important; }

/* award-group headings need room between groups */
.cat-group { margin-bottom: 56px; }
.cat-group:last-child { margin-bottom: 0; }

@media (max-width: 1100px) {
  .oa-grid--c5 { grid-template-columns: repeat(3, 1fr); }
  .oa-grid--c4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .oa-grid--c3 { grid-template-columns: repeat(2, 1fr); }
  .oa-grid--c5 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .oa-grid--c3,
  .oa-grid--c4,
  .oa-grid--c5 { grid-template-columns: 1fr; }
}

/* Rev 34a — compact stats strip for many / wide values
   Six 5-character times (18:00 … 23:00) overflow at the default numeric
   clamp, so the last column was clipped. */
.stats-strip--compact .stats-strip__num {
  font-size: clamp(26px, 2.6vw, 40px);
}

.stats-strip--compact .stats-strip__item {
  padding: 16px 8px;
}

@media (max-width: 1023px) {
  .stats-strip--compact .stats-strip__num {
    font-size: clamp(26px, 6vw, 36px);
  }
}

/* Rev 34b — awards gallery images are clickable lightbox cells,
   matching the masonry behaviour on the home and media pages. */
.gala-gallery__cell {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}

.gala-gallery__cell:focus-visible {
  outline: 3px solid var(--c-red);
  outline-offset: -3px;
}

/* Rev 35 — nav now carries 11 items (About Us added); tighten the gap
   so the row still fits before the hamburger breakpoint. */
.nav__links {
  gap: 17px;
}


/* ============================================================
   REVISION 34 — GLOBAL SPACING STANDARD
   One rule for the whole site. Sections are separated by padding
   only, never by margin, and only two values are ever used:

     --sp-lg (30px)  the neighbouring section has a DIFFERENT background
     --sp-sm (20px)  the neighbouring section has the SAME background

   Every content section carries the pair its position produced
   (sp-t-lg/sp-t-sm above, sp-b-lg/sp-b-sm below), so the gap between
   two sections reads as 60px across a colour change and 40px within
   one colour. Header, hero, page banner and footer keep their own
   scale and are not touched.

   The single exception to "padding only" is --sp-hero (10px), a margin
   under the hero / page banner. It buys the first content section extra
   room off the hero without altering the standard pair it carries.

   Inside a section the vertical rhythm is capped at --sp-lg, tightening
   to --sp-sm between the parts of a section header. Nothing is ever
   raised: gaps already below the standard are left as they are.

   To rescale the whole site, change the two values below. Nothing
   else needs editing — the class names carry the rule, not the pixels.
   ============================================================ */

:root {
  --sp-lg: 30px;
  --sp-sm: 20px;
  --sp-hero: 10px;
}

/* --- 1. Sections are separated by padding only, never margin --- */
section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* --- 1b. The one exception: the hero / page banner carries a small margin
   below it, so the first content section gets extra room off the hero
   without breaking its own padding pair. The standard in rule 2 stays
   exactly as it is; this simply adds --sp-hero on top of it. --- */
.hero,
.aw-hero,
.page-banner {
  margin-bottom: var(--sp-hero) !important;
}

/* --- 2. The two standard section paddings --- */
.sp-t-lg { padding-top: var(--sp-lg) !important; }
.sp-t-sm { padding-top: var(--sp-sm) !important; }
.sp-b-lg { padding-bottom: var(--sp-lg) !important; }
.sp-b-sm { padding-bottom: var(--sp-sm) !important; }

/* Split, image and video bands are edge to edge by design: the band itself
   stays at padding 0 and the panel inside it carries the spacing, so the
   panel takes the standard instead. */
.cut-band--split .cut-band__panel {
  padding-top: var(--sp-lg) !important;
  padding-bottom: var(--sp-lg) !important;
}

/* --- 3. Inner rhythm: no vertical gap inside a section exceeds --sp-lg --- */
.about__intro { margin-bottom: var(--sp-lg) !important; }
.about-caps { margin-bottom: var(--sp-lg) !important; }
.about-intro { margin-bottom: var(--sp-lg) !important; }
.about-lead { margin-bottom: var(--sp-lg) !important; }
.about-split { row-gap: var(--sp-lg) !important; margin-bottom: var(--sp-lg) !important; }
.addons { margin-top: var(--sp-lg) !important; }
.agenda__cta { margin-top: var(--sp-lg) !important; }
.bank-strip { margin-top: var(--sp-lg) !important; }
.callout-band { row-gap: var(--sp-lg) !important; }
.cat-group { margin-bottom: var(--sp-lg) !important; }
.core-message { margin-top: var(--sp-lg) !important; }
.countdown { margin-bottom: var(--sp-lg) !important; }
.dlg-disclaimer { margin-top: var(--sp-lg) !important; }
.dlg-includes { margin-top: var(--sp-lg) !important; margin-bottom: var(--sp-lg) !important; }
.exec-card-featured { row-gap: var(--sp-lg) !important; }
.exec-row-featured { margin-bottom: var(--sp-lg) !important; }
.expect-grid { row-gap: var(--sp-lg) !important; }
.faq-group { margin-bottom: var(--sp-lg) !important; }
.feature-row { row-gap: var(--sp-lg) !important; }
.feature-row + .feature-row { margin-top: var(--sp-lg) !important; }
.func-grid { margin-bottom: var(--sp-lg) !important; }
.gal__dots { margin-top: var(--sp-lg) !important; }
.gallery-note { margin-top: var(--sp-lg) !important; }
.marquee { margin-bottom: var(--sp-lg) !important; }
.marquee__track { row-gap: var(--sp-lg) !important; }
.milestones { margin-top: var(--sp-lg) !important; }
.news-grid { margin-bottom: var(--sp-lg) !important; }
.note-line { margin-top: var(--sp-lg) !important; }
.oa-grid { margin-top: var(--sp-lg) !important; }
.org-grid { margin-bottom: var(--sp-lg) !important; }
.org-marquee { margin-bottom: var(--sp-lg) !important; }
.orgs-cta { row-gap: var(--sp-lg) !important; }
.packages-disclaimer { margin-top: var(--sp-lg) !important; margin-bottom: var(--sp-lg) !important; }
.pkg-featured__cta { margin-bottom: var(--sp-lg) !important; }
.pkg-featured__left { row-gap: var(--sp-lg) !important; }
.pkg-grid { row-gap: var(--sp-lg) !important; }
.pkg-support-grid { margin-bottom: var(--sp-lg) !important; }
.prog-row { row-gap: var(--sp-lg) !important; }
.prog-rows { row-gap: var(--sp-lg) !important; }
.recognition-band { margin-top: var(--sp-lg) !important; row-gap: var(--sp-lg) !important; }
.reg__deadline-strip { margin-top: var(--sp-lg) !important; }
.reg__fs { margin-top: var(--sp-lg) !important; }
.reg__header { margin-bottom: var(--sp-lg) !important; }
.reg__sub-title { margin-top: var(--sp-lg) !important; }
.reg__submit { margin-top: var(--sp-lg) !important; }
.reg__terms { margin-top: var(--sp-lg) !important; }
.route-band { margin-top: var(--sp-lg) !important; }
.s25__stats { margin-bottom: var(--sp-lg) !important; }
.s25-feature__caption { margin-bottom: var(--sp-lg) !important; }
.s25-stats { row-gap: var(--sp-lg) !important; margin-bottom: var(--sp-lg) !important; }
.sec-feature { row-gap: var(--sp-lg) !important; }
.sec-features { row-gap: var(--sp-lg) !important; margin-bottom: var(--sp-lg) !important; }
.sec-icons { margin-bottom: var(--sp-lg) !important; }
.section-cta { margin-top: var(--sp-lg) !important; }
.section-header { margin-bottom: var(--sp-lg) !important; }
.section-intro { margin-bottom: var(--sp-lg) !important; }
.split-cols { row-gap: var(--sp-lg) !important; }
.spn-card__cols { row-gap: var(--sp-lg) !important; }
.sponsor-ladder { margin-bottom: var(--sp-lg) !important; row-gap: var(--sp-lg) !important; }
.stall-card { row-gap: var(--sp-lg) !important; margin-bottom: var(--sp-lg) !important; }
.sub-block { margin-top: var(--sp-lg) !important; }
.sub-divider { margin-top: var(--sp-lg) !important; margin-bottom: var(--sp-lg) !important; }
.sub-head { margin-bottom: var(--sp-lg) !important; }
.theme-banner__meta { margin-bottom: var(--sp-lg) !important; }
.tl-cta { margin-top: var(--sp-lg) !important; }
.tl-header { margin-bottom: var(--sp-lg) !important; }
.tl-heading-row { row-gap: var(--sp-lg) !important; }
.tl-row { row-gap: var(--sp-lg) !important; }
.why__grid { row-gap: var(--sp-lg) !important; margin-bottom: var(--sp-lg) !important; }
.why-closing { margin-top: var(--sp-lg) !important; }
.why-stack { row-gap: var(--sp-lg) !important; }

/* --- 4. Section headers run on the tight step --- */
.eyebrow { margin-bottom: var(--sp-sm) !important; }
.section-title { margin-bottom: var(--sp-sm) !important; }
.section-title__bar { margin-bottom: var(--sp-sm) !important; }
.section-intro { margin-bottom: var(--sp-lg) !important; }
.section-header { margin-bottom: var(--sp-lg) !important; }
/* --- 5. AGREED EXCEPTIONS — sections that opt out of the standard.
   The full-width photo bands (.cut-band--parallax and the plain .cut-band)
   keep the generous 88px top/bottom they had before: the headline needs the
   photo to breathe around it, and squeezing them to the standard flattens
   the band. They simply carry no sp-* class, so the original .cut-band
   padding above still applies (88px desktop / 60px under 768px), and their
   inner rhythm is left at its original values too.
   Their neighbours are unaffected — those still take --sp-lg, because a
   photo band is always a background change. --- */

/* --- 6. Full-width wrappers add no vertical padding of their own.
   .cta-band__inner sat at 64px inside a section that already carries the
   standard, so the green band was paying for its spacing twice. The wrapper
   goes to zero and the section's sp-* pair is the whole of the spacing. --- */
.cta-band__inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --- 7. Blocks that use vertical padding as spacing are capped like
   margins are. Card and panel interiors are deliberately NOT touched —
   that is component design, not spacing between content. --- */
.s25-stats {
  padding-top: var(--sp-lg) !important;
  padding-bottom: var(--sp-lg) !important;
}

/* --- 8. The last block in a section drops its bottom margin. The section
   already supplies the standard gap below it, so without this the two stack
   and the boundary reads twice as deep as the rule allows. This was what
   made the 2025 stats sit so far off the image band beneath them. --- */
section > .container > *:last-child,
section > .cta-band__inner > *:last-child {
  margin-bottom: 0 !important;
}


/* ============================================================
   REVISION 36 — PARENT ORGANISATION BAR (ukpaktrade.org.uk)
   A faithful reproduction of the UK-Pakistan Trade & Investment
   Board header, sitting directly above the summit navbar so the
   two read as parent and event. Everything here is namespaced
   under .pnav and mirrors the parent site's own tokens:

     type      Montserrat
     top link  up to 15px / 500 / #101010, hover #707070
     panel     full bleed white, 1px top rule, soft drop shadow,
               red hairline rules dividing the columns
     col head  16px / 700 / uppercase / #000, hover #C9232D
     col sub   15px / 600 / uppercase / #000, hover #C9232D
     col link  15px / 500 / uppercase / #3A3A3A, hover #C9232D

   The bar is deliberately NOT sticky. It scrolls away with the
   page the moment the user moves down, leaving the summit navbar
   stuck to the top on its own, and comes back when the page is
   returned to the top. No script is involved in that behaviour.
   ============================================================ */

:root {
  --pnav-h: 88px;
  --pnav-ink: #101010;
  --pnav-ink-dim: #707070;
  --pnav-accent: #C9232D;
  --pnav-line: #E6E6E6;
  --pnav-font: 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.pnav {
  position: relative;
  z-index: 1040;
  background: #FFFFFF;
  border-bottom: 1px solid var(--pnav-line);
  font-family: var(--pnav-font);
}

.pnav__inner {
  max-width: 1760px;   /* wider than the summit bar: 11 items need the room */
  margin: 0 auto;
  padding: 0 32px;
  min-height: var(--pnav-h);
  display: flex;
  align-items: center;
  gap: 24px;
}

.pnav__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.pnav__logo {
  height: 78px;   /* the board sets its mark large — it reads as the parent */
  width: auto;
  display: block;
}

/* ---------- top level row ----------
   The row and every item stretch to the full height of the bar. That is not
   cosmetic: the megamenu hangs off the bottom edge of the bar, so unless the
   item reaches that edge there is a band of dead space between the link and
   the panel, and the pointer loses :hover crossing it. Stretching removes the
   gap entirely, which is why no hover-bridge pseudo-element is needed. */
.pnav__menu {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  margin-left: auto;
}

.pnav__item {
  display: flex;
  align-items: stretch;
}

.pnav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 8px;
  font-family: var(--pnav-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
  color: var(--pnav-ink);
  white-space: nowrap;
  text-decoration: none;
  transition: color 180ms ease;
}

.pnav__item:hover > .pnav__link,
.pnav__link:hover,
.pnav__link:focus-visible {
  color: var(--pnav-ink-dim);
}

/* chevron, as drawn on the parent site. The nudge that optically centres it
   against the cap height lives in the transform, not in a margin, so flipping
   it on hover cannot shift the label beside it. */
.pnav__caret {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}

.pnav__item--mega:hover .pnav__caret,
.pnav__item--mega:focus-within .pnav__caret {
  transform: translateY(2px) rotate(-135deg);
}

/* ---------- full width megamenu panel ---------- */
.pnav__mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-top: 1px solid var(--pnav-line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  z-index: 1041;
  max-height: calc(100vh - var(--pnav-h) - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pnav__item--mega:hover .pnav__mega,
.pnav__item--mega:focus-within .pnav__mega,
.pnav__item--mega.is-open .pnav__mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* No vertical padding and no grid gap here on purpose. Both live on the
   columns instead, so the red rule between columns runs the whole depth of
   the panel the way it does on the parent site, rather than stopping short
   at the top and bottom padding. */
.pnav__mega-inner {
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  gap: 0;
  align-items: stretch;
}

.pnav__mega-inner--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pnav__mega-inner--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.pnav__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px 20px 36px 26px;
  border-left: 1px solid var(--pnav-accent);
}

.pnav__col:first-child {
  border-left: 0;
  padding-left: 0;
}

.pnav__col-title,
.pnav__col-sub,
.pnav__col-link {
  font-family: var(--pnav-font);
  text-decoration: none;
  transition: color 160ms ease;
}

.pnav__col-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  color: #000000;
}

.pnav__col-sub {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  color: #000000;
  margin-top: 22px;
}

.pnav__col-sub:first-child,
.pnav__col-title + .pnav__col-sub {
  margin-top: 0;
}

/* the parent site sets a handful of panel headings in its red rather than
   black — the Services and Investments entry points. Same headings here. */
.pnav__col-title--accent,
.pnav__col-sub--accent {
  color: var(--pnav-accent);
}

.pnav__col-link {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
  color: #3A3A3A;
  margin-top: 11px;
}

/* the first entry sits straight under its heading, with no extra step */
.pnav__col-title + .pnav__col-link,
.pnav__col-sub + .pnav__col-link {
  margin-top: 7px;
}

.pnav__col-title:hover,
.pnav__col-sub:hover,
.pnav__col-link:hover,
.pnav__col-title:focus-visible,
.pnav__col-sub:focus-visible,
.pnav__col-link:focus-visible {
  color: var(--pnav-accent);
}

/* ---------- hamburger + mobile drawer ---------- */
.pnav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.pnav__hamburger span {
  display: block;
  height: 2px;
  width: 24px;
  margin: 0 auto;
  background: var(--pnav-ink);
  transition: transform 200ms ease, opacity 200ms ease;
}

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

.pnav__mobile {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-top: 1px solid var(--pnav-line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
  max-height: calc(100vh - var(--pnav-h) - 10px);
  z-index: 1041;
}

.pnav__mobile.is-open {
  display: block;
}

.pnav__mob-scroll {
  max-height: calc(100vh - var(--pnav-h) - 10px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.pnav__mob-link,
.pnav__mob-group > summary {
  display: block;
  padding: 14px 24px;
  font-family: var(--pnav-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--pnav-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--pnav-line);
}

.pnav__mob-group > summary {
  position: relative;
  cursor: pointer;
  list-style: none;
}

.pnav__mob-group > summary::-webkit-details-marker { display: none; }

.pnav__mob-group > summary::after {
  content: '';
  position: absolute;
  right: 26px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform 180ms ease;
}

.pnav__mob-group[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.pnav__mob-sub {
  display: flex;
  flex-direction: column;
  background: #F6F6F6;
  border-bottom: 1px solid var(--pnav-line);
}

.pnav__mob-sub a {
  padding: 11px 24px 11px 40px;
  font-family: var(--pnav-font);
  font-size: 13.5px;
  font-weight: 500;
  text-transform: uppercase;
  color: #3A3A3A;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.pnav__mob-sub a:last-child { border-bottom: 0; }
.pnav__mob-sub a:hover { color: var(--pnav-accent); }

.pnav__mob-sub .pnav__mob-title,
.pnav__mob-sub .pnav__mob-sub-title {
  color: #000000;
  text-transform: uppercase;
  padding-left: 24px;
}

.pnav__mob-sub .pnav__mob-title {
  font-size: 14px;
  font-weight: 700;
}

.pnav__mob-sub .pnav__mob-sub-title {
  font-size: 13.5px;
  font-weight: 600;
}

/* ---------- responsive ----------
   Eleven items plus the board logo is a wide row, so the top level scales
   with the viewport instead of stepping. It never grows past the parent
   site's own 15px and never drops below the point where the row still fits
   on one line at the 1366px collapse breakpoint. */
@media (min-width: 1366px) {
  .pnav__link {
    font-size: clamp(12.6px, 0.98vw, 15px);
    padding: 10px clamp(5.5px, 0.53vw, 8px);
  }
}

@media (max-width: 1560px) {
  .pnav__col { padding: 26px 16px 30px 20px; }
  .pnav__col-title { font-size: 15px; }
  .pnav__col-sub { font-size: 14px; margin-top: 18px; }
  .pnav__col-link { font-size: 14px; margin-top: 9px; }
}

/* Collapses at the same width as the summit navbar below it, so the two
   bars switch to their hamburgers together rather than one at a time. */
@media (max-width: 1365px) {
  .pnav__menu { display: none; }
  .pnav__hamburger { display: flex; }
}

@media (max-width: 1023px) {
  :root { --pnav-h: 78px; }
  .pnav__logo { height: 62px; }
}

@media (max-width: 767px) {
  :root { --pnav-h: 68px; }
  .pnav__inner { padding: 0 20px; gap: 12px; }
  .pnav__logo { height: 50px; }
}

@media print {
  .pnav { display: none !important; }
}

/* ============================================================
   REVISION 36 — NAVY SUMMIT BAR + LOGO TAB ("U" overhang)
   The summit badge is bigger and now breaks out of the bottom of
   the second navbar: the upper part of the badge sits inside the
   bar, the lower part hangs into the section beneath it, carried
   on a small white panel — the "U" — that hangs with it.

   How it works: the panel IS the existing .nav__brand link. It is
   stretched to the full bar height, then given a negative bottom
   margin equal to the overhang, so the extra height paints outside
   the bar without adding anything to the bar's own height or to
   the flow. .nav keeps its default visible overflow so nothing is
   clipped, and .nav__brand is a positioned child of the navbar's
   stacking context, so the white panel paints over the bar's 1px
   bottom border and over its scrolled shadow where they cross.

   Neither the badge height nor the panel drop is a hand-picked number.
   Both are worked back from one ratio, --nav-logo-inside, which says
   what share of the badge sits inside the bar:

     badge = (--nav-h - padt) / --nav-logo-inside
     drop  = badge + padt + padb - --nav-h

   So the split reads the same at every breakpoint and survives any
   change to --nav-h. Because the bar is one height on every screen,
   padt is what trims the badge down on smaller ones.

   The outline is drawn by .nav__brand::after rather than by a border
   on the panel itself, because it must exist only on the part that
   hangs below the bar. Inside the bar the panel is white on white
   and has no edge at all; the line starts exactly at the navbar's
   bottom and runs down the two sides and round the curve.

   This block is last in the file, so it supersedes the earlier
   .nav__logo heights (72 / 44px) and the old .nav__brand padding.
   ============================================================ */

:root {
  /* How much of the badge sits inside the bar; the rest hangs below it.
     0.6 = 60% in the bar, 40% under it. This is the one number to change
     if that balance ever needs retuning — the badge height and the panel
     drop are both worked out from it below, so they cannot drift apart. */
  --nav-logo-inside: 0.6;

  --nav-logo-padt: 6px;     /* white margin above the badge — keep minimal */
  --nav-logo-padb: 14px;    /* white margin under the badge, inside the curve */
  --nav-logo-padx: 20px;    /* white margin either side of the badge */

  /* Derived, in dependency order.

     The slice of badge sitting inside the bar is (--nav-h - padt), and by
     definition that slice is --nav-logo-inside of the whole badge — so the
     badge is that slice divided by the ratio. The panel then has to hang
     far enough below the bar to hold the remaining slice plus padb. */
  --nav-logo-h: calc((var(--nav-h) - var(--nav-logo-padt)) / var(--nav-logo-inside));

  --nav-logo-drop: calc(
    var(--nav-logo-h) + var(--nav-logo-padt) + var(--nav-logo-padb) - var(--nav-h)
  );

  /* The curve that makes the "U", tied to the drop so the panel and its
     outline always describe the same arc. The outline is exactly `drop`
     tall, so any radius above that would be scaled down by the browser
     on the outline alone and the two curves would part company. */
  --nav-logo-radius: calc(var(--nav-logo-drop) - 4px);
}

.nav {
  overflow: visible;
}

.nav__brand {
  position: relative;
  z-index: 3;
  align-self: stretch;              /* fill the bar height... */
  margin-bottom: calc(var(--nav-logo-drop) * -1);  /* ...then hang past it */
  align-items: center;
  justify-content: center;
  padding: var(--nav-logo-padt) var(--nav-logo-padx) var(--nav-logo-padb);
  background: var(--c-white);
  border-radius: 0 0 var(--nav-logo-radius) var(--nav-logo-radius);
  box-shadow: 0 14px 22px -14px rgba(1, 33, 105, 0.30);
}

/* The outline, on the overhang only — starts at the navbar's bottom
   edge and stops there, so no line is ever drawn across the bar. */
.nav__brand::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: var(--nav-h);
  bottom: 0;
  border: 1px solid var(--c-border);
  border-top: 0;
  border-radius: 0 0 var(--nav-logo-radius) var(--nav-logo-radius);
  pointer-events: none;
}

.nav__logo {
  height: var(--nav-logo-h);
  width: auto;
}

/* ---------- The bar itself is now brand navy ----------
   The badge panel stays white and is declared above, so it reads as a
   white tab punched through the navy. Everything that was navy-on-white
   in the bar flips to white-on-navy; the Register CTA keeps its red.
   The dropdown panel and the mobile overlay are separate white surfaces
   that sit below/over the bar, so their navy text is left alone. */
.nav {
  background: var(--c-navy);
  border-bottom-color: transparent;
}

.nav__link {
  color: var(--c-white);
  transition: color 200ms ease, opacity 200ms ease;
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--c-white);
}

.nav__link:hover {
  opacity: 0.75;
}

/* The active underline goes white too — the red bar the light bar used
   carries almost no contrast against navy. */
.nav__link.is-active::after {
  background: var(--c-white);
}

.nav__hamburger span {
  background: var(--c-white);
}

/* ---------- Hamburger + Register stay right once the links collapse ----------
   `margin-left: auto` — the thing pushing the right-hand group across the bar
   — was declared on .nav__links, but .nav__links is `display: none` from
   1365px down, so the auto margin vanished with it and .nav__actions fell
   back against the badge. There was already a fix for this, but it sat inside
   the ≤1023px block, so the 1024–1365px band was never covered — exactly the
   widths where the links are hidden but the Register button is still shown.
   Scoping it to the full range the links are hidden closes that gap. */
@media (max-width: 1365px) {
  .nav__actions {
    margin-left: auto;
  }
}

/* ---------- The mobile menu has to clear the parent bar ----------
   .pnav is z-index 1040 and .nav is z-index 1030, both in the root stacking
   context — so the whole parent bar paints over the whole summit navbar, and
   .nav__mobile (z-index 95, nested inside .nav) goes with it. The overlay is
   fixed to the viewport, so its close button at top:16px sat underneath the
   parent bar: invisible and untappable.

   Raising .nav above .pnav *only while the menu is open* lets the overlay
   cover the parent bar the way a full-screen menu should, and leaves the
   normal order alone the rest of the time — the parent bar's megamenus drop
   down over the summit bar and rely on being the higher of the two.

   Doing it with :has() rather than a body class keeps the rule tied directly
   to the overlay's own state, so it cannot desync from what the menu is
   actually doing. */
.nav:has(.nav__mobile.is-open) {
  z-index: 1050;
}

/* The 11-item row is at its tightest just above the hamburger
   breakpoint, so the panel gives width back before the row runs out. */
@media (max-width: 1460px) {
  :root {
    --nav-logo-padb: 12px;
    --nav-logo-padx: 15px;
  }
}

@media (max-width: 1023px) {
  :root {
    --nav-logo-padt: 8px;
    --nav-logo-padb: 13px;
    --nav-logo-padx: 14px;
  }
}

@media (max-width: 700px) {
  :root {
    --nav-logo-padt: 10px;
    --nav-logo-padb: 13px;
    --nav-logo-padx: 10px;
  }
}

/* ---------- Hero breathing room on small screens ----------
   The badge panel now hangs into the top of the hero, so the hero's own
   top padding has to clear it before the first line of content starts —
   hence the padding-top being measured off --nav-logo-drop rather than
   being a flat number. The bottom is raised to match so the block still
   reads as centred. !important is only here to beat the existing
   `padding: 80px 16px !important` in the ≤640px hero rule; longhands are
   used so the horizontal padding those rules set is left alone. */
@media (max-width: 1023px) {
  .hero {
    padding-top: calc(var(--nav-logo-drop) + 130px) !important;
    padding-bottom: 170px !important;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: calc(var(--nav-logo-drop) + 110px) !important;
    padding-bottom: 150px !important;
  }
}

/* ---------- Page banners on small screens ----------
   The plain .page-banner (about.html) let the image drive the height —
   `__bg` at `height: auto`, `__inner` absolutely positioned over it. On a
   narrow screen a wide banner image is only ~170px tall while the tag +
   title + intro it has to hold need far more than that, so the text
   overflowed and the section's `overflow: hidden` cut it off mid-sentence.

   Below 1023px that is inverted, the way .page-banner--photo already does
   it: the image goes absolute and covers, and the text returns to normal
   flow so it drives the height instead. Nothing can be clipped after that,
   and the padding below is what actually sets the banner's size.

   The --photo variant is listed alongside because its own two-class
   selector would otherwise outrank these and keep its 72px padding. */
@media (max-width: 1023px) {
  .page-banner__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .page-banner__inner,
  .page-banner--photo .page-banner__inner {
    position: relative;
    inset: auto;
    z-index: 2;
    width: 100%;
    padding: calc(var(--nav-logo-drop) + 130px) 24px 150px;
  }

  .aw-hero__inner {
    padding: calc(var(--nav-logo-drop) + 130px) 24px 150px;
  }
}

@media (max-width: 640px) {
  .page-banner__inner,
  .page-banner--photo .page-banner__inner {
    padding: calc(var(--nav-logo-drop) + 110px) 20px 130px;
  }

  .aw-hero__inner {
    padding: calc(var(--nav-logo-drop) + 110px) 20px 130px;
  }
}

/* ---------- Hero countdown stays on one row on phones ----------
   It was breaking to a 2x2 block because the ≤640px rule pinned each unit
   to `flex: 0 0 calc(50% - 8px)` — two units per line by construction, so
   the four numbers and their three separators could never share a row.

   Here the units size to their own content instead and the row is told not
   to wrap. What actually sets the width is the label ("Minutes" is the
   longest), so the label's size and letter-spacing come down hardest;
   everything scales with vw so the row keeps fitting down to a 320px
   screen rather than being tuned for one width. */
@media (max-width: 640px) {
  .countdown {
    flex-wrap: nowrap;
    gap: clamp(4px, 1.6vw, 12px);
  }

  .countdown__unit {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0;
  }

  .countdown__value {
    font-size: clamp(22px, 7vw, 32px);
  }

  .countdown__label {
    font-size: clamp(9px, 2.6vw, 12px);
    letter-spacing: 0.6px;
    margin-top: 5px;
    white-space: nowrap;
  }

  .countdown__sep {
    font-size: clamp(14px, 4vw, 20px);
  }
}

/* Printed pages get the badge back inside the bar — nothing to hang over. */
@media print {
  .nav__brand {
    margin-bottom: 0;
    align-self: center;
    box-shadow: none;
  }

  .nav__brand::after {
    display: none;
  }
}

/* ============================================================
   REVISION 37 — UNIFORM SPONSORSHIP / PARTNER CARDS
   Rev 14 let every rung size to its own content and hung the row
   off a shared bottom line, so a two line tier name or a longer
   strapline knocked its card out of step with its neighbours —
   ragged tops, prices and benefit lists at different heights.
   Every ladder on the site (home, sponsors, speakers) now runs on
   one rule set: cards fill the full row height, the head block
   reserves the same space in each card, the benefit list takes up
   the slack, and the CTA sits on a common bottom line.
   Must stay LAST in the file so it beats Rev 13, Rev 14 and the
   Rev 26 nine tier block on source order.
   ============================================================ */

/* --- 1. Row geometry: every card fills the tallest card's height --- */
.sponsor-ladder {
  align-items: stretch !important;
}

.sponsor-rung {
  height: 100% !important;
  align-self: stretch !important;
}

/* the tier colour bar keeps its 4px whatever the card has to stretch to */
.sponsor-rung__band {
  flex: 0 0 auto !important;
}

/* Content reads from the top again (Rev 12 pushed it to the bottom);
   the flexible space now lives inside the benefit list instead. */
.sponsor-rung__body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  flex: 1 1 auto !important;
  height: auto !important;
}

/* --- 2. Head block: identical height in every card --- */
/* Two lines reserved for the tier name, so the price sits on the same
   baseline whether the name wraps ("Bronze Supporting Partner") or not. */
.sponsor-rung__name {
  line-height: 1.3 !important;
  min-height: 2.6em !important;
}

/* Two lines reserved for the strapline, so the hairline above the
   benefits lands at the same height across the row. */
.sponsor-rung__tag,
.sponsor-ladder--nine .sponsor-rung__tag,
.sponsor-ladder--six .sponsor-rung__tag {
  line-height: 1.5 !important;
  min-height: 3em !important;
  margin-bottom: 16px !important;
}

/* --- 3. Benefit list absorbs the leftover height --- */
/* Tiers carry anywhere from three to seven benefits; the list stretches
   so the difference collects here rather than under the CTA. */
.sponsor-rung__list {
  flex: 1 1 auto !important;
  justify-content: flex-start !important;
  margin-bottom: 20px !important;
}

/* --- 4. CTA on a common bottom line --- */
.sponsor-rung .btn {
  margin-top: auto !important;
  flex: 0 0 auto !important;
}

/* --- 5. Narrow viewports: one column, nothing left to align --- */
@media (max-width: 640px) {
  .sponsor-rung__name,
  .sponsor-rung__tag,
  .sponsor-ladder--nine .sponsor-rung__tag,
  .sponsor-ladder--six .sponsor-rung__tag {
    min-height: 0 !important;
  }
}

/* ============================================================
   REVISION 37 — SPONSOR LADDER COLLAPSES AGAIN ON SMALL SCREENS
   sponsors.html uses the unmodified .sponsor-ladder, and it was
   stuck at four columns on every width — eight cards squeezed to
   about 90px each, with .sponsor-rung's `overflow: hidden` slicing
   the tier names and prices off mid-word.

   It was a cascade conflict, not a missing rule. The collapse does
   exist further up the file:

     line ~5910  @media (max-width: 1023px) → repeat(2, 1fr)
     line ~5918  @media (max-width: 640px)  → 1fr

   but Revision 13 (line ~7300) then re-declares
   `.sponsor-ladder { grid-template-columns: repeat(4, 1fr) !important }`
   with no media query at all. Both declarations are one class and
   both are !important, so the later one wins outright and being
   inside a media query buys the earlier pair nothing.

   The --nine and --six ladders never showed this because their own
   rules (index.html, speakers.html) are declared after Revision 13
   and win on the same ordering. Re-asserting the two breakpoints
   here, at the end of the file, puts the plain ladder back on the
   same footing.
   ============================================================ */

@media (max-width: 1023px) {
  .sponsor-ladder {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .sponsor-ladder {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   REVISION 37b — DELEGATE CARD HEADER CLEARS THE DECO BADGE
   .dlg-card__deco is absolutely positioned in the card's top-right
   corner, so nothing in the normal flow knows it is there. The
   header row sat at full width underneath it, and once the card
   narrowed enough the package label ran straight into the badge.

   The fix reserves the strip the badge occupies on that one row,
   so the label wraps before reaching it instead of sliding under.
   The reserve is the badge's own footprint measured back to the
   card's text edge:

     reserve = deco right offset + deco width - card padding + gap

   Two values, because the badge is resized at 760px. If either
   .dlg-card padding or .dlg-card__deco offsets change, these need
   to change with them.
   ============================================================ */

/* 26 + 96 - 34 = 88, + 12 clearance */
.dlg-card__top {
  padding-right: 100px;
}

/* deco becomes 78px at right:18px here → 18 + 78 - 34 = 62, + 12 */
@media (max-width: 760px) {
  .dlg-card__top {
    padding-right: 74px;
  }
}

/* ============================================================
   REVISION 38 — BROCHURE DOWNLOAD (band + gated modal form)
   A navy band on the home page opens a modal that captures the
   lead before the PDF is handed over. Scoped under .bro-* so it
   borrows nothing from the locked registration form and cannot
   be disturbed by it.
   ============================================================ */

.bro-band {
  background: var(--c-navy);
  color: var(--c-white);
}

/* The hero carries `margin-bottom: var(--sp-hero) !important`, which reads as
   a white strip between the hero image and the navy band under it.

   Zeroed at the source rather than cancelled with a negative margin on the
   band: that relied on the two margins collapsing, which is easy to defeat
   (a flex or grid parent, for one) and gives no clue when it fails. This
   removes the margin outright, and needs !important only because the rule it
   overrides has it. Scoped with :has() to the case where the band really is
   what follows, so --sp-hero still does its job on every other page. */
.hero:has(+ .bro-band) {
  margin-bottom: 0 !important;
}

.bro-band__inner {
  display: flex;
  align-items: center;
  gap: 44px;
}

/* The brochure's first page, shown at a fraction of its real size — it is a
   2480x3508 print scan, so a web-sized copy is what the page loads and the
   original stays in assets/brochure/ for anything that needs the full thing.
   The cover is a button, not decoration: clicking the preview opens the same
   form the CTA does, which is what people try first. */
.bro-band__cover {
  flex-shrink: 0;
  width: 188px;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}

/* No hover state by request. The focus ring stays: it is what tells a
   keyboard user the cover is the button it actually is. */
.bro-band__cover:focus-visible {
  outline: 3px solid var(--c-white);
  outline-offset: 3px;
}

.bro-band__cover-img {
  display: block;
  width: 100%;
  height: auto;
}

.bro-band__text {
  flex: 1 1 auto;
}

.bro-band__eyebrow {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.bro-band__title {
  margin: 0 0 8px;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-white);
}

.bro-band__sub {
  margin: 0;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.bro-band__cta {
  display: inline-flex;
  margin-top: 24px;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .bro-band__inner {
    flex-direction: column;
    align-items: center;
    gap: 28px;
    text-align: center;
  }

  /* Stacked, the cover leads — it is the strongest thing in the band and
     reads better above the heading than orphaned below the button. The
     desktop order stays copy-then-cover, set by the markup itself. */
  .bro-band__cover {
    order: -1;
    width: 170px;
  }

  .bro-band__sub {
    margin-left: auto;
    margin-right: auto;
  }

  .bro-band__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Modal ---------- */
.bro-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;          /* above .pnav (1040) — nothing may sit over a dialog */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.bro-modal.is-open {
  display: flex;
}

.bro-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 21, 72, 0.62);
}

.bro-modal__panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--c-white);
  border-radius: 14px;
  padding: 40px 40px 34px;
  box-shadow: 0 30px 70px rgba(1, 21, 72, 0.35);
}

.bro-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  color: var(--c-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.bro-modal__close:hover {
  color: var(--c-red);
}

.bro-modal__head {
  margin-bottom: 26px;
  padding-right: 40px;   /* clears the close button */
}

.bro-modal__eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-red);
}

.bro-modal__title {
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  color: var(--c-navy);
}

.bro-modal__lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-muted);
}

/* ---------- Form ---------- */
.bro-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}

@media (max-width: 620px) {
  .bro-form__grid {
    grid-template-columns: 1fr;
  }

  .bro-modal__panel {
    padding: 34px 22px 26px;
  }
}

/* Two fields sit side by side and the third takes the full row, so the grid
   never leaves a lone box beside a gap. */
.bro-field--wide {
  grid-column: 1 / -1;
}

.bro-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bro-field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-navy);
}

.bro-field__input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.bro-field__input:focus {
  outline: none;
  border-color: var(--c-navy);
  box-shadow: 0 0 0 3px rgba(1, 33, 105, 0.12);
}

.bro-field__input.is-invalid {
  border-color: var(--c-red);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12);
}

select.bro-field__input {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-navy) 50%),
                    linear-gradient(135deg, var(--c-navy) 50%, transparent 50%);
  background-position: calc(100% - 19px) 20px, calc(100% - 14px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.bro-form__error {
  margin: 16px 0 0;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--c-red);
  background: #FDECEF;
  border-left: 3px solid var(--c-red);
  border-radius: 4px;
}

.bro-form__submit {
  margin-top: 22px;
}

/* ---------- Receipt: the step that actually hands over the file ---------- */
.bro-done {
  margin-top: 4px;
  padding: 30px 28px;
  text-align: center;
  background: var(--c-navy);
  border-radius: 10px;
}

.bro-done__text {
  margin: 0 0 22px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--c-white);
}

.bro-done__cta {
  display: inline-flex;
}