/* ============================================================
   AISTEMEDU 2026 — shared design system
   Navy #0C1A4E → purple #7C3AED/#6B21C8, orange #F97316 accent.
   Dark-only theme. Strict type/spacing scale, IEEE/ACM-grade polish.
   ============================================================ */
@import url('https://fonts.cdnfonts.com/css/sf-pro-display');
@import url('https://fonts.cdnfonts.com/css/inter');

:root{
  /* Core Palette */
  --navy:           #0C1A4E;
  --navy-mid:       #1A3280;
  --purple:         #7C3AED;
  --purple-dark:    #6B21C8;
  --purple-light:   #9333EA;
  --orange:         #F97316;
  --orange-hover:   #EA580C;

  /* Backgrounds */
  --bg:             #0C1A4E;
  --bg-secondary:   #0F2060;
  --bg-card:        rgba(255, 255, 255, 0.05);
  --bg-card-hover:  rgba(255, 255, 255, 0.08);

  /* Text */
  --ink:            #FFFFFF;
  --ink-muted:      rgba(255, 255, 255, 0.72);
  --ink-faint:      rgba(255, 255, 255, 0.40);

  /* Borders & Shadows */
  --border:         rgba(124, 58, 237, 0.30);
  --border-subtle:  rgba(255, 255, 255, 0.10);
  --shadow:         0 8px 32px rgba(124, 58, 237, 0.25);
  --shadow-card:    0 4px 16px rgba(0, 0, 0, 0.40);

  /* Nav */
  --nav-bg:         rgba(12, 26, 78, 0.88);
  --nav-bg-scrolled:rgba(12, 26, 78, 0.97);
  --nav-border:     rgba(124, 58, 237, 0.20);
  --nav-height:     64px;

  /* Accents */
  --accent:         #F97316;
  --accent-hover:   #EA580C;
  --highlight:      #7C3AED;

  /* ---- Typography ---- */
  --font-display: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:    "Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* ---- Spacing & layout ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --container-max: 1200px;
  --container-pad: clamp(1.5rem, 5vw, 3rem);
  --section-gap:   clamp(4rem, 8vw, 8rem);
  --card-radius:   12px;
  --card-pad:      clamp(1.5rem, 3vw, 2rem);

  /* ---- supporting tokens (keep the rest of the component system resolving
     against the palette/scale above; not part of the brand spec itself) ---- */
  /* Hero overlay — flat solid navy tint shared by .hero and .page-hero */
  --hero-overlay:   rgba(12,26,78,.85);

  --orange-soft:var(--orange);
  --surface:var(--bg-card);
  --surface-2:var(--bg-card-hover);
  --body:var(--ink-muted);
  --muted:var(--ink-faint);
  --line:var(--border);
  --line-strong:rgba(124,58,237,.6);
  --on-navy:var(--ink);
  --on-navy-soft:var(--ink-muted);
  --on-navy-line:var(--border-subtle);
  --gold-glow:rgba(249,115,22,.32);
  --teal-glow:rgba(124,58,237,.4);
  --coral:var(--purple-light);
  --coral-soft:#C4B5FD;

  --radius:var(--card-radius);
  --maxw:1180px;
  --gutter:var(--container-pad);
  --ease:cubic-bezier(.22,.61,.18,1);
  --font:var(--font-display);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-height) + 16px)}
body{
  font-family:var(--font-body);background:var(--bg);color:var(--body);
  font-size:var(--text-base);line-height:var(--leading-normal);letter-spacing:-0.011em;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
  transition:background .4s var(--ease),color .4s var(--ease);
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:-0.03em;text-wrap:balance}
p{font-size:var(--text-base);line-height:var(--leading-relaxed);text-wrap:pretty}
::selection{background:var(--gold-glow)}

/* ---------- Theme toggle ---------- */
.theme-toggle{position:relative;width:40px;height:40px;border-radius:10px;border:1px solid var(--on-navy-line);background:rgba(255,255,255,.04);display:grid;place-items:center;flex:none;transition:border-color .25s ease,background .25s ease}
.nav.scrolled .theme-toggle{border-color:var(--line-strong);background:var(--surface-2)}
.theme-toggle svg{width:18px;height:18px;color:var(--ink)}
.theme-toggle .i-moon{display:none}
.theme-toggle:hover{transform:translateY(-1px)}

.wrap{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}

/* ---------- Section eyebrow label ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:13px;font-weight:var(--weight-semibold);letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.eyebrow::before{content:"";width:32px;height:2px;background:var(--orange);display:inline-block;border-radius:2px;flex:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;height:52px;padding:0 1.5rem;border-radius:999px;font-size:.96rem;font-weight:var(--weight-semibold);letter-spacing:-0.01em;border:1.5px solid transparent;white-space:nowrap;flex-shrink:0;transition:transform .25s ease,background .25s ease,box-shadow .25s ease,color .25s ease,border-color .25s ease;will-change:transform}
.btn .arrow{transition:transform .25s ease}
.btn:hover .arrow{transform:translateX(4px)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 12px 30px -12px var(--gold-glow)}
.btn-primary:hover{transform:translateY(-2px);background:var(--orange-hover);box-shadow:0 18px 38px -14px var(--gold-glow)}
.btn-primary:focus-visible{outline:2.5px solid var(--orange);outline-offset:3px}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--purple)}
.btn-ghost:hover{transform:translateY(-2px);background:var(--purple);border-color:var(--purple);color:#fff}
.btn-onnavy{background:transparent;color:var(--ink);border:2px solid rgba(255,255,255,.30)}
.btn-onnavy:hover{transform:translateY(-2px);background:var(--purple-dark);border-color:var(--purple-dark);color:#fff;box-shadow:0 6px 22px rgba(107,33,200,.55)}
:focus-visible{outline:2.5px solid var(--orange);outline-offset:3px;border-radius:6px}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--nav-height);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.4rem;padding-inline:var(--container-pad);background:var(--nav-bg);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--nav-border);transition:background .3s ease,box-shadow .3s ease}
.nav.scrolled{background:var(--nav-bg-scrolled);box-shadow:0 2px 20px rgba(0,0,0,.4)}
.nav-actions{display:flex;align-items:center;gap:.8rem;justify-self:end;flex-shrink:0}
.brand{display:flex;align-items:center;gap:.2rem;color:var(--ink);font-weight:var(--weight-semibold);letter-spacing:-0.02em;flex-shrink:0}
.brand-mark{height:50px;display:flex;align-items:center;flex:none}
.brand-mark img{height:100%;width:auto;object-fit:contain;filter:brightness(0) invert(1)}
.brand > span{display:flex;flex-direction:column}
.brand-name-text{font-size:.78rem;font-weight:var(--weight-bold);letter-spacing:.05em;color:var(--orange);text-transform:uppercase;white-space:nowrap}
.brand small{display:block;font-size:.62rem;font-weight:var(--weight-medium);letter-spacing:.05em;color:var(--muted)}
[data-theme="dark"] .brand .logo-subtitle{color:#ffffff}
[data-theme="light"] .brand .logo-subtitle{color:#1a1a2e}
.nav-links{display:flex;align-items:center;gap:1.7rem;justify-self:center;margin-left:2.2rem}
.nav-links a{position:relative;font-family:var(--font-body);font-size:13px;font-weight:var(--weight-medium);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.80);transition:color .2s ease;white-space:nowrap;padding-block:6px;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--orange)}
.nav-links a.active{color:var(--orange);border-bottom-color:var(--orange)}
.nav-cta{height:40px;padding:0 1.15rem;font-size:.85rem}
.menu-btn{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--on-navy-line);background:transparent;align-items:center;justify-content:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{content:"";display:block;width:18px;height:1.6px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.menu-btn span::before{position:relative;top:-5.5px}
.menu-btn span::after{position:relative;top:4px}
.menu-btn.open{border-color:var(--orange)}
.menu-btn.open span{background:transparent}
.menu-btn.open span::before{transform:translateY(7px) rotate(45deg)}
.menu-btn.open span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- Hero (home, full) ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:100vh;background:linear-gradient(var(--hero-overlay),var(--hero-overlay)),url('../assets/New%20images/9.jpg.jpeg') center center/cover no-repeat;color:var(--ink);padding-block:clamp(96px,16vh,160px)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:none;z-index:1;pointer-events:none}
.hero .hero-inner{position:relative;z-index:2}
.hero-aurora{position:absolute;z-index:-1;pointer-events:none;width:60vw;height:60vw;max-width:720px;max-height:720px;top:-14%;right:-8%;border-radius:50%;background:radial-gradient(circle,var(--gold-glow),rgba(201,138,44,0) 62%);filter:blur(14px);animation:drift 22s var(--ease) infinite alternate}
.hero-aurora.two{display:none}
.hero-grid-lines{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 78%);-webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 78%)}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-40px,40px,0) scale(1.12)}}
.hero-inner{max-width:1080px}
.hero .eyebrow{color:var(--orange);letter-spacing:.12em;border-left:3px solid var(--orange);padding-left:.8rem}
.hero .eyebrow::before{content:none}
.hero h1{font-size:clamp(2rem,4vw,3.2rem);font-weight:var(--weight-black);line-height:var(--leading-tight);letter-spacing:-0.02em;margin-top:1rem;color:#fff}
.hero h1 em{font-style:normal;color:var(--orange);display:block}
.hero-sub{margin-top:1.5rem;max-width:58ch;font-size:var(--text-lg);font-weight:var(--weight-normal);line-height:var(--leading-relaxed);color:var(--ink-muted);letter-spacing:-0.005em}
.hero-meta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem;border-radius:999px;border:1px solid var(--border-subtle);background:rgba(255,255,255,.04);font-size:.86rem;font-weight:var(--weight-medium);color:var(--ink-muted);letter-spacing:-0.005em}
.chip svg{width:15px;height:15px;color:var(--orange);flex:none}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.4rem}

/* ---------- Page hero (inner pages — compact) ---------- */
.page-hero{--page-hero-img:url('../assets/New%20images/9.jpg.jpeg');position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:490px;background:linear-gradient(var(--hero-overlay),var(--hero-overlay)),var(--page-hero-img) center center/cover no-repeat;color:var(--on-navy);padding:clamp(120px,16vh,170px) var(--container-pad) clamp(48px,6vw,72px)}
.page-hero .hero-inner{position:relative;z-index:2;max-width:760px}
.page-hero .hero-aurora{width:40vw;height:40vw;max-width:480px;max-height:480px}
.page-hero h1{color:#fff;margin:1.1rem 0 0;font-size:clamp(2.05rem,5vw,var(--text-6xl));font-weight:var(--weight-black);letter-spacing:-0.02em;line-height:var(--leading-tight)}
.page-hero h1 em{font-style:normal;color:var(--orange)}
.page-hero p{margin-top:1.2rem;max-width:62ch;font-size:var(--text-lg);color:var(--ink-muted);line-height:var(--leading-relaxed)}
.crumb{display:flex;align-items:center;gap:.5rem;font-size:var(--text-sm);color:var(--ink-muted);margin-bottom:.2rem}
.crumb a:hover{color:var(--orange)}
.crumb span{opacity:.5}

/* ---------- Stats strip ---------- */
.stats{position:relative;z-index:2;margin-top:-44px}
.stats-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--card-radius);box-shadow:var(--shadow-card);display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(1.4rem,2.6vw,2.1rem) clamp(1.2rem,2.4vw,2rem);border-left:1px solid var(--border)}
.stat:first-child{border-left:none}
.stat b{display:block;font-size:clamp(2rem,3.4vw,2.7rem);color:var(--ink);font-weight:var(--weight-semibold);letter-spacing:-0.04em;line-height:1}
.stat b i{font-style:normal;color:var(--orange)}
.stat span{display:block;margin-top:.5rem;font-size:var(--text-sm);color:var(--muted);font-weight:var(--weight-medium);letter-spacing:-0.005em}

/* ---------- Section frame ---------- */
.section{padding-block:var(--section-gap)}
.section.tight{padding-top:clamp(54px,6vw,80px)}
.section.alt{background:var(--surface);border-block:1px solid var(--border)}
.head{max-width:660px;margin-bottom:var(--space-12)}
.head.center{margin-inline:auto;text-align:center}
.head.center .eyebrow{justify-content:center}
.head h2{font-size:clamp(1.75rem,5vw,var(--text-4xl));font-weight:var(--weight-bold);line-height:var(--leading-snug);margin-top:1rem;letter-spacing:-0.025em}
.head p{margin-top:1.1rem;font-size:var(--text-lg);color:var(--body);max-width:62ch}
.head.center p{margin-inline:auto}

/* ---------- Two-col overview ---------- */
.overview{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.4rem,5vw,5rem);align-items:center}
.overview .lede{font-size:clamp(1.35rem,2.5vw,1.95rem);line-height:1.34;color:var(--ink);font-weight:var(--weight-medium);letter-spacing:-0.025em}
.overview .lede mark{background:none;color:var(--orange);font-weight:var(--weight-semibold)}
.overview-side p{color:var(--body);font-size:var(--text-lg)}
.overview-side p + p{margin-top:1.1rem}
.vision{margin-top:1.8rem;display:flex;align-items:center;gap:1rem;padding:1.1rem 1.3rem;border-radius:var(--card-radius);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-card);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.vision .v-mark{width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;background:rgba(124,58,237,.15);color:var(--purple)}
.vision .v-mark svg{width:22px;height:22px}
.vision b{display:block;color:var(--ink);font-size:.98rem;font-weight:var(--weight-semibold)}
.vision span{font-size:.9rem;color:var(--muted)}

/* ---------- Track list ---------- */
.tracks-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.tracks-aside{position:sticky;top:calc(var(--nav-height) + 36px)}
.tracks-aside h2{font-size:clamp(1.75rem,4vw,var(--text-4xl));font-weight:var(--weight-bold)}
.tracks-aside p{margin-top:1.1rem;color:var(--body);font-size:var(--text-lg);max-width:36ch}
.tracks-aside .btn{margin-top:1.8rem}
.track-list{display:flex;flex-direction:column}
.track-item{border-top:1px solid var(--border)}
.track-item:last-child{border-bottom:1px solid var(--border)}
.track{appearance:none;-webkit-appearance:none;width:100%;background:none;border:none;font:inherit;color:inherit;text-align:left;cursor:pointer;position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:center;padding:1.7rem .4rem;transition:padding-left .3s ease}
.track .num{font-size:1.05rem;font-weight:var(--weight-semibold);color:var(--orange);font-variant-numeric:tabular-nums;min-width:2.2ch}
.track h3{font-size:var(--text-xl);font-weight:var(--weight-semibold);letter-spacing:-0.015em;line-height:1.25;color:var(--ink);transition:color .2s ease}
.track .plus{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;color:var(--ink);flex:none;transition:.3s ease;transform:rotate(0deg)}
.track .plus svg{width:16px;height:16px}
.track::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);transform:scaleY(0);transform-origin:top;transition:transform .3s ease;border-radius:2px}
.track:hover{padding-left:1.3rem}
.track:hover::after{transform:scaleY(1)}
.track:hover h3{color:var(--orange)}
.track:hover .plus{background:var(--orange);border-color:var(--orange);color:#fff;transform:rotate(90deg)}
.track[aria-expanded="true"]{padding-left:1.3rem}
.track[aria-expanded="true"]::after{transform:scaleY(1)}
.track[aria-expanded="true"] h3{color:var(--orange)}
.track[aria-expanded="true"] .plus{background:var(--orange);border-color:var(--orange);color:#fff;transform:rotate(45deg)}

/* Track accordion panel — grid-rows trick animates to auto height without a fixed max-height guess */
.track-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.track-panel.open{grid-template-rows:1fr}
.track-panel-inner{overflow:hidden;min-height:0}
.track-panel ul{list-style:none;margin:0;display:flex;flex-direction:column;gap:.5rem;padding:0 .4rem 1.6rem calc(2.2ch + 1.4rem + .4rem)}
.track-panel li{position:relative;padding-left:1.1rem;color:var(--body);font-size:var(--text-sm);line-height:1.5}
.track-panel li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--orange)}
@media (max-width:640px){
  .track-panel ul{padding-left:1.6rem}
}

/* ---------- Bento / feature cards ---------- */
.focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch}
.fcard{position:relative;overflow:hidden;height:100%;min-height:220px;background:rgba(255,255,255,.05);border:1px solid rgba(124,58,237,.25);border-radius:12px;padding:1.75rem;display:flex;flex-direction:column;justify-content:space-between;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.fcard:hover{transform:translateY(-4px);border-color:rgba(124,58,237,.55);box-shadow:0 12px 36px rgba(124,58,237,.18)}
.fcard .ic{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;background:rgba(124,58,237,.15);margin-bottom:1rem;color:var(--purple)}
.fcard .ic svg{width:22px;height:22px}
.fcard h3{font-size:1.05rem;font-weight:600;color:#fff;margin-bottom:.6rem;letter-spacing:-0.01em}
.fcard p{font-size:.875rem;color:rgba(255,255,255,.65);line-height:1.7;flex-grow:1}
.fcard .tag{margin-top:1rem;font-size:.75rem;font-weight:500;color:var(--purple);letter-spacing:.04em}
@media (max-width:1024px){
  .focus-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .focus-grid{grid-template-columns:1fr}
}

/* Heading blocks above the three uniform card-grid sections (focus areas,
   special-session essentials, Khobar highlights) — left-aligned, fixed gap to grid */
#focus .head,#what .head,#highlights .head{margin-bottom:2.5rem}
#focus .head p,#what .head p,#highlights .head p{max-width:600px}

/* ---------- Timeline ---------- */
.dates{padding-block:var(--section-gap);background:radial-gradient(120% 130% at 50% -20%,var(--purple-light),var(--purple) 40%,var(--navy));color:var(--on-navy)}
.dates .head h2{color:#fff}
.dates .head .eyebrow{color:var(--orange)}
.timeline{margin-top:1rem;display:flex;justify-content:space-between;position:relative}
.timeline::before{content:'';position:absolute;top:12px;left:12px;right:12px;height:2px;background:linear-gradient(90deg,rgba(249,115,22,.15),rgba(249,115,22,.75) 50%,rgba(249,115,22,.15));z-index:0;pointer-events:none}
.tl-item{display:flex;flex-direction:column;flex:1}
.tl-dot{width:24px;height:24px;border-radius:50%;background:var(--navy);border:2px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;flex-shrink:0}
.tl-dot i{width:8px;height:8px;border-radius:50%;background:var(--ink-muted);display:block;transition:.3s ease}
.tl-dot.is-event{border-color:var(--orange)}
.tl-dot.is-event i{background:var(--orange);box-shadow:0 0 0 4px var(--gold-glow)}
.tl-label{margin-top:1.3rem;padding:0 1.2rem 0 0}
.tl-label b{display:block;font-size:1.18rem;color:#fff;font-weight:var(--weight-semibold);letter-spacing:-0.02em}
.tl-label span{display:block;margin-top:.35rem;font-size:.92rem;color:var(--ink-muted)}
.tl-label em{font-style:normal;display:inline-flex;align-items:center;margin-top:.8rem;color:var(--orange)}
.tl-label em svg{width:22px;height:22px;flex-shrink:0;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Prose ---------- */
.prose{max-width:72ch}
.prose h3{font-size:var(--text-xl);font-weight:var(--weight-semibold);margin:2.2rem 0 .8rem}
.prose h3:first-child{margin-top:0}
.prose p{font-size:var(--text-lg);color:var(--body);margin-bottom:1.1rem}
.prose strong{color:var(--ink);font-weight:var(--weight-semibold)}
.prose a{color:var(--orange);font-weight:var(--weight-medium)}
.prose a:hover{text-decoration:underline}

/* ---------- Steps / numbered list ---------- */
.steps{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--card-radius);overflow:hidden}
.step{background:var(--surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:var(--card-pad);display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:start}
.step .sn{width:42px;height:42px;border-radius:10px;background:rgba(124,58,237,.15);color:var(--purple);display:grid;place-items:center;font-weight:var(--weight-bold);font-size:1.05rem;flex:none}
.step h3{font-size:var(--text-xl);font-weight:var(--weight-semibold);margin-bottom:.4rem}
.step p{color:var(--body);font-size:var(--text-base)}

/* ---------- Committee ---------- */
.lead-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-6)}
.lead-grid .person{max-width:560px}
.person{position:relative;overflow:hidden;background:rgba(255,255,255,.04);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(124,58,237,.25);border-radius:var(--card-radius);box-shadow:var(--shadow-card);padding:var(--card-pad);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.person:hover{transform:translateY(-4px);border-color:rgba(124,58,237,.60);box-shadow:0 12px 40px rgba(124,58,237,.20)}
.person .av{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-weight:var(--weight-bold);font-size:1.15rem;color:#fff;background:linear-gradient(150deg,var(--navy-mid),var(--navy));margin-bottom:1rem;letter-spacing:.01em}
.av-photo{width:80px;height:80px;border-radius:50%;object-fit:cover;object-position:top center;border:2px solid rgba(124,58,237,.5);display:block;margin:0 auto 0.75rem;transition:transform 0.25s ease, box-shadow 0.25s ease}
.person:hover .av-photo{transform:scale(1.06);box-shadow:0 8px 32px var(--gold-glow)}
.person .role-tag{font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:.05em;text-transform:uppercase;color:var(--orange)}
.person h3{font-size:var(--text-base);font-weight:var(--weight-semibold);margin:.5rem 0 .3rem}
.person .pos{font-size:var(--text-sm);color:var(--body)}
.person .aff{font-size:var(--text-xs);color:var(--ink-faint);margin-top:.35rem}
.committee-block{margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.committee-block > h2{display:flex;align-items:baseline;gap:.8rem;font-size:var(--text-3xl);font-weight:var(--weight-bold);margin-bottom:1.4rem}
.committee-block > h2 .ct{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--muted);letter-spacing:0}
.directory{columns:3 240px;column-gap:28px}
.directory .d-item{break-inside:avoid;padding:.7rem 0;border-bottom:1px solid var(--border)}
.directory .d-item b{display:block;color:var(--ink);font-size:.96rem;font-weight:var(--weight-semibold)}
.directory .d-item span{font-size:var(--text-xs);color:var(--muted)}

/* ---------- Pricing / registration ---------- */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-6);max-width:760px;margin-inline:auto}
.price-card{position:relative;overflow:hidden;background:rgba(255,255,255,.04);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(124,58,237,.25);border-radius:var(--card-radius);box-shadow:var(--shadow-card);padding:var(--card-pad);text-align:center;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.price-card:hover{transform:translateY(-4px);border-color:rgba(124,58,237,.60);box-shadow:0 12px 40px rgba(124,58,237,.20)}
.price-card.feature{background:radial-gradient(120% 140% at 80% 0%,var(--purple-light),var(--navy));color:var(--on-navy);border-color:transparent}
.price-card .pt{font-size:var(--text-xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--orange)}
.price-card .amount{font-size:clamp(2.6rem,5vw,3.4rem);font-weight:var(--weight-semibold);letter-spacing:-0.04em;color:var(--ink);margin:.6rem 0 .2rem;line-height:1}
.price-card.feature .amount{color:#fff}
.price-card .amount sup{font-size:1.3rem;font-weight:var(--weight-medium);vertical-align:super;opacity:.7}
.price-card .pd{font-size:var(--text-sm);color:var(--body)}
.price-card.feature .pd{color:var(--on-navy-soft)}
.price-card .btn{margin-top:1.5rem;width:100%}

/* ---------- Info / contact ---------- */
.info-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6)}
.info-card{position:relative;overflow:hidden;background:rgba(255,255,255,.04);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(124,58,237,.25);border-radius:var(--card-radius);box-shadow:var(--shadow-card);padding:var(--card-pad);display:flex;gap:1.1rem;align-items:flex-start;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.info-card:hover{transform:translateY(-4px);border-color:rgba(124,58,237,.60);box-shadow:0 12px 40px rgba(124,58,237,.20)}
.info-card .ic{width:48px;height:48px;border-radius:10px;flex:none;display:grid;place-items:center;background:rgba(124,58,237,.15);color:var(--purple)}
.info-card .ic svg{width:23px;height:23px}
.info-card h3{font-size:var(--text-xl);font-weight:var(--weight-semibold);margin-bottom:.3rem}
.info-card p,.info-card a{font-size:var(--text-base);color:var(--body);line-height:var(--leading-relaxed);word-break:break-word}
.info-card a:hover{color:var(--orange)}
.map-frame{border:1px solid var(--border);border-radius:var(--card-radius);overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:16/8;background:var(--surface-2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.map-frame iframe{width:100%;height:100%;border:0;display:block}
@media (min-width:640px){ .info-grid{grid-template-columns:repeat(2,1fr)} }

/* ---------- Media split (Khobar/venue) ---------- */
.media-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.2rem,4vw,4rem);align-items:center}
.media-split.rev{direction:rtl}
.media-split.rev > *{direction:ltr}
.media-frame{position:relative;border-radius:var(--card-radius);overflow:hidden;aspect-ratio:4/3;background:linear-gradient(150deg,var(--navy-mid),var(--navy));box-shadow:var(--shadow-card);display:grid;place-items:center}
.media-frame .ph{color:var(--ink-muted);text-align:center;padding:2rem}
.media-frame .ph svg{width:56px;height:56px;color:var(--orange);opacity:.85;margin-bottom:.6rem}
.media-frame img{width:100%;height:100%;object-fit:cover}

/* ---------- CTA ---------- */
.cta-band{padding-block:var(--section-gap)}
.cta-card{position:relative;overflow:hidden;border-radius:28px;background:radial-gradient(110% 140% at 85% 0%,var(--purple-light),var(--purple) 50%,var(--navy));color:var(--on-navy);padding:clamp(2.6rem,6vw,4.5rem);display:grid;grid-template-columns:1.3fr .7fr;gap:2.5rem;align-items:center}
.cta-card .glow{position:absolute;inset:auto -10% -60% auto;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,var(--gold-glow),transparent 65%);filter:blur(8px);pointer-events:none}
.cta-card h2{color:#fff;font-size:clamp(1.75rem,4vw,var(--text-4xl));font-weight:var(--weight-bold);letter-spacing:-0.025em;position:relative}
.cta-card p{margin-top:1rem;color:var(--on-navy-soft);font-size:var(--text-lg);max-width:46ch;position:relative}
.cta-actions{display:flex;flex-direction:column;gap:.85rem;position:relative}
.cta-actions .btn{width:100%}
.cta-loc{display:flex;align-items:center;gap:.55rem;margin-top:.4rem;font-size:.9rem;color:var(--on-navy-soft);justify-content:center}
.cta-loc svg{width:15px;height:15px;color:var(--orange)}

/* ---------- Footer ---------- */
.footer{padding-block:var(--space-16);border-top:1px solid var(--nav-border);background:#060D24}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;margin-bottom:2.4rem}
.footer .brand{color:var(--ink);align-items:flex-start}
.footer .brand small{color:var(--muted)}
.footer-blurb{margin-top:1rem;font-size:var(--text-sm);color:var(--body);max-width:38ch;line-height:var(--leading-relaxed)}
.footer-col h4{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:1rem;font-weight:var(--weight-semibold)}
.footer-col a{display:block;font-size:var(--text-sm);color:var(--body);padding:.32rem 0}
.footer-col a:hover{color:var(--orange)}
.footer-contact p{font-size:var(--text-sm);color:var(--body);padding:.32rem 0}
.footer-contact a{color:var(--body)}
.footer-contact a:hover{color:var(--orange)}
.copyright{margin-top:var(--space-8);text-align:center;font-size:var(--text-xs);color:var(--ink-faint);border-top:1px solid var(--border-subtle);padding-top:1.6rem;display:flex;flex-direction:column;gap:.4rem;align-items:center}

/* ---------- Reveal motion ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}

/* ---------- Responsive ---------- */
@media (max-width:1400px){
  .nav-links{gap:1.3rem;margin-left:1.2rem}
}
@media (max-width:1080px){
  .nav-links{gap:1.1rem}
}
@media (max-width:960px){
  .overview,.tracks-layout,.cta-card,.media-split{grid-template-columns:1fr}
  .media-split.rev{direction:ltr}
  .tracks-aside{position:static}
  .stats-card{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:none}
  .stat:nth-child(n+3){border-top:1px solid var(--border)}
  .timeline{flex-wrap:wrap;gap:2.4rem 1rem}
  .timeline::before{display:none}
  .tl-item{flex:0 0 calc(50% - 0.5rem)}
  .tl-label{padding:0}
  .cta-card{text-align:left}
  .directory{columns:2 220px}
  .footer-top{grid-template-columns:1fr 1fr}
}
/* mobile-menu-extras injected by JS — hidden at tablet (769–1024px, where toggle+CTA stay in
   the top bar); shown inside the overlay only at mobile (≤768px) */
.mobile-menu-extras{display:none}
.mobile-close-btn{display:none}

@media (max-width:768px){
  /* ── Mobile timeline: vertical stacked layout ── */
  .timeline{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding-left:0}
  .timeline::before{display:block;left:11px;top:12px;right:auto;bottom:12px;width:2px;height:auto;background:linear-gradient(180deg,rgba(249,115,22,.15),rgba(249,115,22,.75) 50%,rgba(249,115,22,.15))}
  .tl-item{flex-direction:row;align-items:flex-start;gap:1rem;flex:none;width:100%;padding-bottom:2rem}
  .tl-item:last-child{padding-bottom:0}
  .tl-dot{width:24px;height:24px;flex:0 0 24px;flex-shrink:0;align-self:flex-start}
  .tl-label{flex:1;padding:0;margin-top:0}
  .stats{margin-top:-30px}
  .directory{columns:1}
  .footer-top{grid-template-columns:1fr;gap:1.6rem}

  /* ── Mobile nav breakpoint (≤768px) ── */
  /* Hide theme toggle + submit paper from the top navbar; hamburger (.menu-btn) stays. */
  .nav-actions .theme-toggle,
  .nav-actions .nav-cta{display:none}

  /* Show theme toggle + submit paper inside the full-screen overlay instead. */
  .mobile-menu-extras{
    display:flex;flex-direction:column;align-items:stretch;gap:.85rem;
    padding-top:1.5rem;margin-top:1rem;
    border-top:1px solid var(--border-subtle)
  }
  .mobile-menu-extras .btn{width:100%;justify-content:center}
  /* Override the square 40×40 style so the toggle button spans full width in the overlay */
  .mobile-menu-extras .theme-toggle{
    width:100%;height:44px;border-radius:10px;
    display:flex;place-items:unset;justify-content:center;gap:.65rem
  }
}
@media (max-width:1024px){
  .menu-btn{display:flex}
  .nav-links{
    display:flex;position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;
    width:100vw;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);
    padding:calc(var(--nav-height) + 2.5rem) var(--container-pad) 3rem;
    height:100dvh;max-height:100dvh;overflow-y:auto;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    border:none;border-radius:0;box-shadow:none;
    opacity:0;transform:translateY(-8px);visibility:hidden;pointer-events:none;
    transition:opacity .28s ease,transform .28s ease,visibility .28s;
  }
  .nav-links.open{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}
  .nav-links > a{
    font-size:1.1rem;font-weight:var(--weight-medium);letter-spacing:.02em;
    padding:1rem .4rem;width:100%;
    color:var(--ink);border-bottom:1px solid var(--border-subtle);
  }
  .nav-links > a:last-of-type{border-bottom:none}
  .nav-links > a.active{color:var(--orange)}
  /* Dedicated close button — fixed at top-right of the fullscreen overlay */
  .mobile-close-btn{
    position:fixed;top:calc((var(--nav-height) - 44px) / 2);right:var(--container-pad);
    z-index:1001;width:44px;height:44px;
    border-radius:10px;border:1.5px solid var(--border);background:var(--bg-card);
    display:flex;align-items:center;justify-content:center;
    color:var(--ink);cursor:pointer;
    opacity:0;pointer-events:none;transition:opacity .28s ease;
  }
  .mobile-close-btn svg{width:22px;height:22px;flex:none}
  .mobile-close-btn:hover{background:var(--bg-card-hover)}
  .nav-links.open .mobile-close-btn{opacity:1;pointer-events:auto}
  /* Fade the hamburger out when the overlay is open — close button replaces it */
  .menu-btn{transition:opacity .28s ease}
  .menu-btn.open{opacity:0;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ===== COMMITTEES HOME SECTION ===== */
.committees-home { padding-block: var(--section-gap); background: var(--surface); border-block: 1px solid var(--border); }
.committees-title { font-size: clamp(1.75rem,4vw,var(--text-4xl)); font-weight:var(--weight-bold); color:var(--ink); margin:.4rem 0 1rem; }
.committees-title em { font-style:normal; color:var(--orange); }
.committees-rule { width:32px; height:2px; background:var(--orange); margin:0 auto 1.2rem; border-radius:2px; }
.committees-sub { color:var(--body); font-size:var(--text-lg); max-width:560px; margin:0 auto 3rem; text-align:center; }
.committees-home .section-label .eyebrow { color: var(--orange); justify-content:center; }
.committees-home .section-label { text-align:center; margin-bottom:var(--space-12); }

.cm-block { margin-bottom: clamp(2.5rem,5vw,4rem); }
.cm-heading { font-size: var(--text-2xl); font-weight:var(--weight-bold); color:var(--ink); margin-bottom:.5rem; text-align: center; }
.cm-accent-line { height:2px; width:32px; border-radius:2px; margin-bottom:1.8rem; margin-left:auto; margin-right:auto; }

/* Grid layouts */
.cm-grid { display:grid; gap:var(--space-6); grid-template-columns:1fr; justify-content:center; }
.cm-grid-3 { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-6); }
.cm-grid-3 .cm-card { flex: 0 1 240px; }
.cm-grid-2 { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-6); }
.cm-grid-2 .cm-card { flex: 0 1 280px; }
.cm-grid-1c { display:flex; justify-content:center; }
.cm-grid-1c .cm-card { flex: 0 0 240px; }

/* Card */
.cm-card {
  position: relative;
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(124,58,237,.25);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  padding: var(--card-pad);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease, background .3s ease;
  cursor: default;
}
.cm-card:not(.cm-card-wide){ min-height: 260px; }
.cm-card::before{
  content:"";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.cm-card::after{
  content:"";
  position: absolute; top: -10%; left: -60%;
  width: 35%; height: 130%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-18deg);
  transition: left .7s ease;
  pointer-events: none;
}
.cm-card:hover::before{ transform: scaleX(1); }
.cm-card:hover::after{ left: 140%; }
.cm-card:hover {
  transform: translateY(-6px) scale(1.015);
  background: var(--bg-card-hover);
  border-color: rgba(249,115,22,.55);
  box-shadow: 0 16px 44px -10px rgba(249,115,22,.45);
}

/* Photo area — circular, matches committee-card photo spec */
.cm-photo-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: .6rem;
  border: 2px solid rgba(249,115,22,.55);
  background: linear-gradient(150deg,var(--navy-mid),var(--navy));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .35s var(--ease), box-shadow .35s ease;
}
.cm-card:hover .cm-photo-wrap{
  transform: scale(1.08);
  box-shadow: 0 0 0 5px rgba(249,115,22,.22), 0 10px 26px -6px rgba(249,115,22,.45);
}
.cm-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .4s ease;
}
.cm-card:hover .cm-photo{ transform: scale(1.1); }
.cm-initials {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  font-weight: var(--weight-black);
  color: #fff;
  letter-spacing: .02em;
  background: linear-gradient(150deg, var(--orange), var(--navy));
}
.cm-photo + .cm-initials { display: none; }

/* Text inside card */
.cm-card h4 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
  transition: color .25s ease;
}
.cm-card:hover h4{ color: var(--orange); }
.cm-role {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  padding: .3rem .75rem;
  border-radius: 999px;
  color: var(--orange);
  background: rgba(249,115,22,.12);
}
.cm-aff {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  display: block;
  line-height: 1.4;
}

/* Wide card (chairs — centered column layout) */
.cm-card-wide {
  flex-direction: column;
  text-align: center;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: 2rem 2.5rem;
  background: var(--bg-card-hover);
  border-color: rgba(124,58,237,.35);
  border-radius: 14px;
}
.cm-card-wide .cm-photo-wrap {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}
.cm-card-wide .cm-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}
.cm-card-wide .cm-info h4 { font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.cm-card-wide .cm-role { font-size: .8rem; letter-spacing: .08em; font-weight: 600; }
.cm-card-wide .cm-aff { font-size: .875rem; color: var(--ink-muted); }
.cm-divider { height: 2px; width: 40px; border-radius: 2px; margin: .2rem auto; }

/* More note */
.cm-more-note {
  text-align: center;
  color: var(--body);
  font-size: var(--text-sm);
  margin-top: 1.2rem;
  font-style: italic;
}
.cm-learn-more { text-align:center; margin-top: 2rem; }

/* Responsive */
@media (max-width: 640px) {
  .cm-card-wide { padding: 1.5rem 1.25rem; }
}

/* ── Accommodation Section ── */
.accommodation-section .container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}

.accommodation-section {
  padding-block: clamp(4rem, 8vw, 8rem);
  padding-top: 120px;
}

.accommodation-section .section-heading {
  margin-bottom: 3rem;
}

.accommodation-section .eyebrow {
  display: block;
  color: #F97316;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.accommodation-section h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.accommodation-section .section-subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.60);
  line-height: 1.7;
}

/* Hotel Cards Grid */
.hotels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  align-items: stretch;
}

.hotel-card {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.hotel-card:hover {
  transform: translateY(-5px);
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 16px 48px rgba(124, 58, 237, 0.20);
}

/* Hotel Image */
.hotel-img-wrapper {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: linear-gradient(135deg, #1A3280, #7C3AED);
}

.hotel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.hotel-card:hover .hotel-img {
  transform: scale(1.04);
}

/* Hotel Card Body */
.hotel-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-grow: 1;
}

.hotel-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  margin: 0;
}

.hotel-address {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  margin: 0;
}

.hotel-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.80);
  text-decoration: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  transition: background 0.2s ease;
  margin-top: auto;
}

.hotel-phone:hover {
  background: rgba(255,255,255,0.10);
  color: #ffffff;
}

/* Long CTA text (e.g. "View Proceedings on IEEE Xplore") must wrap instead of
   overflowing the card — .hotel-card clips overflow, so unwrapped text gets cut off. */
.hotel-card-body .btn {
  width: 100%;
  height: auto;
  min-height: 52px;
  white-space: normal;
  text-align: center;
  padding: 0.85rem 1.25rem;
}

.btn-maps {
  display: block;
  text-align: center;
  padding: 0.65rem 1rem;
  border: 1.5px solid #F97316;
  border-radius: 8px;
  color: #F97316;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  margin-top: 0.5rem;
}

.btn-maps:hover {
  background: #F97316;
  color: #ffffff;
}

/* Responsive */
@media (max-width: 1024px) {
  .hotels-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ============================================================
   LIGHT THEME
   Toggled via [data-theme="light"] on <html> (assets/site.js).
   Everything below resolves through the existing variable system,
   so most components (cards, nav, footer text, buttons) repaint
   automatically. Two kinds of explicit rules are needed on top:

   1. Components that hardcode dark-theme colors instead of reading
      a variable (.fcard, .price-card, .info-card, .hotel-card, the
      footer, nav links, the logo filter).
   2. "Always-dark" brand surfaces — hero, page-hero, the dates
      timeline band, the committees band, the cta-card and the
      feature price card — which must render identically in both
      themes. Rather than re-stating every descendant rule, their
      color variables are re-pinned to the dark-theme values locally;
      every nested rule that reads var(--ink), var(--surface), etc.
      then resolves correctly through normal CSS variable cascading.
   ============================================================ */
[data-theme="light"]{
  --bg:             #F8F9FC;
  --bg-secondary:   #EEF0F7;
  --bg-card:        #FFFFFF;
  --bg-card-hover:  #F3F4F8;
  --ink:            #0D1117;
  --ink-muted:      #444C6A;
  --ink-faint:      #7A8099;
  --border:         rgba(124, 58, 237, 0.20);
  --border-subtle:  rgba(0, 0, 0, 0.08);
  --shadow:         0 8px 32px rgba(124, 58, 237, 0.12);
  --shadow-card:    0 4px 16px rgba(0, 0, 0, 0.08);
  --nav-bg:         rgba(248, 249, 252, 0.92);
  --nav-bg-scrolled:rgba(248, 249, 252, 0.98);
  --nav-border:     rgba(124, 58, 237, 0.15);
}

/* ---- Always-dark brand surfaces: re-pin to the dark palette ---- */
[data-theme="light"] .hero,
[data-theme="light"] .page-hero,
[data-theme="light"] .dates,
[data-theme="light"] .cta-card,
[data-theme="light"] .price-card.feature,
[data-theme="light"] .media-frame{
  --bg:             #0C1A4E;
  --bg-secondary:   #0F2060;
  --bg-card:        rgba(255, 255, 255, 0.05);
  --bg-card-hover:  rgba(255, 255, 255, 0.08);
  --ink:            #FFFFFF;
  --ink-muted:      rgba(255, 255, 255, 0.72);
  --ink-faint:      rgba(255, 255, 255, 0.40);
  --border:         rgba(124, 58, 237, 0.30);
  --border-subtle:  rgba(255, 255, 255, 0.10);
  --shadow:         0 8px 32px rgba(124, 58, 237, 0.25);
  --shadow-card:    0 4px 16px rgba(0, 0, 0, 0.40);
  /* --body/--on-navy-soft alias var(--ink-muted) only at :root, so their
     substitution freezes to the light-theme value there; re-declare them
     here too so they pick up this block's re-pinned --ink-muted instead. */
  --body:           var(--ink-muted);
  --on-navy-soft:   var(--ink-muted);
}
[data-theme="light"] .hero::after{ background:none; }

/* ---- Theme toggle icon: sun = currently dark, moon = currently light ---- */
[data-theme="light"] .theme-toggle .i-sun{ display:none; }
[data-theme="light"] .theme-toggle .i-moon{ display:block; }

/* ---- Logo: brightness(0) always yields solid black, invert(1) flips
   that white for the dark nav/footer. Drop the invert in light mode. ---- */
[data-theme="light"] .brand-mark img{ filter:brightness(0); }

/* ---- Nav links (hardcoded white in the dark theme) ---- */
[data-theme="light"] .nav-links a{ color:rgba(13,17,23,.75); }

/* ---- Footer ---- */
[data-theme="light"] .footer{ background:#E8EAF2; }

/* ---- Cards that hardcode translucent-white surfaces instead of
   reading --bg-card ---- */
[data-theme="light"] .fcard{ background:#fff; border-color:rgba(124,58,237,.15); }
[data-theme="light"] .fcard h3{ color:var(--ink); }
[data-theme="light"] .fcard p{ color:var(--ink-muted); }

[data-theme="light"] .price-card:not(.feature){ background:#fff; border-color:rgba(124,58,237,.15); }

[data-theme="light"] .info-card{ background:#fff; border-color:rgba(124,58,237,.15); }

[data-theme="light"] .hotel-card{ background:#fff; border-color:rgba(124,58,237,.15); }
[data-theme="light"] .hotel-name{ color:var(--ink); }
[data-theme="light"] .hotel-address{ color:var(--ink-muted); }
[data-theme="light"] .hotel-phone{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.10); color:var(--ink); }
[data-theme="light"] .hotel-phone:hover{ background:rgba(0,0,0,.07); color:var(--ink); }

[data-theme="light"] .accommodation-section h1{ color:var(--ink); }
[data-theme="light"] .accommodation-section .section-subtitle{ color:var(--ink-muted); }

/* ============================================================
   SITE-WIDE POLISH EFFECTS
   ============================================================ */

/* ---- Parallax hero backgrounds (CSS-only; degrades to normal
   scroll on browsers/devices that ignore fixed backgrounds) ---- */
.hero, .page-hero{ background-attachment: fixed; }
@media (max-width:768px){
  .hero, .page-hero{ background-attachment: scroll; }
}

/* ---- Shine sweep on hover, shared across the site's card types ---- */
.fcard::after, .person::after, .price-card::after, .info-card::after, .hotel-card::after{
  content:"";
  position: absolute; top: -10%; left: -60%;
  width: 35%; height: 130%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-18deg);
  transition: left .7s ease;
  pointer-events: none;
}
.fcard:hover::after, .person:hover::after, .price-card:hover::after, .info-card:hover::after, .hotel-card:hover::after{ left: 140%; }

/* ---- Scroll progress bar (injected by site.js) ---- */
.scroll-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--orange), var(--purple-light));
  z-index: 1001;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
  .scroll-progress{ transition: none; }
}

/* ---- Back-to-top button (injected by site.js) ---- */
.back-to-top{
  position: fixed; right: clamp(1.2rem,3vw,2.2rem); bottom: clamp(1.2rem,3vw,2.2rem);
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange); color: #fff; border: none;
  box-shadow: 0 10px 28px -8px rgba(249,115,22,.55);
  opacity: 0; transform: translateY(12px) scale(.9);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .25s ease;
  z-index: 55;
  cursor: pointer;
}
.back-to-top svg{ width: 20px; height: 20px; }
.back-to-top.show{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-to-top:hover{ background: var(--orange-hover); transform: translateY(-3px) scale(1); }
.back-to-top:focus-visible{ outline: 2.5px solid var(--orange); outline-offset: 3px; }

/* ---- Animated stat counters: avoid layout shift while JS ticks the value ---- */
.stat b{ font-variant-numeric: tabular-nums; }