/* 38 Afterglow: Sable Hour (sample), a wine bar and kitchen
   High-fidelity recreation of the look of deformo.framer.website (our own code, CC0 photos, no WebGL: the glow is CSS).
   An indigo page lit by one slow peach glow that drifts behind everything on a 42 s loop, with grain on top; white paper
   bands for the menu, the room and the prices; Source Serif 4 display over Mona Sans. Re-skin: change the shared token
   layer below. Breakpoints 760 / 1080 (ncs-desktop). No JavaScript: <details name>, :target, scroll-snap rails and
   CSS animation (time-based for the intro, scroll-driven inside @supports for the rest). */
:root {
  /* Shared token layer (library-wide names) */
  --c-bg: #ffffff;                 /* paper bands */
  --c-surface: #fbf9f9;            /* info cards on the room photos */
  --c-ink: #000000;
  --c-muted: #4d4d4d;              /* black 70% on white, 8.4:1 */
  --c-line: rgb(0 0 0 / .1);       /* hairlines, decorative */
  --c-line-strong: #8a8a8a;        /* field borders on paper, 3.4:1 */
  --c-accent: #252758;             /* dusk indigo: dots, chips, dark price card, Call tile */
  --c-on-accent: #ffffff;          /* 13.9:1 */
  --c-accent-2: #e7a79d;           /* peach: status only (never behind white text) */
  --f-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-body: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, monospace;   /* not used: numbers use tabular figures */
  --r-sm: 6px;     /* buttons, nav bar, pills, glass tiles, info cards */
  --r-lg: 12px;    /* photos, room cards, price cards, the visit panel */
  --r-pill: 6px;   /* buttons are 6px, never round */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 40px; --s-5: 40px; --s-6: 60px;   /* phone; desktop raises s-5/s-6 */

  /* Theme names mapped to the shared layer */
  --glow-0: #12204d;               /* deepest indigo: the glow's outer color and the page */
  --glow-peach: var(--c-accent-2); /* the glow's plateau */
  --dusk: var(--c-accent);
  --glass: rgb(255 255 255 / .1);
  --glass-2: rgb(255 255 255 / .2);
  --glass-blur: 5px;
  --rim: inset 0 0 0 1px rgb(255 255 255 / .12);
  --scrim: rgb(18 32 77 / .55);    /* every glow band: white text stays 6:1 even over the peach */
  --light: rgb(255 255 255 / .8);  /* light buttons */
  --dark: #333333;                 /* black 80%: dark buttons */
  --on-glow: #ffffff;
  --on-glow-2: rgb(255 255 255 / .85);   /* body copy on the glow (the original's .7 fails over the peach) */
  --closed: #6b6b6b;               /* closed accordion titles, 5.3:1 */
  --side: 16px;                    /* page margin: 16 phone, 40 desktop */
  --ease-text: cubic-bezier(.55, 0, 0, 1);
  --ease-soft: cubic-bezier(.4, 0, .15, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ncs-on-style: none;            /* the bundler's current-page underline: styled below as a ring on the nav pill */

  /* Measured type scale, phone (390) to desktop (1440) */
  --t-hero: clamp(3.25rem, 1.79rem + 6vw, 7.1875rem);      /* 52 -> 115 */
  --t-h2: clamp(2.625rem, 1.93rem + 2.857vw, 4.5rem);      /* 42 -> 72 */
  --t-stmt: clamp(2.75rem, 2.1rem + 2.667vw, 4.5rem);      /* 44 -> 72 */
  --t-h2s: clamp(1.75rem, 1.29rem + 1.9vw, 3rem);          /* 28 -> 48 */
  --t-price: clamp(3.5rem, 3.129rem + 1.524vw, 4.5rem);    /* 56 -> 72 */
  --t-h3: clamp(1.25rem, 1.018rem + .952vw, 1.875rem);     /* 20 -> 30 */
  --t-bl: clamp(1.0625rem, .993rem + .286vw, 1.25rem);     /* 17 -> 20 */
  --t-bm: clamp(1rem, .954rem + .19vw, 1.125rem);          /* 16 -> 18 */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--glow-0); }
body { margin: 0; color: var(--on-glow); font: 400 16px/1.4 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip;
  background: transparent; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
address { font-style: normal; }
dl, dd { margin: 0; }
/* Tabular figures on prices only: Mona Sans switches to a slashed zero with tnum, which reads badly in hours and phone numbers */
.prices .num, .plan-price, .src-s .num { font-variant-numeric: tabular-nums; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.arr { width: 20px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 200ms var(--ease-out); }
.wrap { width: 100%; max-width: 1800px; margin-inline: auto; padding-inline: var(--side); }

a, button, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--dusk); }
.paper :focus-visible { outline-color: var(--dusk); box-shadow: 0 0 0 5px #fff; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; color: #000; padding: 12px 16px; border-radius: var(--r-sm); }
.skip:focus { top: 12px; }
.demo { position: relative; z-index: 60; background: var(--glow-0); color: rgb(255 255 255 / .85); font-size: 13px; line-height: 1.4;
  text-align: center; padding: 7px 16px; }

/* ---------- The glow (signature): one fixed layer that drifts on a 42 s loop, plus grain ---------- */
body::before, .smenu::before { content: ""; position: fixed; left: 50%; top: 50%; width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax;
  z-index: -2; pointer-events: none; contain: strict; will-change: transform;
  background:
    radial-gradient(circle at 38% 58%, rgb(145 90 125 / .45) 0, transparent 6vmax),
    radial-gradient(circle at 50% 50%, #e7a79d 0 13vmax, #e2a299 15.7vmax, #d79596 18.2vmax, #c38490 20.9vmax,
      #ac738a 23.6vmax, #916083 26.2vmax, #754e7b 28.9vmax, #574071 31.5vmax, #3e3466 34.2vmax,
      #2a2b5b 36.9vmax, #192351 39.5vmax, #12204d 42vmax);
  transform: translate(-5vw, 25vh) scale(1.65, 1.32); }
body::after, .smenu::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 346px; }
@keyframes glow-in { from { opacity: 0; } }
@keyframes drift {
  0%, 100% { transform: translate(-5vw, 25vh) rotate(0deg) scale(1.65, 1.32); }
  10.7% { transform: translate(19vw, 25vh) rotate(-20deg) scale(1.25, 1); }
  21.4% { transform: translate(34vw, 9vh) rotate(-35deg) scale(1.48, 1.18); }
  35.7% { transform: translate(31vw, 3vh) rotate(-30deg) scale(1.6, 1.28); }
  46.4% { transform: translate(20vw, -19vh) rotate(-20deg) scale(1.46, 1.17); }
  57.1% { transform: translate(1vw, -17vh) rotate(-5deg) scale(1.81, 1.45); }
  71.4% { transform: translate(-8vw, -2vh) rotate(10deg) scale(2.29, 1.83); }
  85.7% { transform: translate(-8vw, 12vh) rotate(8deg) scale(2.38, 1.9); }
  96.4% { transform: translate(-7vw, 22vh) rotate(3deg) scale(1.86, 1.49); }
}

/* Bands: glow bands are see-through with an indigo scrim; paper bands are solid white */
.glow { background: var(--scrim); color: var(--on-glow); }
.paper { background: var(--c-bg); color: var(--c-ink); }

/* ---------- Type ---------- */
.h2 { font: 400 var(--t-h2)/1 var(--f-display); letter-spacing: -.04em; }
.h2s { font: 400 var(--t-h2s)/1.1 var(--f-display); letter-spacing: -.03em; }
.mega { font: 400 var(--t-hero)/1 var(--f-display); letter-spacing: -.04em; }
.h3 { font: 400 var(--t-h3)/1.3 var(--f-body); letter-spacing: -.03em; }
.body-l { font-size: var(--t-bl); line-height: 1.4; letter-spacing: -.02em; }
.body-m { font-size: var(--t-bm); line-height: 1.4; letter-spacing: -.01em; }
.label { display: flex; align-items: center; gap: 16px; font-size: 13px; line-height: 1; letter-spacing: 1px; text-transform: uppercase; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dusk); flex: none; }
.glow .dot, .site-foot .dot { background: #fff; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 50px; padding: 13px 22px;
  border: 0; border-radius: var(--r-pill); font: 400 16px/1.4 var(--f-body); letter-spacing: -.01em; cursor: pointer; white-space: nowrap;
  transition: transform 120ms var(--ease-out), background-color 200ms ease-out; }
.btn:active { transform: scale(.97); }
.btn-light { background: var(--light); color: #000; }
.btn-glass { background: linear-gradient(rgb(255 255 255 / .08), rgb(255 255 255 / .08)); background-color: rgb(18 32 77 / .3); color: #fff; -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--rim); }
.btn-dark { background: var(--dark); color: #fff; }
.btn .i { width: 18px; height: 18px; margin-right: -6px; }
@media (hover: hover) and (pointer: fine) {
  .btn-light:hover { background: #fff; }
  .btn-glass:hover { background-color: rgb(18 32 77 / .15); }
  .btn-dark:hover { background: #000; }
  a:hover > .arr, button:hover > .arr { transform: translateX(4px); }
}

/* ---------- Header: transparent over the glow at the top, a white bar once you scroll (white by default) ---------- */
.site-head { position: sticky; top: 0; z-index: 50; height: 88px; margin-bottom: -88px; padding: 12px var(--side);
  --hd-bg: #fff; --hd-pad: 16px; --hd-shadow: 0 .6px 1.1px -1px rgb(0 0 0 / .06), 0 2.3px 4.1px -2px rgb(0 0 0 / .06), 0 10px 18px -3px rgb(0 0 0 / .04);
  --hd-ink: #000; --hd-sub: rgb(0 0 0 / .6); --pill-bg: rgb(0 0 0 / .05); --pill-bg-h: rgb(0 0 0 / .1); --pill-ink: #000;
  --cta-bg: var(--dark); --cta-ink: #fff; --m-bg: var(--dusk); --m-ink: #fff; }
.bar { height: 64px; display: flex; align-items: center; gap: 8px; padding-inline: var(--hd-pad); border-radius: var(--r-sm);
  background: var(--hd-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--hd-shadow); color: var(--hd-ink); }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.wordmark { font: 700 18px/1 var(--f-body); letter-spacing: -.035em; white-space: nowrap; }
.brand-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; margin-inline: 18px; flex: none; }
.tagline { font: 400 16px/.7 var(--f-display); letter-spacing: -.02em; color: var(--hd-sub); white-space: nowrap; }
.site-head .brand-dot, .site-head .tagline, .site-head .site-nav { display: none; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 6px 12px; border-radius: var(--r-sm); font-size: 14px; line-height: 1.4;
  background: var(--pill-bg); color: var(--pill-ink); white-space: nowrap; -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); transition: background-color 200ms ease-out, transform 120ms var(--ease-out); }
.site-nav ul { display: flex; gap: 8px; }
.site-nav .pill, .pill-tel { box-shadow: var(--pill-rim, none), inset 0 0 0 calc(var(--on, 0) * 1px) currentColor; }
.pill-tel .i { width: 14px; height: 14px; }
.pill-cta { display: none; margin-left: auto; min-height: 44px; height: 44px; padding: 10px 16px; background: var(--m-bg); color: var(--m-ink); font-size: 16px; gap: 8px; }
.pill-cta .arr { width: 13px; height: 8px; }
@media (hover: hover) and (pointer: fine) {
  .pill:hover { background: var(--pill-bg-h); }
  .pill-cta:hover { background: var(--m-bg); filter: brightness(1.12); }
}

/* Phones and tablets: Deformo's "Menu" pill (32px pill in a 44px target); "Close" takes its place while the menu is open */
.menu-btns { display: grid; margin-left: auto; margin-right: -6px; }
.menu-btn { position: relative; grid-area: 1 / 1; display: grid; place-items: center; min-width: 44px; min-height: 64px; padding-inline: 6px; }
.menu-btn::after { content: ""; position: absolute; inset: -12px 0 -32px; }  /* stays under the finger when the bar sticks */
.menu-btn span { display: inline-flex; align-items: center; height: 32px; padding: 6px 12px; border-radius: var(--r-sm); font-size: 14px; line-height: 1.4;
  background: var(--m-bg); color: var(--m-ink); transition: background-color 200ms ease-out, transform 120ms var(--ease-out); }
.menu-btn:active span { transform: scale(.97); }
.menu-btn:focus-visible { outline: 0; }
.menu-btn:focus-visible span { outline: 2px solid currentColor; outline-offset: 2px; color: var(--m-ink); box-shadow: 0 0 0 4px var(--m-bg); }
.nav-close { visibility: hidden; }
#site-menu:target ~ .site-head .nav-open { visibility: hidden; }
#site-menu:target ~ .site-head .nav-close { visibility: visible; }
/* Open: the bar goes clear over the glow, white wordmark, the pill turns solid white (as in Deformo) */
#site-menu:target ~ .site-head { animation: none !important; --hd-bg: transparent !important; --hd-shadow: none !important; --hd-ink: #fff !important;
  --m-bg: #fff !important; --m-ink: #000 !important; }
#site-menu:target ~ .site-head .bar { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Menu (Deformo): the drifting glow fills the screen, five glass rows fade in one after another ---------- */
.smenu { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; gap: 32px; overflow-y: auto; overscroll-behavior: contain;
  padding: 104px var(--side) max(20px, env(safe-area-inset-bottom)); background: var(--glow-0); color: #fff;
  visibility: hidden; opacity: 0; transition: opacity 300ms var(--ease-soft), visibility 0s linear 300ms; }
/* the same glow as the page (same keyframes from page load, so it lines up), under the indigo scrim that keeps white text at AA */
.smenu::before { background:
    linear-gradient(var(--scrim), var(--scrim)),
    radial-gradient(circle at 38% 58%, rgb(145 90 125 / .45) 0, transparent 6vmax),
    radial-gradient(circle at 50% 50%, #e7a79d 0 13vmax, #e2a299 15.7vmax, #d79596 18.2vmax, #c38490 20.9vmax,
      #ac738a 23.6vmax, #916083 26.2vmax, #754e7b 28.9vmax, #574071 31.5vmax, #3e3466 34.2vmax,
      #2a2b5b 36.9vmax, #192351 39.5vmax, #12204d 42vmax); }
.smenu:target { visibility: visible; opacity: 1; transition: opacity 300ms var(--ease-soft); }
.sm-rows { display: grid; gap: 8px; }
.sm-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: clamp(60px, 10.5svh, 89px); padding: 0 36px;
  border-radius: var(--r-sm); font-size: 18px; letter-spacing: -.01em; color: #fff;
  background: linear-gradient(rgb(255 255 255 / .08), rgb(255 255 255 / .08)), rgb(18 32 77 / .4);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--rim); transition: background-color 200ms ease-out; }
.sm-row .arr { width: 25px; height: 14px; transition: transform 200ms var(--ease-out); }
.sm-rows li { opacity: 0; transition: opacity 200ms ease-out; }
.smenu:target .sm-rows li { opacity: 1; transition: opacity 600ms var(--ease-soft) calc(100ms + var(--k) * 100ms); }
.sm-foot { display: grid; gap: 10px; margin-top: auto; }
.sm-links { display: flex; flex-wrap: wrap; gap: 0 28px; font-size: 14px; }
.sm-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-glow-2); }
.sm-mark { display: flex; align-items: center; min-height: 32px; }
.sm-mark .brand-dot { margin-inline: 14px; }
.sm-copy { font: 400 16px/1 var(--f-display); letter-spacing: -.02em; color: var(--on-glow-2); }
@media (hover: hover) and (pointer: fine) {
  .menu-btn:hover span { filter: brightness(1.08); }
  .sm-row:hover { background-color: rgb(18 32 77 / .25); }
  .sm-row:hover .arr { transform: translateX(4px); }
  .sm-links a:hover { color: #fff; }
}

/* ---------- S0 Hero ---------- */
.hero { position: relative; }
.hero-in { min-height: calc(100svh - 34px); display: flex; flex-direction: column; padding: 92px var(--side) 32px;
  background: linear-gradient(to top, rgb(18 32 77 / .6) 0 45%, rgb(18 32 77 / .35) 70%, transparent 92%), linear-gradient(to bottom, rgb(18 32 77 / .5), transparent 200px); }
.hero-h { flex: 1; display: grid; place-items: center; padding-block: 32px; text-align: center;
  font: 400 var(--t-hero)/1 var(--f-display); letter-spacing: -.04em; }
.letters { display: block; max-width: 850px; }
.hw { white-space: nowrap; display: inline-block; }
.hw > span { display: inline-block; }
.hero-row { display: flex; flex-direction: column; gap: 24px; overflow: clip; overflow-clip-margin: 8px; }
.hero-p { font-size: var(--t-bl); line-height: 1.4; letter-spacing: -.02em; max-width: 450px; }
.rating { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: rgb(255 255 255 / .85); }
.stars { display: inline-flex; gap: 2px; color: #fff; }
.stars .i { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.hero-ctas { display: grid; gap: 10px; }
.hero-ctas .btn { width: 100%; min-height: 48px; }

/* ---------- S1 Scroll statement ---------- */
.stmt { position: relative; padding: 32px var(--side) 40px; }
.stmt-pin { max-width: 1200px; margin-inline: auto; }
.stmt-p { font: 400 var(--t-stmt)/1.1 var(--f-display); letter-spacing: -.04em; text-align: center; text-wrap: balance; }

/* ---------- S2 The menu (paper) ---------- */
.menu { padding-block: 36px; }
.menu .wrap { display: grid; gap: 32px; }
.menu .label { margin-bottom: -8px; }
.menu-head { display: grid; gap: 24px; }
.menu .h2s { max-width: 1050px; }
.words > span { display: inline-block; }
.menu-body { display: grid; gap: 24px; }
.menu-photo img { width: 100%; aspect-ratio: 358 / 184; object-fit: cover; object-position: 50% 62%; border-radius: var(--r-lg); }
.mi { border-top: 1px solid rgb(0 0 0 / .1); }
.mi[open] { border-top-color: rgb(0 0 0 / .2); }
.mi summary, .qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.mi summary::-webkit-details-marker, .qa summary::-webkit-details-marker { display: none; }
.mi summary { min-height: 64px; padding-block: 14px; font: 400 var(--t-h3)/1.3 var(--f-body); letter-spacing: -.03em; color: var(--closed); }
.mi[open] summary { color: #000; }
.pm { position: relative; width: 24px; height: 24px; flex: none; transition: transform 300ms var(--ease-out); }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 1.5px; margin: -.75px 0 0 -11px; background: currentColor; }
.pm::after { transform: rotate(90deg); }
details[open] > summary .pm { transform: rotate(45deg); }
.mi-p { padding-bottom: 24px; }
.mi-d { font-size: var(--t-bm); line-height: 1.4; letter-spacing: -.01em; }
.prices { margin-top: 16px; }
.prices li { display: flex; justify-content: space-between; gap: 16px; padding-block: 8px; border-top: 1px solid var(--c-line); color: var(--c-muted); }
.prices li .num { color: #000; }

/* ---------- S3 About + stair-step stats (glow) ---------- */
.about { padding-block: 36px; }
.hair { height: 1px; background: rgb(255 255 255 / .1); }
.about-row { display: grid; gap: 20px; margin-top: 24px; }
.about .h2 { max-width: 530px; }
.about .body-l { max-width: 560px; color: var(--on-glow); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 40px; }
.stat { position: relative; min-height: 160px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  border-radius: var(--r-sm); background: var(--glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--rim); overflow: clip; }
.stat-bar { position: absolute; left: 0; top: 0; width: 6px; height: 88px; background: rgb(255 255 255 / .35); }
.stat-n { font-size: 30px; line-height: 1.3; letter-spacing: -.03em; }
.stat-l { font-size: 13px; line-height: 1.2; letter-spacing: 1px; text-transform: uppercase; color: #fff; }

/* ---------- S4 The room (paper): photo cards with a solid info card ---------- */
.room { padding-block: 36px; }
.room .h2 { max-width: 990px; }
.cases { display: grid; grid-auto-flow: column; grid-auto-columns: min(300px, 82vw); gap: 10px; margin: 32px calc(var(--side) * -1) 0;
  padding-inline: var(--side); scroll-padding-inline: var(--side); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; }
.cases::-webkit-scrollbar { display: none; }
.case { position: relative; height: 440px; padding: 24px; border-radius: var(--r-lg); overflow: clip; scroll-snap-align: start; color: #fff;
  background: #111; isolation: isolate; view-timeline-name: --case; }
.case-media { position: absolute; left: 0; right: 0; top: -200px; height: calc(100% + 200px); z-index: -2; }
.case-media img { width: 100%; height: 100%; object-fit: cover; }
#thursdays .case-media img { object-position: 68% 50%; }  /* the candles sit right of centre: keep them in the tall phone crop */
.case::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(162% 128% at 95% 97.1%, transparent 0, rgb(0 0 0 / .5) 52%, #000); }
.case-h { font: 400 var(--t-h2s)/1.1 var(--f-display); letter-spacing: -.03em; max-width: 1100px; text-wrap: balance; }
.case-card { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 24px; border-radius: var(--r-sm); background: var(--c-surface); color: #000; }
.case-t { font: 400 var(--t-h3)/1.3 var(--f-body); letter-spacing: -.03em; }
.chip { display: inline-block; margin-top: 12px; padding: 2px 10px; border-radius: 4px; background: var(--dusk); color: #fff; font-size: 14px; line-height: 1.4; }
.case-a { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; margin-top: 8px; font-size: 16px; }
.case-a .arr { width: 16px; height: 10px; }

/* ---------- S5 Kitchen statement (glow, computers) ---------- */
.philo { padding: 0; }
.philo > .wrap { display: none; }   /* phones: the statement above carries this line (block kept, content folded) */

/* ---------- S6 Private events (glow): glass steps ---------- */
.events { padding-block: 36px; }
.ev-head { text-align: center; }
.ev-head .h2 { max-width: 900px; margin-inline: auto; }
.steps { display: grid; gap: 10px; max-width: 800px; margin: 32px auto 0; }
.step { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; padding: 20px; border-radius: var(--r-sm);
  background: linear-gradient(rgb(255 255 255 / .08), rgb(255 255 255 / .08)); background-color: rgb(18 32 77 / .35);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--rim); }
.step-n { font: 500 48px/.9 var(--f-body); letter-spacing: -.04em; color: rgb(255 255 255 / .55); }
.step > div { display: contents; }
.step p { grid-column: 1 / -1; margin-top: 12px; color: #fff; }
.step-4 { display: none; }

/* ---------- S7 Reviews (glow) ---------- */
.reviews { padding-block: 36px; }
.reviews .h2s { max-width: 1160px; }
.sources { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 32px; }
.src { display: grid; align-content: space-between; gap: 6px; min-height: 100px; padding: 16px; border-radius: var(--r-sm); background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--rim); }
.src-x { display: none; }
.src-n { font-size: 16px; font-weight: 500; }
.src-s { display: inline-flex; align-items: center; gap: 6px; font: 400 30px/1 var(--f-display); letter-spacing: -.03em; }
.src-s .i { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.src-c { font-size: 13px; color: #fff; }
.quote { margin-top: 32px; text-align: center; }
.quote p { font: 400 var(--t-h2s)/1.1 var(--f-display); letter-spacing: -.03em; max-width: 1240px; margin-inline: auto; text-wrap: balance; }
.quote figcaption, .mini-by { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.q-name { font-weight: 500; }
.q-tag { font-size: 13px; padding: 2px 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4); color: #fff; }
.minis { display: grid; grid-auto-flow: column; grid-auto-columns: min(280px, 78vw); gap: 10px; margin: 28px calc(var(--side) * -1) 0;
  padding-inline: var(--side); scroll-padding-inline: var(--side); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.minis::-webkit-scrollbar { display: none; }
.mini { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 20px; border-radius: var(--r-sm); scroll-snap-align: start;
  background: var(--glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--rim); }
.mini .mini-by { justify-content: flex-start; margin-top: 0; }

/* ---------- S8 Tasting and the back room (paper) ---------- */
.offer { padding-block: 36px; }
.offer-head { display: grid; justify-items: center; gap: 20px; text-align: center; }
.offer-head .body-l { max-width: 600px; }
.plans { display: grid; gap: 10px; max-width: 1200px; margin: 32px auto 0; }
.plan { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px; border-radius: var(--r-lg); }
.plan-light { background: #fafafa; color: #000; }
.plan-dark { background: var(--dusk); color: #fff; }
.plan-badge { position: absolute; top: 24px; left: 50%; translate: -50% 0; padding: 4px 12px; border-radius: var(--r-sm); background: #fff; color: #000; font-size: 16px; line-height: 1.5; white-space: nowrap; }
.plan-price { margin-top: 4px; font: 400 var(--t-price)/1 var(--f-display); letter-spacing: -.04em; }
.plan-unit { display: flex; align-items: center; gap: 20px; width: 100%; margin-top: 14px; font-weight: 700; }
.plan-unit::before, .plan-unit::after { content: ""; flex: 1; height: 1px; background: rgb(0 0 0 / .1); }
.plan-dark .plan-unit::before, .plan-dark .plan-unit::after { background: rgb(255 255 255 / .15); }
.plan-unit span { white-space: nowrap; }
.plan-chip { margin-top: 16px; padding: 7px 16px; border-radius: var(--r-sm); background: rgb(0 0 0 / .05); }
.plan-dark .plan-chip { background: rgb(255 255 255 / .1); }
.plan-sub { margin-top: 8px; font-size: 13px; color: var(--c-muted); }
.plan-dark .plan-sub { color: rgb(255 255 255 / .8); }
.plan-d { margin-top: 16px; max-width: 420px; }
.plan-dark .plan-price { margin-top: 48px; }
.plan .btn { width: 100%; margin-top: 20px; }

/* ---------- S9 From the cellar (paper, tablets and computers) ---------- */
.journal { padding: 0; }
.journal > .wrap { display: none; }   /* phones: computers and tablets only */

/* ---------- S10 FAQ (glow) ---------- */
.faq { padding-block: 36px; }
.faq .wrap { display: grid; gap: 32px; }
.faq-l { display: grid; gap: 20px; justify-items: start; align-content: start; }
.faq .h2 { max-width: 460px; }
.faq-l .body-m { color: var(--on-glow-2); }
.qa { border-top: 1px solid rgb(255 255 255 / .1); }
.qa:last-child { border-bottom: 1px solid rgb(255 255 255 / .1); }
.qa summary { min-height: 64px; padding-block: 14px; font-size: 18px; line-height: 1.3; letter-spacing: -.02em; }
.qa .ans { max-width: 520px; padding: 0 40px 24px 0; color: var(--on-glow-2); }

/* ---------- S11 Visit: glass panel ---------- */
.visit { padding-block: 40px; }
.panel { max-width: 1200px; margin-inline: auto; display: grid; justify-items: center; gap: 20px; padding: 32px 20px 20px; text-align: center;
  border-radius: var(--r-lg); box-shadow: var(--rim);
  background: linear-gradient(140deg, rgb(255 255 255 / .16) -1%, rgb(255 255 255 / .11) 48%, rgb(255 255 255 / .04)); background-color: rgb(18 32 77 / .25);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.panel .h2 { max-width: 700px; }
.panel .body-m { max-width: 600px; }
.book { display: grid; gap: 14px; width: 100%; max-width: 920px; text-align: left; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; letter-spacing: .5px; text-transform: uppercase; }
.req { text-transform: none; letter-spacing: 0; }
.field input, .field select { width: 100%; height: 48px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid rgb(255 255 255 / .6);
  background: rgb(18 32 77 / .35); color: #fff; font: 400 16px/1.2 var(--f-body); color-scheme: dark; appearance: none; -webkit-appearance: none; }
.field select { background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
.book .btn { width: 100%; min-height: 50px; }
.sent { display: none; padding: 12px 14px; border-radius: var(--r-sm); background: #fff; color: var(--dusk); }
.sent:target { display: block; }
.visit-info { display: grid; justify-items: center; gap: 4px; }
.hours, .addr { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.addr span { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(255 255 255 / .5); }
.visit-call { display: none; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 14px; color: #fff; }
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust .i { width: 16px; height: 16px; }

/* ---------- Footer (glow) ---------- */
.site-foot { padding: 40px 0 max(32px, env(safe-area-inset-bottom)); }
.f-top { display: grid; gap: 32px; }
.f-rows { display: none; }
.f-row { display: flex; align-items: center; justify-content: space-between; min-height: 89px; padding: 0 36px; border-radius: var(--r-sm);
  font-size: 18px; background: var(--glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--rim);
  transition: background-color 200ms ease-out; }
.f-row .arr { width: 25px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .f-row:hover { background: var(--glass-2); } }
.f-mid { display: grid; gap: 24px; margin-top: 32px; }
.f-hours { display: none; }
.f-k { font-size: 20px; letter-spacing: -.02em; margin-bottom: 8px; }
.f-contact a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--on-glow-2); }
.f-hours dl { display: grid; gap: 6px; color: var(--on-glow-2); }
.f-hours dl div { display: flex; justify-content: space-between; gap: 16px; max-width: 360px; }
.f-hours dt { color: #fff; }
.f-bot { display: grid; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / .1); }
.f-mark { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; }
.f-mark .brand-dot { margin-inline: 14px; }
.f-copy { font: 400 14px/1.4 var(--f-display); letter-spacing: -.01em; color: var(--on-glow-2); }
.f-legal { font-size: 13px; color: var(--on-glow-2); }

/* Bundled desktop pages other than Home have no hero under the floating bar: start their content below it */
@media (min-width: 1080px) { body:has(main > [data-pg]:not([data-pg="home"]):is(:target, :has(:target))) main { padding-top: 88px; } }
/* Section anchors clear the sticky header */
main [id], .site-foot { scroll-margin-top: 96px; }

/* =================================================================== Tablet 760+ */
@media (min-width: 760px) {
  :root { --side: 40px; }
  .pill-cta { display: inline-flex; margin-left: auto; }
  .menu-btns { margin-left: 0; }
  .site-foot { padding-bottom: 60px; }
  .hero-in { padding-bottom: 60px; min-height: max(640px, calc(100svh - 34px)); }
  /* Scrim only where text sits (bottom-left row at .6, the headline band at .3+), so the peach stays bright in the empty corners as in the original */
  .hero-in { background:
      radial-gradient(72% 46% at 28% 100%, rgb(18 32 77 / .6) 0 40%, transparent 100%),
      radial-gradient(50% 36% at 50% 50%, rgb(18 32 77 / .32) 0 60%, transparent 100%); }
  .hero .btn-glass { background: rgb(18 32 77 / .5); }   /* its own dark glass: white text stays AA wherever the glow drifts */
  .hero-row { flex-direction: row; align-items: flex-end; column-gap: 54px; row-gap: 30px; flex-wrap: wrap; }
  .hero-ctas { display: flex; gap: 10px; }
  .hero-ctas .btn { width: auto; min-height: 50px; }
  .menu, .about, .room, .events, .reviews, .offer, .faq { padding-block: 80px; }
  .menu-photo img { aspect-ratio: 16 / 9; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat { min-height: 220px; }
  .cases { grid-auto-flow: row; grid-auto-columns: auto; margin: 48px 0 0; padding: 0; overflow: visible; gap: 20px; }
  .cases { grid-template-columns: minmax(0, 1fr); }
  .case { height: clamp(460px, 50vw, 720px); padding: 48px 40px 40px 48px; }
  .case-card { left: auto; right: 40px; bottom: 40px; width: 400px; padding: 40px; }
  .chip { margin-top: 16px; }
  .case-a { margin-top: 20px; }
  .philo { padding: 140px 0; }
  .philo > .wrap { display: block; }
  .philo .mega { margin-top: 60px; }
  .philo-row { display: grid; gap: 30px; justify-items: start; width: min(544px, 100%); margin: 100px 0 0 auto; }
  .step { display: flex; padding: 48px; gap: 60px; align-items: center; }
  .step > div { display: block; }
  .step-n { flex: none; }
  .step p { margin-top: 8px; }
  .step-n { width: 118px; font-size: clamp(80px, 65.1px + 3.81vw, 120px); }
  .step-4 { display: flex; }
  .step p { max-width: 400px; }
  .src-x { display: grid; }
  .sources { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .src { min-height: 130px; padding: 20px 24px; }
  .minis { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; max-width: 900px; margin: 60px auto 0; padding: 0; overflow: visible; gap: 20px; }
  .plans { grid-template-columns: 1fr 1fr; gap: 20px; }
  .plan { min-height: 620px; padding: 40px; }
  .plan-badge { top: 40px; }
  .plan-price, .plan-dark .plan-price { margin-top: 112px; }
  .plan-chip { margin-top: 64px; }
  .plan-d { margin-top: auto; padding-top: 40px; }
  .journal { padding: 100px 0; }
  .journal .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px 20px; }
  .jr-intro { grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
  .jr-h { font-family: var(--f-body); max-width: 325px; }
  .jr-all { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; }
  .post { display: grid; gap: 20px; align-content: start; }
  .post .h3 { margin-top: -6px; }
  .post img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-lg); margin-top: 10px; }
  .post-x { color: var(--c-muted); }
  .faq .wrap { grid-template-columns: 1fr 1fr; gap: 60px; }
  .faq-l .body-m { max-width: 380px; }
  .qa summary { min-height: 88px; font-size: 20px; }
  .visit { padding-block: 100px; }
  .panel { padding: 100px 60px; gap: 30px; }
  .book { grid-template-columns: 1.2fr .8fr 1.4fr auto; align-items: end; gap: 14px; }
  .book .sent { grid-column: 1 / -1; }
  .book .btn { width: auto; }
  .visit-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }
  .visit-call { display: inline-flex; }
  .f-hours { display: block; }
  .f-rows { display: grid; gap: 10px; }
  .f-mid { grid-template-columns: 1fr 1fr; margin-top: 100px; }
  .f-bot { grid-template-columns: 1fr auto; align-items: center; margin-top: 80px; }
  .f-copy { font-size: 16px; }
  .f-legal { font-size: 14px; }
}

/* =================================================================== Desktop 1080+ (ncs-desktop) */
@media (min-width: 1080px) {
  :root { --s-5: 100px; --s-6: 200px; }
  .site-head { padding: 12px 40px; }
  .site-head .brand-dot, .site-head .tagline, .site-head .site-nav { display: inline-flex; }
  .site-nav { margin-left: auto; }
  .wordmark { font-size: 20px; }
  .menu-btns, .smenu { display: none; }
  .pill-cta { margin-left: 0; height: 32px; min-height: 32px; padding: 6px 12px; font-size: 14px; background: var(--cta-bg); color: var(--cta-ink); }
  @media (hover: hover) and (pointer: fine) { .pill-cta:hover { background: var(--cta-bg); filter: brightness(1.15); } }
  .hero-in { min-height: max(700px, 100vh); padding: 60px 40px 60px; }
  .hero-h { padding-top: 60px; }
  .hero-p { font-size: 20px; }

  .stmt { padding: 200px 40px; }

  .menu { padding: 100px 0; }
  .menu .wrap { gap: 100px; }
  .menu .label { margin-bottom: -76px; }
  .menu-body { grid-template-columns: 520px 1fr; gap: 60px; align-items: start; }
  .menu-photo img { aspect-ratio: 520 / 619; }
  .mi summary { min-height: 79px; padding-block: 20px; }
  .mi[open] .pm { visibility: hidden; }
  .mi-p { width: 312px; margin: -79px 0 0 auto; padding: 24px 0 40px; min-height: 380px; position: relative; }

  .about { padding: 100px 0; }
  .about-row { grid-template-columns: 1fr auto; align-items: end; gap: 40px; margin-top: 24px; }
  .stats { display: flex; align-items: flex-end; gap: 40px; margin-top: 300px; }
  .stat { flex: 1; padding: 32px; }
  .stat:nth-child(1) { height: 420px; } .stat:nth-child(2) { height: 360px; } .stat:nth-child(3) { height: 300px; } .stat:nth-child(4) { height: 240px; }

  .room { padding: 100px 0; }
  .cases { margin-top: 60px; }

  .events { padding: 240px 0 0; }
  .ev-head { position: sticky; top: 200px; }
  .steps { gap: 40px; margin-top: 100px; }
  .step { position: sticky; top: 460px; min-height: 282px; padding: 80px; gap: 80px; align-items: flex-start; }
  .step .h3 { margin-top: 4px; }

  .reviews { padding: 200px 0 240px; }
  .sources { margin-top: 140px; }
  .quote { margin-top: 160px; }

  .offer { padding: 100px 0; }
  .plans { margin-top: 60px; }
  .plan { min-height: 660px; }

  .journal .wrap { grid-template-columns: 325px 1fr 1fr; gap: 20px; }
  .jr-intro { grid-column: auto; }

  .faq { padding: 200px 0; }
  .faq-l .body-m { margin-top: 20px; }
  .faq-l .btn { margin-top: 20px; }

  .visit { padding: 100px 0; }
  .panel { padding: 120px 100px 80px; }

  .site-foot { padding: 120px 0 80px; }
  .f-top { grid-template-columns: 1fr 453px; gap: 60px; }
  .f-line { max-width: 640px; }
  .f-mid { grid-template-columns: 1fr 453px; gap: 60px; margin-top: 140px; }
  .f-bot { margin-top: 100px; }
}

/* =================================================================== Motion (CSS only) */
@media (prefers-reduced-motion: no-preference) {
  /* The glow: fades in, then drifts on its 42 s loop */
  body::before, .smenu::before { animation: glow-in .3s ease-out backwards, drift 42s linear infinite; }

  /* Intro: hero letters fade in one by one (Deformo's timing x 0.478 on phones, x 0.696 on computers), then the sub-copy and buttons rise */
  .hw > span { animation: letter-in 191ms var(--ease-text) backwards; animation-delay: calc(143ms + var(--i) * 14ms); }
  .hero-sub { animation: rise-in 670ms var(--ease-text) 335ms backwards; }
  .hero-ctas { animation: rise-in 670ms var(--ease-text) 430ms backwards; }
  @media (min-width: 1080px) {
    .hw > span { animation-duration: 278ms; animation-delay: calc(209ms + var(--i) * 21ms); }
    .hero-sub { animation-duration: 974ms; animation-delay: 487ms; }
    .hero-ctas { animation-duration: 974ms; animation-delay: 626ms; }
  }
  .mi[open] .mi-p, .qa[open] .ans { animation: fade-in 400ms cubic-bezier(.34, 0, 0, 1); }

  @supports (animation-timeline: scroll()) {
    /* Header: transparent over the glow for the first 90vh, then the white bar */
    .site-head { animation: nav-solid steps(1, end) both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    body:has(main :target:not(#top)) .site-head { animation: none; }

    /* Statement: words start at white 55% (still 3:1 at this size) and fill to white as you read */
    .stmt { view-timeline-name: --stmt; }
    .sw { animation: word-fill linear both; animation-timeline: --stmt;
      animation-range: cover calc(18% + var(--i) * 1.4%) cover calc(23% + var(--i) * 1.4%); }

    /* Menu heading: words fade in on entry */
    .words > span { animation: fade-in linear both; animation-timeline: view();
      animation-range: entry calc(var(--i) * 2%) entry calc(50% + var(--i) * 2%); }

    /* Stat bars drop in; step tiles and prices fade in */
    .stat-bar { animation: bar-in linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
    .step { animation: fade-in linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    .plan-price { animation: fade-in linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }

    /* Room photos drift down 200px while each card crosses the screen */
    .case-media { animation: parallax linear both; animation-timeline: --case; animation-range: cover 0% cover 100%; }

    @media (min-width: 1080px) {
      /* Hero sticks while the statement slides over it; its content fades and lifts over the first 500px */
      .intro .hero { position: sticky; top: 0; z-index: 0; }
      .hero-in { animation: hero-out linear both; animation-timeline: scroll(root); animation-range: 0 500px; }
      .stmt { height: 200vh; margin-top: -30vh; padding: 0 40px; pointer-events: none;
        background: linear-gradient(to bottom, transparent 0 30vh, var(--scrim) 60vh); }
      .stmt-pin { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; }
      .sw { animation-range: contain calc(var(--i) * 3.6%) contain calc(var(--i) * 3.6% + 8%); }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
  .smenu, .sm-rows li { transition-delay: 0s !important; }
}

@keyframes letter-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(150px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes word-fill { from { opacity: .55; } to { opacity: 1; } }
@keyframes bar-in { from { opacity: 0; transform: translateY(-100%); } }
@keyframes parallax { from { transform: translateY(0); } to { transform: translateY(200px); } }
@keyframes hero-out { to { opacity: 0; transform: translateY(-230px); visibility: hidden; } }
@keyframes nav-solid {
  0% { --hd-bg: rgb(18 32 77 / .45); --hd-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); --hd-ink: #fff; --hd-sub: #fff;
       --pill-bg: transparent; --pill-bg-h: var(--glass); --pill-ink: #fff; --pill-rim: inset 0 0 0 1px rgb(255 255 255 / .3); --cta-bg: var(--light); --cta-ink: #000;
       --m-bg: var(--light); --m-ink: #000; }
  100% { --hd-bg: #fff; --hd-ink: #000; --hd-sub: rgb(0 0 0 / .6); --pill-bg: rgb(0 0 0 / .05); --pill-bg-h: rgb(0 0 0 / .1);
         --pill-ink: #000; --cta-bg: var(--dark); --cta-ink: #fff; --m-bg: var(--dusk); --m-ink: #fff;
         --hd-shadow: 0 .6px 1.1px -1px rgb(0 0 0 / .06), 0 2.3px 4.1px -2px rgb(0 0 0 / .06), 0 10px 18px -3px rgb(0 0 0 / .04); }
}