/* Safe & Secure Locksmith homepage, style B (the "livery" restyle, 2026-09).

   Source of truth: the design canvas "Safe and Secure Homepage" (artboards
   Main / Tablet / Mobile / Play and Win). Palette lifted from the van livery:
   navy #221F49, deep navy #2E2A63, yellow #F2C230, paper #F7F6F2. Yellow
   surfaces always carry navy text, never white.

   Scope: everything hangs off body.ssl-b. The homepage content uses hb-*
   classes; the shared chrome (header, drawer, footer, callbar, booking sheet)
   keeps its own markup and is re-skinned here by token override, so the inner
   pages and the Fast Locksmith sites are untouched. Loaded from _shell.html. */

body.ssl-b{
  --hb-navy:#221F49; --hb-navy2:#2E2A63; --hb-yellow:#F2C230; --hb-paper:#F7F6F2;
  --hb-white:#FFFFFC; --hb-text:#4E4C66; --hb-muted:#6E6C86; --hb-line:#D9D7E4;
  --hb-tile:#ECEBF2; --hb-tile2:#E3E2EC; --hb-paper-dim:#C9C7D6; --hb-paper-warm:#F3EFDD;
  --hb-disp:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --hb-sans:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --hb-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--hb-paper); color:var(--hb-navy); font-family:var(--hb-sans);
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
body.ssl-b *{box-sizing:border-box}
body.ssl-b main{display:block}

/* ================================================================
   1. Page content (hb-*)
   ================================================================ */
.hb{background:var(--hb-paper); color:var(--hb-navy); font-family:var(--hb-sans)}
/* element resets at zero specificity, so any single class below wins */
:where(.hb) a{color:inherit; text-decoration:none}
:where(.hb) p{margin:0}
:where(.hb) h1,:where(.hb) h2,:where(.hb) h3{margin:0; color:inherit}
:where(.hb) h2,:where(.hb) h3{text-wrap:balance}
:where(.hb) img{display:block; max-width:100%}
:where(.hb) button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
:where(.hb) :focus-visible{outline:3px solid var(--hb-yellow); outline-offset:2px}

.hb-sec{border-top:1px solid var(--hb-line)}
.hb-in{max-width:1440px; margin:0 auto; padding:72px 56px; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:32px}
.hb-lead{grid-column:span 4; display:flex; flex-direction:column; gap:16px}
.hb-body{grid-column:span 8; min-width:0}
.hb-eb{font-family:var(--hb-mono); font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--hb-navy2)}
.hb-h2{font-family:var(--hb-disp); font-size:44px; line-height:1.02; font-weight:800; letter-spacing:-.025em}
.hb-p{font-size:17px; line-height:1.6; color:var(--hb-text)}
.hb-link{font-size:15px; font-weight:600; color:var(--hb-navy2)}
.hb-link:hover{color:var(--hb-navy); text-decoration:underline; text-underline-offset:3px}
.hb-no{font-family:var(--hb-mono); font-size:13px; color:var(--hb-navy2); font-weight:500}

/* buttons */
.hb-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:54px; padding:0 24px; font-weight:600; font-size:17px; white-space:nowrap; transition:transform .08s ease, background .12s ease}
.hb-btn:active{transform:translateY(1px)}
.hb-btn-y{background:var(--hb-yellow); color:var(--hb-navy)}
.hb-btn-y:hover{background:#EFB91C}
.hb-btn-o{border:1.5px solid var(--hb-navy); color:var(--hb-navy); background:transparent}
.hb-btn-o:hover{background:var(--hb-navy); color:var(--hb-paper)}
.hb-btn-op{border:1.5px solid var(--hb-paper); color:var(--hb-paper); background:transparent}
.hb-btn-op:hover{background:var(--hb-paper); color:var(--hb-navy)}
.hb-btn-md{height:52px; padding:0 22px; font-size:16px}
.hb-btn-sm{height:48px; padding:0 20px; font-size:15px}

/* ---- hero ---- */
.hb-hero{border-top:0}
.hb-hero .hb-in{padding:72px 56px 48px}
.hb-hero-copy{grid-column:span 7; display:flex; flex-direction:column; gap:26px; min-width:0}
.hb-hero-top{display:flex; align-items:center; gap:14px}
.hb-hero-top h1{font-family:var(--hb-mono); font-size:13px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--hb-navy2); line-height:1.4}
.hb-hero-top .hb-rule{width:28px; height:1px; background:var(--hb-yellow); display:inline-block; flex:none}
.hb-hero-top .hb-247{font-family:var(--hb-mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--hb-muted)}
.hb-hook{font-family:var(--hb-disp); font-size:96px; line-height:.98; font-weight:800; letter-spacing:-.035em; text-wrap:balance}
.hb-hero-p{max-width:640px; font-size:20px; line-height:1.55; color:var(--hb-text)}
.hb-hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hb-herolinks{font-size:15px; color:var(--hb-text); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center}
.hb-herolinks b{font-weight:600; color:var(--hb-navy)}
.hb-herolinks a{text-decoration:underline; text-underline-offset:3px}
.hb-herolinks a:hover{color:var(--hb-navy2)}
.hb-prices{display:flex; gap:32px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--hb-line); font-family:var(--hb-mono); font-size:14px}
.hb-prices div{display:flex; flex-direction:column; gap:4px}
.hb-prices span:first-child{color:var(--hb-muted); font-size:12px}
.hb-hero-tiles{grid-column:span 5; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; min-width:0}
.hb-tile-van{grid-row:span 2; height:440px; overflow:hidden; display:flex; background:var(--hb-tile2)}
.hb-tile-van img,.hb-tile-photo img{width:100%; height:100%; object-fit:cover; display:block}
.hb-tile-photo{height:212px; overflow:hidden; background:var(--hb-tile2); display:flex}
.hb-tile-game{height:212px; background:var(--hb-yellow); color:var(--hb-navy); display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; text-align:left; padding:18px; gap:8px; width:100%; transition:background .12s ease}
.hb-tile-game:hover{background:#EFB91C}
.hb-tile-game b{font-family:var(--hb-disp); font-weight:800; font-size:26px; line-height:1.05; letter-spacing:-.02em; text-wrap:balance}
.hb-tile-game span{font-size:14px}

/* ---- services list (two columns, read down each column) ---- */
.hb-svc-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,auto); grid-auto-flow:column; gap:0 40px}
.hb-svc{display:flex; flex-direction:column; gap:8px; padding:22px 0; border-top:1px solid var(--hb-line)}
.hb-svc:nth-child(3),.hb-svc:nth-child(6){border-bottom:1px solid var(--hb-line)}
.hb-svc-head{display:flex; align-items:baseline; gap:14px}
.hb-svc-head h3{font-size:22px; font-weight:600; line-height:1.2}
.hb-svc-tag{font-size:15px; font-weight:600}
.hb-svc-p{font-size:15px; line-height:1.55; color:var(--hb-text)}

/* ---- booking band (navy) ---- */
.hb-book{background:var(--hb-navy); color:var(--hb-paper)}
.hb-book .hb-eb{color:var(--hb-yellow)}
.hb-book .hb-h2{color:var(--hb-paper)}
.hb-book .hb-p,.hb-book .hb-or{color:var(--hb-paper-dim)}
.hb-book .hb-body{display:flex; flex-direction:column; gap:24px}
.hb-ctarow{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.hb-book .hb-lead .hb-ctarow{margin-top:6px}
.hb-or{font-size:15px}
.hb-steps4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.hb-step4{padding:18px; border:1px solid rgba(247,246,242,.22); display:flex; flex-direction:column; gap:8px}
.hb-step4 span{font-family:var(--hb-mono); font-size:12px; color:var(--hb-yellow)}
.hb-step4 h3{font-size:18px; font-weight:600; color:var(--hb-paper)}
.hb-book-note{font-size:15px; color:var(--hb-paper-dim)}
.hb-book-tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.hb-book-tile{padding:18px; background:var(--hb-navy2); color:var(--hb-paper); display:flex; flex-direction:column; gap:6px; transition:background .12s ease}
.hb-book-tile:hover{background:#39347A}
.hb-book-tile b{font-weight:600; font-size:17px}
.hb-book-tile span{font-size:14px; color:var(--hb-paper-dim)}
.hb-book .hb-ctarow .hb-or-sm{font-size:14px; color:var(--hb-paper-dim)}

/* ---- the shop (intro) ---- */
.hb-shop .hb-body{display:flex; flex-direction:column; gap:28px}
.hb-prose{display:flex; flex-direction:column; gap:14px; font-size:17px; line-height:1.65; color:var(--hb-navy); max-width:760px}
.hb-prose a{text-decoration:underline; text-underline-offset:3px}
.hb-checks{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; padding-top:24px; border-top:1px solid var(--hb-line)}
.hb-check{display:flex; flex-direction:column; gap:6px}
.hb-check h3{font-size:17px; font-weight:600}
.hb-check p{font-size:14px; line-height:1.5; color:var(--hb-text)}

/* ---- who we work with ---- */
.hb-who-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.hb-who-tile{padding:18px; background:var(--hb-tile); display:flex; flex-direction:column; gap:6px}
.hb-who-tile h3{font-size:17px; font-weight:600}
.hb-who-tile p{font-size:14px; color:var(--hb-text)}

/* ---- common jobs (start a booking) ---- */
.hb-jobs-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,auto); grid-auto-flow:column; gap:0 40px}
.hb-job{display:flex; align-items:center; gap:16px; padding:18px 0; border-top:1px solid var(--hb-line); width:100%; text-align:left; transition:color .12s ease}
.hb-job:nth-child(3),.hb-job:nth-child(6){border-bottom:1px solid var(--hb-line)}
.hb-job .hb-jt{font-size:18px; font-weight:500; flex:1}
.hb-job .hb-jar{color:var(--hb-navy2); transition:transform .12s ease}
.hb-job:hover .hb-jar{transform:translateX(4px)}

/* ---- process ---- */
.hb-steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px}
.hb-step{display:flex; flex-direction:column; gap:10px; padding-top:16px; border-top:2px solid var(--hb-yellow)}
.hb-step span{font-family:var(--hb-mono); font-size:12px; color:var(--hb-muted)}
.hb-step h3{font-size:19px; font-weight:600}
.hb-step p{font-size:14px; line-height:1.55; color:var(--hb-text)}

/* ---- service areas ---- */
.hb-areas .hb-body{display:flex; flex-direction:column; gap:20px}
.hb-map{height:260px; background:var(--hb-tile2); position:relative; overflow:hidden}
.hb-map svg{width:100%; height:100%; display:block}
.hb-map .hb-map-cap{position:absolute; left:14px; bottom:14px; font-family:var(--hb-mono); font-size:12px; color:var(--hb-muted)}
.hb-cities{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 24px; font-size:16px; font-weight:500}
.hb-cities a,.hb-cities span{padding:10px 0; border-bottom:1px solid var(--hb-line)}
.hb-cities a:hover{color:var(--hb-navy2)}

/* ---- FAQ ---- */
.hb-faq .hb-body{display:flex; flex-direction:column}
.hb-qa{border-top:1px solid var(--hb-line)}
.hb-qa:last-child{border-bottom:1px solid var(--hb-line)}
.hb-qa summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; font-size:18px; font-weight:500}
.hb-qa summary::-webkit-details-marker{display:none}
.hb-qa summary .hb-pm{color:var(--hb-navy2); font-size:22px; line-height:1; transition:transform .18s ease}
.hb-qa[open] summary .hb-pm{transform:rotate(45deg)}
.hb-ans{padding:0 0 22px; font-size:16px; line-height:1.6; color:var(--hb-text); max-width:80ch}
.hb-ans a{text-decoration:underline; text-underline-offset:3px; color:var(--hb-navy)}

/* ---- closing band ---- */
.hb-close{background:var(--hb-navy); color:var(--hb-paper); border-top:0}
.hb-close .hb-in{padding:80px 56px; align-items:center}
.hb-close-copy{grid-column:span 8; display:flex; flex-direction:column; gap:14px}
.hb-close-copy h2{font-family:var(--hb-disp); font-size:48px; line-height:1.02; font-weight:800; letter-spacing:-.025em; color:var(--hb-paper)}
.hb-close-copy p{font-size:18px; line-height:1.55; color:var(--hb-paper-warm); max-width:720px}
.hb-close-cta{grid-column:span 4; display:flex; flex-direction:column; gap:12px; align-items:flex-start}

/* ================================================================
   2. Play & Win (the memory game, style B)
   ================================================================ */
.hb-stage{position:relative}
.hb-stage.is-playing .svcgrid{display:none}
.hb-stage.is-collapsing .svc{pointer-events:none; z-index:4; will-change:transform,opacity}
.ssl-game-puck{position:absolute; z-index:6; width:64px; height:64px; transform:translate(-50%,-50%) scale(.3); background:var(--hb-navy); border:1.5px solid var(--hb-navy); display:grid; place-items:center; opacity:0; transition:transform .3s cubic-bezier(.2,.7,.2,1), opacity .26s ease}
.ssl-game-puck .mk{width:54%; height:54%; display:grid; place-items:center; color:var(--hb-yellow)}
.ssl-game-puck .mk svg{width:100%; height:100%; stroke:var(--hb-yellow)}
.ssl-game-puck.is-open{opacity:1; transform:translate(-50%,-50%) scale(1)}
.ssl-game-puck.is-gone{opacity:0; transform:translate(-50%,-50%) scale(6.5)}
.hb-game{background:var(--hb-white); border:1.5px solid var(--hb-navy); padding:22px; display:flex; flex-direction:column; gap:16px; transition:opacity .3s ease, transform .32s cubic-bezier(.2,.7,.2,1)}
.hb-game[hidden]{display:none}
.hb-game.is-revealing{opacity:0; transform:scale(.95)}
.hb-game-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap}
.hb-game-title{display:flex; flex-direction:column; gap:6px}
.hb-game-title .hb-eb{font-size:11px}
.hb-game-title h3{font-family:var(--hb-disp); font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.05}
.hb-game-tools{display:flex; align-items:center; gap:8px; flex:none}
.hb-game-hud{display:flex; align-items:center; gap:18px; font-family:var(--hb-mono); font-size:13px}
.hb-stat b{font-weight:600}
.hb-ibtn{width:40px; height:40px; border:1.5px solid var(--hb-navy); background:var(--hb-paper); font-size:18px; display:grid; place-items:center; transition:background .12s ease}
.hb-ibtn:hover{background:var(--hb-tile)}
.hb-meter{height:8px; border:1.5px solid var(--hb-navy); background:var(--hb-paper); overflow:hidden}
.hb-meter i{display:block; height:100%; width:0; background:var(--hb-yellow); transition:width .35s cubic-bezier(.2,.7,.2,1)}
.hb-banner{display:flex; align-items:center; gap:12px; border:1.5px solid var(--hb-navy); padding:11px 14px; font-family:var(--hb-mono); font-size:12px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; background:var(--hb-yellow); color:var(--hb-navy); animation:hbBannerPop .4s cubic-bezier(.2,1.3,.4,1)}
.hb-banner[hidden]{display:none}
.hb-banner .bmedal{flex:none; width:30px; height:30px; display:grid; place-items:center; border:1.5px solid var(--hb-navy); background:rgba(255,255,255,.35)}
.hb-banner .bmedal svg{width:20px; height:20px}
.hb-banner b{font-weight:600}
.hb-banner.t-silver{background:#E4E6EC}
.hb-banner.t-bronze{background:#E8C4A0}
@keyframes hbBannerPop{0%{transform:translateY(-6px) scale(.98); opacity:0}100%{transform:none; opacity:1}}

/* the board: five square cards across, a centred partial last row */
.hb-board{--cols:5; --gap:8px; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gap)}
.ssl-card{position:relative; aspect-ratio:1; flex:0 0 auto; width:calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); border:0; padding:0; margin:0; background:transparent; cursor:pointer}
.ssl-card:disabled{cursor:default}
.ssl-card-inner{position:absolute; inset:0}
.ssl-card-face{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1.5px solid var(--hb-navy); transition:opacity .2s ease, transform .28s cubic-bezier(.2,.7,.2,1), filter .45s ease}
.ssl-card-back{background:var(--hb-navy); color:var(--hb-yellow)}
.ssl-card-back .mk{width:23%; height:23%; display:grid; place-items:center}
.ssl-card-back .mk svg{width:100%; height:100%; stroke:var(--hb-yellow)}
.ssl-card-front{background:var(--hb-paper); color:var(--hb-navy); opacity:0; transform:scale(.82)}
.ssl-card-front img{width:100%; height:100%; object-fit:cover; display:block}
/* board faces are bare pictures (the name is read out, not printed); the
   full-screen reveal and the pick grid are where a card gets its name */
.ssl-card-front .lab{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.ssl-card.is-up .ssl-card-front,.ssl-card.is-matched .ssl-card-front{opacity:1; transform:none}
.ssl-card.is-up .ssl-card-back,.ssl-card.is-matched .ssl-card-back{opacity:0; transform:scale(.82)}
.ssl-card.is-matched .ssl-card-front{opacity:.55}
/* bonus tier fronts keep their own art; the ribbon says what they are */
.ssl-card-front.t-gold::after,.ssl-card-front.t-silver::after,.ssl-card-front.t-bronze::after{content:"BONUS"; position:absolute; top:7px; left:-22px; transform:rotate(-45deg); width:84px; text-align:center; font-family:var(--hb-mono); font-size:7px; font-weight:600; letter-spacing:.1em; background:var(--hb-navy); color:var(--hb-paper); padding:2px 0}
.ssl-card-front .ic{display:none}
.ssl-card.is-matched.is-special .ssl-card-front{opacity:.8; box-shadow:inset 0 0 0 3px var(--hb-yellow)}

/* full-screen match reveal, then a swipe off */
.ssl-card-reveal{position:fixed; inset:0; z-index:120; display:grid; place-items:center; background:rgba(34,31,73,0); transition:background .22s ease; pointer-events:none}
.ssl-card-reveal.is-interactive{pointer-events:auto; cursor:pointer}
.ssl-card-reveal.rv-in{background:rgba(34,31,73,.72)}
.ssl-card-reveal .rv-card{position:relative; width:min(72vw,320px); aspect-ratio:1; overflow:hidden; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--hb-paper); background:var(--hb-paper); box-shadow:0 30px 90px -20px rgba(0,0,0,.75); transform:scale(.18) rotate(-9deg); opacity:0; transition:transform .44s cubic-bezier(.2,1.25,.4,1), opacity .3s ease}
.ssl-card-reveal .rv-card img{width:100%; height:100%; object-fit:cover; display:block}
.ssl-card-reveal.rv-in .rv-card{transform:scale(1) rotate(0); opacity:1}
.ssl-card-reveal.rv-out .rv-card{transform:translateX(125vw) rotate(24deg); opacity:0; transition:transform .46s cubic-bezier(.6,0,.75,1), opacity .46s ease}
.ssl-card-reveal .rv-card .lab{position:absolute; left:0; right:0; top:auto; bottom:0; width:auto; height:auto; margin:0; padding:12px 8px; overflow:visible; clip:auto; white-space:normal; font-family:var(--hb-mono); font-size:14px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-align:center; background:rgba(34,31,73,.92); color:var(--hb-paper)}
.ssl-card-reveal .rv-card .ic{display:none}
.ssl-card-reveal .rv-card::after{display:none}
.ssl-card-reveal .rv-hint{position:fixed; left:0; right:0; bottom:max(22px,env(safe-area-inset-bottom)); text-align:center; font-family:var(--hb-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--hb-paper); opacity:0; transition:opacity .3s ease .25s; pointer-events:none}
.ssl-card-reveal.rv-in .rv-hint{opacity:1}
.ssl-card-reveal.rv-out .rv-hint{opacity:0; transition:opacity .18s ease}

/* foot: hint + bonus odds */
.hb-game-foot{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding-top:12px; border-top:1px solid var(--hb-line)}
.hb-game-foot[hidden]{display:none}
.hb-hint{font-size:13px; color:var(--hb-text); max-width:52ch}
.hb-hint b{font-weight:600; color:var(--hb-navy)}
.hb-info{position:relative; display:flex; align-items:center}
.hb-info-btn{display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 12px; border:1.5px solid var(--hb-navy); background:var(--hb-paper); font-size:13px; font-weight:600; white-space:nowrap}
.hb-info-btn .ii{display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--hb-navy); color:var(--hb-paper); font-family:var(--hb-mono); font-size:11px}
.hb-info-pop{position:absolute; bottom:calc(100% + 10px); right:0; width:300px; z-index:30; border:1.5px solid var(--hb-navy); background:var(--hb-white); padding:14px; display:flex; flex-direction:column; gap:8px}
.hb-info-pop[hidden]{display:none}
.hb-info-pop h4{margin:0; font-weight:600; font-size:14px}
.hb-info-pop .sub{font-size:13px; color:var(--hb-text); line-height:1.5}
.ssl-odds{display:flex; flex-direction:column; gap:6px}
.ssl-odds-row{display:flex; align-items:center; gap:10px; border:1px solid var(--hb-line); background:var(--hb-paper); padding:7px 9px}
.ssl-odds-row .om{width:24px; height:24px; flex:none; display:grid; place-items:center; border:1px solid var(--hb-navy)}
.ssl-odds-row .om svg{width:16px; height:16px}
.ssl-odds-row.t-gold .om{background:var(--hb-yellow)}
.ssl-odds-row.t-silver .om{background:#E4E6EC}
.ssl-odds-row.t-bronze .om{background:#E8C4A0}
.ssl-odds-row .ol{flex:1; min-width:0; font-family:var(--hb-mono); font-size:11px; line-height:1.3}
.ssl-odds-row .ol i{font-style:normal; color:var(--hb-muted)}
.ssl-odds-row .pct{flex:none; font-family:var(--hb-disp); font-weight:800; font-size:16px}
.ssl-odds-row .pct span{font-size:9px; color:var(--hb-muted)}

/* win state 1: the ten matched cards come back, named; pick one */
.hb-pick{display:flex; flex-direction:column; gap:16px; padding-top:16px; border-top:1px solid var(--hb-line); position:relative}
.hb-pick[hidden]{display:none}
.hb-pick-head{display:flex; flex-direction:column; gap:6px}
.hb-pick-head .hb-eb{font-size:11px}
.hb-pick-head h3{font-family:var(--hb-disp); font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.05}
.hb-pick-head h3 mark{background:var(--hb-yellow); color:var(--hb-navy); padding:0 6px}
.hb-pick-head p{font-size:14px; color:var(--hb-text); line-height:1.5}
.hb-pick-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px}
.hb-pick-card{display:flex; flex-direction:column; border:1.5px solid var(--hb-navy); background:var(--hb-paper); width:100%; text-align:center; animation:hbCardIn .52s ease-out both; transition:outline-color .12s ease}
.hb-pick-card:nth-child(1){animation-delay:0ms} .hb-pick-card:nth-child(2){animation-delay:90ms} .hb-pick-card:nth-child(3){animation-delay:180ms} .hb-pick-card:nth-child(4){animation-delay:270ms} .hb-pick-card:nth-child(5){animation-delay:360ms}
.hb-pick-card:nth-child(6){animation-delay:450ms} .hb-pick-card:nth-child(7){animation-delay:540ms} .hb-pick-card:nth-child(8){animation-delay:630ms} .hb-pick-card:nth-child(9){animation-delay:720ms} .hb-pick-card:nth-child(10){animation-delay:810ms}
.hb-pick-card:hover,.hb-pick-card:focus-visible,.hb-pick-card.is-picked{outline:3px solid var(--hb-yellow); outline-offset:2px}
.hb-pick-card .im{display:flex; aspect-ratio:1; overflow:hidden}
.hb-pick-card .im img{width:100%; height:100%; object-fit:cover; display:block}
.hb-pick-card .lb{padding:7px 6px; font-size:12px; font-weight:600; line-height:1.2}
.hb-pick-card:hover .lb,.hb-pick-card:focus-visible .lb,.hb-pick-card.is-picked .lb{background:var(--hb-yellow); color:var(--hb-navy)}
.hb-pick-card:hover .lb::after,.hb-pick-card:focus-visible .lb::after,.hb-pick-card.is-picked .lb::after{content:" \2192"}
@keyframes hbCardIn{from{opacity:0; transform:translateY(10px) scale(.96)}to{opacity:1; transform:none}}
.hb-pick-foot{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding-top:12px; border-top:1px solid var(--hb-line); font-size:13px; color:var(--hb-text)}
.hb-pick-foot button{text-decoration:underline; text-underline-offset:3px; font-weight:600; color:var(--hb-navy)}
.hb-pick-foot .hb-pick-stats{font-family:var(--hb-mono); font-size:11px; white-space:nowrap}

/* win state 2: the code by email (the other path) */
.hb-win,.hb-result{display:flex; flex-direction:column; gap:14px; padding-top:16px; border-top:1px solid var(--hb-line); position:relative}
.hb-win[hidden],.hb-result[hidden]{display:none}
.hb-win .hb-eb,.hb-result .hb-eb{font-size:11px}
.hb-win h3,.hb-result h3{font-family:var(--hb-disp); font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.05}
.hb-win h3 span,.hb-result h3 span{color:var(--hb-navy2)}
.hb-win-sub,.hb-result-note{font-size:14px; color:var(--hb-text); line-height:1.5; max-width:60ch}
.hb-win-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.hb-win-row.one{display:flex}
.ssl-game-input{height:46px; border:1.5px solid var(--hb-navy); background:var(--hb-paper); color:var(--hb-navy); padding:0 12px; font:inherit; font-size:14px; min-width:0}
.ssl-game-input::placeholder{color:var(--hb-muted)}
.ssl-game-submit{height:52px; padding:0 16px; background:var(--hb-navy); color:var(--hb-paper); font-weight:600; font-size:14px; white-space:nowrap}
.ssl-game-submit:disabled{opacity:.55; cursor:default}
.ssl-game-err{font-size:13px; font-weight:600; color:#B23A2E}
.ssl-game-err[hidden]{display:none}
.hb-back-pick{align-self:flex-start; font-size:13px; color:var(--hb-text); text-decoration:underline; text-underline-offset:3px}
.ssl-prizes{display:flex; flex-wrap:wrap; gap:6px}
.ssl-prizes[hidden]{display:none}
.ssl-prize{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1.5px solid var(--hb-navy2); color:var(--hb-navy2); font-family:var(--hb-mono); font-size:11px; font-weight:600}
.ssl-prize .pm{width:18px; height:18px; display:grid; place-items:center}
.ssl-prize .pm svg{width:14px; height:14px}
.hb-code-row{display:flex; gap:10px; align-items:stretch; flex-wrap:wrap}
.ssl-game-code{flex:1; display:flex; align-items:center; padding:0 14px; height:52px; border:1.5px dashed var(--hb-navy2); font-family:var(--hb-mono); font-size:18px; font-weight:600; letter-spacing:.08em; min-width:160px}
.ssl-game-copy{height:52px; padding:0 16px; border:1.5px solid var(--hb-navy); background:var(--hb-paper); font-weight:600; font-size:14px}
.hb-result-cta{display:flex; flex-wrap:wrap; gap:8px}
.hb-result-cta .hb-btn{height:40px; padding:0 14px; font-size:13px}
.hb-result-cta .hb-btn-q{border:1.5px solid var(--hb-line); color:var(--hb-text); background:transparent}
.hb-result-cta .hb-btn-q:hover{border-color:var(--hb-navy); color:var(--hb-navy)}
.ssl-confetti{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:5}
.ssl-confetti i{position:absolute; top:14px; width:9px; height:9px; border:1px solid var(--hb-navy); opacity:0; animation:hbConf 1.1s ease-out forwards}
@keyframes hbConf{0%{opacity:1; transform:translateY(0) rotate(0)}100%{opacity:0; transform:translateY(190px) rotate(220deg)}}

/* the strip the game drops into the booking sheet once a card is picked */
.ssl-win-strip{display:flex; align-items:center; gap:12px; padding:12px; margin:2px 0 12px; background:var(--hb-navy2); color:var(--hb-paper)}
.ssl-win-strip img{width:56px; height:56px; object-fit:cover; flex:none; border:1.5px solid var(--hb-yellow); display:block}
.ssl-win-strip .t{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1}
.ssl-win-strip .t b{font-size:15px; font-weight:600}
.ssl-win-strip .t i{font-style:normal; font-family:var(--hb-mono); font-size:11px; color:var(--hb-yellow); line-height:1.35}
.ssl-win-strip .ch{font-size:13px; color:var(--hb-paper-dim); text-decoration:underline; text-underline-offset:3px; background:none; border:0; cursor:pointer; font-family:inherit}

@media(prefers-reduced-motion:reduce){
  .hb-pick-card,.hb-banner,.ssl-confetti i{animation:none}
  .ssl-card-face,.hb-game,.ssl-game-puck{transition:none}
  .ssl-card-reveal{display:none}
  .hb-stage.is-collapsing .svc{transition:none !important}
}

/* ================================================================
   3. Shared chrome, re-skinned for B (header, drawer, footer, callbar)
   ================================================================ */
/* header */
.ssl-b .sslx-header{background:var(--hb-paper); border-bottom:1px solid var(--hb-line); font-family:var(--hb-sans)}
.ssl-b .sslx-header.sslx-scrolled{background:rgba(247,246,242,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.ssl-b .sslx-wrap{max-width:1440px; padding:0 56px}
.ssl-b .sslx-nav{height:76px; gap:14px}
.ssl-b .sslx-brand{gap:14px}
.ssl-b .sslx-mark-b{width:28px; height:28px; background:var(--hb-navy); border:0; box-shadow:inset 0 0 0 3px var(--hb-yellow)}
.ssl-b .sslx-mark-b img{width:14px; height:14px}
.ssl-b .sslx-bn{font-family:var(--hb-disp); font-weight:800; font-size:22px; letter-spacing:-.02em; text-transform:none; color:var(--hb-navy); line-height:1}
.ssl-b .sslx-bn .amp{color:var(--hb-navy)}
.ssl-b .sslx-be{display:none}
.ssl-b .sslx-links{gap:0}
.ssl-b .sslx-links a{font-family:var(--hb-sans); font-size:15px; font-weight:500; letter-spacing:0; text-transform:none; padding:8px 13px; border:0; color:var(--hb-navy)}
.ssl-b .sslx-links a:hover{color:var(--hb-navy2); background:transparent; border:0}
.ssl-b .sslx-links a::after{display:none}
.ssl-b .sslx-links a.sslx-pri{color:var(--hb-navy); border:0}
.ssl-b .sslx-cta{gap:10px}
.ssl-b .sslx-ibox.sslx-phone{display:none}
.ssl-b .sslx-ibox.sslx-cart{display:none; border-color:var(--hb-navy); color:var(--hb-navy); width:44px; height:44px}
.ssl-b .sslx-ibox.sslx-cart:has(.sslx-cart-n:not([hidden])){display:grid}
.ssl-b .sslx-cart-n{background:var(--hb-yellow); color:var(--hb-navy); border-color:var(--hb-paper)}
.ssl-b .sslx-booknow{font-family:var(--hb-sans); font-size:15px; font-weight:600; letter-spacing:0; text-transform:none; height:44px; padding:0 18px; background:var(--hb-yellow); color:var(--hb-navy); border:0; white-space:nowrap}
.ssl-b .sslx-booknow:hover{background:#EFB91C}
.ssl-b .sslx-booknow svg{display:none}
.ssl-b .sslx-bookicon{display:none}
.ssl-b .sslx-burger{width:44px; height:44px; border:1.5px solid var(--hb-navy); color:var(--hb-navy)}
/* drawer */
.ssl-b .sslx-drawer-panel{background:var(--hb-navy); border-left:1px solid rgba(247,246,242,.12); font-family:var(--hb-sans)}
.ssl-b .ssm-close{background:var(--hb-navy2); border-color:rgba(247,246,242,.12); color:var(--hb-paper); border-radius:0}
.ssl-b .ssm-label{font-family:var(--hb-mono); color:var(--hb-paper-dim); font-weight:500}
.ssl-b .ssm-card{background:var(--hb-navy2); border:1px solid rgba(247,246,242,.1); border-radius:0}
.ssl-b .ssm-card:active{background:#39347A; border-color:var(--hb-yellow)}
.ssl-b .ssm-ico{background:transparent; border:1.5px solid var(--hb-yellow); color:var(--hb-yellow); border-radius:0}
.ssl-b .ssm-txt b{font-family:var(--hb-sans); font-weight:600; text-transform:none; letter-spacing:0; color:var(--hb-paper)}
.ssl-b .ssm-txt span{font-family:var(--hb-sans); color:var(--hb-paper-dim)}
.ssl-b .ssm-chev{color:var(--hb-yellow)}
.ssl-b .ssm-card.ssm-shop{background:var(--hb-navy2); border:1px solid var(--hb-yellow); border-radius:0; box-shadow:none}
.ssl-b .ssm-card.ssm-shop:active{transform:none; box-shadow:none}
.ssl-b .ssm-card.ssm-shop .ssm-ico{background:var(--hb-yellow); color:var(--hb-navy); border-color:var(--hb-yellow)}
.ssl-b .ssm-btn{border-radius:0; font-family:var(--hb-sans); font-weight:600}
.ssl-b .ssm-btn-book{background:var(--hb-yellow); color:var(--hb-navy); box-shadow:none}
.ssl-b .ssm-btn-call{color:var(--hb-paper); border:1.5px solid var(--hb-paper)}
.ssl-b .ssm-foot{border-top-color:rgba(247,246,242,.12)}
.ssl-b .ssm-foot span{font-family:var(--hb-sans); color:var(--hb-paper-dim)}
.ssl-b .ssm-socials a,.ssl-b .ssm-socials .ssm-hi{border-color:rgba(247,246,242,.2); color:var(--hb-paper-dim); border-radius:0; font-family:var(--hb-mono)}
.ssl-b .ssm-socials .ssm-acct-menu{background:var(--hb-navy2); border-color:rgba(247,246,242,.2); border-radius:0}
.ssl-b .ssm-socials .ssm-acct-menu a{font-family:var(--hb-mono); color:var(--hb-paper)}
.ssl-b .ssm-socials .ssm-acct-menu a svg{color:var(--hb-yellow)}
/* footer */
.ssl-b .sslx-foot{background:var(--hb-navy); border-top:0; color:var(--hb-paper-dim); font-family:var(--hb-sans); padding:40px 0 24px}
.ssl-b .sslx-foot .sslx-wrap{max-width:1440px; padding:0 56px}
.ssl-b .sslx-foot .sslx-brand>span{font-family:var(--hb-disp); font-weight:800; font-size:18px; color:var(--hb-paper); letter-spacing:-.02em}
.ssl-b .sslx-foot .sslx-brand small{font-family:var(--hb-mono); color:var(--hb-paper-dim); font-weight:500}
.ssl-b .sslx-foot-top{border-bottom-color:rgba(247,246,242,.12)}
.ssl-b .sslx-foot-top p{color:var(--hb-paper-dim); font-size:14px}
.ssl-b .sslx-fbtn{font-family:var(--hb-sans); font-weight:600; font-size:15px; height:48px; padding:0 20px; border:1.5px solid transparent; box-shadow:none; transition:background .12s ease, color .12s ease}
.ssl-b .sslx-fbtn-gold{background:var(--hb-yellow); color:var(--hb-navy); border-color:var(--hb-yellow)}
.ssl-b .sslx-fbtn-gold:hover,.ssl-b .sslx-fbtn-gold:active{transform:none; box-shadow:none; background:#EFB91C}
.ssl-b .sslx-fbtn-ghost{background:transparent; border-color:var(--hb-paper); color:var(--hb-paper)}
.ssl-b .sslx-fbtn-ghost:hover,.ssl-b .sslx-fbtn-ghost:active{transform:none; box-shadow:none; background:var(--hb-paper); color:var(--hb-navy)}
.ssl-b .sslx-fsum{font-family:var(--hb-mono); font-weight:500; letter-spacing:.18em; color:var(--hb-yellow)}
.ssl-b .sslx-fsum::after{color:var(--hb-yellow)}
.ssl-b .sslx-fcol-cb:focus-visible ~ .sslx-fsum{outline-color:var(--hb-yellow)}
.ssl-b .sslx-flinks a,.ssl-b .sslx-fcontact a,.ssl-b .sslx-fcontact p{color:var(--hb-paper-dim); font-size:14px}
.ssl-b .sslx-flinks a:hover{color:var(--hb-paper)}
.ssl-b .sslx-flinks.sslx-tags a{border-color:rgba(247,246,242,.2); border-radius:0}
.ssl-b .sslx-fareas{color:var(--hb-paper-dim); opacity:.85}
.ssl-b .sslx-fareas a{color:var(--hb-paper); text-decoration:underline; text-underline-offset:3px}
.ssl-b .sslx-foot-bot{border-top-color:rgba(247,246,242,.12); color:var(--hb-paper-dim); font-size:13px}
.ssl-b .sslx-fsocial a{border-color:rgba(247,246,242,.24); color:var(--hb-paper-dim)}
.ssl-b .sslx-fsocial a:hover{color:var(--hb-yellow); border-color:var(--hb-yellow)}
.ssl-b .sslx-fcol{border-bottom-color:rgba(247,246,242,.12)}
/* callbar (Home, Call now, Book online, Menu) */
body.ssl-b .lq-cb{--cb-cream:var(--hb-tile); --cb-card:var(--hb-paper); --cb-sunk:var(--hb-tile2); --cb-ink:var(--hb-navy); --cb-accent:var(--hb-yellow); --cb-on-accent:var(--hb-navy); --cb-border:var(--hb-line); --cb-border-strong:var(--hb-paper-dim); --cb-muted:var(--hb-muted); --cb-faint:#9A98B0; --cb-font:var(--hb-sans); --cb-display:var(--hb-disp); --cb-mono:var(--hb-mono)}
body.ssl-b .lq-cb .callbar{background:var(--hb-navy); border-top:1px solid rgba(247,246,242,.12); backdrop-filter:none; -webkit-backdrop-filter:none; height:calc(76px + env(safe-area-inset-bottom)); padding:0 8px calc(8px + env(safe-area-inset-bottom)); align-items:flex-end}
body.ssl-b .lq-cb .cb-tab{color:var(--hb-paper-dim); gap:4px; height:60px; justify-content:flex-end; padding-bottom:0}
body.ssl-b .lq-cb .cb-tab svg{width:24px; height:24px}
body.ssl-b .lq-cb .cb-tab span{font-family:var(--hb-sans); font-size:10px; font-weight:500; letter-spacing:.04em}
body.ssl-b .lq-cb .cb-tab.on{color:var(--hb-paper-dim)}
body.ssl-b .lq-cb .cb-tab.on:first-child{order:1}
body.ssl-b .lq-cb .cb-tab[data-sheet="lq-svc-open"],body.ssl-b .lq-cb .cb-gap,body.ssl-b .lq-cb .cb-swipe-hint{display:none}
body.ssl-b .lq-cb .cb-fab{position:static; order:2; flex:1.4; transform:none; width:auto; height:60px; border-radius:0; background:transparent; box-shadow:none; color:var(--hb-yellow); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; font-family:var(--hb-sans); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
body.ssl-b .lq-cb .cb-fab:active{transform:none; background:transparent}
body.ssl-b .lq-cb .cb-fab svg{width:52px; height:52px; padding:14px; border-radius:50%; background:var(--hb-yellow); color:var(--hb-navy); margin-top:-22px; box-shadow:0 0 0 4px var(--hb-navy)}
body.ssl-b .lq-cb .cb-fab span{font-family:var(--hb-sans); font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--hb-yellow)}
body.ssl-b .lq-cb .cb-tab[data-sheet="lq-ct-open"]{order:3; flex:1.4; color:var(--hb-paper); gap:5px}
body.ssl-b .lq-cb .cb-tab[data-sheet="lq-ct-open"] span{font-size:11px; font-weight:700; text-transform:uppercase}
body.ssl-b .lq-cb .cb-tab[data-sheet="lq-ct-open"] .ic-n,body.ssl-b .lq-cb .cb-tab[data-sheet="lq-ct-open"] .ic-x{width:52px; height:52px; padding:14px; border-radius:50%; background:var(--hb-paper); color:var(--hb-navy); margin-top:-22px; box-shadow:0 0 0 4px var(--hb-navy)}
body.ssl-b .lq-cb .cb-tab-menu{order:4}
body.ssl-b .lq-cb .cb-tab[data-sheet="lq-rf-open"],body.ssl-b .lq-cb .cb-tab[href]:not(.on){order:4}
body.ssl-b .lq-cb .svc-sheet{border-radius:0; border-top:1.5px solid var(--hb-navy); font-family:var(--hb-sans)}
body.ssl-b .lq-cb .bk-prepay{border-radius:0}
body.ssl-b .lq-cb .cb-dial{background:var(--hb-navy); color:var(--hb-paper); font-family:var(--hb-sans)}
body.ssl-b .lq-cb .cb-hub{font-family:var(--hb-sans)}
body.ssl-b .lq-cb .cb-btn,body.ssl-b .lq-cb .cb-hub-call{font-family:var(--hb-sans); font-weight:600}
/* the booking sheet's chosen states paint the accent: on yellow, navy text */
body.ssl-b .lq-cb .bk-win input:checked + span,
body.ssl-b .lq-cb .bk-cal-day.sel,
body.ssl-b .lq-cb .bk-svc-card.on .bk-svc-name,
body.ssl-b .lq-cb .bk-cat-card-urgent .bk-cat-ico,
body.ssl-b .lq-cb .bk-cat-card-urgent .bk-cat-go{color:var(--hb-navy)}
body.ssl-b .lq-cb .bk-cat-card-urgent{background:var(--hb-paper-warm); border-color:rgba(34,31,73,.35)}
body.ssl-b .lq-cb .bk-cat-card-urgent .bk-cat-ico{box-shadow:none}
body.ssl-b .lq-cb .bk-cat-card-urgent .bk-cat-tags span{background:rgba(34,31,73,.08); color:var(--hb-navy)}
/* room under the bar: the design keeps 16px of clearance beneath its 76px bar */
@media(max-width:999.98px){
  body.ssl-b:has(.lq-cb){padding-bottom:calc(92px + env(safe-area-inset-bottom))}
}
/* the platform bands above and below stay as they are */

/* ================================================================
   4. Responsive: tablet (<= 980) and phone (<= 600)
   ================================================================ */
@media(max-width:1120px){
  .hb-hook{font-size:72px}
}
@media(max-width:980px){
  .hb-in{display:flex; flex-direction:column; gap:24px; padding:48px 28px}
  .hb-hero .hb-in{padding:48px 28px}
  .hb-hook{font-size:64px; line-height:1.02}
  .hb-h2{font-size:36px; line-height:1.05}
  .hb-close-copy h2{font-size:36px}
  .hb-hero-p{font-size:18px}
  .hb-prices{gap:20px 32px}
  .hb-tile-van{height:360px}
  .hb-tile-photo{height:172px}
  .hb-tile-game{height:auto; min-height:172px}
  .hb-steps4,.hb-book-tiles,.hb-checks,.hb-who-grid,.hb-steps,.hb-cities{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hb-close .hb-in{padding:48px 28px}
  .hb-pick-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ssl-b .sslx-wrap,.ssl-b .sslx-foot .sslx-wrap{padding:0 28px}
  /* one wrapping row: the logo, then the links and Book Now together on the right */
  .ssl-b .sslx-nav{height:auto; padding:14px 0; flex-wrap:wrap; gap:12px}
  .ssl-b .sslx-links{display:flex; flex-wrap:wrap; gap:12px 18px; margin-left:auto}
  .ssl-b .sslx-links a{padding:0}
  .ssl-b .sslx-cta .sslx-booknow{display:inline-flex}
  .ssl-b .sslx-burger{display:none}
  .ssl-b .sslx-foot{padding:28px 0 20px}
}
@media(max-width:600px){
  .hb-in{padding:40px 20px; gap:24px}
  .hb-hero .hb-in{padding:40px 20px}
  .hb-close .hb-in{padding:40px 20px}
  .hb-hook{font-size:42px; line-height:1.02}
  .hb-h2{font-size:30px}
  .hb-close-copy h2{font-size:30px}
  .hb-hero-cta{flex-direction:column}
  .hb-hero-cta .hb-btn{width:100%}
  .hb-prices{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px}
  .hb-hero-tiles{grid-template-columns:1fr; gap:12px}
  .hb-tile-van{grid-row:auto; height:240px}
  .hb-tile-photo{height:150px}
  .hb-tile-game{min-height:150px}
  .hb-svc-list,.hb-jobs-grid{grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row; gap:0}
  .hb-svc:nth-child(3),.hb-job:nth-child(3){border-bottom:0}
  .hb-ctarow{flex-direction:column; align-items:flex-start; gap:10px}
  .hb-checks{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
  .hb-map{height:170px}
  .hb-close-cta{align-items:stretch; gap:10px}
  .hb-close-cta .hb-btn{width:100%}
  .hb-qa summary{font-size:17px}
  .hb-game{padding:12px}
  .hb-board{--cols:4; --gap:6px}
  .hb-pick-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
  .hb-pick-head h3,.hb-win h3,.hb-result h3{font-size:22px}
  .hb-win-row{grid-template-columns:1fr}
  .hb-win-row.one{grid-template-columns:1fr}
  .hb-info-pop{right:auto; left:0; width:min(300px, calc(100vw - 40px))}
  .ssl-b .sslx-wrap,.ssl-b .sslx-foot .sslx-wrap{padding:0 20px}
  .ssl-b .sslx-nav{height:64px; padding:0; flex-wrap:nowrap; gap:10px}
  /* the name may take two lines on a phone; the buttons never leave the screen */
  .ssl-b .sslx-brand{min-width:0; flex:1 1 auto; gap:10px}
  .ssl-b .sslx-sp{display:none}
  .ssl-b .sslx-bn{font-size:18px; white-space:normal; line-height:1.02}
  .ssl-b .sslx-cta{flex:none}
  .ssl-b .sslx-links{display:none}
  .ssl-b .sslx-cta .sslx-booknow{display:inline-flex; padding:0 14px; font-size:14px}
  .ssl-b .sslx-burger{display:inline-flex}
}