/* layout: text left, the moving match right; one dark brand look */
:root{--ink:#0B0F14;--panel:#121922;--line:#2A3441;--chalk:#EEF2F0;--slate:#8FA3BF;--lime:#C6FF3D;color-scheme:dark;
 --display:Archivo,"Arial Narrow",Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace}
body{margin:0;background:var(--ink);color:var(--chalk);font-family:var(--display);font-size:17px;line-height:1.5}
a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}a:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:24px;box-sizing:border-box}
.nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;padding-block:18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-stretch:125%;font-size:18px;letter-spacing:-.02em}
.mark{width:34px;height:34px}
.links{display:flex;gap:32px;font-size:16px}.links a{padding:12px 0}.links .on{color:var(--lime)}
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:24px 8px;padding:16px 0 48px max(24px,calc(50% - 576px))}
.copy{flex:1 1 360px;max-width:440px;display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-right:24px;box-sizing:border-box}
h1{margin:0;font-size:clamp(34px,3.3vw,46px);line-height:1.08;font-weight:700;font-stretch:125%;letter-spacing:-.02em;text-wrap:balance}
.sub{font-size:18px;color:var(--slate)}
.btns{display:flex;flex-wrap:wrap;gap:14px;padding-top:6px}
.btn{display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:4px;font-size:16px;font-weight:600;box-sizing:border-box}
.btn.p{background:var(--lime);color:var(--ink)}.btn.g{border:1px solid var(--slate)}
.stage{flex:2 1 520px;min-width:0}
.pic{position:relative}
#scene{display:block;width:100%;height:auto}
.chip{position:absolute;transform:translate(0,-50%);width:max-content;max-width:150px;font-family:var(--mono);font-size:13px;line-height:1.3;background:var(--ink);border:1px solid var(--line);border-radius:3px;padding:6px 10px}
.chip.r{transform:translate(-100%,-50%)}
.chip .n{display:none}
.legend{display:none}
.note{font-family:var(--mono);font-size:13px;color:var(--slate);border-top:1px solid var(--line);padding-block:20px 40px}
@media (max-width:700px){.hero{padding-left:16px;padding-right:16px}.copy{padding-right:0}
 .chip,.chip.r{transform:translate(-50%,-50%);width:22px;height:22px;max-width:none;padding:0;border-radius:50%;border-color:var(--lime);display:flex;align-items:center;justify-content:center;font-size:12px}
 .chip .t{display:none}.chip .n{display:block;font-weight:500;color:var(--lime)}
 .legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;list-style:none;margin:16px 0 0;padding:0;font-family:var(--mono);font-size:12px;line-height:1.35}
 .legend li{display:flex;gap:8px}.legend b{color:var(--lime);font-weight:500}}
/* movement */
.trail,.shot{display:none}
.pass{transition:opacity .25s,stroke-width .25s}
.fan{animation:bob 1.6s ease-in-out infinite}
.f0{animation-delay:-.1s}.f1{animation-delay:-.5s}.f2{animation-delay:-.9s}.f3{animation-delay:-1.25s}.f4{animation-delay:-.3s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.8px)}}
#scene.near .fan{animation-duration:.7s}
#scene.goal .fan,#scene.goal .sub{animation-name:jump;animation-duration:.42s}
@keyframes jump{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.flag{transform-box:fill-box;transform-origin:left center;animation:wave 1.8s ease-in-out infinite}
#scene.goal .flag{animation-duration:.5s}
@keyframes wave{0%,100%{transform:skewY(0deg) scaleX(1)}50%{transform:skewY(-10deg) scaleX(.88)}}
.bar{transform-box:fill-box;transform-origin:center bottom;animation:grow 4s ease-in-out infinite}
.b0{animation-delay:-.2s}.b1{animation-delay:-1s}.b2{animation-delay:-1.9s}.b3{animation-delay:-2.7s}.b4{animation-delay:-3.4s}
@keyframes grow{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.5)}}
.draw{stroke-dasharray:1;animation:draw 5s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:1}45%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.glow{animation:glow 3.2s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.7}50%{opacity:1}}
.blink{animation:blink 1.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
#scene.goal #goalFar{animation:net .26s ease-in-out 4}
@keyframes net{50%{transform:translate(2.5px,-1.5px)}}
#scene.paused *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){#scene *{animation:none!important}}
.chip{white-space:nowrap;max-width:none}
.sub{animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.an{animation:sway 3.4s ease-in-out infinite}.a1{animation-delay:-1.2s}.a2{animation-delay:-2.3s}
@keyframes sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(3deg)}}

/* ================= site: shared ================= */
:root{color-scheme:dark}
html{scroll-behavior:smooth;background:var(--ink)}
body{min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
main{flex:1 0 auto}
.wrap{width:100%}
.skip{position:absolute;left:-999px;top:0;background:var(--lime);color:var(--ink);padding:10px 14px;z-index:10;font-weight:600}
.skip:focus{left:8px;top:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
h2{margin:0;font-size:clamp(28px,3.2vw,40px);line-height:1.1;font-weight:700;font-stretch:125%;letter-spacing:-.02em;text-wrap:balance}
h3{margin:0;font-size:20px;line-height:1.2;font-weight:700;font-stretch:125%;letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.btn{transition:background .15s,border-color .15s;cursor:pointer;font-family:inherit}
.btn:hover{text-decoration:none}
.btn.p:hover{background:#D8FF78}
button.btn.g{background:none;color:var(--chalk)}
.btn.g:hover{border-color:var(--chalk)}
.eyebrow{font-family:var(--mono);font-size:13px;color:var(--slate)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 32px}
.sec-head p{color:var(--slate)}
.lg{display:block;max-width:100%;height:auto}
.cnt{color:var(--chalk)}

/* ================= home ================= */
.logos{border-block:1px solid var(--line)}
.logos-in{display:flex;flex-direction:column;gap:22px;padding-block:36px 40px}
.logo-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px}
.what{display:flex;flex-wrap:wrap;gap:40px 64px;padding-top:96px}
.what h2{flex:1 1 240px}
.what-grid{flex:3 1 560px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px 56px;min-width:0}
.svc{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:20px}
.svc p{font-size:16px;color:var(--slate)}
.work{display:flex;flex-direction:column;gap:36px;padding-block:96px;scroll-margin-top:8px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.tile{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:196px;box-sizing:border-box;padding:24px 24px 22px 28px;background:var(--ink);min-width:0;transition:background .15s}
.tile:hover{background:var(--panel);text-decoration:none}
.tile-top{display:flex;justify-content:flex-end}
.plus{width:16px;height:16px;fill:none;stroke:var(--slate);stroke-width:1.5;transition:stroke .15s,transform .2s}
.tile:hover .plus,.tile:focus-visible .plus{stroke:var(--lime);transform:rotate(90deg)}
.tile-logo{display:flex;align-items:center;min-height:52px}
.tile-meta{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:13px;color:var(--slate)}
@media (max-width:980px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.tile{min-height:150px;padding:18px 16px 16px 18px;gap:18px}.tile-meta{flex-direction:column;gap:2px}}
.cta{background:var(--panel)}
.cta-in{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-block:88px}
.cta h2{max-width:760px;font-size:clamp(28px,3.4vw,44px)}
.cta p{max-width:560px;font-size:18px;color:var(--slate)}
.cta .btns{padding-top:8px}
.foot{border-top:1px solid var(--line)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;padding-block:20px;font-family:var(--mono);font-size:13px;color:var(--slate)}
.foot-a{display:flex;flex-wrap:wrap;gap:8px 32px}
.foot-b{display:flex;flex-wrap:wrap;gap:8px 28px}
.foot-b a{padding:12px 0}

/* ================= client panel ================= */
html.locked{overflow:hidden}
.panel{position:fixed;inset:0 0 0 auto;margin:0;width:min(720px,100%);max-width:100%;height:100%;max-height:100%;padding:0;border:0;border-left:1px solid var(--line);background:var(--panel);color:var(--chalk);overflow:hidden;box-sizing:border-box}
.panel::backdrop{background:rgba(5,8,11,.62)}
.panel[open]{animation:slide .26s ease-out}
@keyframes slide{from{transform:translateX(36px);opacity:0}}
@media (prefers-reduced-motion:reduce){.panel[open]{animation:none}}
.panel-in{height:100%;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;padding:env(safe-area-inset-top,0px) clamp(20px,6vw,48px) calc(48px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:22px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:24px;position:sticky;top:0;z-index:2;background:var(--panel);padding-block:24px 16px;margin-bottom:-6px}
.x{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--line);border-radius:4px;color:var(--chalk);cursor:pointer}
.x:hover{border-color:var(--slate)}
.x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.panel-meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-family:var(--mono);font-size:13px;color:var(--slate)}
.panel-p{font-size:18px;line-height:1.6}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:12px}
.stat{background:var(--panel);padding:24px 24px 22px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stat b{font-size:clamp(40px,9vw,56px);line-height:1.1;font-weight:700;font-stretch:125%;letter-spacing:-.02em;color:var(--lime)}
.stat span{font-family:var(--mono);font-size:13px;color:var(--slate)}
.arts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:520px){.arts{grid-template-columns:minmax(0,1fr)}.stat{padding:18px 16px}}
.art{display:flex;flex-direction:column;background:var(--ink);border:1px solid var(--line);border-radius:6px;overflow:hidden;min-width:0;transition:border-color .15s}
.art:hover{border-color:var(--slate);text-decoration:none}
.art-pic{display:block;position:relative;aspect-ratio:16/9;background:#1A232E;overflow:hidden}
.art-ph{position:absolute;inset:0;background:no-repeat center/42% auto;opacity:.28}
.art-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.art-body{display:flex;flex-direction:column;justify-content:space-between;gap:14px;flex-grow:1;padding:16px 16px 14px}
.art-title{font-size:16px;line-height:1.35;font-weight:600}
.art-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;color:var(--slate)}
.ext{width:13px;height:13px;flex-shrink:0;fill:none;stroke:var(--slate);stroke-width:1.5}
.more{align-self:flex-start}

/* ================= about ================= */
h1.big{font-size:clamp(40px,5vw,68px);line-height:1.02}
.about-top{display:flex;flex-wrap:wrap;align-items:flex-start;gap:48px 72px;padding-block:64px 96px}
.about-text{flex:1 1 480px;max-width:640px;display:flex;flex-direction:column;gap:20px;min-width:0}
.about-text p{font-size:17px;line-height:1.6}
.about-text p.lead{font-size:22px;line-height:1.3;color:var(--lime);padding-bottom:8px}
.portrait{flex:1 1 320px;max-width:420px;aspect-ratio:5/6;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--chalk)}
.portrait-mark{width:46%;height:auto}
.career{display:flex;flex-direction:column;gap:20px;padding-bottom:96px}
.tl-key{display:flex;flex-wrap:wrap;gap:8px 28px;font-family:var(--mono);font-size:12px;color:var(--slate)}
.tl-key span{display:inline-flex;align-items:center;gap:8px}
.tl-key i{width:22px;height:10px;border-radius:3px;box-sizing:border-box}
.tl-key i.now,.tl-bar.now{background:var(--lime)}
.tl-key i.job,.tl-bar.job{background:var(--slate)}
.tl-key i.edu,.tl-bar.edu{border:1.5px solid var(--slate);background:transparent}
.tl-hint{font-family:var(--mono);font-size:12px;color:var(--slate)}
.tl{display:flex;flex-direction:column;gap:6px}
.tl-axis,.tl-row{display:grid;grid-template-columns:300px minmax(0,1fr);column-gap:24px}
.tl-years{position:relative;height:22px;font-family:var(--mono);font-size:12px;color:var(--slate)}
.tl-years span{position:absolute;top:0}
.tl-rows{border-bottom:1px solid var(--line)}
.tl-row{align-items:center;border-top:1px solid var(--line);transition:background .15s}
.tl-row:hover,.tl-row:focus{background:#0F151C}
.tl-who{display:flex;flex-direction:column;gap:2px;padding-block:12px;min-width:0}
.tl-who b{font-size:16px;line-height:1.25;font-weight:600}
.tl-who span{font-size:14px;line-height:1.3;color:var(--slate)}
.tl-who .tl-when-m{display:none;font-family:var(--mono);font-size:12px;padding-top:2px}
.tl-track{align-self:stretch;position:relative;background:repeat-x linear-gradient(to right,#1A232E 1px,transparent 1px);background-size:var(--g) 100%}
.tl-bar{position:absolute;top:50%;transform:translateY(-50%);height:14px;border-radius:4px;box-sizing:border-box}
.tl-when{position:absolute;top:50%;transform:translateY(-50%);padding:0 10px;white-space:nowrap;font-family:var(--mono);font-size:12px;color:var(--slate)}
.tl-desc{position:absolute;top:50%;transform:translateY(-50%);width:310px;max-width:60%;box-sizing:border-box;padding:12px 14px;background:var(--panel);border:1px solid var(--slate);border-radius:6px;font-size:14px;line-height:1.45;z-index:3;opacity:0;visibility:hidden;transition:opacity .15s;pointer-events:none}
.tl-row:hover .tl-desc,.tl-row:focus .tl-desc{opacity:1;visibility:visible}
@media (max-width:860px){
 .tl-axis,.tl-row{grid-template-columns:minmax(0,1fr)}
 .tl-axis>div:first-child,.tl-hint,.tl-when{display:none}
 .tl-years span:nth-child(even){display:none}
 .tl-who{padding-bottom:4px}
 .tl-who .tl-when-m{display:block}
 .tl-track{padding-top:24px;background-size:var(--g) 24px}
 .tl-bar{top:12px}
 .tl-desc{position:static;transform:none;width:auto;max-width:none;opacity:1;visibility:visible;background:none;border:0;border-radius:0;padding:2px 0 14px;color:var(--slate)}
}
.where{display:flex;flex-direction:column;gap:32px;padding-bottom:96px}
.where-in{display:flex;flex-wrap:wrap;align-items:center;gap:40px 64px}
.map{flex:2 1 520px;min-width:0;position:relative}
.map img{display:block;width:100%;height:auto}
.map-label{position:absolute;left:42.41%;top:45.54%;transform:translate(26px,-50%);font-family:var(--mono);font-size:14px;color:var(--lime);background:var(--ink);padding:2px 8px;border-radius:3px}
.facts{flex:1 1 280px;display:flex;flex-direction:column;gap:20px;min-width:0}
.fact{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:16px}
.fact>span{font-family:var(--mono);font-size:13px;color:var(--slate)}
.fact b{font-size:19px;line-height:1.3;font-weight:400;font-variant-numeric:tabular-nums}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--lime);margin-right:10px}
.ul{text-decoration:underline}

/* ================= contact ================= */
.contact{display:flex;flex-wrap:wrap;align-items:flex-start;gap:56px 96px;padding-block:96px 136px}
.contact-main{flex:1.4 1 460px;display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0}
.lead2{font-size:20px;line-height:1.5;color:var(--slate);max-width:520px}
.contact .btns{padding-top:12px}
.big-btn{height:56px;font-size:19px;padding:0 28px}
.contact .btn.g{height:56px}
.contact .facts{padding-top:12px}
@media (max-width:480px){.big-btn{font-size:17px;padding:0 18px}.contact{padding-block:56px 88px}.about-top{padding-block:40px 72px}.work,.cta-in{padding-block:72px}.what{padding-top:72px}}
@media (max-width:700px){.hero{padding-left:24px;padding-right:24px}.portrait{aspect-ratio:2/1;max-width:none}.portrait-mark{width:auto;height:62%}}

/* ================= round 2 ================= */
.brand:hover{text-decoration:none}
/* client logos: slow scroll, pauses under the mouse */
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.marq-track{display:flex;width:max-content;animation:marq 48s linear infinite}
.marq-set{display:flex;align-items:center;gap:72px;padding-right:72px;flex-shrink:0}
.marq-set a{display:block;opacity:.82;transition:opacity .15s}
.marq-set a:hover,.marq-set a:focus-visible{opacity:1}
.marq .lg{max-width:none}
.marq:hover .marq-track,.marq:focus-within .marq-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq{-webkit-mask-image:none;mask-image:none}.marq-track{animation:none;width:auto}.marq-set{flex-wrap:wrap;gap:28px 48px;padding-right:0}.marq-set[aria-hidden]{display:none}}
/* colour logo when a client block is under the mouse */
.lgw{position:relative;display:inline-block;line-height:0;max-width:100%}
.lgw .lg{transition:opacity .2s}
.lgc{position:absolute;max-width:none;height:auto;opacity:0;transition:opacity .2s;pointer-events:none}
.lgc.blk{border-radius:4px}
@media (hover:hover){.tile:hover .lgc{opacity:1}.tile:hover .lgw.has .lg{opacity:0}}
.tile:focus-visible .lgc{opacity:1}
.tile:focus-visible .lgw.has .lg{opacity:0}
/* contact page */
.contact{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:56px 72px;padding-block:88px 128px}
.c-main{display:flex;flex-direction:column;align-items:flex-start;gap:26px;min-width:0}
h1.huge{font-size:clamp(38px,5.4vw,76px);line-height:.96;text-transform:uppercase;letter-spacing:-.025em;text-wrap:balance}
h1.huge em{font-style:normal;color:var(--lime)}
.contact .btn.g.big-btn{height:56px}
.c-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.c-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.card{display:flex;flex-direction:column;gap:12px;box-sizing:border-box;padding:22px 22px 20px;background:var(--panel);border:1px solid var(--line);border-radius:4px;color:var(--chalk);text-align:left;font:inherit;cursor:pointer;min-width:0;transition:border-color .15s}
.card:hover{border-color:var(--slate);text-decoration:none}
.card-k{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.card-v{font-family:var(--mono);font-size:15px;overflow-wrap:anywhere}
.card-h{font-family:var(--mono);font-size:12px;color:var(--slate)}
.ic{width:20px;height:20px;fill:none;stroke:var(--lime);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.c-bar{padding:16px 18px;line-height:1.9;background:var(--lime);color:var(--ink);border-radius:4px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;text-align:center}
.c-bar span{display:inline-block;white-space:nowrap}
.c-bar span:not(:last-child)::after{content:"\00B7";margin:0 10px}
@media (max-width:900px){.contact{grid-template-columns:minmax(0,1fr);padding-block:56px 88px}}
@media (max-width:520px){.c-bar span{display:block}.c-bar span:not(:last-child)::after{content:none}}

/* round 3: no underline on the menu links, lime on hover instead */
.links a:hover,.foot-b a:hover{text-decoration:none;color:var(--lime)}
.links a,.foot-b a{transition:color .15s}

/* round 4: two-row footer, booking pop-up, privacy page */
.foot-base{border-top:1px solid var(--line)}
.foot-base .foot-a{gap:8px 28px}
.book{width:min(1040px,calc(100% - 32px));height:min(780px,calc(100% - 32px));max-width:none;max-height:none;padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);overflow:hidden}
.book[open]{display:flex;flex-direction:column;animation:pop .2s ease-out}
.book::backdrop{background:rgba(5,8,11,.72)}
@keyframes pop{from{transform:translateY(12px);opacity:0}}
@media (prefers-reduced-motion:reduce){.book[open]{animation:none}}
.book-head{display:flex;align-items:center;gap:16px;padding:10px 10px 10px 20px;background:var(--panel);color:var(--chalk);font-weight:600}
.book-head span{flex:1;min-width:0}
.book-head a{font-family:var(--mono);font-size:13px;font-weight:400;color:var(--slate);white-space:nowrap}
.book-head a:hover{color:var(--lime);text-decoration:none}
.book-body{position:relative;flex:1;min-height:0}
.book-body p{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:#5B6B82}
.book-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:520px){.book{width:100%;height:100%;border-radius:0;border:0}.book-head a{display:none}}
.legal{max-width:760px;display:flex;flex-direction:column;gap:14px;padding-block:64px 104px}
.legal h2{font-size:22px;padding-top:22px}
.legal p{font-size:17px;line-height:1.6;color:#C9D3DF}
.legal b{color:var(--chalk);font-weight:600}
.legal .legal-date{font-family:var(--mono);font-size:13px;color:var(--slate)}

/* round 5: contact page, how it works + engagement models */
.contact{padding-bottom:96px}
h2.sh{font-size:clamp(30px,3.6vw,48px);text-transform:uppercase;letter-spacing:-.02em}
h2.sh em{font-style:normal;color:var(--lime)}
.how,.eng{display:flex;flex-direction:column;gap:32px;padding-bottom:104px}
.steps{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,2.2fr);align-items:baseline;gap:8px 32px;padding-block:26px;border-top:1px solid var(--line)}
.step-n{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--lime)}
.steps h3,.model h3{font-size:24px;text-transform:uppercase}
.steps p{font-size:18px;color:#C9D3DF}
.models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.model{display:flex;flex-direction:column;gap:8px;box-sizing:border-box;min-height:230px;padding:30px 28px 32px;background:var(--panel);border:1px solid var(--line);border-radius:4px;min-width:0}
.model-k{font-size:20px;font-weight:700;font-stretch:125%;letter-spacing:-.01em;color:var(--lime)}
.model-l{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.model-p{font-size:17px;line-height:1.5;color:#C9D3DF;padding-top:10px}
@media (max-width:900px){.models{grid-template-columns:minmax(0,1fr)}.model{min-height:0}}
@media (max-width:700px){.steps li{grid-template-columns:44px minmax(0,1fr);gap:6px 12px;padding-block:20px}.steps p{grid-column:2}.how,.eng{padding-bottom:72px}.contact{padding-bottom:64px}}

/* round 6: about page, roles as result cards */
.roles{display:flex;flex-direction:column;gap:28px;padding-bottom:96px}
.roles .sec-head{align-items:center}
.roles-nav{display:flex;gap:8px}
.roles-nav .x svg{width:16px;height:16px}
.roles-nav .rn svg{transform:rotate(180deg)}
.roles-nav .x:disabled{opacity:.35;cursor:default}
.roles-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px)/4);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.roles-row::-webkit-scrollbar{display:none}
.role{scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;box-sizing:border-box;min-height:300px;padding:28px 26px 22px;background:var(--panel);border:1px solid var(--line);border-radius:4px;min-width:0;transition:border-color .15s}
.role:hover{border-color:var(--lime)}
.role h3{font-size:19px;line-height:1.2;text-transform:uppercase}
.role p{font-size:16px;line-height:1.5;color:#C9D3DF;flex:1}
.role-f{display:flex;flex-wrap:wrap;gap:2px 0;padding-top:16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.role-f span{white-space:nowrap}
.role-f span:not(:last-child)::after{content:"\00B7";margin:0 8px}
@media (max-width:1100px){.roles-row{grid-auto-columns:calc((100% - 24px)/3)}}
@media (max-width:820px){.roles-row{grid-auto-columns:calc((100% - 12px)/2)}}
@media (max-width:560px){.roles-row{grid-auto-columns:84%}.role{min-height:250px}.roles{padding-bottom:72px}}

/* round 7: role cards scroll by themselves and stop under the mouse; career summary */
.roles{display:flex;flex-direction:column;gap:28px;padding-bottom:96px}
.roles-marq{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.roles-track{display:flex;width:max-content;animation:marq 80s linear infinite}
.roles-set{display:flex;gap:12px;padding-right:12px;flex-shrink:0}
.roles-set .role{width:300px;flex-shrink:0}
.roles-marq:hover .roles-track,.roles-marq:focus-within .roles-track,.roles-marq.hold .roles-track{animation-play-state:paused}
@media (max-width:560px){.roles-set .role{width:262px}}
@media (prefers-reduced-motion:reduce){.roles-marq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.roles-track{animation:none}.roles-set[aria-hidden]{display:none}}
.about-top{padding-bottom:72px}
.sum{display:flex;flex-direction:column;gap:28px;padding-bottom:96px}
.sum-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.sum-box{display:flex;flex-direction:column;justify-content:center;gap:18px;box-sizing:border-box;padding:40px 44px;background:var(--lime);color:var(--ink);border-radius:4px;font-size:19px;line-height:1.5}
.sum-box b{font-weight:700}
.sum-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sum-tile{display:flex;flex-direction:column;gap:10px;box-sizing:border-box;min-height:150px;padding:24px 22px;background:var(--panel);border:1px solid var(--line);border-radius:4px;min-width:0}
.sum-tile b{font-size:clamp(30px,3vw,44px);line-height:1;font-weight:700;font-stretch:125%;letter-spacing:-.02em;color:var(--lime)}
.sum-tile span{font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
@media (max-width:980px){.sum-in{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.sum-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.sum-box{padding:28px 24px;font-size:18px}.sum-tile{min-height:0;padding:18px 16px}.sum,.roles{padding-bottom:72px}}

/* round 8: contact block and link row combined into one footer */
.foot{background:var(--panel)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:end;gap:48px 96px;padding-block:88px 72px}
.foot-cta{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0}
.foot-cta h2{max-width:760px;font-size:clamp(28px,3.4vw,44px)}
.foot-cta p{max-width:560px;font-size:18px;color:var(--slate)}
.foot-cta .btns{padding-top:8px}
.foot-links{display:flex;flex-direction:column;min-width:0;border-top:1px solid var(--line)}
.foot-links a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 2px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--chalk);transition:color .15s}
.foot-links a:hover{color:var(--lime);text-decoration:none}
.foot-links a:hover .ext{stroke:var(--lime)}
.foot-base{background:var(--ink)}
@media (max-width:860px){.foot-top{grid-template-columns:minmax(0,1fr);padding-block:64px 48px}}

/* round 9: more air between sections, one value for the whole site */
:root{--gap:clamp(88px,11vw,152px)}
.what{padding-top:var(--gap)}
.work{padding-block:var(--gap)}
.about-top,.sum,.roles,.where,.contact,.how,.eng{padding-bottom:var(--gap)}

/* round 10b: the whole border of each hero label is a lime gradient that keeps turning */
@property --lza{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes lza{to{--lza:360deg}}
@media (min-width:701px){
 .chip{border:1.5px solid transparent;background:linear-gradient(var(--ink),var(--ink)) padding-box,conic-gradient(from var(--lza),var(--lime),rgba(198,255,61,.5) 18%,rgba(143,163,191,.28) 50%,rgba(198,255,61,.5) 82%,var(--lime)) border-box;box-shadow:0 0 14px rgba(198,255,61,.10);animation:lza 4.5s linear infinite}
 .chip:nth-of-type(2){animation-delay:-.9s}
 .chip:nth-of-type(3){animation-delay:-2.1s}
 .chip:nth-of-type(4){animation-delay:-3.2s}
 .chip:nth-of-type(5){animation-delay:-1.5s}
}
@media (prefers-reduced-motion:reduce){.chip{animation:none}}

/* round 11: WhoScored pictures shown from the top; booking calendar shown dark */
.art-pic.tall{aspect-ratio:4/3}
.art-pic.tall img{object-position:center top}
.book{background:#121212;border-color:var(--line)}
.book-body iframe{filter:invert(.93) hue-rotate(180deg)}
.book-body p{color:var(--slate)}

/* round 12: booking calendar on pure black; the profile photo (which the colour flip turns into a negative) is covered.
   Google lays the calendar out in three ways depending on its width; the pop-up widths below keep clear of the in-between sizes. */
.book{background:#000}
@media (min-width:701px) and (max-width:1071px){.book{width:min(838px,calc(100% - 32px))}}
@media (min-width:521px) and (max-width:700px){.book{width:min(560px,calc(100% - 32px))}}
.book-body{overflow-y:auto;overscroll-behavior:contain;container-type:inline-size}
.book-in{position:relative;height:1420px}
.book-body p{inset:48px 0 auto;display:block;text-align:center}
.book-body iframe{filter:invert(1) hue-rotate(180deg)}
.book-cover{position:absolute;left:28px;top:20px;width:48px;height:48px;border-radius:50%;background:#000;pointer-events:none}
@container (max-width:899px){.book-in{height:1450px}.book-cover{left:12px;top:10px;width:40px;height:40px}}
@container (max-width:600px){.book-in{height:2150px}.book-cover{left:12px;top:66px;width:40px;height:40px}}

/* round 13: new mark (soft cube) */
.mark{width:32px;height:32px}
.portrait-mark{width:44%;height:auto}

/* round 14: employer logo at the bottom of each role card */
.role-f{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:nowrap}
.role-lg{display:block;flex-shrink:0;opacity:.92}
.role-m{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;min-width:0}
.role-f .role-m span::after{content:none}

/* round 15: hidden article cards really hide; top menu stays on one line on phones */
.art[hidden]{display:none}
@media (max-width:560px){
 .nav{flex-wrap:nowrap;gap:12px}
 .brand{font-size:16px;gap:8px;white-space:nowrap}
 .mark{width:28px;height:28px}
 .links{gap:18px;font-size:15px;white-space:nowrap}
}
@media (max-width:359px){.brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
.more{flex:none;margin-top:8px}