/* ═══════════════════════════════════════════════════════════
   HIMANSHU SONI — Portfolio
   Olive palette — the tone the orb settles into on scroll:
   sage highlight · moss mid · deep olive #2c392f · pale marble
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:        #080a08;
  --bg-2:      #0d100d;
  --bg-3:      #131813;
  --ink:       #eef0e9;
  --ink-2:     #c3c8bc;
  --muted:     #868d7d;
  --faint:     #545a4d;

  --amber:     #a8bd8f;   /* sage highlight — primary accent */
  --terra:     #5a7050;   /* deep moss */
  --jade:      #84a06d;   /* mid olive-green */
  --marble:    #e8ece1;
  --deep:      #2c392f;   /* darkest olive — surfaces */

  --line:      rgba(232,236,225,.10);
  --line-2:    rgba(232,236,225,.06);
  --glass:     rgba(232,236,225,.03);

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif:'Fraunces', 'Times New Roman', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad: clamp(20px, 5vw, 88px);
  --maxw: 1440px;

  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  background:var(--bg);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
html.has-smooth{ scroll-behavior:auto; }

body{
  font-family:var(--sans);
  font-weight:300;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-locked{ overflow:hidden; height:100vh; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--amber); color:#0b100b; }

/* Smooth-scroll transform host */
#smooth-wrap{ position:fixed; inset:0; overflow:hidden; }
#smooth-content{ will-change:transform; }

/* ─────────────── GLOBAL LAYERS ─────────────── */
.gl-canvas{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.6s ease 0.1s;
}
.gl-canvas.is-on{ opacity:1; }

.grain{
  position:fixed; inset:-150%;
  z-index:3;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-4%,-3%)}
  20%{transform:translate(-8%,3%)} 30%{transform:translate(3%,-9%)}
  40%{transform:translate(-3%,9%)} 50%{transform:translate(-8%,4%)}
  60%{transform:translate(6%,0)}   70%{transform:translate(0,6%)}
  80%{transform:translate(3%,10%)} 90%{transform:translate(-6%,6%)}
}

.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 30%, rgba(5,7,5,.55) 78%, rgba(4,6,4,.9) 100%);
}

.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:60; pointer-events:none;
  background:var(--line-2);
}
.scroll-progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--terra),var(--amber),var(--jade));
  box-shadow:0 0 14px rgba(168,189,143,.55);
}

/* ─────────────── CURSOR ─────────────── */
.cursor{ position:fixed; top:0; left:0; z-index:90; pointer-events:none; mix-blend-mode:difference; opacity:0; transition:opacity .4s; }
.cursor.is-on{ opacity:1; }
.cursor__dot{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--marble); transform:translate(-50%,-50%);
}
.cursor__ring{
  position:absolute; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(232,236,225,.55);
  transform:translate(-50%,-50%) scale(1);
  transition:width .35s var(--e-out), height .35s var(--e-out), border-color .35s, background .35s;
}
.cursor.is-hover .cursor__ring{ width:74px; height:74px; border-color:transparent; background:rgba(232,236,225,.92); }
.cursor.is-hover .cursor__dot{ opacity:0; }
.cursor__label{
  position:absolute; transform:translate(-50%,-50%);
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:#0b100b; opacity:0; transition:opacity .25s; white-space:nowrap;
}
.cursor.is-hover .cursor__label{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ─────────────── PRELOADER ─────────────── */
.loader{
  position:fixed; inset:0; z-index:100;
  background:var(--bg);
  display:grid; place-items:center;
}
.loader.is-done{ pointer-events:none; }
.loader__inner{ width:min(720px,84vw); text-align:center; }
.loader__name{
  display:flex; justify-content:center; gap:clamp(2px,1vw,10px);
  font-family:var(--serif); font-weight:300;
  font-size:clamp(34px,8vw,88px); letter-spacing:.02em; line-height:1;
}
.loader__name span{
  display:inline-block; opacity:0; transform:translateY(120%) rotate(6deg);
  animation:letterUp .9s var(--e-out) forwards;
}
.loader__name span:nth-child(1){animation-delay:.05s}
.loader__name span:nth-child(2){animation-delay:.11s}
.loader__name span:nth-child(3){animation-delay:.17s}
.loader__name span:nth-child(4){animation-delay:.23s}
.loader__name span:nth-child(5){animation-delay:.29s}
.loader__name span:nth-child(6){animation-delay:.35s}
.loader__name span:nth-child(7){animation-delay:.41s}
.loader__name span:nth-child(8){animation-delay:.47s}
@keyframes letterUp{ to{ opacity:1; transform:translateY(0) rotate(0); } }

.loader__meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:28px; font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  opacity:0; animation:fadeIn .8s ease .55s forwards;
}
.loader__num{ color:var(--amber); font-size:13px; }
.loader__num em{ font-style:normal; opacity:.5; margin-left:1px; }
.loader__bar{ margin-top:12px; height:1px; background:var(--line); overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0%; background:var(--amber); box-shadow:0 0 12px var(--amber); }
@keyframes fadeIn{ to{opacity:1} }

.loader__curtain{
  position:absolute; inset:0; background:var(--bg);
  transform:translateY(100%); pointer-events:none;
}
.loader.is-done .loader__inner{ opacity:0; transform:translateY(-30px); transition:opacity .5s ease, transform .8s var(--e-out); }
.loader.is-done{ transform:translateY(-100%); transition:transform 1.05s var(--e-out) .25s; }

/* ─────────────── NAV ─────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:22px var(--pad);
  transition:transform .55s var(--e-out), background .4s, backdrop-filter .4s, padding .4s;
}
.nav.is-stuck{
  padding-top:14px; padding-bottom:14px;
  background:rgba(8,10,8,.62);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line-2);
}
.nav.is-hidden{ transform:translateY(-110%); }

.nav__brand{ display:flex; align-items:center; gap:12px; }
.nav__mark{
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--line); border-radius:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--amber);
  background:var(--glass);
  transition:border-color .4s, color .4s, transform .5s var(--e-out);
}
.nav__brand:hover .nav__mark{ border-color:rgba(168,189,143,.5); transform:rotate(-90deg); }
.nav__brandtext{ font-size:13.5px; letter-spacing:.02em; font-weight:400; }

.nav__links{ display:flex; gap:6px; }
.nav__links a{
  position:relative; padding:8px 14px; border-radius:99px;
  font-size:12.5px; letter-spacing:.04em; color:var(--ink-2);
  transition:color .3s;
}
.nav__links a::before{
  content:''; position:absolute; inset:0; border-radius:99px;
  background:var(--glass); border:1px solid transparent;
  opacity:0; transform:scale(.86); transition:opacity .35s, transform .45s var(--e-out), border-color .35s;
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::before,
.nav__links a.is-active::before{ opacity:1; transform:scale(1); border-color:var(--line); }
.nav__links a.is-active{ color:var(--amber); }
.nav__links a span{ position:relative; }

.nav__cta{
  display:flex; align-items:center; gap:9px;
  padding:9px 16px; border:1px solid var(--line); border-radius:99px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-2); background:var(--glass);
  transition:border-color .4s, color .4s, background .4s;
}
.nav__cta:hover{ border-color:rgba(132,160,109,.45); color:var(--ink); background:rgba(132,160,109,.07); }
.dot{
  width:6px; height:6px; border-radius:50%; background:var(--jade);
  box-shadow:0 0 0 0 rgba(132,160,109,.6); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(132,160,109,.55)}
  70%{box-shadow:0 0 0 9px rgba(132,160,109,0)}
  100%{box-shadow:0 0 0 0 rgba(132,160,109,0)}
}

.nav__burger{ display:none; width:40px; height:40px; place-items:center; gap:6px; }
.nav__burger i{ display:block; width:20px; height:1px; background:var(--ink); transition:transform .45s var(--e-out), opacity .3s; }
.nav__burger i+i{ margin-top:6px; }
body.menu-open .nav__burger i:first-child{ transform:translateY(3.5px) rotate(45deg); }
body.menu-open .nav__burger i:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* ─────────────── MOBILE MENU ─────────────── */
.menu{ position:fixed; inset:0; z-index:65; pointer-events:none; }
.menu__bg{
  position:absolute; inset:0; background:rgba(8,10,8,.92);
  backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  clip-path:circle(0% at calc(100% - 46px) 40px);
  transition:clip-path .8s var(--e-out);
}
.menu__body{
  position:relative; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  gap:6px; padding:0 var(--pad);
}
.menu__body a{
  display:flex; align-items:baseline; gap:16px;
  font-family:var(--serif); font-weight:300; font-size:clamp(34px,10vw,60px);
  line-height:1.25; opacity:0; transform:translateY(28px);
  transition:opacity .6s var(--e-out), transform .7s var(--e-out), color .3s;
}
.menu__body a em{ font-family:var(--mono); font-style:normal; font-size:11px; color:var(--amber); letter-spacing:.14em; }
.menu__body a:hover{ color:var(--amber); }
body.menu-open .menu{ pointer-events:auto; }
body.menu-open .menu__bg{ clip-path:circle(150% at calc(100% - 46px) 40px); }
body.menu-open .menu__body a{ opacity:1; transform:translateY(0); }
body.menu-open .menu__body a:nth-child(1){transition-delay:.16s}
body.menu-open .menu__body a:nth-child(2){transition-delay:.22s}
body.menu-open .menu__body a:nth-child(3){transition-delay:.28s}
body.menu-open .menu__body a:nth-child(4){transition-delay:.34s}
body.menu-open .menu__body a:nth-child(5){transition-delay:.40s}

/* ─────────────── LAYOUT ─────────────── */
main{ position:relative; z-index:1; }

.section{
  position:relative;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(90px,13vw,190px) var(--pad);
}
.section__head{ margin-bottom:clamp(44px,6vw,80px); }
.section__num{
  display:inline-block; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.24em; color:var(--amber); margin-bottom:16px;
}
.section__num::before{ content:''; display:inline-block; width:34px; height:1px; background:var(--amber); vertical-align:middle; margin-right:12px; opacity:.6; }
.section__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(38px,7vw,86px); line-height:1.02; letter-spacing:-.02em;
}
.section__sub{
  margin-top:20px; max-width:52ch; font-size:clamp(15px,1.5vw,17.5px);
  color:var(--muted); line-height:1.7;
}

/* Split-text reveal */
[data-split]{ display:block; }
/* The reveal mask sits at the word's advance width and line-height. Italic
   Fraunces overhangs its advance width, and the 0.86 leading leaves nothing
   above the ascenders, so both edges got sliced. Padding widens the clip
   window; the equal negative margin keeps the layout geometry identical. */
.sw{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding:.34em .16em .34em;
  margin:-.34em -.16em -.34em;
}
/* Better still where it's supported: clip on the vertical axis only. The
   reveal never needs a horizontal mask, and overflow:hidden cannot be limited
   to one axis, so no amount of side padding is guaranteed to clear a font's
   overhang. A negative horizontal inset removes that edge entirely. */
@supports (clip-path: inset(0 -100vw)){
  .sw{
    overflow:visible;
    clip-path:inset(0 -100vw);
    padding-left:0; padding-right:0;
    margin-left:0;  margin-right:0;
  }
}
.sw > i{
  display:inline-block; font-style:inherit;
  transform:translateY(150%) rotate(4deg);
  transition:transform 1s var(--e-out);
}
.is-in .sw > i{ transform:translateY(0) rotate(0); }

/* Generic reveal */
[data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--e-out), transform 1.05s var(--e-out); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* ─────────────── HERO ─────────────── */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  max-width:var(--maxw); margin-inline:auto;
  padding:150px var(--pad) clamp(46px,7vh,80px);
  overflow:hidden;
}
.hero__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, var(--line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-2) 1px, transparent 1px);
  background-size:clamp(60px,9vw,130px) clamp(60px,9vw,130px);
  mask-image:radial-gradient(90% 70% at 50% 45%, #000 20%, transparent 85%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 45%, #000 20%, transparent 85%);
}
.hero__inner{ position:relative; }

.hero__eyebrow{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:clamp(20px,3vw,34px);
}
.pill{
  padding:6px 13px; border:1px solid var(--line); border-radius:99px;
  background:var(--glass); color:var(--ink-2); letter-spacing:.12em;
}
.sep{ width:44px; height:1px; background:var(--line); }

.hero__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(58px,14.5vw,220px); line-height:.86;
  letter-spacing:-.035em; margin-bottom:clamp(34px,5vw,58px);
}
.hero__title .line{ display:block; }
.hero__title .line--serif{
  font-style:italic; padding-left:clamp(20px,9vw,180px);
  background:linear-gradient(100deg, var(--marble) 12%, var(--amber) 48%, var(--terra) 78%, var(--marble) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:shimmer 9s linear infinite;
}
@keyframes shimmer{ 0%{background-position:0% 0} 100%{background-position:250% 0} }

.hero__foot{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto;
  gap:clamp(24px,4vw,60px); align-items:end;
  padding-top:clamp(24px,3vw,38px); border-top:1px solid var(--line);
}
.hero__roleline{ display:block; font-size:clamp(17px,2vw,23px); font-weight:400; letter-spacing:-.01em; }
.hero__rolesub{ display:block; margin-top:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--faint); }
.hero__bio{ font-size:clamp(14.5px,1.35vw,16.5px); color:var(--muted); line-height:1.75; max-width:48ch; }
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }

.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:99px; font-size:13.5px; letter-spacing:.01em;
  border:1px solid var(--line); overflow:hidden; white-space:nowrap;
  transition:color .4s, border-color .4s;
}
.btn svg{ width:16px; height:16px; transition:transform .5s var(--e-out); }
.btn::before{
  content:''; position:absolute; inset:0; border-radius:99px;
  background:linear-gradient(105deg,var(--amber),var(--terra));
  transform:translateY(101%); transition:transform .6s var(--e-out);
}
.btn > *{ position:relative; z-index:1; }
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ color:#0b100b; border-color:transparent; }
.btn:hover svg{ transform:translateX(5px); }
.btn--primary{ background:var(--glass); color:var(--ink); }
.btn--ghost{ color:var(--ink-2); }

.hero__scroll{
  position:absolute; left:var(--pad); bottom:clamp(46px,7vh,80px);
  display:none; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint);
}
.hero__scroll i{ display:block; width:44px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:''; position:absolute; inset:0; background:var(--amber); animation:sweep 2.2s var(--e-io) infinite; }
@keyframes sweep{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }

.hero__side{
  position:absolute; right:calc(var(--pad) - 14px); top:50%;
  transform:translateY(-50%) rotate(90deg); transform-origin:right center;
  display:flex; gap:14px; align-items:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint);
  white-space:nowrap;
}
.hero__side b{ color:var(--amber); font-weight:400; opacity:.7; }

/* ─────────────── MARQUEE ─────────────── */
.marquee{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(12,16,12,.5); backdrop-filter:blur(6px);
  padding:clamp(16px,2.2vw,26px) 0;
}
.marquee__track{ display:flex; width:max-content; will-change:transform; }
.marquee__track span{
  display:flex; align-items:center;
  font-family:var(--serif); font-weight:300; font-size:clamp(20px,3.4vw,44px);
  letter-spacing:-.01em; color:var(--ink-2); white-space:nowrap; padding-right:0;
}
.marquee__track i{
  font-style:normal; font-size:.34em; color:var(--amber);
  margin:0 clamp(20px,3vw,44px); transform:translateY(-.18em);
}

/* ─────────────── ABOUT ─────────────── */
.about__grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(34px,6vw,90px); align-items:start;
}
.about__visual{ position:relative; }

.portrait{ position:relative; transform-style:preserve-3d; }
.portrait__frame{
  position:relative; overflow:hidden; border-radius:6px;
  border:1px solid var(--line); background:var(--bg-2);
  aspect-ratio:4/5;
  transform:translateZ(30px);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(168,189,143,.05);
}
.portrait__frame img{
  width:100%; height:100%; object-fit:cover; object-position:50% 34%;
  filter:saturate(.86) contrast(1.06) brightness(.94);
  transition:filter .8s var(--e-out), transform 1.2s var(--e-out);
}
.portrait:hover .portrait__frame img{ filter:saturate(1) contrast(1.08) brightness(1); transform:scale(1.04); }
.portrait__gl{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:2; opacity:0; transition:opacity .6s; pointer-events:none;
}
.portrait.gl-ready .portrait__gl{ opacity:1; }
.portrait.gl-ready .portrait__frame img{ opacity:0; }
.portrait__frame::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,10,8,.12) 0%, transparent 34%, transparent 62%, rgba(8,10,8,.72) 100%);
}
.portrait__scan{
  position:absolute; left:0; right:0; height:34%; z-index:4; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(168,189,143,.10), transparent);
  animation:scan 7s var(--e-io) infinite;
}
@keyframes scan{ 0%{transform:translateY(-120%)} 55%,100%{transform:translateY(400%)} }

.portrait__tag{
  position:absolute; z-index:5;
  display:flex; flex-direction:column; gap:2px;
  padding:11px 15px; border-radius:10px;
  background:rgba(13,17,13,.72); border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--ink);
  transform:translateZ(60px);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.85);
}
.portrait__tag em{ font-style:normal; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); }
.portrait__tag--tl{ top:-14px; left:-14px; }
.portrait__tag--br{ bottom:-16px; right:-16px; }

.about__lead{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(21px,2.7vw,34px); line-height:1.32; letter-spacing:-.015em;
  color:var(--ink); margin-bottom:26px;
}
.about__body p{ color:var(--muted); font-size:clamp(14.5px,1.4vw,16.5px); line-height:1.85; margin-bottom:20px; max-width:60ch; }
.about__body strong{ color:var(--ink); font-weight:400; }

.about__facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px; margin-top:34px; background:var(--line-2); border:1px solid var(--line-2);
}
.about__facts li{
  background:var(--bg); padding:18px 20px;
  font-size:14px; color:var(--ink-2);
}
.about__facts em{
  display:block; font-family:var(--mono); font-style:normal; font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:7px;
}

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,3vw,40px); margin-top:clamp(60px,9vw,110px);
  padding-top:clamp(34px,4vw,52px); border-top:1px solid var(--line);
}
.stat__n{
  display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(38px,6.5vw,84px); line-height:1; letter-spacing:-.03em;
  background:linear-gradient(180deg,var(--marble),var(--amber));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.stat__l{ display:block; margin-top:12px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }

/* ─────────────── VENTURES ─────────────── */
.vlist{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
.vcard{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(26px,3vw,40px);
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(170deg, rgba(232,236,225,.045), rgba(232,236,225,.012));
  min-height:clamp(300px,38vw,400px);
  display:flex; flex-direction:column;
  transform-style:preserve-3d;
  transition:border-color .5s, background .5s, box-shadow .6s;
}
.vcard:hover{ border-color:rgba(232,236,225,.2); box-shadow:0 50px 90px -50px rgba(0,0,0,.95); }
.vcard__glow{
  position:absolute; z-index:-1; inset:-40%;
  background:radial-gradient(closest-side, var(--acc), transparent 72%);
  opacity:0; transition:opacity .6s; filter:blur(20px);
  transform:translate(var(--gx,0), var(--gy,0));
}
.vcard:hover .vcard__glow{ opacity:.24; }
.vcard[data-accent="amber"]{ --acc:#a8bd8f; }
.vcard[data-accent="jade"] { --acc:#84a06d; }
.vcard[data-accent="terra"]{ --acc:#5a7050; }

.vcard__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:auto; }
.vcard__idx{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--acc); }
.vcard__role{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint); padding:5px 11px; border:1px solid var(--line); border-radius:99px;
}
.vcard__name{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(28px,3.4vw,44px); line-height:1.05; letter-spacing:-.02em;
  margin:34px 0 16px; transform:translateZ(26px);
}
.vcard__desc{ color:var(--muted); font-size:14.5px; line-height:1.72; margin-bottom:24px; transform:translateZ(14px); }
.vcard__tags{ display:flex; flex-wrap:wrap; gap:7px; }
.vcard__tags li{
  padding:5px 12px; border-radius:99px; border:1px solid var(--line-2);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-2); background:var(--glass);
}

/* ─────────────── EXPERTISE ─────────────── */
.ex-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
.ex{
  position:relative; background:var(--bg); padding:clamp(28px,3.2vw,44px);
  transform-style:preserve-3d; transition:background .5s;
  overflow:hidden;
}
.ex::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(60% 60% at 50% 0%, rgba(168,189,143,.09), transparent 70%);
  opacity:0; transition:opacity .5s;
}
.ex:hover{ background:var(--bg-2); }
.ex:hover::before{ opacity:1; }
.ex__icon{
  width:52px; height:52px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:13px; color:var(--amber);
  margin-bottom:26px; background:var(--glass); transform:translateZ(30px);
  transition:transform .6s var(--e-out), border-color .5s, color .5s;
}
.ex__icon svg{ width:26px; height:26px; }
.ex:hover .ex__icon{ transform:translateZ(46px) rotate(-8deg) scale(1.06); border-color:rgba(168,189,143,.42); }
.ex h3{ font-size:clamp(17px,1.9vw,21px); font-weight:400; letter-spacing:-.01em; margin-bottom:12px; transform:translateZ(18px); }
.ex p{ color:var(--muted); font-size:14px; line-height:1.75; transform:translateZ(8px); }

.stack{
  margin-top:clamp(46px,6vw,70px);
  padding-top:clamp(28px,3.5vw,44px); border-top:1px solid var(--line);
  display:grid; gap:clamp(18px,2.2vw,26px);
}
.stack__row{
  display:grid; grid-template-columns:118px minmax(0,1fr);
  gap:clamp(14px,2.5vw,34px); align-items:start;
}
.stack__label{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); padding-top:9px; white-space:nowrap;
}
.stack ul{ display:flex; flex-wrap:wrap; gap:8px; }
.stack li{
  padding:8px 15px; border:1px solid var(--line); border-radius:99px;
  font-size:12.5px; color:var(--ink-2); background:var(--glass);
  transition:border-color .35s, color .35s, transform .45s var(--e-out), background .35s;
}
.stack li:hover{ border-color:rgba(168,189,143,.42); color:var(--ink); transform:translateY(-3px); background:rgba(168,189,143,.06); }

/* ─────────────── PROCESS ─────────────── */
.steps{ display:grid; gap:0; border-top:1px solid var(--line); }
.step{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(22px,5vw,80px); align-items:start;
  padding:clamp(28px,4vw,48px) 0; border-bottom:1px solid var(--line);
  transition:padding-left .6s var(--e-out);
}
.step:hover{ padding-left:clamp(6px,1.4vw,22px); }
.step__n{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--amber);
  padding-top:8px; min-width:34px;
}
.step h3{
  font-family:var(--serif); font-weight:300; font-size:clamp(26px,4vw,52px);
  line-height:1.06; letter-spacing:-.02em; margin-bottom:12px;
  transition:color .4s;
}
.step:hover h3{ color:var(--amber); }
.step p{ color:var(--muted); font-size:clamp(14px,1.4vw,16px); line-height:1.75; max-width:58ch; }

/* ─────────────── CONTACT ─────────────── */
.contact{ text-align:center; }
.contact__inner{ max-width:960px; margin-inline:auto; }
.contact__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 16px; border:1px solid var(--line); border-radius:99px;
  background:var(--glass); font-family:var(--mono); font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); margin-bottom:34px;
}
.contact__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(40px,8.4vw,120px); line-height:.96; letter-spacing:-.035em;
}
.contact__title .line--serif{
  font-style:italic;
  background:linear-gradient(100deg,var(--marble),var(--amber) 45%,var(--terra) 70%,var(--marble));
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:shimmer 9s linear infinite;
}
.contact__sub{
  margin:30px auto 0; max-width:54ch; color:var(--muted);
  font-size:clamp(14.5px,1.5vw,17px); line-height:1.8;
}

.mailto{
  display:inline-flex; align-items:center; gap:clamp(14px,2vw,26px);
  margin-top:clamp(40px,5vw,64px); padding:clamp(16px,2vw,22px) clamp(22px,3vw,34px);
  border:1px solid var(--line); border-radius:99px; background:var(--glass);
  position:relative; overflow:hidden;
  transition:border-color .5s, color .5s;
}
.mailto::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,var(--amber),var(--terra));
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--e-out);
}
.mailto:hover::before{ transform:scaleX(1); }
.mailto:hover{ color:#0b100b; border-color:transparent; }
.mailto__text{
  position:relative; z-index:1; font-size:clamp(14px,2.2vw,26px);
  letter-spacing:-.01em; word-break:break-all;
}
.mailto__icon{
  position:relative; z-index:1; display:grid; place-items:center;
  width:clamp(34px,4vw,46px); height:clamp(34px,4vw,46px); border-radius:50%;
  border:1px solid currentColor; flex-shrink:0;
}
.mailto__icon svg{ width:18px; height:18px; transition:transform .5s var(--e-out); }
.mailto:hover .mailto__icon svg{ transform:translateX(4px); }

.socials{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:clamp(34px,4vw,52px); }
.socials a{
  display:block; padding:10px 20px; border:1px solid var(--line); border-radius:99px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); transition:border-color .4s, color .4s, transform .5s var(--e-out), background .4s;
}
.socials a:hover{ border-color:rgba(132,160,109,.45); color:var(--ink); transform:translateY(-4px); background:rgba(132,160,109,.06); }

/* ─────────────── FOOTER ─────────────── */
.footer{
  position:relative; z-index:1;
  border-top:1px solid var(--line);
  padding:clamp(30px,4vw,44px) var(--pad) 0;
  max-width:var(--maxw); margin-inline:auto; overflow:hidden;
}
.footer__row{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
}
.footer__t i{ font-style:normal; color:var(--amber); }
.footer__up{ transition:color .35s; }
.footer__up:hover{ color:var(--ink); }
.footer__word{
  margin-top:clamp(20px,3vw,34px);
  font-family:var(--serif); font-weight:300;
  font-size:clamp(46px,14.5vw,220px); line-height:.82; letter-spacing:-.045em;
  text-align:center; white-space:nowrap;
  background:linear-gradient(180deg, rgba(232,236,225,.13), rgba(232,236,225,0) 82%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  transform:translateY(14%);
  user-select:none;
}

/* ─────────────── RESPONSIVE ─────────────── */
@media (max-width:1100px){
  .hero__foot{ grid-template-columns:1fr 1fr; }
  .hero__actions{ grid-column:1/-1; }
  .vlist{ grid-template-columns:1fr 1fr; }
  .ex-grid{ grid-template-columns:1fr 1fr; }
  .hero__side{ display:none; }
}
@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:grid; }
  .about__grid{ grid-template-columns:1fr; }
  .about__visual{ max-width:440px; }
  .stats{ grid-template-columns:1fr 1fr; row-gap:34px; }
}
@media (max-width:680px){
  .hero{ padding-top:120px; }
  .hero__foot{ grid-template-columns:1fr; align-items:start; }
  .hero__title .line--serif{ padding-left:0; }
  .vlist{ grid-template-columns:1fr; }
  .ex-grid{ grid-template-columns:1fr; }
  .vcard{ min-height:0; }
  .step{ grid-template-columns:1fr; gap:12px; }
  .portrait__tag--tl{ top:-10px; left:-10px; }
  .portrait__tag--br{ bottom:-12px; right:-12px; }
  .footer__row{ justify-content:center; text-align:center; }
}
@media (min-width:900px){ .hero__scroll{ display:flex; } }

/* ─────────────── REDUCED MOTION ─────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .sw > i{ transform:none !important; }
  .grain,.portrait__scan{ display:none; }
}

/* ─────────────── WEBGL FALLBACK ─────────────── */
body.no-gl::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(52vw 52vw at 74% 24%, rgba(168,189,143,.20), transparent 62%),
    radial-gradient(46vw 46vw at 16% 72%, rgba(132,160,109,.14), transparent 64%),
    radial-gradient(40vw 40vw at 58% 96%, rgba(192,114,74,.13), transparent 66%);
  filter:blur(20px);
  animation:drift 22s var(--e-io) infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-3%,4%,0) scale(1.09)}
}

/* ─────────────── GRADIENT-TEXT FALLBACK ───────────────
   -webkit-text-fill-color:transparent renders the text invisible on any
   engine that lacks background-clip:text, so restore a solid colour there. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .hero__title .line--serif,
  .contact__title .line--serif,
  .stat__n,
  .footer__word{
    -webkit-text-fill-color:currentColor;
    color:var(--amber);
    background:none;
  }
  .footer__word{ color:rgba(232,236,225,.12); }
}

/* ─────────────── VENTURE CARDS AS LINKS ─────────────── */
.vcard__role{ margin-left:auto; }
.vcard__arrow{
  display:grid; place-items:center; flex-shrink:0;
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line); color:var(--acc);
  background:var(--glass); opacity:.5;
  transform:translateZ(20px);
  transition:opacity .4s, border-color .4s, background .4s, transform .55s var(--e-out);
}
.vcard__arrow svg{ width:15px; height:15px; }
.vcard:hover .vcard__arrow{
  opacity:1; border-color:var(--acc); background:rgba(232,236,225,.06);
  transform:translateZ(34px) translate(2px,-2px);
}
.vcard:hover .vcard__name{ color:var(--acc); }
.vcard__name{ transition:color .45s; }
.vcard:focus-visible{ outline:2px solid var(--acc); outline-offset:5px; }

@media (max-width:680px){
  .stack__row{ grid-template-columns:1fr; gap:10px; }
  .stack__label{ padding-top:0; }
}

/* ─────────────── CLIENTS ─────────────── */
.clients-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2);
}
.client{
  position:relative; overflow:hidden;
  background:var(--bg); min-height:clamp(96px,10vw,140px);
  display:grid; place-items:center; text-align:center;
  padding:22px 18px; transition:background .5s;
}
.client::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(70% 70% at 50% 100%, rgba(168,189,143,.11), transparent 72%);
  opacity:0; transition:opacity .5s;
}
.client:hover{ background:var(--bg-2); }
.client:hover::before{ opacity:1; }
.client__n{
  position:relative;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(15px,1.7vw,22px); line-height:1.25; letter-spacing:-.01em;
  color:var(--ink-2); transition:color .4s, transform .55s var(--e-out);
}
.client:hover .client__n{ color:var(--ink); transform:translateY(-3px); }
.client--more{ background:rgba(232,236,225,.02); }
.client--more .client__n{ font-style:italic; color:var(--amber); }

@media (max-width:1100px){ .clients-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){  .clients-grid{ grid-template-columns:repeat(2,1fr); } }

/* sixth mobile-menu item */
body.menu-open .menu__body a:nth-child(6){ transition-delay:.46s; }

/* ─────────────── CONTACT ACTIONS / WHATSAPP ─────────────── */
.contact__actions{
  margin-top:clamp(40px,5vw,64px);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(14px,1.8vw,20px);
}
.contact__actions .mailto{ margin-top:0; }

.wa{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:11px;
  padding:14px 26px; border-radius:99px;
  border:1px solid rgba(132,160,109,.42);
  background:rgba(132,160,109,.07);
  color:var(--jade); font-size:14px; letter-spacing:.01em; white-space:nowrap;
  transition:color .45s, border-color .45s;
}
.wa::before{
  content:''; position:absolute; inset:0; background:#25d366;
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--e-out);
}
.wa > *{ position:relative; z-index:1; }
.wa:hover::before{ transform:scaleX(1); }
.wa:hover{ color:#0a120a; border-color:transparent; }
.wa__icon{ display:grid; place-items:center; }
.wa svg{ width:19px; height:19px; display:block; }

/* ─────────────── HERO: FULL NAME ON ONE LINE ───────────────
   The split-text pass moves each word into a transformed <i>, which can
   defeat background-clip:text painted on the ancestor line. Painting the
   gradient on the word itself is identical for a one-word line and cannot
   fail that way. */
.hero__title .line--serif .sw > i,
.contact__title .line--serif .sw > i{
  background:linear-gradient(100deg, var(--marble) 12%, var(--amber) 48%, var(--terra) 78%, var(--marble) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:shimmer 9s linear infinite;
  /* background-clip:text only fills glyphs sitting over the background's
     positioning area — the padding box. Ink that escapes that box gets no
     gradient and vanishes, reading as a clipped letter. Italic Fraunces
     overhangs sideways by ~0.13em, and descenders drop below the 0.96/0.86
     line box. Pad every side to cover both; the equal negative margin cancels
     it so the glyph lands in exactly the same place. */
  padding:.30em .26em .30em .12em;
  margin:-.30em -.26em -.30em -.12em;
}

@media (min-width:900px){
  .hero__title{ font-size:clamp(58px,9.2vw,172px); }
  .hero__title .line{ display:inline; }
  .hero__title .line--serif{ padding-left:.2em; }
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .hero__title .line--serif .sw > i,
  .contact__title .line--serif .sw > i{
    -webkit-text-fill-color:currentColor; color:var(--amber); background:none;
  }
}

/* ─────────────── FOOTER JOURNAL ─────────────── */
.fblog{
  padding-bottom:clamp(34px,4vw,52px);
  margin-bottom:clamp(26px,3vw,38px);
  border-bottom:1px solid var(--line);
}
.fblog__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:clamp(24px,3vw,36px);
}
.fblog__label{
  display:block; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--amber); margin-bottom:12px;
}
.fblog__label::before{
  content:''; display:inline-block; width:28px; height:1px;
  background:var(--amber); vertical-align:middle; margin-right:11px; opacity:.6;
}
.fblog__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(24px,3.4vw,42px); line-height:1.08; letter-spacing:-.024em;
  max-width:16ch;
}
.fblog__all{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2);
  padding:11px 20px; border:1px solid var(--line); border-radius:99px;
  background:var(--glass); white-space:nowrap;
  transition:border-color .4s, color .4s, background .4s;
}
.fblog__all:hover{
  border-color:rgba(168,189,143,.45); color:var(--ink);
  background:rgba(168,189,143,.07);
}

.fblog__list{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line-2); border:1px solid var(--line-2);
}
.fblog__list a{
  display:flex; flex-direction:column; gap:9px; height:100%;
  background:var(--bg); padding:22px 22px 20px;
  transition:background .45s;
}
.fblog__list a:hover{ background:var(--bg-2); }
.fblog__cat{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber);
}
.fblog__name{
  font-size:15px; line-height:1.42; color:var(--ink-2);
  transition:color .35s;
}
.fblog__list a:hover .fblog__name{ color:var(--ink); }
.fblog__date{
  margin-top:auto; padding-top:10px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
}

@media (max-width:900px){ .fblog__list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .fblog__list{ grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════
   PRINT / PDF EXPORT
   Scroll-triggered reveals start at opacity:0, the smooth-scroll
   wrapper is position:fixed, and WebGL does not rasterise into a
   print job — all three have to be neutralised or the export is
   a mostly blank document.
   ═══════════════════════════════════════════════════════════ */
@media print{
  @page{ size:1440px 900px; margin:0; }

  html,body{
    background:#080a08 !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
    width:1440px;
  }

  /* neutralise the smooth-scroll transform host */
  #smooth-wrap{ position:static !important; overflow:visible !important; }
  #smooth-content{ transform:none !important; }
  body{ height:auto !important; }

  /* force every scroll-triggered reveal into its final state */
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .sw{ overflow:visible !important; clip-path:none !important; }
  .sw > i{ transform:none !important; }

  /* interactive chrome has no meaning on paper */
  .loader,.cursor,.scroll-progress,.grain,.menu,
  .nav__burger,.hero__scroll,.portrait__scan{ display:none !important; }
  .nav{ position:absolute !important; }

  /* WebGL will not rasterise — substitute the gradient fallback */
  .gl-canvas{ display:none !important; }
  body::before{
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(52vw 52vw at 74% 22%, rgba(168,189,143,.20), transparent 62%),
      radial-gradient(46vw 46vw at 16% 72%, rgba(132,160,109,.14), transparent 64%),
      radial-gradient(40vw 40vw at 58% 96%, rgba(90,112,80,.16), transparent 66%);
  }
  .portrait.gl-ready .portrait__gl{ display:none !important; }
  .portrait.gl-ready .portrait__frame img{ opacity:1 !important; }

  /* print media queries evaluate against the page box, which would
     otherwise trigger the mobile breakpoints — restore desktop */
  .hero__foot{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto !important; }
  .about__grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) !important; }
  .stats{ grid-template-columns:repeat(4,1fr) !important; }
  .vlist,.ex-grid,.brelated__grid{ grid-template-columns:repeat(3,1fr) !important; }
  .clients-grid{ grid-template-columns:repeat(4,1fr) !important; }
  .fblog__list{ grid-template-columns:repeat(3,1fr) !important; }
  .stack__row{ grid-template-columns:118px minmax(0,1fr) !important; }
  .nav__links,.nav__cta{ display:flex !important; }
  .hero__title .line{ display:inline !important; }
  .hero__title{ font-size:132px !important; }

  /* keep blocks intact across page boundaries */
  .section,.vcard,.ex,.client,.step,.stat,.fblog__list a{
    break-inside:avoid; page-break-inside:avoid;
  }
  .hero{ min-height:900px; }
}