/* ══════════════════════════════════════════════════════════════════════════
   ISHAN GUPTA — portfolio
   Palette : warm paper · deep ink · electric blue
   Type    : Mona Sans (display + ui) · Instrument Serif (wordmark)
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#F2F0E9;
  --paper-2:#E8E5DB;
  --paper-3:#DAD6C9;
  --ink:#101318;
  --ink-2:#191D25;
  --ink-3:#262B35;
  --mute:#6E717A;
  --mute-d:#9A9DA6;
  --accent:#2B4EFF;
  --accent-d:#6E8CFF;

  --fg:var(--ink);
  --bg:var(--paper);

  --ui:"Mona Sans","Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif","Times New Roman",serif;

  --ease:cubic-bezier(.19,1,.22,1);
  --ease-2:cubic-bezier(.65,0,.35,1);

  --pad:clamp(18px,4vw,64px);
  --hdr-h:clamp(62px,7vw,86px);
  --maxw:1560px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ui);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{list-style:none;margin:0;padding:0}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

.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}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ── type ───────────────────────────────────────────────────────────────── */
.display{
  font-family:var(--ui);
  font-weight:800;
  font-stretch:87.5%;
  text-transform:uppercase;
  line-height:.86;
  letter-spacing:-.018em;
  margin:0;
}
.display em{font-style:normal;color:var(--accent)}
[data-theme="dark"] .display em{color:var(--accent-d)}
.display--huge{font-size:clamp(4.2rem,17vw,17rem)}
.display--xl{font-size:clamp(2.6rem,7.4vw,7.2rem)}
.display--l{font-size:clamp(2rem,4.6vw,4.2rem)}
.display--m{font-size:clamp(1.5rem,2.6vw,2.4rem)}

.eyebrow{
  display:flex;align-items:center;gap:.7em;flex-wrap:wrap;
  font-size:clamp(10px,.72vw,11.5px);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);margin:0 0 1.4em;
}
[data-theme="dark"] .eyebrow{color:var(--mute-d)}
.eyebrow i{display:block;width:26px;height:1px;background:currentColor;opacity:.4;flex:none}

.lede{font-size:clamp(1.1rem,1.55vw,1.5rem);line-height:1.4;font-weight:500;letter-spacing:-.012em}
.link{
  display:inline-block;font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1.5px solid var(--accent);padding-bottom:2px;transition:color .3s,border-color .3s;
}
.link:hover{color:var(--accent)}

.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:clamp(11px,.78vw,12.5px);font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  padding:.85em 1.35em;border-radius:999px;border:1.5px solid transparent;
  transition:background .35s var(--ease-2),color .35s var(--ease-2),transform .35s var(--ease),border-color .35s;
  white-space:nowrap;
}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
[data-theme="dark"] .btn--accent:hover{background:var(--paper);color:var(--ink)}
.btn--lg{font-size:clamp(12px,.9vw,14px);padding:1.05em 1.7em}

/* ── grain ──────────────────────────────────────────────────────────────── */
.grain{
  position:fixed;inset:-50%;z-index:900;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change:transform;animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 16%{transform:translate(-4%,-3%)} 33%{transform:translate(3%,-4%)}
  50%{transform:translate(-3%,4%)} 66%{transform:translate(4%,3%)} 83%{transform:translate(-4%,2%)}
}

/* ── contours ───────────────────────────────────────────────────────────── */
.contours{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-repeat:no-repeat;background-size:cover;background-position:center;
}
.contours--paper{background-image:url("../assets/img/contours-ink.svg");opacity:.07}
.contours--ink{background-image:url("../assets/img/contours-paper.svg");opacity:.05}

/* ── custom cursor ──────────────────────────────────────────────────────── */
.cursor{position:fixed;top:0;left:0;z-index:950;pointer-events:none;display:none;mix-blend-mode:difference}
.cursor__ring,.cursor__dot{position:absolute;border-radius:50%;left:0;top:0}
.cursor__ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(255,255,255,.6);
  transition:width .38s var(--ease),height .38s var(--ease),margin .38s var(--ease),background .3s,border-color .3s;
}
.cursor__dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:#fff}
.cursor__label{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#000;
  opacity:0;transition:opacity .25s;white-space:nowrap;
}
.cursor.is-hot .cursor__ring{width:92px;height:92px;margin:-46px 0 0 -46px;background:#fff;border-color:transparent}
.cursor.is-hot .cursor__dot{opacity:0}
.cursor.is-hot .cursor__label{opacity:1}
@media (hover:hover) and (pointer:fine){
  .cursor{display:block}
}

/* ── loader ─────────────────────────────────────────────────────────────── */
.loader{
  position:fixed;inset:0;z-index:990;background:var(--ink);
  display:grid;place-items:center;transition:transform .9s var(--ease) .15s;
}
.loader__inner{text-align:center;color:var(--paper)}
.loader__name{
  display:block;font-family:var(--serif);font-size:clamp(2rem,5vw,3.6rem);line-height:1;
  letter-spacing:.01em;opacity:0;transform:translateY(14px);
  animation:lname .8s var(--ease) .1s forwards;
}
.loader__bar{display:block;width:min(220px,42vw);height:1.5px;background:rgba(242,240,233,.22);margin:22px auto 0;overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--accent-d);animation:lbar 1.05s var(--ease-2) .15s forwards}
@keyframes lname{to{opacity:1;transform:none}}
@keyframes lbar{to{width:100%}}
body:not(.is-loading) .loader{transform:translateY(-101%)}

/* ── curtain (nav transition) ───────────────────────────────────────────── */
.curtain{
  position:fixed;inset:0;z-index:880;background:var(--ink);pointer-events:none;
  transform:translateY(101%);
}
.curtain.is-in{animation:curtain 1.05s var(--ease) forwards}
@keyframes curtain{
  0%{transform:translateY(101%)} 42%{transform:translateY(0)}
  58%{transform:translateY(0)} 100%{transform:translateY(-101%)}
}

/* ══ HEADER ═══════════════════════════════════════════════════════════════ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:700;height:var(--hdr-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--pad);
  color:var(--ink);
  transition:color .5s var(--ease-2),transform .5s var(--ease);
  mix-blend-mode:normal;
}
.hdr[data-theme="dark"]{color:var(--paper)}
.hdr.is-hidden{transform:translateY(-105%)}
.hdr__mark{
  display:grid;font-family:var(--serif);font-size:clamp(17px,1.55vw,23px);
  line-height:.94;text-transform:uppercase;letter-spacing:.005em;
}
.hdr__mark span:last-child{padding-left:.06em}
.hdr__right{display:flex;align-items:center;gap:clamp(8px,1vw,14px)}

.menu-btn{
  width:clamp(42px,3.6vw,52px);height:clamp(32px,2.7vw,40px);
  border:1.5px solid currentColor;border-radius:10px;
  display:grid;align-content:center;justify-items:center;gap:5px;
  transition:background .35s,color .35s,border-color .35s;
}
.menu-btn span{display:block;width:17px;height:1.6px;background:currentColor;transition:transform .4s var(--ease),width .4s var(--ease),opacity .3s}
.menu-btn span:last-child{width:11px;margin-left:6px}
.menu-btn:hover span:last-child{width:17px;margin-left:0}
body.menu-open .menu-btn span:first-child{transform:translateY(3.3px) rotate(45deg)}
body.menu-open .menu-btn span:last-child{width:17px;margin-left:0;transform:translateY(-3.3px) rotate(-45deg)}
body.menu-open .hdr{color:var(--paper)}
body.menu-open .hdr__cv{opacity:0;pointer-events:none}
.hdr__cv{transition:opacity .35s}

/* ══ MENU ═════════════════════════════════════════════════════════════════ */
.menu{
  position:fixed;inset:0;z-index:690;visibility:hidden;
  color:var(--paper);
}
.menu__bg{
  position:absolute;inset:0;background:var(--ink);
  clip-path:inset(0 0 100% 0);transition:clip-path .85s var(--ease);
}
.menu__bg::after{
  content:"";position:absolute;inset:0;
  background:url("../assets/img/contours-paper.svg") center/cover no-repeat;opacity:.06;
}
body.menu-open .menu{visibility:visible}
body.menu-open .menu__bg{clip-path:inset(0 0 0 0)}

.menu__grid{
  position:relative;height:100%;
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(20px,4vw,60px);
  padding:calc(var(--hdr-h) + 2vh) var(--pad) clamp(20px,4vh,44px);
}
.menu__previews{position:relative;align-self:center;aspect-ratio:16/11;border-radius:14px;overflow:hidden;background:var(--ink-2)}
.mprev{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.06);transition:opacity .6s var(--ease),transform 1.1s var(--ease)}
.mprev img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.02)}
.mprev--cut{background:var(--paper)}
.mprev--cut img{object-fit:contain;object-position:center 82%;filter:none}
.mprev.is-on{opacity:1;transform:none}

.menu__nav{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;text-align:right;gap:clamp(18px,4vh,44px)}
.menu__list{display:grid;gap:clamp(2px,.4vh,8px);width:100%}
.menu__list a{
  position:relative;display:inline-block;
  font-weight:800;font-stretch:87.5%;text-transform:uppercase;
  font-size:clamp(2.1rem,5.6vw,5.4rem);line-height:.98;letter-spacing:-.02em;
  color:var(--paper);transition:color .4s var(--ease-2),opacity .4s;
}
.menu__list li{overflow:hidden}
body.menu-open .menu__list li a{animation:navIn .8s var(--ease) forwards}
.menu__list li:nth-child(1) a{animation-delay:.20s}
.menu__list li:nth-child(2) a{animation-delay:.26s}
.menu__list li:nth-child(3) a{animation-delay:.32s}
.menu__list li:nth-child(4) a{animation-delay:.38s}
.menu__list li:nth-child(5) a{animation-delay:.44s}
.menu__list li:nth-child(6) a{animation-delay:.50s}
.menu__list a{opacity:0;transform:translateY(102%)}
@keyframes navIn{to{opacity:1;transform:none}}
.menu__list a::after{
  content:"";position:absolute;left:0;right:0;top:52%;height:clamp(3px,.45vw,6px);
  background:var(--accent-d);transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease);
}
.menu__list a:hover::after,.menu__list a.is-current::after{transform:scaleX(1);transform-origin:left}
.menu__list:hover a:not(:hover){opacity:.42}

.menu__foot{display:grid;gap:.55rem;justify-items:end}
.menu__mail{font-size:clamp(15px,1.5vw,21px);font-weight:600;border-bottom:1.5px solid rgba(242,240,233,.3);padding-bottom:2px;transition:border-color .3s,color .3s}
.menu__mail:hover{color:var(--accent-d);border-color:var(--accent-d)}
.socials{display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,22px);justify-content:flex-end;margin-top:.5rem}
.socials a{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-d);transition:color .3s}
.socials a:hover{color:var(--paper)}

/* ══ HERO ═════════════════════════════════════════════════════════════════ */
/* The photo is shown full-frame, exactly as supplied (16:9, head near the top).
   --W/--H are its on-screen size: it covers the screen, but on a narrow phone it
   is held to a width where the whole head still fits. --L/--T place it so the
   head is centred left to right and the photo starts at the top of the screen. */
.hero{
  --Z:.9;   /* zoom: 1 = photo fills the screen, lower = pulled back */
  --W:min(calc(max(100vw, calc(100svh * 1.7905)) * var(--Z)), calc(100vw * 2.25));
  --H:calc(var(--W) / 1.7905);
  --L:calc(50vw - var(--W) * .485);
  --T:max(0px, calc((100svh - var(--H)) * .4));
  position:relative;height:100svh;min-height:560px;overflow:hidden;
  background:var(--paper);isolation:isolate;
}
.hero__photo{
  position:absolute;left:var(--L);top:var(--T);width:var(--W);height:var(--H);z-index:1;display:block;
  opacity:0;transition:opacity 1.2s var(--ease) .1s;
}
body:not(.is-loading) .hero__photo{opacity:1}
.hero__photo img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.hero::after{ /* melt the bottom edge into the next section */
  content:"";position:absolute;left:0;right:0;bottom:0;height:11svh;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(242,240,233,0),var(--paper));
}

@keyframes hintIn{to{opacity:1}}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}

.hero__scroll{
  position:absolute;right:var(--pad);bottom:clamp(20px,4vh,52px);z-index:5;
  display:grid;justify-items:center;gap:8px;
  font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
  opacity:0;animation:hintIn .8s var(--ease) 1.9s forwards;
}
.hero__scroll svg{animation:bob 2.4s var(--ease-2) infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}

/* ══ SECTIONS ═════════════════════════════════════════════════════════════ */
.sec{position:relative;padding-block:clamp(76px,11vw,168px);overflow:hidden}
.sec[data-theme="dark"]{background:var(--ink);color:var(--paper)}
.sec > .wrap{position:relative;z-index:1}
.sec__head{margin-bottom:clamp(38px,5vw,76px)}
.sec__sub{margin-top:1.4em;font-size:clamp(13px,.95vw,15px);color:var(--mute);max-width:52ch}
[data-theme="dark"] .sec__sub{color:var(--mute-d)}

/* reveal */
.line{display:block;overflow:hidden}
.line > span{display:block;transform:translateY(105%);transition:transform .95s var(--ease)}
.is-in .line > span,.reveal.is-in .line > span{transform:none}
.display .line:nth-child(2) > span{transition-delay:.08s}
.display .line:nth-child(3) > span{transition-delay:.16s}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ── particle text (js/particles.js) ─────────────────────────────────────── */
[data-ptext]{position:relative;display:block}
[data-ptext].is-live .pt-w{color:transparent}
.pt-canvas{position:absolute;pointer-events:none;z-index:1}

/* ══ ABOUT ════════════════════════════════════════════════════════════════ */
.about__title{font-size:clamp(2.2rem,4.5vw,4.7rem)}
.about__main .sec__head{margin-bottom:clamp(24px,2.6vw,40px)}
.about__grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;
  margin-bottom:clamp(52px,7vw,110px);
}
.about__text .lede{margin-bottom:1.1em;max-width:32ch;font-size:clamp(1.25rem,2vw,1.9rem);line-height:1.32}
.about__text p:not(.lede){color:var(--mute);max-width:52ch;font-size:clamp(15px,1.3vw,19px);line-height:1.6}
.about__photo{margin:0;justify-self:end;width:100%;max-width:520px;border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:var(--paper-2)}
.about__photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.about__photo:hover img{transform:scale(1.04)}

/* career in numbers: one row */
.numbers{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-block:1px solid rgba(16,19,24,.16);
  margin-bottom:clamp(64px,9vw,140px);
}
.numbers{--S:clamp(2.4rem,4.9vw,4.7rem)}
.num{display:grid;grid-template-rows:auto auto 1fr;align-content:start;gap:.55em;padding:clamp(24px,2.8vw,42px) clamp(18px,2.2vw,36px)}
.num + .num{border-left:1px solid rgba(16,19,24,.16)}
.num:first-child{padding-left:0}
.num__n{font-size:var(--S);font-weight:800;font-stretch:87.5%;line-height:.86;letter-spacing:-.035em;color:var(--accent);margin-bottom:calc(var(--S) * .2)}
.num__k{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.num__d{font-size:clamp(13px,.95vw,15px);line-height:1.5;color:var(--mute);max-width:24ch}
/* the location cell mirrors the others: value on top (same height as the numbers), label under it */
.num__place{
  display:flex;align-items:flex-end;height:calc(var(--S) * .86);margin-bottom:calc(var(--S) * .2);
  color:var(--accent);font-size:calc(var(--S) * .44);font-weight:800;font-stretch:87.5%;
  text-transform:uppercase;line-height:.95;letter-spacing:-.02em;
}
.num__pin{display:flex;align-items:center;gap:.6em;color:var(--mute)}
.num__pin::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(43,78,255,.15);animation:blip 2s ease-in-out infinite}

/* things I care about */
.care__eyebrow{margin-bottom:clamp(18px,2.4vw,34px)}
.care__list{border-top:1px solid rgba(16,19,24,.16)}
.care__item{padding:clamp(14px,1.8vw,26px) 0;border-bottom:1px solid rgba(16,19,24,.16)}
.care__text{
  font-size:clamp(1.5rem,3.2vw,3.2rem);font-weight:800;font-stretch:87.5%;font-style:normal;
  text-transform:uppercase;line-height:1;letter-spacing:-.02em;color:var(--ink);
}
.care__text em{font-style:normal;color:var(--accent)}

/* ══ WORK ═════════════════════════════════════════════════════════════════ */
.roles{border-top:1px solid rgba(242,240,233,.18)}
.role{border-bottom:1px solid rgba(242,240,233,.18)}
.role__head{
  position:relative;width:100%;display:grid;align-items:center;
  grid-template-columns:auto minmax(0,1.2fr) minmax(0,1fr) auto auto;
  gap:clamp(10px,2vw,30px);
  padding:clamp(22px,2.8vw,42px) 0;text-align:left;
}
.role__badge{
  font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  border:1.5px solid currentColor;border-radius:999px;padding:.4em .75em;opacity:.55;
}
.role--current .role__badge{background:var(--accent);border-color:var(--accent);color:#fff;opacity:1}
.role__co{
  grid-column:2;grid-row:1;justify-self:start;
  font-size:clamp(2rem,5vw,4.8rem);font-weight:800;font-stretch:87.5%;
  text-transform:uppercase;line-height:.95;letter-spacing:-.025em;color:var(--paper);
}
.role__title{grid-column:3;grid-row:1;font-size:clamp(12px,1vw,16px);font-weight:600;color:var(--mute-d);transition:opacity .4s var(--ease)}
.role__years{grid-column:4;grid-row:1;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d);white-space:nowrap;transition:opacity .4s var(--ease)}
.role__toggle{grid-column:5;grid-row:1}

/* the company one-liner: revealed when the name bursts */
.role__desc{
  grid-column:2 / 5;grid-row:1;align-self:center;z-index:2;
  max-width:46ch;font-size:clamp(15px,1.45vw,22px);font-weight:500;line-height:1.35;letter-spacing:-.01em;
  color:var(--paper);pointer-events:none;
  opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .6s var(--ease);
}
@media (hover:hover){
  .role__head.is-burst .role__desc{opacity:1;transform:none;transition-delay:.12s}
  .role__head.is-burst .role__title,
  .role__head.is-burst .role__years{opacity:0}
}

.role__toggle{position:relative;width:clamp(30px,2.6vw,40px);height:clamp(30px,2.6vw,40px);border:1.5px solid rgba(242,240,233,.3);border-radius:50%;flex:none;transition:background .4s,border-color .4s}
.role__toggle i{position:absolute;left:50%;top:50%;width:12px;height:1.6px;background:currentColor;transform:translate(-50%,-50%);transition:transform .45s var(--ease),opacity .3s}
.role__toggle i:last-child{transform:translate(-50%,-50%) rotate(90deg)}
.role.is-open .role__toggle{background:var(--accent);border-color:var(--accent)}
.role.is-open .role__toggle i:last-child{transform:translate(-50%,-50%) rotate(0);opacity:0}
.role__head:hover .role__toggle{border-color:var(--paper)}

.role__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ease)}
.role.is-open .role__panel{grid-template-rows:1fr}
.role__inner{
  overflow:hidden;min-height:0;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  column-gap:clamp(24px,4vw,80px);
  opacity:0;transition:opacity .5s var(--ease) .12s;
}
.role.is-open .role__inner{opacity:1}
.role__body{padding-bottom:clamp(28px,3.4vw,52px)}
.role__body .lede{margin-bottom:.8em;max-width:40ch}
.role__hats{color:var(--mute-d);font-size:clamp(13px,1vw,16px);margin-bottom:1.6em}
.role__side{padding-bottom:clamp(28px,3.4vw,52px)}
.role__camps .eyebrow{margin-bottom:.9em}

.ticks{display:grid;gap:.85em;margin-bottom:clamp(22px,2.6vw,38px)}
.ticks li{position:relative;padding-left:1.6em;font-size:clamp(13px,.98vw,15.5px);color:var(--mute-d);line-height:1.5}
.ticks li strong{color:var(--paper);font-weight:600}
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:2px;
  background:var(--accent);opacity:.85;
}

.tags{display:flex;flex-wrap:wrap;gap:7px}
.tags li{
  font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  border:1.4px solid rgba(242,240,233,.24);border-radius:999px;padding:.55em .9em;color:var(--mute-d);
}

/* metrics funnel (canvas drawn by js/particles.js) */
.funnel{position:relative;margin-top:.4em}
.funnel__canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.funnel__tiers{position:relative;margin-left:48%;display:grid}
.funnel__tiers li{
  display:flex;flex-direction:column;justify-content:center;gap:.3em;
  min-height:clamp(70px,6.4vw,92px);padding-left:4px;
  transition:transform .45s var(--ease);
}
.funnel__n{
  font-size:clamp(1.6rem,2.8vw,2.6rem);font-weight:800;font-stretch:87.5%;line-height:.9;letter-spacing:-.03em;
  color:var(--paper);transition:color .35s;
}
.funnel__l{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d);max-width:24ch;line-height:1.4}
.funnel__tiers li.is-active{transform:translateX(6px)}
.funnel__tiers li.is-active .funnel__n{color:var(--accent-d)}

/* campaigns: image/video slides with the story underneath */
.role__media{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3vw,48px) clamp(16px,2vw,32px);
  padding:clamp(8px,1vw,14px) 0 clamp(32px,3.6vw,56px);
}
.role__media--3{grid-template-columns:repeat(3,1fr)}
.camp{display:block}
.camp__media{
  position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--ink-2);cursor:pointer;
}
.camp__slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.03);transition:opacity 1.4s var(--ease-2),transform 2.4s var(--ease);
}
.camp__slide.is-on{opacity:1;transform:none}
.camp__slide video{width:100%;height:100%;object-fit:contain;display:block}
.camp__dots{position:absolute;left:14px;top:14px;z-index:3;display:flex;gap:5px;transition:opacity .5s var(--ease)}
.camp__dots i{width:18px;height:3px;border-radius:2px;background:rgba(255,255,255,.35)}
.camp__dots i.is-on{background:rgba(255,255,255,.95)}
.camp__play{
  position:absolute;right:14px;top:14px;z-index:3;font-size:9.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;padding:.5em .8em;border-radius:999px;background:rgba(16,19,24,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .4s;
}
.camp__media.has-video .camp__play{opacity:1}

/* the story: hidden until you hover the image */
.camp__info{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(18px,2vw,30px);
  background:linear-gradient(to top,rgba(10,12,16,.94) 0%,rgba(10,12,16,.82) 45%,rgba(10,12,16,.25) 100%);
  opacity:0;transition:opacity .6s var(--ease-2);pointer-events:none;
}
.camp__title{
  font-size:clamp(1.25rem,1.9vw,1.9rem);font-weight:800;font-stretch:87.5%;text-transform:uppercase;
  line-height:.98;letter-spacing:-.02em;margin:0 0 .55em;color:var(--paper);
  transform:translateY(14px);transition:transform .8s var(--ease);
}
.camp__desc{
  font-size:clamp(13.5px,1.02vw,16px);line-height:1.55;color:rgba(242,240,233,.82);max-width:56ch;margin:0;
  transform:translateY(18px);opacity:0;transition:transform .9s var(--ease) .06s,opacity .7s var(--ease) .06s;
}
.camp__media:hover .camp__info,.camp__media.is-info .camp__info{opacity:1}
.camp__media:hover .camp__title,.camp__media.is-info .camp__title{transform:none}
.camp__media:hover .camp__desc,.camp__media.is-info .camp__desc{transform:none;opacity:1}
.camp__media:hover .camp__dots,.camp__media.is-info .camp__dots{opacity:0}
.camp__media::after{ /* small cue that there's more on hover */
  content:"+";position:absolute;right:14px;bottom:14px;z-index:3;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:16px;font-weight:600;line-height:1;color:#fff;
  background:var(--accent);transition:opacity .4s var(--ease),transform .5s var(--ease);
}
.camp__media:hover::after,.camp__media.is-info::after{opacity:0;transform:rotate(45deg)}

/* ══ SKILLS ═══════════════════════════════════════════════════════════════ */
.sec--work{padding-bottom:clamp(24px,3vw,48px)}
.sec--skills{border-top:1px solid rgba(242,240,233,.1);padding-top:clamp(64px,7vw,110px)}
.skills{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,90px);align-items:start}
.skills__h{
  font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-d);
  margin:0 0 1.6em;padding-bottom:1em;border-bottom:1px solid rgba(242,240,233,.18);
}
.bars{display:grid;gap:clamp(12px,1.3vw,18px)}
.bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.8em 1.4em}
.bars li span{font-size:clamp(14px,1.2vw,18px);font-weight:600;letter-spacing:-.01em}
.bars li em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--mute-d)}
.bars li[data-level="2.5"] em{color:var(--accent-d)}
.bars li i{
  grid-column:1 / -1;display:block;height:2px;background:rgba(242,240,233,.16);position:relative;overflow:hidden;
}
.bars li i::after{
  content:"";position:absolute;inset:0;background:var(--accent-d);transform-origin:left;
  transform:scaleX(0);transition:transform 1.1s var(--ease);
  transition-delay:calc(var(--i,0) * 50ms);
}
.skills__col.is-in .bars li i::after{transform:scaleX(var(--w,1))}
.bars li[data-level="3"]{--w:1}
.bars li[data-level="2.5"]{--w:.86}
.bars li[data-level="2"]{--w:.72}
.bars li[data-level="1"]{--w:.44}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips__label{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-d);margin:clamp(20px,2.2vw,30px) 0 .9em}
.skills__h + .chips__label{margin-top:0}
.chips li{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:clamp(11px,.85vw,13px);font-weight:700;letter-spacing:.04em;
  border:1.4px solid rgba(242,240,233,.22);border-radius:999px;padding:.62em 1.05em;
  transition:border-color .35s,color .35s,background .35s,transform .35s var(--ease);
}
.chips li:hover{border-color:var(--accent-d);color:var(--accent-d);transform:translateY(-2px)}
.chips li img{width:15px;height:15px;object-fit:contain}
.skills__h--sp{margin-top:clamp(36px,4vw,60px)}
.ways{display:grid;border-top:1px solid rgba(242,240,233,.18)}
.ways li{display:flex;justify-content:space-between;align-items:baseline;gap:1.4em;padding:clamp(12px,1.3vw,18px) 0;border-bottom:1px solid rgba(242,240,233,.18)}
.ways li span{font-size:clamp(14px,1.2vw,18px);font-weight:600}
.ways li em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-d)}

/* ══ MORE ABOUT ME ════════════════════════════════════════════════════════ */
.more__intro{max-width:62ch;font-size:clamp(14px,1.1vw,17px)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px);align-items:start}
.card:nth-child(2){transition-delay:.1s}
.card:nth-child(3){transition-delay:.2s}
.card__media{position:relative;aspect-ratio:4/5;perspective:1600px;cursor:pointer;margin-bottom:clamp(18px,1.8vw,26px)}
.card__flip{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform 1.6s cubic-bezier(.65,0,.35,1);
}
.card__face{
  position:absolute;inset:0;border-radius:14px;overflow:hidden;background:var(--paper-2);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  box-shadow:0 22px 50px -32px rgba(16,19,24,.55);
}
.card__face--back{transform:rotateY(180deg)}
.card__face img{width:100%;height:100%;object-fit:cover;display:block}
.card__count{
  position:absolute;right:12px;bottom:12px;z-index:2;
  font-size:9.5px;font-weight:800;letter-spacing:.16em;color:#fff;
  padding:.5em .8em;border-radius:999px;background:rgba(16,19,24,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.card__title{
  font-size:clamp(1.4rem,2.2vw,2.2rem);font-weight:800;font-stretch:87.5%;text-transform:uppercase;
  line-height:.95;letter-spacing:-.02em;margin:0 0 .7em;
}
.card__body p:not(.eyebrow){font-size:clamp(13px,.98vw,15.5px);color:var(--mute);line-height:1.55}
.card__body .eyebrow{margin-bottom:1em}
.card__body .link{margin-top:.4em}

/* ══ CONTACT ══════════════════════════════════════════════════════════════ */
.sec--contact{padding-bottom:clamp(50px,6vw,90px)}
.sec--contact .display--huge{margin-bottom:clamp(34px,5vw,72px)}
.contact{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,4vw,72px);align-items:end;border-top:1px solid rgba(242,240,233,.18);padding-top:clamp(26px,3.4vw,52px)}
.contact__mail{
  display:inline-block;font-size:clamp(1.2rem,3vw,2.6rem);font-weight:700;letter-spacing:-.028em;
  border-bottom:2px solid rgba(242,240,233,.3);padding-bottom:.08em;
  transition:color .35s,border-color .35s;word-break:break-word;
}
.contact__mail:hover{color:var(--accent-d);border-color:var(--accent-d)}
.contact__mail.is-copied::after{content:" · copied";font-size:.4em;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-d);vertical-align:middle}
.contact__note{margin:1.2em 0 1.8em;font-size:clamp(12px,.9vw,14px);color:var(--mute-d)}
.contact__links{display:grid;border-top:1px solid rgba(242,240,233,.18)}
.contact__links a{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:clamp(12px,1.4vw,20px) 0;border-bottom:1px solid rgba(242,240,233,.18);transition:color .35s,padding .4s var(--ease)}
.contact__links a span{font-size:clamp(14px,1.3vw,20px);font-weight:700;letter-spacing:-.01em}
.contact__links a i{font-style:normal;opacity:.5;transition:transform .4s var(--ease),opacity .3s}
.contact__links a:hover{color:var(--accent-d);padding-left:.6em}
.contact__links a:hover i{transform:translate(3px,-3px);opacity:1}

/* ══ FOOTER ═══════════════════════════════════════════════════════════════ */
.foot{background:var(--ink);color:var(--paper);padding-block:clamp(40px,5vw,72px) clamp(22px,2.5vw,34px);overflow:hidden}
.foot__top{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(34px,5vw,70px)}
.foot__nav{display:grid;gap:.4em}
.foot__nav a{font-size:clamp(13px,1vw,15px);font-weight:600;color:var(--mute-d);transition:color .3s}
.foot__nav a:hover{color:var(--paper)}
.foot__mark{display:grid;font-family:var(--serif);font-size:clamp(30px,5vw,64px);line-height:.9;text-transform:uppercase;text-align:right;align-self:flex-start}
.foot__big{
  font-size:clamp(1.6rem,6.2vw,6rem);font-weight:800;font-stretch:87.5%;text-transform:uppercase;
  line-height:.9;letter-spacing:-.03em;margin:0 0 clamp(26px,3.4vw,52px);
}
.foot__bottom{display:flex;justify-content:space-between;gap:1.4em;flex-wrap:wrap;border-top:1px solid rgba(242,240,233,.18);padding-top:clamp(16px,1.8vw,24px)}
.foot__bottom p{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d)}
.foot__bottom a:hover{color:var(--paper)}

/* ══ RESPONSIVE ═══════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .role__inner{grid-template-columns:1fr}
  .role__side{max-width:620px}
  .role__head{grid-template-columns:auto minmax(0,1fr) auto;row-gap:6px}
  .role__co{grid-column:2;grid-row:1}
  .role__title{grid-column:2;grid-row:2;font-size:13px}
  .role__years{grid-column:2;grid-row:3}
  .role__badge{grid-column:1;grid-row:1}
  .role__toggle{grid-column:3;grid-row:1 / span 3}
  .role__desc{grid-column:2;grid-row:1 / span 3}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .menu__grid{grid-template-columns:1fr;align-content:center}
  .menu__previews{display:none}
  .menu__nav{justify-content:center}
  .about__grid{grid-template-columns:1fr}
  .about__photo{max-width:520px;max-height:none}
  .skills{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr;align-items:start}
  .role__media--3{grid-template-columns:repeat(2,1fr)}
  .numbers{grid-template-columns:repeat(2,1fr)}
  .num:nth-child(3){border-left:0;padding-left:0}
  .num:nth-child(n+3){border-top:1px solid rgba(16,19,24,.16)}
  .about__photo{justify-self:start}
}
@media (max-width:640px){
  .numbers{grid-template-columns:1fr}
  .num{padding-inline:0}
  .num + .num{border-left:0;border-top:1px solid rgba(16,19,24,.16)}
  .cards{grid-template-columns:1fr;max-width:460px}
  .funnel__tiers{margin-left:44%}
  .role__media,.role__media--3{grid-template-columns:1fr}
  .hero__scroll span{display:none}
}

/* touch: there is no hover, so show the company one-liner under the name */
@media (hover:none){
  .role__head{grid-template-columns:auto minmax(0,1fr) auto}
  .role__co{grid-column:2;grid-row:1}
  .role__desc{
    grid-column:2;grid-row:2;opacity:1;transform:none;
    font-size:14px;color:var(--mute-d);max-width:none;pointer-events:auto;
  }
  .role__title{grid-column:2;grid-row:3}
  .role__years{grid-column:2;grid-row:4}
  .role__badge{grid-column:1;grid-row:1}
  .role__toggle{grid-column:3;grid-row:1 / span 4}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal,.line > span{opacity:1 !important;transform:none !important}
  .grain{animation:none}
}

/* ── no-JS fallback ───────────────────────────────────────────────────── */
html:not(.js) .loader,
html:not(.js) .cursor,
html:not(.js) .curtain{display:none}
html:not(.js) .reveal{opacity:1;transform:none}
html:not(.js) .line > span{transform:none}
html:not(.js) .hero__photo{opacity:1}
html:not(.js) .role__panel{grid-template-rows:1fr}
html:not(.js) .role__inner{opacity:1}
html:not(.js) .bars li i::after{transform:scaleX(var(--w,1))}


/* campaign tiles that link out */
.camp__media[data-href]:not([data-href=""]){cursor:pointer}
.camp__go{
  display:inline-block;margin-top:1em;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-d);opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) .12s,transform .9s var(--ease) .12s;
}
.camp__media:hover .camp__go,.camp__media.is-info .camp__go{opacity:1;transform:none}

/* inline links inside body copy */
a.inline{border-bottom:1.5px solid var(--accent);transition:color .3s,border-color .3s}
a.inline:hover{color:var(--accent)}

/* MensXP / HYPP: two tiles on top, the scouting image full width below at its own shape */
.role__media--wide-last{grid-template-columns:repeat(2,1fr)}
.role__media--wide-last .camp:last-child{grid-column:1 / -1}
.role__media--wide-last .camp:last-child .camp__media{aspect-ratio:1944 / 809;background:#0b0e16}
.role__media--wide-last .camp:last-child .camp__slide{object-fit:cover}
@media (max-width:640px){
  .role__media--wide-last{grid-template-columns:1fr}
}


/* local time, top right */
.hdr__clock{
  font-size:12px;font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  white-space:nowrap;opacity:.75;margin-right:clamp(4px,.8vw,12px);
}
body.menu-open .hdr__clock{opacity:.6}
@media (max-width:760px){ .hdr__clock{display:none} }

/* portrait screens: the photo is shorter than the screen, so melt its cut-off shoulders into the page */
@media (max-aspect-ratio:1/1){