@font-face{font-family:"Clarity Head";src:url(montserrat-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:block}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;color:#f3d6d8;overflow:hidden}
html{background-color:#000}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#000}
.bg-still,.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Background only fades in after a beat, so the very first frame is pure black */
.bg-still{background:#000 url(bg-still-1080.webp) center/cover no-repeat;opacity:0;animation:fadein 2s ease 1.2s forwards}
@media (min-width:1600px){.bg-still{background-image:url(bg-still-4k.webp)}}
.bg-video{opacity:0;transition:opacity 2s ease}
.bg-video.on{opacity:.55}
.bg-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.25) 0%,rgba(0,0,0,.85) 78%)}
#rain{position:fixed;inset:0;width:100%;height:100%;z-index:1;display:block;touch-action:none}
.stage{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 5vw;pointer-events:none;text-align:center}
.words{font-family:"Clarity Head",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:800;color:#e81624;line-height:1.04;font-size:clamp(2.5rem,11vw,7.2rem);letter-spacing:-.01em;max-width:12.5ch;text-shadow:0 0 14px rgba(232,22,36,.55),0 0 42px rgba(232,22,36,.3)}
.words span{display:inline}
/* Hidden until the script takes over; shown by CSS alone if the script never runs */
.boot .words{opacity:0;animation:fadein .8s ease 2.5s forwards}
.boot .after{animation:fadein .8s ease 3s forwards}
.anim .words{animation:none;opacity:0;transition:opacity .7s ease}
.anim.solid .words{opacity:1;animation:pulse 1.6s ease-out .1s 1}
.after{margin-top:0;opacity:0;transition:opacity 1.4s ease;pointer-events:auto}
.anim .after{animation:none}
.show .after{opacity:1;transform:none}
.brand{font-family:"Clarity Head",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:800;font-size:clamp(1.3rem,3.4vw,2rem);color:#fff;letter-spacing:.02em}
.contact{margin-top:1rem}
.contact a{display:inline-block;color:#fff;background:#e81624;font-weight:700;text-decoration:none;padding:.75rem 1.4rem;border-radius:999px;font-size:1rem;box-shadow:0 0 26px rgba(232,22,36,.45)}
.contact a:focus-visible,.foot a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.site{margin-top:.9rem;color:#ff9aa1;font-size:.95rem;letter-spacing:.08em}
.foot{position:fixed;z-index:3;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:1.2rem;padding:12px 12px max(12px,env(safe-area-inset-bottom));font-size:.8rem;color:#b77a7f;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.foot a{color:#f3d6d8}
@keyframes fadein{to{opacity:1}}
@keyframes pulse{0%{text-shadow:0 0 0 rgba(232,22,36,0)}25%{text-shadow:0 0 30px rgba(255,60,72,.95),0 0 90px rgba(232,22,36,.7)}100%{text-shadow:0 0 14px rgba(232,22,36,.55),0 0 42px rgba(232,22,36,.3)}}
@media (prefers-reduced-motion:reduce){
  .boot .words,.anim .words,.words{opacity:1!important;animation:none!important;transition:none}
  .after,.boot .after{opacity:1;transform:none;transition:none;animation:none}
  .bg-still{animation:none;opacity:.5}
  .bg-video,#rain{display:none}
}
.note{max-width:34rem;margin:.8rem auto 0;color:#fff;opacity:.88;font-size:clamp(.95rem,1.6vw,1.1rem);line-height:1.5;padding:0 1rem}
/* 30 Oct: app icon + "Our app is in build" sit in normal flow right under the headline; fade only, never move */
.appmark{margin-top:1.6rem;opacity:0;transition:opacity 1.4s ease}
.boot .appmark{animation:fadein .8s ease 3s forwards}
.anim .appmark{animation:none}
.show .appmark{opacity:1}
.app-icon{display:block;margin:0 auto .6rem;width:clamp(44px,5vw,60px);height:auto}
@media (prefers-reduced-motion:reduce){.appmark,.boot .appmark{opacity:1;transition:none;animation:none}}
/* 30 Oct: riff 18 above the headline (deadpan voice, from the mock) */
.stage>.riff{max-width:36rem;margin:0 auto 1.4rem;color:#ffd9dc;font-size:clamp(.95rem,1.7vw,1.15rem);line-height:1.45;font-style:italic;padding:0 1rem;pointer-events:auto;opacity:0;transition:opacity 1.4s ease}
.boot .stage>.riff{animation:fadein .8s ease 3s forwards}
.anim.boot .stage>.riff{animation:none}
.show .stage>.riff{opacity:1}
@media (max-width:600px){.stage>.riff{margin-bottom:1rem}}
@media (max-height:860px) and (min-width:601px){.stage>.riff{max-width:46rem;margin-bottom:1rem}}
@media (prefers-reduced-motion:reduce){.stage>.riff,.boot .stage>.riff{opacity:1;transition:none;animation:none}}
.count{margin:1rem auto 0}
.count[hidden]{display:none}
.count-nums{display:flex;justify-content:center;gap:clamp(.5rem,2vw,1.4rem);font-family:"Clarity Head",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:800;color:#e81624;text-shadow:0 0 12px rgba(232,22,36,.5)}
.count-nums .u{display:flex;flex-direction:column;align-items:center;min-width:2.4em}
.count-nums b{font-weight:800;font-size:clamp(1.6rem,4.4vw,2.8rem);line-height:1;font-variant-numeric:tabular-nums}
.count-nums i{font-style:normal;font-size:clamp(.62rem,1vw,.8rem);letter-spacing:.12em;text-transform:uppercase;color:#ff9aa1;margin-top:.3rem;text-shadow:none}
.count.done .count-nums{display:block;max-width:30rem;margin:0 auto;font-size:clamp(1.15rem,2.6vw,1.6rem);line-height:1.25;padding:0 1rem}
.count-label{margin-top:.45rem;color:#ff9aa1;font-size:clamp(.78rem,1.2vw,.9rem);letter-spacing:.02em}
.riff-under{max-width:34rem;margin:.9rem auto 0;color:#ffd9dc;font-size:clamp(.9rem,1.5vw,1.05rem);line-height:1.45;font-style:italic;padding:0 1rem}
@media (max-width:600px){.count{margin-top:.7rem}.riff-under{margin-top:.6rem}}
@media (max-height:860px) and (min-width:601px){.count{margin-top:.6rem}.riff-under{max-width:46rem;margin-top:.5rem}.site{display:none}}
@media (max-height:860px) and (min-width:601px){.words{font-size:clamp(2.2rem,min(11vw,10vh),7.2rem)}.stage>.riff{margin-bottom:.7rem}.appmark{margin-top:1rem}.note{margin-top:.5rem}.count-nums b{font-size:clamp(1.4rem,min(4.4vw,4.4vh),2.8rem)}}
@media (max-width:600px) and (max-height:720px){.site{display:none}.words{font-size:clamp(2rem,9.5vw,3rem)}.stage>.riff,.riff-under{font-size:.88rem;line-height:1.35}.stage>.riff{margin-bottom:.6rem}.appmark{margin-top:.8rem}.app-icon{width:36px;margin-bottom:.3rem}.note{margin-top:.4rem;font-size:.9rem}.count-nums b{font-size:1.4rem}.count-label{margin-top:.25rem}}
/* 30 Oct: riff 18 in Tiffany blue */
.stage>.riff{color:#81d8d0}
.riff-under{color:#81d8d0}
/* riff 27 is the only quote under the countdown: normal under-quote spacing */
/* 30 Oct: funky type (self-hosted, OFL) + bolder Message pill */
@font-face{font-family:"Clarity Funk";src:url(fonts/lilita-one-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Clarity Riff";src:url(fonts/patrick-hand-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* 30 Oct 01:36: headline + subline deadpan, plain bold Montserrat (Clarity Head), no funky face */
.riff{font-family:"Clarity Riff","Segoe Print","Comic Sans MS",-apple-system,BlinkMacSystemFont,sans-serif;font-style:normal!important;letter-spacing:.01em}
.stage>.riff{font-size:clamp(1.08rem,1.9vw,1.3rem);line-height:1.35}
.riff-under{font-size:clamp(1.02rem,1.7vw,1.2rem);line-height:1.35}
.contact{margin-top:1.2rem}
.contact a{font-family:"Clarity Funk","Clarity Head",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:400;font-size:clamp(1.2rem,2vw,1.45rem);letter-spacing:.04em;padding:.85rem 2.1rem;border:2px solid rgba(255,255,255,.35);background:linear-gradient(180deg,#ff2b39 0%,#e81624 55%,#c40f1c 100%);box-shadow:0 0 0 4px rgba(232,22,36,.22),0 0 30px rgba(232,22,36,.6),0 8px 22px rgba(0,0,0,.45);transition:transform .2s ease,box-shadow .2s ease;animation:pillglow 2.6s ease-in-out infinite}
.contact a:hover{transform:scale(1.05)}
@keyframes pillglow{0%,100%{box-shadow:0 0 0 4px rgba(232,22,36,.22),0 0 26px rgba(232,22,36,.55),0 8px 22px rgba(0,0,0,.45)}50%{box-shadow:0 0 0 8px rgba(232,22,36,.12),0 0 46px rgba(255,60,72,.85),0 8px 22px rgba(0,0,0,.45)}}
@media (prefers-reduced-motion:reduce){.contact a{animation:none;transition:none}.contact a:hover{transform:none}}
@media (max-width:600px) and (max-height:720px){.stage>.riff,.riff-under{font-size:.98rem;line-height:1.28}.contact{margin-top:.8rem}.contact a{font-size:1.1rem;padding:.7rem 1.7rem}}
@media (max-height:860px) and (min-width:601px){.contact{margin-top:.9rem}}
.invite{font-family:"Clarity Riff","Segoe Print","Comic Sans MS",-apple-system,BlinkMacSystemFont,sans-serif;color:#ffb627;font-size:clamp(1.15rem,2.1vw,1.55rem);line-height:1.3;max-width:34rem;margin:.9rem auto 0;padding:0 1rem;letter-spacing:.01em;text-shadow:0 0 10px rgba(255,140,0,.55),0 0 24px rgba(255,90,0,.3)}
@media (max-height:860px){.invite{margin-top:.6rem}}
@media (max-width:600px) and (max-height:720px){.invite{font-size:1rem;margin-top:.45rem}}
@media (min-width:900px){.words{max-width:none;white-space:nowrap;font-size:clamp(3rem,6.2vw,6.4rem)}}
@media (max-height:960px) and (min-width:601px){.site{display:none}.stage>.riff{margin-bottom:.8rem}.appmark{margin-top:.6rem}.invite{margin-top:.55rem}}
.aside-fine{margin-top:.2rem;color:#fff;opacity:.6;font-size:clamp(.82rem,1.3vw,.98rem);letter-spacing:.03em;font-style:italic}
/* 30 Oct 02:00: hand-drawn underline that draws in once the headline resolves (page does not scroll) */
.scrib{position:relative;display:inline-block;white-space:nowrap}
.scrib-line{position:absolute;left:-6%;width:112%;bottom:-.34em;height:.4em;overflow:visible;pointer-events:none}
.scrib-line path{fill:none;stroke:#e81624;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;filter:drop-shadow(0 0 3px rgba(232,22,36,.55))}
.show .scrib-fine .scrib-line path{stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.55,.1,.35,1) 1.3s}
.boot:not(.anim) .scrib-line path{animation:scribdraw 1s ease 3.8s forwards}
@keyframes scribdraw{to{stroke-dashoffset:0}}
/* Community Heroes strip: compact, cream, handwritten */
.heroes{max-width:36rem;margin:.85rem auto 0;padding:0 1rem;font-family:"Clarity Riff","Segoe Print","Comic Sans MS",-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.28;letter-spacing:.01em}
.heroes-head{color:#fbefd9;font-size:clamp(1.02rem,1.6vw,1.2rem)}
.heroes-names{margin-top:.1rem;color:#f1e3cb;opacity:.82;font-size:clamp(.9rem,1.3vw,1rem)}
.heroes-count{display:block;margin-top:.05rem;font-size:.9em;opacity:.8}
@media (max-height:960px) and (min-width:601px){.heroes{margin-top:.5rem;max-width:44rem}.heroes-count{display:inline;margin-left:.2em}}
@media (max-height:780px) and (min-width:601px){.heroes{margin-top:.35rem}.heroes-head{font-size:1rem}.heroes-names{font-size:.88rem}}
@media (max-width:600px){.heroes{margin-top:.6rem}}
@media (max-width:600px) and (max-height:720px){.heroes{margin-top:.35rem;line-height:1.2}.heroes-head{font-size:.92rem}.heroes-names{font-size:.8rem}.heroes-count{display:inline;margin-left:.2em}}
@media (prefers-reduced-motion:reduce){
  .scrib-line path,.show .scrib-fine .scrib-line path,.boot:not(.anim) .scrib-line path{stroke-dashoffset:0;transition:none;animation:none}
}
/* make room for the heroes strip: the clarityhq.uk text line steps aside on phones, spacing tightens on short screens */
@media (max-width:600px){.site{display:none}.stage>.riff{margin-bottom:.75rem}.appmark{margin-top:1.1rem}.invite{margin-top:.6rem}.heroes{padding:0 .4rem}.heroes-head{font-size:1rem}.heroes-names{font-size:.84rem}}
@media (max-width:600px) and (max-height:760px){.contact{margin-top:.6rem}.contact a{padding:.6rem 1.5rem}.note{line-height:1.38}}
@media (max-width:600px) and (max-height:720px){.words{font-size:clamp(1.9rem,9vw,2.6rem)}.stage>.riff,.riff-under{font-size:.92rem;line-height:1.22}.app-icon{width:30px}.note{font-size:.85rem;margin-top:.3rem}.count{margin-top:.45rem}.count-nums b{font-size:1.25rem}.contact a{font-size:1.02rem;padding:.55rem 1.4rem}.invite{font-size:.95rem;margin-top:.35rem;line-height:1.22}.heroes{margin-top:.3rem;line-height:1.16}.heroes-head{font-size:.86rem}.heroes-names{font-size:.74rem}}
@media (max-height:820px) and (min-width:601px){.contact{margin-top:.7rem}.invite{margin-top:.4rem}.heroes{margin-top:.3rem;line-height:1.2}.riff-under{margin-top:.4rem}}
/* late-night line under the countdown */
.latenight{margin:.35rem auto 0;padding:0 1rem;max-width:34rem;font-family:"Clarity Riff","Segoe Print","Comic Sans MS",-apple-system,BlinkMacSystemFont,sans-serif;color:#f6ead6;opacity:.9;font-size:clamp(.92rem,1.4vw,1.05rem);line-height:1.25;letter-spacing:.01em}
@media (max-height:820px) and (min-width:601px){.latenight{margin-top:.2rem;font-size:.92rem}}
@media (max-width:600px) and (max-height:720px){.latenight{margin-top:.2rem;font-size:.8rem;line-height:1.15}}
/* centre the stage in the space above the footer, so the bottom lines never sit under it */
.stage{padding-top:8px;padding-bottom:calc(46px + env(safe-area-inset-bottom))}
.heroes-count{white-space:nowrap}
@media (max-width:600px) and (max-height:720px){.heroes-count{display:block;margin-left:0}}
/* short laptop windows: headline and icon give back a little height */
@media (max-height:780px) and (min-width:900px){.words{font-size:clamp(3rem,min(6.2vw,9vh),6.4rem)}.app-icon{width:48px;margin-bottom:.4rem}}
/* ===== 30 Oct: legibility pass (PREVIEW legible1030). Don-style gold serif for quotes, solid dark panels behind text,
   bigger phone sizes. Gradient gold only on the one heading-sized line (Community Heroes). Wording and order unchanged. ===== */
@font-face{font-family:"Clarity Don";src:url(fonts/playfair-display-700-900.woff2) format("woff2");font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:"Clarity Don";src:url(fonts/playfair-display-italic-700-900.woff2) format("woff2");font-weight:700 900;font-style:italic;font-display:swap}
:root{--don-gold:#ffd428;--don-ink:rgba(6,4,2,.8);--don-edge:rgba(255,212,40,.3)}
/* Solid dark panels: the falling rain no longer runs through the words */
.stage>.riff,.after{background:var(--don-ink);border:1px solid var(--don-edge);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.stage>.riff{padding:.7rem 1.1rem}
.after{width:100%;max-width:40rem;margin-left:auto;margin-right:auto;padding:.85rem 1.1rem 1rem}
.after .note,.after .latenight,.after .riff-under,.after .invite,.after .heroes,.after .count-label{padding-left:0;padding-right:0}
/* Quotes: Don serif, slightly slanted, solid vibrant gold with a dark shadow */
.stage>.riff,.riff-under{font-family:"Clarity Don",Georgia,"Times New Roman",serif;font-style:italic!important;font-weight:700;color:var(--don-gold);letter-spacing:.005em;text-shadow:0 2px 0 #000,0 0 14px rgba(255,190,40,.22)}
.stage>.riff{font-size:clamp(1.15rem,.6rem + 1.3vw,1.4rem);line-height:1.42}
.riff-under{font-size:clamp(1.15rem,.6rem + 1.2vw,1.35rem);line-height:1.42}
.invite{font-family:"Clarity Don",Georgia,"Times New Roman",serif;font-weight:800;font-style:normal;color:var(--don-gold);font-size:clamp(1.2rem,.65rem + 1.3vw,1.55rem);line-height:1.35;text-shadow:0 2px 0 #000,0 0 16px rgba(255,190,40,.28)}
/* Writing: plain white, full strength, bigger and looser */
.note{color:#fff;opacity:1;font-size:clamp(1.0625rem,.8rem + .6vw,1.2rem);line-height:1.5}
.latenight{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#fff;opacity:1;font-size:clamp(1.0625rem,.8rem + .6vw,1.15rem);line-height:1.45;font-weight:600}
.aside-fine{color:#fff;opacity:.85;font-size:clamp(.95rem,.8rem + .4vw,1.05rem)}
.count-label{color:#ffb3b8;font-size:clamp(.95rem,.8rem + .4vw,1.05rem)}
.count-nums i{color:#ffb3b8;font-size:clamp(.72rem,.6rem + .3vw,.85rem)}
/* Community Heroes: gold gradient heading (big enough to carry it), white names, gold count */
.heroes{font-family:"Clarity Don",Georgia,"Times New Roman",serif;line-height:1.4;margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--don-edge)}
.heroes-head{font-weight:900;font-style:italic;font-size:clamp(1.4rem,.8rem + 1.5vw,1.8rem);line-height:1.2;color:var(--don-gold);background:linear-gradient(180deg,#fff6c4 0%,#ffe36a 30%,#ffd428 55%,#f0b10e 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 10px rgba(255,190,40,.3))}
.heroes-names{margin-top:.35rem;color:#fff;opacity:1;font-weight:700;font-size:clamp(1.0625rem,.8rem + .6vw,1.15rem);line-height:1.45}
.heroes-count{display:block;margin:.2rem 0 0;color:var(--don-gold);opacity:1;font-size:1rem;font-weight:700;font-style:italic;white-space:normal}
/* Safety net at every size: if the content is taller than the window, the page scrolls instead of cutting text off */
html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
.stage{position:relative;min-height:100vh;min-height:100svh}
/* Wide screens: a wider panel so lines wrap less and it all still fits one screen */
@media (min-width:601px){
  .after{max-width:50rem;padding:.7rem 1.4rem .8rem}
  .stage>.riff{max-width:50rem;padding:.55rem 1.4rem}
  .heroes{margin-top:.6rem;padding-top:.5rem;max-width:none}
  .heroes-count{display:inline;margin-left:.35em;white-space:nowrap}
}
@media (min-width:601px) and (max-height:1100px){
  .stage>.riff,.riff-under{font-size:clamp(1.1rem,.6rem + 1vw,1.25rem);line-height:1.35}
  .invite{font-size:clamp(1.15rem,.6rem + 1vw,1.35rem);line-height:1.3;margin-top:.5rem}
  .heroes-head{font-size:clamp(1.3rem,.7rem + 1vw,1.55rem)}
  .note,.latenight,.heroes-names{font-size:1.0625rem;line-height:1.4}
  .note{margin-top:0}
  .aside-fine,.count-label{font-size:.95rem}
  .site{display:none}
}
/* Phones: wider text column, keep these sizes on short screens too; the page scrolls and the footer sits at the end */
@media (max-width:600px){
  #rain{touch-action:pan-y}
  .stage{padding-left:12px;padding-right:12px;padding-top:12px;padding-bottom:16px}
  .foot{position:relative;background:none;padding-top:4px}
  .stage>.riff{margin-bottom:.9rem;padding:.6rem .9rem}
  .after{padding:.75rem .9rem .9rem}
  .stage>.riff,.riff-under{font-size:1.15rem;line-height:1.4}
  .note,.latenight,.heroes-names{font-size:1.0625rem}
  .invite{font-size:1.2rem;margin-top:.7rem}
  .heroes{margin-top:.8rem;padding-top:.65rem;line-height:1.4}
  .heroes-head{font-size:1.4rem}
  .heroes-count{display:block;margin-left:0;font-size:1rem}
  .aside-fine,.count-label{font-size:.95rem}
  .contact{margin-top:.9rem}
}
/* short laptop windows (about 800px tall): trim panel padding and gaps so it still fits one screen */
@media (min-width:601px) and (max-height:820px){
  .stage>.riff{padding:.4rem 1.2rem;margin-bottom:.5rem}
  .after{padding:.5rem 1.2rem .6rem}
  .stage>.riff,.riff-under{line-height:1.3}
  .note,.latenight,.heroes-names{line-height:1.32}
  .heroes{margin-top:.45rem;padding-top:.4rem;line-height:1.3}
  .heroes-names{margin-top:.15rem}
}
/* 30 Oct colour pass: Tiffany blue text, champagne late-night line */
.stage>.riff,.riff-under,.invite,.heroes-names,.heroes-count{color:#81d8d0}
.heroes-head{color:#81d8d0;background:linear-gradient(180deg,#c8f1ed 0%,#a6e6e0 35%,#81d8d0 70%,#6cc9c0 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.latenight{color:#d9c6a5}

/* 30 Oct fix 2: the line under "Message Clarity HQ" is now the email address, so it shows on every screen size and is readable. */
.site{display:block!important;margin-top:.6rem;font-size:1rem;letter-spacing:.03em;color:#ff9aa1;user-select:text;-webkit-user-select:text}

/* Big Man heroes 31 Oct */
.heroes-names{color:#fffaf0!important;opacity:1!important;text-shadow:0 0 8px rgba(255,250,240,.35)}
.heroes-app{margin-top:.15rem;color:#81d8d0;font-size:clamp(.85rem,1.2vw,.95rem)}
.bm-count{position:fixed;z-index:4;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));margin:0;max-width:46vw;text-align:right;font-family:"Clarity Riff","Segoe Print","Comic Sans MS",-apple-system,sans-serif;color:#ffd400;font-size:clamp(.82rem,1.2vw,1rem);line-height:1.2;text-shadow:0 0 10px rgba(255,212,0,.45)}
.bm-count b{font-weight:400;display:block}
@media (max-width:600px){.bm-count{bottom:calc(38px + env(safe-area-inset-bottom));font-size:.8rem}}
@media (max-width:600px) and (max-height:720px){.heroes-app{font-size:.74rem}}

.foot .bm-count{position:absolute;right:14px;bottom:calc(10px + env(safe-area-inset-bottom));max-width:40vw}
@media (max-width:600px){.foot .bm-count{position:static;max-width:none;margin-left:auto;text-align:right;font-size:.78rem}.foot{align-items:flex-end;justify-content:flex-start}}
/* Bright shining white "Clarity." 31 Oct */
.words span:first-child{color:#fff;text-shadow:0 0 6px #fff,0 0 14px rgba(255,255,255,.95),0 0 30px rgba(255,255,255,.75),0 0 60px rgba(255,255,255,.5),0 0 90px rgba(200,230,255,.35);animation:clarityshine 3.2s ease-in-out infinite}
@keyframes clarityshine{0%,100%{text-shadow:0 0 6px #fff,0 0 14px rgba(255,255,255,.95),0 0 30px rgba(255,255,255,.7),0 0 60px rgba(255,255,255,.45),0 0 90px rgba(200,230,255,.3)}50%{text-shadow:0 0 8px #fff,0 0 20px #fff,0 0 42px rgba(255,255,255,.9),0 0 80px rgba(255,255,255,.6),0 0 120px rgba(200,230,255,.45)}}
@media (prefers-reduced-motion:reduce){.words span:first-child{animation:none}}

/* ===== 31 Oct bm4: Big Man advert button + pop-up player (video loads only when tapped) ===== */
.advert{margin:.7rem 0 .2rem;text-align:center}
.advert-btn{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;font:700 1rem/1.2 "Clarity Don",Georgia,"Times New Roman",serif;color:#1a1408;background:linear-gradient(180deg,#f0d58a 0%,#e2c278 45%,#c9a24a 100%);border:1px solid #f6e3a8;border-radius:999px;padding:.6rem 1.3rem;cursor:pointer;box-shadow:0 0 0 3px rgba(201,162,74,.18),0 6px 18px rgba(0,0,0,.45);transition:transform .2s ease}
.advert-btn:hover{transform:translateY(-1px)}
.advert-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.advert-play{width:0;height:0;border-left:.62em solid #1a1408;border-top:.38em solid transparent;border-bottom:.38em solid transparent}
.advert-note{margin:.35rem 0 0;font-size:.8rem;color:#c9bfa8}
.advert-box{padding:0;border:1px solid #c9a24a;border-radius:12px;background:#000;width:min(92vw,960px);max-width:none;color:#f1ead8;overflow:visible}
.advert-box::backdrop{background:rgba(0,0,0,.82)}
.advert-box video{display:block;width:100%;height:auto;border-radius:12px;background:#000}
.advert-close{position:absolute;top:-3rem;right:0;min-height:44px;min-width:44px;padding:.5rem 1rem;font:600 .95rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#f1ead8;background:#1c1915;border:1px solid #c9a24a;border-radius:999px;cursor:pointer}
.advert-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.advert-box[open]{margin:auto;margin-top:max(4rem,calc(50vh - 27vw))}
@media (prefers-reduced-motion:reduce){.advert-btn{transition:none}.advert-btn:hover{transform:none}}
/* Footer Privacy link: 44px tap area without moving the layout */
.foot a{display:inline-block;padding:.85rem .35rem;margin:-.85rem -.35rem}

.ctas{display:flex;flex-direction:column;align-items:center}
.ctas .advert{order:2;margin:.55rem 0 0}
@media (min-width:700px){.ctas{flex-direction:row;justify-content:center;align-items:flex-start;gap:1.2rem;margin-top:.6rem}.ctas .contact{margin-top:0}.ctas .advert{margin:0}.ctas .advert-btn{min-height:52px}}

/* 1 Nov scotland1101: Big Man Scotland line, mirror of .bm-count on the left */
.bm-scot{position:absolute;z-index:4;left:14px;bottom:calc(10px + env(safe-area-inset-bottom));margin:0;max-width:40vw;text-align:left;font-family:"Clarity Riff","Segoe Print","Comic Sans MS",-apple-system,sans-serif;color:#ffd400;font-size:clamp(.82rem,1.2vw,1rem);line-height:1.2;text-shadow:0 0 10px rgba(255,212,0,.45)}
.bm-scot b{font-weight:400;display:block}
@media (max-width:600px){.foot{flex-wrap:wrap}.foot .bm-scot{position:static;order:-1;flex:1 0 100%;max-width:none;font-size:.78rem;margin:0 0 .5rem}}
/* 1 Nov: bolder left teaser */
.bm-scot,.bm-scot b{font-weight:700}
.bm-scot{font-size:clamp(.9rem,1.35vw,1.12rem);text-shadow:0 0 12px rgba(255,212,0,.55)}
@media (max-width:600px){.foot .bm-scot{font-size:.86rem}}
/* 1 Nov: quote under timer, calm blue > fire > blue loop */
@keyframes bmFire{0%,18%{color:#6fb8ff;text-shadow:0 2px 0 #000,0 0 12px rgba(80,160,255,.35)}38%{color:#ffd23f;text-shadow:0 2px 0 #000,0 0 8px rgba(255,120,0,.75),0 -2px 16px rgba(255,60,0,.55)}46%{color:#ffb02e;text-shadow:0 2px 0 #000,0 0 10px rgba(255,90,0,.8),0 -3px 20px rgba(255,40,0,.6)}54%{color:#ffc23a;text-shadow:0 2px 0 #000,0 0 8px rgba(255,110,0,.7),0 -2px 16px rgba(255,50,0,.5)}78%,100%{color:#6fb8ff;text-shadow:0 2px 0 #000,0 0 12px rgba(80,160,255,.35)}}
.riff-under.riff-27{animation:bmFire 7s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.riff-under.riff-27{animation:none;color:#6fb8ff}}

.bm-tune{display:block;width:max-content;max-width:100%;font-family:"Clarity Riff","Segoe Print","Comic Sans MS",sans-serif;font-weight:700;color:#ffd400;font-size:1.05em;transform:rotate(-7deg);transform-origin:left bottom;margin:0 0 .9em .3em;text-shadow:0 2px 0 #000,0 0 12px rgba(255,212,0,.55)}
@media (max-width:600px){.foot .bm-scot .bm-tune{margin:.4rem 0 .8rem .2rem}}
a.bm-tune{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}a.bm-tune:hover,a.bm-tune:focus-visible{color:#fff}a.bm-tune:focus-visible{outline:2px solid #ffd400;outline-offset:3px}
.bm-links{display:block;font-size:.78em;margin-top:.15em}.bm-links a{color:#ffd400;text-decoration:underline;text-underline-offset:3px}.bm-links a:hover,.bm-links a:focus-visible{color:#fff}.bm-links a:focus-visible{outline:2px solid #ffd400;outline-offset:2px}
/* 1 Nov 2026: smoky outline so white text stays readable on bright glow/backgrounds */
.words span:first-child{color:#f5f5f5;text-shadow:0 0 2px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4),0 0 8px rgba(0,0,0,.35),0 0 14px rgba(255,255,255,.75),0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 90px rgba(200,230,255,.3);animation:claritysmoke 3.2s ease-in-out infinite}
@keyframes claritysmoke{0%,100%{text-shadow:0 0 2px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4),0 0 8px rgba(0,0,0,.35),0 0 14px rgba(255,255,255,.75),0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 90px rgba(200,230,255,.3)}50%{text-shadow:0 0 2px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4),0 0 8px rgba(0,0,0,.35),0 0 20px rgba(255,255,255,.85),0 0 42px rgba(255,255,255,.7),0 0 80px rgba(255,255,255,.5),0 0 120px rgba(200,230,255,.4)}}
@media (prefers-reduced-motion:reduce){.words span:first-child{animation:none}}
.brand,.aside-fine,.note,.latenight,.heroes-names{text-shadow:0 0 2px rgba(0,0,0,.55),0 0 8px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.4)}
/* 1 Nov 2026: quote lines a touch more refined: slightly airier spacing, proper kerning/ligatures, same Playfair italic */
.stage>.riff,.riff-under{letter-spacing:.02em;word-spacing:.04em;font-kerning:normal;font-feature-settings:"kern","liga","dlig";text-rendering:optimizeLegibility}
/* 1 Nov: Big Man quote in gold Permanent Marker (font D) */
@font-face{font-family:'PM Quote';src:url(fonts/PermanentMarker-quote.woff2) format('woff2');font-display:swap}
.riff-27{font-family:'PM Quote','Permanent Marker',cursive;font-style:normal;color:#D4AF37;text-shadow:0 0 14px rgba(212,175,55,.35);font-size:clamp(1.05rem,1.9vw,1.3rem);letter-spacing:.02em}
/* 1 Nov: real-metal gold quote + polished silver Big Man */
.riff-27 .q-gold,.riff-27 .q-silver{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.riff-27{text-shadow:none}
.riff-27 .q-gold{background-image:linear-gradient(175deg,#fff6c9 0%,#f7d774 18%,#c99a2e 38%,#fff1a8 50%,#b8862b 62%,#e9c25a 80%,#a07624 100%);filter:drop-shadow(0 1px 0 rgba(90,60,10,.9)) drop-shadow(0 0 10px rgba(212,175,55,.35))}
.riff-27 .q-silver{background-image:linear-gradient(175deg,#ffffff 0%,#d9dde2 20%,#8e959e 40%,#f4f6f8 52%,#7b828b 64%,#c9ced4 82%,#5d636b 100%);filter:drop-shadow(0 1px 0 rgba(30,30,35,.9)) drop-shadow(0 0 8px rgba(220,225,230,.25))}
.stage .riff-under.riff-27,.riff-under.riff-27{animation:none;text-shadow:none;-webkit-text-stroke:0}
.riff-under.riff-27 .q-gold,.riff-under.riff-27 .q-silver{display:inline-block;text-shadow:none;-webkit-text-stroke:0;padding:0 .08em}

/* 1 Nov 2026 (live): Big Man standard across the site. Gold Permanent Marker quotes, polished silver Big Man.
   Fixes: right-edge glyph overhang (padding + matching negative margin), breathing room by the quote marks,
   drop-shadow on both spans so the metal stays crisp over the glow at every width. */
.q-gold,.q-silver{padding:0 .14em 0 .06em!important;margin:0 -.14em 0 -.06em}
.qm.o{margin-right:.1em}.qm.c{margin-left:.08em}
.riff-27 .q-gold,.bmq-top .q-gold{filter:drop-shadow(0 1px 0 rgba(90,60,10,.9)) drop-shadow(0 0 10px rgba(212,175,55,.35))}
.riff-27 .q-silver,.bmq-top .q-silver{filter:drop-shadow(0 1px 0 rgba(30,30,35,.9)) drop-shadow(0 0 8px rgba(220,225,230,.25))}
.stage>.riff.bmq-top{font-family:'PM Quote','Permanent Marker',cursive;font-style:normal!important;font-weight:400;text-shadow:none;letter-spacing:.02em;line-height:1.5}
.bmq-top .q-gold,.bmq-top .q-silver{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none;-webkit-text-stroke:0;animation:none}
.bmq-top .q-gold{background-image:linear-gradient(175deg,#fff6c9 0%,#f7d774 18%,#c99a2e 38%,#fff1a8 50%,#b8862b 62%,#e9c25a 80%,#a07624 100%)}
.bmq-top .q-silver{background-image:linear-gradient(175deg,#ffffff 0%,#d9dde2 20%,#8e959e 40%,#f4f6f8 52%,#7b828b 64%,#c9ced4 82%,#5d636b 100%)}
.q-name{display:inline-block;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none;background-image:linear-gradient(175deg,#ffffff 0%,#d9dde2 20%,#8e959e 40%,#f4f6f8 52%,#7b828b 64%,#c9ced4 82%,#5d636b 100%);filter:drop-shadow(0 1px 0 rgba(30,30,35,.9)) drop-shadow(0 0 6px rgba(220,225,230,.22));padding:0 .12em 0 .04em;margin:0 -.12em 0 -.04em}
/* hqflame1102 */
.riff-27 .q-gold,.bmq-top .q-gold{background-image:linear-gradient(175deg,#fff6c9 0%,#f7d774 18%,#c99a2e 38%,#fff1a8 50%,#b8862b 62%,#e9c25a 80%,#a07624 100%)}
.riff-under.riff-town{font-family:'PM Quote','Permanent Marker',cursive;font-style:normal!important;font-size:clamp(1.05rem,1.9vw,1.3rem);letter-spacing:.02em;margin-top:.9rem;overflow:visible;animation:none;text-shadow:none}
.riff-town .flame{position:relative;display:inline-block;padding:.35em .2em 0;background:linear-gradient(0deg,#ff2a00 0%,#ff6a00 35%,#ffb000 65%,#fff27a 100%);background-size:100% 220%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 0 4px rgba(255,120,0,.9)) drop-shadow(0 0 12px rgba(255,60,0,.6));animation:flSh 1.6s ease-in-out infinite,flFl .18s steps(2) infinite alternate}
.riff-town .flame::before{content:"";position:absolute;left:4%;right:4%;bottom:55%;height:1.1em;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 9% 60% at 8% 100%,#ffb000,transparent 70%),radial-gradient(ellipse 7% 75% at 22% 100%,#ff6a00,transparent 70%),radial-gradient(ellipse 9% 55% at 38% 100%,#ffd23a,transparent 70%),radial-gradient(ellipse 7% 80% at 53% 100%,#ff4500,transparent 70%),radial-gradient(ellipse 9% 60% at 68% 100%,#ffb000,transparent 70%),radial-gradient(ellipse 7% 72% at 83% 100%,#ff6a00,transparent 70%),radial-gradient(ellipse 8% 58% at 95% 100%,#ffd23a,transparent 70%);filter:blur(2px);opacity:.85;transform-origin:50% 100%;animation:flRise 1.1s ease-in-out infinite alternate}
@keyframes flSh{0%,100%{background-position:0 100%}50%{background-position:0 60%}}
@keyframes flFl{from{opacity:1}to{opacity:.88}}
@keyframes flRise{0%{transform:scaleY(.8) translateY(2px);opacity:.7}50%{transform:scaleY(1.15) skewX(3deg);opacity:.95}100%{transform:scaleY(.95) skewX(-3deg) translateY(-2px);opacity:.8}}
@media (prefers-reduced-motion:reduce){.riff-town .flame,.riff-town .flame::before{animation:none}.riff-town .flame{background-position:0 80%}}
.heroes .riff-under.riff-town{margin-top:-.25rem;padding:0;max-width:none}