/* ============================================================
   MUR MUR Warsaw — food, wine and feelings
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --black:#000000;
  --ink:#111111;
  --ink-2:#1a1a1a;
  --ink-3:#242424;
  --ink-4:#2e2e2e;
  --shadow-warm:#403939;

  --white:#ffffff;
  --muted:#adadad;
  --muted-dim:#7d7d7d;

  --amber:#da985a;
  --amber-hot:#ffa11b;

  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);

  --shell:1100px;
  --gut:clamp(18px,4vw,32px);

  --hd:64px;          /* header height */
  --mb:108px;         /* sticky menubar height (mobile default) */
  --tab:64px;         /* mobile bottom bar */

  --r-s:10px;
  --r-m:16px;
  --r-l:22px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  /* wordmark: rounded geometric sans, matching the MUR MUR logo */
  --font-brand:"Quicksand",-apple-system,"Segoe UI",Roboto,sans-serif;

  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

@media (min-width:900px){
  :root{ --hd:72px; --mb:68px; --tab:0px; }
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--black);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:"Urbanist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  color:var(--white);
  background:var(--black);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom,0px));
}
body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

h1,h2,h3,h4,p,figure,dl,dd,blockquote{ margin:0; }

::selection{ background:rgba(255,161,27,.28); }

:focus-visible{
  outline:2px solid var(--amber-hot);
  outline-offset:3px;
  border-radius:4px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--amber-hot); color:#160e02; padding:10px 16px;
  border-radius:999px; font-weight:600;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:14px; }

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* ---------- buttons ---------- */
.btn{
  --bg:transparent; --fg:var(--white); --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 20px;
  border-radius:999px;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd);
  font-size:14px; font-weight:600; letter-spacing:.02em;
  line-height:1.1; text-align:center; white-space:nowrap;
  transition:transform .35s var(--ease), background-color .35s var(--ease),
             border-color .35s var(--ease), color .35s var(--ease),
             box-shadow .35s var(--ease);
}
.btn--lg{ min-height:52px; padding:0 28px; font-size:15px; }

.btn--amber{ --bg:var(--amber-hot); --fg:#170d01; box-shadow:0 10px 34px -16px rgba(255,161,27,.9); }
.btn--ghost{ --bd:rgba(255,255,255,.34); --fg:var(--white); backdrop-filter:blur(6px); }
.btn--line{ --bd:var(--line); --fg:var(--muted); background:rgba(255,255,255,.02); }

@media (hover:hover){
  .btn:hover{ transform:translateY(-2px); }
  .btn--amber:hover{ --bg:#ffb144; box-shadow:0 16px 42px -16px rgba(255,161,27,1); }
  .btn--ghost:hover{ --bd:rgba(255,255,255,.7); background:rgba(255,255,255,.06); }
  .btn--line:hover{ --bd:rgba(218,152,90,.6); --fg:var(--white); }
}
.btn:active{ transform:translateY(0); }

.icon-btn{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:999px; border:1px solid var(--line);
  color:var(--muted);
  transition:color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.icon-btn svg{ width:18px; height:18px; }
@media (hover:hover){ .icon-btn:hover{ color:var(--white); border-color:rgba(218,152,90,.6); background:rgba(255,255,255,.04); } }

svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* ============================================================
   PROCEDURAL PHOTO LAYERS (.ph)
   Drop a real photo in assets/img/<name>.jpg — app.js swaps it in
   automatically via the data-src attribute. Until then these render
   as warm, dark, restaurant-ish atmosphere layers.
   ============================================================ */
.ph{
  position:relative;
  display:block;            /* used on <span> too — inline would drop the size */
  width:100%; height:100%;
  background-color:#0c0a09;
  background-size:cover;
  background-position:center;
  overflow:hidden;
  isolation:isolate;
}
.ph::before{
  content:""; position:absolute; inset:-2%;
  background-image:var(--ph);
  background-size:cover;
  box-shadow:inset 0 0 70px 14px rgba(0,0,0,.55);
  opacity:1;
  transition:opacity .6s var(--ease);
}
.ph::after{
  content:""; position:absolute; inset:0;
  background-image:var(--noise);
  opacity:.10; mix-blend-mode:overlay; pointer-events:none;
}
/* photo grade — pulls every shot towards the warm brown of the room
   (and of the Instagram feed). Tune these four values in one place. */
/* Fitted against the murmur.warsaw feed: sampled 12 posts, then solved for
   the grade whose shadows/mids land on theirs. Their frames read
   avg ≈ 62,26,14 · shadows ≈ 40,15,7 · highlights near-neutral. */
:root{
  --grade-sepia:.30;
  --grade-sat:.78;
  --grade-bright:.76;
  --grade-contrast:1.20;
  --grade-hue:0deg;
  --grade-tint:rgba(114,50,16,.55);   /* burnt sienna, overlay-blended */
  --grade-glow:rgba(255,170,80,.05);
}
.ph.has-photo{
  filter:sepia(var(--grade-sepia)) saturate(var(--grade-sat))
         brightness(var(--grade-bright)) contrast(var(--grade-contrast))
         hue-rotate(var(--grade-hue));
}
/* overlay warms the shadows and mids hard while leaving highlights clean —
   the split the Instagram feed has: brown darks, near-neutral whites */
.ph.has-photo::before{
  opacity:1;
  background-image:none;
  background-color:var(--grade-tint);
  mix-blend-mode:overlay;
  box-shadow:inset 0 0 70px 14px rgba(0,0,0,.34);
}
/* a low amber wash on top, so candle light still reads as light */
.ph.has-photo::after{
  background-image:var(--noise);
  background-color:var(--grade-glow);
  mix-blend-mode:soft-light;
  opacity:.6;
}
/* the wordmark plate stays neutral — a graded logo reads dirty */
.hero__media--brand.has-photo{ filter:none; }
.hero__media--brand.has-photo::before{ background-color:transparent; box-shadow:none; }

.ph--interior{ --ph:
  radial-gradient(70% 55% at 22% 18%, rgba(255,161,27,.30), transparent 62%),
  radial-gradient(50% 45% at 78% 30%, rgba(218,152,90,.20), transparent 70%),
  radial-gradient(80% 60% at 50% 110%, rgba(64,57,57,.65), transparent 70%),
  repeating-linear-gradient(96deg, rgba(255,255,255,.030) 0 2px, transparent 2px 44px),
  linear-gradient(165deg,#1a1512 0%,#0d0b0a 55%,#050505 100%); }

.ph--bar{ --ph:
  radial-gradient(45% 38% at 26% 22%, rgba(255,161,27,.40), transparent 68%),
  radial-gradient(38% 30% at 72% 16%, rgba(218,152,90,.26), transparent 70%),
  repeating-linear-gradient(90deg, rgba(255,214,160,.10) 0 3px, transparent 3px 26px),
  linear-gradient(180deg,#221a13 0%,#100c0a 60%,#070606 100%); }

.ph--candles{ --ph:
  radial-gradient(24% 20% at 30% 62%, rgba(255,161,27,.60), transparent 70%),
  radial-gradient(18% 16% at 58% 48%, rgba(255,178,64,.44), transparent 72%),
  radial-gradient(30% 26% at 82% 70%, rgba(218,152,90,.26), transparent 74%),
  linear-gradient(180deg,#0d0a09 0%,#191110 58%,#070505 100%); }

.ph--wine{ --ph:
  radial-gradient(38% 46% at 34% 40%, rgba(150,32,44,.55), transparent 66%),
  radial-gradient(26% 30% at 66% 58%, rgba(255,161,27,.26), transparent 72%),
  repeating-linear-gradient(78deg, rgba(255,255,255,.05) 0 1px, transparent 1px 30px),
  linear-gradient(160deg,#150d0e 0%,#0b0708 60%,#050404 100%); }

.ph--cocktail{ --ph:
  radial-gradient(34% 34% at 50% 34%, rgba(255,161,27,.44), transparent 68%),
  radial-gradient(24% 40% at 26% 74%, rgba(218,152,90,.24), transparent 72%),
  conic-gradient(from 210deg at 50% 46%, rgba(255,255,255,.09), transparent 28%, rgba(255,255,255,.05) 60%, transparent 86%),
  linear-gradient(180deg,#191310 0%,#0a0808 70%); }

.ph--marble{ --ph:
  radial-gradient(60% 50% at 30% 25%, rgba(255,161,27,.16), transparent 70%),
  repeating-linear-gradient(118deg, rgba(255,255,255,.075) 0 1px, transparent 1px 9px),
  repeating-linear-gradient(64deg, rgba(255,255,255,.045) 0 1px, transparent 1px 23px),
  linear-gradient(150deg,#2a2624 0%,#1a1716 55%,#100e0d 100%); }

.ph--plate{ --ph:
  radial-gradient(30% 30% at 50% 48%, rgba(255,255,255,.20), rgba(255,255,255,.06) 58%, transparent 62%),
  radial-gradient(60% 60% at 50% 120%, rgba(64,57,57,.7), transparent 70%),
  radial-gradient(50% 40% at 20% 10%, rgba(255,161,27,.24), transparent 70%),
  linear-gradient(165deg,#1c1715 0%,#0c0a09 70%); }

.ph--breakfast{ --ph:
  radial-gradient(60% 50% at 70% 14%, rgba(255,196,110,.34), transparent 66%),
  radial-gradient(30% 26% at 34% 56%, rgba(255,255,255,.16), transparent 70%),
  linear-gradient(170deg,#241d17 0%,#120e0c 62%,#080707 100%); }

.ph--chairs{ --ph:
  radial-gradient(46% 40% at 28% 60%, rgba(150,32,44,.50), transparent 70%),
  radial-gradient(30% 28% at 74% 26%, rgba(255,161,27,.28), transparent 72%),
  linear-gradient(160deg,#1a1211 0%,#0b0808 70%); }

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:90;
  height:var(--hd);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .5s var(--ease), border-color .5s var(--ease),
             backdrop-filter .5s var(--ease), height .5s var(--ease);
}
.hdr__inner{
  height:100%;
  display:flex; align-items:center; gap:20px;
  max-width:min(1320px,100%);
}
.hdr.is-stuck{
  background:rgba(10,9,9,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-soft);
}

.brand{ display:grid; line-height:1.05; margin-right:auto; }
/* the real wordmark: white on black, so `screen` drops the black ground */
.brand__logo{
  width:auto; height:22px;
  margin-bottom:2px;
}
.brand__sub{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-dim); }

.nav{ display:none; gap:26px; font-size:14px; color:var(--muted); }
.nav a{ position:relative; padding:6px 0; transition:color .3s var(--ease); }
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--amber); transition:right .4s var(--ease);
}
.nav a:hover,.nav a.is-active{ color:var(--white); }
.nav a.is-active::after,.nav a:hover::after{ right:0; }

.hdr__actions{ display:flex; align-items:center; gap:12px; }
.hdr__hours{ display:none; font-size:12px; letter-spacing:.12em; color:var(--muted-dim); }
.hdr__actions .btn--amber{ display:none; }

@media (min-width:900px){
  .nav{ display:flex; }
  .hdr__hours{ display:inline; }
  .hdr__actions .btn--amber{ display:inline-flex; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid; place-items:center;
  padding-block:calc(var(--hd) + 48px) clamp(56px,10vh,104px);
  overflow:hidden;
  text-align:center;
}

/* the room itself, pushed far back: dark, soft, barely moving.
   Needs to out-specify the shared .ph.has-photo grade, hence the
   doubled class — the hero photo is atmosphere, not a picture. */
.hero__media{
  position:absolute; inset:-4%; z-index:0;
  transform:scale(1.06);
  animation:breathe 42s ease-in-out infinite alternate;
}
.hero__media.has-photo{
  filter:sepia(var(--grade-sepia)) saturate(.80)
         brightness(.60) contrast(1.12) blur(2px);
}
@keyframes breathe{ from{ transform:scale(1.06) translate3d(0,0,0);} to{ transform:scale(1.13) translate3d(0,-1.2%,0);} }

/* candle glow, amber lamps, a wine-red pool low on the right */
.hero__glow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(40% 32% at 16% 24%, rgba(255,161,27,.34), transparent 70%),
    radial-gradient(28% 24% at 78% 30%, rgba(218,152,90,.27), transparent 72%),
    radial-gradient(32% 28% at 68% 84%, rgba(150,32,44,.30), transparent 74%),
    radial-gradient(24% 20% at 32% 78%, rgba(255,178,64,.24), transparent 76%),
    /* edge lift: amber down the left wall, wine down the right */
    linear-gradient(90deg, rgba(255,161,27,.16) 0%, transparent 26%),
    linear-gradient(270deg, rgba(150,32,44,.18) 0%, transparent 26%);
  mix-blend-mode:screen;
  animation:emberDrift 38s ease-in-out infinite alternate;
}
@keyframes emberDrift{
  from{ opacity:.75; transform:translate3d(-1.2%,.8%,0) scale(1.02); }
  to  { opacity:1;   transform:translate3d(1.2%,-.8%,0) scale(1.06); }
}

/* keeps the middle dark enough for the wordmark, and lands the section on black */
.hero__scrim{
  position:absolute; inset:0; z-index:2;
  background:
    /* dark bed under the wordmark */
    radial-gradient(44% 32% at 50% 44%, rgba(0,0,0,.70), rgba(0,0,0,.24) 64%, transparent 80%),
    /* and less of it towards the edges, so the room shows at the sides */
    radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,.34) 0%, rgba(0,0,0,.10) 46%, transparent 72%),
    linear-gradient(180deg, rgba(0,0,0,.54) 0%, rgba(0,0,0,.04) 30%, rgba(0,0,0,.46) 74%, #000 100%);
}

.hero__body{ position:relative; z-index:3; display:grid; justify-items:center; }
.hero__eyebrow{
  font-size:11px; letter-spacing:.30em; text-transform:uppercase;
  color:var(--amber); margin-bottom:18px;
}
.hero__meta{
  margin-top:22px;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted-dim);
}
.hero__title{ margin:0 0 16px; }
.hero__logo{
  width:clamp(240px, 40vw, 620px); height:auto;
  filter:drop-shadow(0 18px 60px rgba(0,0,0,.75));
  animation:logoIn 1.1s var(--ease) .15s both;
}
@keyframes logoIn{
  from{ opacity:0; transform:translateY(14px); clip-path:inset(0 100% 0 0); }
  to  { opacity:1; transform:none;            clip-path:inset(0 0 0 0); }
}
.hero__title .ltr{
  display:inline-block;
  opacity:0; transform:translateY(.34em);
  animation:ltrIn .9s var(--ease) forwards;
}
.hero__title .ltr--sp{ width:.34em; }
@keyframes ltrIn{ to{ opacity:1; transform:none; } }

.hero__tag{
  font-size:clamp(16px,2.3vw,21px);
  color:var(--muted); letter-spacing:.02em; margin-bottom:clamp(24px,4vh,38px);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

.hero__scroll{
  position:absolute; left:50%; bottom:22px; z-index:2;
  width:1px; height:46px; translate:-50% 0;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.35));
  overflow:hidden;
}
.hero__scroll span{
  position:absolute; inset:0; background:var(--amber);
  animation:trickle 2.8s var(--ease-soft) infinite;
}
@keyframes trickle{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(100%);} }

/* ============================================================
   QUICK INFO STRIP
   ============================================================ */
.quick{
  background:var(--ink);
  border-block:1px solid var(--line-soft);
  position:relative; z-index:3;
}
.quick__grid{
  display:grid; gap:20px 32px;
  grid-template-columns:1fr;
  padding-block:26px;
}
.quick__cell{ display:grid; gap:4px; min-width:0; }
.quick__k{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-dim); }
.quick__v{ font-size:15px; color:var(--white); overflow-wrap:anywhere; }
a.quick__v{ transition:color .3s var(--ease); }
a.quick__v:hover{ color:var(--amber-hot); }
.quick__cell--act{ display:flex; flex-wrap:wrap; gap:10px; align-content:center; }

/* wi-fi — one tap to copy */
.quick__wifi{
  display:inline-flex; align-items:center; gap:8px;
  padding:0; text-align:left; color:var(--white);
  transition:color .3s var(--ease);
}
.quick__wifi svg{ width:16px; height:16px; color:var(--amber); flex:none; }
.quick__copy,.wifi-line em{
  font-style:normal; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-dim); border:1px solid var(--line); border-radius:999px;
  padding:2px 7px; transition:color .3s var(--ease), border-color .3s var(--ease);
}
.quick__wifi.is-copied,.wifi-line.is-copied{ color:var(--amber-hot); }
.quick__wifi.is-copied .quick__copy,.wifi-line.is-copied em{ color:var(--amber-hot); border-color:rgba(255,161,27,.5); }
.wifi-line{ display:inline-flex; align-items:center; gap:9px; font-size:16px; color:inherit; }
@media (hover:hover){
  .quick__wifi:hover,.wifi-line:hover{ color:var(--amber-hot); }
  .quick__wifi:hover .quick__copy,.wifi-line:hover em{ color:var(--amber); border-color:rgba(218,152,90,.55); }
}

@media (min-width:700px){
  .quick__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; }
  .quick__cell--act{ grid-column:1/-1; }
}
@media (min-width:1000px){
  .quick__grid{ grid-template-columns:1.35fr .8fr .9fr 1.1fr; padding-block:22px; }
  .quick__cell--act{ grid-column:1/-1; justify-content:flex-start; }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.sect{ padding-block:clamp(64px,10vw,120px); position:relative; z-index:2; }
.sect--tight{ padding-block:clamp(40px,6vw,64px); }
.sect--menu{ padding-bottom:clamp(48px,7vw,90px); }

.sect__head{ margin-bottom:clamp(28px,4vw,48px); }
.sect__title{
  font-size:clamp(30px,5.2vw,54px);
  font-weight:600; line-height:1.08; letter-spacing:-.01em;
}
.sect__title em{ font-style:normal; color:var(--amber); }
.sect__note{ margin-top:12px; color:var(--muted); font-size:15px; max-width:52ch; }

.sect__head--row{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px;
}
.sect__head--row .sect__note{ margin-top:0; }

/* ---------- reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(18px); }
[data-reveal].in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}

/* ============================================================
   ATMOSPHERE GRID
   ============================================================ */
.atmo{
  display:grid; gap:12px;
  grid-template-columns:1fr;
}
.atmo__tile{
  position:relative; overflow:hidden;
  border-radius:var(--r-m);
  aspect-ratio:4/3;
  border:1px solid var(--line-soft);
}
.atmo__tile .ph{
  position:absolute; inset:-6% 0; height:112%;
  transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1));
}
.atmo__tile figcaption{
  position:absolute; left:16px; bottom:14px; right:16px; z-index:2;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--white);
  text-shadow:0 2px 18px rgba(0,0,0,.75);
}
.atmo__tile::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.62) 100%);
}
@media (min-width:700px){
  .atmo{
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:clamp(150px,15.5vw,215px);
    grid-template-areas:
      "a a b c"
      "a a d d";
  }
  .atmo__tile{ aspect-ratio:auto; }
  .atmo__tile--tall{ grid-area:a; }
  .atmo__tile:nth-of-type(2){ grid-area:b; }
  .atmo__tile:nth-of-type(3){ grid-area:c; }
  .atmo__tile--wide{ grid-area:d; }
}
@media (hover:hover){
  .atmo__tile{ transition:transform .6s var(--ease), border-color .6s var(--ease); }
  .atmo__tile:hover{ transform:translateY(-4px); border-color:rgba(218,152,90,.35); }
  .atmo__tile .ph{ transition:transform 1.1s var(--ease); }
  .atmo__tile:hover .ph{ --ps:1.05; }
}

/* ============================================================
   STICKY MENU BAR + CHIPS
   ============================================================ */
.menubar{
  position:sticky; top:var(--hd); z-index:70;
  background:rgba(9,8,8,.82);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-block:1px solid var(--line-soft);
  margin-bottom:clamp(20px,3vw,34px);
}
.menubar__inner{
  display:grid; gap:10px;
  padding-block:10px;
}
.menubar__search{
  display:flex; align-items:center; gap:10px;
  width:100%; min-height:42px; padding:0 14px;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.035);
  color:var(--muted); font-size:14px; text-align:left;
  transition:border-color .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}
.menubar__search svg{ width:17px; height:17px; flex:none; }
.menubar__search span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menubar__search kbd{
  display:none; font-size:11px; letter-spacing:.06em; color:var(--muted-dim);
  border:1px solid var(--line); border-radius:6px; padding:2px 6px;
}
@media (hover:hover){
  .menubar__search:hover{ border-color:rgba(218,152,90,.55); color:var(--white); background:rgba(255,255,255,.06); }
}

.chips{
  display:flex; gap:8px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  margin-inline:calc(var(--gut) * -1);
  padding-inline:var(--gut);
  padding-block:2px;
}
.chips::-webkit-scrollbar{ display:none; }

.chip{
  flex:none; scroll-snap-align:start;
  min-height:36px; padding:0 15px;
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.025);
  color:var(--muted); font-size:13px; font-weight:500; white-space:nowrap;
  transition:color .3s var(--ease), border-color .3s var(--ease),
             background-color .3s var(--ease), box-shadow .45s var(--ease);
}
.chip small{ color:var(--muted-dim); font-size:11px; letter-spacing:.06em; }
.chip.is-active{
  color:#180f03;
  background:var(--amber-hot);
  border-color:transparent;
  box-shadow:0 0 0 1px rgba(255,161,27,.35), 0 8px 30px -12px rgba(255,161,27,.95);
}
.chip.is-active small{ color:rgba(24,15,3,.62); }
@media (hover:hover){
  .chip:not(.is-active):hover{ color:var(--white); border-color:rgba(218,152,90,.55); background:rgba(255,255,255,.06); }
}

@media (min-width:900px){
  .menubar__inner{
    grid-template-columns:minmax(0,1fr) 300px;
    align-items:center; gap:18px; padding-block:12px;
  }
  .menubar__search{ order:2; }
  .menubar__search kbd{ display:inline-block; }
  .chips{ order:1; margin-inline:0; padding-inline:0; }
}

/* ============================================================
   MENU ACCORDION
   ============================================================ */
/* the browser's own scroll anchoring fights the accordion: it re-pins the
   viewport while panels collapse and cancels programmatic scrolls mid-flight.
   The jump logic in app.js does this compensation deliberately instead. */
.menu, .cat, .cat__panel, .cat__panelin{ overflow-anchor:none; }

.menu{ display:grid; gap:10px; }

.cat{
  border:1px solid var(--line-soft);
  border-radius:var(--r-m);
  background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0));
  scroll-margin-top:calc(var(--hd) + var(--mb) + 14px);
  transition:border-color .5s var(--ease), background-color .5s var(--ease);
}
.cat.is-current{ border-color:rgba(218,152,90,.34); }

.cat__head{
  width:100%;
  display:flex; align-items:center; gap:14px;
  padding:18px clamp(16px,2.6vw,24px);
  text-align:left;
}
.cat__idx{
  font-size:11px; letter-spacing:.16em; color:var(--muted-dim);
  min-width:22px;
}
.cat__names{ display:grid; gap:2px; min-width:0; flex:1; }
.cat__pl{ font-size:clamp(18px,2.6vw,24px); font-weight:600; line-height:1.15; }
.cat__en{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-dim); }
.cat.is-current .cat__en{ color:var(--amber); }

.cat__count{ font-size:12px; color:var(--muted-dim); white-space:nowrap; }
.cat__toggle{
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  border-radius:999px; border:1px solid var(--line); color:var(--muted);
  transition:transform .45s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.cat__toggle svg{ width:14px; height:14px; }
.cat[aria-expanded="true"] .cat__toggle,
.cat.is-open .cat__toggle{ transform:rotate(180deg); color:var(--amber); border-color:rgba(218,152,90,.5); }

.cat__panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease);
}
/* used while jumping: the panel must reach its height in the same frame,
   otherwise the scroll target moves underneath the scroll */
.cat.no-anim .cat__panel{ transition:none; }
.cat.is-open .cat__panel{ grid-template-rows:1fr; }
.cat__panelin{ overflow:hidden; min-height:0; }
.cat__pad{ padding:0 clamp(16px,2.6vw,24px) 8px; }

.cat__note{
  font-size:12px; color:var(--muted-dim); letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:14px;
}

.grp{ padding-bottom:18px; }
.grp__name{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber); font-weight:600;
  padding-bottom:10px; margin-bottom:12px;
  border-bottom:1px solid var(--line-soft);
}

.items{ display:grid; gap:2px; }

.item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start; gap:0 14px;
  padding:12px 12px;
  margin-inline:-12px;
  border-radius:var(--r-s);
  transition:background-color .4s var(--ease), transform .4s var(--ease);
}
.is-hit{ animation:hit 1.8s var(--ease); border-radius:var(--r-s); }
@keyframes hit{
  0%,55%{ background:rgba(255,161,27,.12); box-shadow:inset 0 0 0 1px rgba(255,161,27,.32); }
  100%{ background:transparent; box-shadow:none; }
}
@media (hover:hover){
  .item:hover{ background:rgba(255,255,255,.035); }
  .item:hover .item__p{ color:var(--amber-hot); }
  .item:hover .item__thumb .ph{ --ps:1.07; }
}

/* the box is reserved as soon as the row knows it has a photo — if it only
   appeared on load, every arriving thumbnail would shove the rows and drag
   the scroll target with them */
.item__thumb{ display:none; }
.item:has(.ph[data-exact]) .item__thumb,
.item:has(.ph.has-photo) .item__thumb{
  display:block;
  grid-row:1/span 3; grid-column:1;
  width:56px; height:56px;
  border-radius:10px; overflow:hidden;
  border:1px solid var(--line-soft);
}
.item__thumb .ph{ transform:scale(var(--ps,1)); transition:transform .8s var(--ease); }
.item__body{ grid-column:1/3; }
.item:has(.ph.has-photo) .item__body{ grid-column:2/3; }

.item__body{ min-width:0; grid-row:1; }
.item__n{
  font-size:16px; font-weight:500; line-height:1.3;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.item__tag{
  font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber); border:1px solid rgba(218,152,90,.4);
  border-radius:999px; padding:2px 7px; line-height:1.4;
}
.item__w{
  font-size:11px; letter-spacing:.1em; color:var(--muted-dim);
  border:1px solid var(--line-soft); border-radius:999px; padding:1px 7px;
}
.item__d{
  margin-top:3px;
  font-size:13.5px; line-height:1.5; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.item.is-open .item__d{ -webkit-line-clamp:unset; overflow:visible; }
.item__more{
  margin-top:4px; font-size:12px; letter-spacing:.06em; color:var(--amber);
  border-bottom:1px solid rgba(218,152,90,.35); padding-bottom:1px;
}
.item__p{
  font-size:15px; font-weight:600; white-space:nowrap;
  color:var(--white); padding-top:1px;
  transition:color .3s var(--ease);
}
.item__p::after{ content:" zł"; font-size:11px; color:var(--muted-dim); font-weight:400; }
.item__p[data-nocur]::after{ content:""; }

/* stagger-in for items */
.item[data-stagger]{ opacity:0; transform:translateY(10px); }
.item[data-stagger].in{
  opacity:1; transform:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:var(--d,0ms);
}

/* ============================================================
   SIGNATURE CARDS
   ============================================================ */
.sig{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:640px){ .sig{ grid-template-columns:repeat(2,1fr); } }

.sigcard{
  position:relative; overflow:hidden;
  border-radius:var(--r-l);
  border:1px solid var(--line-soft);
  background:var(--ink-2);
  display:grid;
  transition:transform .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.sigcard__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.sigcard__media .ph{
  position:absolute; inset:-6% 0; height:112%;
  transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1));
  transition:transform 1s var(--ease);
}
.sigcard__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(12,10,9,.9) 100%);
}
.sigcard__label{
  position:absolute; left:18px; top:16px; z-index:2;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber);
  text-shadow:0 2px 14px rgba(0,0,0,.8);
}
.sigcard__body{ padding:18px clamp(16px,2.4vw,22px) 22px; display:grid; gap:8px; }
.sigcard__top{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.sigcard__n{ font-size:19px; font-weight:600; line-height:1.25; }
.sigcard__en{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-dim); }
.sigcard__d{ font-size:14px; color:var(--muted); line-height:1.55; }
.sigcard__p{ font-size:16px; font-weight:600; white-space:nowrap; transition:color .4s var(--ease); }
.sigcard__p::after{ content:" zł"; font-size:11px; color:var(--muted-dim); font-weight:400; }

@media (hover:hover){
  .sigcard:hover{ transform:translateY(-6px); border-color:rgba(218,152,90,.34); box-shadow:0 30px 60px -40px rgba(255,161,27,.55); }
  .sigcard:hover .ph{ --ps:1.06; }
  .sigcard:hover .sigcard__p{ color:var(--amber-hot); }
}

/* ============================================================
   TRUST
   ============================================================ */
.trust{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px;
  padding:22px clamp(18px,3vw,28px);
  border:1px solid var(--line-soft); border-radius:var(--r-m);
  background:var(--ink-2);
}
.trust__item{ display:flex; align-items:baseline; gap:9px; }
.trust__n{ font-size:26px; font-weight:600; color:var(--amber); letter-spacing:-.01em; }
.trust__l{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-dim); }
.trust__sep{ width:1px; height:26px; background:var(--line); display:none; }
.trust__quote{ flex:1; min-width:230px; font-size:15px; color:var(--muted); font-style:italic; }
@media (min-width:760px){ .trust__sep{ display:block; } }

/* ============================================================
   RESERVE
   ============================================================ */
.reserve{
  position:relative; overflow:hidden;
  display:grid; place-items:center; text-align:center;
  padding-block:clamp(80px,14vw,150px);
  z-index:2;
}
.reserve__media{ position:absolute; inset:0; z-index:0; }
.reserve__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.35), rgba(0,0,0,.86) 78%),
    linear-gradient(180deg,#000 0%, rgba(0,0,0,.2) 30%, rgba(0,0,0,.25) 70%, #000 100%);
}
.reserve__body{ position:relative; z-index:2; display:grid; justify-items:center; gap:14px; }
.reserve__title{ font-size:clamp(30px,6vw,62px); font-weight:600; line-height:1.06; letter-spacing:-.015em; }
.reserve__title em{ font-style:normal; color:var(--amber); }
.reserve__note{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-dim); }
.reserve__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:12px; }

/* ============================================================
   LOCATION
   ============================================================ */
.loc{ display:grid; gap:clamp(24px,4vw,44px); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .loc{ grid-template-columns:.9fr 1.1fr; } }

.loc__list{ display:grid; gap:18px; margin-top:26px; }
.loc__list dt{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-dim); margin-bottom:5px; }
.loc__list dd{ margin:0; font-size:16px; line-height:1.5; }
.loc__list a:hover{ color:var(--amber-hot); }
.loc__links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }

.loc__map{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r-m); border:1px solid var(--line-soft);
  aspect-ratio:16/11; min-height:240px;
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.loc__mapart{
  position:absolute; inset:0;
  background:
    radial-gradient(30% 30% at 62% 46%, rgba(255,161,27,.22), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(58deg, rgba(255,255,255,.045) 0 1px, transparent 1px 120px),
    linear-gradient(160deg,#161413 0%,#0b0a0a 100%);
}
.loc__map::after{
  content:""; position:absolute; left:62%; top:46%; width:12px; height:12px;
  translate:-50% -50%; border-radius:999px;
  background:var(--amber-hot); box-shadow:0 0 0 6px rgba(255,161,27,.16), 0 0 30px 6px rgba(255,161,27,.4);
  transition:opacity .4s var(--ease);
}
.loc__map.has-map::after{ opacity:0; }   /* real map carries its own pin */

#map{ position:absolute; inset:0; z-index:1; opacity:0; transition:opacity .8s var(--ease); background:#0b0a0a; }
.loc__map.has-map #map{ opacity:1; }
#map .leaflet-container{ background:#0b0a0a; }
#map .leaflet-control-attribution{
  background:rgba(0,0,0,.55); color:var(--muted-dim); font-size:10px;
  font-family:inherit; border-radius:6px 0 0 0;
}
#map .leaflet-control-attribution a{ color:var(--muted); }
#map .leaflet-control-zoom a{
  background:rgba(16,14,13,.9); color:var(--white);
  border-color:rgba(255,255,255,.12);
}
#map .leaflet-control-zoom a:hover{ background:rgba(36,32,30,.95); color:var(--amber-hot); }

.map-dot{ position:relative; }
.map-dot span{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:14px; height:14px; border-radius:999px;
  background:var(--amber-hot);
  box-shadow:0 0 0 5px rgba(255,161,27,.18), 0 0 26px 6px rgba(255,161,27,.45);
}
.map-dot span::after{
  content:""; position:absolute; inset:-5px; border-radius:999px;
  border:1px solid rgba(255,161,27,.6);
  animation:ping 2.8s var(--ease) infinite;
}
@keyframes ping{ 0%{ transform:scale(.6); opacity:.9; } 70%,100%{ transform:scale(2.4); opacity:0; } }

.loc__pin{
  position:absolute; left:16px; bottom:14px; z-index:500;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--white);
  background:rgba(0,0,0,.55); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:999px; padding:7px 14px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
@media (hover:hover){
  .loc__map:hover{ border-color:rgba(218,152,90,.4); }
  .loc__pin:hover{ color:var(--amber-hot); border-color:rgba(255,161,27,.5); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ border-top:1px solid var(--line-soft); padding-block:26px; position:relative; z-index:2; }
.foot__inner{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; }
.foot__brand{ font-family:var(--font-brand); font-size:19px; font-weight:700; letter-spacing:.03em; text-transform:lowercase; }
@media (prefers-reduced-motion:reduce){ .hero__logo{ animation:none; } }
.foot__tag{ font-size:13px; color:var(--muted); flex:1; min-width:180px; }
.foot__meta{ font-size:12px; color:var(--muted-dim); }

/* ============================================================
   MOBILE TAB BAR
   ============================================================ */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:85;
  display:grid; grid-template-columns:repeat(4,1fr);
  height:calc(var(--tab) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:rgba(10,9,9,.82);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-top:1px solid var(--line-soft);
}
.tabbar__b{
  display:grid; place-items:center; gap:3px;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  transition:color .3s var(--ease);
}
.tabbar__b svg{ width:20px; height:20px; }
.tabbar__b:active{ color:var(--white); }
.tabbar__b--cta{ color:var(--amber-hot); }
@media (min-width:900px){ .tabbar{ display:none; } }

/* ============================================================
   SEARCH PALETTE
   ============================================================ */
.palette{ position:fixed; inset:0; z-index:120; display:grid; }
.palette[hidden]{ display:none; }
.palette__scrim{
  position:absolute; inset:0;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  animation:fadeIn .3s var(--ease);
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

.palette__box{
  position:relative; z-index:1;
  width:min(640px, calc(100% - 24px));
  margin:clamp(16px,9vh,110px) auto auto;
  max-height:min(72vh, 640px);
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-m);
  background:rgba(20,18,17,.92);
  box-shadow:0 40px 120px -40px #000, 0 0 0 1px rgba(255,161,27,.06);
  overflow:hidden;
  animation:pop .34s var(--ease);
}
@keyframes pop{ from{ opacity:0; transform:translateY(-10px) scale(.985); } to{ opacity:1; transform:none; } }

.palette__field{
  display:flex; align-items:center; gap:12px;
  padding:14px 14px; border-bottom:1px solid var(--line-soft);
}
.palette__field svg{ width:19px; height:19px; color:var(--amber); flex:none; }
.palette__field input{
  flex:1; min-width:0; background:none; border:0; outline:none;
  color:var(--white); font-family:inherit; font-size:17px;
}
.palette__field input::placeholder{ color:var(--muted-dim); }
.palette__field input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.palette__esc{
  font-size:11px; letter-spacing:.1em; color:var(--muted-dim);
  border:1px solid var(--line); border-radius:6px; padding:4px 8px;
}

.palette__results{ overflow-y:auto; overscroll-behavior:contain; padding:6px; }
.res__grp{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-dim);
  padding:12px 12px 6px;
}
.res{
  width:100%; display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:var(--r-s); text-align:left;
}
.res__n{ flex:1; min-width:0; font-size:15px; }
.res__n b{ color:var(--amber-hot); font-weight:600; }
.res__d{ display:block; font-size:12px; color:var(--muted-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.res__p{ font-size:13px; color:var(--muted); white-space:nowrap; }
.res.is-sel,.res:hover{ background:rgba(255,161,27,.10); box-shadow:inset 0 0 0 1px rgba(255,161,27,.22); }
.res__empty{ padding:34px 14px; text-align:center; color:var(--muted-dim); font-size:14px; }

.palette__foot{
  padding:10px 14px; border-top:1px solid var(--line-soft);
  font-size:11px; color:var(--muted-dim); letter-spacing:.04em;
}
.palette__foot kbd{
  border:1px solid var(--line); border-radius:5px; padding:1px 5px; margin-right:2px;
  font-family:inherit; font-size:10px;
}

/* ============================================================
   SIDE WATERFALLS — large desktop only
   ============================================================ */
.side-waterfall{
  position:fixed; top:0; z-index:1;
  /* never wider than the gutter beside the 1100px column — the curtain
     stays outside the reading area at every desktop width */
  width:min(clamp(120px, 12vw, 240px), calc((100vw - var(--shell)) / 2));
  height:100vh;
  overflow:hidden;
  pointer-events:none;
  display:none;
  opacity:.36;
  filter:blur(1.5px) saturate(85%) brightness(70%);
  /* fades at both ends and again towards the reading column */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
          mask-image:
    linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.side-waterfall.right{
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(270deg, #000 0%, #000 55%, transparent 100%);
          mask-image:
    linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(270deg, #000 0%, #000 55%, transparent 100%);
}
.side-waterfall.left{ left:0; }
.side-waterfall.right{ right:0; }
.side-waterfall::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.18));
}
.side-waterfall.right::after{ background:linear-gradient(270deg, rgba(0,0,0,.55), rgba(0,0,0,.18)); }

.strip{
  display:grid; gap:0;
  width:100%;
  will-change:transform;
}

/* light, not pictures: tall pools of amber and wine that bleed into each other */
.strip__layer{
  position:relative;
  width:100%; height:78vh;
  overflow:hidden;
  animation:swell 19s var(--ease-soft) infinite alternate;
}
.strip__layer:nth-child(2n){ height:94vh; animation-delay:-7s; }
.strip__layer:nth-child(3n){ height:66vh; animation-duration:25s; }
.strip__layer:nth-child(4n){ animation-delay:-13s; }

.side-waterfall.left .strip__layer{
  background:
    radial-gradient(72% 42% at 30% 26%, rgba(255,161,27,.34), transparent 72%),
    radial-gradient(60% 34% at 62% 68%, rgba(218,152,90,.24), transparent 74%),
    linear-gradient(180deg, #0b0908, #17100c 46%, #0b0908);
}
.side-waterfall.left .strip__layer[data-tone="2"]{
  background:
    radial-gradient(64% 38% at 58% 34%, rgba(255,178,64,.28), transparent 72%),
    radial-gradient(70% 40% at 24% 76%, rgba(150,32,44,.16), transparent 74%),
    linear-gradient(180deg, #0a0807, #140f0b 52%, #0a0807);
}
.side-waterfall.right .strip__layer{
  background:
    radial-gradient(70% 40% at 66% 30%, rgba(150,32,44,.34), transparent 72%),
    radial-gradient(58% 34% at 34% 72%, rgba(218,152,90,.22), transparent 74%),
    linear-gradient(180deg, #0a0708, #170c0f 48%, #0a0708);
}
.side-waterfall.right .strip__layer[data-tone="3"]{
  background:
    radial-gradient(66% 38% at 38% 36%, rgba(255,161,27,.22), transparent 72%),
    radial-gradient(72% 42% at 70% 74%, rgba(150,32,44,.28), transparent 74%),
    linear-gradient(180deg, #090707, #130c0d 50%, #090707);
}

/* liquid, not water: a slow swell behind the glass */
@keyframes swell{
  from{ transform:translate3d(-3px,0,0) scale(1.06); }
  to  { transform:translate3d(3px,0,0)  scale(1.13); }
}

/* soft ends so consecutive pools blend instead of butting together */
.strip__layer::after{
  content:""; position:absolute; inset:-1px; z-index:2;
  background:linear-gradient(180deg,
    rgba(8,6,6,.9) 0%, transparent 24%, transparent 76%, rgba(8,6,6,.9) 100%);
}
.strip__layer::before{
  content:""; position:absolute; inset:0; z-index:3;
  background:linear-gradient(180deg, rgba(255,214,160,.10), transparent 40%);
  mix-blend-mode:soft-light;
}

/* the reflection pass — a single soft highlight travelling the column */
.side-waterfall .strip::before,
.side-waterfall .strip::after{
  content:""; position:absolute; left:0; right:0; top:0; height:52vh; z-index:4;
  pointer-events:none; mix-blend-mode:screen; will-change:transform;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(218,152,90,.14) 38%,
    rgba(255,236,208,.18) 50%,
    rgba(150,32,44,.12) 64%,
    transparent 100%);
  filter:blur(10px);
}
.side-waterfall .strip{ position:relative; }
.side-waterfall.left .strip::before{ animation:sheenDown 19s linear infinite; }
.side-waterfall.left .strip::after{ animation:sheenDown 19s linear infinite; animation-delay:-9.5s; }
.side-waterfall.right .strip::before{ animation:sheenUp 23s linear infinite; }
.side-waterfall.right .strip::after{ animation:sheenUp 23s linear infinite; animation-delay:-11.5s; }

@keyframes sheenDown{ from{ transform:translateY(-50vh); } to{ transform:translateY(110vh); } }
@keyframes sheenUp{ from{ transform:translateY(110vh); } to{ transform:translateY(-50vh); } }

@keyframes flowUp{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@keyframes flowDown{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }

.side-waterfall.left .strip{ animation:flowUp 64s linear infinite; }
.side-waterfall.right .strip{ animation:flowDown 78s linear infinite; }

@media (min-width:1280px){
  .side-waterfall{ display:block; }
}

/* ============================================================
   MOBILE — same content, far less scrolling
   ============================================================ */
@media (max-width:899px){
  .sect{ padding-block:clamp(44px,9vw,72px); }
  .sect--tight{ padding-block:32px; }
  .sect--menu{ padding-top:36px; padding-bottom:40px; }
  .sect__head{ margin-bottom:20px; }
  .sect__title{ font-size:clamp(26px,7vw,34px); }
  .sect__note{ font-size:14px; margin-top:8px; }

  /* the logo gets room to breathe, and the CTA clears the bottom bar */
  .hero{
    min-height:92svh;
    padding-block:calc(var(--hd) + 28px) calc(var(--tab) + 44px);
  }
  .hero__logo{ width:min(66vw, 320px); max-width:100%; }
  .hero__eyebrow{ margin-bottom:14px; font-size:10px; letter-spacing:.26em; }
  .hero__tag{ margin-bottom:22px; font-size:15px; }

  /* two buttons share the row and shrink with it — they never spill */
  .hero__cta{ width:100%; max-width:100%; gap:10px; }
  .hero__cta .btn{
    flex:1 1 0; min-width:0; padding:0 14px;
    font-size:14px; letter-spacing:0;
  }
  .hero__meta{ margin-top:18px; font-size:11px; }
  .hero__scroll{ display:none; }

  /* clearance for the fixed bottom bar */
  .quick__grid{ padding-bottom:26px; }

  /* practical info reads as a compact two-column card */
  .quick__grid{ grid-template-columns:1fr 1fr; gap:14px 18px; padding-block:18px; }
  .quick__cell--act{ grid-column:1/-1; }
  .quick__v{ font-size:14px; }

  .atmo{ gap:8px; }
  .atmo__tile{ aspect-ratio:16/10; }
  .atmo__tile figcaption{ font-size:11px; left:12px; bottom:10px; }

  /* tail space so even the last category can reach the sticky bar instead of
     jamming against the end of the document */
  .menu{ padding-bottom:46svh; }

  .cat__head{ padding:14px 14px; }
  .cat__pad{ padding-inline:14px; }
  .grp{ padding-bottom:12px; }
  .grp__name{ margin-bottom:8px; padding-bottom:8px; }
  .item{ padding:9px 10px; margin-inline:-10px; }
  .item__n{ font-size:15px; }
  .item__d{ font-size:13px; }

  .sig{ gap:10px; }
  .sigcard__media{ aspect-ratio:16/9; }
  .sigcard__body{ padding:14px 16px 16px; gap:6px; }
  .sigcard__n{ font-size:17px; }
  .sigcard__d{ font-size:13px; }

  .trust{ padding:16px; gap:12px 20px; }
  .trust__quote{ font-size:14px; }

  .reserve{ padding-block:clamp(56px,16vw,90px); }
  .loc__map{ min-height:200px; aspect-ratio:4/3; }
  .loc__list{ gap:14px; margin-top:18px; }
  .loc__links{ margin-top:18px; }
  .foot{ padding-block:20px calc(22px + var(--tab) * .4); }
}

/* ============================================================
   PHONES — nothing in the hero may leave the viewport
   ============================================================ */
@media (max-width:600px){
  html, body{ overflow-x:hidden; max-width:100%; }

  .hero{ overflow-x:clip; }
  .hero .shell{ padding-inline:20px; }
  .hero__body{ width:100%; max-width:100%; }
  .hero__body > *{ max-width:100%; }

  /* the wordmark is sized off the viewport, not off its own artwork */
  .hero__logo{
    width:76vw; max-width:76vw; height:auto;
    margin-inline:auto;
  }

  /* one full-width button per row — a grid track of minmax(0,1fr) cannot be
     widened by its own label, so nothing can push past the edge */
  .hero__cta{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:12px;
    width:100%;
    max-width:calc(100vw - 40px);
    padding-inline:20px;
    margin-inline:auto;
  }
  .hero__cta .btn{
    width:100%; min-width:0;
    justify-content:center;
    padding:0 16px;
    font-size:15px; letter-spacing:0;
  }

  /* the strip under the hero clears the fixed tab bar */
  .quick__grid{
    padding-bottom:calc(var(--tab) + 24px + env(safe-area-inset-bottom,0px));
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal],[data-stagger]{ opacity:1 !important; transform:none !important; }
  .hero__title .ltr{ opacity:1; transform:none; }
  .side-waterfall{ display:none !important; }
}