/* =========================================================
   UKITEX 2026 — Design system & homepage styles
   Palette is taken from the official logo (navy + royal blue),
   with one warm accent from the PHDCCI organiser mark.
   ========================================================= */

:root {
  --navy: #232B5E;          /* logo navy */
  --navy-deep: #171D45;
  --navy-mid: #2D3878;
  --royal: #2754A2;         /* logo royal blue */
  --royal-soft: #E8EEF9;
  --paper: #FFFFFF;
  --mist: #F4F6FB;          /* soft off-white sections */
  --ink: #1C2246;
  --muted: #5A6286;
  --line: #DCE1EE;
  --saffron: #D9822B;       /* accent — used sparingly */

  --f-display: "Lexend", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --r-sm: 6px;
  --r-md: 10px;
  --shadow-1: 0 1px 2px rgba(23, 29, 69, .06), 0 8px 24px rgba(23, 29, 69, .06);
  --shadow-2: 0 2px 4px rgba(23, 29, 69, .06), 0 18px 40px rgba(23, 29, 69, .12);

  --header-h: 84px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--royal); text-decoration: none; }
a:hover { color: var(--navy); }
p { margin: 0 0 1rem; }

h1, h2, h3 { font-family: var(--f-display); color: var(--navy); margin: 0; text-wrap: balance; }
main { overflow-x: clip; }

.ic { width: 1.1em; height: 1.1em; flex: none; display: inline-block; vertical-align: -0.18em; }

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

.skip-link {
  position: absolute; left: 1rem; top: -60px; z-index: 2000;
  background: var(--navy); color: #fff; padding: .6rem 1rem; border-radius: var(--r-sm);
  transition: top .2s;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* ---------- Buttons ---------- */
.btn-u {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--f-display); font-weight: 500; font-size: .95rem; letter-spacing: .01em;
  padding: .85rem 1.5rem; border-radius: var(--r-sm); border: 1.5px solid transparent;
  line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-u .ic { transition: transform .25s var(--ease); }
.btn-u:hover { transform: translateY(-2px); }
.btn-u:hover .ic:last-child:not(:first-child) { transform: translateX(3px); }
.btn-u:active { transform: translateY(0); }

.btn-u--primary { background: var(--navy); color: #fff; }
.btn-u--primary:hover { background: var(--royal); color: #fff; box-shadow: 0 10px 22px rgba(39, 84, 162, .28); }

.btn-u--ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-u--ghost:hover { border-color: var(--navy); color: var(--navy); background: #fff; }

.btn-u--light { background: #fff; color: var(--navy); }
.btn-u--light:hover { background: var(--royal-soft); color: var(--navy); box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }

.btn-u--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-u--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.btn-row--center { justify-content: center; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 2rem;
  transition: height .3s var(--ease);
}
.brand-wrap { flex: none; display: flex; align-items: center; gap: 1rem; }
.brand { flex: none; display: block; }
.brand img { width: 172px; height: auto; transition: width .3s var(--ease); }
.brand-div { width: 1px; height: 40px; background: var(--line); transition: height .3s var(--ease); }
.brand-org { flex: none; display: block; }
.brand-org img { height: 56px; width: auto; transition: height .3s var(--ease); }

.site-header.is-scrolled { background: #fff; border-color: var(--line); box-shadow: 0 6px 24px rgba(23, 29, 69, .07); }
.site-header.is-scrolled .header-inner { height: 68px; }
.site-header.is-scrolled .brand img { width: 146px; }
.site-header.is-scrolled .brand-org img { height: 46px; }
.site-header.is-scrolled .brand-div { height: 32px; }

.main-nav { margin-left: auto; }
.main-nav ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.main-nav a {
  position: relative; display: block; padding: .5rem .8rem;
  font-family: var(--f-display); font-size: .92rem; font-weight: 400; color: var(--ink); white-space: nowrap;
}
.main-nav a::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .25rem; height: 2px;
  background: var(--royal); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.main-nav a:hover { color: var(--navy); }
.main-nav a:hover::after, .main-nav a.is-active::after { transform: scaleX(1); }
.main-nav a.is-active { color: var(--navy); font-weight: 500; }

.header-cta { flex: none; padding: .7rem 1.15rem; font-size: .88rem; }

.menu-toggle {
  display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: #fff; padding: 0; position: relative; cursor: pointer;
}
.menu-toggle span {
  position: absolute; left: 12px; right: 12px; height: 2px; background: var(--navy); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s, top .3s var(--ease);
}
.menu-toggle span:nth-child(1) { top: 15px; }
.menu-toggle span:nth-child(2) { top: 22px; }
.menu-toggle span:nth-child(3) { top: 29px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; left: 0; right: 0; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); bottom: 0;
  background: #fff; overflow-y: auto; padding: 1.25rem 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.mobile-menu.is-open { opacity: 1; transform: none; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu li { border-bottom: 1px solid var(--line); }
.mobile-menu nav a {
  display: block; padding: 1rem 0; font-family: var(--f-display); font-weight: 400; color: var(--navy);
}
.mobile-menu-foot { margin-top: auto; padding-top: 2rem; display: grid; gap: .75rem; }
.mm-event { color: var(--muted); font-size: .95rem; margin-bottom: .5rem; }
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100vh, 900px);
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(3rem, 8vh, 6rem)) 0 clamp(11rem, 20vw, 16rem);
  color: #fff;
  background:
    radial-gradient(1100px 520px at 78% 112%, rgba(39, 84, 162, .55), transparent 60%),
    linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, #26357A 100%);
}
.hero-sky { position: absolute; inset: 0; z-index: -1; }
.hero-contours {
  position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; opacity: .07;
  transform-origin: 60% 40%;
  animation: slowZoom 18s var(--ease) both;
}
.hero-sun {
  position: absolute; right: 22%; bottom: 4%; width: 620px; height: 420px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(217, 130, 43, .2), rgba(217, 130, 43, 0));
}
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 3rem; }

.hero-pre {
  font-family: var(--f-display); font-weight: 300; font-size: 1rem; color: rgba(255, 255, 255, .78);
  display: flex; align-items: center; gap: .8rem; margin-bottom: 1.5rem;
}
.hero-pre::before { content: ""; width: 34px; height: 2px; background: var(--saffron); }

.hero-title {
  color: #fff; font-weight: 600; letter-spacing: -.025em; line-height: 1.02;
  font-size: clamp(2.5rem, 6.2vw, 5.6rem);
  margin-bottom: 1.6rem;
}
.ht-line { display: block; }
.hero-lede { max-width: 36rem; font-size: 1.1rem; color: rgba(255, 255, 255, .82); margin-bottom: 2.2rem; }

.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1rem; }
.hero-link {
  display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-family: var(--f-display);
  font-size: .95rem; padding: .85rem .4rem; border-bottom: 1px solid rgba(255, 255, 255, .35);
  transition: border-color .25s;
}
.hero-link:hover { color: #fff; border-color: #fff; }

.hero-date {
  min-width: 250px; padding: .5rem 0 .5rem 2.5rem; border-left: 1px solid rgba(255, 255, 255, .22);
  font-family: var(--f-display);
}
.hd-edition { font-size: .95rem; font-weight: 500; color: rgba(255, 255, 255, .7); margin-bottom: .25rem; }
.hd-days { display: flex; align-items: center; gap: .9rem; font-size: clamp(3.5rem, 6vw, 5.2rem); font-weight: 200; line-height: 1; margin-bottom: .5rem; letter-spacing: -.03em; }
.hd-dash { width: 34px; height: 2px; background: var(--saffron); display: inline-block; }
.hd-month { font-size: 1.35rem; font-weight: 400; margin-bottom: 1.2rem; }
.hd-venue { display: flex; align-items: center; gap: .5rem; font-size: .98rem; color: rgba(255, 255, 255, .85); margin: 0; }

.hero-ridges { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(120px, 18vw, 260px); z-index: 0; }
.hero-ridges .r1 { fill: #3A4C9A; opacity: .55; }
.hero-ridges .r2 { fill: #2A387E; }
.hero-ridges .r3 { fill: var(--paper); }

.scroll-cue {
  position: absolute; left: 50%; bottom: clamp(5.5rem, 8vw, 7.5rem); z-index: 2; transform: translateX(-50%);
  width: 26px; height: 42px; border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 14px;
}
.scroll-cue span {
  position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: #fff;
  animation: cue 1.8s ease-in-out infinite;
}

/* hero load sequence */
.js .hero-pre, .js .ht-line, .js .hero-lede, .js .hero-ctas, .js .hero-date {
  opacity: 0; transform: translateY(22px);
  animation: rise .8s var(--ease) forwards;
}
.js .hero-pre { animation-delay: .05s; }
.js .ht-line:nth-child(1) { animation-delay: .15s; }
.js .ht-line:nth-child(2) { animation-delay: .25s; }
.js .ht-line:nth-child(3) { animation-delay: .35s; }
.js .hero-lede { animation-delay: .5s; }
.js .hero-ctas { animation-delay: .62s; }
.js .hero-date { animation-delay: .75s; }

@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes slowZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- Quick info ---------- */
.quick-info { position: relative; z-index: 3; margin-top: clamp(-5.5rem, -6vw, -3rem); }
.qi-panel {
  display: grid; grid-template-columns: 1fr 1fr 1.35fr;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
.qi-item { display: flex; align-items: center; gap: 1.1rem; padding: 1.75rem 2rem; }
.qi-item + .qi-item { border-left: 1px solid var(--line); }
.qi-ic { width: 44px; height: 44px; flex: none; color: var(--royal); padding: 10px; border-radius: 50%; background: var(--royal-soft); }
.qi-k { font-family: var(--f-body); font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .15rem; letter-spacing: .02em; }
.qi-v { font-family: var(--f-display); font-size: 1.12rem; font-weight: 500; color: var(--navy); margin: 0; line-height: 1.3; }

/* ---------- Sections (shared) ---------- */
.section { padding: clamp(4.5rem, 9vw, 6rem) 0; }
.section--tint { background: var(--mist); }
.about.section { padding-top: clamp(4rem, 8vw, 4rem); }

.kicker {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--f-display); font-size: .95rem; font-weight: 500; color: var(--royal); margin-bottom: 1.1rem;
}
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--saffron); }

.display-h { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 500; line-height: 1.16; letter-spacing: -.02em; }
.section-h { font-size: clamp(1.75rem, 3vw, 2.6rem); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 1.2rem; }

.section-intro { max-width: 46rem; margin-bottom: 3.25rem; }
.section-intro--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.section-intro--split .section-h { margin-bottom: 0; }

/* ---------- About ---------- */
.about-body { color: var(--muted); }
.about-body .lead-p { font-size: 1.15rem; color: var(--ink); }
.about-body strong { color: var(--navy); font-weight: 700; }

.vision {
  margin: 2rem 0 0; display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 1.4rem 1.5rem; border-left: 3px solid var(--royal); background: var(--mist); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.vision-mark { color: var(--royal); font-size: 1.5rem; line-height: 1; padding-top: .1rem; }
.vision figcaption { font-size: .98rem; color: var(--muted); }
.vision-name { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; color: var(--navy); margin-bottom: .2rem; }

/* ---------- Opportunity ---------- */
.opp-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.opp-copy > p { color: var(--muted); }

.plan {
  position: relative; background: var(--navy); color: #fff; border-radius: var(--r-md);
  padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow-2); overflow: hidden;
}
.plan::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 24px 24px; pointer-events: none;
}
.plan-head { position: relative; font-family: var(--f-display); font-size: 1.3rem; font-weight: 500; margin-bottom: 1.25rem; }
.plan-head span { font-weight: 300; color: rgba(255,255,255,.7); }
.plan-zones {
  position: relative; display: grid; gap: 10px;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: 130px 110px 90px;
  grid-template-areas: "a b b" "a c d" "e e d";
}
.z {
  position: relative; display: flex; align-items: flex-end; padding: .9rem 1rem; border-radius: 4px;
  font-family: var(--f-display); font-size: .9rem; font-weight: 400; line-height: 1.25;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.z:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }
.z1 { grid-area: a; background: var(--royal); border-color: transparent; }
.z2 { grid-area: b; }
.z3 { grid-area: c; }
.z4 { grid-area: d; }
.z5 { grid-area: e; }
.z1:hover { background: #2E60B6; }
.plan-note { position: relative; margin: 1rem 0 0; font-size: .8rem; color: rgba(255,255,255,.6); }

.sector-list { list-style: none; padding: 0; margin: 1.5rem 0 0; border-top: 1px solid var(--line); }
.sector-list li {
  position: relative; padding: .8rem 0 .8rem 1.6rem; border-bottom: 1px solid var(--line);
  font-family: var(--f-display); font-size: 1rem; color: var(--navy);
}
.sector-list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 2px; background: var(--royal); }

/* ---------- Why participate ---------- */
.why-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.why-cell {
  position: relative; padding: 2.4rem 2.2rem 2.6rem;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: #fff; transition: background-color .35s var(--ease);
}
.why-cell::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--royal);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.why-cell:hover { background: var(--mist); }
.why-cell:hover::before { transform: scaleX(1); }
.why-ic { width: 40px; height: 40px; color: var(--royal); margin-bottom: 1.4rem; transition: transform .35s var(--ease); }
.why-cell:hover .why-ic { transform: translateY(-3px); }
.why-cell h3 { font-size: 1.22rem; font-weight: 500; margin-bottom: .6rem; }
.why-cell p { color: var(--muted); font-size: .98rem; margin: 0; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(6.5rem, 12vw, 10rem);
  background: linear-gradient(180deg, var(--navy-deep), var(--navy));
}
.cta-ridge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(70px, 10vw, 150px); }
.cta-ridge path { fill: var(--royal); opacity: .35; }
.cta-inner { position: relative; max-width: 52rem; }
.cta-h { color: #fff; font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; margin-bottom: 1.2rem; }
.cta-p { color: rgba(255,255,255,.8); font-size: 1.15rem; max-width: 36rem; margin: 0 auto; }

/* ---------- Gallery ---------- */
.gal-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: 250px 250px;
  grid-template-areas: "g1 g2 g3" "g1 g4 g5";
}
.g1 { grid-area: g1; } .g2 { grid-area: g2; } .g3 { grid-area: g3; } .g4 { grid-area: g4; } .g5 { grid-area: g5; }
.gal-item { position: relative; display: block; overflow: hidden; border-radius: var(--r-sm); background: var(--mist); }
.gal-item img, .gal-item .ph { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gal-item:hover img, .gal-item:hover .ph { transform: scale(1.06); }
.gal-over {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 1.25rem;
  background: linear-gradient(180deg, transparent 40%, rgba(23,29,69,.78));
  color: #fff; font-family: var(--f-display); font-size: .95rem; font-weight: 500;
  opacity: 0; transition: opacity .4s var(--ease);
}
.gal-item:hover .gal-over, .gal-item:focus-visible .gal-over { opacity: 1; }

/* designed placeholder (until real photos are added) */
.ph {
  position: relative; display: flex; align-items: flex-start; justify-content: flex-start;
  background: linear-gradient(160deg, #E9EDF7, #D7DEEE);
}
.ph-ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 45%; }
.ph-ridge path { fill: rgba(35, 43, 94, .14); }
.ph-label { position: relative; margin: 1rem; font-family: var(--f-display); font-size: .8rem; color: var(--muted); background: rgba(255,255,255,.7); padding: .25rem .6rem; border-radius: 4px; }

/* ---------- Venue ---------- */
.venue-facts { margin: 1.75rem 0 2rem; border-top: 1px solid var(--line); }
.venue-facts div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.venue-facts dt { font-weight: 600; font-size: .9rem; color: var(--muted); }
.venue-facts dd { margin: 0; font-family: var(--f-display); color: var(--navy); }
.map-frame {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-1); background: #E6EAF3;
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-ph { position: absolute; inset: 0; }
.map-ph svg { width: 100%; height: 100%; display: block; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.c-card {
  padding: 1.5rem 1.6rem; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.c-card:hover { border-color: #C3CCE2; box-shadow: var(--shadow-1); transform: translateY(-2px); }
.c-card--wide { grid-column: 1 / -1; }
.c-name { font-size: 1.08rem; font-weight: 500; margin-bottom: .75rem; }
.c-card p { margin: 0 0 .4rem; }
.c-card a { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); overflow-wrap: anywhere; }
.c-card a:hover { color: var(--royal); }
.c-card .ic { color: var(--royal); }
.phone-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.phone-list a { padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; font-size: .95rem; transition: border-color .25s, background-color .25s; }
.phone-list a:hover { border-color: var(--royal); background: var(--royal-soft); }
.contact .section-h + p { color: var(--muted); margin-bottom: 1.75rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--mist); border-top: 1px solid var(--line); font-size: .96rem; }
.footer-top { padding: clamp(3.5rem, 7vw, 5.5rem) 0 3rem; }
.footer-logo { width: 200px; margin-bottom: 1.25rem; }
.footer-about { color: var(--muted); max-width: 22rem; }
.footer-org { width: 120px; margin-top: 1.5rem; }
.footer-h { font-family: var(--f-display); font-size: 1rem; font-weight: 600; color: var(--navy); margin-bottom: 1.1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .55rem; }
.footer-links a { color: var(--muted); transition: color .2s, padding .25s var(--ease); }
.footer-links a:hover { color: var(--navy); padding-left: 4px; }
.footer-contact { font-style: normal; }
.footer-contact p { display: flex; gap: .7rem; color: var(--muted); margin-bottom: .9rem; }
.footer-contact .ic { color: var(--royal); margin-top: .3rem; }
.footer-contact a { color: var(--muted); overflow-wrap: anywhere; }
.footer-contact a:hover { color: var(--navy); }
.footer-bar { background: var(--navy); color: rgba(255,255,255,.78); font-size: .88rem; }
.footer-bar-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.2rem; padding-bottom: 1.2rem; }
.footer-bar p { margin: 0; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 1.25rem; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 900;
  width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--navy); color: #fff;
  display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s, transform .3s var(--ease), visibility .3s, background-color .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--royal); }

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.js .reveal--left { transform: translateX(-30px); }
.js .reveal--right { transform: translateX(30px); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .main-nav a { padding: .5rem .55rem; font-size: .88rem; }
  .main-nav a::after { left: .55rem; right: .55rem; }
  .brand img { width: 150px; }
  .brand-org img { height: 50px; }
  .brand-wrap { gap: .75rem; }
  .header-cta { padding: .6rem .9rem; font-size: .84rem; }
  .header-inner { gap: 1.25rem; }
}

@media (max-width: 991.98px) {
  :root { --header-h: 68px; }
  .row.g-5 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 2.5rem; }
  .main-nav, .header-cta { display: none; }
  .menu-toggle { display: block; }
  .brand img, .site-header.is-scrolled .brand img { width: 128px; }
  .brand-org img, .site-header.is-scrolled .brand-org img { height: 44px; }
  .brand-div, .site-header.is-scrolled .brand-div { height: 30px; }
  .site-header.is-scrolled .header-inner { height: var(--header-h); }

  .hero { min-height: 0; }
  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-date { border-left: 0; border-top: 1px solid rgba(255,255,255,.22); padding: 1.75rem 0 0; display: grid; grid-template-columns: auto 1fr; column-gap: 1.75rem; align-items: center; }
  .hd-edition { grid-column: 1 / -1; }
  .hd-days { grid-row: span 2; margin: 0; }
  .hd-month { margin: 0; align-self: end; }
  .hd-venue { align-self: start; }
  .scroll-cue { display: none; }

  .qi-panel { grid-template-columns: 1fr; }
  .qi-item + .qi-item { border-left: 0; border-top: 1px solid var(--line); }
  .qi-item { padding: 1.25rem 1.5rem; }

  .opp-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .gal-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 180px 180px; grid-template-areas: "g1 g1" "g2 g3" "g4 g5"; }
}

@media (max-width: 575.98px) {
  body { font-size: 1rem; }
  .container-xl { padding-left: 1.25rem; padding-right: 1.25rem; }

  .hero-title { font-size: clamp(2.3rem, 11vw, 3rem); }
  .hero-lede { font-size: 1rem; }
  .hero-ctas .btn-u { flex: 1 1 100%; }
  .hero-link { margin: 0 auto; }
  .hero-date { grid-template-columns: 1fr; }
  .hd-days { grid-row: auto; font-size: 3.4rem; }

  .why-grid { grid-template-columns: 1fr; }
  .why-cell { padding: 1.9rem 1.5rem; }

  .plan-zones { grid-template-columns: 1fr 1fr; grid-template-rows: 110px 90px 90px; grid-template-areas: "a b" "c d" "e e"; }
  .z { font-size: .82rem; padding: .7rem; }

  .btn-row .btn-u { flex: 1 1 100%; }
  .section-intro--split .btn-u { width: 100%; }

  .gal-grid { grid-template-rows: 220px 140px 140px; gap: 10px; }

  .venue-facts div { grid-template-columns: 1fr; gap: .15rem; }
  .contact-grid { grid-template-columns: 1fr; }

  .footer-bar-inner { flex-direction: column; gap: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal, .js .hero-pre, .js .ht-line, .js .hero-lede, .js .hero-ctas, .js .hero-date { opacity: 1; transform: none; animation: none; }
  .hero-contours { animation: none; }
}

/* =========================================================
   Two-tone headings — navy + blue gradient accent
   ========================================================= */
.hl {
  background-image: linear-gradient(100deg, #2754A2 0%, #3B78D8 55%, #5B97EC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #2754A2; /* fallback */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* on dark navy backgrounds */
.hero .hl, .hx .hl, .cta-band .hl, .page-hero .hl {
  background-image: linear-gradient(100deg, #7FA8F0 0%, #A9C6FA 50%, #DCE8FF 100%);
  color: #A9C6FA;
}
@media (forced-colors: active) {
  .hl { -webkit-text-fill-color: currentColor; background: none; }
}

.mobile-menu nav a.is-active { color: var(--royal); font-weight: 500; }
.muted-p { color: var(--muted); margin: 0; }
.cta-band--compact { padding: clamp(3.5rem, 7vw, 5rem) 0; }
.cta-band--compact .cta-h { margin-bottom: .5rem; }

/* =========================================================
   Inner page hero
   ========================================================= */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(5.5rem, 9vw, 7.5rem);
  background:
    radial-gradient(800px 360px at 85% 120%, rgba(39, 84, 162, .55), transparent 60%),
    linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 60%, #26357A 100%);
}
.page-hero-contours { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; opacity: .07; z-index: -1; }
.page-hero-inner { position: relative; z-index: 1; }
.page-hero-ridge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(50px, 7vw, 100px); }
.page-hero-ridge .r1 { fill: #3A4C9A; opacity: .5; }
.page-hero-ridge .r2 { fill: var(--paper); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1.25rem; padding: 0; font-size: .9rem; color: rgba(255,255,255,.7); }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: rgba(255,255,255,.4); }
.crumbs a { color: rgba(255,255,255,.85); }
.crumbs a:hover { color: #fff; }
.page-title { color: #fff; font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.06; margin-bottom: 1rem; max-width: 18ch; }
.page-lead { max-width: 40rem; font-size: 1.1rem; color: rgba(255,255,255,.82); margin-bottom: 1.4rem; }
.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-family: var(--f-display); font-size: .95rem; color: rgba(255,255,255,.85); margin: 0; }
.pm-sep { width: 1px; height: 1em; background: rgba(255,255,255,.35); margin: 0 .6rem; }
.js .page-title, .js .page-lead, .js .page-meta, .js .crumbs { opacity: 0; transform: translateY(18px); animation: rise .7s var(--ease) forwards; }
.js .crumbs { animation-delay: .05s; }
.js .page-title { animation-delay: .12s; }
.js .page-lead { animation-delay: .24s; }
.js .page-meta { animation-delay: .34s; }

/* =========================================================
   Forms
   ========================================================= */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.form-intro { color: var(--muted); margin-bottom: 1.75rem; }
.req { color: #C2410C; }

.u-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.25rem; }
.f-full { grid-column: 1 / -1; }
.f-group { display: flex; flex-direction: column; min-width: 0; border: 0; padding: 0; margin: 0; }
.f-label { font-family: var(--f-display); font-size: .92rem; font-weight: 500; color: var(--navy); margin-bottom: .45rem; padding: 0; }
.f-input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: .8rem .95rem; min-height: 50px;
  transition: border-color .2s, box-shadow .2s;
}
textarea.f-input { resize: vertical; min-height: 120px; }
select.f-input {
  appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232B5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 16px;
}
.f-input:hover { border-color: #C3CCE2; }
.f-input:focus { outline: none; border-color: var(--royal); box-shadow: 0 0 0 4px rgba(39, 84, 162, .14); }
.f-input[aria-invalid="true"] { border-color: #C2410C; }
.f-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(194, 65, 12, .14); }
.f-err { color: #B4380B; font-size: .88rem; margin: .4rem 0 0; }

.seg { display: flex; flex-wrap: wrap; gap: .6rem; }
.seg-opt { position: relative; cursor: pointer; }
.seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-opt span {
  display: inline-flex; align-items: center; gap: .55rem; padding: .75rem 1.2rem; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--f-display); font-size: .95rem; color: var(--ink); background: #fff;
  transition: border-color .2s, background-color .2s, color .2s;
}
.seg-opt span::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #AEB7D0; transition: border-width .2s, border-color .2s; }
.seg-opt input:checked + span { border-color: var(--royal); background: var(--royal-soft); color: var(--navy); }
.seg-opt input:checked + span::before { border: 5px solid var(--royal); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--royal); outline-offset: 2px; }

.f-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .5rem; }
.f-note { color: var(--muted); font-size: .88rem; margin: 0; }
.u-form button[disabled] { opacity: .7; cursor: progress; transform: none; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.f-alert { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.2rem; border-radius: var(--r-sm); margin-bottom: 1.5rem; font-size: .98rem; }
.f-alert .ic { width: 1.4em; height: 1.4em; margin-top: .05rem; }
.f-alert--ok { background: #EAF6EE; border: 1px solid #B9DFC6; color: #17502C; }
.f-alert--err { background: #FDF0E9; border: 1px solid #F3C8B1; color: #8A2C07; }
.f-alert:focus { outline: none; }

/* aside */
.form-aside { display: grid; gap: 1.25rem; position: sticky; top: calc(84px + 1.5rem); }
.aside-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.6rem; }
.section--tint .aside-card { box-shadow: var(--shadow-1); }
.aside-h { font-size: 1.15rem; font-weight: 600; margin-bottom: 1rem; }
.aside-p { color: var(--muted); font-size: .95rem; }
.aside-person { padding: .9rem 0; border-top: 1px solid var(--line); display: grid; gap: .3rem; }
.aside-person:first-of-type { border-top: 0; padding-top: 0; }
.ap-name { font-family: var(--f-display); font-weight: 500; color: var(--navy); margin: 0 0 .15rem; }
.aside-person > a { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); font-size: .95rem; overflow-wrap: anywhere; }
.aside-person > a .ic { color: var(--royal); }
.aside-person > a:hover { color: var(--royal); }
.aside-person .phone-list a { font-size: .88rem; padding: .35rem .7rem; color: var(--ink); }
.aside-org { width: 110px; margin-bottom: 1rem; }

/* downloads */
.dl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.dl-item { display: flex; align-items: center; gap: .85rem; padding: .85rem; border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color .25s; }
.dl-item:hover { border-color: #C3CCE2; }
.dl-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--royal-soft); color: var(--royal); font-size: 1.2rem; }
.dl-text { flex: 1; min-width: 0; display: grid; }
.dl-title { font-family: var(--f-display); font-weight: 500; color: var(--navy); font-size: .95rem; }
.dl-desc { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.dl-btn { display: inline-flex; align-items: center; gap: .35rem; flex: none; padding: .45rem .75rem; border-radius: var(--r-sm); background: var(--navy); color: #fff; font-family: var(--f-display); font-size: .82rem; font-weight: 500; transition: background-color .2s; }
.dl-btn:hover { background: var(--royal); color: #fff; }
.dl-soon { flex: none; font-size: .78rem; color: var(--muted); background: var(--mist); padding: .35rem .6rem; border-radius: 999px; }
.dl-item.is-soon .dl-ic { background: var(--mist); color: #8C93AF; }

/* =========================================================
   Layout plan
   ========================================================= */
.plan--lg .plan-zones { grid-template-rows: 220px 180px 140px; }
.plan--lg .z { font-size: 1.05rem; padding: 1.25rem; }
.layout-figure { margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; box-shadow: var(--shadow-1); }
.layout-zoom { position: relative; display: block; }
.layout-zoom img { width: 100%; }
.layout-zoom-hint { position: absolute; right: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .4rem; background: rgba(23,29,69,.85); color: #fff; padding: .45rem .8rem; border-radius: var(--r-sm); font-family: var(--f-display); font-size: .85rem; }
.zone-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.zone-cell { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.5rem 1.3rem 1.7rem; transition: border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.zone-cell:hover { border-color: #C3CCE2; transform: translateY(-3px); box-shadow: var(--shadow-1); }
.zone-dot { display: block; width: 12px; height: 12px; border-radius: 3px; background: var(--royal); margin-bottom: 1.1rem; }
.zone-cell:nth-child(2) .zone-dot { background: #3B78D8; }
.zone-cell:nth-child(3) .zone-dot { background: #5B97EC; }
.zone-cell:nth-child(4) .zone-dot { background: var(--navy); }
.zone-cell:nth-child(5) .zone-dot { background: #8FB2EA; }
.zone-cell h3 { font-size: 1.05rem; font-weight: 500; line-height: 1.35; }

/* =========================================================
   Gallery page + lightbox
   ========================================================= */
.gallery-wall { columns: 3 300px; column-gap: 14px; }
.gw-item { position: relative; display: block; margin-bottom: 14px; break-inside: avoid; border-radius: var(--r-sm); overflow: hidden; background: var(--mist); }
.gw-item img { width: 100%; transition: transform .8s var(--ease); }
.gw-item:hover img { transform: scale(1.05); }
.gw-item:hover .gal-over, .gw-item:focus-visible .gal-over { opacity: 1; }
.gw-item .gal-over { gap: .4rem; }
.gallery-wall--empty .gw-item { height: 240px; }
.gallery-wall--empty .gw-item:nth-child(3n+1) { height: 320px; }
.gallery-wall--empty .ph { width: 100%; height: 100%; }
.empty-note { text-align: center; color: var(--muted); margin-top: 1.5rem; }
.empty-note code { color: var(--navy); background: var(--mist); padding: .1rem .4rem; border-radius: 4px; }

.lightbox {
  position: fixed; inset: 0; z-index: 1500; background: rgba(13, 17, 42, .94);
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  opacity: 0; transition: opacity .3s var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; max-height: 100%; }
.lb-img { max-width: 100%; max-height: calc(100vh - 8rem); object-fit: contain; border-radius: 4px; }
.lb-cap { color: rgba(255,255,255,.85); font-family: var(--f-display); font-size: .95rem; text-align: center; }
.lb-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; cursor: pointer; font-size: 1.2rem; transition: background-color .2s; justify-self: center; }
.lb-btn:hover { background: rgba(255,255,255,.16); }
.lb-close { position: absolute; top: calc(1rem + env(safe-area-inset-top, 0px)); right: 1rem; }

/* Contact page */
.contact-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1rem; }
.c-card--wide2 { grid-column: span 2; }
.map-frame--sm { aspect-ratio: 4 / 3; }

/* ---------- Inner pages responsive ---------- */
@media (max-width: 1199.98px) {
  .zone-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .form-layout { grid-template-columns: 1fr; }
  .form-aside { position: static; }
  .contact-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lightbox { grid-template-columns: 48px minmax(0, 1fr) 48px; padding-left: .5rem; padding-right: .5rem; }
  .plan--lg .plan-zones { grid-template-rows: 160px 130px 110px; }
}
@media (max-width: 575.98px) {
  .u-form { grid-template-columns: 1fr; }
  .seg-opt { flex: 1 1 100%; }
  .seg-opt span { width: 100%; }
  .f-actions .btn-u { width: 100%; }
  .zone-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid--3 { grid-template-columns: 1fr; }
  .c-card--wide2 { grid-column: auto; }
  .page-meta { font-size: .88rem; }
  .pm-sep { display: none; }
  .page-meta .ic + .ic, .page-meta { row-gap: .3rem; }
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lb-prev, .lb-next { position: absolute; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .lb-prev { left: 1rem; } .lb-next { right: 1rem; }
  .lb-img { max-height: calc(100vh - 10rem); }
  .plan--lg .plan-zones { grid-template-rows: 120px 100px 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .page-title, .js .page-lead, .js .page-meta, .js .crumbs { opacity: 1; transform: none; animation: none; }
}
.page-hero + .section { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.pm-item { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.gallery-wall--empty { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gallery-wall--empty .gw-item, .gallery-wall--empty .gw-item:nth-child(3n+1) { height: 240px; margin: 0; }
@media (max-width: 575.98px) {
  .page-meta { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .dl-item { flex-wrap: wrap; }
  .dl-text { flex: 1 1 calc(100% - 60px); }
  .dl-btn, .dl-soon { margin-left: calc(40px + .85rem); }
}
.footer-contact strong { color: var(--navy); font-weight: 600; }

/* =========================================================
   Heading gradients v2 + animations
   ========================================================= */
/* Base heading: deep navy → indigo gradient across the whole line */
.section-h, .display-h, .zone-cell h3, .why-cell h3 {
  background-image: linear-gradient(95deg, #1A2152 0%, #232B5E 45%, #34479A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--navy);
}
/* gradient sits on the animated element itself (a parent's text-clip can't paint transformed children) */
.cta-h, .page-title, .hero-title .ht-line, .hx-title .ht-line {
  background-image: linear-gradient(95deg, #FFFFFF 0%, #FFFFFF 55%, #DCE6FA 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #fff;
}

/* Accent words: flowing blue gradient */
.hl {
  background-image: linear-gradient(100deg, #2754A2 0%, #3B78D8 22%, #6AA4F4 45%, #3B78D8 70%, #2754A2 100%);
  background-size: 220% 100%;
  animation: hlFlow 7s ease-in-out infinite alternate;
}
.hero .hl, .hx .hl, .cta-band .hl, .page-hero .hl {
  background-image: linear-gradient(100deg, #7FA8F0 0%, #B7D0FB 25%, #FFFFFF 45%, #B7D0FB 70%, #7FA8F0 100%);
  background-size: 220% 100%;
}
@keyframes hlFlow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Gradient underline that draws in under section headings */
.section-h, .display-h { position: relative; }
.h-line::after {
  content: ""; display: block; width: 64px; height: 3px; margin-top: .9rem; border-radius: 2px;
  background: linear-gradient(90deg, var(--royal), #6AA4F4);
  transform-origin: left; transform: scaleX(0); transition: transform .8s var(--ease) .35s;
}
.h-line.is-in::after, .no-js .h-line::after { transform: scaleX(1); }
.section-intro--split .section-h.h-line::after { margin-top: .7rem; }
.cta-h.h-line::after { margin: 1rem auto 0; background: linear-gradient(90deg, #7FA8F0, #fff); }

/* Heading reveal: rise + un-blur. (No clip-path — a zero-size clip stops IntersectionObserver from ever firing.) */
.js .reveal.h-reveal {
  opacity: 0; transform: translateY(30px); filter: blur(6px);
  transition: transform .9s var(--ease), opacity .7s var(--ease), filter .8s var(--ease);
}
.js .reveal.h-reveal.is-in { opacity: 1; transform: none; filter: none; }

/* Kicker rule grows in */
.js .kicker.reveal::before { width: 0; transition: width .6s var(--ease) .25s; }
.js .kicker.reveal.is-in::before { width: 26px; }

/* Hero title: gentle per-line rise already set; accent line gets a soft glow pass */
.hero-title .hl { filter: drop-shadow(0 6px 24px rgba(106, 164, 244, .25)); }

@media (prefers-reduced-motion: reduce) {
  .hl { animation: none; background-position: 30% 50%; }
  .js .reveal.h-reveal { opacity: 1; transform: none; filter: none; }
  .h-line::after { transform: scaleX(1); transition: none; }
  .js .kicker.reveal::before { width: 26px; }
}
@media (forced-colors: active) {
  .section-h, .display-h, .cta-h, .page-title, .hero-title .ht-line, .zone-cell h3, .why-cell h3 { -webkit-text-fill-color: currentColor; background: none; }
}

/* Header: two logos need more room — switch to the menu button earlier */
@media (max-width: 1099.98px) {
  :root { --header-h: 72px; }
  .main-nav, .header-cta { display: none; }
  .menu-toggle { display: block; }
  .site-header.is-scrolled .header-inner { height: var(--header-h); }
}
@media (max-width: 991.98px) {
  :root { --header-h: 68px; }
}
@media (min-width: 1100px) and (max-width: 1399.98px) {
  .header-inner { gap: 1.25rem; }
  .main-nav a { padding: .5rem .55rem; font-size: .88rem; }
  .main-nav a::after { left: .55rem; right: .55rem; }
  .brand img { width: 150px; }
  .brand-org img { height: 50px; }
  .brand-wrap { gap: .75rem; }
  .header-cta { padding: .6rem .9rem; font-size: .84rem; }
}

/* =========================================================
   HERO v2 — photo slider + countdown card
   ========================================================= */
.hx {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  min-height: min(100vh, 720px); display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 3rem) 0 clamp(9rem, 13vw, 11rem);
  background: var(--navy-deep);
}
.hx-slides { position: absolute; inset: 0; z-index: -2; }
.hx-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s var(--ease); background: var(--navy-deep); }
.hx-slide.is-active { opacity: 1; }
.hx-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 8s linear; }
.hx-slide.is-active img { transform: scale(1); }
.img-fail { opacity: 0 !important; }
.hx-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(16, 21, 52, .92) 0%, rgba(23, 29, 69, .74) 38%, rgba(23, 29, 69, .25) 70%, rgba(23, 29, 69, .35) 100%),
    linear-gradient(0deg, rgba(16, 21, 52, .85) 0%, rgba(16, 21, 52, 0) 45%),
    linear-gradient(180deg, rgba(16, 21, 52, .55) 0%, rgba(16, 21, 52, 0) 22%);
}
.hx-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 3rem; align-items: end; }
.hx-pre {
  display: inline-flex; align-items: center; gap: .8rem; margin-bottom: 1.4rem;
  font-family: var(--f-display); font-weight: 300; font-size: 1rem; color: rgba(255,255,255,.85);
}
.hx-pre::before { content: ""; width: 34px; height: 2px; background: var(--saffron); }
.hx-title { font-size: clamp(2.6rem, 6vw, 5.4rem); font-weight: 600; letter-spacing: -.028em; line-height: 1.03; margin-bottom: 1.4rem; color: #fff; }
.hx-title .ht-line { display: block; }
.hx-lede { max-width: 34rem; font-size: 1.15rem; color: rgba(255,255,255,.88); margin-bottom: 2.1rem; }

.hx-card {
  position: relative; padding: 1.6rem 1.6rem 1.4rem; border-radius: 14px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
.hx-card::before { content: ""; position: absolute; left: 1.6rem; right: 1.6rem; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--saffron), #F2B266); }
.hx-card-k { font-family: var(--f-display); font-size: .95rem; color: rgba(255,255,255,.8); margin-bottom: .9rem; }
.cd { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.2rem; }
.cd-cell { text-align: center; padding: .8rem .3rem .65rem; border-radius: 10px; background: rgba(13, 18, 46, .45); border: 1px solid rgba(255,255,255,.12); }
.cd-n { display: block; font-family: var(--f-display); font-size: 2.1rem; font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cd-l { display: block; margin-top: .4rem; font-size: .75rem; color: rgba(255,255,255,.7); letter-spacing: .03em; }
.cd-live { font-family: var(--f-display); font-size: 1.05rem; margin-bottom: 1rem; }
.hx-facts { list-style: none; margin: 0 0 1rem; padding: 1rem 0 0; border-top: 1px solid rgba(255,255,255,.18); display: grid; gap: .55rem; }
.hx-facts li { display: flex; align-items: center; gap: .6rem; font-family: var(--f-display); font-size: .98rem; }
.hx-facts .ic { color: #F2B266; }
.hx-card-link { display: inline-flex; align-items: center; gap: .45rem; color: #fff; font-family: var(--f-display); font-size: .92rem; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px; }
.hx-card-link:hover { color: #fff; border-color: #fff; }
.hx-card-link .ic { transition: transform .25s var(--ease); }
.hx-card-link:hover .ic { transform: translateX(3px); }

.hx-controls { position: absolute; left: 0; right: 0; bottom: clamp(4.6rem, 7vw, 5.6rem); display: flex; gap: 1.5rem; z-index: 2; }
.hx-dot { flex: 1 1 0; max-width: 230px; display: grid; gap: .55rem; background: none; border: 0; padding: .4rem 0; color: rgba(255,255,255,.65); text-align: left; cursor: pointer; }
.hx-dot:hover, .hx-dot.is-active { color: #fff; }
.hx-bar { display: block; height: 2px; background: rgba(255,255,255,.28); border-radius: 2px; overflow: hidden; }
.hx-bar span { display: block; height: 100%; width: 0; background: #fff; }
.hx-dot.is-active .hx-bar span { animation: hxProgress var(--hx-dur, 6.5s) linear forwards; }
.hx.is-paused .hx-dot.is-active .hx-bar span { animation-play-state: paused; }
.hx-cap { font-family: var(--f-display); font-size: .85rem; line-height: 1.3; }
@keyframes hxProgress { to { width: 100%; } }

/* entrance */
.js .hx-pre, .js .hx-title .ht-line, .js .hx-lede, .js .hx .hero-ctas, .js .hx-card, .js .hx-controls {
  opacity: 0; transform: translateY(24px); animation: rise .85s var(--ease) forwards;
}
.js .hx-pre { animation-delay: .1s; }
.js .hx-title .ht-line:nth-child(1) { animation-delay: .2s; }
.js .hx-title .ht-line:nth-child(2) { animation-delay: .32s; }
.js .hx-lede { animation-delay: .46s; }
.js .hx .hero-ctas { animation-delay: .58s; }
.js .hx-card { animation-delay: .7s; }
.js .hx-controls { animation-delay: .9s; }

/* quick-info sits on the hero's lower edge */
.hx + .quick-info { margin-top: -3.4rem; }

/* =========================================================
   Sector ticker
   ========================================================= */
.ticker { overflow: hidden; padding: 1.6rem 0 .4rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; animation: tick 38s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-list { display: flex; list-style: none; margin: 0; padding: 0; }
.ticker-list li { display: inline-flex; align-items: center; gap: 1rem; padding: 0 1.6rem; white-space: nowrap; font-family: var(--f-display); font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 500; color: var(--navy); }
.tk-dot { width: 10px; height: 10px; border-radius: 3px; transform: rotate(45deg); background: linear-gradient(135deg, var(--royal), #6AA4F4); }
.ticker-list li:nth-child(even) { color: var(--royal); }
@keyframes tick { to { transform: translateX(-50%); } }

/* =========================================================
   About with images
   ========================================================= */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.ab-media { position: relative; padding: 0 12% 14% 0; }
.ab-main { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 5; background: var(--royal-soft); box-shadow: var(--shadow-2); }
.ab-main img, .ab-small img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ab-media:hover .ab-main img { transform: scale(1.04); }
.ab-tag { position: absolute; left: 1rem; top: 1rem; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--navy); font-family: var(--f-display); font-size: .82rem; font-weight: 500; }
.ab-tag .ic { color: var(--royal); }
.ab-small { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 4 / 3; margin: 0; border-radius: var(--r-md); overflow: hidden; border: 6px solid #fff; background: var(--royal-soft); box-shadow: var(--shadow-2); }
.ab-badge {
  position: absolute; left: -1.25rem; bottom: 22%; display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1.1rem; border-radius: var(--r-md); background: var(--navy); color: #fff; box-shadow: var(--shadow-2);
  animation: floaty 5s ease-in-out infinite;
}
.ab-badge-n { font-family: var(--f-display); font-size: 2.4rem; font-weight: 600; line-height: 1; background: linear-gradient(135deg, #fff, #9FC0F8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ab-badge-t { font-size: .8rem; line-height: 1.35; color: rgba(255,255,255,.85); }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.ab-copy .display-h { font-size: clamp(1.75rem, 3vw, 2.6rem); margin-bottom: 1.4rem; }

/* CTA band with photo */
.cta-band--photo { background: var(--navy-deep); }
.cta-bg { position: absolute; inset: 0; z-index: 0; }
.cta-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: saturate(.8); }
.cta-band--photo::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(16,21,52,.75), rgba(23,43,94,.85)); }
.cta-band--photo .cta-ridge { z-index: 1; }
.cta-band--photo .cta-inner { z-index: 2; }

.gal-note { margin: 1rem 0 0; font-size: .85rem; color: var(--muted); }
.gal-item img.ph-img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
  .hx-inner { grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; }
}
@media (max-width: 991.98px) {
  .hx { min-height: 0; padding-bottom: 8.5rem; }
  .hx-inner { grid-template-columns: 1fr; }
  .hx-card { max-width: 440px; }
  .hx-shade { background: linear-gradient(180deg, rgba(16,21,52,.7) 0%, rgba(16,21,52,.78) 50%, rgba(16,21,52,.92) 100%); }
  .about-grid { grid-template-columns: 1fr; }
  .ab-media { max-width: 560px; }
  .ab-badge { left: .75rem; }
}
@media (max-width: 575.98px) {
  .hx { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 2.2rem); }
  .hx-title { font-size: clamp(2.2rem, 10.5vw, 2.9rem); }
  .hx-lede { font-size: 1rem; }
  .hx .hero-ctas .btn-u { flex: 1 1 100%; }
  .hx .hero-link { margin: 0 auto; }
  .hx-card { padding: 1.3rem; }
  .cd-n { font-size: 1.8rem; }
  .hx-controls { gap: .6rem; bottom: 4.4rem; }
  .hx-cap { display: none; }
  .ab-media { padding: 0 8% 18% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-slide img, .hx-slide.is-active img { transform: none; transition: none; }
  .ticker-track { animation: none; }
  .ticker { overflow-x: auto; }
  .ab-badge { animation: none; }
  .js .hx-pre, .js .hx-title .ht-line, .js .hx-lede, .js .hx .hero-ctas, .js .hx-card, .js .hx-controls { opacity: 1; transform: none; animation: none; }
}

/* =========================================================
   Photos in every section
   ========================================================= */
/* Inner page banners */
.page-hero--photo { background: var(--navy-deep); }
.page-hero-bg { position: absolute; inset: 0; z-index: -2; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: bannerZoom 14s ease-out forwards; }
.page-hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(16,21,52,.93) 0%, rgba(23,29,69,.8) 45%, rgba(23,29,69,.45) 100%), linear-gradient(0deg, rgba(16,21,52,.6), rgba(16,21,52,0) 50%);
}
.page-hero--photo .page-hero-contours { opacity: .05; }
@keyframes bannerZoom { to { transform: scale(1); } }

/* Sector photo cards */
.sector-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: clamp(2.5rem, 5vw, 4rem); }
.sector-card { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; background: var(--navy); color: #fff; isolation: isolate; }
.sector-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--ease); }
.sector-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16,21,52,0) 35%, rgba(16,21,52,.92) 100%); transition: background-color .4s; }
.sector-card:hover img { transform: scale(1.08); }
.sector-card:hover { color: #fff; }
.sc-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem 1.1rem 1.2rem; display: grid; gap: .35rem; }
.sc-n { font-family: var(--f-display); font-size: .8rem; font-weight: 500; color: #F2B266; }
.sc-t { font-family: var(--f-display); font-size: 1.02rem; font-weight: 500; line-height: 1.25; }
.sc-body::after { content: ""; width: 0; height: 2px; background: linear-gradient(90deg, #F2B266, #fff); transition: width .45s var(--ease); }
.sector-card:hover .sc-body::after { width: 40px; }

/* Why participate with photo */
.why-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); gap: 14px; align-items: stretch; }
.why-layout .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.why-photo { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; min-height: 420px; background: var(--navy); }
.why-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.why-photo:hover img { transform: scale(1.05); }
.why-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 4rem 1.5rem 1.5rem; display: grid; gap: .3rem; color: #fff; background: linear-gradient(180deg, transparent, rgba(16,21,52,.92)); }
.wp-k { font-size: .82rem; color: #F2B266; font-family: var(--f-display); }
.wp-t { font-family: var(--f-display); font-size: 1.3rem; font-weight: 500; line-height: 1.25; }

/* Venue photo + map */
.venue-visual { display: grid; grid-template-columns: .8fr 1.2fr; gap: 14px; align-items: stretch; }
.venue-photo { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--navy); min-height: 100%; }
.venue-photo img { width: 100%; height: 100%; object-fit: cover; }
.venue-visual .map-frame { aspect-ratio: 3 / 4; }

/* Contact photo card */
.contact-photo { position: relative; margin: 2rem 0 0; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; background: var(--navy); }
.contact-photo img { width: 100%; height: 100%; object-fit: cover; }
.contact-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 1.2rem 1.1rem; color: rgba(255,255,255,.88); font-size: .85rem; line-height: 1.45; background: linear-gradient(180deg, transparent, rgba(16,21,52,.92)); }
.contact-photo strong { display: block; color: #fff; font-family: var(--f-display); font-size: 1rem; margin-bottom: .2rem; }

/* Form page side photo */
.aside-photo { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 10; background: var(--navy); }
.aside-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.aside-photo:hover img { transform: scale(1.05); }
.aside-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.2rem 1rem; color: #fff; font-family: var(--f-display); font-size: .95rem; line-height: 1.35; background: linear-gradient(180deg, transparent, rgba(16,21,52,.9)); }

/* Layout page zones with photos */
.zone-cell--photo { padding: 0; overflow: hidden; }
.zone-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy); }
.zone-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.zone-cell--photo:hover .zone-img img { transform: scale(1.06); }
.zone-body { padding: 1.2rem 1.2rem 1.4rem; }
.zone-body .zone-dot { margin-bottom: .8rem; }

/* Gallery page stock tiles */
.gw-item .ph-img { width: 100%; display: block; }

@media (max-width: 1199.98px) {
  .sector-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .why-layout { grid-template-columns: 1fr; }
  .why-photo { min-height: 300px; }
  .venue-visual { grid-template-columns: 1fr; }
  .venue-photo { aspect-ratio: 16 / 9; }
  .venue-visual .map-frame { aspect-ratio: 4 / 3; }
}
@media (max-width: 575.98px) {
  .sector-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sector-card:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .sc-t { font-size: .92rem; }
  .why-layout .why-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero-bg img { animation: none; transform: none; }
}

/* =========================================================
   Booking page v2 — conditional fields, rates, partnership, payment
   ========================================================= */
[hidden] { display: none !important; }
.f-hint { font-size: .82rem; color: var(--muted); margin: .35rem 0 0; }
.f-redirect { margin: .6rem 0 0; font-size: .92rem; }
.f-redirect .f-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.f-open { color: #17502C; font-weight: 700; text-decoration: underline; }
[data-show-for] { animation: rise .45s var(--ease) both; }

.rate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rate-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; }
.rate-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.rate-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
.rate-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.rate-card:hover .rate-img img { transform: scale(1.06); }
.rate-body { padding: 1.3rem 1.4rem 1.5rem; }
.rate-body h3 { font-size: 1.1rem; font-weight: 500; margin-bottom: .5rem; }
.rate-price { margin: 0; font-family: var(--f-display); font-size: 2.2rem; font-weight: 600; color: var(--navy); line-height: 1; }
.rp-cur { font-size: 1rem; font-weight: 500; margin-right: .25rem; color: var(--royal); }
.rp-unit { font-size: .9rem; font-weight: 400; color: var(--muted); margin-left: .35rem; }

.rate-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.rate-notes > div { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.4rem 1.5rem; }
.rate-notes h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: .7rem; }
.rate-notes ul { margin: 0 0 .6rem; padding-left: 1.1rem; color: var(--ink); font-size: .95rem; }
.rate-notes li { margin-bottom: .3rem; }
.rate-notes p { font-size: .95rem; color: var(--ink); margin-bottom: .5rem; }
.small-note { font-size: .82rem !important; color: var(--muted) !important; margin: 0 !important; }

.shell-table-wrap { margin-top: 14px; overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
.shell-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 480px; }
.shell-table caption { caption-side: top; padding: 1rem 1.25rem .5rem; font-family: var(--f-display); font-weight: 600; color: var(--navy); }
.shell-table th, .shell-table td { padding: .65rem 1.25rem; text-align: left; border-top: 1px solid var(--line); }
.shell-table th { font-family: var(--f-display); font-weight: 500; color: var(--muted); font-size: .85rem; background: var(--mist); }
.shell-table td { font-variant-numeric: tabular-nums; }
.shell-table tbody tr:hover { background: var(--royal-soft); }

.tier-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.tier-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; }
.tier-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.tier-head { padding: 1.4rem 1.4rem 1.2rem; color: #fff; background: var(--navy); }
.tier-2 .tier-head { background: var(--royal); }
.tier-3 .tier-head { background: linear-gradient(135deg, #C8641F, #E2873B); }
.tier-4 .tier-head { background: #EFF1E4; color: var(--navy); }
.tier-head h3 { color: inherit; font-size: 1.2rem; font-weight: 600; margin-bottom: .45rem; }
.tier-amt { margin: 0; font-family: var(--f-display); font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.tier-space { margin: .35rem 0 0; font-size: .85rem; opacity: .85; }
.tier-perks { list-style: none; margin: 0; padding: 1.1rem 1.4rem 1.4rem; display: grid; gap: .6rem; font-size: .9rem; color: var(--ink); }
.tier-perks li { position: relative; padding-left: 1.3rem; line-height: 1.45; }
.tier-perks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 2px; background: var(--royal); transform: rotate(45deg); }

.partner-contact { display: grid; grid-template-columns: 1fr 1.2fr; margin-top: 14px; border-radius: var(--r-md); overflow: hidden; background: var(--navy); color: #fff; }
.partner-photo { margin: 0; min-height: 220px; background: var(--navy-deep); }
.partner-photo img { width: 100%; height: 100%; object-fit: cover; }
.pc-body { padding: 1.8rem 2rem; display: flex; flex-direction: column; justify-content: center; gap: .9rem; }
.pc-body h3 { color: #fff; font-size: 1.3rem; }
.pc-body .phone-list a { color: #fff; border-color: rgba(255,255,255,.3); }
.pc-body .phone-list a:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.pc-body p { margin: 0; }
.pc-body p a { color: #B7D0FB; }

.pay-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.bank-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow: hidden; }
.bank-card > div { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: .85rem 1.4rem; border-top: 1px solid var(--line); }
.bank-card > div:first-child { border-top: 0; }
.bank-card dt { font-size: .85rem; font-weight: 600; color: var(--muted); }
.bank-card dd { margin: 0; font-family: var(--f-display); color: var(--navy); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.aside-hotline { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; }
.aside-hotline .ic { color: var(--royal); }

/* Contact page with photo */
.contact-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 14px; margin-top: 1rem; }
.contact-side { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; min-height: 380px; background: var(--navy); }
.contact-side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-side figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 4rem 1.3rem 1.3rem; color: rgba(255,255,255,.88); font-size: .88rem; line-height: 1.5; background: linear-gradient(180deg, transparent, rgba(16,21,52,.94)); }
.contact-side strong { display: block; color: #fff; font-family: var(--f-display); font-size: 1.05rem; margin-bottom: .2rem; }
.cs-hot { display: block; margin-top: .5rem; color: #F2B266; font-family: var(--f-display); }
.contact-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.c-sub { color: var(--muted); font-size: .92rem; margin: -.4rem 0 .5rem !important; }

/* Layout page plan + side photo */
.plan-wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
.plan-side { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; min-height: 320px; background: var(--navy); }
.plan-side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plan-side figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .1rem; padding: 4rem 1.3rem 1.3rem; color: #fff; background: linear-gradient(180deg, transparent, rgba(16,21,52,.94)); }
.plan-side figcaption span { font-size: .8rem; color: #F2B266; font-family: var(--f-display); margin-top: .5rem; }
.plan-side figcaption strong { font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; }

@media (max-width: 1199.98px) {
  .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .rate-grid, .rate-notes { grid-template-columns: 1fr; }
  .partner-contact, .pay-grid { grid-template-columns: 1fr; }
  .contact-wrap, .plan-wrap { grid-template-columns: 1fr; }
  .contact-side { min-height: 260px; }
  .plan-side { min-height: 240px; }
}
@media (max-width: 575.98px) {
  .tier-grid { grid-template-columns: 1fr; }
  .contact-grid--2 { grid-template-columns: 1fr; }
  .bank-card > div { grid-template-columns: 1fr; gap: .15rem; }
  .pc-body { padding: 1.4rem; }
}

/* =========================================================
   HERO v3 — product-category collage (no hills)
   ========================================================= */
.hx--mosaic { background: var(--navy-deep); }
.hx-mosaic {
  position: absolute; top: 0; bottom: 0; right: 0; left: 34%; z-index: -2;
  display: grid; gap: 6px; padding: 0;
  grid-template-columns: 1fr 1.2fr 1fr; grid-template-rows: 1fr 1fr;
  grid-template-areas: "a c d" "b c e";
}
.hm-tile { position: relative; margin: 0; overflow: hidden; background: #1E2656; }
.hm-a { grid-area: a; } .hm-b { grid-area: b; } .hm-c { grid-area: c; } .hm-d { grid-area: d; } .hm-e { grid-area: e; }
.hm-tile img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); animation: hmZoom 16s ease-out forwards; }
.js .hm-tile { opacity: 0; animation: hmIn 1s var(--ease) forwards; }
.js .hm-c { animation-delay: .1s; } .js .hm-a { animation-delay: .25s; } .js .hm-d { animation-delay: .35s; }
.js .hm-b { animation-delay: .45s; } .js .hm-e { animation-delay: .55s; }
@keyframes hmIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hmZoom { to { transform: scale(1); } }
.hx--mosaic .hx-shade {
  background:
    linear-gradient(90deg, var(--navy-deep) 0%, var(--navy-deep) 30%, rgba(16,21,52,.88) 42%, rgba(16,21,52,.45) 62%, rgba(16,21,52,.3) 100%),
    linear-gradient(0deg, rgba(16,21,52,.75) 0%, rgba(16,21,52,0) 40%);
}
.hx--mosaic { padding-bottom: clamp(7rem, 10vw, 8.5rem); }

/* Booking page banner collage */
.ph-mosaic { position: absolute; top: 0; bottom: 0; right: 0; left: 40%; z-index: -2; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.ph-tile { margin: 0; overflow: hidden; background: #1E2656; }
.ph-tile img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: bannerZoom 14s ease-out forwards; }
.page-hero--mosaic::before {
  background: linear-gradient(90deg, rgba(16,21,52,1) 0%, rgba(16,21,52,1) 36%, rgba(16,21,52,.75) 50%, rgba(16,21,52,.35) 100%), linear-gradient(0deg, rgba(16,21,52,.6), rgba(16,21,52,0) 50%) !important;
}

@media (max-width: 991.98px) {
  .hx-mosaic { left: 0; grid-template-columns: 1fr 1fr 1fr; }
  .hx--mosaic .hx-shade { background: linear-gradient(180deg, rgba(16,21,52,.82) 0%, rgba(16,21,52,.86) 55%, rgba(16,21,52,.95) 100%); }
  .ph-mosaic { left: 0; }
  .page-hero--mosaic::before { background: linear-gradient(180deg, rgba(16,21,52,.84), rgba(16,21,52,.92)) !important; }
}
@media (max-width: 575.98px) {
  .hx-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "a d" "c c" "b e"; }
  .ph-mosaic { grid-template-columns: repeat(3, 1fr); display:none; }
  .ph-tile:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-tile img, .ph-tile img { animation: none; transform: none; }
  .js .hm-tile { opacity: 1; animation: none; }
}

/* Pavilion illustration with photos (home) */
.z--photo { overflow: hidden; isolation: isolate; border-color: rgba(255,255,255,.18); background: #1E2656; }
.z--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--ease); }
.z--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16,21,52,.15) 0%, rgba(16,21,52,.55) 50%, rgba(16,21,52,.92) 100%); transition: background-color .35s; }
.z--photo span { position: relative; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.z--photo:hover img { transform: scale(1.07); }
.z--photo:hover { border-color: rgba(255,255,255,.55); }
.z1.z--photo { background: #1E2656; }
.z1.z--photo::before { background: linear-gradient(180deg, rgba(39,84,162,.25) 0%, rgba(39,84,162,.55) 50%, rgba(23,43,110,.95) 100%); }

/* Download brochure page */
.brochure-cover { margin: 0; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-2); background: #fff; transform: rotate(-1.5deg); transition: transform .5s var(--ease); }
.brochure-cover:hover { transform: rotate(0deg) translateY(-4px); }
.brochure-cover img { width: 100%; display: block; }
.inside-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .95rem; }
.inside-list li { position: relative; padding-left: 1.4rem; line-height: 1.45; }
.inside-list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 2px; background: var(--royal); transform: rotate(45deg); }
.u-form button .ic:first-child { transition: transform .25s var(--ease); }
.u-form button:hover .ic:first-child { transform: translateY(2px); }

/* Gallery album filter */
.gal-filter { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.75rem; }
.gf-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-family: var(--f-display); font-size: .95rem; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.gf-btn span { font-size: .8rem; color: var(--muted); background: var(--mist); padding: .05rem .5rem; border-radius: 999px; }
.gf-btn:hover { border-color: var(--royal); }
.gf-btn.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.gf-btn.is-active span { background: rgba(255,255,255,.18); color: #fff; }
.gw-item.is-hidden { display: none; }
.gallery-wall .gw-item img { aspect-ratio: 4 / 3; object-fit: cover; }
/* all gallery photos are 4:3 — a row-wise grid keeps album order (UKITEX first) */
#galleryWall.gallery-wall { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
#galleryWall .gw-item { margin: 0; }

/* About: second-edition band (as per PHDCCI) */
.edition-band {
  margin: 0 0 1.4rem; padding: 1.1rem 1.4rem; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--navy-deep), var(--royal)); color: rgba(255,255,255,.9);
  font-family: var(--f-display); font-size: 1.12rem; line-height: 1.5;
}
.edition-band strong { color: #fff; font-weight: 600; }

/* Leadership */
.lead-group { font-size: 1.15rem; font-weight: 600; color: var(--royal); margin: 2.25rem 0 1.1rem; display: flex; align-items: center; gap: .8rem; }
.lead-group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.section-intro + .lead-group { margin-top: 0; }
.lead-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.lead-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.5rem 1.1rem 1.4rem; text-align: center; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.lead-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: #C3CCE2; }
.lead-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; display: block; }
.lead-initials { display: grid; place-items: center; background: linear-gradient(135deg, var(--navy), var(--royal)); color: #fff; font-family: var(--f-display); font-size: 1.6rem; font-weight: 500; letter-spacing: .02em; box-shadow: 0 0 0 5px var(--royal-soft); }
.lead-name { font-family: var(--f-display); font-size: 1.02rem; font-weight: 600; color: var(--navy); margin: 0 0 .35rem; }
.lead-role { font-size: .88rem; color: var(--muted); margin: 0; line-height: 1.45; }
@media (max-width: 1199.98px) { .lead-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
  .lead-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lead-card { padding: 1.2rem .8rem; }
  .lead-photo { width: 64px; height: 64px; }
  .lead-initials { font-size: 1.25rem; }
  .edition-band { font-size: 1rem; }
}

/* Leadership — text-only cards */
.lead-card { text-align: left; padding: 1.4rem 1.3rem 1.5rem; position: relative; overflow: hidden; }
.lead-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--royal), #6AA4F4); transform: scaleY(.35); transform-origin: top; transition: transform .45s var(--ease); }
.lead-card:hover::before { transform: scaleY(1); }
.lead-name { font-size: 1.05rem; margin-bottom: .4rem; }

/* =========================================================
   Round 12 — hero without buttons, leadership v2, mobile banners
   ========================================================= */
/* Home hero: smaller "2nd Edition" title, no CTA buttons */
.hx-title { font-size: clamp(2.2rem, 4.6vw, 4.1rem); }
.hx--mosaic .hx-lede { margin-bottom: 0; }

/* Leadership — navy section with glass cards */
.leadership {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 420px at 85% 0%, rgba(39, 84, 162, .55), transparent 60%),
    radial-gradient(700px 380px at 0% 100%, rgba(217, 130, 43, .16), transparent 60%),
    linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 60%, #26357A 100%);
}
.lead-contours { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; opacity: .06; z-index: -1; }
.leadership .kicker { color: #B7D0FB; }
.leadership .section-h { background-image: linear-gradient(95deg, #fff 0%, #fff 55%, #DCE6FA 100%); color: #fff; }
.leadership .hl { background-image: linear-gradient(100deg, #7FA8F0 0%, #B7D0FB 25%, #FFFFFF 45%, #B7D0FB 70%, #7FA8F0 100%); background-size: 220% 100%; color: #B7D0FB; }
.leadership .h-line::after { background: linear-gradient(90deg, #F2B266, #fff); }
.leadership .lead-group { color: #F2B266; }
.leadership .lead-group::after { background: rgba(255,255,255,.16); }
.leadership .lead-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 1.5rem 1.3rem 1.5rem 1.5rem;
}
.leadership .lead-card::before { background: linear-gradient(180deg, #F2B266, #D9822B); }
.leadership .lead-card:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.32); box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.lead-tag { display: block; width: 26px; height: 2px; background: rgba(255,255,255,.35); margin-bottom: .9rem; transition: width .4s var(--ease), background-color .4s; }
.lead-card:hover .lead-tag { width: 44px; background: #F2B266; }
.leadership .lead-name { color: #fff; }
.leadership .lead-role { color: rgba(255,255,255,.72); }

/* Mobile only: let banner photos show through more */
@media (max-width: 767.98px) {
  .hx--mosaic .hx-shade {
    background: linear-gradient(180deg, rgba(16,21,52,.45) 0%, rgba(16,21,52,.55) 40%, rgba(16,21,52,.82) 100%);
  }
  .hx--mosaic .hx-title, .hx--mosaic .hx-lede, .hx--mosaic .hx-pre { text-shadow: 0 2px 14px rgba(0,0,0,.45); }
  .page-hero--photo::before {
    background: linear-gradient(180deg, rgba(16,21,52,.5) 0%, rgba(16,21,52,.6) 45%, rgba(16,21,52,.85) 100%) !important;
  }
  .page-hero--photo .page-title, .page-hero--photo .page-lead, .page-hero--photo .page-meta { text-shadow: 0 2px 14px rgba(0,0,0,.45); }
}

/* =========================================================
   HERO v4 — "banner" (official UKITEX creative style)
   ========================================================= */
.hb {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(1.5rem, 4vw, 3rem)) 0 clamp(5.5rem, 8vw, 7rem);
  background:
    radial-gradient(900px 500px at 78% 40%, rgba(39, 84, 162, .10), transparent 65%),
    linear-gradient(180deg, #F6F8FD 0%, #EEF3FB 100%);
}
.hb-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; color: #9DB5DF; opacity: .45; }
.hb-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }

.hb-eyebrow { font-family: var(--f-display); font-weight: 600; font-size: clamp(.95rem, 1.3vw, 1.1rem); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); margin-bottom: .8rem; }
.hb-title { font-size: clamp(2.4rem, 4.8vw, 4.3rem); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; color: var(--navy); margin-bottom: .8rem; }
.hb-title .ht-line { display: block; }
.hb-title .ht-line:first-child { font-size: .62em; font-weight: 600; letter-spacing: -.01em; color: var(--royal); margin-bottom: .1em; }
.hb-sub { font-family: var(--f-display); font-size: clamp(1.1rem, 1.7vw, 1.45rem); font-weight: 400; color: var(--navy); margin-bottom: 1.4rem; }

.hb-pill-row { position: relative; margin: 0 0 1.6rem; }
.hb-pill-row::before { content: ""; position: absolute; left: -100vw; right: -2rem; top: 50%; height: 2px; background: var(--navy); z-index: 0; }
.hb-pill { position: relative; z-index: 1; display: inline-block; padding: .55rem 1.3rem; border-radius: 999px; background: var(--royal); color: #fff; font-family: var(--f-display); font-weight: 600; font-size: clamp(.95rem, 1.4vw, 1.2rem); letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 8px 20px rgba(39, 84, 162, .3); }

.hb-when { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 1.5rem; }
.hb-dates { margin: 0; display: grid; line-height: 1; }
.hb-days { font-family: var(--f-display); font-size: clamp(2.6rem, 4.6vw, 4rem); font-weight: 700; color: var(--royal); letter-spacing: -.04em; }
.hb-days sup { font-size: .38em; vertical-align: top; position: relative; top: .35em; margin-left: .05em; color: var(--navy); }
.hb-month { font-family: var(--f-display); font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 700; color: var(--navy); text-transform: uppercase; margin-top: .3rem; }
.hb-venue { margin: 0; padding-left: 1.4rem; border-left: 2px solid var(--navy); font-family: var(--f-display); font-size: clamp(1.1rem, 1.8vw, 1.55rem); font-weight: 700; line-height: 1.15; color: var(--navy); text-transform: uppercase; }

.hb-cd { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .6rem .5rem 1rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.hb-cd-k { font-size: .85rem; font-weight: 600; color: var(--muted); margin-right: .2rem; }
.hb-cd-c { display: inline-flex; align-items: baseline; gap: .25rem; padding: .35rem .7rem; border-radius: 999px; background: var(--royal-soft); }
.hb-cd-c .cd-n { font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.hb-cd-c small { font-size: .75rem; color: var(--muted); }
.hb-live { font-family: var(--f-display); color: var(--navy); }

/* fan */
.hb-fan { position: relative; }
.hb-fan-svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 22px 40px rgba(23, 29, 69, .18)); }
.hb-fan image { transition: transform 1.2s var(--ease); transform-box: fill-box; transform-origin: center; }
.hb-wedge:hover image { transform: scale(1.05); }
.hb-ring { fill: #fff; }
.hb-tag rect { fill: #F7C21B; }
.hb-tag text { font-family: var(--f-display); font-weight: 700; font-size: 17px; fill: var(--navy); letter-spacing: .01em; }

/* entrance */
.js .hb-copy > * { opacity: 0; transform: translateY(20px); animation: rise .8s var(--ease) forwards; }
.js .hb-copy > *:nth-child(1) { animation-delay: .05s; } .js .hb-copy > *:nth-child(2) { animation-delay: .15s; }
.js .hb-copy > *:nth-child(3) { animation-delay: .25s; } .js .hb-copy > *:nth-child(4) { animation-delay: .35s; }
.js .hb-copy > *:nth-child(5) { animation-delay: .45s; } .js .hb-copy > *:nth-child(6) { animation-delay: .55s; }
.js .hb-wedge, .js .hb-center, .js .hb-ring { opacity: 0; transform-box: fill-box; transform-origin: center; animation: fanIn .9s var(--ease) forwards; }
.js .hb-center, .js .hb-ring { animation-name: popIn; animation-delay: .15s; }
.js .hb-w0 { animation-delay: .3s; } .js .hb-w1 { animation-delay: .4s; } .js .hb-w2 { animation-delay: .5s; } .js .hb-w3 { animation-delay: .6s; }
/* tags keep their SVG transform attribute (translate + rotate) — origin must stay at 0 0 */
.hb-tag { transform-box: view-box; transform-origin: 0 0; }
.js .hb-tag { opacity: 0; animation: tagIn .6s var(--ease) .95s forwards; }
@keyframes fanIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes tagIn { from { opacity: 0; } to { opacity: 1; } }

.hb + .quick-info { margin-top: -3rem; }

@media (max-width: 991.98px) {
  .hb-inner { grid-template-columns: 1fr; }
  .hb-fan { order: -1; max-width: 640px; margin: 0 auto; width: 100%; }
  .hb-copy { text-align: left; }
}
@media (max-width: 575.98px) {
  .hb { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1rem); padding-bottom: 5rem; }
  .hb-when { gap: 1rem; }
  .hb-venue { padding-left: 1rem; }
  .hb-cd { flex-wrap: wrap; border-radius: 16px; }
  .hb-tag text { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hb-copy > *, .js .hb-wedge, .js .hb-center, .js .hb-ring { opacity: 1; transform: none; animation: none; }
  .js .hb-tag { opacity: 1; animation: none; }
}

/* =========================================================
   Leadership v3 — PHDCCI panel + featured president + list
   ========================================================= */
.leadership2 { background: linear-gradient(180deg, #fff 0%, #F1F5FC 100%); position: relative; }
.leadership2::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--saffron), var(--royal), var(--navy)); }
.l2-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }

.l2-org {
  position: sticky; top: calc(84px + 1.5rem);
  border-radius: 16px; padding: 2rem 1.8rem; color: #fff; overflow: hidden; isolation: isolate;
  background: radial-gradient(400px 260px at 100% 0%, rgba(39, 84, 162, .7), transparent 70%), linear-gradient(160deg, var(--navy-deep), var(--navy));
  box-shadow: var(--shadow-2);
}
.l2-org::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 2px solid rgba(255,255,255,.08); box-shadow: 0 0 0 30px rgba(255,255,255,.03), 0 0 0 60px rgba(255,255,255,.02); z-index: -1; }
.l2-org-logo { display: inline-block; background: #fff; border-radius: 12px; padding: .7rem .9rem; margin-bottom: 1.4rem; }
.l2-org-logo img { width: 120px; display: block; }
.l2-org-k { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: #F2B266; margin-bottom: .3rem; font-weight: 600; }
.l2-org-h { color: #fff; font-size: 1.35rem; font-weight: 600; line-height: 1.25; margin-bottom: .9rem; }
.l2-org-p { color: rgba(255,255,255,.78); font-size: .95rem; margin-bottom: 1.5rem; }
.l2-stats { margin: 0; display: grid; gap: .1rem; border-top: 1px solid rgba(255,255,255,.14); }
.l2-stats div { display: flex; align-items: baseline; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.l2-stats dt { font-family: var(--f-display); font-size: 1.6rem; font-weight: 600; min-width: 6.5rem; background: linear-gradient(135deg, #fff, #9FC0F8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.l2-stats dd { margin: 0; color: rgba(255,255,255,.75); font-size: .9rem; line-height: 1.35; }

.l2-group { font-size: 1.15rem; font-weight: 600; color: var(--navy); margin: 0 0 1rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.l2-group span { font-weight: 400; color: var(--muted); font-size: .95rem; }
.l2-people > .l2-group:not(:first-child) { margin-top: 2.2rem; }

.l2-head {
  position: relative; overflow: hidden; border-radius: 14px; padding: 1.7rem 1.8rem; margin-bottom: 14px; color: #fff;
  background: linear-gradient(120deg, var(--royal) 0%, #2F63B8 45%, var(--navy) 100%);
  box-shadow: 0 18px 40px rgba(39, 84, 162, .28);
}
.l2-head-name { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; margin: .7rem 0 .2rem; }
.l2-head-org { color: rgba(255,255,255,.8); margin: 0; }
.l2-head-mark { position: absolute; right: -18px; top: 50%; width: 170px; height: 170px; transform: translateY(-50%); color: rgba(255,255,255,.14); }

.l2-role-chip { display: inline-block; padding: .3rem .75rem; border-radius: 999px; background: var(--royal-soft); color: var(--royal); font-family: var(--f-display); font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.l2-role-chip--light { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.28); }

.l2-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.l2-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.4rem 1.35rem; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; overflow: hidden; }
.l2-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--saffron), var(--royal)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.l2-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: #C3CCE2; }
.l2-card:hover::after { transform: scaleX(1); }
.l2-name { font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; color: var(--navy); margin: .65rem 0 .15rem; }
.l2-org-line { margin: 0; color: var(--muted); font-size: .88rem; }

.l2-list { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.l2-list li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 1rem; padding: 1rem 1.4rem; border-top: 1px solid var(--line); transition: background-color .25s; }
.l2-list li:first-child { border-top: 0; }
.l2-list li:hover { background: var(--royal-soft); }
.l2-num { font-family: var(--f-display); font-weight: 600; font-size: .95rem; color: var(--saffron); }
.l2-li-name { font-family: var(--f-display); font-weight: 600; color: var(--navy); }
.l2-li-role { color: var(--muted); font-size: .92rem; }

@media (max-width: 991.98px) {
  .l2-grid { grid-template-columns: 1fr; }
  .l2-org { position: static; }
}
@media (max-width: 575.98px) {
  .l2-cards { grid-template-columns: 1fr; }
  .l2-list li { grid-template-columns: 2.2rem 1fr; gap: .2rem .8rem; padding: .9rem 1.1rem; }
  .l2-li-role { grid-column: 2; }
  .l2-head { padding: 1.4rem; }
  .l2-head-mark { width: 120px; height: 120px; }
}

/* =========================================================
   HERO v4 — dark variant
   ========================================================= */
.hb--dark {
  color: #fff;
  background:
    radial-gradient(900px 560px at 78% 45%, rgba(63, 120, 216, .38), transparent 62%),
    radial-gradient(600px 380px at 0% 100%, rgba(217, 130, 43, .14), transparent 60%),
    linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 58%, #26357A 100%);
}
.hb--dark .hb-lines { color: #fff; opacity: .07; }
.hb--dark .hb-eyebrow { color: #F2B266; }
.hb--dark .hb-title { color: #fff; }
.hb--dark .hb-title .ht-line:first-child {
  color: #B7D0FB;
  background-image: linear-gradient(95deg, #DCE6FA, #9FC0F8);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hb--dark .hl {
  background-image: linear-gradient(100deg, #7FA8F0 0%, #B7D0FB 25%, #FFFFFF 45%, #B7D0FB 70%, #7FA8F0 100%);
  background-size: 220% 100%; color: #B7D0FB;
}
.hb--dark .hb-sub { color: rgba(255,255,255,.85); }
.hb--dark .hb-pill-row::before { background: rgba(255,255,255,.35); }
.hb--dark .hb-pill { background: linear-gradient(135deg, #3B78D8, var(--royal)); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.hb--dark .hb-days { color: #fff; }
.hb--dark .hb-days sup { color: #F2B266; }
.hb--dark .hb-month { color: #B7D0FB; }
.hb--dark .hb-venue { color: #fff; border-left-color: rgba(255,255,255,.4); }
.hb--dark .hb-cd { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); box-shadow: 0 12px 30px rgba(0,0,0,.25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hb--dark .hb-cd-k { color: rgba(255,255,255,.7); }
.hb--dark .hb-cd-c { background: rgba(255,255,255,.1); }
.hb--dark .hb-cd-c .cd-n { color: #fff; }
.hb--dark .hb-cd-c small { color: rgba(255,255,255,.65); }
.hb--dark .hb-live { color: #fff; }
.hb--dark .hb-fan-svg { filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .45)); }
.hb--dark .hb-ring { fill: #fff; }
.other-docs { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .4rem .8rem; }
.other-docs a { font-weight: 600; }

/* =========================================================
   Hero (mosaic) — no buttons, fuller copy
   ========================================================= */
.hx--mosaic .hx-pre { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .95rem; color: #F2B266; }
.hx--mosaic .hx-title { font-size: clamp(2.6rem, 5.4vw, 4.8rem); margin-bottom: .6rem; }
.hx--mosaic .hx-title .ht-small { font-size: .55em; font-weight: 600; letter-spacing: -.01em; margin-bottom: .12em; }
.hx-sub { font-family: var(--f-display); font-size: clamp(1.1rem, 1.7vw, 1.4rem); color: #fff; margin-bottom: 1rem; }
.hx--mosaic .hx-lede { margin-bottom: 1.6rem; max-width: 30rem; }
.hx-pill-row { position: relative; }
.hx-pill-row::before { content: ""; position: absolute; left: -100vw; right: 25%; top: 50%; height: 2px; background: rgba(255,255,255,.35); }
.hx-pill { position: relative; display: inline-block; padding: .55rem 1.3rem; border-radius: 999px; background: linear-gradient(135deg, #3B78D8, var(--royal)); border: 1px solid rgba(255,255,255,.25); color: #fff; font-family: var(--f-display); font-weight: 600; font-size: clamp(.95rem, 1.3vw, 1.1rem); letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.js .hx-sub, .js .hx-pill-row { opacity: 0; transform: translateY(24px); animation: rise .85s var(--ease) forwards; }
.js .hx-sub { animation-delay: .4s; }
.js .hx-pill-row { animation-delay: .62s; }
@media (prefers-reduced-motion: reduce) { .js .hx-sub, .js .hx-pill-row { opacity: 1; transform: none; animation: none; } }

/* =========================================================
   Leadership — white cards with initials badge
   ========================================================= */
.lead3 { background: linear-gradient(180deg, #F4F7FD 0%, #fff 100%); }
.lead3-group { display: flex; align-items: center; gap: .8rem; font-size: 1.15rem; font-weight: 600; color: var(--royal); margin: 2.25rem 0 1.1rem; }
.lead3-group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.section-intro + .lead3-group { margin-top: 0; }
.lead3-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.lead3-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.7rem 1.1rem 1.5rem; text-align: center; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.lead3-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--saffron), var(--royal)); transform: scaleX(0); transition: transform .45s var(--ease); }
.lead3-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: #C3CCE2; }
.lead3-card:hover::after { transform: scaleX(1); }
.lead3-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; display: block; }
.lead3-initials { display: grid; place-items: center; background: linear-gradient(135deg, var(--navy), var(--royal)); color: #fff; font-family: var(--f-display); font-size: 1.6rem; font-weight: 500; box-shadow: 0 0 0 5px var(--royal-soft); transition: box-shadow .35s; }
.lead3-card:hover .lead3-initials { box-shadow: 0 0 0 5px #FCE3C7; }
.lead3-name { font-family: var(--f-display); font-size: 1.02rem; font-weight: 600; color: var(--navy); margin: 0 0 .35rem; }
.lead3-role { font-size: .88rem; color: var(--muted); margin: 0; line-height: 1.45; }
@media (max-width: 1199.98px) { .lead3-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
  .lead3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lead3-card { padding: 1.3rem .8rem; }
  .lead3-photo { width: 64px; height: 64px; }
  .lead3-initials { font-size: 1.25rem; }
}
/* leader photos */
.lead3-photo { width: 96px; height: 96px; }
img.lead3-photo { box-shadow: 0 0 0 5px var(--royal-soft); background: var(--mist); transition: box-shadow .35s; }
.lead3-card:hover img.lead3-photo { box-shadow: 0 0 0 5px #FCE3C7; }
@media (max-width: 575.98px) { .lead3-photo { width: 72px; height: 72px; } }

/* =========================================================
   Home hero (mosaic) — MOBILE redesign (desktop untouched)
   Photo strip on top, clean navy panel for the text below.
   ========================================================= */
@media (max-width: 767.98px) {
  .hx--mosaic {
    min-height: 0; display: block;
    padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 200px) 0 4.5rem;
    background: var(--navy-deep);
  }
  /* photos become a 3-tile strip under the header */
  .hx--mosaic .hx-mosaic {
    left: 0; right: 0; bottom: auto;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    height: 230px; gap: 4px;
    grid-template-columns: 1fr 1.35fr 1fr; grid-template-rows: 1fr;
    grid-template-areas: "a c d";
  }
  .hx--mosaic .hm-b, .hx--mosaic .hm-e { display: none; }
  .hx--mosaic .hx-shade {
    background: linear-gradient(180deg,
      rgba(16,21,52,.05) 0,
      rgba(16,21,52,.10) calc(var(--header-h) + 120px),
      rgba(16,21,52,.85) calc(var(--header-h) + 200px),
      var(--navy-deep) calc(var(--header-h) + 232px));
  }
  .hx--mosaic .hx-title, .hx--mosaic .hx-lede, .hx--mosaic .hx-pre { text-shadow: none; }

  /* text */
  .hx--mosaic .hx-inner { gap: 1.6rem; }
  .hx--mosaic .hx-pre { font-size: .78rem; letter-spacing: .08em; margin-bottom: .8rem; gap: .6rem; }
  .hx--mosaic .hx-pre::before { width: 22px; }
  .hx--mosaic .hx-title { font-size: clamp(2.1rem, 11vw, 2.7rem); line-height: 1.05; margin-bottom: .5rem; }
  .hx--mosaic .hx-title .ht-small { font-size: .5em; margin-bottom: .2em; }
  .hx-sub { font-size: 1rem; margin-bottom: .7rem; color: rgba(255,255,255,.9); }
  .hx--mosaic .hx-lede { font-size: .95rem; line-height: 1.55; margin-bottom: 1.3rem; color: rgba(255,255,255,.78); }
  .hx-pill { font-size: .85rem; padding: .5rem 1.05rem; }
  .hx-pill-row::before { right: 0; }

  /* compact countdown card */
  .hx--mosaic .hx-card { max-width: none; padding: 1.15rem 1.1rem 1rem; border-radius: 12px; background: rgba(255,255,255,.07); }
  .hx--mosaic .hx-card::before { left: 1.1rem; right: 1.1rem; }
  .hx--mosaic .hx-card-k { font-size: .85rem; margin-bottom: .7rem; }
  .hx--mosaic .cd { gap: .45rem; margin-bottom: .9rem; }
  .hx--mosaic .cd-cell { padding: .6rem .2rem .5rem; border-radius: 8px; }
  .hx--mosaic .cd-n { font-size: 1.55rem; }
  .hx--mosaic .cd-l { font-size: .68rem; margin-top: .25rem; }
  .hx--mosaic .hx-facts { padding-top: .8rem; gap: .45rem; margin-bottom: .8rem; }
  .hx--mosaic .hx-facts li { font-size: .88rem; }
  .hx--mosaic .hx-card-link { font-size: .85rem; }

  .hx--mosaic + .quick-info { margin-top: -2.5rem; }
}
@media (max-width: 359.98px) {
  .hx--mosaic { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 175px); }
  .hx--mosaic .hx-mosaic { height: 200px; }
  .hx--mosaic .hx-title { font-size: 2rem; }
}

/* =========================================================
   Key Highlights
   ========================================================= */
.kh { background: #fff; }
.kh-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.kh-intro { position: sticky; top: calc(84px + 1.5rem); }
.kh-stats { display: grid; gap: 12px; margin-top: 1.8rem; }
.kh-stat { border-radius: 14px; padding: 1.3rem 1.4rem; color: #fff; background: linear-gradient(135deg, var(--navy), var(--royal)); box-shadow: var(--shadow-2); }
.kh-stat:nth-child(2) { background: linear-gradient(135deg, #C8641F, #E2873B); }
.kh-num { display: block; font-family: var(--f-display); font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.kh-lbl { display: block; margin-top: .4rem; font-size: .95rem; color: rgba(255,255,255,.88); }
.kh-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kh-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.3rem; background: var(--mist); border: 1px solid var(--line); border-radius: 12px; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s, background-color .3s; }
.kh-item:hover { transform: translateY(-3px); background: #fff; box-shadow: var(--shadow-1); border-color: #C3CCE2; }
.kh-item--wide { grid-column: 1 / -1; }
.kh-ic { flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--royal); font-size: 1.3rem; box-shadow: 0 0 0 1px var(--line); }
.kh-item:hover .kh-ic { background: var(--royal); color: #fff; box-shadow: none; }
.kh-item h3 { font-size: 1.02rem; font-weight: 600; color: var(--navy); line-height: 1.4; margin: .55rem 0 0; }
.kh-item--wide h3 { margin-top: .5rem; }
.kh-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: .8rem 0 0; }
.kh-tags span { padding: .35rem .75rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .85rem; color: var(--navy); font-family: var(--f-display); }
@media (max-width: 991.98px) { .kh-grid { grid-template-columns: 1fr; } .kh-intro { position: static; } .kh-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .kh-list { grid-template-columns: 1fr; } .kh-item { padding: 1rem; } }

/* =========================================================
   Partners (tabs)
   ========================================================= */
.section-intro--center { text-align: center; margin-left: auto; margin-right: auto; }
.section-intro--center .kicker { justify-content: center; }
.section-intro--center .h-line::after { margin-left: auto; margin-right: auto; }
.pt-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0 auto 1.8rem; }
.pt-tab { padding: .8rem 1.4rem; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; color: var(--navy); font-family: var(--f-display); font-weight: 600; font-size: 1rem; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.pt-tab:hover { border-color: var(--royal); }
.pt-tab.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.pt-panel { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(1rem, 3vw, 2.5rem); box-shadow: var(--shadow-1); animation: rise .45s var(--ease) both; }
.pt-panel img { width: 100%; max-width: 1100px; margin: 0 auto; display: block; }

/* Leadership — text-only cards */
.lead3-card--text { padding: 1.6rem 1.2rem 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; }
.lead3-bar { width: 34px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--saffron), var(--royal)); margin-bottom: 1rem; transition: width .35s var(--ease); }
.lead3-card--text:hover .lead3-bar { width: 56px; }
.lead3-card--text .lead3-name { font-size: 1.05rem; }

/* =========================================================
   Social links
   ========================================================= */
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 1.15rem; color: var(--navy); background: #fff; border: 1px solid var(--line); transition: transform .25s var(--ease), background-color .25s, color .25s, border-color .25s, box-shadow .25s; }
.social a:hover { transform: translateY(-3px); background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: 0 8px 18px rgba(23,29,69,.2); }
.social--footer { margin-top: .6rem; }
.footer-follow { margin: 1.4rem 0 0; font-family: var(--f-display); font-weight: 600; color: var(--navy); font-size: .95rem; }

/* Home contact — rebalanced left column */
.contact-follow { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.cf-k { font-family: var(--f-display); font-weight: 600; color: var(--navy); margin-bottom: .7rem; }
.contact-office { display: flex; gap: .8rem; margin-top: 1.5rem; padding: 1.1rem 1.2rem; border-radius: 12px; background: var(--mist); border: 1px solid var(--line); }
.contact-office .ic { color: var(--royal); font-size: 1.2rem; margin-top: .15rem; }
.contact-office p { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.5; }
.contact-office strong { display: block; color: var(--navy); font-family: var(--f-display); margin-bottom: .15rem; }
.contact-office span { color: var(--royal); font-weight: 600; }

/* =========================================================
   Key Highlights — dark version with soft moving glows
   ========================================================= */
.kh--dark { position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 60%, #26357A 100%); }
.kh--dark::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .06;
  background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 70%); }
.kh-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.kh-orb--1 { width: 420px; height: 420px; left: -120px; top: -80px; background: rgba(59,120,216,.55); animation: orbA 14s ease-in-out infinite alternate; }
.kh-orb--2 { width: 360px; height: 360px; right: -100px; bottom: -120px; background: rgba(217,130,43,.35); animation: orbB 16s ease-in-out infinite alternate; }
@keyframes orbA { to { transform: translate(120px, 80px) scale(1.1); } }
@keyframes orbB { to { transform: translate(-140px, -60px) scale(1.15); } }
.kh--dark .kicker { color: #F2B266; }
.kh--dark .section-h { background-image: linear-gradient(95deg, #fff 0%, #fff 55%, #DCE6FA 100%); color: #fff; }
.kh--dark .hl { background-image: linear-gradient(100deg, #7FA8F0 0%, #B7D0FB 25%, #FFFFFF 45%, #B7D0FB 70%, #7FA8F0 100%); background-size: 220% 100%; color: #B7D0FB; }
.kh--dark .h-line::after { background: linear-gradient(90deg, #F2B266, #fff); }
.kh--dark .kh-stat { background: linear-gradient(135deg, #3B78D8, var(--royal)); box-shadow: 0 18px 40px rgba(0,0,0,.3); }
.kh--dark .kh-stat:nth-child(2) { background: linear-gradient(135deg, #C8641F, #E2873B); }
.kh--dark .kh-item { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kh--dark .kh-item:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); box-shadow: 0 16px 36px rgba(0,0,0,.28); }
.kh--dark .kh-item h3 { color: #fff; }
.kh--dark .kh-ic { background: rgba(255,255,255,.1); color: #B7D0FB; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.kh--dark .kh-item:hover .kh-ic { background: #F2B266; color: var(--navy-deep); }
.kh--dark .kh-tags span { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.kh-stat { transition: transform .35s var(--ease); }
.kh-stat:hover { transform: translateY(-4px) scale(1.02); }

/* =========================================================
   Extra polish & motion on the homepage
   ========================================================= */
/* sector cards: lift + subtle tilt on hover */
.sector-card { transition: transform .45s var(--ease), box-shadow .45s; }
.sector-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(23,29,69,.25); }
/* why participate cells: icon gently pops */
.why-cell:hover .why-ic { transform: translateY(-3px) scale(1.08); }
/* partners panel: soft shine on hover */
.pt-panel { position: relative; overflow: hidden; }
.pt-panel::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-15deg); transition: left .9s var(--ease); pointer-events: none; }
.pt-panel:hover::after { left: 120%; }
/* gallery tiles: slight lift */
.gal-item { transition: transform .45s var(--ease), box-shadow .45s; }
.gal-item:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(23,29,69,.2); }
/* leadership cards: stagger reveal */
.lead3-grid .lead3-card:nth-child(2) { transition-delay: .06s; } .lead3-grid .lead3-card:nth-child(3) { transition-delay: .12s; }
.lead3-grid .lead3-card:nth-child(4) { transition-delay: .18s; } .lead3-grid .lead3-card:nth-child(5) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .kh-orb { animation: none; }
  .pt-panel::after { display: none; }
}

/* =========================================================
   Pavilion — 12 sectors
   ========================================================= */
.plan-zones--12 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, 96px);
  grid-template-areas: "z0 z0 z1 z2" "z0 z0 z3 z4" "z5 z6 z7 z7" "z8 z9 z10 z11";
  gap: 8px;
}
.plan-zones--12 .z { padding: .65rem .75rem; font-size: .82rem; line-height: 1.2; }
.zz-0 { grid-area: z0; font-size: .95rem !important; } .zz-1 { grid-area: z1; } .zz-2 { grid-area: z2; } .zz-3 { grid-area: z3; }
.zz-4 { grid-area: z4; } .zz-5 { grid-area: z5; } .zz-6 { grid-area: z6; } .zz-7 { grid-area: z7; }
.zz-8 { grid-area: z8; } .zz-9 { grid-area: z9; } .zz-10 { grid-area: z10; } .zz-11 { grid-area: z11; }
.sector-cards--12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sector-cards--12 .sector-card { aspect-ratio: 4 / 5; }
.sector-cards--12 .sc-t { font-size: .95rem; }
@media (max-width: 1199.98px) { .sector-cards--12 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .sector-cards--12 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
  .plan-zones--12 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, 84px);
    grid-template-areas: "z0 z0 z1" "z0 z0 z2" "z3 z4 z5" "z6 z7 z8" "z9 z10 z11"; }
  .plan-zones--12 .z { font-size: .74rem; padding: .5rem; }
  .sector-cards--12 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sector-cards--12 .sector-card:last-child { grid-column: auto; aspect-ratio: 4 / 5; }
}

/* =========================================================
   Named contacts
   ========================================================= */
.person-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.person-list li { display: flex; flex-direction: column; gap: .2rem; padding: .75rem .95rem; border: 1px solid var(--line); border-radius: 10px; background: var(--mist); transition: border-color .25s, background-color .25s; }
.person-list li:hover { border-color: var(--royal); background: #fff; }
.pl-name { font-family: var(--f-display); font-weight: 600; color: var(--navy); font-size: .98rem; }
.person-list a, .corp-person a, .corp-mail a { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink); font-size: .95rem; }
.person-list a .ic, .corp-person a .ic, .corp-mail a .ic { color: var(--royal); }
.person-list a:hover, .corp-person a:hover, .corp-mail a:hover { color: var(--royal); }
.corp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: .6rem 1.5rem; align-items: start; }
.corp-person { margin: 0 !important; display: flex; flex-direction: column; gap: .2rem; padding: .75rem .95rem; border-radius: 10px; background: var(--royal-soft); }
.corp-mail { margin: 0 !important; display: grid; gap: .45rem; padding-top: .3rem; }
.aside-person .person-list { grid-template-columns: 1fr; }
@media (max-width: 575.98px) { .person-list, .corp-row { grid-template-columns: 1fr; } }

/* Layout page — 12 pavilion sectors */
.zone-grid--12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.zone-grid--12 .zone-img { aspect-ratio: 1 / 1; }
.zone-grid--12 .zone-body { padding: .9rem 1rem 1.1rem; display: flex; align-items: baseline; gap: .55rem; }
.zone-num { font-family: var(--f-display); font-weight: 600; font-size: .85rem; color: var(--saffron); }
.zone-grid--12 .zone-cell h3 { font-size: .98rem; line-height: 1.3; margin: 0; }
@media (max-width: 1199.98px) { .zone-grid--12 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .zone-grid--12 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .zone-grid--12 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }