/* PlugServices prototype — shared styles */
:root{
  --ink:#1a1230;--plum:#2d1b52;--grape:#4c2a86;--amber:#f5a623;--flame:#c93f1c;
  --terra:#e6532c;--cream:#fff8f0;--paper:#fff;--muted:#6b6280;--line:#ece5f2;--green:#1f9d6b;
  --radius:16px;--shadow:0 10px 30px rgba(35,18,70,.10);--shadow-lg:0 20px 50px rgba(35,18,70,.18);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--cream);line-height:1.5;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.pill{display:inline-block;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.3px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font-family:var(--font);font-weight:700;border-radius:999px;padding:12px 22px;font-size:15px;transition:.15s;text-align:center}
.btn-flame{background:var(--flame);color:#fff}.btn-flame:hover{background:#a83415}
.btn-ghost{background:transparent;border:2px solid rgba(255,255,255,.55);color:#fff}.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#000}
.btn-outline{background:#fff;border:2px solid var(--grape);color:var(--grape)}.btn-outline:hover{background:var(--grape);color:#fff}
.btn-sm{padding:9px 16px;font-size:13px}
.btn-lg{padding:15px 30px;font-size:17px}
.center{text-align:center}

/* NAV */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,248,240,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:22px;height:80px;position:relative}
.logo{display:flex;align-items:center;gap:12px;font-weight:900;font-size:27px;letter-spacing:-.5px}
.logo img{width:48px;height:48px;border-radius:11px;object-fit:cover}
.logo b{color:var(--grape)}
.logo .wordmark{white-space:nowrap;letter-spacing:-.5px}
.logo .wordmark b{margin:0;padding:0}
.nav-links{display:flex;flex-wrap:nowrap;white-space:nowrap;min-width:0;gap:20px;margin-left:6px;font-weight:600;font-size:15px;color:var(--plum)}
/* FR (Google Translate) — keep menu on one line: shrink text/gaps when page is translated */
@media(min-width:901px){
  html.translated-ltr .nav-in{gap:14px}
  html.translated-ltr .nav-links{gap:11px;font-size:13px}
  html.translated-ltr .listbtn{padding:8px 12px;font-size:12.5px}
  html.translated-ltr .logo{font-size:23px}
}
@media(min-width:901px) and (max-width:1200px){
  html.translated-ltr .nav-links{gap:9px;font-size:12px}
  html.translated-ltr .listbtn .ll-full{display:none}
  html.translated-ltr .listbtn .ll-short{display:inline}
}
.nav-links a:hover,.nav-links a.active{color:var(--flame)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.lang{font-weight:800;font-size:13px;color:var(--muted);white-space:nowrap}
.lang a{color:var(--muted);padding:0 1px}
.lang a.on,.lang a:hover{color:var(--flame)}
.hamb{display:none;background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--grape)}
.listbtn .ll-short{display:none}
#google_translate_element{position:fixed;left:-9999px;top:0}
.cartbtn{position:relative;font-size:20px;cursor:pointer}
.cartbtn .count{position:absolute;top:-8px;right:-10px;background:var(--flame);color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:1px 6px}
@media(max-width:900px){
  .hamb{display:block}
  .logo{font-size:25px}
  .logo img{width:48px;height:48px}
  .nav-links{position:absolute;top:100%;left:0;right:0;background:var(--cream);flex-direction:column;gap:0;padding:6px 22px 14px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 2px;border-bottom:1px solid var(--line);font-size:16px}
  .nav-links a:last-child{border-bottom:0}
  .listbtn{display:inline-flex;padding:8px 12px;font-size:13px}
  .listbtn .ll-full{display:none}
  .listbtn .ll-short{display:inline}
  .logo{font-size:24px;gap:9px}
  .logo img{width:48px;height:48px}
  .nav-right{gap:9px}
}

/* HERO */
.hero{position:relative;isolation:isolate;color:#fff;overflow:hidden;background:
  radial-gradient(1200px 500px at 80% -10%,rgba(245,166,35,.35),transparent 60%),
  radial-gradient(900px 500px at 0% 120%,rgba(240,86,46,.45),transparent 55%),
  linear-gradient(135deg,#2d1b52 0%,#1a1230 60%,#3a1a3f 100%)}
/* v186: the stripes were painted OVER the hero's contents (an absolute ::after
   comes after static children). isolation + z-index:-1 keeps them above the
   hero background but behind everything in it. */
.hero:after{content:"";position:absolute;inset:0;z-index:-1;opacity:.09;background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 14px);pointer-events:none}
.hero-in{position:relative;padding:64px 0 30px}
.kente{height:8px;width:100%;background:linear-gradient(90deg,var(--flame) 0 20%,var(--amber) 20% 40%,var(--green) 40% 60%,var(--grape) 60% 80%,var(--terra) 80% 100%)}
.hero h1{font-size:52px;line-height:1.05;letter-spacing:-1.5px;max-width:820px;font-weight:900}
.hero h1 span{color:var(--amber)}
.hero p.sub{margin-top:16px;font-size:19px;max-width:620px;color:#f3ecff;opacity:.92}
.hero .tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.hero .tags .pill{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22)}
@media(max-width:760px){.hero h1{font-size:34px}}

/* SEARCH */
.searchbar{margin-top:28px;background:#fff;border-radius:999px;box-shadow:var(--shadow-lg);display:flex;align-items:center;padding:8px 8px 8px 22px;max-width:900px}
.searchbar .field{display:flex;flex-direction:column;padding:6px 18px;border-right:1px solid var(--line);flex:1}
.searchbar .field.lastfield{border-right:0}
.searchbar label{font-size:11px;font-weight:800;letter-spacing:.5px;color:var(--muted);text-transform:uppercase}
.searchbar input,.searchbar select{border:0;outline:0;font-family:var(--font);font-size:15px;font-weight:600;color:var(--ink);background:transparent;padding:2px 0}
.searchbar .go{margin-left:auto}
@media(max-width:760px){.searchbar{flex-direction:column;border-radius:22px;align-items:stretch;padding:10px}.searchbar .field{border-right:0;border-bottom:1px solid var(--line);padding:12px}.searchbar .go{margin:10px 0 4px}}

/* v187: the "Almost gone" filter (site.js v129, #evGone) borrowed .chip, which is
   white-on-glass for DARK backgrounds. On /events the filter row sits on the
   light page, so it read as white on near-white. It now matches the Any date /
   Any price selects beside it, on every page; active = flame, like .chips-light. */
#evGone{background:#fff;color:var(--ink);border:1px solid #e4d9f5;border-radius:12px;min-height:45px;padding:11px 16px}
#evGone.active{background:var(--flame);color:#fff;border-color:var(--flame)}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.chip{padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:700;font-size:14px;cursor:pointer;transition:.15s}
.chip:hover,.chip.active{background:var(--amber);color:var(--ink);border-color:var(--amber)}
/* light chips (on cream) */
.chips-light .chip{background:#fff;border:1px solid var(--line);color:var(--plum)}
.chips-light .chip:hover,.chips-light .chip.active{background:var(--flame);color:#fff;border-color:var(--flame)}

section{padding:52px 0}
.sec-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.sec-head h2{font-size:28px;letter-spacing:-.6px;font-weight:900}
.sec-head a{color:var(--flame);font-weight:800;font-size:14px}
.eyebrow{color:var(--flame);font-weight:800;letter-spacing:.5px;text-transform:uppercase;font-size:13px}

/* CATEGORY TILES */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 12px;text-align:center;cursor:pointer;transition:.15s}
.cat:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.cat .emo{font-size:28px}.cat .nm{margin-top:8px;font-weight:800;font-size:14px}.cat .ct{font-size:12px;color:var(--muted)}
@media(max-width:860px){.cats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.cats{grid-template-columns:repeat(2,1fr)}}

/* EVENT CARDS */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.grid,.grid.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid,.grid.g3{grid-template-columns:1fr}}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:.18s;border:1px solid var(--line);display:block}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.card .thumb{height:170px;position:relative;overflow:hidden;background:#2d1b52}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .datebadge{position:absolute;top:12px;left:12px;background:#fff;border-radius:10px;text-align:center;width:52px;padding:6px 0;box-shadow:var(--shadow);line-height:1}
.card .datebadge .m{font-size:11px;font-weight:800;text-transform:uppercase;color:var(--flame)}
.card .datebadge .d{font-size:20px;font-weight:900;color:var(--ink)}
.card .fav{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;font-size:16px}
.card .body{padding:14px 16px 18px}
.card .catlab{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--flame)}
.card h3{font-size:17px;margin:6px 0;letter-spacing:-.3px;font-weight:800;line-height:1.2;color:var(--ink)}
.card .meta{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.card .foot{display:flex;align-items:center;justify-content:space-between}
.card .price{font-weight:900}.card .price small{color:var(--muted);font-weight:600;font-size:12px}

/* ORGANIZER BAND */
.band{background:linear-gradient(135deg,#2d1b52,#1a1230);color:#fff;border-radius:24px;padding:44px;position:relative;overflow:hidden}
.band:before{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(245,166,35,.4),transparent 70%)}
.band h2{font-size:30px;font-weight:900;letter-spacing:-.6px;position:relative}
.band p{margin-top:10px;color:#e9e1ff;max-width:560px;position:relative}
.band .stats{display:flex;gap:34px;margin-top:22px;position:relative;flex-wrap:wrap}
.band .stats b{font-size:26px;color:var(--amber);display:block}.band .stats span{font-size:13px;color:#cfc4ea}

/* VALUES */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.value{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.value .emo{font-size:26px}.value h4{margin:10px 0 6px;font-size:17px;font-weight:800}.value p{font-size:14px;color:var(--muted)}
@media(max-width:760px){.values{grid-template-columns:1fr}}

/* PAGE HEADER (interior pages) */
.phead{background:linear-gradient(135deg,#2d1b52,#1a1230);color:#fff;padding:48px 0 40px;position:relative;overflow:hidden}
.phead:after{content:"";position:absolute;inset:0;opacity:.08;background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 14px)}
.phead h1{font-size:40px;font-weight:900;letter-spacing:-1px;position:relative;line-height:1.12}
@media(max-width:600px){.phead h1{font-size:30px}}
.phead p{margin-top:8px;color:#e9e1ff;max-width:640px;position:relative}
.crumb{font-size:13px;color:#cbbff0;margin-bottom:8px;position:relative}
.crumb a:hover{color:#fff}

/* PROSE */
.prose{max-width:820px}
.prose h2{font-size:24px;margin:26px 0 10px;color:var(--grape)}
.prose h3{font-size:18px;margin:20px 0 8px}
.prose p{margin-bottom:12px;color:#3a3350}
.prose ul{margin:0 0 14px 22px}.prose li{margin-bottom:6px;color:#3a3350}
.card-flat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}

/* EVENT DETAIL */
.evhero{display:grid;grid-template-columns:1.6fr 1fr;gap:26px;margin-top:26px}
@media(max-width:900px){.evhero{grid-template-columns:1fr}}
.evmain img.cover{display:block;width:auto;max-width:100%;max-height:560px;margin:0 auto;object-fit:contain;background:#f4eefb;border-radius:var(--radius);border:1px solid var(--line)}
.ticketbox{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;position:sticky;top:88px}
.tier{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.tier .n{font-weight:800}.tier .p{color:var(--muted);font-size:13px}
.qty{display:flex;align-items:center;gap:10px}
.qty button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:18px;cursor:pointer;font-weight:800}
.qty span{min-width:20px;text-align:center;font-weight:800}
.totrow{display:flex;justify-content:space-between;font-weight:900;font-size:18px;margin:14px 0}

/* GALLERY */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery img{width:100%;height:200px;object-fit:cover;object-position:50% 18%;background:#F3EADF;border-radius:12px;display:block}
@media(max-width:900px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery img{height:150px}}
.gallery img{cursor:pointer;transition:.15s}
.gallery img:hover{transform:scale(1.02);box-shadow:var(--shadow)}
.lightbox{position:fixed;inset:0;background:rgba(15,8,30,.88);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.lightbox.open{display:flex}
.lightbox img{max-width:90%;max-height:86vh;border-radius:12px}
.lightbox .x{position:absolute;top:18px;right:24px;color:#fff;font-size:34px;cursor:pointer;font-weight:300}

/* PARTNERS */
.plogos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:800px){.plogos{grid-template-columns:repeat(2,1fr)}}
.plogo{background:#fff;border:1px solid var(--line);border-radius:var(--radius);height:170px;display:grid;place-items:center;text-align:center;padding:14px;transition:.15s}
.plogo:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.plogo .ph{width:64px;height:64px;border-radius:14px;background:linear-gradient(135deg,var(--grape),var(--flame));display:grid;place-items:center;color:#fff;font-weight:900;font-size:22px;margin:0 auto 8px}
.plogo .pn{font-weight:800;font-size:14px}.plogo .pt{font-size:12px;color:var(--muted)}
.plogo-img{display:none;max-width:94%;max-height:135px;object-fit:contain;margin:0 auto}

/* FORMS */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;max-width:760px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.form .row{grid-template-columns:1fr}}
.form label{display:block;font-weight:700;font-size:14px;margin:14px 0 6px}
.form input,.form select,.form textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-family:var(--font);font-size:15px;background:var(--cream)}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--amber);background:#fff}
.form textarea{min-height:110px;resize:vertical}
.hint{font-size:13px;color:var(--muted);margin-top:4px}
.ok{background:#e9f9f1;border:1px solid var(--green);color:#0d6b45;border-radius:12px;padding:14px 16px;margin-top:16px;display:none}
.ok.show{display:block}

/* CHECKOUT */
.cols{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;margin-top:26px}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.summary{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;position:sticky;top:88px}
.summary .li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14px}
.demoflag{background:#fff4e0;border:1px dashed var(--amber);border-radius:12px;padding:12px 16px;font-size:13px;color:#7a5a12;margin:16px 0}
.explain{background:#f3eefc;border:1px solid #e0d3f5;border-radius:var(--radius);padding:22px;margin-top:20px}
.explain h3{color:var(--grape);margin-bottom:8px}
.explain ol{margin-left:20px}.explain li{margin-bottom:8px}

/* FOOTER */
footer.site{background:var(--ink);color:#cfc4ea;padding:50px 0 26px;margin-top:20px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:24px}
footer.site h5{color:#fff;font-size:14px;margin-bottom:12px;letter-spacing:.4px}
footer.site a{display:block;font-size:14px;padding:4px 0;color:#b7abd6}
footer.site a:hover{color:var(--amber)}
.fbrand{max-width:290px}.fbrand p{font-size:14px;margin-top:10px;color:#a99fc9}
.fbot{border-top:1px solid rgba(255,255,255,.1);margin-top:30px;padding-top:18px;font-size:13px;color:#8f85ad;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.fbot a{color:#8f85ad}.fbot a:hover{color:var(--amber)}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}.fbrand{grid-column:1 / -1;max-width:none;text-align:center}.fbrand .logo{justify-content:center}.fbrand a[href*="whatsapp.com"]:not(.wa){margin:14px auto 4px}}

.note{background:#fff4e0;border:1px dashed var(--amber);border-radius:14px;padding:13px 18px;font-size:13px;color:#7a5a12}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--ink);color:#fff;padding:14px 22px;border-radius:999px;font-weight:700;box-shadow:var(--shadow-lg);transition:.3s;z-index:200}
.toast.show{transform:translateX(-50%) translateY(0)}

/* sample tag on cards */
.sampletag{position:absolute;top:12px;right:12px;background:var(--grape);color:#fff;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:4px 8px;border-radius:8px;z-index:2}
.card .fav{cursor:pointer;z-index:3;user-select:none;transition:.15s}
.card .fav.on{background:#fff}
@media(max-width:640px){.card .fav{width:40px;height:40px;font-size:18px}}
.card .sampletag + .fav{display:none}

/* FAQ accordion */
.faqwrap{max-width:860px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;cursor:pointer;font-weight:800;font-size:16px}
.faq-q .ico{color:var(--flame);font-size:22px;transition:.2s;flex:0 0 auto}
.faq-item.open .faq-q .ico{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 20px}
.faq-item.open .faq-a{max-height:400px;padding:0 20px 18px}
.faq-a p{color:#3a3350;font-size:15px}
.faqtabs{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}

/* footer legal one line */
.flegal{white-space:nowrap}
.flegal a{display:inline}

/* Google Translate widget cleanup */
.goog-te-banner-frame,.skiptranslate iframe{display:none!important}
body{top:0!important}
.goog-te-gadget{font-size:0!important;color:transparent}
.goog-tooltip,.goog-te-balloon-frame{display:none!important}
font.goog-text-highlight{background:none!important;box-shadow:none!important}

/* ---- v5: mobile header fixes (EN/FR overlap) ---- */
.logo{flex-shrink:0}
.nav-right{flex-shrink:0}
@media(max-width:640px){
  .nav-in{gap:10px;height:64px}
  .logo img{width:48px;height:48px}
  .wordmark{font-size:22px;letter-spacing:-.4px}
  .nav-right{gap:8px}
  .lang{font-size:11px;background:#f6eee3;border:1px solid var(--line);border-radius:999px;padding:4px 9px;line-height:1}
  .listbtn{padding:9px 11px;font-size:13px}
  .hamb{font-size:24px}
}
@media(max-width:380px){
  .wordmark{font-size:19px;letter-spacing:-.3px}
  .logo{gap:6px}
  .logo img{width:30px;height:30px}
  .lang{padding:3px 6px;font-size:10px}
  .listbtn{padding:8px 9px;font-size:12px}
  .nav-in{gap:7px}
}
/* ---- v5: past events ---- */
#pastWrap .card .btn{background:var(--grape)}
#pastWrap .card{opacity:.85}
/* ---- v5: gallery page ---- */
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gal-grid img{width:100%;height:210px;object-fit:cover;object-position:50% 25%;border-radius:12px;cursor:pointer;display:block;background:#F3EADF}
@media(max-width:900px){.gal-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.gal-grid{grid-template-columns:repeat(2,1fr)}.gal-grid img{height:160px}}
.consent{display:flex;gap:8px;align-items:flex-start;margin-top:14px;font-weight:500;font-size:14px}
.consent input{width:auto;margin-top:4px}
.privacy-clause{font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.55}

/* ---- v9: header cart button ---- */
.cartbtn2{position:relative;font-size:20px;line-height:1;display:inline-flex;align-items:center;padding:4px}
.cartbtn2 .count{position:absolute;top:-7px;right:-9px;background:var(--flame);color:#fff;font-size:10px;font-weight:800;border-radius:999px;padding:1px 5px;line-height:1.4}
@media(max-width:380px){.cartbtn2{font-size:18px}}

/* ---- v10: mobile hero — breathing room + centered ---- */
@media(max-width:640px){
  .hero-in{padding:44px 8px 26px;text-align:center}
  .hero h1{margin-left:auto;margin-right:auto}
  .hero p.sub{margin-left:auto;margin-right:auto}
  .hero .tags{justify-content:center}
  .chips{justify-content:center}
  .searchbar{margin-left:auto;margin-right:auto}
}

/* FR translate: Google strips spaces around notranslate spans — restore breathing room */
html.translated-ltr p [translate="no"],html.translated-ltr li [translate="no"],
html.translated-ltr h1 [translate="no"],html.translated-ltr h2 [translate="no"],
html.translated-ltr h3 [translate="no"],html.translated-ltr blockquote [translate="no"]{margin:0 .22em}
html.translated-ltr p [translate="no"]:first-child,html.translated-ltr li [translate="no"]:first-child{margin-left:0}

/* ================= v20: badges, discovery bar, organizer pages ================= */
.badgerow{position:absolute;left:10px;bottom:10px;display:flex;gap:6px;flex-wrap:wrap;z-index:3}
.ebadge{font-size:11px;font-weight:900;letter-spacing:.2px;padding:4px 9px;border-radius:999px;
  background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(26,18,48,.18);white-space:nowrap}
.ebadge.b-hot{background:var(--flame);color:#fff}
.ebadge.b-warm{background:var(--amber,#F5A623);color:#241a52}
.ebadge.b-new{background:var(--green,#1F9D6B);color:#fff}
.ebadge.b-out{background:#6b6480;color:#fff}
.orgline{font-size:12.5px;font-weight:700;color:var(--muted);margin:2px 0 6px;display:flex;align-items:center;gap:5px}
.vtick{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;
  background:var(--green,#1F9D6B);color:#fff;font-size:10px;font-weight:900;line-height:1}
.vtick.big{width:26px;height:26px;font-size:15px;vertical-align:middle}

/* discovery bar */
.discovery{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 6px}
.searchwrap{position:relative;flex:1 1 280px;min-width:220px}
.searchwrap input{width:100%;padding:11px 14px 11px 38px;border:1.5px solid #e4d9f5;border-radius:12px;
  font:inherit;font-size:14.5px;background:#fff;color:var(--ink)}
.searchwrap input:focus{outline:none;border-color:var(--flame);box-shadow:0 0 0 3px rgba(240,86,46,.14)}
.searchwrap .mag{position:absolute;left:13px;top:50%;transform:translateY(-50%);opacity:.5;font-size:15px}
.discovery select{padding:11px 12px;border:1.5px solid #e4d9f5;border-radius:12px;font:inherit;
  font-size:14px;background:#fff;color:var(--ink);font-weight:700}
.nearbtn{padding:11px 15px;border:1.5px solid var(--grape);background:#fff;color:var(--grape);
  border-radius:12px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap}
.nearbtn:hover{background:var(--grape);color:#fff}
.nearbtn.busy{opacity:.6;pointer-events:none}
.resultbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 0}
.resultbar .cnt{font-weight:800;color:var(--muted);font-size:13.5px}
.resultbar .clr{background:none;border:none;color:var(--flame);font-weight:800;font-size:13.5px;cursor:pointer;font-family:inherit}

/* trust strip */
.trustbar{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:12px;
  font-size:12px;font-weight:700;color:var(--muted)}
.trustbar span{display:flex;align-items:center;gap:5px}

/* email capture */
.subscribe{background:linear-gradient(135deg,var(--grape),#2c1a52);border-radius:20px;padding:30px 26px;color:#fff;
  display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.subscribe h3{color:#fff;font-size:22px;margin:0 0 6px;letter-spacing:-.4px}
.subscribe p{color:#e2d8ff;margin:0;font-size:14.5px;max-width:520px}
.subform{display:flex;gap:8px;flex-wrap:wrap}
.subform input,.subform select{padding:12px 14px;border:0;border-radius:11px;font:inherit;font-size:14.5px;min-width:180px}
.subform button{white-space:nowrap}
.subok{display:none;background:rgba(255,255,255,.16);border-radius:11px;padding:11px 14px;font-weight:700;font-size:14px}
.subok.show{display:block}

/* organizer page */
.orghero{background:linear-gradient(135deg,var(--grape),#2c1a52);color:#fff;padding:34px 0 32px}
.orgtop{display:flex;gap:22px;align-items:center;margin-top:12px;flex-wrap:wrap}
.orgavatar{width:96px;height:96px;border-radius:24px;overflow:hidden;background:rgba(255,255,255,.14);
  display:grid;place-items:center;flex:0 0 auto;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.orgavatar img{width:100%;height:100%;object-fit:cover}
.orgavatar span{font-size:34px;font-weight:900;color:#fff}
.orghero h1{color:#fff;font-size:32px;letter-spacing:-1px;margin:0 0 6px}
.orghero p{color:#e2d8ff;font-weight:600;margin:0}
.orgstats{display:flex;gap:24px;margin-top:14px;flex-wrap:wrap}
.orgstats b{display:block;font-size:22px;color:var(--amber,#F5A623)}
.orgstats span{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:#d9ceff}
@media(max-width:680px){
  .orghero h1{font-size:24px}.orgavatar{width:70px;height:70px;border-radius:18px}
  .orgavatar span{font-size:24px}.subscribe{padding:22px 18px}
  .discovery{gap:8px}.discovery select,.nearbtn{flex:1 1 46%}
}

/* v23: single hero search (city/type/date moved down to the results filters) */
.herosearch{max-width:760px}
.herosearch .field{flex:1 1 auto;min-width:0}
.herosearch input{width:100%}
.herohint{margin:10px 0 0;font-size:13px;color:#e2d8ff;font-weight:600}
@media(max-width:680px){ .herohint{font-size:12.5px} }

/* v24: Organizer Login link in the main nav */
.nav-links a.orglogin{
  color:var(--grape);font-weight:800;border:1.5px solid #e4d9f5;border-radius:999px;
  padding:6px 14px;margin-left:6px;white-space:nowrap;
}
.nav-links a.orglogin:hover{background:var(--grape);color:#fff;border-color:var(--grape)}
@media(max-width:1024px){ .nav-links a.orglogin{border:0;padding:0;margin-left:0;border-radius:0} }

/* v25: centered login bar under the main menu */
.loginbar{background:#fff;border-top:1px solid #f3eefc;border-bottom:1px solid #eee}
.loginbar-in{display:flex;justify-content:center;gap:14px;padding:8px 0}
.lbtn{font-weight:800;font-size:13.5px;border-radius:999px;padding:7px 18px;white-space:nowrap;border:1.5px solid transparent}
.lbtn-org{color:var(--grape);border-color:#e4d9f5;background:#faf8fd}
.lbtn-org:hover{background:var(--grape);color:#fff}
.lbtn-guest{color:var(--green,#1F9D6B);border-color:#cdeadd;background:#f4fbf8}
.lbtn-guest:hover{background:var(--green,#1F9D6B);color:#fff}
@media(max-width:480px){.loginbar-in{gap:8px}.lbtn{font-size:12.5px;padding:6px 13px}}

/* ================= v56: MOBILE SAFETY — nothing off-screen, comfortable gutters ================= */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}

/* The header row used to overflow the viewport, pushing ☰ off-screen. */
@media(max-width:900px){
  .wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  .nav-in{min-width:0;gap:8px}
  .logo{min-width:0;flex-shrink:1;overflow:hidden}
  .logo .wordmark{overflow:hidden;text-overflow:ellipsis;min-width:0}
  .nav-right{min-width:0;flex-shrink:0;gap:6px}
  /* 44x44 minimum tap targets (Apple HIG) */
  .hamb{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:25px;padding:0;flex-shrink:0}
  .cartbtn2{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;flex-shrink:0}
  .nav-links a{padding:15px 2px}
  .loginbar-in{padding-left:0;padding-right:0}
}
/* "List your event" is already in the drawer menu — drop the duplicate button. */
@media(max-width:620px){ .nav-right .listbtn{display:none} }
@media(max-width:420px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .nav-in{gap:6px}
  .lang{padding:4px 7px;font-size:10.5px}
}
/* Wide children must never push the page sideways. */
@media(max-width:900px){
  .chips,.tags,.cats,.grid,.plogos,.gal-grid,.gallery,.fgrid,.cols,.values{max-width:100%}
  .chips,.tags{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .chips::-webkit-scrollbar,.tags::-webkit-scrollbar{display:none}
  table{display:block;overflow-x:auto;max-width:100%}
  pre,code{white-space:pre-wrap;word-break:break-word}
  .prose a{word-break:break-word}
}
/* Breathing room between stacked call-to-action buttons on phones. */
@media(max-width:640px){
  .btn+.btn{margin-top:10px}
  .btn-lg{padding:16px 26px}
}



/* ================= v57: honest empty state (replaces fake "sample" listings) ================= */
.emptystate{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:38px 28px;text-align:center;box-shadow:var(--shadow)}
.emptystate .es-ico{font-size:38px;line-height:1;margin-bottom:12px}
.emptystate h3{font-size:21px;font-weight:800;color:var(--ink);margin:0}
.emptystate p{color:var(--muted);font-size:15px}
.es-notify{margin:24px auto 0;max-width:470px;text-align:left}
.es-notify label{display:block;font-weight:700;font-size:14.5px;color:var(--ink);margin-bottom:9px;text-align:center}
.es-row{display:flex;gap:10px}
.es-row input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;padding:14px 18px;font-size:16px;font-family:var(--font);background:#fff}
.es-row input:focus{outline:2px solid var(--grape);outline-offset:1px}
.es-row .btn{flex-shrink:0}
.es-msg{margin:10px 0 0;font-size:13.5px;text-align:center;min-height:19px}
.es-msg.ok{color:var(--green);font-weight:700}
.es-msg.err{color:var(--flame);font-weight:700}
.es-org{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:14.5px}
.es-org a{color:var(--flame);font-weight:800}
@media(max-width:520px){
  .emptystate{padding:30px 18px}
  .es-row{flex-direction:column}
  .es-row .btn{width:100%}
}

/* ---- v57: buyer guarantee + trust strip ---- */
.guarantee{display:flex;gap:12px;align-items:flex-start;background:#F3FBF7;border:1px solid #CBEBDC;border-radius:14px;padding:15px 17px;margin:16px 0}
.guarantee .g-ico{font-size:22px;line-height:1.2;flex-shrink:0}
.guarantee b{display:block;font-size:14.5px;color:#14724F;margin-bottom:3px}
.guarantee span{font-size:13.5px;color:#276B52;line-height:1.55}
.guarantee a{color:#14724F;font-weight:800;text-decoration:underline}
.evfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:18px 0}
.evfact{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px 16px}
.evfact .k{font-size:11.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.evfact .v{font-size:15px;font-weight:700;color:var(--ink);margin-top:4px;line-height:1.4}

/* ================= v60: FOLLOW US — real brand tiles =================
   The v56 version lost a specificity fight with `footer.site a{color:#b7abd6}`
   and rendered washed-out lavender on a near-black footer. Everything below is
   scoped under `footer.site` so it wins, and uses each platform's own colour so
   the icons are recognisable at a glance on desktop and phone. */
footer.site .fsoc-h{
  display:block;font-size:11.5px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--amber);margin:22px 0 12px;padding:0}
/* v65: STACKED TILES. The previous pill layout used flex:1 1 0 with
   text-overflow:ellipsis, so in a narrow footer column the three labels
   truncated to "Facel" / "Insta" / "What". Nothing here constrains width or
   clips text, so the words render in full at every viewport, on one line. */
footer.site .fsocial{
  display:flex;flex-wrap:nowrap;gap:20px;margin:0;
  align-items:flex-start;justify-content:flex-start}
footer.site .fsocial a{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:9px;flex:0 0 auto;min-width:52px;padding:0 2px;
  background:none;border:0;border-radius:12px;
  font-size:11.5px;font-weight:800;letter-spacing:.2px;line-height:1.2;
  color:rgba(255,255,255,.84);text-decoration:none;text-align:center;white-space:nowrap;
  transition:transform .15s,color .15s}
footer.site .fsocial a:hover,footer.site .fsocial a:focus-visible{color:#fff;transform:translateY(-2px)}
footer.site .fsocial a:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
/* the coloured tile that carries the glyph */
footer.site .fsocial .ficon{
  width:46px;height:46px;flex:0 0 46px;border-radius:999px;margin:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.28);transition:box-shadow .15s,transform .15s}
footer.site .fsocial a:hover .ficon{box-shadow:0 8px 20px rgba(0,0,0,.42)}
footer.site .fsocial .ficon svg{width:22px;height:22px;display:block;fill:#fff}
footer.site .fsocial .fb .ficon{background:#1877F2}
footer.site .fsocial .ig .ficon{
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
footer.site .fsocial .wa .ficon{background:#25D366}
@media(max-width:760px){
  footer.site .fsocial{justify-content:center;gap:26px}
  footer.site .fsoc-h{text-align:center}
}
@media(max-width:360px){
  footer.site .fsocial{gap:18px}
}

/* ================= v60: mobile comfort pass =================
   Measured before this block, at 375px: gutters 16px, 28-34 controls per page
   below the 44px minimum, and EVERY form input under 16px (which makes iOS zoom
   the whole page the moment a buyer taps a field). */
@media(max-width:900px){
  /* More breathing room at the edges than the 16-20px we had. */
  .wrap{padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
  /* 16px is the threshold below which iOS Safari zooms on focus. */
  input:not([type=checkbox]):not([type=radio]),select,textarea,
  .searchbar input,.searchbar select,#evSearch,#evWhen,#evSort,.form input,.form select,.form textarea{
    font-size:16px!important}
  input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:48px}
  /* EN / FR was 16x14px - not tappable. */
  .lang{padding:0}
  .lang a{display:inline-block;min-width:34px;min-height:34px;line-height:34px;text-align:center;padding:0 2px}
  .cartbtn2{width:44px;height:44px}
  .fav{width:44px;height:44px}
}
@media(max-width:420px){
  .wrap{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
}
/* Visible focus ring everywhere - keyboard users could not see where they were. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.chip:focus-visible{
  outline:3px solid var(--grape);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ===== v60.1: measured follow-ups =====
   contact.html: .form measured 362px wide inside a 356px viewport (right edge
   380) — it overflowed by 24px because nothing capped it at the parent width. */
@media(max-width:900px){
  .form,.card-flat,.band,.prose,.cols,.values,.evhero{
    max-width:100%!important;width:100%!important;box-sizing:border-box}
  .form{padding-left:18px!important;padding-right:18px!important}
  .card-flat{padding-left:18px!important;padding-right:18px!important}
  .form .row,.cols,.values{grid-template-columns:1fr!important}
  .form .row > *,.cols > *,.values > *{min-width:0}
}
/* A touch more air at the smallest sizes than the 18px we had. */
@media(max-width:420px){
  .wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
}



/* ===== v64: sweep corrections (measured at 375px) =====
   1. Social row: anchors measured 66/66/48px tall, so the third dropped out of
      line (tops 10422/10422/10436) even though the row was nowrap. A rigid
      3-cell grid makes them identical and guarantees one line.
   2. EN/FR toggle measured 34x34 — still under the 44px minimum.
   3. Main-site gutters are 20px; portals were 16px. Unify at 20px. */


@media(max-width:900px){
  .lang a{min-width:44px!important;min-height:44px!important;line-height:44px!important}
  .lang{display:inline-flex;align-items:center;gap:2px}
}

/* ===== v65: the wordmark must never be clipped =====
   Measured at 375px: .logo .wordmark clientWidth 96 vs scrollWidth 113 — the
   v56 ellipsis guard was cutting "PlugServices" on every page, and the fixed
   22px / 19px steps clipped it again at 414 and 320. The guard stays (it is
   what keeps the ☰ on screen); the type is now fluid so it fits at every
   width, and below 350px the mark stands alone rather than showing a
   half-word. Verified 320 → 1280: zero clipping, zero page overflow,
   44x44 hamburger throughout. */
@media(max-width:900px){
  .logo .wordmark{text-overflow:clip}
  .wordmark{font-size:clamp(13px,4.35vw,24px)!important;letter-spacing:-.4px!important}
}
@media(max-width:430px){
  .logo img{width:34px!important;height:34px!important}
}
@media(max-width:400px){
  .lang a{min-width:36px!important;padding:0 2px}
  .wordmark{letter-spacing:-.55px!important}
}
@media(max-width:349px){
  .logo .wordmark{display:none}
  .logo img{width:38px!important;height:38px!important}
}


/* ===== v89 (Stage 9 accessibility): visible focus, skip link, reduced motion ===== */
.skip-link{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--grape,#4C2A86);color:#fff;font-weight:800;padding:10px 16px;border-radius:0 0 12px 12px;text-decoration:none}
.skip-link:focus{top:0;outline:3px solid #F5A623;outline-offset:2px}
.chip:focus-visible,.card:focus-visible,.btn:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #F5A623;outline-offset:2px;border-radius:8px}
.card:focus-visible{outline-offset:4px;border-radius:18px}
#allEvents:focus{outline:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ===== v91 (Stage 9a UX): "Venue to be announced" on cards; events.html newsletter heading is an h2 ===== */
.venue-tba{font-style:italic;color:var(--muted,#6b6b7b);border-bottom:1px dashed currentColor}
.subscribe h2{color:#fff;font-size:22px;margin:0 0 6px;letter-spacing:-.4px}

/* ===== v131 (SEO): the internal link rail on the 16 city/category landing pages =====
   Measured before this block: the raw HTML of https://plugservices.ca/events/calgary
   contained exactly one internal href — /styles.css. The header, footer and the
   footer's city row are all built by site.js at runtime, so the first thing a
   crawler reads is a page with no way out. The rail is written into the HTML at
   build time (docs/tools/build-landing-inventory.mjs) and sits between the event
   grid and the newsletter box. */
.xlinks{margin-top:40px;padding:20px 22px;background:var(--cream,#fff8f0);border:1px solid var(--line,#ece5f2);border-radius:var(--radius,16px)}
.xl-row{font-size:13.5px;line-height:2.1}
.xl-row+.xl-row{margin-top:8px;padding-top:8px;border-top:1px solid var(--line,#ece5f2)}
.xl-lab{display:inline-block;min-width:210px;font-weight:800;color:var(--plum,#2d1b52);padding-right:10px}
.xlinks a{color:var(--grape,#4c2a86);text-decoration:none;border-bottom:1px solid rgba(76,42,134,.28)}
.xlinks a:hover{color:var(--flame,#c93f1c);border-bottom-color:currentColor}
.xl-sep{opacity:.4;padding:0 7px;user-select:none}
@media (max-width:700px){.xl-lab{display:block;min-width:0;margin-bottom:2px}.xlinks{padding:16px 16px}}