/* IIPC 2027 homepage stylesheet (cleaned 27 Sep 2026: unused legacy rules removed, overridden declarations dropped,
   duplicate selectors merged). The other prototype pages still use styles.css. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #dce7ed; color: var(--body); font: 16px/1.45 Arial,Helvetica,sans-serif; }
body,button { font-family: Arial,Helvetica,sans-serif; }
h1,h2,h3,p,figure { margin: 0; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
button,a,summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.svg-library { position: absolute; width: 0; height: 0; }
.site-shell { max-width: 1600px; margin: auto; background: var(--paper); overflow: clip; }
.container { width: calc(100% - 112px); max-width: 1280px; margin: auto; }
.visually-hidden { position: absolute!important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: absolute; z-index: 99; top: -100px; left: 20px; padding: 14px; background: white; }
.skip-link:focus { top: 10px; }
:focus-visible { outline: 3px solid #c3161f; outline-offset: 5px; border-radius: 2px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 21px;
  min-height: 46px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  transition: background .15s,box-shadow .15s;
}
.button:hover { text-decoration: none; box-shadow: 0 3px 10px #034c6022; }
.orange:hover { background: #a8181c; }
.header-inner { align-items: center; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand img { object-fit: contain; }
.navigation { display: flex; align-self: stretch; align-items: center; font-weight: 600; }
.navigation a { display: flex; align-items: center; position: relative; }
.navigation .active:after { content: ''; position: absolute; }
.menu-toggle { display: none; }
.hero { position: relative; isolation: isolate; }
.hero-photo { position: absolute; z-index: -2; background-repeat: no-repeat; }
.hero:after { content: ''; position: absolute; inset: 0; z-index: -1; }
.hero-inner { position: relative; }
.event-name { display: block; color: var(--orange); }
.theme { color: var(--ink); }
.hero-actions { display: flex; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.footer-brand { display: flex; gap: 13px; align-items: center; font-size: 12px; flex-shrink: 0; }
.footer-brand img { width: 51px; height: 51px; object-fit: contain; }
.footer-brand p { font-size: 11px; margin-top: 3px; }
.footer-right { text-align: right; }
.footer-right nav { display: flex; gap: 17px; font-size: 11px; flex-wrap: wrap; justify-content: flex-end; }
.footer-right p { font-size: 11px; margin-top: 10px; }
@media(max-width:1150px) and (min-width:761px) {
  .container { width: calc(100% - 64px); }
  .site-footer { align-items: flex-start; }
  .footer-brand { max-width: 350px; }
}
@media(max-width:760px) {
  body { background: white; font-size: 14px; }
  .container { width: calc(100% - 40px); }
  h2 { letter-spacing: -.7px; }
  .header-ticket { display: none; }
  .menu-toggle {
    display: flex;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px;
  }
  .menu-toggle span { width: 22px; height: 2px; background: var(--ink); transition: transform .15s; }
  .navigation {
    display: none;
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 7px 12px #034c6020;
    flex-direction: column;
    align-items: stretch;
  }
  .navigation a { padding: 10px 6px; border-bottom: 1px solid var(--line); }
  .hero-actions .button { gap: 20px; }
  .site-footer { display: block; }
  .footer-brand { font-size: 11px; gap: 10px; }
  .footer-brand img { width: 45px; height: 45px; }
  .footer-brand p { font-size: 10px; }
  .footer-right { text-align: left; margin-top: 17px; }
  .footer-right nav { justify-content: flex-start; gap: 8px 15px; }
  .footer-right nav a { min-height: 28px; display: inline-flex; align-items: center; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  * { transition: none!important; }
}
@media(min-width:761px) and (max-width:950px) {
  .menu-toggle {
    display: flex;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px;
  }
  .menu-toggle span { width: 22px; height: 2px; background: var(--ink); }
  .navigation {
    display: none;
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    background: white;
    padding: 12px 32px 20px;
    box-shadow: 0 7px 12px #034c6020;
    flex-direction: column;
    align-items: stretch;
  }
  .navigation a { padding: 10px 6px; border-bottom: 1px solid var(--line); }
}

/* Header–Learning Journey revision. Lower sections retain their existing styles. */
.site-header { position: sticky; top: 0; z-index: 50; margin-bottom: -96px; transition: background-color .2s, box-shadow .2s; }
.site-header.is-scrolled, .site-header:has(.navigation.is-open) { background: #fcfdfb; box-shadow: 0 1px 0 #dfe8e8, 0 4px 16px #034c6008; }
.site-header .header-inner { min-height: 96px; gap: 28px; }
.site-header .brand { gap: 12px; }
.site-header .brand img { width: 62px; height: 62px; }
.site-header .navigation { gap: 26px; }
.site-header .navigation a { height: auto; min-height: 44px; }
.site-header .navigation .active:after { bottom: 7px; left: 0; right: 0; height: 1px; background: var(--teal); }
.hero .hero-copy { max-width: 700px; }
.hero .event-name { font-size: inherit; line-height: inherit; margin-bottom: 4px; }
.hero .theme { font-weight: 400; }
.hero .hero-actions { gap: 25px; align-items: center; }
.hero-program-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; font-weight: 600; }
.hero-program-link:hover { text-decoration: underline; }
#attendance { scroll-margin-top: 18px; }
@media (min-width: 761px) and (max-width: 1150px) {
  .site-header .header-inner { gap: 18px; }
  .site-header .navigation { gap: 15px; }
  .hero .hero-copy { max-width: 640px; }
}
@media (max-width: 950px) {
  .site-header .navigation { top: 96px; gap: 0; }
  .site-header .navigation a { min-height: 48px; }
}
@media (max-width: 760px) {
  .site-header { margin-bottom: -78px; }
  .site-header .header-inner { min-height: 78px; gap: 15px; }
  .site-header .brand img { width: 49px; height: 49px; }
  .site-header .brand { gap: 9px; }
  .site-header .navigation { top: 78px; padding: 10px 22px 18px; }
  .hero .event-name { margin-bottom: 5px; }
  .hero .hero-actions { flex-direction: column; gap: 10px; align-items: flex-start; }
  .hero-program-link { font-size: 13px; }
}

/* Requested homepage navigation refinements. */
.site-header .navigation a.active, .site-header .navigation a[aria-current="page"] { color: #a8181c; }
.site-header .navigation .active:after, .site-header .navigation [aria-current="page"]:after { display: none; }
.site-header .header-signin { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.site-header .header-signin:hover, .site-header .header-signin:focus-visible { color: #a8181c; text-decoration: none; }
.site-header .navigation a:hover, .site-header .navigation a:focus-visible { color: #a8181c; text-decoration: none; }
.site-header .header-ticket, .site-header .header-ticket:hover { border: 0; border-radius: 999px; box-shadow: none; }
.site-header .header-ticket { font-size: 15px; padding: 10px 25px; }
.site-header .navigation, .site-header .navigation a { font-size: 15px; }
.site-header .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.site-header .brand { justify-self: start; }
.site-header .navigation { justify-self: center; margin-left: 0; }
.site-header .header-actions { display: flex; align-items: center; justify-self: end; gap: 16px; }
@media(max-width:950px) {
  .site-header .header-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .site-header .navigation { justify-self: stretch; width: 100%; }
  .site-header .header-actions { grid-column: 2; }
}
@media(max-width:760px) {
  .site-header .header-actions { gap: 10px; }
}

/* Hero headline typography from the supplied reference. */
.hero h1 { font-family: "sohne-var", "Helvetica Neue", Arial, sans-serif; line-height: 1.06; letter-spacing: 0; color: #034c60; }
.hero .event-name { color: inherit; }
.hero .theme { font-size: 20px; }

/* Hero refinement: vertically centered copy with the restored lake-side skyline. */
.hero { min-height: 100svh; }
.hero .hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  min-height: 100svh;
  padding-top: clamp(156px, 22svh, 216px);
  padding-bottom: clamp(24px, 4svh, 48px);
}
.hero h1 { font-size: clamp(48px, calc(10svh - 8px), 76px); }
.hero .theme { margin-top: clamp(14px, 2.5svh, 24px); }
.hero .hero-actions { margin-top: clamp(16px, 3svh, 28px); }
.hero .hero-copy { position: relative; z-index: 1; }
.hero .theme { max-width: 590px; line-height: 1.45; }
.hero .hero-actions .button { padding: 10px 25px; border-radius: 999px; font-size: 15px; }
.hero .hero-actions .button:hover { box-shadow: none; }
.hero-program-link:hover, .hero-program-link:focus-visible { color: #a8181c; text-decoration: none; }
.hero-facts { max-width: 100%; color: var(--ink); }
@media(max-width:1150px) {
  .hero .theme { max-width: 540px; }
}
@media(max-width:760px) {
  .hero .hero-inner { padding-top: 164px; padding-bottom: 24px; }
  .hero h1 { font-size: clamp(30px, min(9.8vw, 5svh), 46px); }
  .hero .theme { max-width: 350px; font-size: 18px; line-height: 1.4; }
  .hero .hero-actions .button { min-width: 0; }
  .hero-facts { grid-template-columns: 1fr; }
}
@media(max-width:760px) and (max-height:700px) {
  .hero .hero-inner { padding-top: 136px; padding-bottom: 16px; }
  .hero .theme { font-size: 16px; margin-top: 12px; }
  .hero .hero-actions { margin-top: 16px; gap: 4px; }
  .hero-facts > div { grid-template-columns: 96px 1fr; }
}
@media(max-width:760px) and (max-height:600px) {
  .hero h1 { font-size: 28px; }
}

/* Hero facts: one frosted information bar replacing the three loose labels. */
.hero .hero-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin: clamp(24px, 5svh, 56px) 0 0;
  padding: 22px 8px;
  background: #ffffffc7;
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid #ffffff;
  border-radius: 18px;
  box-shadow: 0 18px 40px -22px #034c6059;
}
.hero .hero-facts > div { display: flex; align-items: flex-start; gap: 14px; padding: 2px 22px; border-left: 1px solid #034c601f; }
.hero .hero-facts > div:first-child { border-left: 0; }
.hero .hero-facts > div:last-child { padding-right: 22px; }
.hero .fact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #034c600f;
}
.hero .fact-icon svg { width: 21px; height: 21px; stroke-width: 1.7; }
.hero .hero-facts dt { color: #a8181c; font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: 1.2px; text-transform: uppercase; }
.hero .hero-facts dd { margin: 4px 0 0; color: #034c60; font-size: 16px; font-weight: 700; line-height: 1.3; }
.hero .hero-facts dd.fact-sub { margin-top: 3px; color: #456677; font-size: 13px; font-weight: 400; }
@media(max-width:1150px) {
  .hero .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .hero .hero-facts > div:nth-child(3) { border-left: 0; }
}
@media(max-width:760px) {
  .hero .hero-facts { margin-top: 24px; padding: 16px 4px; row-gap: 14px; border-radius: 14px; }
  .hero .hero-facts > div, .hero .hero-facts > div:first-child, .hero .hero-facts > div:nth-child(3) {
    flex-direction: column;
    gap: 8px;
    padding: 0 14px;
    border-top: 0;
  }
  .hero .fact-icon { width: 34px; height: 34px; }
  .hero .fact-icon svg { width: 18px; height: 18px; }
  .hero .hero-facts dt { font-size: 11px; letter-spacing: .8px; }
  .hero .hero-facts dd { font-size: 14px; }
  .hero .hero-facts dd.fact-sub { font-size: 12px; }
}
@media(max-width:760px) and (max-height:700px) {
  .hero .hero-facts dd.fact-sub { display: none; }
}

/* Hero photo: elevated KLCC Park dusk view (Esmonde Yong, Unsplash Licence), faded into the page from the left. */
.hero .hero-photo { inset: 0 0 0 30%; background-image: url('assets/klcc-park-twilight.webp'); background-size: cover; background-position: 50% 30%; }
.hero:after {
  background: linear-gradient(180deg, #fcfdfbd9 0%, #fcfdfb80 12%, transparent 30%, transparent 58%, #fcfdfb8c 78%, #fcfdfbe6 92%, #fcfdfb 100%),
    linear-gradient(90deg, #fcfdfb 0%, #fcfdfb 33%, #fcfdfbe6 42%, #fcfdfb8c 52%, #fcfdfb26 64%, transparent 74%);
}
@media(max-width:1150px) {
  .hero .hero-photo { inset: 0 0 0 20%; }
}
@media(max-width:760px) {
  .hero .hero-photo { inset: 0; background-size: auto 100%; background-position: 37% 0; }
  .hero:after {
    background: linear-gradient(180deg, #fcfdfbe6 0%, #fcfdfb59 16%, transparent 30%, transparent 70%, #fcfdfbb3 88%, #fcfdfb 100%),
      linear-gradient(90deg, #fcfdfbf7 0%, #fcfdfbeb 38%, #fcfdfbb3 62%, #fcfdfb33 88%, transparent 100%);
  }
}

/* ---------- Homepage sections ---------- */
html { scroll-padding-top: 90px; }
main section[id] { scroll-margin-top: 90px; }

/* Shared pieces */
.kicker { display: flex; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.kicker:before { content: ''; width: 28px; height: 2px; background: var(--h-orange); flex-shrink: 0; }
main h2 {
  font-family: var(--h-font);
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--h-ink);
  margin-top: 14px;
  text-wrap: balance;
}
.section-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px 56px; margin-bottom: 40px; }
.section-top h2 { max-width: 640px; }
.section-intro { color: var(--h-body); font-size: 17px; line-height: 1.55; }
.pill-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.pill-cta:hover { text-decoration: none; background: #a8181c; transform: translateY(-1px); }
.pill-cta.ghost { background: transparent; color: var(--h-ink); box-shadow: inset 0 0 0 2px var(--h-ink); }
.pill-cta.ghost:hover { background: var(--h-ink); color: #fff; }
.arrow-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 700; }
.arrow-link:hover { color: #a8181c; text-decoration: none; }
.arrow-link.on-dark { color: #fff; }
.arrow-link.on-dark:hover { color: #f5a3a3; }

/* 1. Pitch / About */
.pitch { background: var(--h-paper); }
.pitch-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.deadline-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: #fdeeee;
  border: 1px solid #c3161f33;
  color: #a8181c;
  font-size: 13px;
  font-weight: 700;
}
.deadline-badge .days-left { font-weight: 400; color: #7d1a1c; }
.deadline-badge .days-left:not(:empty):before { content: ' · '; }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #c3161f; flex-shrink: 0; }
.pulse:after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #c3161f;
  opacity: 0;
  animation: h-pulse 2s ease-out infinite;
}
@keyframes h-pulse { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
.pitch h2 { font-size: clamp(36px, 4vw, 56px); }
.pitch-lede { margin-top: 20px; color: var(--h-body); font-size: 18px; line-height: 1.55; }
.pitch-inner.is-centered { display: block; max-width: 820px; text-align: center; }
.is-centered .kicker { justify-content: center; }
.is-centered h2, .is-centered .pitch-lede { margin-left: auto; margin-right: auto; }
.is-centered h2 { max-width: 760px; }
.is-centered .pitch-lede { max-width: 640px; }

/* 2. Programme */
.day-card-x { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--h-line); }
.day-card-x:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -40px #03384880; }
.dc-photo { overflow: hidden; }
.dc-photo img { height: 100%; object-fit: cover; }
.dc-photo:after { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 45%, #03384899 100%); }
.dc-body { display: flex; flex-direction: column; flex: 1; }
.dc-date { color: var(--h-orange-text); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.day-card-x h3 { font-family: var(--h-font); color: var(--h-ink); line-height: 1.15; }
.dc-stat {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--h-mist);
  color: var(--h-ink);
  font-size: 13px;
  font-weight: 700;
}
.dc-points { margin: 16px 0 20px; padding: 0; list-style: none; }
.dc-points li { position: relative; padding: 5px 0 5px 22px; color: var(--h-body); line-height: 1.5; }
.dc-points li:before {
  content: '';
  position: absolute;
  left: 2px;
  top: 11px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--h-teal);
  border-bottom: 2px solid var(--h-teal);
  transform: rotate(-45deg);
}
.dc-venue { display: flex; gap: 8px; border-top: 1px solid var(--h-line); color: var(--h-muted); font-size: 13px; line-height: 1.4; }
.dc-venue:before {
  content: '';
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  background: var(--h-teal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.prog-foot { display: flex; justify-content: center; }
.prog-foot .arrow-link { padding: 0 24px; min-height: 50px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--h-ink); }
.prog-foot .arrow-link:hover { background: var(--h-ink); color: #fff; }
.lead-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.lead-card { overflow: hidden; border-radius: 22px; }
.lead-photo { position: relative; aspect-ratio: 1 / 1; background: radial-gradient(ellipse at 50% 30%, #2a8a9c 0%, #0b5a6b 75%); }
.lead-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.chair-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #c3161f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.lead-body { padding: 18px 20px 22px; }
.lead-country {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.lead-country img { border-radius: 50%; }
.lead-card h3 { margin-top: 8px; font-family: var(--h-font); font-size: 21px; line-height: 1.2; }
.lead-role { margin-top: 4px; font-size: 14px; line-height: 1.4; }
.lead-cred { margin-top: 8px; font-size: 12px; }
.fac-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 14px 14px 14px 18px;
  border-radius: 22px;
}
.fac-more { display: flex; align-items: center; gap: 16px; }
.fac-more:hover { text-decoration: none; color: #fff; }
.avatars { display: flex; flex-shrink: 0; }
.avatars img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #044a5c; background: #2a8a9c; object-fit: cover; }
.avatars img + img { margin-left: -12px; }
.fac-actions { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.rate-toggle { display: inline-flex; padding: 5px; border-radius: 999px; background: var(--h-mist); border: 1px solid var(--h-line); }
.rate-toggle button {
  min-height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--h-ink);
  font-size: 14px;
  font-weight: 700;
}
.rate-toggle button[aria-checked="true"] { background: var(--h-ink); color: #fff; }
.tix-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tix-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--h-line);
}
.tix-card.is-featured { border: 2px solid var(--h-ink); box-shadow: 0 40px 70px -46px #03384899; }
.tix-flag {
  position: absolute;
  top: -13px;
  left: 30px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--h-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.tix-days { color: var(--h-orange-text); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.tix-card h3 { margin-top: 8px; font-family: var(--h-font); color: var(--h-ink); font-size: 26px; line-height: 1.2; }
.tix-includes { margin: 18px 0 0; padding: 0; list-style: none; }
.tix-includes li { position: relative; padding: 6px 0 6px 26px; color: var(--h-body); font-size: 15px; }
.tix-includes li:before {
  content: '';
  position: absolute;
  left: 2px;
  top: 11px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--h-teal);
  border-bottom: 2px solid var(--h-teal);
  transform: rotate(-45deg);
}
.tix-price { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--h-line); }
.tix-label {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fdeeee;
  color: var(--h-orange-text);
  font-size: 12px;
  font-weight: 700;
}
.tix-price strong {
  display: block;
  margin-top: 8px;
  color: var(--h-ink);
  font-family: var(--h-font);
  font-size: 46px;
  line-height: 1;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.tix-price small { font-size: 16px; letter-spacing: 0; color: var(--h-muted); }
.tix-note { display: block; margin-top: 6px; color: var(--h-muted); font-size: 13px; }
.tix-later { display: flex; gap: 28px; margin: 16px 0 26px; }
.tix-later dt { color: var(--h-muted); font-size: 12px; }
.tix-later dd { margin: 2px 0 0; color: var(--h-ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tix-card .pill-cta { margin-top: auto; }
.tix-foot { margin-top: 20px; color: var(--h-muted); font-size: 13px; }

/* 6. Sponsorship */
.spon { background: var(--h-paper); }
.spon-band {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 48px;
  align-items: center;
  padding: clamp(36px, 5vw, 64px);
  border-radius: 32px;
  color: #fff;
  overflow: hidden;
}
.spon-band h2 { color: #fff; max-width: 640px; }
.spon-copy > p:not(.kicker) { margin-top: 16px; max-width: 560px; color: #c3e0e5; font-size: 17px; line-height: 1.55; }
.spon-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 30px; }
.spon-facts { margin: 0; display: grid; gap: 12px; }
.spon-facts > div {
  padding: 18px 22px;
  border-radius: 18px;
  background: #ffffff14;
  border: 1px solid #ffffff1f;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.spon-facts dt { font-family: var(--h-font); font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.spon-facts dd { margin: 6px 0 0; color: #c3e0e5; font-size: 14px; }
.qa-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.qa-contact { margin-top: 16px; color: var(--h-body); font-size: 16px; }
.qa-list { border-top: 1px solid var(--h-line); }
.qa-list details { border-bottom: 1px solid var(--h-line); }
.qa-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 64px;
  padding: 16px 0;
  list-style: none;
  cursor: pointer;
  color: var(--h-ink);
  font-size: 17px;
  font-weight: 700;
}
.qa-list summary::-webkit-details-marker { display: none; }
.qa-list summary span {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--h-mist);
  flex-shrink: 0;
  transition: transform .2s, background .2s;
}
.qa-list summary span:before, .qa-list summary span:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 2px;
  background: var(--h-ink);
  transform: translate(-50%, -50%);
}
.qa-list summary span:after { transform: translate(-50%, -50%) rotate(90deg); }
.qa-list details[open] summary span { transform: rotate(45deg); background: #fdeeee; }
.qa-list details p { padding: 0 48px 22px 0; color: var(--h-body); font-size: 16px; line-height: 1.6; }

/* 8. Final call to action */
.final-cta { color: #fff; }
.final-inner { display: flex; }
.final-cta p:not(.kicker) { margin-top: 14px; font-size: 17px; }
.final-actions { display: flex; align-items: center; flex-shrink: 0; }

/* Tablet */
@media (max-width: 1150px) {
  .pitch-inner { grid-template-columns: 1fr; }
  .lead-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spon-band { grid-template-columns: 1fr; }
  .spon-facts { grid-template-columns: repeat(3, 1fr); }
  .qa-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* Mobile */
@media (max-width: 760px) {
  .section-top { flex-direction: column; align-items: flex-start; margin-bottom: 28px; }
  .section-intro { font-size: 16px; }
  .deadline-badge { font-size: 12px; }
  .deadline-badge .days-left { display: block; }
  .deadline-badge .days-left:not(:empty):before { content: none; }
  .pitch-lede { font-size: 16px; }
  .lead-grid { grid-template-columns: 1fr; }
  .lead-card { display: grid; grid-template-columns: 120px 1fr; }
  .lead-photo { aspect-ratio: auto; }
  .lead-body { padding: 16px; }
  .lead-card h3 { font-size: 18px; }
  .lead-cred { display: none; }
  .tix-grid { grid-template-columns: 1fr; gap: 28px; }
  .fac-strip { flex-direction: column; align-items: stretch; padding: 18px; }
  .fac-more { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15px; }
  .fac-actions { flex-direction: column-reverse; align-items: stretch; gap: 6px; }
  .fac-actions .arrow-link { justify-content: center; }
  .spon-band { padding: 32px 22px; border-radius: 24px; }
  .spon-facts { grid-template-columns: 1fr; }
  .spon-facts dt { font-size: 32px; }
  .spon-actions { flex-direction: column; align-items: stretch; }
  .spon-actions .arrow-link { justify-content: center; }
  .tix-price strong { font-size: 40px; }
  .qa-list summary { font-size: 16px; }
  .qa-list details p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse:after { animation: none; }
  .pill-cta:hover { transform: none; }
}

/* Shared hero + About backdrop: the KLCC photo starts below the navigation and fades out behind the About section. */
.hero-stage { position: relative; isolation: isolate; background: var(--h-paper); }
.hero-stage .hero, .hero-stage .pitch { background: transparent; }
.hero-stage .hero .hero-photo, .hero-stage .hero:after { display: none; }
.stage-photo { position: absolute; z-index: -2; left: 30%; right: 0; }
.hero-stage:before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; pointer-events: none; }
@media (max-width: 1150px) {
  .stage-photo { left: 15%; }
}

/* About + program timeline */
.daytrack { position: relative; margin-top: 64px; }
.daytrack-track { position: absolute; border-radius: 4px; background: #034c6014; overflow: hidden; }
.daytrack-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #008198 0%, #008198 55%, #c3161f 100%);
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(.65, 0, .35, 1);
}
.daytrack-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; list-style: none; }
.daytrack-step { display: flex; flex-direction: column; align-items: center; }
.daytrack-dot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--h-paper);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .4s, box-shadow .25s;
}
.daytrack-dot span { color: var(--h-ink); font-family: var(--h-font); font-weight: 700; }
.daytrack-dot:before { content: ''; position: absolute; background: #e6f3f4; z-index: -1; transition: background .25s; }
.daytrack-step.is-limited .daytrack-dot:before { background: #fdeeee; }
.daytrack-step.is-limited .daytrack-dot span { color: var(--h-orange-text); }
.daytrack-step.is-limited .daytrack-dot:after {
  content: '';
  position: absolute;
  border: 2px solid #c3161f;
  opacity: 0;
  animation: daytrack-ring 2.4s ease-out infinite 1.8s;
}
@keyframes daytrack-ring { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }
.daytrack-step:hover .daytrack-dot { transform: scale(1.08); }
.daytrack-step:hover .daytrack-dot:before { background: #d3ecee; }
.daytrack-step.is-limited:hover .daytrack-dot:before { background: #fbdada; }
.daytrack .day-card-x { flex: 1; text-align: left; transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .6s, box-shadow .2s; }
.daytrack-step:hover .day-card-x { transform: translateY(-4px); box-shadow: 0 30px 60px -40px #03384880; }
.daytrack .prog-foot { margin-top: 40px; }

/* Entrance animation, only when JavaScript confirms motion is welcome */
.daytrack.is-ready .daytrack-fill { transform: scaleX(0); }
.daytrack.is-ready .daytrack-dot { transform: scale(.3); opacity: 0; }
.daytrack.is-ready .day-card-x { transform: translateY(28px); opacity: 0; }
.daytrack.is-in .daytrack-fill { transform: scaleX(1); }
.daytrack.is-in .daytrack-dot { transform: scale(1); opacity: 1; transition-delay: calc(var(--i) * .45s + .1s); }
.daytrack.is-in .day-card-x { transform: translateY(0); opacity: 1; transition-delay: calc(var(--i) * .45s + .3s); }
.daytrack.is-in .daytrack-step:hover .daytrack-dot { transform: scale(1.08); transition-delay: 0s; }
.daytrack.is-in .daytrack-step:hover .day-card-x { transform: translateY(-4px); transition-delay: 0s; }
@media (max-width: 900px) {
  .daytrack { margin-top: 44px; }
  .daytrack-fill { background: linear-gradient(180deg, #008198 0%, #008198 55%, #c3161f 100%); transform-origin: center top; }
  .daytrack.is-ready .daytrack-fill { transform: scaleY(0); }
  .daytrack.is-in .daytrack-fill { transform: scaleY(1); }
  .daytrack-step { display: grid; column-gap: 16px; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .daytrack-step.is-limited .daytrack-dot:after { animation: none; }
  .daytrack-fill, .daytrack-dot, .daytrack .day-card-x { transition: none; }
}
.daytrack-list { max-width: 1120px; margin: 0 auto; }
.daytrack-track {
  left: calc((100% - min(1120px, 100%)) / 2 + (min(1120px, 100%) - 96px) / 6);
  right: calc((100% - min(1120px, 100%)) / 2 + (min(1120px, 100%) - 96px) / 6);
  top: 21px;
  height: 3px;
}
.daytrack-dot {
  height: 44px;
  padding: 0 20px;
  margin-bottom: 24px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px #008198, 0 8px 20px -12px #03384866;
}
.daytrack-dot:before { inset: 4px; border-radius: 999px; }
.daytrack-dot span { font-size: 15px; letter-spacing: .3px; white-space: nowrap; }
.daytrack-step.is-limited .daytrack-dot { box-shadow: inset 0 0 0 2px #c3161f, 0 8px 20px -12px #c3161f99; }
.daytrack-step.is-limited .daytrack-dot:after { inset: -5px; border-radius: 999px; }
.daytrack .dc-photo img { position: absolute; inset: 0; }
.daytrack .day-card-x h3 { font-size: 23px; margin-top: 6px; }
.daytrack .dc-points li { font-size: 14px; }
@media (max-width: 1150px) {
  .daytrack-track { left: calc(100% / 6); right: calc(100% / 6); }
}
@media (max-width: 900px) {
  .daytrack-list { grid-template-columns: 1fr; max-width: 640px; }
  .daytrack-track { left: 36px; right: auto; }
  .daytrack-step { grid-template-columns: 76px minmax(0, 1fr); }
  .daytrack-dot { height: 36px; padding: 0 12px; }
  .daytrack-dot span { font-size: 13px; }
  .daytrack .prog-foot { justify-content: flex-start; padding-left: 92px; }
}
@media (max-width: 520px) {
  .daytrack-track { left: 30px; }
  .daytrack-step { grid-template-columns: 64px minmax(0, 1fr); column-gap: 10px; }
  .daytrack-dot { height: 32px; padding: 0; box-shadow: inset 0 0 0 2px #008198; }
  .daytrack-step.is-limited .daytrack-dot { box-shadow: inset 0 0 0 2px #c3161f; }
  .daytrack-dot:before { inset: 3px; }
  .daytrack-dot span { font-size: 12px; }
  .daytrack .prog-foot { justify-content: center; padding-left: 0; }
}
@media (max-width: 900px) {
  .daytrack-track { top: 18px; bottom: 96px; width: 3px; height: auto; }
}
.hero-stage:before { height: calc(100svh + 360px); }
@media (max-width: 760px) {
  .hero-stage:before { height: calc(100svh + 300px); }
}

/* Faculty: soft reversed teal gradient (white at the top, pale IPIN teal below), dark text on light. */
.fac { color: var(--h-body); }
.fac .on-dark h2, .fac h2 { color: var(--h-ink); }
.fac .on-dark .section-intro { color: var(--h-body); }
.fac .lead-card {
  background: #ffffffd9;
  border: 1px solid #ffffff;
  box-shadow: 0 30px 60px -44px #03384866;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.fac .lead-country { color: var(--h-teal); }
.fac .lead-card h3 { color: var(--h-ink); }
.fac .lead-role { color: var(--h-body); }
.fac .lead-cred { color: var(--h-muted); }
.fac .fac-strip { background: #ffffffb3; border: 1px solid #ffffff; box-shadow: 0 20px 40px -32px #03384855; }
.fac .fac-more { color: var(--h-body); }
.fac .fac-more strong { color: var(--h-ink); }
.fac .fac-more:hover { color: var(--h-ink); }
.fac .avatars img { border-color: #fff; }
.fac .arrow-link.on-dark { color: var(--h-ink); }
.fac .arrow-link.on-dark:hover { color: #a8181c; }

/* Card footer: places line with a people icon, then the venue. */
.daytrack .dc-places {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--h-line);
  color: var(--h-ink);
  font-size: 14px;
  font-weight: 700;
}
.daytrack .dc-places:before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: var(--h-teal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-3.3 0-7 1.7-7 4.5V20h14v-2.5C16 14.7 12.3 13 9 13zm8-2a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zm1.3 2.1A5.9 5.9 0 0 1 18 17.5V20h4v-2.2c0-2.3-1.9-4.2-3.7-4.7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-3.3 0-7 1.7-7 4.5V20h14v-2.5C16 14.7 12.3 13 9 13zm8-2a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zm1.3 2.1A5.9 5.9 0 0 1 18 17.5V20h4v-2.2c0-2.3-1.9-4.2-3.7-4.7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.daytrack .is-limited .dc-places { color: var(--h-orange-text); }
.daytrack .is-limited .dc-places:before { background: #c3161f; }
.daytrack .dc-places + .dc-venue { margin-top: 10px; padding-top: 0; border-top: 0; min-height: 2.8em; }

/* KLCC backdrop, sky extended inside the image file itself, so there is no seam at the top. */
.stage-photo { height: calc(100svh + 88px); background: url('assets/klcc-park-twilight-sky.webp') 50% 0 / cover no-repeat; }
@media (max-width: 760px) {
  .stage-photo { left: 0; height: calc(100svh + 84px); background: url('assets/klcc-park-twilight-sky.webp') 47% 0 / auto 100% no-repeat; }
}
.hero-stage:before {
  background: linear-gradient(180deg, #fcfdfb00 0, #fcfdfb00 calc(100svh - 200px), #fcfdfb80 calc(100svh + 20px), #fcfdfbe6 calc(100svh + 180px), #fcfdfb calc(100svh + 300px)),
    linear-gradient(90deg, #fcfdfb 0%, #fcfdfb 33%, #fcfdfbe6 42%, #fcfdfb8c 52%, #fcfdfb26 64%, transparent 74%);
}
@media (max-width: 760px) {
  .hero-stage:before {
    background: linear-gradient(180deg, #fcfdfb00 0, #fcfdfb00 calc(100svh - 300px), #fcfdfbb3 calc(100svh - 40px), #fcfdfb calc(100svh + 200px)),
      linear-gradient(90deg, #fcfdfbf7 0%, #fcfdfbeb 38%, #fcfdfbb3 62%, #fcfdfb33 88%, transparent 100%);
  }
}

/* Faculty, Tickets and Venues share the program cards' 1120px width. */
.fac > .container, .tix > .container, .ven > .container { max-width: 1120px; }
@media (min-width: 1151px) {
  .lead-grid { gap: 16px; }
  .lead-card h3 { font-size: 19px; }
}
@media (min-width: 1151px) {
  .fac-strip { flex-wrap: nowrap; gap: 20px; }
  .fac-more { gap: 12px; font-size: 15px; white-space: nowrap; }
  .fac .avatars img { width: 38px; height: 38px; }
  .fac-actions { flex-wrap: nowrap; gap: 18px; white-space: nowrap; }
}

/* Programme cards, connected white strip, content on top, day photo filling the bottom and fading up. */
.daytrack-list { gap: 28px; }
.daytrack-step { position: relative; }
.daytrack .day-card-x { border: 0; border-radius: 34px; background: #fff; box-shadow: 0 30px 60px -44px #03384859; }
.daytrack .dc-body { padding: 30px 28px 8px; }
.daytrack .dc-photo { order: 2; position: relative; flex: 0 0 auto; height: 230px; aspect-ratio: auto; }
.daytrack .dc-photo:after { display: none; }
.daytrack .dc-places { margin-top: auto; }

/* Bridges between neighbouring cards: a short pill beside the heading, a long one below it. */
.daytrack-step + .daytrack-step:before, .daytrack-step + .daytrack-step:after {
  content: '';
  position: absolute;
  left: -24px;
  width: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 40px -34px #03384859;
}
.daytrack-step + .daytrack-step:after { top: 218px; bottom: 26px; }
.daytrack.is-ready .daytrack-step + .daytrack-step:before, .daytrack.is-ready .daytrack-step + .daytrack-step:after {
  opacity: 0;
  transition: opacity .6s;
}
.daytrack.is-in .daytrack-step + .daytrack-step:before, .daytrack.is-in .daytrack-step + .daytrack-step:after {
  opacity: 1;
  transition-delay: calc(var(--i) * .45s + .5s);
}
@media (max-width: 900px) {
  .daytrack-step + .daytrack-step:before, .daytrack-step + .daytrack-step:after { display: none; }
  .daytrack .day-card-x { border-radius: 26px; }
  .daytrack .dc-body { padding: 22px 20px 6px; }
  .daytrack .dc-photo { height: 180px; }
}

/* Programme photos shown clearly, without the top fade. */
.daytrack .dc-photo { margin-top: 18px; }

/* One CTA colour everywhere: the bright orange gradient pill. */
.site-shell .button.orange, .site-shell .header-ticket, .site-shell .hero .hero-actions .button.orange { color: #fff; border: 0; }
.site-shell .button.orange:hover, .site-shell .header-ticket:hover { background: #a8181c; box-shadow: 0 14px 30px -14px #a8181ccc; }

/* Section labels without the leading line. */
.kicker:before { display: none; }
.kicker { gap: 0; }
.fac .section-intro { max-width: 520px; }
@media (max-width: 760px) {
  .fac .section-intro br { display: none; }
}

/* About + program backdrop: version B's soft teal glow and concentric circle, mirrored to the left,
   fading in from the hero above. */
.hero-stage .pitch { position: relative; isolation: isolate; overflow: hidden; }
.hero-stage .pitch:before, .hero-stage .pitch:after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.hero-stage .pitch:before {
  inset: 0;
  background: radial-gradient(ellipse 55% 45% at 10% 42%, #d9ecee 0%, #d9ecee00 70%),
    radial-gradient(ellipse 40% 30% at 92% 70%, #e3f1f1b3 0%, #e3f1f100 70%);
  -webkit-mask-image: linear-gradient(180deg, #0000 0, #0000 6%, #000 30%, #000 100%);
  mask-image: linear-gradient(180deg, #0000 0, #0000 6%, #000 30%, #000 100%);
}
.hero-stage .pitch:after {
  left: -14%;
  top: 22%;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #034c6014;
  -webkit-mask-image: linear-gradient(180deg, #0000 0%, #000 22%);
  mask-image: linear-gradient(180deg, #0000 0%, #000 22%);
}
@media (max-width: 760px) {
  .hero-stage .pitch:after { left: -40%; top: 18%; width: 120%; }
}
.hero-stage .pitch:after { border-color: #034c6024; box-shadow: 0 0 0 60px #034c600b, 0 0 0 120px #034c6008; }

/* Connected cards, (as the reference): the gap stays open as two rounded slots, joined by one white neck
   whose top and bottom edges are concave, so each slot ends in a half-round. */
.daytrack-step + .daytrack-step:after { display: none; }
.daytrack-step + .daytrack-step:before {
  top: calc(68px + 132px);
  left: -29px;
  width: 30px;
  height: 44px;
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image: radial-gradient(circle at 50% 0, #0000 14px, #000 14.5px), radial-gradient(circle at 50% 100%, #0000 14px, #000 14.5px);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle at 50% 0, #0000 14px, #000 14.5px), radial-gradient(circle at 50% 100%, #0000 14px, #000 14.5px);
  mask-composite: intersect;
}

/* About backdrop: keep only the soft teal circle rings, no glow fill. */
.hero-stage .pitch:before { display: none; }

/* CTA buttons: red-leaning gradient in IPIN red. */
.site-shell .button.orange, .site-shell .header-ticket, .site-shell .hero .hero-actions .button.orange, .pill-cta:not(.ghost) {
  background: linear-gradient(115deg, #e0402c 0%, #c3161f 55%, #a8181c 100%);
  box-shadow: 0 12px 28px -14px #c3161fb3;
}
.site-shell .button.orange:hover, .site-shell .header-ticket:hover, .pill-cta:not(.ghost):hover {
  background: #a8181c;
  box-shadow: 0 14px 30px -14px #a8181ccc;
}

/* One rhythm between sections: the same gap as the hero's info bar to the early-bird badge. */
:root { --section-gap: 152px; --hero-pad-bottom: clamp(24px, 4svh, 48px); }
.hero-stage .pitch { padding-top: calc(var(--section-gap) - var(--hero-pad-bottom)); padding-bottom: calc(var(--section-gap) / 2); }
.fac, .tix, .ven, .spon, .qa { padding-top: calc(var(--section-gap) / 2); padding-bottom: calc(var(--section-gap) / 2); }
@media (max-width: 760px) {
  :root { --section-gap: 96px; --hero-pad-bottom: 24px; }
}

/* About backdrop circle removed at the user's request. */
.hero-stage .pitch:after { display: none; }
.ven-layout { display: grid; align-items: center; }
.ven-left h2 { max-width: 480px; }
.ven-left .section-intro { margin-top: 16px; max-width: 460px; }
.ven-map { position: relative; width: min(100%, 440px); aspect-ratio: 560 / 630; }
.ven-map-base { height: 100%; opacity: .95; }
.kl-lens {
  position: absolute;
  left: 44.5%;
  top: 62.9%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f6fafb 100%);
  box-shadow: 0 0 0 1px #00819826, 0 0 0 10px #0081980d, 0 24px 50px -28px #03384880;
}
.kl-lens:before { content: ''; position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed #00819833; }
.kl-route { position: absolute; width: 100%; height: 100%; overflow: visible; }
.kl-route path { stroke: #034c6059; stroke-width: 1.2; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.pin { position: absolute; height: 35px; transform: translate(-50%, -100%); filter: drop-shadow(0 6px 8px #03384840); }
.pin svg { width: 100%; height: 100%; }
.pin path { stroke: #fff; stroke-width: 1.5; }
.pin circle { fill: #fff; stroke: none; }
.pin-teal path { fill: #008198; }
.pin-red path { fill: #c3161f; }
.pin em {
  position: absolute;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
  padding: 3px 9px;
  border-radius: 999px;
  background: #fff;
  color: var(--h-ink);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 12px -6px #03384866;
}
.pin-red em { color: #a8181c; }
.pin { animation: pin-drop .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.pin-red { animation-delay: .15s; }
@keyframes pin-drop { from { transform: translate(-50%, -160%); opacity: 0; } to { transform: translate(-50%, -100%); opacity: 1; } }
.kl-label {
  position: absolute;
  left: 44.5%;
  transform: translateX(-50%);
  color: var(--h-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.ven-right { display: grid; gap: 18px; }
.ven-item {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 14px 22px 14px 14px;
  border-radius: 26px;
  background: #ffffffd9;
  border: 1px solid #fff;
  box-shadow: 0 30px 60px -44px #03384866;
}
.ven-item img { height: 100%; min-height: 170px; aspect-ratio: 1; object-fit: cover; border-radius: 18px; }
.ven-day {
  display: inline-flex;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.ven-day.teal { background: #e3f1f2; color: var(--h-teal); }
.ven-day.red { background: #fdeeee; color: #a8181c; }
.ven-item h3 { margin-top: 10px; font-family: var(--h-font); color: var(--h-ink); font-size: 21px; line-height: 1.2; }
.ven-area { margin-top: 4px; color: var(--h-body); font-size: 15px; }
.ven-use { margin-top: 10px; color: var(--h-muted); font-size: 14px; }
.ven-dir { display: inline-flex; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 700; }
.ven-dir:hover { color: #a8181c; text-decoration: none; }
@media (max-width: 1150px) {
  .ven-layout { grid-template-columns: 1fr; gap: 36px; }
  .ven-map { margin-left: auto; margin-right: auto; }
}
@media (max-width: 760px) {
  .ven-item { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 12px 16px 12px 12px; }
  .ven-item img { min-height: 120px; }
  .ven-item h3 { font-size: 18px; }
  .pin { width: 22px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .pin { animation: none; }
}

/* Drive time between the two venues, sitting beside the dotted route. */
.kl-drive {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--h-ink);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 14px -8px #03384899;
}
.kl-drive svg { stroke-width: 1.8; }
.kl-lens { width: 52%; }
.kl-label { top: calc(62.9% + 28%); }
.kl-landmark svg { stroke: var(--h-ink); stroke-width: 1.5; width: 26px; height: 34px; }

/* KLCC: icon only, top-right inside the lens, above the Days 1–2 pin. */
.kl-landmark {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 14px;
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: .75;
  left: 79%;
  top: 19%;
}
.pin-teal em { top: 6px; left: calc(100% + 6px); transform: none; }

/* Drive chip centred on a longer route so the dotted line shows on both sides. */
.kl-drive { transform: translate(-50%, -50%); padding: 3px 8px 3px 6px; font-size: 10.5px; gap: 4px; }
.kl-drive svg { width: 13px; height: 13px; }

/* Venue map pulled up so its faded top begins right under the intro paragraph. */
.ven-left { position: relative; }
.ven-left .section-intro { position: relative; z-index: 1; }

/* Map raised: its faded top now sits behind the intro paragraph. Drive chip stays centred on the shorter route. */
.ven-map { margin-top: -120px; }
@media (max-width: 760px) {
  .ven-map { margin-top: -80px; }
}

/* Venues layout cards start level with the intro paragraph; map sits under the paragraph and ends level with card 2. */
@media (min-width: 1151px) {
  .ven-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "kicker ." "title ." "intro cards" "map cards";
    column-gap: 56px;
    row-gap: 0;
    align-items: start;
  }
  .ven-left { display: contents; }
  .ven-left .kicker { grid-area: kicker; }
  .ven-left h2 { grid-area: title; }
  .ven-left .section-intro { grid-area: intro; }
  .ven-right { grid-area: cards; align-self: start; margin-top: 16px; }
}

/* Stronger fade at the top of the map so the paragraph stays clear. */
.ven-map-base {
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(180deg, #0000 0%, #0000 12%, #000 42%), radial-gradient(ellipse 62% 58% at 48% 50%, #000 60%, #0000 100%);
  mask-image: linear-gradient(180deg, #0000 0%, #0000 12%, #000 42%), radial-gradient(ellipse 62% 58% at 48% 50%, #000 60%, #0000 100%);
}

/* Correction: circle and BANGSAR label stay put; only the Malaysia outline shifts down so it runs past card 2. */
@media (min-width: 1151px) {
  .ven-map { grid-area: map; align-self: end; margin-top: -108px; }
}
.kl-drive { left: 37%; top: 62%; }
@media (max-width: 520px) {
  .kl-drive { font-size: 10px; }
}
@media (min-width: 1151px) {
  .ven-map-base { transform: translateY(55px); }
}
.hero-stage .pitch { background: linear-gradient(180deg, transparent 0, transparent 45%, #eef7f7 72%, #e6f3f4 100%); }
.fac {
  background: radial-gradient(ellipse 55% 40% at 10% 45%, #bfe1e5a6 0%, transparent 70%),
    radial-gradient(ellipse 50% 38% at 90% 35%, #cfe9e2a6 0%, transparent 70%),
    linear-gradient(180deg, #e6f3f4 0%, #d6ecee 40%, #dbeeef 65%, var(--h-grey) 100%);
}
.tix { background: var(--h-grey); }
.ven { background: radial-gradient(ellipse 50% 60% at 20% 55%, #e3ecf3 0%, transparent 70%), var(--h-grey); }

/* Sponsorship and FAQ sit on the same light grey as Tickets and Venues. */
.spon, .qa { background: var(--h-grey); }
.final-cta { overflow: hidden; }
.final-inner { flex-direction: column; justify-content: center; align-items: center; gap: 36px; text-align: center; }
.final-inner > div:first-child { display: flex; flex-direction: column; align-items: center; }
.final-cta .kicker { justify-content: center; }
.final-actions { justify-content: center; gap: 12px 28px; flex-wrap: wrap; }

/* Footer continues the same dark base, full width. */
.site-shell > .site-footer, .site-footer { position: relative; background: var(--h-night); }
.site-footer a:hover { color: #fff; }
@media (max-width: 760px) {
  .final-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .final-actions .arrow-link { justify-content: center; }
}

/* Closing CTA + footer exact IPIN teal (#034c60) base with a larger lighter-teal (#008198) glow from the top centre. */
:root {
  --ink: #034c60;
  --body: #234762;
  --teal: #008198;
  --orange: #c3161f;
  --paper: #fcfdfb;
  --line: #dfe8e8;
  --pale: #eef5f4;
  --h-ink: #034c60;
  --h-body: #3c5f70;
  --h-muted: #587786;
  --h-teal: #008198;
  --h-orange: #b8141c;
  --h-orange-text: #a8181c;
  --h-line: #034c601a;
  --h-paper: #fcfdfb;
  --h-mist: #f1f7f6;
  --h-deep: #033848;
  --h-font: "sohne-var", "Helvetica Neue", Arial, sans-serif;
  --h-grey: #f0f4f7;
  --h-night: #034c60;
}

/* Closing CTA + footer one continuous soft gradient, light grey -> soft teal -> deep IPIN teal at the footer's end. */
.final-cta {
  background: radial-gradient(ellipse 50% 60% at 50% 55%, #cfe9e2a6 0%, transparent 70%),
    linear-gradient(180deg, var(--h-grey) 0%, #e6f3f4 30%, #d3eaec 62%, #a9d4da 88%, #8cc5cd 100%);
}
.final-cta h2 { color: var(--h-ink); }
.final-cta p:not(.kicker) { max-width: 560px; color: var(--h-body); }
.final-actions .arrow-link.on-dark { color: var(--h-ink); }
.final-actions .arrow-link.on-dark:hover { color: #a8181c; }
.site-footer { isolation: isolate; clip-path: inset(0 -100vmax); padding-top: 40px; padding-bottom: 44px; }
.site-footer:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  background: linear-gradient(180deg, #8cc5cd 0%, #3d8d9c 18%, #1a6a7b 45%, #0a5669 72%, #034c60 100%);
}
.page-end { position: relative; }
.page-end .final-cta { background: none; padding-bottom: 120px; }
.page-end .site-footer, .site-shell .page-end > .site-footer { background: none; }
.page-end .site-footer:before { display: none; }
.page-end h2 {
  font-family: var(--h-font);
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -1px;
  margin-top: 14px;
  text-wrap: balance;
  max-width: 760px;
}
.page-end .final-cta { padding-top: calc(var(--section-gap) * 1.5 - 24px); }

/* Page end (built like Faculty): a smooth vertical gradient carries the colour, starting in the lower FAQ,
   deepest behind the CTA, easing lighter into the footer; two huge faint side glows only tint it. */
.qa { padding-bottom: 24px; background: linear-gradient(180deg, var(--h-grey) 0%, var(--h-grey) 35%, #e2f0f1 70%, #d6ebed 100%); }

/* Eyebrow labels in IPIN red (a lighter red on the dark sponsorship band for legibility). */
.kicker, .fac .kicker, .fac .on-dark .kicker, .final-cta .kicker, .pitch .kicker { color: #a8181c; }
.spon-band .kicker, .kicker.on-dark:not(.final-cta .kicker) { color: #ff9f9f; }

/* Hairline at the top of Faculty, Tickets and Venues, matching the footer divider, aligned to the content column. */
.fac, .tix, .ven { position: relative; }
.fac::after, .tix::after, .ven::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1120px, calc(100% - 112px));
  height: 1px;
  background: #034c601a;
  pointer-events: none;
}
@media (max-width: 1150px) {
  .fac::after, .tix::after, .ven::after { width: calc(100% - 64px); }
}
@media (max-width: 760px) {
  .fac::after, .tix::after, .ven::after { width: calc(100% - 40px); }
}

/* Optical alignment: large headings starting with round/bowl letters carry extra left side-bearing, so they look
   indented from the small eyebrow above. Nudge them by the measured amount (scales with font size). */
.qa h2, .spon-band h2 { margin-left: -0.045em; }
.tix h2 { margin-left: -0.018em; }

/* Page end after the CTA the teal only deepens gently (a step darker than the CTA wash), no dark band. */
.page-end, .page-end:is(*) {
  background: radial-gradient(ellipse 60% 45% at 10% 42%, #a8d5dba6 0%, #a8d5db00 70%),
    radial-gradient(ellipse 55% 42% at 90% 52%, #b4dcdfa6 0%, #b4dcdf00 70%),
    linear-gradient(180deg, #d6ebed 0%, #c4e2e6 32%, #bfdfe3 58%, #b3d9de 72%, #a2d0d7 86%, #93c8d0 100%);
}
@media (max-width: 760px) {
  .page-end {
    background: radial-gradient(ellipse 60% 45% at 10% 42%, #a8d5dba6 0%, #a8d5db00 70%),
      radial-gradient(ellipse 55% 42% at 90% 52%, #b4dcdfa6 0%, #b4dcdf00 70%),
      linear-gradient(180deg, #d6ebed 0%, #c4e2e6 28%, #bfdfe3 52%, #b3d9de 66%, #a2d0d7 82%, #93c8d0 100%);
  }
}
.page-end .site-footer { color: var(--h-body); }
.page-end .site-footer strong { color: var(--h-ink); }
.page-end .site-footer p { color: #2f5f6d; }
.page-end .site-footer a:hover { color: #a8181c; }

/* Contact popup (replaces WhatsApp). */
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--h-ink);
  font: 700 18px/1.3 var(--h-font);
}
.contact-link:hover { color: #a8181c; }
.footer-contact { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.page-end .site-footer .footer-contact { color: var(--h-ink); }
.contact-modal { max-height: calc(100% - 32px); padding: 0; border: 0; color: var(--h-body); }
.contact-form { position: relative; }
.contact-body, .contact-done { display: grid; }
.contact-modal h2 { font-family: var(--h-font); line-height: 1.15; color: var(--h-ink); }
.contact-intro { color: var(--h-muted); font-size: 15px; }
.contact-modal label { display: grid; gap: 6px; color: var(--h-ink); font-size: 14px; font-weight: 700; }
.contact-modal input, .contact-modal select, .contact-modal textarea { width: 100%; }
.contact-modal input:focus, .contact-modal select:focus, .contact-modal textarea:focus { border-color: var(--h-teal); }
.contact-modal [aria-invalid="true"] { border-color: #a8181c; }
.contact-error { color: #a8181c; font-size: 13px; }
.contact-close { position: absolute; width: 36px; height: 36px; border: 0; border-radius: 50%; color: var(--h-ink); font-size: 22px; line-height: 1; }
.contact-close:hover { background: #e3f1f2; }
.contact-body[hidden], .contact-done[hidden], .contact-error[hidden] { display: none; }

/* Contact popup instant, simple. Light panel, borderless pill fields with placeholders, custom select chevron. */
.contact-modal { width: min(460px, calc(100% - 32px)); border-radius: 26px; background: #f2f5f7; box-shadow: 0 30px 70px -30px #03384880; }
.contact-modal::backdrop { background: #03384873; -webkit-backdrop-filter: none; backdrop-filter: none; }
.contact-body, .contact-done { gap: 12px; padding: 34px 26px 26px; }
.contact-modal h2 { margin: 0 40px 8px 4px; font-size: 22px; }
.contact-modal input, .contact-modal select, .contact-modal textarea {
  min-height: 52px;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  color: var(--h-ink);
  font: 400 15px/1.4 Arial, Helvetica, sans-serif;
}
.contact-modal textarea { min-height: 128px; border-radius: 24px; resize: vertical; }
.contact-modal ::placeholder { color: #8aa3ab; opacity: 1; }
.contact-modal select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 48px;
  cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23034c60' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") right 20px center / 16px 16px no-repeat;
}
.contact-modal input:focus, .contact-modal select:focus, .contact-modal textarea:focus { outline: 0; box-shadow: 0 0 0 2px #00819866; }
.contact-modal [aria-invalid="true"] { box-shadow: 0 0 0 2px #a8181c; }
.contact-error { padding-left: 6px; }
.contact-modal .pill-cta { border: 0; outline-offset: 3px; }
.contact-send { justify-self: center; min-width: 150px; margin-top: 6px; }
.contact-done { text-align: center; }
.contact-done .contact-intro { margin: 0; }
.contact-done .pill-cta { justify-self: center; background: #fff; }
.contact-close { top: 18px; right: 18px; background: #fff; }
@media (max-width: 520px) {
  .contact-body, .contact-done { padding: 30px 18px 20px; }
  .contact-send { justify-self: stretch; }
}

/* Hairline above the CTA, midway between the last FAQ item and the CTA content (like the other section lines). */
.final-cta { position: relative; }
.final-cta::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--section-gap) * .75 - 24px);
  height: 1px;
  background: #034c601a;
  pointer-events: none;
}

/* KLCC backdrop the sky now runs up behind the menu bar (like the original lake photo), with only a light eased fade at the very top. */
.stage-photo {
  -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.600) 0px, rgb(0 0 0 / 0.617) 15px, rgb(0 0 0 / 0.662) 30px, rgb(0 0 0 / 0.727) 45px, rgb(0 0 0 / 0.800) 60px, rgb(0 0 0 / 0.873) 75px, rgb(0 0 0 / 0.938) 90px, rgb(0 0 0 / 0.983) 105px, rgb(0 0 0 / 1.000) 120px, #000 calc(100% - 220px), #0000 100%);
  mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.600) 0px, rgb(0 0 0 / 0.617) 15px, rgb(0 0 0 / 0.662) 30px, rgb(0 0 0 / 0.727) 45px, rgb(0 0 0 / 0.800) 60px, rgb(0 0 0 / 0.873) 75px, rgb(0 0 0 / 0.938) 90px, rgb(0 0 0 / 0.983) 105px, rgb(0 0 0 / 1.000) 120px, #000 calc(100% - 220px), #0000 100%);
}
@media (max-width: 760px) {
  .stage-photo {
    -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.600) 0px, rgb(0 0 0 / 0.617) 12px, rgb(0 0 0 / 0.662) 25px, rgb(0 0 0 / 0.727) 38px, rgb(0 0 0 / 0.800) 50px, rgb(0 0 0 / 0.873) 62px, rgb(0 0 0 / 0.938) 75px, rgb(0 0 0 / 0.983) 88px, rgb(0 0 0 / 1.000) 100px, #000 calc(100% - 220px), #0000 100%);
    mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.600) 0px, rgb(0 0 0 / 0.617) 12px, rgb(0 0 0 / 0.662) 25px, rgb(0 0 0 / 0.727) 38px, rgb(0 0 0 / 0.800) 50px, rgb(0 0 0 / 0.873) 62px, rgb(0 0 0 / 0.938) 75px, rgb(0 0 0 / 0.983) 88px, rgb(0 0 0 / 1.000) 100px, #000 calc(100% - 220px), #0000 100%);
  }
}

/* Full-width hairlines above the CTA and the footer. */
.final-cta::before, .final-cta::before { width: 100%; }
.page-end .site-footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  transform: translateX(-50%);
  background: #034c6026;
  pointer-events: none;
}

/* Sponsorship band background: real IPIN workshop crowd instead of the empty venue ballroom. */
.spon-band {
  background: linear-gradient(100deg, #033848f5 0%, #033848e0 45%, #03384899 100%), url('assets/ipin-workshop-room.webp') center 35% / cover;
}
.daytrack .dc-photo img { object-position: 50% 40%; }

/* Closing section as a finale: bigger headline, ticket reminder, and the KLCC skyline returning as a bookend to the hero. */
.final-cta { isolation: isolate; padding-bottom: 0; }
.final-inner { gap: 28px; }
.page-end .final-cta h2 { max-width: 820px; font-size: clamp(36px, 4.4vw, 60px); letter-spacing: -1.2px; }
.final-options { display: grid; grid-template-columns: repeat(2, minmax(0, 250px)); gap: 12px; }
.final-option { display: grid; gap: 3px; padding: 16px 20px; border-radius: 18px; background: #ffffffb8; border: 1px solid #ffffff; color: var(--h-ink); text-align: left; box-shadow: 0 16px 34px -26px #03384866; transition: transform .2s, box-shadow .2s; }
.final-option:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 22px 40px -26px #03384880; }
.final-option span { color: #a8181c; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.final-option strong { font-family: var(--h-font); font-size: 17px; }
.final-option em { color: var(--h-body); font-size: 14px; font-style: normal; }
.final-option.is-featured { border-color: #034c6033; }
.final-skyline {
  position: relative; z-index: -1; height: 340px; margin-top: -40px;
  background: url('assets/klcc-park-twilight-sky.webp') 50% 38% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #0000 0%, #0008 35%, #000 70%, #000 100%);
  mask-image: linear-gradient(180deg, #0000 0%, #0008 35%, #000 70%, #000 100%);
}
.final-skyline::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #bfdfe399 0%, #9dcdd540 55%, #03384826 100%); }
.page-end .final-cta::before { z-index: 1; }
@media (max-width: 760px) {
  .final-options { grid-template-columns: 1fr; width: 100%; }
  .final-skyline { height: 220px; margin-top: -20px; background-position: 42% 30%; }
}
.final-skyline {
  height: 400px;
  -webkit-mask-image: linear-gradient(180deg, #0000 0%, #0009 28%, #000 52%, #000 66%, #0006 86%, #0000 100%);
  mask-image: linear-gradient(180deg, #0000 0%, #0009 28%, #000 52%, #000 66%, #0006 86%, #0000 100%);
  background-position: 50% 42%;
}
.page-end .site-footer { margin-top: -70px; }
@media (max-width: 760px) { .final-skyline { height: 260px; } .page-end .site-footer { margin-top: -40px; } }

/* ---------- Mobile review (27 Sep 2026) ---------- */
@media (max-width: 760px) {
  /* Programme: day pill sits above each full-width card instead of in a side column. */
  .daytrack-track { display: none; }
  .daytrack-list { gap: 32px; }
  .daytrack-step { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .daytrack-dot { width: auto; height: 34px; padding: 0 16px; margin: 0; }
  .daytrack-dot span { font-size: 13px; }
  .daytrack .prog-foot { padding-left: 0; justify-content: center; }
  /* Sponsorship stats: a compact row of three. */
  .spon-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .spon-facts > div { padding: 14px 10px; border-radius: 14px; text-align: center; }
  .spon-facts dt { font-size: 28px; }
  .spon-facts dd { font-size: 11.5px; line-height: 1.35; }
  /* Tickets: titles that don't break mid-word. */
  .tix-card h3 { font-size: 22px; }
}

/* Skyline sits directly on the footer: top fade only, no bottom fade; footer divider removed; single centred CTA. */
.final-skyline, .final-skyline:is(*) {
  -webkit-mask-image: linear-gradient(180deg, #0000 0%, #0009 30%, #000 58%);
  mask-image: linear-gradient(180deg, #0000 0%, #0009 30%, #000 58%);
}
.final-skyline::after { background: linear-gradient(180deg, #bfdfe399 0%, #9dcdd533 60%, #0338481a 100%); }
.page-end .site-footer { margin-top: 0; }
.page-end .site-footer::after { display: none; }
.final-actions { justify-content: center; align-items: center; }
@media (max-width: 760px) { .page-end .site-footer { margin-top: 0; } }
.page-end .final-cta { padding-bottom: 0; }

/* Footer: solid IPIN teal, full width, light text. */
.page-end .site-footer { color: #cfe3e8; }
.page-end .site-footer::before { content: ''; display: block; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #034c60; }
.page-end .site-footer strong { color: #fff; }
.page-end .site-footer p { color: #b9d3da; }
.page-end .site-footer a, .page-end .site-footer .footer-contact { color: #fff; }
.page-end .site-footer a:hover, .page-end .site-footer .footer-contact:hover { color: #ffd0d0; }

/* Footer v2: IPIN HQ, IIPC links, social and contact, on solid IPIN teal. */
.page-end .site-footer { display: block; padding-top: 64px; padding-bottom: 32px; }
.footer-grid { display: grid; grid-template-columns: 1fr 1.4fr 1.1fr 1.1fr; gap: 40px; }
.footer-logo img { width: 64px; height: 64px; }
.footer-event { margin-top: 16px; color: #b9d3da; font-size: 14px; line-height: 1.5; }
.footer-event strong { color: #fff; font-size: 16px; }
.page-end .site-footer .footer-title { margin: 0 0 16px; color: #fff; font-family: var(--h-font); font-size: 16px; font-weight: 700; letter-spacing: 0; }
.site-footer address { color: #cfe3e8; font-size: 15px; font-style: normal; line-height: 1.7; }
.footer-email { margin-top: 12px; font-size: 15px; }
.footer-email a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #ffffff59; }
.footer-links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.page-end .site-footer .footer-links a { color: #e6f1f3; }
.page-end .site-footer .footer-links a:hover { color: #fff; }
.footer-social { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #ffffff1f; transition: background .15s; }
.footer-social a:hover { background: #ffffff38; text-decoration: none; }
.footer-social svg { width: 22px; height: 22px; fill: #fff; stroke: none; }
.footer-social svg.stroke { fill: none; stroke: #fff; stroke-width: 1.8; }
.footer-social svg .dot { fill: #fff; stroke: none; }
.footer-contact-line { margin-top: 24px; color: #cfe3e8; font-size: 15px; }
.footer-legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid #ffffff24; color: #9fbdc5; font-size: 13px; }
@media (max-width: 1150px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .page-end .site-footer { padding-top: 48px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-links { grid-template-columns: 1fr 1fr; }
}
.footer-web { margin-top: 12px; font-size: 15px; }
.footer-web a, .footer-email a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #ffffff59; }
.footer-web + .footer-email { margin-top: 6px; }
.footer-contact-line { line-height: 1.7; }

/* Early-bird reminder now sits under the Tickets title: no dot, no border. */
.deadline-badge { border: 0; margin: 16px 0 0; padding: 7px 14px; }
@media (max-width: 760px) { .deadline-badge { margin-top: 14px; } }

/* Pricing category picker: a labelled, full-width choice above the ticket cards. */
.rate-picker { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin: 0 0 24px; padding: 14px 14px 14px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--h-line); }
.rate-q { margin: 0; color: var(--h-ink); font-size: 16px; font-weight: 700; }
.rate-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; flex: 1; min-width: 280px; }
.rate-picker button { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px; border: 2px solid #034c601f; border-radius: 16px; background: #fbfdfd; color: var(--h-ink); text-align: left; font-family: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.rate-picker button:hover { border-color: #034c6059; }
.rate-picker button[aria-checked="true"] { border-color: var(--h-ink); background: #e8f3f4; box-shadow: inset 0 0 0 1px var(--h-ink); }
.rate-picker button img { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.rate-picker button svg { width: 28px; height: 28px; flex-shrink: 0; fill: none; stroke: var(--h-teal); stroke-width: 1.6; }
.rate-picker button span { display: grid; gap: 2px; }
.rate-picker button strong { font-size: 16px; }
.rate-picker button small { color: var(--h-muted); font-size: 12.5px; font-weight: 400; }
.tix-other { display: block; margin-top: 4px; color: var(--h-body); font-size: 13px; font-weight: 700; }
@media (max-width: 760px) {
  .rate-picker { padding: 14px; }
  .rate-options { grid-template-columns: 1fr 1fr; min-width: 0; width: 100%; }
  .rate-picker button { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 760px) { .rate-picker { display: block; } .rate-q { margin-bottom: 10px; } .rate-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Local / International switch (top right of Tickets). */
.rate-switch-wrap { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.rs-label { padding: 6px 2px; border: 0; background: none; color: var(--h-muted); font: 700 17px/1.2 var(--h-font); cursor: pointer; transition: color .15s; }
.rs-label.is-active { color: var(--h-ink); }
.rate-switch { position: relative; width: 64px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: var(--h-ink); cursor: pointer; flex-shrink: 0; }
.rate-switch .knob { position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px #0003; transition: transform .2s ease; }
.rate-switch[aria-checked="true"] .knob { transform: translateX(28px); }
.rate-switch:focus-visible, .rs-label:focus-visible { outline: 3px solid #a8181c; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .rate-switch .knob { transition: none; } }

/* Smaller switch, matching the 13px eyebrow labels. */
.rate-switch-wrap { gap: 8px; }
.rs-label { font: 700 13px/1.2 var(--h-font); letter-spacing: .3px; padding: 4px 2px; }
.rate-switch { width: 38px; height: 22px; }
.rate-switch .knob { top: 3px; left: 3px; width: 16px; height: 16px; }
.rate-switch[aria-checked="true"] .knob { transform: translateX(16px); }

/* FAQ list starts level with the top of the "Before you register." letters. */
@media (min-width: 1151px) { .qa-list { margin-top: calc(33px + 0.21 * clamp(32px, 3.4vw, 48px)); } }
.contact-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-send:disabled { opacity: .7; cursor: progress; }
.contact-error a { color: #a8181c; font-weight: 700; }

/* Mobile menu open state and the ☰ → ✕ icon. Restored: the 27 Sep cleanup dropped them because they only match
   after the menu button is tapped. */
@media (max-width: 950px) {
  .navigation.is-open { display: flex; }
  .menu-toggle span { transition: transform .15s, opacity .15s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }
}

/* Contact form fields at 16px: iOS Safari zooms into any smaller field on focus and stays zoomed after closing. */
.contact-modal input, .contact-modal select, .contact-modal textarea { font-size: 16px; }

/* Mobile ticket bar: fixed to the bottom on phones, slides away while another ticket button is on screen. */
.ticket-bar { display: none; }
@media (max-width: 760px) {
  .ticket-bar {
    position: fixed;
    z-index: 40;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: #fcfdfbf2;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 -1px 0 #034c601a, 0 -10px 24px -14px #03384840;
    transition: transform .25s ease;
  }
  .ticket-bar.is-hidden { transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
  .ticket-bar p { display: grid; gap: 2px; min-width: 0; color: var(--h-muted); font-size: 13px; line-height: 1.25; }
  .ticket-bar strong { color: var(--h-ink); font-family: var(--h-font); font-size: 14px; }
  .ticket-bar .pill-cta { flex-shrink: 0; min-height: 46px; padding: 0 20px; font-size: 15px; }
  /* Keep the end of the footer clear of the bar. */
  body:has(.ticket-bar) .page-end .site-footer { padding-bottom: calc(32px + 72px + env(safe-area-inset-bottom)); }
}

/* Phones: show the whole skyline photo at full width so the KLCC spires and the Four Seasons tower are not cut off;
   the fade into the page only uses the thin band of sky above the spires. */
@media (max-width: 760px) {
  .final-skyline, .final-skyline:is(*) {
    height: auto;
    aspect-ratio: 2560 / 1900;
    margin-top: 8px;
    background-size: 100% auto;
    background-position: 50% 100%;
    -webkit-mask-image: linear-gradient(180deg, #0000 0%, #0007 5%, #000 11%);
    mask-image: linear-gradient(180deg, #0000 0%, #0007 5%, #000 11%);
  }
  .final-skyline::after { background: linear-gradient(180deg, #a2d0d766 0%, #9dcdd51a 30%, #0338481a 100%); }
}

/* Ticket bar in the footer's IPIN teal so the red button stands out. */
@media (max-width: 760px) {
  .ticket-bar { background: #034c60; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 -8px 24px -12px #03384866; }
  .ticket-bar p { color: #b9d3da; }
  .ticket-bar strong { color: #fff; }
}

/* Ticket bar: even padding above and below (no extra iPhone safe-area space) and no glow under the button, so the
   content sits visually centred. */
@media (max-width: 760px) {
  .ticket-bar { padding: 10px 16px; }
  .ticket-bar .pill-cta, .ticket-bar .pill-cta:hover { box-shadow: none; }
  body:has(.ticket-bar) .page-end .site-footer { padding-bottom: calc(32px + 66px); }
}

/* ---------- Mobile review 2 (27 Sep 2026) ---------- */
/* Faculty: on phones the Chair label moves out of the small photo (it covered the face) into the text column. */
.chair-inline { display: none; }
@media (max-width: 760px) {
  .lead-photo .chair-badge { display: none; }
  .lead-country .chair-inline { position: static; display: inline-flex; margin: -3px 0 -3px 6px; padding: 2px 9px; font-size: 10px; line-height: 1.4; }
}

@media (max-width: 760px) {
  /* Ticket bar: always on, taller, content centred. */
  .ticket-bar { padding: 18px 16px; }
  body:has(.ticket-bar) .page-end .site-footer { padding-bottom: calc(32px + 82px); }

  /* Closing skyline: the photo's sky is extended upward in its own colour and fades in slowly behind the ticket
     button, so the KLCC image grows out of the section instead of starting at a hard edge. Spires stay fully visible. */
  .final-skyline, .final-skyline:is(*) {
    aspect-ratio: 1280 / 1442;
    height: auto;
    margin-top: -120px;
    /* Taller phone version of the photo: its own top row stretched upward with a blurred join, so no seam. */
    background: url('assets/klcc-park-twilight-sky-tall.webp') 50% 100% / 100% auto no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #0000 0%, #0000 10%, #0007 27%, #000 40%);
    mask-image: linear-gradient(180deg, #0000 0%, #0000 10%, #0007 27%, #000 40%);
  }
  .final-skyline::after { background: linear-gradient(180deg, #a2d0d7a6 0%, #a2d0d766 22%, #9dcdd51a 45%, #0338481a 100%); }
}

/* Footer overlaps the skyline by 2px: both edges land on a fractional pixel, which left a light hairline between them. */
.page-end .site-footer, .page-end .site-footer:is(*) { margin-top: -2px; }
/* Phone number in the footer, styled like the web and email links. */
.footer-phone { margin-top: 12px; font-size: 15px; }
.footer-phone a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #ffffff59; }
.footer-web + .footer-phone { margin-top: 6px; }
.footer-phone + .footer-email { margin-top: 6px; }

/* Link from the homepage ticket section to the full price table. */
.tix-foot .tix-table-link { color: var(--h-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.tix-foot .tix-table-link:hover { color: #a8181c; }

/* Five menu items: tighten the header between 951 and 1100px so the menu clears Sign In. */
@media (min-width: 951px) and (max-width: 1100px) {
  .site-header .navigation { gap: 11px; }
  .site-header .header-actions { gap: 12px; }
  .site-header .header-ticket { padding: 10px 20px; }
}