:root{
  --paper:#FEFEFE; --ink:#1E1E1E; --air:#8DB3FF; --sage:#ABBAB9; --mist:#DEDEDE;
  --grot:"Inter Tight",Helvetica,Arial,sans-serif; --mono:"Fragment Mono",ui-monospace,Menlo,monospace;
  --pad:max(clamp(1rem,4vw,6.25rem),calc(50% - 38.75rem)); /* content never wider than 1240px */
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font:400 1.25rem/1.3 var(--grot);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mono{font:400 .8125rem/1.35 var(--mono)}

/* nav: typesafe-style tiles floating on the sky */
nav{position:fixed;inset:0 0 auto;display:flex;justify-content:space-between;z-index:10;pointer-events:none}
nav a{pointer-events:auto;background:var(--paper);padding:.35rem .6rem;font-size:1.1rem;text-decoration:none;font-weight:500}
nav a.cta{background:var(--ink);color:var(--paper)}
nav a.logo{display:flex;align-items:center;padding:.4rem .7rem}
nav a.logo img{display:block;height:2.1rem;width:auto}

/* display type */
.display{font-weight:500;letter-spacing:-.045em;line-height:.82;font-size:clamp(3.4rem,10.4vw,8.6rem);text-align:center}
.display.sm{font-size:clamp(2.6rem,6.2vw,5.6rem);line-height:.88}

/* hero */
.sky{position:relative;min-height:32rem;display:grid;place-items:center;padding:6rem var(--pad) 4rem;overflow:hidden;isolation:isolate}
.sky::before{content:"";position:absolute;inset:-10%;z-index:-2;filter:blur(18px);
  -webkit-mask-image:linear-gradient(#000 55%,transparent 98%);mask-image:linear-gradient(#000 55%,transparent 98%);
  background:
    radial-gradient(38% 60% at 6% 20%,#6F9BFF 0,transparent 72%),
    radial-gradient(30% 55% at 26% 70%,#A9C6FF 0,transparent 70%),
    radial-gradient(34% 58% at 94% 18%,#B08CFF 0,transparent 72%),
    radial-gradient(30% 50% at 78% 62%,#7FA8FF 0,transparent 70%),
    radial-gradient(26% 40% at 52% 8%,#FFFFFF 0,transparent 70%),
    #D6E4FF}
.sky::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;mix-blend-mode:multiply;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 50%,transparent 95%);mask-image:linear-gradient(#000 50%,transparent 95%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .5 0 0 0 0 .75 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* animated illustrations (assets/anim, built by scripts/build-anim.py) */
.anim{display:block}
.anim img{display:block;width:100%;height:auto}
.anim.a{align-self:start;max-width:20rem}
.anim.r{max-width:46rem;margin:2.5rem auto 0}
.leader{display:flex;gap:.4rem;justify-content:center;align-items:baseline;font-weight:500;font-size:1.05rem;padding:2rem var(--pad) 0}
.leader{white-space:nowrap;font-size:clamp(.9rem,2.8vw,1.05rem)}
.leader i{flex:0 1 12rem;min-width:1.5rem;border-bottom:2px dotted currentColor;transform:translateY(-.25rem)}
.headline{position:relative;padding:2.5rem var(--pad) 5rem;text-align:center}
.hash{position:absolute;left:calc(var(--pad) * .6);top:3rem;writing-mode:vertical-rl;transform:rotate(180deg);font:400 .625rem var(--mono);letter-spacing:.02em;opacity:.8}
.headline .display span{display:block}
@media (max-width:56rem){.hash{display:none}}

/* bands */
.band{padding:clamp(4rem,8vw,7rem) var(--pad)}
.band.air{background:var(--air)}
.band.sage{background:var(--sage)}
.band.dark{background:var(--ink);color:var(--paper)}
.crop{position:relative;padding:.5rem 0 1.5rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.crop::before,.crop::after{content:"";position:absolute;width:10px;height:10px;border:1px solid currentColor}
.crop::before{left:0;bottom:0;border-top:0;border-right:0}
.crop::after{right:0;bottom:0;border-top:0;border-left:0}

.cols{display:grid;gap:2.5rem 2rem;grid-template-columns:1fr}
@media (min-width:56rem){.cols.three{grid-template-columns:1fr 1fr .8fr}.cols.grid{grid-template-columns:repeat(3,1fr)}}
.col{border-left:1px solid currentColor;padding-left:.6rem}
.col .mono{display:block;margin-bottom:1.6rem}
.col p{font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.2;max-width:24rem}
.col.small p{font-size:1.05rem;line-height:1.3}

/* the terminal: one regulated task, start to sign-off */
.term{max-width:46rem;margin:0 auto;border:1px solid #555;background:#141414}
.term .bar{display:flex;justify-content:space-between;padding:.35rem .7rem;border-bottom:1px solid #555;color:#aaa}
.term ol{list-style:none;padding:1rem .9rem 1.2rem;font:400 clamp(.75rem,1.4vw,.9rem)/1.7 var(--mono);color:#d6d6d6}
.term li{display:grid;grid-template-columns:7.5rem 1fr;gap:.8rem}
.term li b{font-weight:400;color:var(--air)}
.term li.ok b,.term li.ok{color:#fff}
.term li.ok em{font-style:normal;background:var(--air);color:var(--ink);padding:0 .35rem}
@media (max-width:34rem){.term li{grid-template-columns:1fr;gap:0;margin-bottom:.5rem}}
/* lines reveal as the terminal scrolls into view; everything shows where unsupported */
@supports (animation-timeline: view()){
  .term li{animation:line linear both;animation-timeline:view();animation-range:entry 30% cover 40%}
  @keyframes line{from{opacity:0;transform:translateY(.4rem)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.term li{animation:none}}
.caption{text-align:center;margin-top:2.5rem;font-size:clamp(1.1rem,1.6vw,1.35rem);max-width:34rem;margin-inline:auto;color:#cfcfcf}

.talk{text-align:center;padding:clamp(5rem,10vw,8rem) var(--pad)}
.talk p{margin:2rem auto 2.5rem;max-width:32rem;font-size:clamp(1.15rem,1.6vw,1.4rem)}
.talk a.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font:500 clamp(1.3rem,2.4vw,2rem) var(--grot);padding:.6rem 1.3rem;letter-spacing:-.02em}
.talk a.btn:hover{background:#000}

/* talk-to-us window: opens at #enquire with CSS :target, no JavaScript */
.modal{display:none;position:fixed;inset:0;z-index:20;place-items:center;padding:1rem}
.modal:target{display:grid}
.modal .scrim{position:absolute;inset:0;background:rgba(30,30,30,.55)}
.window{position:relative;border:1px solid var(--ink);background:#D9D9D9;color:var(--ink);width:min(48rem,100%);max-height:calc(100dvh - 2rem);overflow:auto;box-shadow:inset 0 0 0 3px #D9D9D9,inset 0 0 0 4px var(--ink)}
.window .bar{display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:var(--paper);padding:.15rem .15rem .15rem .5rem;position:sticky;top:0}
.window .x{color:var(--paper);font:400 1.1rem var(--mono);padding:.1rem .55rem;text-decoration:none}
.window .body{padding:1rem 1rem 1.1rem}
.window h2{font:600 1.3rem/1.2 var(--grot);letter-spacing:-.01em}
.window .sub{font-size:1rem;margin:.2rem 0 1.4rem}
.fgrid{display:grid;grid-template-columns:1fr;gap:1.1rem 1.25rem}
@media (min-width:40rem){.fgrid{grid-template-columns:1fr 1fr}.fgrid .full{grid-column:1/-1}}
.fgrid label{display:block;font:500 .8125rem var(--mono);margin-bottom:.45rem}
.fgrid label i{font-style:normal;color:#2E5BFF}
.fgrid input,.fgrid textarea{width:100%;font:400 1rem var(--grot);color:var(--ink);background:#CFCFCF;border:1px solid #BDBDBD;padding:.6rem .6rem;border-radius:0}
.fgrid input::placeholder,.fgrid textarea::placeholder{color:#8f8f8f}
.fgrid input:focus,.fgrid textarea:focus{outline:2px solid var(--ink);outline-offset:0;background:#E6E6E6}
.fgrid :user-invalid{border-color:#B3261E}
.fgrid textarea{min-height:6.5rem;resize:vertical}
.fgrid .help{font-size:.95rem;margin-top:.45rem;color:#444}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.window .send{display:block;width:100%;margin-top:1.4rem;background:var(--ink);color:var(--paper);border:0;font:400 1rem var(--mono);padding:.75rem;cursor:pointer;text-align:center;text-decoration:none}
.window .send:disabled{opacity:.6;cursor:progress}
.window .result{min-height:1.4rem;margin-top:.75rem;font-size:1rem}
.msg.err{color:#B3261E}
.window .done{padding:2rem 0 1rem}
.window .done h2{font-size:1.6rem}

/* full-page result for browsers without JavaScript */
body.result{min-height:100vh;display:grid;place-items:center}
.talk .btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font:500 clamp(1.1rem,2vw,1.4rem) var(--grot);padding:.6rem 1.3rem;margin:.3rem}

footer{background:var(--ink);color:var(--paper);padding:4rem var(--pad) 1.2rem;overflow:hidden}
footer .word{display:block;width:min(56rem,100%);height:auto;margin:0 auto}
footer .row{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;color:#aaa}

/* ---- windows: the site's retro window, used everywhere below ---- */
.w{position:relative;background:var(--mist);border:1px solid var(--ink);box-shadow:inset 0 0 0 3px var(--mist),inset 0 0 0 4px var(--ink);text-align:left}
.wb{display:flex;justify-content:space-between;gap:1rem;background:var(--ink);color:var(--paper);padding:.15rem .5rem;white-space:nowrap;overflow:hidden}
.wi{padding:.8rem .9rem 1rem}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.6rem}
.chips li{background:#CFCFCF;padding:.05rem .4rem}
.chips li::before{content:"\2723 ";opacity:.7}

/* hero: news windows */
.news{position:relative;z-index:1;display:grid;gap:1.1rem;width:min(29rem,100%)}
.news .wi{text-align:center;font:400 .875rem/1.45 var(--mono)}
.news .wi b{display:block;font-weight:400;margin-bottom:.15rem}
.news .btn{display:inline-block;margin-top:.8rem;background:var(--ink);color:var(--paper);padding:.5rem 1.4rem;text-decoration:none}
.news .ul{display:inline-block;margin-top:.5rem;text-underline-offset:.2em}
.news .w{animation:drop .6s cubic-bezier(.2,.8,.2,1) both}
.news .n2{animation-delay:.25s}
@keyframes drop{from{opacity:0;transform:translateY(-.8rem)}to{opacity:1;transform:none}}
.dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--air);margin-right:.2rem;animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.big{display:inline-block;margin-top:3rem;font:500 clamp(2.4rem,5vw,4.4rem)/1 var(--grot);letter-spacing:-.045em;text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.14em}
.big:hover{text-decoration-thickness:.12em}

/* ---- the desk: a full-bleed scene of the workforce's windows ---- */
.desk{background:radial-gradient(rgba(30,30,30,.28) .9px,transparent 1.2px) 0 0/6px 6px,var(--air);padding:clamp(2rem,5vw,4.5rem) var(--pad)}
.os{position:relative;border:1px solid var(--ink);padding:3rem 1rem 1.5rem;display:grid;gap:1.2rem;overflow:hidden}
.os .tag{position:absolute;left:0;top:0;background:var(--ink);color:var(--paper);padding:.1rem .45rem;z-index:3}
.role .wi{display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;align-items:center;font:400 .875rem var(--mono)}
.role .chips{grid-column:1/-1;margin-top:.3rem}
.glyph{font:400 1.9rem/1 var(--mono);background:var(--ink);color:var(--mist);padding:.15rem .3rem;grid-row:span 1}
.tally .wi{display:grid;gap:.3rem}
.count{font:500 clamp(3rem,6vw,4.6rem)/.9 var(--grot);letter-spacing:-.05em}
.ver .wi{font-size:.8rem}
.blob{display:none}
.os > .board{order:-1}
@property --n{syntax:"<integer>";inherits:false;initial-value:168}
@supports (animation-timeline: view()){
  .count{color:transparent;position:relative;counter-reset:n var(--n);animation:tally 7s cubic-bezier(.3,.6,.4,1) infinite}
  .count::after{content:counter(n);position:absolute;left:0;top:0;color:var(--ink)}
  @keyframes tally{0%{--n:0}65%,100%{--n:168}}
}
@media (min-width:64rem){
  .os{display:block;height:40rem;padding:0}
  .os > .w{position:absolute;width:16rem;z-index:2}
  .r1{left:4%;top:9%}
  .r2{left:11%;top:31%}
  .r3{right:4%;top:7%}
  .r4{right:10%;top:30%}
  .os > .board{position:absolute;width:27rem;left:50%;top:8%;margin-left:-13.5rem;z-index:1;box-shadow:.6rem .6rem 0 rgba(30,30,30,.18)}
  .r5{left:5%;bottom:7%;width:14rem}
  .r6{right:3%;bottom:5%;width:13rem}
  .r7{left:22.5%;bottom:6%;width:11.5rem}
  .r8{left:50%;bottom:4%;width:20rem;margin-left:-10rem}
  .blob{display:block;position:absolute;border-radius:50%;z-index:0;
    background:radial-gradient(var(--ink) 1.3px,transparent 1.6px) 0 0/5px 5px;
    -webkit-mask-image:radial-gradient(closest-side,#000 15%,rgba(0,0,0,.55) 55%,transparent);mask-image:radial-gradient(closest-side,#000 15%,rgba(0,0,0,.55) 55%,transparent)}
  .b1{width:26rem;height:26rem;left:-6rem;bottom:-9rem}
  .b2{width:30rem;height:30rem;right:-8rem;bottom:-12rem}
  .b3{width:20rem;height:20rem;left:38%;bottom:-13rem;opacity:.8}
}
@supports (animation-timeline: view()){
  .os > .w,.os > .board{animation:pop linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .os > .r2,.os > .r4{animation-range:entry 15% entry 85%}
  .os > .r5,.os > .r6{animation-range:entry 25% entry 100%}
  @keyframes pop{from{opacity:0;translate:0 1.2rem;scale:.97}to{opacity:1;translate:0 0;scale:1}}
}

/* ---- the claim: the real numbers ---- */
.claim{padding:clamp(4.5rem,8vw,7rem) var(--pad);text-align:center}
.claim .display > span{display:block}
.note{margin:-1.6rem 0 3rem}
.note a{text-underline-offset:.2em}
.split{display:grid;gap:2rem;max-width:60rem;margin:0 auto;padding:2rem;background:radial-gradient(rgba(30,30,30,.22) .9px,transparent 1.2px) 0 0/6px 6px,#EDEDED;border:1px solid var(--ink)}
@media (min-width:46rem){.split{grid-template-columns:1fr 1fr}}
.split figure,.pair figure{margin:0}
.split figcaption,.pair figcaption{display:grid;gap:.1rem;margin-top:1rem;text-align:left;font-size:1rem;color:#444}
.split figcaption b,.pair figcaption b{color:var(--ink);font-weight:500}
.claim-sub{margin-top:2.5rem;font:500 clamp(1.5rem,2.6vw,2.2rem)/1.1 var(--grot);letter-spacing:-.03em}

/* ---- charts ---- */
.pair{display:grid;gap:2.5rem;max-width:62rem;margin:0 auto}
@media (min-width:52rem){.pair{grid-template-columns:1fr 1fr}}
.pair figcaption{max-width:26rem}

/* ---- six functions as windows ---- */
.fns{display:grid;gap:1.4rem}
@media (min-width:40rem){.fns{grid-template-columns:1fr 1fr}}
@media (min-width:64rem){.fns{grid-template-columns:repeat(3,1fr)}}
.fn .wb{font-size:.875rem}
.fn .chips{margin-top:0;font-size:.8rem}
.fn{transition:translate .2s}
.fn:hover{translate:0 -.2rem}
@supports (animation-timeline: view()){
  .fn{animation:pop linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
}

/* ---- FAQ: native details, no script ---- */
.faq{background:var(--paper)}
.qa{max-width:52rem;margin:0 auto;border-bottom:1px solid var(--ink)}
.qa details{border-top:1px solid var(--ink)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;padding:1.1rem 0;font:500 clamp(1.2rem,2vw,1.6rem)/1.15 var(--grot);letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font:400 1.5rem/1 var(--mono);transition:rotate .2s}
.qa details[open] summary::after{rotate:45deg}
.qa p{padding:0 0 1.4rem;max-width:42rem;font-size:1.1rem;line-height:1.4}
.qa p a{text-underline-offset:.2em}

/* ---- close: big mark and the one action ---- */
.close{padding:clamp(4rem,8vw,7rem) var(--pad);background:var(--sage);text-align:center}
.go{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem 2rem}
.go h2{font:500 clamp(1.6rem,3.2vw,2.8rem)/1 var(--grot);letter-spacing:-.04em;max-width:22ch}
.go i{font-style:normal;font-size:clamp(1.6rem,3vw,2.6rem);letter-spacing:-.2em}
.go a{font:500 clamp(2.2rem,4.6vw,4rem)/1 var(--grot);letter-spacing:-.045em;text-decoration-thickness:.07em;text-underline-offset:.14em}

@media (prefers-reduced-motion:reduce){.w,.dot,.count,.fn,.news .w{animation:none}.count{color:inherit}.count::after{content:none}}

/* ---- with JavaScript (assets/site.js) ---- */
.anim svg{display:block;width:100%;height:auto}
.js .count{animation:none;color:inherit}
.js .count::after{content:none}
.js .term li{animation:none}
.js .term li.wait{visibility:hidden}
.claim .n{font-variant-numeric:tabular-nums}
.clock{display:block;font:500 2.2rem/1 var(--grot);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.time .wi,.feedw .wi{display:grid;gap:.35rem}
.feed{list-style:none;min-height:7.5rem;font-size:.75rem;line-height:1.25rem}
.feed li:last-child{background:var(--ink);color:var(--paper);padding:0 .3rem;margin-left:-.3rem}
.feedw .cap{font-size:.7rem;color:#555}
.grab{cursor:grab;touch-action:none;user-select:none}
.lifted .grab,.lifted.grab{cursor:grabbing}
.os > .lifted{box-shadow:inset 0 0 0 3px var(--mist),inset 0 0 0 4px var(--ink),.5rem .5rem 0 rgba(30,30,30,.25)}