:root{
  --sea:#4f46c9; --sea-deep:#1e1b4b; --aqua:#8b5cf6; --aqua-light:#c4b5fd;
  --gold:#f6b21b; --gold-deep:#d98613; --green:#1c7a43; --sand:#fbf7f1;
  --ink:#191433; --ink-soft:#4a4368; --line:#e8e2d6; --white:#ffffff;
  --shadow:0 18px 50px -18px rgba(15,12,40,.45);
  --shadow-sm:0 8px 24px -12px rgba(15,12,40,.35);
  --radius:18px;

  /* ---- Category filter chips -------------------------------------------
     PER-DESTINATION. Change these four values to give a micro-site its own
     filter colours; every other destination is unaffected, because each site
     has its own copy of this stylesheet.

     ONE RULE THAT DOES NOT VARY: --chip-line must reach at least 3:1 against
     --sand, or the chip loses its edge against the paper background and the row
     reads as loose words rather than buttons. That is the defect this block was
     added to fix -- the old border was #e8e2d6, which measured 1.21:1.
     Check a candidate before shipping it.

     The shadows carry the active colour, so change them together with
     --chip-active or the glow will not match the pill. */
  --chip-bg:#ffffff; --chip-line:#9b8f78; --chip-ink:var(--ink-soft);
  --chip-active:var(--sea); --chip-active-ink:#ffffff; --chip-hover-line:var(--sea);
  --chip-shadow:0 1px 1px rgba(25,20,51,.05), 0 3px 8px -3px rgba(25,20,51,.22);
  --chip-shadow-hover:0 1px 1px rgba(25,20,51,.05), 0 5px 14px -4px rgba(79,70,201,.38);
  --chip-shadow-active:0 2px 4px rgba(79,70,201,.28), 0 6px 16px -5px rgba(79,70,201,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Faint diagonal "paper" texture across the whole page (the sections with
   their own solid/photo backgrounds simply cover it). */
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:repeating-linear-gradient(135deg,rgba(25,20,51,.04) 0 1px,transparent 1px 14px),repeating-linear-gradient(45deg,rgba(25,20,51,.032) 0 1px,transparent 1px 14px),var(--sand);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:'Fraunces',Georgia,serif;line-height:1.08;letter-spacing:-.01em}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:9px;border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:15px;padding:14px 24px;border-radius:999px;transition:transform .15s ease, box-shadow .2s ease, background .2s}
.btn:active{transform:translateY(1px)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#3a2600;box-shadow:0 10px 24px -10px rgba(224,148,26,.8)}
.btn-gold:hover{box-shadow:0 14px 30px -10px rgba(224,148,26,.95);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.24)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#2a2550}
.btn-sm{padding:10px 18px;font-size:14px}

/* ---------- NAV ---------- */
header.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,box-shadow .3s,padding .3s;padding:18px 0}
header.nav.solid{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line);padding:12px 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:13px;color:#fff;transition:color .3s}
header.nav.solid .brand{color:var(--ink)}
.brand .logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));display:grid;place-items:center;flex-shrink:0;box-shadow:var(--shadow-sm)}
.brand .logo svg{width:24px;height:24px}
.brand .names{display:flex;flex-direction:column;line-height:1.1}
.brand .dest{font-family:'Fraunces',serif;font-weight:700;font-size:19px}
.brand .plat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;font-weight:600}
.nav-actions{display:flex;align-items:center;gap:12px}
.nav-link{color:#fff;font-weight:600;font-size:15px;opacity:.92;transition:color .3s}
header.nav.solid .nav-link{color:var(--ink-soft)}
.nav-link:hover{opacity:1}
@media(max-width:720px){.nav-link.hide-sm{display:none}}
.trip-pill{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;padding:9px 16px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;border:none;font-family:inherit;transition:transform .15s}
.trip-pill:hover{transform:translateY(-1px)}
.trip-pill .count{background:var(--gold);color:#3a2600;border-radius:999px;min-width:21px;height:21px;display:grid;place-items:center;font-size:12px;padding:0 5px}
@keyframes tripbounce{0%,100%{transform:translateY(0)}20%{transform:translateY(-8px)}42%{transform:translateY(-3px)}62%{transform:translateY(-1px)}}
.trip-pill.nudge{animation:tripbounce .7s ease}
/* Zimbapays brand mark (top-left). Two stacked SVGs crossfade: an on-dark
   version (white wordmark, orange comet) over the hero, the full-colour
   original once the nav goes solid on scroll — the orange never washes out. */
.brand-logo-wrap{position:relative;display:inline-block;height:52px;width:100px}
.brand-logo{position:absolute;top:0;left:0;height:52px;width:auto;transition:opacity .3s}
.brand-logo.ondark{opacity:1}
.brand-logo.onlight{opacity:0}
header.nav.solid .brand-logo.ondark{opacity:0}
header.nav.solid .brand-logo.onlight{opacity:1}
@media(max-width:720px){.brand-logo-wrap{height:42px;width:81px}.brand-logo{height:42px}}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:linear-gradient(160deg,#1e1b4b,#3730a3 45%,#6d5dd3)}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;animation:kenburns 22s ease-in-out infinite alternate;opacity:0;transition:opacity 1.2s ease}
.hero .bg img.loaded{opacity:1}
.hero .bg video{width:100%;height:100%;object-fit:cover;display:block}
@keyframes kenburns{0%{transform:scale(1.06) translate(0,0)}100%{transform:scale(1.18) translate(-2%,-2%)}}
.hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,11,35,.82) 0%,rgba(14,11,35,.5) 45%,rgba(14,11,35,.15) 100%),linear-gradient(0deg,rgba(14,11,35,.6),rgba(14,11,35,0) 40%)}
.hero-content{position:relative;z-index:2;color:#fff;padding:120px 0 60px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px);padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.04em;margin-bottom:24px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(246,178,27,.3)}
.hero h1{font-size:clamp(40px,6.4vw,76px);font-weight:600;max-width:14ch;margin-bottom:22px}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero p.sub{font-size:clamp(17px,2vw,21px);max-width:46ch;opacity:.94;margin-bottom:34px;font-weight:400}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{font-size:13.5px;opacity:.8;margin-top:22px;display:flex;align-items:center;gap:8px}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:#fff;opacity:.7;font-size:12px;letter-spacing:.16em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ---------- STORY ROWS (sequential editorial, photo + text pairs) ---------- */
.story-head{text-align:center;max-width:720px;margin:0 auto clamp(46px,6vw,74px)}
.story-head .kicker{color:var(--sea);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px;margin-bottom:14px}
.story-head h2{font-family:'Fraunces',Georgia,serif;font-size:clamp(30px,4.2vw,50px);font-weight:600;letter-spacing:-.01em;line-height:1.06;color:var(--ink);margin:0}
.story-head h2 em{font-style:italic;color:var(--gold-deep)}
.story-head .rule{width:56px;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-deep));border-radius:999px;margin:24px auto 0}
/* 50/50 editorial split: the board's copy flows as one sequential column
   (each paragraph fades in as you reach it, a gold "reading thread" grows
   down the margin), beside a single framed photo that quietly crossfades
   between the three shots as the story advances. Same framed-photo language
   the rest of the site already uses — the only new motion is a soft fade. */
.story-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5.5vw,80px);align-items:start}
/* Generous vertical room so each paragraph can scroll to the centre of the
   screen on its own — that's what lets the eye settle on the active one. */
.story-copy{position:relative;padding:clamp(80px,18vh,180px) 0 clamp(80px,18vh,180px) 32px}
.story-thread{position:absolute;left:0;top:8px;bottom:8px;width:3px;background:rgba(25,20,51,.1);border-radius:999px;overflow:hidden}
.story-thread-fill{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(180deg,var(--gold),var(--gold-deep));border-radius:999px}
/* Paragraphs sit dimmed; the one you're reading (centred in the viewport)
   lights up, and its photo crossfades in to match. */
.story-p{font-family:'Fraunces',Georgia,serif;color:var(--ink);font-size:clamp(19px,1.85vw,24px);font-weight:500;line-height:1.62;letter-spacing:-.004em;margin:0 0 clamp(64px,13vh,140px);opacity:.3;transition:opacity .55s ease}
.story-p:last-child{margin-bottom:0}
.story-p.active{opacity:1}
.story-p em{font-style:italic;color:var(--gold-deep)}

/* Photo pins and stays centred on screen while the taller copy scrolls past */
.story-visual{position:sticky;top:104px;align-self:start}
.story-frame{position:relative;width:100%;height:clamp(440px,64vh,600px);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.story-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.story-img.on{opacity:1}

@media(max-width:900px){
  .story-split{grid-template-columns:1fr;gap:28px}
  .story-visual{position:static;order:-1;align-self:auto}
  .story-frame{height:auto;aspect-ratio:4/3}
  .story-copy{padding:20px 0 0 28px}
  .story-p{margin-bottom:clamp(40px,7vh,64px)}
}
@media(prefers-reduced-motion:reduce){
  .story-p{opacity:1;transition:none}
  .story-img{transition:none}
}

/* ---------- TRUST STRIP ---------- */
.trust{background:var(--ink);color:#d8d2f0}
.trust .wrap{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;justify-content:center;padding:18px 24px;font-size:13.5px;font-weight:600;letter-spacing:.02em}
.trust span{display:inline-flex;align-items:center;gap:9px}
.trust svg{width:17px;height:17px;color:var(--aqua-light)}

/* ---------- SECTIONS ---------- */
section.block{padding:84px 0}
.sec-head{max-width:620px;margin-bottom:44px}
.sec-head .kicker{color:var(--sea);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px;margin-bottom:14px}
.sec-head h2{font-size:clamp(30px,4vw,46px);font-weight:600;margin-bottom:16px}
.sec-head p{font-size:18px;color:var(--ink-soft)}
#offersHint{font-size:clamp(18px,2.1vw,22px);color:var(--ink);font-weight:500;line-height:1.5;margin-top:14px;max-width:680px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;position:relative;box-shadow:var(--shadow-sm)}
.step .num{width:46px;height:46px;border-radius:13px;background:var(--sand);color:var(--sea);display:grid;place-items:center;font-family:'Fraunces',serif;font-weight:700;font-size:22px;margin-bottom:18px;border:1px solid var(--line)}
.step h3{font-size:21px;margin-bottom:9px;font-weight:600}
.step p{color:var(--ink-soft);font-size:15.5px}
.step .tag{margin-top:14px;display:inline-block;font-size:12.5px;font-weight:700;color:var(--green);background:#eaf6ee;padding:5px 11px;border-radius:999px}

/* ---------- OFFERS ---------- */
.offers-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:28px}
.filters{display:flex;gap:9px;flex-wrap:wrap}
.chip{border:1px solid var(--chip-line);background:var(--chip-bg);color:var(--chip-ink);font-family:inherit;font-weight:700;font-size:16px;padding:13px 22px;border-radius:999px;cursor:pointer;box-shadow:var(--chip-shadow);transition:border-color .18s,box-shadow .18s,transform .18s,background .18s,color .18s}
.chip:hover{border-color:var(--chip-hover-line);box-shadow:var(--chip-shadow-hover);transform:translateY(-1px)}
.chip:focus-visible{outline:2px solid var(--chip-active);outline-offset:2px}
.chip.active{background:var(--chip-active);color:var(--chip-active-ink);border-color:var(--chip-active);box-shadow:var(--chip-shadow-active)}
.chip.active:hover{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.chip,.chip:hover,.chip.active:hover{transform:none;transition:none}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:26px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .ph{position:relative;aspect-ratio:3/2;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.card .ph img.loaded{opacity:1}
.card .cat{position:absolute;top:13px;left:13px;z-index:2;background:rgba(12,39,37,.78);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:6px 11px;border-radius:999px;backdrop-filter:blur(4px)}
.card .cashback{position:absolute;bottom:13px;right:13px;z-index:2;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#3a2600;font-weight:800;font-size:15px;padding:8px 14px;border-radius:12px;box-shadow:0 8px 18px -6px rgba(0,0,0,.4)}
.card .body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.card .meta{color:var(--ink-soft);font-size:15px;margin-bottom:18px;flex:1}
.card .partner{font-size:12.5px;color:var(--sea);font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:6px}
.save-btn{width:100%;justify-content:center;background:var(--sand);color:var(--ink);border:1.5px solid var(--line);font-weight:700}
.save-btn:hover{border-color:var(--aqua);background:#fff}
.save-btn.saved{background:#eaf6ee;border-color:#bfe3cb;color:var(--green)}

/* ---------- SCENIC FALLBACKS (render even with no network) ---------- */
.scene-sea{background:radial-gradient(120% 80% at 80% 10%,#ddd6fe 0%,transparent 45%),linear-gradient(180deg,#7c6df0 0%,#4338ca 42%,#1e1b4b 100%)}
.scene-sunset{background:radial-gradient(60% 50% at 78% 26%,#ffe1a8 0%,#f6b21b 24%,transparent 56%),linear-gradient(180deg,#f0a83c 0%,#c2410c 42%,#3b1d6e 78%,#1e1b4b 100%)}
.scene-jungle{background:radial-gradient(120% 80% at 20% 0%,#c4b5fd 0%,transparent 50%),linear-gradient(180deg,#8b5cf6 0%,#4338ca 56%,#1e1b4b 100%)}
.scene-beach{background:linear-gradient(180deg,#3b3a7a 0%,#4338ca 44%,#f6b21b 92%,#ffc06b 100%)}
.scene-culture{background:radial-gradient(80% 60% at 30% 20%,#ffd98a 0%,transparent 50%),linear-gradient(160deg,#f6b21b 0%,#8b2fb0 55%,#191433 100%)}

/* ---------- GALLERY MOSAIC ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:14px;grid-auto-flow:dense}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}}
.gtile{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.gtile img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.gtile img.loaded{opacity:1}
.gtile .cap{position:absolute;left:14px;bottom:12px;z-index:2;color:#fff;font-weight:700;font-size:15px;text-shadow:0 2px 10px rgba(0,0,0,.5);letter-spacing:-.01em}
.gtile::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(8,30,28,.5) 0%,transparent 45%)}
.gtile.tall{grid-row:span 2}
.gtile.wide{grid-column:span 2}
@media(max-width:900px){.gtile.tall{grid-row:span 1}}
.gtile.cat-tile{cursor:pointer;transition:transform .2s ease}
.gtile.cat-tile:hover{transform:translateY(-3px)}
.gtile.cat-tile .cap{right:14px;bottom:14px;font-size:19px;line-height:1.2;max-width:calc(100% - 28px)}
.gtile.cat-tile .cap small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.85;margin-bottom:5px}

/* ---------- PARALLAX BAND ---------- */
.parallax{position:relative;min-height:440px;display:flex;align-items:center;overflow:hidden}
.parallax .pbg{position:absolute;inset:0;z-index:0}
.parallax .pbg img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s}
.parallax .pbg img.loaded{opacity:1}
.parallax .pscrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,11,35,.78),rgba(14,11,35,.3))}
.parallax .pc{position:relative;z-index:2;color:#fff;max-width:660px;padding:60px 0}
.parallax .pc .q{font-family:'Fraunces',serif;font-size:clamp(26px,3.4vw,40px);font-weight:500;line-height:1.18;margin-bottom:18px}
.parallax .pc .q em{font-style:italic;color:var(--gold)}
.parallax .pc .by{font-size:15px;opacity:.85;font-weight:600;letter-spacing:.03em}

/* ---------- TRIP FUND BAND ---------- */
.band{background:linear-gradient(135deg,var(--sea-deep),var(--sea));color:#fff;border-radius:28px;overflow:hidden;position:relative}
.band .inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:54px}
@media(max-width:820px){.band .inner{grid-template-columns:1fr;padding:36px}}
.band h2{font-size:clamp(28px,3.4vw,40px);font-weight:600;margin-bottom:16px}
.band p{opacity:.92;font-size:17px;margin-bottom:14px}
.band .mini{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:15px;opacity:.95}
.band .mini svg{width:20px;height:20px;flex-shrink:0;color:var(--gold);margin-top:1px}
.fund-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:26px;backdrop-filter:blur(6px)}
.fund-card .lbl{font-size:13px;letter-spacing:.1em;text-transform:uppercase;opacity:.8;font-weight:600}
.fund-card .amt{font-family:'Fraunces',serif;font-size:46px;font-weight:700;margin:6px 0 4px}
.fund-card .amt small{font-size:20px;opacity:.7}
.bar{height:12px;background:rgba(255,255,255,.2);border-radius:999px;overflow:hidden;margin:18px 0 10px}
.bar > i{display:block;height:100%;width:64%;background:linear-gradient(90deg,var(--gold),var(--aqua-light));border-radius:999px}
.fund-rows{margin-top:18px;font-size:14px}
.fund-rows .r{display:flex;justify-content:space-between;padding:9px 0;border-top:1px dashed rgba(255,255,255,.22)}
.fund-rows .r b{font-weight:700}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:#b3acd0;padding:60px 0 34px;margin-top:20px}
.foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand{max-width:320px}
.foot-brand .brand{color:#fff;margin-bottom:14px}
.foot-brand p{font-size:14px;opacity:.75}
.foot-logo{height:60px;width:auto;display:block;margin-bottom:16px}
.foot-cols{display:flex;gap:60px;flex-wrap:wrap}
.foot-col h4{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700}
.foot-col a{display:block;font-size:14.5px;margin-bottom:9px;opacity:.8}
.foot-col a:hover{opacity:1}
.foot-bottom{padding-top:24px;font-size:13px;opacity:.6;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---------- MODAL ---------- */
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(8,30,28,.6);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .25s}
.modal-overlay.show{display:flex;opacity:1}
.modal{background:#fff;border-radius:24px;max-width:920px;width:100%;max-height:92vh;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);transform:translateY(14px);transition:transform .3s}
.modal-overlay.show .modal{transform:translateY(0)}
@media(max-width:760px){.modal{grid-template-columns:1fr;max-height:94vh;overflow-y:auto}.modal .visual{display:none}}
.modal .visual{position:relative;background:linear-gradient(160deg,#1e1b4b,#3730a3);overflow:hidden;color:#fff;padding:36px}
.modal .visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.modal .visual .vc{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.modal .visual .vc h3{font-size:26px;font-weight:600;margin-bottom:10px}
.modal .visual .vc ul{list-style:none;margin-top:10px}
.modal .visual .vc li{display:flex;gap:10px;align-items:flex-start;margin-bottom:11px;font-size:14.5px;opacity:.95}
.modal .visual .vc li svg{width:19px;height:19px;color:var(--gold);flex-shrink:0;margin-top:2px}
.modal .form{position:relative;padding:38px 36px;overflow-y:auto}
.modal .form .x{position:absolute;top:18px;right:20px;background:rgba(255,255,255,.9);border:none;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:18px;color:var(--ink);display:grid;place-items:center;z-index:5}
.modal .form h2{font-size:27px;font-weight:600;margin-bottom:6px}
.modal .form .lead{color:var(--ink-soft);font-size:15px;margin-bottom:22px}
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.field input{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;font-family:inherit;font-size:15px;transition:border .15s}
.field input:focus{outline:none;border-color:var(--aqua)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cardlink-box{margin-top:6px;border:1.5px solid var(--line);border-radius:14px;padding:16px;background:var(--sand)}
.cardlink-box .clh{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14.5px;margin-bottom:6px}
.cardlink-box .clh .net{margin-left:auto;display:flex;gap:6px}
.cardlink-box .clh .net span{font-size:10px;font-weight:800;letter-spacing:.04em;background:#fff;border:1px solid var(--line);border-radius:6px;padding:3px 7px;color:var(--ink-soft)}
.cardlink-box small{color:var(--ink-soft);font-size:12.5px;display:flex;gap:7px;align-items:flex-start}
.cardlink-box small svg{width:15px;height:15px;color:var(--green);flex-shrink:0;margin-top:1px}
.modal .form .submit{width:100%;justify-content:center;margin-top:18px}
.modal .form .fine{font-size:11.5px;color:var(--ink-soft);text-align:center;margin-top:13px;line-height:1.5}

/* consent */
.consent{display:flex;gap:9px;align-items:flex-start;margin-top:14px;font-size:12.5px;color:var(--ink-soft)}
.consent input{margin-top:2px;flex-shrink:0;width:16px;height:16px;accent-color:var(--sea)}

/* ---------- OFFER DETAIL MODAL ---------- */
.card{cursor:pointer}
.offer-modal{background:#fff;border-radius:24px;max-width:1180px;width:100%;max-height:92vh;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);position:relative;display:grid;grid-template-columns:1fr 1fr;transform:translateY(14px);transition:transform .3s}
.modal-overlay.show .offer-modal{transform:translateY(0)}
.offer-modal .x{position:absolute;top:14px;right:16px;background:rgba(255,255,255,.92);border:none;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:18px;color:var(--ink);display:grid;place-items:center;z-index:6}
/* A fixed (not min-) height so the modal never resizes as the slideshow
   swaps between images of different natural aspect ratios/sizes. */
.om-hero{position:relative;overflow:hidden;border-radius:24px 0 0 24px;height:560px}
.om-hero img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s ease}
.om-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;display:none;place-items:center;box-shadow:0 4px 14px -4px rgba(0,0,0,.4)}
.om-nav.prev{left:12px}
.om-nav.next{right:12px}
.om-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:6px}
.om-dots .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55)}
.om-dots .dot.on{background:#fff}
.om-badges{position:absolute;top:14px;left:14px;display:flex;gap:8px;z-index:2}
.om-badges .cat{background:rgba(12,39,37,.78);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:6px 11px;border-radius:999px;backdrop-filter:blur(4px)}
.om-badges .cashback{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#3a2600;font-weight:800;font-size:14px;padding:6px 12px;border-radius:10px}
.om-body{padding:38px 38px 32px;overflow-y:auto;max-height:90vh;display:flex;flex-direction:column}
.om-body h2{font-size:30px;font-weight:600;line-height:1.12;margin-bottom:6px}
.om-merchant{color:var(--sea);font-weight:600;font-size:14.5px;margin-bottom:22px}
.om-desc{color:var(--ink-soft);font-size:16px;line-height:1.65;margin-bottom:24px;white-space:pre-line}
.om-details{border-top:1px solid var(--line);padding-top:20px;margin-bottom:24px;display:flex;flex-direction:column;gap:16px}
.om-row{display:flex;gap:12px;align-items:flex-start}
.om-row svg{width:19px;height:19px;color:var(--sea);flex-shrink:0;margin-top:2px}
.om-row .oml{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:700;margin-bottom:1px}
.om-row .omv{display:block;font-size:15px;color:var(--ink)}
.om-save{width:100%;justify-content:center;margin-top:auto}
.om-save.issaved{background:#eaf6ee;color:var(--green);box-shadow:none}
@media(max-width:760px){
  .offer-modal{grid-template-columns:1fr;max-height:94vh;overflow-y:auto}
  .om-hero{border-radius:24px 24px 0 0;min-height:0;aspect-ratio:16/10}
  .om-body{max-height:none;padding:26px 24px 24px}
  .om-body h2{font-size:25px}
}

/* ---------- DASHBOARD ---------- */
#dashboard{display:none;min-height:100vh;background:var(--sand);padding-top:96px}
#dashboard.show{display:block}
.dash-hero{background:linear-gradient(135deg,var(--sea-deep),var(--sea));color:#fff;border-radius:26px;padding:36px;position:relative;overflow:hidden;margin-bottom:26px}
.dash-hero h1{font-size:clamp(26px,3.6vw,38px);font-weight:600;margin-bottom:6px}
.dash-hero p{opacity:.9;font-size:16px}
.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
@media(max-width:760px){.dash-stats{grid-template-columns:1fr}}
.stat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:22px}
.stat .l{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.8;font-weight:600;margin-bottom:8px}
.stat .v{font-family:'Fraunces',serif;font-size:34px;font-weight:700}
.stat .v small{font-size:16px;opacity:.7}
.stat .d{font-size:13px;opacity:.8;margin-top:5px}
.dash-grid{display:grid;grid-template-columns:1.4fr .85fr;gap:24px;align-items:start}
@media(max-width:860px){.dash-grid{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);margin-bottom:24px}
.panel h3{font-size:20px;font-weight:600;margin-bottom:4px}
.panel .ph-sub{color:var(--ink-soft);font-size:14px;margin-bottom:20px}
.saved-row{display:flex;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.saved-row:first-of-type{border-top:none}
.saved-row .thumb{width:60px;height:60px;border-radius:12px;flex-shrink:0;overflow:hidden}
.saved-row .thumb img{width:100%;height:100%;object-fit:cover}
.saved-row .info{flex:1;min-width:0}
.saved-row .info b{display:block;font-size:15.5px;font-weight:700}
.saved-row .info span{font-size:13px;color:var(--ink-soft)}
.saved-row .status{font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap}
.status.pending{background:#fff4e0;color:var(--gold-deep)}
.status.earned{background:#eaf6ee;color:var(--green)}
.rec-card{display:flex;gap:13px;align-items:center;padding:13px;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;transition:border .15s}
.rec-card:hover{border-color:var(--aqua)}
.rec-card .thumb{width:54px;height:54px;border-radius:11px;overflow:hidden;flex-shrink:0}
.rec-card .thumb img{width:100%;height:100%;object-fit:cover}
.rec-card .info{flex:1;min-width:0}
.rec-card .info b{font-size:14.5px;display:block}
.rec-card .info span{font-size:12.5px;color:var(--sea);font-weight:600}
.rec-card .cb{font-weight:800;color:var(--gold-deep);font-size:14px;white-space:nowrap}
.reason{font-size:12px;color:var(--ink-soft);background:var(--sand);border-radius:8px;padding:8px 11px;margin-bottom:16px;display:flex;gap:7px;align-items:center}
.reason svg{width:15px;height:15px;color:var(--sea);flex-shrink:0}

#howpage{display:none;min-height:100vh;background:var(--sand);padding-top:96px}
#howpage.show{display:block}
.hiw-img{border-radius:18px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-sm)}
.hiw-img img{width:100%;height:100%;object-fit:cover;display:block}
.hiw-hero,.hiw-why,.hiw-work{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;border-radius:26px;margin-bottom:30px}
@media(max-width:760px){.hiw-hero,.hiw-why,.hiw-work{grid-template-columns:1fr;gap:22px}}
.hiw-hero{background:linear-gradient(135deg,var(--sea-deep),var(--sea));color:#fff;padding:44px}
.hiw-hero .kicker{color:var(--aqua-light);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px;margin-bottom:14px}
.hiw-hero h1{font-size:clamp(28px,4vw,46px);font-weight:600;margin-bottom:14px}
.hiw-hero p{font-size:18px;opacity:.92}
.hiw-why{background:#fff;border:1px solid var(--line);padding:40px;box-shadow:var(--shadow-sm);border-radius:var(--radius)}
.hiw-why h2{font-size:clamp(24px,3.2vw,38px);font-weight:600;margin-bottom:18px}
.hiw-why p{font-size:17px;color:var(--ink-soft);margin-bottom:14px}
.hiw-why .punch{font-family:'Fraunces',serif;font-style:italic;color:var(--sea);font-size:21px;margin-top:4px}
.hiw-work{background:linear-gradient(135deg,var(--ink),var(--sea-deep));color:#fff;padding:40px}
.hiw-work h2{font-size:clamp(24px,3vw,34px);font-weight:600;margin-bottom:14px}
.hiw-work p{opacity:.92;font-size:17px;margin-bottom:12px}
.hiw-cta{text-align:center;padding:24px 0 8px}
.hiw-cta .nb{font-family:'Fraunces',serif;font-size:clamp(24px,3vw,34px);font-weight:600;margin-bottom:10px}
.hiw-cta p{color:var(--ink-soft);margin-bottom:20px;max-width:50ch;margin-left:auto;margin-right:auto}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:13px 22px;border-radius:999px;font-weight:600;font-size:14.5px;z-index:200;opacity:0;pointer-events:none;transition:all .3s;display:flex;align-items:center;gap:9px;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{width:18px;height:18px;color:var(--aqua-light)}

/* ---------- THINGS YOU NEED ---------- */
.tyn-ask{max-width:460px}
.tyn-ask label{display:block;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:10px}
.tyn-typeahead{position:relative}
.tyn-typeahead input,.tyn-typeahead select{width:100%;padding:14px 16px;font-size:15px;font-family:inherit;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;outline:none;transition:border-color .15s,box-shadow .15s}
.tyn-typeahead select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.tyn-typeahead input:focus,.tyn-typeahead select:focus{border-color:var(--aqua);box-shadow:0 0 0 3px rgba(139,92,246,.15)}
.tyn-list{list-style:none;margin:6px 0 0;padding:6px;position:absolute;z-index:5;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.tyn-list li button{width:100%;text-align:left;background:none;border:none;font-family:inherit;font-size:14.5px;color:var(--ink);padding:11px 12px;border-radius:8px;cursor:pointer}
.tyn-list li button:hover{background:var(--sand)}
.tyn-from{font-size:15px;color:var(--ink-soft);margin-bottom:22px}
.tyn-from b{color:var(--ink)}
.tyn-from button{background:none;border:none;color:var(--sea);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;padding:0}
/* Compact quick-link strip (deliberately understated vs. the Events band) */
.tyn-strip-head{margin:0 auto 22px;text-align:center}
.tyn-strip-head h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:0}
.tyn-strip .tyn-ask{margin:0 auto;text-align:center}
.tyn-strip .tyn-typeahead{max-width:340px;margin:0 auto}
.tyn-strip .tyn-from{text-align:center;margin:0 auto 22px}
/* Image-forward category cards (people photos with overlaid labels).
   Breaks out wider than the .wrap so the 5 cards can be large, with a
   zig-zag rhythm + staggered fade-in so the row feels alive. */
.tyn-cards{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-items:start;
  width:min(1380px,calc(100vw - 40px));margin-left:50%;transform:translateX(-50%);
}
@media(max-width:900px){.tyn-cards{grid-template-columns:repeat(2,1fr);width:100%;margin-left:0;transform:none}}
@media(max-width:520px){.tyn-cards{grid-template-columns:1fr}}
@keyframes tynFade{to{opacity:1}}
.tyn-card{
  position:relative;display:block;border:none;margin:0;padding:0;text-align:left;font-family:inherit;
  border-radius:18px;overflow:hidden;aspect-ratio:3/4;cursor:pointer;background:var(--sand);
  box-shadow:var(--shadow-sm);opacity:0;animation:tynFade .55s ease forwards;animation-delay:calc(var(--i,0)*70ms);
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .25s ease;
}
.tyn-card:nth-child(even){margin-top:34px}
@media(max-width:900px){.tyn-card:nth-child(even){margin-top:0}}
/* never let the entrance animation leave a card invisible */
@media(prefers-reduced-motion:reduce){.tyn-card{animation:none;opacity:1}.tyn-card img{transition:none}}
.tyn-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.tyn-card:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
.tyn-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.tyn-card img.loaded{opacity:1}
.tyn-card:hover img{transform:scale(1.08)}
.tyn-card-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,12,40,.92) 0%,rgba(15,12,40,.28) 46%,rgba(15,12,40,.02) 100%)}
.tyn-card-lbl{position:absolute;left:0;right:0;bottom:0;padding:17px 18px;color:#fff;transition:transform .3s ease}
.tyn-card:hover .tyn-card-lbl{transform:translateY(-3px)}
.tyn-card-lbl b{display:block;font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:600;line-height:1.15;margin-bottom:4px}
.tyn-card-lbl span{display:block;font-size:12.5px;line-height:1.4;opacity:.92;font-weight:500}
.tyn-card-go{position:absolute;top:13px;right:13px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;opacity:0;transform:translateX(6px);transition:opacity .25s ease,transform .25s ease}
.tyn-card:hover .tyn-card-go{opacity:1;transform:translateX(0)}
/* selector pulses when a card is clicked before a city is chosen */
@keyframes tynPulse{0%{box-shadow:0 0 0 0 rgba(139,92,246,.5)}70%{box-shadow:0 0 0 10px rgba(139,92,246,0)}100%{box-shadow:0 0 0 0 rgba(139,92,246,0)}}
.tyn-typeahead.tyn-pulse{border-radius:12px;animation:tynPulse .9s ease 1}

.tyn-quicklinks{display:flex;flex-wrap:wrap;justify-content:center;gap:11px}
.tyn-qlink{display:inline-flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 8px;cursor:pointer;font-family:inherit;transition:border-color .15s,transform .15s,box-shadow .15s}
.tyn-qlink:hover{border-color:var(--aqua);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.tyn-qlink-thumb{width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--sand)}
.tyn-qlink-thumb img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
.tyn-qlink-thumb img.loaded{opacity:1}
.tyn-qlink-label{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}
.tyn-qlink svg{color:var(--ink-soft);flex-shrink:0}

/* ---------- HIDDEN GEMS (fanned deck → parts to reveal) ---------- */
.hg-section{background:linear-gradient(180deg,var(--sand),#f5ecd8 55%,var(--sand));overflow:hidden}
.hg-head{text-align:center;margin:0 auto 26px}
.hg-head p{max-width:640px;margin:0 auto}
.hg-stage{position:relative}

/* the fanned deck (closed state) */
.hg-deck{position:relative;height:415px;max-height:470px;cursor:pointer;transition:max-height .55s ease .42s,opacity .4s ease .34s}
/* --hover (0..1) is driven by JS per card for a radial magnetic lift; folded
   straight into the resting transform so it eases in and out smoothly. */
.hg-card{position:absolute;left:50%;bottom:20px;width:190px;height:266px;margin-left:-95px;border-radius:16px;overflow:hidden;margin-top:0;background:#fff;border:4px solid #fff;box-shadow:0 calc(20px + var(--hover,0) * 16px) calc(44px + var(--hover,0) * 22px) -18px rgba(15,12,40,.55);transform-origin:50% 138%;transform:translateX(var(--x)) translateY(calc(var(--y) - var(--hover,0) * 44px)) rotate(calc(var(--rot) * (1 - var(--hover,0) * 0.7))) scale(calc(1 + var(--hover,0) * 0.06));z-index:var(--z);transition:transform .28s ease,box-shadow .28s ease,opacity .3s ease;will-change:transform}
.hg-card img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.hg-card img.loaded{opacity:1}
.hg-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,8,24,.62),transparent 46%)}
.hg-card-label{position:absolute;left:13px;bottom:11px;z-index:2;color:#fff;font-weight:700;font-size:13px;letter-spacing:-.005em;text-shadow:0 2px 8px rgba(0,0,0,.55);margin:0}

/* parted state — cards fan out one at a time (staggered), then the deck
   collapses and the offers fade in once the sweep has cleared */
.hg-stage.open .hg-deck{max-height:0;opacity:0;pointer-events:none;transition:max-height .5s ease 1.2s,opacity .4s ease 1.2s}
.hg-stage.open .hg-card{transform:translateX(var(--px)) translateY(-30px) rotate(var(--prot));opacity:0;transition:transform .85s cubic-bezier(.22,1,.36,1) var(--delay),opacity .6s ease var(--delay)}

.hg-cta{text-align:center;margin-top:52px;position:relative;z-index:5}
.hg-toggle{font-size:16px;padding:15px 30px}
.hg-chev{transition:transform .3s}
.hg-toggle.open .hg-chev{transform:rotate(180deg)}

/* the offers, revealed behind the parting deck */
.hg-reveal{max-height:0;overflow:hidden;opacity:0;transition:max-height .5s ease,opacity .4s ease}
.hg-stage.open .hg-reveal{max-height:4000px;opacity:1;transition:max-height .6s ease 1.25s,opacity .55s ease 1.3s}
.hg-inner{padding:34px 0 6px}

@media(max-width:600px){
  .hg-card{width:150px;height:210px;margin-left:-75px}
  .hg-deck{height:310px}
}
@media(prefers-reduced-motion:reduce){
  .hg-card,.hg-deck,.hg-reveal{transition:opacity .3s ease}
  .hg-stage.open .hg-card{transform:none}
}

/* ---------- CATEGORY SHOWCASE (homepage tiles) ---------- */
/* 4-col mosaic: two "wide" feature tiles + eight standard = a clean 3-row grid
   with varied widths, less blocky than a uniform grid. */
.cat-tiles{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:212px;gap:14px;grid-auto-flow:dense}
@media(max-width:900px){.cat-tiles{grid-template-columns:repeat(2,1fr);grid-auto-rows:184px}}
@media(max-width:560px){.cat-tiles{grid-template-columns:1fr;grid-auto-rows:190px}}
.gtile.cat-tile{cursor:pointer;transition:transform .2s ease}
.gtile.cat-tile:hover{transform:translateY(-3px)}
.gtile.cat-tile .cap{right:14px;bottom:14px;font-size:19px;line-height:1.2;max-width:calc(100% - 28px)}
.gtile.cat-tile .cap small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.85;margin-bottom:5px}

/* ---------- UPCOMING EVENTS (ticket theme, not a colour block) ---------- */
/* A faint parchment/ticket-roll texture instead of a bold band — the identity
   comes from the ticket motif (perforation, flap board), not a colour block. */
.events-band{
  background:
    repeating-linear-gradient(135deg, rgba(25,20,51,.025) 0 1px, transparent 1px 13px),
    linear-gradient(180deg,var(--sand),#f6efdd 55%,var(--sand));
  padding:100px 0 108px;color:var(--ink);position:relative;overflow:hidden;
}
.events-head{margin-bottom:34px}
.events-head .kicker{color:var(--sea);display:flex;align-items:center;gap:9px}
.events-head .kicker::before{content:"";width:15px;height:15px;flex-shrink:0;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7v3a2 2 0 1 1 0 4v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3a2 2 0 1 1 0-4V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M13 5v2M13 11v2M13 17v2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7v3a2 2 0 1 1 0 4v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3a2 2 0 1 1 0-4V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M13 5v2M13 11v2M13 17v2'/%3E%3C/svg%3E") center/contain no-repeat}
.events-head h2{color:var(--ink)}
.events-head p{color:var(--ink-soft)}

/* the "tear here" divider between the intro and the tickets below */
.events-tear{position:relative;height:1px;border-top:2px dashed rgba(25,20,51,.22);margin:0 0 34px}
.events-tear::before,.events-tear::after{content:"";position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:var(--sand);transform:translateY(-50%)}
.events-tear::before{left:-24px}
.events-tear::after{right:-24px}

/* The events month filter used to restate the chip defaults, which would now
   override the tokens above. Only its hover colour ever differed, and that is
   a token now, so the override is gone rather than duplicated. */
.events-band .offers-bar{margin-bottom:36px}
.events-scroller{display:flex;gap:22px;overflow-x:auto;padding:4px 4px 14px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.events-scroller::-webkit-scrollbar{height:8px}
.events-scroller::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.events-scroller::-webkit-scrollbar-track{background:transparent}
/* Ticket-stub event cards: a photo up top, a torn-ticket info stub below. */
.event-card{flex:0 0 auto;width:280px;scroll-snap-align:start;position:relative;border-radius:var(--radius);box-shadow:0 16px 34px -18px rgba(15,12,40,.4);transition:transform .2s ease}
.event-card:hover{transform:translateY(-4px)}
.event-img{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0}
.event-img img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.event-img img.loaded{opacity:1}

.ticket{position:relative;display:flex;align-items:stretch;background:#fff;border-radius:0 0 var(--radius) var(--radius);overflow:visible}
.ticket-stub{width:60px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:14px 4px;border-right:2px dashed rgba(25,20,51,.22)}
.stub-month{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--sea);text-transform:uppercase}
.stub-day{font-family:'Fraunces',Georgia,serif;font-size:25px;font-weight:700;color:var(--ink);line-height:1}
/* the two punched notches, coloured to match the section's own background so
   they read as a genuine cutout at the stub/info seam */
.ticket-notch{position:absolute;left:60px;width:16px;height:16px;border-radius:50%;background:var(--sand);transform:translateX(-50%);z-index:2}
.ticket-notch.top{top:-8px}
.ticket-notch.bottom{bottom:-8px}
.ticket-info{position:relative;flex:1;min-width:0;padding:13px 16px 14px 14px}
.ticket-stamp{position:absolute;top:8px;right:11px;font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);border:1.3px solid var(--gold-deep);border-radius:4px;padding:2px 6px;transform:rotate(-6deg);opacity:.6}
.event-date{font-size:12px;font-weight:700;color:var(--sea);margin-bottom:5px}
.ticket-info h4{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:700;letter-spacing:-.005em;margin-bottom:4px;line-height:1.25;color:var(--ink);padding-right:34px}
.event-venue{font-size:12.5px;color:var(--ink-soft)}
.events-empty{color:var(--ink-soft);font-size:15px;padding:20px 4px}
@media(max-width:600px){.event-card{width:230px}.ticket-stub{width:52px}.ticket-notch{left:52px}}

/* Split-flap "departure board" month readout — the section's visual anchor */
.flap-readout{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.flap-label{color:var(--ink-soft);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.flap-board{display:inline-flex;gap:5px;perspective:340px}
.flap-char{width:32px;height:42px;background:#14122b;color:var(--gold);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:21px;box-shadow:0 8px 16px -8px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.08);position:relative}
.flap-char::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.35)}
.flap-char.flipping{animation:flapFlip .48s ease}
@keyframes flapFlip{0%{transform:rotateX(0)}49%{transform:rotateX(-90deg)}51%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@media(prefers-reduced-motion:reduce){.flap-char.flipping{animation:none}}

/* ---------- PER-CATEGORY OFFER SECTIONS (homepage teaser + view-all) ---------- */
.cat-block{margin-bottom:56px}
.cat-block:last-child{margin-bottom:0}
.cat-block-head{max-width:720px;margin-bottom:24px}
.cat-block-head h3{font-size:clamp(23px,2.8vw,30px);font-weight:600;margin-bottom:8px}
.cat-block-head p{color:var(--ink-soft);font-size:15.5px}
.cat-viewall{margin-top:22px;text-align:center}

/* --- category filters: one scrolling row on phones --- */
/* Nine categories at 16px wrapped to four rows on a 375px screen: 223px, or 27%
   of the viewport, before a single offer was visible. "Music & Entertainment" is
   222px on its own, so it can never share a row and wrapping can never be tidy.
   One scrolling row instead, which is what every mobile filter does, and for the
   same reason.

   No gradient fade at the trailing edge, deliberately. A CSS mask cannot know
   whether the row actually overflows, so a destination with three categories
   would get its last chip faded for no reason and it would read as a rendering
   bug. The partially visible chip at the edge is the affordance, and it is
   honest -- it only appears when there is genuinely more to see. */
@media(max-width:720px){
  .filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    /* Bleed to the screen edges so the row reads as continuing past the screen
       rather than being clipped inside a box. The padding puts the first chip
       back in line with the rest of the page. */
    margin-left:-24px; margin-right:-24px;
    padding:6px 24px 12px;
    /* Needed for overflow to work at all inside the flex parent. */
    flex:1 1 100%; min-width:0;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  /* Scrollbars are overlay on iOS and Android, so a visible track here is just
     clutter under the buttons. */
  .filters::-webkit-scrollbar{display:none}
  .filters .chip{
    flex:0 0 auto;          /* never squash a label to fit */
    scroll-snap-align:start;
    scroll-margin-left:24px;
  }
}