/* ==========================================================================
   Eyebrow Lab — shared site styles
   Palette:  espresso #211712 · panel #2b1e17 / #33241c · orange #D9683A
             cream #F1E4D2 · muted #c7b299 · light section #EFE5D6
   Fonts:    Archivo Expanded (display) · Space Grotesk (labels) · Archivo (body)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
:root{
  --ink:#211712; --panel:#2b1e17; --panel2:#33241c; --line:#3a2a20;
  --orange:#D9683A; --cream:#F1E4D2; --muted:#c7b299; --soft:#e3d3b9;
  --light:#EFE5D6; --maxw:1180px;
}
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:'Archivo',system-ui,sans-serif; font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--orange); text-decoration:none; }
a:hover{ color:#efac8b; }

/* ---- language toggle utility ---- */
.lang-nl{ display:none; }
body.is-nl .lang-en{ display:none; }
body.is-nl .lang-nl{ display:revert; }

/* ---- type ---- */
h1,h2,h3{ font-family:'Archivo Expanded','Archivo',sans-serif; letter-spacing:-.01em; margin:0; }
.display{ font-weight:900; text-transform:uppercase; line-height:.95; }
.eyebrow{ font-family:'Space Grotesk',monospace; font-size:13px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--orange); }
.lead{ font-size:clamp(18px,2.2vw,21px); line-height:1.7; color:var(--soft); }
.muted{ color:var(--muted); }

/* ---- layout ---- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:clamp(20px,5vw,56px); padding-right:clamp(20px,5vw,56px); }
.section{ padding:clamp(56px,7vw,96px) 0; }
.section.light{ background:var(--light); color:var(--ink); }
.section.light .lead{ color:#5c4a3c; }
.section.light .muted{ color:#8a7358; }
.grid{ display:grid; gap:clamp(28px,4vw,56px); }
.g2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:center; }
.g3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.g4{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }

/* ---- buttons ---- */
.btn{ display:inline-block; border:0; cursor:pointer; font-family:'Space Grotesk',monospace;
  font-size:15px; letter-spacing:.05em; text-transform:uppercase; font-weight:700;
  padding:16px 32px; border-radius:4px; transition:transform .15s ease, background .15s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--orange); color:var(--ink); }
.btn-primary:hover{ background:#e67a4d; color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--cream); border:1px solid var(--cream); }
.btn-ghost:hover{ background:var(--cream); color:var(--ink); }
.section.light .btn-ghost{ color:var(--ink); border-color:var(--ink); }
.section.light .btn-ghost:hover{ background:var(--ink); color:var(--cream); }

/* ---- header / nav ---- */
.nav{ position:sticky; top:0; z-index:50; background:rgba(33,23,18,.86);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav-inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:20px; padding:16px clamp(20px,5vw,56px); }
.nav-logo{ font-family:'Archivo Expanded',sans-serif; font-weight:900; font-size:20px;
  text-transform:uppercase; letter-spacing:-.01em; color:var(--cream); }
.nav-logo img{ height:34px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0; }
.nav-links a{ font-family:'Space Grotesk',monospace; font-size:15px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); }
.nav-links a:hover, .nav-links a.active{ color:var(--cream); }
.nav-right{ display:flex; align-items:center; gap:16px; }
.lang-btn{ background:transparent; border:1px solid var(--line); color:var(--muted);
  font-family:'Space Grotesk',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 12px; border-radius:999px; cursor:pointer; }
.lang-btn:hover{ color:var(--cream); border-color:var(--muted); }
.nav-toggle{ display:none; background:var(--orange); border:0; color:var(--ink); height:48px; padding:0 20px; border-radius:6px; cursor:pointer; align-items:center; gap:8px; font-family:'Space Grotesk',monospace; font-size:15px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; line-height:1; }
.nav-toggle::after{ content:'Menu'; }

/* ---- page hero ---- */
.page-hero{ padding:clamp(56px,8vw,110px) 0 clamp(40px,5vw,64px); }
.page-hero h1{ font-size:clamp(40px,7vw,84px); margin:18px 0 22px; }

/* ---- cards ---- */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:clamp(24px,3vw,32px); }
.section.light .card{ background:#FBF6EE; border-color:#e3d3bf; }
.card h3{ font-size:21px; margin-bottom:10px; }
.num{ font-family:'Archivo Expanded',sans-serif; font-weight:900; font-size:40px; color:var(--orange); line-height:1; }

/* ---- media placeholder ---- */
.ph{ display:flex; align-items:center; justify-content:center; text-align:center;
  background:repeating-linear-gradient(-45deg,#33241c,#33241c 12px,#2b1e17 12px,#2b1e17 24px);
  border-radius:8px; min-height:280px; }
.ph span{ font-family:'Space Grotesk',monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#c7a887; background:var(--ink); padding:6px 10px; border-radius:3px; }

/* ---- price block ---- */
.price-card{ text-align:center; }
.price-card .amt{ font-family:'Archivo Expanded',sans-serif; font-weight:900;
  font-size:clamp(48px,7vw,72px); color:var(--orange); line-height:1; }

/* ---- footer ---- */
.footer{ background:var(--ink); border-top:1px solid var(--line); color:var(--muted);
  padding:clamp(40px,5vw,64px) 0 40px; font-size:15px; }
.footer .grid{ gap:32px; }
.footer h4{ font-family:'Space Grotesk',monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cream); margin:0 0 14px; }
.footer a{ color:var(--soft); display:block; padding:3px 0; }
.footer a:hover{ color:var(--cream); }
.footer .legal{ border-top:1px solid var(--line); margin-top:36px; padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:'Space Grotesk',monospace; font-size:12px; letter-spacing:.05em; }

/* ---- booking modal ---- */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(15,10,5,.75);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{position:relative;width:100%;max-width:760px;max-height:94vh;overflow:auto;border-radius:16px;background:var(--light);}
.modal-close{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;border-radius:999px;border:none;cursor:pointer;background:var(--orange);color:var(--ink);font-size:18px;font-weight:700;line-height:1;}

/* ---- glossy frosted shimmer chip ---- */
@keyframes shimmer-chip{0%{background-position:-150% 0;}100%{background-position:250% 0;}}
.chip{ display:inline-flex; align-items:center; background:rgba(255,255,255,.14); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:10px 20px; position:relative; overflow:hidden;
  font-family:'Space Grotesk',monospace; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--cream); }
.chip::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  background-size:250% 100%; animation:shimmer-chip 2.8s ease-in-out infinite; }
.section.light .chip{ background:rgba(33,23,18,.08); border-color:rgba(33,23,18,.18); color:var(--ink); }
.section.light .chip::after{ background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%); background-size:250% 100%; }

/* ---- fade-in on scroll ---- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---- responsive ---- */
@media (max-width:1000px){
  .nav-inner{ position:relative; }
  .nav-links{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    gap:0; background:#1a120d; border-bottom:1px solid var(--line); padding:8px clamp(20px,5vw,56px) 18px;
    display:none; }
  .nav-links.open{ display:flex; }
  .nav-links li{ width:100%; }
  .nav-links a{ display:block; padding:20px 4px; font-size:23px; font-weight:600; color:var(--cream);
    width:100%; border-bottom:1px solid #33241c; }
  .nav-links li:last-child a{ border-bottom:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-right .btn-primary{ display:none; }
}