/* ==========================================================================
   Nihaad Shaikh — Portfolio  ·  v2 (Nov 2026 redesign)
   Orange / black / white. Bricolage Grotesque display, Manrope body.
   Static site; the only motion is the brand marquee and colour hovers.
   ========================================================================== */

:root{
  --white:#FFFFFF;
  --black:#0B0B0B;
  --orange:#FF4D00;
  --grey:#F3F1EC;          /* light panel on white */
  --grey-d:#161616;        /* dark panel on black */
  --fd:'Bricolage Grotesque','Archivo',sans-serif;
  --fb:'Manrope','Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(18px,4.5vw,64px);
  --ease:cubic-bezier(.2,.7,.2,1);
  /* legacy aliases so older inline markup keeps resolving */
  --cream:#FFFFFF; --ink:#0B0B0B; --blue:#FF4D00;
}

/* --- Section themes (legacy class names kept; colours remapped) ----------- */
.s-white,.t-cream,.s-orange,.t-orange{--bg:var(--black);--fg:var(--white);--accent:var(--orange);--line:rgba(255,255,255,.14);--panel:var(--grey-d);--muted:rgba(255,255,255,.6)}
.s-black,.t-blue {--bg:#111111;--fg:var(--white);--accent:var(--orange);--line:rgba(255,255,255,.14);--panel:#1C1C1C;--muted:rgba(255,255,255,.6)}
.s-white,.s-black,.s-orange,.t-cream,.t-blue,.t-orange{background:var(--bg);color:var(--fg)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  --bg:var(--black);--fg:var(--white);--accent:var(--orange);--line:rgba(255,255,255,.14);--panel:var(--grey-d);--muted:rgba(255,255,255,.6);
  background:var(--black);color:var(--white);
  font-family:var(--fb);font-size:16px;line-height:1.6;font-weight:500;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%}
a{color:inherit}
::selection{background:var(--orange);color:var(--white)}

/* --- Type ------------------------------------------------------------------ */
.d1,.d2,.d3,.d4,h1,h2,h3{font-family:var(--fd);font-weight:800;letter-spacing:-.03em;line-height:.92;font-variation-settings:"opsz" 96}
.d1{font-size:clamp(52px,9.5vw,152px)}
.d2{font-size:clamp(38px,6.4vw,96px)}
.d3{font-size:clamp(26px,3.6vw,52px);line-height:1}
.d4{font-size:clamp(20px,2.2vw,30px);line-height:1.08;letter-spacing:-.02em}
.lead{font-size:clamp(17px,1.6vw,22px);line-height:1.5;font-weight:500;max-width:36ch}
.body{font-size:clamp(14.5px,1.1vw,16px);line-height:1.7;color:var(--muted);max-width:60ch}
@font-face{font-family:'Shaikh Hand';src:url('/assets/fonts/shaikh-hand.woff2') format('woff2'),url('/assets/fonts/shaikh-hand.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
.label{font-family:var(--fb);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.sig{font-family:'Shaikh Hand',cursive;font-size:clamp(34px,4vw,46px);line-height:1;color:rgba(255,255,255,.92);-webkit-text-stroke:.4px currentColor;paint-order:stroke fill;margin:0 0 14px;transform:rotate(-2deg);display:inline-block}
.label.acc{color:var(--accent)}
.num{font-family:var(--fd);font-weight:800;letter-spacing:-.04em;line-height:.9;font-variation-settings:"opsz" 96}
.hl{color:var(--accent)}
.mark{background:var(--accent);color:var(--black);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* --- Layout ---------------------------------------------------------------- */
.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}
.sec{padding-top:clamp(64px,9vw,140px);padding-bottom:clamp(64px,9vw,140px)}
.sec-sm{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.hair{border-top:1px solid var(--line)}
.cols{display:grid;gap:clamp(24px,4vw,64px)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-4{grid-column:span 4}.span-8{grid-column:span 8}
@media (max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}.cols-12{grid-template-columns:1fr}.span-4,.span-5,.span-6,.span-7,.span-8{grid-column:auto}}
@media (max-width:600px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}
.tiles{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.tiles>*{background:var(--bg);padding:clamp(20px,2.4vw,32px)}
.tiles-3{grid-template-columns:repeat(3,1fr)}.tiles-4{grid-template-columns:repeat(4,1fr)}.tiles-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.tiles-3,.tiles-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tiles-2,.tiles-3,.tiles-4{grid-template-columns:1fr}}

/* --- Nav ------------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gutter);background:var(--bg);color:var(--fg);border-bottom:1px solid var(--line)}
.nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--fd);font-weight:800;font-size:17px;letter-spacing:-.02em}
.nav .brand i{display:inline-grid;place-items:center;width:30px;height:30px;background:var(--orange);color:var(--white);border-radius:6px;font-style:normal;font-size:15px}
.nav nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);font-size:13px;font-weight:700;letter-spacing:.04em}
.nav nav a{text-decoration:none;color:var(--fg);opacity:.8}
.nav nav a:hover,.nav nav a.on{opacity:1;color:var(--accent)}
.navlink{position:relative}
.navlink::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--accent);transition:width .3s ease}
.navlink:hover::after{width:100%}
header.t-cream{position:sticky;top:0;z-index:50}

/* --- Liquid glass nav (vanilla port of the "Waterline" idea) --------------------- */
.cnav{position:sticky;top:0;z-index:50;display:flex;justify-content:center;padding:12px var(--gutter);background:linear-gradient(rgba(11,11,11,.92),rgba(11,11,11,.6) 70%,rgba(11,11,11,0));pointer-events:none}
.lnav{pointer-events:auto;position:relative;display:inline-flex;align-items:center;gap:2px;padding:6px;border-radius:999px;isolation:isolate;
  background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.08),0 14px 36px -14px rgba(0,0,0,.7);user-select:none;-webkit-tap-highlight-color:transparent;max-width:100%;overflow:hidden}
.lnav .drop{position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:999px;z-index:0;pointer-events:none;will-change:transform,width;opacity:0;
  background:radial-gradient(120% 140% at 30% 0%,rgba(255,255,255,.42),rgba(255,255,255,0) 55%),rgba(255,77,0,.42);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -2px 6px rgba(255,77,0,.35),inset 0 0 0 1px rgba(255,255,255,.18),0 6px 16px -6px rgba(255,77,0,.55)}
.lnav .drop.on{opacity:1}
.lnav a{position:relative;z-index:1;display:inline-flex;align-items:center;height:40px;padding:0 15px;border-radius:999px;color:rgba(255,255,255,.66);font-size:14px;font-weight:600;letter-spacing:-.01em;text-decoration:none;transition:color .25s;white-space:nowrap}
.lnav a:hover,.lnav a[aria-current="page"]{color:#fff}
.lnav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lnav .mark-n{width:34px;height:34px;padding:0;margin:0 6px;border-radius:10px;justify-content:center;background:var(--accent);color:#fff;font-family:var(--fd);font-weight:800;font-size:17px;opacity:1}
.lnav .rip{position:absolute;z-index:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);animation:lnavRip .7s ease-out forwards}
@keyframes lnavRip{from{transform:scale(1);opacity:.9}to{transform:scale(14);opacity:0}}
@media (max-width:640px){.cnav{padding-left:12px;padding-right:12px}.lnav{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:5px}.lnav::-webkit-scrollbar{display:none}.lnav a{padding:0 10px;font-size:12px;height:36px}.lnav .mark-n{width:30px;height:30px;flex:none}}
@media (max-width:420px){.lnav .mark-n{display:none}.lnav a{padding:0 8px;font-size:11.5px}}
@media (prefers-reduced-motion:reduce){.lnav .rip{animation:none;display:none}}

/* --- Narrow centred column ------------------------------------------------- */
.col{max-width:820px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.col-wide{max-width:1100px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.h-sec{font-family:var(--fd);font-weight:800;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;text-align:center;margin:0 0 6px}
.h-sub{text-align:center;color:var(--muted);font-size:14px;margin:0 0 28px}
.avatar{width:128px;height:128px;border-radius:50%;background:var(--orange);margin:0 auto;display:grid;place-items:center;overflow:hidden;font-family:var(--fd);font-weight:800;font-size:44px;color:var(--black)}
.avatar img{width:100%;height:100%;object-fit:cover}
.row{display:grid;grid-template-columns:52px 1fr auto;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--fg)}
.row:last-child{border-bottom:1px solid var(--line)}
.row .lg{width:52px;height:52px;border-radius:50%;background:#1E1E1E;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line)}
.row .lg img{width:62%;height:62%;object-fit:contain;filter:brightness(0) invert(1)}
.row .lg span{font-family:var(--fd);font-weight:800;font-size:18px}
.row .t{font-family:var(--fd);font-weight:800;font-size:17px;letter-spacing:-.01em;line-height:1.1}
.row .s{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.4}
.row .r{text-align:right;font-size:12.5px;color:var(--muted);line-height:1.4;white-space:nowrap}
.row .r b{display:block;color:var(--accent);font-family:var(--fd);font-weight:800;font-size:22px;letter-spacing:-.02em;white-space:nowrap}
.row:hover .t{color:var(--accent)}
@media (max-width:560px){.row{grid-template-columns:44px 1fr}.row .r{grid-column:2;text-align:left;white-space:normal}.row .lg{width:44px;height:44px}}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{display:inline-block;padding:8px 14px;border-radius:999px;background:#1A1A1A;border:1px solid var(--line);font-size:13px;font-weight:600;text-decoration:none;color:var(--fg)}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chips .more{display:contents}
.chips .more[hidden]{display:none}
.chip.showall{border-style:dashed;color:var(--accent);cursor:pointer;font-family:var(--fb)}
.chip.ic{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 10px}
.chip img{width:18px;height:18px;object-fit:contain;filter:brightness(0) invert(1);opacity:.9}
.chip i{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;background:var(--accent);color:var(--black);font-style:normal;font-family:var(--fd);font-weight:800;font-size:11px}
.social{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#141414;transition:border-color .25s ease,background .25s ease}
.social a img{width:17px;height:17px;filter:brightness(0) invert(1)}
.social a:hover{border-color:var(--accent);background:var(--accent)}
.social a:hover img{filter:brightness(0)}
.reel{position:relative}
.reel .track{display:flex;gap:clamp(10px,1.4vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 0 10px;scrollbar-width:none}
.reel .track::-webkit-scrollbar{display:none}
.reel .track>figure{flex:0 0 auto;width:clamp(200px,22vw,260px);margin:0;scroll-snap-align:start}
.reel .track>figure.l{width:clamp(320px,38vw,460px)}
.reel video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:#000}
.reel figure.l video{aspect-ratio:16/9}
.reel figcaption{margin-top:7px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reel .arrows{display:flex;gap:8px;justify-content:flex-end;margin-bottom:12px}
.reel .arrows button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#141414;color:var(--fg);font-size:18px;cursor:pointer;display:grid;place-items:center;transition:background .25s ease,border-color .25s ease}
.reel .arrows button:hover{background:var(--accent);border-color:var(--accent);color:var(--black)}
.caserow .brandlogo{display:inline-flex;align-items:center;gap:12px;margin-bottom:10px}
.caserow .brandlogo img{height:22px;width:auto;max-width:120px;object-fit:contain;filter:brightness(0) invert(1);opacity:.9}
.caserow .brandlogo img.sq{height:34px}
.kpis3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.kpis3>div{background:#121212;padding:18px 16px;text-align:center}
.kpis3 .num{font-size:clamp(24px,3vw,34px)}
.kpis3 .lab{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4}
@media (max-width:560px){.kpis3{grid-template-columns:1fr}}

/* --- Buttons --------------------------------------------------------------- */
.btn,.pill{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;font-family:var(--fb);font-size:13px;font-weight:700;letter-spacing:.04em;text-decoration:none;border:1.5px solid var(--fg);color:var(--fg);background:transparent;border-radius:999px;transition:background .25s ease,color .25s ease,border-color .25s ease;white-space:nowrap;cursor:pointer}
.btn-solid,.pill-solid{background:var(--orange);border-color:var(--orange);color:var(--white)}
.btn-black{background:var(--black);border-color:var(--black);color:var(--white)}
.s-black .btn-black{background:var(--white);border-color:var(--white);color:var(--black)}
.btn-ghost{border-color:var(--line)}
.btn:hover,.pill:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-solid:hover,.pill-solid:hover{background:var(--black);border-color:var(--black);color:var(--white)}
.s-black .btn-solid:hover{background:var(--white);border-color:var(--white);color:var(--black)}
.pill-lg{padding:16px 28px;font-size:14px}
.pill-sm{padding:9px 16px;font-size:12px}
@media (max-width:640px){header .pill,.nav .pill{display:none}.nav nav{gap:14px;font-size:12px}}

/* --- Brand marquee (the one animation on the site) -------------------------- */
.marquee{overflow:hidden;padding:clamp(22px,3vw,36px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marquee-track{display:flex;width:max-content;align-items:center;gap:clamp(44px,6vw,96px);animation:marq 48s linear infinite;will-change:transform}
.marquee-track:hover{animation-play-state:paused}
.marquee img{display:block;height:clamp(22px,2.2vw,32px);width:auto;max-width:160px;object-fit:contain;filter:brightness(0) invert(1);opacity:.85}
.marquee .tx{font-family:var(--fd);font-weight:800;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.02em;white-space:nowrap;opacity:.92}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- Stats ----------------------------------------------------------------- */
.stat .num{font-size:clamp(40px,5.4vw,84px)}
.stat .num.sm{font-size:clamp(30px,3.8vw,56px)}
.stat .lab{margin-top:10px;font-size:13px;line-height:1.5;color:var(--muted);max-width:28ch}

/* --- Case cards ------------------------------------------------------------ */
.case{display:block;text-decoration:none;color:var(--fg)}
.case .im{position:relative;overflow:hidden;background:var(--panel);aspect-ratio:4/3;border:1px solid var(--line)}
.case .im img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.case:hover .im img{transform:scale(1.03)}
.case .tag{position:absolute;top:12px;left:12px;background:var(--orange);color:var(--white);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px}
.case .ttl{margin-top:14px;font-family:var(--fd);font-weight:800;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em;line-height:1.05}
.case .sub{margin-top:5px;font-size:13px;color:var(--muted);line-height:1.5}
.case .kpi{margin-top:12px;font-family:var(--fd);font-weight:800;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.03em;line-height:1;color:var(--accent)}
.flag{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(28px,4vw,56px) 0;border-top:1px solid var(--line);text-decoration:none;color:var(--fg)}
.flag:last-child{border-bottom:1px solid var(--line)}
.flag .im{overflow:hidden;background:var(--panel);aspect-ratio:16/10;border:1px solid var(--line)}
.flag .im img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.flag:hover .im img{transform:scale(1.03)}
.flag .kpis{display:flex;gap:clamp(20px,3vw,40px);flex-wrap:wrap;margin-top:22px}
.flag .kpis .num{font-size:clamp(30px,3.6vw,54px);color:var(--accent)}
.flag .kpis .lab{font-size:12px;color:var(--muted);margin-top:6px;max-width:16ch;line-height:1.4}
@media (max-width:820px){.flag{grid-template-columns:1fr}}

/* --- Photo grids (legacy home grids + case pages) ---------------------------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px)}
@media (max-width:900px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.pgrid{grid-template-columns:repeat(2,1fr)}}
.ptile{display:block;text-decoration:none;color:var(--fg)}
.ptile .im{overflow:hidden;aspect-ratio:4/3;background:#fff;border:1px solid var(--line)}
.case .im,.flag .im{background:#fff}
.ptile img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .25s ease}
.ptile:hover img{opacity:.85}
.ptile .cap{margin-top:7px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.phead{font-family:var(--fd);font-weight:800;font-size:clamp(34px,6vw,84px);line-height:.92;letter-spacing:-.03em;margin:0 0 clamp(18px,2.5vw,32px)}

/* --- Video grids (case pages) ----------------------------------------------- */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px)}
.vgrid.port{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.vgrid,.vgrid.port{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.vgrid.port{grid-template-columns:repeat(2,1fr)}.vgrid{grid-template-columns:1fr}}
.vtile{margin:0}
.vtile video{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:#000}
.vtile.l video{aspect-ratio:16/9;object-fit:cover}
.vtile.p video{aspect-ratio:9/16;object-fit:cover}
.vgrid .vtile.l{grid-column:1/-1;order:99}
.vgrid .vtile.l video{aspect-ratio:16/9;max-height:620px;width:100%}
.vtile figcaption{margin-top:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* --- Portrait: formal by default, informal on hover, with a glitch cut --------- */
.portrait{position:relative;overflow:hidden;background:#111;display:block;outline:none}
.portrait.round{border-radius:50%;width:168px;height:168px;margin:0 auto}
.portrait.card{border-radius:18px;aspect-ratio:4/5;width:100%}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;filter:grayscale(1) contrast(1.12)}
.portrait .b,.portrait .g{opacity:0}
.portrait .a{transition:opacity .18s ease}
.portrait:hover .a,.portrait:focus-visible .a,.portrait.on .a{opacity:0}
.portrait:hover .b,.portrait:focus-visible .b,.portrait.on .b{opacity:1;animation:glitchcut .55s steps(1,end) 1}
.portrait:hover .g1,.portrait:focus-visible .g1,.portrait.on .g1{animation:glitchr .5s ease-out 1}
.portrait:hover .g2,.portrait:focus-visible .g2,.portrait.on .g2{animation:glitchc .5s ease-out 1}
.portrait .g{mix-blend-mode:screen}
.portrait .g1{filter:grayscale(1) sepia(1) saturate(9) hue-rotate(-40deg) contrast(1.1)}
.portrait .g2{filter:grayscale(1) sepia(1) saturate(9) hue-rotate(140deg) contrast(1.1)}
@keyframes glitchcut{0%{clip-path:inset(0 0 82% 0);transform:translateX(-7px)}15%{clip-path:inset(38% 0 32% 0);transform:translateX(7px)}30%{clip-path:inset(66% 0 8% 0);transform:translateX(-5px)}45%{clip-path:inset(12% 0 58% 0);transform:translateX(5px)}60%{clip-path:inset(52% 0 22% 0);transform:translateX(-3px)}75%{clip-path:inset(0 0 40% 0);transform:translateX(2px)}100%{clip-path:inset(0);transform:none}}
@keyframes glitchr{0%{opacity:.9;transform:translate(-9px,3px)}40%{opacity:.7;transform:translate(7px,-2px)}70%{opacity:.5;transform:translate(-4px,1px)}100%{opacity:0;transform:none}}
@keyframes glitchc{0%{opacity:.9;transform:translate(9px,-3px)}40%{opacity:.7;transform:translate(-7px,2px)}70%{opacity:.5;transform:translate(4px,-1px)}100%{opacity:0;transform:none}}
.portrait .hint{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:700;pointer-events:none}
@media (prefers-reduced-motion:reduce){.portrait .b,.portrait .g{animation:none !important}.portrait .g{display:none}}

/* --- Floating screenshot strip (Shaikhout) ----------------------------------- */
.floatstrip{overflow:hidden;padding:18px 0 22px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.floatstrip .ft{display:flex;gap:clamp(14px,1.8vw,24px);width:max-content;animation:marq 60s linear infinite;will-change:transform}
.floatstrip:hover .ft{animation-play-state:paused}
.floatstrip img{display:block;width:clamp(200px,22vw,280px);height:auto;border-radius:18px;border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.45);transition:transform .35s ease,border-color .35s ease}
.floatstrip img:nth-child(odd){transform:translateY(10px)}
.floatstrip img:nth-child(even){transform:translateY(-10px)}
.floatstrip img:hover{transform:translateY(0) scale(1.04);border-color:var(--accent)}
.profilecard{display:block;max-width:560px;margin:0 auto;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.45);transition:border-color .3s ease}
.profilecard:hover{border-color:var(--accent)}
.profilecard img{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:reduce){.floatstrip .ft{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.floatstrip img{transform:none !important}}

/* --- Identity list ---------------------------------------------------------- */
.idlist{list-style:none;margin:0;padding:0;font-family:var(--fd);font-weight:800;letter-spacing:-.02em;font-size:clamp(18px,2.1vw,30px);line-height:1.12}
.idlist li{padding:8px 0;border-top:1px solid var(--line)}
.idlist li:first-child{border-top:0}

/* --- Media / image placeholders ---------------------------------------------- */
.img-slot{display:flex;align-items:center;justify-content:center;text-align:center;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 10px,transparent 10px 20px),var(--panel);color:var(--muted);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:12px;font-weight:700}
.workcard h3{transition:color .25s ease}
.workcard:hover h3{color:var(--accent)}
.caserow{transition:background .3s ease}
.caserow:hover{background:var(--panel)}

/* --- Section markers (legacy): plain label + hairline --------------------------- */
.smark{display:flex;align-items:center;gap:10px;font-family:var(--fb);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:11.5px;color:var(--muted)}
.smark::after{content:"";flex:1;height:1px;background:var(--line);margin-left:8px}
.badge{display:grid;place-items:center;border-radius:50%;background:var(--orange);color:var(--white);font-family:var(--fd);font-weight:800;text-transform:uppercase;text-align:center;letter-spacing:.02em;line-height:1.05}
.logotile{display:flex;align-items:center;justify-content:center;height:clamp(84px,9vw,120px);padding:0 18px;background:var(--bg);font-family:var(--fd);font-weight:800;font-size:clamp(15px,1.5vw,20px);letter-spacing:-.01em;text-align:center;color:var(--fg)}
.logotile img{display:block;width:auto;height:auto;max-width:62%;max-height:42%;filter:brightness(0) invert(1);opacity:.85}
.logotile img.sq{max-height:62%}
.logogrid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){.logogrid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.logogrid{grid-template-columns:repeat(3,1fr)}}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:820px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid3{grid-template-columns:1fr}}

/* --- Forms ----------------------------------------------------------------- */
input,textarea,button{font-family:var(--fb)}
.field{background:transparent;border:none;border-bottom:1.5px solid var(--line);color:var(--fg);padding:13px 2px;font-size:15px;outline:none;width:100%;transition:border-color .3s ease;font-weight:500}
.field:focus{border-color:var(--accent)}
.field::placeholder{color:var(--muted)}
.form-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.form-err{font-size:13px;line-height:1.6;color:var(--accent);font-weight:700;margin:0}
.form-err a{color:inherit}

/* --- Blog post body --------------------------------------------------------- */
.post-body h2{font-family:var(--fd);font-weight:800;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.02em;line-height:1.05;margin:40px 0 14px}
.post-body p{margin:0 0 18px}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:22px}
.post-body li{margin:0 0 10px}
.post-body strong{font-weight:700}
.post-body a{color:var(--accent)}

/* --- Legacy no-op hooks (older subpages still carry them) ----------------------- */
@keyframes fadeUp{from,to{opacity:1;transform:none}}
@keyframes lineUp{from,to{transform:none}}
@keyframes blink{from,to{opacity:1}}
.reveal,.reveal.in{opacity:1;transform:none;transition:none}
[data-clip],[data-clip].revealed{clip-path:none}
[data-parallax]{transform:none}
.pop,.pop.in{opacity:1;transform:none;transition:none}
#scrollbar,.nav-clock,.ast-s,.astdiv,.nav-plus,#cursor{display:none}
.bubble{display:inline-block;padding:16px 20px;border-radius:20px;font-size:13.5px;line-height:1.6;background:var(--panel)}

/* --- Small screens ---------------------------------------------------------- */
@media (max-width:640px){
  header>a>span:last-child{display:none}
  header nav{gap:16px !important;font-size:11px !important;letter-spacing:.08em !important}
  .hero{min-height:0 !important;padding-top:110px !important;padding-bottom:60px !important}
}

/* --- Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .marquee-track{animation:none !important;flex-wrap:wrap;width:auto;justify-content:center;row-gap:20px}
}