@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

:root {
  --c-primary: #8B4C47;
  --c-dark:    #5C2E2B;
  --c-cream:   #FAF7F2;
  --c-alt:     #F1EBE2;
  --c-text:    #1C1411;
  --c-muted:   #76695F;
  --c-border:  #E4D6CB;
  --c-hairline: rgba(92,46,43,.10);
  --c-card:    #FFFFFF;

  --c-easy:    #1E7A4A;
  --c-medium:  #B87010;
  --c-hard:    #B83018;
  --c-sos:     #E02020;

  /* Softer, more diffuse depth for a modern, premium feel */
  --shadow-sm: 0 2px 8px rgba(74,38,35,.05), 0 1px 2px rgba(74,38,35,.04);
  --shadow-md: 0 10px 28px rgba(74,38,35,.08), 0 3px 8px rgba(74,38,35,.05);
  --shadow-lg: 0 26px 64px rgba(74,38,35,.13), 0 8px 22px rgba(74,38,35,.07);
  --shadow-glow: 0 8px 24px color-mix(in srgb, var(--c-primary) 32%, transparent);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
}

[data-theme="dark"] {
  --c-cream:  #130A09;
  --c-alt:    #1C1210;
  --c-text:   #F5EFE9;
  --c-muted:  #B09080;
  --c-border: #3A1E1C;
  --c-card:   #1E1412;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--c-text);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.65;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

::selection { background: var(--c-primary); color: white; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--c-alt); }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-primary); }

.section-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

.section-pad { padding: var(--sec-pad, 88px) 0; }

/* Heading font is tweakable via --font-head; falls back to Montserrat */
h1, h2, h3 { font-family: var(--font-head, 'Montserrat'), 'Montserrat', sans-serif; }

/* ── Responsive layout utilities (shared by site + showcase) ─────────── */
.grid-events   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.grid-events-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.grid-split    { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.grid-form     { display: grid; grid-template-columns: 1.3fr .9fr; gap: 48px; align-items: start; }
.grid-board    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grid-partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-social   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cols-gallery  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cols-gallery3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.footer-grid   { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.grid-2        { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

/* Uniform card heights: the <Reveal> wrapper is the grid item, so it (and the
   card inside it) must stretch to the row height — otherwise cards in the same
   row end up with different heights when their text wraps differently. */
.grid-events > *, .grid-events-2 > *, .grid-board > *,
.grid-partners > *, .cols-gallery > *, .cols-gallery3 > *,
.grid-social > * { height: 100%; }
.grid-events > .reveal > *, .grid-events-2 > .reveal > *, .grid-board > .reveal > *,
.grid-partners > .reveal > *, .cols-gallery > .reveal > *, .cols-gallery3 > .reveal > *,
.grid-social > .reveal > * { height: 100%; }

@media (max-width: 1000px) {
  .grid-events   { grid-template-columns: repeat(2, 1fr); }
  .grid-form     { grid-template-columns: 1fr; }
  .grid-board    { grid-template-columns: repeat(2, 1fr); }
  .grid-partners { grid-template-columns: repeat(2, 1fr); }
  .cols-gallery  { grid-template-columns: repeat(3, 1fr); }
  .footer-grid   { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .grid-split    { grid-template-columns: 1fr; gap: 36px; }
  .grid-events-2 { grid-template-columns: 1fr; }
  .grid-social   { grid-template-columns: repeat(2, 1fr); }
  .grid-2        { grid-template-columns: 1fr; gap: 32px; }
  .cols-gallery  { grid-template-columns: repeat(2, 1fr); }
  .cols-gallery3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-events   { grid-template-columns: 1fr; }
  .grid-partners { grid-template-columns: 1fr; }
  .grid-board    { grid-template-columns: 1fr; }
  .cols-gallery  { grid-template-columns: 1fr; }
  .cols-gallery3 { grid-template-columns: 1fr; }
  .footer-grid   { grid-template-columns: 1fr; }
}

/* ── Scroll reveal ──────────────────────────────────────────────────── */
.web-nav-burger { display: none; }
.web-nav-mobile { display: block; }
@media (min-width: 861px) { .web-nav-mobile { display: none !important; } }
@media (max-width: 860px) {
  .web-nav-links, .web-nav-cta { display: none !important; }
  .web-nav-burger { display: flex !important; }
}

/* ── Scroll reveal (visible by default; animates when JS adds .is-in) ───────── */
.reveal.is-in { animation: revealUp .8s cubic-bezier(.16,.84,.28,1) both; }
@keyframes revealUp { from { opacity: 0; transform: translateY(38px) scale(.965); } to { opacity: 1; transform: none; } }

/* ── Scroll progress bar (top of viewport) ─────────────────────────────────── */
#scrollProgress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--c-primary), #E8B98A, var(--c-primary));
  box-shadow: 0 0 12px color-mix(in srgb, var(--c-primary) 55%, transparent);
  will-change: transform; pointer-events: none;
}

/* ── Animated aurora blobs (hero / page headers) ───────────────────────────── */
.aurora { position: absolute; border-radius: 50%; filter: blur(72px); opacity: .55;
  pointer-events: none; mix-blend-mode: screen; z-index: 1; }
.aurora.a1 { width: 48vw; height: 48vw; left: -10vw; top: -12vw;
  background: radial-gradient(circle, rgba(224,128,96,.75), transparent 62%); animation: floatA 19s ease-in-out infinite; }
.aurora.a2 { width: 42vw; height: 42vw; right: -8vw; top: 6vh;
  background: radial-gradient(circle, rgba(130,64,86,.7), transparent 62%); animation: floatB 24s ease-in-out infinite; }
.aurora.a3 { width: 40vw; height: 40vw; left: 32vw; bottom: -16vw;
  background: radial-gradient(circle, rgba(196,98,64,.6), transparent 62%); animation: floatA 28s ease-in-out infinite reverse; }
@keyframes floatA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4vw,3vh) scale(1.12); } }
@keyframes floatB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5vw,4vh) scale(1.14); } }

/* ── Animated gradient text ────────────────────────────────────────────────── */
.grad-anim {
  background: linear-gradient(92deg, #FAF7F2 0%, #F0C9A0 28%, #E8B98A 50%, #F0C9A0 72%, #FAF7F2 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradShift 6s ease-in-out infinite;
}
@keyframes gradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ── Hover sheen for cards ─────────────────────────────────────────────────── */
.tdc-card { position: relative; }
.tdc-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 3;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.22) 50%, transparent 68%);
  transform: translateX(-130%); transition: transform .75s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.tdc-card:hover::after { transform: translateX(130%); }
[data-anim="off"] .tdc-card::after { display: none; }

/* ── Scroll cue (hero) ─────────────────────────────────────────────────────── */
.hero-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px; z-index: 5;
  color: rgba(250,247,242,.6); font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.hero-cue .mouse { width: 22px; height: 34px; border: 2px solid rgba(250,247,242,.45); border-radius: 12px; position: relative; }
.hero-cue .mouse::after { content: ''; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; border-radius: 3px;
  background: rgba(250,247,242,.8); transform: translateX(-50%); animation: mouseWheel 1.6s ease-in-out infinite; }
@keyframes mouseWheel { 0% { opacity: 0; transform: translate(-50%,0); } 30% { opacity: 1; } 60% { opacity: 1; transform: translate(-50%,10px); } 100% { opacity: 0; transform: translate(-50%,10px); } }

/* ── Cinematic hero ────────────────────────────────────────────────────────── */
.hero-stripes { position: absolute; inset: -20%; pointer-events: none;
  background: repeating-linear-gradient(125deg, rgba(255,255,255,.05) 0 2px, transparent 2px 28px);
  animation: heroDrift 16s linear infinite; }
@keyframes heroDrift { to { transform: translateX(56px); } }
.hero-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 52% at 50% 40%, rgba(190,118,96,.45), transparent 70%);
  animation: heroGlow 7s ease-in-out infinite; }
@keyframes heroGlow { 0%,100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.hero-flag { position: absolute; left: 0; right: 0; height: 16px; z-index: 3; opacity: .92;
  background-image: repeating-conic-gradient(#FAF7F2 0% 25%, #1b0f0d 0% 50%);
  background-size: 16px 16px; animation: flagMove 5s linear infinite; }
@keyframes flagMove { to { background-position: 32px 0; } }
.hero-sweep { position: absolute; top: 0; bottom: 0; width: 42%; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.07), transparent);
  transform: skewX(-18deg); animation: sweep 7s ease-in-out 1.4s infinite; }
@keyframes sweep { 0% { left: -55%; } 55%,100% { left: 135%; } }
.hero-line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-line-inner { display: inline-block; }
.hero-line-inner.is-in { animation: lineUp .95s cubic-bezier(.16,.84,.28,1) both; }
@keyframes lineUp { from { transform: translateY(112%); } to { transform: translateY(0); } }
.hero-float { animation: floaty 5.5s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero-rise.is-in { animation: revealUp .85s cubic-bezier(.2,.7,.2,1) both; }

/* ── Marquee ribbon ────────────────────────────────────────────────────────── */
.marquee { overflow: hidden; white-space: nowrap; display: flex; }
.marquee-track { display: inline-flex; align-items: center; flex-shrink: 0; min-width: 100%;
  animation: marquee 34s linear infinite; }
.marquee-track.rev { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Image hover zoom ──────────────────────────────────────────────────────── */
.zoom-wrap { overflow: hidden; }
.zoom-wrap .zoom-img { transition: transform .6s cubic-bezier(.2,.7,.2,1); height: 100%; }
.zoom-wrap:hover .zoom-img { transform: scale(1.07); }

/* ── Page transition ───────────────────────────────────────────────────────── */
.page-enter { animation: pageIn .6s cubic-bezier(.16,.84,.28,1) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(26px) scale(.99); } to { opacity: 1; transform: none; } }
[data-anim="off"] .page-enter { animation: none !important; }
[data-anim="off"] .zoom-wrap:hover .zoom-img { transform: none; }
@media (prefers-reduced-motion: reduce) { .page-enter { animation: none !important; } .zoom-wrap:hover .zoom-img { transform: none; } }

/* ── Motion off-switches ───────────────────────────────────────────────────── */
[data-anim="off"] .hero-stripes, [data-anim="off"] .hero-glow, [data-anim="off"] .hero-flag,
[data-anim="off"] .hero-sweep, [data-anim="off"] .hero-float, [data-anim="off"] .marquee-track,
[data-anim="off"] .aurora, [data-anim="off"] .grad-anim, [data-anim="off"] .hero-cue .mouse::after,
[data-anim="off"] .reveal.is-in { animation: none !important; }
[data-anim="off"] .grad-anim { -webkit-text-fill-color: currentColor; color: #FAF7F2; background: none; }
[data-anim="off"] .hero-line-inner, [data-anim="off"] .hero-rise { animation: none !important; transform: none !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-stripes, .hero-glow, .hero-flag, .hero-sweep, .hero-float, .marquee-track, .reveal.is-in { animation: none !important; }
  .hero-line-inner, .hero-rise { animation: none !important; transform: none !important; opacity: 1 !important; }
  .aurora, .grad-anim, .pulse-dot { animation: none !important; }
  .grad-anim { -webkit-text-fill-color: currentColor; color: #FAF7F2; background: none; }
  .tdc-card::after { transition: none; }
}
[data-anim="off"] .pulse-dot { animation: none !important; }

/* ── FAQ accordion ──────────────────────────────────────────────────── */
.faq-a { overflow: hidden; transition: grid-template-rows .32s cubic-bezier(.4,0,.2,1); display: grid; grid-template-rows: 0fr; }
.faq-a.open { grid-template-rows: 1fr; }
.faq-a > div { min-height: 0; }

/* Grain overlay for hero sections */
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  opacity: .38;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}

/* Checkered accent pattern */
.check-pattern {
  background-image: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%);
  background-size: 12px 12px;
}

/* Keyframes */
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(-8px); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: .6; }
}

.pulse-dot { animation: pulse-dot 1.6s infinite; }

/* No-scrollbar utility */
.no-sb::-webkit-scrollbar { display: none; }
.no-sb { -ms-overflow-style: none; scrollbar-width: none; }

@media (max-width: 768px) {
  .section-wrap { padding: 0 20px; }
  .section-pad  { padding: 56px 0; }
}

/* ── Modern focus ring (keyboard only) ──────────────────────────────── */
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; border-radius: 6px; }
button:focus:not(:focus-visible) { outline: none; }

/* ── Boot splash (lives inside #root until React mounts, then replaced) ─ */
#boot {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background:
    radial-gradient(80% 60% at 50% 38%, color-mix(in srgb, var(--c-primary) 9%, transparent), transparent 70%),
    var(--c-cream);
}
#boot .boot-logo {
  width: 88px; height: 88px; object-fit: contain;
  animation: bootPulse 1.4s ease-in-out infinite;
  filter: drop-shadow(0 10px 24px rgba(92,46,43,.22));
}
@keyframes bootPulse { 0%,100% { transform: scale(.96); opacity: .8; } 50% { transform: scale(1.05); opacity: 1; } }
#boot .boot-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden;
  background: var(--c-alt);
}
#boot .boot-bar::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, transparent, var(--c-primary), transparent);
  animation: bootBar 1.1s ease-in-out infinite;
}
@keyframes bootBar { from { left: -40%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  #boot .boot-logo, #boot .boot-bar::after { animation: none; }
}