@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/nunito.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/poppins-300.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-500.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600.woff2) format('woff2')}
:root{
  --purple:#434295; --violet:#5000DB; --offblack:#282828; --offwhite:#F0F0F0; --cream:#FBFAF7;
  --sh1:#6262A7; --sh2:#8281B8; --sh3:#A1A1CA; --sh4:#C0C0DC; --sh5:#38377C; --sh6:#2D2C63; --sh7:#22214B; --sh8:#161632;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:'Poppins',system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;background:#FBFAF7}

#app{position:fixed;inset:0;overflow:hidden;
  --bg:#FBFAF7;--ink:#282828;--muted:#5E5D7A;--logo:#434295;
  --solid-bg:#434295;--solid-fg:#fff;
  background:var(--bg)}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.page{position:absolute;inset:0;z-index:3}
#app[data-page="home"] #aboutScroll,#app[data-page="home"] #contactScroll{display:none}
#app[data-page="about"] #home,#app[data-page="about"] #contactScroll{display:none}
#app[data-page="contact"] #home,#app[data-page="contact"] #aboutScroll{display:none}
.dk{--ink:#fff;--muted:rgba(255,255,255,.7);--logo:#fff;--solid-bg:#fff;--solid-fg:#161632}

/* glass (brand shades instead of blues) */
.glass{border:1.5px solid rgba(255,255,255,.9);
  background:
   linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 38%,rgba(255,255,255,0) 47%),
   linear-gradient(135deg,rgba(255,255,255,.66) 0%,rgba(192,192,220,.24) 42%,rgba(130,129,184,.30) 100%),
   rgba(255,255,255,.30);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 0 26px rgba(255,255,255,.55),inset 0 0 3px rgba(67,66,149,.55),0 0 0 1px rgba(67,66,149,.10),0 20px 50px rgba(34,33,75,.14)}
.dk .glass,#app.nav-dark .nav.glass,#app.menu-open .nav.glass{border-color:rgba(255,255,255,.24);
  background:
   linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.16) 38%,rgba(255,255,255,0) 47%),
   rgba(255,255,255,.07);
  box-shadow:inset 0 0 22px rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.04),0 18px 50px rgba(0,0,0,.35)}

/* header: the logo is Home */
.nav{position:absolute;top:18px;left:50%;z-index:6;display:flex;align-items:center;gap:18px;padding:6px 8px 6px 16px;border-radius:999px;
  opacity:0;transform:translate(-50%,-14px);transition:opacity 1s ease .25s,transform 1s cubic-bezier(.16,1,.3,1) .25s,background .4s,border-color .4s,box-shadow .4s}
.go .nav{opacity:1;transform:translate(-50%,0)}
#app.nav-dark .nav{--ink:#fff;--logo:#fff}
.nav .logo{display:block;width:24px;height:18.5px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.nav .logo:hover{transform:scale(1.08)}
.nav .logo svg{display:block;width:100%;height:100%;fill:var(--logo);transition:fill .4s}
.nav ul{display:flex;gap:2px;list-style:none}
.nav a.l{display:block;font:500 10px 'Poppins',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:8px 14px;border-radius:999px;opacity:.72;transition:opacity .25s,background .25s,color .4s}
.nav a.l:hover{opacity:1}
.nav a.l.cur{opacity:1;background:rgba(67,66,149,.12)}
#app.nav-dark .nav a.l.cur{background:rgba(255,255,255,.14)}

/* copy */
.copy{position:absolute;inset:0;pointer-events:none;z-index:4;transition:opacity .35s ease,visibility .35s}
.no-text .copy{opacity:0;visibility:hidden}
.copy>*{position:absolute;pointer-events:auto}
.hl{font-family:'Nunito',sans-serif;font-weight:300;line-height:1.03;letter-spacing:-.025em;color:var(--ink)}
.hl b{font-weight:800}
.hl .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hl .ln>span{display:block;transform:translateY(108%);transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
.go .hl .ln>span{transform:none}
.go .hl .ln:nth-child(1)>span{transition-delay:.12s}
.go .hl .ln:nth-child(2)>span{transition-delay:.26s}
.go .hl .ln:nth-child(3)>span{transition-delay:.40s}

.blk{display:flex;flex-direction:column;gap:20px;width:360px}
.blk>*{opacity:0;transform:translateY(14px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.go .blk>*{opacity:1;transform:none}
.go .blk>:nth-child(1){transition-delay:.55s}
.go .blk>:nth-child(2){transition-delay:.7s}
.go .blk>:nth-child(3){transition-delay:.85s}
.eyebrow{display:flex;align-items:center;gap:10px;font:500 11px 'Poppins',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.eyebrow span{text-wrap:balance} /* a long line breaks in the middle, never leaving one word alone */
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--logo);box-shadow:0 0 0 0 rgba(80,0,219,.45);animation:pulse 2.6s ease-out infinite}
.dk .eyebrow i{background:#9B7BFF;box-shadow:0 0 0 0 rgba(155,123,255,.5)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(80,0,219,.4)}80%,100%{box-shadow:0 0 0 12px rgba(80,0,219,0)}}
.sub{font-size:15px;line-height:1.65;letter-spacing:.05em;color:var(--muted)}
.cta{display:flex;gap:10px}
.pill{display:inline-flex;align-items:center;height:46px;padding:0 24px;border-radius:999px;font:500 12px 'Poppins',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.pill:hover{transform:translateY(-2px)}
.pill.solid{background:var(--solid-bg);color:var(--solid-fg);border:1.5px solid transparent;box-shadow:0 12px 30px rgba(67,66,149,.28)}
.dk .pill.solid{box-shadow:0 12px 40px rgba(80,0,219,.45)}

/* layouts: Home uses the text layout from concept 1, About the one from concept 2 */
#home .hl{top:clamp(140px,20vh,220px);left:64px;text-align:left;font-size:clamp(34px,4.1vw,62px)}
#home .hl b{font-weight:inherit;color:inherit;-webkit-text-fill-color:inherit} /* no bold purple accent word in the Home headline */
/* Home, layout B: logo centred, headline bottom left, the small block bottom right */
#app[data-lay="b"] #home .hl{top:auto;bottom:72px;left:64px}
#app[data-lay="b"] #home .blk{left:auto;right:64px;bottom:72px;align-items:flex-end;text-align:right}
#app[data-lay="b"] #home .blk .eyebrow,#app[data-lay="b"] #home .blk .cta{justify-content:flex-end}
#pcv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#hlogo{position:absolute;left:0;top:0;z-index:1;pointer-events:none;opacity:0;fill:#434295;shape-rendering:geometricPrecision;overflow:visible}
#home{touch-action:none;touch-action:pinch-zoom} /* a swipe on Home moves the logo dots instead of panning the page (two-finger pinch-zoom still works where the phone supports it) */
#home .blk{left:64px;bottom:72px}
.hero .hl{left:64px;bottom:84px;font-size:clamp(36px,4.6vw,72px)}
.hero .blk{right:64px;bottom:84px}
#home .sub b{font-weight:500;color:var(--purple)} /* the name in the line under the headline */
/* Home headline: a slow band of light travels through the letters */
#home .hl .ln>span{background:linear-gradient(100deg,#282828 0%,#282828 36%,#8281B8 50%,#282828 64%,#282828 100%);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:band 12s ease-in-out infinite alternate}
@keyframes band{0%{background-position:100% 0}100%{background-position:0 0}}

/* About */
.scroller{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(67,66,149,.35) transparent}
.hero{position:relative;height:100vh;min-height:620px}
.cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;
  font:500 10px 'Poppins',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7);opacity:0;transition:opacity .8s ease;pointer-events:none}
.cue i{display:block;width:1px;height:30px;background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0));transform-origin:top;animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.go .cue{opacity:1;transition-delay:1.4s}
#app.scrolled .cue{opacity:0;transition-delay:0s}

.abody{position:relative;z-index:2;margin-top:-34px;border-radius:34px 34px 0 0;background:var(--cream);color:var(--offblack);
  box-shadow:0 -24px 60px rgba(22,22,50,.35);--ink:#282828;--muted:#5E5D7A;--logo:#434295;--solid-bg:#434295;--solid-fg:#fff}
.wrap{max-width:1180px;margin:0 auto;padding-left:64px;padding-right:64px}
.sec{padding-top:104px}
.lbl{font:500 11px 'Poppins',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.lead{font-family:'Nunito',sans-serif;font-weight:300;font-size:clamp(32px,3.9vw,56px);line-height:1.14;letter-spacing:-.025em;max-width:15em;margin:24px 0 56px}
.lead b{font-weight:800;color:var(--purple)}
.cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;border-top:1px solid rgba(67,66,149,.16);padding-top:32px}
.txt p{font-size:18px;line-height:1.7;color:#3b3a55;max-width:34em}
.txt p+p{margin-top:18px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:28px}
.card{background:#fff;border:1px solid rgba(67,66,149,.12);border-radius:24px;padding:30px 28px 34px;box-shadow:0 18px 50px rgba(34,33,75,.07)}
.card .num{display:inline-flex;align-items:center;justify-content:center;height:30px;min-width:46px;padding:0 12px;border-radius:999px;background:rgba(67,66,149,.10);color:var(--purple);font:600 12px 'Poppins',sans-serif;letter-spacing:.1em}
.card h3{font-family:'Nunito',sans-serif;font-weight:700;font-size:24px;letter-spacing:-.015em;margin:44px 0 12px;color:var(--offblack)}
.card p{font-size:15px;line-height:1.65;color:var(--muted)}
.make{display:flex;align-items:center;gap:28px;margin-top:40px;padding-top:28px;border-top:1px solid rgba(67,66,149,.16)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.chips li{padding:9px 16px;border:1px solid rgba(67,66,149,.22);border-radius:999px;font:500 11px 'Poppins',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--purple)}
.panel{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:40px;padding:60px 64px;border-radius:32px;background:#161632;color:#fff;--ink:#fff;--muted:rgba(255,255,255,.7);--solid-bg:#fff;--solid-fg:#161632}
.panel .deco{position:absolute;right:-70px;bottom:-96px;width:540px;fill:rgba(255,255,255,.05);pointer-events:none}
.panel h2{font-family:'Nunito',sans-serif;font-weight:300;font-size:clamp(30px,3.4vw,48px);line-height:1.08;letter-spacing:-.025em}
.panel h2 b{font-weight:800;color:#CBBFFF}
.panel p{margin-top:14px;font-size:15px;letter-spacing:.04em;color:var(--muted)}
.panel>*{position:relative}
.foot{display:flex;align-items:center;justify-content:space-between;margin-top:96px;padding-top:30px;padding-bottom:40px;border-top:1px solid rgba(67,66,149,.16);font-size:13px;color:var(--muted)}
.foot .fl{display:flex;align-items:center;gap:12px}
.foot svg{width:26px;height:20px;fill:var(--purple)}
.foot nav{display:flex;gap:22px}
.foot a{color:var(--muted);text-decoration:none;letter-spacing:.04em;transition:color .25s}
.foot a:hover{color:var(--purple)}
/* sections ease in as you scroll */
.fx{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.fx.in{opacity:1;transform:none}
.cards .card:nth-child(2){transition-delay:.12s}
.cards .card:nth-child(3){transition-delay:.24s}
.cards .card:nth-child(4){transition-delay:.36s}


/* About, version B: a journey. A thread runs down the page and lights up as you reach each chapter */
#app[data-ab="a"] .vb{display:none}
#app[data-ab="b"] .va{display:none}
.vb{position:relative}
.chs{position:relative}
.thread{position:absolute;top:0;left:calc(max(28px,50% - 562px) - 1px);width:2px;height:0;background:rgba(130,129,184,.30);border-radius:2px;z-index:1;--p:0}
.thread i{position:absolute;inset:0;transform-origin:top;transform:scaleY(var(--p));background:linear-gradient(#B79CFF,#6A38FF)}
.thread b{position:absolute;left:50%;top:calc(var(--p) * 100%);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#7A4DFF;box-shadow:0 0 0 5px rgba(122,77,255,.20),0 0 22px 4px rgba(122,77,255,.5);opacity:calc(var(--p) * 40)}
.ch{position:relative;--pt:112px;padding-top:var(--pt)}
.chl{display:flex;align-items:center;gap:14px;font:500 11px 'Poppins',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.chl b{display:inline-flex;align-items:center;justify-content:center;height:30px;min-width:46px;padding:0 12px;border-radius:999px;background:rgba(67,66,149,.10);color:var(--purple);font:600 12px 'Poppins',sans-serif;letter-spacing:.1em}
/* every chapter takes up a full screen, with its content centred in it */
.ch{min-height:100vh;display:flex;flex-direction:column}
.ch>.mid{margin:auto 0;padding:40px 0 64px}
.ch-def.wrap,.ch-make.wrap{max-width:1560px;padding-left:clamp(40px,5vw,88px);padding-right:clamp(40px,5vw,88px)}
/* 01 Who we are: the statement runs over four screens, at the same size as Our goal */
.ch.cont{--pt:142px}
.wtx{position:relative;z-index:1;font-family:'Nunito',sans-serif;font-weight:300;font-size:clamp(44px,6.3vw,100px);line-height:1.04;letter-spacing:-.035em;white-space:nowrap;color:var(--offblack)}
.wtx b{font-weight:800;color:var(--purple)}
/* a point on the thread beside the first line of each screen; it lights as the thread reaches it */
.wtx::before{content:'';position:absolute;z-index:2;left:-42px;top:.52em;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--cream);border:2px solid #C0C0DC;transition:background .5s,border-color .5s,box-shadow .7s}
.wchunk.on .wtx::before{background:#5000DB;border-color:#5000DB;box-shadow:0 0 0 7px rgba(80,0,219,.13)}
.wtx .w{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * .09s + .1s)}
.wchunk.seen .wtx .w{opacity:1;transform:none}
/* the same slow band of light as the Home headline, drifting through the words once they have arrived */
.wtx .w{padding:.1em .06em .2em;margin:-.1em -.06em -.2em;background-image:linear-gradient(100deg,var(--offblack) 0%,var(--offblack) 36%,#8281B8 50%,var(--offblack) 64%,var(--offblack) 100%);background-repeat:no-repeat;background-size:calc(var(--tw,1000px) * 2.6) 100%;background-position:calc(var(--ox,0px) * -1) 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wtx b .w{background-image:linear-gradient(100deg,var(--purple) 0%,var(--purple) 36%,#8281B8 50%,var(--purple) 64%,var(--purple) 100%)}
.wchunk.seen .wtx .w{animation:wsh 12s ease-in-out -5s infinite alternate}
@keyframes wsh{from{background-position:calc(var(--ox,0px) * -1 - var(--tw,1000px) * 1.6) 0}to{background-position:calc(var(--ox,0px) * -1) 0}}
.motif{position:absolute;z-index:0;right:-330px;top:90px;width:640px;fill:none;stroke:rgba(67,66,149,.20);stroke-width:7;stroke-linejoin:round;pointer-events:none;will-change:transform}
.motif path{stroke-dasharray:1;stroke-dashoffset:1}
/* 02 Our goal: a full-screen photo that changes by itself */
.ch-goal{--pt:0px;padding-top:0;position:relative;z-index:3;overflow:hidden;background:#161632;color:#fff}
.gstage{position:absolute;inset:0;background:#161632}
.plates{position:absolute;inset:0}
.plate{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.7s ease}
.plate.on{opacity:1}
.plate.on,.plate.prev{animation:kb 9s linear forwards}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}}
.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,22,50,.90) 0%,rgba(22,22,50,.70) 42%,rgba(22,22,50,.26) 100%),radial-gradient(120% 95% at 55% 50%,rgba(22,22,50,0) 45%,rgba(22,22,50,.55) 100%)}
.grain{position:absolute;inset:0;opacity:.10;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");pointer-events:none}
.ch-goal .chl{position:absolute;z-index:3;top:112px;left:calc(max(0px,(100% - 1180px)/2) + 64px);color:rgba(255,255,255,.8)}
.ch-goal .chl b{background:rgba(255,255,255,.14);color:#fff}
.gtx{position:relative;z-index:3;margin:auto 0;padding:150px 0 90px calc(max(0px,(100% - 1180px)/2) + 64px);font-family:'Nunito',sans-serif;font-weight:300;font-size:clamp(44px,6.3vw,100px);line-height:1.04;letter-spacing:-.035em;max-width:calc(9.9em + max(0px,(100vw - 1180px)/2) + 64px);color:#fff}
.gtx b{font-weight:800;color:#CBBFFF}
.gtx .w{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * .09s + .15s)}
.ch-goal.seen .gtx .w{opacity:1;transform:none}
.ticks{position:absolute;z-index:3;right:calc(max(0px,(100% - 1180px)/2) + 64px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.ticks i{position:relative;overflow:hidden;display:block;height:2px;width:18px;background:rgba(255,255,255,.35);transition:width .5s cubic-bezier(.16,1,.3,1)}
.ticks i::after{content:'';position:absolute;inset:0;background:#CBBFFF;transform:scaleX(0);transform-origin:left}
.ticks i.on{width:46px}
.ticks i.on::after{animation:tk 5.6s linear forwards}
@keyframes tk{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.plate.on,.plate.prev{animation:none}.ticks i.on::after{animation:none;transform:scaleX(1)}}
/* 03 What defines us: a lead-in line, then a carousel with a little icon made of dots on each card */
.deflead{max-width:30em;margin:0 auto clamp(24px,4.2vh,46px);text-align:center;font:300 clamp(22px,2.1vw,30px)/1.32 'Nunito',sans-serif;letter-spacing:-.015em;color:var(--offblack)}
.deflead b{font-weight:700;color:var(--purple)}
.ch-def>.mid{padding:16px 0 40px}
.car{position:relative;outline:none}
.car-stage{position:relative;height:clamp(340px,44vh,430px);--dx:clamp(260px,31vw,540px)}
.car .card{position:absolute;left:50%;top:0;width:min(480px,40vw);height:100%;margin-left:calc(min(480px,40vw) / -2);padding:32px 36px 38px;display:flex;flex-direction:column;cursor:pointer;
  transform:translateX(calc(var(--o,0) * var(--dx))) scale(var(--s,1));opacity:var(--op,1);z-index:var(--z,1);
  transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .7s ease,box-shadow .7s ease}
.car .card[data-pos="0"]{--o:0;--s:1;--op:1;--z:3;cursor:default;box-shadow:0 30px 80px rgba(34,33,75,.15)}
.car .card[data-pos="-1"]{--o:-1;--s:.86;--op:.5;--z:1}
.car .card[data-pos="1"]{--o:1;--s:.86;--op:.5;--z:1}
.car .card[data-pos="2"]{--o:1;--s:.72;--op:0;--z:0;pointer-events:none}
.car .card:not([data-pos="0"]):hover{opacity:.78}
.car .card .top{display:flex;align-items:flex-start;justify-content:space-between}
.car .card canvas{display:block;margin:-8px 0 0 -10px}
.car .card h3{margin:auto 0 12px;font-size:clamp(26px,2.4vw,34px)}
.car .card p{font-size:16px}
.car-ctl{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:30px}
.cb{all:unset;cursor:pointer;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(67,66,149,.25);color:var(--purple);transition:background .3s,border-color .3s,color .3s}
.cb:hover{background:var(--purple);border-color:var(--purple);color:#fff}
.cb:focus-visible,.cdots button:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.cb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cdots{display:flex;gap:8px}
.cdots button{all:unset;cursor:pointer;position:relative;width:38px;height:22px}
.cdots button::before,.cdots button::after{content:'';position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px}
.cdots button::before{background:rgba(67,66,149,.2)}
.cdots button::after{background:var(--violet);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.cdots button[aria-current="true"]::after{transform:scaleX(1)}
.ccount{min-width:64px;font:500 11px 'Poppins',sans-serif;letter-spacing:.2em;color:var(--muted)}
/* 04 What we make: a reel of the five service areas, with the dots forming each icon beside it */
.mk3{display:grid}
.pill svg{width:16px;height:16px;margin-left:10px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mk canvas{display:block}
.mk3{--rw:clamp(360px,38vw,600px);grid-template-columns:1fr var(--rw) 1fr;column-gap:clamp(36px,4.5vw,72px);align-items:center;transition:opacity .7s}
.m3reel{--rh:clamp(60px,6.4vw,92px);position:relative;height:calc(var(--rh) * 5);overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent);transition:opacity .8s ease}
.m3reel ul{list-style:none}
.m3reel li{--op:0;position:absolute;left:0;right:0;top:50%;height:var(--rh);margin-top:calc(var(--rh) / -2);display:flex;align-items:center;justify-content:center;white-space:nowrap;cursor:pointer;font-family:'Nunito',sans-serif;font-weight:300;font-size:calc(var(--rh) * .72);line-height:1;letter-spacing:-.035em;color:var(--offblack);
  transform:translateY(calc(var(--off,0) * var(--rh)));opacity:var(--op);filter:blur(var(--bl,0px));transition:transform var(--st,1s) cubic-bezier(.16,1,.3,1),opacity var(--st,.8s) ease,filter var(--st,.4s) linear}
.m3reel li[data-d="0"]{--op:1}.m3reel li[data-d="1"]{--op:.2}.m3reel li[data-d="2"]{--op:.07}
.mk3.idle .m3reel,.mk3.idle .m3go{opacity:0}
.mk3.spin .m3go{opacity:0;pointer-events:none}
.mk3.spin .m3reel li{transition-timing-function:linear}
.m3ico{justify-self:end}
.m3go{justify-self:start;width:auto;min-width:clamp(220px,19vw,280px);padding-left:26px;padding-right:26px;white-space:nowrap;justify-content:center;transition:opacity .8s ease,transform .3s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){.wtx .w{opacity:1;transform:none;transition:none}.wchunk.seen .wtx .w{animation:none}}
/* 05 Let's talk: the top-of-page background, standing still */
.ch-talk{--pt:0px;padding-top:0}
.talk{position:relative;overflow:hidden;flex:1;min-height:max(100vh,620px);background:#161632;color:#fff;--ink:#fff;--muted:rgba(255,255,255,.74);--solid-bg:#fff;--solid-fg:#161632}
#tcv,#tcv2,#tcv3,#tcv4{position:absolute;inset:0;width:100%;height:100%;display:block}
.tcopy{position:absolute;z-index:2;left:64px;right:64px;bottom:118px;display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
.tbig{font-family:'Nunito',sans-serif;font-weight:300;font-size:clamp(38px,5.2vw,84px);line-height:1.03;letter-spacing:-.03em;max-width:8em}
.tbig b{font-weight:800;color:#CBBFFF}
.tblk{display:flex;flex-direction:column;align-items:flex-start;gap:22px;width:340px;padding-bottom:8px}
.tblk p{font-size:15px;line-height:1.65;letter-spacing:.05em;color:var(--muted)}
.tfoot{position:absolute;z-index:2;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:24px 64px 34px;font-size:13px;color:rgba(255,255,255,.6)}
.tfoot::before{content:'';position:absolute;top:0;left:64px;right:64px;height:1px;background:rgba(255,255,255,.16)}
.tfoot .fl{display:flex;align-items:center;gap:12px}
.tfoot svg{width:26px;height:20px;fill:#fff}
.tfoot nav{display:flex;gap:22px}
.tfoot .fl{justify-self:start}.tfoot .legal{justify-self:end}
.fl span small{display:block;margin-top:5px;font:300 11px/1.3 'Poppins',sans-serif;letter-spacing:.03em;text-transform:none;opacity:.8}
.tfoot a{color:rgba(255,255,255,.6);text-decoration:none;letter-spacing:.04em;transition:color .25s}
.tfoot a:hover{color:#fff}
.fx.nofade{opacity:1;transform:none}
/* Start the conversation: a purple logo sits in the button and its two shapes hop one after the other while you hover */
.pill.cta-logo svg.lg{width:24px;height:19px;margin:0 13px 0 -3px;flex:none;overflow:visible;fill:var(--violet);stroke:none}
.pill.cta-logo svg.lg path{transform-box:fill-box;transform-origin:50% 100%}
.pill.cta-logo.hv svg.lg path:first-child{animation:hop 1.3s ease-in-out infinite}
.pill.cta-logo.hv svg.lg path:last-child{animation:hop 1.3s ease-in-out .17s infinite}
@keyframes hop{0%,62%,100%{transform:none}28%{transform:translateY(-17%)}46%{transform:translateY(0)}54%{transform:translateY(-4%)}}
@media (prefers-reduced-motion:reduce){.pill.cta-logo.hv svg.lg path{animation:none}}

/* Contact */
#contactScroll .cwrap{position:relative;z-index:4;min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);column-gap:clamp(48px,6vw,96px);padding:clamp(104px,15vh,140px) 64px 44px;align-items:stretch}
.cl{display:flex;flex-direction:column;justify-content:space-between;gap:44px}
.cl .top{display:flex;flex-direction:column;gap:22px}
.cl .hl{position:static;font-size:clamp(34px,4.1vw,62px);margin-top:4px}
.cl .hl b{color:var(--purple)}
.cl .sub{max-width:390px}
.cl>div.cr{max-width:470px}
.cdet{list-style:none;border-top:1px solid rgba(67,66,149,.16)}
.cdet li{display:grid;grid-template-columns:110px 1fr;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(67,66,149,.16)}
.cdet .lbl{font-size:10px}
.cdet a,.cdet span.v{font-family:'Nunito',sans-serif;font-weight:600;font-size:19px;letter-spacing:-.005em;color:var(--offblack);text-decoration:none;background:linear-gradient(var(--violet),var(--violet)) 0 100%/0 1.5px no-repeat;transition:background-size .45s cubic-bezier(.16,1,.3,1),color .3s;padding-bottom:2px;justify-self:start}
.cdet a:hover{background-size:100% 1.5px;color:var(--purple)}
nav.soc{display:flex;gap:22px;margin-top:20px;font-size:13px}
nav.soc a{color:var(--muted);text-decoration:none;letter-spacing:.04em;transition:color .25s}
nav.soc a:hover{color:var(--purple)}
.cr{opacity:0;transform:translateY(16px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.go .cr{opacity:1;transform:none;transition-delay:var(--d,.4s)}
.cform.glass{position:relative;align-self:center;border-radius:30px;padding:36px 40px 32px;
  background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.5) 38%,rgba(255,255,255,0) 47%),linear-gradient(135deg,rgba(255,255,255,.80) 0%,rgba(236,234,250,.62) 100%),rgba(255,255,255,.4)}
.cform h2{font-family:'Nunito',sans-serif;font-weight:800;font-size:26px;letter-spacing:-.018em;color:var(--offblack)}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} /* a field only a robot fills in */
.cform .hint{margin-top:6px;font-size:13px;color:var(--muted);letter-spacing:.02em}
.cform form{display:flex;flex-direction:column;gap:20px;margin-top:22px;transition:opacity .5s ease}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fld{position:relative;display:flex;flex-direction:column;gap:2px}
.fld label,.fl{font:500 10px 'Poppins',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.fld input,.fld textarea{all:unset;box-sizing:border-box;width:100%;padding:8px 0 10px;font:300 16px/1.5 'Poppins',sans-serif;color:var(--offblack);border-bottom:1px solid rgba(67,66,149,.24);caret-color:var(--violet)}
.fld textarea{display:block;height:84px;resize:none;white-space:pre-wrap;overflow:auto}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(94,93,122,.5)}
.fld::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#5000DB,#434295);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.fld:focus-within::after{transform:scaleX(1)}
.fld:focus-within label{color:var(--purple)}
.fld.err label{color:#C23B5A}
.fld.err input,.fld.err textarea{border-bottom-color:#C23B5A}
.pill:focus-visible,.again:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.fsend{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:4px}
.fsend button.pill{cursor:pointer;font-family:'Poppins',sans-serif}
.fsend small{font-size:12px;color:var(--muted);letter-spacing:.02em}
.fsend small a{color:var(--purple);text-decoration:none}
.done{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:40px;opacity:0;visibility:hidden;transition:opacity .7s ease .15s,visibility 0s linear .85s}
.done svg{width:74px;height:57px;fill:var(--purple);margin-bottom:10px;transform:scale(.8);transition:transform 1.1s cubic-bezier(.16,1,.3,1) .2s}
.done h2{font-size:32px}
.done p{font-size:15px;color:var(--muted);letter-spacing:.03em}
.again{all:unset;cursor:pointer;margin-top:12px;font:500 11px 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);border-bottom:1px solid rgba(67,66,149,.4);padding-bottom:3px}
.cform.sent form{opacity:0;pointer-events:none}
.cform.sent .done{opacity:1;visibility:visible;transition:opacity .7s ease .25s,visibility 0s}
.cform.sent .done svg{transform:none}
@media (max-height:780px){
  #contactScroll .cwrap{padding-top:96px;padding-bottom:36px}
  .cform.glass{padding:28px 36px 26px}
  .cform form{gap:15px;margin-top:16px}
  .fld textarea{height:68px}
  .cdet li{padding:12px 0}
}

/* Services: five areas, each with its own work (the styles live in src/services.css) */
#app[data-page="services"] #home,#app[data-page="services"] #aboutScroll,#app[data-page="services"] #contactScroll{display:none}
#app:not([data-page="services"]) #servicesScroll{display:none}
#app{--g:clamp(14px,1.6vw,26px);--pill:rgba(67,66,149,.08);--pillink:#434295;--ind1:#5000DB;--ind2:#434295;--dim:.38}
/* the page is see-through: the colour and the particles you see are the opening's own, so nothing lands on top of them */
#servicesScroll{position:absolute;inset:0;z-index:3;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(67,66,149,.35) transparent}
#app[data-page="services"][data-bg="bold"]{--ink:#fff;--muted:rgba(255,255,255,.84);--stc:#fff;--stb:#B7A6FF;--line:rgba(255,255,255,.16);--pill:rgba(255,255,255,.12);--pillink:#fff;--ind1:#fff;--ind2:#C9BEFF}
#app[data-page="services"][data-bg="bold"] #servicesScroll{scrollbar-color:rgba(255,255,255,.32) transparent;--sbgc:var(--tbold)}
.swrap{max-width:1280px;margin:0 auto;padding-left:64px;padding-right:64px}
.swrap.wide{max-width:1440px}

/* reveal */
.cr{opacity:0;transform:translateY(16px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.go .cr{opacity:1;transform:none;transition-delay:var(--d,.4s)}
.it{opacity:0}
.go .it{animation:rise .85s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--d0,0s) + var(--i,0) * 70ms)}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* the area tabs (same bar as the current Services page) */
.stabwrap{position:sticky;top:0;z-index:5;padding-top:90px}
.stabwrap{transition:background .35s ease}
.stabwrap.stuck{background:color-mix(in srgb,var(--sbgc,#FBFAF7) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.stabwrap::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);opacity:0}
.go .stabwrap::after{opacity:1;transition:opacity .8s ease .9s}
.stabs{position:relative;display:flex;justify-content:center;overflow-x:auto;scrollbar-width:none}
.stabs::-webkit-scrollbar{display:none}
.stabs button{all:unset;cursor:pointer;flex:0 0 auto;padding:14px 22px 17px;font:500 11px 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color .25s}
.stabs button:hover,.stabs button[aria-selected="true"]{color:var(--pillink)}
.stabs button:focus-visible{outline:2px solid var(--violet);outline-offset:-3px;border-radius:8px}
.stabs .ind{position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:2px;background:linear-gradient(90deg,var(--ind1),var(--ind2));transition:transform .55s cubic-bezier(.16,1,.3,1),width .55s cubic-bezier(.16,1,.3,1)}

/* the top of the page */
.intro{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;min-height:calc(100vh - 138px);justify-content:center;padding:clamp(20px,3.4vh,40px) 0 clamp(44px,8vh,90px)}
.sico,.sico-slot{display:block;flex:none;width:var(--ico,150px)!important;height:var(--ico,150px)!important}
.sico{opacity:0;transition:opacity .8s ease}
.sico.show{opacity:1}
.sti{display:flex;flex-direction:column;align-items:center}
.stitle{position:relative;margin-top:10px;font-family:'Nunito',sans-serif;font-weight:300;line-height:1.02;letter-spacing:-.035em;white-space:nowrap;font-size:clamp(54px,6.2vw,96px);color:var(--ink)}
.stitle .w{display:inline-block;padding:.1em .06em .2em;margin:-.1em -.06em -.2em;background-image:linear-gradient(100deg,var(--stc,#282828) 0%,var(--stc,#282828) 36%,var(--stb,#8281B8) 50%,var(--stc,#282828) 64%,var(--stc,#282828) 100%);background-repeat:no-repeat;background-size:calc(var(--tw,1000px) * 2.6) 100%;background-position:calc(var(--ox,0px) * -1) 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:wsh 12s ease-in-out -5s infinite alternate}
@keyframes wsh{from{background-position:calc(var(--ox,0px) * -1 - var(--tw,1000px) * 1.6) 0}to{background-position:calc(var(--ox,0px) * -1) 0}}
.sline{margin-top:14px;font-size:clamp(16px,1.35vw,20px);letter-spacing:.02em;color:var(--muted)}
.sdesc{margin-top:16px;max-width:38em;font-size:clamp(15px,1.12vw,17px);line-height:1.75;letter-spacing:.02em;color:var(--muted)}
.sviews{margin-top:clamp(22px,3.6vh,34px)}
.seg{display:inline-flex;flex-wrap:wrap;justify-content:center;padding:4px;border-radius:999px;background:var(--pill)}
.seg button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;font:500 11px 'Poppins',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--pillink);transition:background .3s,color .3s}
.seg button:hover{background:var(--pill)}
.seg button[aria-pressed="true"]{background:var(--purple);color:#fff}
.seg button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
#app[data-page="services"][data-bg="bold"] .seg button[aria-pressed="true"]{background:#fff;color:#2D2C63}
.icap{margin-top:18px;max-width:42em;min-height:3.2em;font-size:14px;line-height:1.6;letter-spacing:.02em;color:var(--muted)}
.icap b{font-weight:500;color:var(--ink)}
.icap.swap{animation:swap .6s cubic-bezier(.16,1,.3,1) both}
@keyframes swap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* the work sits below the full-screen top, so the top looks exactly the same with it on or off */
#app[data-wk="off"] .work{display:none}

/* the scroll cue: same little growing line as the About page, with a word that says what is below */
.scue{display:none;position:absolute;left:0;right:0;bottom:20px;justify-content:center}
#app[data-wk="on"] .scue{display:flex}
@media (max-height:800px){#app[data-wk="on"] .intro{padding-bottom:96px}}
.scue-in{display:flex;flex-direction:column;align-items:center;gap:8px;font:500 10px 'Poppins',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);pointer-events:none;transition:opacity .8s ease}
.scue-in span{padding-left:.24em}
.scue-in i{display:block;width:1px;height:30px;background:linear-gradient(currentColor,transparent);transform-origin:top;animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
#app.scrolled .scue-in{opacity:0;transition-duration:.3s}

/* the work: big pictures and video, with numbers and quotes in the gaps for the work that is not so visual */
#app{--t0:#434295;--f0:#fff;--t1:#161632;--f1:#fff;--t2:#E4DEFF;--f2:#2D2C63;--qbg:#fff;--qline:rgba(67,66,149,.14);--qink:#282828;--qsub:#5E5D7A}
#app[data-page="services"][data-bg="bold"]{--t0:#E4DEFF;--f0:#2D2C63;--t1:#5000DB;--f1:#fff;--t2:#161632;--f2:#fff;--qbg:rgba(255,255,255,.08);--qline:rgba(255,255,255,.2);--qink:#fff;--qsub:rgba(255,255,255,.7)}
.work{width:min(1600px,calc(100% - 2*clamp(36px,5vw,96px)));margin:0 auto clamp(56px,9vh,110px);padding-top:clamp(20px,3vh,32px);container-type:inline-size}
.wfil{display:flex;align-items:center;padding:0 2px 16px}
.wfil button{all:unset;cursor:pointer;position:relative;padding:10px 24px 12px 0;font:500 11px 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color .25s}
.wfil button:hover,.wfil button[aria-selected="true"]{color:var(--pillink)}
.wfil button::after{content:'';position:absolute;left:0;right:24px;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.wfil button[aria-selected="true"]::after{transform:scaleX(1)}
.wfil button:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:6px}
.wgrid{--u:max(110px,calc((100cqw - 11*var(--g))/12*1.92));display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:var(--u);grid-auto-flow:dense;gap:var(--g)}
.wt{position:relative;overflow:hidden;border-radius:24px;clip-path:inset(0 round 24px);grid-column:span var(--c);grid-row:span var(--r);background:#161632;opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--k,0) * 70ms)}
.wt.vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.wt{opacity:1;transform:none;transition:none}}
.wt img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.16,1,.3,1),filter .6s ease}
.wt.k-p:hover img{transform:scale(1.05)}
.wt .wpv{position:absolute;inset:0;z-index:1;overflow:hidden;container-type:size;opacity:0;transition:opacity .7s ease,transform 1.6s cubic-bezier(.16,1,.3,1);pointer-events:none}
.wt .wpv.on{opacity:1}
.wt.k-p:hover .wpv{transform:scale(1.05)}
.wt .wpv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wt .wpv iframe{position:absolute;left:50%;top:50%;width:calc(max(100cqw,calc(100cqh*1.7778))*1.07);height:calc(max(100cqh,calc(100cqw*.5625))*1.07);transform:translate(-50%,-50%);border:0;pointer-events:none}
.wgrid:has(.k-p:hover) .k-p:not(:hover) img{filter:brightness(.6) saturate(.8)}
.wt.k-p::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(14,14,36,.14) 0%,rgba(14,14,36,0) 30%,rgba(14,14,36,.82) 100%)}
.wt .cap{position:absolute;z-index:4;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:5px;padding:26px 76px 22px 28px;pointer-events:none;color:#fff}
.wt .cap b{font:800 clamp(20px,1.9vw,30px)/1.08 'Nunito',sans-serif;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 22px rgba(10,10,30,.4)}
.wt .cap span{font-size:12.5px;letter-spacing:.03em;color:rgba(255,255,255,.82)}
.wt.xl .cap{padding:34px 90px 28px 40px}
.wt.xl .cap b{font-size:clamp(28px,3.3vw,52px);line-height:1}
.wt.xl .cap span{font-size:14px}
.wt.xl .clg{left:36px;top:32px}
.tc{position:absolute;z-index:3;right:20px;top:20px;padding:6px 10px;border-radius:6px;background:rgba(22,22,50,.72);color:#fff;font:500 11px/1 'Poppins',sans-serif;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.plat{position:absolute;z-index:3;right:16px;top:16px;padding:6px 12px;border-radius:999px;background:rgba(22,22,50,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font:500 10px 'Poppins',sans-serif;letter-spacing:.1em;text-transform:uppercase}
.wb{position:absolute;z-index:3;left:0;right:0;top:0;height:34px;display:flex;align-items:center;gap:6px;padding:0 16px;background:rgba(241,240,247,.94)}
.wb i{width:8px;height:8px;border-radius:50%;background:#CFCDE0}
.wb em{margin:0 auto;padding:3px 40px;border-radius:99px;background:#fff;font:400 10px 'Poppins',sans-serif;font-style:normal;letter-spacing:.04em;color:#7B7A99}
.wt.web .clg{top:54px}.wt.web.xl .clg{top:60px}
/* numbers */
.k-s.tn0{background:var(--t0);color:var(--f0)}.k-s.tn1{background:var(--t1);color:var(--f1)}.k-s.tn2{background:var(--t2);color:var(--f2)}
.k-s .clg{color:inherit;filter:none}
.k-s .st{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:26px 28px 24px}
.k-s .st b{font:800 clamp(40px,calc(var(--u)*.4),96px)/.9 'Nunito',sans-serif;letter-spacing:-.04em}
.k-s .st .l{max-width:15em;font-size:14.5px;line-height:1.5;letter-spacing:.02em;opacity:.88}
.k-s .st .m{font-size:12px;letter-spacing:.04em;opacity:.6}
.k-s.r1 .st{gap:4px;padding:16px 24px 16px;justify-content:center}
.k-s.r1 .st b{font-size:clamp(30px,calc(var(--u)*.27),62px)}
.k-s.r1 .st .l{font-size:13px;line-height:1.4}
.k-s.r1 .clg{display:none}
.k-s[data-pj] .st{padding-right:76px}
/* quotes */
.k-q{background:var(--qbg);border:1px solid var(--qline);color:var(--qink);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.k-q .clg{color:var(--qink);filter:none}
.k-q .qi{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:16px;padding:26px 28px 24px}
.k-q p{font:300 clamp(20px,1.9vw,29px)/1.28 'Nunito',sans-serif;letter-spacing:-.015em}
.k-q.c7 p,.k-q.c8 p{font-size:clamp(24px,2.5vw,38px)}
.k-q::before{content:'\201C';position:absolute;right:26px;top:14px;font:800 clamp(110px,10vw,170px)/1 'Nunito',sans-serif;color:var(--qink);opacity:.09;pointer-events:none}
.k-q.r1::before{display:none}
.k-q small{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--qsub)}
.k-q.r1 .qi{gap:8px;padding:18px 24px;justify-content:center}
.k-q.r1 p{font-size:clamp(15px,1.3vw,19px);line-height:1.3}
.k-q.r1 .clg{display:none}
.clg{position:absolute;left:24px;top:22px;z-index:4;color:#fff;pointer-events:none;filter:drop-shadow(0 1px 10px rgba(0,0,0,.4))}
.clg svg{display:block;height:var(--lh,30px);width:auto;overflow:visible}

.lbl{font:500 11px 'Poppins',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.clg.big{left:clamp(24px,3vw,48px);top:clamp(22px,3vw,40px);--lh:clamp(34px,3.4vw,54px)}
/* a picture or video you can open */
.wt[data-pj]{cursor:pointer}
.wt[data-pj]:focus-visible{outline:3px solid var(--violet);outline-offset:-3px}
#app[data-page="services"][data-bg="bold"] .wt[data-pj]:focus-visible{outline-color:#fff}
.pstrips{display:flex;flex-direction:column;gap:var(--g)}
.pstrip{position:relative;border-radius:24px;overflow:hidden;clip-path:inset(0 round 24px);background:var(--pc);opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.pstrip.vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.pstrip{opacity:1;transform:none;transition:none}}
.pbar{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;width:100%;height:clamp(300px,50vh,500px);padding:0 clamp(28px,3.6vw,60px) clamp(30px,4vh,48px);color:#fff;overflow:hidden;background:#161632}
.pbar:focus-visible{outline:3px solid #fff;outline-offset:-5px}
.pph{position:absolute;inset:0;overflow:hidden}
.frames{position:absolute;inset:0;transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.f{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1);transition:opacity .45s ease,transform .9s ease-out}
.f.on{opacity:1}
.pbar:hover .frames{transform:scale(1.04)}
.pbar.mv .f.on{transform:scale(1.12);transition:opacity .45s ease,transform 6s linear}
.pbar::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(12,12,32,.84) 0%,rgba(12,12,32,.42) 52%,rgba(12,12,32,.12) 100%)}
.pnm{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px;min-width:0}
.pnm em{font:500 11px 'Poppins',sans-serif;font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.pnm b{font:800 clamp(46px,7.6vw,128px)/.9 'Nunito',sans-serif;letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.pbar:hover .pnm b{transform:translateX(8px)}
.pmore{position:relative;z-index:2;display:flex;align-items:center;gap:16px;font:500 11px 'Poppins',sans-serif;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.pmore .chip{position:relative;right:auto;bottom:auto}
.pbar:hover .chip,.pbar:focus-visible .chip{background:#fff;border-color:#fff;color:var(--purple);transform:scale(1.1)}
/* the little button on every box: the logo turns into a play mark (video) or an arrow (anything else), and back */
.chip{position:absolute;z-index:5;right:18px;bottom:18px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;transition:background .35s ease,color .35s ease,border-color .35s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.chip svg{display:block;width:24px;height:19px;overflow:visible;fill:currentColor;stroke:currentColor;stroke-width:0;stroke-linejoin:round;stroke-linecap:round}
.wt.xl .chip{right:26px;bottom:24px}
.wt[data-pj]:hover .chip,.wt[data-pj]:focus-visible .chip{background:#fff;border-color:#fff;color:var(--purple);transform:scale(1.1)}
/* websites and apps: the size of the box is the size of the screen (desktop, iPad or iPhone), and the browser bar sits where that device puts it */
.wb.tb{height:30px;justify-content:space-between;gap:10px}
.wb.tb b{font:500 10px 'Poppins',sans-serif;color:#5E5D7A;letter-spacing:.04em}
.wb.tb em{margin:0;padding:3px 34px}
.wb.tb .bt{display:flex;gap:4px}
.wb.tb .bt i{width:14px;height:8px;border-radius:2px;background:#CFCDE0}
.phi{position:absolute;z-index:3;left:50%;top:12px;width:84px;height:24px;margin-left:-42px;border-radius:99px;background:#05050f}
.phb{position:absolute;z-index:3;left:16px;right:16px;bottom:24px;height:44px;border-radius:22px;background:rgba(241,240,247,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center}
.phb em{font:400 11px 'Poppins',sans-serif;font-style:normal;letter-spacing:.04em;color:#5E5D7A}
.phh{position:absolute;z-index:3;left:50%;bottom:9px;width:120px;height:4px;margin-left:-60px;border-radius:2px;background:rgba(255,255,255,.85)}
.wt.ph .clg{top:52px}
.wt.ph .cap{padding:26px 24px 88px 28px}
.wt.ph .chip{top:16px;right:16px;bottom:auto} /* the iPhone-shaped box keeps its bottom free for the phone's own bar: the button sits top right */
/* social boxes can carry a feed overlay: like, comment, share and save down the side, the account and its caption at the bottom. Sizes follow the width of the box it sits on */
.wt.ig{container-type:inline-size;--q:1cqw}
.igo{position:absolute;inset:0;z-index:3;pointer-events:none;color:#fff;transition:opacity .35s ease}
.igr{position:absolute;right:calc(var(--q)*4.2);bottom:var(--igb,calc(70px + calc(var(--q)*3)));display:flex;flex-direction:column;align-items:center;gap:calc(var(--q)*3.6)}
.igi{display:flex;flex-direction:column;align-items:center;gap:calc(var(--q)*1);font-style:normal}
.igi svg{display:block;width:calc(var(--q)*6.8);height:calc(var(--q)*6.8);fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 6px rgba(0,0,0,.5))}
.igi b{font:600 max(8.5px,calc(var(--q)*3))/1 'Poppins',sans-serif;letter-spacing:.01em;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.igu{display:flex;align-items:center;gap:calc(var(--q)*2.2);margin-bottom:0}
.iga{flex:none;display:block;width:calc(var(--q)*7.8);height:calc(var(--q)*7.8);padding:calc(var(--q)*.5);border-radius:50%;background:linear-gradient(45deg,#F9B24A,#EE2A7B 55%,#6228D7)}
.iga i{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#22214B;border:calc(var(--q)*.5) solid #12122a;font:700 max(8px,calc(var(--q)*3.3))/1 'Nunito',sans-serif;font-style:normal;color:#fff}
.igu b,.wt .cap .igu b{font:600 max(9px,calc(var(--q)*3.3))/1 'Poppins',sans-serif;letter-spacing:.01em;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.wt .cap .igu{font-size:calc(var(--q)*2.6);letter-spacing:0;color:#fff}
.igu em{margin-left:calc(var(--q)*.6);padding:calc(var(--q)*1) calc(var(--q)*2.1);border:1px solid rgba(255,255,255,.85);border-radius:calc(var(--q)*1.5);font:500 max(7.5px,calc(var(--q)*2.5))/1 'Poppins',sans-serif;font-style:normal}
.igo.full .igl{position:absolute;left:calc(var(--q)*6);right:calc(var(--q)*20);bottom:calc(var(--q)*6);display:flex;flex-direction:column;gap:calc(var(--q)*2.2)}
.igo.full .igu{margin:0}
.igo.full .igc{font:400 calc(var(--q)*4.1)/1.35 'Nunito',sans-serif;color:rgba(255,255,255,.94);text-shadow:0 1px 10px rgba(0,0,0,.5)}
.igo.full .igr{--igb:calc(var(--q)*6)}
/* social: no title or description on the box (they come with the click), and the button moves to the top right */
.wt.soc .chip{top:16px;right:16px;bottom:auto}
.wt.soc .plat{left:24px;right:auto;top:62px}
.wt.soc .cap{padding:26px 24px 22px}
.wt.soc .igr{--igb:calc(var(--q)*7)}
.k-s.soc[data-pj] .st{padding-right:24px}
.cs-hero:hover .igo,.cs-hero:has(:focus-visible) .igo{opacity:0}
.pv.calm .cs-hero:hover:not(:has(:focus-visible)) .igo{opacity:1}
.pv.hush2 .cs-hero .igo{opacity:0}
/* the box grows into the lightbox: the picture lands exactly where the lightbox's own top picture sits */
.pvghost{position:absolute;left:0;top:0;z-index:4;overflow:hidden;pointer-events:none}
.pvghost>.ghero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gclone{position:absolute;inset:0}
.gclone>*{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;border-radius:0!important;clip-path:none!important;opacity:1!important;transform:none!important;transition:none!important;pointer-events:none!important}
.ggrad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,28,.25) 0%,rgba(10,10,28,0) 28%,rgba(10,10,28,.5) 100%);opacity:0}
.pv.fly .cs-hero .frames,.pv.fly .pp-hero .frames{visibility:hidden}
.pv.fly .cs-hero::after,.pv.fly .pp-hero::after{opacity:0}
.pv.fly .cs-hero,.pv.fly .pp-hero{background:transparent}
.cs-main,.cs-s,.cs-x,.cs-bd,.cs-dk,.cs-mr{transition:opacity .55s ease}
.pv.hush .cs-main,.pv.hush .cs-s,.pv.hush .cs-x,.pv.hush .cs-bd,.pv.hush .cs-dk,.pv.hush .cs-mr{opacity:0}
.cs-hero .clg,.cs-hero .snd,.cs-hero .vmlink{transition:opacity .5s ease,background .25s}
.pv.hush2 .cs-hero .clg,.pv.hush2 .cs-hero .snd,.pv.hush2 .cs-hero .vmlink{opacity:0}
/* the project and the person, opened full screen */
.cs{color:#fff}
/* what you see first fills the lightbox: the picture or video, then the title and description underneath. Everything else is a scroll away */
.cs-top{display:grid;grid-template-rows:minmax(0,1fr) auto;height:var(--th,640px)} /* --th: how tall the lightbox's first screen is, set from the size of the lightbox */
.cs-hero{position:relative;overflow:hidden;width:100%;height:100%;min-height:0;background:#0e0e24}
.cs-hero.vmh{container-type:size}
.cs-top>.cs-main{width:100%;padding:clamp(20px,2.4vw,34px) clamp(24px,4.4vw,72px) clamp(22px,2.6vw,38px);gap:clamp(24px,4vw,72px);align-items:start}
.cs-top .cs-h h3{margin-top:10px;font-size:clamp(30px,3.2vw,52px)}
.cs-top .cs-d{font-size:clamp(16px,1.35vw,20px);line-height:1.55}
.cs-top>.cs-main.pp-main{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px clamp(22px,2.6vw,44px);padding-top:clamp(24px,3vw,44px);padding-bottom:clamp(26px,3.2vw,48px)} /* a person: name along the strip, role beside it */
.pp-main h3{margin:0;min-width:0;font:800 clamp(44px,6.2vw,104px)/.95 'Nunito',sans-serif;letter-spacing:-.03em;text-transform:uppercase}
.pp-main .lbl{margin:0;white-space:nowrap;color:rgba(255,255,255,.82)}
/* a phone or an iPad: the picture stands on the left at its own shape, the words sit on the right */
.cs.side{--q:calc(var(--th,640px)*var(--ar)/100)} /* --q: one hundredth of the picture's width, so the feed overlay and credits scale with it */
.cs.side .cs-top{grid-template-rows:none;grid-template-columns:calc(var(--q)*100) minmax(0,1fr);height:auto;min-height:var(--th,640px);align-items:start}
.cs.side .cs-hero{position:sticky;top:0;height:var(--th,640px)}
.cs-col{min-width:0}
.cs.side .cs-col>.cs-main{min-height:calc(var(--th,640px)*.74);box-sizing:border-box} /* the write-up starts peeking in at the bottom of the first screen, so it is clear there is more below */
.cs.side .cs-col>.cs-main{grid-template-columns:minmax(0,1fr);align-content:center;align-items:start;gap:clamp(18px,2.2vw,34px);padding:clamp(32px,5vw,88px)}
.cs.side .cs-h h3{margin-top:14px;font-size:clamp(38px,4.6vw,76px)}
.cs.side .cs-d{font-size:clamp(18px,1.55vw,23px);line-height:1.6;max-width:30em}
/* the credits: hidden until you point at the picture or video, then they come up over it in white */
.hcr{position:absolute;z-index:5;left:0;right:0;bottom:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:18px 28px;padding:120px clamp(24px,4.4vw,72px) clamp(24px,3vw,40px);background:linear-gradient(0deg,rgba(8,8,24,.92) 0%,rgba(8,8,24,.78) 52%,rgba(8,8,24,0) 100%);color:#fff;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.hcr dt{font:500 10.5px 'Poppins',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:.72}
.hcr dd{margin:6px 0 0;font:400 16px/1.3 'Nunito',sans-serif;color:#fff}
.cs-hero:hover .hcr,.cs-hero:has(:focus-visible) .hcr{opacity:1;transform:none}
.pv.calm .cs-hero:hover:not(:has(:focus-visible)) .hcr{opacity:0;transform:translateY(14px)}
.cs.side .hcr{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--q)*4) calc(var(--q)*5);padding:calc(var(--q)*30) calc(var(--q)*6) calc(var(--q)*6)}
.cs.side .hcr dd{font-size:15.5px}
.cs.side .cs-hero .snd{right:20px}
.cs.side .cs-hero .vmlink{right:76px}
.cs.side .cs-hero.vmfail .vmlink{right:20px}
.cs-hero .frames,.pp-hero .frames{position:absolute;inset:0}
.cs-hero::after,.pp-hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,28,.25) 0%,rgba(10,10,28,0) 28%,rgba(10,10,28,.5) 100%)}
.cs-hero .clg.big{top:clamp(84px,7vw,104px)}
/* a video on the top of a project: it plays by itself, and the button in the corner turns the sound on or off */
.cs-hero .hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.cs-hero .hv.on{opacity:1}
.pv.fly .cs-hero .hv{visibility:hidden}
.cs-hero .vm iframe{position:absolute;left:50%;top:50%;width:calc(max(100cqw,calc(100cqh*1.7778))*1.07);height:calc(max(100cqh,calc(100cqw*.5625))*1.07);transform:translate(-50%,-50%);border:0;pointer-events:none} /* a touch bigger than the box, so nothing at the film's own edges shows */
.cs-hero .vmlink{position:absolute;z-index:6;right:140px;top:22px;padding:13px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(14,14,34,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;text-decoration:none;font:500 11px 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;transition:opacity .5s ease,background .25s}
.cs-hero.vmfail .vmlink{right:84px} /* no speaker button to make room for when the player did not start */
.cs-hero .vmlink:hover{background:rgba(255,255,255,.2)}
.cs-hero.vmfail .snd{display:none}
.cs-hero.vmh:not(.vmon) .snd{opacity:0;pointer-events:none} /* the speaker button only appears once the film is actually playing */
.cs-hero.st.go .f.on{animation:drift 12s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.07)}}
.cs-hero .snd{all:unset;cursor:pointer;position:absolute;z-index:6;top:22px;right:84px;width:46px;height:46px;border-radius:50%;box-sizing:border-box;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);background:rgba(14,14,34,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cs-hero .snd:hover{background:rgba(255,255,255,.2)}
.cs-hero .snd:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cs-hero .snd svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cs-hero .snd .on{display:none}
.cs-hero .snd[aria-pressed="true"] .on{display:block}
.cs-hero .snd[aria-pressed="true"] .off{display:none}
.cs-main{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);padding:clamp(36px,5vw,84px) clamp(24px,4.4vw,72px)}
.cs-h .lbl{color:rgba(255,255,255,.7)}
.cs-h h3{margin-top:14px;font:800 clamp(34px,4.2vw,68px)/1 'Nunito',sans-serif;letter-spacing:-.03em}
.cs-d{font:300 clamp(18px,1.55vw,23px)/1.6 'Nunito',sans-serif;color:rgba(255,255,255,.92)}
.cs-d.two{margin-top:18px;color:rgba(255,255,255,.78)}
.cs-cr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 32px;margin-top:38px;padding-top:30px;border-top:1px solid rgba(255,255,255,.18)}
.cs-cr dt{font:500 10.5px 'Poppins',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cs-cr dd{margin-top:6px;font-size:16px;color:#fff}
.cs-s{padding:0 clamp(24px,4.4vw,72px) clamp(40px,4vw,64px)}
/* the write-up: about, results, quotes */
.cs-x{--px:clamp(24px,4.4vw,72px);padding:clamp(40px,4.6vw,76px) var(--px) 0}
.cs-x .lbl{display:block;margin-bottom:18px;color:rgba(255,255,255,.7)}
.cs-ab{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px)}
.cs-ab .lbl{margin:6px 0 0}
.cs-ex p{font:300 clamp(17px,1.4vw,21px)/1.65 'Nunito',sans-serif;color:rgba(255,255,255,.88)}
.cs-ex p+p{margin-top:18px;color:rgba(255,255,255,.78)}
.cs-fx{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.cs-fx>div{padding:24px 26px 22px;border-radius:24px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.cs-fx b{display:block;font:800 clamp(40px,3.8vw,68px)/.9 'Nunito',sans-serif;letter-spacing:-.04em}
.cs-fx span{display:block;margin-top:14px;font-size:15px;line-height:1.45;color:rgba(255,255,255,.88)}
.cs-fx small{display:block;margin-top:8px;font-size:11.5px;letter-spacing:.06em;color:rgba(255,255,255,.55)}
.cs-ql{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:36px 56px}
.cs-qq{margin:0;padding-left:26px;border-left:2px solid rgba(255,255,255,.3)}
.cs-qq p{font:300 clamp(22px,2.1vw,32px)/1.3 'Nunito',sans-serif;letter-spacing:-.015em}
.cs-qq small{display:block;margin-top:14px;font:500 11px 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.cs-x:last-child,.cs-top+.cs-x:last-child{padding-bottom:clamp(40px,4vw,64px)}
.cs.side .cs-x,.cs.side .cs-s{padding-left:clamp(32px,5vw,88px);padding-right:clamp(32px,5vw,88px)}
.cs.side .cs-ab{grid-template-columns:minmax(0,1fr);gap:8px}
.cs.side .cs-ab .lbl{margin:0 0 6px}
.cs.side .cs-ql{grid-template-columns:minmax(0,1fr)}
.cs.side .cs-bd>.cs-x:last-child{padding-bottom:clamp(48px,5vw,80px)}
.cs-x+.cs-s,.cs-top+.cs-s,.cs-dk>.cs-s:first-child,.cs-mr>.cs-s:first-child{padding-top:clamp(40px,4.6vw,76px)}
/* three colours down a project page: the first screen (the area's purple), the write-up on light with purple text, then the pictures on off-black */
.cs-bd{background:#FBFAF7;color:#2D2C63}
.cs-bd .cs-x .lbl{color:#5A59A0}
.cs-bd .cs-ex p,.cs-bd .cs-ex p+p{color:#2D2C63}
.cs-ex p.pp-lead{font-weight:600;font-size:clamp(20px,1.7vw,26px);line-height:1.45}
.cs-ex p.pp-lead+p{margin-top:18px}
.cs-bd .cs-ex p+p{color:rgba(45,44,99,.84)}
.cs-bd .cs-fx>div{background:#EFEEF8;border-color:transparent}
.cs-bd .cs-fx b{color:#434295}
.cs-bd .cs-fx span{color:#2D2C63}
.cs-bd .cs-fx small{color:#6A69A3}
.cs-bd .cs-qq{border-left-color:#434295}
.cs-bd .cs-qq p{color:#2D2C63}
.cs-bd .cs-qq small{color:#5A59A0}
.cs-dk{background:#0E0E24}
.cs-mr{background:#434295} /* More projects: its own colour, the site purple, so the thumbnails do not run on from the pictures above */
.cs.side .cs-top{background:linear-gradient(90deg,#0E0E24 calc(var(--q)*100),transparent 0)} /* the strip behind the standing picture */
.cs-s .lbl{display:block;margin-bottom:16px;color:rgba(255,255,255,.7)}
.cs-gl{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:4px}
.gi{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:#17173a;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
.gi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.gi img.on{opacity:1} /* a swapped-in picture fades up over the one it replaces */
.cs-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(150px,14vw,230px);gap:4px}
.cs-g img{display:block;width:100%;height:100%;object-fit:cover;border-radius:16px}
.cs-g .a{grid-column:1 / 9;grid-row:1 / 3}
.cs-g .b{grid-column:9 / 13;grid-row:1}
.cs-g .c{grid-column:9 / 13;grid-row:2}
.cs-g.r .a{grid-column:5 / 13}
.cs-g.r .b{grid-column:1 / 5}
.cs-g.r .c{grid-column:1 / 5}
.cs-g.n2 .a{grid-column:1 / 7;grid-row:1 / 3}
.cs-g.n2 .b{grid-column:7 / 13;grid-row:1 / 3}
.cs-g.n2.r .a{grid-column:7 / 13}
.cs-g.n2.r .b{grid-column:1 / 7}
.cs-g.n1 .a{grid-column:1 / 13;grid-row:1 / 3}
.cs-mo{display:flex;flex-direction:column;gap:4px}
.mo-r{display:flex;gap:4px;align-items:flex-start}
.mo-t{position:relative;flex:var(--r) 1 0%;min-width:0;display:block;aspect-ratio:var(--r);overflow:hidden;border-radius:12px;background:#17173a;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
.mo-t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.mo-t img.on{opacity:1}
.cs-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.cs-m{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:16px;background:#0e0e24}
.cs-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.cs-m::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,28,.1),rgba(10,10,28,.75))}
.cs-m:hover img{transform:scale(1.05)}
.cs-m:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.cs-m .clg{left:18px;top:16px;--lh:22px;z-index:3}
.cs-m .cs-mc{position:absolute;z-index:2;left:20px;right:20px;bottom:16px;display:flex;flex-direction:column;gap:3px;color:#fff}
.cs-m .cs-mc b{font:800 19px 'Nunito',sans-serif;letter-spacing:-.01em}
.cs-m .cs-mc small{font-size:12px;color:rgba(255,255,255,.78)}
.pp{color:#fff}
.pp-hero{position:relative;overflow:hidden;width:100%;height:100%;min-height:0;background:#0e0e24}
/* the work: a collection of thumbnails, each opens its project */
.pw-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.pw{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:16px;background:#17173a;color:#fff;min-width:0}
.pwi{position:absolute;inset:0;display:block}
.pwi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.pw::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,28,.1),rgba(10,10,28,.75))}
.pw:hover .pwi img{transform:scale(1.05)}
.pw:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.pw .clg{left:18px;top:16px;--lh:22px;z-index:3}
.pwc{position:absolute;z-index:2;left:20px;right:20px;bottom:16px;display:flex;flex-direction:column;gap:3px}
.pw b{font:800 19px 'Nunito',sans-serif;letter-spacing:-.01em}
.pw small{font-size:12px;color:rgba(255,255,255,.78)}
/* awards (on projects and on people), and a person's website button */
.cs-loc{display:flex;align-items:center;gap:22px;margin-top:34px;padding-top:26px;border-top:1px solid rgba(45,44,99,.14)}
.loc-tile{flex:none;display:block;width:112px;height:112px;border-radius:24px;background:#EFEEF8}
.loc-map{display:block;width:100%;height:100%;overflow:visible}
.loc-map path{stroke-linejoin:round}
.loc-h{fill:rgba(67,66,149,.82);stroke:#434295;stroke-width:.8}
.loc-b{fill:rgba(67,66,149,.16);stroke:#434295;stroke-width:.8}
.loc-pin{fill:#5000DB;stroke:#fff;stroke-width:1.4}
.loc-ring{fill:#5000DB;transform-box:fill-box;transform-origin:center;animation:locp 2.6s ease-out infinite}
@keyframes locp{0%{transform:scale(.8);opacity:.55}100%{transform:scale(4.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.loc-ring{animation:none;opacity:0}}
.loc-t{display:block;min-width:0}
.cs-x.cs-ab .cs-loc .lbl{display:block;margin:0 0 8px}
.loc-t b{display:block;font:600 clamp(17px,1.4vw,21px)/1.35 'Nunito',sans-serif;color:#2D2C63;max-width:20em}
.cs-aw{margin-top:34px;padding-top:26px;border-top:1px solid rgba(45,44,99,.14)}
.cs-x.cs-ab .cs-aw .lbl{margin:0 0 16px}
.aw-row{display:flex;flex-wrap:wrap;gap:20px 36px}
.aw{display:flex;align-items:center;gap:12px}
.aw svg{flex:none;width:46px;height:46px;fill:#434295;stroke:#434295}
.aw b{display:block;font:600 13px/1.25 'Poppins',sans-serif;color:#2D2C63}
.aw small{display:block;margin-top:2px;font:400 12px 'Poppins',sans-serif;color:#6A69A3}
.aw img.aw-lg{flex:none;width:46px;height:46px;object-fit:contain} /* an award's own logo, from the Media Library */
a.aw{color:inherit;text-decoration:none}
a.aw:hover b,a.aw:focus-visible b{text-decoration:underline}
.pw-cr{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,72px)}
.pw-cr li{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:16px 0;border-top:1px solid rgba(255,255,255,.16);color:#fff}
.pw-cr b{font:600 clamp(16px,1.3vw,19px)/1.3 'Nunito',sans-serif;letter-spacing:-.005em}
.pw-cr small{font:300 13px 'Poppins',sans-serif;color:rgba(255,255,255,.62);text-align:right;white-space:nowrap}
.pp-site{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:13px 22px 13px 24px;border-radius:999px;border:1px solid #434295;color:#434295;text-decoration:none;font:500 11px 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;transition:background .25s,color .25s}
.pp-site:hover,.pp-site:focus-visible{background:#434295;color:#fff;outline:none}
.pp-site svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cs-aw+.pp-site{margin-top:30px}
.pv{position:absolute;inset:0;z-index:40;visibility:hidden;pointer-events:none}
.pv.on{visibility:visible;pointer-events:auto}
.pv.closing{pointer-events:none}
.pv.on~.rv{display:none}
.pvscrim{position:absolute;inset:0;background:rgba(10,10,28,.66);opacity:0;transition:opacity .55s ease}
.pv.on:not(.closing) .pvscrim{opacity:1}
.pvcard{position:absolute;top:clamp(16px,3.4vh,34px);bottom:clamp(16px,3.4vh,34px);left:clamp(20px,4vw,84px);right:clamp(20px,4vw,84px);border-radius:28px;overflow:hidden;background:var(--pc,#22214B);box-shadow:0 30px 90px rgba(5,5,20,.5);isolation:isolate}
.pvsc{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.pvin{width:100%}
.cs-main,.cs-s,.cs-x{max-width:1680px;margin-left:auto;margin-right:auto}
.pvx,.pvback{all:unset;cursor:pointer;position:absolute;z-index:6;top:22px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(14,14,34,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:500 11px 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;transition:background .25s}
.pvx{right:26px;width:46px}
.pvback{left:26px;padding:0 20px 0 14px}
.pvback[hidden]{display:none}
.pvx:hover,.pvback:hover{background:rgba(255,255,255,.2)}
.pv.closing .pvx,.pv.closing .pvback{opacity:0;transition:opacity .16s ease} /* the buttons fade out as the box closes; this is a style, not a stored animation, so they can never get stuck hidden */
.pvx:focus-visible,.pvback:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pvx svg,.pvback svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media (prefers-reduced-motion:reduce){.stitle .w{animation:none}.go .it{animation:none;opacity:1}#servicesScroll{transition:none}}
/* the closing section slides over the sticky tab bar instead of sitting under it */
#servicesScroll .ch-talk{position:relative;z-index:6}

/* "Questions we get asked": plain answers on the page itself (the sample answers live in src/services.js) */
.guide{width:min(1600px,calc(100% - 2*clamp(36px,5vw,96px)));margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(48px,7vw,110px);align-items:start;padding-top:clamp(28px,5vh,56px);padding-bottom:clamp(64px,10vh,120px)}
.gd-side{position:sticky;top:150px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.gd-h{font:300 clamp(34px,3.6vw,54px)/1.05 'Nunito',sans-serif;letter-spacing:-.03em;color:var(--ink)}
.gd-h b{font-weight:800;color:var(--stc,var(--purple))}
.gd-p{max-width:22em;font-size:15px;line-height:1.7;letter-spacing:.02em;color:var(--muted)}
.gd-ask{display:inline-flex;align-items:center;height:42px;padding:0 22px;border-radius:999px;border:1.5px solid var(--line,rgba(67,66,149,.32));font:500 11px 'Poppins',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:transform .3s,border-color .3s}
.gd-ask:hover{transform:translateY(-1px);border-color:var(--ink)}
.gd-list{display:flex;flex-direction:column;border-top:1px solid var(--line,rgba(67,66,149,.16))}
.gd-q{padding:26px 0;border-bottom:1px solid var(--line,rgba(67,66,149,.16))}
.gd-q h3{font:800 clamp(18px,1.5vw,21px)/1.3 'Nunito',sans-serif;letter-spacing:-.01em;color:var(--ink)}
.gd-q p{margin-top:8px;max-width:38em;font-size:15px;line-height:1.75;letter-spacing:.01em;color:var(--muted)}
.gd-read{margin-top:clamp(28px,4vh,40px);display:flex;flex-direction:column;gap:12px}
.gd-read .lbl{display:block;margin-bottom:8px;font:500 10.5px 'Poppins',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.gd-cards.jn-grid{grid-auto-rows:clamp(190px,15vw,220px);padding-top:0;gap:14px}
.gd-all{margin-top:6px;align-self:flex-start;font:500 10.5px 'Poppins',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.gd-all:hover{color:var(--ink)}
.gd-ask:focus-visible,.gd-all:focus-visible{outline:2px solid var(--stc,var(--purple));outline-offset:3px}
.loc-tile{display:flex;align-items:center;justify-content:center}
.loc-i{width:46px;height:46px;fill:none;stroke:#434295;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- responsive ---------- */
/* Everything below only runs on tablets and phones; the desktop rules above are untouched. */
@media (max-width:1024px){
  /* the area tabs scroll sideways inside the page, the open one is kept in view (services.js) */
  .stabwrap{padding-top:84px}
  .stabwrap .swrap{padding-left:0;padding-right:0}
  .stabs{justify-content:flex-start;padding:0 20px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
  .stabs button:first-of-type{margin-left:auto}
  .stabs button:last-of-type{margin-right:auto}
  .stabs button{padding:15px 20px 17px;font-size:11.5px;min-height:46px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

  /* the top of the page */
  .swrap{padding-left:32px;padding-right:32px}
  .intro{min-height:calc(100vh - 132px);min-height:calc(100svh - 132px);padding:24px 32px 96px}
  .stitle{font-size:clamp(46px,7.2vw,70px);white-space:normal;text-wrap:balance}
  .seg button{min-height:44px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  .icap{font-size:15px}

  /* the work */
  .work{width:calc(100% - 64px)}
  .wfil{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wfil::-webkit-scrollbar{display:none}
  .wfil button{flex:0 0 auto;min-height:44px;box-sizing:border-box}
  .wt{-webkit-tap-highlight-color:transparent}
  .wt .cap{padding:22px 66px 18px 20px}
  .wt .cap span{font-size:13px}
  .wt.xl .cap{padding:26px 76px 22px 28px}
  .wt.ph .cap{padding:22px 16px 84px 20px}
  .wt.soc .cap{padding:22px 18px 18px}
  .k-s .st{padding:22px 22px 20px}
  .k-s[data-pj] .st{padding-right:66px}
  .k-s.soc[data-pj] .st{padding-right:22px}
  .k-q .qi{padding:22px 22px 20px}
  .chip{right:14px;bottom:14px}
  .wt.xl .chip{right:18px;bottom:18px}
  .wt.c3 .clg svg{height:min(var(--lh,30px),21px)}
  /* nothing to hover with: no picture zoom or dimming that would stay stuck after a tap */
  .wt.k-p:hover img{transform:none}
  .wgrid:has(.k-p:hover) .k-p:not(:hover) img{filter:none}

  /* people rows (Directors, DOPs, ...) */
  .pbar{height:clamp(260px,42vw,380px);flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:16px}
  .pbar::before{background:linear-gradient(0deg,rgba(12,12,32,.86) 0%,rgba(12,12,32,.46) 55%,rgba(12,12,32,.12) 100%)}
  .pnm b{font-size:clamp(42px,7.6vw,84px);white-space:normal;line-height:.95}

  /* the guide at the bottom */
  .guide{width:calc(100% - 64px)}
  .gd-side{top:130px}

  /* the project and person pages (lightbox): one column, the picture or video on top, the words underneath */
  .pvcard{top:12px;bottom:12px;left:12px;right:12px;border-radius:24px}
  .pvx,.pvback{top:14px;height:44px}
  .pvx{right:14px;width:44px}
  .pvback{left:14px;padding:0 18px 0 12px}
  .cs-top{display:block;height:auto}
  .cs-hero,.pp-hero{height:auto;aspect-ratio:16/9;max-height:62svh}
  .cs-hero.vmh{container-type:size}
  .cs-top>.cs-main{grid-template-columns:minmax(0,1fr);gap:14px;padding:26px 28px 30px}
  .cs-top .cs-h h3{font-size:clamp(30px,5.4vw,44px)}
  .cs-top .cs-d{font-size:17px;line-height:1.6}
  .cs-top>.cs-main.pp-main{padding:26px 28px 30px}
  .pp-main h3{font-size:clamp(36px,8vw,64px)}
  .cs-hero .clg.big{top:70px;left:20px;--lh:32px}
  /* the speaker button sits beside Close; the Watch link bottom left of the picture */
  .cs-hero .snd,.cs.side .cs-hero .snd{top:14px;right:66px;width:44px;height:44px}
  .cs-hero .vmlink,.cs-hero.vmfail .vmlink,.cs.side .cs-hero .vmlink,.cs.side .cs-hero.vmfail .vmlink{top:auto;right:auto;left:14px;bottom:14px;padding:0 18px;height:44px;display:inline-flex;align-items:center;box-sizing:border-box}
  /* the credits that come up on hover sit under the title instead */
  .hcr,.cs.side .hcr{position:static;opacity:1;transform:none;pointer-events:auto;background:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin:0 28px;padding:20px 0 28px;border-top:1px solid rgba(255,255,255,.18);transition:opacity .55s ease}
  .cs.side .hcr dd,.hcr dd{font-size:16px}
  .pv.hush .hcr{opacity:0}
  /* a phone or iPad picture: stands in the middle on a dark stage at its own shape */
  .cs.side .cs-top{display:block;min-height:0;background:none}
  .cs.side .cs-hero{position:relative;top:auto;height:auto;width:min(100%,calc(60svh*var(--ar)));aspect-ratio:var(--ar);max-height:none;margin:0 auto;container-type:inline-size;--q:1cqw;box-shadow:0 0 0 100vmax #0E0E24;clip-path:inset(0 -100vmax)}
  .cs.side .cs-col>.cs-main{min-height:0;padding:26px 28px 30px;gap:14px;align-content:start}
  .cs.side .cs-h h3{font-size:clamp(30px,5.4vw,44px)}
  .cs.side .cs-d{font-size:17px}
  .cs-x,.cs.side .cs-x{--px:28px;padding:40px 28px 0}
  .cs-s,.cs.side .cs-s{padding:0 28px 40px}
  .cs-x+.cs-s,.cs-top+.cs-s,.cs-dk>.cs-s:first-child,.cs-mr>.cs-s:first-child{padding-top:40px}
  .cs-ab,.cs.side .cs-ab{grid-template-columns:minmax(0,1fr);gap:12px}
  .cs-ab .lbl{margin:0}
  .cs-ql{grid-template-columns:minmax(0,1fr);gap:28px}
  .cs-fx b{font-size:clamp(34px,6vw,52px);overflow-wrap:anywhere}
  .cs-more{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pw-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pw-cr{grid-template-columns:minmax(0,1fr)}
  .pw-cr small{white-space:normal}
  .pp-site{min-height:44px;box-sizing:border-box}
}

/* the guide stacks once there is no room for two columns */
@media (max-width:900px){
  .guide{display:block;padding-top:28px;padding-bottom:72px}
  .gd-side{position:static;margin-bottom:32px}
  .gd-p{max-width:32em}
}

@media (max-width:640px){
  .swrap{padding-left:20px;padding-right:20px}
  .stabs{padding:0 16px}
  .stabs button{padding:15px 15px 17px}
  .intro{--ico:112px;padding:16px 20px 96px}
  .stitle{margin-top:8px;font-size:clamp(32px,10.4vw,48px);line-height:1.08}
  .sline{margin-top:10px;font-size:16px}
  .sdesc{margin-top:12px;font-size:15px;line-height:1.7}
  .sviews{width:100%;margin-top:24px}
  .seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;width:100%;max-width:440px;margin:0 auto;border-radius:26px}
  .seg button{justify-content:center;text-align:center;padding:8px 12px;font-size:11.5px;letter-spacing:.08em;line-height:1.35;border-radius:22px}
  .seg button:last-child:nth-child(odd){grid-column:1/-1}
  .icap{margin-top:16px;min-height:0;line-height:1.65}

  /* the work: one column of big boxes; little phone-shaped boxes and stats go two to a row */
  .work{width:calc(100% - 40px);padding-top:8px}
  .wgrid{--g:12px;--half:calc((100cqw - 12px)/2);grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;grid-auto-flow:row}
  .wt{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3;border-radius:22px;clip-path:inset(0 round 22px)}
  .wt.k-p.c12,.wt.k-p.c9,.wt.k-p.c8{aspect-ratio:16/10}
  .wt.k-p.c7,.wt.k-p.c6,.wt.k-p.c5{aspect-ratio:4/3}
  .wt.k-p.c4{aspect-ratio:4/5}
  .wt.k-p.c4.web{aspect-ratio:3/4}
  .wt.c3{grid-column:span 1}
  .wt.k-p.c3{aspect-ratio:9/16}
  .wt.c3.lone{grid-column:1/-1}
  .wt.k-p.c3.ph.lone{width:66%;justify-self:center}
  .wt .cap{padding:20px 62px 18px 18px;gap:4px}
  .wt .cap b{font-size:21px;line-height:1.12}
  .wt.xl .cap{padding:22px 66px 20px 22px}
  .wt.xl .cap b{font-size:25px}
  .wt.xl .cap span{font-size:13px}
  .wt.ph .cap{padding:20px 14px 78px 16px}
  .wt.ph .cap b{font-size:19px}
  .wt.ph .cap span{font-size:12.5px;line-height:1.35}
  .wt.ph .clg{top:48px}
  .wt.ph .chip{top:14px;right:14px}
  .wt.soc .chip{top:14px;right:14px}
  .wt.soc .plat{left:16px;top:56px}
  .wt.soc .cap{padding:20px 14px 16px}
  .clg{left:18px;top:18px}
  .clg svg{height:min(var(--lh,30px),26px)}
  .chip{width:40px;height:40px;right:14px;bottom:14px}
  .tc{right:14px;top:14px}
  .plat{right:14px;top:14px}
  .wt.web .clg{top:48px}.wt.web.xl .clg{top:50px}
  .wb{height:30px;padding:0 12px}
  .wb em{padding:3px 22px;font-size:10px}
  .wb.tb{height:28px}
  .wb.tb em{padding:3px 18px}
  /* social boxes: the feed overlay stays readable on a half-width box */
  .igi b{font-size:max(10px,calc(var(--q)*3))}
  .igu b,.wt .cap .igu b{font-size:max(11px,calc(var(--q)*3.3))}
  .igu em{font-size:max(9px,calc(var(--q)*2.5))}
  .wt.ig .igu em{display:none} /* the little Follow tag has no room on a half-width box (it shows again when the project opens) */
  .wt.c3 .clg svg{height:min(var(--lh,30px),19px)}
  /* numbers and quotes grow with what they say instead of being cut to a fixed box */
  .wt.k-s,.wt.k-q{aspect-ratio:auto;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(176px,50vw,232px)}
  .k-s .st,.k-q .qi{position:relative;inset:auto}
  .k-s .st{padding:66px 22px 22px;gap:8px}
  .k-s[data-pj] .st{padding-right:66px}
  .k-s.soc[data-pj] .st{padding-right:22px}
  .k-s .st b{font-size:clamp(46px,14.5vw,64px)}
  .k-s .st .l{font-size:15px;max-width:16em}
  .k-s .st .m{font-size:12px}
  .k-s.r1{min-height:0}
  .k-s.r1 .st{padding:20px 62px 20px 22px;gap:4px}
  .k-s.r1 .st b{font-size:clamp(34px,10vw,44px)}
  .k-s.r1 .st .l{font-size:14.5px}
  .k-q .qi{padding:66px 22px 24px;gap:14px}
  .k-q p{font-size:clamp(21px,6.2vw,26px);line-height:1.3}
  .k-q.c7 p,.k-q.c8 p{font-size:clamp(21px,6.2vw,26px)}
  .k-q::before{right:18px;top:10px;font-size:110px}
  .k-q small{font-size:11.5px}
  .k-q.r1 .qi{padding:20px 22px}
  /* the half-width ones (feed layouts): smaller type, same look */
  .k-s.c3 .st{padding:56px 16px 18px}
  .k-s.c3 .st b{font-size:clamp(28px,8.6vw,36px);overflow-wrap:anywhere}
  .k-s.c3 .st .l{font-size:14px;line-height:1.4}
  .k-s.c3 .st .m{font-size:11.5px}
  .k-q.c3 .qi{padding:56px 16px 18px;gap:10px}
  .k-q.c3 p{font-size:clamp(17px,4.9vw,20px);line-height:1.3}
  .k-q.c3::before{font-size:84px;right:12px;top:8px}
  .k-q.c3 small{font-size:10.5px;letter-spacing:.08em}
  .k-s.c3 .clg,.k-q.c3 .clg{left:16px;top:16px}

  /* people rows */
  .pstrips{gap:12px}
  .pstrip{border-radius:22px;clip-path:inset(0 round 22px)}
  .pbar{height:clamp(250px,70vw,300px);gap:14px;padding:0 20px 22px}
  .pnm{gap:8px}
  .pnm b{font-size:clamp(32px,10.2vw,46px)}
  .pmore{gap:12px}

  /* the guide */
  .guide{width:calc(100% - 40px);padding-top:20px;padding-bottom:64px}
  .gd-side{margin-bottom:24px;gap:14px}
  .gd-h{font-size:clamp(32px,9.4vw,42px)}
  .gd-ask{height:46px;padding:0 24px}
  .gd-q{padding:22px 0}
  .gd-q h3{font-size:18px}
  .gd-q p{font-size:15px;line-height:1.7}
  .guide .gd-cards.jn-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:190px} /* the Journal's own grid rule loads after this file, so this one is a notch more specific */
  .gd-all{display:inline-flex;align-items:center;min-height:44px}

  /* the project and person pages: full screen */
  .pvcard{top:0;bottom:0;left:0;right:0;border-radius:0}
  .pvx,.pvback{top:12px}
  .pvx{right:12px}
  .pvback{left:12px}
  .cs-hero,.pp-hero{aspect-ratio:4/3;max-height:58svh}
  .cs-top>.cs-main,.cs-top>.cs-main.pp-main,.cs.side .cs-col>.cs-main{padding:24px 20px 28px;gap:12px}
  .cs-top .cs-h h3,.cs.side .cs-h h3{font-size:clamp(30px,8.6vw,38px);margin-top:10px}
  .cs-top .cs-d,.cs.side .cs-d{font-size:17px;line-height:1.55}
  .pp-main h3{font-size:clamp(34px,11vw,48px)}
  .cs-top>.cs-main.pp-main{gap:8px 16px}
  .cs-hero .clg.big{top:68px;left:16px;--lh:28px}
  .cs.side .cs-hero{width:100%;max-height:70svh;aspect-ratio:var(--ar);box-shadow:none;clip-path:none}
  .hcr,.cs.side .hcr{margin:0 20px;padding:18px 0 24px;gap:14px 16px}
  .cs-x,.cs.side .cs-x{--px:20px;padding:34px 20px 0}
  .cs-s,.cs.side .cs-s{padding:0 20px 34px}
  .cs-x+.cs-s,.cs-top+.cs-s,.cs-dk>.cs-s:first-child,.cs-mr>.cs-s:first-child{padding-top:34px}
  .cs-ex p{font-size:17px;line-height:1.65}
  .cs-ex p.pp-lead{font-size:19px}
  .cs-fx{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cs-gl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-fx>div{padding:18px 18px 16px;border-radius:20px}
  .cs-fx b{font-size:clamp(30px,9vw,38px)}
  .cs-fx span{margin-top:10px;font-size:14.5px}
  .cs-qq{padding-left:18px}
  .cs-qq p{font-size:clamp(21px,6vw,26px)}
  .cs-loc{gap:16px;margin-top:28px;padding-top:22px}
  .loc-tile{width:92px;height:92px;border-radius:20px}
  .aw-row{gap:16px 28px}
  .cs-g{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:6px}
  .cs-g img{height:auto;aspect-ratio:1/1;border-radius:14px}
  .cs-g .a,.cs-g.r .a,.cs-g.n1 .a{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3}
  .cs-g .b,.cs-g .c,.cs-g.r .b,.cs-g.r .c{grid-column:auto;grid-row:auto}
  .cs-g.n2 .a,.cs-g.n2 .b,.cs-g.n2.r .a,.cs-g.n2.r .b{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3}
  .cs-gl{gap:6px}
  .cs-mo{margin:0 -20px}
  .mo-r{overflow-x:auto;scrollbar-width:none;padding:0 20px;gap:6px;-webkit-overflow-scrolling:touch}
  .mo-r::-webkit-scrollbar{display:none}
  .mo-t{flex:0 0 auto;height:176px;width:calc(176px*var(--r));aspect-ratio:auto}
  .cs-more{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px;gap:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cs-more::-webkit-scrollbar{display:none}
  .cs-m{flex:0 0 78%;scroll-snap-align:start}
  .cs-m .cs-mc b{font-size:19px}
  .pw-g{grid-template-columns:minmax(0,1fr);gap:8px}
  .pw-cr li{padding:14px 0}
  .pw-cr b{font-size:17px}
}

/* a phone turned on its side: the first screen is no taller than the window */
@media (max-width:1024px) and (max-height:520px){
  .cs-hero,.pp-hero{aspect-ratio:16/9;max-height:52svh}
  .cs.side .cs-hero{width:min(100%,calc(52svh*var(--ar)))}
  .intro{min-height:0;padding-bottom:84px}
}

/* ---------- phone: the page opens on the icon and the title; the intro and the areas sit in a box below ---------- */
.sbox{display:contents}
@media (max-width:640px){
  .intro{--ico:112px;--fs:calc(100vh - 301px);--fs:calc(100svh - 301px);display:flex;flex-direction:column;align-items:center;min-height:0;padding:0 20px 32px}
  .sico{margin-top:calc(var(--fs) * .45)}
  .sti{width:100%}
  .stitle{margin-bottom:calc(var(--fs) * .55)}
  .sbox{display:flex;flex-direction:column;align-items:center;width:100%;box-sizing:border-box;padding:26px 18px 22px;border-radius:26px;text-align:center;
    background:rgba(255,255,255,.72);border:1px solid rgba(67,66,149,.14);box-shadow:0 16px 40px rgba(34,33,75,.08)}
  .sline{margin-top:0;font-size:17px;font-weight:500;color:var(--ink)}
  .sdesc{margin-top:10px;font-size:14.5px;line-height:1.65}
  .sviews{width:100%;margin-top:20px}
  .icap{margin-top:14px;font-size:14px}
  .scue{top:calc(100svh - 133px - 74px);bottom:auto}
  .scue-in span{font-size:0}.scue-in span::after{content:'Scroll';font-size:10px}
  #app[data-page="services"][data-bg="bold"] .sbox{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);box-shadow:none}
}

/* ---------- phone, round 2 ---------- */
/* The Originals phone style: about 24px at the sides, 64-96px between blocks, small quiet type, small pills, swipe rows instead of long stacks. Phones only; nothing here runs above 640px. */
@media (max-width:640px){
  /* the area tabs: smaller and quieter */
  .stabs{padding:0 20px}
  .stabs button{padding:15px 14px 17px;font-size:10.5px;letter-spacing:.16em}

  /* the intro box: room to breathe, one idea at a time (what it is, then what is inside) */
  .intro{padding:0 24px 72px}
  .sbox{padding:36px 20px 32px}
  .sline{font-size:16px;line-height:1.4}
  .sdesc{margin-top:14px;max-width:21em;font-size:14px;line-height:1.75}
  .sviews{margin-top:28px;padding-top:28px;border-top:1px solid rgba(67,66,149,.12)}
  #app[data-page="services"][data-bg="bold"] .sviews{border-top-color:rgba(255,255,255,.16)}
  .seg{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%;max-width:none;margin:0;padding:0;border-radius:0;background:none}
  .seg button{position:relative;box-sizing:border-box;min-height:0;height:38px;padding:0 13px;border-radius:999px;background:var(--pill);font-size:10.5px;letter-spacing:.08em;line-height:1}
  .seg button::after{content:'';position:absolute;inset:-4px -3px}
  .icap{margin-top:24px;max-width:21em;font-size:14px;line-height:1.75}

  /* the work: filter tabs small and calm, boxes big with room between them */
  .work{width:calc(100% - 48px);margin:0 auto 72px;padding-top:0}
  .wfil{padding:0 0 24px}
  .wfil button{padding:10px 22px 12px 0;font-size:10.5px;letter-spacing:.16em}
  .wfil button::after{right:22px}
  .wgrid{--g:24px}
  .wt .cap{padding:22px 66px 22px 22px;gap:4px}
  .wt .cap b{font-size:18px;line-height:1.15}
  .wt .cap span{font-size:12px;letter-spacing:.04em}
  .wt.xl .cap{padding:24px 66px 24px 24px}
  .wt.xl .cap b{font-size:21px}
  .wt.xl .cap span{font-size:12px}
  .wt.ph .cap{padding:20px 14px 78px 18px}
  .wt.ph .cap b{font-size:17px}
  .wt.ph .cap span{font-size:12px}
  .wt.soc .cap{padding:20px 14px 16px}
  .chip{width:32px;height:32px;right:20px;bottom:20px}
  .chip svg{width:17px;height:13px}
  .wt.xl .chip{right:20px;bottom:20px}
  .wt.ph .chip,.wt.soc .chip{top:14px;right:14px;bottom:auto}
  .clg{left:22px;top:22px}
  .wt.web .clg{top:50px}.wt.web.xl .clg{top:50px}
  .wt.ph .clg{top:50px}

  /* numbers and quotes: smaller, with room */
  .k-s .st{padding:70px 24px 26px;gap:8px}
  .k-s[data-pj] .st{padding-right:66px}
  .k-s.soc[data-pj] .st{padding-right:24px}
  .k-s .st b{font-size:clamp(36px,11vw,46px)}
  .k-s .st .l{font-size:14px;line-height:1.55;max-width:17em}
  .k-s .st .m{font-size:11px;letter-spacing:.05em}
  .k-s.r1 .st{padding:24px 66px 24px 24px}
  .k-s.r1 .st b{font-size:clamp(30px,9vw,38px)}
  .k-s.r1 .st .l{font-size:14px}
  .k-q .qi{padding:70px 24px 26px;gap:14px}
  .k-q p{font-size:clamp(19px,5.4vw,22px);line-height:1.35}
  .k-q.c7 p,.k-q.c8 p{font-size:clamp(19px,5.4vw,22px)}
  .k-q::before{right:20px;top:12px;font-size:92px}
  .k-q small{font-size:10.5px;letter-spacing:.12em}
  .k-q.r1 .qi{padding:24px}
  .k-s.c3 .st{padding:60px 18px 20px}
  .k-s.c3 .st b{font-size:clamp(30px,9vw,38px)}
  .k-s.c3 .st .l{font-size:14px}
  .k-s.c3 .st .m{font-size:11px}
  .k-q.c3 .qi{padding:60px 18px 20px;gap:12px}
  .k-q.c3 p{font-size:clamp(18px,5vw,20px)}
  .k-q.c3 small{font-size:10.5px}
  .k-q.c3::before{font-size:76px;right:14px;top:8px}
  .k-s.c3 .clg,.k-q.c3 .clg{left:18px;top:18px}
  .wt.c3 .clg svg{height:min(var(--lh,30px),21px)}

  /* swipe rows (made in services.js): phone-shaped boxes, and runs of numbers and quotes */
  .wrail{grid-column:1/-1;display:flex;gap:12px;margin:0 -24px;padding:0 24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wrail::-webkit-scrollbar{display:none}
  .wrail{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1)}
  .wrail.vis{opacity:1;transform:none}
  .wrail:focus-visible{outline:2px solid var(--violet);outline-offset:-2px;border-radius:22px}
  .wrail>.wt{flex:0 0 auto;grid-column:auto;scroll-snap-align:start;width:clamp(204px,58vw,250px)}
  .wrail.tx>.wt{width:clamp(244px,74vw,310px)}
  .wrail.tx>.wt.k-s.r1,.wrail.tx>.wt.k-q.r1{width:clamp(236px,70vw,290px)}
  .wrail>.wt.c3.lone{width:clamp(204px,58vw,250px)}

  /* people rows */
  .pstrips{gap:20px}
  .pbar{height:clamp(240px,66vw,280px);gap:12px;padding:0 24px 26px}
  .pnm{gap:8px}
  .pnm em{font-size:10.5px;letter-spacing:.2em}
  .pnm b{font-size:clamp(26px,8vw,32px);line-height:1}
  .pmore{gap:10px;font-size:10.5px;letter-spacing:.16em}

  /* the guide: heading, one line, one button; then the questions fold open with a tap */
  .guide{width:calc(100% - 48px);padding-top:0;padding-bottom:96px}
  .gd-side{margin-bottom:40px;gap:16px}
  .guide .eyebrow{font-size:10.5px}
  .gd-h{font-size:clamp(28px,8vw,32px);line-height:1.1}
  .gd-p{max-width:21em;font-size:14px;line-height:1.75}
  .gd-ask{position:relative;height:40px;margin-top:4px;padding:0 20px;font-size:10.5px;letter-spacing:.14em}
  .gd-ask::after{content:'';position:absolute;inset:-2px -6px}
  .gd-read{display:none} /* the Journal block is not shown on phones (it stays on tablet and desktop) */
  .gd-q{padding:0}
  .gd-q h3{margin:0}
  .gd-qb{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:22px 0;font:700 16px/1.4 'Nunito',sans-serif;letter-spacing:-.005em;color:var(--ink);-webkit-tap-highlight-color:transparent}
  .gd-qb:focus-visible{outline:2px solid var(--stc,var(--purple));outline-offset:2px;border-radius:6px}
  .gd-qb i{position:relative;flex:none;width:14px;height:14px;color:var(--muted)}
  .gd-qb i::before,.gd-qb i::after{content:'';position:absolute;left:0;right:0;top:6.25px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .4s cubic-bezier(.16,1,.3,1)}
  .gd-qb i::after{transform:rotate(90deg)}
  .gd-qb[aria-expanded="true"] i::after{transform:rotate(0)}
  .gd-a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1),visibility 0s .45s}
  .gd-a>div{min-height:0;overflow:hidden}
  .gd-q.open .gd-a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1),visibility 0s 0s}
  .gd-a p{margin:0;padding:0 0 26px;max-width:19.5em;font-size:14px;line-height:1.8}
}
@media (max-width:640px){
  /* the project and person pages (lightbox): smaller buttons and type, more room between the blocks */
  .pvx,.pvback{top:14px;height:40px;font-size:10.5px;letter-spacing:.14em}
  .pvx{right:14px;width:40px}
  .pvback{left:14px;padding:0 16px 0 12px}
  .pvx::after,.pvback::after{content:'';position:absolute;inset:-2px}
  .pvx svg,.pvback svg{width:16px;height:16px}
  .cs-hero .snd,.cs.side .cs-hero .snd{top:14px;right:62px;width:40px;height:40px}
  .cs-hero .snd::after{content:'';position:absolute;inset:-2px}
  .cs-hero .snd svg{width:18px;height:18px}
  .cs-hero .vmlink,.cs-hero.vmfail .vmlink,.cs.side .cs-hero .vmlink,.cs.side .cs-hero.vmfail .vmlink{left:14px;bottom:14px;height:38px;padding:0 16px;font-size:10.5px;letter-spacing:.14em}
  .cs-hero .vmlink::after{content:'';position:absolute;inset:-3px -2px}
  .cs-top>.cs-main,.cs-top>.cs-main.pp-main,.cs.side .cs-col>.cs-main{padding:32px 24px 36px;gap:14px}
  .cs-top .cs-h h3,.cs.side .cs-h h3{margin-top:12px;font-size:clamp(26px,7.4vw,30px);line-height:1.08}
  .cs-top .cs-d,.cs.side .cs-d{max-width:21em;font-size:15px;line-height:1.7}
  .pp-main h3{font-size:clamp(28px,8.4vw,34px)}
  .cs-top>.cs-main.pp-main{gap:10px 16px}
  .cs-h .lbl,.cs-x .lbl,.cs-s .lbl,.pp-main .lbl{font-size:10.5px;letter-spacing:.2em}
  .hcr,.cs.side .hcr{margin:0 24px;padding:28px 0 36px;gap:22px 20px}
  .hcr dd,.cs.side .hcr dd{margin-top:6px;font-size:14.5px;line-height:1.35}
  .cs-x,.cs.side .cs-x{--px:24px;padding:64px 24px 0}
  .cs-s,.cs.side .cs-s{padding:0 24px 64px}
  .cs-x+.cs-s,.cs-top+.cs-s,.cs-dk>.cs-s:first-child,.cs-mr>.cs-s:first-child{padding-top:64px}
  .cs-x:last-child,.cs-top+.cs-x:last-child,.cs.side .cs-bd>.cs-x:last-child{padding-bottom:64px}
  .cs-x .lbl{margin-bottom:20px}
  .cs-s .lbl{margin-bottom:20px}
  .cs-ex p{max-width:21em;font-size:15px;line-height:1.75}
  .cs-ex p.pp-lead{font-size:17px;line-height:1.55}
  .cs-ex p+p,.cs-ex p.pp-lead+p{margin-top:20px}
  .cs-fx{display:flex;gap:12px;margin:0 -24px;padding:0 24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cs-fx::-webkit-scrollbar{display:none}
  .cs-fx>div{flex:0 0 clamp(200px,58vw,236px);scroll-snap-align:start;padding:24px 22px 22px;border-radius:22px}
  .cs-fx b{font-size:clamp(30px,9vw,38px)}
  .cs-fx span{margin-top:12px;font-size:14px;line-height:1.5}
  .cs-fx small{font-size:11px;line-height:1.5}
  .cs-ql{gap:36px}
  .cs-qq{padding-left:20px}
  .cs-qq p{font-size:clamp(19px,5.4vw,22px);line-height:1.4}
  .cs-qq small{margin-top:14px;font-size:10.5px}
  .cs-loc{gap:18px;margin-top:40px;padding-top:32px}
  .loc-tile{width:76px;height:76px;border-radius:20px}
  .loc-i{width:38px;height:38px}
  .loc-t b{font-size:16px;line-height:1.4}
  .cs-aw{margin-top:40px;padding-top:32px}
  .aw svg{width:38px;height:38px}
  .aw-row{gap:20px 28px}
  .cs-g{gap:8px}
  .cs-gl{display:flex;gap:8px;margin:0 -24px;padding:0 24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cs-gl::-webkit-scrollbar{display:none}
  .cs-gl>.gi{flex:0 0 72%;scroll-snap-align:start}
  .cs-mo{gap:8px}
  .mo-r{gap:8px}
  .mo-t{height:168px;width:calc(168px*var(--r))}
  .cs-more{gap:12px}
  .cs-m{flex:0 0 74%}
  .cs-m .cs-mc{left:20px;right:20px;bottom:18px}
  .cs-m .cs-mc b{font-size:17px}
  .cs-m .cs-mc small{font-size:12px}
  .pw-g{display:flex;gap:12px;margin:0 -24px;padding:0 24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pw-g::-webkit-scrollbar{display:none}
  .pw{flex:0 0 76%;scroll-snap-align:start}
  .pw .pwc{left:20px;right:20px;bottom:18px}
  .pw b{font-size:17px}
  .pw small{font-size:12px}
  .pw-cr li{padding:16px 0}
  .pw-cr b{font-size:16px}
  .pw-cr small{font-size:12px}
  .pw-cr:not(:has(small)){display:flex;flex-wrap:wrap;gap:12px 0} /* a plain list of client names runs as one calm line of names instead of a tall column */
  .pw-cr:not(:has(small)) li{display:block;padding:0;border:0}
  .pw-cr:not(:has(small)) li:not(:last-child)::after{content:'\00b7';margin:0 .7em;opacity:.5}
  .pw-cr:not(:has(small)) b{font-weight:400;font-size:15px;line-height:1.5}
  .pp-site{position:relative;min-height:0;height:38px;margin-top:32px;padding:0 20px;font-size:10.5px;letter-spacing:.14em}
  .pp-site::after{content:'';position:absolute;inset:-3px -4px}
  .pp-site svg{width:14px;height:14px}
}
@media (max-width:640px) and (max-height:520px){#app[data-wk="on"] .scue{display:none}} /* a phone on its side has no room for the scroll cue */
@media (max-width:640px) and (prefers-reduced-motion:reduce){.wrail{opacity:1;transform:none;transition:none}.gd-a,.gd-q.open .gd-a{transition:none}.gd-qb i::before,.gd-qb i::after{transition:none}}

/* Originals: our own series (styles live in src/originals.css) */
#app[data-page="originals"] #home,#app[data-page="originals"] #aboutScroll,#app[data-page="originals"] #contactScroll{display:none}
#app:not([data-page="originals"]) #originalsScroll{display:none}
/* ===== Originals: our own series, laid out like a streaming home page. Every series carries its own look (colour, picture grade, title style) ===== */
#app[data-page="originals"]{--bg:#0E0E22}
#originalsScroll{overflow-anchor:none;position:absolute;inset:0;z-index:3;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent;
  --ink:#fff;--muted:rgba(255,255,255,.66);--logo:#fff;--solid-bg:#fff;--solid-fg:#161632;--pad:clamp(36px,5vw,96px);--obg:#0E0E22;color:#fff}
.or-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.or-rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease calc(var(--i,0)*80ms),transform 1.1s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*80ms)}
.or-rv.in{opacity:1;transform:none}

/* ---------- the look of each series: one block per series, the page reads its colours from here ---------- */
.s-unscripted{--ac:#CFD0D3;--acr:207,208,211;--fl:saturate(1);--tint:none;--blend:normal;--pbg:#1A1A1C;--pbgr:26,26,28;--pfg:#F3F3F2;--pmu:rgba(240,240,240,.66);--pln:rgba(240,240,240,.16);--pcard:#252528} /* dark grey, with a light grey accent so it still reads on the dark ground */
.s-small-hours{--ac:#6FD8FF;--acr:111,216,255;--fl:hue-rotate(-40deg) saturate(1.2) contrast(1.12) brightness(.86);--tint:linear-gradient(180deg,rgba(0,50,130,.5),rgba(0,0,35,.4));--blend:soft-light;--pbg:#050A1A;--pbgr:5,10,26;--pfg:#EAF4FF;--pmu:rgba(205,225,245,.68);--pln:rgba(160,205,255,.16);--pcard:#0B1630}
.s-still-life{--ac:#F2B25C;--acr:242,178,92;--fl:saturate(1.04) contrast(1.02);--tint:none;--blend:normal;--pbg:#1B0F07;--pbgr:27,15,7;--pfg:#FFF1DC;--pmu:rgba(255,238,215,.7);--pln:rgba(255,238,215,.17);--pcard:#2A170B}
.s-in-the-edit{--ac:#BDAEFF;--acr:189,174,255;--fl:grayscale(.78) contrast(1.1) brightness(.9);--tint:linear-gradient(180deg,rgba(80,0,219,.34),rgba(20,18,60,.4));--blend:soft-light;--pbg:#0D0D1C;--pbgr:13,13,28;--pfg:#EEEAFB;--pmu:rgba(222,216,244,.68);--pln:rgba(189,174,255,.18);--pcard:#17162E}
.or-tint{position:absolute;inset:0;background:var(--tint);mix-blend-mode:var(--blend);pointer-events:none}

/* title styles. The size comes from --fs, so the same style works large in the hero and small on a poster */
.ttl{font-family:'Nunito',sans-serif;font-size:var(--fs,64px);margin:0}
.ty-u{line-height:.88;letter-spacing:-.05em;text-transform:lowercase;white-space:nowrap}
.ty-u .t1{font-weight:300;color:var(--ac)}
.ty-u .t2{font-weight:900;color:#fff}
/* a logo picture in place of the typed title (Unscripted). It is wider than it is tall, so its width is set from the same size as the others */
.ty-g{line-height:0;font-size:0}
.ty-g .lg{display:block;width:calc(var(--fs,64px)*3.5);max-width:100%;height:auto;aspect-ratio:auto 6425/1567;filter:drop-shadow(0 2px 18px rgba(0,0,0,.35))}
.ty-s{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .34em;font-size:calc(var(--fs,64px)*.56);line-height:1.1;letter-spacing:.2em;text-transform:uppercase}
.ty-s .t1{font-weight:200;color:#EAF9FF}
.ty-s .t2{font-weight:800;color:var(--ac);text-shadow:0 0 .35em rgba(var(--acr),.75),0 0 1em rgba(var(--acr),.35)}
.ty-l{display:flex;width:max-content;align-items:baseline;gap:.24em;padding:.16em .42em .22em;border:max(1.5px,.025em) solid rgba(255,255,255,.88);font-size:calc(var(--fs,64px)*.72);line-height:1;letter-spacing:-.025em;white-space:nowrap}
.ty-l .t1{font-weight:300;color:#fff}
.ty-l .t2{font-weight:800;color:var(--ac)}
.ty-e{position:relative;display:flex;flex-direction:column;align-items:flex-start;line-height:.82;letter-spacing:-.045em}
.ty-e .t1{font:500 calc(var(--fs,64px)*.2)/1 'Poppins',sans-serif;letter-spacing:.34em;text-transform:uppercase;color:var(--ac);margin-bottom:.5em}
.ty-e .t2{font-weight:900;color:#fff}
.ty-e::after{content:'';position:absolute;left:58%;top:-8%;width:max(2px,.022em);height:128%;background:linear-gradient(180deg,rgba(var(--acr),0),var(--ac) 28%,var(--ac) 72%,rgba(var(--acr),0));transform:rotate(24deg);box-shadow:0 0 .3em rgba(var(--acr),.9);pointer-events:none}

/* ---------- the big picture at the top: one series at a time, changing every few seconds ---------- */
.or-hero{position:relative;height:clamp(560px,calc(100vh - 96px),920px);overflow:hidden;isolation:isolate;background:transparent}
.or-hbg{position:absolute;inset:0}
.or-hs{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease;overflow:hidden;background:#0A0A1A}
.or-hs.on{opacity:1}
#app:not(.go) .or-hs{opacity:0}
.or-hs>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--fl);transform:scale(1.08)}
/* a film plays over the picture for a while (the trailer or the latest episode), then fades back to the picture. The player is drawn larger than the picture so the player's own title bar falls outside it. */
.or-hv{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity 1.1s ease;overflow:hidden;container-type:size;pointer-events:none;background:#000;filter:var(--fl)}
.or-hv.on{opacity:1}
.or-hv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.or-hv iframe{position:absolute;left:50%;top:50%;width:calc(1.22*max(100cqw,100cqh*1.7778));height:calc(1.22*max(100cqh,100cqw*.5625));transform:translate(-50%,-50%);border:0;pointer-events:none}
.or-frm .or-hv{inset:clamp(10px,1.1vw,18px)}
.or-hv.sim{background:transparent;filter:none}
.or-hv.sim::before,.or-hv.sim::after{content:'';position:absolute;left:0;right:0;height:9%;background:#04040A}
.or-hv.sim::before{top:0}.or-hv.sim::after{bottom:0}
.or-snd{all:unset;cursor:pointer;position:absolute;z-index:4;right:var(--pad);bottom:calc(clamp(118px,19vh,190px) + 38px);width:46px;height:46px;border-radius:50%;box-sizing:border-box;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);background:rgba(14,14,34,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .7s ease,background .25s}
.or-hero.pvon .or-snd{opacity:1;pointer-events:auto}
.or-hero.pvsim .or-snd{display:none}
.or-snd:hover{background:rgba(255,255,255,.2)}
.or-snd:focus-visible{outline:2px solid #fff;outline-offset:2px}
.or-snd svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.or-snd .on{display:none}
.or-snd[aria-pressed="true"] .on{display:block}
.or-snd[aria-pressed="true"] .off{display:none}
.or-pvs{display:none;position:absolute;z-index:4;right:var(--pad);bottom:calc(clamp(118px,19vh,190px) + 38px);padding:12px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(14,14,34,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 10.5px/1 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.or-hero.pvsim .or-pvs{display:block}
#app.go .or-hs.on>img{animation:orkb 14s ease-out forwards}
@keyframes orkb{from{transform:scale(1.08)}to{transform:scale(1)}}
.or-hs::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(8,8,22,.6) 0%,rgba(8,8,22,0) 24%),linear-gradient(90deg,rgba(8,8,22,.9) 0%,rgba(8,8,22,.6) 36%,rgba(8,8,22,0) 70%),linear-gradient(0deg,var(--obg) 0%,rgba(14,14,34,0) 36%)}
/* Still Life is the exception: a framed print on a warm ground, so the page does not look the same all the way through */
.or-hs.frame{background:radial-gradient(ellipse 70% 90% at 72% 46%,#8A4A16 0%,#4A2509 52%,#1D0F05 100%)}
.or-hs.frame::after{background:linear-gradient(180deg,rgba(14,8,4,.5) 0%,rgba(14,8,4,0) 24%),linear-gradient(90deg,rgba(18,9,3,.78) 0%,rgba(18,9,3,.25) 40%,rgba(18,9,3,0) 66%),linear-gradient(0deg,var(--obg) 0%,rgba(14,14,34,0) 30%)}
.or-frm{position:absolute;z-index:1;right:calc(var(--pad) + 2.5vw);top:47%;transform:translateY(-50%) rotate(-1.4deg);width:min(38vw,600px);aspect-ratio:3/2;padding:clamp(10px,1.1vw,18px);background:#F3E7D3;box-shadow:0 40px 90px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.35)}
.or-frm img{display:block;width:100%;height:100%;object-fit:cover;filter:var(--fl)}
#app.go .or-hs.on .or-frm{animation:orfr 1.8s cubic-bezier(.16,1,.3,1) both}
@keyframes orfr{from{transform:translateY(-46%) rotate(-3deg);opacity:0}to{transform:translateY(-50%) rotate(-1.4deg);opacity:1}}
.or-fcap{position:absolute;left:2px;bottom:-30px;font:500 10px 'Poppins',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,236,210,.8);white-space:nowrap}

.or-hc{position:absolute;z-index:3;left:var(--pad);bottom:clamp(118px,19vh,190px);max-width:min(740px,54vw);opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .6s ease,transform .6s ease;--fs:clamp(60px,8.6vw,160px)}
.or-hc.on{opacity:1;transform:none;pointer-events:auto;transition:opacity .9s ease .5s,transform 1.2s cubic-bezier(.16,1,.3,1) .5s}
#app:not(.go) .or-hc.on{opacity:0;transform:translateY(20px)}
.or-badge{display:flex;width:max-content;align-items:center;gap:12px;font:600 11px 'Poppins',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--ac)}
.or-badge i{display:block;width:3px;height:20px;border-radius:2px;background:var(--ac);transform:skewX(-24deg);box-shadow:0 0 12px rgba(var(--acr),.8)}
.or-badge em{font-style:normal;font-weight:400;color:rgba(255,255,255,.62);letter-spacing:.2em;padding-left:12px;border-left:1px solid rgba(255,255,255,.28)}
.or-hc .ttl{width:max-content;max-width:100%;margin:clamp(14px,2.2vh,24px) 0 clamp(14px,2.4vh,26px)}
.or-hl{font:300 clamp(20px,1.8vw,28px)/1.3 'Nunito',sans-serif;letter-spacing:-.005em;color:#fff;max-width:20em}
.or-hm{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:16px;font:500 13px 'Poppins',sans-serif;letter-spacing:.04em;color:rgba(255,255,255,.76)}
.or-new{font-weight:600;padding:5px 12px;border-radius:6px;background:rgba(var(--acr),.18);border:1px solid rgba(var(--acr),.5);color:var(--ac);letter-spacing:.14em;text-transform:uppercase;font-size:10.5px}
.or-hact{display:flex;align-items:center;gap:14px;margin-top:clamp(22px,3.6vh,34px)}
.or-btn{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 28px 0 22px;border-radius:999px;font:500 15px 'Poppins',sans-serif;letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s,box-shadow .3s}
.or-btn svg{width:22px;height:22px;flex:0 0 auto;fill:currentColor}
.or-btn.p{background:#fff;color:#161632}
.or-btn.p:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(var(--acr),.4)}
.or-btn.g{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.34);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.or-btn.g:hover{background:rgba(255,255,255,.26);transform:translateY(-2px)}
.or-btn:focus-visible,.or-card:focus-visible,.or-poster:focus-visible,.or-all:focus-visible,.or-hdot:focus-visible{outline:2px solid #fff;outline-offset:3px}
.or-btn .st{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* the little extras that belong to one series only */
.or-clk{display:flex;width:max-content;align-items:baseline;gap:2px;margin-top:20px;font:200 clamp(28px,2.6vw,42px)/1 'Nunito',sans-serif;letter-spacing:.08em;color:var(--ac);text-shadow:0 0 18px rgba(var(--acr),.7)}
.or-clk b{font-weight:300}.or-clk i{font-style:normal;animation:orblink 1.6s steps(2,jump-none) infinite}.or-clk em{font:500 11px 'Poppins',sans-serif;letter-spacing:.2em;text-transform:uppercase;margin-left:12px;color:rgba(255,255,255,.7);text-shadow:none}
@keyframes orblink{50%{opacity:.15}}
.or-tcd{display:block;width:max-content;margin-top:20px;font:500 12px 'Poppins',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.24em;color:var(--ac);padding:6px 12px;border:1px solid rgba(var(--acr),.5);border-radius:4px}
.or-tlb{display:flex;gap:4px;height:10px;margin-top:20px;max-width:360px}
.or-tlb i{flex:var(--w,1);border-radius:3px;background:rgba(var(--acr),.28)}
.or-tlb i:nth-child(2n){background:rgba(var(--acr),.55)}
.or-tlb i:nth-child(3){background:var(--ac)}

.or-hd{position:absolute;z-index:4;transition:opacity 1s ease .8s;right:var(--pad);bottom:clamp(118px,19vh,190px);display:flex;gap:8px}
#app:not(.go) .or-hd{opacity:0;transition:none}
.or-hdot{all:unset;box-sizing:border-box;cursor:pointer;width:44px;height:22px;display:flex;align-items:center}
.or-hdot i{position:relative;display:block;width:100%;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.or-hdot i::after{content:'';position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.or-hdot.on i::after{transform:scaleX(1)}
#app.go .or-hdot.on i::after{animation:orfill var(--dur,7s) linear forwards}
@keyframes orfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- the rows ---------- */
.or-rows{position:relative;z-index:2;margin-top:-1px;background:var(--obg);padding:6px 0 clamp(30px,5vh,60px);transition:opacity 1.2s ease .7s}
#app:not(.go) .or-rows{opacity:0;transition:none}
.or-sec{position:relative;margin-top:clamp(18px,3.6vh,40px)}
.or-rh{position:relative;z-index:3;display:flex;align-items:baseline;gap:6px 22px;flex-wrap:wrap;padding:0 var(--pad);margin-bottom:clamp(6px,1vh,12px)}
.or-rh h2{font:600 clamp(19px,1.6vw,24px)/1.2 'Poppins',sans-serif;letter-spacing:.01em;color:#fff}
.or-rh h2 b{font-weight:300;color:var(--muted)}
.or-rh .or-sh.ttl{--fs:clamp(30px,2.7vw,42px);font-weight:400}
.or-rh .or-sh.ty-s{--fs:clamp(40px,3.6vw,56px)}
.or-rh .or-sh.ty-g{--fs:clamp(40px,3.4vw,54px)}
.or-rh .or-sh.ty-l{--fs:clamp(34px,3vw,46px)}
.or-rh .or-sh.ty-e{--fs:clamp(34px,3vw,46px)}
.or-rh .or-sh.ty-e::after{display:none}
.or-rh .or-sh.ty-e{flex-direction:row;align-items:baseline;gap:.3em;line-height:1}
.or-rh .or-sh.ty-e .t1{margin:0;font-size:calc(var(--fs)*.34)}
.or-rh p{font:300 14.5px/1.4 'Poppins',sans-serif;letter-spacing:.02em;color:var(--muted)}
.or-all{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:500 11px 'Poppins',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ac,#fff);text-decoration:none;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .4s cubic-bezier(.16,1,.3,1)}
.or-all svg{width:14px;height:14px}
.or-sec:hover .or-all,.or-all:focus-visible{opacity:1;transform:none}
.or-ch{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.or-rail{position:relative}
.or-track{display:flex;gap:clamp(10px,1vw,16px);overflow-x:auto;overflow-y:hidden;padding:30px var(--pad) 92px;margin:-8px 0 -50px;scroll-snap-type:x proximity;scroll-padding-left:var(--pad);scrollbar-width:none}
.or-track::-webkit-scrollbar{display:none}
.or-track>*{scroll-snap-align:start;flex:0 0 auto}
.or-ar{all:unset;box-sizing:border-box;position:absolute;z-index:5;top:30px;bottom:92px;width:clamp(44px,4vw,64px);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .3s,background .3s;color:#fff}
.or-ar.l{left:0;background:linear-gradient(90deg,rgba(14,14,34,.92),rgba(14,14,34,0))}
.or-ar.r{right:0;background:linear-gradient(270deg,rgba(14,14,34,.92),rgba(14,14,34,0))}
.or-ar svg{width:30px;height:30px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.or-ar.l svg{transform:scaleX(-1)}
.or-ar:hover svg{transform:scale(1.25)}.or-ar.l:hover svg{transform:scaleX(-1.25) scaleY(1.25)}
.or-rail:hover .or-ar,.or-ar:focus-visible{opacity:1}
.or-rail.no-l .or-ar.l,.or-rail.no-r .or-ar.r{display:none}

/* a series poster */
.or-poster{position:relative;display:block;width:clamp(210px,19vw,330px);aspect-ratio:2/3;border-radius:14px;overflow:hidden;background:#15153A;color:#fff;text-decoration:none;isolation:isolate;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.or-pimg{position:absolute;inset:0;overflow:hidden}
.or-pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--fl);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.or-poster::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(8,8,22,.92) 0%,rgba(8,8,22,.5) 34%,rgba(8,8,22,0) 62%),linear-gradient(180deg,rgba(8,8,22,.5),rgba(8,8,22,0) 22%)}
.or-poster:hover{transform:translateY(-10px) scale(1.035);box-shadow:0 26px 54px -10px rgba(var(--acr),.5),0 12px 30px rgba(0,0,0,.5)}
.or-poster:hover .or-pimg img{transform:scale(1.07)}
.or-pmk{position:absolute;z-index:2;left:16px;top:16px;display:flex;align-items:center;gap:8px;font:600 9px 'Poppins',sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--ac)}
.or-pmk i{display:block;width:2.5px;height:14px;border-radius:2px;background:var(--ac);transform:skewX(-24deg)}
.or-pb{position:absolute;z-index:2;left:18px;right:18px;bottom:18px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;--fs:clamp(34px,3.3vw,56px)}
.or-pb small{font:500 10px 'Poppins',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.or-pst{position:absolute;z-index:2;right:14px;top:12px;font:600 9px 'Poppins',sans-serif;font-style:normal;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border-radius:5px;background:rgba(8,8,22,.55);border:1px solid rgba(var(--acr),.55);color:var(--ac);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.or-poster .ty-s{--fs:clamp(44px,4.3vw,70px);flex-direction:column;gap:2px}
.or-poster .ty-g{--fs:clamp(40px,3.8vw,62px)}
.or-poster .ty-l{--fs:clamp(36px,3.5vw,58px)}
.or-poster .ty-e{--fs:clamp(44px,4.3vw,70px)}
.or-poster.dim .or-pimg img{filter:var(--fl) brightness(.8)}
.s-still-life.or-poster{background:linear-gradient(165deg,#C4701F,#5A2C0B)}
.s-still-life.or-poster .or-pimg{inset:48px 18px 34% 18px;border:7px solid #F3E7D3;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.s-still-life.or-poster::after{background:linear-gradient(0deg,rgba(30,14,4,.7) 0%,rgba(30,14,4,0) 40%)}
.or-poster.more{display:grid;place-items:center;background:transparent;border:1.5px dashed rgba(255,255,255,.28);box-shadow:none;text-align:center;cursor:default}
.or-poster.more::after{display:none}
.or-poster.more:hover{transform:none;box-shadow:none}
.or-poster.more div{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px}
.or-poster.more b{font:300 clamp(22px,2vw,30px)/1.1 'Nunito',sans-serif;letter-spacing:-.02em}
.or-poster.more small{font:500 10px 'Poppins',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.or-poster.more i{display:block;width:3px;height:44px;border-radius:2px;background:#8D7AF7;transform:skewX(-24deg);box-shadow:0 0 18px rgba(141,122,247,.9)}

/* an episode */
.or-card{position:relative;display:flex;flex-direction:column;gap:12px;width:clamp(250px,22vw,390px);color:#fff;text-decoration:none;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.or-card:hover{transform:translateY(-8px)}
.or-th{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#15153A;isolation:isolate;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:box-shadow .5s}
.or-card:hover .or-th,.or-card:focus-visible .or-th{box-shadow:0 0 0 1px rgba(var(--acr),.34),0 0 12px rgba(var(--acr),.12),0 22px 44px -10px rgba(var(--acr),.5),0 8px 24px rgba(0,0,0,.4)} /* a faint edge line on video thumbnails only */
.or-ti{position:absolute;inset:0;overflow:hidden}
.or-ti img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--fl);transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.or-card:hover .or-ti img{transform:scale(1.08)}
.or-th::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(8,8,22,.78) 0%,rgba(8,8,22,0) 46%),linear-gradient(180deg,rgba(8,8,22,.36),rgba(8,8,22,0) 30%)}
.or-en{position:absolute;z-index:2;left:12px;top:10px;font:600 10px 'Poppins',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.or-pl{position:absolute;z-index:2;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:scale(.8);transition:opacity .3s,transform .4s cubic-bezier(.16,1,.3,1),background .3s}
.or-pl svg{width:18px;height:18px;fill:#fff;margin-left:2px}
.or-card:hover .or-pl{opacity:1;transform:none}
.or-pl:hover{background:rgba(255,255,255,.3)}
.or-ln{position:absolute;z-index:2;left:12px;bottom:10px;font:500 11px 'Poppins',sans-serif;letter-spacing:.06em;color:rgba(255,255,255,.88)}
.or-ci{display:flex;flex-direction:column;gap:4px;min-width:0;padding:0 2px}
.or-ci b{font:600 17px/1.2 'Nunito',sans-serif;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.or-ci small{font:400 12px 'Poppins',sans-serif;letter-spacing:.03em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.or-ci small em{font-style:normal;font-weight:500;color:var(--ac)}
.or-card.soon .or-ti img{filter:var(--fl) brightness(.7) saturate(.7)}
.or-card.soon .or-pl{display:none}
.or-sn{position:absolute;z-index:2;right:12px;top:10px;font:600 9px 'Poppins',sans-serif;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border-radius:5px;background:rgba(8,8,22,.55);border:1px solid rgba(var(--acr),.55);color:var(--ac);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* the episodes of each series get a small touch of their own */
.s-small-hours .or-tm{position:absolute;z-index:2;right:12px;top:10px;font:200 20px/1 'Nunito',sans-serif;letter-spacing:.08em;color:var(--ac);text-shadow:0 0 12px rgba(var(--acr),.8)}
.s-still-life .or-th{padding:7px;background:#F3E7D3;border-radius:3px}
.s-still-life .or-ti{inset:7px;border-radius:1px}
.s-still-life .or-th::after{inset:7px}
.s-still-life .or-en,.s-still-life .or-ln{left:19px}
.s-still-life .or-en{top:17px}.s-still-life .or-ln{bottom:17px}
.s-still-life .or-pl{right:19px;bottom:19px}
.s-unscripted .or-ti{border-radius:inherit}
.s-in-the-edit .or-th::before{content:'';position:absolute;z-index:2;left:58%;top:-10%;width:2px;height:120%;background:linear-gradient(180deg,rgba(var(--acr),0),var(--ac) 30%,var(--ac) 70%,rgba(var(--acr),0));transform:rotate(24deg);box-shadow:0 0 12px rgba(var(--acr),.8);opacity:.7}

/* the line between the series and the closing section */
.or-sec + .or-stm{margin-top:clamp(44px,8vh,90px)}
.or-stm + .or-sec{margin-top:clamp(44px,8vh,90px)}
.or-stm{--bgr:20,19,58;--tint:rgba(80,30,220,.3);--blend:multiply;position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(520px,80vh,800px);padding:clamp(100px,16vh,170px) var(--pad) clamp(56px,10vh,104px);background:#14133A;color:#fff} /* "Why Originals": a picture behind the words, as in the Unscripted pages */
.or-stmi{position:absolute;z-index:-3;inset:0;width:100%;height:100%;object-fit:cover;object-position:0% 50%;filter:saturate(.85) contrast(1.05);transform:scale(1.04)}
.or-stm .or-tint{z-index:-2}
.or-stm .or-shade{z-index:-1}
.or-stmc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,2.6vh,24px);width:min(56vw,760px)}
.or-stm .or-lb{font:500 11px 'Poppins',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.or-stm h2{max-width:16.5em;font:300 clamp(24px,2.3vw,36px)/1.25 'Nunito',sans-serif;letter-spacing:-.015em;color:#fff}
.or-stm h2 b{font-weight:800}
.or-stm p{max-width:30em;font:300 clamp(14px,1.1vw,16.5px)/1.7 'Poppins',sans-serif;letter-spacing:.015em;color:rgba(255,255,255,.78)}
.or-stm p b{font-weight:500;color:#fff}
.or-stm h2,.or-stm p{text-wrap:pretty}

@media (prefers-reduced-motion:reduce){
  .or-rv{opacity:1;transform:none;transition:none}
  #app.go .or-hs.on>img{animation:none;transform:none}
  #app.go .or-hs.on .or-frm{animation:none}
  #app.go .or-hdot.on i::after{animation:none}
  .or-clk i{animation:none}
  .or-hs,.or-hc,.or-hc.on{transition:none}
}

/* ===== A series page. The colours come from the series' own ".s-..." block above ===== */
#orIn{transition:opacity .3s ease}
#orIn.swap{opacity:0}
.or-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.or-sv{--bg:var(--pbg,#140C07);--bgr:var(--pbgr,20,12,7);--cream:var(--pfg,#FFEFD9);--muted:var(--pmu,rgba(255,238,218,.66));--line:var(--pln,rgba(255,238,218,.16));--obg:var(--bg);position:relative;background:var(--bg);color:var(--cream);transition:opacity 1s ease .3s}
#app:not(.go) .or-sv{opacity:0;transition:none}
.or-sv .or-rh h2,.or-sv .or-sh2 h2{color:var(--cream)}
.or-sv .or-ar.l{background:linear-gradient(90deg,rgba(var(--bgr),.92),rgba(var(--bgr),0))}
.or-sv .or-ar.r{background:linear-gradient(270deg,rgba(var(--bgr),.92),rgba(var(--bgr),0))}

/* the top: one still, the title in the series' style, and the line that opens it */
.or-svh{position:relative;height:clamp(560px,calc(100vh - 84px),920px);overflow:hidden;isolation:isolate}
.or-svi{position:absolute;top:0;right:0;width:62%;height:100%;object-fit:cover;object-position:8% 50%;filter:var(--fl);transform:scale(1.06);-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
#app.go .or-svi{animation:orkb 16s ease-out forwards}
.or-svh::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(var(--bgr),.6) 0%,rgba(var(--bgr),0) 22%),linear-gradient(0deg,var(--bg) 0%,rgba(var(--bgr),0) 30%)}
.or-svc{position:absolute;inset:0;z-index:3}
.or-sv:not(.or-done) .or-svc{clip-path:polygon(0 0,calc(var(--lx,-400px) + var(--sl,60px)) 0,calc(var(--lx,-400px) - var(--sl,60px)) 100%,0 100%)}
.or-sln{position:absolute;z-index:4;left:0;top:-10%;width:2px;height:120%;background:#fff;pointer-events:none;opacity:var(--la,0);transform:translateX(var(--lx,-400px)) skewX(-24deg);box-shadow:0 0 26px 2px rgba(var(--acr),.9),0 0 0 7px rgba(var(--acr),.26)}
.or-sv.or-done .or-sln{display:none}
.or-back{position:absolute;left:var(--pad);top:clamp(96px,13vh,128px);display:inline-flex;align-items:center;gap:8px;font:500 11px 'Poppins',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.78);text-decoration:none;transition:color .3s,transform .35s cubic-bezier(.16,1,.3,1)}
.or-back svg{width:18px;height:18px}
.or-back:hover{color:var(--ac);transform:translateX(-4px)}
.or-back:focus-visible{outline:2px solid #fff;outline-offset:4px}
.or-svb{position:absolute;left:var(--pad);bottom:clamp(70px,12vh,130px);max-width:min(900px,62vw);--fs:clamp(80px,12.4vw,230px)}
.or-svb .ty-g .lg{width:calc(var(--fs)*2.3)}
.or-hc .ty-g .lg{width:calc(var(--fs)*2.8)} /* the two big ones, at the top of Originals and at the top of a series page, are smaller than the logo on posters and rows */
.or-svb .ttl{width:max-content;max-width:100%;margin:clamp(14px,2.4vh,26px) 0 clamp(14px,2.4vh,26px)}
.or-hi{margin-top:clamp(14px,2.4vh,24px);max-width:31em;font:300 clamp(14px,1.1vw,16.5px)/1.7 'Poppins',sans-serif;letter-spacing:.015em;color:rgba(255,255,255,.72)}

/* the tabs under the picture: the series, and its episodes. Outlined boxes, like the labels in the Unscripted deck */
.or-tabs{position:relative;z-index:5;display:flex;align-items:center;gap:14px;height:88px;padding:0 var(--pad);background:var(--bg);border-bottom:1px solid var(--line)}
.or-tab{appearance:none;cursor:pointer;background:transparent;padding:13px 30px;border:1px solid rgba(255,255,255,.3);font:300 clamp(13px,1.1vw,16px)/1 'Poppins',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);transition:color .3s,border-color .3s,background .3s}
.or-tab:hover{color:#fff;border-color:rgba(255,255,255,.6)}
.or-tab.on{color:#fff;border-color:#fff;background:rgba(255,255,255,.09)}
.or-tab:focus-visible{outline:2px solid var(--ac);outline-offset:4px}
.or-pn{overflow-anchor:none;outline:none;padding-bottom:clamp(60px,10vh,110px)}
.or-pn[hidden]{display:none}
.or-fade{animation:ortab .5s ease both}
@keyframes ortab{from{opacity:0}to{opacity:1}}

/* ---- the journey (The series tab). One type style all the way down: thin text with bold words, as in the deck ---- */
.or-bx{display:inline-flex;align-items:center;gap:16px;padding:13px 30px;border:1px solid rgba(255,255,255,.7);font:300 clamp(13px,1.1vw,16px)/1 'Poppins',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(var(--bgr),.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.or-bx i{font-style:normal;font-weight:500;letter-spacing:.1em;color:var(--ac)}
.or-big,.or-q,.or-sl p{font:300 clamp(22px,2.1vw,31px)/1.42 'Nunito',sans-serif;letter-spacing:-.005em;color:rgba(255,255,255,.8)}
.or-big b,.or-q b,.or-sl p b{font-weight:800;color:#fff}
.or-q{font-size:clamp(24px,2.5vw,37px);line-height:1.3;max-width:19em}
.or-cp{display:grid;gap:1.25em}
.or-cp p,.or-par .or-end{max-width:34em;font:300 clamp(15px,1.15vw,17.5px)/1.8 'Poppins',sans-serif;letter-spacing:.01em;color:var(--muted)}
.or-cp b,.or-par .or-end b{font-weight:600;color:#fff}
.or-c{position:relative}
.or-q,.or-big{text-wrap:balance}
.or-sl p,.or-cp p,.or-hi,.or-hl,.or-nt p{text-wrap:pretty} /* with the last two words held together in the copy itself, no word is left alone on a line */
.or-ct{position:relative;z-index:2}

/* the "stage" chapters: the picture stays, the words change as you scroll */
.or-seq{position:relative;height:calc(100vh + var(--n)*80vh)} /* 80vh of scrolling per step of words: the longer it is, the slower the words change */
.or-stg{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate}
.or-bgi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--fl);object-position:calc(var(--x0) + var(--p,0)*(var(--x1) - var(--x0))) 50%;transform:scale(calc(1.04 + var(--p,0)*.08))}
.or-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(var(--bgr),.72) 0%,rgba(var(--bgr),.34) 44%,rgba(var(--bgr),0) 78%),linear-gradient(0deg,rgba(var(--bgr),.8) 0%,rgba(var(--bgr),0) 44%),linear-gradient(180deg,rgba(var(--bgr),.55) 0%,rgba(var(--bgr),0) 20%)}
.or-sv{--bt:clamp(92px,14vh,150px);--lg:clamp(20px,3.4vh,32px)} /* --bt: how far the words sit above the bottom edge. --lg: the gap between a label and its words */
.or-blk{position:absolute;z-index:3;left:var(--pad);bottom:var(--bt);width:min(54vw,880px);display:flex;flex-direction:column;align-items:flex-start;gap:var(--lg)}
.or-slots{display:grid;width:100%}
.or-sl{grid-area:1/1;align-self:start;opacity:0;transform:translateY(26px);filter:blur(8px);pointer-events:none;transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1),filter .8s ease}
.or-nolab .or-sl{align-self:end} /* with no label, the last line of every step sits in the same place at the bottom */
.or-sl.on{opacity:1;transform:none;filter:none}
.or-sl p{max-width:24em}
.or-stg .or-tint{z-index:0}
/* Still Life: pictures are framed prints on a warm ground, one print for each step of words */
.or-gnd{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 62% 78% at 74% 50%,rgba(196,112,31,.5),rgba(196,112,31,0) 72%)}
.or-frs{position:absolute;z-index:2;right:var(--pad);top:50%;width:min(41vw,calc((100vh - 230px)*1.5));aspect-ratio:3/2;transform:translateY(-50%)}
.or-fr{position:absolute;inset:0;margin:0;box-sizing:border-box;border:clamp(8px,.9vw,14px) solid #F3E7D3;border-radius:3px;background:#F3E7D3;box-shadow:0 26px 60px -12px rgba(0,0,0,.65),0 8px 20px rgba(0,0,0,.4)}
.or-fr img{display:block;width:100%;height:100%;object-fit:cover}
.or-fr.or-sl{filter:none;transform:translateY(22px) scale(.985)}
.or-fr.or-sl.on{opacity:1;transform:none}
.or-svf{position:absolute;z-index:1;right:calc(var(--pad) + 2vw);top:48%;width:min(40vw,640px);aspect-ratio:3/2;margin:0;box-sizing:border-box;border:clamp(8px,.9vw,14px) solid #F3E7D3;border-radius:3px;background:#F3E7D3;transform:translateY(-50%);box-shadow:0 30px 70px -14px rgba(0,0,0,.65),0 8px 20px rgba(0,0,0,.4)}
.or-svf img{display:block;width:100%;height:100%;object-fit:cover}
.or-svf figcaption{position:absolute;left:0;top:100%;margin-top:16px;font:300 11px 'Poppins',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.or-svh .or-gnd{z-index:0}
.or-frame .or-c-cta{background:radial-gradient(ellipse 60% 80% at 74% 50%,rgba(196,112,31,.4),rgba(196,112,31,0) 70%)}
.or-frame .or-cim{top:50%;bottom:auto;right:var(--pad);width:min(40vw,640px);height:auto;aspect-ratio:3/2;transform:translateY(-50%);box-sizing:border-box;border:clamp(8px,.9vw,14px) solid #F3E7D3;border-radius:3px;background:#F3E7D3;box-shadow:0 30px 70px -14px rgba(0,0,0,.65),0 8px 20px rgba(0,0,0,.4);-webkit-mask-image:none;mask-image:none}
.or-frame .or-cim::after{display:none}
.or-frame .or-ec:not(.more){box-sizing:border-box;border:clamp(7px,.7vw,10px) solid #F3E7D3;border-radius:3px}
.or-pg{position:absolute;z-index:3;left:var(--pad);bottom:clamp(30px,5vh,52px);display:flex;gap:8px}
.or-pg i{display:block;width:34px;height:2px;border-radius:2px;background:rgba(255,255,255,.22);transition:background .5s,width .5s}
.or-pg i.on{background:var(--ac)}
.or-strips{position:absolute;z-index:3;right:var(--pad);top:50%;transform:translateY(-50%);display:grid;gap:10px;width:min(24vw,calc((78vh - 30px)/4*2.35))}
.or-sx{display:block;width:100%;aspect-ratio:908/386;object-fit:cover;border-radius:4px;opacity:.32;filter:var(--fl) saturate(.7);transform:translateX(0) scale(.98);transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1),filter .7s}
.or-sx.on{opacity:1;filter:var(--fl);transform:translateX(-18px) scale(1)}

/* 02 People is a stage like the idea and the stories: a still behind, three small stills on the right that light up one by one */
/* 04 The invitation: the still sits to the right and fades into the ground; the words sit bottom left, like every other chapter */
.or-c-cta{display:flex;align-items:flex-end;min-height:100vh;padding:clamp(100px,16vh,170px) var(--pad) var(--bt);overflow:hidden;isolation:isolate}
.or-cim{position:absolute;top:0;bottom:0;right:0;width:58%;margin:0;overflow:hidden;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 36%);mask-image:linear-gradient(90deg,transparent,#000 36%)}
.or-cim::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--bg) 0%,rgba(var(--bgr),0) 16%,rgba(var(--bgr),0) 78%,var(--bg) 100%)}
.or-cim img{display:block;width:100%;height:100%;object-fit:cover;filter:var(--fl);transform:translateY(calc((var(--p,.5) - .5)*-70px)) scale(1.14)}
.or-c-cta .or-ct{max-width:min(620px,44vw)}
.or-c-cta .or-ct>.or-bx{margin-bottom:var(--lg)}
.or-c-cta .or-big{margin:0 0 clamp(22px,4vh,38px)}
.or-ml{font:400 15px 'Poppins',sans-serif;letter-spacing:.04em;color:var(--muted)}
.or-c-cta .or-hact{flex-wrap:wrap;gap:18px 24px;margin-top:clamp(26px,4.5vh,44px)}
.or-lnk{appearance:none;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:500 11px 'Poppins',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#fff;padding:8px 0}
.or-lnk:focus-visible{outline:2px solid var(--ac);outline-offset:4px;border-radius:4px}

/* ---- the episodes tab: a season list and a grid of cards, in the deck's episode style ---- */
.or-eps{padding:clamp(40px,7vh,80px) var(--pad) 0}
.or-eh{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.or-dd{position:relative;display:inline-block}
.or-ddb{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:34px;padding:13px 20px 13px 26px;border:1px solid rgba(255,255,255,.7);background:rgba(var(--bgr),.4);font:300 clamp(13px,1.1vw,16px)/1 'Poppins',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff;transition:background .3s,border-color .3s}
.or-ddb:hover,.or-dd.open .or-ddb{background:rgba(255,255,255,.1)}
.or-ddb:focus-visible{outline:2px solid var(--ac);outline-offset:4px}
.or-ddb svg{flex:none;width:16px;height:16px;transform:rotate(90deg);transition:transform .35s cubic-bezier(.16,1,.3,1);stroke:#fff;fill:none;stroke-width:2}
.or-dd.open .or-ddb svg{transform:rotate(-90deg)}
.or-ddl{position:absolute;z-index:30;left:0;top:calc(100% + 8px);min-width:100%;margin:0;padding:6px;list-style:none;border:1px solid rgba(255,255,255,.3);border-radius:6px;background:rgba(var(--bgr),.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 24px 60px rgba(0,0,0,.5);opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.or-ddl[hidden]{display:none}
.or-dd.open .or-ddl{opacity:1;transform:none}
.or-ddl li{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:13px 16px 13px 22px;border-radius:4px;cursor:pointer;white-space:nowrap;font:300 clamp(13px,1.1vw,16px)/1 'Poppins',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82);transition:background .2s,color .2s}
.or-ddl li svg{width:15px;height:15px;stroke:var(--ac);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.or-ddl li:hover,.or-ddl li.act{background:rgba(var(--acr),.14);color:#fff}
.or-ddl li[aria-selected="true"]{color:#fff}
.or-ddl li[aria-selected="true"] svg{opacity:1}
.or-ddl li[aria-selected="true"]::before{content:'';position:absolute;left:8px;top:50%;width:3px;height:14px;margin-top:-7px;border-radius:2px;background:var(--ac);transform:skewX(-24deg);box-shadow:0 0 10px rgba(var(--acr),.7)}
.or-ecn{font:300 12px 'Poppins',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.or-eg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(22px,4vh,38px)}
.or-ec{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:#0a0f0e;color:#fff;text-decoration:none}
.or-ec img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--fl) brightness(.5);transition:transform 1.4s cubic-bezier(.16,1,.3,1),filter .6s}
.or-ec:hover img,.or-ec:focus-visible img{transform:scale(1.05);filter:var(--fl) brightness(.7)}
.or-ec::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--bgr),.7) 0%,rgba(var(--bgr),0) 45%)}
.or-ec .bx{position:absolute;z-index:2;left:50%;top:41%;transform:translate(-50%,-50%);white-space:nowrap;padding:11px 30px;border:1px solid rgba(255,255,255,.8);font:300 clamp(13px,1.15vw,17px)/1 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;transition:background .35s,color .35s}
.or-ec:hover .bx,.or-ec:focus-visible .bx{background:#fff;color:#1A1A1C}
.or-ec .tl{position:absolute;z-index:2;left:12px;right:12px;top:calc(41% + 40px);text-align:center;font:300 clamp(11px,.9vw,13px)/1.4 'Poppins',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.or-ec .tl::before{content:'– '}
.or-ec .tl::after{content:' –'}
.or-ec .cw{position:absolute;z-index:2;right:16px;bottom:14px;display:flex;align-items:center;gap:8px;font:300 11px 'Poppins',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.or-ec .cw svg{width:18px;height:18px}
.or-ec .lt{position:absolute;z-index:2;left:16px;top:14px;font:500 10px 'Poppins',sans-serif;font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:var(--ac)}
.or-ec .ln{position:absolute;z-index:2;left:16px;bottom:14px;font:300 11px 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.or-ec:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.or-ec.more{display:grid;place-items:center;background:transparent;border:1px dashed rgba(255,255,255,.28);text-align:center}
.or-ec.more::after{display:none}
.or-ec.more span{font:300 clamp(14px,1.2vw,17px)/1.5 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.or-ec.more i{display:block;width:3px;height:26px;margin:0 auto 14px;border-radius:2px;background:var(--ac);transform:skewX(-24deg);box-shadow:0 0 14px rgba(var(--acr),.7)}
.or-more{margin:clamp(22px,4vh,38px) auto 0;display:flex;padding:13px 30px;border:1px solid rgba(255,255,255,.5);font:300 13px/1 'Poppins',sans-serif;letter-spacing:.16em}
.or-more[hidden]{display:none}
.or-more:hover{background:rgba(255,255,255,.1)}

/* a series with no films yet: the Episodes tab says so, with room for a trailer */
.or-cs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(28px,5vw,88px);padding:clamp(48px,9vh,96px) var(--pad) 0}
.or-cse{display:flex;align-items:center;gap:12px;font:600 11px 'Poppins',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--ac)}
.or-cse i{display:block;width:3px;height:20px;border-radius:2px;background:var(--ac);transform:skewX(-24deg);box-shadow:0 0 12px rgba(var(--acr),.8)}
.or-cbig{margin:clamp(18px,3vh,28px) 0 0;font-size:clamp(44px,5.4vw,92px);line-height:1.02;letter-spacing:-.02em}
.or-csp{margin:clamp(18px,3vh,28px) 0 0;max-width:26em;font:300 clamp(15px,1.25vw,19px)/1.6 'Poppins',sans-serif;color:var(--muted);text-wrap:pretty}
.or-cs .or-hact{margin-top:clamp(26px,4.5vh,40px)}
.or-tr{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:#0a0f0e;color:#fff;text-decoration:none;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.or-tr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--fl) brightness(.55);transition:transform 1.4s cubic-bezier(.16,1,.3,1),filter .6s}
.or-tr::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--bgr),.78) 0%,rgba(var(--bgr),0) 55%)}
.or-tr:is(a):hover img,.or-tr:is(a):focus-visible img{transform:scale(1.05);filter:var(--fl) brightness(.72)}
.or-tr:focus-visible{outline:2px solid var(--ac);outline-offset:4px}
.or-trp{position:absolute;z-index:2;left:50%;top:46%;width:clamp(58px,5.4vw,84px);height:clamp(58px,5.4vw,84px);margin:calc(clamp(58px,5.4vw,84px) / -2) 0 0 calc(clamp(58px,5.4vw,84px) / -2);display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(var(--bgr),.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .3s,transform .4s cubic-bezier(.16,1,.3,1)}
.or-trp svg{width:38%;height:38%;fill:#fff;margin-left:6%}
.or-tr:is(a):hover .or-trp{background:var(--ac);transform:scale(1.06)}
.or-tr:is(a):hover .or-trp svg{fill:#0C1311}
.or-trl{position:absolute;z-index:2;left:0;right:0;bottom:clamp(16px,2.6vh,26px);text-align:center;font:300 clamp(11px,.95vw,14px)/1.5 'Poppins',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.or-trl b{display:block;font-weight:500;color:var(--ac);letter-spacing:.3em}
.or-trn .or-trp{opacity:.8}
.or-trn img{animation:ortrn 16s ease-in-out infinite alternate}
@keyframes ortrn{from{transform:scale(1.04)}to{transform:scale(1.12)}}

/* tell me when the next one is out (Episodes tab) */
.or-nt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(14px,2vh,18px);width:min(520px,calc(100% - 2*var(--pad)));margin:clamp(40px,6vh,64px) auto 0;padding:clamp(20px,3vh,28px) clamp(20px,2.4vw,32px);border:1px solid rgba(255,255,255,.22)} /* a small centred box, not a full-width bar */
.or-nt h2{font:300 clamp(19px,1.5vw,23px)/1.2 'Nunito',sans-serif;letter-spacing:-.01em;color:rgba(255,255,255,.82)}
.or-nt h2 b{font-weight:800;color:#fff}
.or-nt p{margin:6px auto 0;font:300 13.5px/1.55 'Poppins',sans-serif;color:var(--muted);max-width:30em;text-wrap:balance}
.or-nf{display:flex;flex:none;width:min(360px,100%);gap:6px;padding:4px;border-radius:999px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.3);transition:border-color .3s,box-shadow .3s}
.or-nf:focus-within{border-color:var(--ac);box-shadow:0 0 0 4px rgba(var(--acr),.18)}
.or-nf.err{border-color:#FF8A8A}
.or-nf input{flex:1;min-width:0;border:0;background:transparent;padding:0 14px;font:300 13.5px 'Poppins',sans-serif;color:var(--cream);outline:none}
.or-nf input::placeholder{color:rgba(255,255,255,.5)}
.or-nf .or-hp{position:absolute;left:-9999px;flex:none;width:1px;height:1px;padding:0;opacity:0;pointer-events:none} /* a field only a robot fills in */
.or-nf .or-btn{height:32px;padding:0 16px;border:0;font:500 10.5px 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.or-sv>.or-sec{margin-top:0;padding-top:clamp(56px,9vh,96px);padding-bottom:clamp(20px,4vh,50px)}
.or-sv>.or-sec::before{content:'';position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:var(--line);pointer-events:none} /* the thin grey line above "More from HTC Originals" */

/* the YouTube player */
.or-lbx{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:clamp(20px,4vw,70px);background:rgba(6,10,9,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s ease}
.or-lbx[hidden]{display:none}
.or-lbx.on{opacity:1}
.or-lbw{width:min(100%,calc((100vh - 170px)*16/9));display:flex;flex-direction:column;gap:14px}
.or-lbf{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.or-lbf iframe,.or-lbf video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.or-lbo{position:absolute;inset:0;display:block;color:#fff;text-decoration:none}
.or-lbo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.or-lbo .pl{position:absolute;left:50%;top:44%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.8);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.or-lbo:hover .pl{transform:scale(1.1)}
.or-lbo .pl svg{width:28px;height:28px;fill:#fff;margin-left:3px}
.or-lbo .tx{position:absolute;left:0;right:0;top:calc(44% + 66px);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.or-lbo .tx b{font:500 12px 'Poppins',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#D6D7DA}
.or-lbo .tx small{font:300 14px 'Poppins',sans-serif;color:rgba(255,255,255,.72)}
.or-lbo:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.or-lbt{display:flex;align-items:center;justify-content:space-between;gap:20px;font:300 15px 'Poppins',sans-serif;color:rgba(255,255,255,.7)}
.or-lbt b{font:600 clamp(18px,1.6vw,24px)/1.2 'Nunito',sans-serif;color:#fff}
.or-lbt a{font:500 11px 'Poppins',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#D6D7DA;text-decoration:none;white-space:nowrap}
.or-lbt a:hover{text-decoration:underline}
.or-lbc{position:absolute;top:clamp(14px,2vw,28px);right:clamp(14px,2vw,28px);width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .3s,transform .35s}
.or-lbc:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}
.or-lbc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.or-lbc:focus-visible,.or-lbt a:focus-visible{outline:2px solid #fff;outline-offset:3px}

.or-top{all:unset;box-sizing:border-box;position:absolute;z-index:6;right:14px;bottom:28px;display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:44px;padding:0 13px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(14,14,34,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 11px 'Poppins',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#fff;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease,background .3s,color .3s,border-color .3s,visibility 0s .35s} /* back to the top of the Originals pages: a round arrow in the page margin, so it never sits on the words; it opens to say what it is on hover */
.or-top svg{flex:none;width:18px;height:18px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.or-top span{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .4s cubic-bezier(.16,1,.3,1),opacity .3s,margin .4s}
.or-top:hover span,.or-top:focus-visible span{max-width:110px;margin-left:10px;margin-right:4px;opacity:1}
.or-top.show{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.or-top:hover{background:#fff;color:#161632;border-color:#fff}
.or-top:hover svg{transform:translateY(-2px)}
.or-top:focus-visible{outline:2px solid #fff;outline-offset:3px}
#app:not([data-page="originals"]) .or-top{display:none}

@media (prefers-reduced-motion:reduce){
  .or-top,.or-top.show{transition:opacity .3s}.or-top{transform:none}
  #app.go .or-svi{animation:none;transform:none}.or-sv,#orIn{transition:none}
  .or-cim img{transform:none}.or-bgi{transform:none}
  .or-sl{transition:opacity .3s;transform:none;filter:none}.or-sx,.or-sx.on{transition:opacity .3s;transform:none}
  .or-trn img{animation:none}.or-ddl,.or-ddb svg{transition:none}
}

/* ---------- responsive ---------- */
/* Tablet and below. The desktop rules above are untouched: everything new lives in these blocks. */
@media (max-width:1024px){
  #originalsScroll{--pad:clamp(20px,5vw,40px)}

  /* the big picture at the top of Originals */
  .or-hero{height:clamp(560px,calc(100vh - 56px),860px);height:clamp(560px,calc(100dvh - 56px),860px)}
  .or-hc{max-width:min(740px,72vw);--fs:clamp(64px,10.4vw,112px)}
  .or-hl{font-size:clamp(20px,2.7vw,26px)}
  .or-hm{font-size:15px}
  .or-snd{bottom:calc(clamp(118px,19vh,190px) + 56px)}
  .or-hdot{height:44px}
  .or-all{min-height:44px}
  .or-back{padding:14px 0}
  .or-pvs{right:auto;left:var(--pad);top:96px;bottom:auto;max-width:calc(100% - 2*var(--pad));white-space:normal;line-height:1.5;text-align:center}

  /* the rows */
  .or-poster{width:clamp(220px,28vw,300px)}
  .or-card{width:clamp(260px,36vw,340px)}
  .or-track{overscroll-behavior-x:contain}
  .or-rh p{font-size:15px}
  .or-stm{min-height:clamp(480px,66vh,720px);min-height:clamp(480px,66dvh,720px)}
  .or-stmc{width:min(72vw,760px)}
  .or-stm h2{font-size:clamp(26px,3.5vw,36px)}
  .or-stm p{font-size:clamp(15px,2vw,16.5px)}

  /* a series page */
  .or-svh{height:clamp(560px,calc(100vh - 88px),860px);height:clamp(560px,calc(100dvh - 88px),860px)}
  .or-svb{max-width:min(900px,86vw);--fs:clamp(88px,16.5vw,170px)}
  .or-hi{font-size:clamp(15px,2vw,16.5px)}
  .or-tab,.or-bx,.or-ddb,.or-ddl li{font-size:clamp(13px,1.8vw,16px)}
  .or-tab{min-height:48px}
  .or-ddb{min-height:48px}
  .or-ddl li{padding-top:15px;padding-bottom:15px}

  /* the journey: words that change as you scroll */
  .or-seq{height:calc(100vh + var(--n)*80vh);height:calc(100dvh + var(--n)*80dvh)}
  .or-stg{height:100vh;height:100dvh}
  .or-big,.or-q,.or-sl p{font-size:clamp(22px,3.4vw,31px)}
  .or-q{font-size:clamp(24px,3.7vw,37px)}
  .or-cp p,.or-par .or-end{font-size:clamp(15px,2.1vw,17.5px)}
  .or-c-cta{min-height:100vh;min-height:100dvh}

  /* the episodes tab */
  .or-eg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .or-more{min-height:48px;align-items:center}
  .or-nf{padding:5px}
  .or-nf input{height:44px;font-size:16px}
  .or-nf .or-btn{height:44px;padding:0 22px}
  .or-nt p{font-size:15px}
  .or-lbx{padding:clamp(16px,4vw,40px)}
  .or-lbw{width:min(100%,calc((100vh - 150px)*16/9));width:min(100%,calc((100dvh - 150px)*16/9))}
}

@media (max-width:1024px) and (orientation:landscape){
  .or-frame .or-blk{width:min(50vw,calc(100% - 41vw - 2*var(--pad) - 20px))} /* the words stay clear of the framed print */
  .or-frame .or-svb{max-width:calc(100% - 42vw - 2*var(--pad) - 20px)}
}

@media (min-width:641px) and (max-width:1024px) and (orientation:portrait){
  .or-svf{left:0;right:0;margin:0 auto;top:clamp(112px,11vh,150px);width:min(46vw,380px);transform:none} /* the framed print sits above the title, not on it */
  .or-frame .or-svb{bottom:44px;--fs:clamp(80px,12.4vw,130px)}
}

/* Phones */
@media (max-width:640px){
  #originalsScroll{--pad:clamp(20px,5.4vw,32px)}

  /* the big picture at the top of Originals: the series fills a portrait screen, words and buttons sit at the bottom */
  .or-hero{height:clamp(540px,calc(100vh - 80px),800px);height:clamp(540px,calc(100dvh - 80px),800px)}
  .or-hs::after{background:linear-gradient(180deg,rgba(8,8,22,.55) 0%,rgba(8,8,22,0) 22%),linear-gradient(0deg,var(--obg) 0%,rgba(8,8,22,.9) 28%,rgba(8,8,22,.55) 54%,rgba(8,8,22,0) 80%)}
  .or-hs.frame::after{background:linear-gradient(180deg,rgba(14,8,4,.5) 0%,rgba(14,8,4,0) 22%),linear-gradient(0deg,var(--obg) 0%,rgba(18,9,3,.86) 30%,rgba(18,9,3,.4) 56%,rgba(18,9,3,0) 80%)}
  .or-hs>img{height:76%}
  .or-frm{left:0;right:0;margin:0 auto;top:104px;width:min(72vw,400px);transform:rotate(-1.4deg)}
  #app.go .or-hs.on .or-frm{animation-name:orfrm}
  @keyframes orfrm{from{transform:translateY(16px) rotate(-3deg);opacity:0}to{transform:rotate(-1.4deg);opacity:1}}
  .or-hc{left:var(--pad);right:var(--pad);bottom:68px;max-width:none;--fs:clamp(66px,20vw,92px)}
  .or-badge{width:auto;flex-wrap:wrap;gap:4px 12px;font-size:10.5px;letter-spacing:.24em}
  .or-hc .ttl{margin:14px 0 14px}
  .or-hl{font-size:clamp(19px,5.4vw,23px)}
  .or-hm{margin-top:12px;gap:8px 14px;font-size:15px}
  .or-hact{flex-wrap:wrap;gap:10px;margin-top:20px}
  .or-btn{flex:1 1 auto;justify-content:center;white-space:nowrap;height:52px;padding:0 20px}
  .or-hd{left:var(--pad);right:auto;bottom:14px}
  .or-snd{right:var(--pad);bottom:20px}
  .or-pvs{top:92px;font-size:10px;padding:10px 16px}

  /* the rows: posters and episodes swipe sideways, the next one always peeks in */
  .or-track{gap:12px;padding:14px var(--pad) 34px;margin:-6px 0 -12px}
  .or-ar{display:none}
  .or-poster{width:clamp(200px,56vw,250px)}
  .or-card{width:clamp(236px,68vw,300px)}
  .or-sec{margin-top:clamp(14px,3vh,26px)}
  .or-rh{gap:4px 14px}
  .or-rh p{width:100%}
  .or-all{margin-left:0;min-height:44px;font-size:11px}
  .or-pmk,.or-pst,.or-sn{font-size:9.5px}
  .or-pb small{font-size:10px}
  .or-ci small{font-size:12.5px}
  .or-sec + .or-stm,.or-stm + .or-sec{margin-top:clamp(36px,6vh,60px)}
  .or-stm{min-height:0;padding:min(38vh,320px) var(--pad) 56px}
  .or-stmc{width:100%}
  .or-stm h2{font-size:clamp(26px,7.4vw,32px)}
  .or-stm p{font-size:15px;line-height:1.7}
  .or-stm .or-lb{font-size:11px}
  .or-stmi{object-position:58% 50%}

  /* a series page: the top */
  .or-svh{height:clamp(540px,calc(100vh - 88px),820px);height:clamp(540px,calc(100dvh - 88px),820px)}
  .or-svi{left:0;right:auto;width:100%;height:80%;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
  .s-unscripted .or-svi{object-position:44% 50%!important} /* the walking man sits in the middle, not at the edge */
  .or-svh::after{background:linear-gradient(180deg,rgba(var(--bgr),.65) 0%,rgba(var(--bgr),0) 22%),linear-gradient(0deg,var(--bg) 0%,rgba(var(--bgr),.92) 30%,rgba(var(--bgr),.5) 58%,rgba(var(--bgr),0) 82%)}
  .or-back{top:80px;padding:14px 0}
  .or-svf{left:0;right:0;margin:0 auto;top:150px;width:min(74vw,400px);transform:none}
  .or-svb{left:var(--pad);right:var(--pad);bottom:26px;max-width:none;--fs:clamp(80px,26vw,118px)}
  .or-svb .ttl{margin:14px 0}
  .or-hi{font-size:15px;line-height:1.65}
  .or-tabs{height:auto;padding:16px var(--pad);gap:12px}
  .or-tab{flex:1 1 0;padding:0 8px;min-height:48px}

  /* the journey: one column, the pinned words use the full width */
  .or-seq{height:calc(100vh + var(--n)*72vh);height:calc(100dvh + var(--n)*72dvh)}
  .or-sv{--bt:clamp(84px,12vh,110px)}
  .or-blk{left:var(--pad);right:var(--pad);width:auto}
  .or-sl p{max-width:none}
  .or-big,.or-q,.or-sl p{font-size:clamp(21px,5.8vw,26px);line-height:1.4}
  .or-q{font-size:clamp(24px,7vw,30px);line-height:1.3}
  .or-cp p,.or-par .or-end{font-size:15px;line-height:1.75}
  .or-shade{background:linear-gradient(0deg,rgba(var(--bgr),.9) 0%,rgba(var(--bgr),.74) 40%,rgba(var(--bgr),.26) 72%,rgba(var(--bgr),0) 100%),linear-gradient(180deg,rgba(var(--bgr),.6) 0%,rgba(var(--bgr),0) 18%)}
  .or-pg{left:var(--pad);bottom:34px}
  .or-pg i{width:28px}
  .or-strips{left:var(--pad);right:var(--pad);top:92px;width:auto;transform:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
  .or-sx{aspect-ratio:4/3}
  .or-sx.on{transform:translateY(-4px) scale(1)}
  .or-gnd{background:radial-gradient(ellipse 100% 44% at 50% 26%,rgba(196,112,31,.5),rgba(196,112,31,0) 72%)}
  .or-frs{--fh:clamp(120px,calc(100vh - 560px),233px);--fh:clamp(120px,calc(100dvh - 560px),233px);left:50%;right:auto;top:92px;width:min(calc(100% - 2*var(--pad)),calc(var(--fh)*1.5));transform:translateX(-50%)}

  /* "Be part of it": the picture on top, the words under it */
  .or-c-cta{display:block;min-height:0;padding:0 0 clamp(56px,9vh,90px)}
  .or-cim{position:relative;top:auto;bottom:auto;right:auto;width:100%;height:clamp(250px,42vh,400px);-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
  .or-cim::after{display:none}
  .or-c-cta .or-ct{max-width:none;padding:0 var(--pad);margin-top:-26px}
  .or-c-cta .or-big{margin-bottom:22px}
  .or-frame .or-c-cta{background:radial-gradient(ellipse 100% 40% at 50% 20%,rgba(196,112,31,.4),rgba(196,112,31,0) 70%)}
  .or-frame .or-cim{position:relative;top:auto;right:auto;width:calc(100% - 2*var(--pad));height:auto;margin:92px auto 0;transform:none;mask-image:none;-webkit-mask-image:none}
  .or-frame .or-c-cta .or-ct{margin-top:40px}

  /* the episodes tab */
  .or-eps{padding:32px var(--pad) 0}
  .or-eh{gap:14px}
  .or-eg{grid-template-columns:minmax(0,1fr);gap:14px}
  .or-ec .tl{font-size:12px}
  .or-cs{grid-template-columns:minmax(0,1fr);gap:30px;padding:36px var(--pad) 0}
  .or-cbig{font-size:clamp(40px,12vw,58px)}
  .or-csp{font-size:15px}
  .or-cs .or-hact{margin-top:24px}
  .or-nt{width:calc(100% - 2*var(--pad));padding:24px 18px;margin-top:36px}
  .or-nt h2{font-size:21px}
  .or-nf{flex-direction:column;width:100%;padding:8px;gap:8px;border-radius:20px}
  .or-nf input{flex:0 0 auto;height:48px;padding:0 14px;font-size:16px}
  .or-nf .or-btn{width:100%;height:48px;font-size:12px}
  .or-sv>.or-sec{padding-top:48px}

  /* the film player */
  .or-lbw{gap:12px}
  .or-lbt{flex-wrap:wrap;gap:4px 16px}
  .or-lbt a{display:inline-flex;align-items:center;min-height:44px}
  .or-lbo .pl{width:60px;height:60px;margin:-30px 0 0 -30px;top:38%}
  .or-lbo .tx{top:auto;bottom:12px;gap:4px;padding:0 12px}
  .or-lbo .tx small{font-size:12.5px;line-height:1.4}
}

/* A phone on its side: the screen is short, so the pictures and words are sized by height */
@media (max-width:1024px) and (max-height:520px){
  .or-hero{height:max(420px,calc(100vh - 24px));height:max(420px,calc(100dvh - 24px))}
  .or-hc{bottom:56px;max-width:min(560px,62vw);--fs:clamp(52px,17vh,76px)}
  .or-clk,.or-tcd{margin-top:10px}
  .or-tlb{display:none}
  .or-hl{font-size:clamp(17px,4.6vh,22px)}
  .or-hc .ttl{margin:10px 0}
  .or-hm{margin-top:10px}
  .or-hact{margin-top:14px}
  .or-btn{height:46px}
  .or-hd{bottom:20px}
  .or-svh{height:max(440px,calc(100vh - 24px));height:max(440px,calc(100dvh - 24px))}
  .or-svb{bottom:24px;--fs:clamp(64px,19vh,100px)}
  .or-svb .ttl{margin:10px 0}
  .or-back{top:72px}
  .or-sv{--bt:clamp(52px,14vh,70px);--lg:12px}
  .or-blk{width:min(58vw,720px)}
  .or-big,.or-q,.or-sl p{font-size:clamp(16px,5.4vh,22px);line-height:1.38}
  .or-q{font-size:clamp(18px,6.6vh,26px)}
  .or-bx{padding:9px 18px;font-size:11px}
  .or-pg{bottom:20px}
  .or-lbx{padding:12px}
  .or-lbw{width:min(100%,calc((100vh - 110px)*16/9));width:min(100%,calc((100dvh - 110px)*16/9))}
}

/* Touch screens: nothing may depend on hover */
@media (hover:none){
  .or-ar{display:none}
  .or-all{opacity:1;transform:none}
  .or-poster:hover{transform:none;box-shadow:0 10px 30px rgba(0,0,0,.35)}
  .or-poster:hover .or-pimg img{transform:none}
  .or-card:hover{transform:none}
  .or-card:hover .or-th{box-shadow:0 8px 24px rgba(0,0,0,.35)}
  .or-card:hover .or-ti img{transform:none}
  .or-card .or-pl{opacity:1;transform:none}
  .or-btn.p:hover{transform:none;box-shadow:none}
  .or-btn.g:hover{background:rgba(255,255,255,.14);transform:none}
  .or-back:hover{color:rgba(255,255,255,.78);transform:none}
  .or-tab:not(.on):hover{color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.3)}
  .or-dd:not(.open) .or-ddb:hover{background:rgba(var(--bgr),.4)}
  .or-ddl li:hover:not(.act){background:transparent;color:rgba(255,255,255,.82)}
  .or-ec:hover img{transform:none;filter:var(--fl) brightness(.5)}
  .or-ec:hover .bx{background:transparent;color:#fff}
  .or-tr:is(a):hover img{transform:none;filter:var(--fl) brightness(.55)}
  .or-tr:is(a):hover .or-trp{background:rgba(var(--bgr),.4);transform:none}
  .or-tr:is(a):hover .or-trp svg{fill:#fff}
  .or-more:hover{background:transparent}
  .or-lbo:hover .pl,.or-lbc:hover{transform:none}
  .or-lbc:hover{background:rgba(255,255,255,.08)}
  .or-top:hover{background:rgba(14,14,34,.66);color:#fff;border-color:rgba(255,255,255,.5)}
  .or-top:hover svg{transform:none}
  .or-top:hover span{max-width:0;margin:0;opacity:0}
  .or-snd:hover{background:rgba(14,14,34,.45)}
}

/* ---------- phone, round 2 ---------- */
/* A careful tidy of the phone view, not a redesign: the same pages, pictures and movement, with smaller buttons and type and a little more room between things.
   Everything is inside the phone query, so nothing above 640px changes. Buttons look about 40px tall; the ::after reaches a few px past the pill so the touch area stays 44px. */
@media (max-width:640px){
  /* buttons: small pills with small capitals, as wide as their words */
  .or-btn{position:relative;flex:0 0 auto;height:40px;padding:0 17px 0 14px;gap:8px;font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
  .or-btn::after{content:'';position:absolute;inset:-3px -6px}
  .or-btn svg{width:16px;height:16px}

  /* Originals home: the big picture */
  .or-hc{bottom:80px}
  .or-hc .ttl{margin:16px 0}
  .or-hl{font-size:clamp(17px,4.8vw,19px);line-height:1.38}
  .or-hm{margin-top:14px;gap:10px 14px;font-size:13px}
  .or-hact{gap:10px;margin-top:26px}
  .or-hd{bottom:16px}
  .or-snd{width:40px;height:40px;bottom:20px}
  .or-snd::after{content:'';position:absolute;inset:-2px}
  .or-snd svg{width:18px;height:18px}

  /* the rows: more air round the headings, and the poster tag no longer sits on the "HTC Original" label (the row heading already says it) */
  .or-rows{padding-top:14px}
  .or-sec{margin-top:clamp(44px,6.5vh,58px)}
  .or-rh{gap:12px 14px;margin-bottom:0}
  .or-rh h2{font-size:18px}
  .or-rh p{font-size:14px;line-height:1.5}
  .or-all{position:relative;min-height:0;margin-top:2px}
  .or-all::after{content:'';position:absolute;inset:-14px -8px}
  .or-track{padding-top:26px;margin-top:0}
  .or-pmk{display:none}
  .or-pst{left:16px;right:auto;top:16px}
  .or-card{gap:14px}
  .or-pl{width:40px;height:40px}
  .or-pl svg{width:16px;height:16px}
  .or-ci{gap:5px}
  .or-ci b{font-size:16px}
  .or-ci small{font-size:12px}
  .or-ln{font-size:10.5px}
  .or-sec + .or-stm,.or-stm + .or-sec{margin-top:clamp(56px,8vh,72px)}

  /* "Why Originals" */
  .or-stm{padding-bottom:72px}
  .or-stmc{gap:20px}
  .or-stm .or-lb{font-size:10.5px}
  .or-stm h2{font-size:clamp(24px,6.8vw,27px);line-height:1.3}
  .or-stm p{font-size:14.5px;line-height:1.75}

  /* a series page: the top */
  .or-svb{bottom:34px}
  .or-svb .ttl{margin:18px 0}
  .or-hi{margin-top:16px;font-size:14.5px;line-height:1.7}
  .or-tabs{padding:22px var(--pad);gap:12px}
  .or-tab{position:relative;min-height:42px;font-size:11px;letter-spacing:.14em}
  .or-tab::after{content:'';position:absolute;inset:-2px -4px}

  /* the journey: smaller labels and words, and room under the last button */
  .or-bx{padding:11px 16px;gap:12px;font-size:11px}
  .or-big,.or-q,.or-sl p{font-size:clamp(19px,5.3vw,22px);line-height:1.45}
  .or-q{font-size:clamp(22px,6.5vw,26px);line-height:1.32}
  .or-c-cta .or-big{font-size:clamp(21px,5.8vw,26px);line-height:1.4}
  .or-cp p,.or-par .or-end{font-size:14.5px;line-height:1.75}
  .or-c-cta .or-hact{flex-direction:column;align-items:flex-start;gap:20px;margin-top:32px}
  .or-ml{font-size:13px}

  /* the episodes tab */
  .or-eps{padding-top:40px}
  .or-ddb{position:relative;min-height:42px;padding:0 16px 0 20px;gap:26px;font-size:11px;letter-spacing:.14em}
  .or-ddb::after{content:'';position:absolute;inset:-2px -4px}
  .or-ddb svg{width:14px;height:14px}
  .or-ddl li{min-height:44px;gap:24px;padding:0 14px 0 22px;font-size:11px;letter-spacing:.14em}
  .or-ecn{font-size:11px}
  .or-eg{gap:16px;margin-top:28px}
  .or-ec .bx{padding:10px 22px;font-size:11px;letter-spacing:.16em}
  .or-ec .tl{top:calc(41% + 34px);font-size:11px}
  .or-ec .cw,.or-ec .ln{font-size:10.5px}
  .or-more{position:relative;min-height:42px;padding:0 22px;font-size:11px;letter-spacing:.16em}
  .or-more::after{content:'';position:absolute;inset:-2px -4px}
  .or-cs{gap:34px;padding-top:44px}
  .or-cbig{margin-top:20px;font-size:clamp(30px,9vw,36px)}
  .or-csp{margin-top:16px;font-size:14.5px;line-height:1.7}
  .or-cs .or-hact{margin-top:28px}
  .or-trp{width:48px;height:48px;margin:-24px 0 0 -24px}
  .or-trl{bottom:20px;font-size:10.5px}

  /* "Never miss a story" */
  .or-nt{gap:22px;margin-top:56px;padding:30px 22px 26px}
  .or-nt h2{font-size:19px}
  .or-nt p{margin-top:10px;font-size:14px;line-height:1.65}
  .or-nf{gap:10px;padding:10px}
  .or-nf input{height:44px}
  .or-nf .or-btn{height:40px;font-size:10.5px}
  .or-sv>.or-sec{padding-top:56px;padding-bottom:48px}

  /* the film player */
  .or-lbc{top:16px;right:16px;width:40px;height:40px}
  .or-lbc::after{content:'';position:absolute;inset:-2px}
  .or-lbc svg{width:18px;height:18px}
  .or-lbw{gap:18px}
  .or-lbt{gap:10px 16px}
  .or-lbt b{font-size:17px}
  .or-lbt a{position:relative;min-height:0}
  .or-lbt a::after{content:'';position:absolute;inset:-14px -8px}
  .or-lbo .pl{width:52px;height:52px;margin:-26px 0 0 -26px}
  .or-lbo .pl svg{width:22px;height:22px}
  .or-lbo .tx b{font-size:11px}

  /* back to the top */
  .or-top{right:16px;bottom:22px;height:40px;min-width:40px;padding:0 11px;font-size:10.5px}
  .or-top::after{content:'';position:absolute;inset:-2px}
  .or-top svg{width:16px;height:16px}
}

/* Legal pages: Privacy policy, Terms, Cookies. One layout, three documents (src/legal.js) */
#legalScroll{background:var(--cream)}
#app:not([data-page="legal"]) #legalScroll{display:none}
#app[data-page="legal"] #home,#app[data-page="legal"] #aboutScroll,#app[data-page="legal"] #contactScroll{display:none}
.lg-wrap{position:relative;z-index:4;max-width:1180px;margin:0 auto;padding:clamp(104px,15vh,140px) 64px clamp(72px,11vh,120px);transition:opacity .2s ease}
.lg-wrap.swap{opacity:0}
.lg-top{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-bottom:clamp(28px,4vh,44px);border-bottom:1px solid rgba(67,66,149,.16)}
.lg-h{font:300 clamp(40px,4.6vw,68px)/1.03 'Nunito',sans-serif;letter-spacing:-.03em;color:var(--ink)}
.lg-h b{font-weight:800;color:var(--purple)}
.lg-meta{font-size:13px;letter-spacing:.04em;color:var(--muted)}
.lg-sw{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.lg-sw a{display:inline-flex;align-items:center;height:38px;padding:0 18px;border:1px solid rgba(67,66,149,.28);border-radius:999px;font:500 10.5px 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);text-decoration:none;transition:background .3s,color .3s,border-color .3s,transform .3s}
.lg-sw a:hover{border-color:var(--purple);transform:translateY(-1px)}
.lg-sw a.cur{background:var(--purple);border-color:var(--purple);color:#fff}
.lg-sw a:focus-visible,.lg-toc button:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.lg-body{display:grid;grid-template-columns:230px minmax(0,1fr);column-gap:clamp(48px,7vw,110px);padding-top:clamp(32px,5vh,52px);align-items:start}
.lg-toc{position:sticky;top:104px;display:flex;flex-direction:column;gap:14px}
.lg-toc ol{list-style:none;display:flex;flex-direction:column;border-left:1px solid rgba(67,66,149,.16)}
.lg-toc button{all:unset;box-sizing:border-box;display:flex;gap:10px;width:100%;padding:7px 0 7px 14px;margin-left:-1px;border-left:2px solid transparent;cursor:pointer;font:400 13px/1.35 'Poppins',sans-serif;color:var(--muted);transition:color .25s,border-color .25s}
.lg-toc button i{flex:none;min-width:1.5em;padding-top:1px;font-style:normal;font-weight:500;font-size:11px;letter-spacing:.06em;color:rgba(67,66,149,.55)}
.lg-toc button:hover{color:var(--ink)}
.lg-toc button.on{color:var(--purple);border-left-color:var(--purple)}
.lg-doc{max-width:720px}
.lg-draft{padding:12px 16px;border:1px dashed rgba(80,0,219,.4);border-radius:10px;background:rgba(80,0,219,.05);font-size:13px;line-height:1.6;color:#3f3d78}
.lg-draft b{font-weight:500}
.lg-lead{margin-top:26px}
.lg-lead p{font:300 clamp(19px,1.5vw,22px)/1.55 'Nunito',sans-serif;color:var(--ink)}
.lg-lead p+p{margin-top:14px}
.lg-s{padding-top:clamp(30px,5vh,44px);scroll-margin-top:96px}
.lg-s h2{display:flex;align-items:baseline;gap:14px;font:800 clamp(21px,1.7vw,25px)/1.2 'Nunito',sans-serif;letter-spacing:-.015em;color:var(--offblack)}
.lg-s h2 i{flex:none;font:500 11px 'Poppins',sans-serif;letter-spacing:.1em;color:var(--purple)}
.lg-s p,.lg-s li{font-size:15.5px;line-height:1.8;letter-spacing:.01em;color:#3b3a4f}
.lg-s p{margin-top:12px}
.lg-s ul{margin-top:12px;padding-left:1.2em;display:flex;flex-direction:column;gap:7px}
.lg-s ol{margin-top:12px;padding-left:1.4em;display:flex;flex-direction:column;gap:7px}
.lg-s h3{margin-top:22px;font:800 17px/1.3 'Nunito',sans-serif;color:var(--offblack)}
.lg-s li::marker{color:var(--purple)}
.lg-s b{font-weight:500;color:var(--offblack)}
.lg-s a,.lg-lead a{color:var(--purple);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.lg-s a:hover{color:var(--violet)}
mark.lg-ph{background:rgba(255,206,92,.38);color:#4a3a00;padding:1px 5px;border-radius:4px}
.lg-tw{margin-top:16px;overflow-x:auto;border:1px solid rgba(67,66,149,.16);border-radius:12px}
.lg-tw table,.lg-s table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.55}
.lg-tw th,.lg-s th{text-align:left;font:500 10.5px 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 16px;background:rgba(67,66,149,.05)}
.lg-tw td,.lg-s td{padding:13px 16px;border-top:1px solid rgba(67,66,149,.12);vertical-align:top;font-size:14px;line-height:1.55;color:#3b3a4f}
.lg-tw td:first-child,.lg-s td:first-child{font-weight:500;color:var(--offblack)}
.lg-foot{position:relative;z-index:4;background:#161632}
.lg-foot .tfoot{position:relative;padding:30px 64px 36px}
.lg-foot .tfoot::before{display:none}
.tfoot .legal a.cur{color:#fff}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .lg-foot{--gx:40px}
  .lg-wrap{--gx:40px;padding:clamp(100px,14vh,124px) var(--gx) 72px}
  .lg-foot .tfoot{padding-left:var(--gx);padding-right:var(--gx)}
  .lg-body{grid-template-columns:200px minmax(0,1fr);column-gap:40px}
  .lg-s p,.lg-s li,.lg-s td{font-size:16px}
  .lg-s td{font-size:15px}
  .lg-wrap{overflow-wrap:break-word}
  .lg-h,.lg-s h2{max-width:100%;overflow-wrap:anywhere}
  /* the three buttons at the top: easy to tap */
  .lg-sw a{height:44px;padding:0 18px}
}
@media (max-width:860px){
  .lg-wrap,.lg-foot{--gx:32px}
  /* one column: the contents list becomes a row of buttons above the text, which slides sideways */
  .lg-body{display:block;padding-top:28px}
  .lg-toc{position:static;gap:8px;margin-bottom:12px}
  .lg-toc ol{flex-direction:row;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;border-left:0;margin:0 calc(var(--gx)*-1);padding:6px var(--gx)}
  .lg-toc ol::-webkit-scrollbar{display:none}
  .lg-toc li{flex:none}
  .lg-toc button{width:auto;align-items:center;min-height:44px;margin:0;padding:6px 16px 6px 14px;border:1px solid rgba(67,66,149,.28);border-radius:999px;max-width:min(78vw,320px)}
  .lg-toc button.on{background:var(--purple);border-color:var(--purple);color:#fff}
  .lg-toc button.on i{color:rgba(255,255,255,.78)}
  .lg-toc button span{min-width:0;overflow-wrap:anywhere}
  .lg-doc{max-width:680px}
  .lg-s{scroll-margin-top:90px}
}
@media (max-width:640px){
  .lg-foot{--gx:20px}
  .lg-wrap{--gx:20px;padding:96px var(--gx) 56px}
  .lg-top{gap:16px;padding-bottom:24px}
  .lg-h{font-size:clamp(34px,10.4vw,42px);line-height:1.04}
  .lg-meta{font-size:13.5px}
  .lg-sw{gap:8px}
  .lg-sw a{padding:0 16px;font-size:11px}
  .lg-body{padding-top:20px}
  .lg-draft{padding:12px 14px;font-size:14px}
  .lg-lead{margin-top:22px}
  .lg-lead p{font-size:18.5px;line-height:1.55}
  .lg-s{padding-top:32px}
  .lg-s h2{gap:12px;font-size:clamp(20px,5.6vw,23px)}
  .lg-s p,.lg-s li{line-height:1.75}
  .lg-s h3{font-size:17px}
  .lg-s ul,.lg-s ol{gap:9px}
  .lg-foot .tfoot{padding-top:24px;padding-bottom:28px}
  /* a table becomes a stack of small cards: the column name sits above each answer (the tables that have these names) */
  .lg-tw:has(td[data-l]){overflow:visible;border:0;border-radius:0}
  .lg-tw table:has(td[data-l]),.lg-tw table:has(td[data-l]) tbody,.lg-tw table:has(td[data-l]) tr,.lg-tw table:has(td[data-l]) td{display:block;width:100%}
  .lg-tw table:has(td[data-l]) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .lg-tw table:has(td[data-l]) tr{margin-top:12px;border:1px solid rgba(67,66,149,.16);border-radius:14px;overflow:hidden}
  .lg-tw table:has(td[data-l]) td{border-top:0;padding:10px 16px 11px;font-size:15px}
  .lg-tw table:has(td[data-l]) td+td{border-top:1px solid rgba(67,66,149,.1)}
  .lg-tw table:has(td[data-l]) td:first-child{background:rgba(67,66,149,.05);font-size:16px}
  .lg-tw table:has(td[data-l]) td::before{content:attr(data-l);display:block;margin-bottom:3px;font:500 10px 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
}

/* ---------- phone, round 2 ---------- */
/* A calmer phone version of the legal pages: small quiet text, a lot of room between the numbered parts, a tidy contents row */
@media (max-width:640px){
  .lg-wrap{--gx:24px;padding:104px var(--gx) 96px}
  .lg-top{gap:0;padding-bottom:0;border-bottom:0}
  .lg-top .eyebrow{font-size:10.5px;letter-spacing:.22em}
  .lg-h{margin-top:22px;font-size:clamp(28px,8.6vw,34px);line-height:1.12}
  .lg-meta{margin-top:16px;font-size:12px;letter-spacing:.04em}
  .lg-sw{margin-top:30px;gap:8px}
  .lg-sw a{position:relative;height:38px;padding:0 16px;font-size:10.5px;letter-spacing:.14em}
  .lg-sw a::after{content:'';position:absolute;inset:-4px -3px}

  /* the contents row: small, and it slides sideways */
  .lg-body{padding-top:80px}
  .lg-toc{gap:12px;margin-bottom:48px}
  .lg-toc .lbl{font-size:10.5px}
  .lg-toc ol{gap:8px;padding-top:4px;padding-bottom:4px}
  .lg-toc button{position:relative;min-height:36px;padding:4px 15px 4px 12px;gap:8px;border-color:rgba(67,66,149,.22);font-size:12px;max-width:min(72vw,280px)}
  .lg-toc button::after{content:'';position:absolute;inset:-4px -3px}
  .lg-toc button i{min-width:0;font-size:10.5px}

  /* the notice and the opening words */
  .lg-draft{padding:16px 18px;border-radius:16px;font-size:14px;line-height:1.7}
  .lg-lead{margin-top:56px}
  .lg-lead p{font-size:16px;line-height:1.7}
  .lg-lead p+p{margin-top:16px}

  /* the numbered parts: the number sits small above each heading, with 72px between parts */
  .lg-s{padding-top:72px;scroll-margin-top:88px}
  .lg-s h2{display:block;font-size:19px;line-height:1.3;letter-spacing:-.01em}
  .lg-s h2 i{display:block;margin-bottom:12px;font-size:10.5px;letter-spacing:.22em}
  .lg-s p,.lg-s li{font-size:14px;line-height:1.8;letter-spacing:.02em}
  .lg-s p{margin-top:16px}
  .lg-s h2+p,.lg-s h2+ul{margin-top:18px}
  .lg-s ul,.lg-s ol{margin-top:16px;gap:12px}
  .lg-s h3{margin-top:28px;font-size:16px}
  .lg-s>p,.lg-s>ul,.lg-s>ol,.lg-lead p,.lg-draft{max-width:340px}

  /* the Cookies table: a few small cards with room between them */
  .lg-tw{margin-top:24px}
  .lg-tw table:has(td[data-l]) tr{margin-top:16px;border-radius:18px}
  .lg-tw table:has(td[data-l]) td{padding:10px 20px 10px;font-size:14px;line-height:1.65}
  .lg-tw table:has(td[data-l]) td+td{border-top:0}
  .lg-tw table:has(td[data-l]) td:first-child{padding-top:16px;padding-bottom:16px;margin-bottom:6px;font-size:15px}
  .lg-tw table:has(td[data-l]) td:last-child{padding-bottom:18px}
  .lg-tw table:has(td[data-l]) td::before{margin-bottom:4px;font-size:10px}
}

/* Journal: the list of articles and one article page (src/journal.js) */
#journalScroll{background:var(--cream)}
#app:not([data-page="journal"]) #journalScroll{display:none}
#app[data-page="journal"] #home,#app[data-page="journal"] #aboutScroll,#app[data-page="journal"] #contactScroll{display:none}
.jn-wrap{position:relative;z-index:4;max-width:1180px;margin:0 auto;padding:clamp(104px,15vh,140px) 64px clamp(72px,11vh,120px);transition:opacity .2s ease}
.jn-wrap.swap{opacity:0}
.jn-top{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-bottom:clamp(28px,4vh,44px);border-bottom:1px solid rgba(67,66,149,.16)}
.jn-h{font:300 clamp(40px,4.6vw,68px)/1.03 'Nunito',sans-serif;letter-spacing:-.03em;color:var(--ink);max-width:16em;text-wrap:balance}
.jn-h b{font-weight:800;color:var(--purple)}
.jn-lead{max-width:34em;font:300 clamp(18px,1.4vw,21px)/1.55 'Nunito',sans-serif;color:var(--muted)}
.jn-fl{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.jn-fl button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;height:38px;padding:0 18px;border:1px solid rgba(67,66,149,.28);border-radius:999px;cursor:pointer;font:500 10.5px 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);transition:background .3s,color .3s,border-color .3s,transform .3s}
.jn-fl button:hover{border-color:var(--purple);transform:translateY(-1px)}
.jn-fl button[aria-pressed="true"]{background:var(--purple);border-color:var(--purple);color:#fff}
.jn-fl button:focus-visible,.jn-toc button:focus-visible,.jn-card:focus-visible,.jn-btn:focus-visible,.jn-back:focus-visible,.jn-kick a:focus-visible{outline:2px solid var(--purple);outline-offset:3px}

/* the cards: the picture fills the card; the tag, title and short answer are real text laid over it, on a dark fade so they stay easy to read */
.jn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(300px,25vw,360px);gap:20px;padding-top:clamp(32px,5vh,52px)}
.jn-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:22px}
.jn-empty{grid-column:1/-1;grid-row:auto;padding:28px 0;font:300 clamp(18px,1.4vw,21px)/1.55 'Nunito',sans-serif;color:var(--muted)}
.jn-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:26px 28px 24px;border-radius:24px;background:#22214B;text-decoration:none;color:#fff;box-shadow:0 1px 2px rgba(34,33,75,.06);transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s,opacity .4s ease}
.jn-card.fade{opacity:0}
.jn-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(34,33,75,.22)}
.jn-pic{position:absolute;inset:0;z-index:-2}
.jn-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.jn-card:hover .jn-pic img{transform:scale(1.05)}
.jn-card::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(14,13,40,.94) 0%,rgba(14,13,40,.82) 34%,rgba(14,13,40,.38) 62%,rgba(14,13,40,.06) 100%)}
.jn-tag{position:absolute;top:22px;left:24px;display:inline-flex;align-items:center;height:28px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.92);font:500 10px 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--purple)}
.jn-card h3{font:800 clamp(20px,1.7vw,23px)/1.2 'Nunito',sans-serif;letter-spacing:-.015em;color:#fff}
.jn-card p{font-size:13.5px;line-height:1.6;letter-spacing:.01em;color:rgba(255,255,255,.86);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jn-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:4px}
.jn-meta{padding-bottom:6px;font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.7)}
.jn-card .chip{position:relative;right:auto;bottom:auto;flex:none}
.jn-card:hover .chip,.jn-card:focus-visible .chip{background:#fff;border-color:#fff;color:var(--purple);transform:scale(1.1)}
.jn-fs{position:relative;grid-column:span 2;grid-row:span 2;min-height:0}
.jn-fs>.jn-card{height:100%}
.jn-card.feat{padding:40px 44px 38px;gap:14px}
.jn-card.feat .jn-tag{top:32px;left:36px}
.jn-card.feat h3{font-size:clamp(28px,2.9vw,42px);line-height:1.1;letter-spacing:-.025em;max-width:15em}
.jn-card.feat p{font-size:15.5px;line-height:1.7;max-width:34em;-webkit-line-clamp:3}
.jn-card.mini{min-height:0;padding:20px 22px 20px}
.jn-card.mini p,.jn-card.mini .jn-meta{display:none}
.jn-card.mini h3{font-size:18px;padding-right:66px}
.jn-card.mini .jn-tag{top:16px;left:18px;height:24px;padding:0 11px;font-size:9.5px}
.jn-card.mini .jn-row{position:absolute;right:18px;bottom:18px;margin:0}
.jn-card.mini .chip{width:38px;height:38px}

/* one article */
.jn-art{display:flex;flex-direction:column}
.jn-ah{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.jn-back{display:inline-flex;align-items:center;gap:6px;font:500 10.5px 'Poppins',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--purple);text-decoration:none}
.jn-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.jn-back:hover svg{transform:translateX(-3px)}
.jn-hero{position:relative;isolation:isolate;overflow:hidden;width:100%;min-height:clamp(380px,34vw,480px);display:flex;align-items:flex-end;border-radius:28px;background:#22214B}
.jn-hero>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.jn-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(14,13,40,.92) 0%,rgba(14,13,40,.78) 36%,rgba(14,13,40,.3) 66%,rgba(14,13,40,.05) 100%)}
.jn-hero-in{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(28px,4vw,52px)}
.jn-kick{display:inline-flex;align-items:center;height:28px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.92);font:500 10px 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.jn-kick a{color:var(--purple);text-decoration:none}
.jn-kick a:hover{text-decoration:underline;text-underline-offset:4px}
.jn-art .jn-h{font-size:clamp(34px,3.8vw,56px);max-width:18em;color:#fff}
.jn-by{font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.78)}
.jn-body{display:grid;grid-template-columns:230px minmax(0,1fr);column-gap:clamp(48px,7vw,110px);padding-top:clamp(32px,5vh,52px);align-items:start}
.jn-toc{position:sticky;top:104px;display:flex;flex-direction:column;gap:14px}
.jn-toc .lbl{font:500 10.5px 'Poppins',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--purple)}
.jn-toc ol{list-style:none;display:flex;flex-direction:column;border-left:1px solid rgba(67,66,149,.16)}
.jn-toc button{all:unset;box-sizing:border-box;display:flex;gap:10px;width:100%;padding:7px 0 7px 14px;margin-left:-1px;border-left:2px solid transparent;cursor:pointer;font:400 13px/1.35 'Poppins',sans-serif;color:var(--muted);transition:color .25s,border-color .25s}
.jn-toc button i{flex:none;min-width:1.5em;padding-top:1px;font-style:normal;font-weight:500;font-size:11px;letter-spacing:.06em;color:rgba(67,66,149,.55)}
.jn-toc button:hover{color:var(--ink)}
.jn-toc button.on{color:var(--purple);border-left-color:var(--purple)}
.jn-doc{max-width:720px}
.jn-ans{padding:22px 26px;border-radius:16px;background:rgba(67,66,149,.07);border-left:3px solid var(--violet)}
.jn-ans .lbl,.jn-svc .lbl{display:block;font:500 10.5px 'Poppins',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--purple)}
.jn-ans p{margin-top:10px;font:300 clamp(19px,1.5vw,22px)/1.5 'Nunito',sans-serif;color:var(--ink)}
.jn-s{padding-top:clamp(30px,5vh,44px);scroll-margin-top:96px}
.jn-s h2{font:800 clamp(22px,1.8vw,26px)/1.2 'Nunito',sans-serif;letter-spacing:-.015em;color:var(--offblack)}
.jn-s p,.jn-s li{font-size:15.5px;line-height:1.8;letter-spacing:.01em;color:#3b3a4f}
.jn-s p{margin-top:12px}
.jn-s ul{margin-top:12px;padding-left:1.2em;display:flex;flex-direction:column;gap:7px}
.jn-s li::marker{color:var(--purple)}
.jn-s b{font-weight:500;color:var(--offblack)}
.jn-s a{color:var(--purple);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.jn-faq h3{margin-top:24px;font:800 17px/1.3 'Nunito',sans-serif;color:var(--offblack)}
.jn-faq h3+p{margin-top:6px}
.jn-src{padding-top:clamp(30px,5vh,44px);margin-top:clamp(28px,4.5vh,40px);border-top:1px solid rgba(67,66,149,.14)}
.jn-src h2{font:800 clamp(18px,1.5vw,20px)/1.2 'Nunito',sans-serif;letter-spacing:-.01em;color:var(--offblack)}
.jn-srcn{margin-top:8px;font-size:13.5px;line-height:1.65;letter-spacing:.01em;color:var(--muted)}
.jn-src ul{margin-top:14px;display:flex;flex-direction:column;gap:9px;list-style:none;padding:0}
.jn-src li{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:1px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.jn-src a{color:var(--purple);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.jn-src a:hover{color:var(--offblack)}
.jn-src span{font-size:12.5px;letter-spacing:.02em}
.jn-fig{margin:clamp(28px,4.5vh,40px) 0 0}
.jn-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:20px;background:#e9e7f4}
.jn-fig figcaption{margin-top:10px;font-size:12.5px;line-height:1.5;letter-spacing:.02em;color:var(--muted)}
.jn-svc{margin-top:clamp(36px,6vh,56px);display:flex;align-items:center;justify-content:space-between;gap:28px;padding:26px 28px;border-radius:20px;background:#fff;border:1px solid rgba(67,66,149,.14)}
.jn-svc b{display:block;margin-top:8px;font:800 21px/1.2 'Nunito',sans-serif;letter-spacing:-.01em;color:var(--offblack)}
.jn-svc p{margin-top:4px;font-size:14px;line-height:1.6;color:var(--muted)}
.jn-acts{display:flex;flex-direction:column;gap:10px;flex:none}
.jn-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 22px;border-radius:999px;border:1.5px solid rgba(67,66,149,.32);font:500 11px 'Poppins',sans-serif;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--purple);text-decoration:none;transition:background .3s,color .3s,border-color .3s,transform .3s}
.jn-btn:hover{border-color:var(--purple);transform:translateY(-1px)}
.jn-btn.solid{background:var(--purple);border-color:var(--purple);color:#fff;box-shadow:0 10px 26px rgba(67,66,149,.26)}
.jn-btn.solid:hover{background:var(--violet);border-color:var(--violet)}
.jn-more{margin-top:clamp(48px,8vh,84px);padding-top:clamp(28px,4vh,40px);border-top:1px solid rgba(67,66,149,.16)}
.jn-more h2{font:300 clamp(28px,2.6vw,38px)/1.1 'Nunito',sans-serif;letter-spacing:-.025em;color:var(--ink)}
.jn-foot{position:relative;z-index:4;background:#161632}
.jn-foot .tfoot{position:relative;padding:30px 64px 36px}
.jn-foot .tfoot::before{display:none}

/* the dots on the big card: one per featured article, the active one fills up as the next turn gets near */
.jn-dots{position:absolute;top:30px;right:34px;z-index:3;display:flex;align-items:center;gap:2px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.32)}
.jn-dots button{all:unset;box-sizing:border-box;position:relative;width:16px;height:16px;cursor:pointer;transition:width .45s cubic-bezier(.16,1,.3,1)}
.jn-dots button[aria-pressed="true"]{width:44px}
.jn-dots button::before,.jn-dots button::after{content:'';position:absolute;top:4px;bottom:4px;border-radius:999px}
.jn-dots button::before{left:4px;right:4px;background:rgba(255,255,255,.55);transition:left .45s,right .45s,background .3s}
.jn-dots button[aria-pressed="true"]::before{left:0;right:0;background:rgba(255,255,255,.32)}
.jn-dots button::after{left:0;width:0;background:#fff}
.jn-dots button[aria-pressed="true"]::after{animation:jnp 8.45s linear forwards}
@keyframes jnp{to{width:100%}}
.jn-fs:hover .jn-dots button::after,.jn-fs:focus-within .jn-dots button::after{animation-play-state:paused}
.jn-dots button:focus-visible{outline:2px solid #fff;outline-offset:1px;border-radius:999px}
@media (prefers-reduced-motion:reduce){.jn-dots button[aria-pressed="true"]::after{animation:none;width:100%}}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .jn-foot{--gx:40px}
  .jn-wrap{--gx:40px;padding:clamp(100px,14vh,124px) var(--gx) 72px}
  .jn-foot .tfoot{padding-left:var(--gx);padding-right:var(--gx)}
  /* the filter buttons: one line, they slide sideways if there are too many for the width */
  .jn-fl{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-self:stretch;margin:0 calc(var(--gx)*-1);padding:6px var(--gx)}
  .jn-fl::-webkit-scrollbar{display:none}
  .jn-fl button{flex:none;height:44px;padding:0 15px}
  /* the cards: two across; the big card takes the full width */
  .jn-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:16px}
  .jn-grid.two{padding-top:20px}
  .jn-grid>.jn-card:not(.mini){min-height:clamp(270px,34vw,320px)}
  .jn-grid:has(>.jn-fs)>.jn-card:last-child:nth-child(even),.jn-grid:not(:has(>.jn-fs))>.jn-card:last-child:nth-child(odd){grid-column:1/-1}
  .jn-fs{grid-column:1/-1;grid-row:auto;display:flex;flex-direction:column;min-height:clamp(400px,50vw,460px)}
  .jn-fs>.jn-card{flex:1;height:auto}
  .jn-card{padding:22px 24px 22px}
  .jn-tag{top:20px;left:22px}
  .jn-card.feat{padding:32px 34px 30px}
  .jn-card.feat .jn-tag{top:26px;left:30px}
  .jn-dots{top:18px;right:20px;padding:0 6px;gap:0}
  .jn-dots button{width:30px;height:44px}
  .jn-dots button[aria-pressed="true"]{width:46px}
  .jn-dots button::before,.jn-dots button::after{top:calc(50% - 4px);bottom:auto;height:8px}
  .jn-dots button::before{left:11px;right:11px}
  .jn-dots button[aria-pressed="true"]::before{left:0;right:0}
  /* an article */
  .jn-body{grid-template-columns:200px minmax(0,1fr);column-gap:40px}
  .jn-s p,.jn-s li{font-size:16px}
  .jn-wrap{overflow-wrap:break-word}
  .jn-h,.jn-by{max-width:100%;overflow-wrap:anywhere}
  .jn-src a{overflow-wrap:anywhere}
  .jn-back{min-height:44px;padding-right:16px}
  .jn-kick{position:relative}
  .jn-kick a::after{content:'';position:absolute;inset:-8px -8px}
  .jn-src ul{gap:0;margin-top:6px}
  .jn-src li{display:block}
  .jn-src a{display:inline-block;padding:12px 0}
  .jn-src a+span{display:block;margin-top:-7px;padding-bottom:12px}
  .jn-svc{gap:22px}
  .jn-btn{height:46px}
}
@media (max-width:860px){
  .jn-wrap,.jn-foot{--gx:32px}
  .jn-art .jn-h{font-size:clamp(30px,5vw,40px)}
  /* one column: the contents list becomes a row of buttons above the article, which slides sideways */
  .jn-body{display:block;padding-top:28px}
  .jn-toc{position:static;gap:8px;margin-bottom:12px}
  .jn-toc ol{flex-direction:row;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;border-left:0;margin:0 calc(var(--gx)*-1);padding:6px var(--gx)}
  .jn-toc ol::-webkit-scrollbar{display:none}
  .jn-toc li{flex:none}
  .jn-toc button{width:auto;align-items:center;min-height:44px;margin:0;padding:6px 16px 6px 14px;border:1px solid rgba(67,66,149,.28);border-radius:999px;max-width:min(78vw,320px)}
  .jn-toc button.on{background:var(--purple);border-color:var(--purple);color:#fff}
  .jn-toc button.on i{color:rgba(255,255,255,.78)}
  .jn-toc button span{min-width:0;overflow-wrap:anywhere}
  .jn-doc{max-width:680px}
  .jn-s{scroll-margin-top:90px}
}
@media (max-width:640px){
  .jn-foot{--gx:20px}
  .jn-wrap{--gx:20px;padding:96px var(--gx) 56px}
  .jn-top{gap:16px;padding-bottom:24px}
  .jn-h{font-size:clamp(31px,9.2vw,38px);line-height:1.06}
  .jn-lead{font-size:17px;line-height:1.55}
  .jn-fl button{padding:0 18px;font-size:11px}
  /* the cards: one across */
  .jn-grid,.jn-grid.two{grid-template-columns:minmax(0,1fr);gap:14px;padding-top:24px}
  .jn-grid.two{padding-top:20px}
  .jn-grid>.jn-card:not(.mini){min-height:260px}
  .jn-card{padding:20px 20px 18px;border-radius:20px}
  .jn-card h3{font-size:20px}
  .jn-meta{font-size:12.5px}
  .jn-tag{top:16px;left:18px}
  /* the big card: the picture on top, the words under it on the dark panel */
  .jn-fs{min-height:0}
  .jn-card.feat{padding:0 0 20px;gap:0;justify-content:flex-start}
  .jn-card.feat::before{display:none}
  .jn-card.feat .jn-pic{position:relative;inset:auto;z-index:0;display:block;flex:none;aspect-ratio:16/10;width:100%}
  .jn-card.feat .jn-tag{top:14px;left:14px}
  .jn-card.feat h3{margin:18px 20px 0;font-size:25px;line-height:1.14}
  .jn-card.feat p{margin:10px 20px 0;font-size:15px;line-height:1.65;-webkit-line-clamp:4}
  .jn-card.feat .jn-row{margin:14px 20px 0}
  .jn-dots{top:6px;right:8px}
  /* an article */
  .jn-ah{gap:10px}
  .jn-back{font-size:11px}
  .jn-hero{min-height:380px;border-radius:20px}
  .jn-hero-in{gap:12px;padding:22px 20px 22px}
  .jn-art .jn-h{font-size:clamp(25px,7.4vw,31px);line-height:1.14}
  .jn-by{font-size:13px;line-height:1.55}
  .jn-body{padding-top:20px}
  .jn-ans{padding:18px 18px 20px;border-radius:14px}
  .jn-ans p{font-size:18.5px;line-height:1.5}
  .jn-s{padding-top:32px}
  .jn-s h2{font-size:clamp(21px,5.8vw,24px)}
  .jn-s p,.jn-s li{line-height:1.75}
  .jn-faq h3{margin-top:22px;font-size:17px}
  .jn-fig img{border-radius:14px}
  .jn-fig figcaption{font-size:13px}
  .jn-src{margin-top:36px;padding-top:30px}
  .jn-srcn{font-size:14px}
  .jn-src li{font-size:14px}
  .jn-src a+span{font-size:13px}
  .jn-svc{flex-direction:column;align-items:stretch;gap:20px;margin-top:40px;padding:22px 20px;border-radius:18px}
  .jn-svc b{font-size:20px}
  .jn-acts{width:100%}
  .jn-btn{height:48px;padding:0 18px;font-size:11.5px}
  .jn-more{margin-top:48px;padding-top:28px}
  .jn-more h2{font-size:clamp(26px,7.4vw,30px)}
  .jn-foot .tfoot{padding-top:24px;padding-bottom:28px}
}

/* ---------- phone, round 2 ---------- */
/* A calmer phone version: more room, smaller and quieter type, one idea per screen. Everything here is scoped to the Journal page itself (#jnIn), so the small Journal cards on the Services pages look exactly as before. */
@media (max-width:640px){
  #jnIn.jn-wrap{--gx:24px;padding:104px var(--gx) 96px}

  /* the Journal list: heading, a few words, the topic buttons; then the cards wait below */
  #jnIn .jn-top{gap:0;padding-bottom:0;border-bottom:0}
  #jnIn .jn-top .eyebrow{font-size:10.5px;letter-spacing:.22em}
  #jnIn .jn-top .jn-h{margin-top:22px;font-size:clamp(27px,8.2vw,32px);line-height:1.14}
  #jnIn .jn-lead{margin-top:18px;max-width:21em;font-size:15px;line-height:1.7}
  #jnIn .jn-fl{margin-top:34px;gap:8px;padding-top:4px;padding-bottom:4px}
  #jnIn .jn-fl button{position:relative;height:38px;padding:0 17px;font-size:10.5px;letter-spacing:.14em}
  #jnIn .jn-fl button::after{content:'';position:absolute;inset:-4px -3px}

  /* the cards: the picture on top, a small title and a small line under it, and a lot of room between them */
  #jnIn .jn-grid{gap:68px;padding-top:64px}
  #jnIn .jn-card{display:flex;flex-direction:column;justify-content:flex-start;gap:0;min-height:0;padding:0;border-radius:0;overflow:visible;isolation:auto;background:none;box-shadow:none;color:var(--ink)}
  #jnIn .jn-card:hover{transform:none;box-shadow:none}
  #jnIn .jn-card:hover .jn-pic img{transform:none}
  #jnIn .jn-card::before{display:none}
  #jnIn .jn-pic{position:relative;inset:auto;z-index:0;display:block;flex:none;width:100%;aspect-ratio:3/2;border-radius:22px;overflow:hidden;background:#22214B}
  #jnIn .jn-tag{top:14px;left:14px;height:24px;padding:0 11px;font-size:9.5px}
  #jnIn .jn-card h3{margin-top:22px;font:700 17.5px/1.32 'Nunito',sans-serif;letter-spacing:-.01em;color:var(--offblack)}
  #jnIn .jn-card p{margin-top:12px;font-size:14px;line-height:1.7;letter-spacing:.015em;color:var(--muted);-webkit-line-clamp:3}
  #jnIn .jn-row{margin-top:12px}
  #jnIn .jn-meta{padding:0;font:500 10.5px 'Poppins',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  #jnIn .jn-card .chip{display:none}
  /* the big card: the same, with a taller picture; its dots sit small on the picture */
  #jnIn .jn-fs{min-height:0}
  #jnIn .jn-card.feat{padding:0;gap:0}
  #jnIn .jn-card.feat .jn-pic{aspect-ratio:4/4.5}
  #jnIn .jn-card.feat .jn-tag{top:14px;left:14px}
  #jnIn .jn-card.feat h3{margin:24px 0 0;font-size:22px;line-height:1.22;letter-spacing:-.015em}
  #jnIn .jn-card.feat p{margin:14px 0 0;font-size:14px;line-height:1.7;-webkit-line-clamp:3}
  #jnIn .jn-card.feat .jn-row{margin:14px 0 0}
  #jnIn .jn-dots{top:6px;right:8px;isolation:isolate;padding:0 6px;gap:0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  #jnIn .jn-dots::before{content:'';position:absolute;z-index:-1;left:0;right:0;top:50%;height:26px;margin-top:-13px;border-radius:999px;background:rgba(14,13,40,.36);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  #jnIn .jn-dots button{width:26px;height:44px}
  #jnIn .jn-dots button[aria-pressed="true"]{width:42px}
  #jnIn .jn-dots button::before{left:9px;right:9px}
  #jnIn .jn-dots button[aria-pressed="true"]::before{left:0;right:0}

  /* one article: opens on the picture, with the title and the byline bottom-left on it */
  #jnIn .jn-ah{gap:14px}
  #jnIn .jn-back{position:relative;min-height:36px;padding-right:0;font-size:10.5px;letter-spacing:.2em}
  #jnIn .jn-back::after{content:'';position:absolute;inset:-4px -8px}
  #jnIn .jn-hero{min-height:min(560px,calc(100vh - 200px));min-height:min(560px,calc(100svh - 200px));border-radius:22px}
  #jnIn .jn-hero-in{gap:14px;padding:26px 22px 26px}
  #jnIn .jn-kick{height:24px;padding:0 11px;font-size:9.5px}
  #jnIn .jn-kick a::after{inset:-10px -8px}
  #jnIn .jn-art .jn-h{font-size:clamp(23px,6.9vw,27px);line-height:1.2}
  #jnIn .jn-by{font-size:12px;line-height:1.65;letter-spacing:.03em;text-wrap:balance}

  /* the contents row: small, and it slides sideways */
  #jnIn .jn-body{padding-top:72px}
  #jnIn .jn-toc{gap:12px;margin-bottom:40px}
  #jnIn .jn-toc .lbl{font-size:10.5px}
  #jnIn .jn-toc ol{gap:8px;padding-top:4px;padding-bottom:4px}
  #jnIn .jn-toc button{position:relative;min-height:36px;padding:4px 15px 4px 12px;gap:8px;border-color:rgba(67,66,149,.22);font-size:12px;max-width:min(72vw,280px)}
  #jnIn .jn-toc button::after{content:'';position:absolute;inset:-4px -3px}
  #jnIn .jn-toc button i{min-width:0;font-size:10.5px}

  /* the short answer: a soft rounded box */
  #jnIn .jn-ans{padding:26px 22px 28px;border-radius:24px;border-left:0;background:rgba(255,255,255,.72);border:1px solid rgba(67,66,149,.14);box-shadow:0 16px 40px rgba(34,33,75,.08)}
  #jnIn .jn-ans .lbl{font-size:10.5px}
  #jnIn .jn-ans p{margin-top:14px;font-size:16px;line-height:1.7}

  /* the text: 15px, short lines, and 72px between the parts */
  #jnIn .jn-s{padding-top:72px;scroll-margin-top:88px}
  #jnIn .jn-s h2{font-size:19px;line-height:1.3;letter-spacing:-.01em}
  #jnIn .jn-s p,#jnIn .jn-s li{font-size:15px;line-height:1.75;letter-spacing:.015em}
  #jnIn .jn-s p{margin-top:16px}
  #jnIn .jn-s h2+p,#jnIn .jn-s h2+ul{margin-top:16px}
  #jnIn .jn-s ul{margin-top:16px;gap:12px}
  #jnIn .jn-s>p,#jnIn .jn-s>ul{max-width:340px}
  #jnIn .jn-fig{margin-top:56px}
  #jnIn .jn-fig img{border-radius:20px}
  #jnIn .jn-fig figcaption{margin-top:14px;font-size:12.5px;line-height:1.65}

  /* common questions and sources: each one opens with a tap (journal.js marks them on a phone); the words stay in the page */
  #jnIn .jn-faq h2{margin-bottom:24px}
  #jnIn .jn-faq h3{position:relative;margin:0;padding:19px 44px 19px 0;border-top:1px solid rgba(67,66,149,.14);font:700 15.5px/1.45 'Nunito',sans-serif;color:var(--offblack)}
  #jnIn .jn-faq::after{content:'';display:block;border-top:1px solid rgba(67,66,149,.14)}
  #jnIn .jn-faq h3+p{margin-top:0;padding:0 0 22px}
  #jnIn .jn-src{margin-top:72px;padding-top:0;border-top:0}
  #jnIn .jn-src h2{position:relative;padding:19px 44px 19px 0;border-top:1px solid rgba(67,66,149,.14);border-bottom:1px solid rgba(67,66,149,.14);font:700 15.5px/1.45 'Nunito',sans-serif;letter-spacing:0}
  #jnIn .jn-faq h3[role="button"],#jnIn .jn-src h2[role="button"]{cursor:pointer;-webkit-tap-highlight-color:transparent}
  #jnIn .jn-faq h3[role="button"]:focus-visible,#jnIn .jn-src h2[role="button"]:focus-visible{outline:2px solid var(--purple);outline-offset:-2px;border-radius:6px}
  #jnIn .jn-faq h3[role="button"]::before,#jnIn .jn-faq h3[role="button"]::after,#jnIn .jn-src h2[role="button"]::before,#jnIn .jn-src h2[role="button"]::after{content:'';position:absolute;right:6px;top:50%;width:11px;height:1.5px;margin-top:-.75px;border-radius:2px;background:var(--purple);transition:transform .35s cubic-bezier(.16,1,.3,1)}
  #jnIn .jn-faq h3[role="button"]::after,#jnIn .jn-src h2[role="button"]::after{transform:rotate(90deg)}
  #jnIn .jn-faq h3.open::after,#jnIn .jn-src h2.open::after{transform:rotate(0)}
  #jnIn .jn-faq h3[role="button"]:not(.open)+p{display:none}
  #jnIn .jn-src h2[role="button"]:not(.open)~*{display:none}
  #jnIn .jn-srcn{margin-top:22px;font-size:14px;line-height:1.7}
  #jnIn .jn-src ul{margin-top:8px}
  #jnIn .jn-src li{font-size:14px}
  #jnIn .jn-src a+span{font-size:12.5px}

  /* the related service: one soft box, one main button, the other action as a plain link */
  #jnIn .jn-svc{align-items:flex-start;gap:22px;margin-top:72px;padding:28px 24px 30px;border-radius:24px;background:rgba(255,255,255,.72);border:1px solid rgba(67,66,149,.14);box-shadow:0 16px 40px rgba(34,33,75,.08)}
  #jnIn .jn-svc .lbl{font-size:10.5px}
  #jnIn .jn-svc b{margin-top:12px;font-size:18px}
  #jnIn .jn-svc p{margin-top:8px;font-size:14px;line-height:1.7}
  #jnIn .jn-acts{width:auto;flex-direction:column-reverse;align-items:flex-start;gap:6px}
  #jnIn .jn-btn{position:relative;height:40px;padding:0 22px;font-size:10.5px;letter-spacing:.14em}
  #jnIn .jn-btn::after{content:'';position:absolute;inset:-4px -6px}
  #jnIn .jn-btn.solid{box-shadow:0 6px 16px rgba(67,66,149,.2)}
  #jnIn .jn-btn:not(.solid){height:40px;padding:0;border:0;border-radius:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
  #jnIn .jn-btn:not(.solid):hover{transform:none}

  /* keep reading: the two articles slide sideways, the second one peeking in */
  #jnIn .jn-more{margin-top:96px;padding-top:0;border-top:0}
  #jnIn .jn-more h2{font-size:24px;line-height:1.15}
  #jnIn .jn-more .jn-grid.two{display:flex;gap:20px;margin:0 calc(var(--gx)*-1);padding:32px var(--gx) 4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--gx);scrollbar-width:none}
  #jnIn .jn-more .jn-grid.two::-webkit-scrollbar{display:none}
  #jnIn .jn-more .jn-card{flex:0 0 72%;scroll-snap-align:start}
  #jnIn .jn-more .jn-card h3{margin-top:20px;font-size:16.5px}
}

/* ===== Partnerships: the businesses we work with. One full-width section per partner, picture behind, name and words in front. Off until it is switched on (see the top of src/partners.js) ===== */
#partnersScroll{position:absolute;inset:0;z-index:3;overflow-y:auto;overflow-x:hidden;overflow-anchor:none;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent;
  --ink:#fff;--muted:rgba(255,255,255,.68);--logo:#fff;--solid-bg:#fff;--solid-fg:#161632;--pad:clamp(36px,5vw,96px);--pbg:#0E0E22;--pbgr:14,14,34;--pac:#CBBFFF;background:var(--pbg);color:#fff}
#app:not([data-page="partners"]) #partnersScroll{display:none}
#app[data-page="partners"] #home,#app[data-page="partners"] #aboutScroll,#app[data-page="partners"] #contactScroll{display:none}
#app[data-page="partners"]{--bg:#0E0E22}
.pt-rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease calc(var(--i,0)*90ms),transform 1.1s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*90ms)}
.pt-rv.in{opacity:1;transform:none}

/* the opening: a short dark screen with the page's name and a line about it */
.pt-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(480px,74vh,760px);padding:clamp(110px,18vh,190px) var(--pad) clamp(50px,9vh,96px);background:radial-gradient(ellipse 60% 90% at 78% 30%,rgba(80,0,219,.34),rgba(80,0,219,0) 70%),var(--pbg)}
.pt-kick{display:flex;width:max-content;align-items:center;gap:12px;font:600 11px 'Poppins',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--pac)}
.pt-kick i{display:block;width:3px;height:20px;border-radius:2px;background:var(--pac);transform:skewX(-24deg);box-shadow:0 0 12px rgba(203,191,255,.7)}
.pt-h1{margin:clamp(18px,3vh,30px) 0 0;max-width:11em;font:300 clamp(46px,6.4vw,112px)/1 'Nunito',sans-serif;letter-spacing:-.035em;text-wrap:balance}
.pt-h1 b{font-weight:800;color:var(--pac)}
.pt-lead{margin-top:clamp(20px,3.4vh,34px);max-width:34em;font:300 clamp(16px,1.3vw,20px)/1.7 'Poppins',sans-serif;letter-spacing:.01em;color:var(--muted);text-wrap:pretty}

/* one partner: the picture fills the section, a dark side on the left holds the words */
.pt-s{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-height:100vh;padding:clamp(100px,16vh,170px) var(--pad) clamp(80px,13vh,140px);background:var(--pbg)}
.pt-im{position:absolute;inset:0;margin:0;z-index:0;overflow:hidden}
.pt-im img{display:block;width:100%;height:100%;object-fit:cover;transform:translateY(calc((var(--p,.5) - .5)*-80px)) scale(1.16)}
.pt-im::after{content:'';position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,var(--pbg) 0%,rgba(var(--pbgr),0) 20%,rgba(var(--pbgr),0) 74%,var(--pbg) 100%),
  linear-gradient(90deg,rgba(var(--pbgr),.92) 0%,rgba(var(--pbgr),.7) 34%,rgba(var(--pbgr),0) 72%)}
.pt-tx{position:relative;z-index:2;max-width:min(640px,48vw)}
.pt-bx{display:inline-flex;align-items:center;gap:16px;padding:13px 30px;border:1px solid rgba(255,255,255,.7);font:300 clamp(13px,1.1vw,16px)/1 'Poppins',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(var(--pbgr),.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pt-bx i{font-style:normal;font-weight:500;letter-spacing:.1em;color:var(--pac)}
.pt-n{margin:clamp(22px,3.6vh,36px) 0 0;font:800 clamp(44px,6vw,104px)/.96 'Nunito',sans-serif;letter-spacing:-.035em;text-wrap:balance;overflow-wrap:anywhere}
.pt-t{display:grid;gap:1.1em;margin-top:clamp(18px,3vh,30px);max-width:32em}
.pt-t p{font:300 clamp(16px,1.3vw,20px)/1.7 'Poppins',sans-serif;letter-spacing:.01em;color:rgba(255,255,255,.82);text-wrap:pretty}
.pt-btn{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(26px,4.4vh,44px);height:52px;padding:0 26px 0 28px;border-radius:999px;background:#fff;color:#161632;font:500 12px 'Poppins',sans-serif;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.pt-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(203,191,255,.4)}
.pt-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pt-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pt-ph{position:absolute;z-index:3;top:clamp(96px,14vh,130px);right:var(--pad);padding:7px 14px;border-radius:999px;border:1px dashed rgba(255,255,255,.5);background:rgba(var(--pbgr),.55);font:500 10px 'Poppins',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82)}

@media (prefers-reduced-motion:reduce){.pt-im img{transform:none}.pt-rv{opacity:1;transform:none;transition:none}}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  #partnersScroll{--pad:clamp(24px,5vw,48px)}
  .pt-hero{min-height:clamp(440px,62svh,640px);padding-top:clamp(110px,16svh,160px)}
  .pt-h1{font-size:clamp(44px,8vw,80px)}
  .pt-s{min-height:100vh;min-height:100svh;padding-top:clamp(96px,14svh,140px);padding-bottom:clamp(64px,10svh,110px)}
  .pt-tx{max-width:min(600px,64vw)}
  .pt-h1,.pt-bx{max-width:100%;overflow-wrap:anywhere}
  .pt-im::after{background:
    linear-gradient(180deg,var(--pbg) 0%,rgba(var(--pbgr),0) 20%,rgba(var(--pbgr),0) 74%,var(--pbg) 100%),
    linear-gradient(90deg,rgba(var(--pbgr),.92) 0%,rgba(var(--pbgr),.8) 46%,rgba(var(--pbgr),0) 92%)}
  .pt-n{font-size:clamp(40px,7.4vw,72px)}
  .pt-ph{top:clamp(90px,12svh,120px)}
}
@media (max-width:640px){
  #partnersScroll{--pad:20px}
  .pt-hero{min-height:min(500px,68svh);padding:116px var(--pad) 48px}
  .pt-kick{font-size:10.5px;letter-spacing:.24em}
  .pt-h1{margin-top:18px;font-size:clamp(36px,11vw,46px);line-height:1.04}
  .pt-lead{margin-top:20px;font-size:16px;line-height:1.65}
  /* each partner: the picture shows across the top, the words sit at the bottom on a dark fade */
  .pt-s{align-items:flex-end;padding:92px var(--pad) 52px}
  .pt-im::after{background:
    linear-gradient(180deg,var(--pbg) 0%,rgba(var(--pbgr),0) 14%,rgba(var(--pbgr),.18) 34%,rgba(var(--pbgr),.9) 66%,var(--pbg) 100%)}
  .pt-tx{width:100%;max-width:none}
  .pt-bx{gap:12px;padding:11px 20px;font-size:12.5px}
  .pt-n{margin-top:20px;font-size:clamp(36px,11vw,46px);line-height:1}
  .pt-t{gap:1em;margin-top:16px}
  .pt-t p{font-size:16px;line-height:1.65}
  .pt-btn{width:100%;justify-content:center;margin-top:26px;height:52px}
  .pt-ph{top:84px;right:var(--pad);padding:6px 12px;font-size:9.5px}
}

/* ---------- phone, round 2 ---------- */
/* The Originals phone style: a picture for each partner, a few short words bottom-left on the fade, and a small button */
@media (max-width:640px){
  #partnersScroll{--pad:24px}
  .pt-hero{min-height:max(520px,88vh);min-height:max(520px,88svh);padding:120px var(--pad) 80px}
  .pt-kick{gap:10px;font-size:10.5px;letter-spacing:.24em}
  .pt-kick i{height:16px}
  .pt-h1{margin-top:24px;font-size:clamp(28px,8.4vw,34px);line-height:1.14}
  .pt-lead{margin-top:20px;max-width:22em;font-size:14px;line-height:1.75}
  .pt-s{min-height:max(100vh,640px);min-height:max(100svh,640px);padding:104px var(--pad) 80px}
  .pt-im::after{background:
    linear-gradient(180deg,var(--pbg) 0,rgba(var(--pbgr),0) 120px),
    linear-gradient(0deg,var(--pbg) 0,rgba(var(--pbgr),.94) 190px,rgba(var(--pbgr),.78) 370px,rgba(var(--pbgr),.2) 540px,rgba(var(--pbgr),0) 640px)}
  .pt-tx{width:100%;max-width:none}
  .pt-bx{gap:10px;padding:8px 14px;font-size:10.5px;letter-spacing:.2em}
  .pt-n{margin-top:22px;font-size:clamp(28px,8.4vw,34px);line-height:1.1}
  .pt-t{gap:14px;margin-top:16px;max-width:23em}
  .pt-t p{font-size:14px;line-height:1.75}
  .pt-btn{position:relative;width:auto;height:40px;gap:10px;margin-top:30px;padding:0 20px 0 22px;font-size:10.5px;letter-spacing:.14em}
  .pt-btn::after{content:'';position:absolute;inset:-4px -6px}
  .pt-btn svg{width:13px;height:13px}
  .pt-ph{top:92px;padding:5px 11px;font-size:9px}
}

/* review bar: which buttons show depends on the page */
#app:not([data-page="home"]) .h-only{display:none!important}
#app:not([data-page="about"]) .a-only{display:none!important}
#app[data-page="contact"] .no-c,#app[data-page="services"] .no-c,#app[data-page="originals"] .no-c,#app[data-page="legal"] .no-c,#app[data-page="journal"] .no-c,#app[data-page="partners"] .no-c{display:none!important}
[data-go="partners"][hidden]{display:none!important} /* the Partnerships link (footer only) stays out of sight until the page is switched on */
#app[data-ab="a"] .b-only,#app:not([data-page="about"]) .b-only{display:none!important}
#app:not([data-page="services"]) .s-only{display:none!important}

/* skip + dip */
.skip{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:7;height:38px;padding:0 20px;border-radius:999px;font:500 11px 'Poppins',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .6s ease;display:flex;align-items:center}
.skip.show{opacity:1;pointer-events:auto}
@media (max-width:700px){.skip.glass{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 14px rgba(255,255,255,.35),inset 0 0 2px rgba(67,66,149,.5)}} /* phones: no live blur or wide shadow over the moving opening, which can flicker along the bottom edge */
#dip{position:absolute;inset:0;z-index:20;background:#161632;opacity:0;pointer-events:none;transition:opacity .5s ease}
#dip.on{opacity:1;transition:opacity .22s ease}
.reset *{transition:none!important}
.toast{position:absolute;left:50%;bottom:34px;transform:translate(-50%,12px);z-index:30;padding:12px 22px;border-radius:999px;background:#161632;color:#fff;font:500 12px 'Poppins',sans-serif;letter-spacing:.06em;opacity:0;pointer-events:none;transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* COOKIES_START: the cookie choices banner, and the "allow films?" panel that sits over a film's picture */
.cnb{position:absolute;left:50%;bottom:22px;z-index:45;width:min(600px,calc(100% - 32px));padding:20px 22px 18px;border-radius:24px;background:#161632;color:#fff;box-shadow:0 18px 50px rgba(22,22,50,.35),0 0 0 1px rgba(255,255,255,.24);transform:translate(-50%,24px);opacity:0;visibility:hidden;transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1),visibility 0s .6s}
.cnb.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.cnb h2{margin:0 0 8px;font:500 11px 'Poppins',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.cnb p{margin:0 0 16px;font:300 14px/1.6 'Poppins',sans-serif;color:rgba(255,255,255,.9)}
.cnb p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.cnbtns{display:flex;gap:10px}
.cnbtn{flex:1 1 0;height:44px;padding:0 18px;border-radius:999px;border:1.5px solid #fff;background:#fff;color:#161632;font:500 12px 'Poppins',sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.cnbtn:hover{transform:translateY(-2px)}
.cnbtn:focus-visible,.cnb a:focus-visible,.vmplay:focus-visible,.or-lbo.cn .pl:focus-visible{outline:2px solid #A1A1CA;outline-offset:2px}
#app.menu-open .cnb,#app.cf-open .cnb,.pv.on~.cnb{opacity:0;visibility:hidden;pointer-events:none;transition:none}
.cnp{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 24px));padding:22px 24px 20px;border-radius:22px;background:rgba(22,22,50,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;text-align:left;box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.14)}
.cnp b{display:block;font:600 16px/1.3 'Nunito',sans-serif;color:#fff}
.cnp p{margin:8px 0 16px;font:300 13px/1.55 'Poppins',sans-serif;color:rgba(255,255,255,.82)}
.vmplay{position:absolute;z-index:6;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);background:rgba(14,14,34,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;display:grid;place-items:center;transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s}
.vmplay:hover{transform:scale(1.08);background:rgba(255,255,255,.2)}
.vmplay svg{width:26px;height:26px;fill:#fff;margin-left:4px}
.or-lbo.cn .pl{padding:0;cursor:pointer;color:#fff}
.or-lbo.cn .pl:hover{transform:scale(1.1)}
@media (max-width:700px){
  .cnb{bottom:max(12px,env(safe-area-inset-bottom,0px));width:calc(100% - 24px);padding:18px 18px 16px;border-radius:20px}
  .cnb p{font-size:13px}
  .cnp{padding:18px 18px 16px}
}
@media (prefers-reduced-motion:reduce){.cnb,.cnb.on{transform:translate(-50%,0);transition:opacity .2s ease,visibility 0s}.cnbtn:hover,.vmplay:hover{transform:none}}
/* COOKIES_END */

/* review bar: for looking at the draft only, not part of the site */
.rv{position:fixed;top:50%;left:14px;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:4px;background:#0f0f24;border-radius:12px;font:500 11px 'Poppins',sans-serif;color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.rv button{all:unset;cursor:pointer;padding:8px 12px;border-radius:8px;opacity:.6;white-space:nowrap}
.rv button:hover{opacity:1}
.rv button.on{background:#434295;opacity:1}
.rv button.gp{margin-top:8px}

/* ---------- responsive: tablet and phone ----------
   Everything below sits inside a media query, so the desktop page is untouched.
   <= 1024: tablet.   <= 900: single columns and stacked footer.   <= 820: phone and small tablet.   <= 1100 and upright (taller than wide): the Home, About and Contact heroes are re-laid out
   (the matching rule in the script is CP, which moves the big logo shapes). */
@media (max-width:1024px){
  .wrap,.ch-def.wrap,.ch-make.wrap{padding-left:40px;padding-right:40px}
  .sec{padding-top:84px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards .card:nth-child(3){transition-delay:.12s}.cards .card:nth-child(4){transition-delay:.24s}
  .panel{padding:48px 40px;gap:28px}
  .foot{margin-top:72px}
  #home .hl,#home .blk{left:40px}
  .hero .hl{left:40px}.hero .blk{right:40px}
  .tcopy{left:40px;right:40px;gap:32px}
  .tfoot{padding:22px 40px 28px}.tfoot::before{left:40px;right:40px}
  .tfoot nav{gap:18px}
  #contactScroll .cwrap{padding-left:40px;padding-right:40px}
  .cform.glass{padding:32px 32px 28px}
  .thread{left:calc(max(20px,50% - 562px) - 1px)}
  /* the draft panel becomes one small button that opens the list */
  .rv{top:auto;bottom:10px;left:10px;transform:none;max-height:34px;overflow:hidden;max-width:calc(100vw - 20px);border-radius:17px;transition:max-height .25s ease}
  .rv::before{content:'Draft tools';display:block;padding:10px 14px;font:500 11px 'Poppins',sans-serif;cursor:pointer;opacity:.85}
  .rv.open{max-height:calc(100dvh - 20px);overflow:auto;border-radius:14px}
}
@media (max-width:900px),(max-width:1100px) and (max-aspect-ratio:20/21){
  .tfoot{grid-template-columns:minmax(0,1fr) auto;row-gap:14px}
  .tfoot .fsoc{justify-self:end}
  .tfoot .legal{grid-column:1 / -1;justify-self:start;flex-wrap:wrap;gap:6px 18px}
  #contactScroll .cwrap{grid-template-columns:minmax(0,1fr);row-gap:40px;padding-top:112px}
  .cl .sub,.cl>div.cr{max-width:none}
  .cform.glass{align-self:stretch}
}
@media (max-width:820px){
  .nav{top:12px;gap:4px;padding:4px 6px 4px 12px;max-width:calc(100vw - 16px)}
  .nav .logo{width:22px;height:17px;margin-right:4px}
  .nav ul{gap:0}
  .nav a.l{padding:10px 11px;letter-spacing:.08em}
  .wrap,.ch-def.wrap,.ch-make.wrap{padding-left:24px;padding-right:24px}
  .sec{padding-top:64px}
  .lead{font-size:clamp(30px,8.6vw,44px);margin:18px 0 32px}
  .cols{grid-template-columns:minmax(0,1fr);gap:14px}
  .txt p{font-size:16px}
  .cards{grid-template-columns:minmax(0,1fr);gap:14px}
  .cards .card:nth-child(n){transition-delay:0s}
  .card{padding:24px 22px 28px;border-radius:20px}
  .card h3{margin:26px 0 8px;font-size:22px}
  .make{flex-direction:column;align-items:flex-start;gap:14px}
  .panel{flex-direction:column;align-items:flex-start;padding:36px 26px 34px;gap:24px;border-radius:26px}
  .panel .deco{width:360px;right:-60px;bottom:-60px}
  .panel .pill{align-self:stretch;justify-content:center}
  .foot{flex-direction:column;align-items:flex-start;gap:18px;margin-top:56px;padding-bottom:32px}
  .foot nav{gap:18px}
  /* the closing band ("Ready to grow your brand?") and the footer read top to bottom */
  .talk{display:flex;flex-direction:column;justify-content:flex-end;min-height:max(100svh,560px)}
  .tcopy{position:relative;left:auto;right:auto;bottom:auto;flex-direction:column;align-items:flex-start;gap:22px;padding:96px 24px 40px}
  .tbig{font-size:clamp(38px,11.4vw,64px);max-width:none}
  .tblk{width:auto;max-width:440px}
  .tblk .pill{align-self:stretch;justify-content:center}
  .tfoot{position:relative;grid-template-columns:minmax(0,1fr);justify-items:start;padding:22px 24px 26px}
  .tfoot::before{left:24px;right:24px}
  .tfoot .fsoc{justify-self:start}
  /* contact */
  #contactScroll .cwrap{padding:100px 24px 36px}
  .cl{gap:30px}
  .cl .hl{font-size:clamp(36px,11vw,56px)}
  .cform.glass{padding:28px 22px 26px;border-radius:24px}
  .cdet li{grid-template-columns:84px 1fr}
  .cdet a,.cdet span.v{font-size:18px;overflow-wrap:anywhere}
  .frow{grid-template-columns:minmax(0,1fr);gap:20px}
  .fsend{flex-direction:column;align-items:stretch;gap:14px;text-align:center}
  .fsend .pill{justify-content:center}
  .done{padding:24px}
  /* About, the journey version */
  .thread{left:12px}
  .ch{--pt:96px;min-height:100svh}
  .ch.cont{--pt:112px}
  .ch>.mid{padding:24px 0 48px}
  .wtx{font-size:clamp(34px,9.8vw,56px);white-space:normal}
  .wtx::before{left:-17px}
  .motif{right:-150px;top:70px;width:330px}
  .gtx{padding:130px 24px 80px;font-size:clamp(36px,10.4vw,60px);max-width:none}
  .ch-goal .chl{left:24px;top:96px}
  .ticks{right:12px}
  .deflead{font-size:clamp(20px,5.2vw,26px)}
  .car-stage{height:clamp(300px,50vh,360px);--dx:min(250px,66vw)}
  .car .card{width:min(300px,78vw);margin-left:calc(min(300px,78vw) / -2);padding:24px 24px 28px}
  .car .card h3{font-size:24px}
  .car .card p{font-size:15px}
  .car-ctl{gap:14px}
  .mk3{grid-template-columns:minmax(0,1fr);row-gap:18px;justify-items:center}
  .m3ico,.m3go{justify-self:center}
  .m3reel{width:100%;--rh:clamp(54px,15vw,76px)}
  .m3go{min-width:min(280px,100%)}
  .skip{bottom:22px}
}
@media (max-width:1100px) and (max-aspect-ratio:20/21){
  #home .hl,#app[data-lay="b"] #home .hl{top:104px;bottom:auto;left:24px;right:24px;font-size:clamp(40px,12.6vw,92px)}
  #home .blk,#app[data-lay="b"] #home .blk{left:24px;right:24px;bottom:max(28px,env(safe-area-inset-bottom));width:auto;align-items:flex-start;text-align:left}
  #app[data-lay="b"] #home .blk .eyebrow,#app[data-lay="b"] #home .blk .cta{justify-content:flex-start}
  .hero{height:100svh;min-height:max(100svh,680px)}
  .hero .copy{display:flex;flex-direction:column;justify-content:flex-end;gap:20px;padding:0 24px 64px}
  .hero .copy>*{position:static}
  .hero .hl{font-size:clamp(36px,10.8vw,58px)}
  .hero .blk{width:auto;gap:16px}
  .cue{bottom:14px}
}
@media (min-width:700px) and (max-width:1100px) and (max-aspect-ratio:20/21){
  #home .hl,#app[data-lay="b"] #home .hl,#home .blk,#app[data-lay="b"] #home .blk{left:40px;right:40px}
  .hero .copy{padding:0 40px 64px}
}
/* a phone held sideways: short and wide */
@media (orientation:landscape) and (max-height:520px){
  .nav{top:8px}
  #home .hl,#app[data-lay="b"] #home .hl{top:70px;bottom:auto;left:40px;font-size:clamp(28px,9.5vh,44px)}
  #home .blk,#app[data-lay="b"] #home .blk{left:40px;right:auto;bottom:14px;width:min(46vw,400px);gap:10px;align-items:flex-start;text-align:left}
  #app[data-lay="b"] #home .blk .eyebrow,#app[data-lay="b"] #home .blk .cta{justify-content:flex-start}
  #home .blk .sub{font-size:13px;line-height:1.45}
  .hero{height:100svh;min-height:max(100svh,340px)}
  .hero .hl{left:40px;bottom:42px;font-size:clamp(26px,9vh,40px)}
  .hero .blk{right:40px;bottom:42px;width:min(46vw,380px);gap:10px}
  .hero .blk .sub{font-size:13px;line-height:1.45}
  .cue{display:none}
  .abody{margin-top:-20px}
  #contactScroll .cwrap{padding-top:78px}
}
@media (max-width:380px){
  .nav a.l{padding:10px 8px;letter-spacing:.04em;font-size:9.5px}
  .nav .logo{width:20px}
  .card h3{font-size:20px}
}
/* ---------- the phone: burger menu, and a quieter Home (phones only; tablets and desktops keep the full menu) ---------- */
.burger,.mnu{display:none}
@media (max-width:700px),(orientation:landscape) and (max-height:520px){
  .nav{left:16px;right:16px;max-width:none;justify-content:space-between;gap:0;padding:3px 4px 3px 15px;transform:translateY(-14px)}
  .go .nav{transform:translateY(0)}
  .nav ul{display:none}
  .nav .logo{margin:0}
  .burger{display:block;position:relative;flex:none;width:46px;height:38px;border:0;border-radius:999px;background:none;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .4s}
  .burger i{position:absolute;left:14px;right:14px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .4s cubic-bezier(.16,1,.3,1),top .4s cubic-bezier(.16,1,.3,1)}
  .burger i:nth-child(1){top:14px}.burger i:nth-child(2){top:22px}
  .menu-open .burger i:nth-child(1){top:18px;transform:rotate(45deg)}
  .menu-open .burger i:nth-child(2){top:18px;transform:rotate(-45deg)}
  .burger:focus-visible{outline:2px solid #8D7BFF;outline-offset:-2px}
  .mnu{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;justify-content:space-between;gap:24px;overflow-y:auto;
    padding:calc(92px + env(safe-area-inset-top,0px)) max(28px,env(safe-area-inset-left,0px)) max(30px,env(safe-area-inset-bottom,0px)) max(28px,env(safe-area-inset-right,0px));
    background:radial-gradient(120% 60% at 90% 0%,rgba(80,0,219,.5),rgba(80,0,219,0) 62%),radial-gradient(90% 55% at 0% 100%,rgba(67,66,149,.4),rgba(67,66,149,0) 68%),#161632;
    color:#fff;visibility:hidden;opacity:0;transition:opacity .35s ease,visibility 0s linear .35s}
  .menu-open .mnu{visibility:visible;opacity:1;transition:opacity .35s ease,visibility 0s}
  .menu-open .nav{z-index:31;--ink:#fff;--logo:#fff}
  .mmain{display:flex;flex-direction:column;gap:4px}
  .mnu a.m1{display:block;padding:11px 0;font:300 clamp(34px,10.5vw,44px)/1.1 'Nunito',sans-serif;letter-spacing:-.02em;color:#fff;text-decoration:none;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1)}
  .menu-open .mnu a.m1{opacity:.62;transform:none;transition-delay:calc(.05s + var(--i)*.06s)}
  .menu-open .mnu a.m1.cur{opacity:1;font-weight:800}
  .mfoot{display:flex;flex-direction:column;gap:22px}
  .mnu .mcta{justify-content:center;height:50px;background:#fff;color:#161632;border:0;box-shadow:0 12px 34px rgba(80,0,219,.35)}
  .msub{display:flex;flex-wrap:wrap;gap:8px 20px}
  .msub a{font:400 13px 'Poppins',sans-serif;color:rgba(255,255,255,.62);text-decoration:none;padding:6px 0}
  .msub a.cur{color:#fff}
  .mnu a:focus-visible{outline:2px solid #8D7BFF;outline-offset:4px;border-radius:6px}
  @media (prefers-reduced-motion:reduce){.mnu,.mnu a.m1,.burger i{transition:none}}
}
@media (max-width:700px) and (max-aspect-ratio:20/21){
  /* Home on a phone: the logo is in the middle of the screen, the headline at the top, the text and button at the bottom, all centred */
  #home .copy{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(104px + env(safe-area-inset-top,0px)) 28px max(48px,env(safe-area-inset-bottom,0px))}
  #home .copy>*{position:static}
  #home .hl,#app[data-lay="b"] #home .hl{margin:0;text-align:center;font-size:clamp(34px,10.6vw,48px);line-height:1.08}
  #home .blk,#app[data-lay="b"] #home .blk{width:auto;max-width:300px;align-items:center;text-align:center;gap:16px}
  #home .blk .eyebrow{display:none}
  #home .blk .sub{font-size:13.5px;line-height:1.6;letter-spacing:.03em}
  #home .blk .cta,#app[data-lay="b"] #home .blk .cta{justify-content:center}
  #home .cta .pill.glass{display:none}
  #home .cta .pill{position:relative;height:40px;padding:0 22px;font-size:10.5px;letter-spacing:.14em}
  #home .cta .pill::after{content:'';position:absolute;inset:-4px -6px}
}
@media (orientation:landscape) and (max-height:520px){
  #home .cta .pill.glass{display:none}
  .mnu{flex-direction:row;align-items:flex-end;justify-content:space-between;padding-top:calc(70px + env(safe-area-inset-top,0px))}
  .mnu a.m1{padding:5px 0;font-size:30px}
  .mfoot{width:min(44%,320px);gap:14px}
  .mnu .mcta{height:44px}
}
/* ---------- the phone: About (the journey version), the closing band and the footer ---------- */
@media (max-width:700px){
  /* the About opening is the heading and its animation only */
  .hero .blk .sub,.hero .blk .cta{display:none}
  /* the journey text a little bigger */
  .wtx{font-size:clamp(38px,11.4vw,60px)}
  .gtx{font-size:clamp(40px,11.8vw,64px)}
  .deflead{font-size:clamp(22px,5.9vw,28px);margin:0 auto clamp(14px,2.6svh,26px)}
  .car .card h3{font-size:26px}
  .car .card p{font-size:16px}
  /* 'what defines us' and 'what we make' each fit the height of the screen */
  .ch-def,.ch-make{min-height:100svh;--pt:84px}
  .ch-def>.mid{padding:8px 0 20px}
  .car-stage{height:clamp(250px,40svh,340px)}
  .car-ctl{margin-top:16px}
  .ch-make>.mid{padding:8px 0 24px}
  #m3cv{width:min(150px,20svh)!important;height:min(150px,20svh)!important}
  .mk3{row-gap:6px}
  .m3reel{--rh:clamp(44px,min(13vw,7.4svh),68px)}
  .vb{overflow-x:clip} /* the swipe cards and the big faint shape lean off the right edge; nothing may widen the page */
  /* Services: no Journal cards at the end of the guide on a phone */
  .gd-read{display:none}
  /* closing band */
  .talk{min-height:max(100svh,600px)}
  .tcopy{padding:88px 24px 36px;gap:18px}
  .tbig{font-size:clamp(32px,9.6vw,46px)}
  .tblk{gap:18px}
  .tblk p{font-size:14px;line-height:1.6;letter-spacing:.03em}
  .tblk .pill{align-self:flex-start;height:46px;padding:0 24px;font-size:11px;letter-spacing:.12em}
  .pill.cta-logo svg.lg{width:20px;height:15.5px;margin:0 11px 0 -2px}
  /* footer: the name on top, then the links in two tidy columns */
  .tfoot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 16px;align-items:start;justify-items:start;padding:24px 24px max(28px,env(safe-area-inset-bottom,0px))}
  .tfoot::before{left:24px;right:24px}
  .tfoot .fl{grid-column:1 / -1;justify-self:start}
  .tfoot nav,.tfoot .fsoc,.tfoot .legal{display:flex;flex-direction:column;flex-wrap:nowrap;gap:0}
  .tfoot nav a{display:block;padding:10px 0;font-size:13px;line-height:1.3}
  .tfoot .fsoc{grid-column:1;justify-self:start}
  .tfoot .legal{grid-column:2;justify-self:start}
}
/* ---------- About: no bold purple accent words (any screen), and the phone clean-ups ---------- */
.hero .hslot{display:none}
#aboutScroll .hero .hl b,#aboutScroll .lead b,#aboutScroll .panel h2 b,#aboutScroll .wtx b,#aboutScroll .gtx b,#aboutScroll .deflead b,#aboutScroll .tbig b{font-weight:inherit;color:inherit}
#aboutScroll .wtx b .w{background-image:linear-gradient(100deg,var(--offblack) 0%,var(--offblack) 36%,#8281B8 50%,var(--offblack) 64%,var(--offblack) 100%)}
@media (max-width:820px){
  .thread{clip-path:inset(26px -30px 0 -30px)} /* the line starts inside the white panel, not over its curved corner */
}
@media (max-width:700px) and (max-aspect-ratio:20/21){
  /* the opening: the logo animation centred and a little bigger, the heading centred under it */
  .hero .hslot{display:block;flex:none;width:1px;height:var(--lh,200px);margin-bottom:clamp(26px,4.2svh,40px)}
  .hero .copy{justify-content:center;align-items:center;text-align:center;gap:0;padding:0 24px 28px}
  .hero .hl{text-align:center}
  .hero .blk{align-items:center;gap:0;margin-top:22px}
  .hero .blk .eyebrow{justify-content:center}
  /* what defines us: the boxes grow to fit their words, the arrows and bars sit in the middle with no counter */
  .car-stage{display:grid;height:auto;--dx:min(262px,68vw)}
  .car .card{position:relative;left:auto;top:auto;grid-area:1 / 1;justify-self:center;margin-left:0;width:min(320px,84vw);height:auto;padding:24px 24px 28px}
  .car .card canvas{width:96px!important;height:96px!important}
  .car .card h3{margin:20px 0 10px}
  .car .card p{line-height:1.55}
  .ccount{display:none}
  .car-ctl{margin-top:22px}
}
@media (max-width:700px){
  #aboutScroll .hero .blk .eyebrow{display:none} /* phone: no dot and "About How Two Cut" line in the opening */
}
/* ---------- the phone: Contact, calmer (one idea per screen) ---------- */
.cf-btn,.cf-x,.cf-bd,.ccue{display:none}
@media (max-width:700px) and (max-aspect-ratio:20/21){
  #contactScroll .cwrap{padding:calc(104px + env(safe-area-inset-top,0px)) 24px max(56px,env(safe-area-inset-bottom,0px));row-gap:72px}
  .cl{gap:72px;justify-content:flex-start}
  /* first screen: the heading and its two lines, sitting low, with the mark above */
  .cl .top{gap:16px;justify-content:flex-end;min-height:calc(100vh - 104px - 72px);min-height:calc(100svh - 104px - 72px)}
  .cl .hl{font-size:clamp(32px,9.6vw,42px);margin-top:2px}
  .cl .sub{font-size:14.5px;line-height:1.7;max-width:31ch}
  /* second screen: the ways to reach us, as one soft box */
  .cl>div.cr{max-width:none}
  .cdet{border:1px solid rgba(67,66,149,.14);border-radius:26px;padding:6px 24px;background:rgba(255,255,255,.72);box-shadow:0 16px 40px rgba(34,33,75,.08)}
  .cdet li{grid-template-columns:minmax(0,1fr);gap:7px;padding:20px 0;border-bottom:1px solid rgba(67,66,149,.12)}
  .cdet li:last-child{border-bottom:0}
  .cdet .lbl{font-size:10.5px;letter-spacing:.2em}
  .cdet a,.cdet span.v{font-size:16.5px;font-weight:600}
  nav.soc{gap:6px 28px;margin-top:22px;padding-left:2px;font-size:12.5px;flex-wrap:wrap}
  nav.soc a{padding:10px 0}
  /* third screen: the form, quieter */
  .cform.glass{padding:34px 24px 30px;border-radius:26px}
  .cform h2{font-size:22px}
  .cform .hint{margin-top:8px;font-size:12.5px}
  .cform form{gap:30px;margin-top:30px}
  .frow{gap:30px}
  .fld{gap:4px}
  .fld label,.fl{font-size:10.5px;letter-spacing:.2em}
  .fld input,.fld textarea{padding:10px 0 12px}
  .fld textarea{height:104px}
  .fsend{align-items:flex-start;text-align:left;gap:20px;margin-top:6px}
  .fsend button.pill{position:relative;align-self:flex-start;height:42px;padding:0 24px;font-size:10.5px;letter-spacing:.14em}
  .fsend button.pill::after{content:'';position:absolute;inset:-4px -6px}
  .fsend small{font-size:12px;line-height:1.6}
  .done{padding:32px 24px}
  .done h2{font-size:26px}
  .done p{font-size:14px}
  /* the first screen ends with one small button and a scroll cue; the form opens as a pop-up */
  .cl .top{padding-bottom:64px}
  .cl .top .cf-btn{display:inline-flex;align-self:flex-start;position:relative;margin-top:8px;height:42px;padding:0 24px;font-size:10.5px;letter-spacing:.14em;cursor:pointer;font-family:'Poppins',sans-serif}
  .cf-btn::after{content:'';position:absolute;inset:-4px -6px}
  .ccue{display:flex;position:absolute;left:50%;top:calc(100vh - 78px);top:calc(100svh - 78px);transform:translateX(-50%);z-index:3;flex-direction:column;align-items:center;gap:8px;
    font:500 10px 'Poppins',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(67,66,149,.7);opacity:0;transition:opacity .8s ease;pointer-events:none}
  .go .ccue{opacity:1;transition-delay:1.6s}
  .ccue i{display:block;width:1px;height:30px;background:linear-gradient(rgba(67,66,149,.6),rgba(67,66,149,0));transform-origin:top;animation:cue 2.2s ease-in-out infinite}
  .cf-bd{display:block;position:fixed;inset:0;z-index:55;background:rgba(22,22,50,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
  #app.cf-open .cf-bd{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
  #contactScroll .cform.glass{position:fixed;z-index:60;left:16px;right:16px;top:max(24px,env(safe-area-inset-top,0px));align-self:auto;padding:30px 22px 26px;border-radius:26px;
    background:linear-gradient(135deg,#fff 0%,#F2F0FB 100%);box-shadow:0 30px 80px rgba(22,22,50,.4);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px) scale(.985);transition:opacity .3s ease,transform .5s cubic-bezier(.16,1,.3,1),visibility 0s linear .5s;transition-delay:0s}
  #app.cf-open #contactScroll .cform.glass{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1),visibility 0s}
  #contactScroll .cform:focus{outline:none}
  #app.cf-open #contactScroll{overflow:hidden}
  #app.cf-open .nav{opacity:0;visibility:hidden;pointer-events:none}
  .cform form{gap:24px;margin-top:0;max-height:calc(100vh - 48px - 56px);max-height:calc(100svh - 48px - 56px);overflow-y:auto;overscroll-behavior:contain;margin-right:-6px;padding-right:6px}
  .cform form>div:first-of-type{padding-right:40px}
  .fld textarea{height:88px}
  .cf-x{display:grid;place-items:center;position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid rgba(67,66,149,.22);background:#fff;color:var(--purple);cursor:pointer}
  .cf-x::after{content:'';position:absolute;inset:-4px}
  .cf-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
}
@media (max-width:700px) and (max-aspect-ratio:20/21) and (max-height:720px){ /* shorter phones: the pop-up tightens so the whole form shows */
  #contactScroll .cform.glass{padding:24px 22px 20px}
  .cform form{gap:17px;max-height:calc(100vh - 48px - 44px);max-height:calc(100svh - 48px - 44px)}
  .cform .hint{margin-top:5px}
  .fld input,.fld textarea{padding:6px 0 8px}
  .fld textarea{height:64px}
  .fsend{gap:12px;margin-top:2px}
}
@media (max-width:700px) and (max-aspect-ratio:20/21) and (max-height:600px){
  .cform form{gap:13px}
  .fld textarea{height:52px}
  .cform h2{font-size:20px}
}
/* ---- the WordPress theme only ---- */
.rv{display:none!important} /* the review bar of the draft is not part of the site */