/* huna-base.css — the design-system rules every public page used to
   carry inline (round 58). Linked from each page exactly where its inline
   <style> began; the page's own rules stay inline right after it. Edit
   here, not in a page: a rule repeated in a page is caught by
   tools/basecss.js. */
/* ===== HUNA — shared design system ===== */
:root{
  --bg: #F6EEE2;
  --white: #FFFFFF;
  --ink: #1B1613;
  --ink-soft: #4A423C;
  --accent: #7A5609;   /* ROUND 31 — was #88600B, 4.43:1 on the sand panels */
  --accent-soft: #D1A94A;
  --accent-fill: #FFCE57;
  --accent-fill-hover: #EEBD3D;
  --sand: #EDE7D9;
  --sand-line: #E7E0D0;
  --cinema-bg: #111110;
  --cinema-ink: #E8DDD0;
  --gold: #C17A3A;
  --ease: cubic-bezier(.16,.8,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ha-ui);
  font-weight:400;
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 700px at 8% 0%, rgba(255,206,87,0.05), transparent 60%),
    radial-gradient(ellipse 1000px 800px at 100% 18%, rgba(237,231,217,0.35), transparent 55%),
    radial-gradient(ellipse 700px 600px at 15% 78%, rgba(209,169,74,0.045), transparent 60%);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
}
header, .hero, section, footer, main{ position:relative; z-index:1; }
h1,h2,h3,.display{
  font-family:var(--ha-display);
  letter-spacing:-0.02em;
  font-weight:600;
  color:var(--ink);
}
.ar{ font-family:var(--ha-ar-display); direction:rtl; }
/* ROUND 31 — the single most consequential line on the Arabic site.
   It used to read `direction:ltr`, and every right-to-left behaviour on the
   page was then bought back one selector at a time: nav, footer, a handful of
   grids, whatever each page had been caught out on. Anything nobody had
   noticed yet stayed left-to-right, so Arabic sentences were laid out in
   English order — trailing punctuation jumped to the wrong end, rows refused
   to mirror, `text-align:start` meant "left", and a title sat at one edge of
   a plate with its own description stranded at the other. The allowlist could
   only ever be as complete as the last bug report.
   Arabic reads right to left. That is now the default, and the exceptions are
   the handful of things that genuinely must not flip — set out as LTR islands
   in §56 of huna-art.css, where they can be seen together. */
html[dir="rtl"] body{ direction:rtl; }
.ar-body{ font-family:var(--ha-ar-ui); direction:rtl; }
h1.ar-body, h2.ar-body, h3.ar-body, p.ar-body{ margin-inline-end:auto; letter-spacing:normal; }
p.ar-body{ line-height:1.85; }
/* --- Round 22: the RTL system so far is a base LTR body plus a per-page
   allowlist of scoped `direction:rtl` exceptions (nav, footer content, and
   whatever each page's own unique sections needed) — it never covered the
   shared chrome (nav bar, footer grid, generic content grids, plain form
   inputs) that every page has. These rules extend that same allowlist
   pattern to that shared chrome, sitewide. */
html[dir="rtl"] nav{ direction:rtl; }
html[dir="rtl"] .mobile-menu-btn{ margin-right:0; margin-left:4px; }
html[dir="rtl"] .footer-grid{ direction:rtl; }
html[dir="rtl"] .contact-info-item{ direction:rtl; }
html[dir="rtl"] .field input, html[dir="rtl"] .field textarea{ direction:rtl; text-align:right; }
/* Numeric/Latin-format fields keep LTR internal digit order (so a phone
   number or a typed date doesn't visually reverse) while still sitting on
   the RTL-correct (right) side of the form. */
html[dir="rtl"] .field input[type="tel"], html[dir="rtl"] .field input[type="email"],
html[dir="rtl"] .field input[type="date"], html[dir="rtl"] .field input[type="time"],
html[dir="rtl"] .field input[type="number"]{ direction:ltr; text-align:right; }
html[dir="rtl"] .work-arrow{ transform:scaleX(-1); }
@media(max-width:1000px){
  html[dir="rtl"] .navlinks a, html[dir="rtl"] header.scrolled .navlinks a, html[dir="rtl"] header.solid .navlinks a{
    text-align:right !important; justify-content:flex-end !important; flex-direction:row-reverse !important;
  }
}
a{color:inherit;text-decoration:none;}
img{display:block;width:100%;height:100%;object-fit:cover;}
button{font-family:inherit;}
/* ---------- accessible keyboard focus (sitewide) ---------- */
:focus-visible{ outline:2px solid var(--accent-fill); outline-offset:3px; border-radius:4px; }
/* Round 24: language-only content must not flash the wrong language before
   applySiteLang() runs at the end of body -- html[dir] is already set
   synchronously by the anti-FOUC script in <head>, so gate visibility off
   that attribute instead of waiting on JS to toggle inline styles later. */
html:not([dir="rtl"]) .lang-ar-only{ display:none; }
html[dir="rtl"] .lang-en-only{ display:none; }
.eyebrow{
  font-family:var(--ha-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin-bottom:14px;
  display:inline-flex; align-items:center; gap:8px;
}
.eyebrow.ar-body{ font-family:var(--ha-ar-ui); letter-spacing:normal; font-size:13px; }
/* the tick mark is decorative (no text-contrast concern), so it carries Huna's
   bright signature yellow even where the eyebrow's own text uses the deeper,
   more legible --accent/--gold tone next to it */
.eyebrow::before{ content:""; width:16px;height:2px; background:var(--accent-fill); display:inline-block; }
.eyebrow.on-dark{ color: var(--ha-gold-text); }
.eyebrow.on-dark::before{ background:var(--accent-fill); }
/* ---------- premium button micro-interactions ----------
   --sweep-color lets a section override the fill (e.g. white on an
   already-yellow footer-cta, or on a dark photo hero) without fighting
   specificity; default is Huna's signature yellow. */
.cta-btn, .cta-outline, .cta-btn-secondary{ position:relative; overflow:hidden; isolation:isolate; }
.cta-outline{ z-index:0; }
.cta-outline::before{
  content:""; position:absolute; inset:0; background:var(--sweep-color, var(--accent-fill)); z-index:-1;
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
html[dir="rtl"] .cta-outline::before{ transform-origin:right; }
@media(hover:hover) and (pointer:fine){
  .cta-outline:hover::before{ transform:scaleX(1); }
  .cta-outline:hover{ color:var(--ink); border-color:transparent; }
}
.link-arrow{ display:inline-block; transition:transform .35s var(--ease); }
@media(hover:hover) and (pointer:fine){ a:hover .link-arrow, button:hover .link-arrow{ transform:translateX(6px); } }
html[dir="rtl"] .link-arrow{ display:inline-block; transform:scaleX(-1); }
@media(hover:hover) and (pointer:fine){ html[dir="rtl"] a:hover .link-arrow, html[dir="rtl"] button:hover .link-arrow{ transform:scaleX(-1) translateX(6px); } }
.wrap{ max-width:1400px; margin:0 auto; padding:0 48px; }
@media(max-width:768px){ .wrap{padding:0 22px;} }
/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(246,238,226,0);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .3s var(--ease);
  padding:28px 0;
}
header.scrolled, header.solid{
  background:rgba(246,238,226,0.94);
  backdrop-filter:blur(16px);
  box-shadow:0 1px 0 var(--sand-line);
  padding:16px 0;
}
nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo-mark{ position:relative; height:26px; width:62px; display:block; }
.logo-mark img{
  position:absolute; left:0; top:0; height:26px; width:auto;
  object-fit:contain; transition:opacity .4s var(--ease);
}
.logo-mark .on-light{ opacity:0; }
.logo-mark .on-dark{ opacity:1; }
header.scrolled .logo-mark .on-light, header.solid .logo-mark .on-light{ opacity:1; }
header.scrolled .logo-mark .on-dark, header.solid .logo-mark .on-dark{ opacity:0; }
.footer-grid .logo-mark img{ height:24px; }
.navlinks{
  display:flex; gap:1px; list-style:none; align-items:center;
  background:rgba(17,17,16,0.7); border-radius:999px; padding:6px 6px;
  box-shadow:0 8px 20px rgba(20,16,13,0.18); transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.navlinks a{
  font-family:var(--ha-mono); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:0.05em; color:rgba(255,255,255,0.85);
  position:relative; border-radius:999px; transition:all .25s var(--ease); display:flex; align-items:center; justify-content:center;
  min-width:74px; height:33px; padding:0 10px; text-align:center; box-sizing:border-box;
}
.navlinks a span.ar-body{ font-family:var(--ha-ar-ui); text-transform:none; letter-spacing:normal; font-size:13px; }
.navlinks a.current{ color:#fff; background:rgba(255,255,255,0.18); }
.navlinks a:hover{ color:#fff; background:rgba(255,255,255,0.12); }
header.scrolled .navlinks, header.solid .navlinks{
  background:var(--white); box-shadow:0 4px 14px rgba(20,16,13,0.08); border:1px solid var(--sand-line);
}
header.scrolled .navlinks a, header.solid .navlinks a{ color:var(--ink-soft); }
header.scrolled .navlinks a.current, header.solid .navlinks a.current{ color:var(--ink); background:var(--bg); }
header.scrolled .navlinks a:hover, header.solid .navlinks a:hover{ color:var(--ink); background:var(--bg); }
/* ---------- language toggle ---------- */
.lang-toggle-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 13px; border-radius:999px; border:1px solid var(--sand-line); cursor:pointer;
  background:var(--white); color:var(--ink); font-size:12px; font-weight:600; flex-shrink:0; line-height:15px;
  transition:background .2s, color .2s;
}
@media (hover: hover) and (pointer: fine){ .lang-toggle-btn:hover{ background:var(--sand); } }
header.scrolled .lang-toggle-btn, header.solid .lang-toggle-btn{ background:var(--bg); }
/* ---------- mobile menu ---------- */
.mobile-menu-btn{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:14px; border:none; cursor:pointer;
  background:var(--sand); color:var(--ink); flex-shrink:0; margin-right:4px;
  /* 44x44 (not 38x38) meets the standard minimum comfortable touch-target size
     for mobile — the icon inside stays the same, only the tappable box grows. */
}
.mobile-only-link{ display:none; }
@media(max-width:1000px){
  .mobile-menu-btn{ display:flex; position:relative; }
  .logo-mark, .nav-ctas{ position:relative; z-index:2; }
  /* Round 30: full-screen editorial takeover menu, replacing the small
     dropdown panel. Same open/close JS and .open class as before -- only
     the visual treatment changes. Numbers are pure CSS counters (no markup
     change), echoing the mono-numeral pattern used elsewhere on the site
     (About page pillars, etc). */
  .mobile-only-link{
    display:block; margin-top:22px; padding-top:22px;
    border-top:1px solid rgba(232,221,208,0.15) !important;
  }
  .navlinks{
    display:flex !important;
    position:fixed !important; inset:0 !important;
    flex-direction:column !important; align-items:stretch !important; justify-content:center !important;
    gap:0 !important;
    background:var(--cinema-bg) !important; border:none !important;
    box-shadow:none !important; border-radius:0 !important;
    padding:32px 30px !important; box-sizing:border-box;
    z-index:1; counter-reset:navnum;
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px);
    transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s;
    overflow-y:auto;
  }
  .navlinks.open{
    opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateY(0) !important;
    transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear 0s;
  }
  .navlinks li{
    border-bottom:1px solid rgba(232,221,208,0.1);
    opacity:0; transform:translateY(16px);
    transition:opacity .45s var(--ease), transform .45s var(--ease);
  }
  .navlinks li:last-child{ border-bottom:none; }
  .navlinks.open li{ opacity:1; transform:translateY(0); }
  .navlinks.open li:nth-child(1){ transition-delay:.05s; }
  .navlinks.open li:nth-child(2){ transition-delay:.09s; }
  .navlinks.open li:nth-child(3){ transition-delay:.13s; }
  .navlinks.open li:nth-child(4){ transition-delay:.17s; }
  .navlinks.open li:nth-child(5){ transition-delay:.21s; }
  .navlinks.open li:nth-child(6){ transition-delay:.25s; }
  .navlinks.open li:nth-child(7){ transition-delay:.29s; }
  .navlinks.open li:nth-child(8){ transition-delay:.33s; }
  .navlinks a, header.scrolled .navlinks a, header.solid .navlinks a{
    color:rgba(232,221,208,0.88) !important; background:none !important;
    font-family:var(--ha-display) !important; font-weight:600 !important;
    font-size: var(--fs-d6) !important; letter-spacing:-0.01em !important; text-transform:none !important;
    text-align:left; justify-content:flex-start !important; height:auto !important; min-width:0 !important;
    padding:16px 2px !important; border-radius:0 !important; gap:16px;
  }
  .navlinks a::before{
    counter-increment:navnum; content:counter(navnum, decimal-leading-zero);
    font-family:var(--ha-mono); font-size:12px; font-weight:500; letter-spacing:0.05em;
    color:var(--gold); flex-shrink:0; min-width:22px;
  }
  .mobile-only-link a::before{ content:none; }
  .mobile-only-link a{
    font-family:var(--ha-mono) !important; font-size:13px !important; font-weight:600 !important;
    letter-spacing:0.08em !important; text-transform:uppercase !important;
    color:rgba(232,221,208,0.6) !important; padding:6px 2px !important;
  }
  .navlinks a.current, .navlinks a:hover,
  header.scrolled .navlinks a.current, header.solid .navlinks a.current,
  header.scrolled .navlinks a:hover, header.solid .navlinks a:hover{
    color:var(--gold) !important; background:none !important;
  }
}
.cta-btn{
  background:var(--accent-fill); color:var(--ink); font-size:13px; font-weight:600;
  padding:11px 22px; border-radius:16px; letter-spacing:0.01em;
  transition:background .3s, transform .3s; display:inline-block;
  border:none; cursor:pointer;
}
@media(hover:hover) and (pointer:fine){ .cta-btn:hover{ background:var(--accent-fill-hover); transform:translateY(-1px); } }
.cta-outline{
  border:1px solid var(--ink); color:var(--ink);
  padding:10px 20px; border-radius:16px; font-size:13px; font-weight:600;
  transition:background-color .3s, color .3s, border-color .3s, box-shadow .3s; display:inline-block; cursor:pointer; background:none;
}
.nav-ctas{ display:flex; align-items:center; gap:8px; }
.nav-ctas .cta-btn-secondary, .nav-ctas .cta-btn{ min-width:0; height:38px; display:inline-flex; align-items:center; justify-content:center; padding:0 16px; text-align:center; box-sizing:border-box; }
.cta-btn-secondary{
  background:var(--sand); color:var(--ink); font-size:13px; font-weight:600;
  padding:11px 22px; border-radius:16px; letter-spacing:0.01em;
  transition:background .3s, transform .3s; display:inline-block;
  border:none; cursor:pointer; white-space:nowrap;
}
@media(hover:hover) and (pointer:fine){ .cta-btn-secondary:hover{ background:#D8CFB8; transform:translateY(-1px); } }
@media(max-width:700px){ .nav-cta-secondary{ display:none !important; } }
/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .72s cubic-bezier(.16,1,.3,1), transform .72s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none !important; opacity:1 !important; transform:none !important; filter:none !important; }
  *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}
/* staggered cascade for grid children */
/* ---------- page header (inner pages) ---------- */
.page-header h1{ font-size: var(--fs-d3); line-height:1.05; max-width:760px; }
.page-header p{ margin-top:20px; max-width:560px; color:var(--ink-soft); font-size:15px; line-height:1.7; font-weight:300; }
/* ---------- footer ---------- */
.footer-cta{
  background:var(--accent-fill); color:var(--ink); padding:130px 0 90px; text-align:center;
  position:relative; overflow:hidden;
}
.footer-cta h2{ color:var(--ink); font-size: var(--fs-d3); line-height:1.05; max-width:820px; margin:0 auto 40px; }
.footer-cta .cta-outline{ border-color:rgba(27,22,19,0.35); color:var(--ink); --sweep-color:#fff; }
@media (hover: hover) and (pointer: fine){ .footer-cta .cta-outline:hover{ color:var(--accent); } }
/* Round 30: editorial footer -- gold hairline top border, mono-caps gold
   column headers (matching the .eyebrow pattern used sitewide), icon rows
   in the Connect column, and a mono-caps footer-bottom line. Structure
   and all pc- / data-pc bindings are unchanged -- visual only. */
footer{ background:var(--ink); color:rgba(232,221,208,0.55); padding:90px 0 34px; font-size:13px; position:relative; }
footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(193,122,58,0.55), transparent);
}
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; margin-bottom:64px; }
@media(max-width:768px){ .footer-grid{grid-template-columns:1fr 1fr; gap:40px 24px;} }
@media(max-width:520px){ .footer-grid{grid-template-columns:1fr; gap:38px;} }
.footer-grid .logo-mark{ margin-bottom:2px; }
.footer-grid .logo-mark img{ height:28px; }
.footer-grid p{ max-width:280px; line-height:1.75; font-weight:300; margin-top:16px; color:rgba(232,221,208,0.62); }
.footer-grid h3, .footer-grid h2{
  font-family:var(--ha-mono); color:var(--gold); font-size:11px;
  letter-spacing:0.14em; text-transform:uppercase; margin-bottom:20px; font-weight:600;
}
.footer-grid ul{ list-style:none; }
.footer-grid li{ margin-bottom:13px; }
.footer-grid a{ transition:color .25s var(--ease); }
.footer-grid a:hover{ color:#fff; }
.footer-social-link{ display:inline-flex; align-items:center; gap:9px; }
.footer-social-link svg{ flex-shrink:0; color:var(--gold); opacity:0.85; transition:opacity .25s var(--ease); }
.footer-social-link:hover svg{ opacity:1; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:28px;
  border-top:1px solid rgba(232,221,208,0.12); flex-wrap:wrap; gap:14px;
  font-family:var(--ha-mono); font-size:10px; letter-spacing:0.05em;
  color:rgba(232,221,208,0.66); text-transform:uppercase;
}
@media(max-width:520px){ .footer-bottom{ justify-content:center; text-align:center; } }
/* ================= BOOK A SPACE PAGE ================= */
.works-hero{ padding:170px 0 60px; text-align:center; }
.works-hero .eyebrow{ justify-content:center; display:inline-flex; }
.works-hero h1{ font-size: var(--fs-d3); max-width:780px; margin:0 auto; line-height:1.05; }
.works-hero p{ max-width:520px; margin:22px auto 0; color:var(--ink-soft); font-size:15px; line-height:1.7; font-weight:300; }
.category-tabs{
  display:flex; justify-content:center; gap:10px; margin:50px 0 0; flex-wrap:wrap;
  border-bottom:1px solid var(--sand-line); padding-bottom:0;
}
.cat-tab{
  padding:16px 26px; font-size:13px; font-weight:600; color:var(--ink-soft);
  cursor:pointer; position:relative; transition:color .25s; background:none; border:none;
}
.cat-tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--accent); transform:scaleX(0); transition:transform .3s var(--ease);
}
.cat-tab.active{ color:var(--ink); }
.cat-tab.active::after{ transform:scaleX(1); }
.cat-tab:hover{ color:var(--ink); }
.booking-panel{ display:none; padding:70px 0 130px; scroll-margin-top:96px; }
.booking-panel.active{ display:block; }
.booking-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
@media(max-width:900px){ .booking-grid{grid-template-columns:1fr; gap:36px;} }
.booking-copy .num{ font-size:12px; color:var(--accent); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:16px; }
.booking-copy h2{ font-size: var(--fs-d5); line-height:1.1; margin-bottom:18px; }
.booking-copy p{ color:var(--ink-soft); font-size:15px; line-height:1.75; font-weight:300; max-width:440px; }
.spec-list{ margin-top:34px; display:flex; flex-direction:column; gap:14px; }
.spec-item{ display:flex; align-items:center; gap:14px; font-size:13px; color:var(--ink-soft); }
.spec-item .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0; }
/* 16px above (not 14px) is deliberate: iOS Safari auto-zooms the whole page
   when a focused input's computed font-size is under 16px — a jarring
   mobile-only side effect with no equivalent on desktop, so it's easy to
   miss without testing on an actual iPhone. Every form sitewide shares this
   one rule. */
.plan-toggle{ display:flex; gap:10px; }
.form-submit{ margin-top:6px; width:100%; text-align:center; padding:14px; }
.form-note{ font-size:12px; color:var(--ink-soft); text-align:center; }
.confirm-banner{
  display:none; align-items:center; gap:12px; background:var(--sand); border:1px solid var(--sand-line); border-left:3px solid var(--gold);
  color:var(--ink); padding:14px 18px; font-size:13px; border-radius:16px;
}
.confirm-banner.show{ display:flex; }
/* ================= EVENTS PAGE ================= */
.ev-toolbar{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  flex-wrap:wrap; margin-bottom:40px;
}
.view-toggle{ display:flex; gap:8px; background:var(--white); border:1px solid var(--sand-line); padding:4px; border-radius:16px; }
.ev-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
@media(max-width:900px){ .ev-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:640px){ .ev-grid{grid-template-columns:1fr;} }
.ev-card{ display:block; cursor:pointer; background:var(--white); border:1px solid var(--sand-line); border-radius:16px; overflow:hidden; transition:box-shadow .3s var(--ease), transform .3s var(--ease); box-sizing:border-box; -webkit-transform:translateZ(0); transform:translateZ(0); }
@media(hover:hover) and (pointer:fine){ .ev-card:hover{ box-shadow:0 24px 48px -18px rgba(20,16,13,0.15); transform:translateY(-4px); } }
.ev-thumb{ height:210px; overflow:hidden; position:relative; }
.ev-thumb img{ transition:transform .6s var(--ease); }
@media(hover:hover) and (pointer:fine){ .ev-card:hover .ev-thumb img{ transform:scale(1.07); } }
.ev-cat{
  position:absolute; top:14px; left:14px; z-index:2;
  background:var(--gold); color:var(--ink);
  font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px;
  box-shadow:0 6px 16px rgba(0,0,0,0.15);
}
.ev-body{ padding:22px 22px 26px; }
.ev-date{ font-size:12px; color:var(--gold); font-weight:600; letter-spacing:0.03em; margin-bottom:8px; }
.ev-loc{ font-size:13px; color:var(--ink-soft); margin-bottom:16px; }
.ev-reg-btn{
  width:100%; padding:11px; font-size:12px; font-weight:600; text-align:center;
  border:1px solid var(--ink); color:var(--ink); background:none; cursor:pointer;
  border-radius:16px; transition:background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
@media (hover: hover) and (pointer: fine){ .ev-reg-btn:hover{ background:var(--ink); color:#fff; } }
/* --- calendar view --- */
.cal-wrap{ display:none; }
.cal-wrap.active{ display:block; }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.cal-head h3{ font-size:22px; }
.cal-nav{ display:flex; gap:8px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--sand-line); border:1px solid var(--sand-line); border-radius:16px; overflow:hidden; -webkit-transform:translateZ(0); transform:translateZ(0); }
.cal-dow{ background:var(--white); padding:12px; font-size:11px; text-align:center; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.cal-day{
  background:var(--white); min-height:96px; padding:10px; font-size:12px; color:var(--ink-soft);
  position:relative; transition:background .2s;
}
.cal-day.empty{ background:var(--bg); }
.cal-day .num{ font-weight:600; color:var(--ink); font-size:13px; }
.cal-day.today .num{ color:var(--ink); background:var(--accent-fill); width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.cal-event{
  margin-top:6px; font-size:10px; padding:4px 6px; background:var(--gold); color:var(--ink);
  border-radius:16px; cursor:pointer; font-weight:600; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; -webkit-transform:translateZ(0); transform:translateZ(0); }
.cal-event:hover{ background:var(--accent-fill); color:var(--ink); }
@media(max-width:768px){
  .cal-day{ min-height:64px; font-size:10px; padding:6px; }
  .cal-event{ font-size:10px; padding:2px 4px; }
  .cal-dow{ font-size:10px; padding:8px 4px; }
}
/* --- notify signup strip --- */
.notify-strip{
  background:var(--white); border:1px solid var(--sand-line); border-radius:16px; padding:44px;
  display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; margin-top:90px;
}
@media(max-width:800px){ .notify-strip{grid-template-columns:1fr;} }
.notify-strip h3{ font-size:22px; margin-bottom:10px; }
.notify-form{ display:flex; flex-direction:column; gap:12px; }
.notify-row{ display:flex; gap:10px; }
.notify-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag-check{
  font-size:11px; padding:6px 13px; border:1px solid var(--sand); border-radius:20px;
  cursor:pointer; color:var(--ink-soft); transition:all .2s; user-select:none;
}
.tag-check.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
/* --- modal --- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(17,17,16,0.6); z-index:200;
  display:none; align-items:center; justify-content:center; padding:24px;
  backdrop-filter:blur(3px);
}
.modal-overlay.open{ display:flex; }
.modal-box{
  background:var(--white); border-radius:16px; max-width:460px; width:100%; padding:40px;
  position:relative; max-height:90vh; overflow-y:auto;
}
.modal-close{
  position:absolute; top:14px; right:14px; width:40px; height:40px; border:none;
  background:var(--bg); border-radius:50%; cursor:pointer; font-size:16px; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
  /* enlarged from 32x32 for an easier mobile tap target; repositioned slightly
     closer to the corner so it doesn't crowd the modal title. */
}
.modal-box h3{ font-size:22px; margin-bottom:6px; padding-right:30px; }
.modal-meta{ font-size:13px; color:var(--accent); font-weight:600; margin-bottom:20px; }
/* ================= BOOKING WIZARD ================= */
.wizard-head .eyebrow{ justify-content:flex-start; }
.wizard-head h1{ font-size: var(--fs-d4); max-width:640px; line-height:1.08; }
.progress{ display:flex; gap:8px; margin:36px 0 0; }
.progress-labels{ display:flex; justify-content:space-between; margin-top:10px; font-size:11px; color:var(--ink-soft); letter-spacing:0.03em; }
.wizard-body{ padding:50px 0 140px; }
.wiz-step{ display:none; }
.wiz-step.active{ display:block; animation:stepIn .5s var(--ease); }
@keyframes stepIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
.wiz-step h2{ font-size: var(--fs-d6); margin-bottom:10px; }
.wiz-step .step-sub{ color:var(--ink-soft); font-size:15px; font-weight:300; margin-bottom:40px; max-width:520px; }
.choice-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:900px){ .choice-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .choice-grid{ grid-template-columns:1fr; } }
.loc-choice-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:900px){ .loc-choice-grid{ grid-template-columns:repeat(2,1fr); } }
.loc-choice-card{
  position:relative; height:230px; border-radius:16px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; transition:border-color .3s; -webkit-transform:translateZ(0); transform:translateZ(0); }
.loc-choice-card img{ transition:transform .6s var(--ease); }
@media(hover:hover) and (pointer:fine){ .loc-choice-card:hover img{ transform:scale(1.06); } }
.loc-choice-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(17,17,16,0.8) 100%); }
.loc-choice-info{ position:absolute; left:18px; right:18px; bottom:16px; z-index:2; color:#fff; }
.loc-choice-city{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
.package-form{ background:var(--white); border:1px solid var(--sand-line); border-radius:16px; padding:44px; max-width:640px; }
.spec-summary{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px;
}
.wiz-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:44px; max-width:640px; }
.wiz-back{ font-size:13px; font-weight:600; color:var(--ink-soft); cursor:pointer; background:none; border:none; display:flex; align-items:center; gap:8px; }
@media (hover: hover) and (pointer: fine){ .wiz-back:hover{ color:var(--ink); } }
.wiz-continue{ padding:14px 30px; }
.wiz-continue:disabled{ opacity:0.35; cursor:not-allowed; }
.confirm-screen{ text-align:center; max-width:520px; margin:0 auto; padding:20px 0 40px; }
.confirm-icon{
  width:64px; height:64px; border-radius:50%; background:var(--accent-fill); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 30px;
}
.confirm-screen h2{ font-size: var(--fs-d5); margin-bottom:14px; }
/* ================= EVENT DETAIL PAGE ================= */
.ev-hero{ position:relative; height:64vh; min-height:440px; display:flex; align-items:flex-end; overflow:hidden; }
.ev-hero-bg{ position:absolute; inset:0; z-index:0; }
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.09); } }
.ev-hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,17,16,0.1) 0%, rgba(17,17,16,0.75) 100%); }
.ev-hero-content{ position:relative; z-index:2; color:#fff; padding:0 0 56px; width:100%; }
.ev-hero-cat{ font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:16px; display:inline-block; padding:6px 14px; background:rgba(0,0,0,0.35); border-radius:16px; }
.ev-hero-content h1{ color:#fff; font-size: var(--fs-d3); line-height:1.05; max-width:820px; }
.ev-detail-body{ padding:90px 0 60px; }
.ev-detail-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:80px; align-items:start; }
@media(max-width:900px){ .ev-detail-grid{ grid-template-columns:1fr; gap:50px; } }
.speaker-list{ display:flex; flex-direction:column; gap:14px; margin-top:6px; }
.speaker-item{ display:flex; align-items:center; gap:14px; font-size:13px; }
.speaker-avatar{ width:38px; height:38px; border-radius:50%; background:var(--sand); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--ha-display); font-weight:700; color:var(--ink); font-size:13px; box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.reg-card{ background:var(--white); border:1px solid var(--sand-line); border-radius:16px; padding:38px; position:sticky; top:110px; }
.explore-card{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--white); border:1px solid var(--sand-line); border-radius:16px; padding:22px; font-size:13px; font-weight:600;
}
.related-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:90px; }
@media(max-width:800px){ .related-strip{ grid-template-columns:1fr; } }
.related-card{ display:block; cursor:pointer; }
.related-thumb{ height:170px; overflow:hidden; margin-bottom:14px; border-radius:16px; -webkit-transform:translateZ(0); transform:translateZ(0); }
.related-thumb img{ transition:transform .6s var(--ease); }
.related-title{ font-family:var(--ha-display); font-size:15px; }
.related-meta{ font-size:12px; color:var(--ink-soft); margin-top:4px; }