/* =========================================================
   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}
  /* text that is sized to fit by script must change size instantly, or it gets measured mid-change */
  .hero-name,.hero-name *,.quote p,.quote p *,.roles,.role h3,.role .title{transition: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.webp) 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:6.9vw!important;white-space:nowrap}
  .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 */
}
/* 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 .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}

/* ===== live-site fixes (v9) ===== */
/* showreel: no YouTube thumbnail behind the card any more */
.reel-poster{display:none!important}
.reel-inner{position:absolute;inset:0}
/* full screen without true full screen (iPhone): cover the whole screen, above the header, black behind */
.reel-stage .reel-frame.is-fs{width:100vw!important;height:100vh!important;height:100dvh!important;aspect-ratio:auto!important;border-radius:0!important;background:#000!important}
html.reel-fs-open .reel-pin{z-index:10001}
html.reel-fs-open .site-header{visibility:hidden}
/* rotate (phones held upright): the whole full-screen view - video, X, volume, speaker - turns sideways.
   No real screen-orientation lock (some Android browsers dropped out of full screen when it was used).
   If the phone itself turns to landscape, the turn is undone automatically */
@media (orientation:portrait){
  .reel-frame.is-fs.is-rot .reel-inner{inset:auto;left:50%;top:50%;width:100vh;width:100dvh;height:100vw;transform:translate(-50%,-50%) rotate(90deg)}
  .reel-frame.is-fs.is-rot .reel-yt>*{width:min(100dvh,177.78vw)!important;height:min(56.25dvh,100vw)!important}
  .reel-frame.is-fs.is-rot .reel-x{top:16px;right:16px}
  .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)}
}
/* portfolio volume bar: same cyan bar and white dot as the showreel, fill follows the dot */
.player .vol{-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;outline:none;background:linear-gradient(90deg,var(--cyan) 0 var(--v,80%),rgba(246,244,241,.28) var(--v,80%))}
.player .vol::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--white)}
.player .vol::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--white)}
/* "Previous / Next" labels only appear with a mouse (on phones they stuck after a tap) */
@media (hover:none){.ctrl.has-tip::after{display:none}}
/* phones: client logos never stay bright after a tap */
@media (hover:none){.logo-cell:hover,.logo-cell.is-hot{opacity:.62!important;transform:none!important}}
/* if YouTube refuses a video, a clear way to watch it there */
.yt-fail{position:absolute;inset:0;z-index:4;display:grid;place-items:center;align-content:center;gap:14px;padding:20px;text-align:center;color:var(--white);background:#000;font-size:14px}
.yt-fail a{border:1px solid rgba(246,244,241,.4);border-radius:99px;padding:12px 20px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
/* plain YouTube player fallback: YouTube's own controls take over */
.player.is-plain .player-shield,.player.is-plain .player-big,.player.is-plain .player-bar,.player.is-plain .player-loading{display:none!important}
.reel-frame.is-plain .reel-range,.reel-frame.is-plain [data-reel="sound"]{display:none!important}
.reel-frame.is-fs.is-plain .reel-yt,.reel-frame.is-fs.is-plain .reel-yt iframe{pointer-events:auto}
/* PC hero: never taller than the window, so logo, menu, name and SCROLL all show on one screen.
   The photo trims from the top (empty dark space), keeping Waqar, the chess piece and the floor */
@media (min-width:761px){
  .hero{aspect-ratio:auto;height:min(56.25vw,100svh);min-height:560px}
  .hero-media{background-position:right bottom}
}
/* privacy & cookies: two columns on wider screens (left: about you and your messages; right: cookies, the work, changes),
   one column on phones. Topics never split between columns */
.lg-sec{padding-bottom:clamp(28px,3vw,44px)}
.lg-sec h2{margin-top:0!important}
.lg-sec>:last-child{margin-bottom:0}
.lg-col:last-child>.lg-sec:last-child{padding-bottom:0}
@media (min-width:900px){
  .legal-body{max-width:none;display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .lg-col:first-child{padding-right:clamp(28px,3.5vw,60px)}
  .lg-col+.lg-col{padding-left:clamp(28px,3.5vw,60px);border-left:1px solid var(--line);align-self:stretch}
  .lg-col>.lg-sec:last-child{padding-bottom:0}
}
/* phone card is 9:16, so a 16:9 video has to be (16/9)^2 = 3.16x the card's width to fill its full height (cropped sides) */
@media (max-width:760px){.reel-frame:not(.is-fs) .reel-yt>*{width:318%!important;height:100%!important}}
/* phones and tablets: no volume sliders. Mobile browsers don't let a website change YouTube's volume
   (it stays at the phone's own level), so a slider only acted as an on/off switch. The speaker button
   turns sound on and off; the phone's volume buttons set how loud */
@media (hover:none){.reel-frame .reel-range,.reel-frame.is-fs .reel-range,.player .vol{display:none!important}}

/* phones only: all six skill titles share one size (set by the longest, "2D MOTION DESIGN") and start at the left edge under the row number.
   The moving layer (.skill-run), its edge fades and the animation are untouched. */
@media (max-width:560px){
  .skill-static{left:0}
  .skill-word{font-size:min(clamp(28px,5vw,92px),calc((100vw - 2*var(--gutter)) / 16))}
}

/* Copy pills: both line up in one column, 14px after the longest value (the email),
   on computers, tablets and phones alike */
.contact-lines{display:grid;grid-template-columns:92px max-content auto;column-gap:16px;row-gap:4px;justify-content:start;align-items:center}
.contact-lines li{display:contents}
.contact-lines span{grid-column:1;width:auto;margin:0}
.contact-lines a{grid-column:2}
.contact-lines li:not(:has(.copy-btn)) a{grid-column:2/-1}
.contact-lines .copy-btn{grid-column:3;margin-left:-2px!important;justify-self:start}
@media (max-width:600px){
  .contact-lines{grid-template-columns:max-content auto;column-gap:14px;row-gap:6px}
  .contact-lines span{grid-column:1/-1}
  .contact-lines li:not(:first-child) span{margin-top:12px}
  .contact-lines a{grid-column:1}
  .contact-lines li:not(:has(.copy-btn)) a{grid-column:1/-1}
  .contact-lines .copy-btn{grid-column:2;margin-left:0!important}
}

/* phones & tablets: contact page reads profile -> email/phone/LinkedIn -> form -> offer cards,
   with a divider above the form so it reads as its own block */
@media (max-width:960px){
  .contact-side .cs-id{order:1}
  .contact-side .contact-lines{order:2}
  .contact-grid .form-wrap{order:3;border-top:1px solid var(--line);padding-top:40px}
  .contact-side .offer-tiles{order:4}
}

/* phones: tapped client logo eases up (0.3s), holds, then eases back (0.45s) */
@media (hover:none){
  .logo-rows .logo-cell{transition:opacity .45s cubic-bezier(.45,0,.55,1),transform .45s cubic-bezier(.45,0,.55,1)}
  .logo-rows .logo-cell.is-tap{opacity:1!important;transform:scale(1.12)!important;transition:opacity .3s cubic-bezier(.45,0,.55,1),transform .3s cubic-bezier(.45,0,.55,1)}
}
/* phones: a little headroom so tall logos (Pepsi, Lay's) aren't clipped while they grow; layout stays the same */
@media (hover:none){.logo-rows{padding-block:18px;margin-block:-18px}}

/* availability status (set from the WQ Tracker): dot colour follows the status */
.headshot .badge i,.cs-status i{background:var(--st,#1f9d55)}
.cs-status i{box-shadow:0 0 0 4px color-mix(in srgb,var(--st,#1f9d55) 18%,transparent)}
.st-wait [data-st-badge],.st-wait [data-st-line]{visibility:hidden}

/* copy icons: a thin copy icon that becomes a cyan tick when copied; the LinkedIn arrow shares their column */
.contact-lines li:not(:has(.copy-btn)) a:not(.go-btn){grid-column:2}
.contact-lines li:not(:has(.copy-btn)) a.go-btn{grid-column:3}
.contact-lines .copy-btn,.contact-lines .go-btn{grid-column:3;justify-self:start;position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin:-8px 0 -8px -9px!important;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:0;letter-spacing:0;transition:color .25s,background .25s}
.contact-lines .ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s,transform .35s cubic-bezier(.22,1,.36,1)}
.contact-lines .copy-btn .ic-ok{position:absolute;left:50%;top:50%;margin:-9px 0 0 -9px;opacity:0;transform:scale(.6);color:var(--cyan)}
.contact-lines .copy-btn.is-done .ic-copy{opacity:0;transform:scale(.6)}
.contact-lines .copy-btn.is-done .ic-ok{opacity:1;transform:scale(1);stroke:var(--cyan)}
.contact-lines .copy-btn:focus-visible,.contact-lines .go-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (hover:hover){
  .contact-lines .copy-btn:hover,.contact-lines .go-btn:hover{color:var(--white);background:rgba(255,255,255,.06)}
  .contact-lines .go-btn::after{content:"Visit link"}
  .contact-lines .copy-btn::after{content:"Copy " attr(data-what)}
  .contact-lines .copy-btn::after,.contact-lines .go-btn::after{text-transform:lowercase;position:absolute;left:50%;bottom:calc(100% + 6px);transform:translate(-50%,4px);white-space:nowrap;font:600 11px/1 var(--body);letter-spacing:.04em;color:var(--ink);background:var(--white);padding:6px 9px;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
  .contact-lines .copy-btn:hover::after,.contact-lines .go-btn:hover::after{opacity:1;transform:translate(-50%,0)}
  .contact-lines .copy-btn.is-done::after{content:"Copied";background:var(--cyan)}
}
@media (max-width:600px){
  .contact-lines .copy-btn,.contact-lines .go-btn{grid-column:2;width:40px;height:40px;margin:-11px 0 -11px -11px!important}
  .contact-lines li:not(:has(.copy-btn)) a:not(.go-btn){grid-column:1}
  .contact-lines li:not(:has(.copy-btn)) a.go-btn{grid-column:2}
}

/* drawn line arrows next to links (menu footer + site footer), same style as the arrow buttons */
.ar{display:inline-block;width:.9em;height:.9em;margin-left:.4em;vertical-align:-.1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu-foot .sf{display:none}
@media (max-width:600px){
  .menu-foot{flex-wrap:nowrap;gap:12px 14px}
  .menu-foot nav{flex-wrap:nowrap;gap:16px}
  .menu-foot nav a{white-space:nowrap}
  .menu-foot .lf{display:none}
  .menu-foot .sf{display:inline}
  .menu-foot .mail{font-size:min(16px,3.9vw)}
}

/* showreel: the first frame of the reel waits in the card (same crop as the video) until YouTube starts playing, then the video fades in over it */
.reel-first{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.reel-first:not([src]){visibility:hidden}
.reel-frame.is-fs .reel-first{object-fit:contain;background:#000}
.reel-frame:not(.has-video) .reel-yt{opacity:0}
.reel-frame.has-video .reel-yt{opacity:1;transition:opacity .35s ease}