/* Stunts by Will. Retro stunt workshop, app behaviour. Bobby, 27 Oct 2026. */
@font-face{font-family:"Bowlby One";font-weight:400;font-display:swap;src:url(../fonts/bowlby-one-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Yellowtail";font-weight:400;font-display:swap;src:url(../fonts/yellowtail-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-display:swap;src:url(../fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:700;font-display:swap;src:url(../fonts/hanken-grotesk-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:800;font-display:swap;src:url(../fonts/hanken-grotesk-latin-800-normal.woff2) format("woff2")}

:root{
  --cream:#F6F0DF; --paper:#FFFBF3; --navy:#1E2A4C; --pink:#F3A1BD; --pink-soft:#FBE3EB;
  --lilac:#A7A2E2; --lilac-soft:#E4E1F7; --orange:#E88A42; --mustard:#F2B33D; --peach:#F9E3C4; --muted:#56617A; --line:#E3D8BE;
  --display:"Bowlby One",Impact,"Arial Black",sans-serif;
  --script:"Yellowtail","Brush Script MT",cursive;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:20px; --r-s:12px; --b:2px solid var(--navy);
  --sh:4px 4px 0 var(--navy); --sh-key:6px 6px 0 var(--navy); --sh-low:2px 2px 0 var(--navy);
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:20px; --max:1240px; --header:68px;
  color-scheme:light;
}
@media (min-width:760px){:root{--gutter:32px}}
@media (min-width:1200px){:root{--gutter:40px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--cream);color:var(--navy);font:400 17px/1.55 var(--body);overflow-wrap:break-word}
@media (min-width:760px){body{font-size:18px}}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-underline-offset:3px;text-decoration-thickness:1.5px}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:var(--paper);padding:10px 14px;border-radius:10px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
p{margin:0 0 14px}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;margin:0;line-height:.98}
h2{font-size:clamp(30px,5.2vw,52px)}
h3{font-size:clamp(22px,2.4vw,28px);line-height:1.02}
.label{font:800 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.muted{color:var(--muted)}

/* Wordmark: the existing Stunts by Will mark, set in type */
.mark{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--navy);line-height:1}
.mark .s{font:400 38px/1 var(--script);position:relative;padding-right:18px}
.mark .s svg{position:absolute;right:0;top:-1px;width:15px;height:15px;fill:var(--pink)}
.mark .by{display:flex;align-items:center;gap:6px;margin-top:2px;font:400 9px/1 var(--display);letter-spacing:.16em}
.mark .by i{display:block;width:20px;height:6px;background:linear-gradient(var(--pink) 0 3px,var(--navy) 3px 6px)}
.spark{width:1em;height:1em;fill:currentColor;flex:none}

/* Checker strip motif */
.checker{height:12px;background:
  conic-gradient(var(--orange) 25%,var(--cream) 0 50%,var(--orange) 0 75%,var(--cream) 0) 0 0/12px 12px;border-block:2px solid var(--navy)}

/* Buttons: one family, pressable */
.btn{--bg:var(--navy);--fg:var(--paper);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:var(--b);border-radius:999px;background:var(--bg);color:var(--fg);font:800 17px/1 var(--body);text-decoration:none;cursor:pointer;box-shadow:var(--sh);transition:transform .14s var(--ease),box-shadow .14s var(--ease),background-color .2s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--navy)}
.btn:active{transform:translate(2px,2px);box-shadow:var(--sh-low);transition-duration:.08s}
.btn--pink{--bg:var(--pink);--fg:var(--navy)}
.btn--ghost{--bg:transparent;--fg:var(--navy);box-shadow:none;border-color:transparent;text-decoration:underline;text-underline-offset:5px;padding:0 10px}
.btn--ghost:hover{box-shadow:none;transform:none;text-decoration-thickness:3px}
.btn--ghost:active{transform:translateY(1px);box-shadow:none}
.btn--small{min-height:44px;padding:0 18px;font-size:15px}
.btn[disabled]{opacity:.65;cursor:progress}
.arrow{transition:transform .2s var(--ease)}
a:hover .arrow,button:hover .arrow{transform:translateX(3px)}

/* Header */
.site-header{position:sticky;top:0;z-index:40;background:var(--cream);transition:box-shadow .2s}
.site-header.is-stuck{box-shadow:0 2px 0 var(--navy)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--header)}
.nav{display:none}
.nav ul{list-style:none;margin:0;padding:5px;display:flex;gap:2px;background:var(--paper);border:var(--b);border-radius:999px}
.nav a{display:block;padding:9px 16px;border-radius:999px;font:800 15px/1 var(--body);text-decoration:none;transition:background-color .18s}
.nav a:hover{background:var(--pink-soft)}
.nav a[aria-current="true"]{background:var(--navy);color:var(--paper)}
.header-cta{display:none!important}
.menu-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:var(--b);border-radius:999px;background:var(--paper);font:800 15px/1 var(--body);color:var(--navy);cursor:pointer}
.menu-btn svg{width:18px;height:18px}
.menu{display:none;border-top:2px solid var(--navy);background:var(--paper)}
.menu.is-open{display:block}
.menu ul{list-style:none;margin:0;padding:8px var(--gutter) 18px}
.menu li a{display:flex;justify-content:space-between;align-items:center;min-height:52px;font:400 22px/1 var(--display);text-transform:uppercase;text-decoration:none;border-bottom:1.5px dashed var(--line)}
.menu li:last-child a{border:0}
@media (min-width:900px){
  .nav{display:block}
  .header-cta{display:inline-flex!important}
  .menu-btn,.menu{display:none!important}
  .mark .s{font-size:42px}
}

.mount{position:relative;margin:0;background:var(--pink);border:var(--b);border-radius:var(--r);padding:12px 12px 48px;box-shadow:var(--sh-key)}
.mount__img{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--pink-soft)}
.mount__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .16s var(--ease)}
.mount__tab{position:absolute;left:16px;right:16px;bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;font:400 14px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.mount__tab a{text-decoration:none}
.mount__img>a{position:absolute;inset:0;display:block}
.mount__img img.incoming{opacity:0;transition:opacity .24s var(--ease);z-index:1}
.mount__img img.incoming.on{opacity:1}
.mount__tab small{font:700 13px/1.2 var(--body);text-transform:none;letter-spacing:0;color:var(--navy)}
.ticket{position:relative;background:var(--paper);border:var(--b);border-radius:14px;padding:12px 16px;box-shadow:var(--sh)}
.ticket::before,.ticket::after{content:"";position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--cream);border:var(--b)}
.ticket::before{left:-8px;clip-path:inset(0 0 0 50%)}
.ticket::after{right:-8px;clip-path:inset(0 50% 0 0)}
.ticket .label{display:block;font-size:11px;margin-bottom:6px;color:var(--muted)}
.ticket strong{display:block;font:400 18px/1.05 var(--display);text-transform:uppercase}
.ticket p{margin:4px 0 0;font-size:14px;line-height:1.35}
.stamp{position:absolute;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--orange);border:var(--b);color:var(--navy);font:400 13px/1.05 var(--display);text-transform:uppercase;text-align:center;box-shadow:var(--sh);transform:rotate(-5deg);z-index:4;pointer-events:none}
.stamp span{display:block;padding:6px;border:1.5px dashed var(--navy);border-radius:50%;width:80px;height:80px;display:grid;place-items:center}
.chip{min-height:44px;padding:0 16px;border:var(--b);border-radius:999px;background:var(--paper);color:var(--navy);font:800 14px/1 var(--body);cursor:pointer;transition:background-color .18s,transform .12s,box-shadow .12s}
.chip:hover{background:var(--pink-soft)}
.chip:active{transform:translateY(1px)}
.chip[aria-pressed="true"]{background:var(--navy);color:var(--paper);box-shadow:var(--sh-low)}

/* Section scaffolding */
.section{padding:64px 0}
@media (min-width:1024px){.section{padding:96px 0}}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:30px}
.section-head p{max-width:46ch;margin:10px 0 0}

/* Featured band */
.band{background:var(--lilac);border-block:2px solid var(--navy)}
.band .wrap{display:grid;gap:34px;align-items:center}
.band .label{display:inline-block;background:var(--paper);border:var(--b);border-radius:999px;padding:8px 12px;margin-bottom:16px}
.band h2{margin-bottom:14px}
.band-copy p{max-width:44ch}
.band-proof{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
.band-proof .ticket::before,.band-proof .ticket::after{background:var(--lilac)}
.band-proof .ticket b{display:block;font:400 clamp(30px,4vw,40px)/1 var(--display);font-variant-numeric:tabular-nums}
.band .ticket .label{display:block;background:none;border:0;padding:0;margin:0 0 6px;font-size:11px}

/* Media player */
.player{position:relative;border:var(--b);border-radius:var(--r);overflow:hidden;background:var(--navy);box-shadow:var(--sh-key);aspect-ratio:16/9}
.player.tall{aspect-ratio:auto;height:min(640px,78vh);max-width:100%;background:var(--navy);display:flex;justify-content:center}
.player img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player.tall img.poster{object-fit:contain;background:var(--navy)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .25s}
.player.tall iframe{left:50%;width:min(100%,360px);transform:translateX(-50%)}
.player.is-playing iframe{opacity:1}
.player.is-playing img.poster,.player.is-playing .player__play{visibility:hidden}
.player__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 22px 0 8px;border:var(--b);border-radius:999px;background:var(--paper);color:var(--navy);font:800 16px/1 var(--body);cursor:pointer;box-shadow:var(--sh);transition:transform .14s var(--ease),box-shadow .14s}
.player__play:hover{transform:translate(-50%,-50%) translate(-1px,-1px);box-shadow:5px 5px 0 var(--navy)}
.player__play:active{transform:translate(-50%,-50%) translate(2px,2px);box-shadow:var(--sh-low)}
.player__play i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--pink);border:var(--b)}
.player__play i::after{content:"";margin-left:3px;border-left:12px solid var(--navy);border-top:8px solid transparent;border-bottom:8px solid transparent}
.player__status{position:absolute;left:12px;bottom:12px;right:12px;display:none;align-items:center;gap:10px;background:var(--paper);border:var(--b);border-radius:12px;padding:10px 12px;font:700 14px/1.35 var(--body)}
.player.is-loading .player__status.loading{display:flex}
.player.is-failed .player__status.failed{display:flex}
.player.is-failed .player__play{display:none}
.spinner{width:18px;height:18px;border-radius:50%;border:3px solid var(--pink);border-top-color:var(--navy);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.player-note{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:14px;margin:12px 2px 0;color:var(--navy)}
.player-note a{font-weight:800}

/* Offer */
.offer{display:grid;gap:18px;grid-template-columns:1fr}
.stage{display:flex;flex-direction:column;background:var(--paper);border:var(--b);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.stage__img{aspect-ratio:4/3;border-bottom:var(--b);overflow:hidden;background:var(--pink-soft)}
.stage__img img{width:100%;height:100%;object-fit:cover}
.stage__img.pos-bottom img{object-position:center 62%}
.stage__idea{aspect-ratio:4/3;border-bottom:var(--b);background:var(--pink);padding:18px;display:flex;align-items:center;justify-content:center}
.stage__idea .ticket{transform:rotate(-2deg);max-width:260px}
.stage__idea .ticket::before,.stage__idea .ticket::after{background:var(--pink)}
.stage__idea strong{font-size:20px}
.stage__body{padding:16px 18px 20px}
.stage__num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--paper);font:400 14px/1 var(--display);margin-bottom:10px}
.stage h3{margin-bottom:8px}
.stage p{margin:0;font-size:16px}
@media (min-width:640px){.offer{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.offer{grid-template-columns:repeat(4,1fr)}}

/* Process */
.route{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.route li{counter-increment:s;position:relative;display:grid;grid-template-columns:52px 1fr;gap:14px;padding:0 0 26px;align-content:start}
.route li::before{content:counter(s);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--paper);border:var(--b);font:400 22px/1 var(--display);box-shadow:var(--sh-low);z-index:1}
.route li::after{content:"";position:absolute;left:25px;top:52px;bottom:0;border-left:2px dashed var(--navy)}
.route li:last-child::after{display:none}
.route p{margin:12px 0 0;font-size:17px}
.process{display:grid;gap:40px}
.who{display:grid;gap:14px}
.who .ticket::before,.who .ticket::after{background:var(--cream)}
.who strong{font-size:17px;margin-bottom:6px}
.who p{font-size:15.5px}
@media (min-width:1024px){
  .process{grid-template-columns:1.25fr .75fr;gap:64px}
  .route{grid-template-columns:repeat(4,1fr);gap:18px}
  .route li{grid-template-columns:1fr;padding:0}
  .route li::after{left:52px;right:-18px;top:25px;bottom:auto;border-left:0;border-top:2px dashed var(--navy)}
  .route li:last-child::after{display:none}
}

/* Meet Will */
.about{background:var(--paper);border-top:2px solid var(--navy)}
.about .wrap{display:grid;gap:36px;align-items:center}
.about-pics{position:relative;max-width:420px;margin-right:24px}
@media (min-width:1024px){.about-pics{margin-right:70px}}
.about-pics .mount{background:var(--lilac);transform:rotate(-1.5deg)}
.about-pics .mount__img{aspect-ratio:4/5}
.about-pics .small{position:absolute;right:-24px;bottom:-34px;width:40%;transform:rotate(3deg)}
@media (min-width:1024px){.about-pics .small{right:-74px;width:44%}}
.about-pics .small .mount{background:var(--paper);padding:8px 8px 30px;box-shadow:var(--sh)}
.about-pics .small .mount__img{aspect-ratio:6/5}
.about-pics .small .mount__tab{font-size:10px;bottom:8px;left:10px;right:10px}
.about-copy p{max-width:48ch}
.about-copy h2{margin-bottom:18px}
@media (min-width:1024px){.about .wrap{grid-template-columns:.9fr 1.1fr;gap:80px}}

/* Enquiry */
.enquiry .wrap{max-width:860px}
.job{position:relative;background:var(--paper);border:var(--b);border-radius:var(--r);box-shadow:var(--sh-key);padding:28px 20px 26px 30px}
.job::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:var(--pink);border-right:var(--b);border-radius:18px 0 0 18px}
.job-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:2px dashed var(--navy);padding-bottom:16px;margin-bottom:22px}
.job-head h2{font-size:clamp(28px,4.6vw,46px);max-width:16ch}
.form-grid{display:grid;gap:16px}
@media (min-width:700px){.form-grid{grid-template-columns:1fr 1fr}.form-grid .full{grid-column:1/-1}.job{padding:36px 40px 34px 48px}}
.field label{display:block;font:800 15px/1.3 var(--body);margin:0 0 6px}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field textarea{width:100%;font:400 17px/1.4 var(--body);color:var(--navy);background:#fff;border:var(--b);border-radius:12px;padding:12px 14px;min-height:52px;transition:box-shadow .15s,border-color .15s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;box-shadow:0 0 0 4px var(--pink)}
.field [aria-invalid="true"]{border-color:#B3261E;box-shadow:0 0 0 3px #F6D2CF}
.err{display:none;margin:6px 0 0;font:700 14px/1.3 var(--body);color:#8C1D18}
.field.has-error .err{display:block}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:6px}
.fine{font-size:14px;color:var(--muted);margin:0}
.alert{display:none;margin:16px 0 0;padding:14px 16px;border:var(--b);border-radius:12px;font-weight:700}
.alert.fail{background:#FBE3E1}
.alert.is-shown{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.done{text-align:left}
.done h3{font-size:clamp(26px,3.6vw,36px);margin-bottom:10px}
.direct{margin:22px 0 0;text-align:center;font-size:16px}

/* Footer */
.site-footer{background:var(--navy);color:var(--cream);padding:40px 0 48px;font-size:14px}
.site-footer a{color:var(--cream)}
.site-footer .mark{color:var(--cream);margin-bottom:18px}
.site-footer .mark .by i{background:linear-gradient(var(--pink) 0 3px,var(--cream) 3px 6px)}
.site-footer p{max-width:70ch}

/* Story (page and dialog) */
.story{padding:20px 0 64px}
.story .wrap{max-width:1040px}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:800 15px/1 var(--body);text-decoration:none;margin-bottom:12px}
.story-hero{margin:0 0 26px}
.story-hero .mount__img{aspect-ratio:16/9}
.story-hero.portrait .mount__img{aspect-ratio:auto;display:flex;justify-content:center;background:var(--lilac)}
.story-hero.portrait .mount__img img{position:static;width:auto;max-height:620px;object-fit:contain}
.story h1{font-size:clamp(36px,6.4vw,64px);margin:6px 0 14px}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.facts li{border:var(--b);border-radius:999px;padding:7px 12px;font:700 14px/1.2 var(--body);background:var(--paper)}
.facts li.own{background:var(--orange)}
.lede{font:400 clamp(20px,2.4vw,26px)/1.35 var(--body);max-width:36ch;margin:0 0 30px}
.story-grid{display:grid;gap:34px}
.story h2{font-size:clamp(24px,3vw,32px);margin:0 0 12px}
.story ul.plain{margin:0;padding-left:20px}
.story ul.plain li{margin-bottom:8px}
.results{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.results li{background:var(--paper);border:var(--b);border-radius:var(--r-s);padding:12px 14px;display:flex;gap:10px}
.results .spark{color:var(--pink);margin-top:5px;width:14px;height:14px}
.results small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.gallery{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.gallery figure{margin:0}
.gallery .frame{border:var(--b);border-radius:14px;overflow:hidden;background:var(--paper);aspect-ratio:4/3}
.gallery .frame img{width:100%;height:100%;object-fit:cover}
.gallery .clip .frame{background:#fff;padding:8px}
.gallery .clip .frame img{object-fit:contain}
.gallery figcaption{font-size:14px;margin-top:6px;color:var(--muted)}
.links{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:var(--b);border-radius:999px;background:var(--paper);font:700 15px/1 var(--body);text-decoration:none}
.links a:hover{background:var(--pink-soft)}
.story-cta{margin-top:40px}
.next{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:2px dashed var(--navy)}
@media (min-width:900px){.story-grid{grid-template-columns:1fr 1fr}.story-grid .full{grid-column:1/-1}}

dialog.story-dialog{width:min(1100px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:var(--b);border-radius:24px;background:var(--cream);color:var(--navy);box-shadow:var(--sh-key);overflow:auto;overscroll-behavior:contain}
dialog.story-dialog::backdrop{background:rgba(30,42,76,.55)}
dialog.story-dialog .story{padding-top:4px}
.dialog-bar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;background:var(--cream);border-bottom:2px solid var(--navy)}
.dialog-bar .label{font-size:12px}
@media (max-width:699px){dialog.story-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:0}}
body.has-dialog{overflow:hidden}


/* Retro bits used everywhere: script kickers, 70s stripes, starbursts */
.kicker{font:400 clamp(26px,3vw,34px)/1 var(--script);color:var(--orange);margin:0 0 4px;transform:rotate(-3deg);transform-origin:left bottom;display:inline-block}
.stripes{display:grid;grid-template-rows:repeat(4,7px);border-block:2px solid var(--navy)}
.stripes i{display:block}
.hero .stripes{position:relative;z-index:1}
.stripes i:nth-child(1){background:var(--orange)}.stripes i:nth-child(2){background:var(--mustard)}.stripes i:nth-child(3){background:var(--pink)}.stripes i:nth-child(4){background:var(--lilac)}
.burst{position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;max-width:230px;margin:0 auto}
.burst__shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.burst__shape polygon{fill:var(--mustard);stroke:var(--navy);stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(3px 3px 0 var(--navy))}
.b2 .burst__shape polygon{fill:var(--pink)}.b3 .burst__shape polygon{fill:var(--lilac)}
.burst__txt{position:relative;text-align:center;padding:0 22%;line-height:1.15}
.burst__txt b{display:block;font:400 clamp(26px,3vw,38px)/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.burst__txt span{display:block;margin-top:6px;font:800 13px/1.25 var(--body)}

/* Hero: 1950s sunburst, a ribbon, pinned photo tabs that swap */
.hero{position:relative;overflow:hidden;padding:24px 0 0;background:var(--cream)}
.sunburst{position:absolute;left:50%;top:48%;width:2400px;height:2400px;margin:-1200px 0 0 -1200px;pointer-events:none;
  background:radial-gradient(circle closest-side,rgba(246,240,223,0) 0,rgba(246,240,223,0) 22%,var(--cream) 62%),repeating-conic-gradient(from 0deg,var(--peach) 0 5deg,var(--cream) 5deg 10deg)}
.hero-wrap{position:relative;padding-bottom:30px}
.hero-copy{position:relative;z-index:6;text-align:center;max-width:660px;margin:0 auto}
.ribbon{position:relative;display:inline-block;margin:0 0 18px;padding:0 26px;font:400 14px/1 var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--paper)}
.ribbon span{position:relative;z-index:1;display:block;background:var(--orange);border:var(--b);padding:10px 16px;box-shadow:var(--sh-low);color:var(--navy)}
.ribbon::before,.ribbon::after{content:"";position:absolute;top:9px;width:34px;height:100%;background:var(--mustard);border:var(--b);z-index:0}
.ribbon::before{left:0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,30% 50%)}
.ribbon::after{right:0;clip-path:polygon(0 0,100% 0,70% 50%,100% 100%,0 100%)}
.hero h1{font-size:clamp(42px,11.4vw,86px);line-height:.92;margin:0 0 18px;text-shadow:4px 4px 0 var(--pink),5px 5px 0 var(--navy)}
.hero h1 span{display:block}
.hero h1 span:last-child{color:var(--paper);-webkit-text-stroke:2px var(--navy);paint-order:stroke fill;text-shadow:4px 4px 0 var(--orange),6px 6px 0 var(--navy)}
.hero-sub{font-size:clamp(17px,1.7vw,21px);max-width:33ch;margin:0 auto 24px}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.btn--light{--bg:var(--paper);--fg:var(--navy)}
.hero-stage{position:relative;height:clamp(380px,112vw,560px);margin-top:26px}
.pin{position:absolute;z-index:3;transform:rotate(var(--r,0deg));transform-origin:50% 0}
.pin .tape{position:absolute;left:50%;top:-12px;z-index:5;width:76px;height:24px;margin-left:-38px;background:rgba(242,179,61,.78);border:1.5px solid rgba(30,42,76,.35);transform:rotate(-4deg);box-shadow:0 1px 0 rgba(30,42,76,.15)}
.t2 .tape,.t4 .tape{transform:rotate(5deg);background:rgba(243,161,189,.82)}
.snap{position:relative;display:block;color:var(--navy);text-decoration:none;transition:transform .25s var(--ease)}
.snap .mount{padding:9px 9px 34px;border-radius:6px;background:var(--paper);box-shadow:var(--sh)}
.snap .mount__img{aspect-ratio:4/3;border-radius:3px}
.snap .mount__tab{left:12px;right:12px;bottom:10px;font-size:12px;line-height:1}
.snap .mount__tab small{display:none}
.snap:hover,.snap:focus-visible{transform:translateY(-4px) scale(1.03);z-index:8}
.snap:focus-visible{outline-offset:6px;border-radius:8px}
.cycler{display:grid}
.cycler .cyc{grid-area:1/1;opacity:0;visibility:hidden;transform:scale(.97);transition:opacity .7s var(--ease),transform .7s var(--ease),visibility 0s .7s}
.cycler .cyc.on{opacity:1;visibility:visible;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.t1{--r:-4deg}.t2{--r:3deg}.t3{--r:3.5deg}.t4{--r:-3deg}
.sticker{position:absolute;z-index:7;display:grid;place-items:center;width:112px;aspect-ratio:1;transform:rotate(-10deg)}
.sticker .burst__shape polygon{fill:var(--pink)}
.sticker span{position:relative;text-align:center;font:800 11px/1.1 var(--body);text-transform:uppercase;letter-spacing:.06em}
.sticker b{display:block;font:400 15px/1 var(--display);letter-spacing:.02em;margin-top:3px}
.star{position:absolute;z-index:2;width:22px;height:22px;color:var(--navy);pointer-events:none}
.star svg{width:100%;height:100%}
.star.s2,.star.s4{color:var(--orange);width:16px;height:16px}.star.s3{color:var(--pink)}
/* phone */
.t1{left:0;top:0;width:47%}
.t2{right:0;top:4%;width:47%}
.t3{left:3%;top:52%;width:45%}
.t4{right:2%;top:55%;width:46%}
.sticker{left:50%;top:38%;margin-left:-50px;width:100px}
.s1{left:46%;top:2%}.s2{left:6%;top:47%}.s3{right:4%;top:48%}.s4{left:48%;bottom:2%}.s5{display:none}
.motion-btn{display:block;margin:12px auto 0;min-height:44px;padding:0 14px;border:1.5px dashed var(--navy);border-radius:999px;background:var(--paper);color:var(--navy);font:700 13px/1 var(--body);cursor:pointer;position:relative;z-index:6}
.motion-btn .off{display:none}
.still .motion-btn .on{display:none}.still .motion-btn .off{display:inline}
@media (min-width:640px) and (max-width:1023px){
  .hero-stage{height:520px}
  .t1{left:2%;width:33%}.t2{right:2%;width:33%}.t3{left:10%;top:50%;width:32%}.t4{right:10%;top:52%;width:32%}
  .sticker{top:30%;width:120px;margin-left:-60px}
  .s5{display:block;left:30%;bottom:6%}
}
@media (min-width:1024px){
  .hero{padding:0}
  .hero-wrap{display:grid;place-items:center;min-height:clamp(620px,calc(100vh - var(--header) - 40px),760px);padding-bottom:0}
  .hero-copy{padding:20px 0 50px;max-width:min(660px,50vw)}
  .hero h1{font-size:min(86px,6.1vw)}
  .hero-stage{position:absolute;inset:0 var(--gutter);height:auto;margin:0}
  .t1{left:0;top:7%;width:20%}
  .t2{left:3%;top:auto;bottom:9%;width:19%}
  .t3{left:auto;right:0;top:8%;width:20%}
  .t4{right:3%;top:auto;bottom:8%;width:19%}
  .sticker{left:auto;right:22%;top:9%;margin:0;width:128px}
  .s1{left:24%;top:16%}.s2{left:22%;top:auto;bottom:22%}.s3{right:24%;top:auto;bottom:28%;left:auto}.s4{left:50%;bottom:4%}.s5{display:block;right:3%;top:52%}
  .motion-btn{position:absolute;right:var(--gutter);bottom:14px;margin:0}
}

/* Brands and press: one ink colour, on two moving tickers */
.trust{background:var(--paper);padding:30px 0 40px;border-bottom:2px solid var(--navy)}
.trust-band{padding:4px 0 10px}
.trust-band+.trust-band{margin-top:8px}
.trust .kicker{font-size:clamp(24px,2.6vw,30px)}
.tick{overflow:hidden;padding:12px 0;border-block:1.5px dashed var(--line)}
.tick-track{list-style:none;margin:0;padding:0;display:flex;width:max-content;animation:mq 60s linear infinite}
.tick.r .tick-track{animation-direction:reverse;animation-duration:70s}
.tick-set{display:block}
.tick-set>ul{list-style:none;margin:0;padding:0 28px;display:flex;align-items:center;gap:56px}
.tick-set img{display:block;width:auto;max-width:none}
.tick:hover .tick-track,.still .tick-track{animation-play-state:paused}
.bursts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:26px;align-items:center}
@media (max-width:520px){.burst__txt{padding:0 14%}.burst__txt b{font-size:19px}.burst__txt span{font-size:9.5px;margin-top:4px}}
@media (min-width:1024px){.bursts{max-width:900px;margin:34px auto 0;gap:40px}}
@media (prefers-reduced-motion:reduce){.tick-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.tick-set[aria-hidden]{display:none}.tick-set>ul{flex-wrap:wrap;justify-content:center;row-gap:20px}}

/* Work: six favourites in a carousel, the rest on /work/ */
.car-ctrl{display:flex;align-items:center;gap:8px}
.car-count{font:800 14px/1 var(--body);padding:0 6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.car-btn{display:grid;place-items:center;width:46px;height:46px;border:var(--b);border-radius:50%;background:var(--paper);color:var(--navy);font:800 18px/1 var(--body);cursor:pointer;box-shadow:var(--sh-low);transition:background-color .18s,transform .12s}
.car-btn:hover{background:var(--pink-soft)}.car-btn:active{transform:translateY(1px)}
.car-btn[disabled]{opacity:.4;cursor:default;box-shadow:none}
.carousel{--pad:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 0 26px;scroll-padding-inline:var(--pad);overscroll-behavior-x:contain}
.carousel::-webkit-scrollbar{display:none}
.carousel:focus-visible{outline-offset:-3px}
.car-track{list-style:none;margin:0;display:flex;gap:20px;padding:0 var(--pad)}
.car-track::after{content:"";flex:0 0 1px}
.slide{flex:0 0 min(84vw,360px);scroll-snap-align:start;display:flex}
@media (min-width:700px){.slide{flex-basis:calc((min(100vw,var(--max)) - 2 * var(--gutter) - 20px) / 2)}}
@media (min-width:1024px){.slide{flex-basis:calc((min(100vw,var(--max)) - 2 * var(--gutter) - 40px) / 3)}}
.all-link{margin:6px 0 0;text-align:center}
@media (max-width:699px){.car-ctrl .btn{display:none}}
@media (min-width:700px){.all-link{display:none}}
.card{position:relative;display:flex;flex-direction:column;width:100%;background:var(--paper);border:var(--b);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.card:hover,.card:focus-within{transform:translate(-2px,-4px);box-shadow:6px 8px 0 var(--navy)}
.card[hidden]{display:none}
.card__media{position:relative;aspect-ratio:4/3;background:var(--pink-soft);border-bottom:var(--b);overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card__media img,.card:focus-within .card__media img{transform:scale(1.04)}
.card__tag{position:absolute;left:12px;top:12px;z-index:1;background:var(--paper);border:var(--b);border-radius:999px;padding:6px 10px;font:800 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
.card__tag.own{background:var(--orange)}
.card__body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.card__meta{font:700 13px/1.3 var(--body);color:var(--muted);margin:0}
.card h3{font-size:clamp(18px,1.55vw,21px);line-height:1.08}
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;z-index:2;border-radius:var(--r)}
.card h3 a:focus-visible{outline:none}
.card:has(h3 a:focus-visible){outline:3px solid var(--navy);outline-offset:4px}
.card__result{display:flex;gap:8px;align-items:flex-start;margin:auto 0 0;padding-top:4px;font:800 15px/1.3 var(--body)}
.card__result .spark{color:var(--pink);width:16px;height:16px;margin-top:1px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.work-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:700px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.work-grid{grid-template-columns:repeat(3,1fr)}}
.all-work{padding-top:20px}
.all-work h1{font-size:clamp(40px,7vw,72px)}

/* In the papers: two moving rows of real clippings and headlines */
.press{overflow:hidden}
.press .section-head{margin-bottom:22px}
.marquee{display:grid;gap:20px;padding:6px 0 12px}
.mq-row{overflow:hidden;padding:8px 0}
.mq-track{list-style:none;margin:0;padding:0;display:flex;width:max-content;animation:mq 80s linear infinite}
.mq-row.r2 .mq-track{animation-duration:110s;animation-direction:reverse}
.mq-set{display:block}
.mq-set>ul{list-style:none;margin:0;padding:0 10px;display:flex;gap:20px;align-items:center}
.marquee:hover .mq-track,.marquee:focus-within .mq-track,.still .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.clip,.paper{display:block;color:var(--navy);text-decoration:none;border:var(--b);border-radius:14px;box-shadow:var(--sh);transform:rotate(var(--r,0deg));transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.mq-set li:nth-child(3n+1)>a{--r:-1.2deg}.mq-set li:nth-child(3n+2)>a{--r:1deg}
.clip:hover,.paper:hover,.clip:focus-visible,.paper:focus-visible{transform:rotate(0deg) translateY(-4px);box-shadow:6px 8px 0 var(--navy)}
.clip{background:#fff;padding:8px 8px 0}
.clip__img img{display:block;height:150px;width:auto;max-width:300px;object-fit:contain;border-radius:6px}
.clip__cap{display:block;padding:8px 4px 9px;font:700 13px/1.2 var(--body);color:var(--muted)}
.clip__cap b{font:400 13px/1 var(--display);text-transform:uppercase;color:var(--navy);margin-right:6px}
.paper{display:flex;flex-direction:column;width:260px;height:212px;padding:12px 16px 12px;background:#FBF7EC radial-gradient(rgba(30,42,76,.07) 1px,transparent 1.2px) 0 0/5px 5px;border-radius:4px}
.paper__mast{display:flex;align-items:center;min-height:44px;border-bottom:3px double var(--navy);padding-bottom:8px}
.paper__mast img{display:block;width:auto;max-width:100%}
.paper__name{font:700 22px/1 Georgia,"Times New Roman",serif;letter-spacing:-.01em}
.paper__head{flex:1;font:700 18px/1.22 Georgia,"Times New Roman",serif;margin:10px 0 6px}
.paper__foot{display:flex;justify-content:space-between;align-items:center;font:700 13px/1 var(--body);color:var(--muted)}
.paper__foot em,.clip__cap em{font-style:normal;color:var(--navy);font-weight:800}
.clip__cap{display:flex;gap:6px;align-items:baseline}
.clip__cap em{margin-left:auto;padding-left:10px;font-size:12px}
@media (min-width:760px){.clip__img img{height:190px;max-width:380px}.paper{width:300px;height:250px}.paper__head{font-size:20px}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}.mq-row{overflow-x:auto}.mq-set[aria-hidden]{display:none}}

/* Motion: enhancement only. Everything above is the finished, static state. */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .js .reveal.in{opacity:1;transform:none}
  dialog.story-dialog[open]{animation:panel .28s var(--ease)}
  .js .pin{animation:pinIn .7s var(--ease) backwards,sway 6s ease-in-out infinite alternate}
  .js .t2{animation-delay:.08s,-2s}.js .t3{animation-delay:.16s,-4s}.js .t4{animation-delay:.24s,-1s}
  .js .sticker{animation:stick .5s var(--ease) .4s backwards}.js .sticker .burst__shape{animation:spin 30s linear infinite}
  .js .sunburst{animation:spin 200s linear infinite}
  .still .pin,.hero.offscreen .pin,.still .sticker .burst__shape,.hero.offscreen .sticker .burst__shape,.still .sunburst,.hero.offscreen .sunburst{animation-play-state:paused}
}
@keyframes pinIn{from{opacity:0;transform:translateY(-18px) rotate(calc(var(--r) * 2))}}
@keyframes sway{from{transform:rotate(calc(var(--r) - 1.2deg))}to{transform:rotate(calc(var(--r) + 1.2deg))}}
@keyframes stick{from{opacity:0;scale:1.6}}
@keyframes spin{to{rotate:360deg}}
@keyframes panel{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .card,.card__media img,.btn,.chip,.player__play,.snap{transition:none}
  .motion-btn{display:none}
  .snap:hover,.snap:focus-visible{transform:none;outline:3px solid var(--pink);outline-offset:4px}
  .card:hover,.card:focus-within{transform:none;box-shadow:var(--sh);outline:3px solid var(--pink);outline-offset:2px}
  .card:hover .card__media img{transform:none}
}

/* Self-hosted films */
.player.file{background:var(--navy)}
.player.file video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:var(--navy)}
.player.file.tall,.player.tall.file{aspect-ratio:9/16;height:auto;max-height:min(640px,78vh);width:auto;max-width:100%;margin:0 auto}

/* Watch the work: one band, four films behind tabs */
.band-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin-bottom:28px}
.band-head .kicker{flex-basis:100%;margin-bottom:-8px}
.band-head h2{margin:0}
.film-tabs{display:flex;flex-wrap:wrap;gap:8px}
.film-tab{min-height:44px;padding:0 18px;border:var(--b);border-radius:999px;background:var(--paper);color:var(--navy);font:400 14px/1 var(--display);text-transform:uppercase;letter-spacing:.03em;cursor:pointer;box-shadow:var(--sh-low);transition:transform .12s,background-color .18s}
.film-tab:hover{background:var(--pink-soft)}
.film-tab[aria-selected="true"]{background:var(--navy);color:var(--paper)}
.film-panel{display:grid;gap:30px;align-items:center}
.film-panel[hidden]{display:none}
.film-panel h3{font-size:clamp(28px,3.6vw,44px);margin:0 0 14px}
.band .band-proof{grid-template-columns:1fr 1fr}
.band-proof .ticket b{font-size:clamp(24px,2.8vw,34px)}
@media (min-width:1024px){.film-panel{grid-template-columns:1.1fr .9fr;gap:52px}.film-panel .band-media{order:0}}

/* Press standout: a real TV clip in a retro telly */
.tv{display:grid;gap:26px;align-items:center;margin:4px 0 30px}
.tv-set{position:relative;background:var(--navy);padding:14px 14px 34px;border-radius:30px;box-shadow:var(--sh-key);border:2px solid var(--navy)}
.tv-set::after{content:"";position:absolute;right:26px;bottom:10px;width:14px;height:14px;border-radius:50%;background:var(--orange);box-shadow:-24px 0 0 var(--mustard),-48px 0 0 var(--pink)}
.tv-set .player{border-color:var(--paper);box-shadow:none;border-radius:18px}
.tv-set .player-note{color:var(--paper);margin-bottom:-22px}
.tv-set .player-note a{color:var(--paper)}
.tv-meta{font:800 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.tv-copy h3{font-size:clamp(26px,3vw,38px);margin:0 0 14px}
.tv-copy p{max-width:46ch}
.tv-more{font:800 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
@media (min-width:1024px){.tv{grid-template-columns:1.15fr .85fr;gap:52px}}

@media (min-width:1024px){.band .wrap{grid-template-columns:.9fr 1.1fr;gap:56px}.band .band-media{order:2}}
.film-panel .player.tall{max-height:min(560px,78vh)}

/* MAC case study film, full width above Meet Will */
.mac-film{padding-top:0}
.mac-player{max-width:1000px;margin:0 auto}
.mac-player .player{aspect-ratio:16/9}