/* ═══════════════════════════════════════════════════════════════
   Maharashtra Higher Education Summit 2026 — style.css
   1  Tokens              9  Marquees           17 Awards
   2  Base               10  Stats band         18 Partner
   3  Section shell      11  About              19 Souvenir
   4  Buttons            12  Pillars (dark)     20 Gallery + lightbox
   5  Badges             13  Vision             21 Partners marquee
   6  Decor              14  Highlights/Eco     22 FAQ
   7  Chrome (loader,    15  Attendees          23 Venue
      cursor, rail)      16  Speakers/          24 CTA
   8  Nav + hero             Programme/Exp      25 Footer, modal, UI
   ═══════════════════════════════════════════════════════════════ */

/* ───────── 1. TOKENS ───────── */
:root {
  --primary: #F15A24;
  --secondary: #FF8C00;
  --accent: #FF9A00;
  --gold: #FFC46B;

  --dark: #222222;
  --ink: #141110;
  /* dark-luxe base */
  --ink-2: #1D1815;
  --text: #444444;
  --muted: #7A7168;
  --bg: #FFFDF8;
  --light-gray: #F7F5F1;
  --line: rgba(34, 34, 34, .08);
  --line-light: rgba(255, 255, 255, .10);

  --gradient: linear-gradient(135deg, #F15A24, #FF9A00);
  --gradient-soft: linear-gradient(135deg, rgba(241, 90, 36, .10), rgba(255, 154, 0, .06));
  --gradient-line: linear-gradient(90deg, transparent, #F15A24, #FF9A00, transparent);

  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 28px;
  --radius-pill: 100px;

  --shadow: 0 15px 40px rgba(0, 0, 0, .08);
  --shadow-lg: 0 28px 70px rgba(34, 34, 34, .14);
  --shadow-brand: 0 18px 44px rgba(241, 90, 36, .30);
  --shadow-ink: 0 30px 80px rgba(0, 0, 0, .45);

  --ease: cubic-bezier(.22, .68, 0, 1);
  --t: .4s var(--ease);

  --f-head: 'Playfair Display', Georgia, serif;
  --f-sub: 'Poppins', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, sans-serif;
  --f-num: 'Montserrat', system-ui, sans-serif;

  --pad-section: 60px;
  --nav-h: 81px;
}

/* ───────── 2. BASE ───────── */
* {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 130px;
}

/* Lenis owns the scroll once it initialises — native smooth would fight it.
   Falls back to the CSS smooth scroll above if the script never loads. */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* `overflow-x: hidden` makes body a scroll container, which stops
   position:sticky descendants from ever sticking. `clip` does the same
   horizontal trimming without creating one. html gets it too: iOS Safari
   ignores body's value and still lets the page pan sideways. */
@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--f-head);
  color: var(--dark);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.018em;
}

p {
  margin-bottom: 1.1rem;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: var(--t);
}

a:hover {
  color: var(--secondary);
}

img,
svg {
  max-width: 100%;
  height: auto;
}

code {
  font-size: 15px;
  color: var(--primary);
  background: rgba(241, 90, 36, .08);
  padding: 2px 7px;
  border-radius: 6px;
}

::selection {
  background: rgba(241, 90, 36, .22);
  color: var(--dark);
}

.container {
  max-width: 1320px;
  padding-inline: 24px;
}

.skip-link {
  position: absolute;
  top: -70px;
  left: 16px;
  z-index: 2000;
  background: var(--ink);
  color: #fff;
  padding: 12px 22px;
  border-radius: 0 0 12px 12px;
  font-family: var(--f-sub);
  font-weight: 600;
  transition: top .3s ease;
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

:focus-visible {
  outline: 3px solid rgba(241, 90, 36, .6);
  outline-offset: 3px;
  border-radius: 6px;
}

.text-light-soft {
  color: rgba(255, 255, 255, .66) !important;
}

/* ───────── 3. SECTION SHELL ───────── */
.section {
  position: relative;
  padding: var(--pad-section) 0;
  overflow: hidden;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-sub);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 18px;
  padding-left: 36px;
  position: relative;
}

.eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 26px;
  height: 1.5px;
  background: var(--gradient);
  transform: translateY(-50%);
  border-radius: 2px;
}

.eyebrow-light {
  color: var(--gold);
}

.eyebrow-light::before {
  background: linear-gradient(90deg, #F15A24, #FFC46B);
}

.text-center .eyebrow {
  padding-left: 0;
}

.text-center .eyebrow::before {
  display: none;
}

/* same face and treatment as .ab-title in the About section */
.section-title {
  font-family: 'Joost', 'Jost', system-ui, sans-serif;
  font-weight: 700;
  font-size: 46px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.28;
  margin-bottom: 10px;
}

.section-head {
  max-width: 860px;
  margin: 0 auto 72px;
}

.section-desc {
  font-size: 18px;
  color: var(--muted);
  margin-bottom: 0;
}

.grad-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ───────── 4. BUTTONS ───────── */
.btn {
  font-family: var(--f-sub);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--radius-pill);
  padding: 14px 30px;
  border: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
}

.btn-lg {
  padding: 17px 38px;
  font-size: 16px;
}

.btn-sm {
  padding: 10px 22px;
  font-size: 13px;
}

.btn-gradient {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 10px 26px rgba(241, 90, 36, .30);
  background-size: 180% 180%;
  background-position: 0% 50%;
}

.btn-gradient:hover,
.btn-gradient:focus-visible {
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 20px 46px rgba(241, 90, 36, .45);
  background-position: 100% 50%;
}

.btn-gradient:active {
  transform: translateY(-1px);
}

.btn-outline-dark-soft {
  background: rgba(255, 255, 255, .6);
  color: var(--dark);
  border: 1.5px solid rgba(34, 34, 34, .14);
  backdrop-filter: blur(8px);
}

.btn-outline-dark-soft:hover,
.btn-outline-dark-soft:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(241, 90, 36, .16);
}

.btn-outline-light-soft {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .24);
  backdrop-filter: blur(10px);
}

.btn-outline-light-soft:hover,
.btn-outline-light-soft:focus-visible {
  background: rgba(255, 255, 255, .13);
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
  transform: translateY(-4px);
}

.btn-white {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
}

.btn-white:hover,
.btn-white:focus-visible {
  color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .26);
}

.btn-ghost-light {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .5);
  backdrop-filter: blur(8px);
}

.btn-ghost-light:hover,
.btn-ghost-light:focus-visible {
  background: rgba(255, 255, 255, .22);
  color: #fff;
  transform: translateY(-4px);
  border-color: #fff;
}

.btn-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-sub);
  font-weight: 600;
  font-size: 15px;
  color: var(--gold);
  padding: 14px 4px;
  position: relative;
  overflow: hidden;
}

.btn-text-link i {
  transition: transform var(--t);
}

.btn-text-link:hover {
  color: #fff;
}

.btn-text-link:hover i {
  transform: translateX(6px);
}

.btn-ripple .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, .4);
  animation: rippleOut .7s ease-out forwards;
  pointer-events: none;
  z-index: -1;
}

.btn-outline-dark-soft .ripple,
.btn-white .ripple {
  background: rgba(241, 90, 36, .22);
}

@keyframes rippleOut {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ───── nav "express" register button — banner gradient (orange → gold) ───── */
.btn-3d-express {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 26px;
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
  color: #fff;
  background: var(--gradient);
  background-size: 200% 200%;
  background-position: 0% 50%;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 10px 24px rgba(241, 90, 36, .34);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-position .5s ease;
}

.btn-3d-express span,
.btn-3d-express i {
  position: relative;
  z-index: 2;
}

.btn-3d-express i {
  font-size: 12px;
  transition: transform .3s var(--ease);
}

.btn-3d-express:hover,
.btn-3d-express:focus-visible {
  color: #fff;
  background-position: 100% 50%;
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(241, 90, 36, .46);
}

.btn-3d-express:hover i:last-child,
.btn-3d-express:focus-visible i:last-child {
  transform: translateX(5px);
}

.btn-3d-express:active {
  transform: translateY(-1px) scale(.97);
  box-shadow: 0 8px 18px rgba(241, 90, 36, .32);
}

/* ───────── 5. BADGES ───────── */

.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(241, 90, 36, .10);
  color: var(--primary);
  font-family: var(--f-sub);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0 rgba(241, 90, 36, .6);
  animation: pulseDot 2s infinite;
  flex: 0 0 8px;
}

@keyframes pulseDot {
  70% {
    box-shadow: 0 0 0 10px rgba(241, 90, 36, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(241, 90, 36, 0);
  }
}

/* ───────── 6. DECOR ───────── */

.blob-soft {
  width: 440px;
  height: 440px;
  filter: blur(90px);
  opacity: .55;
}

@keyframes blobFloat {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(30px, -40px) scale(1.08);
  }

  66% {
    transform: translate(-25px, 25px) scale(.94);
  }
}

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

/* dark luxe shell */

/* art frames — deliberate placeholders for photography */

.art-tag {
  position: absolute;
  z-index: 3;
  left: 18px;
  bottom: 16px;
  font-family: var(--f-sub);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .28);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
}

/* ───────── 7. CHROME ───────── */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s ease;
}

.cursor-dot {
  width: 7px;
  height: 7px;
  background: var(--primary);
}

.cursor-ring {
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(241, 90, 36, .55);
  transition: opacity .3s ease, width .3s var(--ease), height .3s var(--ease), background .3s ease, border-color .3s ease;
}

body.cursor-ready .cursor-dot,
body.cursor-ready .cursor-ring {
  opacity: 1;
}

body.cursor-hover .cursor-ring {
  width: 64px;
  height: 64px;
  background: rgba(241, 90, 36, .10);
  border-color: rgba(241, 90, 36, .8);
}

body.cursor-hover .cursor-dot {
  opacity: 0;
}

/* section rail */

/* ───────── 8. TOPBAR / NAV / HERO ───────── */
.site-nav {
  top: 0;
  padding: 16px 0;
  z-index: 1050;
  background: #fffff5;
  border-bottom: 1px solid rgba(34, 34, 34, .07);
  transition: background .45s var(--ease), box-shadow .45s var(--ease), padding .45s var(--ease), top .45s var(--ease);
}

.site-nav.at-top-hidden {
  top: 0;
}

.site-nav.scrolled {
  padding: 10px 0;
  background: #fffff5;
  /* box-shadow: 0 10px 34px rgba(34, 34, 34, .10); */
  border-bottom: 1px solid rgba(34, 34, 34, .07);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-text strong {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 19px;
  color: var(--dark);
  letter-spacing: -.02em;
}

.brand-text small {
  font-family: var(--f-sub);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.navbar-nav .nav-link {
  font-family: var(--f-sub);
  font-weight: 500;
  font-size: 14px;
  color: var(--dark);
  padding: 10px 13px !important;
  position: relative;
  transition: color .3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--primary);
}

.navbar-nav .dropdown-toggle::after {
  border: 0;
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 9px;
  margin-left: 7px;
  vertical-align: middle;
  transition: transform .3s ease;
}

.navbar-nav .dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.navbar-toggler {
  border: 0;
  padding: 10px;
  width: 46px;
  height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  box-shadow: none !important;
}

.toggler-bar {
  display: block;
  height: 2px;
  width: 24px;
  border-radius: 2px;
  background: var(--dark);
  transition: transform .35s var(--ease), opacity .25s ease;
}

.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(2) {
  opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* BANNER — full-width key visual, sits below the fixed header */
.site-banner {
  margin-top: var(--nav-h);
  background: #FFFDF8;
  line-height: 0;
}

/* bg matches the artwork's own #FFFFF6 so the logo row and art join invisibly */
.site-banner {
  position: relative;
  background: #FFFFF6;
}

/* Partner logos in their own row above the artwork (in flow, not overlaid),
   so the art always starts below them at every width. Everything is sized in
   vw because the banner is always full-width. */
.banner-logos {
  position: relative;
  z-index: 1;                     /* paints over the art's empty top margin */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: 1.6vw 3vw 1vw;
  line-height: 1.25;
}

.bl-side {
  height: auto;
}

.bl-left {
  justify-self: start;
  width: 10vw;
}

.bl-right {
  justify-self: end;
  width: 11.9vw;
}

/* the art's top ~6vw is empty cream; tucking it 3vw under the logo row
   still leaves a clear ~4vw gap before the sun / mortarboard begin */
.banner-art {
  width: 100%;
  height: auto;
  display: block;
  margin-top: -3vw;
}

/* Host Partner block — vector-sharp emblem + live text so it scales without blur */
.site-banner .banner-host {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.25;
  color: #222;
  font-family: 'Source Sans 3', sans-serif;
  white-space: nowrap;
}

.site-banner .banner-host img {
  width: 7vw;
  height: auto;
  margin: .3vw 0 .4vw;
}

.bh-label {
  font-size: 1.05vw;
  font-weight: 500;
  color: #444;
}

.bh-name {
  font-size: 1.1vw;
  font-weight: 600;
}

/* HERO leftovers still in use elsewhere */

/* ───────── 8b. SUMMIT THEME STRIP ───────── */
.theme-strip{
  position:relative; overflow:hidden; z-index:4;
  padding:22px 0; text-align:center;
  background:var(--gradient);
}
.theme-strip::before{                            /* soft light lift, bottom-left */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 18% 130%,rgba(255,255,255,.20),transparent 60%);
}
.theme-strip .container{ position:relative; z-index:2; }

/* language crossfade — both lines share one grid cell so the strip
   doesn't jump height when swapping between English and Hindi */
.theme-lang-rotator{
  display:grid;
  align-items:center;
  justify-items:center;
}
.theme-lang-rotator .theme-line{
  grid-area:1/1;
  width:100%;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events:none;
}
.theme-lang-rotator .theme-line.lang-active{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.theme-line{
  font-family:'Lufga','Outfit','Jost',system-ui,sans-serif;
  font-weight:600; font-size:25px; line-height:1.32; letter-spacing:.2px;
  color:#fff; margin:0 auto;  text-wrap:balance;
}
.theme-line b{ font-weight:800; }

.theme-line-hi{
  font-family:'Noto Sans Devanagari','Nirmala UI',sans-serif;
  font-weight:600;
}
.theme-line-hi b{ font-weight:700; }

.theme-line .tw-word{
  display:inline-block;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:calc(var(--wi, 0) * 65ms);
}
.theme-line.in-view .tw-word{
  opacity:1;
  transform:translateY(0);
}
.theme-line .tw-word:nth-child(1){ --wi:0; }
.theme-line .tw-word:nth-child(2){ --wi:1; }
.theme-line .tw-word:nth-child(3){ --wi:2; }
.theme-line .tw-word:nth-child(4){ --wi:3; }
.theme-line .tw-word:nth-child(5){ --wi:4; }
.theme-line .tw-word:nth-child(6){ --wi:5; }
.theme-line .tw-word:nth-child(7){ --wi:6; }
.theme-line .tw-word:nth-child(8){ --wi:7; }
.theme-line .tw-word:nth-child(9){ --wi:8; }
.theme-line .tw-word:nth-child(10){ --wi:9; }
.theme-line .tw-word:nth-child(11){ --wi:10; }
.theme-line .tw-word:nth-child(12){ --wi:11; }

/* switch word — all items share one grid cell so the slot is sized to
   the widest word and the line never reflows while cycling */
.theme-switch{
  position:relative;
  display:inline-grid;
  justify-items:center;
  vertical-align:middle;
  overflow:hidden;
  margin-left:4px;
  padding:.06em .6em .12em;
  border-radius:999px;
  background:#fff;
  color:var(--primary);
  box-shadow:0 6px 18px rgba(120,35,0,.25), inset 0 -2px 0 rgba(241,90,36,.15);
}
.theme-switch::after{                            /* shine sweep on each switch */
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,154,0,.28),transparent);
  transform:skewX(-20deg);
  pointer-events:none;
}
.theme-switch.is-shine::after{ animation:tsShine .8s var(--ease); }
@keyframes tsShine{ to{ left:120%; } }
.theme-switch .ts-item{
  grid-area:1/1;
  font-weight:800;
  white-space:nowrap;
  background:var(--gradient);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  opacity:0;
  transform:translateY(100%);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.theme-switch .ts-item.is-active{ opacity:1; transform:translateY(0); }
.theme-switch .ts-item.is-leaving{ opacity:0; transform:translateY(-100%); }
.ts-sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
@media (prefers-reduced-motion: reduce){
  .theme-switch .ts-item{ transform:none !important; }
  .theme-switch.is-shine::after{ animation:none; }
}

/* ───────── 9. MARQUEES ───────── */

.marquee-set {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  white-space: nowrap;
}

/* ───────── 10. IMPACT BAND (scale strip under About) ───────── */
.impact-band {
  position: relative;
  overflow: hidden;
  padding: var(--pad-section) 0;
  background: #f2ead4;
}

.impact-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 18% 120%, rgba(255, 255, 255, .18), transparent 60%);
}

/* same gutters as the About section so both align on the same edges */
.impact-band .container {
  padding-inline: 60px;
}

.impact-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
  flex-wrap: wrap;
}

.impact-title {
  /* same face as .section-title / .ab-title / .glance-title */
  font-family: 'Joost', 'Jost', system-ui, sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.16;
  text-transform: uppercase;
  letter-spacing: .3px;
  /* deep maroon — dark shade of the brand orange */
  color: #6B1E00;
  margin: 0;
  flex: 0 0 auto;
}

.impact-figures {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px 54px;
}

.impact-fig {
  text-align: center;
  min-width: 104px;
}

.impact-num {
  font-family: var(--f-num);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  color: var(--dark);
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.impact-num em {
  font-style: normal;
  color: var(--primary);
}

.impact-label {
  font-family: var(--f-sub);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  margin: 10px 0 0;
  line-height: 1.4;
}

/* ───────── 11. ABOUT (three-column editorial, Source Sans 3) ───────── */
.section-about {
  background: #ffffff;
  padding: 60px 0;
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
}

.ab-glow {
  position: absolute;
  inset: auto 50% -20% auto;
  transform: translateX(50%);
  width: 900px;
  height: 520px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 154, 0, .10), transparent 68%);
  filter: blur(60px);
}

.section-about .container {
  position: relative;
  z-index: 2;
  padding-inline: 60px;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.55fr) minmax(0, .86fr);
  gap: 56px;
  align-items: center;
}

/* framed media with an offset plate behind */
.ab-frame {
  position: relative;
  margin: 0;
}

.ab-plate {
  position: absolute;
  inset: -20px -24px -26px -20px;
  background: #EFE6DC;
  border-radius: 58px 20px 58px 20px;
  transform: rotate(7deg);
}

.ab-left .ab-plate {
  transform: rotate(-7deg);
  background: #F4EBE1;
}

.ab-media {
  position: relative;
  aspect-ratio: 4/5;
  /* landscape source, so don't crop it to a slot */
  border-radius: 58px 20px 58px 20px;
  overflow: hidden;
  /* clip the photo to the frame shape */
  transform: rotate(-3deg);
  box-shadow: 0 28px 62px rgba(34, 34, 34, .18);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}

/* scrim so the caption stays legible over any photo */
.ab-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .10) 0%, transparent 34%, transparent 62%, rgba(0, 0, 0, .52) 100%);
}

.ab-left .ab-media {
  transform: rotate(3deg);
  border-radius: 20px 58px 20px 58px;
}

.ab-frame:hover .ab-media {
  transform: rotate(0deg) translateY(-8px);
  box-shadow: 0 38px 80px rgba(34, 34, 34, .24);
}

.ab-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

/* keep the subject in frame when a 3:2 photo is cropped to 4:5 */
.ab-left .ab-media img {
  object-position: 60% center;
}

.ab-right .ab-media img {
  object-position: 38% center;
}

.ab-frame:hover .ab-media img {
  transform: scale(1.05);
}

.ab-media>i {
  font-size: 44px;
}

/* rotating seal */
.ab-badge {
  position: absolute;
  z-index: 4;
  right: -42px;
  bottom: -34px;
  width: 154px;
  height: 154px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 16px 32px rgba(241, 90, 36, .32));
}

.ab-badge svg {
  width: 100%;
  height: 100%;
  animation: badgeSpin 20s linear infinite;
}

@keyframes badgeSpin {
  to {
    transform: rotate(360deg);
  }
}

.ab-badge-text {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .1em;
  fill: #fff;
}

.ab-badge-core {
  position: absolute;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--primary);
  font-size: 23px;
}

/* centre column */
/* accented phrase inside the About heading */
.ab-hl {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Jost carries no Devanagari — without this the browser falls back to a
   system face that sits at a different weight and baseline */
.ab-dev {
  font-family: 'Noto Sans Devanagari', 'Nirmala UI', sans-serif;
  font-weight: 700;
  letter-spacing: 0;
      font-size: 50px;
}

.about-copy {
  text-align: center;
  padding: 0 8px;
}

.ab-title {
  font-family: 'Joost', 'Jost', system-ui, sans-serif !important;
  font-weight: 700;
  font-size: 42px;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  color: var(--dark);
  line-height: 1.40;
  text-align: center;
  margin: 0 auto 58px;
  max-width: 100%;
  text-wrap: balance;
}

.about-copy p {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.85;
  color: var(--text);
  margin-bottom: 20px;
}

.about-copy p:last-of-type {
  margin-bottom: 34px;
}

.about-copy strong {
  font-weight: 600;
  color: var(--dark);
}

.btn-glow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 46px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  background: var(--gradient);
  background-size: 180% 180%;
  background-position: 0% 50%;
  box-shadow: 0 14px 34px rgba(241, 90, 36, .30), 0 0 0 12px rgba(241, 90, 36, .12);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t), box-shadow var(--t), background-position var(--t);
}

.btn-glow:hover,
.btn-glow:focus-visible {
  color: #fff;
  transform: translateY(-4px);
  background-position: 100% 50%;
  box-shadow: 0 22px 48px rgba(241, 90, 36, .42), 0 0 0 18px rgba(241, 90, 36, .16);
}

/* outcomes strip */

/* ───────── 12b. THE EXPERIENCE — FORMATS (summit photo bg) ───────── */
.section-formats {
  background: var(--ink) url("../images/9.JPG") center center / cover no-repeat fixed;
  color: rgba(255, 255, 255, .82);
}

/* z-index 2 puts the grain above the scrim, not under it */
.section-formats .grain {
  z-index: 2;
  opacity: .34;
  mix-blend-mode: overlay;
}

/* the photograph is busy and mid-toned — the scrim is what makes the copy legible */
.section-formats::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(241, 90, 36, .16), transparent 70%),
    linear-gradient(180deg, rgba(18, 15, 13, .90) 0%, rgba(18, 15, 13, .78) 45%, rgba(18, 15, 13, .92) 100%);
}

.section-formats .container {
  position: relative;
  z-index: 3;
}

/* family, weight and tracking inherit from the shared heading rule */
.section-formats .section-title {
  font-size: 46px;
  color: #fff;
}

.section-formats .section-desc {
  font-size: 17px;
  color: #fff;
}

.fmt-bar {
  font-weight: 300;
  color: rgba(255, 255, 255, .32);
  padding: 0 6px;
}

.fmt-card {
  height: 100%;
  padding: 20px 34px 20px;
  border-radius: var(--radius);
  border: 0;
  /* background-color, not the shorthand — the shorthand resets background-image
     to none, which wiped the photo off every card on hover */
  background-color: rgba(255, 255, 255, .09);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
  transition: var(--t);
}

.fmt-card:hover {
  transform: translateY(-10px);
  background-color: rgba(255, 255, 255, .15);
  box-shadow: 0 28px 62px rgba(0, 0, 0, .34);
}

/* photo-backed card — copy anchored to the bottom under a top-to-bottom scrim */
.fmt-photo {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px 30px 32px;
  background: var(--ink) url("../images/5.JPG") 42% 22% / cover no-repeat;
  backdrop-filter: none;
}

/* per-card photo — overrides the image in the .fmt-photo shorthand above */
.fmt-photo-keynote {
  background-image: url("../images/cm.JPG");
  /* wide 3:2 frame cropped to a portrait card — pushed right so the speaker
     stays in shot instead of the empty backdrop on the left */
  background-position: 78% 30%;
}

.fmt-photo-panel {
  background-image: url("https://events.eletsonline.com/techmahaimpact/images/glimpses/gal24.jpg");
  background-position: 50% 40%;
}

.fmt-photo-round {
  background-image: url("https://events.eletsonline.com/techmahaimpact/images/glimpses/gal1.JPG");
  background-position: 50% 38%;
}

.fmt-photo-fireside {
  background-image: url("../images/firesidechat.jpg");
  background-position: 50% 30%;
}

.fmt-photo-expo {
  background-image: url("https://indiapharmaexpo.com/images/expo-about-1.JPG");
  background-position: 50% 42%;
}

.fmt-photo-network {
  background-image: url("https://indiapharmaexpo.com/images/knowledge-pav.jpg");
  background-position: 50% 40%;
}

/* brand gradient washing down over the photo */
.fmt-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 154, 0, 0) 0%, rgb(0 0 0 / 46%) 42%, rgb(0 0 0 / 88%) 76%, rgba(241, 90, 36, .97) 100%);
  transition: var(--t);
}

.fmt-photo > * {
  position: relative;
  z-index: 1;
}

.fmt-photo:hover {
  background-color: var(--ink);
}

.fmt-photo:hover::before {
  background: linear-gradient(180deg, rgba(255, 154, 0, 0) 0%, rgba(255, 140, 0, .38) 44%, rgba(241, 90, 36, .84) 78%, rgba(241, 90, 36, .95) 100%);
}

.fmt-photo p {
  color: rgba(255, 255, 255, .92);
}

.fmt-card h3 {
  font-size: 23px;
  color: #fff;
  margin-bottom: 12px;
}

.fmt-card p {
  font-size: 15px;
    color: #fff;
    margin-bottom: 0;
    line-height: 1.5;
}

/* ───────── 14. IMPACT AT A GLANCE (film + figures) + ECOSYSTEM ───────── */
.section-glance {
  background: #fff;
}

.glance-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: var(--primary);
  opacity: .05;
}

.glance-deco svg {
  width: 100%;
  height: 100%;
  display: block;
}

.glance-grid {
  position: relative;
  z-index: 1;
}

.glance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

/* film — silent autoplay loop, no chrome. 16:9 to match the summit film,
   whose corner logos a 16:10 crop would cut into */
.glance-media {
  position: relative;
  margin: 0;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
  box-shadow: var(--shadow-lg);
}

.glance-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.glance-media::after {
  /* scrim keeps the tag readable */
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .42));
}

/* copy */
.glance-body .eyebrow {
  margin-bottom: 10px;
}

/* same face and treatment as .ab-title / .section-title */
.glance-title {
     font-family: 'Joost', 'Jost', system-ui, sans-serif;
    font-weight: 700;
    font-size: 35px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.28;
    color: var(--dark);
    margin: 0 0 40px;
}

/* figures */
/* deliverables list */
.glance-deliver {
  margin: 0;
  display: grid;
  gap: 16px;
}

.glance-deliver li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(241, 90, 36, .22);
}

.glance-deliver li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.glance-deliver p {
      font-family: 'Joost', 'Jost', system-ui, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.45;
    color: #222222eb;
    margin: 0;
}

.glance-deliver li:hover .glance-ico {
  background: var(--gradient);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--shadow-brand);
}

.glance-ico {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--gradient-soft);
  color: var(--primary);
  font-size: 18px;
  transition: var(--t);
}

/* ───────── 17. FOCUS + TOPICS + AWARDS ───────── */
.section-focus {
  background: var(--bg);
  /* .section sets overflow:hidden, which is the other thing that stops the
     wheel column from sticking — nothing here bleeds, so let it show */
  overflow: visible;
}

/* The rail supplies the scroll length; the stage pins inside it and the
   themes swap in place, so there is no gap between them to scroll past. */
.focus-pin {
  position: relative;
  height: 380vh;
}

.focus-sticky {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  /* heading and stage travel together, centred as one block — nothing is
     left behind above the pin, so there is no gap to open up */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.focus-sticky .section-head {
  margin-bottom: 38px;
}

.focus-stage {
  width: 100%;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 70px;
  align-items: center;
}

/* A three-row window onto the seven themes: the live one sits in the middle
   with its neighbours faded above and below. JS writes --off (this panel's
   distance from the active one) and the column slides by that many rows. */
.focus-panels {
  --row: 150px;
  position: relative;
  margin: 0;
  height: calc(var(--row) * 3);
  overflow: hidden;
}

.focus-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--row);
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  gap: 26px;
  opacity: 0;
  transform: translateY(calc(-50% + var(--off, 0) * var(--row)));
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .55s var(--ease);
}

/* the two either side of the live theme */
.focus-panel.is-near {
  opacity: .3;
}

.focus-panel.is-active {
  opacity: 1;
  pointer-events: auto;
}

.focus-num {
  font-family: var(--f-num);
  font-weight: 800;
  font-size: 40px;
  line-height: .9;
  align-self: start;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(241, 90, 36, .45);
  transition: var(--t);
}

/* text-stroke and background-clip can't coexist, so the fill goes solid */
.focus-panel.is-active .focus-num {
  -webkit-text-stroke-color: transparent;
  color: var(--primary);
}

.focus-copy {
  min-width: 0;
}

.focus-copy h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 22px;
  margin-bottom: 9px;
  transition: color var(--t);
}

.focus-copy h3 i {
  font-size: 15px;
  color: var(--primary);
  transition: var(--t);
}

.focus-panel.is-active .focus-copy h3 {
  color: var(--primary);
}

.focus-panel.is-active .focus-copy h3 i {
  transform: rotate(-8deg) scale(1.12);
}

.focus-copy p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.72;
  margin: 0;
}

/* the wheel holds still — only the lit slice and the hub figure change.
   The svg's fixed -30deg turn swings its square corners ~18% wider than the
   box; on a phone that pushed past the screen edge and let the page pan
   sideways. The drawn circle sits well inside the square, so clipping to
   the box costs nothing visible. */
.focus-wheel {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  overflow: hidden;
}

.focus-wheel svg {
  width: 100%;
  height: auto;
  overflow: visible;
  /* a fixed quarter-turn back so slice 01 reads from twelve o'clock */
  /* the outer <svg> rotates as a CSS box, so a px origin would only hit the
     centre at one rendered size — 50% tracks it at every width */
  transform-origin: 50% 50%;
  transform: rotate(-30deg);
}

.fw-slice path {
  fill: var(--fw);
  opacity: .5;
  transition: opacity .5s var(--ease), filter .5s var(--ease);
}

.fw-slice text {
  font-family: var(--f-sub);
  font-weight: 600;
  font-size: 16px;
  fill: #fff;
  text-anchor: middle;
  pointer-events: none;
  opacity: .62;
  /* undo the wheel's fixed turn about each label's own centre */
  transform-box: view-box;
  transform-origin: var(--lx) var(--ly);
  transform: rotate(30deg);
  transition: opacity .5s var(--ease);
}

.fw-slice.is-live path {
  opacity: 1;
  filter: brightness(1.1);
}

.fw-slice.is-live text {
  opacity: 1;
}

.fw-n {
  font-family: var(--f-num);
  font-weight: 800;
  font-size: 21px;
  fill: rgba(255, 255, 255, .6);
}

.fw-slice.is-live .fw-n {
  fill: rgba(255, 255, 255, .92);
}

.fw-slice {
  transform-box: view-box;
  transform-origin: 300px 300px;
  transition: transform .45s var(--ease);
  cursor: default;
}

.fw-slice.is-live {
  transform: scale(1.04);
}

.fw-hub {
  fill: var(--bg);
  stroke: rgba(241, 90, 36, .28);
  stroke-width: 1.5;
}

/* both hub texts sit on the rotation centre, so one counter-turn holds them */
.fw-hub-num,
.fw-hub-label {
  text-anchor: middle;
  transform-box: view-box;
  transform-origin: 300px 300px;
  transform: rotate(30deg);
}

.fw-hub-num {
  font-family: var(--f-num);
  font-weight: 800;
  font-size: 54px;
  fill: var(--primary);
}

.fw-hub-label {
  font-family: 'Joost', 'Jost', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.4px;
  fill: var(--muted);
}

/* ───────── 21b. SPECIAL COMMEMORATIVE SOUVENIR ───────── */
.section-souvenir {
  background: #fff;
}

/* the Warli frame is stretched to the box, so % padding — which resolves
   against width for all four sides — keeps the copy inside the artwork */
.souv-frame {
  background: url("../images/border.png") center / 100% 100% no-repeat;
  padding: 6% 7.5% 7.5%;
}

.souv-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: 54px;
}

.souv-media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 22px 54px rgba(64, 48, 24, .20);
}

.souv-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease);
}

.souv-frame:hover .souv-media img {
  transform: scale(1.04);
}

.souv-title {
  font-size: 22px;
  margin-bottom: 20px;
}

.souv-body p {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 14px;
}

.souv-body p:last-child {
  margin-bottom: 0;
}

/* ───────── 22. FAQ ───────── */
.section-faq {
  background: var(--bg);
}

/* two columns — items flow 1|2 / 3|4; align-items:start so an open answer
   grows only its own item, not the one beside it */
.faq-accordion {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px 24px;
}

.faq-accordion .accordion-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm) !important;
  margin-bottom: 0;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(34, 34, 34, .04);
  transition: box-shadow var(--t), border-color var(--t);
}

.faq-accordion .accordion-item:hover {
  box-shadow: var(--shadow);
  border-color: rgba(241, 90, 36, .2);
}

.faq-accordion .accordion-header {
  margin: 0;
}

.faq-accordion .accordion-button {
  font-family: var(--f-sub);
  font-weight: 600;
  font-size: 17px;
  color: var(--dark);
  background: #fff;
  padding: 24px 68px 24px 28px;
  box-shadow: none !important;
  border-radius: var(--radius-sm) !important;
  transition: color .3s ease, background .3s ease;
}

.faq-accordion .accordion-button:not(.collapsed) {
  color: #fff;
  background: var(--gradient);
}

.faq-accordion .accordion-button::after {
  content: "\f067";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  background-image: none !important;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: rgba(241, 90, 36, .1);
  color: var(--primary);
  font-size: 12px;
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .4s var(--ease), background-color .3s ease, color .3s ease;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
  content: "\f068";
  background-color: rgba(255, 255, 255, .24);
  color: #fff;
  transform: translateY(-50%) rotate(180deg);
}

.faq-accordion .accordion-body {
      padding: 22px 28px 28px;
    color: var(--text);
    font-size: 14px;
    border-top: 1px solid var(--line);
    font-weight: 400;

}

.faq-foot {
  margin-top: 34px;
  font-family: var(--f-sub);
  font-weight: 500;
  color: var(--muted);
}

/* ───────── 23. VENUE ───────── */
/* register page: clears the fixed navbar above the embedded form */
.ifrane_container {
  padding-top: 150px;
  padding-bottom: 80px;
}

/* fixed height — the form is ~1480px tall at desktop width; it runs longer on phones */
.zoho-form {
  display: block;
  width: 100%;
  height: 1500px;
  border: 0;
}

@media (max-width: 767.98px) {
  .zoho-form { height: 2200px; }
}

/* hotel photo held to the left ~60%, fading into the dark where the copy sits */
.section-venue {
  color: #fff;
  background: var(--ink);
}

.section-venue::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 62%;
  background: url("../images/venue.jpg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
}

.section-venue .container {
  position: relative;
  z-index: 1;
}

.venue-title {
  font-family: 'Lufga', 'Outfit', 'Jost', system-ui, sans-serif;
  font-weight: 700;
  font-size: 50px;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 8px;
}

.venue-city {
  font-family: var(--f-sub);
  font-weight: 500;
  font-size: 22px;
  color: var(--accent);
  margin-bottom: 30px;
}

.venue-meta li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .9);
}

.venue-meta i {
  flex: 0 0 22px;
  margin-top: 5px;
  font-size: 19px;
  color: var(--accent);
  text-align: center;
}

.venue-map {
  height: 260px;
  margin: 28px 0 36px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}

.venue-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.venue-btn {
  gap: 16px;
  padding: 6px 6px 6px 28px;
  font-size: 14px;
}

.venue-btn-ico {
  width: 38px;
  height: 38px;
  font-size: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  letter-spacing: 0;
  transition: transform var(--t);
}

.venue-btn:hover .venue-btn-ico {
  transform: translateX(4px);
}

/* ───────── 25. FOOTER / MODAL / FLOATING UI ───────── */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .66);
  padding: 0 0 0;
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient);
}

.footer-top {
  padding: 70px 0 0;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

/* white lockup for the dark footer */
.footer-logo {
  width: auto;
  height: 120px;
  display: block;
}

.footer-about {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .55);
  max-width: 400px;
}

.footer-head {
  font-family: var(--f-sub);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 14px;
}

.footer-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--gradient);
  border-radius: 2px;
}

.footer-links li {
  margin-bottom: 11px;
}

.footer-links a {
  color: rgba(255, 255, 255, .58);
  font-size: 15px;
  display: inline-block;
  position: relative;
  transition: color .3s ease, padding-left .3s var(--ease);
}

.footer-links a:hover {
  color: var(--accent);
  padding-left: 12px;
}

.footer-links a::before {
  content: "›";
  position: absolute;
  left: 0;
  opacity: 0;
  color: var(--accent);
  transition: opacity .3s ease;
}

.footer-links a:hover::before {
  opacity: 1;
}

.footer-venue li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .58);
}

.footer-venue i {
  flex: 0 0 18px;
  margin-top: 4px;
  color: var(--accent);
  text-align: center;
}

.footer-venue strong {
  display: block;
  font-weight: 600;
  color: #fff;
}

.footer-venue a {
  color: rgba(255, 255, 255, .58);
  transition: color .3s ease;
}

.footer-venue a:hover {
  color: var(--accent);
}

.newsletter-form .news-field {
  position: relative;
}

.newsletter-form .news-field i {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .36);
  font-size: 14px;
}

.newsletter-form .form-control {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-pill);
  color: #fff;
  padding: 15px 22px 15px 48px;
  font-size: 15px;
  transition: var(--t);
}

.newsletter-form .form-control::placeholder {
  color: rgba(255, 255, 255, .34);
}

.newsletter-form .form-control:focus {
  background: rgba(255, 255, 255, .09);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 140, 0, .14);
  color: #fff;
}

.news-msg {
  font-size: 13px;
  margin: 12px 0 0;
  min-height: 1.2em;
}

/* .ok / .err are set at runtime by the form handlers in main.js */
.news-msg.ok { color: #7BD389; }
.news-msg.err { color: #FF9A9A; }

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 26px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-light);
  color: rgba(255, 255, 255, .7);
  font-size: 15px;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}

.footer-social a:hover,
.footer-social a:focus-visible {
  background: var(--gradient);
  border-color: transparent;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(241, 90, 36, .32);
}

.footer-bottom {
  margin-top: 70px;
  padding: 26px 0;
  border-top: 1px solid var(--line-light);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: rgba(255, 255, 255, .44);
}

.register-modal .modal-content {
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background: var(--bg);
}

.register-modal .modal-header {
  border: 0;
  padding: 34px 38px 12px;
  align-items: flex-start;
}

.register-modal .modal-title {
  font-size: 29px;
  margin: 0;
}

.register-modal .modal-body {
  padding: 16px 38px 38px;
}

.register-modal .btn-close {
  margin-top: 6px;
}

.form-label {
  font-family: var(--f-sub);
  font-weight: 600;
  font-size: 13px;
  color: var(--dark);
  margin-bottom: 8px;
}

.req {
  color: var(--primary);
}

.register-modal .form-control,
.register-modal .form-select {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 18px;
  font-size: 15px;
  background: #fff;
  transition: var(--t);
}

.register-modal .form-control:focus,
.register-modal .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(241, 90, 36, .12);
}

.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.form-check-input:focus {
  box-shadow: 0 0 0 4px rgba(241, 90, 36, .14);
  border-color: var(--primary);
}

.form-check-label {
  font-size: 14px;
  color: var(--text);
}

.form-msg {
  margin: 14px 0 0;
  font-size: 14px;
  text-align: center;
  min-height: 1.2em;
}

/* .ok / .err are set at runtime by the form handlers in main.js */
.form-msg.ok { color: #1E9E5A; }
.form-msg.err { color: #D64545; }

.sticky-cta {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1040;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px 12px 20px;
  background: rgba(20, 17, 16, .92);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .4);
  transform: translateY(140%);
  transition: transform .5s var(--ease);
}

.sticky-cta.show {
  transform: translateY(0);
}

.sc-info strong {
  display: block;
  font-family: var(--f-sub);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  line-height: 1.2;
}

.sc-info small {
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
}

.sticky-cta .btn {
  padding: 11px 24px;
  font-size: 14px;
  white-space: nowrap;
}

/* shaped like a closed book: spine down the left, rounded fore-edge right */
.back-to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 1035;
  width: 46px;
  height: 56px;
  border-radius: 3px 8px 8px 3px;
  /* dog-ear: the bottom-right corner is cut away so the page reads as folded */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  perspective: 320px;            /* depth for the turning leaf */
  border: 0;
  background: #fff;
  color: var(--primary);
  font-size: 15px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(.9);
  transition: var(--t);
}

/* the spine */
.btt-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  border-radius: 3px 0 0 3px;
  background: var(--gradient);
  transition: var(--t);
}

/* a leaf that swings on the spine when either half is pressed */
.btt-page {
  position: absolute;
  inset: 0 0 0 8px;              /* starts at the spine */
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transform-origin: left center;
  backface-visibility: hidden;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(100deg, #fff 0%, #FFF6EE 60%, #FDE7D6 100%);
}

.back-to-top.turn-down .btt-page {
  animation: bttTurnDown .62s var(--ease);
}

.back-to-top.turn-up .btt-page {
  animation: bttTurnUp .62s var(--ease);
}

/* forward: the leaf lifts off the fore-edge and falls across the spine */
@keyframes bttTurnDown {
  0% { opacity: 1; transform: rotateY(0deg); box-shadow: -8px 0 16px rgba(120, 50, 10, .16); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: rotateY(-168deg); box-shadow: none; }
}

/* back: the same leaf swings in from the spine and settles flat */
@keyframes bttTurnUp {
  0% { opacity: 0; transform: rotateY(-168deg); box-shadow: none; }
  15% { opacity: 1; }
  100% { opacity: 0; transform: rotateY(0deg); box-shadow: -8px 0 16px rgba(120, 50, 10, .16); }
}

/* the folded flap itself — shaded triangle sitting against the cut */
.btt-fold {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background: linear-gradient(to bottom right,
      rgba(241, 90, 36, .26) 0 50%,
      transparent 50%);
  transition: var(--t);
}

/* stacked page edges along the fore-edge */
.back-to-top::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(180deg,
      rgba(241, 90, 36, .22) 0 1px,
      transparent 1px 4px);
  transition: var(--t);
}

/* two halves: top page scrolls up, bottom page scrolls down */
.btt-half {
  position: relative;
  z-index: 2;
  flex: 1 1 50%;
  display: grid;
  place-items: center;
  padding: 0 0 0 5px;          /* clears the spine */
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: var(--t);
}

.btt-up {
  border-bottom: 1px solid rgba(241, 90, 36, .16);
}

.btt-half:hover {
  background: var(--gradient);
  color: #fff;
}

.btt-half:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -3px;
}

/* dim whichever direction has nowhere left to go */
.back-to-top.at-top .btt-up,
.back-to-top.at-end .btt-down {
  opacity: .3;
  pointer-events: none;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-brand);
}

.back-to-top:hover .btt-fold {
  background: linear-gradient(to bottom right,
      rgba(255, 255, 255, .5) 0 50%,
      transparent 50%);
}

.btt-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.btt-track {
  fill: none;
  stroke: rgba(241, 90, 36, .14);
  stroke-width: 2.5;
}

/* dash length is set from the rect's real perimeter in main.js */
.btt-progress {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset .12s linear;
}

.back-to-top:hover .btt-track {
  stroke: rgba(255, 255, 255, .3);
}

.back-to-top:hover .btt-progress {
  stroke: #fff;
}

[data-float] {
  will-change: transform;
}

/* ───────── MOTION PREFERENCES ───────── */
@media (prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  

  
}