/* ============================================================
   COURT DEPT — editorial sports-lifestyle landing (v2)
   New brand palette · brand display font · AYO booking · IG
   ============================================================ */

/* ---------- Brand display font ---------- */
@font-face{
  font-family:'Behind The Nineties';
  src:url('uploads/Behind-The-Nineties-Md-It.otf') format('opentype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Behind The Nineties';
  src:url('uploads/Behind-The-Nineties-Smbd-It.ttf') format('truetype');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Behind The Nineties';
  src:url('uploads/Behind-The-Nineties-Bd-It.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* Brand palette */
  --forest:#024032;   /* Court Dept Signature / primary ink */
  --rust:#b02400;     /* Court Dept Hause */
  --orange:#b02400;   /* energetic accent */
  --taupe:#7f6b46;    /* muted secondary */
  --cream:#f0eade;    /* paper */
  --white:#ffffff;
  --maroon:#721804;   /* deep accent */

  --forest-deep:#012a1f;
  --cream-2: color-mix(in oklab, var(--cream) 84%, var(--taupe));
  --line: color-mix(in oklab, var(--forest) 16%, transparent);

  /* Themeable (driven by Tweaks) */
  --accent: var(--orange);
  --bg: var(--cream);
  --ink: var(--forest);
  --font-display:'Behind The Nineties', 'Bodoni Moda', Georgia, serif;
  --font-sans:'Hanken Grotesk', system-ui, sans-serif;

  /* Motion (driven by Tweaks) */
  --reveal-y:34px;
  --reveal-dur:1.05s;
  --parallax:1;

  --pad:clamp(20px,5vw,96px);
  --maxw:1520px;
}

[data-bg="forest"]{ --bg:var(--forest); --ink:var(--cream); }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-weight:400; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .8s ease, color .8s ease;
  overflow-x:clip;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:var(--cream); }

/* ---------- Type ---------- */
.display{
  font-family:var(--font-display); font-weight:600;
  line-height:0.92; letter-spacing:-0.005em; text-wrap:balance;
}
.kicker{
  font-family:var(--font-sans); font-weight:600;
  font-size:clamp(11px,0.86vw,13px); letter-spacing:0.32em;
  text-transform:uppercase; opacity:0.74;
}
.lead{ font-size:clamp(16px,1.4vw,21px); line-height:1.55; max-width:44ch; opacity:0.86; text-wrap:pretty; }
.mono{ font-family:'Space Mono', ui-monospace, monospace; }
h1,h2,h3,h4,p{ margin:0; }

/* ---------- Buttons ---------- */
.btn{
  --bc:var(--ink);
  display:inline-flex; align-items:center; gap:0.7em;
  font-family:var(--font-sans); font-weight:600; font-size:14px; letter-spacing:0.04em;
  padding:1.05em 1.7em; border:1px solid var(--bc); border-radius:100px;
  cursor:pointer; background:transparent; color:var(--bc);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), background .35s ease, color .35s ease, border-color .35s ease;
  white-space:nowrap;
}
.btn .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); transition:transform .4s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn--solid{ background:var(--accent); border-color:var(--accent); color:var(--white); }
.btn--solid .dot{ background:var(--white); }
.btn--solid:hover{ background:color-mix(in oklab, var(--accent) 86%, #000); }
.btn--ghost:hover{ background:var(--ink); color:var(--bg); }
.btn--ghost:hover .dot{ background:var(--accent); }
.btn--lg{ padding:1.2em 2em; font-size:15px; }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
section{ position:relative; }
.eyebrow-row{ display:flex; align-items:center; gap:18px; }
.eyebrow-row .line{ height:1px; flex:1; background:currentColor; opacity:0.22; }

/* ---------- Media placeholders (art-directed color fields) ---------- */
.ph{
  position:relative; overflow:hidden;
  --c1:#0a5e44; --c2:#012a1f;
  background:
    radial-gradient(130% 120% at 28% 6%, color-mix(in oklab, var(--c1) 78%, #fff 10%) 0%, transparent 52%),
    radial-gradient(140% 140% at 88% 96%, color-mix(in oklab, var(--c2) 60%, #000) 0%, transparent 60%),
    linear-gradient(152deg, var(--c1), var(--c2));
  isolation:isolate;
}
.ph::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nc2F0dXJhdGUnIHZhbHVlcz0nMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
  opacity:0.10; mix-blend-mode:overlay;
}
.ph::after{
  content:attr(data-label);
  position:absolute; left:16px; bottom:14px; z-index:3;
  font-family:'Space Mono', monospace; font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:rgba(255,255,255,0.62);
  border:1px solid rgba(255,255,255,0.22); border-radius:100px;
  padding:5px 11px; backdrop-filter:blur(2px);
}
.ph--forest{ --c1:#0a5e44; --c2:#012a1f; }
.ph--rust  { --c1:#c8431f; --c2:#5e1500; }
.ph--orange{ --c1:#e8551f; --c2:#7d2104; }
.ph--maroon{ --c1:#9a2c0e; --c2:#440f02; }
.ph--taupe { --c1:#97825c; --c2:#4d3f27; }
.ph--cream { --c1:#efe4d2; --c2:#cdbd9c; }
.ph--cream.ph::after{ color:rgba(40,25,10,0.6); border-color:rgba(40,25,10,0.2); }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(var(--reveal-y)); transition:opacity var(--reveal-dur) cubic-bezier(.16,1,.3,1), transform var(--reveal-dur) cubic-bezier(.16,1,.3,1); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
html.cd-static .reveal{ transition:none !important; }
[data-motion="off"] .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .ayo__phone img{ animation:none !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================ NAV */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad); color:var(--cream);
  transition:background .5s ease, color .5s ease, padding .5s ease, box-shadow .5s ease;
}
.nav.solid{
  background:color-mix(in oklab, var(--bg) 90%, transparent);
  backdrop-filter:blur(14px) saturate(1.1); color:var(--ink);
  padding-top:12px; padding-bottom:12px;
  box-shadow:0 1px 0 color-mix(in oklab, var(--ink) 12%, transparent);
}
.brand{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.brand__logo{ height:30px; width:auto; }
.brand__logo--teal{ display:none; }
.nav.solid .brand__logo--white{ display:none; }
.nav.solid .brand__logo--teal{ display:block; }
.nav-links{ display:flex; align-items:center; gap:32px; font-size:13px; font-weight:500; letter-spacing:0.05em; }
.nav-links a{ position:relative; opacity:0.9; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0; background:var(--accent); transition:width .35s ease; }
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav .btn{ padding:0.78em 1.3em; font-size:13px; --bc:var(--cream); }
.nav.solid .btn{ --bc:var(--ink); }
.nav.solid .btn--solid{ color:var(--white); border-color:var(--accent); }
@media (max-width:980px){ .nav-links{ display:none; } .nav .btn-explore{ display:none; } }

/* ============================================================ HERO */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; color:var(--cream); }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media .ph{ width:100%; height:100%; }
.hero__photo{ position:absolute; inset:0; background:url('uploads/hero-court.png') center/cover no-repeat; }
.hero__veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(1,28,20,0.60) 0%, rgba(1,28,20,0.80) 36%, rgba(1,28,20,0.66) 54%, rgba(1,28,20,0.90) 100%); }
.hero__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(1,30,24,0.5) 0%, rgba(1,30,24,0.08) 28%, rgba(1,30,24,0.18) 58%, rgba(1,30,24,0.82) 100%); }
.hero__inner{ position:relative; z-index:2; width:100%; padding-block:120px; }
.hero__center{ display:flex; flex-direction:column; align-items:center; gap:clamp(22px,3.4vh,38px); max-width:1080px; margin-inline:auto; }
.hero__kicker{ color:var(--cream); }
.hero-tagline{ width:min(86vw,940px); height:auto; display:block; }
.hero-tagline .cls-1{ fill:var(--cream); }
.hero__lead{ color:var(--cream); opacity:0.92; max-width:52ch; margin-inline:auto; }
.hero__center .btn{ --bc:var(--cream); }
.scroll-cue{ position:absolute; left:50%; transform:translateX(-50%); bottom:26px; z-index:3; display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:0.24em; text-transform:uppercase; opacity:0.7; }
.scroll-cue .bar{ width:46px; height:1px; background:var(--cream); position:relative; overflow:hidden; }
.scroll-cue .bar::after{ content:""; position:absolute; inset:0; background:var(--accent); transform:translateX(-100%); animation:cue 2.6s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes cue{ 0%{transform:translateX(-100%)} 50%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* ============================================================ MARQUEE */
.marquee{ background:var(--forest); color:var(--cream); overflow:hidden; padding:16px 0; border-block:1px solid color-mix(in oklab,var(--cream) 16%,transparent); }
.marquee__row{ display:flex; gap:48px; width:max-content; animation:scrollx 32s linear infinite; }
.marquee[data-motion-stop] .marquee__row,[data-motion="off"] .marquee__row{ animation:none; }
.marquee__row span{ font-family:var(--font-display); font-size:clamp(20px,2.4vw,34px); white-space:nowrap; opacity:0.92; display:flex; align-items:center; gap:48px; }
.marquee__row span::after{ content:"✦"; color:var(--accent); font-size:0.7em; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ============================================================ ECOSYSTEM */
.eco{ padding:clamp(90px,12vh,160px) 0 clamp(70px,9vh,120px); }
.eco__head{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:end; margin-bottom:clamp(50px,7vh,86px); }
.eco__head h2{ font-size:clamp(40px,6.4vw,104px); }
.eco__head .lead{ padding-bottom:8px; }
.eco__rail{ display:flex; gap:clamp(16px,2vw,28px); overflow-x:auto; scroll-snap-type:x mandatory; padding:6px var(--pad) 30px; scrollbar-width:none; }
.eco__rail::-webkit-scrollbar{ display:none; }
.eco-card{ position:relative; flex:0 0 auto; width:clamp(280px,33vw,440px); aspect-ratio:3/4.1; border-radius:8px; overflow:hidden; scroll-snap-align:start; color:var(--cream); }
.eco-card .ph{ position:absolute; inset:0; transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
.eco-card:hover .ph{ transform:scale(1.05); }
.eco-card__image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
.eco-card:hover .eco-card__image{ transform:scale(1.05); }
.eco-card:nth-child(1) .eco-card__image{ object-position:center top; }
.eco-card:nth-child(2) .eco-card__image{ object-position:center center; }
.eco-card:nth-child(3) .eco-card__image{ object-position:center center; }
.eco-card:nth-child(4) .eco-card__image{ object-position:center center; }
.eco-card:nth-child(5) .eco-card__image{ object-position:center center; }
.eco-card__grad{ position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(1,30,24,0) 34%, rgba(1,30,24,0.85) 100%); }
.eco-card__body{ position:absolute; z-index:3; inset:auto 0 0 0; padding:26px; display:flex; align-items:flex-end; justify-content:space-between; }
.eco-card__num{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.2em; opacity:0.75; }
.eco-card__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(26px,2.4vw,40px); line-height:1; margin-top:8px; }
.eco-card__meta{ font-size:12.5px; opacity:0.8; margin-top:7px; }
.eco-card__arrow{ width:42px; height:42px; border:1px solid rgba(255,255,255,.5); border-radius:50%; display:grid; place-items:center; transition:background .35s ease, color .35s ease, border-color .35s ease; flex:0 0 auto; }
.eco-card:hover .eco-card__arrow{ background:var(--accent); border-color:var(--accent); color:var(--white); }
.rail-hint{ display:flex; align-items:center; gap:12px; padding:0 var(--pad); margin-top:4px; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; opacity:0.5; }

/* ============================================================ RETAIL */
.retail{ background:var(--cream); color:var(--forest); padding:clamp(82px,11vh,150px) 0; }
.retail__inner{ display:grid; grid-template-columns:minmax(0,0.95fr) minmax(300px,1.05fr); gap:clamp(34px,6vw,94px); align-items:center; }
.retail__copy h2{ font-size:clamp(44px,6.2vw,108px); line-height:0.94; margin:22px 0 24px; }
.retail__copy h2 em{ font-style:normal; color:var(--rust); }
.retail__copy .lead{ max-width:43ch; opacity:0.78; }
.retail__primary{ margin-top:clamp(30px,4vh,48px); padding-top:24px; border-top:1px solid color-mix(in oklab,var(--forest) 18%,transparent); display:grid; gap:14px; max-width:560px; }
.retail__primary h3{ margin:0; font-family:var(--font-display); font-size:clamp(24px,2.4vw,38px); line-height:1; font-weight:600; overflow-wrap:anywhere; }
.retail__primary p{ margin:0; max-width:46ch; line-height:1.65; opacity:0.74; }
.retail__primary .btn{ justify-self:start; margin-top:6px; }
.retail__visual{ position:relative; min-height:clamp(420px,62vh,680px); border-radius:8px; overflow:hidden; background:var(--forest); }
.retail__visual img{ width:100%; height:100%; min-height:inherit; object-fit:cover; object-position:center center; display:block; transform:scale(1.01); }
.retail__visual::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(1,30,24,0) 42%,rgba(1,30,24,0.86)); }
.retail__tag{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:clamp(22px,3vw,34px); color:var(--cream); display:grid; gap:10px; }
.retail__tag span{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; opacity:0.72; }
.retail__tag b{ font-family:var(--font-display); font-size:clamp(25px,2.7vw,44px); line-height:1; font-weight:600; max-width:12ch; }
.retail__market{ margin-top:clamp(58px,8vh,104px); }
.retail__market-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; padding-bottom:22px; border-bottom:1px solid color-mix(in oklab,var(--forest) 18%,transparent); }
.retail__market-head p{ max-width:52ch; margin:0; opacity:0.72; line-height:1.6; }
.market-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:color-mix(in oklab,var(--forest) 16%,transparent); margin-top:24px; }
.market-card{ min-height:260px; padding:clamp(22px,2.4vw,34px); background:var(--cream); color:var(--forest); display:flex; flex-direction:column; justify-content:space-between; transition:background .3s ease, color .3s ease, transform .3s ease; }
.market-card:hover{ background:var(--forest); color:var(--cream); transform:translateY(-2px); }
.market-card span{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; opacity:0.58; }
.market-card h3{ margin:34px 0 10px; font-family:var(--font-display); font-size:clamp(28px,2.6vw,44px); line-height:1; font-weight:600; }
.market-card p{ margin:0; font-size:13.5px; line-height:1.55; opacity:0.72; }
.market-card b{ margin-top:26px; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; }
.market-card--main{ background:var(--forest); color:var(--cream); }
.market-card--main:hover{ background:var(--rust); }
@media (max-width:980px){
  .retail__inner{ grid-template-columns:1fr; }
  .market-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .retail__market-head{ display:grid; }
  .market-grid{ grid-template-columns:1fr; }
  .market-card{ min-height:210px; }
}

/* ============================================================ DESTINATIONS SPLIT */
.dest{ position:relative; min-height:96svh; display:flex; flex-direction:column; }
.dest__top{ text-align:center; padding:clamp(60px,8vh,110px) var(--pad) clamp(34px,4vh,56px); }
.dest__top h2{ font-size:clamp(34px,5vw,80px); margin-top:14px; }
.dest__split{ flex:1; display:flex; min-height:64svh; }
.dest__half{ position:relative; flex:1; overflow:hidden; display:flex; align-items:flex-end; color:var(--cream); transition:flex .9s cubic-bezier(.16,1,.3,1); cursor:pointer; }
.dest__split:hover .dest__half{ flex:0.78; }
.dest__split .dest__half:hover{ flex:1.6; }
.dest__half .ph{ position:absolute; inset:0; transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.dest__half:hover .ph{ transform:scale(1.06); }
.dest__half .veil{ position:absolute; inset:0; z-index:1; transition:opacity .6s ease; }
.dest__half--sig .veil{ background:linear-gradient(180deg, rgba(2,64,50,0.2) 0%, rgba(2,64,50,0.9) 100%); }
.dest__half--hause .veil{ background:linear-gradient(180deg, rgba(176,36,0,0.18) 0%, rgba(114,24,4,0.92) 100%); }
.dest__half .content{ position:relative; z-index:2; padding:clamp(30px,4vw,64px); width:100%; }
.dest__half .plogo{ height:58px; width:auto; margin-bottom:20px; }
.dest__half h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(30px,3.6vw,64px); line-height:0.96; margin:0 0 16px; }
.dest__half .desc{ max-width:36ch; opacity:0; transform:translateY(14px); transition:opacity .5s ease .05s, transform .5s ease .05s; }
.dest__half:hover .desc{ opacity:0.92; transform:none; }
.dest__half .disc{ display:inline-flex; align-items:center; gap:10px; margin-top:24px; font-weight:600; font-size:13px; letter-spacing:0.04em; border-bottom:1px solid; padding-bottom:4px; }
.dest__half--sig .disc{ color:var(--cream); }
@media (max-width:760px){
  .dest__split{ flex-direction:column; }
  .dest__half, .dest__split:hover .dest__half, .dest__split .dest__half:hover{ flex:1; min-height:56svh; }
  .dest__half .desc{ opacity:0.92; transform:none; }
}

/* ============================================================ DEEP SECTIONS */
.dst{ padding:clamp(90px,13vh,170px) 0; color:var(--cream); position:relative; overflow:hidden; }
.dst--sig{ background:var(--forest); }
.dst--hause{ background:var(--rust); }
.dst__head{ display:grid; grid-template-columns:1fr; gap:22px; max-width:1100px; }
.dst__label{ display:inline-flex; align-items:center; gap:14px; }
.dst__label .pip{ width:9px; height:9px; border-radius:50%; }
.dst--sig .dst__label .pip{ background:var(--cream); }
.dst--hause .dst__label .pip{ background:var(--cream); }
.dst__brandlogo{ height:clamp(64px,7vw,98px); width:auto; margin-bottom:10px; }
.dst h2{ font-size:clamp(44px,7.6vw,140px); line-height:0.94; }
.dst h2 em{ font-style:normal; opacity:0.78; }
.dst__intro{ max-width:48ch; opacity:0.86; margin-top:6px; }

.dst__showcase{ display:grid; grid-template-columns:1.35fr 1fr; grid-template-rows:auto auto; gap:clamp(14px,1.6vw,24px); margin-top:clamp(48px,6vh,84px); }
.dst__feature{ grid-row:span 2; border-radius:8px; overflow:hidden; min-height:clamp(360px,52vh,620px); }
.dst__feature .ph{ width:100%; height:100%; }
.venue-photo{ width:100%; height:100%; object-fit:cover; display:block; }
.dest__half .venue-photo--abs{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.dest__half:hover .venue-photo--abs{ transform:scale(1.06); }
.dst__stack .venue-photo{ min-height:clamp(180px,26vh,300px); }
.venue-gallery{
  --gallery-gap:clamp(14px,1.6vw,22px);
  display:flex; gap:var(--gallery-gap);
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  margin-top:clamp(40px,5vh,72px); padding:4px var(--pad) 22px;
  margin-inline:calc(var(--pad) * -1);
  scrollbar-width:thin; scrollbar-color:color-mix(in oklab,var(--cream) 36%,transparent) transparent;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.venue-gallery::-webkit-scrollbar{ height:8px; }
.venue-gallery::-webkit-scrollbar-track{ background:transparent; }
.venue-gallery::-webkit-scrollbar-thumb{ background:color-mix(in oklab,var(--cream) 34%,transparent); border-radius:999px; }
.vg{ position:relative; flex:0 0 clamp(260px,31vw,430px); margin:0; border-radius:8px; overflow:hidden; aspect-ratio:4/3; scroll-snap-align:start; }
.vg img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s cubic-bezier(.16,1,.3,1); }
.vg:hover img{ transform:scale(1.05); }
.vg figcaption{ position:absolute; left:0; right:0; bottom:0; padding:16px; font-size:12.5px; font-weight:600; letter-spacing:0.04em; color:var(--cream); background:linear-gradient(180deg,transparent,rgba(1,28,20,0.82)); }
@media (max-width:760px){
  .venue-gallery{ -webkit-mask-image:none; mask-image:none; }
  .vg{ flex-basis:min(78vw,320px); }
}
.dst__stack{ border-radius:8px; overflow:hidden; min-height:200px; }
.dst__stack .ph{ width:100%; height:100%; min-height:200px; }

.dst__offers{ margin-top:clamp(54px,7vh,90px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(34px,5vw,88px); row-gap:0; }
.dst__offers-head{ grid-column:1/-1; display:flex; align-items:baseline; justify-content:space-between; gap:20px; border-bottom:1px solid color-mix(in oklab, var(--cream) 34%, transparent); padding-bottom:18px; margin-bottom:8px; }
.dst__offers-head .kicker{ opacity:0.7; }
.offer{
  position:relative; display:grid; grid-template-columns:58px 1fr; align-items:start; gap:10px 22px;
  min-height:136px; padding:26px 0 24px; border-bottom:1px solid color-mix(in oklab, var(--cream) 17%, transparent);
  transition:padding-left .45s cubic-bezier(.16,1,.3,1), border-color .45s ease;
}
.offer::before{
  content:""; position:absolute; left:0; top:0; width:0; height:1px;
  background:var(--cream); transition:width .45s cubic-bezier(.16,1,.3,1);
}
.offer:hover{ padding-left:14px; border-color:color-mix(in oklab, var(--cream) 32%, transparent); }
.offer:hover::before{ width:100%; }
.offer__no{ font-family:'Space Mono',monospace; font-size:12px; opacity:0.52; padding-top:5px; }
.offer__name{ font-family:var(--font-display); font-weight:600; font-size:clamp(22px,2.4vw,38px); line-height:1; }
.offer__desc{ grid-column:2; font-size:13.5px; opacity:0.72; max-width:36ch; justify-self:start; text-align:left; }
@media (max-width:760px){
  .dst__showcase{ grid-template-columns:1fr; }
  .dst__feature{ grid-row:auto; min-height:300px; }
  .dst__offers{ grid-template-columns:1fr; }
  .offer{ grid-template-columns:38px 1fr; min-height:0; }
  .offer__desc{ display:block; }
}
.venue-detail{
  margin-top:clamp(58px,8vh,112px); display:grid; grid-template-columns:1fr;
  gap:clamp(30px,4vw,54px); align-items:start; padding-top:clamp(28px,4vh,52px);
  border-top:1px solid color-mix(in oklab, var(--cream) 26%, transparent);
}
.venue-detail__aside{
  position:static; display:grid; grid-template-columns:minmax(280px,0.72fr) minmax(360px,1fr);
  gap:18px clamp(42px,6vw,96px); align-items:start;
}
.venue-detail__aside > .kicker{ grid-column:1/-1; }
.venue-detail__aside h3{ font-size:clamp(34px,4.8vw,78px); line-height:0.96; }
.venue-detail__aside p{ max-width:42ch; opacity:0.78; font-size:clamp(15px,1.2vw,18px); line-height:1.65; }
.venue-detail__aside .btn{ --bc:var(--cream); justify-self:start; margin-top:4px; }
.venue-facts{
  grid-column:2; grid-row:2 / span 4; display:grid; gap:0; border-top:1px solid color-mix(in oklab, var(--cream) 22%, transparent);
  border-bottom:1px solid color-mix(in oklab, var(--cream) 22%, transparent);
}
.venue-facts > div{ display:grid; grid-template-columns:112px 1fr; gap:18px; padding:16px 0; border-bottom:1px solid color-mix(in oklab, var(--cream) 13%, transparent); }
.venue-facts > div:last-child{ border-bottom:0; }
.venue-facts span{ font-size:11px; text-transform:uppercase; letter-spacing:0.18em; opacity:0.58; }
.venue-facts strong{ font-size:15px; line-height:1.45; font-weight:600; }
.venue-facts .venue-location{ grid-template-columns:1fr; gap:18px; align-items:start; }
.venue-location > span{ display:block; }
.venue-location__list{ display:grid; gap:0; border-top:1px solid color-mix(in oklab, var(--cream) 14%, transparent); }
.venue-location__item{
  display:grid; grid-template-columns:1fr; grid-template-areas:"name" "address" "action";
  align-items:start; gap:8px; padding:18px 0;
  border-bottom:1px solid color-mix(in oklab, var(--cream) 14%, transparent); color:var(--cream);
  transition:padding-left .3s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.venue-location__item:hover{ padding-left:10px; border-color:color-mix(in oklab, var(--cream) 34%, transparent); }
.venue-location__item strong{ grid-area:name; }
.venue-location__item small{ grid-area:address; max-width:40ch; font-size:12.5px; line-height:1.55; opacity:0.72; }
.venue-location__item b{
  grid-area:action; justify-self:start; display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0 14px; margin-top:4px;
  border:1px solid color-mix(in oklab, var(--cream) 36%, transparent); border-radius:999px; font-size:10px;
  letter-spacing:0.14em; text-transform:uppercase; white-space:nowrap;
}
.venue-location__item b span{ font-size:12px; letter-spacing:0; opacity:1; }
.venue-detail__main{ min-width:0; }
.venue-tabs{
  display:flex; gap:8px; overflow-x:auto; padding:4px 0 18px; margin-bottom:18px;
  border-bottom:1px solid color-mix(in oklab, var(--cream) 20%, transparent); scrollbar-width:none;
}
.venue-tabs::-webkit-scrollbar{ display:none; }
.venue-tab{
  appearance:none; border:1px solid color-mix(in oklab, var(--cream) 28%, transparent); color:var(--cream); background:transparent;
  min-height:44px; padding:0 18px; border-radius:999px; font:700 11px/1 var(--font-body);
  letter-spacing:0.16em; text-transform:uppercase; cursor:pointer; transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.venue-tab:hover,.venue-tab:focus-visible{ border-color:var(--cream); outline:none; }
.venue-tab.is-active{ background:var(--cream); color:var(--forest); border-color:var(--cream); }
.dst--hause .venue-tab.is-active{ color:var(--rust); }
.venue-panel{ animation:panel-in .32s ease both; }
@keyframes panel-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.detail-metrics{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:color-mix(in oklab, var(--cream) 16%, transparent); }
.detail-metrics div{ min-height:210px; padding:clamp(20px,2.4vw,34px); background:color-mix(in oklab, currentColor 7%, transparent); }
.detail-metrics span{ display:block; font-family:'Space Mono',monospace; font-size:12px; opacity:0.58; margin-bottom:42px; }
.detail-metrics strong{ display:block; font-family:var(--font-display); font-size:clamp(25px,2.5vw,40px); line-height:1; font-weight:600; }
.detail-metrics p{ margin-top:14px; font-size:13.5px; line-height:1.55; opacity:0.7; max-width:25ch; }
.detail-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(28px,4vw,64px); }
.detail-list article{ display:grid; grid-template-columns:42px 1fr; gap:8px 18px; padding:24px 0; border-bottom:1px solid color-mix(in oklab, var(--cream) 16%, transparent); }
.detail-list article > span{ font-family:'Space Mono',monospace; font-size:12px; opacity:0.48; padding-top:4px; }
.detail-list h4{ margin:0; font-family:var(--font-display); font-size:clamp(23px,2vw,34px); line-height:1; font-weight:600; }
.detail-list p{ grid-column:2; margin:0; max-width:42ch; font-size:13.5px; line-height:1.58; opacity:0.72; }
.facility-columns{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,5vw,76px); }
.facility-columns h4{ margin:0 0 18px; font-family:var(--font-display); font-size:clamp(28px,2.6vw,42px); font-weight:600; line-height:1; }
.facility-columns ul{ list-style:none; padding:0; margin:0; display:grid; gap:0; border-top:1px solid color-mix(in oklab, var(--cream) 18%, transparent); }
.facility-columns li{ min-height:44px; display:flex; align-items:center; padding:11px 0; border-bottom:1px solid color-mix(in oklab, var(--cream) 13%, transparent); font-size:15px; opacity:0.82; }
@media (max-width:920px){
  .venue-detail{ grid-template-columns:1fr; }
  .venue-detail__aside{ grid-template-columns:1fr; }
  .venue-detail__aside > .kicker,.venue-facts{ grid-column:auto; grid-row:auto; }
  .detail-metrics{ grid-template-columns:1fr; }
  .detail-metrics div{ min-height:0; }
  .detail-metrics span{ margin-bottom:24px; }
}
@media (max-width:760px){
  .venue-facts > div{ grid-template-columns:1fr; gap:7px; }
  .detail-list,.facility-columns{ grid-template-columns:1fr; }
  .detail-list article{ grid-template-columns:34px 1fr; }
  .venue-tab{ flex:0 0 auto; }
}
.hause-collage{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(70px,9vw,128px); gap:clamp(12px,1.4vw,20px); margin-top:clamp(48px,6vh,84px); }
.hause-collage .ph{ border-radius:8px; }
.hc-a{ grid-column:1/7; grid-row:1/4; } .hc-b{ grid-column:7/13; grid-row:1/3; }
.hc-c{ grid-column:7/10; grid-row:3/5; } .hc-d{ grid-column:10/13; grid-row:3/5; }
.hc-e{ grid-column:1/4; grid-row:4/6; } .hc-f{ grid-column:4/7; grid-row:4/6; }
@media (max-width:760px){
  .hause-collage{ grid-auto-rows:120px; }
  .hc-a{ grid-column:1/13; grid-row:auto; }
  .hc-b,.hc-c,.hc-d,.hc-e,.hc-f{ grid-column:span 6; grid-row:auto; }
}

/* ---------- Instagram strip inside deep sections ---------- */
.igstrip{ margin-top:clamp(48px,6vh,80px); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; padding:22px clamp(18px,2.4vw,30px); border:1px solid color-mix(in oklab,var(--cream) 24%,transparent); border-radius:14px; }
.igstrip__id{ display:flex; align-items:center; gap:14px; }
.igstrip__handle b{ font-family:var(--font-display); font-size:clamp(18px,1.8vw,26px); display:block; line-height:1; }
.igstrip__handle span{ font-size:12px; opacity:0.7; letter-spacing:0.04em; }
.igstrip__thumbs{ display:flex; gap:10px; }
.igstrip__thumbs .ph{ width:clamp(58px,7vw,92px); aspect-ratio:1; border-radius:8px; }
.igstrip .btn{ --bc:var(--cream); }
@media (max-width:860px){ .igstrip{ grid-template-columns:1fr; gap:18px; text-align:left; } .igstrip__thumbs{ flex-wrap:wrap; } }

/* ============================================================ SOCIAL / INSTAGRAM (Court Dept main) */
.social{ padding:clamp(80px,11vh,150px) 0; background:var(--cream); }
.social__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:clamp(36px,4.5vh,60px); }
.social__head h2{ font-size:clamp(38px,5.6vw,92px); margin-top:14px; }
.ig-profile{ display:flex; align-items:center; gap:18px; padding:20px 24px; border:1px solid var(--line); border-radius:16px; background:var(--white); box-shadow:0 18px 40px -28px rgba(2,64,50,0.4); }
.ig-profile__avatar{ width:60px; height:60px; border-radius:50%; padding:3px; background:conic-gradient(from 210deg, var(--orange), var(--rust), var(--maroon), var(--orange)); flex:0 0 auto; display:grid; place-items:center; }
.ig-profile__avatar img{ width:100%; height:100%; border-radius:50%; background:var(--forest); padding:8px; object-fit:contain; }
.ig-profile__meta b{ font-family:var(--font-display); font-size:20px; line-height:1; display:block; }
.ig-profile__meta span{ font-size:12.5px; opacity:0.7; }
.ig-profile__stats{ display:flex; gap:22px; margin-top:8px; font-size:12.5px; }
.ig-profile__stats b{ font-family:var(--font-sans); font-size:14px; }
.ig-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,18px); }
.ig-post{ position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; display:block; }
.ig-post .ph{ position:absolute; inset:0; transition:transform 1s cubic-bezier(.16,1,.3,1); }
.ig-post:hover .ph{ transform:scale(1.06); }
.ig-post__hover{ position:absolute; inset:0; z-index:4; display:grid; place-items:center; background:color-mix(in oklab,var(--forest) 70%,transparent); opacity:0; transition:opacity .35s ease; color:var(--cream); font-size:13px; font-weight:600; letter-spacing:0.04em; }
.ig-post:hover .ig-post__hover{ opacity:1; }
@media (max-width:860px){ .ig-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================ AYO BOOKING CTA */
.ayo{ background:var(--forest); color:var(--cream); padding:clamp(80px,11vh,150px) 0; position:relative; overflow:hidden; }
.ayo__inner{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(40px,5vw,90px); align-items:center; }
.ayo__copy h2{ font-size:clamp(40px,5.6vw,96px); line-height:0.95; margin:18px 0 22px; }
.ayo__copy h2 em{ font-style:normal; color:var(--orange); }
.ayo__copy .lead{ opacity:0.86; max-width:42ch; }
.ayo__app{ display:flex; align-items:center; gap:18px; margin:30px 0 26px; }
.ayo__icon{ width:80px; height:80px; border-radius:20px; flex:0 0 auto; object-fit:cover; box-shadow:0 16px 38px -16px rgba(0,0,0,0.55); }
.ayo__appmeta b{ font-family:var(--font-display); font-size:22px; display:block; line-height:1; }
.ayo__appmeta span{ font-size:13px; opacity:0.74; }
.ayo__appmeta .stars{ color:var(--orange); letter-spacing:2px; font-size:13px; }
.stores{ display:flex; gap:14px; flex-wrap:wrap; }
.store-badge{ display:inline-block; border-radius:12px; transition:transform .3s ease, opacity .3s ease; }
.store-badge img{ height:52px; width:auto; display:block; }
.store-badge:hover{ transform:translateY(-2px); opacity:0.88; }
.ayo__panel{ position:relative; }
.ayo__phone{ aspect-ratio:9/16; border-radius:30px; overflow:hidden; border:8px solid #06241b; box-shadow:0 40px 80px -40px rgba(0,0,0,0.7); max-width:300px; margin-inline:auto; }
.ayo__phone .ph{ width:100%; height:100%; }
.ayo__phone img{ width:100%; min-height:100%; height:auto; display:block; animation:phone-screen-drift 14s ease-in-out infinite alternate; will-change:transform; }
.ayo__phone:hover img{ animation-play-state:paused; }
@keyframes phone-screen-drift{
  0%, 14%{ transform:translate3d(0,0,0); }
  86%, 100%{ transform:translate3d(0,-18%,0); }
}
.ayo__steps{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px; max-width:300px; margin-inline:auto; }
.ayo__steps li{ display:flex; gap:14px; align-items:center; font-size:14px; }
.ayo__steps i{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:12px; font-family:'Space Mono',monospace; border:1px solid color-mix(in oklab,var(--cream) 40%,transparent); flex:0 0 auto; }
@media (max-width:880px){ .ayo__inner{ grid-template-columns:1fr; } .ayo__panel{ order:-1; } }

/* ============================================================ FINAL + FOOTER */
.final{ position:relative; min-height:90svh; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--cream); overflow:hidden; }
.final__media{ position:absolute; inset:-10% 0; z-index:0; }
.final__media .ph{ width:100%; height:100%; }
.final__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(1,30,24,0.6), rgba(1,30,24,0.4) 50%, rgba(1,30,24,0.75)); }
.final__inner{ position:relative; z-index:2; padding:120px var(--pad); }
.final h2{ font-size:clamp(44px,8vw,140px); line-height:1.0; margin-bottom:clamp(36px,5vh,52px); text-wrap:balance; }
.final h2 em{ font-style:normal; color:var(--accent); }
.final__ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.final .btn{ --bc:var(--cream); }

.footer{ background:var(--forest); color:var(--cream); padding:clamp(60px,8vh,100px) 0 40px; }
.footer__lead{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; padding-bottom:46px; }
.footer__lead .brand__logo{ height:38px; }
.footer__tag{ font-size:clamp(24px,3vw,44px); }
.footer-tagline{ width:min(440px,74vw); height:auto; display:block; }
.footer-tagline .cls-1{ fill:var(--cream); }
.footer__tag em{ font-style:normal; color:var(--orange); }
.footer__grid{ display:grid; grid-template-columns:repeat(3,minmax(190px,1.25fr)) minmax(150px,0.9fr) minmax(150px,0.9fr) minmax(190px,1.15fr); gap:clamp(20px,2.2vw,36px); padding-block:48px; border-top:1px solid color-mix(in oklab, var(--cream) 18%, transparent); border-bottom:1px solid color-mix(in oklab, var(--cream) 18%, transparent); }
.footer__loc h4, .footer__col h4, .footer__app h4{ font-size:12px; letter-spacing:0.2em; text-transform:uppercase; opacity:0.6; margin-bottom:16px; font-weight:600; }
.footer__loc{ min-width:0; }
.footer__loc p{ font-size:14px; opacity:0.84; line-height:1.6; }
.footer__hours{ margin-top:8px; opacity:0.6 !important; font-size:12.5px !important; }
.footer__dir{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; margin-top:16px; padding:0 15px;
  border:1px solid color-mix(in oklab,var(--cream) 34%,transparent); border-radius:999px; font-size:11px; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.footer__dir span{ font-size:13px; line-height:1; }
.footer__dir:hover{ background:var(--cream); color:var(--forest); border-color:var(--cream); transform:translateY(-1px); }
.footer__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; font-size:14px; }
.footer__col a{ opacity:0.85; } .footer__col a:hover{ opacity:1; color:var(--orange); }
.footer__store{ display:flex; gap:12px; flex-wrap:wrap; }
.footer__store .store-badge img{ height:46px; }
.footer__social{ display:flex; gap:16px; margin-top:16px; font-size:13px; }
.footer__social a{ opacity:0.85; } .footer__social a:hover{ opacity:1; color:var(--orange); }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:26px; font-size:12px; opacity:0.6; flex-wrap:wrap; letter-spacing:0.03em; }
@media (max-width:1180px){ .footer__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:980px){ .footer__grid{ grid-template-columns:1fr 1fr; } .eco__head{ grid-template-columns:1fr; } .ig-profile{ width:100%; } }