/* ============================================================
   OCC Sports & Events Center — Board + Screen styles
   Built on the OCC design system (styles/tokens.css).
   Accessibility bumps for a wide audience (seniors 60+, kids):
   17px body base, >=48px tap targets, AA contrast.
   ============================================================ */

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font-sans);
  background:#E9EBEF;
  color:var(--fg-1);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer}
img{display:block;max-width:100%}

/* ---------------- BOARD CHROME ---------------- */
.board{max-width:1500px;margin:0 auto;padding:48px 40px 120px}
.board-head{margin-bottom:8px}
.board-kicker{
  font-weight:var(--w-bold);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--occ-red);
}
.board-title{font-weight:var(--w-extrabold);font-size:2.4rem;letter-spacing:-.02em;margin:8px 0 10px}
.board-sub{font-size:1.0625rem;line-height:1.6;color:var(--fg-2);max-width:680px}

/* design-language strip */
.dl{display:grid;grid-template-columns:1.3fr 1fr 1.1fr;gap:16px;margin:28px 0 8px}
.dl-card{background:#fff;border:1px solid var(--line-1);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow-sm)}
.dl-card h4{margin:0 0 14px;font-size:.8125rem;font-weight:var(--w-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.sw-row{display:flex;gap:10px;flex-wrap:wrap}
.sw{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.sw .chip{width:48px;height:48px;border-radius:10px;border:1px solid rgba(0,0,0,.06)}
.sw small{font-size:11px;color:var(--fg-3);font-family:var(--font-mono)}
.tspec{display:flex;flex-direction:column;gap:8px}
.tspec .a{font-family:var(--font-display);text-transform:uppercase;font-size:30px;line-height:1;letter-spacing:.01em}
.tspec .b{font-weight:var(--w-extrabold);font-size:20px;letter-spacing:-.01em}
.tspec .c{font-size:15px;color:var(--fg-2)}
.tspec span.lbl{font-size:11px;color:var(--fg-4);font-family:var(--font-mono);display:block;margin-top:2px}
.dl-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.dl-list li{font-size:14px;color:var(--fg-2);line-height:1.4;display:flex;gap:9px;align-items:flex-start}
.dl-list li svg{width:17px;height:17px;color:var(--occ-red);flex-shrink:0;margin-top:1px}

/* section + frame layout */
.sec{margin-top:64px}
.sec-label{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.sec-num{font-family:var(--font-display);font-size:30px;color:var(--occ-red);line-height:1}
.sec-name{font-weight:var(--w-extrabold);font-size:1.6rem;letter-spacing:-.01em}
.sec-desc{font-size:15px;color:var(--fg-2);margin:0 0 26px;max-width:720px;line-height:1.55}
.frames{display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap}
.frame-wrap{display:flex;flex-direction:column;gap:12px}
.frame-cap{font-size:13px;font-weight:var(--w-bold);color:var(--fg-2);display:flex;align-items:center;gap:8px}
.frame-cap .tagp{font-weight:var(--w-semibold);color:var(--fg-4);font-size:12px}

/* ============================================================
   SCREEN BASE  — everything inside a phone/desktop surface
   ============================================================ */
.scr{height:100%;display:flex;flex-direction:column;background:var(--bg-page);
  font-family:var(--font-sans);color:var(--fg-1);position:relative}
.scr *{box-sizing:border-box}
.scr-scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
.scr-scroll::-webkit-scrollbar{display:none}

/* image placeholder (charcoal w/ diagonal red motif) */
.imgph{position:relative;background:linear-gradient(135deg,#2A2B30 0%,#222329 60%,#1B1C1F 100%);overflow:hidden}
.imgph::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,transparent 0 40px,rgba(193,39,53,.09) 40px 42px)}
.imgph .ph-tag{position:absolute;left:12px;bottom:10px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.03em;color:rgba(255,255,255,.5);z-index:2}

/* buttons (accessible: >=52px, 17px) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:var(--r-md);
  font-weight:var(--w-bold);font-size:17px;padding:16px 22px;min-height:54px;line-height:1;transition:.15s;
  white-space:nowrap}
.btn svg{width:20px;height:20px}
.btn-primary{background:var(--occ-red);color:#fff;box-shadow:var(--shadow-red)}
.btn-primary:hover{background:var(--occ-red-600)}
.btn-primary:active{background:var(--occ-red-700);transform:scale(.98)}
.btn-ghost{background:#fff;color:var(--fg-1);border:1.5px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--ink-400);background:var(--ink-50)}
.btn-ondark{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.45);backdrop-filter:blur(4px)}
.btn-ondark:hover{background:rgba(255,255,255,.2)}
.btn-block{display:flex;width:100%}
.btn:disabled{background:var(--ink-200);color:var(--fg-4);box-shadow:none;cursor:not-allowed}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--focus-ring)}

.eyebrow{font-weight:var(--w-bold);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--occ-red)}

/* ============================================================
   WEBSITE HOME (mobile)
   ============================================================ */
.site-nav{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;
  justify-content:space-between;padding:54px 18px 12px}
.site-nav.scrolled{background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-1)}
.site-nav .logo{height:30px}
.site-nav .menu{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;color:#fff}
.site-nav .menu svg{width:24px;height:24px}

.hero{position:relative;min-height:660px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:96px 22px 28px;color:#fff}
.hero .imgph{position:absolute;inset:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(27,28,31,.32) 0%,rgba(27,28,31,.15) 40%,rgba(27,28,31,.86) 100%)}
.hero-inner{position:relative;z-index:2}
.hero .eyebrow{color:#fff;opacity:.92}
.hero h1{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:40px;line-height:1.0;
  letter-spacing:.01em;margin:12px 0 0}
.hero h1 .red{color:var(--occ-red-300)}
.hero p.lede{font-size:17px;line-height:1.45;color:rgba(255,255,255,.9);margin:14px 0 22px;max-width:320px}
.hero .cta{display:flex;flex-direction:column;gap:12px}
.hero .trust{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:14px;color:rgba(255,255,255,.85);font-weight:var(--w-semibold)}
.hero .trust svg{width:18px;height:18px;color:var(--occ-red-300)}

.qbook{background:#fff;margin:0;padding:26px 22px 6px}
.qbook .lbl-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.qbook h2{font-weight:var(--w-extrabold);font-size:21px;letter-spacing:-.01em;margin:0}
.qbook .lbl-row a{font-size:14px;font-weight:var(--w-bold);color:var(--occ-red);text-decoration:none}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qcard{border:1.5px solid var(--line-1);border-radius:var(--r-lg);padding:16px;text-align:left;background:#fff;
  display:flex;flex-direction:column;gap:12px;transition:.15s;min-height:104px}
.qcard:hover{border-color:var(--occ-red);box-shadow:var(--shadow-sm)}
.qcard:active{transform:scale(.98)}
.qcard .ic{width:44px;height:44px;border-radius:12px;background:var(--occ-red-50);display:flex;align-items:center;justify-content:center}
.qcard .ic svg{width:24px;height:24px;color:var(--occ-red)}
.qcard .nm{font-weight:var(--w-bold);font-size:16px;display:block}
.qcard .mt{font-size:13px;color:var(--fg-3);margin-top:2px;display:block}

.sec-pad{padding:30px 22px}
.sec-head{margin-bottom:18px}
.sec-head .eyebrow{margin-bottom:8px;display:block}
.sec-head h2{font-weight:var(--w-extrabold);font-size:24px;letter-spacing:-.01em;margin:0;line-height:1.15}
.sec-head p{font-size:16px;color:var(--fg-2);margin:8px 0 0;line-height:1.5}

.feat{display:flex;flex-direction:column;gap:14px}
.feat-card{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-1);background:#fff}
.feat-card .imgph{height:150px}
.feat-card .b{padding:16px 18px}
.feat-card h3{font-weight:var(--w-bold);font-size:18px;margin:0 0 4px}
.feat-card p{font-size:15px;color:var(--fg-2);margin:0;line-height:1.5}
.feat-card .meta{display:flex;gap:14px;margin-top:12px;font-size:13px;color:var(--fg-3);font-weight:var(--w-semibold)}
.feat-card .meta span{display:inline-flex;align-items:center;gap:6px}
.feat-card .meta svg{width:15px;height:15px;color:var(--occ-red)}

/* membership punch band (full-bleed red) */
.band{background:var(--occ-red);color:#fff;padding:34px 22px;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;right:-40px;top:-30px;bottom:-30px;width:200px;
  background:repeating-linear-gradient(-45deg,transparent 0 24px,rgba(255,255,255,.10) 24px 26px)}
.band .eyebrow{color:rgba(255,255,255,.85)}
.band h2{font-weight:var(--w-extrabold);font-size:26px;letter-spacing:-.01em;margin:10px 0 8px;position:relative}
.band p{font-size:16px;color:rgba(255,255,255,.92);margin:0 0 20px;line-height:1.5;position:relative;max-width:330px}
.band .btn-light{background:#fff;color:var(--occ-red)}
.band .btn-light:hover{background:var(--ink-100)}

.site-foot{background:var(--ink-950);color:rgba(255,255,255,.7);padding:32px 22px 28px}
.site-foot img{height:30px;margin-bottom:14px}
.site-foot p{font-size:14px;line-height:1.6;margin:0 0 16px;color:rgba(255,255,255,.6)}
.site-foot .frow{display:flex;gap:9px;align-items:center;font-size:14px;margin-bottom:9px;color:rgba(255,255,255,.8)}
.site-foot .frow svg{width:17px;height:17px;color:var(--occ-red-300)}
.site-foot .copy{font-size:12px;color:rgba(255,255,255,.4);margin-top:20px;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}

/* ============================================================
   BOOKING FLOW (mobile)
   ============================================================ */
.bk{height:100%;display:flex;flex-direction:column;background:var(--bg-page)}
.bk-top{padding:54px 18px 14px;background:#fff;border-bottom:1px solid var(--line-1);position:relative;z-index:5}
.bk-top .row1{display:flex;align-items:center;gap:12px}
.bk-back{width:46px;height:46px;border-radius:12px;border:1.5px solid var(--line-2);background:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bk-back svg{width:22px;height:22px;color:var(--fg-1)}
.bk-top h1{font-weight:var(--w-extrabold);font-size:20px;letter-spacing:-.01em;margin:0;flex:1}
.bk-step{font-size:13px;font-weight:var(--w-bold);color:var(--fg-3);font-family:var(--font-mono)}
.bk-prog{display:flex;gap:6px;margin-top:14px}
.bk-prog .seg{flex:1;height:6px;border-radius:99px;background:var(--ink-200)}
.bk-prog .seg.on{background:var(--occ-red)}
.bk-prog .seg.done{background:var(--ink-900)}

.bk-body{flex:1;overflow:auto;padding:22px 18px 150px}
.bk-body::-webkit-scrollbar{display:none}
.bk-h{font-weight:var(--w-extrabold);font-size:23px;letter-spacing:-.01em;margin:0 0 4px}
.bk-sub{font-size:15px;color:var(--fg-3);margin:0 0 20px;line-height:1.45}

/* location cards */
.loc{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;background:#fff;
  border:1.5px solid var(--line-2);border-radius:var(--r-lg);padding:16px;margin-bottom:12px;transition:.15s}
.loc:hover{border-color:var(--ink-400)}
.loc.sel{border-color:var(--occ-red);box-shadow:0 0 0 3px var(--focus-ring)}
.loc .pin{width:52px;height:52px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--occ-red-50)}
.loc.sel .pin{background:var(--occ-red);color:#fff}
.loc .pin svg{width:26px;height:26px;color:var(--occ-red)}
.loc.sel .pin svg{color:#fff}
.loc .lb{flex:1;min-width:0}
.loc .lb .nm{font-weight:var(--w-bold);font-size:17px;display:flex;align-items:center;gap:8px}
.loc .lb .tag{font-size:11px;font-weight:var(--w-bold);letter-spacing:.04em;text-transform:uppercase;
  background:var(--ink-100);color:var(--fg-3);padding:3px 8px;border-radius:99px}
.loc .lb .ad{font-size:14px;color:var(--fg-2);margin-top:4px;line-height:1.4}
.loc .lb .hrs{font-size:13px;color:var(--fg-3);margin-top:8px;display:flex;align-items:center;gap:6px;font-weight:var(--w-semibold)}
.loc .lb .hrs svg{width:15px;height:15px;color:var(--occ-red)}
.loc .rad{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;align-self:center}
.loc.sel .rad{border-color:var(--occ-red);background:var(--occ-red)}
.loc .rad svg{width:15px;height:15px;color:#fff;opacity:0}
.loc.sel .rad svg{opacity:1}

/* resource cards */
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.res{background:#fff;border:1.5px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;text-align:left;transition:.15s}
.res:hover{border-color:var(--ink-400)}
.res.sel{border-color:var(--occ-red);box-shadow:0 0 0 3px var(--focus-ring)}
.res .ph{height:96px;position:relative;display:flex;align-items:center;justify-content:center}
.res .ph .ricon{width:40px;height:40px;color:#fff;opacity:.92;position:relative;z-index:2}
.res .chk{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:var(--occ-red);
  display:none;align-items:center;justify-content:center;z-index:3}
.res .chk svg{width:15px;height:15px;color:#fff}
.res.sel .chk{display:flex}
.res .b{padding:13px 14px}
.res .b .nm{font-weight:var(--w-bold);font-size:16px;line-height:1.2}
.res .b .cap{font-size:12.5px;color:var(--fg-3);margin-top:4px;display:flex;align-items:center;gap:5px}
.res .b .cap svg{width:14px;height:14px}
.res .b .pr{font-weight:var(--w-bold);font-size:15px;color:var(--occ-red);margin-top:9px}
.res .b .pr small{color:var(--fg-3);font-weight:var(--w-semibold)}

/* date scroller */
.dlabel{font-weight:var(--w-bold);font-size:15px;margin:0 0 10px;display:flex;align-items:center;justify-content:space-between}
.dlabel .mo{color:var(--fg-3);font-weight:var(--w-semibold);font-size:14px}
.dates{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;margin-bottom:24px}
.dates::-webkit-scrollbar{display:none}
.date{flex-shrink:0;width:60px;min-height:74px;border:1.5px solid var(--line-2);border-radius:var(--r-md);
  background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:.12s;padding:8px 0}
.date:hover{border-color:var(--ink-400)}
.date.sel{background:var(--occ-red);border-color:var(--occ-red)}
.date.closed{opacity:.4;cursor:not-allowed}
.date .dow{font-size:12px;font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:.04em;color:var(--fg-3)}
.date.sel .dow{color:rgba(255,255,255,.85)}
.date .dn{font-weight:var(--w-extrabold);font-size:22px;color:var(--fg-1)}
.date.sel .dn{color:#fff}

/* slot grid (big targets) */
.slot-head{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-3);margin:0 0 12px;font-weight:var(--w-semibold)}
.slot-head .key{display:inline-flex;align-items:center;gap:5px}
.slot-head .dot{width:11px;height:11px;border-radius:3px}
.slots{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.slot{min-height:56px;border:1.5px solid var(--line-2);border-radius:var(--r-md);background:#fff;
  font-family:var(--font-mono);font-weight:var(--w-bold);font-size:15px;color:var(--ink-800);transition:.12s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.1}
.slot small{font-size:11px;color:var(--fg-4);font-family:var(--font-sans);font-weight:var(--w-semibold)}
.slot:hover:not(.off){border-color:var(--ink-400)}
.slot.sel{background:var(--occ-red);border-color:var(--occ-red);color:#fff}
.slot.sel small{color:rgba(255,255,255,.8)}
.slot.off{opacity:.45;background:var(--ink-100);cursor:not-allowed}
.slot.off small{color:var(--fg-4)}

/* sticky bottom confirm bar */
.bk-bar{position:absolute;left:0;right:0;bottom:0;z-index:20;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);border-top:1px solid var(--line-1);padding:14px 18px 30px}
.bk-bar .sum{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bk-bar .sum .meta{min-width:0}
.bk-bar .sum .meta .l{font-size:12px;color:var(--fg-3);font-weight:var(--w-semibold);text-transform:uppercase;letter-spacing:.04em}
.bk-bar .sum .meta .v{font-weight:var(--w-bold);font-size:15px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-bar .sum .price{font-family:var(--font-display);font-size:30px;color:var(--occ-red);line-height:1;flex-shrink:0}
.bk-bar .sum .price small{font-family:var(--font-sans);font-size:13px;color:var(--fg-3);font-weight:var(--w-semibold)}

/* confirmation success */
.bk-done{flex:1;overflow:auto;padding:64px 22px 30px;text-align:center;background:var(--bg-page)}
.bk-done .big{width:88px;height:88px;border-radius:50%;background:var(--success-bg);margin:0 auto 22px;
  display:flex;align-items:center;justify-content:center}
.bk-done .big svg{width:48px;height:48px;color:var(--success)}
.bk-done h1{font-weight:var(--w-extrabold);font-size:28px;margin:0 0 10px;letter-spacing:-.01em}
.bk-done .lead{font-size:16px;color:var(--fg-2);line-height:1.55;margin:0 0 26px;max-width:320px;margin-left:auto;margin-right:auto}
.ticket{background:#fff;border:1px solid var(--line-1);border-radius:var(--r-lg);overflow:hidden;text-align:left;box-shadow:var(--shadow-sm)}
.ticket .thd{background:var(--ink-900);color:#fff;padding:16px 20px;display:flex;align-items:center;justify-content:space-between}
.ticket .thd .nm{font-weight:var(--w-bold);font-size:16px}
.ticket .thd .code{font-family:var(--font-mono);font-weight:var(--w-bold);font-size:13px;letter-spacing:.06em;color:var(--occ-red-300)}
.ticket .tbd{padding:8px 20px 18px}
.ticket .tr{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-1);font-size:15px}
.ticket .tr:last-child{border-bottom:0}
.ticket .tr .k{color:var(--fg-3)}
.ticket .tr .v{font-weight:var(--w-bold);text-align:right}
.bk-done .nextsteps{display:flex;flex-direction:column;gap:10px;margin-top:24px}

/* ============================================================
   MY BOOKINGS + QR (mobile)
   ============================================================ */
.mb-head{padding:54px 20px 18px;background:#fff;border-bottom:1px solid var(--line-1)}
.mb-head .hi{font-size:14px;color:var(--fg-3);font-weight:var(--w-semibold)}
.mb-head h1{font-weight:var(--w-extrabold);font-size:26px;letter-spacing:-.01em;margin:3px 0 0}
.mb-tabs{display:flex;gap:8px;margin-top:16px}
.mb-tabs .t{font-size:14px;font-weight:var(--w-bold);padding:9px 16px;border-radius:99px;border:1.5px solid var(--line-2);
  background:#fff;color:var(--fg-2)}
.mb-tabs .t.on{background:var(--ink-900);border-color:var(--ink-900);color:#fff}

.mb-body{flex:1;overflow:auto;padding:20px 20px 100px;background:var(--bg-page)}
.mb-body::-webkit-scrollbar{display:none}
.next-label{font-weight:var(--w-bold);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin:0 0 12px}

/* the feature "next booking" card -> leads to check-in */
.bcard{background:var(--ink-900);color:#fff;border-radius:var(--r-xl);padding:22px;position:relative;overflow:hidden;margin-bottom:24px}
.bcard::after{content:"";position:absolute;right:-36px;top:-24px;bottom:-24px;width:180px;
  background:repeating-linear-gradient(-45deg,transparent 0 22px,rgba(193,39,53,.18) 22px 24px)}
.bcard .ek{position:relative;font-size:12px;font-weight:var(--w-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--occ-red-300)}
.bcard h2{position:relative;font-weight:var(--w-extrabold);font-size:24px;margin:8px 0 4px;letter-spacing:-.01em}
.bcard .where{position:relative;font-size:15px;color:rgba(255,255,255,.7)}
.bcard .grid{position:relative;display:flex;gap:24px;margin:18px 0}
.bcard .grid .c .k{font-size:12px;color:rgba(255,255,255,.55);font-weight:var(--w-semibold);text-transform:uppercase;letter-spacing:.04em}
.bcard .grid .c .v{font-weight:var(--w-bold);font-size:17px;margin-top:3px}
.bcard .ci{position:relative;display:flex;width:100%;background:#fff;color:var(--ink-900);border:0;border-radius:var(--r-md);
  padding:16px;font-weight:var(--w-bold);font-size:17px;align-items:center;justify-content:center;gap:9px;min-height:54px}
.bcard .ci svg{width:22px;height:22px;color:var(--occ-red)}

.brow{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line-1);border-radius:var(--r-lg);
  padding:14px 16px;margin-bottom:12px}
.brow .dt{width:56px;flex-shrink:0;text-align:center;border-right:1px solid var(--line-1);padding-right:14px}
.brow .dt .mo{font-size:11px;font-weight:var(--w-bold);text-transform:uppercase;color:var(--occ-red);letter-spacing:.04em}
.brow .dt .dn{font-weight:var(--w-extrabold);font-size:24px;line-height:1.1}
.brow .mid{flex:1;min-width:0}
.brow .mid .nm{font-weight:var(--w-bold);font-size:16px}
.brow .mid .sub{font-size:13.5px;color:var(--fg-3);margin-top:3px;display:flex;align-items:center;gap:6px}
.brow .mid .sub svg{width:14px;height:14px}
.brow .chev{color:var(--fg-4)}
.brow .chev svg{width:20px;height:20px}

/* bottom tab bar */
.tabbar{display:flex;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-top:1px solid var(--line-1);
  padding:10px 8px 28px;flex-shrink:0}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;padding:4px}
.tabbar .tab svg{width:25px;height:25px;color:var(--fg-4)}
.tabbar .tab span{font-size:11px;font-weight:var(--w-bold);color:var(--fg-4)}
.tabbar .tab.on svg,.tabbar .tab.on span{color:var(--occ-red)}

/* QR CHECK-IN — high contrast, glanceable */
.qr{height:100%;display:flex;flex-direction:column;background:var(--ink-950);color:#fff}
.qr-top{padding:54px 20px 10px;display:flex;align-items:center;gap:12px}
.qr-top .x{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);border:0;display:flex;align-items:center;justify-content:center}
.qr-top .x svg{width:22px;height:22px;color:#fff}
.qr-top h1{font-weight:var(--w-extrabold);font-size:20px;margin:0}
.qr-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 24px 30px;text-align:center}
.qr-instr{font-size:17px;color:rgba(255,255,255,.7);font-weight:var(--w-semibold);margin-bottom:22px}
.qr-card{background:#fff;border-radius:var(--r-xl);padding:30px 26px;width:100%;max-width:340px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.qr-img{width:230px;height:230px;margin:0 auto;border-radius:14px;
  background:repeating-conic-gradient(var(--ink-950) 0% 25%,#fff 0% 50%) 50%/18px 18px}
.qr-name{font-weight:var(--w-extrabold);font-size:24px;color:var(--ink-900);margin-top:24px}
.qr-mem{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:14px;font-weight:var(--w-bold);
  background:var(--success-bg);color:var(--success);padding:6px 14px;border-radius:99px}
.qr-mem svg{width:16px;height:16px}
.qr-code{font-family:var(--font-mono);font-weight:var(--w-bold);font-size:26px;letter-spacing:.14em;color:var(--ink-900);
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line-1)}
.qr-detail{display:flex;justify-content:center;gap:30px;margin-top:24px}
.qr-detail .c .k{font-size:13px;color:rgba(255,255,255,.55);font-weight:var(--w-semibold);text-transform:uppercase;letter-spacing:.05em}
.qr-detail .c .v{font-weight:var(--w-extrabold);font-size:20px;margin-top:4px}
.qr-detail .c .v.red{color:var(--occ-red-300)}

/* ============================================================
   KIOSK QR (desktop / landscape, very large)
   ============================================================ */
.kiosk{height:100%;display:flex;background:var(--ink-950);color:#fff}
.kiosk .left{flex:1.15;display:flex;flex-direction:column;justify-content:center;padding:48px 56px;position:relative;overflow:hidden}
.kiosk .left::after{content:"";position:absolute;left:-60px;bottom:-60px;top:40%;width:340px;
  background:repeating-linear-gradient(-45deg,transparent 0 30px,rgba(193,39,53,.16) 30px 33px)}
.kiosk .left img{height:38px;margin-bottom:26px;position:relative;align-self:flex-start}
.kiosk .left .eyebrow{color:var(--occ-red-300);position:relative}
.kiosk .left h1{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:46px;line-height:.98;
  margin:14px 0 0;position:relative}
.kiosk .left .hello{font-size:21px;color:rgba(255,255,255,.75);margin-top:18px;position:relative;font-weight:var(--w-semibold);line-height:1.4}
.kiosk .left .deets{display:flex;gap:44px;margin-top:28px;position:relative}
.kiosk .left .deets .c .k{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.5);font-weight:var(--w-bold)}
.kiosk .left .deets .c .v{font-weight:var(--w-extrabold);font-size:26px;margin-top:8px}
.kiosk .left .deets .c .v.red{color:var(--occ-red-300)}
.kiosk .right{flex:.9;background:#fff;color:var(--ink-900);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px}
.kiosk .right .scan{font-size:22px;font-weight:var(--w-bold);color:var(--fg-2);margin-bottom:26px}
.kiosk .right .qr-img{width:228px;height:228px;flex-shrink:0}
.kiosk .right .code{font-family:var(--font-mono);font-weight:var(--w-bold);font-size:28px;letter-spacing:.16em;margin-top:24px;color:var(--ink-900)}
.kiosk .right .nm{font-weight:var(--w-extrabold);font-size:26px;margin-top:10px}

/* ============================================================
   DESKTOP WEBSITE / BOOKING (inside browser frame)
   ============================================================ */
.dsk{background:var(--bg-page);min-height:100%}
.dsk-nav{position:sticky;top:0;z-index:20;height:74px;display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-1)}
.dsk-nav .logo{height:34px}
.dsk-nav .links{display:flex;gap:30px;align-items:center}
.dsk-nav .links a{font-size:15px;font-weight:var(--w-semibold);color:var(--fg-2);text-decoration:none}
.dsk-nav .links a:hover{color:var(--occ-red)}
.dsk-nav .right{display:flex;gap:12px;align-items:center}

.dsk-hero{position:relative;min-height:540px;display:flex;align-items:center;color:#fff;overflow:hidden}
.dsk-hero .imgph{position:absolute;inset:0}
.dsk-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(27,28,31,.92) 0%,rgba(27,28,31,.66) 45%,rgba(27,28,31,.18) 100%)}
.dsk-hero .inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 40px;width:100%}
.dsk-hero .eyebrow{color:#fff;opacity:.9}
.dsk-hero h1{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:84px;line-height:.92;
  margin:16px 0 0;max-width:740px}
.dsk-hero h1 .red{color:var(--occ-red-300)}
.dsk-hero p{font-size:20px;line-height:1.5;color:rgba(255,255,255,.9);margin:20px 0 28px;max-width:480px}
.dsk-hero .cta{display:flex;gap:14px}
.dsk-hero .trust{display:flex;gap:24px;margin-top:30px}
.dsk-hero .trust .t{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:var(--w-semibold);color:rgba(255,255,255,.85)}
.dsk-hero .trust .t svg{width:20px;height:20px;color:var(--occ-red-300)}

.dsk-qbook{max-width:1180px;margin:0 auto;padding:48px 40px}
.dsk-qbook .lbl-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}
.dsk-qbook h2{font-weight:var(--w-extrabold);font-size:30px;letter-spacing:-.01em;margin:0}
.dsk-qbook .lbl-row a{font-weight:var(--w-bold);color:var(--occ-red);text-decoration:none;font-size:15px}
.dsk-qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.dsk-qgrid .qcard{min-height:150px}
.dsk-qgrid .qcard .ic{width:52px;height:52px}
.dsk-qgrid .qcard .ic svg{width:28px;height:28px}
.dsk-qgrid .qcard .nm{font-size:18px}

.dsk-feat{max-width:1180px;margin:0 auto;padding:20px 40px 64px}
.dsk-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.dsk-band{background:var(--occ-red);color:#fff;padding:56px 40px;position:relative;overflow:hidden}
.dsk-band .inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:40px;position:relative;z-index:2}
.dsk-band::after{content:"";position:absolute;right:0;top:-40px;bottom:-40px;width:360px;
  background:repeating-linear-gradient(-45deg,transparent 0 28px,rgba(255,255,255,.10) 28px 30px)}
.dsk-band h2{font-weight:var(--w-extrabold);font-size:38px;letter-spacing:-.01em;margin:0 0 10px}
.dsk-band p{font-size:18px;color:rgba(255,255,255,.92);margin:0;max-width:520px}

/* desktop booking: two columns */
.dbk{max-width:1080px;margin:0 auto;padding:36px 40px 60px}
.dbk-grid{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start}
.dbk-panel{background:#fff;border:1px solid var(--line-1);border-radius:var(--r-xl);padding:30px}
.dbk-summary{background:#fff;border:1px solid var(--line-1);border-radius:var(--r-xl);padding:24px;position:sticky;top:96px;box-shadow:var(--shadow-sm)}
.dbk-summary h3{font-weight:var(--w-extrabold);font-size:18px;margin:0 0 16px}
.dbk-summary .sline{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-1);font-size:15px}
.dbk-summary .sline .k{color:var(--fg-3)}
.dbk-summary .sline .v{font-weight:var(--w-bold);text-align:right}
.dbk-summary .sline .v.muted{color:var(--fg-4);font-weight:var(--w-semibold)}
.dbk-summary .stot{display:flex;justify-content:space-between;align-items:center;padding-top:16px;margin-top:4px}
.dbk-summary .stot .k{font-weight:var(--w-bold);font-size:16px}
.dbk-summary .stot .v{font-family:var(--font-display);font-size:36px;color:var(--occ-red);line-height:1}

@media(max-width:900px){.dbk-grid{grid-template-columns:1fr}.dbk-summary{position:static}}