/* =========================================================
   waqarqamar.com · dark, bold, kinetic
   Layout: full-bleed sections on near-black, oversized Isometra
   headings, Arimo body, Great Vibes accents in cyan.
   ========================================================= */
:root{
  --ink:#121315;
  --ink-2:#181a1d;
  --ink-3:#1f2225;
  --paper:#f1ece4;          /* warm white, used for menu panels */
  --white:#f6f4f1;
  --muted:#8b9298;
  --line:rgba(246,244,241,.12);
  --cyan:#50b4de;
  --cyan-dim:rgba(80,180,222,.16);
  --warm:#d58a4b;           /* subtle orange from the headshot light */
  --display:"Boldonse","Arial Black","Impact",ui-sans-serif,system-ui,sans-serif;
  --body:"Arimo","Helvetica Neue",Arial,ui-sans-serif,system-ui,sans-serif;
  --script:"Great Vibes","Brush Script MT",cursive;
  --gutter:clamp(16px,4vw,64px);
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;background:var(--ink);scrollbar-color:var(--cyan) var(--ink);scrollbar-width:thin}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--ink);color:var(--white);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--cyan);color:var(--ink)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--cyan);border-radius:8px;border:2px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:var(--cyan)}
img{max-width:100%;display:block;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{padding-inline:var(--gutter);max-width:1680px;margin-inline:auto}
.accent{color:var(--cyan)}
.script{font-family:var(--script);font-weight:400;text-transform:none;letter-spacing:0;color:var(--cyan)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.h-display{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1.2;letter-spacing:-.005em;margin:0;text-wrap:balance}
.protect{position:relative}
.protect::after{content:"";position:absolute;inset:0;z-index:2}

/* ---------- cursor ---------- */
.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;border-radius:50%;opacity:0;transition:opacity .3s}
.cursor-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--white)}
.cursor-ring{width:44px;height:44px;margin:-22px 0 0 -22px;border:1.5px solid rgba(246,244,241,.8);transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background-color .35s,border-color .35s,opacity .3s}
body.has-cursor .cursor-dot,body.has-cursor .cursor-ring{opacity:1}
body.cursor-hover .cursor-ring{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--white);border-color:var(--white);mix-blend-mode:difference}
body.cursor-hover .cursor-dot{mix-blend-mode:difference}
body.cursor-play .cursor-ring{width:96px;height:96px;margin:-48px 0 0 -48px;background:rgba(246,244,241,.14);border-color:rgba(246,244,241,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);mix-blend-mode:normal}
body.cursor-play .cursor-dot{opacity:0}
.cursor-ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--white);opacity:0;transition:opacity .2s}
body.cursor-play .cursor-ring span{opacity:1}
@media (hover:hover) and (pointer:fine){body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(12px + env(safe-area-inset-top,0px)) var(--gutter) 12px;background:rgba(18,19,21,.42);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line);transition:transform .5s var(--ease),background .4s}
body.menu-open .site-header{background:var(--ink)}
.site-header>*{pointer-events:auto}
.site-header.is-hidden{transform:translateY(-110%)}
.logo{font-family:var(--display);font-weight:400;font-size:clamp(11px,1vw,14px);line-height:1.6;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;display:flex;align-items:center}
.logo .tri{display:inline-block;width:0;height:0;margin:0 .22em;border-left:.36em solid transparent;border-right:.36em solid transparent;border-bottom:.62em solid var(--cyan);transform:translateY(.12em)}
.logo b{color:var(--cyan);font-weight:400}
.header-right{display:flex;align-items:center;gap:18px}
.status-pill{display:none;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--white);padding:9px 14px;border:1px solid var(--line);border-radius:99px}
.status-pill i{width:7px;height:7px;border-radius:50%;background:#5fd38a;animation:pulse 2s infinite}
@media (min-width:860px){.status-pill{display:inline-flex}}
@keyframes pulse{50%{opacity:.35}}
.burger{width:54px;height:54px;border-radius:50%;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:border-color .3s,transform .5s var(--ease)}
.burger:hover{border-color:var(--cyan)}
.burger span{display:block;width:26px;height:2px;background:var(--white);border-radius:2px;transition:transform .5s var(--ease),width .4s var(--ease)}
.burger span+span{margin-top:7px;width:18px;transform:translateX(4px)}
.burger:hover span+span{width:26px;transform:none}
body.menu-open .burger span:first-child{transform:translateY(4.5px) rotate(45deg)}
body.menu-open .burger span+span{width:26px;transform:translateY(-4.5px) rotate(-45deg)}

/* ---------- full-screen menu ---------- */
.menu{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;background:var(--ink);clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease);visibility:hidden}
body.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible}
.menu-top{height:79px;flex:none}
.menu-panels{flex:1;display:flex;min-height:0}
.menu-panel{position:relative;flex:1;display:flex;align-items:center;justify-content:center;background:var(--paper);color:var(--ink);border-left:1px solid rgba(18,19,21,.12);overflow:hidden;transition:flex-grow .8s var(--ease),color .4s;transform:translateY(40px);opacity:0}
body.menu-open .menu-panel{transform:none;opacity:1;transition:flex-grow .8s var(--ease),color .4s,transform .9s var(--ease),opacity .9s var(--ease)}
body.menu-open .menu-panel:nth-child(2){transition-delay:0s,0s,.08s,.08s}
body.menu-open .menu-panel:nth-child(3){transition-delay:0s,0s,.16s,.16s}
body.menu-open .menu-panel:nth-child(4){transition-delay:0s,0s,.24s,.24s}
.menu-panel:first-child{border-left:0}
.menu-panel .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.12);transition:opacity .6s,transform 1.2s var(--ease)}
.menu-panel .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,19,21,.15),rgba(18,19,21,.65))}
.menu-panel .label{position:relative;z-index:1;font-family:var(--display);font-size:clamp(18px,1.8vw,36px);text-transform:uppercase;line-height:1;display:flex;align-items:center;gap:12px;white-space:nowrap}
.menu-panel .label svg{width:.55em;height:.55em;opacity:0;transform:translate(-10px,10px);transition:all .5s var(--ease)}
.menu-panel .num{position:absolute;top:22px;left:22px;font-size:12px;font-weight:700;letter-spacing:.2em;z-index:1}
.menu-panel .cap{position:absolute;left:28px;bottom:26px;z-index:1;font-family:var(--script);font-size:clamp(26px,2.4vw,40px);color:var(--white);opacity:0;transform:translateY(12px);transition:all .6s var(--ease)}
.menu-panels:hover .menu-panel{flex-grow:1}
.menu-panels .menu-panel:hover{flex-grow:1.9}
.menu-panel .label{transition:font-size .8s var(--ease)}
.menu-panels .menu-panel:hover .label{font-size:clamp(24px,2.8vw,54px)}
.menu-panel:hover{color:var(--white)}
.menu-panel:hover .bg{opacity:1;transform:scale(1)}
.menu-panel:hover .label svg,.menu-panel:hover .cap{opacity:1;transform:none}
.menu-panel.is-current .num::after{content:" · YOU ARE HERE";color:var(--cyan)}
.menu-foot{flex:none;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:center;padding:20px var(--gutter) calc(20px + env(safe-area-inset-bottom,0px));font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.menu-foot nav{display:flex;flex-wrap:wrap;gap:12px 28px}
.menu-foot a:hover{color:var(--cyan)}
.menu-foot .mail{font-family:var(--body);font-style:italic;text-transform:none;letter-spacing:0;font-weight:400;font-size:16px}
@media (max-width:760px){
  .menu-panels{flex-direction:column}
  .menu-panel{border-left:0;border-top:1px solid rgba(18,19,21,.12);justify-content:flex-start;padding-left:24px}
  .menu-panel .num{top:50%;left:auto;right:20px;transform:translateY(-50%)}
  .menu-panel .cap{display:none}
  .menu-panels:hover .menu-panel,.menu-panels .menu-panel:hover{flex-grow:1}
}

/* ---------- buttons & links ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:18px 28px;border-radius:99px;border:1px solid var(--white);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;overflow:hidden;isolation:isolate;transition:color .45s var(--ease),border-color .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--white);transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:none}
.btn--cyan{border-color:var(--cyan);background:var(--cyan);color:var(--ink)}
.btn--cyan::before{background:var(--white)}
.btn svg{width:16px;height:16px}
.link-line{position:relative;display:inline-block}
.link-line::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--cyan);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.link-line:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- reveal helpers ---------- */
.split-line{display:block}
.split-line>span{display:block}
.fade-up{will-change:transform,opacity}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding-block:120px 44px}
.hero-media{position:absolute;inset:0;background:#030507 url(../img/hero.webp) right center/cover no-repeat}
@media (max-width:760px){.hero-media{background-image:url(../img/hero-sm.webp);background-position:60% top;background-size:cover}}
@media (min-width:761px){.hero{min-height:0;aspect-ratio:16/9;max-height:none}}
.hero::before{content:"";position:absolute;inset:auto 0 0 0;height:45%;z-index:1;pointer-events:none;background:linear-gradient(0deg,var(--ink) 0,rgba(18,19,21,.85) 30%,rgba(18,19,21,0) 100%)}
.hero-inner{position:relative;z-index:2;width:100%}
.hero-hello{font-family:var(--script);font-size:clamp(36px,4.6vw,76px);color:var(--cyan);line-height:1.2;margin:0 0 .15em .05em}
.hero-name{white-space:nowrap;font-size:clamp(28px,5vw,120px);line-height:1.2}
.hero-name .fit{display:inline-block}
.hero-name .em{color:var(--white)}
.hero-name .dim{color:transparent;-webkit-text-stroke:max(.6px,.018em) rgba(246,244,241,.45)}
.hero-role{margin:28px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;font-size:clamp(13px,1.15vw,17px);font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.hero-role .rule{flex:1;min-width:60px;max-width:220px;height:1px;background:var(--line)}
.hero-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.hero-meta strong{color:var(--white);font-weight:700}
.scroll-cue{display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--white)}
.scroll-cue i{position:relative;width:1px;height:46px;background:var(--line);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--cyan);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{to{top:100%}}

/* ---------- velocity marquee ---------- */
.ticker{position:relative;overflow:hidden;border-block:1px solid var(--line);padding:14px 0;background:var(--ink)}
.ticker-track{display:flex;width:max-content;will-change:transform}
.ticker-track span{font-family:var(--display);font-size:clamp(15px,1.5vw,24px);line-height:1;text-transform:uppercase;padding-right:.6em;white-space:nowrap;display:flex;align-items:center;gap:.6em}
.ticker-track span:nth-child(even){color:transparent;-webkit-text-stroke:max(.6px,.018em) var(--white)}
.ticker-track span::after{content:"✦";color:var(--cyan);font-size:.45em;-webkit-text-stroke:0}

/* ---------- showreel ---------- */
.reel{position:relative;padding-block:clamp(50px,8vh,100px)}
.reel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.reel-head h2{font-size:clamp(30px,4vw,72px)}
.reel-frame{position:relative;margin-inline:auto;width:min(100%,2560px);aspect-ratio:16/9;border-radius:clamp(14px,2vw,28px);overflow:hidden;background:var(--ink-3);border:1px solid var(--line);transform-origin:center top}
.reel-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-frame .reel-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,19,21,.65),transparent 40%);pointer-events:none}
.reel-ui{position:absolute;left:24px;right:24px;bottom:22px;display:flex;justify-content:space-between;align-items:center;gap:16px;z-index:2}
.reel-ui .tag{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.reel-ui .tag em{font-style:normal;color:var(--cyan)}
.icon-btn{width:52px;height:52px;border-radius:50%;border:1px solid rgba(246,244,241,.35);display:grid;place-items:center;background:rgba(18,19,21,.4);backdrop-filter:blur(8px);transition:border-color .3s,background .3s}
.icon-btn:hover{border-color:var(--cyan);background:rgba(80,180,222,.2)}
.icon-btn svg{width:20px;height:20px}
.reel-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;z-index:1}
.reel-frame.has-video .reel-empty{display:none}
.reel-empty p{margin:0;font-size:13px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

/* ---------- quote ---------- */
.quote{padding-block:clamp(56px,10vh,120px);text-align:center;position:relative}
.quote p{margin:0 auto;max-width:none;font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,4.2vw,76px);line-height:1.15}
.quote p .script{display:inline;font-size:1.7em;line-height:.8;padding-inline:.04em}
.quote small{display:block;margin-top:32px;font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.quote--left{text-align:left}
.quote--left p{margin:0;max-width:18ch}

/* ---------- intro / about ---------- */
.intro{padding-block:clamp(60px,10vh,120px);border-top:1px solid var(--line)}
.intro-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px var(--gutter)}
.intro-grid .left{grid-column:span 5}
.intro-grid .right{grid-column:7/span 6}
.intro h2{font-size:clamp(30px,3.8vw,66px)}
.lede{font-size:clamp(17px,1.35vw,21px);line-height:1.7;margin:0;max-width:62ch;color:#d8dbde}
.lede strong{color:var(--cyan);font-weight:400}
.body-copy{color:#c4c8cc;max-width:60ch;margin:0 0 18px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.stat b{display:block;font-family:var(--display);font-size:clamp(34px,3.6vw,60px);font-weight:400;line-height:1.25;font-variant-numeric:tabular-nums}
.stat b sup{font-size:.45em;color:var(--cyan);vertical-align:top;margin-left:2px}
.stat span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){.intro-grid .left,.intro-grid .right{grid-column:1/-1}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- markets ---------- */
.markets{padding-block:clamp(70px,12vh,140px);overflow:hidden}
.markets-list{list-style:none;margin:30px 0 0;padding:0}
.markets-list li{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:6px 0}
.markets-list li:last-child{border-bottom:1px solid var(--line)}
.markets-list .m{font-family:var(--display);text-transform:uppercase;font-size:clamp(46px,8.6vw,160px);line-height:1;color:transparent;-webkit-text-stroke:max(.6px,.018em) rgba(246,244,241,.55);background:linear-gradient(90deg,var(--white) 50%,transparent 50%) 100% 0/200% 100% no-repeat;-webkit-background-clip:text;background-clip:text;transition:background-position 1s var(--ease)}
.markets-list li.is-in .m{background-position:0 0}
.markets-list li:hover .m{-webkit-text-stroke-color:var(--cyan)}
.markets-list .d{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-align:right}
.markets-list .d em{font-style:normal;color:var(--warm)}

/* ---------- kinetic skills ---------- */
.skills{padding-block:clamp(60px,10vh,120px)}
.skills-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.skills-head h2{font-size:clamp(30px,3.8vw,66px)}
.skills-head p{margin:0;max-width:40ch;color:#c4c8cc}
.skills-head .hint{font-family:var(--script);color:var(--cyan);font-size:30px}
.skill-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.skill{position:relative;border-bottom:1px solid var(--line);height:clamp(120px,14vw,220px);overflow:hidden;transition:opacity .45s var(--ease)}
.skill-list:hover .skill:not(:hover){opacity:.28}
.skill .num{position:absolute;left:0;top:clamp(20px,3vw,40px);display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--muted);z-index:3}
.skill .num::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.skill:hover .num{color:var(--cyan)}
.skill-static{position:absolute;left:clamp(56px,11vw,190px);top:50%;transform:translateY(-58%);transition:opacity .35s,transform .6s var(--ease)}
.skill-word{font-family:var(--display);text-transform:uppercase;font-size:min(clamp(28px,5vw,92px),calc((100vw - 2*var(--gutter) - clamp(56px,11vw,190px)) / (var(--len,12) * 1)));line-height:.9;white-space:nowrap;position:relative;display:block}
.skill-word .ghost{position:absolute;left:.09em;top:.1em;color:transparent;-webkit-text-stroke:max(.6px,.018em) rgba(246,244,241,.38);z-index:-1}
.skill-word .fill{color:var(--white)}
.skill:hover .skill-static{opacity:0;transform:translateY(-58%) translateX(var(--dir-x,-40px))}
.skill-run{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(8px,1.4vw,22px);opacity:0;transition:opacity .4s;pointer-events:none}
.skill:hover .skill-run{opacity:1}
.run-track{display:flex;width:max-content;animation:run 46s linear infinite;animation-play-state:paused}
.skill:hover .run-track{animation-play-state:running}
.skill.rtl .run-track{animation-direction:reverse}
.run-track .w{font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,5vw,92px);line-height:.9;white-space:nowrap;padding-right:.5em}
.run-track .w:nth-child(even){color:transparent;-webkit-text-stroke:max(.6px,.018em) var(--white)}
.run-track .w:nth-child(odd){color:var(--white)}
.run-sub{display:flex;width:max-content;animation:run 60s linear infinite reverse;animation-play-state:paused}
.skill:hover .run-sub{animation-play-state:running}
.skill.rtl .run-sub{animation-direction:normal}
.run-sub span{font-size:clamp(12px,1.1vw,16px);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#c4c8cc;white-space:nowrap;padding-right:2.2em;display:flex;align-items:center;gap:2.2em}
.run-sub span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan)}
.run-sub span:first-child{position:relative}
@keyframes run{to{transform:translateX(-50%)}}
.skill-tags{margin-top:44px;display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);border-radius:99px;font-size:13px;color:#d8dbde;transition:border-color .3s,color .3s,background .3s}
.chip:hover{border-color:var(--cyan);color:var(--white);background:var(--cyan-dim)}
/* touch screens: same rows as desktop; press and hold a row to play its animation */
@media (hover:none){.skill-list:hover .skill:not(:hover){opacity:1}}

/* ---------- clients ---------- */
.clients{padding-block:clamp(60px,10vh,120px);border-top:1px solid var(--line)}
.clients-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:56px}
.clients-head h2{font-size:clamp(30px,3.8vw,66px)}
.clients-head p{margin:0;max-width:44ch;color:#c4c8cc}
.logo-rows{overflow:hidden;display:flex;flex-direction:column;gap:clamp(28px,3vw,52px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logo-row{display:flex;align-items:center;width:max-content;animation:run 60s linear infinite}
.logo-row.ltr{animation-direction:reverse}
.logo-rows:hover .logo-row{animation-play-state:paused}
.logo-cell{flex:none;margin-right:clamp(36px,4vw,72px);align-self:center;background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.62;transition:opacity .4s,transform .5s var(--ease);filter:drop-shadow(0 0 0 transparent)}
.logo-cell:hover{opacity:1;transform:scale(1.06)}

/* ---------- work grid ---------- */
.work{padding-block:clamp(50px,8vh,100px)}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.work-head h2{font-size:clamp(30px,3.8vw,66px)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid{grid-template-columns:minmax(0,1fr)}}
.tile{position:relative;display:block;width:100%;text-align:left;border-radius:16px;overflow:hidden;background:var(--ink-2);aspect-ratio:1/1;isolation:isolate}
.tile .blur{position:absolute;inset:-10%;background-size:cover;background-position:center;filter:blur(28px) saturate(1.3) brightness(.55);transform:scale(1.1);transition:transform 1.2s var(--ease)}
.tile .frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);overflow:hidden;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.55);transition:transform .9s var(--ease)}
.tile[data-fmt="wide"] .frame{width:88%;aspect-ratio:16/9}
.tile[data-fmt="square"] .frame{width:66%;aspect-ratio:1/1}
.tile[data-fmt="tall"] .frame{height:74%;aspect-ratio:9/16}
.tile .frame img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:none;transition:transform 1.2s var(--ease)}
.tile[data-fmt="wide"] .frame img{width:100%;height:auto}
.tile[data-fmt="square"] .frame img{height:100%;width:auto}
.tile[data-fmt="tall"] .frame img{height:100%;width:auto}
.tile .info{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;z-index:2;background:linear-gradient(0deg,rgba(18,19,21,.85),transparent)}
.tile .info b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(14px,1.1vw,19px);line-height:1.3}
.tile .info small{display:block;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
.tile .fmt{flex:none;font-size:10px;font-weight:700;letter-spacing:.14em;padding:5px 8px;border:1px solid rgba(246,244,241,.3);border-radius:99px;color:#d8dbde}
.tile .play{position:absolute;right:18px;top:18px;z-index:2;width:46px;height:46px;border-radius:50%;background:var(--cyan);color:var(--ink);display:grid;place-items:center;transform:scale(0) rotate(-90deg);transition:transform .5s var(--ease)}
.tile .play svg{width:16px;height:16px;margin-left:2px}
.tile:hover .play,.tile:focus-visible .play{transform:none}
.tile:hover .frame{transform:translate(-50%,-54%) scale(1.03)}
.tile:hover .blur{transform:scale(1.25)}
.tile.is-hidden{display:none}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.filter{padding:11px 18px;border-radius:99px;border:1px solid var(--line);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#d8dbde;transition:all .3s}
.filter b{font-weight:400;color:var(--muted);margin-left:6px;font-variant-numeric:tabular-nums}
.filter:hover{border-color:var(--cyan);color:var(--white)}
.filter[aria-pressed="true"]{background:var(--white);color:var(--ink);border-color:var(--white)}
.filter[aria-pressed="true"] b{color:var(--ink)}

/* ---------- player ---------- */
.player{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(5,6,7,.92);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.player.is-open{opacity:1;visibility:visible}
.player-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:calc(20px + env(safe-area-inset-top,0px)) var(--gutter) 0}
.player-title small{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
.player-title b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(18px,2vw,32px);line-height:1.2}
.player-stage{position:relative;max-width:calc(100vw - 2*var(--gutter));max-height:calc(100svh - 230px);border-radius:14px;overflow:hidden;background:#000;box-shadow:0 30px 120px rgba(0,0,0,.7);transform:scale(.94);transition:transform .6s var(--ease)}
.player.is-open .player-stage{transform:none}
.player-stage[data-fmt="wide"]{aspect-ratio:16/9;width:min(calc(100vw - 2*var(--gutter)),calc((100svh - 230px)*16/9))}
.player-stage[data-fmt="square"]{aspect-ratio:1/1;width:min(calc(100vw - 2*var(--gutter)),calc(100svh - 230px))}
.player-stage[data-fmt="tall"]{aspect-ratio:9/16;width:min(calc(100vw - 2*var(--gutter)),calc((100svh - 230px)*9/16))}
.player-stage:fullscreen{max-width:none;max-height:none;width:100%;height:100%;border-radius:0;aspect-ratio:auto}
.player-stage iframe,.player-stage #yt-target{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-shield{position:absolute;inset:0;z-index:2}
.player-big{position:absolute;left:50%;top:50%;z-index:3;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;background:var(--cyan);color:var(--ink);display:grid;place-items:center;transition:transform .4s var(--ease),opacity .3s;pointer-events:none}
.player-big svg{width:28px;height:28px;margin-left:4px}
.player.is-playing .player-big{opacity:0;transform:scale(.6)}
.player-loading{position:absolute;inset:0;z-index:1;display:grid;place-items:center;font-family:var(--script);font-size:34px;color:var(--cyan)}
.player-bar{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gutter) calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}
.progress{position:relative;height:18px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.progress .rail{position:relative;width:100%;height:3px;border-radius:3px;background:rgba(246,244,241,.18);overflow:visible;transition:height .2s}
.progress:hover .rail{height:5px}
.progress .buf{position:absolute;left:0;top:0;bottom:0;background:rgba(246,244,241,.25);border-radius:3px}
.progress .fill{position:absolute;left:0;top:0;bottom:0;background:var(--cyan);border-radius:3px}
.progress .knob{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--white);box-shadow:0 0 0 4px rgba(80,180,222,.35)}
.controls{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.controls .grp{display:flex;align-items:center;gap:10px}
.ctrl{width:46px;height:46px;border-radius:50%;border:1px solid rgba(246,244,241,.22);display:grid;place-items:center;transition:all .3s}
.ctrl:hover{border-color:var(--cyan);background:var(--cyan-dim)}
.ctrl svg{width:18px;height:18px}
.time{font-size:13px;font-variant-numeric:tabular-nums;color:#c4c8cc;min-width:110px}
.vol{width:90px;accent-color:var(--cyan)}
@media (max-width:560px){.vol{display:none}.time{min-width:0}}

/* ---------- hire / CTA ---------- */
.hire{padding-block:clamp(60px,10vh,120px);border-top:1px solid var(--line);position:relative;overflow:hidden}
.hire-grid{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:860px){.hire-grid{grid-template-columns:minmax(0,1fr)}}
.headshot{position:relative;width:clamp(220px,24vw,360px);aspect-ratio:1;border-radius:50%;background:url(../img/headshot.webp) center/cover}
.headshot::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid var(--line)}
.headshot .badge{position:absolute;right:2%;bottom:8%;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:99px;background:var(--white);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.headshot .badge i{width:7px;height:7px;border-radius:50%;background:#1f9d55}
@keyframes spin{to{transform:rotate(360deg)}}
.hire h2{font-size:clamp(30px,3.8vw,66px);margin-bottom:24px}
.hire p{max-width:56ch;color:#c4c8cc;margin:0 0 14px;font-size:clamp(16px,1.25vw,19px)}
.hire p strong{color:var(--white)}
.contact-lines{list-style:none;padding:0;margin:30px 0 34px;display:grid;gap:4px}
.contact-lines li{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.contact-lines span{width:92px;flex:none;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.contact-lines a{font-size:clamp(18px,1.7vw,26px);word-break:break-word}
.contact-lines a:hover{color:var(--cyan)}
.copy-btn{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:4px 8px;border:1px solid var(--line);border-radius:99px}
.copy-btn:hover{color:var(--cyan);border-color:var(--cyan)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding-block:clamp(50px,9vh,100px) calc(28px + env(safe-area-inset-bottom,0px));position:relative;overflow:hidden}
.footer-big{display:block;font-family:var(--display);text-transform:uppercase;font-size:clamp(40px,7.4vw,140px);line-height:.85;letter-spacing:-.01em}
.footer-big .o{color:transparent;-webkit-text-stroke:max(.6px,.018em) var(--white);transition:color .5s,-webkit-text-stroke-color .5s}
.footer-big:hover .o{color:var(--cyan);-webkit-text-stroke-color:var(--cyan)}
.footer-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line);font-size:14px}
.footer-cols h3{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.footer-cols a{display:block;width:fit-content;margin-bottom:4px}
.footer-cols a:hover{color:var(--cyan)}
.footer-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:48px;font-size:12px;color:var(--muted)}
@media (max-width:760px){.footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- page hero (inner pages) ---------- */
.page-hero{position:relative;padding-block:clamp(130px,20vh,200px) clamp(40px,6vh,70px);overflow:hidden}
.page-hero h1{font-size:clamp(34px,6.6vw,124px)}
.page-hero h1 .outline{color:transparent;-webkit-text-stroke:max(.6px,.018em) var(--white)}
.page-hero .sub{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.page-hero .sub p{margin:0;max-width:52ch;color:#c4c8cc;font-size:clamp(16px,1.3vw,20px)}
.page-hero .sub .script{font-size:clamp(34px,3.4vw,56px);line-height:1}

/* ---------- experience ---------- */
.cv-actions{display:flex;flex-wrap:wrap;gap:12px}
.roles{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.role{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:20px 32px;padding:clamp(28px,4vw,48px) 0;border-bottom:1px solid var(--line);position:relative}
.role::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--cyan);transition:width 1s var(--ease)}
.role:hover::before{width:100%}
.role .when{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-top:10px}
.role .when em{display:block;font-style:normal;color:var(--warm);margin-top:6px;letter-spacing:.12em}
.role h3{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(20px,1.9vw,32px);line-height:1.2}
.role .title{margin:10px 0 0;color:var(--cyan);font-weight:700;letter-spacing:.04em}
.role ul{margin:0;padding:0;list-style:none;color:#c4c8cc;font-size:15px;display:grid;gap:8px}
.role li{position:relative;padding-left:18px}
.role li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.role.is-current .when::after{content:"Current";display:inline-block;margin-top:10px;padding:4px 10px;border-radius:99px;background:var(--cyan);color:var(--ink);letter-spacing:.14em}
@media (max-width:900px){.role{grid-template-columns:minmax(0,1fr)}}
.cv-section{padding-block:clamp(50px,9vh,100px)}
.cv-section h2{font-size:clamp(30px,3.8vw,66px);margin-bottom:34px}
.cv-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:900px){.cv-cols{grid-template-columns:minmax(0,1fr)}}
.cv-card{border-top:1px solid var(--line);padding-top:22px}
.cv-card h3{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.cv-card p{margin:0 0 6px;color:#d8dbde}
.cv-card .big{font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,1.8vw,30px);line-height:1.2;color:var(--white);margin-bottom:10px}
.tools{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,110px);padding-bottom:clamp(80px,14vh,160px)}
@media (max-width:960px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.contact-side .headshot{width:clamp(200px,20vw,300px);margin-bottom:46px}
.offer{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.offer li{display:flex;gap:14px;align-items:flex-start;color:#c4c8cc}
.offer li b{color:var(--white);display:block}
.offer li::before{content:"";flex:none;width:8px;height:8px;margin-top:9px;border-radius:50%;background:var(--cyan)}
.form{display:grid;gap:30px}
.field{position:relative}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.field input,.field textarea{width:100%;font:inherit;font-size:clamp(20px,1.8vw,28px);color:var(--white);background:transparent;border:0;border-bottom:1px solid rgba(246,244,241,.25);padding:6px 0 14px;outline:none;transition:border-color .3s;border-radius:0}
.field textarea{resize:none;line-height:1.45;min-height:calc(1.45em * 4 + 20px);overflow-y:hidden}
.field textarea.is-capped{overflow-y:auto}
.field textarea::-webkit-scrollbar{width:6px}
.field input:focus,.field textarea:focus{border-color:var(--cyan)}
.field input::placeholder,.field textarea::placeholder{color:rgba(246,244,241,.25)}
.field .bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.field:focus-within .bar{transform:scaleX(1)}
.form-note{font-size:13px;color:var(--muted);margin:0}
.form-error{color:#ff8a8a;font-size:14px;margin:0;min-height:1.2em}
.thanks{display:none;padding:40px 0}
.thanks h2{font-size:clamp(30px,3.8vw,66px);margin-bottom:18px}
.thanks p{color:#c4c8cc;max-width:44ch;font-size:18px}
.form-wrap.is-sent .form{display:none}
.form-wrap.is-sent .thanks{display:block}
.hidden-field{position:absolute;left:-9999px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .logo-row,.run-track,.run-sub{animation:none!important}
}

@media (hover:hover) and (pointer:fine){.tile .play{display:none}}
.player-big{background:rgba(246,244,241,.16);color:var(--white);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(246,244,241,.4)}
.tile .frame{box-shadow:none}
.player-stage{box-shadow:none}

.based{margin:18px 0 0;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}

/* calligraphy accent inside headings: bigger than the heading, floats over the line */
.h-display .script,.footer-big .script,.quote p .script{display:inline;font-family:var(--script);font-weight:400;text-transform:none;letter-spacing:0;color:var(--cyan);font-size:1.7em;line-height:.8;vertical-align:baseline;padding-inline:.04em;-webkit-text-stroke:0;transform:none}
.intro-grid .left{display:flex;flex-direction:column;justify-content:flex-start}
.hire h2{margin-bottom:34px}

/* moving skill text feathers in on both edges so the row number stays readable */
.skill-run{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.05) 8%,rgba(0,0,0,.25) 22%,rgba(0,0,0,.6) 40%,#000 62%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.05) 8%,rgba(0,0,0,.25) 22%,rgba(0,0,0,.6) 40%,#000 62%,#000 100%)}
.skill .num{z-index:4}

/* menu: hovered panel inverts to black with warm-white text */
.menu-panel{transition:flex-grow .8s var(--ease),color .45s var(--ease),background-color .45s var(--ease)}
.menu-panel .bg{display:none}
.menu-panel:hover{background:var(--ink);color:var(--paper)}
.menu-panel:hover .num{color:var(--paper)}
.menu-panel .cap{color:var(--cyan)}

/* keep name and title in the empty left side of the photo on desktop */
@media (min-width:761px){.hero-name,.hero-role{max-width:54%}.hero-hello{font-size:clamp(30px,3.4vw,60px)}}

/* small outlined words get a hairline so they match the weight of large outlines */
.ticker-track span:nth-child(even){-webkit-text-stroke:.2px var(--white)}

/* Boldonse has a narrow space; open up word gaps and give letters a touch of air */
.h-display,.hero-name,.quote p,.footer-big,.skill-word,.run-track .w,.ticker-track span,.menu-panel .label,.role h3,.cv-card .big,.tile .info b,.player-title b,.logo{word-spacing:.08em;letter-spacing:normal}
.ticker-track span{padding-right:1em;gap:1em}

/* custom scrollbar: visible while scrolling, fades out when idle */
html{scrollbar-width:none}
::-webkit-scrollbar{width:0;height:0;display:none}
.scrollbar{position:fixed;top:0;right:0;bottom:0;width:12px;z-index:150;opacity:0;transition:opacity .6s var(--ease)}
.scrollbar.is-active,.scrollbar:hover,.scrollbar.is-drag{opacity:1}
.scrollbar-thumb{position:absolute;right:3px;width:4px;border-radius:4px;background:var(--cyan);transition:width .2s}
.scrollbar:hover .scrollbar-thumb,.scrollbar.is-drag .scrollbar-thumb{width:6px}
@media (hover:none){.scrollbar{display:none}}

/* optical text rendering everywhere */
html{text-rendering:optimizeLegibility;font-kerning:normal;font-optical-sizing:auto;-moz-osx-font-smoothing:grayscale}
/* outlined words: soft hairline, a little letter air so neighbouring outlines don't overlap */
.ticker-track span:nth-child(even){-webkit-text-stroke:.3px rgba(246,244,241,.7);letter-spacing:.06em}
.run-track .w:nth-child(even),.hero-name .dim,.footer-big .o{letter-spacing:.05em}

/* about: stats sit under the heading so the left column isn't empty */
.stats--side{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px;margin-top:40px;max-width:480px}
.intro-grid .right{align-self:start;padding-top:8px}
.intro-grid{align-items:start}
.logo .tri--down{border-bottom:0;border-top:.62em solid var(--cyan);transform:translateY(.12em)}
.logo .dot{display:inline-block;flex:0 0 auto;width:.36em;height:.36em;aspect-ratio:1/1;margin:0 .2em;border-radius:50%;background:var(--cyan);align-self:flex-end;margin-bottom:.42em}
.footer-cols a.footer-cv{margin-top:26px}

/* ghost outline is an exact offset copy of the word, like a drop shadow */
.skill-word .ghost,.skill-word .fill{letter-spacing:inherit;word-spacing:inherit}
.intro-grid .right .lede+.lede{margin-top:18px}
.stats.stats--side{display:flex;flex-wrap:wrap;gap:24px clamp(44px,5vw,80px);max-width:none}

/* consistent rhythm: same section padding, same heading-to-content gap, tight captions */
:root{--section:clamp(60px,10vh,120px);--head-gap:clamp(28px,3vw,44px)}
.quote,.intro,.skills,.clients,.hire,.work,.cv-section,.reel{padding-block:var(--section)}
.quote small{margin-top:20px}
.quote p{line-height:1.12}
.skills-head,.clients-head,.work-head,.reel-head{margin-bottom:var(--head-gap)}
.cv-section h2{margin-bottom:var(--head-gap)}
.hire h2{margin-bottom:22px}
.based{margin-top:14px}
.stats.stats--side{margin-top:var(--head-gap);padding-top:var(--head-gap)}
.page-hero .sub{margin-top:var(--head-gap)}

/* footer without the big "Let's talk" line: no empty band or double rule */
.site-footer .wrap>.footer-cols:first-child{margin-top:0;padding-top:0;border-top:0}
.site-footer:has(.footer-cols:first-child){padding-top:clamp(36px,5vh,56px)}

/* quotes that follow a padded section: equal space above and below */


/* one spacing system: every block carries half the gap above and below,
   so the space between any two neighbouring blocks is always the same */
:root{--gap:clamp(110px,17vh,200px);--half:calc(var(--gap) / 2)}
main>section{padding-block:var(--half)!important}
main>.ticker{padding-block:14px}
main>section.page-hero{padding-top:clamp(130px,20vh,200px)!important;padding-bottom:var(--half)!important}
.hero{padding-bottom:44px}
main>section.work{padding-top:var(--half)!important}
.contact-grid{padding-bottom:var(--half)}
.site-footer{padding-top:var(--half)}
.site-footer:has(.footer-cols:first-child){padding-top:var(--half)}
main>.ticker+section{padding-top:var(--gap)!important}
main>section.contact-grid{padding-bottom:0!important}

/* hire block: copy uses the full right column; contact lines at body size */
.hire p{max-width:none}
.contact-lines a{font-size:clamp(16px,1.25vw,19px)}
.contact-lines li{align-items:center}

/* sections that start with a divider line get the full gap under the line,
   matching the space above the quotes */
main>section.clients,main>section.intro,main>section.hire,main>section.cv-section{padding-top:var(--gap)!important}
.site-footer{padding-top:var(--gap)!important}
.footer-cols h3.h3-gap{margin-top:24px}

/* footer columns: equal space between columns whatever their width */
.footer-cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px 48px}
.footer-cols>div{min-width:0}
.footer-cols a{margin-bottom:10px}
.footer-cols h3.h3-gap{margin-top:16px}
.footer-cols{justify-content:flex-start;gap:28px clamp(56px,7vw,120px)}

/* header: fully transparent over the hero photo, frosted bar once you scroll */
.site-header{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:transform .5s var(--ease),background .4s,border-color .4s,backdrop-filter .4s}
.site-header.is-scrolled{background:rgba(18,19,21,.55);border-bottom-color:var(--line);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.site-header:not(.is-scrolled) .burger{border-color:rgba(246,244,241,.25)}

/* at the top of the page: a soft black feather behind the header so the logo stands out */
.site-header::before{content:"";position:absolute;left:0;right:0;top:0;height:170%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.55) 45%,rgba(0,0,0,0) 100%);transition:opacity .4s}
.site-header.is-scrolled::before{opacity:0}
.footer-cols{justify-content:space-between;align-items:flex-start}
.fc-lead{flex:1 1 420px}
.fc-lead .fc-big{font-family:var(--display);font-size:clamp(20px,2.6vw,38px);line-height:1.3;color:var(--white);margin-bottom:14px;word-break:break-all}
.fc-lead .fc-big:hover{color:var(--cyan)}
.fc-lead .fc-phone{font-size:16px;color:var(--muted)}
.fc-side{display:flex;gap:clamp(48px,6vw,100px)}
.footer-cols{justify-content:flex-start;column-gap:clamp(48px,6vw,100px)}
.fc-lead{flex:0 1 auto}
.role h3{line-height:1.38}
/* same-company roles: vertical link instead of divider */
.role{--pad:clamp(28px,4vw,48px)}
.role.is-joined{border-bottom-color:transparent}
.role.is-cont::before{display:none}
.role.is-joined>div:nth-child(2),.role.is-cont>div:nth-child(2){position:relative}
.role.is-cont>div:nth-child(2){align-self:start}
.join-line{position:absolute;transform-origin:top;transform:scaleY(var(--d,0));left:-16px;width:1px;background:var(--cyan);opacity:.6}
.role.is-joined .join-line{top:.35em;z-index:1}
.role.is-current .when::after{content:none;display:none}
.join-line{will-change:transform}
@media (min-width:861px){.hire-grid{grid-template-columns:auto fit-content(760px);justify-content:center}}
/* contact page: tidier, balanced columns */
.contact-grid{align-items:start;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(48px,7vw,140px)}
.contact-side .headshot{width:clamp(170px,14vw,220px);margin:12px 0 44px 12px}
.contact-side .headshot .badge{right:-18%;bottom:4%;padding:8px 12px;font-size:10px}
.contact-side .contact-lines{margin:0}
.contact-side .offer{margin-top:36px;padding-top:32px;border-top:1px solid var(--line);gap:18px}
.contact-side .offer li span{line-height:1.55}
.contact-side .offer li b{margin-bottom:2px}
.form-wrap{padding-top:12px}
.form-error:empty{display:none}
.form .cta-row{margin-top:8px}
/* contact side v3: compact identity + tiles */
.cs-id{display:flex;align-items:center;gap:24px;padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--line)}
.contact-side .cs-id .headshot{width:112px;margin:8px;flex:none}
.contact-side .cs-id .headshot::before{inset:-8px}
.cs-id-text{display:grid;gap:6px}
.cs-id-text b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(18px,1.5vw,24px);line-height:1.3;color:var(--white)}
.cs-id-text span{color:var(--muted);font-size:15px}
.cs-id-text .cs-status{display:inline-flex;align-items:center;gap:8px;color:var(--white);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.cs-status i{width:8px;height:8px;border-radius:50%;background:#1f9d55;box-shadow:0 0 0 4px rgba(31,157,85,.18)}
.offer-tiles{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.offer-tiles li{display:grid;align-content:start;gap:8px;padding:20px 18px;border:1px solid var(--line);border-radius:16px;transition:border-color .4s,background .4s}
.offer-tiles li:hover{border-color:var(--cyan);background:var(--cyan-dim)}
.offer-tiles em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--cyan)}
.offer-tiles b{color:var(--white);font-size:17px}
.offer-tiles span{color:#a9aeb3;font-size:14px;line-height:1.5}
@media (max-width:600px){.offer-tiles{grid-template-columns:minmax(0,1fr)}}
main>section.contact-grid{padding-top:var(--half)!important}
main>section.contact-grid{padding-top:clamp(24px,3vw,48px)!important}
.field textarea{display:block;vertical-align:top}.field input:focus,.field textarea:focus{border-color:rgba(246,244,241,.25)}.field input:-webkit-autofill{-webkit-text-fill-color:var(--white);transition:background-color 9999s}
/* hero: serve a source sized to the screen so the photo is never upscaled */
@media (min-width:761px) and (min-resolution:1.4dppx),(min-width:1921px){.hero-media{background-image:url(../img/hero-2560.webp)}}
@media (min-width:761px) and (min-resolution:2dppx),(min-width:2561px){.hero-media{background-image:url(../img/hero-3840.webp)}}
@media (max-width:760px) and (min-resolution:1.5dppx){.hero-media{background-image:url(../img/hero-sm-2x.webp)}}
/* hero: fine grain over the bottom fade so the dark gradient doesn't band into visible steps */
.hero::after{content:"";position:absolute;inset:45% 0 0 0;z-index:1;pointer-events:none;opacity:.035;-webkit-mask-image:linear-gradient(0deg,#000 40%,transparent);mask-image:linear-gradient(0deg,#000 40%,transparent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero::before{background:linear-gradient(0deg,var(--ink) 0%,rgba(18,19,21,.94) 12%,rgba(18,19,21,.8) 26%,rgba(18,19,21,.6) 42%,rgba(18,19,21,.38) 58%,rgba(18,19,21,.18) 75%,rgba(18,19,21,.05) 90%,rgba(18,19,21,0) 100%)}
.site-header::before{height:260%;background:linear-gradient(180deg,rgba(0,0,0,.7) 0,rgba(0,0,0,.52) 20%,rgba(0,0,0,.34) 40%,rgba(0,0,0,.18) 60%,rgba(0,0,0,.07) 80%,rgba(0,0,0,0) 100%)}
body:has(.hero) .site-header:not(.is-scrolled)::before{opacity:0}
/* hero grain v2: zero-mean dither (overlay blend) across the whole hero, no hard onset edge */
.hero::after{inset:0;-webkit-mask-image:none;mask-image:none;opacity:.55;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* hero grain v3: only in the bottom fade, gentle soft-light so the photo's contrast is untouched */
.hero::after{inset:45% 0 0 0;opacity:.45;mix-blend-mode:soft-light;-webkit-mask-image:linear-gradient(0deg,#000 55%,transparent);mask-image:linear-gradient(0deg,#000 55%,transparent)}
/* hero grain v4: replaces the SVG grain. A 1-level dither tile (alpha 0-2/255) breaks gradient steps without changing contrast */
.hero::after{inset:0;opacity:1;mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none;background:url(../img/dither.png) 0 0/256px 256px repeat;image-rendering:pixelated}
.cs-status em{font-style:normal;color:var(--muted);margin-right:6px}
/* form fields: hand back the native text cursor and hide the custom dot/ring so they never sit on the caret */
body.cursor-text .cursor-dot,body.cursor-text .cursor-ring,body.cursor-typing .cursor-dot,body.cursor-typing .cursor-ring{opacity:0!important}
@media (hover:hover) and (pointer:fine){body.has-cursor input:not([type=range]),body.has-cursor textarea,body.has-cursor select{cursor:text}}
.form .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}.form .cta-row .form-note{flex:1 1 240px;max-width:360px;line-height:1.5}
main>section.contact-grid{padding-bottom:var(--half)!important}
/* burger v2: "MENU" pill at the top of the page, collapses to the round icon once scrolling starts */
.burger{width:auto;min-width:54px;height:54px;border-radius:99px;flex-direction:row;gap:0;padding:0 14px;transition:border-color .3s,transform .5s var(--ease),padding .6s var(--ease),gap .6s var(--ease)}
.burger-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:26px;flex:none}
.burger-label{display:grid;overflow:hidden;max-width:0;opacity:0;font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--white);white-space:nowrap;transition:max-width .6s var(--ease),opacity .35s}
.burger-label em{grid-area:1/1;font-style:normal;padding-left:.28em;transition:opacity .3s,transform .4s var(--ease)}
.burger-label .l-close{opacity:0;transform:translateY(60%)}
body.menu-open .burger-label .l-open{opacity:0;transform:translateY(-60%)}
body.menu-open .burger-label .l-close{opacity:1;transform:none}
.site-header:not(.is-scrolled):not(.is-hidden) .burger{padding:0 22px 0 26px;gap:18px}
.site-header:not(.is-scrolled):not(.is-hidden) .burger-label{max-width:90px;opacity:1}
@media (max-width:520px){.site-header:not(.is-scrolled):not(.is-hidden) .burger{padding:0 16px 0 20px;gap:12px}}
/* menu open: always a round button with the X, no label */
body.menu-open .site-header .burger{padding:0 14px!important;gap:0!important}
body.menu-open .site-header .burger-label{max-width:0!important;opacity:0!important}
/* tighter, rounder MENU pill */
.burger-label{font-size:11px;letter-spacing:.2em}
.burger-label em{padding-left:.2em}
.site-header:not(.is-scrolled):not(.is-hidden) .burger{padding:0 16px 0 18px;gap:10px}
/* logo: full URL on load, condenses to w.wq.c, expands again on hover */
.logo>span{display:inline-flex;align-items:center}
.logo .lx{display:inline-block;overflow:hidden;vertical-align:bottom;max-width:var(--w,4em);transition:max-width .7s var(--ease),opacity .45s var(--ease)}
.logo.is-short .lx{max-width:0;opacity:0}
.logo.is-short .dot{transition:margin .7s var(--ease)}
.logo.is-short:hover .lx,.logo.is-short:focus-visible .lx{max-width:var(--w,4em);opacity:1}
.logo .lx{transition:max-width 1.1s cubic-bezier(.65,0,.35,1),opacity .8s cubic-bezier(.65,0,.35,1)}.logo.is-short .lx{transition:max-width 1.1s cubic-bezier(.65,0,.35,1),opacity .6s cubic-bezier(.45,0,.55,1)}.logo.is-short:hover .lx,.logo.is-short:focus-visible .lx{transition:max-width .9s cubic-bezier(.65,0,.35,1),opacity .7s cubic-bezier(.45,0,.55,1) .1s}
/* logo: letter-by-letter. Collapse right-to-left, expand left-to-right */
.logo .lx,.logo.is-short:hover .lx,.logo.is-short:focus-visible .lx{transition:max-width .38s cubic-bezier(.65,0,.35,1) calc(var(--i,0) * 32ms),opacity .3s cubic-bezier(.45,0,.55,1) calc(var(--i,0) * 32ms + 60ms)}
.logo.is-short .lx{transition:max-width .34s cubic-bezier(.65,0,.35,1) calc(var(--r,0) * 28ms),opacity .22s cubic-bezier(.45,0,.55,1) calc(var(--r,0) * 28ms)}
.skill-word{isolation:isolate}.skill-word .fill{position:relative;display:block}
html.logo-short .logo .lx{max-width:0!important;opacity:0!important;transition:none!important}
/* burger hover: white fill rises from the bottom, like the other buttons */
.burger{position:relative;overflow:hidden;isolation:isolate}
.burger::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--white);border-radius:inherit;transform:translateY(101%);transition:transform .5s var(--ease)}
.burger:hover::before,.burger:focus-visible::before{transform:none}
.burger:hover,.burger:focus-visible{border-color:var(--white)}
.burger span,.burger-label{transition:transform .5s var(--ease),width .4s var(--ease),background-color .45s var(--ease),color .45s var(--ease),max-width .6s var(--ease),opacity .35s}
.burger:hover span,.burger:focus-visible span{background:var(--ink)}
.burger:hover .burger-label,.burger:focus-visible .burger-label{color:var(--ink)}
body.cursor-diff .cursor-dot,body.cursor-diff .cursor-ring{mix-blend-mode:difference}body.cursor-diff .cursor-dot{background:#fff}body.cursor-diff .cursor-ring{border-color:#fff}
/* hamburger lines match the weight of the MENU lettering */
.burger span{height:1.5px}
body.menu-open .burger span:first-child{transform:translateY(4.25px) rotate(45deg)}
body.menu-open .burger span+span{transform:translateY(-4.25px) rotate(-45deg)}
/* hamburger: two identical pill-shaped strokes on whole pixels (no sub-pixel blur making one look heavier) */
.burger span{height:2px;border-radius:99px}
.burger span+span{margin-top:6px}
body.menu-open .burger span:first-child{transform:translateY(4px) rotate(45deg)}
body.menu-open .burger span+span{transform:translateY(-4px) rotate(-45deg)}
body.menu-open .burger-label .l-open{opacity:0;transform:none;transition:opacity .15s}
/* clients: keep scrolling on hover; the logo under the pointer lights up */
.logo-rows:hover .logo-row{animation-play-state:running}
.logo-cell:hover{opacity:.62;transform:none}
.logo-cell.is-hot{opacity:1;transform:scale(1.06)}
.skill-run{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 9%,rgba(0,0,0,.8) 18%,#000 26%,#000 88%,rgba(0,0,0,.6) 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 9%,rgba(0,0,0,.8) 18%,#000 26%,#000 88%,rgba(0,0,0,.6) 94%,transparent 100%)}
.burger:hover span,.burger:focus-visible span{box-shadow:0 0 0 .2px var(--ink)}
/* scrolling down: the bar and logo slide away, the round menu button stays put */
.site-header.is-hidden{transform:none;background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
.site-header.is-hidden::before{opacity:0}
.site-header .logo{transition:transform .5s var(--ease),opacity .4s var(--ease)}
.site-header.is-hidden .logo{transform:translateY(-140%);opacity:0;pointer-events:none}
.site-header.is-hidden .burger{pointer-events:auto;background:rgba(18,19,21,.55);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);border-color:rgba(246,244,241,.22)}
.site-header.is-hidden .burger:hover{border-color:var(--white)}
/* big-text cursor only over the words themselves, not the empty width of the line */
.hero-hello,.h-display,.footer-big{width:fit-content;max-width:100%}
.h-display.hero-name{width:auto}
@media (min-width:761px){.h-display.hero-name{max-width:54%}}
.cursor-ring span{text-transform:uppercase}
.stats.stats--side{flex-wrap:nowrap;justify-content:space-between;column-gap:24px}@media (max-width:600px){.stats.stats--side{flex-wrap:wrap;justify-content:flex-start;column-gap:40px}}
.stat b sup.dec{font-size:.3em;margin-left:3px;letter-spacing:.02em}
.menu-panel .num{display:flex;align-items:center}.menu-panel.is-current .num::after{content:"YOU ARE HERE";display:inline-block;margin-left:10px;padding:6px 11px 5px;border-radius:99px;background:rgba(18,19,21,.86);color:var(--cyan);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:10px;letter-spacing:.18em;line-height:1}
/* frosted header fades into the page: no hard edge or divider line */
.site-header.is-scrolled{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.site-header::after{content:"";position:absolute;left:0;right:0;top:0;height:165%;z-index:-1;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
  background:linear-gradient(180deg,rgba(18,19,21,.9) 0%,rgba(18,19,21,.78) 35%,rgba(18,19,21,.45) 62%,rgba(18,19,21,.15) 84%,rgba(18,19,21,0) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 45%,rgba(0,0,0,.5) 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 45%,rgba(0,0,0,.5) 72%,transparent 100%)}
.site-header.is-scrolled::after{opacity:1}
.site-header.is-hidden::after{opacity:0}
/* smoother header blend: taller, eased gradient (many stops so it never steps) */
.site-header::after{height:230%;
  background:linear-gradient(180deg,rgba(18,19,21,.88) 0%,rgba(18,19,21,.84) 10%,rgba(18,19,21,.77) 20%,rgba(18,19,21,.67) 30%,rgba(18,19,21,.56) 40%,rgba(18,19,21,.44) 50%,rgba(18,19,21,.32) 60%,rgba(18,19,21,.21) 70%,rgba(18,19,21,.12) 80%,rgba(18,19,21,.05) 90%,rgba(18,19,21,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.96) 15%,rgba(0,0,0,.86) 30%,rgba(0,0,0,.7) 45%,rgba(0,0,0,.5) 60%,rgba(0,0,0,.3) 75%,rgba(0,0,0,.12) 88%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.96) 15%,rgba(0,0,0,.86) 30%,rgba(0,0,0,.7) 45%,rgba(0,0,0,.5) 60%,rgba(0,0,0,.3) 75%,rgba(0,0,0,.12) 88%,transparent 100%)}
/* text can't be selected/copied; form fields stay fully usable */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.player-big svg{margin-left:2px}
/* player: no text. Triangle optically centred (bbox just right of centre, centroid on centre) */
.player-big svg{margin-left:.6px}
.player-loading{font-size:0}
/* player close = same round button as the menu (white fill rises on hover, X turns dark) */
.ctrl.player-close{width:54px;height:54px;border-color:rgba(246,244,241,.25);position:relative;overflow:hidden;isolation:isolate;background:transparent;color:var(--white);transition:border-color .3s,color .45s var(--ease)}
.ctrl.player-close::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--white);border-radius:inherit;transform:translateY(101%);transition:transform .5s var(--ease)}
.ctrl.player-close:hover,.ctrl.player-close:focus-visible{border-color:var(--white);color:var(--ink);background:transparent}
.ctrl.player-close:hover::before,.ctrl.player-close:focus-visible::before{transform:none}
.ctrl.player-close svg{width:20px;height:20px;stroke-width:2;stroke-linecap:round}
/* previous / next: small label on hover */
.ctrl.has-tip{position:relative}
.ctrl.has-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,6px);padding:6px 10px 5px;border-radius:99px;background:rgba(18,19,21,.86);border:1px solid rgba(246,244,241,.18);color:var(--white);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:1;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
.ctrl.has-tip:hover::after,.ctrl.has-tip:focus-visible::after{opacity:1;transform:translate(-50%,0)}
/* all player buttons behave like the menu button: white fill rises inside the circle, icon turns dark */
.player .ctrl{position:relative;isolation:isolate;background:transparent;color:var(--white);border-color:rgba(246,244,241,.25);transition:border-color .3s,color .45s var(--ease)}
.player .ctrl::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--white);clip-path:inset(100% 0 0 0 round 50%);transition:clip-path .5s var(--ease)}
.player .ctrl:hover,.player .ctrl:focus-visible{border-color:var(--white);color:var(--ink);background:transparent}
.player .ctrl:hover::before,.player .ctrl:focus-visible::before{clip-path:inset(0 0 0 0 round 50%)}
.ctrl.player-close{overflow:visible}
.ctrl.player-close::before{transform:none}

.player .vol{cursor:none}
/* two-line Boldonse titles: same line gap as the Experience company names */
.player-title b,.tile .info b,.cs-id-text b{line-height:1.38}
.filter:not([aria-pressed="true"]):hover{border-color:var(--cyan);color:var(--white);background:var(--cyan-dim)}
/* full-screen menu open: classic frosted header bar with a clean edge, no fade into the panels */
body.menu-open .site-header{transform:none;background:rgba(18,19,21,.62);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line)}
body.menu-open .site-header::after,body.menu-open .site-header::before{opacity:0!important}
body.menu-open .site-header .logo{transform:none;opacity:1;pointer-events:auto}
/* frosted blend tint follows --ht (set from scroll): hero black -> site grey, no jump */
.site-header{--ht:18,19,21}
.site-header::after{background:linear-gradient(180deg,rgba(var(--ht),.88) 0%,rgba(var(--ht),.84) 10%,rgba(var(--ht),.77) 20%,rgba(var(--ht),.67) 30%,rgba(var(--ht),.56) 40%,rgba(var(--ht),.44) 50%,rgba(var(--ht),.32) 60%,rgba(var(--ht),.21) 70%,rgba(var(--ht),.12) 80%,rgba(var(--ht),.05) 90%,rgba(var(--ht),0) 100%)}
/* no dark scrim behind the header at the top of plain-background pages (it showed as a darker band) */
.site-header::before{display:none}
/* ---------- portfolio: random bento collage ---------- */
.bento{display:flex;flex-direction:column;gap:var(--bgap,16px);min-height:60vh}
.brow{display:flex;gap:var(--bgap,16px)}
.btile{flex:1 1 0;min-width:0;width:auto;height:auto;border-radius:14px;aspect-ratio:auto;container-type:inline-size;background:var(--ink-2)}
.btile .ph{position:absolute;inset:0;background:rgba(255,255,255,.045);animation:bpulse 1.8s ease-in-out infinite alternate}
.btile.is-loaded .ph{opacity:0;animation:none;transition:opacity .4s}
@keyframes bpulse{from{opacity:.35}to{opacity:1}}
.btile img.th{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:none;opacity:0;transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.btile img.th.fit-w{width:100%;height:auto}
.btile img.th.fit-h{height:100%;width:auto}
.btile.is-loaded img.th:not(.flip){opacity:1}
.btile img.flip{transition:opacity .25s}
.btile.is-flipping img.flip{opacity:1}
.btile:hover img.th{transform:translate(-50%,-50%) scale(1.045)}
.btile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(246,244,241,.07);pointer-events:none;z-index:3}
.btile .info{padding:16px 18px;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .6s var(--ease);background:linear-gradient(0deg,rgba(8,9,10,.88),rgba(8,9,10,.4) 55%,transparent)}
.btile:hover .info,.btile:focus-visible .info{opacity:1;transform:none}
.btile .info b{font-size:clamp(12px,1vw,17px)}
.btile .info small{font-size:10px;margin-bottom:5px}
.btile .role-tag{position:absolute;left:12px;top:12px;z-index:2;padding:6px 10px;border-radius:99px;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--white);background:rgba(18,19,21,.55);border:1px solid rgba(246,244,241,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@container (max-width:200px){.btile .info .fmt{display:none}.btile .info{padding:12px}}
@container (max-width:130px){.btile .info b{font-size:11px}.btile .role-tag{display:none}}
@media (hover:none),(max-width:620px){.btile .info{background:linear-gradient(0deg,rgba(8,9,10,.82),transparent 70%);opacity:1;transform:none;padding:10px 10px 9px}.btile .info .fmt{display:none}.btile .info b{font-size:10.5px;line-height:1.3}.btile .info small{font-size:8.5px;letter-spacing:.12em;margin-bottom:3px}.btile{border-radius:10px}.btile .role-tag{font-size:8px;padding:4px 7px;left:8px;top:8px}}
.work-more{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(28px,4vw,48px);padding-top:clamp(20px,2.5vw,28px);border-top:1px solid var(--line)}
.work-count{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--muted);font-variant-numeric:tabular-nums}
.work-count b{color:var(--white);font-weight:700}
.work-more .btn svg{transition:transform .7s var(--ease)}
.work-more .btn:hover svg{transform:rotate(180deg)}
.player-stage[data-fmt="portrait"]{aspect-ratio:4/5;width:min(calc(100vw - 2*var(--gutter)),calc((100svh - 230px)*4/5))}
@media (max-width:620px){.work .filters{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 24px;padding:0 16px 4px;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 24px),transparent)}.work .filters::-webkit-scrollbar{display:none}.work .filters .filter{flex:none}.btile .info small{display:none}.work-more .btn{padding:15px 22px}}
@container (max-width:110px){.btile .info{display:none}}
.btile .info b{overflow-wrap:anywhere}
/* experience: The kit has no divider line, so after the quote it only needs the normal section gap (matches the space above the quote) */
main>section.quote+section.cv-section{padding-top:calc(var(--section) - 20px)!important}
/* content runs edge to edge with the same side margin as the logo (only very large screens over 2560px get capped, header follows) */
.wrap{max-width:2560px}
.site-header{padding-left:max(var(--gutter),calc((100vw - 2560px) / 2 + var(--gutter)));padding-right:max(var(--gutter),calc((100vw - 2560px) / 2 + var(--gutter)))}
/* even spacing pass: every plain gap between sections ~ the same, every divider line ~ same space below it */
main>section.reel{padding-top:calc(var(--gap) - 14px)!important}
.site-footer:has(.footer-big){padding-top:calc(var(--gap) + 13px)!important}
.site-footer:not(:has(.footer-big)){padding-top:calc(var(--gap) - 8px)!important}

/* =====================================================================
   MOBILE OPTIMISATION (phones/tablets only — desktop design is locked)
   ===================================================================== */
@media (max-width:960px){
  /* contact: one column; on a phone the form comes straight after the ID card */
  .contact-grid{grid-template-columns:minmax(0,1fr)!important;row-gap:40px}
  .contact-side{display:contents}
  .contact-side .cs-id{order:1;margin-bottom:0}
  .contact-grid .form-wrap{order:2;padding-top:0}
  .contact-side .contact-lines{order:3}
  .contact-side .offer-tiles{order:4;margin-top:0}
}
@media (max-width:600px){
  /* stats: all four on one line */
  .stats.stats--side{flex-wrap:nowrap!important;justify-content:space-between;column-gap:10px}
  .stat b{font-size:clamp(30px,10vw,40px)}
  .stat span{font-size:10px;letter-spacing:.12em}
  /* short lines that wrap: balance them, no lonely last word */
  .hero-role,.quote small,.page-hero .sub p,.cs-id-text span{text-wrap:balance}
  /* contact details (home + contact page): label above value, same for every row */
  .contact-lines{gap:18px}
  .contact-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;row-gap:6px;column-gap:12px}
  .contact-lines span{grid-column:1/-1;width:auto}
  .contact-lines a{font-size:16px;word-break:normal;overflow-wrap:anywhere}
  .copy-btn{justify-self:end}
  /* experience: the two CV buttons sit side by side */
  .cv-actions{flex-wrap:nowrap;gap:10px}
  .cv-actions .btn{padding:15px 18px;font-size:11.5px;letter-spacing:.12em;gap:8px}
  /* joined-roles line sits in the gutter instead of the screen edge */
  .join-line{left:-8px}
  /* chips a touch more compact */
  .chip{padding:8px 13px;font-size:12.5px}
  .skill-tags{gap:8px}
  /* portfolio tile titles: room between two lines */
  .btile .info b{line-height:1.42!important}
  /* full-screen menu: labels on the page margin */
  .menu-panel{padding-left:var(--gutter)!important}
  .menu-panel .label svg{display:none}
  .menu-panel .label{gap:0}
}
@media (max-width:600px){.fc-big{word-break:normal!important;overflow-wrap:normal!important}}
/* phones: tighter vertical rhythm (same proportions as desktop, just less air) */
.m-br{display:none}
@media (max-width:600px){
  :root{--section:clamp(36px,5vh,48px);--gap:clamp(64px,9vh,80px)}
  main>section.page-hero{padding-top:clamp(104px,15vh,124px)!important}
  .m-br{display:inline}
}
@media (max-width:600px){.quote p:has(.m-br){line-height:1.4}}
/* the email address always stays on one line, shrinking to fit narrow screens */
.fc-lead .fc-big,.contact-lines a[href^="mailto"],.menu-foot .mail{white-space:nowrap}
@media (max-width:600px){
  .fc-lead .fc-big{font-size:min(20px,calc((100vw - 2 * var(--gutter)) / 23))}
  .contact-lines a[href^="mailto"]{font-size:min(16px,calc((100vw - 2 * var(--gutter) - 84px) / 16.6));overflow-wrap:normal}
  .menu-foot .mail{font-size:min(16px,calc((100vw - 2 * var(--gutter)) / 17))}
}
/* phones: portfolio filters wrap onto rows (every category visible, no sideways scrolling needed) */
@media (max-width:620px){
  .work .filters{flex-wrap:wrap!important;overflow:visible!important;margin:0 0 24px!important;padding:0!important;-webkit-mask:none!important;mask:none!important;gap:8px}
  .work .filters .filter{padding:9px 13px;font-size:11px;letter-spacing:.07em}
  .work .filters .filter b{margin-left:4px}
}
/* phones: tools + specialisms read as a tight dot-separated list instead of rows of pills */
@media (max-width:700px){
  .cv-card .tools{display:block;gap:0;margin-top:14px;line-height:1.9}
  .cv-card .tools .chip{display:inline;padding:0;border:0;border-radius:0;background:none!important;font-size:14px;color:#d8dbde;white-space:nowrap}
  .cv-card .tools .chip:not(:last-child)::after{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--cyan);vertical-align:middle;margin:0 10px 2px 12px}
}
.cv-card .tools .chip.eol::after{visibility:hidden}
/* contact ID card: name on one line and title on one line at every width — the text scales to fit */
.cs-id-text{flex:1 1 auto;min-width:0;container-type:inline-size}
.cs-id-text b{white-space:nowrap;font-size:min(clamp(18px,1.5vw,24px),calc(100cqi / 16.5))}
.cs-id-text>span:not(.cs-status){white-space:nowrap;font-size:min(15px,calc(100cqi / 21.2))}
@media (max-width:600px){
  .contact-side .cs-id{gap:16px}
  .contact-side .cs-id .headshot{width:clamp(64px,22vw,112px)}
}
/* phones: email, phone and LinkedIn share one size (the email's fit-to-width size) */
@media (max-width:600px){.contact-lines a{font-size:min(16px,calc((100vw - 2 * var(--gutter) - 84px) / 16.6))!important}}
@media (max-width:600px){.quote p{white-space:nowrap}}
/* phones: big type scales with the screen width (designed at 390px), so every phone shows
   exactly the same layout — same line breaks, same proportions — just larger or smaller */
@media (max-width:600px){
  main h2.h-display,.cv-section h2,.thanks h2.h-display{font-size:7.7vw!important;white-space:nowrap}
  main .page-hero h1.h-display{font-size:8.72vw!important}
  .footer-big{font-size:10.26vw!important}
  .hero-hello{font-size:9.23vw!important}
  .quote p{font-size:7.18vw!important}
}
@media (max-width:600px){.hero-role{font-size:3.35vw;white-space:nowrap;text-wrap:initial}}

.skill{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.skill-list.is-holding .skill:not(.is-held){opacity:.28}
.skill.is-held .num{color:var(--cyan)}
.skill.is-held .skill-static{opacity:0;transform:translateY(-58%) translateX(var(--dir-x,-40px))}
.skill.is-held .skill-run{opacity:1}
.skill.is-held .run-track,.skill.is-held .run-sub{animation-play-state:running}
/* footer legal: always two lines — copyright, then title — each kept on one line */
.footer-legal span{white-space:nowrap}
@media (max-width:600px){.footer-legal span{font-size:min(12px,calc((100vw - 2 * var(--gutter)) / 24.6))}}
/* phones: each employer name and each job title stays on one line (set line breaks kept);
   all of them share one size, scaled with the screen, so every role looks the same */
@media (max-width:600px){
  .role h3{white-space:nowrap;font-size:var(--role-h,6.2vw)}
  .role .title{white-space:nowrap;font-size:var(--role-t,4.1vw);letter-spacing:.02em}
}
/* joined-roles line: one solid cyan, same as the role divider lines (no fade, no soft edges) */
.join-line{opacity:1!important;background:var(--cyan)!important;will-change:auto!important;backface-visibility:hidden}
.cursor-dot,.cursor-ring{will-change:transform;contain:layout style;backface-visibility:hidden}
/* phones: tiles show just the artwork — the title appears in the player when the video opens
   (in a narrow desktop window, hovering a tile still shows its title) */
@media (hover:none),(max-width:620px){
  .btile .info,.btile .role-tag{opacity:0!important;transform:translateY(8px)!important}
  .btile:hover .info,.btile:hover .role-tag{opacity:1!important;transform:none!important}
}
@media (hover:none){.btile:hover .info,.btile:hover .role-tag{opacity:0!important}}
/* narrow tiles (thin 9:16s) still show their title on hover, just smaller */
@container (max-width:110px){.btile .info{display:flex!important;padding:8px 8px 9px}.btile .info small{display:none}.btile .info b{font-size:10px!important;line-height:1.35!important}}
@container (max-width:110px){.btile .info b{overflow-wrap:normal!important;-webkit-hyphens:auto;hyphens:auto;font-size:9px!important}}
/* tile titles never split a word: the title scales down with the tile so the longest word fits */
.btile .info b{overflow-wrap:normal!important;word-break:normal!important;font-size:min(clamp(12px,1vw,17px),calc((100cqi - 36px) / 11.5))!important}
@container (max-width:200px){.btile .info b{font-size:min(12px,calc((100cqi - 24px) / 11.5))!important}}
@container (max-width:110px){.btile .info b{font-size:calc((100cqi - 16px) / 11.5)!important}}
/* phone-width grids: every tile title uses one shared size (set by the grid script) */
@media (max-width:620px){.bento .btile .info b{font-size:var(--tile-t,11px)!important;line-height:1.35!important}}
/* ---------- 404 ---------- */
.nf{min-height:100svh;display:grid;place-items:center;padding-block:130px 70px;text-align:center}
.nf-inner{display:flex;flex-direction:column;align-items:center}
.px-face{width:clamp(120px,14vw,190px);height:auto;overflow:visible;margin-bottom:clamp(18px,2.4vw,30px)}
.px-outline,.px-eyes{fill:var(--white)}
.px-tear{fill:var(--cyan);animation:px-tear 2.4s steps(1) infinite}
.px-eyes{transform-box:fill-box;transform-origin:center;animation:px-blink 4s steps(1) infinite}
@keyframes px-blink{0%,92%,100%{transform:none}94%,97%{transform:scaleY(.25)}}
@keyframes px-tear{0%{transform:translateY(0);opacity:1}25%{transform:translateY(1px)}50%{transform:translateY(2px)}75%{transform:translateY(3px);opacity:.6}76%,100%{transform:translateY(0);opacity:0}}
.px-face{animation:px-in .9s steps(6) both}
@keyframes px-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.nf-oops{margin:0;line-height:1}
.nf-oops .script{font-family:var(--script);color:var(--cyan);font-size:clamp(44px,5vw,84px);line-height:1}
.nf-code{margin:-.12em 0 0;font-family:var(--display);font-weight:400;font-size:clamp(96px,16vw,240px);line-height:1.05;letter-spacing:.02em;color:transparent;-webkit-text-stroke:max(1px,.012em) var(--white)}
.nf-label{margin:10px 0 0;font-size:13px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--white)}
.nf-text{margin:16px auto 0;max-width:40ch;color:var(--muted);line-height:1.6}
.nf-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
@media (max-width:600px){.nf-actions .btn{padding:15px 20px;font-size:11.5px}}
@media (prefers-reduced-motion:reduce){.px-face,.px-tear,.px-eyes{animation:none}}
.nf-oops{margin:0 0 6px}
.nf-oops .script{display:inline-block;font-size:clamp(40px,4.2vw,70px);line-height:1.15;padding:0 .1em}
.nf-code{margin:0;font-size:clamp(84px,11vw,170px);line-height:1.1}
.nf-label{margin-top:20px}
@media (max-width:600px){.nf{padding-block:110px 60px}.px-face{width:30vw}.nf-oops .script{font-size:11vw}.nf-code{font-size:24vw}}
.nf-oops{margin-bottom:14px}
.px-tear{animation:px-tear2 2.4s steps(1) infinite}
@keyframes px-tear2{0%,40%{transform:none;opacity:1}41%,80%{transform:translateY(1px);opacity:1}81%,100%{opacity:0}}
/* ---------- showreel: YouTube muted loop, fitted so the whole 16:9 frame is always on screen ---------- */
.reel-frame{width:min(100%,calc(100svh * 16 / 9));cursor:none}
.reel-poster,.reel-yt{position:absolute;inset:0}
.reel-poster{background:var(--ink-3) center/cover no-repeat}
.reel-yt{opacity:0;transition:opacity .9s var(--ease);pointer-events:none;overflow:hidden}
.reel-yt iframe{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%) scale(1.01);border:0}
.reel-frame.has-video .reel-yt{opacity:1}
.reel-frame:not(.no-video) .reel-empty{display:none}
.reel-frame.no-video .reel-poster{display:none}
/* showreel on desktop: the card fits the window with room around it and holds still in the
   middle of the screen for a stretch of scrolling, so small scrolls don't nudge it up and down */
@media (min-width:761px){
  .reel-stage{--rh:min(calc(100svh - 110px),calc((100vw - 2 * var(--gutter)) * 9 / 16));position:relative;height:calc(var(--rh) + 50svh)}
  .reel-stage .reel-frame{position:sticky;top:calc((100svh - var(--rh)) / 2);width:calc(var(--rh) * 16 / 9)!important;margin-inline:auto}
}
body{overflow-x:clip!important;overflow-y:visible!important}
/* showreel sound button: fills white on hover like the menu button (cursor goes to difference mode) */
.reel-ui .icon-btn{position:relative;overflow:hidden;isolation:isolate;color:var(--white);cursor:none;transition:border-color .3s,color .45s var(--ease)}
.reel-ui .icon-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--white);border-radius:inherit;transform:translateY(101%);transition:transform .5s var(--ease)}
.reel-ui .icon-btn:hover::before,.reel-ui .icon-btn:focus-visible::before{transform:none}
.reel-ui .icon-btn:hover,.reel-ui .icon-btn:focus-visible{border-color:var(--white);color:var(--ink)}
.reel-ui{pointer-events:none}.reel-ui .icon-btn{pointer-events:auto}
.reel-frame .reel-ui{z-index:4}
#player:fullscreen{background:#000}#player:fullscreen .player-stage{max-height:calc(100vh - 170px)}
/* ---------- showreel controls & full screen ---------- */
.reel-yt iframe,.reel-yt>div{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);border:0}
.reel-ui{align-items:center;justify-content:flex-end;gap:12px}
.reel-ui .reel-sp{flex:1}
.reel-x,.reel-rot,.reel-range{display:none}
.reel-x{position:absolute;top:22px;right:24px;z-index:4}
/* the reel-x/rotate/sound buttons all fill white like the menu button */
.reel-frame .icon-btn{position:relative;overflow:hidden;isolation:isolate;color:var(--white);cursor:none;transition:border-color .3s,color .45s var(--ease)}
.reel-frame .icon-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--white);border-radius:inherit;transform:translateY(101%);transition:transform .5s var(--ease)}
.reel-frame .icon-btn:hover::before,.reel-frame .icon-btn:focus-visible::before{transform:none}
.reel-frame .icon-btn:hover,.reel-frame .icon-btn:focus-visible{border-color:var(--white);color:var(--ink)}
/* volume bar (full screen only) */
.reel-range{-webkit-appearance:none;appearance:none;width:130px;height:4px;border-radius:99px;outline:none;cursor:none;pointer-events:auto;background:linear-gradient(90deg,var(--cyan) 0 var(--v,80%),rgba(246,244,241,.28) var(--v,80%));}
.reel-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--white)}
.reel-range::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--white)}
/* full-screen state (real full screen, or a fixed overlay where the browser can't) */
html.reel-fs-open{overflow:hidden}
.reel-frame.is-fs{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;max-width:none;aspect-ratio:auto!important;margin:0!important;border:0!important;border-radius:0!important;transform:none!important;z-index:10000;background:#000}
.reel-frame.is-fs::after{display:none}
.reel-frame.is-fs .reel-shade{background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 25%)}
.reel-frame.is-fs .reel-poster{background-size:contain}
.reel-frame.is-fs .reel-yt>*{width:min(100vw,177.78vh);height:min(56.25vw,100vh)}
.reel-frame.is-fs .reel-x,.reel-frame.is-fs .reel-range{display:inline-flex}
.reel-frame.is-fs .reel-ui{left:24px;right:24px;bottom:24px}
.reel-frame.is-fs .cursor-ring,.reel-frame.is-fs .cursor-dot{z-index:10002}
/* phones */
@media (max-width:760px){
  .reel-stage .reel-frame,.reel-frame{aspect-ratio:9/16!important;width:min(calc(100% - 2 * var(--gutter)),calc(78svh * 9 / 16))!important;margin-inline:auto}
  .reel-yt>*{width:177.78%!important;height:100%!important}                 /* 16:9 video cropped to fill the 9:16 card */
  .reel-frame.is-fs{aspect-ratio:auto!important;width:100vw!important}
  .reel-frame.is-fs .reel-yt>*{width:100vw!important;height:56.25vw!important}  /* full screen: the whole 16:9 frame, centred in the tall screen */
  .reel-frame.is-fs .reel-rot{display:inline-flex}
  .reel-frame.is-fs .reel-range{width:96px}
  .reel-ui{left:14px;right:14px;bottom:14px}
  .reel-x{top:max(16px,env(safe-area-inset-top));right:16px}
  /* rotate: lay the video sideways so it fills the phone when held landscape */
  .reel-frame.is-fs.is-rot .reel-yt{width:100vh;height:100vw;left:50%;top:50%;inset:auto;transform:translate(-50%,-50%) rotate(90deg)}
  .reel-frame.is-fs.is-rot .reel-yt>*{width:min(100vh,177.78vw)!important;height:min(56.25vh,100vw)!important}
}
/* cursor over the showreel card reads FULL SCREEN */
.cursor-ring span{text-align:center;line-height:1.35}
body.cursor-fs .cursor-ring{width:110px;height:110px;margin:-55px 0 0 -55px}
body.cursor-fs .cursor-ring span{font-size:10.5px}
.reel-frame .reel-x{position:absolute;top:22px;right:24px;z-index:5}
@media (max-width:760px){.reel-frame .reel-x{top:max(16px,env(safe-area-inset-top));right:16px}}
/* full-screen buttons: icons dead centre in their circles */
.reel-frame.is-fs .reel-x,.reel-frame.is-fs .reel-rot{display:grid!important;place-items:center}
.reel-frame .icon-btn svg{display:block;width:20px;height:20px;margin:0}
@media (min-width:761px) and (hover:hover){.reel-frame.is-fs .reel-rot{display:none!important}}
/* ---------- privacy & cookies ---------- */
.legal{padding-block:0 var(--gap)}
.legal-body{max-width:calc(760px + 2 * var(--gutter));margin-inline:0}
.legal-body h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(18px,1.6vw,24px);line-height:1.35;margin:clamp(40px,4vw,56px) 0 14px;color:var(--white)}
.legal-body h2:first-child{margin-top:0}
.legal-body p,.legal-body li{color:#c4c8cc;line-height:1.75;font-size:16px}
.legal-body p{margin:0 0 14px}
.legal-body strong{color:var(--white);font-weight:700}
.legal-body ul{margin:0 0 16px;padding-left:20px}
.legal-body li{margin-bottom:8px}
.legal-body li::marker{color:var(--cyan)}
.legal-body a{color:var(--white)}
.form-note a{color:var(--white);white-space:nowrap}
main>section.legal{padding-bottom:var(--half)!important}
.legal-body>:last-child{margin-bottom:0}
.work-rights{margin:clamp(22px,2.4vw,32px) 0 0;max-width:62ch;font-size:12.5px;line-height:1.6;color:var(--muted)}
/* showreel: the heading and the card stay pinned together while scrolling (desktop and phone).
   --hh = heading height incl. its gap, set by main.js */
.reel-pin>.wrap{width:100%}
@media (min-width:761px){
  .reel-stage{--hh:110px;--rh:min(calc(100svh - 90px - var(--hh)),calc((100vw - 2 * var(--gutter)) * 9 / 16));height:calc(var(--rh) + var(--hh) + 50svh)}
  .reel-stage .reel-frame{position:relative;top:auto}
  .reel-pin{position:sticky;top:calc((100svh - var(--rh) - var(--hh)) / 2)}
}
@media (max-width:760px){
  .reel-stage{--hh:70px;--cw:min(calc(100vw - 2 * var(--gutter)),calc((100svh - var(--hh) - 48px) * 9 / 16));position:relative;height:calc(var(--cw) * 16 / 9 + var(--hh) + 35svh)}
  .reel-stage .reel-frame{width:var(--cw)!important}
  .reel-pin{position:sticky;top:calc((100svh - var(--cw) * 16 / 9 - var(--hh)) / 2)}
}
/* rotate buttons: phones and tablets only (no mouse) */
.player-rot{display:none}
@media (hover:none),(max-width:760px){
  .player .player-rot{display:grid;place-items:center}
  .reel-frame:not(.is-fs) .reel-rot{display:grid!important;place-items:center}
}
@media (min-width:761px) and (hover:hover){.player .player-rot,.reel-frame .reel-rot{display:none!important}}
.player .player-rot[aria-pressed="true"]{border-color:var(--cyan)}
/* portfolio player turned to landscape: --W/--H are the width/height of the landscape screen */
.player.is-rot-on{--W:100vw;--H:100dvh;background:#000}
.player.is-rot-on.is-rot{--W:100dvh;--H:100vw;inset:auto;left:50%;top:50%;width:var(--W);height:var(--H);transform:translate(-50%,-50%) rotate(90deg)}
.player.is-rot-on .player-title{visibility:hidden}
.player.is-rot-on .player-top{padding:12px 16px 0}
.player.is-rot-on .ctrl.player-close{width:44px;height:44px}
.player.is-rot-on .player-stage{max-width:none;max-height:none;margin-bottom:76px;border-radius:8px}
.player.is-rot-on .player-stage[data-fmt="wide"]{width:min(calc(var(--W) - 140px),calc((var(--H) - 100px) * 16 / 9))}
.player.is-rot-on .player-stage[data-fmt="square"]{width:min(calc(var(--W) - 140px),calc(var(--H) - 100px))}
.player.is-rot-on .player-stage[data-fmt="portrait"]{width:calc((var(--H) - 100px) * 4 / 5)}
.player.is-rot-on .player-stage[data-fmt="tall"]{width:calc((var(--H) - 100px) * 9 / 16)}
.player.is-rot-on .player-bar{padding:0 16px 10px;gap:8px}
.reel-frame:not(.is-fs) .reel-sp{order:1}.reel-frame:not(.is-fs) .reel-rot{order:2}.reel-frame:not(.is-fs) [data-reel="sound"]{order:3}
/* header over the hero photo: tint fade only, no backdrop blur (GPU blur over the near-black photo showed vertical streaks) */
.site-header.over-hero::after{-webkit-backdrop-filter:none;backdrop-filter:none}
/* MENU label: when the pill collapses, the word fades out first and only then the pill closes
   (before, the half-hidden "ME" slid under the hamburger lines); when it opens, the pill widens first, then the word fades in */
.site-header .burger-label{transition:color .45s var(--ease),opacity .15s linear,max-width .55s var(--ease) .1s}
.site-header .burger{transition:border-color .3s,transform .5s var(--ease),padding .55s var(--ease) .1s,gap .55s var(--ease) .1s}
.site-header:not(.is-scrolled):not(.is-hidden) .burger-label{transition:color .45s var(--ease),max-width .6s var(--ease),opacity .3s linear .25s}
.site-header:not(.is-scrolled):not(.is-hidden) .burger{transition:border-color .3s,transform .5s var(--ease),padding .6s var(--ease),gap .6s var(--ease)}
/* touch screens: a tap shows the white fill only while the finger is down, it no longer stays filled afterwards
   (phones keep the last tapped button in "hover" until you tap somewhere else) */
@media (hover:none){
  html .btn:not(.btn--cyan):not(:active):hover{color:inherit}
  html .btn:not(:active):hover::before{transform:translateY(101%)}
  html .burger:not(:active):hover::before{transform:translateY(101%)}
  html .burger:not(:active):hover{border-color:var(--line)}
  html .site-header:not(.is-scrolled) .burger:not(:active):hover{border-color:rgba(246,244,241,.25)}
  html .burger:not(:active):hover span{background:var(--white)}
  html .burger:not(:active):hover .burger-label{color:var(--white)}
  html .player .ctrl:not(:active):hover{color:var(--white);border-color:rgba(246,244,241,.25)}
  html .player .ctrl:not(:active):hover::before{clip-path:inset(100% 0 0 0 round 50%)}
  html .reel-frame .icon-btn:not(:active):hover{color:var(--white);border-color:rgba(246,244,241,.35)}
  html .reel-frame .icon-btn:not(:active):hover::before{transform:translateY(101%)}
  html .copy-btn:not(:active):hover{color:var(--muted);border-color:var(--line)}
  html .role:hover::before{width:0}
}
/* touch screens: no leftover blue hover tint after a tap (speaker/rotate buttons, chips, filters, offer tiles) */
@media (hover:none){
  html .icon-btn:not(:active):hover{background:rgba(18,19,21,.4)}
  html .reel-frame .icon-btn:not(:active):hover{border-color:rgba(246,244,241,.35)}
  html .chip:not(:active):hover{background:transparent;border-color:var(--line);color:#d8dbde}
  html .filter:not([aria-pressed="true"]):not(:active):hover{background:transparent;border-color:var(--line);color:#d8dbde}
  html .offer-tiles li:hover{background:transparent;border-color:var(--line)}
}
/* portfolio footer row: 69 / 69 | disclaimer ........ [View more] — all on one centre line */
.work-note{display:flex;align-items:center;gap:clamp(18px,2vw,28px);min-width:0;flex:1 1 auto}
.work-note .work-count{flex:none}
.work-sep{flex:none;align-self:stretch;width:1px;min-height:28px;background:var(--line)}
.work-more .work-rights{margin:0;max-width:62ch}
.work-more .btn{flex:none}
@media (max-width:620px){
  .work-more{flex-wrap:wrap;row-gap:20px}
  .work-note{flex:1 1 100%;gap:16px}
  .work-more .btn{margin-left:auto}
}
@media (min-width:621px){.work-more .work-rights{max-width:86ch}}
/* phones: one screen button, not two. Wide videos get "rotate" (full screen + landscape);
   square / 4:5 / 9:16 videos already fit a tall phone, so they get plain "full screen" instead */
@media (hover:none),(max-width:760px){
  .player .ctrl[data-act="fs"]{display:none}
  .player:not([data-fmt="wide"]) .ctrl[data-act="fs"]{display:grid}
  .player:not([data-fmt="wide"]) .player-rot{display:none!important}
}
/* phones: the X matches the other player buttons and lines up with the title */
@media (max-width:760px){
  .player-top{align-items:center}
  .player .ctrl.player-close{width:46px;height:46px;flex:none}
  .player .ctrl.player-close svg{width:18px;height:18px}
}
.player .ctrl.player-close{flex:none;aspect-ratio:1}
/* phone full screen for square / 4:5 / 9:16 (real full screen, or the iPhone fallback): title tucked away, video as big as fits above the controls */
.player:fullscreen .player-title,.player.is-max .player-title{visibility:hidden}
.player:fullscreen{background:#000}
@media (max-width:760px),(hover:none){
  .player:fullscreen .player-stage,.player.is-max .player-stage{max-height:none;margin-bottom:60px}
  .player:fullscreen .player-stage[data-fmt="square"],.player.is-max .player-stage[data-fmt="square"]{width:min(100vw,calc(100dvh - 190px))}
  .player:fullscreen .player-stage[data-fmt="portrait"],.player.is-max .player-stage[data-fmt="portrait"]{width:min(100vw,calc((100dvh - 190px) * 4 / 5))}
  .player:fullscreen .player-stage[data-fmt="tall"],.player.is-max .player-stage[data-fmt="tall"]{width:min(100vw,calc((100dvh - 190px) * 9 / 16))}
}
@media (max-width:760px),(hover:none){.player:fullscreen .player-stage,.player.is-max .player-stage{max-width:none;border-radius:0}}
/* contact lists on PC: Copy pills line up on the right edge, like on phones */
@media (min-width:601px){.contact-lines .copy-btn{margin-left:auto}}
@media (min-width:601px){.hire .contact-lines{max-width:min(100%,560px)}}
/* "Send a brief" + "Download CV": two pills of exactly the same size.
   Phone: they fill the row together, so the space on the left and right edges is the same */
.hire .cta-row{display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hire .cta-row .btn{justify-content:center;white-space:nowrap}
@media (max-width:600px){
  .hire .cta-row{display:grid;width:100%}
  .hire .cta-row .btn{padding-left:12px;padding-right:12px;gap:10px;font-size:min(13px,3.2vw);letter-spacing:.14em}
}
/* MENU pill opening: same smooth, unhurried feel as the closing */
.site-header:not(.is-scrolled):not(.is-hidden) .burger-label{max-width:var(--lw,90px);transition:color .45s var(--ease),max-width .7s cubic-bezier(.45,0,.2,1),opacity .35s linear .32s}
.site-header:not(.is-scrolled):not(.is-hidden) .burger{transition:border-color .3s,transform .5s var(--ease),padding .7s cubic-bezier(.45,0,.2,1),gap .7s cubic-bezier(.45,0,.2,1)}
.site-header .burger-label{transition:color .45s var(--ease),opacity .15s linear,max-width .6s cubic-bezier(.45,0,.2,1) .1s}
.site-header .burger{transition:border-color .3s,transform .5s var(--ease),padding .6s cubic-bezier(.45,0,.2,1) .1s,gap .6s cubic-bezier(.45,0,.2,1) .1s}
.based{color:var(--warm)}   /* same warm orange as the locations on the Experience page */
.join-line,.cap-probe{display:none!important}   /* same-company line removed */
/* portfolio hover preview: the real video fades in over the thumbnail */
.btile .hover-vid{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;transition:opacity .45s var(--ease);overflow:hidden;border-radius:inherit}
.btile .hover-vid iframe{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%) scale(1.02);border:0;pointer-events:none}
.btile.is-previewing .hover-vid{opacity:1}
.btile .info,.btile .role-tag{z-index:2}
/* long credits on a tile stay inside it */
.btile .role-tag{max-width:calc(100% - 24px);white-space:normal;line-height:1.35}
/* hamburger-only state is an exact circle (54 x 54), not 56 x 54 */
.burger{padding:0 13px}
body.menu-open .site-header .burger{padding:0 13px!important}