@font-face{
  font-family:"Radio Grotesk";
  src:url("assets/fonts/RadioGrotesk-Regular.otf") format("opentype");
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:"Cormorant";
  src:url("assets/fonts/Cormorant-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cormorant";
  src:url("assets/fonts/Cormorant-Medium.ttf") format("truetype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cormorant";
  src:url("assets/fonts/Cormorant-SemiBold.ttf") format("truetype");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cormorant";
  src:url("assets/fonts/Cormorant-Italic.ttf") format("truetype");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Cormorant";
  src:url("assets/fonts/Cormorant-LightItalic.ttf") format("truetype");
  font-weight:300; font-style:italic; font-display:swap;
}
:root{
  /* KALA brand palette */
  --sand:   #F3EBCE;   /* Uluwatu Sand */
  --lava:   #1D1E1D;   /* Bali Lava */
  --olive:  #9DA07F;   /* Olive */
  --lemon:  #F8FFA2;   /* Lemon */
  --sand-deep: #E7DCBA;
  --bg-soft: #E7DCBA;
  --lava-soft: #2A2B27;

  --bg:     var(--sand);
  --fg:     var(--lava);
  --muted:  #84826E;
  --rule:   rgba(29,30,29,0.16);

  --display: "Radio Grotesk", ui-sans-serif, system-ui, sans-serif;
  --serif:   "Cormorant", "Times New Roman", serif;
  --sans:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --nav-h: 92px;
  --bar-h: 40px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--olive); color:var(--sand); }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; }

/* ── Type utilities ─────────────────────────────────────── */
.display{ font-family:var(--display); font-weight:400; letter-spacing:-0.005em; line-height:1.0; }
.serif{ font-family:var(--serif); font-weight:400; }
.serif-it{ font-family:var(--serif); font-style:italic; font-weight:400; }
.wordmark{ font-family:var(--display); font-weight:400; letter-spacing:0.01em; line-height:0.9; }
.caps{ font-family:var(--sans); text-transform:uppercase; letter-spacing:0.22em; font-weight:500; }
.eyebrow{ font-family:var(--sans); text-transform:uppercase; letter-spacing:0.28em; font-size:12px; font-weight:600; }

.wrap{ width:100%; max-width:1320px; margin:0 auto; padding:0 40px; }
@media (max-width:720px){ .wrap{ padding:0 22px; } }

section{ position:relative; }

/* ── Buttons ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  height:52px; padding:0 30px; border-radius:999px;
  font-family:var(--sans); font-size:13px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.18em;
  cursor:pointer; border:1.5px solid var(--fg); background:var(--fg); color:var(--sand);
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn.outline{ background:transparent; color:var(--fg); }
.btn.outline:hover{ background:var(--fg); color:var(--sand); }
.btn.on-dark{ border-color:var(--sand); color:var(--sand); background:transparent; }
.btn.on-dark:hover{ background:var(--sand); color:var(--lava); }
.btn.olive{ background:var(--olive); border-color:var(--olive); color:var(--lava); }
.btn.olive:hover{ background:transparent; color:var(--olive); }
.btn.sm{ height:44px; padding:0 22px; font-size:11px; }

.link-underline{ position:relative; }
.link-underline::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.link-underline:hover::after{ transform:scaleX(1); }

/* ── Reveal ─────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ── Marquee ────────────────────────────────────────────── */
@keyframes marq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee{ display:flex; overflow:hidden; user-select:none; }
.marquee-track{ display:flex; flex-shrink:0; align-items:center; gap:40px; animation:marq 32s linear infinite; padding-right:40px; }

/* ── Scrollbar (subtle) ─────────────────────────────────── */
body::-webkit-scrollbar{ width:11px; }
body::-webkit-scrollbar-track{ background:var(--sand-deep); }
body::-webkit-scrollbar-thumb{ background:var(--olive); border:3px solid var(--sand-deep); border-radius:999px; }

#root{ min-height:100vh; }
.boot{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--lava); color:var(--sand); }
.boot-mark{ width:120px; height:auto; animation:bootpulse 1.6s ease-in-out infinite; }
@keyframes bootpulse{ 0%,100%{ opacity:.35; transform:scale(.96); } 50%{ opacity:1; transform:scale(1); } }