/* Layout: one court, lit by a real sky, sits behind the whole page and never cuts away. Scrolling flies the
   camera around it, plays one rally with the ball, and moves the evening from golden hour to floodlit night.
   The content floats over it in dark panels. One typeface, Archivo: narrow for headlines and numbers, wide and tracked
   for labels. A quiet header, a full-screen menu, and a thin index on the right edge. */
:root {
  --night: #0D1210;      /* the club after dark */
  --panel: rgba(12, 17, 15, .82);
  --stone: #ECE7DD;      /* concrete under floodlight, used as text */
  --mute: rgba(236, 231, 221, .64);
  --line: rgba(236, 231, 221, .16);
  --ball: #DCEF52;       /* the ball: progress, your bookings, the one bright thing */
  --f-disp: 'Archivo', 'Arial Narrow', Arial, sans-serif;   /* headlines: 700 at 72% width, uppercase */
  --f-ui: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Archivo', 'Arial Narrow', Arial, sans-serif;     /* labels: 600 at 87.5% width, uppercase, tracked */
  --gl: max(16px, env(safe-area-inset-left, 0px));
  --gr: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--stone); font: 400 15.5px/1.55 var(--f-ui); overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--night); }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ball); outline-offset: 3px; }
.mono { font: 600 11px/1.35 var(--f-mono); font-stretch: 87.5%; letter-spacing: .09em; text-transform: uppercase; color: var(--mute); }

/* the court behind everything, with a little film on top */
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; }
.vig { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(4, 6, 5, .6) 100%); }
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .07; background-size: 180px; mix-blend-mode: overlay; }
.no-gl body { background: linear-gradient(180deg, #3c4a63, #0D1210 70%) fixed; }
.tags { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .35s; will-change: transform; white-space: nowrap; }
.tag i { width: 22px; height: 22px; border-radius: 50%; background: var(--stone); color: #0D1210; font: 600 11px/22px var(--f-ui); text-align: center; font-style: normal; box-shadow: 0 0 0 5px rgba(236, 231, 221, .2); }
.tag span { font: 600 11px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .05em; text-transform: uppercase; background: rgba(12, 17, 15, .84); padding: 6px 8px; border-radius: 2px; }
.tag.on { opacity: 1; }

/* header: quiet, so the court leads. Wordmark left; booking and the menu right */
.top { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--gr) 18px var(--gl); background: linear-gradient(180deg, rgba(7, 10, 9, .55), rgba(7, 10, 9, 0)); pointer-events: none; transition: background-color .35s, padding .35s; }
.top.solid { background: rgba(9, 12, 11, .9); padding-top: calc(env(safe-area-inset-top, 0px) + 12px); padding-bottom: 12px; }
.top > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand svg { width: 26px; height: 26px; flex: none; }
.brand b { font: 700 15px/1 var(--f-ui); font-stretch: 125%; letter-spacing: .24em; text-transform: uppercase; }
.top .right { display: flex; align-items: center; gap: 10px; }
.top .book, .mbtn { height: 42px; display: inline-flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 2px; font: 700 11.5px/1 var(--f-ui); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.top .book { background: var(--ball); color: #0B0F0D; transition: filter .2s; } .top .book:hover { filter: brightness(1.07); }
.mbtn { box-shadow: inset 0 0 0 1px rgba(236, 231, 221, .45); background: rgba(7, 10, 9, .3); transition: background .2s; } .mbtn:hover { background: rgba(7, 10, 9, .6); }
.mbtn span { display: grid; gap: 5px; } .mbtn span i { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .3s; }
.mbtn[aria-expanded="true"] span i:first-child { transform: translateY(3.25px) rotate(45deg); } .mbtn[aria-expanded="true"] span i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
@media (max-width: 520px) { .top .book { display: none; } }

/* the rail: where you are in the story, on the right edge */
.rail { position: fixed; z-index: 29; right: var(--gr); top: 50%; transform: translateY(-50%); display: grid; gap: 4px; justify-items: end; }
.rail a { display: flex; align-items: center; gap: 12px; height: 26px; text-decoration: none; color: rgba(236, 231, 221, .55); }
.rail a span { font: 600 10.5px/1 var(--f-ui); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s; white-space: nowrap; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.rail a i { display: block; width: 14px; height: 2px; background: currentColor; transition: width .35s cubic-bezier(.2, .8, .2, 1), background .3s; }
.rail a:hover span { opacity: 1; transform: none; } /* labels on hover only, so the index never sits over a panel */
.rail a:hover { color: var(--stone); }
.rail a.cur { color: var(--stone); } .rail a.cur i { width: 34px; background: var(--ball); }
@media (max-width: 900px) { .rail { display: none; } }
@media (min-width: 901px) { main .sec { padding-left: 76px; padding-right: 76px; } } /* room for the index on the right edge */

/* the menu: a full-screen sheet of big links */
.menu { position: fixed; inset: 0; z-index: 28; background: #090C0B; display: grid; padding: calc(env(safe-area-inset-top, 0px) + 96px) var(--gr) calc(env(safe-area-inset-bottom, 0px) + 28px) var(--gl); overflow-y: auto; opacity: 0; transition: opacity .3s; }
.menu.on { opacity: 1; }
.m-in { width: 100%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; }
.m-links { display: grid; }
.m-links a { display: flex; align-items: baseline; gap: 18px; padding: 6px 0; text-decoration: none; color: rgba(236, 231, 221, .78); transition: color .2s, transform .3s; }
.m-links a em { width: 30px; font: 600 11px/1 var(--f-ui); font-stretch: 125%; letter-spacing: .12em; font-style: normal; color: var(--mute); }
.m-links a span { font: 700 clamp(42px, 7vw, 92px)/.95 var(--f-disp); font-stretch: 72%; text-transform: uppercase; letter-spacing: -.01em; }
.m-links a:hover { color: var(--stone); transform: translateX(8px); } .m-links a.cur { color: var(--stone); } .m-links a.cur em { color: var(--ball); }
.m-side { display: grid; gap: 18px; width: min(300px, 100%); }
.m-info { color: var(--mute); font-size: 14px; display: grid; gap: 14px; } .m-info p { margin: 0; }
@media (max-width: 760px) { .m-in { grid-template-columns: 1fr; gap: 28px; } .m-side { width: 100%; } .menu { padding-top: calc(env(safe-area-inset-top, 0px) + 86px); } }


/* page */
main { position: relative; z-index: 3; overflow-x: clip; }
.sec { position: relative; padding-left: var(--gl); padding-right: var(--gr); }
.in { max-width: 1200px; margin: 0 auto; }
.par { will-change: transform; }
.panel { background: var(--panel); border-radius: 12px; padding: clamp(20px, 2.6vw, 32px); box-shadow: 0 30px 70px -36px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06); }
/* panels: calm pastels taken from the club (sage turf, powder sky, soft clay, sand, mist), as soft two-tone gradients,
   with dark text. Each light panel redefines the three text colours, so everything inside follows */
:is(.facts, .sched, .matches, .price, .end) .panel { -webkit-backdrop-filter: blur(16px) saturate(1.15) brightness(1.08); backdrop-filter: blur(16px) saturate(1.15) brightness(1.08); --stone: #18231E; --mute: rgba(24, 35, 30, .64); --line: rgba(24, 35, 30, .14); color: var(--stone); box-shadow: 0 30px 70px -42px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .55); }
.facts .panel { background: linear-gradient(160deg, rgba(231, 240, 232, .56), rgba(205, 223, 209, .56)); }
.sched .panel { background: linear-gradient(160deg, rgba(232, 238, 245, .56), rgba(206, 218, 231, .56)); }
.matches .panel { background: linear-gradient(160deg, rgba(248, 234, 226, .56), rgba(234, 208, 193, .56)); }
.price .panel { background: linear-gradient(160deg, rgba(248, 243, 233, .56), rgba(233, 222, 201, .56)); }
.end .panel { background: linear-gradient(160deg, rgba(238, 238, 233, .56), rgba(215, 220, 212, .56)); }
.panel .btn:not(.ball) { color: #F4EEE2; } .panel .btn:not(.ball):hover { background: #000; }
.panel .days button[aria-pressed="true"] { color: #F4EEE2; }
.panel .strip { border-color: rgba(24, 35, 30, .28); } .panel .strip div { border-right-color: rgba(24, 35, 30, .2); }
.panel .strip .hi { background: rgba(24, 35, 30, .09); color: var(--stone); } .panel .strip .hi span { color: var(--mute); } /* peak hours: a soft tint, not a black block */
.panel .slot { box-shadow: inset 0 0 0 1px rgba(24, 35, 30, .36); }
.panel .slot:hover { background: rgba(24, 35, 30, .08); }
.panel .slot.busy { background: rgba(24, 35, 30, .13); box-shadow: none; }
.panel .slot.open { box-shadow: inset 0 0 0 1px var(--stone); background: repeating-linear-gradient(135deg, rgba(24, 35, 30, .16) 0 4px, transparent 4px 8px); }
.panel .slot.mine { background: var(--ball); color: #11160F; box-shadow: inset 0 0 0 1px rgba(24, 35, 30, .22); }
.panel .slot.past { box-shadow: inset 0 0 0 1px var(--line); }
.panel .grid .cn, .panel .grid > span:first-child { background: rgba(221, 229, 238, .9); box-shadow: 6px 0 8px -6px rgba(24, 35, 30, .22); }
.panel .legend .f::before { box-shadow: inset 0 0 0 1px rgba(24, 35, 30, .45); }
.panel .legend .b::before { background: rgba(24, 35, 30, .16); }
.panel .legend .o::before { background: repeating-linear-gradient(135deg, rgba(24, 35, 30, .35) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--stone); }
h2.h { margin: 8px 0 12px; font: 700 clamp(36px, 4.6vw, 64px)/1 var(--f-disp); font-stretch: 72%; text-transform: uppercase; letter-spacing: -.02em; text-wrap: balance; }
.lead { margin: 0; color: var(--mute); max-width: 48ch; font-size: clamp(15.5px, 1.15vw, 17px); }
.btn { height: 44px; padding: 0 18px; border-radius: 2px; background: var(--stone); color: #0D1210; font-weight: 700; font-size: 13.5px; font-stretch: 87.5%; letter-spacing: .07em; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap; transition: background .2s; }
.btn:hover { background: #fff; }
.btn.ball { background: var(--ball); color: #11160F; font-weight: 700; } .btn.ball:hover { filter: brightness(1.08); }
.btn.line { background: rgba(12, 17, 15, .4); color: var(--stone); box-shadow: inset 0 0 0 1px rgba(236, 231, 221, .5); }
.btn.line:hover { background: rgba(12, 17, 15, .75); }

.end .call::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: min(1100px, 100%); height: 100%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(6, 9, 8, .5), transparent); pointer-events: none; }
.end .call { position: relative; }

/* hero: the court fills the screen; the words sit low on the left, the racket and ball rest on the turf to the right */
.hero { min-height: 100vh; min-height: 100svh; display: grid; align-items: end; padding-top: calc(env(safe-area-inset-top, 0px) + 96px); padding-bottom: clamp(28px, 8vh, 80px); }
.hshade { position: fixed; inset: 0; z-index: 1; pointer-events: none; will-change: opacity; /* darkens where the words sit (left and low), leaves the roof and the sunset bright */
  background: linear-gradient(90deg, rgba(6, 9, 8, .8) 0%, rgba(6, 9, 8, .6) 28%, rgba(6, 9, 8, .22) 52%, rgba(6, 9, 8, 0) 70%), linear-gradient(180deg, rgba(6, 9, 8, 0) 28%, rgba(6, 9, 8, .3) 58%, rgba(6, 9, 8, .62)); }
.hero .in { width: 100%; }
.hero .copy { max-width: 760px; }
.hero .kick { margin: 0 0 22px; font: 600 11px/1 var(--f-ui); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; color: var(--stone);  text-shadow: 0 1px 10px rgba(0, 0, 0, .8), 0 0 2px rgba(0, 0, 0, .6); }
.hero .kick i { display: inline-block; vertical-align: 1px; margin-right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--ball); box-shadow: 0 0 12px rgba(220, 239, 82, .8); }
.hero h1 { margin: 0; font: 700 clamp(58px, 7.4vw, 124px)/.88 var(--f-disp); font-stretch: 72%; text-transform: uppercase; letter-spacing: -.012em; text-shadow: 0 2px 40px rgba(0, 0, 0, .35); }
.hero .sub { margin: 22px 0 0; max-width: 40ch; font-size: clamp(16px, 1.2vw, 18px); color: rgba(236, 231, 221, .9); text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.hero .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 30px; }
.next { height: 52px; display: inline-flex; align-items: center; gap: 14px; padding: 0 20px; border-radius: 2px; background: var(--ball); color: #0B0F0D; text-decoration: none; transition: filter .2s; }
.next:hover { filter: brightness(1.07); }
.next small { font: 700 10.5px/1 var(--f-ui); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; opacity: .7; white-space: nowrap; }
.next b { font: 700 22px/1 var(--f-disp); font-stretch: 72%; text-transform: uppercase; white-space: nowrap; }
.next svg { width: 18px; height: 12px; }
.tlink { font: 600 11.5px/1 var(--f-ui); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: 8px 0; border-bottom: 1px solid rgba(236, 231, 221, .5); }
.tlink:hover { border-color: var(--stone); }
.hint { margin: 26px 0 0; display: flex; align-items: center; gap: 10px; font: 600 10.5px/1.2 var(--f-ui); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.hint i { flex: none; width: 28px; height: 1px; background: currentColor; transform-origin: left; animation: sweep 2.2s ease-in-out infinite; }
@keyframes sweep { 0% { transform: scaleX(0); } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@media (max-width: 760px) {
  .hero h1 { font-size: clamp(54px, 15vw, 96px); }
  .hero .kick { font-size: 10px; letter-spacing: .16em; margin-bottom: 16px; } .hero .kick span { display: none; }
  .next { width: 100%; justify-content: space-between; }
  .hshade { background: linear-gradient(180deg, rgba(6, 9, 8, .05) 8%, rgba(6, 9, 8, .55) 36%, rgba(6, 9, 8, .8) 62%, rgba(6, 9, 8, .9)); }
}

.facts { min-height: 190vh; padding-top: 30vh; }
.facts .wrapf { display: grid; width: min(470px, 100%); gap: 14px; }
.fact { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.fact i { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--stone); display: grid; place-items: center; font: 600 12px/1 var(--f-ui); font-style: normal; }
.fact b { font-weight: 600; font-size: 16px; } .fact p { margin: 0; color: var(--mute); font-size: 14.5px; }
.fact + .fact { border-top: 1px solid var(--line); padding-top: 14px; }

.sched { min-height: 170vh; padding-top: 34vh; }
.sched .in { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: end; }
.sched .panel { width: min(760px, 100%); display: grid; gap: 16px; min-width: 0; }
.days { display: flex; gap: 4px; flex-wrap: wrap; }
.days button { height: 34px; padding: 0 11px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 500; }
.days button[aria-pressed="true"] { background: var(--stone); color: #0D1210; box-shadow: none; }
.gridw { overflow-x: auto; scrollbar-width: thin; min-width: 0; }
.grid { display: grid; grid-template-columns: 74px repeat(17, minmax(34px, 1fr)); gap: 3px; min-width: 690px; }
.grid .hh { font: 600 10px/1 var(--f-mono); font-stretch: 87.5%; color: var(--mute); text-align: center; padding-bottom: 4px; }
.grid .cn { font-size: 12.5px; font-weight: 600; display: grid; align-content: center; line-height: 1.15; position: sticky; left: 0; z-index: 1; background: #121815; box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .8); }
.grid > span:first-child { position: sticky; left: 0; z-index: 1; background: #121815; }
.grid .cn small { font-weight: 400; color: var(--mute); font-size: 11px; }
.slot { height: 38px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(236, 231, 221, .42); font: 600 10.5px/1 var(--f-mono); font-stretch: 87.5%; color: var(--stone); }
.slot:hover { background: rgba(236, 231, 221, .16); }
.slot.busy { background: rgba(236, 231, 221, .1); box-shadow: none; cursor: default; }
.slot.open { box-shadow: inset 0 0 0 1px var(--stone); background: repeating-linear-gradient(135deg, rgba(236, 231, 221, .16) 0 4px, transparent 4px 8px); }
.slot.mine { background: var(--ball); color: #11160F; box-shadow: none; }
.slot.past { opacity: .25; cursor: default; box-shadow: inset 0 0 0 1px var(--line); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--mute); }
.legend span::before { content: ""; display: inline-block; width: 14px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 1px; }
.legend .f::before { box-shadow: inset 0 0 0 1px rgba(236, 231, 221, .5); }
.legend .b::before { background: rgba(236, 231, 221, .18); }
.legend .o::before { background: repeating-linear-gradient(135deg, rgba(236, 231, 221, .4) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--stone); }
.legend .m::before { background: var(--ball); }
.legend #freeCount::before { display: none; }

.matches { min-height: 150vh; padding-top: 28vh; }
.matches .panel { width: min(640px, 100%); }
.mrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 10px 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mrow:first-of-type { border-top: 1px solid var(--stone); }
.mrow time { font: 700 28px/1 var(--f-disp); font-stretch: 72%; text-transform: uppercase; }
.mrow b { display: block; font-weight: 600; } .mrow span.s { color: var(--mute); font-size: 13.5px; }
.seats { display: flex; gap: 4px; } .seats i { width: 12px; height: 12px; border-radius: 50%; background: var(--stone); } .seats i.e { background: transparent; box-shadow: inset 0 0 0 1.5px var(--stone); }
.mrow .btn { height: 36px; font-size: 13.5px; padding: 0 14px; }
.empty { padding: 16px 0; color: var(--mute); }
@media (max-width: 560px) { .mrow { grid-template-columns: 52px minmax(0, 1fr) auto; } .mrow time { font-size: 22px; } .mrow .seats { grid-column: 2; } }

.first { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.first p { margin: 0; max-width: 54ch; color: var(--stone); } .first b { font-weight: 600; }

.price { min-height: 140vh; padding-top: 30vh; }
.price .panel { display: grid; gap: 20px; }
.prow { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; align-items: center; }
.prow > span { font-weight: 600; } .prow > span small { display: block; font-weight: 400; color: var(--mute); font-size: 12.5px; }
.strip { display: flex; height: 54px; border: 1px solid var(--stone); border-radius: 4px; overflow: hidden; }
.strip div { display: grid; align-content: center; padding: 0 12px; min-width: 0; border-right: 1px solid var(--stone); font-size: 12.5px; line-height: 1.25; }
.strip div:last-child { border-right: 0; }
.strip b { font-weight: 600; font-size: 14.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.strip span { color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip .hi { background: var(--stone); color: #0D1210; } .strip .hi span { color: rgba(13, 18, 16, .65); }
.extras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; border-top: 1px solid var(--line); padding-top: 14px; }
.extras dt { color: var(--mute); font-size: 13px; } .extras dd { margin: 4px 0 0; font: 700 24px/1.1 var(--f-disp); font-stretch: 72%; text-transform: uppercase; } .extras dd small { display: block; font: 400 12px/1.3 var(--f-ui); text-transform: none; color: var(--mute); margin-top: 3px; }
.tax { margin: 0; font-size: 12.5px; color: var(--mute); }
@media (max-width: 760px) { .prow { grid-template-columns: 1fr; gap: 6px; } .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } .strip div { padding: 0 7px; } .strip b { font-size: 12.5px; } }


.end { padding-top: 36vh; padding-bottom: 40px; }
.end .call { text-align: center; display: grid; justify-items: center; gap: 14px; margin-bottom: 30vh; }
.end .call h2 { margin: 0; font: 700 clamp(40px, 6vw, 84px)/1 var(--f-disp); font-stretch: 72%; text-transform: uppercase; letter-spacing: -.02em; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .5); max-width: 16ch; }
.visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 30px; }
.visit h3 { margin: 0 0 10px; font: 600 11px/1.3 var(--f-mono); font-stretch: 87.5%; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); }
.visit p { margin: 0; } .visit ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .visit li { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 10px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--f-mono); } .faq details[open] summary::after { content: "–"; }
.faq p { margin: 0 0 12px; color: var(--mute); font-size: 14.5px; }
@media (max-width: 900px) { .visit { grid-template-columns: 1fr; } }
.foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between; font-size: 12.5px; color: var(--mute); }

/* booking sheet */
.veil { position: fixed; inset: 0; z-index: 50; background: rgba(4, 6, 5, .55); opacity: 0; transition: opacity .25s; }
.veil.on { opacity: 1; }
.sheet { position: fixed; z-index: 51; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: #141A17; color: var(--stone); overflow-y: auto; transform: translateX(100%); transition: transform .32s cubic-bezier(.2, .7, .1, 1); padding: calc(env(safe-area-inset-top, 0px) + 22px) max(22px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 28px) 22px; display: grid; gap: 20px; align-content: start; border-left: 1px solid var(--line); }
.sheet.on { transform: none; }
@media (max-width: 600px) { .sheet { top: auto; left: 0; width: 100%; max-height: 88svh; border-radius: 12px 12px 0 0; border-left: 0; transform: translateY(100%); padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); } }
.sh-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.sh-top h2 { margin: 4px 0 0; font: 700 32px/1.05 var(--f-disp); font-stretch: 72%; text-transform: uppercase; }
.x { width: 36px; height: 36px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line); font-size: 18px; flex: none; }
.sheet fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.sheet legend, .sheet label > span { font: 600 10.5px/1.3 var(--f-mono); font-stretch: 87.5%; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); padding: 0; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { height: 38px; min-width: 58px; padding: 0 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; }
.chips button[aria-pressed="true"] { background: var(--stone); color: #0D1210; box-shadow: none; }
.chips button:disabled { opacity: .3; text-decoration: line-through; cursor: not-allowed; }
.addon { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.addon b { font-weight: 600; } .addon small { display: block; color: var(--mute); font-size: 13px; }
.step { display: inline-flex; align-items: center; box-shadow: inset 0 0 0 1px var(--line); border-radius: 2px; }
.step button { width: 36px; height: 36px; font-size: 18px; } .step output { min-width: 22px; text-align: center; font-weight: 600; }
.addon input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--ball); }
.fields { display: grid; gap: 10px; } .fields label { display: grid; }
.fields input { height: 44px; padding: 0 12px; border-radius: 2px; border: 1px solid var(--line); background: #0D1210; }
.sum { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--stone); }
.sum .tot { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.sum .tot b { font: 700 30px/1 var(--f-disp); font-stretch: 72%; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.sum p { margin: 0; color: var(--mute); font-size: 13.5px; }
.err { margin: 0; min-height: 1.2em; color: #F0A08A; font-size: 13.5px; }
.ok { display: grid; gap: 10px; padding: 18px; border-radius: 2px; background: var(--ball); color: #11160F; }
.ok b { font: 700 26px/1.1 var(--f-disp); font-stretch: 72%; text-transform: uppercase; } .ok p { margin: 0; font-size: 14.5px; }
.who { display: flex; gap: 8px; flex-wrap: wrap; }
.who span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--stone); color: #0D1210; font-size: 12px; font-weight: 600; }
.who span.e { background: transparent; color: var(--mute); box-shadow: inset 0 0 0 1.5px var(--stone); }
@media (prefers-reduced-motion: reduce) { .sheet, .veil, .menu, .rail a i, .rail a span { transition: none; } .hint i { animation: none; } }

/* demo label, same as the other Organoo concept demos */
.demo-badge { position: fixed; right: var(--gr); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 27; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; background: rgba(9, 12, 11, .78); border: 1px solid rgba(236, 231, 221, .16); color: var(--stone); font: 500 12px/1 var(--f-ui); }
.demo-badge b { font-weight: 700; }
.demo-badge button { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(236, 231, 221, .12); font-size: 13px; line-height: 1; }