/* ============================================================
   Edusphere Events — Design System
   Glassmorphism + Neumorphism + Skeuomorphism, MNC-agency level
   ============================================================ */

:root {
  --navy: #0B1B33;
  --navy2: #152A4D;
  --brand: #2563EB;
  --skyx: #4C8DF6;
  --orangex: #C98A2E;
  --goldx: #D4A93F;
  --leaf: #0F9D6B;
  --legalx: #7C2D45;
  --ink: #111827;
  --soft: #F7F8FB;
}

html { scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; color: var(--ink); background: var(--soft); overflow-x: hidden; }
h1, h2, h3 { letter-spacing: -0.02em; }
.font-display { font-family: 'Playfair Display', serif; }
::selection { background: rgba(76, 141, 246, .35); }

/* ---------- Glassmorphism ---------- */
.glass {
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: 0 8px 32px rgba(11, 27, 51, .12);
}
.glass-dark {
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
}
.glass-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem 1.1rem; border-radius: 9999px;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- Neumorphism ---------- */
.neo {
  background: var(--soft);
  border-radius: 1.5rem;
  box-shadow: 9px 9px 22px rgba(163, 177, 198, .55), -9px -9px 22px rgba(255, 255, 255, .95);
  transition: box-shadow .3s ease, transform .3s ease;
}
.neo:hover { box-shadow: 12px 12px 28px rgba(163, 177, 198, .65), -12px -12px 28px #fff; }
.neo-inset {
  background: var(--soft);
  box-shadow: inset 6px 6px 14px rgba(163, 177, 198, .5), inset -6px -6px 14px rgba(255, 255, 255, .9);
}
.neo-icon {
  width: 3.5rem; height: 3.5rem; border-radius: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; background: var(--soft);
  box-shadow: 5px 5px 12px rgba(163, 177, 198, .55), -5px -5px 12px rgba(255, 255, 255, .95);
}
.neo-btn {
  border-radius: 9999px; background: var(--soft);
  box-shadow: 5px 5px 12px rgba(163, 177, 198, .55), -5px -5px 12px rgba(255, 255, 255, .95);
  transition: box-shadow .2s ease, transform .2s ease;
}
.neo-btn:hover { transform: translateY(-1px); }
.neo-btn:active, .neo-btn.pressed {
  box-shadow: inset 4px 4px 10px rgba(163, 177, 198, .55), inset -4px -4px 10px rgba(255, 255, 255, .9);
  transform: none;
}

/* ---------- Skeuomorphism ---------- */
.tag-card { /* luggage-tag style card with punched hole */
  position: relative; background: #fff; border-radius: 1rem;
  border: 1px solid #e6ebf2;
  box-shadow: 0 10px 22px rgba(11, 27, 51, .08), inset 0 1px 0 #fff;
}
.tag-card::before {
  content: ''; position: absolute; top: .55rem; left: 50%; transform: translateX(-50%);
  width: .9rem; height: .9rem; border-radius: 9999px;
  background: var(--soft);
  box-shadow: inset 2px 2px 4px rgba(163, 177, 198, .6), inset -2px -2px 4px #fff;
}
.ticket { /* event-ticket style card */
  position: relative; background: #fff; border-radius: 1.25rem;
  border: 1px solid #e6ebf2;
  box-shadow: 0 14px 30px rgba(11, 27, 51, .1), inset 0 1px 0 #fff;
  overflow: hidden;
}
.ticket-divider {
  position: relative; height: 0; margin: 0 1.25rem;
  border-top: 2px dashed #dbe3ee;
}
.ticket-divider::before, .ticket-divider::after {
  content: ''; position: absolute; top: -.7rem; width: 1.4rem; height: 1.4rem; border-radius: 9999px;
  background: var(--soft);
  box-shadow: inset 2px 2px 5px rgba(163, 177, 198, .5), inset -2px -2px 5px #fff;
}
.ticket-divider::before { left: -1.95rem; }
.ticket-divider::after { right: -1.95rem; }
.shine { position: relative; overflow: hidden; }
.shine::after {
  content: ''; position: absolute; top: -60%; left: -75%; width: 50%; height: 220%;
  transform: rotate(25deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  transition: left .55s ease;
}
.shine:hover::after { left: 130%; }

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 2.1rem; border-radius: 9999px;
  background: linear-gradient(135deg, var(--orangex), var(--goldx));
  color: #fff; font-weight: 700; font-size: .95rem;
  box-shadow: 0 10px 24px rgba(201, 138, 46, .38), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(0, 0, 0, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(201, 138, 46, .45), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 6px 14px rgba(201, 138, 46, .35), inset 0 2px 4px rgba(0, 0, 0, .18); }
.btn-navy {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 2.1rem; border-radius: 9999px;
  background: linear-gradient(135deg, var(--navy), var(--navy2));
  color: #fff; font-weight: 700; font-size: .95rem;
  box-shadow: 0 10px 24px rgba(11, 27, 51, .35), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -2px 0 rgba(0, 0, 0, .2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-navy:hover { transform: translateY(-2px); }
.btn-navy:active { transform: translateY(1px); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 2.1rem; border-radius: 9999px;
  background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; font-size: .95rem;
  border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .2s ease, transform .2s ease;
}
.btn-ghost:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }

/* ---------- Chips & badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem 1rem; border-radius: 9999px;
  background: #fff; color: var(--brand);
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 4px 4px 10px rgba(163, 177, 198, .45), -4px -4px 10px #fff;
}
.badge {
  display: inline-flex; align-items: center;
  padding: .35rem .95rem; border-radius: 9999px;
  color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(11, 27, 51, .22), inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* ---------- Aurora background ---------- */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; border-radius: 9999px; filter: blur(90px); opacity: .5; }
.aurora .a1 { width: 480px; height: 480px; background: var(--brand); top: -160px; left: -120px; animation: drift 16s ease-in-out infinite alternate; }
.aurora .a2 { width: 420px; height: 420px; background: var(--orangex); bottom: -180px; right: -100px; animation: drift 19s ease-in-out infinite alternate-reverse; }
.aurora .a3 { width: 360px; height: 360px; background: var(--skyx); top: 30%; left: 55%; animation: drift 22s ease-in-out infinite alternate; }
.aurora .a4 { width: 380px; height: 380px; background: var(--goldx); top: 55%; left: 10%; opacity: .35; animation: drift 18s ease-in-out infinite alternate-reverse; }
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(60px, -40px) scale(1.15); }
}

/* ---------- Decorative backgrounds ---------- */
.dots-bg { background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; }
.grid-bg { background-image: linear-gradient(rgba(11, 27, 51, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 27, 51, .045) 1px, transparent 1px); background-size: 44px 44px; }

/* ---------- Gradient text ---------- */
.grad-text {
  background: linear-gradient(92deg, var(--skyx), var(--goldx));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .aurora span { animation: none; }
}

/* ---------- Card lift ---------- */
.card-lift { transition: transform .3s ease, box-shadow .3s ease; }
.card-lift:hover { transform: translateY(-6px); }

/* ---------- Marquee ---------- */
.marquee-track { display: flex; gap: 3.5rem; width: max-content; animation: marquee 26s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Hero slider ---------- */
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.hero-slide.on { opacity: 1; position: relative; pointer-events: auto; }
.hero-dot { width: .65rem; height: .65rem; border-radius: 9999px; background: rgba(255, 255, 255, .35); transition: all .3s ease; cursor: pointer; }
.hero-dot.on { width: 1.8rem; background: var(--goldx); }

/* ---------- Testimonials slider ---------- */
.t-slide { display: none; }
.t-slide.on { display: block; animation: fadeUp .6s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Calendar ---------- */
.cal-cell { min-height: 92px; background: #fff; border: 1px solid #edf1f7; padding: .45rem .5rem; font-size: .78rem; position: relative; }
.cal-cell.head { min-height: 0; background: var(--navy); color: #fff; font-weight: 600; text-align: center; padding: .65rem 0; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.cal-cell.out { background: #f8fafc; color: #b9c3d3; }
.cal-cell .d { font-weight: 600; color: #6b7789; }
.cal-ev {
  display: block; margin-top: .3rem; padding: .22rem .45rem; border-radius: .45rem;
  color: #fff; font-size: .66rem; font-weight: 600; line-height: 1.25;
  box-shadow: 0 3px 7px rgba(11, 27, 51, .25), inset 0 1px 0 rgba(255, 255, 255, .3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Steps ---------- */
.step-num {
  flex: none; width: 3rem; height: 3rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--brand); font-size: 1.05rem;
  background: var(--soft);
  box-shadow: 5px 5px 12px rgba(163, 177, 198, .55), -5px -5px 12px #fff;
}

/* ---------- Forms ---------- */
.lbl { display: block; font-size: .8rem; font-weight: 600; color: var(--navy); margin-bottom: .4rem; }
.field {
  width: 100%; padding: .8rem 1.1rem; border-radius: .9rem; font-size: .9rem;
  background: var(--soft); border: 1px solid transparent; color: var(--ink);
  box-shadow: inset 4px 4px 10px rgba(163, 177, 198, .45), inset -4px -4px 10px rgba(255, 255, 255, .9);
  outline: none; transition: box-shadow .2s ease, border-color .2s ease;
}
.field:focus { border-color: var(--skyx); box-shadow: inset 3px 3px 8px rgba(163, 177, 198, .4), inset -3px -3px 8px #fff, 0 0 0 3px rgba(76, 141, 246, .2); }
.form-msg { display: none; margin-top: .8rem; font-size: .85rem; font-weight: 600; }
.form-msg.ok { display: block; color: #15803d; }
.form-msg.err { display: block; color: #b91c1c; }

/* ---------- Navigation ---------- */
.nav-link { position: relative; font-size: .88rem; font-weight: 500; color: #dbe4f3; padding: .4rem 0; transition: color .2s ease; }
.nav-link:hover { color: #fff; }
.nav-link.active { color: #fff; font-weight: 600; }
.nav-link.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2.5px; border-radius: 9999px;
  background: linear-gradient(90deg, var(--orangex), var(--goldx));
}
.drop-link { display: block; padding: .55rem .9rem; border-radius: .65rem; font-size: .85rem; font-weight: 500; color: var(--ink); transition: background .15s ease, color .15s ease; }
.drop-link:hover { background: var(--soft); color: var(--brand); }
.mob-link { display: block; padding: .8rem 1rem; border-radius: .8rem; font-weight: 600; color: #fff; font-size: .95rem; }
.mob-link:hover { background: rgba(255, 255, 255, .1); }

/* ---------- Footer ---------- */
.foot-h { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9fb3d8; margin-bottom: 1.1rem; }
.foot-l { display: block; font-size: .88rem; color: #c6d2e8; padding: .3rem 0; transition: color .2s ease; }
.foot-l:hover { color: #fff; }
.soc {
  width: 2.6rem; height: 2.6rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; font-size: .8rem; font-weight: 700;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, transform .2s ease;
}
.soc:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }

/* ============ PREMIUM OVERRIDES (multinational polish) ============ */
h1, h2, .font-display { font-family: 'Playfair Display', Georgia, serif; letter-spacing: -0.015em; }
h3, h4 { letter-spacing: -0.01em; }
.grad-text {
  background: linear-gradient(96deg, #C08F2A 0%, #D4A93F 35%, #EBCE86 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.btn-primary { background: linear-gradient(135deg, #C98A2E 0%, #D4A93F 100%); box-shadow: 0 14px 30px rgba(201,138,46,.32); }
.btn-primary:hover { box-shadow: 0 20px 40px rgba(212,169,63,.42); }
.glass-chip { border: 1px solid rgba(212,169,63,.45); }
.chip { border: 1px solid rgba(212,169,63,.5); color: #8A6A25; background: rgba(212,169,63,.08); }
.neo-icon { box-shadow: 6px 6px 14px rgba(11,27,51,.10), -6px -6px 14px #ffffff, inset 0 0 0 1px rgba(212,169,63,.18); }
.ticket { border-top: 3px solid rgba(212,169,63,.55); }
.eyebrow { display:block; font-family:'Poppins',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:#D4A93F; margin-bottom:14px; }
.gold-rule { width:64px; height:3px; border-radius:99px; background:linear-gradient(90deg,#D4A93F,#EBCE86); margin:18px 0 26px; }
.gold-rule.center { margin-left:auto; margin-right:auto; }
.faq-item { transition: box-shadow .3s ease; }
.faq-item[open] { box-shadow: 0 18px 40px rgba(11,27,51,.12); }
.faq-item summary { cursor: pointer; list-style: none; display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:700; color:#0B1B33; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; font-size:1.4rem; color:#D4A93F; font-weight:600; transition:transform .25s; }
.faq-item[open] summary::after { transform: rotate(45deg); }

/* ============================================================
   MOBILE-FIRST HERO  (v2 — overrides older hero rules)
   ============================================================ */

.hero {
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(76,141,246,.28) 0%, transparent 55%),
    radial-gradient(100% 80% at 0% 100%, rgba(212,169,63,.16) 0%, transparent 60%),
    linear-gradient(165deg, #0B1B33 0%, #10233F 55%, #0B1B33 100%);
}
.hero-fade {
  background: linear-gradient(to bottom, rgba(11,27,51,0), #F7F8FB);
  pointer-events: none;
}

/* Stack slides in one grid cell: container height = tallest slide, no clipping */
.hero-stack { display: grid; }
.hero-stack > .hero-slide {
  grid-area: 1 / 1;
  position: static;
  inset: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease, visibility .6s;
  pointer-events: none;
}
.hero-stack > .hero-slide.on {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* Typography — fluid, phone-first */
.hero-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 8.2vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin-bottom: .85rem;
  text-wrap: balance;
}
.hero-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
  max-width: 34rem;
  margin: 0 auto 1.6rem;
}

/* CTAs — full-width thumb targets on phones */
.hero-cta { display: grid; gap: .75rem; }
.hero-cta .btn-primary,
.hero-cta .btn-ghost {
  width: 100%;
  min-height: 52px;
  padding: .9rem 1.5rem;
  font-size: .95rem;
}

/* Poster art — visible on mobile, but secondary to the message */
.hero-art { order: 0; margin-top: .5rem; }
.hero-frame {
  position: relative;
  max-width: 15.5rem;
  margin: 0 auto;
  padding: .4rem;
  border-radius: 1.25rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
}
.hero-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .9rem;
}

/* Trust strip */
.hero-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .625rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.hero-trust > div {
  text-align: center;
  padding: .875rem .5rem;
  border-radius: .75rem;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
}
.hero-trust strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: #EBCE86;
  line-height: 1.2;
}
.hero-trust span {
  display: block;
  margin-top: .15rem;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255,255,255,.62);
}

/* Softer aurora on phones (perf + legibility) */
.hero .aurora span { filter: blur(70px); opacity: .3; }
.hero .aurora .a4 { display: none; }

/* ---------- ≥640px ---------- */
@media (min-width: 640px) {
  .hero-sub { font-size: 1.05rem; }
  .hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .875rem; }
  .hero-cta .btn-primary,
  .hero-cta .btn-ghost { width: auto; padding: .95rem 2rem; }
  .hero-frame { max-width: 20rem; padding: .5rem; }
  .hero-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .875rem; }
  .hero-trust strong { font-size: 1.6rem; }
  .hero-trust span { font-size: .75rem; }
}

/* ---------- ≥1024px ---------- */
@media (min-width: 1024px) {
  .hero .aurora span { filter: blur(95px); opacity: .42; }
  .hero-sub { margin-left: 0; margin-right: 0; font-size: 1.125rem; }
  .hero-cta { justify-content: flex-start; }
  .hero-art { order: 0; }
  .hero-frame { max-width: 26rem; margin-right: 0; transform: rotate(1.5deg); transition: transform .4s ease; }
  .hero-frame:hover { transform: rotate(0) translateY(-6px); }
  .hero-trust { margin-top: 2.75rem; padding-top: 2rem; }
}

/* ============================================================
   GLOBAL MOBILE-FIRST POLISH
   ============================================================ */

/* Comfortable body rhythm on small screens */
body { -webkit-text-size-adjust: 100%; }

/* Section padding: tighter on phones, roomy on desktop */
@media (max-width: 639px) {
  .py-24 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .py-20 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

  /* Headings scale down so nothing overflows */
  h2 { font-size: 1.6rem !important; line-height: 1.22 !important; }
  h3 { font-size: 1.12rem !important; }

  /* Buttons become comfortable tap targets */
  .btn-primary, .btn-navy, .btn-ghost {
    padding: .85rem 1.5rem;
    font-size: .9rem;
    min-height: 48px;
    width: 100%;
  }
  .btn-primary.\!py-2\.5, .btn-navy.\!py-2\.5 { width: auto; }

  /* Neumorphic shadows are heavy on small cards — lighten them */
  .neo { border-radius: 1.1rem; box-shadow: 6px 6px 14px rgba(163,177,198,.42), -6px -6px 14px rgba(255,255,255,.9); }
  .neo p, .neo .text-4xl { }
  .neo.p-8 { padding: 1.25rem !important; }
  .neo .text-4xl { font-size: 1.75rem !important; }

  /* Cards */
  .tag-card, .ticket { border-radius: .9rem; }
  .p-7 { padding: 1.25rem !important; }

  /* Marquee: a touch faster, smaller gaps */
  .marquee-track { gap: 2rem; animation-duration: 20s; }

  /* Calendar stays readable instead of squeezing */
  .cal-cell { min-height: 64px; font-size: .68rem; }
  .cal-ev { font-size: .58rem; }

  /* Kill hover-lift transforms that feel broken on touch */
  .card-lift:hover, .btn-primary:hover, .btn-navy:hover, .btn-ghost:hover { transform: none; }
}

/* Mobile nav: real tap targets + scrollable if long.
   Scoped below the lg breakpoint so it never overrides Tailwind's lg:hidden. */
@media (max-width: 1023px) {
  #menu-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
#mobile-menu { max-height: calc(100dvh - 4rem); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mob-link { min-height: 48px; display: flex; align-items: center; }

/* Never allow sideways scroll */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid #4C8DF6;
  outline-offset: 2px;
  border-radius: .35rem;
}

@media (prefers-reduced-motion: reduce) {
  .hero-stack > .hero-slide { transition: none; transform: none; }
  .marquee-track { animation: none; }
}

/* ============================================================
   FIXED NAVBAR (all pages)
   ============================================================ */

:root {
  --nav-h: 64px;
}
@media (min-width: 640px) {
  :root { --nav-h: 72px; }
}

#navbar {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(11, 27, 51, .88);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
#navbar > div { width: 100%; }

/* Solid + lifted once the user scrolls (JS toggles .shadow-lg) */
#navbar.shadow-lg {
  background: rgba(9, 22, 42, .96);
  border-bottom-color: rgba(212, 169, 63, .28);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}

/* Push all page content below the fixed bar */
body { padding-top: var(--nav-h); }

/* Anchor links land below the bar instead of under it */
html { scroll-padding-top: calc(var(--nav-h) + 16px); }

/* Mobile menu drops from the bar, scrolls independently */
#mobile-menu {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(9, 22, 42, .98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

/* ============================================================
   HERO — final professional pass
   ============================================================ */

/* The stats bar below already carries the numbers, so the hero
   stays focused on one message (no duplicated metrics). */

/* Calmer, more editorial spacing now that the hero is leaner */
.hero-title { margin-bottom: 1rem; }
.hero-sub { color: rgba(255, 255, 255, .74); margin-bottom: 1.75rem; }

/* Chip: quieter, more corporate */
.hero .glass-chip {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(212, 169, 63, .38);
  color: rgba(255, 255, 255, .88);
  font-size: .68rem;
  letter-spacing: .14em;
  padding: .45rem 1rem;
}

/* Secondary CTA reads as a real button, not a ghost outline */
.hero-cta .btn-ghost {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .28);
}
.hero-cta .btn-ghost:hover { background: rgba(255, 255, 255, .13); }

/* Dots: subtle, aligned with the gold accent */
.hero-dot { background: rgba(255, 255, 255, .28); }
.hero-dot.on { background: linear-gradient(90deg, #C98A2E, #EBCE86); }

@media (min-width: 1024px) {
  /* Balanced two-column hero with generous but controlled height */
  .hero-stack { min-height: 30rem; align-items: center; }
  .hero-title { margin-bottom: 1.25rem; }
  .hero-sub { margin-bottom: 2.25rem; }
}

/* ============================================================
   HERO v3 — mobile-first, editorial, layered
   (final block: overrides all earlier hero rules)
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;
  background: linear-gradient(168deg, #0B1B33 0%, #0E2340 48%, #0A182E 100%);
}

/* --- Background layers --- */
.hero-mesh {
  position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(70% 55% at 82% 6%, rgba(76,141,246,.30) 0%, transparent 62%),
    radial-gradient(55% 45% at 4% 92%, rgba(212,169,63,.20) 0%, transparent 66%),
    radial-gradient(45% 40% at 50% 40%, rgba(37,99,235,.16) 0%, transparent 70%);
}
.hero-grid {
  position: absolute; inset: 0; z-index: -3; pointer-events: none;
  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% 8%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 8%, #000 0%, transparent 78%);
}
.hero-arc {
  position: absolute; z-index: -2; pointer-events: none;
  width: 150%; aspect-ratio: 1 / 1;
  left: 50%; top: -66%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(212,169,63,.16);
  box-shadow: inset 0 0 90px rgba(212,169,63,.06);
}
.hero-fade {
  position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; bottom: 0; height: 7rem;
  background: linear-gradient(to bottom, rgba(11,27,51,0), #F7F8FB);
}
.hero .aurora span { filter: blur(72px); opacity: .26; }
.hero .aurora .a4 { display: none; }

/* --- Shell --- */
.hero-inner {
  position: relative;
  max-width: 80rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3.5rem;
}

/* Slides stacked in a single grid cell */
.hero-stack { display: grid; }
.hero-stack > .hero-slide {
  grid-area: 1 / 1;
  position: static; inset: auto;
  opacity: 0; visibility: hidden;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease, visibility .7s;
  pointer-events: none;
}
.hero-stack > .hero-slide.on {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
.hero-grid-2 { display: grid; gap: 2.25rem; align-items: center; }
.hero-copy { text-align: center; min-width: 0; }
.hero-grid-2 > * { min-width: 0; }

/* --- Eyebrow chip with live pulse --- */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem 1rem .45rem .8rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(212,169,63,.34);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: 'Poppins', sans-serif;
  font-size: .64rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.9);
  margin-bottom: 1.15rem;
}
.hero-eyebrow .pulse {
  width: .45rem; height: .45rem; border-radius: 9999px;
  background: #EBCE86; box-shadow: 0 0 0 0 rgba(235,206,134,.65);
  animation: heroPulse 2.2s ease-out infinite;
}
@keyframes heroPulse {
  0%   { box-shadow: 0 0 0 0 rgba(235,206,134,.6); }
  70%  { box-shadow: 0 0 0 .5rem rgba(235,206,134,0); }
  100% { box-shadow: 0 0 0 0 rgba(235,206,134,0); }
}

/* --- Headline --- */
.hero-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: clamp(2.05rem, 8.6vw, 3.85rem);
  line-height: 1.09;
  letter-spacing: -0.024em;
  margin: 0 0 .9rem;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,.28);
}
.hero-title br { display: none; }
.hero .grad-text {
  background: linear-gradient(96deg, #C08F2A 0%, #D4A93F 32%, #F3DDA4 72%, #D4A93F 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --- Sub copy --- */
.hero-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem; line-height: 1.68;
  color: rgba(255,255,255,.74);
  max-width: 33rem;
  margin: 0 auto 1.6rem;
}

/* --- CTAs --- */
.hero-cta { display: grid; gap: .7rem; }
.hero-cta .btn-primary,
.hero-cta .btn-ghost {
  width: 100%; min-height: 52px;
  padding: .9rem 1.5rem; font-size: .95rem;
}
.hero-cta .btn-ghost {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.26);
}
.hero-cta .btn-ghost:hover { background: rgba(255,255,255,.13); }

/* --- "Next event" strip --- */
.hero-next {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.4rem; padding: .55rem .95rem .55rem .6rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.13);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: 'Poppins', sans-serif;
  max-width: 100%;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.hero-next:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(212,169,63,.4);
}
.hero-next-tag {
  flex: none;
  padding: .22rem .6rem; border-radius: 9999px;
  background: linear-gradient(135deg, #C98A2E, #D4A93F);
  color: #16223a;
  font-size: .6rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.hero-next-text {
  font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.86);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; /* allow shrink so the nowrap label never widens the layout */
}
.hero-next-arrow {
  flex: none; color: #EBCE86; font-size: .9rem;
  transition: transform .25s ease;
}
.hero-next:hover .hero-next-arrow { transform: translateX(3px); }

/* --- Poster art with floating badges --- */
.hero-art { display: flex; justify-content: center; }
.hero-frame {
  position: relative;
  width: 100%;
  max-width: 17rem;
  padding: .45rem;
  border-radius: 1.35rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
}
.hero-frame::after {
  content: ''; position: absolute; inset: -18% -12%; z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,169,63,.24) 0%, transparent 68%);
  pointer-events: none;
}
.hero-frame img {
  display: block; width: 100%; height: auto;
  border-radius: 1rem;
}
.hero-badge {
  position: absolute;
  padding: .38rem .7rem;
  border-radius: 9999px;
  background: rgba(9,22,42,.82);
  border: 1px solid rgba(212,169,63,.42);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-family: 'Poppins', sans-serif;
  font-size: .6rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: #F3DDA4;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  white-space: nowrap;
}
.hero-badge-tl { top: -.6rem; left: -.4rem; }
.hero-badge-br { bottom: -.6rem; right: -.4rem; }

/* --- Dots --- */
.hero-dots {
  display: flex; gap: .5rem;
  justify-content: center;
  margin-top: 2.25rem;
}
.hero-dot {
  width: .55rem; height: .55rem; border-radius: 9999px;
  background: rgba(255,255,255,.26);
  border: 0; padding: 0; cursor: pointer;
  transition: width .35s ease, background .35s ease;
}
.hero-dot.on {
  width: 1.9rem;
  background: linear-gradient(90deg, #C98A2E, #EBCE86);
}

/* ---------- ≥480px ---------- */
@media (min-width: 480px) {
  .hero-frame { max-width: 19rem; }
  .hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
  .hero-cta .btn-primary,
  .hero-cta .btn-ghost { width: auto; padding: .95rem 1.9rem; }
}

/* ---------- ≥640px ---------- */
@media (min-width: 640px) {
  .hero-inner { padding: 3.25rem 1.5rem 4.5rem; }
  .hero-sub { font-size: 1.06rem; }
  .hero-frame { max-width: 21rem; padding: .55rem; }
  .hero-badge { font-size: .64rem; padding: .42rem .8rem; }
  .hero-next-text { font-size: .84rem; }
}

/* ---------- ≥1024px: two-column editorial layout ---------- */
@media (min-width: 1024px) {
  .hero-inner { padding: 5rem 2rem 6rem; }
  .hero .aurora span { filter: blur(95px); opacity: .34; }

  .hero-stack { min-height: 31rem; align-items: center; }
  .hero-grid-2 {
    grid-template-columns: 1.06fr .94fr;
    gap: 3.5rem;
  }
  .hero-copy { text-align: left; }
  .hero-title br { display: block; }
  .hero-title { margin-bottom: 1.15rem; max-width: 15ch; }
  .hero-sub { margin: 0 0 2.1rem; font-size: 1.13rem; }
  .hero-cta { justify-content: flex-start; }
  .hero-next { margin-top: 1.9rem; }

  .hero-art { justify-content: flex-end; }
  .hero-frame {
    max-width: 25rem;
    transform: perspective(1400px) rotateY(-8deg) rotateX(2deg) rotate(1.2deg);
    transition: transform .55s cubic-bezier(.2, .7, .3, 1), box-shadow .55s ease;
  }
  .hero-frame:hover {
    transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateY(-8px);
    box-shadow: 0 34px 80px rgba(0,0,0,.5);
  }
  .hero-badge-tl { top: -.85rem; left: -1.5rem; }
  .hero-badge-br { bottom: -.85rem; right: -1.2rem; }

  .hero-dots { justify-content: flex-start; margin-top: 3rem; }
}

/* ---------- Motion / accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-stack > .hero-slide { transition: none; transform: none; }
  .hero-eyebrow .pulse { animation: none; }
  .hero-frame { transition: none; }
}

/* =========================================================
   V3 FINAL PASS - About media, blog engine, article reading
   Mobile-first: base rules are phone rules.
   ========================================================= */

/* ---- HOME > ABOUT: kill the empty white space under posters ---- */
.about-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  align-self: start;          /* stop grid from stretching the shorter card */
  overflow: hidden;
}
.about-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;          /* both posters now fill identical boxes */
  object-position: top center;
  border-radius: 1rem;
}
.about-cap {
  margin-top: .6rem;
  text-align: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #64748b;
}
@media (min-width: 640px) {
  .about-cap { font-size: .72rem; }
}

/* ---- BLOG: filter row ---- */
.blog-filters {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  padding-bottom: .35rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.blog-filters::-webkit-scrollbar { display: none; }
.blog-filters > * { flex: none; white-space: nowrap; text-decoration: none; }
@media (min-width: 1024px) {
  .blog-filters { flex-wrap: wrap; justify-content: center; overflow: visible; }
}

/* ---- BLOG: post cards ---- */
.post-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.post-card-media {
  display: block;
  overflow: hidden;
  background: #0B1B33;
}
.post-card-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  transition: transform .5s ease;
}
.post-card:hover .post-card-media img { transform: scale(1.05); }
.post-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem 1.5rem 1.65rem;
}
.post-card-body .chip { align-self: flex-start; }
.post-meta {
  font-size: .72rem;
  color: #94a3b8;
  font-weight: 500;
}

/* ---- BLOG: featured post ---- */
.feature-post {
  display: block;
  background: #fff;
  border-radius: 1.5rem;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(11,27,51,.10);
  transition: transform .35s ease, box-shadow .35s ease;
}
.feature-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(11,27,51,.16);
}
.feature-media { background: #0B1B33; }
.feature-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}
.feature-body { padding: 1.75rem 1.5rem 2rem; }
.feature-body .chip { display: inline-flex; }
@media (min-width: 1024px) {
  .feature-post { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; }
  /* Fixed aspect box so a tall portrait poster can never stretch the row
     and leave dead white space beside the text. */
  .feature-media { aspect-ratio: 4 / 3; max-height: 27rem; }
  .feature-media img { height: 100%; aspect-ratio: auto; object-fit: cover; }
  .feature-body { padding: 3rem 3rem 3.25rem; align-self: center; }
}

/* ---- ARTICLE: header ---- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 1.25rem;
}
.crumbs a { color: #EBCE86; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.article-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 7.4vw, 3rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .82rem;
  color: rgba(255,255,255,.7);
  font-weight: 500;
}

/* ---- ARTICLE: body typography ---- */
.article-hero-img {
  margin: 0 0 1.75rem;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #0B1B33;
  box-shadow: 0 18px 40px rgba(11,27,51,.16);
}
.article-hero-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}
.article-lede {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #334155;
  font-weight: 500;
  padding-left: 1rem;
  border-left: 3px solid #D4A93F;
  margin: 0 0 2rem;
}
.article-body {
  font-size: 1rem;
  line-height: 1.8;
  color: #3f4a5c;
}
.article-body > *:first-child { margin-top: 0; }
.article-body p { margin: 0 0 1.35rem; }
.article-body h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.35rem, 5.2vw, 1.7rem);
  font-weight: 800;
  line-height: 1.28;
  color: #0B1B33;
  margin: 2.5rem 0 .9rem;
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}
.article-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0B1B33;
  margin: 2rem 0 .7rem;
}
.article-body ul,
.article-body ol { margin: 0 0 1.4rem; padding-left: 1.35rem; }
/* Tailwind's preflight strips list markers - restore them inside articles */
.article-body ul { list-style: disc outside; }
.article-body ol { list-style: decimal outside; }
.article-body li { margin-bottom: .65rem; }
.article-body ul li::marker { color: #C98A2E; }
.article-body ol li::marker { color: #C98A2E; font-weight: 700; }
.article-body strong { color: #0B1B33; font-weight: 700; }
.article-body em { color: #475569; }
.article-body a { color: #2563EB; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.article-body blockquote {
  margin: 1.75rem 0;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border-left: 3px solid #C98A2E;
  border-radius: .75rem;
  font-style: italic;
  color: #334155;
}
@media (min-width: 640px) {
  .article-body { font-size: 1.06rem; }
  .article-lede { font-size: 1.15rem; padding-left: 1.25rem; }
}

/* ---- ARTICLE: tags, share, CTA ---- */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 2.25rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid #e2e8f0;
}
.tag-pill {
  background: #eef2f8;
  color: #475569;
  border-radius: 999px;
  padding: .38rem .85rem;
  font-size: .72rem;
  font-weight: 600;
}
.article-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 8px 22px rgba(11,27,51,.07);
}
.soc-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0B1B33;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  text-decoration: none;
  transition: background .25s ease, transform .25s ease;
}
.soc-share:hover { background: #C98A2E; transform: translateY(-2px); }
.article-cta {
  margin-top: 2.5rem;
  padding: 1.85rem 1.5rem 2rem;
  border-radius: 1.5rem;
  background: linear-gradient(150deg, #0B1B33, #152A4D 60%, #0B1B33);
  box-shadow: 0 18px 40px rgba(11,27,51,.22);
}
.article-cta .btn-primary,
.article-cta .btn-ghost { justify-content: center; }
@media (min-width: 640px) {
  .article-cta { padding: 2.5rem; }
}

/* ===================================================================
   V5 - REELS CAROUSEL, GALLERIES, FLOATING CONTACT, FAQ, TESTIMONIALS
   Mobile-first. All breakpoints min-width.
   =================================================================== */

/* ---------- generic horizontal rail carousel ---------- */
.car{position:relative}
.car-rail{display:flex;gap:.875rem;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding:.25rem .25rem 1rem;
  scrollbar-width:none}
.car-rail::-webkit-scrollbar{display:none}
.car-rail>*{scroll-snap-align:center;flex:0 0 78%;min-width:0}
@media (min-width:480px){.car-rail>*{flex-basis:60%}}
@media (min-width:640px){.car-rail{gap:1.25rem}.car-rail>*{flex-basis:44%}}
@media (min-width:1024px){.car-rail>*{flex-basis:30%}}
@media (min-width:1280px){.car-rail>*{flex-basis:23.5%}}

.car-nav{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:.25rem}
.car-btn{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:9999px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:#fff;color:#0B1B33;border:1px solid rgba(11,27,51,.14);
  box-shadow:0 6px 18px rgba(11,27,51,.12);transition:transform .18s ease,background .18s ease,opacity .18s ease}
.car-btn:hover{transform:translateY(-2px);background:#F7F8FB}
.car-btn:active{transform:translateY(0)}
.car-btn[disabled]{opacity:.35;cursor:default;transform:none}
.car-btn svg{width:20px;height:20px}
.car-dots{display:flex;align-items:center;gap:.4rem}
.car-dot{width:7px;height:7px;border-radius:9999px;background:rgba(11,27,51,.22);
  border:0;padding:0;cursor:pointer;transition:width .22s ease,background .22s ease}
.car-dot.on{width:22px;background:linear-gradient(90deg,#C98A2E,#D4A93F)}
.car-dark .car-btn{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.22);
  box-shadow:0 6px 18px rgba(0,0,0,.28);backdrop-filter:blur(10px)}
.car-dark .car-btn:hover{background:rgba(255,255,255,.2)}
.car-dark .car-dot{background:rgba(255,255,255,.28)}
/* desktop side arrows */
@media (min-width:1024px){
  .car-side{position:absolute;top:42%;transform:translateY(-50%);z-index:5;width:48px;height:48px}
  .car-side.prev{left:-14px}
  .car-side.next{right:-14px}
}

/* ---------- instagram reel card ---------- */
.reel-card{position:relative;border-radius:1.25rem;overflow:hidden;background:#0B1B33;
  border:1px solid rgba(212,169,63,.22);box-shadow:0 14px 40px rgba(11,27,51,.22)}
.reel-frame{position:relative;aspect-ratio:9/16;width:100%;background:
  linear-gradient(150deg,#152A4D 0%,#0B1B33 60%,#060F23 100%)}
.reel-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.reel-fallback{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.75rem;text-align:center;padding:1.25rem;color:#fff}
.reel-fallback .ig-ring{width:56px;height:56px;border-radius:9999px;display:grid;place-items:center;
  background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7);font-size:26px}
.reel-fallback p{font-size:.8rem;color:rgba(255,255,255,.72);line-height:1.5}
.reel-cap{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.75rem .9rem;background:rgba(255,255,255,.05)}
.reel-cap span{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.62)}
.reel-cap a{font-size:.78rem;font-weight:700;color:#EBCE86;white-space:nowrap}
.reel-cap a:hover{color:#fff}

/* ---------- photo gallery ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
@media (min-width:640px){.gal-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}}
@media (min-width:1024px){.gal-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}}
.gal-item{position:relative;display:block;border-radius:1rem;overflow:hidden;cursor:zoom-in;
  background:#fff;border:1px solid rgba(11,27,51,.08);box-shadow:0 8px 24px rgba(11,27,51,.10);
  transition:transform .25s ease,box-shadow .25s ease}
.gal-item:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(11,27,51,.18)}
.gal-item img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center;display:block}
.gal-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:.85rem .7rem .6rem;
  font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(6,15,35,.86),rgba(6,15,35,0))}
.gal-item.tall img{aspect-ratio:3/4}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  padding:1rem;background:rgba(6,15,35,.94);backdrop-filter:blur(8px)}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:80vh;border-radius:1rem;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-cap{position:absolute;bottom:1.25rem;left:0;right:0;text-align:center;color:rgba(255,255,255,.85);
  font-size:.82rem;padding:0 1rem}
.lb-x,.lb-p,.lb-n{position:absolute;width:46px;height:46px;border-radius:9999px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);cursor:pointer}
.lb-x{top:1rem;right:1rem;font-size:22px;line-height:1}
.lb-p{left:.75rem;top:50%;transform:translateY(-50%)}
.lb-n{right:.75rem;top:50%;transform:translateY(-50%)}
.lb-p:hover,.lb-n:hover,.lb-x:hover{background:rgba(255,255,255,.24)}

/* ---------- floating whatsapp + call ---------- */
.fab-stack{position:fixed;right:.9rem;bottom:1rem;z-index:90;display:flex;flex-direction:column;gap:.6rem}
@media (min-width:640px){.fab-stack{right:1.5rem;bottom:1.5rem;gap:.75rem}}
.fab{width:52px;height:52px;border-radius:9999px;display:grid;place-items:center;color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.28);transition:transform .2s ease,box-shadow .2s ease;position:relative}
@media (min-width:640px){.fab{width:56px;height:56px}}
.fab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 16px 34px rgba(0,0,0,.34)}
.fab svg{width:26px;height:26px;fill:currentColor}
.fab-wa{background:linear-gradient(135deg,#25D366,#128C7E)}
.fab-call{background:linear-gradient(135deg,#C98A2E,#D4A93F)}
.fab-lbl{position:absolute;right:calc(100% + .6rem);top:50%;transform:translateY(-50%);
  white-space:nowrap;background:#0B1B33;color:#fff;font-size:.74rem;font-weight:700;
  padding:.4rem .7rem;border-radius:.6rem;opacity:0;pointer-events:none;transition:opacity .2s ease}
@media (min-width:1024px){.fab:hover .fab-lbl{opacity:1}}
.fab-pulse::after{content:"";position:absolute;inset:0;border-radius:9999px;
  border:2px solid rgba(37,211,102,.55);animation:fabPulse 2.2s ease-out infinite}
@keyframes fabPulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.fab-pulse::after{animation:none;opacity:0}}

/* ---------- why-us / feature cards ---------- */
.why-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1rem}
@media (min-width:640px){.why-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}}
@media (min-width:1024px){.why-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}}
.why-card{background:#fff;border-radius:1.25rem;padding:1.5rem;border:1px solid rgba(11,27,51,.07);
  box-shadow:0 10px 30px rgba(11,27,51,.07);transition:transform .25s ease,box-shadow .25s ease}
.why-card:hover{transform:translateY(-5px);box-shadow:0 20px 46px rgba(11,27,51,.13)}
.why-ic{width:52px;height:52px;border-radius:1rem;display:grid;place-items:center;font-size:24px;
  margin-bottom:1rem;background:linear-gradient(135deg,rgba(201,138,46,.14),rgba(212,169,63,.22));
  border:1px solid rgba(212,169,63,.28)}
.why-card h3{font-weight:800;color:#0B1B33;font-size:1.06rem;margin-bottom:.4rem}
.why-card p{color:#4B5563;font-size:.92rem;line-height:1.65}

/* ---------- testimonials ---------- */
.test-card{background:#fff;border-radius:1.25rem;padding:1.5rem;height:100%;
  border:1px solid rgba(11,27,51,.07);box-shadow:0 10px 30px rgba(11,27,51,.07);
  display:flex;flex-direction:column;gap:.9rem}
.test-stars{color:#D4A93F;letter-spacing:.12em;font-size:.9rem}
.test-card blockquote{color:#374151;font-size:.95rem;line-height:1.7;flex:1}
.test-who{display:flex;align-items:center;gap:.75rem}
.test-av{width:42px;height:42px;border-radius:9999px;display:grid;place-items:center;flex:0 0 42px;
  font-weight:800;font-size:.82rem;color:#fff;background:linear-gradient(135deg,#152A4D,#0B1B33)}
.test-who p{font-weight:700;color:#0B1B33;font-size:.9rem;line-height:1.25}
.test-who span{font-size:.78rem;color:#6B7280}

/* ---------- FAQ accordion ---------- */
.faq{display:flex;flex-direction:column;gap:.75rem}
.faq-q{width:100%;text-align:left;display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;background:#fff;border:1px solid rgba(11,27,51,.09);border-radius:1rem;
  padding:1.05rem 1.15rem;cursor:pointer;font-weight:700;color:#0B1B33;font-size:.98rem;
  box-shadow:0 6px 20px rgba(11,27,51,.06);transition:border-color .2s ease,box-shadow .2s ease}
.faq-q:hover{border-color:rgba(212,169,63,.45)}
.faq-q .chev{flex:0 0 22px;width:22px;height:22px;transition:transform .25s ease;color:#C98A2E}
.faq-item.open .faq-q{border-color:rgba(212,169,63,.6);box-shadow:0 10px 28px rgba(201,138,46,.14)}
.faq-item.open .chev{transform:rotate(180deg)}
.faq-a{overflow:hidden;max-height:0;transition:max-height .32s ease,padding .32s ease}
.faq-item.open .faq-a{max-height:640px}
.faq-a-in{padding:.9rem 1.15rem 1.25rem;color:#4B5563;font-size:.93rem;line-height:1.72}
.faq-a-in ul{list-style:disc outside;padding-left:1.15rem;margin:.5rem 0}
.faq-a-in li{margin:.25rem 0}

/* ---------- long-form content block (reference-site depth) ---------- */
.rich h2{font-family:'Playfair Display',serif;font-weight:800;color:#0B1B33;
  font-size:clamp(1.5rem,5.5vw,2.15rem);line-height:1.22;margin-bottom:.85rem}
.rich h3{font-weight:800;color:#0B1B33;font-size:clamp(1.1rem,4vw,1.3rem);margin:1.75rem 0 .6rem}
.rich p{color:#4B5563;font-size:.97rem;line-height:1.78;margin-bottom:1rem}
@media (min-width:1024px){.rich p{font-size:1.02rem}}
.rich strong{color:#111827;font-weight:700}
.rich ul{list-style:disc outside;padding-left:1.2rem;margin:.75rem 0 1.25rem;color:#4B5563}
.rich li{margin:.4rem 0;line-height:1.7}

/* ---------- number strip ---------- */
.num-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
@media (min-width:768px){.num-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}}
.num-box{background:#fff;border-radius:1.15rem;padding:1.15rem 1rem;text-align:center;
  border:1px solid rgba(11,27,51,.07);box-shadow:0 8px 24px rgba(11,27,51,.07)}
.num-box b{display:block;font-size:clamp(1.5rem,6vw,2.1rem);font-weight:800;
  background:linear-gradient(96deg,#C08F2A,#D4A93F 45%,#EBCE86);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1}
.num-box span{display:block;margin-top:.3rem;font-size:.72rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#6B7280}

/* ---------- section eyebrow helper ---------- */
.sec-head{text-align:center;max-width:44rem;margin:0 auto 2.5rem}
.sec-head .eyebrow{margin-bottom:.6rem}
.sec-head h2{font-family:'Playfair Display',serif;font-weight:800;color:#0B1B33;
  font-size:clamp(1.6rem,6vw,2.5rem);line-height:1.18;text-wrap:balance}
.sec-head p{margin-top:.75rem;color:#4B5563;font-size:.96rem;line-height:1.7}
.sec-dark h2{color:#fff}
.sec-dark p{color:rgba(255,255,255,.72)}

/* ---------- gallery placeholder (shown only if a photo file is missing) ---------- */
.gal-item.gal-ph{cursor:default;background:linear-gradient(150deg,#152A4D 0%,#0B1B33 65%,#060F23 100%);
  border-color:rgba(212,169,63,.25)}
.gal-item.gal-ph::before{content:"";display:block;aspect-ratio:4/5}
.gal-item.gal-ph::after{content:"\1F4F8";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);font-size:26px;opacity:.5}
.gal-item.gal-ph figcaption{background:linear-gradient(to top,rgba(6,15,35,.92),rgba(6,15,35,.25));
  color:rgba(255,255,255,.82)}
.gal-item.gal-ph:hover{transform:none;box-shadow:0 8px 24px rgba(11,27,51,.10)}