/* ==========================================================
   Bharat CSR Icons Summit 2026 — Global Stylesheet
   ========================================================== */

:root {
  --forest-900: #012108;
  --forest-800: #01330e;
  --forest-700: #014712;
  --forest-600: #0a6119;
  --leaf-500: #3f8a0f;
  --leaf-400: #5ca81c;
  --lime-300: #aeda72;
  --gold-400: #ebb93c;
  --gold-500: #d19a20;
  --fresh-400: #6fbf3b;
  --white: #ffffff;
  --ink: #15210f;
  --ink-soft: #566150;
  --bg-light: #f3f8ee;
  --card-border: rgba(10, 97, 25, 0.12);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 18px 45px rgba(1, 51, 14, 0.12);
  --shadow-hover: 0 24px 60px rgba(1, 51, 14, 0.22);
  --font-head: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --container: 1200px;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip; /* clip doesn't create a scroll container, so sticky still works */
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  line-height: 1.65;
}

img, video { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container {
  width: min(var(--container), 92%);
  margin-inline: auto;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; }

.section { padding: 90px 0; }
.section.tint { background: var(--bg-light); }
.section.dark {
  background: linear-gradient(135deg, var(--forest-900) 0%, var(--forest-700) 60%, var(--forest-600) 100%);
  color: var(--white);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--leaf-500);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 34px; height: 2px;
  background: var(--gold-400);
  border-radius: 2px;
}
.section.dark .eyebrow { color: var(--lime-300); }

.section-title {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 800;
  color: var(--forest-800);
  margin-bottom: 16px;
}
.section.dark .section-title { color: var(--white); }

.section-sub {
  max-width: 720px;
  color: var(--ink-soft);
  font-size: 1rem;
}
.section.dark .section-sub { color: rgba(255, 255, 255, 0.78); }

.section-head { margin-bottom: 48px; }
.section-head.center { text-align: center; }
.section-head.center .section-sub { margin-inline: auto; }
.section-head.center .eyebrow::before { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
  will-change: transform;
}
.btn i { transition: transform 0.3s ease; }
.btn:hover i { transform: translateX(4px); }

.btn-primary {
  background: linear-gradient(120deg, var(--gold-400), var(--gold-500));
  color: var(--forest-900);
  box-shadow: 0 12px 30px rgba(209, 154, 32, 0.35);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(209, 154, 32, 0.45); }

.btn-white {
  background: var(--white);
  color: var(--forest-800);
  box-shadow: 0 12px 30px rgba(1, 33, 8, 0.25);
}
.btn-white:hover { transform: translateY(-3px); }

.btn-outline {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-3px); }

.btn-blue {
  background: linear-gradient(120deg, var(--leaf-500), var(--forest-600));
  color: var(--white);
  box-shadow: 0 12px 30px rgba(63, 138, 15, 0.35);
}
.btn-blue:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(63, 138, 15, 0.5); }

/* ==========================================================
   Header / Navigation
   ========================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  padding: 0 0 18px;
  transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}

/* ---------- Topbar (date + socials) ---------- */
.topbar {
  background: rgba(1, 20, 5, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  overflow: hidden;
  max-height: 60px;
  transition: max-height 0.35s ease, opacity 0.35s ease;
  margin-bottom: 14px;
}
.site-header.scrolled .topbar {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.topbar-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
}
.topbar-info {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.topbar-info span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}
.topbar-info i { color: var(--gold-400); font-size: 0.85rem; }
.topbar-socials {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.topbar-socials a {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.topbar-socials a:hover {
  background: var(--gold-400);
  color: var(--forest-900);
  transform: translateY(-2px);
}
.site-header.scrolled {
  background: rgba(1, 33, 8, 0.92);
  backdrop-filter: blur(14px);
  padding: 10px 0;
  box-shadow: 0 10px 30px rgba(1, 33, 8, 0.35);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
}
/* The logo is full-colour on white (its "CSR" wordmark is dark green), so on the
   dark header it sits on a white plate rather than being knocked out. */
.brand-logo {
  height: 68px;
  width: auto;
  background: var(--white);
  padding: 8px 15px;
  border-radius: 13px;
  box-shadow: 0 8px 22px rgba(1, 20, 5, 0.3);
  transition: height 0.35s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.brand:hover .brand-logo {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(1, 20, 5, 0.4);
}
.site-header.scrolled .brand-logo { height: 52px; }
.mm-head .brand-logo { height: 48px; padding: 6px 10px; }
.footer-about .brand-logo { height: 70px; }

.brand-mark {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 25%, var(--leaf-400), var(--forest-700));
  border: 2px solid rgba(255, 255, 255, 0.35);
  font-size: 1.3rem;
  color: var(--white);
  flex-shrink: 0;
}
.brand-text { line-height: 1.25; }
.brand-text strong {
  font-family: var(--font-head);
  font-size: 1.02rem;
  display: block;
  letter-spacing: 0.02em;
}
.brand-text span {
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.92rem;
  font-weight: 500;
  position: relative;
  padding: 6px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--gold-400);
  transition: width 0.3s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a:hover, .nav-links a.active { color: var(--white); }

.nav-cta { display: flex; align-items: center; gap: 14px; }

/* second header CTA — outlined so "Register Now" stays the primary action */
.btn-nominate {
  border-color: rgba(235, 185, 60, 0.6);
  color: var(--gold-400);
  background: rgba(235, 185, 60, 0.08);
  backdrop-filter: blur(6px);
}
.btn-nominate:hover {
  background: rgba(235, 185, 60, 0.18);
  border-color: var(--gold-400);
  color: var(--white);
  transform: translateY(-3px);
}
/* Between 901px and 1199px the desktop nav is showing but the drawer is not,
   so hiding this button would leave no header route to the form. Tighten the
   bar instead — links closer together, buttons smaller, arrow dropped. */
@media (max-width: 1199px) {
  .nav-links { gap: 20px; }
  .nav-links a { font-size: 0.87rem; }
  .nav-cta { gap: 9px; }
  .nav-cta .btn { padding: 9px 15px; font-size: 0.8rem; }
  .nav-cta .btn-primary i { display: none; }
}
@media (max-width: 990px) {
  .nav-links { gap: 15px; }
  .nav-links a { font-size: 0.83rem; }
  .nav-cta .btn { padding: 8px 12px; font-size: 0.75rem; }
}

/* drawer: sits under Register Now, visually secondary */
.mm-cta2 {
  margin-top: 10px;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--white);
  background: rgba(255, 255, 255, 0.07);
  transition-delay: 0.38s;
}
.mm-cta2:hover { background: rgba(255, 255, 255, 0.15); }
.nav-cta .btn { padding: 11px 24px; font-size: 0.88rem; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 44px; height: 44px;
  position: relative;
  z-index: 1200;
}
.nav-toggle span {
  display: block;
  width: 26px; height: 2.5px;
  background: var(--white);
  margin: 5px auto;
  border-radius: 3px;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ==========================================================
   Hero
   ========================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 172px 0 60px; /* clears the fixed header (topbar + logo nav row) */
  overflow: hidden;
  background: linear-gradient(130deg, var(--forest-900), var(--forest-700) 55%, #0b7020);
}

/* full-bleed background video */
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Readability scrim: heavy behind the left-hand copy, clearing towards the
   right so the video stays visible. Second layer darkens top and bottom so the
   fixed header and the scroll hint keep their contrast. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(1, 20, 5, 0.95) 0%,
      rgba(1, 33, 8, 0.88) 30%,
      rgba(1, 51, 14, 0.62) 52%,
      rgba(1, 71, 18, 0.28) 78%,
      rgba(1, 71, 18, 0.14) 100%),
    linear-gradient(180deg,
      rgba(1, 20, 5, 0.6) 0%,
      transparent 26%,
      transparent 72%,
      rgba(1, 20, 5, 0.55) 100%);
}

/* animated grid + glow orbs */
.hero-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(174, 218, 114, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174, 218, 114, 0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  animation: gridDrift 24s linear infinite;
}
@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 46px 46px, 46px 46px; }
}
.orb {
  position: absolute; border-radius: 50%; filter: blur(70px);
  z-index: 1; pointer-events: none; opacity: 0.5;
  animation: orbFloat 12s ease-in-out infinite alternate;
}
.orb-1 { width: 380px; height: 380px; background: rgba(63, 138, 15, 0.55); top: -90px; right: 8%; }
.orb-2 { width: 300px; height: 300px; background: rgba(235, 185, 60, 0.28); bottom: -60px; left: -60px; animation-delay: 3s; }
.orb-3 { width: 220px; height: 220px; background: rgba(111, 191, 59, 0.3); top: 40%; left: 42%; animation-delay: 6s; }
@keyframes orbFloat {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(30px, -35px, 0) scale(1.12); }
}

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

/* copy sits over the video, constrained to the left half */
.hero-copy { max-width: 620px; }

/* Below ~1080px the copy spans the frame, so the scrim has to darken evenly
   instead of clearing to the right — otherwise text lands on bare video. */
@media (max-width: 1080px) {
  .hero-copy { max-width: 100%; }
  .hero::before {
    background:
      linear-gradient(175deg,
        rgba(1, 20, 5, 0.82) 0%,
        rgba(1, 33, 8, 0.7) 40%,
        rgba(1, 33, 8, 0.76) 75%,
        rgba(1, 20, 5, 0.88) 100%);
  }
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--lime-300);
  margin-bottom: 22px;
}
.hero-tag .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-400);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(235, 185, 60, 0.6); }
  50% { box-shadow: 0 0 0 9px rgba(235, 185, 60, 0); }
}

.hero-title {
  color: var(--white);
  font-size: clamp(1.9rem, 3.6vw, 2.85rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
}
.hero-title .grad {
  background: linear-gradient(100deg, var(--gold-400), #fcd867 55%, var(--gold-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-motto {
  font-family: var(--font-head);
  color: var(--lime-300);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(0.78rem, 1.3vw, 0.92rem);
  margin-bottom: 14px;
}
.hero-motto span { color: var(--gold-400); padding: 0 6px; }

.hero-desc {
  color: rgba(255, 255, 255, 0.82);
  max-width: 560px;
  margin-bottom: 24px;
  font-size: 0.95rem;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}
.meta-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  transition: transform 0.3s ease, background 0.3s ease;
}
.meta-chip:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.12); }
.meta-chip i {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(235, 185, 60, 0.16);
  color: var(--gold-400);
  font-size: 1.05rem;
}
.meta-chip small {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.meta-chip strong { color: var(--white); font-size: 0.98rem; font-family: var(--font-head); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- sound toggle on the promo video ---------- */
.video-sound {
  position: absolute;
  right: 26px; bottom: 26px;
  z-index: 4;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(1, 20, 5, 0.55);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-size: 0.92rem;
  transition: background 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, transform 0.25s ease;
}
.video-sound[hidden] { display: none; }   /* beats the grid display above */
.video-sound:hover {
  background: linear-gradient(130deg, var(--gold-400), var(--gold-500));
  border-color: transparent;
  color: var(--forest-900);
  transform: scale(1.09);
}
.video-sound.is-on {
  background: linear-gradient(130deg, var(--gold-400), var(--gold-500));
  border-color: transparent;
  color: var(--forest-900);
}

.hero-badge {
  position: absolute;
  right: 26px; bottom: 96px;   /* stacks above the sound toggle */
  background: var(--white);
  color: var(--forest-800);
  border-radius: var(--radius-md);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-hover);
  animation: floatY 5s ease-in-out infinite;
  z-index: 3;
}
.hero-badge i {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(130deg, var(--gold-400), var(--gold-500));
  color: var(--forest-900);
  font-size: 1.2rem;
}
.hero-badge strong { display: block; font-family: var(--font-head); font-size: 1.05rem; }
.hero-badge small { color: var(--ink-soft); font-size: 0.75rem; }

/* These must come after the base rules above — a media query adds no
   specificity, so an earlier override loses to a later plain declaration. */
@media (max-width: 1080px) {
  /* the stats strip immediately below repeats this figure */
  .hero-badge { display: none; }
  .video-sound { right: 18px; bottom: 18px; }
}
@media (max-width: 900px) {
  .video-sound { bottom: 84px; }   /* clears the Express Interest bar */
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.scroll-hint {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.3rem;
  animation: floatY 2.2s ease-in-out infinite;
}

/* ==========================================================
   Stats strip
   ========================================================== */
.stats-strip {
  position: relative;
  z-index: 5;
  margin-top: -58px;
}
.stats-card {
  position: relative;
  background: linear-gradient(120deg, var(--forest-800) 0%, var(--forest-600) 70%, var(--leaf-500) 130%);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(1, 33, 8, 0.35);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.stats-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(235, 185, 60, 0.14), transparent 40%),
    radial-gradient(circle at 90% 120%, rgba(174, 218, 114, 0.16), transparent 45%);
  pointer-events: none;
}
.stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 34px 20px;
  position: relative;
  transition: background 0.3s ease, transform 0.3s ease;
}
.stat:hover { background: rgba(255, 255, 255, 0.06); }
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0; top: 24%;
  height: 52%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.28), transparent);
}
.stat-icon {
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  color: var(--gold-400);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}
.stat:hover .stat-icon {
  background: linear-gradient(130deg, var(--gold-400), var(--gold-500));
  color: var(--forest-900);
  transform: rotate(-6deg) scale(1.08);
}
.stat-body { text-align: left; }
.stat .num {
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
}
.stat .num span:last-child { color: var(--gold-400); }
.stat p {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 5px;
  font-weight: 500;
}

/* ==========================================================
   About
   ========================================================== */
.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-visual { position: relative; }
.about-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 16 / 9;   /* matches csr_aboutus.png so nothing gets cropped */
  /* shows through while the photo loads, and if it ever fails */
  background: linear-gradient(150deg, var(--forest-800), var(--forest-600));
  color: var(--white);
}
.about-frame img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.about-frame:hover img { transform: scale(1.06); }

/* caption card below the photo */
.about-note {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--forest-800), var(--forest-600));
  color: var(--white);
  box-shadow: var(--shadow-soft);
}
.note-icon {
  width: 46px; height: 46px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.2rem;
  color: var(--forest-900);
  background: linear-gradient(130deg, var(--gold-400), var(--gold-500));
}
.about-note h3 { font-size: 1.12rem; margin-bottom: 6px; }
.about-note p { color: rgba(255, 255, 255, 0.82); font-size: 0.86rem; }

@media (max-width: 640px) {
  .about-note { padding: 18px 18px; gap: 13px; }
  .note-icon { width: 40px; height: 40px; font-size: 1rem; }
  .about-note h3 { font-size: 1rem; }
  .about-note p { font-size: 0.82rem; }
}

.about-chip {
  position: absolute;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--forest-800);
  font-size: 0.9rem;
}
.about-chip i { color: var(--fresh-400); font-size: 1.25rem; }
.about-chip.tl { top: -20px; left: -20px; animation: floatY 5.5s ease-in-out infinite; }
.about-note { position: relative; }
.about-chip.br { top: -22px; right: -14px; animation: floatY 6.5s ease-in-out infinite reverse; }

.about-copy p { color: var(--ink-soft); margin-bottom: 18px; }
.about-points { margin: 26px 0 34px; display: grid; gap: 14px; }
.about-points li {
  display: flex; gap: 14px; align-items: flex-start;
  font-weight: 500; color: var(--ink);
}
.about-points i {
  color: var(--white);
  background: linear-gradient(130deg, var(--leaf-500), var(--forest-600));
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.7rem;
  flex-shrink: 0;
  margin-top: 4px;
}

/* ==========================================================
   Feature marquee
   ========================================================== */
.marquee {
  position: relative;
  background: linear-gradient(110deg, var(--forest-900) 0%, var(--forest-700) 55%, var(--forest-900) 100%);
  padding: 30px 0;
  overflow: hidden;
  border-top: 1px solid rgba(235, 185, 60, 0.25);
  border-bottom: 1px solid rgba(235, 185, 60, 0.25);
}
.marquee::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 0%, rgba(63, 138, 15, 0.35), transparent 45%),
    radial-gradient(circle at 85% 100%, rgba(235, 185, 60, 0.12), transparent 45%);
  pointer-events: none;
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 18px;
  width: max-content;
  animation: marquee 38s linear infinite;
}
/* fixed fade at both edges */
.marquee::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--forest-900) 0%, transparent 8%, transparent 92%, var(--forest-900) 100%);
  pointer-events: none;
  z-index: 2;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.mq-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 28px;
  margin-right: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.mq-chip i {
  color: var(--gold-400);
  font-size: 0.95rem;
  transition: color 0.3s ease, transform 0.3s ease;
}
.mq-chip:hover {
  background: linear-gradient(120deg, var(--gold-400), var(--gold-500));
  border-color: var(--gold-400);
  color: var(--forest-900);
  transform: translateY(-3px);
}
.mq-chip:hover i { color: var(--forest-900); transform: rotate(-12deg) scale(1.15); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .marquee { padding: 20px 0; }
  .mq-chip { padding: 10px 20px; font-size: 0.75rem; }
}

/* ==========================================================
   Cards / grids
   ========================================================== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 26px;
}
.info-card {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
  overflow: hidden;
}
.info-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--leaf-500), var(--gold-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.info-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: transparent; }
.info-card:hover::before { transform: scaleX(1); }
.info-card .card-icon {
  width: 58px; height: 58px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  font-size: 1.4rem;
  color: var(--leaf-500);
  background: rgba(63, 138, 15, 0.1);
  margin-bottom: 20px;
  transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}
.info-card:hover .card-icon {
  background: linear-gradient(130deg, var(--leaf-500), var(--forest-600));
  color: var(--white);
  transform: rotate(-6deg) scale(1.06);
}
.info-card h3 { font-size: 1.12rem; color: var(--forest-800); margin-bottom: 10px; }
.info-card p { font-size: 0.92rem; color: var(--ink-soft); }

/* ==========================================================
   Fixed photo background (reusable)
   Uses .section.bg-fixed so it outranks .section.tint, which sets a flat
   background colour. Must stay after that rule in the file.
   ========================================================== */
.section.bg-fixed {
  /* Swap the photo per section by redefining --bg-photo (see #sponsor below).
     csr_background.jpg is a 203 KB build of assets/img/csr_background.png (2 MB) */
  --bg-photo: url("../img/csr_background.jpg");
  position: relative;
  background-image:
    linear-gradient(180deg,
      rgba(243, 248, 238, 0.42) 0%,
      rgba(243, 248, 238, 0.14) 30%,
      rgba(243, 248, 238, 0.10) 66%,
      rgba(243, 248, 238, 0.34) 100%),
    var(--bg-photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;   /* stays put while the cards scroll over it */
}
.section.bg-fixed > .container { position: relative; z-index: 1; }

/* With the scrim this light the photo shows through properly, so the header
   text needs its own soft halo to stay readable over the busier areas. */
.section.bg-fixed .section-head { position: relative; }
.section.bg-fixed .section-head::before {
  content: "";
  position: absolute;
  inset: -34px -48px -24px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(243, 248, 238, 0.97) 0%,
    rgba(243, 248, 238, 0.92) 50%,
    rgba(243, 248, 238, 0.55) 76%,
    transparent 92%);
}
.section.bg-fixed .section-sub { color: #46523f; }   /* a touch darker over the photo */

/* ---------- dark sections need the inverse scrim ----------
   .section.dark.bg-fixed (0,3,0) outranks .section.bg-fixed (0,2,0), so the
   light scrim and dark caption colour above are replaced, not layered. */
.section.dark.bg-fixed {
  background-image:
    linear-gradient(180deg,
      rgba(1, 33, 8, 0.80) 0%,
      rgba(1, 33, 8, 0.58) 28%,
      rgba(1, 20, 5, 0.62) 66%,
      rgba(1, 20, 5, 0.86) 100%),
    var(--bg-photo);
}
.section.dark.bg-fixed .section-head::before {
  background: radial-gradient(ellipse at center,
    rgba(1, 20, 5, 0.88) 0%,
    rgba(1, 20, 5, 0.7) 52%,
    rgba(1, 20, 5, 0.3) 76%,
    transparent 92%);
}
.section.dark.bg-fixed .section-sub { color: rgba(255, 255, 255, 0.82); }
/* With the scrim this light the photo shows through the cards, so they need
   their own body to keep the text legible. */
.section.dark.bg-fixed .step-card {
  background: rgba(1, 28, 8, 0.82);
  border-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px);
}
.section.dark.bg-fixed .step-card:hover { background: rgba(1, 51, 14, 0.88); }

/* the sponsor band uses the auditorium shot instead of the default photo.
   Framed low so the audience fills it — the stage screen carries its own
   headline, which would compete with this section's heading. */
#sponsor {
  --bg-photo: url("../img/csr_bg1.jpg");
  background-position: center 72%;
}
@media (max-width: 900px) {
  #sponsor { background-position: center 60%; }
}

/* iOS Safari ignores background-attachment:fixed and renders it badly zoomed,
   and a fixed layer repaints on every scroll frame on mobile. Pin it instead. */
@media (max-width: 900px) {
  .section.bg-fixed {
    background-attachment: scroll;
    background-position: center top;
  }
  /* On a narrow viewport `cover` blows the photo up, so lettering inside it
     (the stage screen) becomes large and competes with the card text. Deepen
     the scrim here — the detail isn't readable at this size anyway. */
  .section.dark.bg-fixed {
    background-image:
      linear-gradient(180deg,
        rgba(1, 33, 8, 0.96) 0%,
        rgba(1, 20, 5, 0.93) 50%,
        rgba(1, 20, 5, 0.97) 100%),
      var(--bg-photo);
  }
}

/* feature cards with images (Why Attend) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.feature-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  overflow: hidden;
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-hover);
}
.feature-img {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.feature-card:hover .feature-img img { transform: scale(1.12); }
.feature-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 33, 8, 0) 40%, rgba(1, 33, 8, 0.55) 100%);
  z-index: 1;
}
/* diagonal shine sweep on hover */
.feature-img::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  z-index: 2;
  transition: left 0.7s ease;
}
.feature-card:hover .feature-img::after { left: 130%; }

.feature-icon {
  position: absolute;
  left: 26px;
  top: -28px;
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  color: var(--white);
  background: linear-gradient(130deg, var(--leaf-500), var(--forest-600));
  box-shadow: 0 14px 30px rgba(63, 138, 15, 0.4);
  z-index: 3;
  transition: transform 0.4s ease, background 0.4s ease;
}
.feature-card:hover .feature-icon {
  transform: rotate(-8deg) scale(1.1);
  background: linear-gradient(130deg, var(--gold-400), var(--gold-500));
  color: var(--forest-900);
}
.feature-num {
  position: absolute;
  right: 20px;
  top: 16px;
  z-index: 2;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(1, 33, 8, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.feature-body {
  position: relative;
  padding: 44px 26px 28px;
}
.feature-body h3 {
  font-size: 1.12rem;
  color: var(--forest-800);
  margin-bottom: 10px;
  transition: color 0.3s ease;
}
.feature-card:hover .feature-body h3 { color: var(--leaf-500); }
.feature-body p { font-size: 0.92rem; color: var(--ink-soft); }
.feature-body .bar {
  width: 44px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--leaf-500), var(--gold-400));
  margin-bottom: 14px;
  transition: width 0.4s ease;
}
.feature-card:hover .feature-body .bar { width: 76px; }

@media (max-width: 1080px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .feature-grid { grid-template-columns: 1fr; } }

/* audience pills */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}
.audience-item {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 18px 22px;
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  font-size: 0.94rem;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.audience-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(235, 185, 60, 0.5);
}
.audience-item i { color: var(--gold-400); font-size: 1.15rem; flex-shrink: 0; }

/* ==========================================================
   Agenda timeline
   ========================================================== */
.timeline {
  position: relative;
  max-width: 860px;
  margin-inline: auto;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 26px; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--leaf-500), var(--gold-400));
}
.tl-item {
  position: relative;
  padding: 0 0 34px 78px;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute;
  left: 13px; top: 4px;
  width: 29px; height: 29px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--leaf-500);
  display: grid; place-items: center;
  font-size: 0.65rem;
  color: var(--leaf-500);
  z-index: 2;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.tl-item:hover .tl-dot {
  background: var(--leaf-500);
  color: var(--white);
  transform: scale(1.15);
}
.tl-card {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tl-item:hover .tl-card { transform: translateX(8px); box-shadow: var(--shadow-soft); }
.tl-time {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold-500);
  background: rgba(235, 185, 60, 0.14);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.tl-card h3 { font-size: 1.08rem; color: var(--forest-800); margin-bottom: 6px; }
.tl-card p { font-size: 0.9rem; color: var(--ink-soft); }

/* ==========================================================
   Award categories
   ========================================================== */
.award-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}
.award-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.award-card::after {
  content: "";
  position: absolute;
  width: 160px; height: 160px;
  border-radius: 50%;
  right: -60px; top: -60px;
  background: radial-gradient(circle, rgba(63, 138, 15, 0.09), transparent 70%);
  transition: transform 0.4s ease;
}
.award-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }
.award-card:hover::after { transform: scale(1.6); }
.award-emoji {
  font-size: 2rem;
  width: 62px; height: 62px;
  display: grid; place-items: center;
  background: var(--bg-light);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
}
.award-card h3 { font-size: 1.1rem; color: var(--forest-800); margin-bottom: 8px; }
.award-card p { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 16px; }
.award-card .count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--leaf-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- agenda preview (home) ---------- */
.agenda-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.ap-card {
  position: relative;
  padding: 28px 24px 24px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--card-border);
  transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}
.ap-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(235, 185, 60, 0.5);
}
.ap-icon {
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  font-size: 1.15rem;
  color: var(--leaf-500);
  background: rgba(63, 138, 15, 0.1);
  margin-bottom: 16px;
  transition: background 0.3s ease, color 0.3s ease, transform 0.35s ease;
}
.ap-card:hover .ap-icon {
  background: linear-gradient(130deg, var(--gold-400), var(--gold-500));
  color: var(--forest-900);
  transform: rotate(-7deg) scale(1.07);
}
.ap-time {
  display: block;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gold-500);
  margin-bottom: 6px;
}
.ap-card h3 { font-size: 1.02rem; color: var(--forest-800); margin-bottom: 8px; line-height: 1.35; }
.ap-card p { font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 14px; }
.ap-kind {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leaf-500);
  background: rgba(63, 138, 15, 0.1);
  padding: 4px 12px;
  border-radius: 999px;
}

@media (max-width: 1080px) { .agenda-preview { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .agenda-preview { grid-template-columns: 1fr; } }

/* ==========================================================
   Agenda page
   ========================================================== */
.ag-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.ag-stat {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--card-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ag-stat:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(235, 185, 60, 0.5);
}
.ag-stat-icon {
  width: 50px; height: 50px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.15rem;
  color: var(--leaf-500);
  background: rgba(63, 138, 15, 0.1);
  transition: background 0.3s ease, color 0.3s ease, transform 0.35s ease;
}
.ag-stat:hover .ag-stat-icon {
  background: linear-gradient(130deg, var(--gold-400), var(--gold-500));
  color: var(--forest-900);
  transform: rotate(-8deg) scale(1.06);
}
.ag-stat b {
  display: block;
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--forest-800);
}
.ag-stat small {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- schedule ---------- */
.agenda-list {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
}
/* the spine the whole day hangs from */
.agenda-list::before {
  content: "";
  position: absolute;
  left: 148px;
  top: 10px; bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold-400), var(--leaf-500) 55%, var(--forest-600));
}

.ag-item {
  position: relative;
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 34px;
  padding-bottom: 18px;
}
.ag-item:last-child { padding-bottom: 0; }

.ag-time {
  text-align: right;
  padding-top: 20px;
  position: relative;
}
.ag-time strong {
  display: block;
  font-family: var(--font-head);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--forest-800);
  white-space: nowrap;
}
/* node on the spine */
.ag-clock {
  position: absolute;
  right: -45px; top: 16px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.78rem;
  color: var(--leaf-500);
  background: var(--white);
  border: 2px solid var(--card-border);
  z-index: 2;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.ag-item:hover .ag-clock {
  background: linear-gradient(130deg, var(--gold-400), var(--gold-500));
  border-color: transparent;
  color: var(--forest-900);
  transform: scale(1.12);
}

.ag-card {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ag-item:hover .ag-card {
  transform: translateX(6px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(235, 185, 60, 0.45);
}
.ag-kind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  margin-bottom: 11px;
}
.ag-card h3 { font-size: 1.1rem; color: var(--forest-800); margin-bottom: 6px; }
.ag-card p { font-size: 0.9rem; color: var(--ink-soft); }

/* colour-code the session types */
.ag-keynote  .ag-kind { color: #8a5a00; background: rgba(235, 185, 60, 0.2); }
.ag-panel    .ag-kind { color: var(--leaf-500); background: rgba(63, 138, 15, 0.12); }
.ag-break    .ag-kind { color: var(--ink-soft); background: rgba(86, 97, 80, 0.12); }
.ag-ceremony .ag-kind {
  color: var(--forest-900);
  background: linear-gradient(120deg, var(--gold-400), var(--gold-500));
}
.ag-ceremony .ag-card {
  border-color: rgba(235, 185, 60, 0.55);
  background: linear-gradient(120deg, rgba(235, 185, 60, 0.1), rgba(255, 255, 255, 0.4) 60%);
}
.ag-break .ag-card { background: var(--bg-light); }

@media (max-width: 1080px) {
  .ag-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  /* the spine and the right-aligned time column stop working — stack instead */
  .agenda-list::before { display: none; }
  .ag-item { grid-template-columns: 1fr; gap: 10px; padding-bottom: 16px; }
  .ag-time {
    text-align: left;
    padding-top: 0;
    display: flex;
    align-items: center;
    gap: 11px;
  }
  .ag-clock { position: static; width: 30px; height: 30px; font-size: 0.72rem; }
  .ag-item:hover .ag-card { transform: none; }
}
@media (max-width: 640px) {
  .ag-stat { padding: 18px; gap: 13px; }
  .ag-stat-icon { width: 44px; height: 44px; font-size: 1rem; }
  .ag-stat b { font-size: 1.45rem; }
  .ag-card { padding: 18px 20px; }
}

/* ==========================================================
   Awards showcase (home) — sticky panel + category tiles
   ========================================================== */
.awards-split {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 38px;
  align-items: start;
}

/* ---------- left: dark showcase panel ---------- */
.awards-panel {
  position: sticky;
  top: 120px;
  padding: 40px 34px;
  border-radius: var(--radius-lg);
  color: var(--white);
  overflow: hidden;
  background: linear-gradient(160deg, var(--forest-900) 0%, var(--forest-700) 58%, var(--forest-600) 100%);
  box-shadow: 0 26px 60px rgba(1, 51, 14, 0.28);
}
.awards-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 0%, rgba(235, 185, 60, 0.20), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(174, 218, 114, 0.16), transparent 48%);
  pointer-events: none;
}
.panel-watermark {
  position: absolute;
  right: -22px; bottom: -26px;
  font-size: 11rem;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  transform: rotate(-12deg);
}
.awards-panel > * { position: relative; z-index: 1; }
.awards-panel .eyebrow { color: var(--lime-300); }
.awards-panel .eyebrow::before { background: var(--gold-400); }
.awards-panel h2 {
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.22;
  margin-bottom: 14px;
}
.awards-panel > p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.94rem;
  margin-bottom: 26px;
}

.awards-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin-bottom: 26px;
}
.figure {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  transition: background 0.3s ease, transform 0.3s ease;
}
.figure:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-4px); }
.figure b {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--gold-400);
}
.figure span {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

.panel-points { display: grid; gap: 11px; margin-bottom: 28px; }
.panel-points li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.86);
}
.panel-points i {
  width: 21px; height: 21px;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.58rem;
  color: var(--forest-900);
  background: linear-gradient(130deg, var(--gold-400), var(--gold-500));
}

/* ---------- right: category tiles ---------- */
.cat-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cat-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid var(--card-border);
  overflow: hidden;
  transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}
/* gold rail slides down on hover */
.cat-tile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold-400), var(--leaf-500));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cat-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(1, 51, 14, 0.14);
  border-color: rgba(235, 185, 60, 0.5);
}
.cat-tile:hover::before { transform: scaleY(1); }

.cat-rank {
  position: absolute;
  top: 9px; right: 13px;
  font-family: var(--font-head);
  font-size: 0.76rem;
  font-weight: 800;
  color: rgba(10, 97, 25, 0.22);
  transition: color 0.3s ease;
}
.cat-tile:hover .cat-rank { color: var(--gold-500); }

.cat-emoji {
  width: 48px; height: 48px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(235, 185, 60, 0.32), rgba(63, 138, 15, 0.12) 70%);
  border: 2px solid rgba(235, 185, 60, 0.42);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cat-tile:hover .cat-emoji { transform: scale(1.09) rotate(-6deg); }

.cat-text { flex: 1; min-width: 0; }
.cat-text strong {
  display: block;
  font-family: var(--font-head);
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--forest-800);
  line-height: 1.3;
  margin-bottom: 3px;
  transition: color 0.3s ease;
}
.cat-tile:hover .cat-text strong { color: var(--leaf-500); }
.cat-text small {
  display: block;
  font-size: 0.76rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.cat-go {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.72rem;
  color: var(--leaf-500);
  background: rgba(63, 138, 15, 0.1);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.cat-tile:hover .cat-go {
  background: linear-gradient(130deg, var(--gold-400), var(--gold-500));
  color: var(--forest-900);
  transform: translateX(3px);
}

@media (max-width: 1080px) {
  .awards-split { grid-template-columns: 1fr; gap: 30px; }
  .awards-panel { position: static; }
  .awards-figures { max-width: 420px; }
}
@media (max-width: 760px) {
  .cat-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .awards-panel { padding: 32px 24px; }
  .panel-watermark { font-size: 8rem; }
  .cat-tile { padding: 14px 16px; gap: 12px; }
  .cat-emoji { width: 42px; height: 42px; font-size: 1.15rem; }
  .cat-text small { display: none; }   /* keep phone tiles compact */
  .cat-rank { top: 7px; right: 10px; }
}

/* ---------- Award category accordion ---------- */
.acc-item {
  position: relative;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  margin-bottom: 18px;
  overflow: hidden;
  transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}
/* gold rail down the left edge, grows when the panel opens */
.acc-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500) 55%, var(--leaf-500));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.acc-item:hover { border-color: rgba(235, 185, 60, 0.55); box-shadow: var(--shadow-soft); }
.acc-item.open {
  border-color: transparent;
  box-shadow: 0 22px 55px rgba(1, 51, 14, 0.16);
}
.acc-item.open::before,
.acc-item:hover::before { transform: scaleY(1); }

/* header row: the toggle button plus its own Nominate link.
   They are siblings because an <a> inside a <button> is invalid HTML and
   would also fire the accordion toggle on click. */
.acc-top {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.acc-top .acc-head { flex: 1; min-width: 0; }

.acc-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  align-self: center;
  margin-right: 22px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--forest-900);
  background: linear-gradient(120deg, var(--gold-400), var(--gold-500));
  box-shadow: 0 8px 20px rgba(209, 154, 32, 0.32);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.acc-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(209, 154, 32, 0.45);
  filter: brightness(1.05);
}
.acc-cta i { font-size: 0.85rem; }

.acc-head {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  background: none;
  border: none;
  text-align: left;
  transition: background 0.4s ease;
}
.acc-item.open .acc-head {
  background: linear-gradient(100deg, rgba(235, 185, 60, 0.13), rgba(63, 138, 15, 0.07) 55%, transparent);
}
/* light sweeps across the header the moment it opens */
.acc-head::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}
.acc-item.open .acc-head::after { animation: accSheen 1.1s ease-out 0.05s; }
@keyframes accSheen {
  0%   { left: -60%; opacity: 0; }
  30%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* rank number */
.acc-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1rem;
  color: rgba(10, 97, 25, 0.32);
  flex-shrink: 0;
  width: 26px;
  transition: color 0.35s ease;
}
.acc-item.open .acc-num { color: var(--gold-500); }

/* emoji medallion */
.acc-head .award-emoji {
  margin: 0;
  width: 58px; height: 58px;
  font-size: 1.65rem;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(235, 185, 60, 0.35), rgba(63, 138, 15, 0.12) 70%);
  border: 2px solid rgba(235, 185, 60, 0.45);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.65);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}
.acc-item:hover .award-emoji { transform: scale(1.07) rotate(-5deg); }
.acc-item.open .award-emoji {
  transform: scale(1.05);
  box-shadow: 0 0 0 5px rgba(235, 185, 60, 0.18), inset 0 2px 6px rgba(255, 255, 255, 0.65);
}

.acc-head h3 {
  flex: 1;
  font-size: 1.12rem;
  color: var(--forest-800);
  transition: color 0.3s ease;
}
.acc-item.open .acc-head h3 { color: var(--forest-700); }

.acc-head .acc-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--leaf-500);
  background: rgba(63, 138, 15, 0.09);
  border: 1px solid rgba(63, 138, 15, 0.16);
  padding: 6px 15px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.acc-item.open .acc-count {
  background: linear-gradient(120deg, var(--gold-400), var(--gold-500));
  border-color: transparent;
  color: var(--forest-900);
}

/* chevron in a circular button */
.acc-head .chev {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  color: var(--ink-soft);
  font-size: 0.82rem;
  transition: transform 0.4s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.acc-item.open .chev {
  transform: rotate(180deg);
  background: var(--forest-700);
  border-color: var(--forest-700);
  color: var(--white);
}

.acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.acc-list {
  padding: 6px 26px 26px;
  display: grid;
  /* wider than before: each row now also reserves space for a Nominate chip */
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 12px 20px;
}

/* each award title reads like a small plaque */
.acc-list li {
  display: flex;
  gap: 13px;
  align-items: center;
  font-size: 0.92rem;
  color: var(--ink-soft);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-light);
  border: 1px solid transparent;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease,
              background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.acc-item.open .acc-list li { opacity: 1; transform: none; }
/* stagger the plaques in as the panel opens */
.acc-item.open .acc-list li:nth-child(1)  { transition-delay: 0.08s; }
.acc-item.open .acc-list li:nth-child(2)  { transition-delay: 0.13s; }
.acc-item.open .acc-list li:nth-child(3)  { transition-delay: 0.18s; }
.acc-item.open .acc-list li:nth-child(4)  { transition-delay: 0.23s; }
.acc-item.open .acc-list li:nth-child(5)  { transition-delay: 0.28s; }
.acc-item.open .acc-list li:nth-child(6)  { transition-delay: 0.33s; }
.acc-item.open .acc-list li:nth-child(7)  { transition-delay: 0.38s; }
.acc-item.open .acc-list li:nth-child(8)  { transition-delay: 0.43s; }
.acc-item.open .acc-list li:nth-child(9)  { transition-delay: 0.48s; }
.acc-item.open .acc-list li:nth-child(10) { transition-delay: 0.53s; }
.acc-list li:hover {
  transition-delay: 0s;
  background: var(--white);
  border-color: rgba(235, 185, 60, 0.6);
  color: var(--forest-800);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(1, 51, 14, 0.1);
}
.acc-title { flex: 1; min-width: 0; }

/* per-award Nominate chip — quiet until you reach for it */
.acc-nom {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--leaf-500);
  background: rgba(63, 138, 15, 0.1);
  border: 1px solid rgba(63, 138, 15, 0.2);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.25s ease, transform 0.25s ease,
              background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.acc-nom i { font-size: 0.68rem; }
.acc-list li:hover .acc-nom,
.acc-nom:focus-visible { opacity: 1; transform: none; }
.acc-nom:hover {
  background: linear-gradient(120deg, var(--gold-400), var(--gold-500));
  border-color: transparent;
  color: var(--forest-900);
}
/* touch screens have no hover, so the chip must always be visible there */
@media (hover: none) {
  .acc-nom { opacity: 1; transform: none; }
}

.acc-list li > i {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.76rem;
  color: var(--gold-500);
  background: rgba(235, 185, 60, 0.16);
  transition: background 0.25s ease, color 0.25s ease, transform 0.35s ease;
}
.acc-list li:hover > i {
  background: linear-gradient(130deg, var(--gold-400), var(--gold-500));
  color: var(--forest-900);
  transform: rotate(-10deg) scale(1.1);
}

@media (max-width: 640px) {
  .acc-item { margin-bottom: 14px; }
  .acc-num { display: none; }
  .acc-head .award-emoji { width: 46px; height: 46px; font-size: 1.3rem; }
  .acc-head h3 { font-size: 0.98rem; }
  .acc-head .chev { width: 32px; height: 32px; font-size: 0.75rem; }
  .acc-cta { margin-right: 12px; padding: 9px 12px; }
  .acc-cta span { display: none; }          /* icon-only, keeps the header tidy */
  .acc-nom { padding: 5px 10px; font-size: 0.68rem; }
  .acc-nom i { display: none; }
}

/* process steps */
/* Flex rather than grid so a short final row (6 cards = 4 + 2) centres
   instead of hanging off to the left. */
.steps-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
  counter-reset: step;
}
.step-card {
  /* four across on desktop: (100% - three 26px gaps) / 4 */
  flex: 0 1 calc(25% - 19.5px);
  min-width: 230px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: 34px 26px;
  position: relative;
  transition: transform 0.3s ease, background 0.3s ease;
}
.step-card:hover { transform: translateY(-8px); background: rgba(255, 255, 255, 0.1); }
.step-num {
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 800;
  background: linear-gradient(120deg, var(--gold-400), rgba(235, 185, 60, 0.25));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 14px;
}
.step-card h3 { color: var(--white); font-size: 1.08rem; margin-bottom: 10px; }
.step-card p { color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; }

/* ==========================================================
   Speakers & Sponsorship contacts
   ========================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 40px;
  align-items: stretch;
}

/* left: image panel */
.contact-visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 440px;
  display: flex;
  box-shadow: var(--shadow-soft);
}
.contact-visual img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.contact-visual:hover img { transform: scale(1.08); }
.contact-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(1, 33, 8, 0.42) 0%, rgba(1, 71, 18, 0.9) 65%, rgba(1, 33, 8, 0.95) 100%);
}
.contact-visual-copy {
  position: relative;
  z-index: 2;
  padding: 36px 32px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.cv-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.cv-badge i { color: var(--gold-400); }
.contact-visual-copy h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  margin-bottom: 10px;
}
.contact-visual-copy > p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.94rem;
  margin-bottom: 20px;
}
.cv-points { display: grid; gap: 11px; }
.cv-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
}
.cv-points i {
  width: 22px; height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.62rem;
  color: var(--forest-900);
  background: linear-gradient(130deg, var(--gold-400), var(--gold-500));
}

/* right: contact cards */
.contact-cards {
  display: grid;
  gap: 20px;
  align-content: center;
}
.contact-card {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 26px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--card-border);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.contact-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--leaf-500), var(--gold-400));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s ease;
}
.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: transparent;
}
.contact-card:hover::before { transform: scaleY(1); }

.contact-avatar {
  width: 76px; height: 76px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--forest-900);
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  box-shadow: 0 10px 26px rgba(209, 154, 32, 0.38);
  border: 3px solid var(--white);
  outline: 2px solid rgba(235, 185, 60, 0.45);
  transition: transform 0.4s ease;
}
.contact-card:hover .contact-avatar { transform: scale(1.06) rotate(-4deg); }

.contact-info { min-width: 0; flex: 1; }
.contact-info h3 {
  font-size: 1.16rem;
  color: var(--forest-800);
  margin-bottom: 2px;
}
.contact-role {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leaf-500);
  background: rgba(63, 138, 15, 0.1);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.contact-rows { display: grid; gap: 9px; margin-bottom: 18px; }
.contact-rows a {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  word-break: break-word;
  transition: color 0.25s ease;
}
.contact-rows a i {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 0.78rem;
  color: var(--leaf-500);
  background: rgba(63, 138, 15, 0.1);
  transition: background 0.25s ease, color 0.25s ease;
}
.contact-rows a:hover { color: var(--forest-700); }
.contact-rows a:hover i {
  background: linear-gradient(130deg, var(--leaf-500), var(--forest-600));
  color: var(--white);
}

.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-actions .btn { padding: 10px 22px; font-size: 0.85rem; }
.btn-ghost {
  border-color: rgba(10, 97, 25, 0.28);
  color: var(--forest-700);
  background: transparent;
}
.btn-ghost:hover {
  background: var(--forest-700);
  border-color: var(--forest-700);
  color: var(--white);
  transform: translateY(-3px);
}

@media (max-width: 1080px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-visual { min-height: 360px; }
}
@media (max-width: 640px) {
  .contact-visual { min-height: 320px; }
  .contact-visual-copy { padding: 28px 22px; }
  .contact-card { flex-direction: column; gap: 16px; padding: 24px 20px; }
  .contact-avatar { width: 64px; height: 64px; font-size: 1.3rem; }
  .contact-actions .btn { flex: 1; justify-content: center; }
}

/* ==========================================================
   CTA band
   ========================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--forest-800), var(--forest-600) 60%, var(--leaf-500));
  border-radius: var(--radius-lg);
  padding: 66px 56px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-band::before {
  content: "";
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  border: 40px solid rgba(255, 255, 255, 0.06);
  right: -100px; top: -120px;
}
.cta-band h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); margin-bottom: 10px; }
.cta-band p { color: rgba(255, 255, 255, 0.8); max-width: 520px; }
.cta-band .btn-row { display: flex; gap: 16px; flex-wrap: wrap; position: relative; z-index: 1; }

/* ==========================================================
   Registration page
   ========================================================== */
.page-hero {
  position: relative;
  padding: 170px 0 100px;
  background: linear-gradient(130deg, var(--forest-900), var(--forest-700) 60%, #0b7020);
  color: var(--white);
  overflow: hidden;
  text-align: center;
}
.page-hero .hero-grid { opacity: 0.8; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin-bottom: 14px; }
.page-hero p { color: rgba(255, 255, 255, 0.8); max-width: 640px; margin-inline: auto; }
.crumb {
  display: inline-flex; gap: 10px; align-items: center;
  margin-top: 22px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}
.crumb a:hover { color: var(--gold-400); }

/* ==========================================================
   Award banner — animated inner-page hero
   ========================================================== */
.award-hero { padding: 180px 0 110px; }

/* gold ribbon along the bottom edge */
.award-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, var(--gold-400) 25%, var(--gold-500) 50%, var(--gold-400) 75%, transparent);
}

/* stage spotlight beams */
.spotlights, .sparkles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.spotlights span {
  position: absolute;
  top: -40%;
  width: 26vw;
  height: 150%;
  transform: rotate(var(--rot));
  transform-origin: top center;
  background: linear-gradient(180deg, rgba(235, 185, 60, 0.26), rgba(235, 185, 60, 0) 72%);
  filter: blur(16px);
  animation: beamSway var(--dur, 8s) ease-in-out infinite alternate;
}
.spotlights span:nth-child(1) { left: 10%;  --rot: 15deg; --dur: 7.5s; }
.spotlights span:nth-child(2) { right: 10%; --rot: -15deg; --dur: 9.5s; }
@keyframes beamSway {
  from { transform: rotate(calc(var(--rot) - 7deg)); opacity: 0.45; }
  to   { transform: rotate(calc(var(--rot) + 7deg)); opacity: 1; }
}

/* rising gold sparkles */
.sparkles i {
  position: absolute;
  left: var(--x);
  bottom: -14px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 12px 2px rgba(235, 185, 60, 0.75);
  opacity: 0;
  animation: sparkleRise var(--dur, 9s) linear var(--d, 0s) infinite;
}
@keyframes sparkleRise {
  0%   { transform: translateY(0) scale(var(--s, 1)); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 0.55; }
  100% { transform: translateY(-420px) scale(var(--s, 1)); opacity: 0; }
}

/* trophy emblem */
.award-emblem {
  position: relative;
  z-index: 2;
  width: 96px; height: 96px;
  margin: 0 auto 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 2.15rem;
  color: var(--forest-900);
  background: linear-gradient(135deg, #fcd867, var(--gold-400) 45%, var(--gold-500));
  box-shadow: 0 18px 45px rgba(209, 154, 32, 0.45), inset 0 2px 8px rgba(255, 255, 255, 0.7);
  animation: emblemIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.award-emblem::before,
.award-emblem::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px solid rgba(235, 185, 60, 0.55);
  animation: haloPulse 2.8s ease-out infinite;
}
.award-emblem::after { animation-delay: 1.4s; }
@keyframes emblemIn {
  from { transform: scale(0.35) rotate(-30deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes haloPulse {
  0%   { transform: scale(1);   opacity: 0.85; }
  100% { transform: scale(1.75); opacity: 0; }
}

/* headline: words rise in sequence, then a shine sweeps across */
.award-title {
  position: relative;
  /* block-level so it keeps its own line, but shrink-wrapped so the
     shine sweep spans only the text and not the full container width */
  display: block;
  width: fit-content;
  margin-inline: auto;
  overflow: hidden;          /* masks the words as they rise */
  padding: 0 0.08em 0.14em;  /* room for descenders so they aren't clipped */
}
.award-title .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  animation: wordUp 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.award-title .w:nth-child(1) { animation-delay: 0.30s; }
.award-title .w:nth-child(2) { animation-delay: 0.42s; }
.award-title .w:nth-child(3) { animation-delay: 0.54s; }
.award-title .w:nth-child(4) { animation-delay: 0.66s; }
@keyframes wordUp {
  to { opacity: 1; transform: none; }
}
.award-title::after {
  content: "";
  position: absolute;
  top: 0; left: -70%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: titleShine 4.5s ease-in-out 1.4s infinite;
}
@keyframes titleShine {
  0%, 62%  { left: -70%; }
  100%     { left: 150%; }
}

/* ---------- awards page: banner artwork behind the hero ----------
   The artwork carries its own headline and category tiles down the left, so
   the scrim is nearly solid there (hiding them) and clears to the right,
   leaving the gold trophy as the visual anchor beside the page copy. */
.award-hero.has-banner {
  text-align: left;
  padding: 186px 0 104px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 12% 18%, rgba(235, 185, 60, 0.12), transparent 52%),
    linear-gradient(115deg, var(--forest-900) 0%, #02300c 48%, var(--forest-700) 100%);
}
/* trophy artwork anchored right, its left edge dissolved into the gradient */
.banner-art {
  position: absolute;
  inset: 0 0 0 auto;
  width: 46%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 44%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 44%, #000 100%);
}
.banner-copy { max-width: 620px; }
.award-hero.has-banner .award-title { margin-inline: 0; }
.award-hero.has-banner p { margin-inline: 0; }
.award-hero.has-banner .crumb { margin-top: 6px; }

/* the fixed header sits over the artwork; darken the top strip so the nav
   links keep contrast against bright areas of the photo */
.award-hero.has-banner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 200px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(1, 20, 5, 0.8) 0%, rgba(1, 20, 5, 0.35) 55%, transparent 100%);
}

/* the registration artwork is near-square, so it needs a wider column */
.award-hero.has-banner.banner-wide .banner-art { width: 54%; }
/* keep the copy clear of the artwork's gold curve */
.award-hero.has-banner.banner-wide .banner-copy { max-width: 540px; }
.award-hero.has-banner.banner-wide {
  /* the artwork's own gold curve is the divider — fade only its far edge */
  background:
    radial-gradient(ellipse at 10% 20%, rgba(235, 185, 60, 0.1), transparent 50%),
    linear-gradient(112deg, var(--forest-900) 0%, #022f0c 52%, #033a10 100%);
}
.award-hero.has-banner.banner-wide .banner-art {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
}

/* quick-read figures / feature chips under the intro */
.banner-stats,
.banner-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 6px;
}
.banner-points span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.banner-points span:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(235, 185, 60, 0.5);
  transform: translateY(-3px);
}
.banner-points i { color: var(--gold-400); font-size: 0.9rem; }

.banner-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.banner-stats span:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(235, 185, 60, 0.5);
  transform: translateY(-3px);
}
.banner-stats b {
  font-family: var(--font-head);
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--gold-400);
}

@media (max-width: 900px) {
  /* the trophy sits far right — on a narrow frame the copy would land on top
     of it, so centre everything and darken the whole banner evenly */
  .award-hero.has-banner {
    text-align: center;
    padding: 168px 0 84px;
  }
  /* no room to sit beside the copy — drop it behind as a faint backdrop */
  .award-hero.has-banner.banner-wide .banner-art { width: 100%; }
  .banner-art {
    width: 100%;
    opacity: 0.3;
    object-position: center 30%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 62%, transparent 92%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 62%, transparent 92%);
  }
  .banner-copy { max-width: 100%; }
  .award-hero.has-banner .award-title { margin-inline: auto; }
  .award-hero.has-banner p { margin-inline: auto; }
  .award-hero.has-banner .hero-tag { justify-content: center; }
  .banner-stats,
  .banner-points { justify-content: center; }
}
@media (max-width: 480px) {
  .banner-stats span { padding: 8px 14px; font-size: 0.7rem; }
  .banner-stats b { font-size: 1.1rem; }
}

.gold-text {
  background: linear-gradient(100deg, var(--gold-400), #fcd867 55%, var(--gold-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 640px) {
  .award-hero { padding: 168px 0 80px; }
  .award-emblem { width: 76px; height: 76px; font-size: 1.7rem; margin-bottom: 18px; }
  .spotlights span { width: 46vw; }
}

.reg-layout {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 44px;
  align-items: start;
}

.form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-soft);
  padding: 44px;
}
.form-card h2 { color: var(--forest-800); font-size: 1.5rem; margin-bottom: 6px; }
.form-card > p { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 30px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
/* display:flex above would otherwise beat the hidden attribute */
.field[hidden] { display: none; }
.field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--forest-800);
  letter-spacing: 0.02em;
}
.field label span { color: #e0483c; }
.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 0.94rem;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(10, 97, 25, 0.18);
  background: var(--bg-light);
  color: var(--ink);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  outline: none;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--leaf-500);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(63, 138, 15, 0.12);
}
.field .err {
  font-size: 0.76rem;
  color: #e0483c;
  display: none;
}
.field .hint {
  font-size: 0.75rem;
  color: var(--ink-soft);
  opacity: 0.85;
}
.field select:disabled {
  background: rgba(10, 97, 25, 0.05);
  color: rgba(86, 97, 80, 0.6);
  cursor: not-allowed;
}
/* flashes when the sub-category list is populated */
select.just-filled {
  animation: fieldFlash 0.9s ease;
}
@keyframes fieldFlash {
  0%   { box-shadow: 0 0 0 0 rgba(235, 185, 60, 0.55); border-color: var(--gold-400); }
  100% { box-shadow: 0 0 0 10px rgba(235, 185, 60, 0); }
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #e0483c; }
.field.invalid .err { display: block; }
.field.invalid .hint { display: none; }   /* show the error, not the hint */

/* consent checkbox sits outside .field, so it gets its own error state */
.form-note.invalid { color: #e0483c; }
.form-note.invalid input {
  outline: 2px solid #e0483c;
  outline-offset: 2px;
  border-radius: 3px;
}

.form-note {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: var(--ink-soft);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.form-note input { width: auto; margin-top: 4px; }

.form-success {
  display: none;
  text-align: center;
  padding: 40px 10px;
}
.form-success.show { display: block; animation: fadeUp 0.6s ease; }
.form-success .tick {
  width: 86px; height: 86px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(111, 191, 59, 0.14);
  color: var(--fresh-400);
  font-size: 2.4rem;
}
.form-success h3 { color: var(--forest-800); font-size: 1.4rem; margin-bottom: 10px; }
.form-success p { color: var(--ink-soft); font-size: 0.95rem; }

.side-card {
  background: linear-gradient(160deg, var(--forest-800), var(--forest-600));
  border-radius: var(--radius-lg);
  color: var(--white);
  padding: 38px 34px;
  position: sticky;
  top: 110px;
}
.side-card h3 { font-size: 1.25rem; margin-bottom: 20px; }
.side-card ul { display: grid; gap: 14px; margin-bottom: 28px; }
.side-card li { display: flex; gap: 12px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); }
.side-card li i { color: var(--gold-400); margin-top: 4px; flex-shrink: 0; }
.side-divider { height: 1px; background: rgba(255, 255, 255, 0.15); margin: 26px 0; }
.side-contact { display: grid; gap: 12px; font-size: 0.9rem; }
.side-contact a { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.85); transition: color 0.25s; }
.side-contact a:hover { color: var(--gold-400); }
.side-contact i { color: var(--gold-400); }

/* ==========================================================
   Award nomination form
   ========================================================== */
.nom-layout {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 34px;
  align-items: start;
}
.nom-card {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 40px;
}

/* numbered section headers */
.nom-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 34px 0 20px;
  padding-top: 26px;
  border-top: 1px solid var(--card-border);
}
.nom-step:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.nom-num {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--forest-900);
  background: linear-gradient(130deg, var(--gold-400), var(--gold-500));
  box-shadow: 0 6px 16px rgba(209, 154, 32, 0.35);
}
.nom-step h2 { font-size: 1.12rem; color: var(--forest-800); margin-bottom: 3px; }
.nom-step p { font-size: 0.86rem; color: var(--ink-soft); }

.field .opt { font-weight: 500; color: var(--ink-soft); font-size: 0.74rem; }
.field .hint { font-size: 0.76rem; color: var(--ink-soft); }
.field.invalid .hint { display: none; }
.field input:disabled {
  background: rgba(86, 97, 80, 0.06);
  color: var(--ink-soft);
  cursor: not-allowed;
}

/* supporting-document checkboxes */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.chk {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(10, 97, 25, 0.18);
  background: var(--bg-light);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.chk:hover { border-color: rgba(235, 185, 60, 0.6); }
.chk input { width: 17px; height: 17px; accent-color: var(--leaf-500); cursor: pointer; }
.chk:has(input:checked) {
  border-color: var(--leaf-500);
  background: rgba(63, 138, 15, 0.08);
}

.form-note.declaration {
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: rgba(235, 185, 60, 0.09);
  border: 1px solid rgba(235, 185, 60, 0.4);
  font-size: 0.9rem;
  color: var(--ink);
}
.form-note.invalid {
  background: rgba(224, 72, 60, 0.08);
  border-color: rgba(224, 72, 60, 0.5);
}

@media (max-width: 1080px) {
  .nom-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nom-card { padding: 26px 20px; }
  .nom-step { gap: 12px; margin: 26px 0 16px; padding-top: 20px; }
  .nom-num { width: 32px; height: 32px; font-size: 0.85rem; }
  .nom-step h2 { font-size: 1rem; }
  .check-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   Footer
   ========================================================== */
.site-footer {
  background: var(--forest-900);
  color: rgba(255, 255, 255, 0.75);
  padding: 76px 0 0;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 138, 15, 0.25), transparent 70%);
  top: -180px; right: -120px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 46px;
  position: relative;
  padding-bottom: 52px;
}
.footer-grid h4 {
  color: var(--white);
  font-size: 1rem;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 12px;
}
.footer-grid h4::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 34px; height: 2px;
  background: var(--gold-400);
}
.footer-about p { font-size: 0.9rem; margin: 18px 0 22px; max-width: 320px; }
.socials { display: flex; gap: 12px; }
.socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}
.socials a:hover {
  background: var(--gold-400);
  border-color: var(--gold-400);
  color: var(--forest-900);
  transform: translateY(-4px);
}
.footer-links li { margin-bottom: 12px; }
.footer-links a {
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.25s ease, gap 0.25s ease;
}
.footer-links a::before { content: "›"; color: var(--gold-400); }
.footer-links a:hover { color: var(--white); gap: 12px; }
.footer-contact li {
  display: flex; gap: 14px;
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.footer-contact i { color: var(--gold-400); margin-top: 4px; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.82rem;
}

/* ==========================================================
   Sticky "Express Interest" tab
   ========================================================== */
.express-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 12px 20px;
  border-radius: 14px 0 0 14px;
  background: linear-gradient(160deg, var(--leaf-500), var(--forest-600));
  color: var(--white);
  box-shadow: -8px 10px 30px rgba(1, 51, 14, 0.35);
  transition: transform 0.3s ease, background 0.3s ease,
              color 0.3s ease, box-shadow 0.3s ease;
}
.express-tab:hover {
  transform: translateY(-50%) translateX(-4px);
  background: linear-gradient(160deg, var(--gold-400), var(--gold-500));
  color: var(--forest-900);
  box-shadow: -10px 14px 38px rgba(209, 154, 32, 0.45);
}
.express-icon {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.express-tab:hover .express-icon {
  background: rgba(1, 33, 8, 0.15);
  border-color: rgba(1, 33, 8, 0.22);
}
.express-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);   /* reads bottom-to-top */
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* phones/tablets: a rotated edge tab is unusable — use a bottom action bar */
@media (max-width: 900px) {
  .express-tab {
    top: auto;
    bottom: 0;
    left: 0; right: 0;
    transform: none;
    flex-direction: row;
    justify-content: center;
    gap: 11px;
    padding: 14px 18px;
    border-radius: 0;
    box-shadow: 0 -8px 26px rgba(1, 51, 14, 0.3);
  }
  .express-tab:hover { transform: none; }
  .express-text {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 0.86rem;
    letter-spacing: 0.12em;
  }
  .express-icon { width: 30px; height: 30px; font-size: 0.8rem; }

  /* keep the bar clear of the back-to-top button and the footer's last line */
  .to-top { bottom: 78px; }
  .site-footer { padding-bottom: 64px; }
}

/* back to top */
.to-top {
  position: fixed;
  right: 26px; bottom: 26px;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(130deg, var(--gold-400), var(--gold-500));
  color: var(--forest-900);
  font-size: 1.05rem;
  display: grid; place-items: center;
  box-shadow: 0 14px 30px rgba(209, 154, 32, 0.4);
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 900;
}
.to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top:hover { transform: translateY(-4px); }

/* ==========================================================
   Reveal-on-scroll animations
   ========================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-46px); }
[data-reveal="right"] { transform: translateX(46px); }
[data-reveal="zoom"]  { transform: scale(0.88); }
[data-reveal].revealed { opacity: 1; transform: none; }

/* On narrow screens a sideways start offset pushes full-width blocks past the
   viewport edge and creates horizontal scroll — slide them up instead. */
@media (max-width: 1080px) {
  [data-reveal="left"],
  [data-reveal="right"] { transform: translateY(36px); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

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

/* short laptop screens — keep the full hero visible without scrolling */
@media (min-width: 901px) and (max-height: 860px) {
  /* shrink the logo too so the header leaves room for the hero */
  .brand-logo { height: 54px; padding: 6px 12px; }
  .site-header.scrolled .brand-logo { height: 46px; }
  .hero { padding: 148px 0 44px; }
  .hero-tag { margin-bottom: 14px; font-size: 0.72rem; }
  .hero-title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-bottom: 12px; }
  .hero-motto { margin-bottom: 12px; }
  .hero-desc { margin-bottom: 20px; font-size: 0.92rem; }
  .hero-meta { margin-bottom: 22px; }
  .meta-chip { padding: 10px 18px; }
  .meta-chip i { width: 38px; height: 38px; font-size: 1rem; }
  .meta-chip strong { font-size: 0.92rem; }
  .hero-actions .btn { padding: 13px 26px; font-size: 0.9rem; }
  .hero-badge { padding: 13px 18px; bottom: 88px; }
  .hero-badge i { width: 42px; height: 42px; font-size: 1.05rem; }
  .scroll-hint { display: none; }
  /* stats card starts below the fold instead of peeking into the hero */
  .stats-strip { margin-top: 26px; }
}

@media (max-width: 1080px) {
  .hero { padding-top: 172px; }
  .reg-layout { grid-template-columns: 1fr; }
  .side-card { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; }

  /* ---------- Mobile slide-in drawer ---------- */
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1100;
    visibility: hidden;
    transition: visibility 0s linear 0.45s;
  }
  .mobile-menu.open { visibility: visible; transition-delay: 0s; }

  .mm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 20, 5, 0.68);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .mobile-menu.open .mm-backdrop { opacity: 1; }

  .mm-panel {
    position: absolute;
    top: 0; right: 0;
    width: min(340px, 88%);
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 18px 20px 24px;
    overflow-y: auto;
    background: linear-gradient(165deg, var(--forest-900) 0%, var(--forest-700) 60%, var(--forest-600) 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: -24px 0 60px rgba(1, 20, 5, 0.55);
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .mobile-menu.open .mm-panel { transform: none; }
  .mm-panel::before {
    content: "";
    position: absolute;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(235, 185, 60, 0.16), transparent 70%);
    top: -110px; right: -90px;
    pointer-events: none;
  }

  .mm-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .mm-head .brand-mark { width: 40px; height: 40px; font-size: 1.05rem; }
  .mm-head .brand-text strong { font-size: 0.88rem; }
  .mm-head .brand-text span { font-size: 0.56rem; letter-spacing: 0.18em; }

  .mm-close {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    font-size: 1.05rem;
    display: grid;
    place-items: center;
    transition: background 0.25s ease, color 0.25s ease, transform 0.35s ease;
  }
  .mm-close:hover {
    background: var(--gold-400);
    border-color: var(--gold-400);
    color: var(--forest-900);
    transform: rotate(90deg);
  }

  .mm-links {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 20px 0 4px;
    position: relative;
  }
  .mm-links a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 15px;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
    font-size: 0.94rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    opacity: 0;
    transform: translateX(26px);
    transition: opacity 0.45s ease, transform 0.45s ease,
                background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
  .mobile-menu.open .mm-links a { opacity: 1; transform: none; }
  .mm-links a > i:first-child {
    width: 34px; height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    display: grid; place-items: center;
    background: rgba(63, 138, 15, 0.28);
    color: var(--lime-300);
    font-size: 0.85rem;
    transition: background 0.25s ease, color 0.25s ease;
  }
  .mm-links a span { flex: 1; }
  .mm-links a .chev {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    transition: transform 0.25s ease, color 0.25s ease;
  }
  .mm-links a:hover,
  .mm-links a.active {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(235, 185, 60, 0.42);
    color: var(--white);
  }
  .mm-links a:hover > i:first-child,
  .mm-links a.active > i:first-child {
    background: linear-gradient(130deg, var(--gold-400), var(--gold-500));
    color: var(--forest-900);
  }
  .mm-links a:hover .chev { transform: translateX(4px); color: var(--gold-400); }

  .mm-cta {
    margin-top: 18px;
    width: 100%;
    justify-content: center;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.45s ease 0.34s, transform 0.45s ease 0.34s, box-shadow 0.3s ease;
  }
  .mobile-menu.open .mm-cta { opacity: 1; transform: none; }

  .mm-foot {
    position: relative;
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.45s ease 0.42s, transform 0.45s ease 0.42s;
  }
  .mobile-menu.open .mm-foot { opacity: 1; transform: none; }
  .mm-meta { display: grid; gap: 9px; margin-bottom: 16px; }
  .mm-meta span {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.72);
  }
  .mm-meta i { color: var(--gold-400); font-size: 0.85rem; }
  .mm-socials { display: flex; gap: 8px; }
  .mm-socials a {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  }
  .mm-socials a:hover {
    background: var(--gold-400);
    border-color: var(--gold-400);
    color: var(--forest-900);
    transform: translateY(-3px);
  }

  .about-layout { grid-template-columns: 1fr; gap: 60px; }
  .stats-card { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3)::before { display: none; }
  .cta-band { padding: 50px 34px; }
}

@media (min-width: 901px) { .mobile-menu { display: none; } }

@media (max-width: 640px) {
  /* topbar stacks: date + venue on top, socials centered below */
  .topbar { max-height: 150px; }
  .topbar-wrap {
    flex-direction: column;
    gap: 7px;
    padding: 10px 0 9px;
  }
  .topbar-info {
    justify-content: center;
    gap: 6px 16px;
  }
  .topbar-info span { font-size: 0.7rem; }
  .topbar-info i { font-size: 0.78rem; }
  .topbar-socials { gap: 3px; }
  .topbar-socials a { width: 27px; height: 27px; font-size: 0.72rem; }

  .brand-logo { height: 46px; padding: 5px 9px; border-radius: 10px; }
  .site-header.scrolled .brand-logo { height: 40px; }
  .mm-head .brand-logo { height: 40px; }
  .footer-about .brand-logo { height: 54px; }

  .section { padding: 66px 0; }
  .hero { padding: 170px 0 80px; min-height: auto; }
  .hero-meta { gap: 12px; }
  .meta-chip { padding: 12px 16px; width: 100%; }
  .stats-card { grid-template-columns: 1fr 1fr; }
  .stat { padding: 24px 12px; }
  .form-card { padding: 30px 22px; }
  .form-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .acc-head { padding: 16px 16px; gap: 12px; }
  .acc-head .acc-count { display: none; }
  .acc-list { padding: 4px 16px 20px; grid-template-columns: 1fr; }
  .cta-band { text-align: center; justify-content: center; }
  .cta-band .btn-row { justify-content: center; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  /* chips flow below the frame instead of floating over its text */
  .about-visual { display: flex; flex-direction: column; gap: 12px; }
  .about-chip {
    position: static;
    animation: none;
    justify-content: center;
    padding: 13px 18px;
    font-size: 0.86rem;
  }
  /* .br lives inside the note card — drop it onto its own row rather than
     letting it sit beside the text and squeeze it into a narrow column */
  .about-note { flex-wrap: wrap; }
  .about-chip.br { flex-basis: 100%; margin-top: 6px; }
}