:root {
  --bg-warm: #f4f3ef;
  --bg-card: #ffffff;
  --text: #111111;
  --muted: #6c757d;
  --black: #000000;
  --white: #ffffff;
}

html, body { height: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg-warm) 0%, #fff 100%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  opacity: 1;
  transition: opacity .8s ease; /* slower load-in */
  min-height: 100dvh;          /* sticky footer base */
  display: flex;
  flex-direction: column;
}
body.is-loading { opacity: 0; }

/* content grows to push footer down */
.site-main { flex: 1 0 auto; }

/* Navbar */
.navbar { background-color: var(--black) !important; }
.navbar .navbar-brand, .navbar .nav-link { color: var(--white) !important; }
.navbar .nav-link { position: relative; text-decoration: none; }
.navbar .brand-mark, .navbar .brand-text { color: var(--white); }
.brand-text { letter-spacing: 0.25px; font-weight: 600; }

/* Underline animation for nav links and brand */
.underline-nav { position: relative; }
.underline-nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.underline-nav:hover::after,
.underline-nav:focus-visible::after,
.underline-nav.active::after { transform: scaleX(1); }

/* Underline for buttons */
.underline-btn { position: relative; }
.underline-btn::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 6px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.underline-btn:hover::after,
.underline-btn:focus-visible::after { transform: scaleX(1); }

/* Hero */
.hero { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.kicker { letter-spacing: .08em; color: #3f3f3f; }
.hero-card {
  background: var(--bg-card);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  border-radius: 1.25rem;
}

/* Sections and feature cards */
section { padding-top: 3rem; padding-bottom: 3rem; }
.feature-card {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 1rem;
  background: #fff;
}
.feature-card .bi { font-size: 1.5rem; }

/* Carousels */
.rounded-top-4 { border-top-left-radius: 1rem; border-top-right-radius: 1rem; }

/* Footer */
footer { background-color: var(--black); }

/* Scroll reveal (slower) */
.fade-slide {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .8s ease, transform .8s ease;
}
.fade-slide.show {
  opacity: 1;
  transform: translateY(0);
}

/* Modal pop animation */
.modal-pop { transform: scale(.98); transition: transform .25s ease; }
.modal.show .modal-pop { transform: scale(1); }

/* Page padding below fixed navbar */
.page-pad { padding-top: 6.25rem; padding-bottom: 3rem; }

/* Brand image sizing */
.brand-mark { width: 28px; height: 28px; display: block; }

.event-img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crops to the 16:9 frame uniformly */
}


/* --- Hero positioning & typing caret fixes --- */
.hero { padding-top: clamp(4.5rem, 7vh, 6.5rem); padding-bottom: clamp(3rem, 6vh, 5rem); }
.hero-center { min-height: clamp(420px, 66vh, 740px); align-items: center; }
.hero-center > [class*="col-"] { display: flex; }
.hero-center .hero-card { width: 100%; }


/* Ensure the typed lines are not hidden by fade-slide on the parent */
[data-typing="hero"] .typehost, 
[data-typing="hero"] .typewrite { opacity: 1 !important; transform: none !important; transition: none !important; }

.fade-slide {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1s ease, transform 1s ease;
}

.fade-slide.show {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-slide { transition: none; }
}


.ratio > video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 1rem;
}

/* Hero logo centering + sizing */
.hero-card figure {            /* center the image container itself */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 .75rem 0;        /* small space below logo */
}

.hero-logo {                    /* make the logo a bit smaller, responsive */
  display: block;
  width: 100%;
  max-width: clamp(260px, 36vw, 420px); /* shrink on big screens, stay roomy on small */
  height: auto;
}

/* Slightly reduce vertical padding on very small screens */
@media (max-width: 576px) {
  .hero-card { padding: 1.75rem !important; }
}

.site-main { padding-top: 4.5rem; } /* adjust if your navbar is taller/shorter */