/* ==========================================================================
   Big Deal · Sortd
   Colours from the room: charcoal walls, navy leather (the Sortd logo navy),
   warm amber light, cream walls. A soft butter yellow is the one accent and
   is kept to buttons and a few highlights.
   ========================================================================== */

:root{
  --navy:#043D5B; --butter:#F4DB8E; --butter-hover:#F8E6AE; --cream:#F0EAD8;
  --radius:14px;
  --font-display:'Bebas Neue',Impact,sans-serif;
  --font-body:'Barlow',Arial,sans-serif;
}
:root{
  --bg:#141316; --bg-2:#1A191D; --card:#1F1E23; --ink:#EEE8DA; --muted:#A8A193;
  --rule:rgba(238,232,218,.12); --hi:#F4DB8E; --nav-bg:rgba(20,19,22,.9);
  --shadow:0 18px 40px rgba(0,0,0,.45); color-scheme:dark;
}
/* a quiet per-category tint for eyebrows and card edges */
body{--cat:var(--hi)}
[data-cat="corporate"]{--cat:#8FB6D3}
[data-cat="social"]{--cat:#E8B98A}
[data-cat="entertainment"]{--cat:#F4DB8E}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6;transition:background .3s,color .3s}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1;letter-spacing:.01em;margin:0}
.w{max-width:1120px;margin:0 auto;padding:0 20px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cat)}
h2{font-size:clamp(36px,5.6vw,58px);margin:6px 0 10px}
.lede{color:var(--muted);max-width:60ch;font-size:18px;margin-bottom:32px}
section{padding:clamp(56px,8vw,92px) 0}
section+section{border-top:1px solid var(--rule)}
:focus-visible{outline:3px solid var(--butter);outline-offset:3px}

/* photos */
.dn,.dn picture{display:block;width:100%;height:100%}
.dn img{width:100%;height:100%;object-fit:cover}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:var(--radius);
  font:700 15px/1 var(--font-body);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .2s,border-color .2s}
.btn-accent{background:var(--butter);color:#18222B}
.btn-accent:hover{background:var(--butter-hover)}
.btn-ghost{border-color:currentColor;color:inherit;background:transparent}
.btn-ghost:hover{background:rgba(127,127,127,.12)}
.btn-sm{min-height:38px;padding:0 14px;font-size:14px}

.setup-banner{background:var(--butter);color:#18222B;font-size:13px;text-align:center;padding:8px 16px;font-weight:600}
.setup-banner:empty{display:none}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);color:var(--cream);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav-row{display:flex;align-items:center;gap:18px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cream);flex:0 0 auto}
.logo-mark{display:block;width:100px;aspect-ratio:600/136;background:var(--cream);
  -webkit-mask:url(img/sortd-logo.png) center/contain no-repeat;mask:url(img/sortd-logo.png) center/contain no-repeat}
.logo-sub{font-family:var(--font-display);font-size:19px;letter-spacing:.06em;padding:3px 9px 1px;border:1.5px solid rgba(240,234,216,.6);border-radius:9px;line-height:1}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-links a{color:rgba(240,234,216,.8);font:600 14.5px var(--font-body);padding:10px 12px;border-radius:10px;text-decoration:none;white-space:nowrap}
.nav-links a:hover{color:#fff;background:rgba(240,234,216,.08)}
.nav-links a[aria-current="page"]{color:var(--butter)}
.nav-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.nav .btn-ghost{color:var(--cream);border-color:rgba(240,234,216,.45)}
.menu-btn{display:none;background:none;border:0;color:var(--cream);width:44px;height:44px;cursor:pointer}
.menu-btn span{display:block;width:22px;height:2px;background:currentColor;margin:5px auto}
@media(max-width:900px){
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:#141316;padding:8px 20px 20px;border-bottom:1px solid rgba(240,234,216,.12)}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:14px 4px;font-size:17px}
  .menu-btn{display:block;margin-left:auto}
  .nav-actions .btn{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(82vh,700px);display:flex;align-items:flex-end;color:var(--cream);overflow:hidden;background:#0d0c0f}
.hero-media{position:absolute;inset:0}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,11,14,.8) 0%,rgba(12,11,14,.45) 50%,rgba(12,11,14,.05) 80%),linear-gradient(180deg,transparent 45%,rgba(12,11,14,.85) 100%)}
@media(max-width:760px){.hero-media::after{background:linear-gradient(180deg,rgba(12,11,14,.45),rgba(12,11,14,.9))}}
.hero-inner{position:relative;width:100%;padding-top:110px;padding-bottom:44px}
.hero .eyebrow{color:rgba(240,234,216,.8)}
.hero h1{font-size:clamp(50px,8.6vw,104px);max-width:14ch;margin:10px 0 16px}
.hero h1 em{font-style:normal;color:var(--butter);display:block}
.hero .lead{max-width:54ch;font-size:clamp(17px,1.6vw,19px);color:rgba(240,234,216,.88);margin-bottom:26px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero .btn-ghost{color:var(--cream)}
.hero-facts{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:36px;padding-top:18px;border-top:1px solid rgba(240,234,216,.2);font-size:15px;color:rgba(240,234,216,.8)}
.hero-facts b{font-family:var(--font-display);font-weight:400;font-size:26px;color:var(--cream);margin-right:8px;letter-spacing:.02em}

/* ---------- Video ---------- */
.video{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{position:absolute;inset:0;border:0;padding:0;cursor:pointer;background:none;color:var(--cream)}
.video-play .dn{position:absolute;inset:0}
.video-play::after{content:"";position:absolute;inset:0;background:rgba(10,9,12,.35)}
.video-play .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;font:700 16px var(--font-body)}
.video-play .play i{width:74px;height:74px;border-radius:50%;background:var(--butter);display:grid;place-items:center}
.video-play .play i::before{content:"";border-left:20px solid #18222B;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.photos figure{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
@media(max-width:640px){.photos{grid-template-columns:1fr 1fr}.photos figure:last-child{display:none}}

/* ---------- Category cards (home) ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cat-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;text-decoration:none;transition:transform .15s,box-shadow .2s}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.cat-card .img{aspect-ratio:4/3}
.cat-card .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1;border-top:3px solid var(--cat)}
.cat-card h3{font-size:34px}
.cat-card p{color:var(--muted);font-size:15.5px}
.cat-card span{margin-top:auto;padding-top:10px;font-weight:700;font-size:14.5px;color:var(--cat)}
@media(max-width:860px){.cats{grid-template-columns:1fr}}

/* ---------- Occasions (category pages) ---------- */
.occasions{display:grid;gap:16px}
.occasion{display:grid;grid-template-columns:1fr 1.3fr;gap:28px;background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--cat);border-radius:var(--radius);padding:26px 28px}
.occasion h3{font-size:34px;margin-bottom:8px}
.occasion .who{color:var(--muted);font-size:15.5px}
.occasion .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.occasion .tags span{font-size:13px;border:1px solid var(--rule);border-radius:999px;padding:4px 11px;color:var(--muted)}
.qa{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.qa li{display:grid;gap:3px}
.qa q{quotes:none;font-style:italic;color:var(--muted);font-size:15.5px}
.qa q::before{content:"“"}.qa q::after{content:"”"}
.qa p{font-size:16px}
@media(max-width:800px){.occasion{grid-template-columns:1fr;gap:18px;padding:22px}}

/* ---------- Layouts ---------- */
.layouts{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:12px}
.layout{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:18px}
.layout svg{width:100%;height:50px;margin-bottom:10px;color:var(--cat)}
.layout h4{font-size:24px}
.layout p{font-size:14px;color:var(--muted)}
.cap-note{font-size:14.5px;color:var(--muted);margin-top:16px}
@media(max-width:900px){.layouts{grid-template-columns:repeat(2,1fr)}}

/* ---------- CTA band ---------- */
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;background:var(--navy);color:var(--cream);border-radius:var(--radius);padding:30px 32px}
.cta-band h3{font-size:36px;margin-bottom:4px}
.cta-band p{color:rgba(240,234,216,.82);max-width:52ch}
.cta-band .btns{display:flex;flex-wrap:wrap;gap:10px}
.cta-band .btn-ghost{color:var(--cream)}

/* ---------- Availability calendar (book page only) ---------- */
.cal-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.cal{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:16px}
.cal h4{font-size:24px;text-align:center;margin-bottom:10px}
.cal table{width:100%;border-collapse:collapse}
.cal th{font-size:11px;color:var(--muted);font-weight:700;padding:4px 0}
.cal td{text-align:center;padding:3px 0}
.cal td .day{display:block;width:32px;height:32px;line-height:32px;margin:0 auto;border-radius:10px;font-size:13.5px}
.cal td.open .day{background:rgba(120,170,120,.16);font-weight:600}
.cal td.held .day{background:rgba(232,163,61,.22);font-weight:600;box-shadow:inset 0 0 0 2px rgba(232,163,61,.8)}
.cal td.booked .day{background:var(--rule);color:var(--muted);text-decoration:line-through}
.cal td.past .day{color:var(--rule)}
.cal td[data-date]{cursor:pointer}
.cal td[data-date]:hover .day,.cal td[data-date]:focus-visible .day{background:var(--butter);color:#18222B}
.cal td[data-date]:focus-visible{outline:none}
.cal-legend{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:18px;font-size:14px;color:var(--muted)}
.cal-legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-1px}
.cal-legend .l-open{background:rgba(120,170,120,.5)} .cal-legend .l-held{background:#E8A33D} .cal-legend .l-booked{background:#6B6E73}
.cal-status{text-align:center;font-size:13px;color:var(--muted);margin-top:10px}
.cal-status.error{color:#D9826A}

/* ---------- Confirm popup ---------- */
.confirm-overlay{position:fixed;inset:0;background:rgba(6,6,8,.6);display:flex;align-items:center;justify-content:center;padding:20px;z-index:90;opacity:0;pointer-events:none;transition:opacity .15s}
.confirm-overlay.open{opacity:1;pointer-events:auto}
.confirm-box{background:var(--card);color:var(--ink);border-radius:var(--radius);padding:28px;max-width:380px;width:100%;text-align:center;box-shadow:var(--shadow)}
.confirm-box h3{font-size:32px;margin-bottom:8px}
.confirm-box p{color:var(--muted);margin-bottom:22px}
.confirm-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.confirm-actions .btn-ghost{color:var(--ink)}

/* ---------- Book page ---------- */
.book-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
.direct{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:24px;display:grid;gap:12px}
.direct h3{font-size:28px}
.direct p{color:var(--muted);font-size:15.5px}
.direct .btn{width:100%}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:40px}
.fact{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:22px}
.fact h3{font-size:26px;margin-bottom:10px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ticks li{position:relative;padding-left:20px;color:var(--muted);font-size:15.5px}
.ticks li::before{content:"";position:absolute;left:2px;top:10px;width:8px;height:8px;border-radius:3px;background:var(--hi);opacity:.7}
@media(max-width:860px){.book-grid,.facts{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--rule);padding:15px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-weight:700;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-display);font-size:26px;line-height:.8;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);margin-top:8px}

/* ---------- Enquiry form ---------- */
.form-wrap{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:clamp(20px,4vw,30px)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
input,select,textarea{font:16px var(--font-body);color:var(--ink);background:var(--bg);border:1px solid var(--rule);border-radius:10px;padding:12px 14px;min-height:48px}
textarea{min-height:90px;resize:vertical}
.form-actions{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.form-note{font-size:13px;color:var(--muted)}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.foot{background:#0E0D10;color:var(--cream);padding:48px 0 30px}
.foot-row{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start}
.foot .logo-mark{width:120px;margin-bottom:10px}
.foot p{color:rgba(240,234,216,.65);font-size:15px;max-width:40ch}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot-links a{text-decoration:none;color:rgba(240,234,216,.85);font-size:15px}
.foot-links a:hover{color:var(--butter)}
.foot-ctas{display:flex;gap:10px;flex-wrap:wrap}
.foot .btn-ghost{color:var(--cream);border-color:rgba(240,234,216,.45)}
.foot-meta{margin-top:30px;font-size:13px;color:rgba(240,234,216,.4)}

/* ---------- Sticky mobile actions ---------- */
.sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:none;gap:10px}
.sticky .btn{flex:1;box-shadow:0 10px 24px rgba(0,0,0,.3)}
.sticky .btn-ghost{background:var(--card);color:var(--ink);border-color:var(--rule)}
@media(max-width:760px){.sticky{display:flex}body{padding-bottom:76px}}

/* ---------- Glass theme (every page) ----------
   A room image sits fixed behind the page (the scroll-driven walkthrough on
   home, a room photo elsewhere) and everything on top is clear glass. */
.glass-page{--glass:rgba(18,17,22,.3);--glass-strong:rgba(18,17,22,.46);--glass-edge:rgba(255,255,255,.16);--glass-hi:rgba(255,255,255,.1);
  --glass-blur:blur(18px) saturate(150%);
  --ink:#F3EEE2;--muted:rgba(240,234,216,.78);--card:var(--glass);--rule:rgba(255,255,255,.16);--hi:var(--butter);--cat:var(--butter);
  --shadow:0 18px 40px rgba(0,0,0,.3);background:#0d0c0f;color:var(--ink);color-scheme:dark}
.walk-bg,.page-bg{position:fixed;inset:0;z-index:0;background:#0d0c0f}
.page-bg .dn img{width:100%;height:100%;object-fit:cover}
/* only a whisper of shade at the very top and bottom, for the nav and the sticky buttons */

.page-bg::after{background:rgba(10,9,12,.22)}
.glass-page .hero,.glass-page section,.glass-page .foot{position:relative;z-index:1}
.glass-page section{background:transparent}
.glass-page section+section{border-top:0}

.glass-page .nav,.glass-page .hero-panel,.glass-page .cat-card,.glass-page .foot,.walk-stop .card,
.glass-page .occasion,.glass-page .layout,.glass-page .cta-band,.glass-page .cal,.glass-page .direct,.glass-page .fact,
.glass-page .form-wrap,.glass-page .faq,.glass-page .confirm-box,.glass-page .sticky .btn-ghost{
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 40px rgba(0,0,0,.22)}
.glass-page .nav{border-width:0 0 1px}
@media(max-width:900px){.glass-page .nav-links{background:var(--glass-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}}
.glass-page .foot{background:var(--glass-strong);border-width:1px 0 0;box-shadow:none}
.glass-page .cta-band{background:rgba(4,61,91,.38)}
.glass-page .faq{border-radius:var(--radius);padding:6px 22px}
.glass-page .faq details:last-child{border-bottom:0}
.glass-page .confirm-box{background:var(--glass-strong)}
.glass-page input,.glass-page select,.glass-page textarea{background:rgba(255,255,255,.07);border-color:var(--glass-edge);color:var(--ink)}
.glass-page select option{background:#1b1a1f;color:var(--ink)}
.glass-page .btn-ghost{background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.glass-page .sticky .btn-ghost{color:var(--ink)}
.glass-page .confirm-actions .btn-ghost{color:var(--ink)}
.glass-page h2,.glass-page .lede,.glass-page .hero h1,.glass-page .hero .lead,.glass-page section>.w>.eyebrow{text-shadow:0 2px 20px rgba(0,0,0,.5)}
/* labels stay light over the photos in day and night mode */
.glass-page .eyebrow,.glass-page .cat-card span{color:var(--butter)}
.glass-page .occasion,.glass-page .cat-card .body{border-left-color:rgba(244,219,142,.75);border-top-color:rgba(244,219,142,.75)}
.glass-page .layout svg{color:var(--butter)}
.glass-page .cal td.past .day{color:rgba(255,255,255,.25)}

/* hero: no dark wash, the words sit on a clear glass panel */
.glass-page .hero{background:transparent;min-height:calc(100vh - 64px)}
.glass-page .hero-inner{padding-top:40px}
.glass-page .hero-panel{max-width:640px;border-radius:22px;padding:clamp(22px,3vw,34px)}
.glass-page .hero-facts{border-top-color:rgba(255,255,255,.18)}
@media(max-width:760px){.glass-page .hero-panel{padding:20px}}

/* ---------- Walkthrough (home) ----------
   The walkthrough video scrubs with the scroll (app.js); the captions pin
   points in the video to places on the page. */
.walk-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.walk-room .eyebrow{color:var(--butter)}
.walk-stops{display:grid}
.walk-stop{min-height:150vh;display:flex;align-items:center;opacity:.25;transform:translateY(24px);transition:opacity .5s,transform .5s}
.walk-stop.on{opacity:1;transform:none}
.walk-stop:nth-child(even),.walk-stop:nth-child(3){justify-content:flex-end}
.walk-stop .card{max-width:440px;border-radius:20px;padding:18px 22px 20px;position:relative;overflow:hidden}
.walk-stop .card::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px;background:var(--butter)}
.walk-stop span{font:700 13px var(--font-body);letter-spacing:.16em;color:var(--butter)}
.walk-stop h3{font-size:clamp(34px,4vw,46px);margin:4px 0 6px}
.walk-stop p{color:rgba(240,234,216,.92);margin-bottom:12px}
/* phones: compact card, placed so the room it describes stays visible */
@media(max-width:760px){
  /* phones: when a stop is centred on screen, its card sits just under the nav, clear of the furniture
     that fills the lower part of the frame (the stop is 115vh tall, so its top is 7.5vh above the screen) */
  .walk-stop{min-height:115vh;align-items:flex-start;padding-top:calc(96px + 7.5vh)}
  .walk-stop:nth-child(even),.walk-stop:nth-child(3){justify-content:flex-start}
  /* ...except the screen stop, where the TV fills the top and the table is below: that card sits above the buttons */
  .walk-stop:nth-child(3){align-items:flex-end;padding-top:0;padding-bottom:calc(96px + 7.5vh)}
  .walk-stop .card{max-width:none;width:100%;padding:12px 16px 14px;background:var(--glass-strong)}
  .walk-stop span{font-size:11px}
  .walk-stop h3{font-size:28px;margin:2px 0 4px}
  .walk-stop p{font-size:14.5px;line-height:1.45;margin-bottom:8px}
  .walk-stop .ticks{gap:4px}
  .walk-stop .ticks li{font-size:13.5px;line-height:1.4;padding-left:16px}
  .walk-stop .ticks li::before{top:7px;width:6px;height:6px}
}
/* the still behind the video while it loads */
.walk-bg{background:#0d0c0f center/cover no-repeat}

/* the phone video reaches the TV and whiteboard before the long table, so that caption comes first there */
@media(max-aspect-ratio:1/1){.walk-stop:nth-child(1){order:1}.walk-stop:nth-child(2){order:3}.walk-stop:nth-child(3){order:2}.walk-stop:nth-child(4){order:4}.walk-stop:nth-child(5){order:5}}

/* ---------- Looping clips ---------- */
video.loop{display:block;object-fit:cover;background:#0d0c0f;opacity:0;transition:opacity .7s}
video.loop.on{opacity:1}
.page-bg-loop .loop-poster,.page-bg-loop video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-card .img{position:relative;overflow:hidden}
.cat-card .img video{position:absolute;inset:0;width:100%;height:100%}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--glass);border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 40px rgba(0,0,0,.22)}
.tile .vid{position:relative;aspect-ratio:16/10;background:#0d0c0f;overflow:hidden}
.tile .vid img,.tile .vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile figcaption{padding:14px 18px 16px;font:600 15.5px/1.35 var(--font-body);color:var(--ink)}
#inside{padding-top:0}
@media(max-width:860px){.strip{grid-template-columns:1fr}.tile .vid{aspect-ratio:16/9}}

/* layout chips that pop out on the long-table stop */
.setups-h{font:700 12px var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--butter);margin:14px 0 8px}
.setups{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.setups li{border:1px solid var(--glass-edge);background:rgba(255,255,255,.08);border-radius:12px;padding:8px 6px 7px;text-align:center;
  opacity:0;transform:translateY(10px) scale(.7);transition:opacity .35s,transform .45s cubic-bezier(.2,1.5,.4,1);transition-delay:calc(var(--i) * 90ms + 250ms)}
.walk-stop.on .setups li{opacity:1;transform:none}
.setups svg{width:100%;height:30px;color:var(--butter);display:block;margin-bottom:4px}
.setups b{font:600 12px var(--font-body);color:var(--ink)}
@media(prefers-reduced-motion:reduce){.setups li{transition:none;opacity:1;transform:none}}

/* "book by the hour" is the headline differentiator: filled pill under the hero title, bold first bullet */
.hourly-badge{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 14px;padding:8px 16px;border-radius:999px;
  background:var(--butter);color:#1a1712;font:600 15px/1.2 var(--font-body);box-shadow:0 6px 24px rgba(0,0,0,.28)}
.hourly-badge b{font:700 16px/1.2 var(--font-body);letter-spacing:.06em;text-transform:uppercase}
.hourly-badge b::before{content:"\23F1";margin-right:7px}
.walk-stop .ticks li b{color:var(--butter)}
@media(max-width:760px){.hourly-badge{font-size:13.5px;padding:7px 13px}.hourly-badge b{font-size:14px}}

/* scroll cue (home) and the "hide panels" eye button */
.scroll-cue{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:55;display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;transition:opacity .5s;color:#fff;font:600 13px var(--font-body);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.scroll-cue i{width:24px;height:38px;border:2px solid rgba(255,255,255,.9);border-radius:14px;position:relative;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.scroll-cue i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--butter);animation:cue 1.6s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
.scrolled .scroll-cue,.clean .scroll-cue{opacity:0}
.view-toggle{position:fixed;right:16px;bottom:100px;z-index:70;display:flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--glass-edge);background:var(--glass-strong);color:var(--ink);font:600 14px var(--font-body);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.view-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.view-toggle .ic-eye-off{display:none}
.clean .view-toggle .ic-eye{display:none}.clean .view-toggle .ic-eye-off{display:block}
.view-toggle:hover{border-color:var(--butter)}
body > *{transition:opacity .45s}
.clean > *:not(.walk-bg):not(.page-bg):not(.view-toggle):not(.scroll-cue):not(script):not(.page-sec):not(.split-sec){opacity:0!important;pointer-events:none!important}
/* full-screen pages keep their own background (colour or split videos) when the text is hidden */
.clean .page-sec .walk-stop,.clean .split-sec .walk-stop{opacity:0!important;pointer-events:none!important}
.clean .walk-stop{transition:none}
@media(max-width:760px){.view-toggle{bottom:140px;height:42px;padding:0 12px}.scroll-cue{display:none}}

/* desktop video skips the turn to the screen: that caption shows on phones only */
.walk-stop.phone-only{display:none}
@media(max-aspect-ratio:1/1){.walk-stop.phone-only{display:flex}.walk-stop .ticks li.desk-only{display:none}}

/* audience walkthroughs run in filmed order on phones too; portrait set-up photos */
.walk-stops.natural .walk-stop{order:0!important}
.strip.tall{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.strip.tall .tile .vid{aspect-ratio:4/5}
.walk-stop .card .ticks:empty{display:none}

/* scroll scenes on the private audience pages: one question answered per scroll */
.scene-room{padding-top:0}
.scene-stops .walk-stop{min-height:130vh}
.scene-stops .walk-stop:nth-child(odd){justify-content:flex-start}
.scene-stops .walk-stop:nth-child(even){justify-content:flex-end}
.scene-stops .walk-stop.scene-first{min-height:100vh;align-items:center;padding-top:72px}
.scene .card{max-width:540px;padding:22px 26px 24px}
.scene-kicker{display:block;font:700 12px var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--butter);margin-bottom:6px}
.scene .scene-big{font-size:clamp(34px,3.8vw,48px);line-height:.98;margin:0 0 10px;white-space:nowrap}
.scene-first .scene-big{font-size:clamp(40px,4.4vw,54px)}
.scene .scene-sub{font-weight:600;font-size:18px;color:var(--ink);margin:0 0 8px}
.scene .scene-body{font-size:15.5px;line-height:1.5;color:rgba(240,234,216,.88);margin:0 0 12px}
.scene-chips{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.scene-chips li{border:1px solid rgba(239,200,95,.55);color:var(--ink);border-radius:999px;padding:4px 11px;font:600 13px var(--font-body);background:rgba(255,255,255,.06)}
.scene-media{margin:12px 0 4px;border-radius:12px;overflow:hidden;aspect-ratio:16/9;position:relative;background:#0d0c0f}
.scene-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene-btn{margin-top:14px;display:inline-flex}
@media(max-aspect-ratio:1/1){
  .scene-stops .walk-stop{min-height:110vh;align-items:flex-end;padding:0 0 calc(110px + 4vh)}
  .scene-stops .walk-stop.scene-first{align-items:flex-end;padding:0 0 calc(110px + 4vh)}
  .scene .card{padding:14px 16px 16px}
  .scene .scene-big{font-size:min(30px,7.6vw)}
  .scene-first .scene-big{font-size:min(32px,7.6vw)}
  .scene .scene-sub{font-size:15px}
  .scene .scene-body{font-size:13.5px;margin-bottom:8px}
  .scene-chips li{font-size:12px;padding:3px 9px}
}
.scene-stops .walk-stop.scene-first{opacity:1;transform:none}
@media(max-width:760px){.view-toggle{top:76px;bottom:auto;right:12px;height:38px;padding:0 10px}.view-toggle .vt-label{display:none}}
.scene-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* two photos side by side inside a scene card */
.scene-media-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 4px}
.scene-media-pair .scene-media{margin:0;aspect-ratio:4/3}
/* booking bar that follows the scroll on the private pages (desktop; phones already have the Call/WhatsApp bar) */
.book-bar{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);z-index:58;display:flex;align-items:center;gap:14px;
  padding:8px 8px 8px 20px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.35);
  font:500 14.5px var(--font-body);color:var(--ink);opacity:0;pointer-events:none;transition:opacity .35s,transform .35s}
.book-bar b{color:var(--butter)}
.scrolled .book-bar{opacity:1;transform:translate(-50%,0);pointer-events:auto}
@media(max-width:760px){.book-bar{display:none}}
.aud-cal{padding-top:40px}
.scene-media.tall{aspect-ratio:4/5;max-height:62vh;margin-left:auto;margin-right:auto}
@media(max-aspect-ratio:1/1){.scene-media.tall{max-height:42vh}}

/* the bare domain: choose Corporate, Social or Events */
.chooser{position:relative;z-index:1;min-height:calc(100vh - 70px);display:flex;align-items:center;padding:110px 0 60px}
.chooser h1{font-size:clamp(48px,7vw,92px);margin:4px 0 10px}
.chooser .lede{max-width:560px;margin-bottom:28px}
@media(max-width:860px){.chooser .cats{grid-template-columns:1fr}.chooser{padding-top:90px}}
.chooser-page .page-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,12,15,.82) 0%,rgba(13,12,15,.55) 45%,rgba(13,12,15,.7) 100%)}
/* Corporate: price table, calculator, FAQ inside scroll scenes */
.scene-wide .card{max-width:600px}
.price-wrap{margin:12px 0 4px}
.price-table{width:100%;border-collapse:collapse;font-size:14px;color:var(--ink)}
.price-table th{text-align:left;font:700 11px var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--butter);padding:6px 8px;border-bottom:1px solid rgba(239,200,95,.4)}
.price-table td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.1)}
.price-table td:last-child{white-space:nowrap;font-weight:700}
.price-table tr.hl td{background:rgba(239,200,95,.12)}
.price-note{font-size:12.5px;color:rgba(240,234,216,.7);margin:8px 0 14px}
.calc{border:1px solid rgba(239,200,95,.45);border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.04)}
.calc-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 10px;font-size:14px;color:var(--ink)}
.walk-stop .calc span{font:600 14px var(--font-body);letter-spacing:0;color:var(--ink);text-transform:none}
.calc-row > span{min-width:84px}
.calc-row input[type=range]{flex:1;min-width:160px;accent-color:var(--butter)}
.calc-opts label,.calc-check{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.calc-opts input,.calc-check input{accent-color:var(--butter)}
.calc-out{border-top:1px solid rgba(255,255,255,.12);padding-top:10px;margin-top:4px}
.calc-out > div{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.walk-stop .calc .calc-total{font:400 38px/1 var(--font-display);color:var(--butter);letter-spacing:.02em}
.walk-stop .calc .calc-ph{font-weight:700;font-size:16px;color:var(--ink)}
.calc-fine{font-size:12.5px;color:rgba(240,234,216,.7);margin:6px 0 10px}
.calc .btn{display:inline-flex}
.faq-list{margin:10px 0 4px}
.faq-list details{border-bottom:1px solid rgba(255,255,255,.12)}
.faq-list summary{cursor:pointer;list-style:none;padding:10px 26px 10px 0;font-weight:600;font-size:15px;color:var(--ink);position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:4px;top:8px;color:var(--butter);font-size:18px}
.faq-list details[open] summary::after{content:"–"}
.faq-list details p{margin:0 0 12px;font-size:14px;line-height:1.5;color:rgba(240,234,216,.85)}
@media(max-aspect-ratio:1/1){.walk-stop .calc .calc-total{font-size:30px}.price-table{font-size:12.5px}.price-table th,.price-table td{padding:5px 5px}}
/* placeholders for footage and assets still to come (Corporate) */
.scene-media.ph{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:16px 20px;border:2px dashed rgba(239,200,95,.6);background:rgba(20,19,22,.55)}
.walk-stop .ph span,.walk-stop .ph-quote span{font:700 11px var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--butter);margin-bottom:6px}
.scene-media.ph p{margin:0;font-size:14px;line-height:1.45;color:var(--ink)}
.ph-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 10px}
.ph-logo{aspect-ratio:2/1;display:flex;align-items:center;justify-content:center;border:2px dashed rgba(239,200,95,.5);border-radius:8px;font:600 11px var(--font-body);color:rgba(240,234,216,.6);background:rgba(20,19,22,.45)}
.ph-quote{margin:8px 0 0;padding:10px 14px;border:2px dashed rgba(239,200,95,.45);border-radius:10px;background:rgba(20,19,22,.45)}
.ph-quote p{margin:0 0 4px;font-style:italic;font-size:14px;color:var(--ink)}
.ph-quote cite{font-style:normal;font-size:12.5px;color:rgba(240,234,216,.7)}
@media(max-aspect-ratio:1/1){.ph-logos{grid-template-columns:repeat(4,1fr);gap:6px}.ph-logo{font-size:9.5px}}
/* Corporate: "Welcome to the Big Deal" title over the lounge, Bebas, no panel */
.scene-stops .walk-stop.scene-welcome{justify-content:center;align-items:center}
.scene-welcome .welcome{text-align:center;text-shadow:0 2px 24px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5)}
.walk-stop.scene-welcome .scene-kicker{letter-spacing:.4em;font-size:12px;margin-bottom:10px}
.scene-welcome .welcome-big{font:400 clamp(56px,7.4vw,118px)/.92 var(--font-display);letter-spacing:.03em;color:#F6F1E4;margin:0;white-space:nowrap}
@media(max-aspect-ratio:1/1){.scene-welcome .welcome-big{font-size:min(54px,13.5vw);white-space:normal}}
.scene-welcome .welcome-to{display:block;font:400 clamp(26px,2.6vw,40px)/1 var(--font-display);letter-spacing:.14em;color:#F6F1E4;margin:0 0 18px;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.scene-welcome .welcome-logo{margin:0;line-height:0}
.scene-welcome .welcome-logo img{height:min(52vh,520px);width:auto;filter:drop-shadow(0 6px 28px rgba(0,0,0,.45))}
@media(max-aspect-ratio:1/1){.scene-welcome .welcome-logo img{height:min(40vh,360px)}}
.scene-stops .walk-stop.scene-quick{min-height:70vh}
/* Corporate: after the film ends, a looping video (the set-up stop-motion) is the page background */
.walk-bg .walk-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s;pointer-events:none}
.looping .walk-bg .walk-loop{opacity:1}
/* the sections after the film: normal page flow, one card after another */
.std-sec{padding:6vh 0 4vh}
.std-stops{display:grid;gap:7vh}
.std-sec .walk-stop.scene-std{min-height:0;display:block;opacity:1;transform:none}
.std-sec .scene-std .card{max-width:620px}
.std-sec .scene-std:nth-child(even) .card{margin-left:auto}
@media(max-aspect-ratio:1/1){.std-sec .scene-std .card{max-width:none}.std-stops{gap:4vh}}
/* Corporate breakout rooms: a full-screen section of its own, Huddle | Burn Baby Burn side by side behind the card */
.glass-page section.split-sec{position:relative;min-height:100vh;display:flex;align-items:center;background:#0d0c0f;overflow:hidden}
.split-bg{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:3px;background:#0d0c0f}
.split-half{position:relative;overflow:hidden}
.split-half img,.split-half video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split-half video{opacity:0;transition:opacity .4s}
.split-half video.on{opacity:1}
.split-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,12,.25),rgba(10,9,12,.05) 40%,rgba(10,9,12,.45))}
.split-label{position:absolute;left:24px;bottom:24px;z-index:1;font:400 26px/1 var(--font-display);letter-spacing:.08em;color:#F6F1E4;background:rgba(16,15,18,.6);border:1px solid rgba(244,219,142,.7);border-radius:999px;padding:10px 18px 8px}
.split-inner{position:relative;z-index:1;width:100%;display:flex;justify-content:center}
.split-sec .walk-stop.scene-std{min-height:0;opacity:1;transform:none;display:block}
.split-sec .scene-std .card{max-width:520px}
@media(max-aspect-ratio:1/1){
  .split-bg{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .split-label{left:14px;bottom:14px;font-size:20px;padding:8px 14px 6px}
  .glass-page section.split-sec{align-items:center}
}
.split-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;border:2px dashed rgba(244,219,142,.6);background:#17161a}
.split-ph span{font:700 12px var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--butter);margin-bottom:8px}
.split-ph p{margin:0;max-width:30ch;color:rgba(240,234,216,.8);font-size:15px}
/* Corporate: after the set-ups, every scene is its own full-screen page with its own background */
.glass-page section.page-sec{position:relative;min-height:100vh;display:flex;align-items:center;padding:96px 0 80px}
.page-inner{width:100%;display:flex;justify-content:center}
.page-sec .walk-stop.scene-std{min-height:0;opacity:1;transform:none;display:block;width:100%;max-width:620px}
.page-sec.page-wide .walk-stop.scene-std{max-width:720px}
.page-sec .scene-std .card{max-width:none}
.glass-page section.bg-dark{background:#141316}
.glass-page section.bg-charcoal{background:#1f1d22}
.glass-page section.bg-navy{background:#043D5B}
.glass-page section.bg-warm{background:#2b2318}
.glass-page section.bg-loop{background:transparent}
.page-sec.bg-navy .card,.page-sec.bg-warm .card{background:rgba(0,0,0,.22)}
@media(max-aspect-ratio:1/1){.glass-page section.page-sec{padding:84px 0 110px}}
.glass-page section.bg-photo{background-color:#141316;background-size:cover;background-position:center 40%}
.glass-page section.bg-photo::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 25% 55%,rgba(8,8,10,.6),rgba(8,8,10,0) 100%);pointer-events:none}
.glass-page section.bg-photo .page-inner{position:relative}

/* ===== Corporate text styles (no glass): A = bottom-left editorial, D = centred statement ===== */
:root{--orange:#EF5F37}
.walk-stop.ty-a .card,.walk-stop.ty-d .card,.walk-stop.ty-split .card{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none;border-radius:0;overflow:visible;padding:0}
.walk-stop.ty-a .card::before,.walk-stop.ty-d .card::before,.walk-stop.ty-split .card::before{display:none}
/* a soft shadow only behind the text, so the room stays visible around it */
.walk-stop.ty-a .card::after,.walk-stop.ty-d .card::after,.walk-stop.ty-split .card::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.walk-stop.ty-a .card::after{inset:-90px -140px -80px -120px;background:radial-gradient(ellipse at 35% 60%,rgba(8,8,10,.68),rgba(8,8,10,.35) 45%,rgba(8,8,10,0) 72%)}
.walk-stop.ty-d .card::after{inset:-110px -160px;background:radial-gradient(ellipse at center,rgba(8,8,10,.62),rgba(8,8,10,.3) 45%,rgba(8,8,10,0) 72%)}
.walk-stop.ty-a .card,.walk-stop.ty-d .card{position:relative;isolation:isolate}
/* shared type */
.walk-stop.ty-a .scene-kicker,.walk-stop.ty-d .scene-kicker,.walk-stop.ty-split .scene-kicker{font:700 13px var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--butter);margin:0 0 12px}
.walk-stop.ty-a .scene-big,.walk-stop.ty-d .scene-big,.walk-stop.ty-split .scene-big{font-family:var(--font-display);font-weight:400;line-height:.98;letter-spacing:.005em;color:#F3EEE2;white-space:normal;text-wrap:balance;margin:0 0 14px}
.walk-stop.ty-a .scene-sub,.walk-stop.ty-d .scene-sub,.walk-stop.ty-split .scene-sub{color:var(--butter);font-weight:600;font-size:clamp(18px,1.6vw,24px);line-height:1.3;text-wrap:balance;margin:0 0 10px}
.walk-stop.ty-a .scene-body,.walk-stop.ty-d .scene-body{font-size:18px;line-height:1.55;color:rgba(240,234,216,.9);max-width:52ch;text-wrap:pretty;margin:0 0 16px}
.walk-stop.ty-a .scene-chips li,.walk-stop.ty-d .scene-chips li{border:0;background:none;padding:0;border-radius:0;font:600 15px var(--font-body);color:#F3EEE2}
.walk-stop.ty-a .scene-chips,.walk-stop.ty-d .scene-chips{gap:4px 0;margin:0 0 18px}
.walk-stop.ty-a .scene-chips li+li::before{content:"+";color:var(--orange);margin:0 12px;font-weight:700}
.walk-stop.ty-d .scene-chips li+li::before{content:"·";color:var(--orange);margin:0 12px;font-weight:700}
/* A: bottom-left */
.walk-stop.ty-a .scene-kicker::before{content:"+ ";color:var(--orange)}
.walk-stop.ty-a .card{max-width:600px}
.walk-stop.ty-a .scene-big{font-size:clamp(52px,6.2vw,96px)}
.scene-stops .walk-stop.ty-a{align-items:flex-end;justify-content:flex-start!important;padding-bottom:12vh}
/* D: centred, oversized, the Big Deal crosses above */
.walk-stop.ty-d .scene-kicker::before{content:"+ + + +";display:block;color:var(--orange);letter-spacing:.32em;font-size:20px;margin:0 0 12px}
.walk-stop.ty-d .card{max-width:min(1040px,92vw);margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.walk-stop.ty-d .scene-big{font-size:clamp(60px,8.4vw,124px)}
.walk-stop.ty-d .scene-body{margin-left:auto;margin-right:auto}
.walk-stop.ty-d .scene-chips{justify-content:center}
.scene-stops .walk-stop.ty-d{align-items:center;justify-content:center!important}
.scene-stops .walk-stop.scene-first.ty-d{padding-top:72px}
/* full-screen pages */
.page-sec.ty-a .page-inner{justify-content:flex-start}
.page-sec.ty-a{align-items:flex-end}
.page-sec.ty-d .page-inner{justify-content:center}
.page-sec .walk-stop.ty-d{max-width:none}
.page-sec .walk-stop.ty-a{max-width:640px}
.page-sec.page-wide .walk-stop.ty-a{max-width:760px}
/* split pages: slim band across the top, both halves clear below */
.glass-page section.split-sec{align-items:flex-start}
.split-inner{padding-top:96px}
.walk-stop.ty-split .card{max-width:min(900px,92vw);margin:0 auto;text-align:center}
.walk-stop.ty-split .scene-kicker::before{content:"+ ";color:var(--orange)}
.walk-stop.ty-split .scene-big{font-size:clamp(40px,4.6vw,66px);margin-bottom:6px}
.walk-stop.ty-split .scene-body,.walk-stop.ty-split .scene-chips{display:none}
.split-bg::after{background:linear-gradient(180deg,rgba(8,8,10,.8) 0%,rgba(8,8,10,.5) 24%,rgba(8,8,10,0) 42%,rgba(8,8,10,0) 80%,rgba(8,8,10,.35))}
/* phones */
@media(max-aspect-ratio:1/1){
  .walk-stop.ty-a .card{max-width:none}
  .walk-stop.ty-a .scene-big{font-size:min(46px,12vw)}
  .walk-stop.ty-d .scene-big{font-size:min(52px,13.5vw)}
  .walk-stop.ty-a .scene-body,.walk-stop.ty-d .scene-body{font-size:15.5px}
  .walk-stop.ty-a .card::after{inset:-60px -40px -40px -40px}
  .walk-stop.ty-d .card::after{inset:-70px -40px}
  .scene-stops .walk-stop.ty-d{align-items:center;padding:0}
  .walk-stop.ty-d .scene-kicker::before{font-size:16px}
  .split-inner{padding-top:78px}
  .walk-stop.ty-split .scene-big{font-size:min(34px,9vw)}
}
/* A in the scroll film: low on the screen but clear of the booking bar (the stop is 130vh, centred on screen) */
.scene-stops .walk-stop.ty-a{padding-bottom:calc(15vh + 16vh)}
/* split labels sit above the booking bar */
.split-label{bottom:104px}
@media(max-aspect-ratio:1/1){.split-label{bottom:auto;top:auto}.split-half:first-child .split-label{bottom:14px}.split-half:last-child .split-label{bottom:96px}}
/* stronger shade behind A over bright frames, plus a soft text shadow as a safety net */
.walk-stop.ty-a .card::after{background:radial-gradient(ellipse at 38% 55%,rgba(8,8,10,.8),rgba(8,8,10,.5) 45%,rgba(8,8,10,0) 75%)}
.walk-stop.ty-d .card::after{background:radial-gradient(ellipse at center,rgba(8,8,10,.7),rgba(8,8,10,.38) 45%,rgba(8,8,10,0) 74%)}
.walk-stop.ty-a .scene-big,.walk-stop.ty-d .scene-big,.walk-stop.ty-split .scene-big{text-shadow:0 2px 22px rgba(0,0,0,.45)}
.walk-stop.ty-a .scene-sub,.walk-stop.ty-a .scene-body,.walk-stop.ty-a .scene-chips,.walk-stop.ty-d .scene-sub,.walk-stop.ty-d .scene-body,.walk-stop.ty-d .scene-chips,.walk-stop.ty-split .scene-sub{text-shadow:0 1px 10px rgba(0,0,0,.55)}

/* Food pages: three vertical clips side by side behind the text (phones: the first clip alone) */
.page-sec.bg-tri{background:#0d0c0f;overflow:hidden}
.tri-bg{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.tri-cell{position:relative;overflow:hidden}
.tri-cell img,.tri-cell video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tri-cell video{opacity:0;transition:opacity .4s}
.tri-cell video.on{opacity:1}
.tri-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.55),rgba(8,8,10,.15) 40%,rgba(8,8,10,.6))}
.page-sec.bg-tri .page-inner{position:relative;z-index:1}
@media(max-aspect-ratio:1/1){
  .tri-bg{grid-template-columns:1fr}
  .tri-cell{display:none}
  .tri-cell.act{display:block;animation:triIn .6s ease both}
  .tri-bg::after{background:linear-gradient(180deg,rgba(8,8,10,.55),rgba(8,8,10,.35) 35%,rgba(8,8,10,.8))}
}
@keyframes triIn{from{opacity:0}to{opacity:1}}

/* Split pages on phones: the title sits in a band at the top, the two rooms fill the rest, labels sit at the foot of each room */
@media(max-aspect-ratio:1/1){
  .glass-page section.split-sec{display:block;min-height:100svh;height:100svh}
  .split-sec .split-inner{position:absolute;top:0;left:0;right:0;padding:84px 18px 0;display:block}
  .split-sec .walk-stop.scene-std,.split-sec .walk-stop.ty-split{position:static;transform:none;height:auto;min-height:0;margin:0;padding:0}
  .split-sec .walk-stop.ty-split .card{margin:0 auto;text-align:center;padding:0}
  .split-sec .walk-stop.ty-split .card::after{display:none}
  .split-sec .walk-stop.ty-split .scene-kicker{margin-bottom:6px}
  .split-sec .walk-stop.ty-split .scene-big{font-size:min(36px,10vw);line-height:1;margin:0 0 8px}
  .split-sec .walk-stop.ty-split .scene-sub{font-size:15.5px;line-height:1.35;margin:0 auto;max-width:30ch}
  .split-bg{grid-template-rows:1fr 1fr}
  .split-bg::after{background:linear-gradient(180deg,rgba(8,8,10,.88) 0%,rgba(8,8,10,.7) 22%,rgba(8,8,10,.15) 38%,rgba(8,8,10,0) 60%,rgba(8,8,10,.4) 100%)}
  .split-half:first-child .split-label{bottom:14px;top:auto}
  .split-half:last-child .split-label{bottom:92px;top:auto}
}
/* plain-copy headlines that run long (over ~34 characters) step down a size */
.walk-stop.ty-d .scene-big.big-long{font-size:clamp(48px,6vw,92px)}
.walk-stop.ty-a .scene-big.big-long{font-size:clamp(44px,4.8vw,76px)}
@media(max-aspect-ratio:1/1){.walk-stop.ty-d .scene-big.big-long{font-size:min(40px,10.5vw)}.walk-stop.ty-a .scene-big.big-long{font-size:min(38px,10vw)}}

/* ===== Guidance: section rail + "what to do now" pill (audience pages) ===== */
.rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:60;display:flex;align-items:stretch;gap:10px}
.rail-bar{width:2px;border-radius:2px;background:rgba(240,234,216,.22);position:relative;overflow:hidden}
.rail-bar i{position:absolute;inset:0;background:var(--butter);transform-origin:top;transform:scaleY(0)}
.rail-dots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.rail-dots button{display:flex;align-items:center;justify-content:flex-end;gap:10px;width:auto;height:14px;padding:0;background:none;border:0;cursor:pointer;flex-direction:row-reverse}
.rail-dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(240,234,216,.35);box-shadow:0 0 0 2px rgba(0,0,0,.25);transition:transform .2s,background .2s}
.rail-dots button.done::before{background:rgba(244,219,142,.6)}
.rail-dots button.on::before{background:var(--orange,#EF5F37);transform:scale(1.5)}
.rail-dots button span{font:600 12px var(--font-body);color:#F3EEE2;white-space:nowrap;background:rgba(16,15,18,.75);padding:3px 9px;border-radius:999px;opacity:0;transform:translateX(6px);transition:.2s;pointer-events:none}
.rail-dots button.on span,.rail-dots button:hover span,.rail-dots button:focus-visible span{opacity:1;transform:none}
.rail-dots button:focus-visible{outline:none}
.rail-dots button:focus-visible::before{box-shadow:0 0 0 3px var(--butter)}
.guide{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:59;display:flex;align-items:center;gap:10px;cursor:pointer;
  background:rgba(16,15,18,.82);border:1px solid rgba(244,219,142,.55);color:#F6F1E4;border-radius:999px;padding:9px 18px 9px 12px;
  font:600 15px var(--font-body);box-shadow:0 8px 28px rgba(0,0,0,.35);transition:opacity .35s,transform .35s;white-space:nowrap}
.guide.away{opacity:0;transform:translate(-50%,10px);pointer-events:none}
.guide-ic{width:18px;height:28px;border:2px solid rgba(255,255,255,.9);border-radius:10px;position:relative;flex:none}
.guide-ic::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:var(--butter);animation:cue 1.6s infinite}
.guide[data-mode="watch"] .guide-ic{width:22px;height:22px;border-radius:50%;border-color:var(--butter)}
.guide[data-mode="watch"] .guide-ic::after{top:5px;left:8px;margin:0;width:0;height:0;border-radius:0;background:none;border-left:8px solid var(--butter);border-top:5px solid transparent;border-bottom:5px solid transparent;animation:none}
.guide[data-mode="book"]{background:var(--butter);color:#141316;border-color:var(--butter)}
.guide[data-mode="book"] .guide-ic{display:none}
.clean .rail,.clean .guide{opacity:0!important;pointer-events:none!important}
.scroll-cue{display:none!important}
/* phones: the rail becomes a thin progress bar along the top; the pill sits above the Call/WhatsApp bar */
@media(max-width:760px){
  .rail{top:0;left:0;right:0;transform:none;height:3px}
  .rail-bar{width:100%;height:3px;border-radius:0;background:rgba(240,234,216,.15)}
  .rail-bar i{transform-origin:left;transform:scaleX(0)}
  .rail-dots{display:none}
  .guide{bottom:92px;font-size:14px;padding:8px 14px 8px 10px}
}
/* rail: dots in one straight column, labels float to their left */
.rail{right:22px;gap:12px}
.rail-dots button{position:relative;width:14px;height:14px;display:block;flex-direction:initial}
.rail-dots button::before{position:absolute;left:3px;top:3px}
.rail-dots button span{position:absolute;right:22px;top:50%;transform:translate(6px,-50%)}
.rail-dots button.on span,.rail-dots button:hover span,.rail-dots button:focus-visible span{transform:translate(0,-50%)}
.rail-bar{order:2}

/* ===== Copy sizing (Nov 2026): small facts as Sortd-style pills, bigger yellow sub-line ===== */
:root{--sortd-terra:#d77647;--sortd-cream:#faf3ed}
.walk-stop.ty-a .scene-chips,.walk-stop.ty-d .scene-chips{gap:10px;margin:4px 0 22px}
.walk-stop.ty-a .scene-chips li,.walk-stop.ty-d .scene-chips li{
  font:700 15px/1 var(--font-body);letter-spacing:.04em;color:var(--sortd-cream);
  padding:10px 16px 9px;border-radius:999px;border:1.5px solid rgba(250,243,237,.6);
  background:rgba(20,18,17,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:none;white-space:nowrap}
.walk-stop.ty-a .scene-chips li+li::before,.walk-stop.ty-d .scene-chips li+li::before{content:none}
/* the first fact in each row in Sortd terracotta, so the key number pops */
.walk-stop.ty-a .scene-chips li:first-child,.walk-stop.ty-d .scene-chips li:first-child{background:var(--sortd-terra);border-color:var(--sortd-terra);color:#fff}
/* yellow sub-line: bigger, bolder, clearer */
.walk-stop.ty-a .scene-sub,.walk-stop.ty-d .scene-sub,.walk-stop.ty-split .scene-sub{
  font-size:clamp(24px,2.3vw,34px);font-weight:700;line-height:1.2;letter-spacing:.005em;color:#FFD86B;
  text-shadow:0 2px 14px rgba(0,0,0,.65),0 0 2px rgba(0,0,0,.5);margin:2px 0 16px}
/* yellow kicker label: a little larger */
.walk-stop.ty-a .scene-kicker,.walk-stop.ty-d .scene-kicker,.walk-stop.ty-split .scene-kicker{font-size:15px;color:#FFD86B;text-shadow:0 1px 8px rgba(0,0,0,.6)}
@media(max-aspect-ratio:1/1){
  .walk-stop.ty-a .scene-sub,.walk-stop.ty-d .scene-sub,.walk-stop.ty-split .scene-sub{font-size:min(21px,5.6vw)}
  .walk-stop.ty-a .scene-chips li,.walk-stop.ty-d .scene-chips li{font-size:13px;padding:8px 12px 7px}
  .walk-stop.ty-a .scene-chips,.walk-stop.ty-d .scene-chips{gap:7px}
}
/* yellow sub-line in capitals */
.walk-stop.ty-a .scene-sub,.walk-stop.ty-d .scene-sub,.walk-stop.ty-split .scene-sub{text-transform:uppercase;letter-spacing:.04em}

/* ===== Compact type scale (Nov 2026): clear hierarchy without filling the screen ===== */
.walk-stop.ty-d .scene-big{font-size:clamp(40px,4.4vw,68px);line-height:1}
.walk-stop.ty-d .scene-big.big-long{font-size:clamp(34px,3.6vw,56px)}
.walk-stop.ty-a .scene-big{font-size:clamp(38px,4vw,62px);line-height:1}
.walk-stop.ty-a .scene-big.big-long{font-size:clamp(32px,3.3vw,52px)}
.walk-stop.ty-d .card{max-width:min(860px,90vw)}
.walk-stop.ty-a .card{max-width:520px}
.walk-stop.ty-a .scene-sub,.walk-stop.ty-d .scene-sub,.walk-stop.ty-split .scene-sub{font-size:clamp(16px,1.35vw,21px);margin:0 0 14px}
.walk-stop.ty-a .scene-kicker,.walk-stop.ty-d .scene-kicker,.walk-stop.ty-split .scene-kicker{font-size:13px;margin-bottom:10px}
.walk-stop.ty-d .scene-kicker::before{font-size:16px;margin-bottom:8px}
.walk-stop.ty-a .scene-chips li,.walk-stop.ty-d .scene-chips li{font-size:13.5px;padding:8px 13px 7px}
.walk-stop.ty-a .scene-chips,.walk-stop.ty-d .scene-chips{gap:8px;margin:2px 0 18px}
.walk-stop.ty-split .scene-big{font-size:clamp(32px,3.4vw,50px)}
@media(max-aspect-ratio:1/1){
  .walk-stop.ty-d .scene-big,.walk-stop.ty-a .scene-big{font-size:min(36px,9.5vw)}
  .walk-stop.ty-d .scene-big.big-long,.walk-stop.ty-a .scene-big.big-long{font-size:min(30px,8vw)}
  .walk-stop.ty-a .scene-sub,.walk-stop.ty-d .scene-sub,.walk-stop.ty-split .scene-sub{font-size:min(16px,4.3vw)}
  .walk-stop.ty-a .scene-chips li,.walk-stop.ty-d .scene-chips li{font-size:12.5px;padding:7px 11px 6px}
}

/* ===== Tints only behind the text, tight to it (Nov 2026). No full-screen shading on the corporate pages ===== */
.split-bg::after,.tri-bg::after,.glass-page section.bg-photo::before{content:none!important;background:none!important}
.walk-stop.ty-a .card::after,.walk-stop.ty-d .card::after,.walk-stop.ty-split .card::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;inset:-18px -28px;border-radius:28px;
  background:rgba(10,9,12,.5);-webkit-filter:blur(14px);filter:blur(14px)}
.walk-stop.ty-split .card{position:relative;isolation:isolate;display:inline-block}
.split-inner{justify-content:center}
@media(max-aspect-ratio:1/1){
  .walk-stop.ty-a .card::after,.walk-stop.ty-d .card::after,.walk-stop.ty-split .card::after{inset:-14px -16px;filter:blur(10px)}
}
.walk-stop.ty-a .card::after,.walk-stop.ty-d .card::after,.walk-stop.ty-split .card::after{background:rgba(10,9,12,.62);filter:blur(10px);-webkit-filter:blur(10px)}

/* ===== No box behind the copy: the shade hugs the letters only (Nov 2026) ===== */
.walk-stop.ty-a .card::after,.walk-stop.ty-d .card::after,.walk-stop.ty-split .card::after{content:none!important;display:none!important}
.walk-stop.ty-a .scene-big,.walk-stop.ty-d .scene-big,.walk-stop.ty-split .scene-big{
  text-shadow:0 0 3px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.55),0 0 26px rgba(0,0,0,.4)}
.walk-stop.ty-a .scene-sub,.walk-stop.ty-d .scene-sub,.walk-stop.ty-split .scene-sub,
.walk-stop.ty-a .scene-kicker,.walk-stop.ty-d .scene-kicker,.walk-stop.ty-split .scene-kicker{
  text-shadow:0 0 2px rgba(0,0,0,.7),0 1px 6px rgba(0,0,0,.65),0 0 16px rgba(0,0,0,.45)}
/* footer on the scroll pages: solid, nothing moving behind it */
.glass-page .foot{background:#141316;-webkit-backdrop-filter:none;backdrop-filter:none;border-top:1px solid rgba(244,219,142,.18);box-shadow:none;position:relative;z-index:2}
/* after the film's section: no video behind the page at all (gaps and footer stay solid) */
.past-film .walk-bg{visibility:hidden}
.past-film{background:#141316}