/* Hulley landing: the studio wall. Cool grey ground, ink navy, condensed heavy caps with one soft
   serif word, cards and polaroids pinned at angles, cobalt for links, lime for the one action on
   dark sections. Everything is sized in em off a fluid base, so the page scales with the window. */
:root{
  --ground:#f3f4f6; --ink:#0a1530; --ink-dim:#46526b; --line:rgba(10,21,48,.14);
  --night:#0a1530; --on-night:#f3f4f6; --on-night-dim:#a9b3c9;
  --cobalt:#2236d1; --lime:#c8f03c; --lime-2:#b6dc2c; --coral:#ff7a59; --yellow:#ffd84d; --pale:#dfe3f3;
  --sans:"Mona Sans",ui-sans-serif,system-ui,sans-serif;
  --serif:"Newsreader",ui-serif,Georgia,serif;
  --osmo:cubic-bezier(.625,.05,0,1); --move:cubic-bezier(.3,.075,0,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --gut:3.5em;
}
*{box-sizing:border-box;margin:0;padding:0}
/* fluid base: 16px at a 1920 design width, 991 on tablet, 479 on phones */
html{-webkit-text-size-adjust:100%}
body{font-size:clamp(8.27px,calc(100vw / 120),32px);background:var(--ground);color:var(--ink);font-family:var(--sans);font-variation-settings:"wdth" 100;line-height:1.4;-webkit-font-smoothing:antialiased;overflow-x:clip}
@media (max-width:991px){body{font-size:calc(100vw / 61.94)}}
@media (max-width:479px){body{font-size:calc(100vw / 29.94)}}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:.15em solid var(--cobalt);outline-offset:.2em}
.theme-dark :focus-visible{outline-color:var(--lime)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:1em;top:-6em;z-index:100;background:var(--lime);color:var(--ink);padding:.7em 1em;font-weight:700}
.skip:focus{top:1em}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- type ---------- */
.h-xxl,.h-xl,.h-l{font-weight:800;font-variation-settings:"wght" var(--wght,800),"wdth" 75;text-transform:uppercase;letter-spacing:-.02em;line-height:.82;text-wrap:balance}
.h-xxl{font-size:12em}
.h-xl{font-size:8em}
.h-l{font-size:5.5em;line-height:.86}
.h-xxl em,.h-xl em,.h-l em{font-family:var(--serif);font-style:normal;font-weight:300;font-variation-settings:"wght" var(--wght,300),"opsz" 72;text-transform:uppercase;letter-spacing:-.03em}
.eyebrow{font-family:var(--serif);font-weight:400;font-size:3em;line-height:1;letter-spacing:-.02em}
.eyebrow-s{font-family:var(--serif);font-weight:400;font-size:1.75em;line-height:1.1;color:var(--ink-dim)}
.para{font-weight:500;font-size:1.375em;line-height:1.42;letter-spacing:-.02em;max-width:36em;color:var(--ink-dim)}
.theme-dark .para{color:var(--on-night-dim)}

/* split-text masks: room for descenders, no clipping of the serif */
.line-mask{overflow:clip;padding-bottom:.12em;margin-bottom:-.12em}
/* the serif's taller metrics push its line box down; pull that back so the caps stay tight */
.line-mask:has(em){margin-bottom:-.27em}
[data-weight-hover] .line{white-space:nowrap} /* a weight change never re-wraps a line */
[data-weight-hover] .char{font-variation-settings:"wght" var(--wght,800),"wdth" 75}
[data-weight-hover] em .char{font-variation-settings:"wght" var(--wght,300),"opsz" 72}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1.75em var(--gut);pointer-events:none}
.nav>*{pointer-events:auto}
.logo{color:var(--cobalt);width:7.53em;display:block;transition:color .2s}
.logo svg{display:block;width:100%;height:auto}
.is-dark .logo{color:#fff}
.pill{display:flex;gap:1.75em;align-items:center;height:3.25em;padding:0 1.5em;background:#fff;box-shadow:0 .1em .3em rgba(10,21,48,.06)}
.pill a,.chip{font-weight:700;font-variation-settings:"wght" 700,"wdth" 75;text-transform:uppercase;font-size:1.125em;letter-spacing:-.01em;text-decoration:none;position:relative}
.chip{justify-self:end;display:inline-flex;align-items:center;gap:.6em;height:2.9em;padding:0 1.1em;background:#fff;color:var(--ink);box-shadow:0 .1em .3em rgba(10,21,48,.06);transition:transform .45s cubic-bezier(.32,.72,0,1)}
.chip:hover{transform:scale(1.06,1.12)}
.chip-dots{position:relative;width:.45em;height:.45em}
.chip-dots i{position:absolute;inset:0;border-radius:50%;background:var(--lime);box-shadow:0 0 0 .08em rgba(10,21,48,.25);transition:transform .45s cubic-bezier(.32,.72,0,1)}
.chip-dots i:nth-child(n+2){transform:rotate(120deg) scale(0);transform-origin:-.6em 50%;box-shadow:none}
.chip-dots i:nth-child(2){background:var(--cobalt);top:-.55em;bottom:.55em}
.chip-dots i:nth-child(3){background:var(--coral)}
.chip-dots i:nth-child(4){background:var(--cobalt);top:.55em;bottom:-.55em}
.chip:hover .chip-dots i:first-child{transform:rotate(-120deg) scale(0)}
.chip:hover .chip-dots i:nth-child(2){transform:none;transition-delay:.03s}
.chip:hover .chip-dots i:nth-child(3){transform:none;transition-delay:.06s}
.chip:hover .chip-dots i:nth-child(4){transform:none;transition-delay:.09s}

/* rolling label: the word turns away like a wheel and the next one comes round */
.roll{position:relative;display:inline-grid;overflow:clip;line-height:1.15}
.roll>span{grid-area:1/1;transform-origin:0 50%;transition:transform .8s var(--spring),opacity .3s}
.roll>span+span{transform:translate(-.75em,2em) rotate(75deg);opacity:0}
a:hover .roll>span:first-child,button:hover .roll>span:first-child{transform:translate(-.75em,-2em) rotate(-75deg);opacity:0}
a:hover .roll>span+span,button:hover .roll>span+span{transform:none;opacity:1}

/* hand-drawn underline */
.draw-line{position:absolute;left:-4%;bottom:-.55em;height:.6em;width:108%;overflow:visible;pointer-events:none}
.draw-line path{fill:none;stroke:var(--cobalt);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.theme-dark .draw-line path{stroke:var(--lime)}

/* text link with an arrow square */
.link{position:relative;display:inline-flex;align-items:center;gap:.4em;font-family:var(--serif);font-size:2em;text-decoration:none;letter-spacing:-.02em}
.arrow{position:relative;display:grid;width:.9em;height:.9em;background:var(--cobalt);overflow:clip}
.arrow svg{grid-area:1/1;width:100%;height:100%;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:square;transition:transform .525s cubic-bezier(.175,.885,.32,1.275)}
.arrow svg+svg{transform:translateY(-100%)}
.link:hover .arrow svg{transform:translateY(100%)}
.link:hover .arrow svg+svg{transform:none}

/* buttons */
.btn{display:inline-flex;align-items:stretch;border:0;padding:0;background:none;cursor:pointer;font:inherit;text-decoration:none;font-weight:700;font-variation-settings:"wght" 700,"wdth" 75;text-transform:uppercase;font-size:1.125em;height:3.2em}
.btn .roll{display:inline-grid;align-items:center;padding:0 1.2em;background:var(--b);color:var(--f)}
.btn-ico{display:grid;place-items:center;width:3.2em;background:var(--b);border-right:.12em solid rgba(10,21,48,.16)}
.btn-ico svg{width:1.1em;fill:none;stroke:var(--f);stroke-width:1.8;transition:transform .5s var(--spring)}
.btn:hover .btn-ico svg{transform:translateX(.2em)}
.btn-cobalt{--b:var(--cobalt);--f:#fff}
.btn-cobalt .btn-ico{border-color:rgba(255,255,255,.25)}
.btn-lime{--b:var(--lime);--f:var(--ink)}
.btn:active{transform:scale(.98)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;place-content:center;justify-items:center;text-align:center;gap:1.5em;padding:9em var(--gut) 6em}
.hero .eyebrow{font-size:3.4em}
.hero-lead{font-weight:500;font-size:1.375em;line-height:1.42;max-width:31em;color:var(--ink-dim);letter-spacing:-.02em}
.cursor-card{position:fixed;left:0;top:0;z-index:20;width:16em;aspect-ratio:1;overflow:clip;pointer-events:none;opacity:0;border:.5em solid #fff;box-shadow:0 1.2em 2.4em rgba(10,21,48,.22)}
.cc-media{position:absolute;inset:-10%;width:120%;height:120%;max-width:none;object-fit:cover;opacity:0}
.cc-media.on{opacity:1}

/* ---------- hero canvas: the brand being made, live, by the team and Hulley ---------- */
.hero-canvas{overflow:clip;isolation:isolate}
.hero-canvas::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(rgba(10,21,48,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(10,21,48,.035) 1px,transparent 1px);background-size:5em 5em;background-position:center;
  -webkit-mask:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.hero-canvas>:not(.canvas):not(.cursors){position:relative;z-index:2}
.cursors{position:absolute;inset:0;z-index:3;pointer-events:none}
.hero-canvas .h-xxl{font-size:9.5em}
.hero-canvas .hero-lead{max-width:28em}
.canvas{position:absolute;inset:0;z-index:1;pointer-events:none;text-align:left}
.cv{position:absolute;left:var(--x);top:var(--y);width:var(--w,auto);rotate:var(--r,0deg);will-change:transform}
.cv-ico{display:grid;place-items:center;width:3.6em;height:3.6em;background:#fff;box-shadow:0 .15em .4em rgba(10,21,48,.08)}
.cv-ico svg{width:1.6em;fill:none;stroke:var(--cobalt);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cv-win{background:#fff;box-shadow:0 .2em .4em rgba(10,21,48,.06),0 1em 2.2em rgba(10,21,48,.12);padding:1.6em .9em .9em}
.cv-win .dots{position:absolute;left:.8em;top:.6em;width:2.6em;height:.5em;background:radial-gradient(circle,#c6ccd8 .2em,transparent .22em) 0 50%/.85em .5em repeat-x}
.guide{display:grid;gap:.7em}
.guide-logo{width:5.86em;color:var(--cobalt)}
.swatches{display:flex;gap:.35em}
.swatches b{width:2em;height:2em;background:var(--c)}
.guide-type{font-weight:800;font-variation-settings:"wght" 800,"wdth" 75;font-size:2.2em;line-height:1}
.guide-type em{font-family:var(--serif);font-style:normal;font-weight:300}
.guide-label{font-family:var(--serif);font-size:1.1em;color:var(--ink-dim)}
.cv-toggle{display:flex;align-items:center;gap:.8em;padding:.75em 1em;background:#fff;font-weight:600;font-size:1.15em;box-shadow:0 .15em .4em rgba(10,21,48,.08)}
.switch{position:relative;width:2.6em;height:1.45em;border-radius:1em;background:var(--cobalt)}
.switch i{position:absolute;right:.18em;top:.18em;width:1.1em;height:1.1em;border-radius:50%;background:#fff}
.cv-photo{background:#fff;padding:.7em;box-shadow:0 .2em .4em rgba(10,21,48,.08),0 1.2em 2.4em rgba(10,21,48,.14)}
.cv-photo img{width:100%;aspect-ratio:16/10;object-fit:cover}
.cv-chat{display:flex;gap:.8em;align-items:flex-start;width:22em;padding:.9em 1.1em;background:#fff;box-shadow:0 .2em .4em rgba(10,21,48,.06),0 1em 2.2em rgba(10,21,48,.12)}
.cv-chat .av{flex:none;display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-variation-settings:"wght" 800,"wdth" 75}
.cv-chat p{font-size:1.1em;line-height:1.35}
.cv-chat small{color:var(--ink-dim);font-weight:400;margin-left:.3em}
.cv-laptop .screen{background:#0b0f1a;padding:.7em;border-radius:.6em .6em 0 0;box-shadow:0 1.2em 2.6em rgba(10,21,48,.22)}
.cv-laptop video{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.cv-laptop .base{display:block;height:.9em;margin:0 -1.4em;background:linear-gradient(#d3d7df,#aeb4bf);border-radius:0 0 .8em .8em}
.cv-card{padding:1.1em 1.2em;background:var(--yellow);box-shadow:0 .2em .4em rgba(10,21,48,.08),0 1em 2.2em rgba(10,21,48,.14)}
.cv-voice .k{font-family:var(--serif);font-size:1em;color:rgba(10,21,48,.7)}
.cv-voice .v{font-weight:700;font-variation-settings:"wght" 700,"wdth" 75;font-size:1.5em;text-transform:uppercase;line-height:1.05;margin-bottom:.45em}
.cv-voice s{text-decoration:none;background:linear-gradient(var(--coral),var(--coral)) 0 55%/100% .12em no-repeat}
.cv-score{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:.2em 1em;padding:.9em 1.1em;background:var(--ink);color:#fff;box-shadow:0 1em 2.2em rgba(10,21,48,.2)}
.cv-score span{font-family:var(--serif);font-size:1.15em;color:var(--on-night-dim)}
.cv-score b{font-weight:800;font-variation-settings:"wght" 800,"wdth" 75;font-size:2.6em;line-height:1}
.cv-score>i{grid-column:1/-1;height:.35em;background:rgba(255,255,255,.15)}
.cv-score>i em{display:block;height:100%;width:calc(var(--p) * 100%);background:var(--coral)}
.cv-ad img{width:100%;aspect-ratio:16/9;object-fit:cover}
.cv-ad .bar{height:.7em;margin-top:.7em;background:#e3e6ee}
.cv-ad .bar.short{width:60%;margin-top:.45em}
.cv-phone{padding:.55em;background:#0b0f1a;border-radius:1.6em;box-shadow:0 1.2em 2.6em rgba(10,21,48,.24)}
.cv-phone video{width:100%;aspect-ratio:9/18;object-fit:cover;border-radius:1.1em;display:block}
/* cursors with name tags */
.cur{position:absolute;left:var(--x);top:var(--y);z-index:3;display:flex;align-items:flex-start;will-change:transform}
.cur svg{width:1.4em;fill:var(--cc);stroke:#fff;stroke-width:1.3;stroke-linejoin:round}
.cur span{margin:1.1em 0 0 -.2em;padding:.2em .55em;background:var(--cc);color:var(--ct,#fff);font-weight:700;font-variation-settings:"wght" 700,"wdth" 75;font-size:1em;white-space:nowrap}
.c-coral{--cc:var(--coral)} .c-cobalt{--cc:var(--cobalt)} .c-yellow{--cc:var(--yellow);--ct:var(--ink)} .c-ink{--cc:var(--ink)} .c-hulley{--cc:#6c7cf5}
/* the headline sits in a selection box */
.sel{position:relative;padding:.9em 1.4em;outline:.08em dashed rgba(34,54,209,.28);outline-offset:0}
.sel .hd{position:absolute;width:.7em;height:.7em;background:#fff;border:.1em solid rgba(34,54,209,.6)}
.sel .tm,.sel .bm{display:none}
.sel .tl{left:-.4em;top:-.4em}.sel .tr{right:-.4em;top:-.4em}.sel .bl{left:-.4em;bottom:-.4em}.sel .br{right:-.4em;bottom:-.4em}
.sel .tm{left:calc(50% - .4em);top:-.4em}.sel .bm{left:calc(50% - .4em);bottom:-.4em}

/* ---------- client logos ---------- */
.clients{padding:2em 0 6em;text-align:center;overflow:clip}
.clients .eyebrow-s{margin-bottom:2.2em}
.marquee{width:120%;margin-left:-10%;overflow:clip}
.marquee-track{display:flex;width:max-content}
.marquee-row{display:flex;align-items:center;gap:1.2em;padding-right:1.2em;list-style:none}
/* each client's logo in its own colours, on the ground it was drawn for */
.logo-tile{display:grid;place-items:center;width:17em;height:7.5em;background:var(--tile);box-shadow:inset 0 0 0 .08em rgba(10,21,48,.08)}
.logo-tile img{height:3.1em;width:auto;max-width:12.5em;object-fit:contain}

/* ---------- intro: the reel ---------- */
.reel{position:relative}
.reel-frame{background:#fff;padding:.9em .9em 0;transform:rotate(-2deg);box-shadow:0 .2em .4em rgba(10,21,48,.08),0 1.4em 2.8em rgba(10,21,48,.14)}
.reel-video{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--pale)}
.reel-frame figcaption{font-family:var(--serif);font-size:1.3em;padding:.6em .1em .8em;color:var(--ink-dim)}
.reel-stk{position:absolute;right:-1.5em;top:-2.2em;width:12em;transform:rotate(8deg)}

/* ---------- intro / collage ---------- */
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6em;align-items:center;padding:8em var(--gut) 12em}
.collage{position:relative;height:44em}
.collage>*{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:rotate(var(--r))}
.polaroid{background:#fff;padding:.9em .9em 0;box-shadow:0 .2em .4em rgba(10,21,48,.08),0 1.4em 2.8em rgba(10,21,48,.14)}
.polaroid img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--pale)}
.polaroid figcaption{font-family:var(--serif);font-size:1.25em;padding:.6em .1em .8em;color:var(--ink-dim)}
.stk svg{display:block;width:100%;height:auto;filter:drop-shadow(0 .5em .8em rgba(10,21,48,.25)) drop-shadow(0 .1em .15em rgba(10,21,48,.15))}
.intro-copy{display:grid;gap:2em;justify-items:start}
.strike-me{background:linear-gradient(var(--coral),var(--coral)) 0 58%/0 .09em no-repeat;transition:background-size 1.2s var(--osmo) .4s}
.strike-me.on{background-size:100% .09em}

/* ---------- parts: pinned stack ---------- */
.theme-dark{background:var(--night);color:var(--on-night)}
.parts{position:relative;padding:9em 0 0}
.parts-head{text-align:center;display:grid;gap:1em;padding:0 var(--gut)}
.stack-pin{position:relative;height:100vh;display:grid;place-items:center;perspective:1400px}
.stack{position:relative;width:min(90vw,calc(72vh * 1.75));aspect-ratio:1.75;transform-style:preserve-3d}
.card{position:absolute;inset:0;padding:1.2em;background:var(--frame);will-change:transform}
.card-in{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:minmax(0,1fr);background:var(--ground);color:var(--ink);overflow:clip}
.card-copy{display:grid;align-content:start;justify-items:start;gap:1.1em;padding:2.4em 2.6em;overflow:auto;font-size:min(1.3em,1.62vh)}
.card-copy h3{font-size:3.6em}
.card-lead{font-weight:600;font-size:1.65em;line-height:1.2;letter-spacing:-.015em;color:var(--ink);max-width:20em}
.points{list-style:none;display:grid;gap:.9em;width:100%;margin-top:.4em;padding-top:1.1em;border-top:.08em solid var(--line)}
.points li{display:grid;grid-template-columns:9em 1fr;gap:1em;align-items:baseline}
.points b{font-weight:700;font-variation-settings:"wght" 700,"wdth" 75;text-transform:uppercase;font-size:1.05em;letter-spacing:.01em;color:var(--ink)}
.points span{font-size:1.15em;line-height:1.4;color:#2f3a52}
.card .facts{margin-top:auto;padding-top:.6em}
.card .tag{justify-self:start;background:var(--frame);color:var(--ink);font-weight:700;font-variation-settings:"wght" 700,"wdth" 75;text-transform:uppercase;font-size:1em;padding:.25em .6em}
.card.on-cobalt .tag{color:#fff}
.badge-ring{transform-origin:60px 60px}
.card h3{font-weight:800;font-variation-settings:"wght" 800,"wdth" 75;text-transform:uppercase;font-size:4.2em;line-height:.85;letter-spacing:-.02em}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:.4em 1.4em;font-family:var(--serif);font-size:1.3em}
.facts li::before{content:"";display:inline-block;width:.45em;height:.45em;background:var(--frame);border:.08em solid var(--ink);margin-right:.5em;vertical-align:.05em}
.card-img{width:100%;height:100%;min-height:0;object-fit:cover;background:var(--pale)}
.badge{position:absolute;right:var(--gut);bottom:4em;width:9em;height:9em}

/* ---------- Dain: the wall ---------- */
.dain{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4em;padding:12em var(--gut) 16em;align-items:start}
.dain-copy{display:grid;gap:2em;position:sticky;top:9em}
.wall{position:relative;height:46em}
.wall-slot{position:absolute;left:var(--x);top:var(--y);width:var(--w,auto);will-change:transform}
.wall-slot>.wall-item{position:relative;width:100%;transform:rotate(var(--r));will-change:transform}
.wall-item:not(.wall-slot>*){position:absolute;left:var(--x);top:var(--y);width:var(--w,auto);transform:rotate(var(--r))}
.stat{display:grid;gap:.3em;padding:1.3em 1.5em;background:var(--bg);color:var(--fg,var(--ink));box-shadow:0 .2em .4em rgba(10,21,48,.08),0 1.2em 2.4em rgba(10,21,48,.14)}
.stat{width:max-content}
.stat b{white-space:nowrap;font-weight:800;font-variation-settings:"wght" 800,"wdth" 75;font-size:5em;line-height:.85;letter-spacing:-.02em}
.stat span{font-family:var(--serif);font-size:1.4em}

/* ---------- questions ---------- */
.faq{position:relative;z-index:2;background:var(--ground);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4em;padding:4em var(--gut) 12em}
.faq-head{display:grid;gap:1.4em;align-content:start}
.qs{border-top:.08em solid var(--line)}
.qs details{border-bottom:.08em solid var(--line)}
.qs summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1.5em;padding:1.3em 0;font-weight:700;font-variation-settings:"wght" 700,"wdth" 75;text-transform:uppercase;font-size:2em;line-height:1;letter-spacing:-.01em;cursor:pointer}
.qs summary::-webkit-details-marker{display:none}
.qs summary i{flex:none;position:relative;width:.7em;height:.7em;transition:transform .5s var(--osmo)}
.qs summary i::before,.qs summary i::after{content:"";position:absolute;background:var(--cobalt)}
.qs summary i::before{left:0;right:0;top:calc(50% - .06em);height:.12em}
.qs summary i::after{top:0;bottom:0;left:calc(50% - .06em);width:.12em}
.qs details[open] summary i{transform:rotate(135deg)}
.qs summary:hover{color:var(--cobalt)}
.qs .a{overflow:clip}
.qs .a p{padding:0 0 1.6em;font-weight:500;font-size:1.3em;line-height:1.45;color:var(--ink-dim);max-width:40em}

/* ---------- close ---------- */
.close{position:relative;min-height:100svh;display:grid;align-content:center;justify-items:center;text-align:center;gap:3em;padding:10em var(--gut) 3em;overflow:clip}
.close .h-xxl{position:relative;z-index:2}
.join{position:relative;z-index:2;display:grid;gap:1em;width:min(50em,100%)}
.join-sub{font-family:var(--serif);font-size:1.6em;color:var(--on-night-dim)}
.join-row{display:grid;grid-template-columns:1fr 1.3fr auto;gap:.6em}
.join input{width:100%;height:3.6em;border:0;padding:0 1.2em;background:#fff;color:var(--ink);font:inherit;font-weight:500;font-size:1.125em}
.join input::placeholder{color:#5d6882}
.join input:focus{outline:.15em solid var(--lime);outline-offset:.15em}
.join input[aria-invalid=true]{box-shadow:inset 0 0 0 .15em var(--coral)}
.join .btn{height:auto;font-size:1.125em}
.err{color:#ffb39f;font-weight:600;font-size:1.2em}
.done{font-family:var(--serif);font-size:1.8em}
.join.sent .join-row,.join.sent .cf-turnstile{display:none}
.foot{position:relative;z-index:2;display:flex;justify-content:space-between;width:100%;margin-top:4em;padding-top:1.4em;border-top:.08em solid rgba(243,244,246,.16);font-weight:600;font-variation-settings:"wght" 600,"wdth" 75;text-transform:uppercase;font-size:1.05em;color:var(--on-night-dim)}
.foot a{text-decoration:none}
.trail-img{position:absolute;z-index:1;width:12em;aspect-ratio:4/5;object-fit:cover;pointer-events:none;border:.45em solid #fff;box-shadow:0 1em 2em rgba(0,0,0,.35)}

/* ---------- load cover: a fat navy squiggle that pulls back along its path ---------- */
.cover{position:fixed;inset:0;z-index:90;pointer-events:none;background:var(--night)}
.cover svg{position:absolute;left:-15%;top:-15%;width:130%;height:130%;overflow:visible}
.cover path{fill:none;stroke:var(--night);stroke-linecap:round;stroke-linejoin:round}

/* ---------- tablet and phone ---------- */
@media (max-width:991px){
  :root{--gut:1.5em}
  .pill{display:none}
  .nav{grid-template-columns:1fr auto;padding:1.25em var(--gut)}
  .logo{width:7.03em}
  .dain{overflow:clip;padding-bottom:6em}
  .wall .stat{padding:1em 1.1em}
  .wall .stat b{font-size:3.4em}
  .wall .stk{justify-self:center;max-width:90%}
  .hero{padding-top:8em}
  .h-xxl{font-size:7.2em}
  .h-xl{font-size:5.6em}
  .h-l{font-size:4em}
  .hero .eyebrow{font-size:2.4em}
  .eyebrow{font-size:2.2em}
  .intro,.dain,.faq{grid-template-columns:1fr;gap:3em}
  .collage{height:34em;font-size:.82em}
  .dain-copy{position:static}
  .stack-pin{height:auto;display:block;perspective:none;padding:3em var(--gut) 6em}
  .stack{width:100%;aspect-ratio:auto;display:grid;gap:1.5em}
  .card{position:relative;inset:auto}
  .card-in{grid-template-columns:1fr}
  .card-img{height:18em}
  .card-copy{order:2}
  .points li{grid-template-columns:1fr;gap:.2em}
  .card-copy{font-size:1em}
  .card-copy h3{font-size:3em}
  .badge{display:none}
  .canvas{font-size:.62em}
  .cv-chat,.cur.c-ink{display:none}
  .cursors{font-size:.62em}
  .hero-canvas .h-xxl{font-size:7.2em}
  .cv-guide{--x:2% !important;--y:9% !important}
  .cv-photo{--x:66% !important;--y:7% !important}
  .cv-laptop{--x:-6% !important;--y:76% !important}
  .cv-phone{--x:84% !important;--y:70% !important}
  .cv-voice{--x:44% !important;--y:86% !important}
  .cv-score{--x:70% !important;--y:58% !important}
  .sel{padding:.6em .8em}
  .reel-stk{right:.4em;top:-1.6em;width:9.5em}
  .intro{overflow-x:clip}
  .wall{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:1.4em;align-items:start}
  .wall-slot,.wall-item:not(.wall-slot>*){position:relative;left:auto;top:auto;width:auto}
  .wall-slot:has(.polaroid){grid-row:span 2}
  .stat{width:auto}
  .join-row{grid-template-columns:1fr}
  .join .btn{height:3.4em}
}
@media (max-width:767px){
  .nav{background:var(--ground);transition:background-color .2s}
  .is-dark .nav{background:var(--night)}
  .join .btn{width:100%}
  .join .btn .roll{flex:1;justify-items:center}
}
@media (max-width:479px){
  .h-xxl{font-size:4.6em}
  .hero-canvas{padding-top:13em;padding-bottom:12em}
  .hero-canvas .h-xxl{font-size:4.4em}
  .canvas,.cursors{font-size:.55em}
  .cv-laptop,.cv-phone,.cv-voice,.cv-ad{display:none}
  .cv-guide{--x:3% !important;--y:10% !important}
  .cv-photo{--x:57% !important;--y:9% !important;--w:17em !important}
  .cv-score{--x:58% !important;--y:88% !important}
  .cur.c-cobalt{--x:12% !important;--y:90% !important}
  .cur.c-hulley{--x:62% !important;--y:25% !important}
  .cur.c-coral{--x:36% !important;--y:18% !important}
  .close .h-xxl{font-size:3.3em}
  .h-xl{font-size:4em}
  .h-l{font-size:3em}
  .hero .eyebrow{font-size:1.9em}
  .eyebrow{font-size:1.75em}
  .para,.hero-lead{font-size:1.1em}
  .card h3{font-size:3em}
  .stat b{font-size:3.6em}
  .qs summary{font-size:1.4em}
  .collage{font-size:.6em;height:40em}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important}
  .strike-me{background-size:100% .09em}
}

/* ---------- hero canvas pieces as HD-2D game UI: stepped pixel borders, pixel labels, sprite
   swatches, a warm bloom and a hard pixel drop. Same colours as the rest of the page. ---------- */
.canvas{--px:.28em}
.canvas .cv-win,.canvas .cv-chat,.canvas .cv-photo,.canvas .cv-score{
  border-radius:0;
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--ink),0 var(--px) 0 0 var(--ink),
    calc(var(--px) * -1) 0 0 0 var(--ink),var(--px) 0 0 0 var(--ink),
    inset 0 0 0 var(--px) #fff,inset 0 0 0 calc(var(--px) * 2) rgba(10,21,48,.12);
  filter:drop-shadow(calc(var(--px) * 1.6) calc(var(--px) * 1.6) 0 rgba(10,21,48,.22)) drop-shadow(0 0 1.4em rgba(255,216,77,.28))}
.canvas .cv-score{box-shadow:0 calc(var(--px) * -1) 0 0 var(--ink),0 var(--px) 0 0 var(--ink),calc(var(--px) * -1) 0 0 0 var(--ink),var(--px) 0 0 0 var(--ink),inset 0 0 0 var(--px) var(--yellow);padding:1em 1.2em}
.canvas .cv-win .dots{background:radial-gradient(circle,transparent 0,transparent 0) 0 0/0 0;display:flex;gap:.35em;width:auto;height:auto;left:.9em;top:.7em}
.canvas .cv-win .dots::before,.canvas .cv-win .dots::after,.canvas .cv-win .dots{content:""}
.canvas .cv-win .dots{width:.55em;height:.55em;background:var(--coral);box-shadow:.9em 0 0 var(--yellow),1.8em 0 0 var(--lime)}
.canvas .swatches b{width:2.1em;height:2.1em;box-shadow:inset .3em .3em 0 rgba(255,255,255,.35),inset -.3em -.3em 0 rgba(0,0,0,.22)}
.canvas .guide-type{font-family:var(--pixel,"Pixelify Sans"),monospace;font-weight:600;font-variation-settings:normal;font-size:2em;letter-spacing:.02em}
.canvas .guide-type em{font-family:"Pixelify Sans",monospace;font-style:normal;font-weight:400;color:var(--cobalt)}
.canvas .guide-label,.canvas .cv-score span,.canvas .cv-chat small{font-family:"Pixelify Sans",monospace;letter-spacing:.06em;text-transform:uppercase;font-size:.95em}
.canvas .cv-score b{font-family:"Pixelify Sans",monospace;font-weight:700;font-variation-settings:normal;font-size:2.8em;color:var(--lime)}
.canvas .cv-score>i{height:.6em;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 .12em rgba(255,255,255,.2)}
.canvas .cv-score>i em{background:repeating-linear-gradient(90deg,var(--coral) 0 .5em,transparent .5em .62em)}
.canvas .cv-chat .av{border-radius:0;background:var(--cobalt);font-family:"Pixelify Sans",monospace;box-shadow:inset 0 0 0 .14em rgba(255,255,255,.25)}
.canvas .cv-chat b{font-family:"Pixelify Sans",monospace;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.canvas .cv-photo img{image-rendering:pixelated}
.canvas .cv-laptop .screen{border-radius:0;box-shadow:0 calc(var(--px) * -1) 0 0 var(--ink),calc(var(--px) * -1) 0 0 0 var(--ink),var(--px) 0 0 0 var(--ink),0 0 2em rgba(255,216,77,.25)}
.canvas .cv-laptop .base{border-radius:0;background:repeating-linear-gradient(90deg,#c9ced8 0 .5em,#bcc2cd .5em 1em);box-shadow:0 var(--px) 0 0 var(--ink)}
/* pixel cursors with pixel name tags */
.cur svg{width:1.15em;height:auto;image-rendering:pixelated;stroke:none}
.cur svg .o{fill:#fff}.cur svg .f{fill:var(--cc)}
.cur span{font-family:"Pixelify Sans",monospace;font-weight:500;font-variation-settings:normal;letter-spacing:.05em;text-transform:uppercase;font-size:.95em;box-shadow:.18em .18em 0 rgba(10,21,48,.25)}
/* little four-point sparkles that twinkle near the pieces */
.sparkles{position:absolute;inset:0;z-index:1;pointer-events:none}
.spk{position:absolute;left:var(--x);top:var(--y);width:.9em;height:.9em;background:var(--yellow);clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%);animation:twinkle 2.4s steps(3) infinite;animation-delay:var(--d);opacity:0}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.9;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.spk{animation:none;opacity:.6}}
@media (max-width:479px){.sparkles{display:none}}