/* ─── shared design system — the mayan experience ──────────────────────── */

/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@400;500;600&display=swap');

/* ─── tokens ────────────────────────────────────────────────────────────── */
:root {
  --brand-black:   #0b0c0c;
  --warm-black:    #150602;
  --gold:          #b49a5a;
  --gold-hover:    #c2aa6a;
  --gold-press:    #9f8750;
  --gold-grad:     linear-gradient(90deg, #f7e7be 0%, #d6b06d 35%, #9f7a3e 70%, #f3dfa8 100%);
  --on-dark:       rgba(242,242,240,0.92);
  --on-dark-muted: rgba(242,242,240,0.65);
  --on-gold:       #0b0c0c;
  --divider:       rgba(255,255,255,0.06);
  --overlay-66:    rgba(11,12,12,0.66);
  --overlay-84:    rgba(11,12,12,0.84);
  --overlay-92:    rgba(11,12,12,0.92);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-6:24px; --sp-8:32px; --sp-12:48px;
  --sp-16:64px; --sp-24:96px; --sp-32:128px;
  --section-y: 96px;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Inter', system-ui, sans-serif;

  --r-sm:2px; --r-md:4px; --r-lg:8px; --r-pill:999px;
  --container: 1200px;
  --container-px: var(--sp-24);
}

/* ─── reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background: var(--brand-black);
  color: var(--on-dark);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ─── utilities ─────────────────────────────────────────────────────────── */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--container-px); }
.gold-text { background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.divider { height:1px; background:var(--divider); }
.section-bg-warm { background:var(--warm-black); }

/* ─── type ───────────────────────────────────────────────────────────────── */
h1,.h1 { font-family:var(--font-display); font-size:clamp(40px,5vw,64px); line-height:1.1; letter-spacing:-0.01em; font-weight:400; }
h2,.h2 { font-family:var(--font-display); font-size:clamp(28px,3.5vw,40px); line-height:1.2; letter-spacing:-0.005em; font-weight:400; }
h3,.h3 { font-family:var(--font-display); font-size:clamp(20px,2.2vw,26px); line-height:1.3; font-weight:400; }
.body-text { font-size:clamp(15px,1.3vw,18px); line-height:1.65; }
.caption { font-size:clamp(13px,1vw,14px); line-height:1.5; color:var(--on-dark-muted); }

/* ─── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-sans); font-size:15px; font-weight:600; line-height:1.25;
  padding:var(--sp-3) var(--sp-6); border-radius:var(--r-md); border:1px solid transparent;
  cursor:pointer; text-decoration:none; min-height:44px; white-space:nowrap;
  transition: background 180ms cubic-bezier(.2,.8,.2,1), color 180ms cubic-bezier(.2,.8,.2,1), border-color 180ms cubic-bezier(.2,.8,.2,1);
}
.btn:focus-visible { outline:2px solid var(--gold-hover); outline-offset:3px; }
.btn-primary  { background:var(--gold); color:var(--on-gold); border-color:var(--gold); }
.btn-primary:hover  { background:var(--gold-hover); border-color:var(--gold-hover); }
.btn-primary:active { background:var(--gold-press); }
.btn-secondary { background:transparent; color:var(--gold); border-color:var(--gold); }
.btn-secondary:hover { background:rgba(180,154,90,0.08); }
.btn-tertiary { background:transparent; color:var(--gold); border:none; padding-inline:0; text-decoration:underline; text-underline-offset:3px; font-weight:500; }
.btn-tertiary:hover { color:var(--gold-hover); }

/* ─── nav ────────────────────────────────────────────────────────────────── */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; height:72px; background:var(--brand-black); border-bottom:1px solid var(--divider); display:flex; align-items:center; }
.nav__inner { display:flex; align-items:center; gap:var(--sp-6); width:100%; }
.nav__logo { font-family:var(--font-display); font-size:20px; font-weight:400; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-decoration:none; flex-shrink:0; }
.nav__links { display:flex; align-items:center; gap:var(--sp-3); list-style:none; margin-inline:auto; }
.nav__links a { font-size:14px; font-weight:500; color:rgba(242,242,240,0.78); text-decoration:none; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); min-height:44px; display:flex; align-items:center; transition:color 160ms ease; }
.nav__links a:hover { color:var(--gold-hover); }
.nav__links a.active { color:var(--gold); }
.nav__links a:focus-visible { outline:2px solid var(--gold-hover); outline-offset:2px; }
.nav__cta { display:flex; gap:var(--sp-3); flex-shrink:0; }
.nav__hamburger { display:none; background:none; border:none; cursor:pointer; padding:var(--sp-2); color:var(--on-dark); margin-left:auto; min-height:44px; min-width:44px; align-items:center; justify-content:center; }

/* ─── mobile drawer ──────────────────────────────────────────────────────── */
.nav__drawer { display:none; position:fixed; inset:0; z-index:99; background:var(--brand-black); flex-direction:column; padding:80px var(--container-px) var(--sp-8); gap:var(--sp-6); }
.nav__drawer.open { display:flex; }
.nav__drawer a { font-family:var(--font-display); font-size:28px; color:var(--on-dark); text-decoration:none; min-height:44px; display:flex; align-items:center; }
.nav__drawer a:hover { color:var(--gold-hover); }

/* ─── page hero — full-screen video ─────────────────────────────────────── */
.img-hero {
  position:relative; min-height:100svh; min-height:100vh;
  background-color:var(--warm-black);          /* shown while video loads */
  display:flex; align-items:flex-end;
  overflow:hidden;
}
/* the video tag sits behind everything */
.img-hero__video {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* GPU-accelerate */
  will-change:transform;
}
.img-hero__overlay {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(11,12,12,.45) 0%, transparent 50%),
    linear-gradient(to bottom, rgba(11,12,12,.20) 0%, rgba(11,12,12,.50) 55%, rgba(11,12,12,.85) 100%);
}
.img-hero__content {
  position:relative; width:100%;
  padding: 0 var(--container-px) var(--sp-24);
  max-width:calc(var(--container) + var(--container-px) * 2);
  margin-inline:auto;
}
.img-hero__eyebrow { font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--sp-4); }
.img-hero__title   { color:var(--on-dark); max-width:700px; }
.img-hero__body    { font-size:clamp(15px,1.3vw,18px); line-height:1.7; color:rgba(242,242,240,.80); max-width:580px; margin-top:var(--sp-4); }
.img-hero__actions { display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-8); }
@media (max-width:600px) { .img-hero__content { padding-bottom:var(--sp-12); } }
/* respect reduced-motion: pause video, show poster */
@media (prefers-reduced-motion:reduce) {
  .img-hero__video { display:none; }
}

/* ─── page hero (inner pages — text-only, no image) ─────────────────────── */
.page-hero { padding-top:calc(72px + var(--sp-24)); padding-bottom:var(--sp-24); background:var(--warm-black); position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 60%, rgba(180,154,90,0.06) 0%, transparent 65%); pointer-events:none; }
.page-hero__eyebrow { font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--sp-4); }
.page-hero__title { background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:var(--sp-4); }
.page-hero__body { font-size:clamp(15px,1.3vw,18px); line-height:1.7; color:rgba(242,242,240,0.80); max-width:640px; margin-top:var(--sp-4); }

/* ─── section base ───────────────────────────────────────────────────────── */
section { padding-block:var(--section-y); position:relative; }
.section-title { text-align:center; margin-bottom:var(--sp-12); }
.section-title h2 { color:var(--gold); }
.section-title p { margin-top:var(--sp-4); color:var(--on-dark-muted); max-width:640px; margin-inline:auto; font-size:clamp(15px,1.3vw,18px); line-height:1.65; }

/* ─── 3-col ──────────────────────────────────────────────────────────────── */
.three-col { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-8); }
.col-item__label { font-family:var(--font-display); font-size:clamp(18px,1.8vw,22px); color:var(--gold); margin-bottom:var(--sp-3); line-height:1.3; }
.col-item__body { font-size:clamp(14px,1.2vw,16px); line-height:1.7; color:rgba(242,242,240,0.72); }

/* ─── draft placeholder ──────────────────────────────────────────────────── */
.draft-block { border:1px dashed rgba(180,154,90,0.25); border-radius:var(--r-lg); padding:var(--sp-12); text-align:center; color:var(--on-dark-muted); font-size:14px; }
.draft-block strong { display:block; color:var(--gold); font-family:var(--font-display); font-size:20px; margin-bottom:var(--sp-3); }

/* ─── cta section (shared) ───────────────────────────────────────────────── */
.cta-section {
  text-align: center;
  padding-block: var(--sp-32);
  background: linear-gradient(180deg, var(--brand-black) 0%, var(--warm-black) 50%, var(--brand-black) 100%);
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(180,154,90,0.06) 0%, transparent 65%);
  pointer-events: none;
}
.cta-section__tagline {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.5vw, 42px);
  line-height: 1.25;
  color: var(--gold);
  max-width: 740px;
  margin-inline: auto;
  margin-bottom: var(--sp-12);
  font-style: italic;
}
.cta-section__buttons {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* ─── footer ─────────────────────────────────────────────────────────────── */
.footer { background:var(--brand-black); border-top:1px solid var(--divider); padding-block:var(--sp-12); }
.footer__inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-6); }
.footer__brand { font-family:var(--font-display); font-size:20px; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.footer__links { display:flex; gap:var(--sp-6); list-style:none; }
.footer__links a { font-size:13px; color:var(--on-dark-muted); text-decoration:none; }
.footer__links a:hover { color:var(--gold-hover); }
.footer__social { display:flex; gap:var(--sp-4); }
.footer__social a { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:1px solid var(--divider); border-radius:var(--r-pill); color:var(--on-dark-muted); font-size:12px; text-decoration:none; transition:border-color 160ms ease, color 160ms ease; }
.footer__social a:hover { border-color:var(--gold); color:var(--gold); }

/* ─── reveal ─────────────────────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity 380ms cubic-bezier(.2,.8,.2,1), transform 380ms cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity:1; transform:none; }

/* ─── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:960px) {
  :root { --container-px:32px; --section-y:80px; }
  .nav__links { display:none; }
  .nav__cta .btn-secondary { display:none; }
  .nav__hamburger { display:flex; }
  .three-col { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  :root { --container-px:16px; --section-y:64px; }
  .nav { height:64px; }
  .nav__cta { display:none; }
  .three-col { grid-template-columns:1fr; }
  .footer__inner { flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none!important; animation:none!important; } }

/* ─── shared nav+drawer js snippet (include in every page) ──────────────── */
/* see bottom <script> in each page */