/* self-hosted fonts (were Fontshare + Google CSS, two render-blocking requests) */
@font-face{font-family:"Clash Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/clash-grotesk-400.woff2) format("woff2")}
@font-face{font-family:"Clash Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/clash-grotesk-500.woff2) format("woff2")}
@font-face{font-family:"Clash Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/clash-grotesk-600.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-var.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/geist-mono-var.woff2) format("woff2")}
/* ============================================================
   Shaheen Baha — portfolio, editorial layout study
   Structure and motion follow the Valentin Cheval reference:
   near-black ground, a two-face type system, one 0.2rem radius
   everywhere, a rotating word drum in the headline, numbered
   testimonials, and the email address as the closing statement.
   Content, palette accent and typefaces are Shaheen's own.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* the reference greys, stepped from ink to paper */
  --ink:#0c0d10;
  --ink-2:#131418;
  --grey-1:#303134;
  --grey-2:#50555b;
  --grey-3:#858687;
  --grey-4:#c4c4c4;
  --paper:#fffbf9;
  --accent:#fc5102;

  --display:"Clash Grotesk","Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* one radius, used everywhere — the reference declares exactly one */
  --r:.2rem;
  --pad:clamp(28px,3.47vw,72px);   /* the reference's 50px container inset at 1440 */
  --maxw:none;   /* full-bleed: the page fills the screen, only --pad holds it off the edges */
  --nav-h:72px;

  --ease:cubic-bezier(.33,1,.68,1);
  --ease-io:cubic-bezier(.66,0,.15,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#0c0d10}
html,body{margin:0;padding:0}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-weight:400;
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
html{overflow-x:clip}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:0;left:0;z-index:2000;transform:translateY(-120%);
  padding:12px 20px;background:var(--paper);color:var(--ink);
  font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  border-radius:0 0 var(--r) 0;transition:transform .25s var(--ease)}
.skip:focus{transform:translateY(0)}
#main:focus{outline:none}

/* ---------- 3. Type scale ---------- */
.d1{font-family:var(--display);font-weight:600;
  font-size:clamp(44px,7.4vw,116px);line-height:.94;letter-spacing:-.03em;margin:0}
.d2{font-family:var(--display);font-weight:600;
  font-size:clamp(30px,3.6vw,54px);line-height:1.04;letter-spacing:-.02em;margin:0}
.d3{font-family:var(--display);font-weight:500;
  font-size:clamp(22px,2vw,30px);line-height:1.14;letter-spacing:-.01em;margin:0}
.d4{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.3;margin:0}
.lead{font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:var(--grey-4);margin:0}
.body{font-size:16px;line-height:1.62;color:var(--grey-3);margin:0}
.label{font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey-3);margin:0}

/* ---------- 4. Reveal motion ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms)}
[data-reveal].is-in{opacity:1;transform:none}
/* word rise: each word climbs out of its own line mask, 20ms apart (the reference's split-text titles) */
.rw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.rw>span{display:inline-block;transform:translateY(110%);opacity:0;
  transition:transform .8s cubic-bezier(.33,1,.68,1) calc(var(--w,0) * 20ms),opacity .8s cubic-bezier(.33,1,.68,1) calc(var(--w,0) * 20ms)}
.is-rise .rw>span{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- 5. Nav ---------- */
/* four zones across the full width: greeting, socials, pages, contact.
   It sits over the hero photograph rather than on a bar of its own. */
/* the reference's header is a 63px band on its 16-column grid: name on 1–3,
   Socials on 9–10, pages on 13–15, Let's talk! flush right; all text 13.3px */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;padding:33.33px 0 0}
/* the reference's strip over the top of every page: a band that darkens
   toward the top edge, with a faint blur of whatever scrolls under it */
.nav::before,.nav::after{content:"";position:absolute;left:0;right:0;top:-52.6px;height:175.5px;pointer-events:none;z-index:0}
.nav::before{background:linear-gradient(0deg,rgba(12,13,16,0),#0c0d10 89%)}
.nav::after{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);
  -webkit-mask:linear-gradient(rgba(0,0,0,0),#000 45%,rgba(0,0,0,0));mask:linear-gradient(rgba(0,0,0,0),#000 45%,rgba(0,0,0,0))}
.nav__bar{position:relative;z-index:1;display:grid;grid-template-columns:repeat(16,minmax(0,1fr));column-gap:1.157vw;
  align-items:center;width:100%;padding:0 clamp(28px,3.47vw,72px)}
/* the greeting sits in the name's slot until the page scrolls past the hero,
   then it lifts out and the name rises into its place (the reference's swap) */
.nav__id{position:relative;display:block;grid-column:1/4;height:29.33px;overflow:hidden;font-size:clamp(20px,1.85vw,32px)}
.nav__back{grid-column:1/4;height:29px}
.nav__hi,.nav__id .nav__name{position:absolute;left:0;top:0;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.nav__hi{top:5.33px;font-size:clamp(12px,.926vw,16px);color:rgba(255,255,255,.5);white-space:nowrap;line-height:1.4}
.nav__id .nav__name{transform:translateY(29.33px)}
.nav__id.is-named .nav__hi{opacity:0;transform:translateY(-29.33px)}
.nav__id.is-named .nav__name{opacity:1;transform:none}
.nav__name{display:flex;gap:.28em;font-family:var(--display);font-weight:500;font-size:clamp(20px,1.85vw,32px);letter-spacing:-.01em;color:var(--paper);white-space:nowrap;line-height:29px}
/* each slot is as wide as the word on show and eases to the other word's width while flipping */
.nav__flip{display:inline-grid;justify-items:start;perspective:690px;vertical-align:top;width:var(--wa,auto);transition:width .8s cubic-bezier(.33,1,.68,1)}
.nav__name:hover .nav__flip{width:var(--wb,auto)}
.nav__flip>span{grid-area:1/1;transform-style:preserve-3d;backface-visibility:hidden;transform-origin:center center .1em;
  transition:transform .8s cubic-bezier(.33,1,.68,1),opacity .8s cubic-bezier(.33,1,.68,1)}
.nav__flip-b{opacity:0;transform:translate3d(0,60%,-.1em) rotateX(-91deg)}
.nav__flip--2 .nav__flip-b{transform:translate3d(0,-60%,.1em) rotateX(-91deg)}
.nav__flip--2 .nav__flip-a,.nav__flip-b{color:var(--grey-2)}
.nav__flip--2 .nav__flip-b{color:var(--paper)}
.nav__name:hover .nav__flip-a{opacity:0;transform:translate3d(0,-60%,.1em) rotateX(91deg)}
.nav__name:hover .nav__flip--2 .nav__flip-a{transform:translate3d(0,60%,-.1em) rotateX(91deg)}
.nav__name:hover .nav__flip-b{opacity:1;transform:none}
.nav__set{grid-column:9/11;display:flex;align-items:center;gap:.579vw;font-size:clamp(12px,.926vw,16px);line-height:1.4;white-space:nowrap}
.nav__set--pages{grid-column:13/16;padding-left:.25vw}
.nav__setk{color:var(--paper)}
.nav__set a{color:rgba(255,255,255,.5);transition:color .3s var(--ease)}
.nav__set a:hover{color:var(--paper)}
.nav__set--pages a{color:rgba(255,255,255,.5)}
.nav__set--pages a[aria-current="page"]{color:var(--paper)}
/* the separators are drawn, not typed, so they never get selected or read out */
.nav__set a+a::before,.nav__setk+a::before{content:"/";margin-right:.579vw;color:rgba(255,255,255,.15)}
.nav__talk{grid-column:16/17;justify-self:end;font-size:clamp(12px,.926vw,16px);line-height:1.4;color:var(--paper);
  text-decoration:underline;text-underline-offset:4px;
  transition:color .3s var(--ease)}
.nav__talk:hover{color:var(--accent)}
.burger{display:none;justify-self:end;font-size:16px;font-weight:500;color:var(--paper);line-height:1;padding:8px 0;border:0;background:none;
  border:1px solid var(--grey-1);border-radius:var(--r)}

/* ---------- 6. Hero ---------- */
/* the photograph fills the frame and the copy sits on top of it: headline
   bottom-left, a services rail on the right, scroll cue in the corner */
.hero{position:relative;min-height:100svh;display:flex;pointer-events:none}
.hero a{pointer-events:auto}
/* ---------- 6a. The stage ----------
   The photograph is pinned behind the first two screens. The only thing
   scrolling does to it is deepen the veil (::after) so the intro copy stays
   readable; it is never scaled or moved by scroll. */
.stage{position:relative;--p:0}
.stage__media{position:sticky;top:0;height:100svh;overflow:clip;z-index:0;
  background:var(--ink)}
/* two layers from one photograph. --p (0 at the top of the page, 1 when
   the intro has fully arrived) blurs the background where it stands and
   pushes the cutout — the man and the chair — toward the camera; the
   transform-origin is set by the script to where the chair lands after the
   cover crop. The mouse drifts the cutout a little more than the background,
   which is what the -6% inset is for. */
.turn{position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 46%,#000 58%,rgba(0,0,0,.5) 82%,transparent 99%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 46%,#000 58%,rgba(0,0,0,.5) 82%,transparent 99%)}
.turn__bg,.turn__fgwrap,.turn__fg{position:absolute;inset:0;width:100%;height:100%;display:block}
.turn__bg,.turn__fg{object-fit:contain;object-position:50% 50%}   /* the whole picture, its own proportions, no crop */
.turn__bg{transform:translate(calc(var(--mx,0) * -1.25%),calc(var(--my,0) * -.625%));
  filter:blur(calc(var(--p,0) * 14px));will-change:transform,filter}
/* as the reference: the room slides against the pointer (1.25% / .625%); the man only drifts a touch, no rotation */
.turn__fgwrap{transform:translate(calc(var(--mx,0) * -.4%),calc(var(--my,0) * -.25%));will-change:transform}
.turn__fg{transform-origin:50% 48%;transform:scale(calc(1 + var(--p,0) * .65));will-change:transform,filter;
  /* sharp through the push-in, then softens late so the intro copy reads over him */
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.45)) blur(calc(max(0, var(--p,0) - .55) * 20px))}
.stage__veil{position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(12,13,16,.86) 0%,rgba(12,13,16,.42) 34%,transparent 62%),
    linear-gradient(to right,rgba(12,13,16,.78) 0%,rgba(12,13,16,.28) 34%,transparent 58%);
  opacity:1}
/* darkening as the picture recedes: a second veil that only exists on scroll */
/* no ink veil over the picture: the picture itself fades out (see --fade) */
.stage__media::after{content:none}
.turn{opacity:var(--fade,1)}
/* a touch closer: the hero and its two copies (loader fly-in, closing hero) share the same 8% zoom */
.turn,.clone__fgwrap,.clone__bg{scale:1.08}
/* Only the FIRST screen is pulled back over the pinned photograph. Applying
   the negative margin to both collapsed the stage to one viewport, leaving no
   scroll travel — and therefore no progress to drive the zoom. */
.stage > .hero,.stage > .intro{position:relative;z-index:2}
.stage > .hero{margin-top:-100svh}
.hero__in{position:relative;z-index:2;display:grid;
  grid-template-columns:repeat(16,minmax(0,1fr));column-gap:1.157vw;align-items:stretch;
  width:100%;max-width:var(--maxw);margin:0 auto;min-height:100svh;
  padding:calc(var(--nav-h) + 40px) var(--pad) 0}
.hero__l{grid-column:1/13;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:2.7svh}
.hero__hi{font-size:clamp(12px,.93vw,16px);color:rgba(255,255,255,.5);margin:0 0 .7em}
.hero__name{font-family:var(--display);font-weight:500;
  font-size:clamp(20px,1.85vw,32px);letter-spacing:-.01em;margin:0 0 .75em;line-height:1.2}
.hero__name span{color:#50555b}
/* three lines at the reference's scale: what / for whom / where */
.hero__h{font-family:var(--display);font-weight:700;
  font-size:clamp(44px,10.4vw,200px);line-height:.84;letter-spacing:-.02em;
  text-transform:uppercase;margin:0}
.hero__h > span{display:block;white-space:nowrap}
/* the title may run past its column, as the reference's does; the rail text
   sits above and below the lines it reaches */
.hero__h{width:max-content;max-width:88vw;position:relative;z-index:1;margin-left:-8px}
.drum{display:block;perspective:82.5rem;perspective-origin:150% 50%;overflow:hidden;height:1em}   /* the off-centre eye gives the tipping word the reference's lean */
.drum__list{display:grid;transform-style:preserve-3d;
  transition:transform 1.6s var(--ease-io)}   /* Shaheen 2026-09-05: a slow roll everywhere */
.drum__item{grid-area:1/1;display:block;color:var(--accent);
  backface-visibility:hidden;transform-style:preserve-3d;
  transition:opacity 1.6s var(--ease-io)}   /* fades over the whole turn, so the leaving and arriving words share the roll */
.hero__scroll{font-size:clamp(12px,.93vw,16px);color:rgba(255,255,255,.5);margin:4.3svh 0 0}

/* the rail: a rule, the services, a rule, the help link — then the bio and
   the marks pinned to the bottom of the screen */
.hero__r{grid-column:13/17;display:flex;flex-direction:column;justify-content:space-between}
.hero__bot{padding-bottom:40px}
.hero__top{margin-top:calc(25.9svh - var(--nav-h) - 40px)}
.hero__svc{list-style:none;margin:0 0 26px;padding:22px 0 20px;
  border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);display:grid;gap:6px}
/* plain text: no link, no hover */
.hero__svc li{display:block;font-size:clamp(12px,.93vw,16px);line-height:1.4;color:rgba(255,255,255,.5)}
.hero__help{display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:clamp(12px,.93vw,16px);color:var(--paper);
  text-decoration:underline;text-underline-offset:5px;
  transition:color .3s var(--ease)}
.hero__help:hover{color:var(--accent)}
.hero__bio{font-size:clamp(12px,.93vw,16px);line-height:1.4;color:rgba(255,255,255,.7);margin:0}
/* three identical boxes, identical gaps; each mark is cropped to its glyph so they weigh the same */
/* the reference's hero award marks: 37px tall at 1440, natural widths, 20.8px apart, at 50% */
.hero__marks{display:flex;gap:1.447vw;align-items:center;margin-top:26.67px;padding-top:26.67px;border-top:1px solid rgba(255,255,255,.1)}
.hero__marks img{padding:0;box-sizing:border-box}
.hero__marks svg,.hero__marks img{width:auto;height:clamp(28px,2.55vw,44px);object-fit:contain;flex:none;opacity:.5;filter:grayscale(1) brightness(1.9);transition:filter .4s var(--ease),opacity .4s var(--ease)}
.hero__marks svg:hover,.hero__marks img:hover{filter:none;opacity:1}


/* ---------- 6b. Intro over the fading photograph ---------- */
.intro{min-height:100svh;display:flex;align-items:flex-start;padding:642px 0 133px;
  background:transparent}   /* see-through: the pinned photograph stays behind the intro and fades out on its own (--fade) */
/* left column holds four tiles of --tile; the copy starts at the half line */
/* the copy sits on solid ink, fading in from the darkened photograph above it */
.intro__in::before{content:none}
.intro__in{position:relative;z-index:1;background:transparent;display:grid;grid-template-columns:repeat(16,minmax(0,1fr));column-gap:1.157vw;
  width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);--tile:clamp(72px,8.55vw,176px)}
/* min-width:0 on both tracks: without it the long display copy in the right
   column can force the grid wider than the viewport */
.intro__l{grid-column:1/7;min-width:0}
.intro__r{grid-column:9/17;min-width:0;position:relative;padding-top:30px}
.intro__k{font-family:var(--display);font-weight:400;
  font-size:clamp(20px,1.85vw,36px);line-height:1.1;margin:0 0 50px;
  padding:33.3px 0;border-top:1px solid rgba(255,255,255,.1);width:calc(var(--tile) * 2)}
.intro__tag{position:absolute;left:0;top:30px;font-size:clamp(15px,1.4vw,28px);color:rgba(255,255,255,.5);margin:0;line-height:1.3;padding-top:8px}

/* the roster: touching tiles on a checkerboard, each placed by --r/--c so the
   eye wanders it the way it would a real wall. Hover lights a tile orange. */
.wall{display:grid;grid-template-columns:repeat(4,var(--tile));grid-auto-rows:var(--tile);gap:1px}
.wall__c{grid-column:calc(var(--c) + 1);grid-row:calc(var(--r) + 1);
  display:grid;place-items:center;padding:12%;
  background:rgba(255,255,255,.05);
  clip-path:polygon(0 0,0 0,0 0,0 0);
  transition:clip-path .45s cubic-bezier(.33,1,.68,1),background-color .35s var(--ease),box-shadow .4s var(--ease);
  transition-delay:calc(var(--i,0) * 450ms)}   /* each tile waits for the one before it to finish */
.wall.is-in .wall__c{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.wall__c img,.wall__c--you span{transform:translate(-18%,-18%);transition:transform .45s cubic-bezier(.33,1,.68,1) calc(var(--i,0) * 450ms + 40ms),opacity .35s var(--ease)}
.wall.is-in .wall__c img,.wall.is-in .wall__c--you span{transform:none}
.wall__c:hover{background:var(--accent);transition-delay:0s;box-shadow:0 4px 10px rgba(252,81,2,.35),0 12px 32px rgba(252,81,2,.28)}
.wall__c img{max-height:50%;max-width:84%;width:auto;opacity:.5;filter:brightness(0) invert(1);
  transition:opacity .35s var(--ease)}
.wall__c:hover img{opacity:1}
.wall__c--you{background:rgba(255,255,255,.05);font-family:var(--sans);font-size:clamp(12px,.93vw,16px);font-weight:500;letter-spacing:normal;text-transform:none;text-align:center;line-height:1.4;color:rgba(255,255,255,.5)}
.wall__c--you:hover{color:#fff}
/* the invitation stays quiet until the tile is hovered */
.wall__c--you span{opacity:0}
.wall__c--you:hover span{opacity:1}
.intro__portrait{margin:-28px 8px 0 0;width:clamp(120px,14.86vw,260px);aspect-ratio:153/204;overflow:hidden;flex:none;
  clip-path:inset(0 calc((1 - var(--rv,0)) * 100%) calc((1 - var(--rv,0)) * 100%) 0)}
.intro__portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}

/* the paragraphs brighten word by word as the section scrolls past; a word
   arrives out of focus and snaps sharp, which is what the reference does */
.say p{font-family:var(--display);font-weight:400;
  font-size:clamp(22px,2.6vw,56px);line-height:1.18;letter-spacing:-.015em;
  margin:0 0 1.1em;color:var(--grey-1)}
.say p:first-child{text-indent:4.6em}
.say p:last-child{margin-bottom:0}
.say .w{color:var(--grey-1);transition:color .45s var(--ease)}
.say .w.on{color:var(--paper);animation:unblur .7s var(--ease) both}
@keyframes unblur{from{filter:blur(7px)}to{filter:blur(0)}}

.intro__row{display:flex;justify-content:space-between;align-items:flex-start;margin-top:16px}
.orb{display:grid;place-items:center;width:clamp(64px,6.4vw,120px);height:clamp(64px,6.4vw,120px);margin:0;
  border:1px solid var(--accent);border-radius:50%;color:var(--accent);
  font-size:clamp(18px,1.4vw,28px);
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}
.orb:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-3px)}

/* ---------- 6c. Credentials (the reference's awards table) ---------- */
.awards{position:relative;margin-top:clamp(60px,7.7vw,120px)}
.awards__h{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(24px,2.85vw,44px);letter-spacing:normal;line-height:1.2;margin:0 0 clamp(30px,3.5vw,50px);color:var(--paper)}
.awards__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--grey-1)}
.awards__r{display:grid;grid-template-columns:48.7% 10% minmax(0,1fr);gap:16px;align-items:baseline;
  position:relative;clip-path:inset(-2px 0 0 0);padding:clamp(14px,1.6vw,26px) 0;border-top:1px solid rgba(255,255,255,.1);
  font-size:clamp(16px,1.6vw,24px);line-height:1.3;color:rgba(255,255,255,.3);cursor:default;
  transition:color .4s var(--ease)}
.awards__r span:nth-child(2),.awards__r span:last-child{font-size:clamp(13px,1.04vw,17px);color:rgba(255,255,255,.15);transition:color .4s var(--ease)}
.awards__r span:last-child{text-align:right}
/* the line above a hovered row is swept white from the left, as the reference's award rows */
.awards__r::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:#c4c4c4;opacity:0;transform:translateX(-101%);
  transition:transform 0s linear .45s,opacity .45s ease}   /* leaving: the filled line fades, then resets */
.awards__r:hover::after{transform:none;opacity:1;transition:transform .65s ease,opacity .15s ease}   /* hovering: it sweeps in and stays */
/* the rows arrive spread apart and close up as the block comes into view (--rv),
   and breathe with the scroll's direction (--sv), like the testimonials */
.awards__r{padding-top:calc(clamp(14px,1.6vw,26px) + var(--sv,0) * 18px + (1 - var(--rv,1)) * 34px);padding-bottom:calc(clamp(14px,1.6vw,26px) + var(--sv,0) * 18px + (1 - var(--rv,1)) * 34px)}
.awards__r.is-on{color:var(--paper)}
.awards__r.is-on span:nth-child(2),.awards__r.is-on span:last-child{color:rgba(255,255,255,.5)}
.awards__list{border-top:0}
/* the mark floats in the gap between the columns, level with the list */
/* the mark sits beside its own row: --ly is set on hover to that row's middle */
.awards__logo{position:absolute;right:calc(100% + 6.6vw);top:var(--ly,22%);width:clamp(70px,7.6vw,140px);aspect-ratio:1;pointer-events:none;transition:top .45s var(--ease)}
.awards__logo svg,.awards__logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.7) rotate(-12deg);
  transition:opacity .5s var(--ease),transform .7s var(--ease);
  filter:drop-shadow(0 20px 40px rgba(252,81,2,.3))}
.awards__logo svg.is-on,.awards__logo img.is-on{opacity:1;transform:none;animation:drift 6s ease-in-out infinite}
@keyframes drift{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (max-width:767px){.awards__logo{display:none}.awards__r{grid-template-columns:1fr auto}.awards__r span:last-child{grid-column:1/-1;text-align:left}}

/* ---------- 6c. Cursor dot ---------- */
/* a single lerped dot, hidden wherever there is no fine pointer */
.dot{position:fixed;top:0;left:0;z-index:1200;width:9px;height:9px;
  border-radius:50%;background:var(--accent);pointer-events:none;
  transform:translate3d(-50px,-50px,0);opacity:0;
  transition:opacity .3s var(--ease),width .3s var(--ease),height .3s var(--ease)}
.dot.on{opacity:1}
.dot.big{width:34px;height:34px;opacity:.35}
.dot.stick{width:var(--s,48px);height:var(--s,48px);opacity:.6;background:transparent;border:1px solid var(--accent)}
/* the dot grows into a word over rows that ask for one (the reference's "Read") */
.dot.word{width:clamp(64px,6.6vw,96px);height:clamp(64px,6.6vw,96px);opacity:1;background:var(--accent);color:#fff;font-size:clamp(12px,1.1vw,16px);display:grid;place-items:center;font-family:var(--sans);mix-blend-mode:normal}
/* film grain over everything */
.grain{position:fixed;inset:-100%;z-index:1100;pointer-events:none;opacity:.12;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:300px 300px;animation:grain 1.1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-1%,3%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}}
/* the loader, as on the reference: a light-grey screen cut corner to
   corner by a thin pale line that a dark line eats from the top-left as
   the page loads; "Loading..." and the name sit bottom-left. When it is
   done the two halves slide apart along the diagonal to the top-right and
   bottom-left, and behind them the man flies in from a tilted, blurred,
   half-size start on black before the real hero fades in under him. */
.loader{position:fixed;inset:0;z-index:2000;pointer-events:none;--prog:0;--ox:0px;--oy:0px;--hyp:300%;--ang:32deg}
.loader.is-done,.loader__hero.is-done{opacity:0;visibility:hidden}
.loader__cross{position:absolute;left:0;top:0;width:var(--hyp);height:0;transform:rotate(var(--ang));transform-origin:0 0;
  display:flex;align-items:center;z-index:2;opacity:0;transition:opacity .3s}
.loader.is-ready .loader__cross{opacity:1}
.loader.is-ready .loader__cross.is-done{opacity:0}
.loader__track{position:absolute;left:0;width:100%;height:max(1px,.1157vw);background:rgba(255,255,255,.55);overflow:hidden}
.loader__prog{position:absolute;inset:0;display:block;background:#0f0f0f;transform:scaleX(var(--prog));transform-origin:left}
.loader__tri{position:absolute;inset:0;background:var(--accent);z-index:1}
.loader.is-ready .loader__tri--top{clip-path:polygon(calc(0% + var(--ox)) calc(0% - var(--oy)),calc(100% + var(--ox)) calc(0% - var(--oy)),calc(100% + var(--ox)) calc(100% - var(--oy)))}
.loader.is-ready .loader__tri--bot{clip-path:polygon(calc(0% - var(--ox)) calc(100% + var(--oy)),calc(100% - var(--ox)) calc(100% + var(--oy)),calc(0% - var(--ox)) calc(0% + var(--oy)))}
.loader__txt{position:absolute;left:var(--pad);bottom:clamp(24px,1.97vw,40px);z-index:2;margin:0}
.loader__load,.loader__name{margin:0}
.loader__load{font-size:clamp(13px,.926vw,16px);line-height:1.4;color:rgba(20,10,4,.45);opacity:0}
.loader.is-ready .loader__load{opacity:1}
.loader__name{font-family:var(--display);font-weight:500;font-size:clamp(20px,1.852vw,32px);line-height:1.1;color:#140a04;white-space:nowrap}
.loader__dim{color:rgba(20,10,4,.45)}
.loader__txt .w{display:inline-block;transform:translateY(100%);opacity:0}
.loader__txt .w.is-in{transform:none;opacity:1}
.loader__txt .w.is-out{transform:translateY(70%);opacity:0}
.loader__dots{display:inline-block;clip-path:inset(0 100% 0 0);animation:ldots 1s steps(4) infinite}
@keyframes ldots{to{clip-path:inset(0 -34% 0 0)}}
/* the fly-in: the man alone on black, under the nav, over the hero */
.loader__hero{position:fixed;inset:0;z-index:15;background:#000;pointer-events:none;opacity:0;visibility:hidden;perspective:1300px}
.loader__hero.is-on{opacity:1;visibility:visible}
.loader__hero.is-out{opacity:0;transition:opacity .45s cubic-bezier(.65,0,.35,1)}
.loader__fly{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 50%;will-change:transform,filter}
/* the flying copy carries no shadow or scroll blur of its own: one filter on the whole plate is enough */
.loader__fly .turn{-webkit-mask-image:none;mask-image:none}
.loader__fly .turn__fg{filter:none;transform:none;will-change:auto}
.loader__fly .turn__fgwrap{transform:none;will-change:auto}
/* the hero copy waits under the loader and settles once it clears */
html.is-loading [data-reveal].is-in{opacity:0;transform:translateY(22px)}
/* full-screen menu (opened by the burger on small screens) */
/* the phone menu sheet, measured on the reference at 375×812: greeting and
   Close on the 64px header row, 64px links on 58px lines from y=110, a rule,
   the contact rows, and a 56px "Let's talk!" pinned 43px off the bottom */
.menu{position:fixed;inset:0;z-index:1500;background:var(--ink);color:var(--paper);overflow:auto;
  transform:translateY(-100%);visibility:hidden;transition:transform .7s var(--ease-io),visibility 0s .7s}
.menu.is-open{transform:none;visibility:visible;transition:transform .7s var(--ease-io)}
.menu__in{min-height:100%;display:flex;flex-direction:column;gap:0;padding:20px var(--pad) 43px}
.menu__top{display:flex;justify-content:space-between;align-items:center;height:24px}
.menu__close{font-size:16px;line-height:22px;font-weight:500;color:var(--paper);padding:0}
.menu__hi{font-size:16px;line-height:22px;color:rgba(255,255,255,.5)}
.menu__pages{display:flex;flex-direction:column;margin-top:60px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.menu__pages a{display:block;margin:6px 0;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:64px;line-height:46px;letter-spacing:-.01em;color:rgba(255,255,255,.15)}
.menu__pages a[aria-current="page"]{color:var(--paper)}
.menu__pages a:hover{color:var(--accent)}
.menu__cols{display:flex;flex-direction:column;gap:16px;margin-top:20px}
.menu__cols a{display:inline-block;font-size:16px;line-height:22px;color:var(--accent);padding:0 12px 0 0}
.menu__cols .label{margin:0 0 6px;font-family:var(--sans);font-size:16px;line-height:22px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--paper)}
.menu__talk{margin-top:auto;font-family:var(--sans);font-weight:400;font-size:56px;line-height:56px;color:var(--accent);text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px}
@media (prefers-reduced-motion:reduce){.grain{animation:none}.loader,.loader__hero{display:none}}
@media (hover:none),(pointer:coarse){.dot{display:none}}
@media (prefers-reduced-motion:reduce){
  .turn__bg,.turn__fgwrap,.turn__fg{transform:none;filter:none}
  .hero{opacity:1}
  .wall__c{opacity:1;transform:none}
  .say .w{color:var(--paper)}
}

/* ---------- 6e. Marquee bands ----------
   Two crossed ribbons. At rest the orange one is sharp and the dark one sits
   behind it soft; hovering the dark one swaps that. A warm glow lives behind
   both and follows the pointer (--gx/--gy from the script). */
.bands{position:relative;height:clamp(240px,31vw,520px);z-index:2;
  --gx:50%;--gy:calc(50% - 45vh)}
/* the ribbons are clipped here; the section itself is not, so the glow can
   spill out of it */
.bands__clip{position:absolute;inset:0;overflow:clip;display:grid;align-items:center;z-index:1}
/* the glow: taller than the section by 45vh either side, blended additively
   so it reads as light falling onto the neighbouring sections rather than a
   panel laid over them. It breathes slowly and follows the pointer. */
.bands::before{content:"";position:absolute;left:0;right:0;top:-45vh;bottom:-45vh;pointer-events:none;z-index:0;
  background:radial-gradient(min(52vw,680px) min(62vw,820px) at var(--gx) calc(var(--gy) + 45vh),rgba(255,120,70,.2),rgba(255,100,60,.07) 45%,transparent 100%);
  filter:blur(28px);mix-blend-mode:screen;
  animation:breathe 7s ease-in-out infinite;transition:opacity .6s var(--ease)}
@keyframes breathe{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.bands::before{animation:none;opacity:.8}}
.band{position:absolute;left:-10vw;width:120vw;padding:.29em 0;white-space:nowrap;z-index:1;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(32px,4.63vw,96px);letter-spacing:normal;line-height:1.2;
  transition:filter .5s var(--ease),opacity .5s var(--ease),color .5s var(--ease)}
.band--dark{transform:rotate(-5.831deg);background:#000;color:#fff;filter:blur(.4vw);opacity:1;z-index:1}
.band--orange{transform:rotate(9.139deg);background:var(--accent);color:#fff;z-index:2;
  box-shadow:0 20px 60px rgba(0,0,0,.35)}
.bands:has(.band--dark:hover) .band--dark{filter:blur(0)}
.bands:has(.band--dark:hover) .band--orange{filter:blur(.4vw)}
.band__track{display:inline-flex;align-items:center;gap:0 2.3vw;padding:0 1.15vw;
  animation:bandslide 14s linear infinite}
.band__track--rev{animation-direction:reverse;animation-duration:17s}
.band__track i{font-style:normal;font-size:.55em;line-height:1;opacity:1;display:inline-block;animation:rot360 8s linear infinite}
@keyframes rot360{to{transform:rotate(360deg)}}
@keyframes bandslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.band__track{animation:none}}

/* ---------- 6f. Credentials ledger ---------- */
.ledger{border-top:1px solid var(--grey-1)}
.ledger__r{display:grid;grid-template-columns:minmax(0,1.4fr) auto minmax(0,1fr);gap:28px;
  padding:20px 0;border-bottom:1px solid var(--grey-1);align-items:baseline;
  transition:background-color .35s var(--ease),padding-left .35s var(--ease)}
.ledger__r:hover{background:var(--ink-2);padding-left:14px}
.ledger__r span:first-child{font-size:16px;color:var(--paper)}
.ledger__r span:nth-child(2){font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--grey-2)}
.ledger__r span:last-child{font-size:14px;color:var(--grey-3);text-align:right}
@media (max-width:700px){.ledger__r{grid-template-columns:1fr auto}.ledger__r span:last-child{grid-column:1/-1;text-align:left}}

/* ---------- 7. Section furniture ---------- */
.sec{padding:120px 0;position:relative}
.sec--tight{padding:84px 0}
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;margin-bottom:56px;flex-wrap:wrap}
.rule{height:1px;background:var(--grey-1);border:0;margin:0}

/* ---------- 8. Client wall ---------- */
/* a plain grid rather than a marquee: the reference states the roster, it
   does not animate it, and a static grid reads as fact instead of decoration */
.clients{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid var(--grey-1);border-left:1px solid var(--grey-1)}
.client{aspect-ratio:16/9;display:grid;place-items:center;padding:22px;
  border-right:1px solid var(--grey-1);border-bottom:1px solid var(--grey-1);
  transition:background-color .4s var(--ease)}
.client:hover{background:var(--ink-2)}
/* the marks arrive in every colour and weight; flattening them to white is
   the only way a mixed roster reads as one wall. True colour on hover. */
.client img{max-height:30px;width:auto;opacity:.62;
  filter:brightness(0) invert(1);
  transition:opacity .4s var(--ease),filter .4s var(--ease)}
.client:hover img{opacity:1;filter:none}
.client__initials{font-family:var(--display);font-weight:600;font-size:17px;
  color:var(--grey-2);letter-spacing:.02em}
/* the invitation slot — the reference puts "your logo here" in the wall */
.client--open{color:var(--grey-2)}
.client--open span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;text-align:center;line-height:1.6;
  transition:color .35s var(--ease)}
.client--open:hover span{color:var(--accent)}

/* ---------- 9. Credentials strip ---------- */
.creds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--grey-1);border:1px solid var(--grey-1);border-radius:var(--r);
  overflow:hidden}
.cred{background:var(--ink);padding:34px 28px}
.cred__n{font-family:var(--display);font-weight:600;
  font-size:clamp(30px,3.4vw,46px);line-height:1;letter-spacing:-.02em;
  display:block;margin-bottom:12px}
.cred__n em{font-style:normal;color:var(--accent)}
.cred p{font-size:14px;line-height:1.5;color:var(--grey-3);margin:0}

/* ---------- 10. Services ---------- */
.svcs{border-top:1px solid var(--grey-1)}
.svc{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1fr);
  gap:32px;padding:38px 0;border-bottom:1px solid var(--grey-1);
  transition:background-color .45s var(--ease),padding-left .45s var(--ease)}
.svc:hover{background:var(--ink-2);padding-left:18px}
.svc__n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--grey-2);padding-top:7px}
.svc__t{transition:color .35s var(--ease)}
.svc:hover .svc__t{color:var(--accent)}
.svc__d{font-size:15px;line-height:1.6;color:var(--grey-3);margin:0;max-width:52ch}

/* ---------- 11. Projects ---------- */
.projs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.proj{display:block;position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--ink-2)}
.proj__media{aspect-ratio:4/3;overflow:hidden;background:var(--ink-2)}
.proj__media img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease),filter .6s var(--ease);
  filter:grayscale(.35)}
.proj:hover .proj__media img{transform:scale(1.045);filter:none}
.proj__bar{display:flex;align-items:baseline;justify-content:space-between;
  gap:18px;padding:20px 22px 24px}
.proj__k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey-2);white-space:nowrap}
.proj__go{position:absolute;top:16px;right:16px;width:38px;height:38px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--paper);color:var(--ink);
  opacity:0;transform:translateY(-6px) scale(.9);
  transition:opacity .4s var(--ease),transform .5s var(--ease)}
.proj:hover .proj__go{opacity:1;transform:none}
.proj--wide{grid-column:1/-1}
.proj--wide .proj__media{aspect-ratio:21/9}

/* ---------- 12. Testimonials, numbered ---------- */
/* the reference counts them — 01 / 07 — so the set reads as evidence with a
   known size rather than an endless carousel */
.quotes{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--grey-1)}
.quote{display:grid;grid-template-columns:96px minmax(0,1fr) 250px;gap:32px;
  padding:44px 0;border-bottom:1px solid var(--grey-1);align-items:start}
.quote__c{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--grey-2)}
.quote__c b{color:var(--paper);font-weight:500}
.quote__t{font-family:var(--display);font-weight:400;
  font-size:clamp(18px,1.7vw,25px);line-height:1.42;letter-spacing:-.01em;
  color:var(--paper);margin:0}
.quote__by{display:flex;align-items:center;gap:12px}
.quote__by img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.quote__by b{display:block;font-size:14px;font-weight:600}
.quote__by span span{font-size:13px;color:var(--grey-3)}

/* ---------- 13. Belief ---------- */
/* one sentence of conviction, set large — the reference's strongest move */
.belief{padding:130px 0;border-top:1px solid var(--grey-1)}
.belief p{font-family:var(--display);font-weight:400;
  font-size:clamp(24px,3.1vw,46px);line-height:1.24;letter-spacing:-.02em;
  max-width:20ch;margin:0;text-wrap:balance}
.belief em{font-style:normal;color:var(--accent)}
.belief .label{margin-bottom:30px;display:block}

/* ---------- 14. Contact ---------- */
.cta{padding:110px 0 40px;border-top:1px solid var(--grey-1)}
.cta__lead{max-width:22ch;margin-bottom:48px}
/* the email set as the closing headline, exactly as the reference ends */
.cta__mail{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(28px,6.1vw,92px);line-height:1;letter-spacing:-.035em;
  color:var(--paper);word-break:break-word;
  transition:color .4s var(--ease)}
.cta__mail:hover{color:var(--accent)}
.cta__ways{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px}
.cta__ways a{padding:11px 20px;border:1px solid var(--grey-1);border-radius:var(--r);
  font-size:14px;color:var(--grey-4);
  transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease)}
.cta__ways a:hover{color:var(--ink);background:var(--paper);border-color:var(--paper)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding:34px 0 40px;margin-top:70px;border-top:1px solid var(--grey-1)}
.foot p{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey-2);margin:0}

/* ---------- 15. Responsive ---------- */
@media (max-width:1100px){
  .clients{grid-template-columns:repeat(3,minmax(0,1fr))}
  .creds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quote{grid-template-columns:70px minmax(0,1fr);gap:22px}
  .quote__by{grid-column:2;margin-top:6px}
}
@media (max-width:767px){
  :root{--pad:16px}
  .hero__in{grid-template-columns:1fr;gap:30px;align-items:start;min-height:0}
  .hero__h{width:auto;max-width:none}
  .hero__h > span{white-space:normal}
  .hero__top{margin-top:0}
  .hero__l{justify-content:flex-start}
  .intro__in{grid-template-columns:1fr;gap:44px;--tile:clamp(64px,22vw,110px)}
  .intro__tag{position:static;margin-bottom:16px}
  .say p:first-child{text-indent:0}
  .intro__k{width:auto}
  .wall__c{grid-column:auto;grid-row:auto}
  .hero__r{padding-bottom:0}
  .svc{grid-template-columns:44px minmax(0,1fr);gap:18px}
  .svc__d{grid-column:2}
  .projs{grid-template-columns:1fr}
  .proj--wide .proj__media{aspect-ratio:4/3}
  .nav__set,.nav__talk{display:none}
  .nav{padding:20px 0}
  .nav__bar{grid-template-columns:1fr auto;padding:0 var(--pad)}
  .nav__id,.nav__back,.burger{grid-column:auto}
  .nav__id,.nav__back{height:24px}
  .nav__hi{top:0;font-size:16px;line-height:1.5}
  .nav__name{font-size:20px;line-height:24px}
  .burger{padding:0;line-height:22px}
  .burger{display:grid}
  .sec{padding:84px 0}
  .belief{padding:88px 0}
}
@media (max-width:560px){
  .clients{grid-template-columns:repeat(2,minmax(0,1fr))}
  .creds{grid-template-columns:1fr}
}

/* pages without a hero photograph need the bar to sit on the page ground */
/* pages without a hero use the same fixed header and strip as the home page */

/* ---------- 16. Inner page head ---------- */
.phead{padding:calc(var(--nav-h) + 110px) 0 70px}
.phead .label{display:block;margin-bottom:24px}
.phead em{font-style:normal;color:var(--grey-2)}
.phead__sub{max-width:44ch;margin-top:26px}

/* ---------- 17. Project filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.filter{display:inline-flex;align-items:baseline;gap:8px;
  padding:10px 18px;border:1px solid var(--grey-1);border-radius:var(--r);
  font-size:14px;color:var(--grey-3);
  transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease)}
.filter span{font-family:var(--mono);font-size:10px;color:var(--grey-2)}
.filter:hover{color:var(--paper);border-color:var(--grey-2)}
.filter.is-on{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.filter.is-on span{color:var(--grey-2)}

.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* filtering hides by attribute, so the grid reflows rather than leaving gaps */
.pgrid[data-active]:not([data-active="all"]) .proj{display:none}
.pgrid[data-active="brand"] .proj[data-kind="brand"],
.pgrid[data-active="packaging"] .proj[data-kind="packaging"],
.pgrid[data-active="digital"] .proj[data-kind="digital"],
.pgrid[data-active="campaign"] .proj[data-kind="campaign"]{display:block}
.pempty{font-size:15px;color:var(--grey-3);padding:40px 0}

/* ---------- 18. About page ---------- */
.abt{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:60px;align-items:start}
.abt__body p{font-family:var(--display);font-weight:400;
  font-size:clamp(19px,1.8vw,27px);line-height:1.38;letter-spacing:-.015em;
  color:var(--paper);margin:0 0 26px;max-width:30ch}
.abt__body p:last-child{margin-bottom:0;color:var(--grey-3)}
.abt__card{border:1px solid var(--grey-1);border-radius:var(--r);overflow:hidden;
  position:sticky;top:calc(var(--nav-h) + 24px)}
.abt__card img{width:100%;height:auto;display:block;background:var(--accent)}
.abt__meta{padding:22px}
.abt__meta dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0}
.abt__meta dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey-2)}
.abt__meta dd{margin:0;font-size:14px;color:var(--grey-4)}

/* the CV as a ledger: company, role, dates — one row each */
.jobs{border-top:1px solid var(--grey-1)}
.job{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) auto;
  gap:26px;align-items:center;padding:24px 0;
  border-bottom:1px solid var(--grey-1);
  transition:background-color .4s var(--ease),padding-left .4s var(--ease)}
.job:hover{background:var(--ink-2);padding-left:16px}
.job__logo{width:36px;height:36px;border-radius:var(--r);overflow:hidden;
  background:var(--ink-2);display:grid;place-items:center}
.job__logo img{width:100%;height:100%;object-fit:contain;padding:5px}
.job__co{font-family:var(--display);font-weight:500;font-size:17px;margin:0}
.job__role{font-size:14px;color:var(--grey-3);margin:0}
.job__when{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey-2);white-space:nowrap;text-align:right}

.skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--grey-1);border:1px solid var(--grey-1);border-radius:var(--r);overflow:hidden}
.skill{background:var(--ink);padding:26px 24px}
.skill h3{font-family:var(--display);font-weight:500;font-size:16px;margin:0 0 8px}
.skill p{font-size:14px;line-height:1.55;color:var(--grey-3);margin:0}

@media (max-width:1100px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .abt{grid-template-columns:1fr;gap:36px}
  .abt__card{position:static;max-width:340px}
}
@media (max-width:767px){
  .phead{padding:calc(var(--nav-h) + 70px) 0 48px}
  .job{grid-template-columns:36px minmax(0,1fr);gap:16px}
  .job__role,.job__when{grid-column:2}
  .job__when{text-align:left;margin-top:2px}
  .skills{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pgrid{grid-template-columns:1fr}
}


/* ---------- 18b. Projects title ----------
   A full screen of staggered type before the showcase: the first line flush
   left, the second and the years stepped in, the years a shade darker. */
.ptitle{position:relative;padding:8.7vw var(--pad);background:var(--ink)}
.ptitle__tag{position:absolute;left:85.6%;top:8.7vw;margin:0;
  font-size:clamp(13px,1.16vw,20px);color:rgba(255,255,255,.3)}
.ptitle__h{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(44px,9.25vw,180px);line-height:.85;letter-spacing:normal;color:rgba(255,255,255,.5);
  display:flex;flex-direction:column;width:100%}
.ptitle__h > span{white-space:nowrap}
.ptitle__h > span:nth-child(2),.ptitle__h > span:nth-child(3){margin-left:23.5%}
.ptitle__yr{color:rgba(255,255,255,.15)}
.ptitle__yr sup{font-size:.5em;color:var(--accent);vertical-align:baseline;line-height:1;margin-left:.06em;position:relative;top:-.1em}
@media (max-width:767px){.ptitle{padding:60px var(--pad)}.ptitle__h > span:nth-child(2),.ptitle__h > span:nth-child(3){margin-left:10%}.ptitle__tag{position:static;margin-bottom:20px}}

/* ---------- 19. Project showcase ----------
   The reference's layout: a thin left rail (the current thumbnail between two
   rules, then the counter and the giant name at the bottom), a tall portrait
   frame in the centre, and the facts spread down the right rail. */
.show{position:relative;background:var(--ink);height:600svh}
.show__pin{position:sticky;top:0;height:100svh;overflow:clip;
  display:grid;grid-template-columns:var(--tw) minmax(0,1fr) clamp(240px,22.5vw,460px);grid-template-rows:1fr auto;
  column-gap:clamp(32px,4vw,90px);row-gap:0;--tw:clamp(50px,3.8vw,80px);
  padding:calc(var(--nav-h) + 5svh) var(--pad) 4svh;
  width:100%;max-width:var(--maxw);margin:0 auto}
/* the thumbnail stack: one row per piece, in order. The piece on show is
   its thumbnail; every other piece is a grey line, above it if already seen,
   below it if still to come. Changing piece grows the next row into a
   thumbnail while the current one shrinks back to a line. */
.show__strip{grid-column:1;grid-row:1;align-self:start;position:relative;--sp:0;
  display:flex;flex-direction:column;gap:clamp(14px,2svh,22px)}
.show__mini{position:relative;display:block;width:100%;height:0;overflow:hidden;--angle:0deg;
  border-top:2px solid #303134;
  transition:height .8s var(--ease-io),border-color .4s var(--ease)}
/* the picture sits 4px inside the frame, a touch large until its row opens */
.show__mini img{position:absolute;left:4px;top:4px;width:calc(100% - 8px);height:calc(var(--tw) * 78 / 55 - 8px);object-fit:cover;display:block;
  transform:scale(1.1);transition:transform .4s linear}
.show__mini.is-on{height:calc(var(--tw) * 78 / 55);border-top-color:transparent}
.show__mini.is-on img{transform:none;opacity:1}
.show__mini img{opacity:0;transition:transform .4s linear,opacity .3s linear}
/* the frame is drawn by the scroll: a faint track, and an orange line that
   starts at the top centre and runs clockwise round the frame as the piece
   plays out, fading in along its length (the reference's conic gradient) */
.show__mini::before,.show__mini::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s linear}
.show__mini::before{border:1.5px solid #303134}
.show__mini::after{padding:1.5px;
  background:conic-gradient(rgba(255,61,0,0) 0deg,var(--accent) var(--angle),rgba(255,61,0,0) var(--angle),rgba(255,61,0,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.show__mini.is-on::before{opacity:.1}
.show__mini.is-on::after{opacity:1}
/* the projects page: the current thumb sits in the reference's 4px #242528 frame (see §25) */
.show__mini:hover{border-top-color:var(--grey-3)}
.show__ring{display:none}
/* the thin progress line under the counter: fills as the section plays out */
.show__rule{display:block;position:relative;width:var(--tw);height:1px;background:rgba(255,255,255,.1);margin:0 0 .9em}
.show__names,.testi__bar{display:none}
.show__rule i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--paper);transition:width .3s linear}
/* counter, a rule, then the name — runs under the picture */
.show__name{grid-column:1/3;grid-row:2;align-self:end;position:relative;z-index:6;pointer-events:none}
.show__count{font-size:clamp(14px,1.16vw,20px);font-weight:500;color:rgba(255,255,255,.5);margin:0 0 .6em;white-space:nowrap}
.show__count b{color:var(--paper);font-weight:500}
.show__h{font-family:var(--display);font-weight:500;text-transform:uppercase;
  font-size:clamp(36px,4.65vw,96px);line-height:1.2;letter-spacing:-.02em;margin:0;color:var(--paper);white-space:nowrap}
/* the frame: portrait, as tall as the screen allows */
.show__media{grid-column:2;grid-row:1/3;position:relative;justify-self:center;align-self:stretch;
  height:100%;aspect-ratio:492/747;max-width:100%;margin-left:8%}
/* the pieces are a stack in order, earlier ones on top. Each is cut by a
   square clip: --ci is the top-left corner, --co the bottom-right, both in
   %. Moving on, the scroll shrinks the current piece's square into the
   top-left corner while the next piece's square grows out of the
   bottom-right one; the two meet on the diagonal with black in the other
   corners. The pictures themselves drift the same way at half speed and
   scale about their top-left quarter — the reference's exact move. */
.show__media{overflow:clip}
.show__img{position:absolute;inset:0;overflow:hidden;display:block;
  --ci:0;--co:0;--tx:50;--is:1.4;
  clip-path:polygon(calc(var(--ci) * 1%) calc(var(--ci) * 1%),calc(var(--co) * 1%) calc(var(--ci) * 1%),calc(var(--co) * 1%) calc(var(--co) * 1%),calc(var(--ci) * 1%) calc(var(--co) * 1%))}
.show__img[data-k="0"]{z-index:4;--co:100;--tx:0;--is:1}.show__img[data-k="1"]{z-index:3}.show__img[data-k="2"]{z-index:2}.show__img[data-k="3"]{z-index:1}
.show__img img{width:100%;height:100%;object-fit:cover;transform-origin:25% 25%;
  transform:translate(calc(var(--tx) * 1%),calc(var(--tx) * 1%)) scale(var(--is))}
/* text rolls in when the piece changes */
.roll{display:inline-block}
.roll.is-rolling{animation:rollin .7s var(--ease-io) both}
@keyframes rollin{from{transform:translateY(60%);opacity:0;clip-path:inset(0 0 100% 0)}to{transform:none;opacity:1;clip-path:inset(0 0 -20% 0)}}
.show__yr{display:flex;gap:0}
.show__yr .roll{display:inline-block}
/* the facts, spread down the rail */
.show__meta{grid-column:3;grid-row:1/3;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-start;
  height:auto}
/* the reference's column: Year and Role stacked at the top (85px between),
   Description pinned to the bottom, the link 14vh under it */
.show__dl{margin:0;display:flex;flex-direction:column;justify-content:flex-start;flex:1;gap:0}
.show__dl dt:nth-of-type(3){margin-top:auto}
.show__dl dd:first-of-type{margin-bottom:9.5svh}
.show__dl dt{font-size:clamp(12px,.93vw,16px);line-height:1.4;font-weight:500;color:rgba(255,255,255,.3);margin-bottom:.579vw}
.show__dl dd{margin:0;font-size:clamp(14px,1.157vw,20px);line-height:1.3;color:rgba(255,255,255,.7)}
.show__dl dd:first-of-type{font-family:var(--display);font-size:clamp(22px,1.85vw,32px);font-weight:500;color:var(--paper);line-height:1.1}
.show__all{display:inline-flex;gap:8px;align-items:center;align-self:flex-start;margin-top:14svh;line-height:1.3;color:var(--accent);font-weight:500;
  font-size:clamp(14px,1.16vw,20px);text-decoration:underline;text-underline-offset:5px}
.show__nav{grid-column:3;grid-row:2;justify-self:end;align-self:end;display:flex;gap:8px;position:relative;z-index:3}
.show__nav button,.testi__nav button{width:40px;height:40px;border:1px solid var(--grey-1);border-radius:50%;
  color:var(--paper);display:grid;place-items:center;font-size:15px;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.show__nav button:hover,.testi__nav button:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ---------- 20. Testimonials (listed, as the reference does at desktop) ---------- */
/* the reference leaves 133px after the showcase pin, its label 101px lower, and 41.67px between the last row and the footer */
.testi{padding:20vw 0 2.894vw;background:var(--ink)}
.testi__head{position:relative;margin-bottom:7.8vw}
.testi__head .label{position:absolute;left:0;top:3.2vw;margin:0;font-family:var(--sans);font-weight:400;
  font-size:clamp(13px,1.16vw,20px);letter-spacing:normal;text-transform:none;color:rgba(255,255,255,.5);padding:0}
/* WHAT / PEOPLE SAY / ABOUT ME at the reference's scale and stagger */
.testi__h{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(44px,9.25vw,180px);line-height:.85;letter-spacing:normal;color:rgba(255,255,255,.5);
  display:flex;flex-direction:column}
.testi__h > span{white-space:nowrap}
.testi__h > span:nth-child(1){margin-left:25.3%}
.testi__h > span:nth-child(2){margin-left:1.1%}
.testi__h > span:nth-child(3){margin-left:25.3%}
.testi__h b{font-weight:700;color:var(--paper)}
.testi__list{position:relative}
/* the reference's row: number in the first column, name and role from the
   sixth, the quote from the twelfth of a sixteen-column grid */
.testi__item{display:grid;grid-template-columns:25.7% 31.5% minmax(0,1fr);gap:0;align-items:start;
  padding:7.8vw 0;border-bottom:0;
  color:rgba(255,255,255,.5);transition:color .4s var(--ease)}
.testi__item:hover{color:var(--paper)}
.testi__n{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(22px,2.55vw,40px);line-height:1.2;color:rgba(255,255,255,.15);transition:color .4s var(--ease)}
.testi__item:hover .testi__n{color:rgba(255,255,255,.5)}
.testi__info{display:grid;gap:8px;min-width:0;padding-right:8%}
.testi__name{margin:0;font-size:clamp(18px,1.85vw,28px);font-weight:500;line-height:1.1;color:var(--paper)}
.testi__pos{margin:0;font-size:clamp(12px,.95vw,14px);line-height:1.4;color:rgba(255,255,255,.7)}
.testi__body{min-width:0}
.testi__q{margin:0;font-size:clamp(16px,1.4vw,21px);line-height:1.3;font-weight:300;color:inherit}
.testi__q.is-short{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.testi__more{margin-top:10px;font-size:clamp(12px,.95vw,14px);color:rgba(255,255,255,.5);transition:color .3s var(--ease)}
.testi__item:hover .testi__more{color:var(--accent)}
.testi__img{display:none;margin:0}
/* desktop rows as the reference: 73px above the content and 72px below, the
   number in a 75×100 cell, and the portrait hidden in that same cell until
   the row is hovered, when it opens over the number and settles from a
   slightly enlarged, offset start. Name, role and quote sit at 30% and
   brighten on hover or when the row is opened; the toggle text is hidden —
   clicking the row expands the quote. */
@media (min-width:768px){
  .testi__item{position:relative;padding:5.09vw 0 5vw}
  .testi__n{min-height:6.94vw}
  .testi__img{display:block;position:absolute;left:0;top:5.09vw;width:5.21vw;height:6.94vw;overflow:hidden;z-index:1;
    clip-path:polygon(0 0,0 0,0 0,0 0);transition:clip-path .5s cubic-bezier(.33,1,.68,1)}
  .testi__img img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:0 0;
    transform:translate(-25%,-25%) scale(1.2);transition:transform .8s cubic-bezier(.33,1,.68,1) .1s}
  .testi__item:hover .testi__img{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
  .testi__item:hover .testi__img img{transform:none;transition-delay:0s}
  .testi__info,.testi__body{opacity:.3;transition:opacity .5s cubic-bezier(.74,.06,.4,.92)}
  .testi__item:hover .testi__info,.testi__item:hover .testi__body,.testi__item.is-open .testi__info,.testi__item.is-open .testi__body{opacity:1;transition-delay:0s}
  .testi__more{display:none}
  .testi__item{cursor:pointer;overflow:hidden}
  /* the separators are drawn from the left as the rows come into view */
  .testi__item::before,.testi__list::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.1);
    transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.33,1,.68,1)}
  .testi__list::after{top:auto;bottom:0}
  .testi__item.is-line::before,.testi__list.is-line::after{transform:none}
  /* hovering a row sweeps its line white from the left */
  .testi__item::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#c4c4c4;opacity:.8;transform:translateX(-101%);transition:transform .65s ease;z-index:2}
  .testi__item:hover::after{transform:none}
  /* the rows breathe with the scroll: a little more room while moving down, a little less moving up */
  .testi__item{padding-top:calc(5.09vw + var(--sv,0) * 22px);padding-bottom:calc(5vw + var(--sv,0) * 22px)}
}
@media (max-width:767px){
  .testi__item{grid-template-columns:1fr;gap:12px}
  .testi__img{display:block;width:56px}
  .testi__img img{width:100%;height:100%;object-fit:cover;border-radius:0}
}

/* ---------- 21. Footer, on paper ---------- */
/* the footer is taller than the screen, so it scrolls in fully and then
   pins by its BOTTOM edge (top = viewport − its height, set by the script)
   while the closing sequence comes over it — the reference shows the whole
   footer, marquee included, before anything else happens */
.close{position:sticky;top:calc(100svh - var(--close-h,123svh));z-index:1;background:var(--paper);color:#1d1d1d;overflow:clip;
  min-height:123svh;padding-top:49svh;display:flex;flex-direction:column}
/* the bloom, sampled column by column from the reference's 1440×733 plate:
   solid ink for the first fifth, then the ember ramps to its peak just past
   the middle and thins out to the paper by the bottom */
.close__bloom{position:absolute;left:-2px;right:-2px;top:-2px;height:50.9vw;pointer-events:none;
  background:
    radial-gradient(ellipse 112% 100% at 50% 0%,#0b0d11 0%,#0b0d11 30%,rgba(11,13,17,0) 46%),
    radial-gradient(ellipse 40% 55% at 0% 100%,rgba(255,251,249,.9) 0%,rgba(255,251,249,0) 70%),
    radial-gradient(ellipse 40% 55% at 100% 100%,rgba(255,251,249,.9) 0%,rgba(255,251,249,0) 70%),
    linear-gradient(to bottom,#0b0d11 0%,#0b0d11 14%,#1f0d0f 22%,#530f0b 30%,#9d2c07 38%,#db6510 46%,#ec821a 52%,rgba(251,155,50,.97) 58%,rgba(255,185,96,.82) 66%,rgba(255,190,121,.51) 74%,rgba(255,198,141,.19) 84%,rgba(255,179,128,0) 96%)}
/* the bust stands from just under the nav to the bottom edge, in front of the marquee */
/* one box for both copies of the bust: the footer's and the closing sequence's */
.close__man,.clone__man{position:absolute;left:39.4%;top:42.55svh;height:88svh;margin:0}
.close__man{transform:translateX(-50%);overflow:hidden;z-index:2}
/* the closing copy of the man sits where the pinned footer shows him: 42.55svh down the footer, minus the part above the screen */
.clone__man{top:calc(42.55svh - (var(--close-h,123svh) - 100svh))}
.close__man img{height:100%;width:auto;display:block}
.close__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(140px,11%) minmax(0,1fr) 43.05%;
  gap:0 24px;align-items:start;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);flex:1}
.close__rail{grid-column:1;display:flex;flex-direction:column}
.close__info,.close__mailwrap{display:contents}   /* phone-only wrappers (§31) */
.close__label{font-size:clamp(12px,.93vw,16px);line-height:1.4;font-weight:500;color:#010301;margin:0 0 .463vw}
.close__label--soft{color:rgba(29,29,29,.3);margin-bottom:.579vw}
.close__rail ul{list-style:none;margin:0 0 4.05vw;padding:0;display:grid;gap:.231vw}
.close__rail li{font-size:clamp(12px,.93vw,16px);line-height:1.4}
.close__rail ul:nth-of-type(2){margin-bottom:3.94vw}
.close__rail a{color:var(--accent);font-size:clamp(12px,.93vw,16px);line-height:1.4;font-weight:500;transition:color .3s var(--ease)}
.close__rail a:hover{color:#1d1d1d}
.close__cta{margin-top:0;width:19.7vw;min-width:200px;padding-top:2.315vw;border-top:1px solid #c4c4c4}
.close__lead{font-family:var(--sans);font-weight:400;font-size:clamp(22px,2.55vw,40px);line-height:1.2;
  letter-spacing:-.01em;margin:0;color:#1d1d1d}
.close__say{grid-column:3;min-width:0}
.close__say p{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.55vw,40px);line-height:1.2;
  letter-spacing:-.01em;margin:0 0 1.2em;color:rgba(1,3,1,.8);max-width:none;text-wrap:pretty}
.close__say p:first-child{text-indent:0}
.close__say p:last-child{margin-bottom:clamp(24px,4svh,48px)}
.close .say .w{color:rgba(1,3,1,.22)}
.close .say .w.on{color:rgba(1,3,1,.8)}
.close__mail{display:block;position:relative;z-index:1;overflow:hidden;white-space:nowrap;
  padding:1.447vw 0 2.025vw;color:#1d1d1d;margin-top:auto}
.close__mail-track .at{font-style:normal;color:var(--accent)}
.close__mail-track{display:inline-flex;font-family:var(--display);font-weight:400;text-transform:none;
  font-size:clamp(48px,9.25vw,140px);line-height:1;letter-spacing:-.02em;animation:bandslide 30s linear infinite}
.close__mail:hover .close__mail-track{color:var(--accent)}

/* ---------- 22. Closing hero, dark, the chair empty ---------- */
/* the closing sequence, decoded from a recording of the reference: the footer
   darkens into an orange-to-black gradient with the man still standing, the
   camera dives into his shoulder while he blurs away, and the opening hero
   photo settles in behind — the page ends where it began. Driven by --g
   (gradient), --z (zoom), --b (blur), --m (man opacity), --h (hero) from JS. */
/* the closing block overlaps the pinned footer by one screen, so its pin engages
   exactly when the footer has scrolled fully into view — no dead stretch */
.clone{position:relative;z-index:2;height:320svh;margin-top:-100svh;background:transparent;color:var(--paper)}
.clone__pin{position:sticky;top:0;height:100svh;overflow:hidden;background:transparent}
.clone__black{position:absolute;inset:0;background:#000;opacity:var(--k,0)}
.clone__hero{position:absolute;inset:0;z-index:1;opacity:var(--h,0);display:flex;align-items:flex-end;background:#000;
  filter:blur(calc((1 - var(--h,0)) * 22px)) brightness(calc(.35 + .65 * var(--h,0)))}
.clone__hero .hero__in--clone{opacity:var(--t,0)}
.clone__man{z-index:2}
/* framed exactly like the hero's own photograph (same bleed, crop point and
   vignette), so the wrap from the last screen to the first is seamless */
/* the seated figure is the hero's own cutout on black while the camera dives;
   the room behind him only arrives at the end, with the copy */
.clone__fgwrap{position:absolute;inset:0;width:100%;height:100%;display:block}
.clone__fg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block}
.clone__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;transform:none;opacity:var(--r,0);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 46%,#000 58%,rgba(0,0,0,.5) 82%,transparent 99%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 46%,#000 58%,rgba(0,0,0,.5) 82%,transparent 99%)}
.hero__in--clone{position:relative;z-index:1}
.clone .hero__marks svg{opacity:.8}
.clone__paper{display:none}
.clone__grad{position:absolute;inset:0;opacity:var(--g,0);mix-blend-mode:multiply;
  background:linear-gradient(to bottom,#000 0%,#160503 22%,#6b1c07 48%,#d34a10 74%,#ff7d22 100%)}
.clone__man{
  transform:translateX(-50%) scale(var(--z,1));transform-origin:70% 42%;opacity:var(--m,0);
  filter:brightness(calc(1 - .2 * var(--g,0))) contrast(1.05) blur(calc(var(--b,0) * 1px));will-change:transform,opacity,filter}
.clone__man img{height:100%;width:auto;display:block}
.clone__man::after{content:"";position:absolute;inset:0;opacity:var(--g,0);mix-blend-mode:screen;pointer-events:none;
  background:linear-gradient(to left,rgba(255,30,0,.9),rgba(255,30,0,.35) 30%,rgba(255,30,0,0) 58%);
  -webkit-mask:url(../img/cutout-mask-440.png) center/100% 100% no-repeat;mask:url(../img/cutout-mask-440.png) center/100% 100% no-repeat}
.drum--still{overflow:visible}
/* next-page link at the foot of the inner pages */
.next{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:40px var(--pad) 56px;
  border-top:1px solid var(--grey-1);color:var(--paper);transition:color .3s var(--ease)}
.next__t{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(28px,4vw,64px);letter-spacing:-.03em;line-height:1}
.next:hover{color:var(--accent)}
/* ---------- 23. About page, to the reference's sequence ---------- */
/* hero: first name grey, surname orange with ®, the years stacked at right,
   a subline with a rule, the portrait right of centre and a square shot
   overlapping it */
.ahero{position:relative;padding:calc(var(--nav-h) + 19svh) 0 0;min-height:180svh}
.ahero--end{min-height:100svh;padding-top:calc(var(--nav-h) + 19svh)}
.ahero__in{position:relative}
.ahero__h{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(56px,10.4vw,200px);line-height:.89;letter-spacing:-.02em;display:flex;flex-direction:column;color:rgba(255,255,255,.5)}
.ahero__l1{margin-left:15px}
.ahero__l2{margin-left:calc(18.5% + 6px);color:var(--accent)}
.ahero__h sup{font-size:.44em;color:var(--paper);vertical-align:top;position:relative;top:-.05em;margin-left:.08em}
.ahero__yr{position:absolute;left:74%;top:1.96em;margin:0;display:flex;flex-direction:column;
  font-family:var(--display);font-weight:600;font-size:clamp(28px,4.65vw,90px);line-height:.93;letter-spacing:-.02em}
.ahero__yr span:first-child{color:rgba(255,255,255,.15)}
.ahero__yr span:last-child{color:var(--paper)}
.ahero__sub{margin:clamp(40px,23.1svh,260px) 0 0 calc(18.5% + 6px);width:238px;max-width:none;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1);
  font-family:var(--sans);font-size:clamp(18px,1.85vw,32px);line-height:1.2;color:rgba(255,255,255,.7)}
.ahero__sub em{font-style:normal}
.ahero__note{margin:clamp(100px,17.7vw,255px) 0 0 calc(18.5% + 6px);width:242px;font-size:clamp(12px,.93vw,16px);line-height:1.4;color:rgba(255,255,255,.5)}
.ahero__note p{margin:0 0 1.4em}
.ahero__note p:last-child{margin-bottom:0}
.hist__of{display:none;font-style:normal;color:rgba(255,255,255,.5)}
.hist__of2{font-style:normal}
.hpop__x{display:none}
.hist__card.is-lit{color:var(--paper)}
.hist__card.is-lit .hist__role,.hist__card.is-lit .hist__cname,.hist__card.is-lit .hist__v{color:var(--paper)}
.ahero__note--r{position:absolute;left:50.6%;top:1154px;width:238px;margin:0}
@media (max-width:991px){.ahero__note--r{display:none}}
.ahero__photo{position:absolute;left:50.6%;top:37.8svh;margin:0;width:28.3vw;aspect-ratio:407/572;overflow:hidden}
/* the two hero pictures open out of their top-left corner as they travel up the screen and close again on the way back:
   JS §7c sets --op (0 at the bottom edge, 1 once the picture is 70% of the way up), the loader holds them shut */
.ahero__photo[data-reveal],.ahero__photo2[data-reveal]{opacity:1;transform:none;
  clip-path:inset(0 calc((1 - var(--op,0)) * 100%) calc((1 - var(--op,0)) * 100%) 0);
  transition:clip-path .45s cubic-bezier(.2,.7,.2,1)}
.ahero__photo[data-reveal] img,.ahero__photo2[data-reveal] img{transform:scale(calc(1 + (1 - var(--op,0)) * .15));transform-origin:0 0;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
html.is-loading .ahero__photo[data-reveal],html.is-loading .ahero__photo2[data-reveal]{clip-path:inset(0 100% 100% 0)}
html.is-loading .ahero__photo[data-reveal] img,html.is-loading .ahero__photo2[data-reveal] img{transform:scale(1.15)}
.ahero__photo img,.ahero__photo2 img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
/* the square hangs off the portrait's bottom-right corner (corner to corner) and runs to the container's edge */
.ahero__photo2{position:absolute;left:calc(50.6% + 28.3vw);top:calc(37.8svh + 39.77vw);margin:0;width:17.7vw;aspect-ratio:1;overflow:hidden}
/* vision */
.vision{padding:100px 0 90px}
.vision__in{display:grid;grid-template-columns:10.6% minmax(0,1fr);column-gap:8.36%;row-gap:0;position:relative}
.vision__label{grid-column:1;margin:0;font-size:clamp(14px,1.4vw,20px);color:rgba(255,255,255,.5)}
.vision__say{grid-column:2;margin-bottom:141px}
.vision__big{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(22px,2.546vw,40px);line-height:1.2;letter-spacing:-.01em;text-indent:39%;color:var(--paper)}
@media (min-width:768px){ .vision__say .vision__big:first-child{text-indent:39%} }   /* the reference starts the statement on column 9 (424px in) */
@media (min-width:768px){ .vision .say .vision__big{font-size:clamp(22px,2.546vw,40px)} }
.vision__rule{grid-column:2;border:0;border-top:1px solid rgba(255,255,255,.1);margin:0 0 100px}
.vision__with{grid-column:2;position:relative;padding-top:0;min-height:calc(10.2vw + 31.6vw)}
.vision__h3{margin:0;width:238px;padding:0 0 clamp(40px,4.6vw,66px);border-bottom:1px solid rgba(255,255,255,.1);
  font-family:var(--sans);font-weight:500;font-size:clamp(18px,1.85vw,32px);line-height:1.2;color:rgba(255,255,255,.7)}
.vision__small{margin:56px 0 0;width:238px;font-size:clamp(12px,.93vw,16px);line-height:1.4;color:rgba(255,255,255,.5)}
/* the badge, measured on the reference's DOM at 1440: a 417px box 520px into the column and 167px under the
   "I work with" title; three 417px dotted circles whose centres sit 40% of the box out from its centre at 0°, 120°
   and 240° (so the lower two are 34.6% out and 20% down), a 20px sector name at each circle's centre and the
   initials at the shared centre; only the dotted rings turn */
.badge{position:absolute;left:36.1vw;top:11.6vw;width:clamp(180px,28.96vw,417px);aspect-ratio:1}
.badge__o{position:absolute;left:0;top:0;width:100%;aspect-ratio:1;display:grid;place-items:center;translate:0 -40%}
.badge__o--l{translate:-34.6% 20%}
.badge__o--r{translate:34.6% 20%}
.badge__o svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 90s linear infinite}
.badge__o--l svg{animation-direction:reverse}
.badge__ring{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.5;stroke-dasharray:2 7;stroke-linecap:round}
.badge__w{position:relative;font-size:clamp(14px,1.39vw,20px);font-weight:500;color:#fff;white-space:nowrap}
.badge__c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(22px,2.78vw,40px);font-weight:500;color:var(--accent)}
/* the services title's last line flips through the sectors, as the reference's "Business / Product" */
.asvc__h .drum{display:inline-block;vertical-align:top;color:var(--paper);height:1em;perspective:82.5rem;overflow:hidden}
.asvc__h .drum__item{color:var(--paper)}
@keyframes spin{to{transform:rotate(360deg)}}
/* services: numbered rows, the orange title slides up on hover */
.asvc{position:relative;z-index:1;background:var(--ink,#0c0d10);padding:calc(11vw + 5px) 0 0}
.asvc__head{display:grid;grid-template-columns:minmax(120px,18.5%) minmax(0,1fr) auto;align-items:start;margin-bottom:52px}
.asvc__h{grid-column:2;margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(44px,9.25vw,180px);line-height:.85;letter-spacing:normal;color:rgba(255,255,255,.5);display:flex;flex-direction:column}
.asvc__h .is-white{color:var(--paper)}
.asvc__h--ph{display:none}
.asvc__label{grid-column:3;margin:0;padding-top:calc(.35em + 22px);font-size:clamp(14px,1.4vw,20px);color:rgba(255,255,255,.5)}
.asvc__list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.1)}
.asvc__item{display:grid;grid-template-columns:minmax(120px,17.2%) minmax(0,1fr) 238px;gap:0 24px;align-items:center;
  padding:53px 0;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1)}   /* reference rows: 80px title, 53px above and below, 193px pitch */
.asvc__n{font-size:clamp(14px,1.16vw,20px);color:rgba(255,255,255,.15);align-self:start;padding-top:26px}
.asvc__t{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(30px,4.63vw,90px);line-height:1.2;letter-spacing:-.02em;
  height:1.1em;overflow:hidden;position:relative}
/* the row title rolls like the drum on hover (from the recording of the reference): the grey word tips back and up
   while the orange one rises from the face below, both visible mid-turn, with the same lean */
.asvc__t{perspective:82.5rem;perspective-origin:150% 50%;height:1.2em;overflow:hidden}
.asvc__flip{display:grid;transform-style:preserve-3d;transform:translateZ(-.6em);transition:transform 1s var(--ease-io)}
.asvc__flip > span{grid-area:1/1;display:block;backface-visibility:hidden;transition:opacity 1s var(--ease-io)}
.asvc__flip > span:first-child{color:rgba(255,255,255,.5);transform:translateZ(.6em)}
.asvc__flip > span:last-child{color:var(--accent);transform:rotateX(-90deg) translateZ(.6em);opacity:0}
.asvc__item:hover .asvc__flip{transform:translateZ(-.6em) rotateX(90deg)}
.asvc__item:hover .asvc__flip > span:first-child{opacity:0}
.asvc__item:hover .asvc__flip > span:last-child{opacity:1}
.asvc__d{margin:0;padding-top:7px;font-size:clamp(12px,.93vw,16px);line-height:1.4;color:rgba(255,255,255,.5);align-self:start;
  opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .6s var(--ease-io)}   /* the reference shows the description on hover only */
.asvc__item:hover .asvc__d{opacity:1;transform:none}
/* history: the whole block pins (bottom-aligned to the screen) while the
   cards run sideways with scroll, as on the reference */
.hist{position:relative;--pinH:1200px;height:calc(var(--pinH) + 300svh);padding-top:133px}
.hist__pin{position:sticky;top:calc(100svh - var(--pinH));padding-bottom:133px}   /* reference: 133px under the ruler before the contact block, mirroring the 133px above the label */
.hist__head{position:relative;display:grid;grid-template-columns:minmax(120px,18.5%) minmax(0,1fr);column-gap:0}
.hist__label{grid-column:1;margin:0;font-size:clamp(14px,1.4vw,20px);color:rgba(255,255,255,.5)}
.hist__h{grid-column:2;margin:-2px 0 0;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(40px,9.25vw,180px);line-height:.85;letter-spacing:normal;color:rgba(255,255,255,.5);display:flex;flex-direction:column}
.hist__h > span{white-space:nowrap}
.hist__h .is-orange{color:var(--accent)}
.hist__h .is-in{margin-left:31.2%}
.hist__h .drum{display:inline-block;vertical-align:top;color:var(--paper);height:1em;perspective:82.5rem;overflow:hidden}
.hist__h .drum__item{color:var(--paper)}
.hist__aside{position:absolute;right:var(--pad);top:6px;width:235px;display:flex;flex-direction:column;gap:clamp(24px,4vw,58px)}
.hist__note{margin:0;font-size:clamp(12px,.93vw,16px);line-height:1.4;color:rgba(255,255,255,.3);max-width:none}
.hist__note--r{padding-top:26px;border-top:1px solid rgba(255,255,255,.1)}   /* the reference rules the right note off at the title's cap height */
.hist__book{position:absolute;right:0;top:calc(4 * .85 * clamp(40px,9.25vw,180px) + 72px);font-size:clamp(14px,1.16vw,20px);font-weight:500;color:var(--accent);text-decoration:underline;text-underline-offset:4px}   /* the reference's "Book a meeting!" sits bottom-right, level with the last title line */
.hist__note--l{position:absolute;left:27%;width:183px;top:calc(4 * .85 * clamp(40px,9.25vw,180px) - 11px);max-width:none}
.hist__run{position:relative;margin-top:68px}
.hist__track{display:flex;gap:0;padding:0 var(--pad) 0 calc(18.5% + 34px);will-change:transform}
.hist__card{position:relative;box-sizing:border-box;flex:0 0 clamp(240px,29.24vw,421px);width:clamp(240px,29.24vw,421px);padding:clamp(28px,2.9vw,42px) 12px clamp(60px,5.8vw,84px) clamp(60px,7.36vw,106px);   /* reference: 421px cards, copy 106px in — four to a screen */
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;min-height:454px;color:rgba(255,255,255,.3)}
.hist__card > div{width:100%}
.hist__card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(255,255,255,.06)}
.hist__card p{margin:0}
.hist__role{font-size:clamp(16px,1.4vw,24px);font-weight:500;line-height:1.3;max-width:167px}
.hist__type,.hist__loc,.hist__k{font-size:clamp(12px,.93vw,16px);color:rgba(255,255,255,.15);line-height:1.4}
.hist__type{margin-top:7px!important}
.hist__period{margin-top:21px;gap:12px}
.hist__cname{font-size:clamp(12px,.93vw,16px);font-weight:500}
.hist__period{display:grid;gap:14px}
.hist__v{font-size:clamp(14px,1.16vw,20px);font-weight:500}
/* history cards, as the reference: the card at the left anchor is lit and so is a hovered one (role, company and
   dates white, the rest at 30%); the round arrow button (60px, 16px in from the right, 83px up) appears on lit cards,
   goes orange and draws its ring on hover, and opens the role panel; each card carries the reference's ruler —
   13 ticks on a 1/14 pitch, the middle one tall — whose ticks glow white under the pointer (JS §18b) */
.hist__card{transition:color .4s var(--ease)}
/* nothing is lit until the pointer is on a card (Shaheen, 2026-09-05) */
.hist__card:hover{color:var(--paper)}
.hist__card:hover .hist__role,.hist__card:hover .hist__cname,.hist__card:hover .hist__v{color:var(--paper)}
.hist__act{position:absolute;right:16px;bottom:83px;top:auto;width:60px;height:60px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;
  color:#fff;display:grid;place-items:center;font:inherit;font-size:18px;line-height:1;cursor:pointer;opacity:0;
  transition:opacity .35s var(--ease),color .3s var(--ease)}
.hist__card:hover .hist__act{opacity:1}
.hist__act-ic{position:relative;z-index:1;transition:transform .35s var(--ease-io)}
.hist__act:hover{color:var(--accent)}
.hist__act:hover .hist__act-ic{transform:translate(2px,-2px)}
.hist__act-ring{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(255,255,255,.2);stroke-width:1;
  stroke-dasharray:186;stroke-dashoffset:186;transform:rotate(-90deg);transition:stroke-dashoffset .6s var(--ease-io)}
.hist__act:hover .hist__act-ring{stroke-dashoffset:0}
.hist__ticks{position:absolute;left:0;right:0;bottom:0;height:43px;margin:0;padding:0;list-style:none;pointer-events:none}
/* the baseline under the ticks, and a 240px soft white segment of it that follows the pointer (JS sets --gx/--on) */
.hist__ticks::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#242528}
.hist__ticks::after{content:"";position:absolute;bottom:0;height:1px;width:240px;left:calc(var(--gx,0) * 1px - 120px);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85) 50%,rgba(255,255,255,0));opacity:var(--on,0);transition:opacity .25s var(--ease)}
.hist__ticks li{position:absolute;bottom:0;width:1px;height:13px;left:calc(var(--i) * 100% / 14);background:#242528}
.hist__ticks li.is-mid{height:43px}
.hist__ticks li::after{content:"";position:absolute;inset:0;background:#fff;opacity:var(--g,0);transition:opacity .25s var(--ease)}
.hist__desc{display:none}
/* the role panel: a dimmed page, the panel on the right column at 13svh, slides up 12px as it fades in */
.hpop{position:fixed;inset:0;z-index:15;background:rgba(0,0,0,.9);opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.hpop.is-open{opacity:1;pointer-events:auto}
.hpop__in{position:absolute;bottom:50px;right:var(--pad);width:min(542px,37.6vw);max-height:calc(100svh - 113px);overflow:auto;background:var(--ink);
  padding:20px 23px 20px 33px;transform:translateY(12px);transition:transform .5s var(--ease-io)}
.hpop.is-open .hpop__in{transform:none}
.hpop__head{padding:6px 0 12px}
.hpop__title{margin:0;font-size:clamp(16px,1.39vw,20px);line-height:1.3;font-weight:500;color:#fff}
.hpop__sub{margin:4px 0 0;font-size:clamp(12px,.93vw,16px);line-height:1.4;color:rgba(255,255,255,.5)}
.hpop__line{height:1px;background:rgba(255,255,255,.1)}
.hpop__body{padding:27px 10px 27px 0}
.hpop__body p{margin:0 0 13px;font-size:clamp(12px,.93vw,16px);line-height:1.4;color:rgba(255,255,255,.5)}
.hpop__body p:last-child{margin-bottom:0}
/* a tick ruler under the cards, taller ticks at card edges */
.hist__ruler{display:none;height:22px;margin:0 var(--pad) 0 calc(18.5% + 24px);
  background:repeating-linear-gradient(to right,rgba(255,255,255,.14) 0 1px,transparent 1px 8.35px) left bottom/100% 8px no-repeat,
             repeating-linear-gradient(to right,rgba(255,255,255,.3) 0 1px,transparent 1px clamp(240px,23.2vw,360px)) left bottom/100% 22px no-repeat}
/* cta */
/* About CTA: the reference's 16-column grid (50px container, 16.67px gutters
   at 1440). Label on column 5, statements on 9–16 with a rotating second line;
   contacts on 5–6 spread over both body rows, lead on 9–11, mail on 9–14. */
.acta{padding:0 0 109px}
.acta__in{padding:0 clamp(28px,3.47vw,72px)}
.acta__head,.acta__body{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));column-gap:1.157vw}
.acta__head{margin-bottom:123px}
.acta__label{grid-column:5/8;margin:0;font-size:clamp(14px,1.39vw,20px);line-height:1.3;color:rgba(255,255,255,.5)}
.acta__st{grid-column:9/17;display:flex;flex-direction:column;gap:clamp(24px,3.59vw,52px);margin:-.045em 0}
.acta__desc,.acta__sub{margin:0;padding:.045em 0;font-family:var(--display);font-weight:400;font-size:clamp(20px,2.55vw,40px);line-height:1.1;letter-spacing:-.01em}
.acta__desc{color:rgba(255,255,255,.3)}
.acta__sub{color:rgba(255,255,255,.7)}
.acta__sub .drum{display:block;height:auto;width:max-content;max-width:100%}
.acta__sub .drum__item{color:rgba(255,255,255,.7);white-space:nowrap}
.acta__body{grid-template-rows:auto auto}
.acta__contact{grid-column:5/7;grid-row:1/3;display:flex;flex-direction:column;justify-content:space-between}
.acta__k{margin:0 0 29px;font-size:clamp(12px,.926vw,16px);line-height:1.4;font-weight:500;color:rgba(255,255,255,.5)}
.acta__links{display:flex;flex-direction:column;gap:10px}
.acta__links a{font-size:clamp(12px,.926vw,16px);line-height:1.4;font-weight:500;color:var(--accent);transition:color .3s var(--ease)}
.acta__links a:hover{color:var(--paper)}
.acta__main{grid-column:9/12;grid-row:1;margin-bottom:clamp(40px,4.34vw,63px)}
.acta__k--soft{color:rgba(255,255,255,.3);margin-bottom:16px}
.acta__lead{margin:0;font-size:clamp(16px,1.39vw,20px);line-height:1.3;color:rgba(255,255,255,.7)}
.acta__mail{grid-column:9/15;grid-row:2;display:flex;flex-direction:column;margin-bottom:0;font-family:var(--display);font-weight:400;font-size:clamp(36px,4.63vw,72px);line-height:1.2;letter-spacing:-.01em;color:rgba(255,255,255,.5);transition:color .3s var(--ease)}
.acta__mail:hover{color:var(--paper)}
.acta__mail .is-orange{color:var(--accent);font-style:normal}
@media (max-width:767px){
  /* about hero on phones: title, then the years at left beside the photo,
     the subline under the photo, the square shot overlapping at the left */
  .ahero{min-height:0;padding:calc(var(--nav-h) + 20px) 0 40px}
  .ahero__in{display:grid;grid-template-columns:32% minmax(0,1fr);column-gap:0;row-gap:0}
  .ahero__h{grid-column:1/-1;font-size:17vw;line-height:.83}
  .ahero__l2{margin-left:18.5%}
  .ahero__yr{grid-column:1;grid-row:2;position:static;flex-direction:column;font-size:15vw;line-height:1;margin-top:28px}
  .ahero__photo{grid-column:2;grid-row:2;position:static;width:100%;aspect-ratio:228/319;margin:38px 0 0}
  .ahero__sub{grid-column:2;grid-row:3;margin:40px 0 0;font-size:24px;width:auto;max-width:none;padding-bottom:20px}
  .ahero__note{grid-column:2;grid-row:4;margin:24px 0 0;width:auto}
  .ahero__l1{margin-left:0}
  .ahero__yr{top:auto}
  .ahero__photo2{grid-column:1/-1;grid-row:5;position:static;width:145px;margin:-4px 0 0 -12%}
  .vision__in,.asvc__head,.hist__head{grid-template-columns:1fr}
  .vision__in{display:flex;flex-direction:column}
  .vision .say p,.vision__big{text-indent:0;font-size:24px;line-height:1.2}
  .vision__h3{font-size:20px}
  .vision__with{max-width:none}
  .vision__label,.vision__say,.vision__rule,.vision__with,.asvc__h,.asvc__label,.hist__label,.hist__h,.hist__note{grid-column:1}
  .badge{position:relative;left:auto;top:auto;width:165px;margin:40px auto 0}
  .vision__h3,.vision__small{width:auto}
  .vision__with{min-height:0}
  /* services: number and a 24px title per 90px row, descriptions hidden */
  .asvc__h,.hist__h{font-size:15vw;line-height:.9}
  .asvc__item{grid-template-columns:60px minmax(0,1fr);gap:0;padding:0;min-height:90px;align-items:center}
  .asvc__n{padding-top:0;font-size:16px;align-self:center}
  .asvc__t{font-size:24px;line-height:1.1;height:1.1em}
  .asvc__d{display:none}
  /* history: notes indented, cards full width, swipe sideways */
  .hist__head{display:flex;flex-direction:column}
  .hist__note{font-size:16px;max-width:none;margin:24px 0 0 60px}
  .hist__note--l{margin-top:40px}
  .hist{height:auto}
  .hist__pin{position:relative;top:auto}
  .hist__note--l{position:static;max-width:none}
  .hist__aside{grid-column:1}
  .hist__book{align-self:flex-start;margin-left:60px}
  .hist__ruler,.hist__act,.hist__card::before{display:none}
  .hist__h .is-in{margin-left:0}
  .hist__track{overflow-x:auto;scroll-snap-type:x mandatory;gap:0;padding:0;transform:none!important;scrollbar-width:none}
  .hist__track::-webkit-scrollbar{display:none}
  .hist__card{flex:0 0 100%;scroll-snap-align:start;padding:30px var(--pad) 0;min-height:479px}
  /* about closing on phones: two contact columns side by side, 24px lead, 36px email */
  .acta{padding:0 0 50px}
  .acta__in{padding:0 16px}
  .acta__head,.acta__body{display:block}
  .acta__head{margin-bottom:80px}
  .acta__label{font-size:16px;line-height:1.4;margin-bottom:18px}
  .acta__st{gap:32px;margin:-2px 0}
  .acta__desc,.acta__sub{font-size:20px;line-height:1.2;padding:2px 0}
  .acta__contact{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;margin-bottom:40px}
  .acta__k{font-size:16px;margin-bottom:8px}
  .acta__links a{font-size:16px}
  .acta__main{width:75%;margin-bottom:42px}
  .acta__lead{font-size:24px;line-height:1.3}
  .acta__mail{font-size:36px;line-height:1.2;margin:0;color:var(--paper)}
  .ahero--end{display:none}
}


@media (max-width:1100px){
  .close__man{width:min(60vw,560px);left:50%}
}
@media (max-width:767px){
  .show__pin{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:20px;padding-top:calc(var(--nav-h) + 24px);align-content:start}
  .show__pin{--tw:52px}
  .show__media{margin-left:0}
  .show__name,.show__media,.show__meta,.show__nav{grid-column:1;grid-row:auto}
  .show__media{height:auto;width:100%;aspect-ratio:4/5}
  .show__meta{height:auto;gap:24px}
  .show__h{white-space:normal}
  .show__nav{justify-self:start}
  .testi__head{grid-template-columns:1fr}
  .close__in{grid-template-columns:1fr}
  .close__say{grid-column:1}
  .close__man{width:80vw;opacity:.35;left:50%}
  .close{padding-top:30svh}
  .hsvc__i{grid-template-columns:40px 1fr}
  .hsvc__d{grid-column:2}
  .intro__portrait{width:40%}
  .intro__row{flex-direction:column;gap:30px}
}

/* ---------- 24. Projects page: one screen, stepped by the wheel ---------- */
body.is-stepper{overflow:hidden;height:100svh}
/* Projects page, measured on the reference at 1440×900: 50px container, name
   at 114, description/services row at 259, picture 492×748 at col 9, a 55px
   thumb column flush right, and the bottom row (scroll / © year / 01 / 20)
   sitting on the 900px screen's last 70px. */
.plist{position:relative;height:100svh;overflow:clip;--pp:clamp(28px,3.47vw,72px);--tw:clamp(40px,3.82vw,80px)}
.plist__name{position:absolute;left:var(--pp);top:11.9svh;margin:0;font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(40px,4.63vw,90px);line-height:.85;letter-spacing:-.01em;color:var(--paper);width:28.3vw}
.plist__name.is-long{font-size:clamp(32px,3.5vw,68px)}
.plist__desc{position:absolute;left:var(--pp);top:28.8svh;width:16.5vw}
.plist__role{position:absolute;left:33%;top:12.7svh;width:14vw}
.plist__svc{position:absolute;left:33%;top:28.8svh;width:14vw}
.plist__label{margin:0 0 8px;font-size:clamp(12px,.926vw,16px);line-height:1.4;font-weight:500;color:rgba(255,255,255,.3)}
.plist__txt{display:block;margin:0;font-size:clamp(12px,.926vw,16px);line-height:1.4;color:rgba(255,255,255,.7)}
.plist__txt--list{display:flex;flex-direction:column}
.plist__media{position:absolute;left:50.5%;top:12.7svh;height:83svh;aspect-ratio:492/748;overflow:clip}
.plist__img{position:absolute;inset:0;display:block;overflow:hidden;transform:translate(101%,101%);transition:transform .95s var(--ease-io)}
.plist__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform .95s var(--ease-io)}
.plist__img.is-on,.plist__img.is-past{transform:none}
.plist__img.is-on img{transform:none}
.plist__strip{position:absolute;right:var(--pp);top:13.5svh;width:var(--tw);display:flex;flex-direction:column;gap:17px}   /* reference: 17px between the stack's items */
.plist__mini{position:relative;display:block;box-sizing:border-box;width:100%;height:0;padding:0;overflow:hidden;border:0;border-top:2px solid #303134;background:none;cursor:pointer;transition:height .8s var(--ease-io),padding .8s var(--ease-io)}   /* reference: 2px #303134 lines */
.plist__mini img{width:100%;height:calc(var(--tw) * 78 / 55);object-fit:cover;display:block;transform:translate(12%,60%) scale(1.35);transform-origin:50% 100%;transition:transform 1s var(--ease-io)}
.plist__mini.is-on{height:calc(var(--tw) * 78 / 55);padding:4px;background:#242528;overflow:hidden;border-top-color:transparent;border-top-width:0}   /* the 4px frame around the current thumb */
.plist__mini.is-on img{height:100%;transform:none}
.plist__mini:hover{border-top-color:rgba(255,255,255,.5)}
.plist__scroll,.plist__year,.plist__pg{position:absolute;margin:0;font-size:clamp(12px,.926vw,16px);line-height:1.4;color:rgba(255,255,255,.7)}
.plist__scroll{left:var(--pp);top:94.4svh;line-height:1}
.plist__year{left:33%;top:93.8svh}
.plist__pg{right:var(--pp);width:var(--tw);top:92.3svh;padding-top:15px;border-top:1px solid rgba(255,255,255,.1);font-size:clamp(13px,1.157vw,20px);line-height:.9;font-weight:500;color:rgba(255,255,255,.15);white-space:nowrap}
.plist__pg b{color:#fff;font-weight:500}
.plist__names,.plist__bar,.plist__explore{display:none}
@media (max-width:767px){
  /* the reference keeps one locked screen on phones: a strip of names, a
     progress rule, the picture, the year, the description, and the footer row */
  .plist{height:100svh}
  .plist__name,.plist__role,.plist__svc,.plist__strip,.plist__scroll{display:none}
  .plist__names{display:flex;gap:32px;position:absolute;left:var(--pad);top:81px;white-space:nowrap;
    font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:56px;line-height:47px;
    transition:transform .8s var(--ease-io);will-change:transform}
  .plist__names span{color:rgba(255,255,255,.3);transition:color .4s var(--ease)}
  .plist__names span.is-on{color:var(--paper)}
  .plist__bar{display:block;position:absolute;left:var(--pad);right:var(--pad);top:19.7svh;height:1px;background:rgba(255,255,255,.1)}
  .plist__bar i{position:absolute;left:0;top:0;height:100%;background:var(--paper);width:0;transition:width .6s var(--ease)}
  .plist__media{left:var(--pad);right:var(--pad);top:23.8svh;width:auto;height:auto;aspect-ratio:343/215}
  .plist__year{left:var(--pad);top:calc(23.8svh + 215px + 15px);font-size:14px;line-height:17px;color:rgba(255,255,255,.3)}
  .plist::after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:70px;height:1px;background:rgba(255,255,255,.1)}
  .plist__desc{left:var(--pad);right:var(--pad);top:67.9svh;width:auto}   /* reference phone: label at 551 of 812, copy 32px under it */
  .plist__desc .plist__label{margin-bottom:10px}
  .plist__label,.plist__txt{font-size:16px}
  .plist__explore{display:inline-flex;gap:8px;position:absolute;left:var(--pad);bottom:24px;font-size:16px;line-height:22px;font-weight:400;color:var(--accent)}
  .plist__pg{left:auto;right:var(--pad);width:auto;top:auto;bottom:27px;padding:0;border:0;font-size:16px;line-height:16px;color:rgba(255,255,255,.15)}
}

/* ---------- 25. Phone layout, to the reference ---------- */
.testi__ctl{display:none}
@media (max-width:767px){
  .burger{display:block}
  /* hero, measured on the reference at 375×812: everything sits in the lower
     half — greeting at 322, four 58px title lines, then the bio beside the
     award mark and the help link, 32px off the bottom */
  /* the legibility shade lives on the pinned veil (below), not on the scrolling hero block — a shade on the block ends in a hard edge across the picture once the intro is see-through */
  .hero{background:transparent}
  .stage__veil{background:linear-gradient(to top,rgba(12,13,16,.9) 0%,rgba(12,13,16,.55) 30%,rgba(12,13,16,0) 70%)}
  .hero{padding:0}
  .turn{inset:-6%}
  .loader__txt{bottom:34px}
  .loader__load{font-size:16px;line-height:22px}
  .loader__name{font-size:20px;line-height:24px}
  .loader__fly{transform-origin:60% 50%}
  .turn__bg,.turn__fg{object-fit:cover;object-position:68% 40%}
  .hero__in{display:flex;flex-direction:column;justify-content:flex-end;height:100svh;min-height:0;gap:0;padding:0 16px 32px}
  .hero__hi{font-size:16px;line-height:30px;margin:0}
  .hero__name{font-size:20px;line-height:24px;margin:0 0 9px}
  .hero__h{font-size:56px;line-height:58px;letter-spacing:-.01em;margin:0 0 40px;max-width:none;width:auto}
  .hero__l,.hero__r{grid-column:auto;padding-bottom:0}
  .hero__h > span{white-space:normal}
  .hero__scroll,.hero__svc{display:none}
  .hero__r{display:flex;flex-direction:column;gap:0}
  .hero__top{order:2;margin-top:0}
  .hero__bot{order:1;display:flex;align-items:flex-start;gap:20px;padding-bottom:0}
  .hero__marks{order:-1;margin:2px 0 0;padding:0;border:0;gap:0;flex:0 0 32px}
  .hero__marks svg:not(:first-child){display:none}
  .hero__marks svg{width:32px}
  .hero__bio{font-size:14px;line-height:1.2;color:rgba(255,255,255,.7);max-width:none;margin:0}
  .hero__help{display:flex;justify-content:space-between;margin:24px 0 0 52px;padding:0;border:0;font-size:16px;line-height:22px}
  /* intro: the hero stays pinned for 502px, then the copy arrives indented 52px,
     the orange arrow and the portrait, a rule, the wall, the credentials */
  .intro{padding-top:532px;background:transparent}
  .intro__in{display:flex;flex-direction:column;gap:0;--tile:calc((100vw - 2 * var(--pad)) / 3)}
  .intro__r{display:contents}
  .intro__tag{display:none}
  .intro__say{order:2}.intro__row{order:3}
  .intro__l{order:4;border-top:1px solid rgba(255,255,255,.1);padding-top:0;margin-top:71px}
  .awards{order:5}
  .say{margin-left:52px}
  .say p{font-size:20px;line-height:1.3}
  .intro__row{display:block;position:relative;height:343px;margin:0}
  .orb{position:absolute;left:48px;top:0;width:79px;height:79px}
  .intro__portrait{position:absolute;right:-8px;top:38px;width:229px;margin:0}
  .intro__k{font-size:20px;line-height:24px;width:auto;padding:60px 0 40px;margin:0}
  .intro__k br{display:none}
  .wall{grid-template-columns:repeat(3,var(--tile));grid-auto-rows:var(--tile)}
  .wall__c:nth-child(3n+1){grid-column:1}
  .wall__c:nth-child(3n+2){grid-column:3}
  .wall__c:nth-child(3n){grid-column:2}
  .awards{margin-top:60px;padding-bottom:120px}
  .awards__h{font-size:36px;line-height:43px;margin-bottom:60px}
  .awards__r{grid-template-columns:1fr;gap:0;padding:20px 0}
  .awards__r span{font-size:16px;line-height:22px;color:rgba(255,255,255,.15)}
  .awards__r span:first-child{font-size:20px;line-height:24px;color:#fff;margin-bottom:6px}
  .awards__r span:nth-child(2),.awards__r span:nth-child(3){font-size:16px;line-height:22px;color:rgba(255,255,255,.15)}
  .awards__r span:nth-child(2){order:-1}
  .awards__r span:last-child{text-align:left}
  .bands{height:435px}
  /* projects title: 56px lines flush left, the years line, ® at 36px */
  .ptitle{padding:0 12px 21px;margin-top:-10px}
  .ptitle__tag{position:static;font-size:16px;line-height:22px;margin:0 0 13px}
  .ptitle__h > span{font-size:56px;line-height:40px;padding:6px 0;margin-left:0!important}
  .ptitle__yr sup{font-size:36px}
  /* showcase: not pinned — counter and rule, the names strip, a 343×215 picture, the description */
  .show{height:auto}
  .show__pin{display:flex;flex-direction:column;position:relative;height:auto;min-height:0;overflow:visible;gap:0;padding:40px 16px 40px}
  .show__strip,.show__h{display:none}
  .show__name{width:100%;overflow:hidden;transform:none}
  .show__names{width:max-content}
  .show__count{font-size:16px;line-height:16px;font-weight:500;color:rgba(255,255,255,.15);margin:0 0 20px}
  .show__count b{color:#fff}
  .show__rule{width:100%;margin:0 0 20px}
  .show__names{display:flex;gap:32px;white-space:nowrap;margin:0 0 24px;font-family:var(--display);font-weight:600;font-size:42px;line-height:35px;transition:transform .6s var(--ease)}
  .show__names span{color:rgba(255,255,255,.3);transition:color .4s var(--ease)}
  .show__names span.is-on{color:#fff}
  .show__media{height:auto;width:100%;aspect-ratio:343/215;margin:0 0 24px}
  .show__meta{height:auto;gap:0}
  .show__dl{gap:0}
  .show__dl > dt:not(:last-of-type),.show__dl > dd:not(:last-of-type){display:none}
  .show__dl dt{font-size:16px;line-height:22px;font-weight:500;color:rgba(255,255,255,.3);margin:0 0 10px}
  .show__dl dd,.show__dl dd .roll{font-size:16px;line-height:22px;color:rgba(255,255,255,.7)}
  .show__all{position:absolute;top:40px;right:16px;margin:0;font-size:16px;line-height:22px}
  /* testimonials: 56px heading, a counter with a progress rule, then 303px slides */
  .testi{padding:60px 0 50px}
  .testi__head .label{position:static;font-size:16px;line-height:22px;margin-bottom:7px}
  .testi__head{margin-bottom:1px}
  .testi__h{font-size:56px;line-height:40px}
  .testi__h > span{padding:6px 0}
  .testi__h .rw,.testi__h .rw > span{padding:0;margin:0}
  .testi__h span:nth-child(1),.testi__h span:nth-child(2),.testi__h span:nth-child(3){margin-left:0}
  .testi__ctl{display:block;position:relative;height:auto;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1);font-size:16px;line-height:22px;font-weight:500;color:rgba(255,255,255,.3)}
  .testi__ctl b{color:var(--paper);font-weight:500}
  .testi__nav{display:none}
  .testi__bar{display:block;position:absolute;left:0;bottom:-1px;height:1px;background:#fff;width:33%;transition:width .5s var(--ease)}
  .testi__list{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-top:0;padding-bottom:0;margin-right:-16px;padding-right:16px}
  .testi__list::-webkit-scrollbar{display:none}
  .testi__item{flex:0 0 303px;scroll-snap-align:start;grid-template-columns:1fr;gap:10px;padding:40px 0 60px;border-top:0;border-bottom:0;opacity:.3;transition:opacity .4s var(--ease)}
  .testi__item.is-cur{opacity:1}
  .testi__img{display:block;width:56px;order:5}
  /* footer on phones: 200px down, centred lead and contact rows, the belief,
     the 64px marquee, then the man across the bottom — the reference's order */
  .close{position:relative;top:auto;min-height:0;padding-top:200px}   /* the desktop top offset belongs to the pinned footer only */
  .close__in{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0 var(--pad)}
  .close__rail{display:contents}
  .close__cta{order:1;width:100%;min-width:0;margin:0 0 40px;padding-top:0;border-top:0;text-align:center}
  .close__lead{font-size:24px;line-height:1.2;font-weight:500;max-width:300px;margin-inline:auto}
  .close__label{display:block;text-align:center;font-size:16px;line-height:22px;font-weight:500;margin:0 0 5px}
  .close__label--soft{color:rgba(29,29,29,.3)}
  .close__rail .close__label{order:2}
  .close__rail ul{order:2;display:flex;flex-wrap:wrap;justify-content:center;gap:0 12px;margin:0 0 14px}
  .close__rail ul a{display:block;padding:2px 0;font-size:16px;line-height:22px;font-weight:500}
  .close__rail ul:nth-of-type(2){margin-bottom:65px}
  .close__say{order:3;grid-column:auto;margin-left:0}
  .close__say p{font-size:24px;line-height:1.2}
  .close__say p:last-child{margin-bottom:60px}
  .close__mail{order:4;margin-top:0;padding:0;border-top:0}
  .close__mail-track{font-size:64px}
  .close__mail-track .at{color:var(--accent);font-style:normal}
  .close__man{position:relative;left:auto;top:auto;bottom:auto;transform:none;order:5;width:123.5%;height:585px;margin:120px -11.7% 0;overflow:hidden;opacity:1}
  .close__man img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
  .close__bloom{height:62svh}
  .nav .burger{border:0;background:none;box-shadow:none}
  /* no closing hero on phones */
  .clone{display:none}
}

/* ============ 26. Project detail page (project/*.html) ============
   Measured on the reference's /project/bitmex at 1440×900: the cover is
   pinned while the article slides over it 180px after the fold; the name is
   133px at the bottom-left; Role/Services sit on column 13; the article runs
   on columns 5–14 with a sticky Summary rail on 1–3 and share buttons on 16. */
.nav__back{display:inline-flex;align-items:center;gap:8px;font-size:clamp(12px,.926vw,16px);line-height:1.4;color:#858687;transition:color .3s var(--ease)}
.nav__back svg{width:14px;height:14px}
.nav__back:hover{color:var(--paper)}
.nav__back svg{transition:transform .4s var(--ease)}
.nav__back:hover svg{transform:translateX(-4px)}
.is-post{--pp:clamp(28px,3.47vw,72px);--g16:repeat(16,minmax(0,1fr))}
.post__hero{position:sticky;top:0;height:100svh;overflow:hidden;background:#0c0d10}
.post__cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post__hero-in{position:relative;height:100%;display:grid;grid-template-columns:var(--g16);grid-template-rows:1fr;column-gap:1.157vw;padding:0 var(--pp)}
.post__h{grid-column:1/12;grid-row:1;align-self:end;margin:0;padding-bottom:4.2svh;font-family:var(--display);font-weight:600;font-size:clamp(48px,9.26vw,180px);line-height:.835;letter-spacing:-.01em;text-transform:uppercase;color:#fff}
.post__desc{display:none}
.post__info{grid-column:13/16;grid-row:1;padding-top:12.7svh;display:flex;flex-direction:column;gap:clamp(40px,4.28vw,62px)}
.post__label{margin:0 0 8px;font-size:clamp(12px,.926vw,16px);line-height:1.4;font-weight:500;color:rgba(255,255,255,.3)}
.post__txt{margin:0;min-height:56px;font-size:clamp(12px,.926vw,16px);line-height:1.4;color:rgba(255,255,255,.7)}
.post__txt p{margin:0}
.post__year,.post__scroll{grid-row:1;align-self:end;margin:0;padding-bottom:4.2svh;font-size:clamp(12px,.926vw,16px);line-height:1.4;color:rgba(255,255,255,.7)}
.post__year{grid-column:13/15}
.post__scroll{grid-column:15/17;justify-self:end}
.post__main{position:relative;z-index:2;margin-top:20svh;background:#0c0d10;padding-top:clamp(60px,8.39vw,121px)}
.post__intro{display:grid;grid-template-columns:var(--g16);column-gap:1.157vw;padding:0 var(--pp) clamp(50px,6.94vw,100px)}
.post__intro-label{grid-column:1/3;margin:0;font-size:clamp(12px,.926vw,16px);line-height:1.4;color:rgba(255,255,255,.5)}
.post__intro-txt{grid-column:5/15}
.post__intro-txt p{margin:0 0 1em;font-family:var(--display);font-weight:400;font-size:clamp(22px,2.55vw,40px);line-height:1.2;letter-spacing:-.01em;color:#fff}
.post__intro-txt p:last-child{margin-bottom:0}
.post__intro-txt .w{color:rgba(255,255,255,.15);transition:color .45s var(--ease)}
.post__intro-txt .w.on{color:#fff;animation:unblur .7s var(--ease) both}
.post__content{display:grid;grid-template-columns:var(--g16);column-gap:1.157vw;padding:0 var(--pp)}
.post__toc{grid-column:1/4}
.post__toc-in{position:sticky;top:8.68vw;padding-bottom:100px}
.post__toc ul{list-style:none;margin:0;padding:0}
.post__toc li{margin:0 0 8px}
.post__toc a{font-size:clamp(12px,.926vw,16px);line-height:1.4;color:rgba(255,255,255,.5);transition:color .3s var(--ease)}
.post__toc a:hover,.post__toc a.is-on{color:var(--paper)}
.post__rich{grid-column:5/15;min-width:0;position:relative;padding:clamp(50px,6.94vw,100px) 0;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5)}
.post__rich h2{margin:4.63vw 0 1.8vw;font-family:var(--display);font-weight:700;font-size:clamp(44px,9.26vw,180px);line-height:1;letter-spacing:-.01em;color:rgba(255,255,255,.5)}
.post__rich h2:first-child{margin-top:0}
.post__rich h2,.post__rich h3{filter:blur(calc(var(--vb,0) * 1px));will-change:filter}
.post__rich h3{margin:1.85vw 0 1.27vw;font-family:var(--display);font-weight:700;font-size:clamp(30px,4.63vw,90px);line-height:1.2;letter-spacing:-.01em;color:rgba(255,255,255,.5)}
.post__rich p{margin:.93vw 0;font-size:clamp(14px,1.04vw,18px);line-height:1.4}
.post__rich ul{list-style:none;margin:.93vw 0;padding:0 0 0 12.5px}
.post__rich li{position:relative;margin:0 0 .93vw;font-size:clamp(14px,1.04vw,18px);line-height:1.4}
.post__rich li::before{content:"•";position:absolute;left:-12.5px}
.post__rich strong{font-weight:700;color:rgba(255,255,255,.7)}
.post__rich a{color:rgba(255,255,255,.7);text-decoration:underline;text-underline-offset:3px}
.post__rich a:hover{color:var(--paper)}
.post__rich img{display:block;width:100%;height:auto}
.post__rich > :last-child{margin-bottom:0}   /* reference: exactly 100px from the last picture to the next-project banner */
.post__share{grid-column:15/17;display:flex;justify-content:flex-end;padding-bottom:100px}
.post__share-in{position:sticky;top:8.68vw;align-self:start;display:flex;flex-direction:column;gap:10px}
.post__share-in a,.post__share-in button{position:relative;display:flex;align-items:center;justify-content:center;width:clamp(44px,3.7vw,60px);height:clamp(44px,3.7vw,60px);border:1px solid rgba(255,255,255,.1);border-radius:50%;background:none;padding:0;color:rgba(255,255,255,.5);cursor:pointer;transition:color .3s var(--ease),border-color .3s var(--ease)}
.post__share-in a:hover,.post__share-in button:hover{color:var(--paper);border-color:rgba(255,255,255,.4)}
.post__copied{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);font-size:13px;white-space:nowrap;opacity:0;transition:opacity .3s var(--ease)}
.is-done .post__copied{opacity:1}
.post__next{position:relative;z-index:2;display:block;height:clamp(200px,28.96vw,520px);overflow:hidden;background:#0c0d10}
.post__next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3;transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.post__next:hover img{opacity:.5;transform:scale(1.03)}
.post__next-h{position:absolute;left:var(--pp);bottom:2.62vw;margin:0;font-family:var(--display);font-weight:600;font-size:clamp(44px,9.26vw,180px);line-height:.835;letter-spacing:-.01em;text-transform:uppercase;color:#fff}
@media (max-width:767px){
  .post__hero{position:relative;height:auto;overflow:visible}
  .post__cover{position:relative;display:block;height:67svh}
  .post__hero::after{content:"";position:absolute;left:0;right:0;top:calc(67svh - 218px);height:218px;background:linear-gradient(to bottom,rgba(12,13,16,0),#0c0d10);pointer-events:none}
  .nav__back{font-size:16px}
  .post__hero-in{display:flex;flex-direction:column;height:auto;padding:0 16px}
  .post__h{position:relative;z-index:1;align-self:stretch;margin:-1.27em 0 24px;padding:0;font-size:56px;line-height:.835}
  .post__desc{display:block;margin:0 0 26px}
  .post__info{padding:0;gap:26px}
  .post__label{font-size:16px;margin-bottom:10px}
  .post__txt{font-size:16px;min-height:0}
  .post__year,.post__scroll{display:none}
  .post__main{margin-top:0;padding-top:40px}
  .post__intro{display:block;padding:40px 16px 40px}
  .post__intro-txt{margin-bottom:32px}
  .post__intro-label{font-size:14px;margin:0 0 12px}
  .post__intro-txt p{font-size:24px;line-height:1.2}
  .post__content{display:block;padding:0 16px}
  .post__toc{display:none}
  .post__rich{padding:40px 0}
  .post__rich h2{margin:40px 0 16px;font-size:24px;line-height:1.2}   /* reference phone: 40px above a section heading, 32 above a subheading */
  .post__rich h2:first-child{margin-top:0}
  .post__rich h3{margin:32px 0 16px;font-size:20px;line-height:1.2}
  .post__rich ul{margin:16px 0}
  .post__rich p:has(> img){margin:16px 0}   /* pictures follow the copy at the list's own 16px rhythm */
  .post__rich p,.post__rich li{font-size:16px;margin:16px 0}
  .post__rich li{margin:0 0 16px}
  .post__rich ul{padding-left:15px;margin:16px 0}
  .post__rich li::before{left:-15px}
  .post__share{display:block;padding:30px 0 60px}
  .post__share-in{position:static;flex-direction:row;justify-content:space-around;gap:0}
  .post__share-in a,.post__share-in button{width:60px;height:60px}
  .post__share-in svg{width:18px;height:18px}
  .post__next{height:290px}
  .post__next-h{left:16px;bottom:26px;font-size:56px}
}


/* ============ 27. About page on phones, measured on the reference at 375×812 ============ */
.asvc__daily{position:relative;display:block;height:50.7vw;margin:63px calc(-1 * var(--pad)) 0;overflow:hidden}
.asvc__daily img{display:block;width:100%;height:60.8vw;object-fit:cover;object-position:50% 50%;translate:0 calc(var(--py,0) * -10vw)}
/* the reference shades the top third of the picture into the page's ink, so the nav and the title above it sit on dark */
.asvc__daily::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(12,13,16,.96) 0%,rgba(12,13,16,.7) 12%,rgba(12,13,16,.3) 24%,rgba(12,13,16,0) 36%)}
.asvc__daily figcaption{z-index:2}
.asvc__daily figcaption{position:absolute;left:21.1%;bottom:85px;width:322px;margin:0;font-size:clamp(14px,1.39vw,20px);line-height:1.3;font-weight:500;color:#fff}
@media (max-width:767px){
  /* hero: 64px title on 58px lines, the second line indented 54px with a 36px ®,
     56px years beside a 228px photo, the subline, the note with the square
     shot hanging off the left edge */
  .ahero{padding:100px 0 60px}
  .ahero__in{grid-template-columns:120px minmax(0,1fr)}
  .ahero__h{font-size:64px;line-height:46px;margin:-6px 0 0}
  .ahero__l1,.ahero__l2{padding:6px 0}
  .ahero__l2{margin-left:54px}
  .ahero__h sup{font-size:36px;line-height:43px;color:#fff;margin-top:-2px}
  .ahero__yr{margin-top:40px;font-size:56px;line-height:56px}
  .ahero__photo{margin-top:50px;width:100%;max-width:228px}
  .ahero__sub{margin-top:40px;padding-bottom:42px;font-size:24px;line-height:29px}
  .ahero__note{margin:43px 0 0;font-size:16px;line-height:22px;color:rgba(255,255,255,.5)}
  .ahero__photo2{grid-column:1;grid-row:4;align-self:start;width:145px;margin:-4px 0 0 -47px}
  /* vision: 14px labels, the statement indented on its first line only, 60px gaps, the badge centred */
  .vision{padding-bottom:111px}
  .vision__label{font-size:14px;line-height:17px}
  .vision__say{margin:69px 0 65px}
  .vision .say p,.vision__big{text-indent:94px;font-size:24px;line-height:29px}
  .vision__rule{display:none}
  .vision__with{padding-top:64px}
  .vision__h3{padding-bottom:0;font-size:20px;line-height:24px}
  .vision__small{margin-top:1px;font-size:16px;line-height:22px;color:rgba(255,255,255,.5)}
  .badge{width:165px;margin:141px auto 0}
  .badge__w{font-size:12px}
  .badge__c{font-size:16px}
  /* services: 56px title on 52px lines with the label top-right, 90px rows, then the studio shot */
  .asvc{padding:60px 0 0}
  .asvc__head{position:relative;margin-bottom:61px}
  .asvc__h{font-size:56px;line-height:40px;margin:-32px 0 0}
  .asvc__h > span{padding:6px 0}
  .asvc__h > span:nth-child(n+3){margin-left:61px}
  .asvc__label{position:absolute;right:0;top:6px;width:auto;padding:0;font-size:16px;line-height:22px}
  .asvc__n{font-size:16px;line-height:22px}
  .asvc__daily{display:block;position:relative;height:388px;margin:60px -16px 0;overflow:hidden}
  .asvc__daily img{display:block;width:100%;height:466px;object-fit:cover}
  .asvc__daily figcaption{position:absolute;left:16px;top:173px;bottom:auto;width:250px;margin:0;font-size:16px;line-height:22px;font-weight:500;color:#fff}
  /* history: label beside an indented first line, the link and notes indented 60px,
     359px cards with the copy on the second column and a 54px button */
  .hist{padding-top:80px}
  .hist__head{position:relative;padding:0 16px}
  .hist__label{position:absolute;left:16px;top:3px;font-size:16px;line-height:22px}
  .hist__h{font-size:56px;line-height:40px;margin:-10px 0 0}
  .hist__h > span{padding:6px 0}
  .hist__h > span:first-child{margin-left:122px}
  .hist__h > span:last-child{margin-left:60px}
  .hist__aside{position:static;width:auto;display:flex;flex-direction:column-reverse;align-items:flex-start}
  .hist__book{margin:32px 0 0 60px;padding:0;font-size:16px;line-height:22px}
  .hist__note--r{margin:32px 0 24px 60px;padding-top:40px;border-top:1px solid rgba(255,255,255,.1);font-size:16px;line-height:22px;color:rgba(255,255,255,.3)}
  .hist__note--l{margin:0 0 0 60px;font-size:16px;line-height:22px;color:rgba(255,255,255,.3)}
  .hist__run{margin-top:30px}
  .hist__track{padding-right:16px}
  /* reference phone: card = 100vw - 16px, 127.8vw tall, content 21.3vw in, 26.7vw kept under it for the ruler (measured at 375 and 430) */
  .hist__card{flex:0 0 calc(100vw - 16px);display:block;position:relative;height:127.8vw;min-height:0;padding:13.3vw 0 26.7vw 21.3vw;opacity:.3;transition:opacity .4s var(--ease)}
  .hist__card.is-on{opacity:1}
  .hist__card > *{max-width:52vw}
  .hist__card > .hist__ticks{max-width:none}
  .hist__role{font-size:18px;line-height:25px}
  .hist__type,.hist__cname,.hist__loc,.hist__k,.hist__v{font-size:16px;line-height:22px}
  .hist__co{margin-top:61px}
  .hist__period{display:block;margin-top:40px}
  .hist__period > div + div{margin-top:20px}
  .hist__act{display:flex;position:absolute;right:16px;bottom:26.7vw;width:54px;height:54px;max-width:none}
  .hist__card:not(.is-on) .hist__act{width:32px;height:32px;right:27px;bottom:111px}
  /* no next-page link on phones */
  .next{display:none}
}

/* ===================================================================
   28. Tablet (768–991): the reference's tablet layout, measured at 768×1024.
   The desktop rules stay in force; only what differs is set here. 1vw = 7.68px.
   =================================================================== */
@media (min-width:768px) and (max-width:991px){
  :root{--pad:4.04vw}
  /* header: greeting stacked over the name (no swap), links on the reference's columns */
  .nav{padding:4.04vw 0 0}
  .nav__bar{padding:0 4.04vw}
  .nav__id{height:auto;overflow:visible;grid-column:1/5}
  .nav__hi,.nav__id .nav__name{position:static;transform:none!important;opacity:1!important;display:block}
  .nav__hi{font-size:1.615vw;line-height:1.4;margin-bottom:.35vw}
  .no-hero .nav__hi{display:none}   /* inner pages: the name only */
  .nav__name{font-size:2.02vw;line-height:1.2}
  .nav__flip{width:auto!important}
  .nav__set{grid-column:6/9;font-size:1.615vw;padding-left:4.4vw}
  .nav__set--pages{grid-column:10/14;padding-left:3.6vw}
  .nav__talk{grid-column:14/17;font-size:1.615vw;white-space:nowrap}
  /* hero: title 71px on 61px lines, name 37px above it; bio and services stacked bottom-right */
  .hero__in{grid-template-columns:minmax(0,1fr) 37.1vw;column-gap:0;padding-bottom:9.1vh;align-items:end}
  .hero__l{grid-column:1;padding-bottom:15.4vw}   /* the reference's left column ends 118px above the right one */
  .hero__r{grid-column:2;justify-content:flex-end}
  .hero__name{font-size:2.02vw;line-height:1.2;margin-bottom:2.4vw}
  .hero__h{font-size:9.28vw;line-height:.86;margin-left:-1vw}
  .hero__h .drum{height:.86em}   /* the drum window follows the tighter line so the next word cannot peek */
  .hero__scroll{font-size:1.615vw;margin-top:4.4vw}
  .hero__bot{order:1;padding-bottom:3.3vw}
  .hero__top{order:2;margin-top:0}
  .hero__bio{font-size:1.615vw;line-height:1.4}
  .hero__marks{display:none}
  .hero__svc{margin:0 0 1.6vw;padding:0;border:0;gap:0}
  .hero__svc li,.hero__help{font-size:1.615vw;line-height:1.4}
  /* intro: wall 232 wide on three columns, copy from 332 */
  .intro{padding-top:785px}
  .intro__l{grid-column:1/7}
  .intro__r{grid-column:8/17;padding-top:4.5vw;margin-left:-1.56vw}
  .intro__k{font-size:2.02vw;line-height:1.2;padding:0;border:0;margin:0 0 12.4vw}
  .wall{--tile:10.03vw;grid-template-columns:repeat(3,var(--tile))}
  .wall__c[style*="--c: 3"]{grid-column:3}
  .intro__tag{font-size:2.02vw;line-height:1.3}
  .intro .say p{font-size:3.63vw;line-height:1.2}
  .intro__row{margin-top:-1.3vw;align-items:flex-start}
  .orb{width:11.07vw;height:11.07vw}
  .intro__portrait{width:13.7vw;aspect-ratio:105/140;margin:18.7vw 0 0 auto}
  .awards{margin-top:9vw}
  .awards__h{font-size:2.42vw;line-height:1.2;margin-bottom:5.7vw}
  .awards__r{display:flex;flex-direction:column;gap:.2vw;padding:2.1vw 0 2.3vw;font-size:2.02vw;line-height:1.2}
  .awards__r span:nth-child(2){order:-1;text-align:left}
  .awards__r span:nth-child(2),.awards__r span:last-child{font-size:1.615vw;line-height:1.4;text-align:left}
  .awards__logo{display:none}
  .bands{height:54vw}
  /* projects title 62px, third line indented to 266 */
  .ptitle__h > span{font-size:8.07vw;line-height:.72;padding:.14em 0}
  .ptitle__h > span:nth-child(2),.ptitle__h > span:nth-child(3){margin-left:30.6vw}
  .ptitle__tag{left:auto;right:4.04vw;top:auto;font-size:1.615vw}
  /* showcase: not pinned — counter and name left, the picture right, description under it */
  .show{height:auto}
  .show__pin{position:relative;height:auto;overflow:visible;display:grid;grid-template-columns:21.5vw minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:9.8vw;row-gap:0;padding:0 4.04vw 8vw;align-content:start}
  .show__strip{display:none}
  .show__name{grid-column:1;grid-row:1;align-self:start;pointer-events:auto}
  .show__count{font-size:2.02vw;line-height:1;margin:0 0 1.5vw}
  .show__rule{width:100%;margin:0 0 3.6vw}
  .show__h{font-size:3.63vw;line-height:1.2;white-space:normal}
  .show__names{display:none}
  .show__media{grid-column:2;grid-row:1;justify-self:start;margin:0;height:auto;width:60.7vw;aspect-ratio:466/470}
  .show__meta,.show__dl{display:contents}
  .show__dl dt:nth-of-type(1){grid-column:1;grid-row:1;align-self:end;margin:0 0 3.5vw;font-size:1.615vw}
  .show__dl dd.show__yr{grid-column:1;grid-row:1;align-self:end;font-size:2.6vw;margin:0}
  .show__dl dt:nth-of-type(2),.show__dl dd:nth-of-type(2){display:none}
  .show__dl dt:nth-of-type(3){grid-column:2;grid-row:2;margin:4vw 0 1vw;font-size:1.615vw}
  .show__dl dd:last-of-type{grid-column:2;grid-row:3;font-size:1.81vw;line-height:1.3;max-width:45vw}
  .show__all{display:none}
  /* testimonials: 62px title, rows with the portrait always showing and a round toggle */
  .testi{padding:12vw 0 4vw}
  .testi__head .label{font-size:1.615vw}
  .testi__h{font-size:8.07vw;line-height:.72}
  .testi__h > span{padding:.14em 0}
  .testi__h > span:nth-child(1),.testi__h > span:nth-child(3){margin-left:23.4vw}
  .testi__h > span:nth-child(2){margin-left:23.4vw}
  .testi__item{grid-template-columns:17.7vw 30.5vw minmax(0,1fr) 4.4vw;padding:9.6vw 0;cursor:default}
  .testi__n{display:none}
  .testi__img{position:static;grid-column:1;grid-row:1;width:8.07vw;height:10.9vw;clip-path:none!important;order:-1}
  .testi__img img{transform:none!important}
  .testi__info{grid-column:2;padding-right:2vw;opacity:1!important}
  .testi__name{font-size:2.02vw;line-height:1.2}
  .testi__pos{font-size:1.615vw;line-height:1.4}
  .testi__body{display:contents}
  .testi__q{grid-column:3;grid-row:1;max-width:28.5vw;font-size:1.615vw;line-height:1.4}
  .testi__more{display:grid;place-items:center;width:4.4vw;height:4.4vw;margin:0;border:1px solid rgba(255,255,255,.15);border-radius:50%;font-size:0;color:var(--accent);justify-self:end;align-self:start;grid-column:4;grid-row:1}
  .testi__more::before{content:"+";font-size:2.4vw;line-height:1}
  .testi__item::before,.testi__list::after{transform:none}
  /* footer: rail left, statement right, the man centred behind them */
  .close{padding-top:32.2vw;min-height:128.3vw}
  .close__in{grid-template-columns:21.5vw minmax(0,1fr) 29.3vw;gap:0 4vw;padding:0 4.04vw}
  .close__label,.close__rail a,.close__rail li{font-size:1.615vw;line-height:1.4}
  .close__lead{font-size:2.42vw;line-height:1.2}
  .close__cta{width:21.5vw;min-width:0}
  .close__say p{font-size:2.42vw;line-height:1.2;font-weight:500}
  .close__man,.clone__man{left:50%;top:40.1vw;height:88.2vw;z-index:0}
  .close__mail{padding:19px 0 27px}   /* reference: 108px marquee wrap, text 19px down */
  .close__rail li,.close__rail a{line-height:20px}   /* reference rows: 12.4px on 20px lines, 100px per group */
  .close__rail ul{margin-bottom:19px}
  .close__rail ul:nth-of-type(2){margin-bottom:21px}
  .close__label--soft{margin-bottom:8px}
  .close__mail-track{font-size:8.07vw}
}

/* ---------- 29. Phone corrections from the 2026-09-04 evening pass (measured at 375×812) ---------- */
@media (max-width:767px){
  .hero__svc,.hero__help{display:none}               /* the reference hides the services block on phones */
  .hero__bot{margin-top:58px;padding-bottom:72px}    /* bio ends 104px above the fold, 99px under the title */
  .intro__portrait{width:164px;aspect-ratio:164/218;margin:98px 7px 0 auto}   /* 164×218, right-aligned, 136px under the orb */
  .bands{height:143vw}
  .testi__img{order:-1;width:70px;height:70px;margin:0 0 30px}
  .testi__n{display:none}
  .testi__q.is-short{-webkit-line-clamp:5}
  .testi__name{font-size:20px;line-height:24px}
  .testi__pos{font-size:14px;line-height:1.2}
  .testi__q{font-size:16px;line-height:22.4px}
  .close__bloom{height:191px}
  /* the picture sits a little further left and lower: cane and face in view, the face out of the top shade */
  .turn__bg,.turn__fg{object-position:78% 0%}
  .turn{translate:0 8%}   /* the cover crop has no vertical slack, so the whole picture is pushed 65px down to bring the face under the top strip */
  /* stronger shade behind the greeting, name and title — they sit over the white robe */
  .stage__veil{background:linear-gradient(to top,rgba(12,13,16,.92) 0%,rgba(12,13,16,.8) 30%,rgba(12,13,16,.5) 52%,rgba(12,13,16,0) 72%)}
  /* one mark beside the bio, a touch lower, never under the text */
  .hero__marks{flex:0 0 32px;margin-top:8px;overflow:visible}
  .hero__marks img{width:32px;height:32px}
  .hero__marks img:not(:first-child){display:none}
}

/* ---------- 30. Phone hero and intro, matched to the reference on a real phone (382×837) ---------- */
@media (max-width:767px){
  /* the copy sits lower: 24px between the title and the bio, then a hairline and "How can I help?" 47px off the bottom */
  .hero__in{padding-bottom:47px}
  .hero__bot{margin-top:24px}
  .hero__help{display:flex;margin:0}
  .hero__top{order:2;margin:33px 0 0 52px;padding-top:33px;border-top:1px solid rgba(255,255,255,.1)}
  /* the three marks take turns: each fades in, holds, fades out */
  .hero__marks{display:grid;flex:0 0 32px}
  .hero__marks img{grid-area:1/1;display:block;opacity:0;animation:markcycle 9s linear infinite}
  .hero__marks img:nth-child(2){animation-delay:3s}
  .hero__marks img:nth-child(3){animation-delay:6s}
  /* "(Intro)" sits on the first line of the copy, which is indented past it */
  .intro__tag{display:block;order:0;position:relative;z-index:1;top:auto;left:auto;margin:0 0 -26px 52px;padding:0;font-size:14px;line-height:26px;width:max-content}
  .intro .say p:first-child{text-indent:92px}
  /* each credential carries its mark at the right, as the reference does on phones */
  .awards__r{position:relative;padding-right:60px}
  .awards__r::before{content:"";position:absolute;right:0;top:50%;width:44px;height:50px;transform:translateY(-50%);background:center/contain no-repeat;opacity:.9}
  .awards__r[data-k="0"]::before{background-image:url(../img/icons/google.svg)}
  .awards__r[data-k="1"]::before{background-image:url(../img/icons/adobe.svg)}
  .awards__r[data-k="2"]::before{background-image:url(../img/icons/university.svg)}
}
@keyframes markcycle{0%{opacity:0}6%{opacity:1}30%{opacity:1}36%{opacity:0}100%{opacity:0}}
@media (min-width:768px) and (max-width:991px){
  .awards__r{position:relative;padding-right:50px}
  .awards__r::before{content:"";position:absolute;right:0;top:50%;width:35px;height:39px;transform:translateY(-50%);background:center/contain no-repeat;opacity:.9}
  .awards__r[data-k="0"]::before{background-image:url(../img/icons/google.svg)}
  .awards__r[data-k="1"]::before{background-image:url(../img/icons/adobe.svg)}
  .awards__r[data-k="2"]::before{background-image:url(../img/icons/university.svg)}
}
/* phone hero spacing taken from the reference on Shaheen's phone (383×826):
   name 25px under the greeting, title 64px on 60px lines, 40px to the bio row,
   28px to the hairline, 34px to "How can I help?", 42px to the bottom */
@media (max-width:767px){
  .hero__name{margin:0 0 1px}
  .hero__h{font-size:64px;line-height:60px;margin:0 0 40px;letter-spacing:-.02em}
  .hero__h .drum{height:60px}
  .hero__bot{margin-top:0}
  .hero__top{margin:28px 0 0 52px;padding-top:34px}
  .hero__in{padding-bottom:42px}
  .hero__marks{margin-top:-2px;flex:0 0 34px}
  .hero__marks img,.hero__marks img:not(:first-child){display:block;width:34px;height:34px}   /* all three take part in the cycle */
  .hero__bot{padding-bottom:0}                       /* no stray space under the bio: 28px to the hairline, block sits lower */
  .hero__h{font-size:min(64px,15.3vw);line-height:.94em}   /* 64px where it fits, otherwise as large as the width allows — no clipping */
  .hero__h .drum{height:.94em}
}
/* phone: no "Your logo here" tile, hero mark a touch lower, ribbons close under the credentials (reference: ~122px from the last row) */
@media (max-width:767px){
  .wall__c--you{display:none}
  .hero__marks{margin-top:6px}
  .intro{padding-bottom:30px}
  .bands__clip{align-items:start;padding-top:95px}
}
/* ribbons breathe with the scroll: they close up while moving down and drift apart while moving up */
.band--dark{translate:0 calc(var(--sv,0) * 26px)}
.band--orange{translate:0 calc(var(--sv,0) * -26px)}
/* phone: the orb lower and smaller; ribbons pinned by explicit tops so nothing is clipped,
   ~123px under the last credential (reference ~125) and the projects title ~100px after */
@media (max-width:767px){
  .orb{top:44px;width:64px;height:64px;font-size:18px}
  .intro{padding-bottom:0}
  .bands{height:240px}
  .bands__clip{padding-top:0;align-items:start}
  .band--dark{top:28px}
  .band--orange{top:38px}
}

/* phone credentials breathe like the desktop ones: spread apart until the block arrives, a little more room on the way down, less on the way up */
@media (max-width:767px){
  .awards__r{padding-top:calc(20px + var(--sv,0) * 14px + (1 - var(--rv,1)) * 34px);padding-bottom:calc(20px + var(--sv,0) * 14px + (1 - var(--rv,1)) * 34px)}
}

@media (max-width:767px){
  .show__names span{cursor:pointer;pointer-events:auto}   /* tap a name to switch project */
  .show__name{pointer-events:auto}
}

/* ---------- 31. Phone footer ending, traced frame by frame from the reference at 375×812.
   "off" is how far the footer's top has scrolled past the top of the screen (the JS sets the --k vars):
     0–430    the CTA pins at 80 and the contact rows at 200; the statement slides up over both and pins at 80
     600–750  CTA, rows and the statement's soft top edge fade out (they are under the statement by then)
     700–1350 the bloom swells to ten times its size; 780–900 the statement's paper goes clear
     1010–1300 the statement fades; 1300–1650 the screen goes black
     the figure rises a touch faster than the page and pins with its feet 105px below the bottom edge
     1290–1910 the CTA comes back, white, rising 16px; the marquee rides 3svh above the bottom edge throughout ---------- */
@media (max-width:767px){
  .close{position:relative;top:auto;overflow:clip;display:flex;flex-direction:column;min-height:calc(100svh + 513.6vw);padding:53.3vw 0 0;   /* 1926px / 200px at 375, scaled like the reference on wider phones */
    --k1:0;--k2:0;--k3:0;--k4:0;--k5:0;--k7:0;--cy:0;--ty:175}
  .close::after{content:"";position:absolute;inset:0;background:#0c0d10;opacity:var(--k3);z-index:1;pointer-events:none}
  .close__bloom{height:50.9vw;z-index:0;will-change:transform;transform-origin:50% -22.7vw;transform:scale(calc(1 + 9*var(--k2)));opacity:calc(1 - var(--k3))}   /* the reference scales its plate about a point 85px above its top: the ember band fills the screen */
  .close__in,.close__rail{display:contents}
  .close__cta{order:1;position:sticky;top:21.3vw;z-index:2;width:auto;min-width:0;margin:0 16px 10.7vw;padding:0;border:0;text-align:center;
    mix-blend-mode:normal;opacity:max(calc(1 - var(--k1)),var(--k7));translate:0 calc(var(--cy)*1px)}
  .close__cta .close__label{background:transparent;color:rgba(29,29,29,.3);transition:none;font-size:4.27vw;line-height:1.4;margin-bottom:1.3vw}
  .close__lead{color:#1d1d1d;font-size:6.4vw;line-height:1.2;font-weight:500;max-width:80vw;margin-inline:auto}
  .close.is-dark .close__cta .close__label{color:#fff}
  .close.is-dark .close__lead{color:rgba(255,255,255,.6)}
  .close__info{display:block;order:2;position:sticky;top:53.3vw;z-index:2;margin:0 16px;padding:0 0 13.3vw;background:transparent;opacity:calc(1 - var(--k1))}
  .close__info .close__label{position:static;margin:0 0 1.1vw;background:transparent;font-size:4.27vw;line-height:1.4}
  .close__info a{font-size:4.27vw;line-height:1.4}
  .close__info ul,.close__info ul:nth-of-type(2){position:static;margin:0 0 3.7vw;padding:0;background:transparent}
  .close__say{order:3;position:sticky;top:21.3vw;z-index:4;margin:0 16px 2.7vw;padding:8vw 0 13.3vw;border-top:1px solid rgba(1,3,1,.12);text-align:center;
    background:rgba(255,251,249,calc(1 - var(--k4)));opacity:calc(1 - var(--k5))}
  .close__say::before{content:"";position:absolute;left:0;right:0;top:-26.7vw;height:26.7vw;background:linear-gradient(rgba(255,251,249,0),#fffbf9);
    opacity:calc(1 - var(--k1));pointer-events:none}
  .close__say p{font-size:6.4vw;line-height:1.2;font-weight:400;margin:0;text-align:center}
  .close__mailwrap{display:flex;flex-direction:column;justify-content:flex-end;order:4;flex:1 1 auto;min-height:0;position:relative;z-index:5;margin:0}
  .close__mail{order:0;position:sticky;bottom:3svh;display:block;height:17vw;margin:0;padding:0;border:0;overflow:hidden;white-space:nowrap;background:transparent;
    color:rgb(calc(29 + 226*var(--k3)) calc(29 + 226*var(--k3)) calc(29 + 226*var(--k3)))}
  .close__mail-track{font-size:17vw;line-height:17vw;height:17vw}
  /* Shaheen wants the whole portrait on phones (the reference crops its feet 105px under the edge):
     the figure is the full 1100×1852 cutout at screen width, pinned with its bottom on the bottom edge */
  .close__man{order:5;flex:none;position:relative;z-index:3;left:auto;top:auto;bottom:auto;transform:none;width:100%;height:128vw;
    margin:-128vw 0 0;background:transparent;overflow:visible;opacity:1}   /* 128vw = the reference picture's visible height (585−105 at 375), so the head starts where theirs does */   /* overlaps the marquee wrap's last screen so the marquee can ride to the very end */
  .close__man::before{content:"";display:block;height:259.7vw}   /* the room the pinned figure is allowed to rise through */
  .close__man img{position:sticky;top:auto;bottom:0;left:auto;display:block;width:auto;height:128vw;max-height:none;margin:-259.7vw auto 0;will-change:transform;
    transform:none;object-fit:unset;translate:0 calc(var(--ty)*1px)}
}
/* the closing sequence (hero again) is desktop-only: tablets and phones in desktop mode end on the footer */
@media (max-width:991px){
  .clone{display:none}
}
/* About on phones: keep today's desktop spacing out of the phone layout (re-measured 2026-09-05 against the reference at 375×812) */
@media (max-width:767px){
  .asvc__item{margin-bottom:0}
  .hist__h{margin-top:-1px}
  .hist__run{margin-top:21px}
  .hist__type{margin-top:2px!important}
  .hist__note--r{padding-top:0;border-top:0}
  .hist__book{position:static}
  .hist__act{opacity:1;border:1px solid var(--accent);color:var(--accent);font-size:16px}
  .hist__act-ring{display:none}
  /* reference phone: the 13-tick ruler stays under every card (8.53vw tall, short ticks 4vw), no baseline and no pointer glow */
  .hist__ticks{height:8.53vw}
  .hist__ticks::before,.hist__ticks::after,.hist__ticks li::after{display:none}
  .hist__ticks li{height:4vw}
  .hist__ticks li.is-mid{height:8.53vw}
  .hpop__in{left:16px;right:16px;width:auto;bottom:24px;max-height:80svh;padding:16px}
  .hist__pin{padding-bottom:80px}   /* reference phone: 204px from the last date to the contact label */
}

/* ---------- 32. Projects page on tablets (768–991), measured on the reference at 768×1024: one name at a time
   at 49.5px in the left column with the counter under a 46px hairline, Role and Services stacked below, the
   picture 466×557 on the right from 221 down, Description under it and "Explore Project" on its baseline with © ---------- */
@media (min-width:768px) and (max-width:991px){
  .plist{--pp:4.04vw}
  .plist__name{top:8.5svh;width:29vw;font-size:6.45vw;line-height:.85}
  .plist__name.is-long{font-size:5vw}
  .plist__strip,.plist__scroll,.plist__names,.plist__bar{display:none}
  .plist__pg{left:var(--pp);right:auto;top:21.6svh;width:6vw;padding-top:15px;font-size:1.81vw;line-height:1}
  .plist__role{left:var(--pp);top:30.6svh;width:28vw}
  .plist__svc{left:var(--pp);top:40.5svh;width:28vw}
  .plist__label,.plist__txt,.plist__year,.plist__explore{font-size:1.615vw;line-height:1.4}
  .plist__media{left:35.3vw;top:21.6svh;width:60.7vw;height:auto;aspect-ratio:466/557}
  .plist__desc{left:35.3vw;top:79svh;width:60.7vw}
  .plist__explore{display:inline-flex;gap:6px;position:absolute;left:35.3vw;top:92.6svh;font-weight:400;color:var(--accent)}
  .plist__year{left:var(--pp);top:92.6svh;color:rgba(255,255,255,.7)}
}

/* ---------- 33. Project detail page on tablets (768–991), measured on the reference at 768×1024: the cover fills 72svh
   with the 71px name across its bottom edge, Role and Services side by side (31 / 327, 230 wide) at 888, a small
   (Scroll down) at the right; the article in one column from x 211 to the right edge (label column 180px), 18.6px intro,
   43px h2, 27.8px h3, 13.9px copy, pictures 12px apart, no share rail; next banner 387 tall ---------- */
@media (min-width:768px) and (max-width:991px){
  .post__hero-in{display:block;padding:0}
  .post__cover{height:72svh}
  .post__hero::after{content:"";position:absolute;left:0;right:0;top:calc(72svh - 200px);height:200px;background:linear-gradient(to bottom,rgba(12,13,16,0),#0c0d10);pointer-events:none}
  .post__h{position:absolute;left:4.04vw;right:4.04vw;top:65.8svh;padding:0;font-size:9.27vw;line-height:.835}
  .post__info{position:absolute;left:4.04vw;top:86.7svh;padding:0;flex-direction:row;gap:8.6vw}
  .post__info > *{width:30vw}
  .post__label,.post__txt{font-size:1.615vw;line-height:1.4}
  .post__label{margin-bottom:9px}
  .post__txt{min-height:0}
  .post__year{display:none}
  .post__scroll{position:absolute;right:9.5vw;top:93.1svh;padding:0;font-size:1.41vw;line-height:1.2}
  .post__main{padding-top:62px}
  .post__intro,.post__content{grid-template-columns:23.4vw minmax(0,1fr);column-gap:0;padding-left:4.04vw;padding-right:4.04vw}
  .post__intro-label,.post__toc{grid-column:1}
  .post__intro-txt,.post__rich{grid-column:2}
  .post__intro{padding-bottom:61px}
  .post__intro-label,.post__toc a{font-size:1.615vw}
  .post__intro-txt p{font-size:2.42vw;line-height:1.2}
  .post__toc li{margin-bottom:6px}
  .post__rich{padding:62px 0 100px}
  .post__rich h2{margin:37px 0 13px;font-size:5.64vw;line-height:1}
  .post__rich h2:first-child{margin-top:0}
  .post__rich h3{margin:25px 0 12px;font-size:3.62vw;line-height:1.2}
  .post__rich p,.post__rich li{font-size:1.81vw;line-height:1.44}
  .post__rich p{margin:12px 0}
  .post__rich ul{margin:12px 0;padding-left:12px}
  .post__rich li{margin:0 0 12px}
  .post__rich li::before{left:-12px}
  .post__share{display:none}
  .post__next{height:50.4vw}
  .post__next-h{left:4.04vw;bottom:7.4vw;font-size:9.27vw}
}

/* ---------- 34. About page on tablets (768–991), measured on the reference at 768×1024 (1vw = 7.68px there) ---------- */
@media (min-width:768px) and (max-width:991px){
  /* hero: 71px name on two lines (second from x 271), ® 27.8px, years stacked at 704, 15.4px subline and 12.3px note
     in the left column, portrait 345×493 at (271,339), square 120 at (617,833), second note at (271,849); 1076 tall */
  .ahero{position:relative;min-height:0;height:140vw;padding:0}
  .ahero__in{position:static;display:block}
  .ahero__h{position:absolute;left:4.04vw;top:13.4vw;margin:0;font-size:9.27vw;line-height:1.1;width:92vw}
  .ahero__l1{margin-left:0}
  .ahero__l2{margin-left:31.3vw}
  .ahero__h sup{font-size:3.62vw;top:.1em;margin-left:.15em}
  .ahero__yr{position:absolute;left:91.7vw;top:22.9vw;margin:0;font-size:3.62vw;line-height:4.3vw}
  .ahero__sub{position:absolute;left:4.04vw;top:44.1vw;width:21.5vw;margin:0;padding:0;border:0;font-size:2vw;line-height:1.2}
  .ahero__photo{position:absolute;left:35.3vw;top:44.1vw;width:44.9vw;aspect-ratio:345/493;margin:0}
  .ahero__note{position:absolute;left:4.04vw;top:74.3vw;width:22vw;margin:0;font-size:1.6vw;line-height:1.4}
  .ahero__photo2{position:absolute;left:80.3vw;top:108.5vw;width:15.6vw;margin:0}
  .ahero__note--r{display:block;position:absolute;left:35.3vw;top:110.5vw;width:26.2vw;margin:0;font-size:1.6vw;line-height:1.4}
  .ahero--end,.next{display:none}   /* the reference's tablet page ends on the contact block */
  /* vision: label at 31, 18.5px statement from 151 (586 wide) indented 39%, 95px to "I work with", no badge, no rule */
  .vision{padding:46px 0 142px}
  .vision__in{grid-template-columns:15.6vw minmax(0,1fr);column-gap:0;padding:0 4.04vw}
  .vision__label{font-size:1.6vw;line-height:1.4}
  .vision__say{margin-bottom:95px}
  .vision .say .vision__big{font-size:2.41vw;line-height:1.19}
  .vision__rule{display:none}
  .vision__with{min-height:0;padding:0}
  .vision__h3{width:21.5vw;margin:0 0 49px;padding:0;border:0;font-size:2vw;line-height:1.23}
  .vision__small{width:21.5vw;margin:0;font-size:1.6vw;line-height:1.4}
  .badge{display:none}
  /* services: 61.9px title from x 145 on 54px lines, rows 132px apart with 27.8px titles at 151, the picture block 416 tall
     with the 15.4px caption 50px above its bottom */
  .asvc{padding:88px 0 0}
  .asvc__head{grid-template-columns:14.8vw minmax(0,1fr) auto;margin-bottom:76px}
  .asvc__h{font-size:8.06vw;line-height:.87}
  .asvc__label{padding-top:0;font-size:1.6vw}
  .asvc__item{grid-template-columns:15.6vw minmax(0,1fr);gap:0;padding:49px 0;margin-bottom:0}
  .asvc__n{padding-top:0;font-size:2vw}
  .asvc__t{font-size:3.62vw;line-height:1.2;height:1.2em}
  .asvc__d{display:none}
  .asvc__daily{height:54.2vw;margin:0 calc(-1 * var(--pad)) 0}
  .asvc__daily img{height:100%;translate:none}
  .asvc__daily figcaption{left:19.7vw;bottom:50px;width:31.4vw;font-size:2vw;line-height:1.3}
  /* history: label 44px above a 61.9px title, both indented to 84–91; the two notes 241 and 170 wide; 421px cards two to a screen */
  .hist{padding-top:78px}
  .hist__head{display:block;padding:0 4.04vw 0 10.9vw}
  .hist__label{margin:0 0 27px .9vw;font-size:1.6vw}
  .hist__h{margin:0;font-size:8.06vw;line-height:.87}
  .hist__h .is-in{margin-left:31.7vw}
  .hist__aside{right:4.8vw;top:76px;width:31.4vw}
  .hist__note{font-size:1.6vw;line-height:1.4}
  .hist__note--l{left:11.8vw;top:209px;width:22.1vw}
  .hist__book{display:none}
  .hist__run{margin-top:18.5vw}
  .hist__track{padding-left:10.4vw}
  .hist__card{flex-basis:54.8vw;width:54.8vw;min-height:0;justify-content:flex-start;padding:28px 12px 84px 7.3vw}
  .hist__co{margin-top:78px}   /* reference: company 120px under the role, dates 95px under the company */
  .hist__period{margin-top:59px}
  .hist__role{max-width:27.5vw;font-size:1.81vw}
  .hist__type,.hist__loc,.hist__k,.hist__cname{font-size:1.6vw}
  .hist__v{font-size:2vw}
  /* contact block: label over the 27.8px statements from x 151, Socials at 151 and the project note / 49.5px email at 332 */
  .acta{padding:0 0 103px}
  .acta__in{padding:0 4.04vw}
  .acta__head{display:block;padding-left:15.6vw;margin-bottom:90px}
  .acta__label{margin:0 0 13px;font-size:1.6vw;line-height:1.4}
  .acta__st{gap:33px;margin:0}
  .acta__desc,.acta__sub{font-size:3.62vw;line-height:1.3;padding:0}
  .acta__body{grid-template-columns:15.6vw 23.6vw minmax(0,1fr);column-gap:0}
  .acta__contact{grid-column:2}
  .acta__main{grid-column:3;margin-bottom:58px}
  .acta__mail{grid-column:3;font-size:6.45vw;line-height:1.01}
  .acta__k,.acta__links a{font-size:1.6vw}
  .acta__k{margin-bottom:16px}
  .acta__k--soft{margin-bottom:10px}
  .acta__lead{font-size:2.41vw;line-height:1.3}
}

/* ---------- 35. About page on phones, Shaheen's round of 2026-09-05: longer bio with the fourth paragraph under it,
   the square picture drifting with the scroll, the circles growing in, accordion services, the wide photo replaced by
   its caption, the history title on the reference's phone lines, the open role lit and a cross to close its panel,
   the arrow centred, and no closing hero or next link ---------- */
@media (max-width:767px){
  .ahero__note p{margin:0 0 22px}
  .ahero__note--r{display:block;position:static;grid-column:2;grid-row:5;width:auto;margin:0;font-size:16px;line-height:22px;color:rgba(255,255,255,.5)}
  /* the reference pins the square 354px from the top (43.6% of the screen) while the bio scrolls past it, and lets it go on the way back */
  .ahero__photo2{position:sticky;top:43.6svh;left:auto;right:auto;bottom:auto;grid-column:1;grid-row:4/6;align-self:start;z-index:1;margin-top:0}   /* the desktop left offset would shove a sticky box sideways */
  /* on phones the square shows whole from the start (no corner wipe), so it is there beside the first lines of the bio */
  .ahero__photo2[data-reveal]{clip-path:none!important;transition:none}
  .ahero__photo2[data-reveal] img{transform:none!important}
  .vision__h3{padding-bottom:12px}
  .vision__small{margin-top:20px}
  .badge__o{scale:0;transform-origin:50% 50%;transition:scale .9s var(--ease-io)}
  .badge__o--l{transition-delay:.12s}
  .badge__o--r{transition-delay:.24s}
  .badge__c{opacity:0;transition:opacity .6s var(--ease) .5s}
  .badge.is-grow .badge__o{scale:1}
  .badge.is-grow .badge__c{opacity:1}
  /* services: one row open at a time, "+" to open and a dash to close, the open title in orange with its copy under it */
  .asvc__item{position:relative;grid-template-rows:auto auto;align-items:start;min-height:0;padding:33px 44px 33px 0;cursor:pointer}
  .asvc__n{align-self:start;padding-top:2px}
  .asvc__t{grid-column:2;grid-row:1}
  .asvc__item::before,.asvc__item::after{content:"";position:absolute;right:0;top:44px;background:rgba(255,255,255,.7);transition:background .3s var(--ease),transform .4s var(--ease-io)}
  .asvc__item::before{width:22px;height:1px}
  .asvc__item::after{width:1px;height:22px;right:10.5px;top:33.5px}
  .asvc__item.is-open::before{background:var(--accent)}
  .asvc__item.is-open::after{transform:scaleY(0)}
  .asvc__item.is-open .asvc__flip{transform:translateZ(-.6em) rotateX(90deg)}
  .asvc__item.is-open .asvc__flip > span:first-child{opacity:0}
  .asvc__item.is-open .asvc__flip > span:last-child{opacity:1}
  .asvc__d{display:none;grid-column:2;grid-row:2;margin:0;padding:6px 0 0;font-size:16px;line-height:22px;color:rgba(255,255,255,.5);opacity:1;transform:none;transition:none}
  .asvc__item.is-open .asvc__d{display:block}
  /* the wide photo goes; its caption stays as a plain paragraph */
  .asvc__daily{height:auto;margin:60px 0 0;overflow:visible}
  .asvc__daily::before,.asvc__daily img{display:none}
  .asvc__daily figcaption{position:static;width:auto;margin:0;font-size:20px;line-height:1.3;font-weight:500;color:#fff}
  /* history title: "I have / 8 years of / experience / in … / brands" */
  .hist__of{display:inline}
  .hist__of2{display:none}
  .hist__act{display:flex;align-items:center;justify-content:center;line-height:1}
  .hpop__x{display:block;position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;background:transparent;cursor:pointer}
  .hpop__x::before,.hpop__x::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:1px;background:#fff;transform:translate(-50%,-50%) rotate(45deg)}
  .hpop__x::after{transform:translate(-50%,-50%) rotate(-45deg)}
  .hpop__in{padding-top:44px}
  .ahero--end,.next{display:none}
  /* history cards: the reference keeps every card at full opacity and colours the current one white (role, company,
     dates), the others 30% — mine faded the whole card to 30% opacity on top of 30% text, which read as nearly black */
  .hist__card{opacity:1;color:rgba(255,255,255,.3);transition:color .4s var(--ease)}
  .hist__card.is-on{opacity:1;color:var(--paper)}
  .hist__card.is-on .hist__role,.hist__card.is-on .hist__cname,.hist__card.is-on .hist__v{color:var(--paper)}
  /* services title: "WHAT / I CAN HELP / YOUR / BRAND" with the last two lines indented 61px and the label top-right */
  .asvc__head{position:relative;display:block;margin-bottom:61px}
  .asvc__h--dt{display:none}
  .asvc__h--ph{display:block;margin:0;font-size:56px;line-height:52px}
  .asvc__h--ph > span{display:block;height:52px;padding:0;margin:0;line-height:52px}   /* reference phone: 56px on 52px lines */
  /* lines 3–4 take their 61px indent from the older `.asvc__h > span:nth-child(n+3)` rule */
  .asvc__h--ph .drum{display:inline-block;vertical-align:top;height:52px}
  .asvc__label{position:absolute;right:0;top:5px;margin:0;padding:0;font-size:16px;line-height:22px}
}
/* ---------- 36. Phones: lighter work per frame for iOS Safari (Shaheen: the picture animations and scrolling stuttered
   on an iPhone 15 Pro Max) — no blur filters, no backdrop blur on the nav strip, no transitions on scroll-driven clips ---------- */
@media (max-width:767px){
  .nav::after{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(to bottom,rgba(12,13,16,.55),rgba(12,13,16,0))}
  .turn__bg{filter:none!important}
  .post__rich h2,.post__rich h3{filter:none!important;will-change:auto}
  .ahero__photo[data-reveal],.ahero__photo2[data-reveal]{transition:none;will-change:clip-path}
  .ahero__photo[data-reveal] img{transition:none;will-change:transform}
  .close__cta,.close__info,.close__say{will-change:opacity}
}