/* =========================================================
   Dariusz Wyżga — Head of Digital & Strategic Leader
   Design system + layout + motion
   ========================================================= */

:root{
  /* palette pulled from the hero photograph */
  --ink:        #05080a;
  --ink-2:      #090d11;
  --ink-3:      #0e1418;
  --graphite:   #151c21;
  --line:       rgba(255,255,255,.10);
  --line-2:     rgba(255,255,255,.18);

  --paper:      #f2efe9;
  --muted:      rgba(242,239,233,.62);
  --muted-2:    rgba(242,239,233,.40);

  --teal:       #2ee6d6;
  --teal-deep:  #12a89e;
  --warm:       #ff8a4c;
  --warm-soft:  #ffc48a;

  --grad-teal:  linear-gradient(120deg,var(--teal),var(--teal-deep));
  --grad-mix:   linear-gradient(100deg,var(--warm) 0%,var(--warm-soft) 28%,var(--teal) 78%);

  --f-display: "Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:    "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:       clamp(1.15rem, 3.6vw, 3.5rem);
  --wrap:      1560px;
  --sec-pad:   clamp(6rem, 13vh, 11rem);

  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-io:   cubic-bezier(.65,.05,.36,1);
  --dur:       .9s;

  --header-h:  clamp(64px, 7vw, 86px);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
  /* slim, on-brand scrollbar (Firefox + Chromium 121+) */
  scrollbar-width: thin;
  scrollbar-color: var(--teal-deep) transparent;
}

/* WebKit / older Chromium: no stepper arrows, no heavy track */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--teal-deep);
  border-radius:99px;
  border:2px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:var(--teal); background-clip:content-box; }
::-webkit-scrollbar-button{ display:none; width:0; height:0; }
::-webkit-scrollbar-corner{ background:transparent; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.6;
  letter-spacing:-.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-loading{ overflow:hidden; height:100vh; }
body.menu-open{ overflow:hidden; }

img,canvas,svg{ 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{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background:var(--teal); color:var(--ink); }

.mono{
  font-family:var(--f-mono);
  font-size:clamp(9.5px,.68vw,11.5px);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:400;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ---------------- Display type ---------------- */
.display{
  font-weight:800;
  line-height:.92;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.display--md{ font-size:clamp(2rem,4.2vw,4.1rem); letter-spacing:-.038em; line-height:1.02; }
.display--lg{ font-size:clamp(2.4rem,5.8vw,5.6rem); }
.display--xl{ font-size:clamp(2.7rem,7.6vw,8.2rem); line-height:.92; }

.lead{
  font-size:clamp(1.02rem,1.35vw,1.35rem);
  line-height:1.55;
  color:var(--muted);
  letter-spacing:-.015em;
  max-width:60ch;
}
.lead--wide{ max-width:52ch; }

/* ---------------- Fixed chrome ---------------- */
.progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:120;
  background:rgba(255,255,255,.06); pointer-events:none;
}
.progress i{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:var(--grad-mix);
}

.grain{
  position:fixed; inset:-120px; z-index:115; pointer-events:none;
  opacity:.36; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-6%,4%)} 40%{transform:translate(4%,-5%)}
  60%{transform:translate(-3%,-4%)} 80%{transform:translate(5%,3%)} 100%{transform:translate(0,0)}
}

/* custom cursor (Difference Invert Reveal) */
.cursor{
  position:fixed; top:0; left:0; z-index:130; pointer-events:none;
  mix-blend-mode:difference;
  opacity:0; transition:opacity .35s var(--ease);
}
.cursor.is-on{ opacity:1; }
.cursor__dot,.cursor__ring{
  position:absolute; border-radius:50%; transform:translate(-50%,-50%);
  pointer-events:none;
}
.cursor__dot{
  width:6px; height:6px;
  background:#fff;
}
.cursor__ring{
  width:42px; height:42px;
  background:#fff;
  transition:width .32s var(--ease), height .32s var(--ease);
}
.cursor.is-link .cursor__ring,
.cursor.is-text .cursor__ring{
  width:72px; height:72px;
}
.cursor.is-card .cursor__ring{
  width:92px; height:92px;
}
.cursor.is-hide .cursor__ring,
.cursor.is-hide .cursor__dot{
  width:0; height:0; opacity:0;
}
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* toast */
.toast{
  position:fixed; left:50%; bottom:calc(2rem + env(safe-area-inset-bottom)); z-index:140;
  transform:translate(-50%,140%); opacity:0;
  padding:.85rem 1.4rem; border-radius:100px;
  background:var(--paper); color:var(--ink);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  transition:transform .6s var(--ease), opacity .4s;
  pointer-events:none; white-space:nowrap;
}
.toast.is-on{ transform:translate(-50%,0); opacity:1; }

/* ---------------- Loader ---------------- */
.loader{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:grid; place-items:center;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.15s var(--ease);
}
.loader.is-done{ clip-path:inset(0 0 100% 0); pointer-events:none; }
.loader__inner{ width:min(88vw,680px); padding-inline:var(--pad); }
.loader__name{
  display:flex; gap:.35em; flex-wrap:wrap;
  font-size:clamp(1.4rem,3.8vw,3.2rem); font-weight:800; letter-spacing:.04em; line-height:1.05;
}
.loader__name span{
  display:block; opacity:0; transform:translateY(.5em);
  animation:loadName .9s var(--ease) forwards;
}
.loader__name span:nth-child(2){ animation-delay:.1s; color:transparent; -webkit-text-stroke:1px var(--muted-2); }
@keyframes loadName{ to{ opacity:1; transform:none; } }
.loader__meta{ display:flex; justify-content:space-between; margin-top:1.4rem; color:var(--muted-2); }
.loader__bar{ margin-top:.8rem; height:1px; background:rgba(255,255,255,.14); overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0; background:var(--grad-mix); }

/* ---------------- Header ---------------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:110;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-inline:var(--pad);
  transition:background-color .5s var(--ease), backdrop-filter .5s, transform .55s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:rgba(5,8,10,.62);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.header.is-hidden{ transform:translateY(-102%); }

.brand{ display:flex; align-items:center; gap:.6rem; }
.brand__mark{
  width:10px; height:10px; border-radius:50%; background:var(--grad-mix);
  box-shadow:0 0 0 4px rgba(46,230,214,.14);
  animation:pulse 3.2s ease-in-out infinite;
}
@keyframes pulse{ 50%{ box-shadow:0 0 0 9px rgba(46,230,214,0); } }
.brand__txt{ color:var(--paper); }

.nav{ display:flex; gap:clamp(1rem,2.2vw,2.4rem); }
.nav__link{
  position:relative; padding:.4rem 0;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); transition:color .35s;
  overflow:hidden;
}
.nav__link span{ display:block; transition:transform .5s var(--ease); }
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--teal); transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .5s var(--ease);
}
.nav__link:hover, .nav__link.is-current{ color:var(--paper); }
.nav__link:hover::after, .nav__link.is-current::after{ transform:scaleX(1); transform-origin:0 50%; }

.header__side{ display:flex; align-items:center; gap:clamp(.7rem,1.4vw,1.5rem); }
.lang{ display:flex; align-items:center; gap:.35rem; font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; }
.lang__btn{ color:var(--muted-2); transition:color .3s; padding:.2rem; }
.lang__btn.is-active{ color:var(--paper); }
.lang__btn:hover{ color:var(--teal); }
.lang__sep{ color:var(--muted-2); }

/* buttons */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.5rem; border-radius:100px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  border:1px solid var(--line-2); overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease), border-color .4s;
  will-change:transform;
}
.btn svg{ width:12px; height:12px; transition:transform .45s var(--ease); }
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--grad-mix); transform:translateY(101%); transition:transform .55s var(--ease);
}
.btn:hover{ color:var(--ink); border-color:transparent; }
.btn:hover::before{ transform:translateY(0); }
.btn:hover svg{ transform:translate(3px,-3px); }
.btn--pill{ padding:.7rem 1.15rem; }
.btn--solid{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn--solid::before{ background:var(--grad-mix); }
.btn--ghost{ color:var(--paper); }

.burger{ display:none; position:relative; width:34px; height:34px; }
.burger i{
  position:absolute; left:6px; width:22px; height:1.5px; background:var(--paper);
  transition:transform .45s var(--ease);
}
.burger i:first-child{ top:14px; }
.burger i:last-child{  top:20px; }
.burger.is-open i:first-child{ transform:translateY(3px) rotate(45deg); }
.burger.is-open i:last-child{  transform:translateY(-3px) rotate(-45deg); }

/* mobile menu */
.menu{
  position:fixed; inset:0; z-index:105; background:var(--ink-2);
  display:flex; flex-direction:column; justify-content:center; gap:2rem;
  padding:var(--header-h) var(--pad) var(--pad);
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease);
  visibility:hidden;
}
.menu.is-open{ clip-path:inset(0 0 0 0); visibility:visible; }
.menu__nav{ display:flex; flex-direction:column; gap:.2rem; }
.menu__nav a{
  font-size:clamp(2rem,10vw,3.4rem); font-weight:800; letter-spacing:-.04em; line-height:1.12;
  opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease), color .3s;
}
.menu.is-open .menu__nav a{ opacity:1; transform:none; transition-delay:calc(.18s + var(--d,0) * .07s); }
.menu__nav a:hover{ color:var(--teal); }
.menu__cta{ align-self:flex-start; }
.menu__foot{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; color:var(--muted-2); border-top:1px solid var(--line); padding-top:1.2rem; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__img{
  position:absolute; inset:-4% 0;
  background:url("../img/darek-hero.webp") 52% 30% / cover no-repeat;
  filter:saturate(1.12) contrast(1.04);
  transform:scale(1.02);
  will-change:transform;
  animation:heroIn 2.6s var(--ease) .35s both;
}
@keyframes heroIn{ from{ transform:scale(1.22); filter:blur(18px) saturate(1.12); opacity:.15 } to{ transform:scale(1.02); filter:blur(0) saturate(1.12); opacity:1 } }

.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(74% 58% at 50% 52%, rgba(5,8,10,.66) 0%, rgba(5,8,10,.38) 46%, rgba(5,8,10,0) 80%),
    linear-gradient(180deg, rgba(5,8,10,.72) 0%, rgba(5,8,10,.12) 26%, rgba(5,8,10,.20) 62%, rgba(5,8,10,.92) 100%),
    linear-gradient(90deg, rgba(5,8,10,.42) 0%, rgba(5,8,10,0) 26%, rgba(5,8,10,0) 74%, rgba(5,8,10,.42) 100%);
}
.hero__bokeh{ position:absolute; inset:0; width:100%; height:100%; mix-blend-mode:screen; opacity:.9; }

.hero__inner{
  position:relative; z-index:1;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:calc(var(--header-h) + clamp(1.5rem,4vh,3rem)) var(--pad) clamp(2.4rem,6vh,4rem);
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  align-items:start;
  gap:1rem;
}
.hero__corner{ display:flex; flex-direction:column; gap:.15rem; color:rgba(255,255,255,.86); will-change:transform; }
.hero__corner .dim{ color:rgba(255,255,255,.48); letter-spacing:.14em; }
.hero__corner .arrow{ font-size:14px; line-height:1; opacity:.6; margin-bottom:.6rem; }
.hero__corner .big{
  font-family:var(--f-display); font-size:clamp(1.6rem,2.6vw,2.6rem); font-weight:800;
  letter-spacing:-.04em; line-height:1; margin-bottom:.35rem;
}
.hero__year{ margin-top:1.4rem; font-size:clamp(14px,1.6vw,20px); letter-spacing:.02em; }

.hero__corner--tl{ grid-area:1/1; }
.hero__corner--tr{ grid-area:1/3; text-align:right; align-items:flex-end; }
.hero__corner--bl{ grid-area:3/1; align-self:end; }
.hero__corner--bc{ grid-area:3/2; align-self:end; align-items:center; gap:.7rem; }
.hero__corner--br{ grid-area:3/3; align-self:end; text-align:right; align-items:flex-end; }

.scrollbar{ display:block; width:1px; height:56px; background:rgba(255,255,255,.22); overflow:hidden; position:relative; }
.scrollbar i{ position:absolute; inset:0; background:var(--paper); animation:scrollTick 2.1s var(--ease-io) infinite; }
@keyframes scrollTick{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }

.hero__center{
  grid-area:2/1/3/4;
  align-self:center;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(.9rem,1.6vh,1.5rem);
  padding-block:clamp(1rem,4vh,3rem);
}
.hero__hi{
  font-family:var(--f-mono); font-size:clamp(11px,1vw,13px);
  letter-spacing:.24em; text-transform:uppercase; color:var(--teal);
}
.hero__title{
  position:relative;
  font-weight:900; line-height:.94;
  font-size:clamp(1.85rem,4.8vw,4.8rem);
  text-transform:none;
  letter-spacing:-.04em;
  max-width:1100px;
  margin-inline:auto;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(.15rem,.6vh,.35rem);
}
.hero__title .line{
  position:relative; z-index:2;
  display:block; overflow:hidden; padding-block:.04em;
  white-space:nowrap;                 /* JS shrink-to-fit guarantees it never clips */
  font-size:calc(1em * var(--fit,1));
  letter-spacing:-.04em;
}
.hero__amp{
  position:absolute;
  top:58%; left:50%;
  transform:translate(-50%, -50%);
  font-family:var(--f-display);
  font-weight:300;
  font-style:italic;
  font-size:clamp(1.9rem, 4.4vw, 3.6rem);
  color:var(--teal);
  line-height:1;
  opacity:.95;
  filter:drop-shadow(0 0 18px rgba(46,230,214,.5));
  user-select:none;
  pointer-events:none;
  z-index:4;
  margin:0;
}
.hero__title .line--sub{
  position:relative; z-index:2;
  font-size:clamp(.92rem,1.55vw,1.45rem);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:rgba(243,244,245,.92);
  padding-block:.05em;
  white-space:nowrap;
}
.hero__title .line--sub sup{
  font-size:.55em; vertical-align:super; margin-left:.25em; -webkit-text-stroke:0; color:var(--teal);
}
.hero__lead{
  max-width:58ch; color:rgba(255,255,255,.80);
  font-size:clamp(.98rem,1.18vw,1.18rem); line-height:1.5;
  text-shadow:0 4px 26px rgba(5,8,10,.6);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:.4rem; }

/* =========================================================
   MARQUEE
   ========================================================= */
.strip{
  border-block:1px solid var(--line);
  background:var(--ink-2);
  padding-block:clamp(1rem,2vw,1.6rem);
  overflow:hidden;
}
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{
  display:flex; align-items:center; gap:clamp(1.2rem,3vw,2.6rem); width:max-content;
  animation:marquee 46s linear infinite;
  will-change:transform;
}
.marquee__track span{
  font-size:clamp(1.1rem,2.6vw,2.2rem); font-weight:700; letter-spacing:-.035em;
  color:var(--muted-2); white-space:nowrap; transition:color .4s;
}
.marquee__track i{ color:var(--teal); font-style:normal; font-size:.75rem; opacity:.75; }
.marquee:hover .marquee__track span{ color:var(--paper); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* =========================================================
   SECTION SHELL
   ========================================================= */
.section{ position:relative; padding-block:var(--sec-pad); }
.section::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
}
.sec-head{ margin-bottom:clamp(2.6rem,6vw,5rem); }
.sec-head--split{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);
  gap:clamp(1.5rem,4vw,4rem); align-items:end;
}
.sec-head__note{ color:var(--muted); font-size:clamp(.95rem,1.1vw,1.1rem); max-width:40ch; }
.sec-head .display{ margin-top:1.2rem; }

.tag{
  display:inline-flex; align-items:center; gap:.65rem;
  color:var(--muted); letter-spacing:.2em;
}
.tag i{ width:26px; height:1px; background:var(--grad-mix); display:block; }

/* =========================================================
   ABOUT
   ========================================================= */
.about{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 60%,var(--ink) 100%);
  isolation:isolate;
}
.about__glow{
  position:absolute; inset:0; pointer-events:none; z-index:-1;
  overflow:hidden;
}
.about__orb{
  position:absolute; border-radius:50%;
  mix-blend-mode:screen;
  will-change:transform;
  pointer-events:none;
}
.about__orb--1{
  top:5%; right:-8%;
  width:clamp(380px,48vw,720px); height:clamp(380px,48vw,720px);
  background:radial-gradient(circle at 45% 45%, rgba(255,138,76,.65) 0%, rgba(255,80,20,.32) 40%, rgba(255,160,80,.06) 68%, transparent 80%);
  filter:blur(85px);
  opacity:.65;
  animation:aboutPulse1 8s ease-in-out infinite alternate;
}
.about__orb--2{
  top:30%; right:14%;
  width:clamp(320px,38vw,560px); height:clamp(320px,38vw,560px);
  background:radial-gradient(circle at 50% 50%, rgba(46,230,214,.58) 0%, rgba(18,168,158,.28) 42%, rgba(46,230,214,.04) 70%, transparent 80%);
  filter:blur(75px);
  opacity:.58;
  animation:aboutPulse2 10s ease-in-out infinite alternate;
}
.about__orb--3{
  bottom:-15%; left:6%;
  width:clamp(380px,52vw,780px); height:clamp(300px,38vw,520px);
  background:radial-gradient(ellipse at 50% 50%, rgba(255,196,138,.36) 0%, rgba(255,138,76,.15) 45%, transparent 75%);
  filter:blur(110px);
  opacity:.55;
  animation:aboutPulse3 12s ease-in-out infinite alternate;
}
.about__orb--4{
  top:-8%; right:32%;
  width:clamp(200px,26vw,400px); height:clamp(200px,26vw,400px);
  background:radial-gradient(circle at 50% 50%, rgba(180,240,255,.45) 0%, rgba(46,230,214,.18) 45%, transparent 75%);
  filter:blur(60px);
  opacity:.5;
  animation:aboutPulse4 7s ease-in-out infinite alternate;
}

@keyframes aboutPulse1{
  0%  { opacity:.52; filter:blur(80px); }
  100%{ opacity:.82; filter:blur(100px); }
}
@keyframes aboutPulse2{
  0%  { opacity:.48; filter:blur(68px); }
  100%{ opacity:.75; filter:blur(88px); }
}
@keyframes aboutPulse3{
  0%  { opacity:.42; filter:blur(100px); }
  100%{ opacity:.68; filter:blur(125px); }
}
@keyframes aboutPulse4{
  0%  { opacity:.36; filter:blur(52px); }
  100%{ opacity:.64; filter:blur(72px); }
}

.about__body{
  display:flex; flex-direction:column; gap:clamp(1.5rem,3vw,2.4rem);
  max-width:960px;
}
.tag-hl{
  display:inline-block;
  background:var(--teal);
  color:var(--ink) !important;
  padding:0.02em 0.24em 0.06em;
  border-radius:2px;
  line-height:1.05;
  vertical-align:baseline;
  box-shadow:0 0 24px rgba(46,230,214,.3);
}
.tag-hl .word,
.tag-hl .word i{
  color:var(--ink) !important;
}
.about__facts{ display:grid; gap:0; border-top:1px solid var(--line); margin-top:clamp(1rem,2vw,1.5rem); }
.about__facts li{
  display:grid; grid-template-columns:minmax(110px,.22fr) 1fr; gap:1.2rem; align-items:baseline;
  padding:1.2rem 0; border-bottom:1px solid var(--line);
  color:var(--muted);
}
.about__facts b{
  font-family:var(--f-display); font-size:clamp(1.1rem,1.6vw,1.5rem); font-weight:700;
  letter-spacing:-.03em; color:var(--paper); text-transform:none;
}

/* =========================================================
   EXPERTISE CARDS
   ========================================================= */
.cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.card{
  position:relative; overflow:hidden;
  background:var(--ink-2);
  padding:clamp(1.6rem,3vw,3rem);
  display:flex; flex-direction:column; gap:1.1rem;
  transition:background-color .6s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background:var(--grad-mix); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .7s var(--ease);
}
.card:hover{ background:var(--ink-3); }
.card:hover::before{ transform:scaleX(1); }
.card__num{
  font-size:clamp(11px,.9vw,13px); color:var(--teal); letter-spacing:.2em;
}
.card__title{
  font-size:clamp(1.4rem,2.4vw,2.3rem); font-weight:700; letter-spacing:-.035em; line-height:1.05;
}
.card__list{ display:grid; gap:.75rem; margin-top:.3rem; }
.card__list li{
  position:relative; padding-left:1.5rem; color:var(--muted);
  font-size:clamp(.92rem,1.02vw,1.02rem); line-height:1.5;
}
.card__list li::before{
  content:""; position:absolute; left:0; top:.62em; width:9px; height:1px; background:var(--teal); opacity:.8;
}
.card__foot{
  margin-top:auto; padding-top:1.2rem; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:.6rem; color:var(--muted-2);
}
.card__foot i{ color:var(--warm); font-style:normal; font-size:8px; }

/* =========================================================
   EXPERIENCE
   ========================================================= */
.experience{ background:var(--ink-2); }
.timeline{ display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line); }
.job{
  background:var(--ink-2); padding:clamp(1.8rem,4vw,3.4rem) 0;
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr); gap:clamp(1.4rem,4vw,4rem);
  transition:background-color .6s var(--ease);
  position:relative;
}
.job::after{
  content:""; position:absolute; left:0; top:0; width:2px; height:100%;
  background:var(--grad-teal); transform:scaleY(0); transform-origin:50% 0;
  transition:transform .8s var(--ease);
}
.job:hover{ background:var(--ink-3); }
.job:hover::after{ transform:scaleY(1); }
.job__head{ display:flex; flex-direction:column; gap:1rem; position:sticky; top:calc(var(--header-h) + 3vh); align-self:start; padding-left:clamp(0px,2vw,2rem); }
.job__company{ font-size:clamp(1.6rem,3vw,2.8rem); font-weight:800; letter-spacing:-.04em; line-height:1; }
.job__role{ color:var(--teal); font-size:clamp(.95rem,1.15vw,1.15rem); font-weight:500; letter-spacing:-.02em; }
.job__meta{ display:flex; flex-direction:column; gap:.3rem; color:var(--muted-2); }
.job__body{ padding-right:clamp(0px,2vw,2rem); }
.job__sub{ color:var(--paper); letter-spacing:.18em; margin-bottom:1.4rem; }
.job__list{ display:grid; gap:1.1rem; }
.job__list li{
  color:var(--muted); font-size:clamp(.95rem,1.08vw,1.08rem); line-height:1.6;
  padding-left:1.7rem; position:relative;
}
.job__list li::before{
  content:""; position:absolute; left:0; top:.66em; width:11px; height:1px; background:var(--warm); opacity:.85;
}

.clients{ margin-top:clamp(3rem,7vw,6rem); }
.clients__title{ color:var(--muted); margin-bottom:1.6rem; }
.clients__grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.clients__grid li{
  background:var(--ink-2); padding:1.15rem 1.25rem;
  font-size:clamp(1rem,1.35vw,1.3rem); font-weight:600; letter-spacing:-.03em;
  color:var(--muted); transition:color .4s, background-color .4s, transform .5s var(--ease);
}
.clients__grid li em{ font-style:normal; font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; color:var(--muted-2); display:block; margin-top:.3rem; }
.clients__grid li:hover{ color:var(--ink); background:var(--teal); }
.clients__grid li:hover em{ color:rgba(5,8,10,.7); }

.stats{
  margin-top:clamp(3rem,7vw,6rem);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,3vw,2.5rem);
}
.stat{ display:flex; flex-direction:column; gap:.5rem; border-top:1px solid var(--line-2); padding-top:1.2rem; }
.stat b{
  font-size:clamp(2.4rem,6vw,5.2rem); font-weight:800; letter-spacing:-.055em; line-height:.92;
  background:var(--grad-mix); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat span{ color:var(--muted); font-size:clamp(.85rem,1vw,1rem); max-width:22ch; }

/* =========================================================
   STACK
   ========================================================= */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-start; }
.chip{
  padding:.6rem 1.05rem; border-radius:100px; border:1px solid var(--line-2);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); transition:color .35s, border-color .35s, background-color .35s;
}
.chip:hover{ color:var(--paper); border-color:var(--paper); }
.chip.is-active{ background:var(--paper); border-color:var(--paper); color:var(--ink); }

.stack__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.pack{
  background:var(--ink); padding:clamp(1.5rem,2.6vw,2.4rem);
  display:flex; flex-direction:column; gap:1.2rem;
  transition:background-color .35s var(--ease), opacity .3s var(--ease);
}
.pack.is-hidden{ display:none !important; }
.pack__title{
  font-size:clamp(1.05rem,1.5vw,1.4rem); font-weight:700; letter-spacing:-.03em; line-height:1.15;
  padding-bottom:1rem; border-bottom:1px solid var(--line);
}
.pack__tags{ display:flex; flex-wrap:wrap; gap:.45rem; }
.pack__tags li{
  padding:.5rem .85rem; border:1px solid var(--line); border-radius:100px;
  font-size:clamp(.78rem,.88vw,.9rem); color:var(--muted); letter-spacing:-.01em;
  transition:color .3s, border-color .3s, background-color .3s, transform .35s var(--ease);
}
.pack__tags li:hover{ color:var(--ink); background:var(--warm-soft); border-color:var(--warm-soft); transform:translateY(-2px); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{
  position:relative;
  overflow:hidden;
  padding-bottom:clamp(5rem,10vw,9rem);
  background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 60%,var(--ink) 100%);
  isolation:isolate;
}

.contact .display--xl{ margin:1.6rem 0 1.8rem; max-width:16ch; }

.contact__grid{
  margin-top:clamp(2.6rem,6vw,4.5rem);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.ccard{
  position:relative; overflow:hidden; text-align:left;
  background:rgba(9,13,17,.75); backdrop-filter:blur(12px);
  padding:clamp(1.4rem,2.6vw,2.2rem);
  display:flex; flex-direction:column; gap:.7rem; min-height:170px;
  transition:background-color .5s var(--ease);
}
.ccard::before{
  content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--grad-mix);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease);
}
button.ccard:hover{ background:rgba(20,28,34,.9); }
button.ccard:hover::before{ transform:scaleX(1); }
.ccard__label{ color:var(--muted-2); }
.ccard__value{
  font-size:clamp(1.15rem,2vw,1.8rem); font-weight:700; letter-spacing:-.035em; line-height:1.15;
  margin-top:auto; word-break:break-word;
}
.ccard__value--sm{ font-size:clamp(1rem,1.35vw,1.25rem); font-weight:600; color:var(--muted); }
.ccard__icon{ position:absolute; top:clamp(1.4rem,2.6vw,2.2rem); right:clamp(1.4rem,2.6vw,2.2rem); color:var(--muted-2); transition:color .4s, transform .5s var(--ease); }
.ccard__icon svg{ width:20px; height:20px; }
button.ccard:hover .ccard__icon{ color:var(--teal); transform:translate(2px,-2px); }
.ccard--mail.is-copied .ccard__icon{ color:var(--teal); }

.bigmail{
  margin-top:clamp(3rem,7vw,5.5rem);
  display:inline-flex; align-items:center; gap:.8rem;
  font-size:clamp(2rem,6.5vw,6rem); font-weight:800; letter-spacing:-.05em; line-height:1;
  padding-bottom:.15em; border-bottom:1px solid var(--line-2);
  transition:color .5s var(--ease), border-color .5s;
  will-change:transform;
}
.bigmail svg{ width:.4em; height:.4em; transition:transform .55s var(--ease); }
.bigmail:hover{ color:var(--teal); border-color:var(--teal); }
.bigmail:hover svg{ transform:translate(.12em,-.12em); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--ink-2); border-top:1px solid var(--line); padding-block:clamp(2.5rem,5vw,4rem); }
.footer__inner{ display:grid; gap:clamp(1.8rem,4vw,3rem); }
.footer__id{ display:flex; flex-wrap:wrap; align-items:baseline; gap:1rem; justify-content:space-between; }
.footer__name{ font-size:clamp(2rem,7vw,5.5rem); font-weight:800; letter-spacing:-.05em; line-height:1; }
.footer__role{ color:var(--muted-2); }
.footer__nav{ display:flex; flex-wrap:wrap; gap:clamp(1rem,2.5vw,2.5rem); border-block:1px solid var(--line); padding-block:1.2rem; }
.footer__nav a{ color:var(--muted); transition:color .3s; }
.footer__nav a:hover{ color:var(--teal); }
.footer__end{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; }
.footer__copy{ color:var(--muted-2); letter-spacing:.08em; }
.footer__top{ display:inline-flex; align-items:center; gap:.5rem; color:var(--muted); transition:color .3s; }
.footer__top:hover{ color:var(--paper); }
.footer__top i{ font-style:normal; transition:transform .4s var(--ease); }
.footer__top:hover i{ transform:translateY(-4px); }

/* =========================================================
   MOTION PRIMITIVES
   ========================================================= */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:calc(var(--i,0) * 70ms); }
.reveal.is-in{ opacity:1; transform:none; }

.reveal-mask{ overflow:hidden; }
.reveal-mask > span{ display:inline-block; transform:translateY(110%); transition:transform 1s var(--ease) .2s; }
.reveal-mask.is-in > span{ transform:none; }

.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word > i{
  display:inline-block; font-style:inherit;
  transform:translateY(105%) rotate(3deg); opacity:0;
  transition:transform .95s var(--ease), opacity .7s var(--ease);
  transition-delay:calc(var(--w,0) * 45ms);
}
.is-in .word > i, .word.is-in > i{ transform:none; opacity:1; }

.char{ display:inline-block; transform:translateY(102%); transition:transform 1.05s var(--ease); transition-delay:calc(var(--c,0) * 26ms); }
.is-in .char{ transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .sec-head--split{ grid-template-columns:1fr; align-items:start; }
  .about__grid{ grid-template-columns:1fr; }
  .about__visual{ position:relative; top:0; max-width:460px; }
  .job{ grid-template-columns:1fr; }
  .job__head{ position:relative; top:0; }
  .contact__grid{ grid-template-columns:1fr 1fr; }
  .ccard--cv{ grid-column:span 2; }
}
@media (max-width:900px){
  .nav{ display:none; }
  .burger{ display:block; }
  .header .btn--pill{ display:none; }
  .cards{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero__inner{ grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr auto auto; }
  .hero__corner--tl{ grid-area:1/1; }
  .hero__corner--tr{ grid-area:1/2; }
  .hero__center{ grid-area:2/1/3/3; }
  .hero__corner--bl{ grid-area:3/1; }
  .hero__corner--br{ grid-area:3/2; }
  .hero__corner--bc{ grid-area:4/1/5/3; margin-top:1.5rem; }
  .hero__year{ margin-top:.8rem; }
}
@media (max-width:760px){
  /* below this width the headline breaks onto two lines instead of shrinking */
  .hero__title{ font-size:clamp(1.7rem,7.6vw,2.8rem); line-height:.98; gap:.15rem; }
  .hero__amp{ font-size:clamp(1.6rem,7.2vw,2.6rem); top:56%; }
  .hero__title .line{ white-space:normal; text-wrap:balance; letter-spacing:-.03em; }
  .hero__title .line--sub{ font-size:clamp(.8rem,3.4vw,1.05rem); letter-spacing:.16em; }
  .hero__lead{ font-size:.95rem; max-width:34ch; }
  .hero__img{ background-position:44% 26%; }
  .hero__veil{ background:
    radial-gradient(90% 46% at 50% 50%, rgba(5,8,10,.62) 0%, rgba(5,8,10,.34) 52%, rgba(5,8,10,.1) 82%),
    linear-gradient(180deg, rgba(5,8,10,.78) 0%, rgba(5,8,10,.18) 24%, rgba(5,8,10,.34) 60%, rgba(5,8,10,.95) 100%); }
}
@media (max-width:640px){
  .hero__corner--tr .dim{ display:none; }
  .contact__grid{ grid-template-columns:1fr; }
  .ccard--cv{ grid-column:auto; }
  .stats{ grid-template-columns:1fr 1fr; }
  .hero__corner .big{ font-size:1.35rem; }
  .footer__end{ flex-direction:column; align-items:flex-start; }
  .about__facts li{ grid-template-columns:1fr; gap:.2rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal,.reveal-mask > span,.word > i,.char{ opacity:1 !important; transform:none !important; }
  .grain{ animation:none; }
  .orb{ animation:none; }
  .marquee__track{ animation:none; }
}

.cv-head{ display:none; }

@media print{
  /* the whole palette flips by swapping the tokens */
  :root{
    --ink:#fff; --ink-2:#fff; --ink-3:#fff; --graphite:#fff;
    --paper:#101010; --muted:#3d3d3d; --muted-2:#6b6b6b;
    --line:rgba(0,0,0,.16); --line-2:rgba(0,0,0,.32);
    --teal:#0b7d76; --teal-deep:#0b7d76; --warm:#a6521d; --warm-soft:#a6521d;
    --sec-pad:1.1rem; --pad:0rem;
  }
  html,body{ background:#fff !important; color:#101010 !important; font-size:10.5pt; }

  .header,.menu,.loader,.grain,.cursor,.progress,.toast,
  .hero,.strip,.bigmail,.footer__top,.filters,.about__visual,
  .contact__bg,.hero__bokeh,.ccard--cv,.orb{ display:none !important; }

  .cv-head{ display:block; margin-bottom:1.4rem; }
  .cv-head h2{ font-size:26pt; font-weight:800; letter-spacing:-.04em; line-height:1; }
  .cv-head__role{ font-size:12pt; font-weight:600; color:#0b7d76; margin-top:.25rem; }
  .cv-head__meta{ font-family:var(--f-mono); font-size:8pt; letter-spacing:.08em; text-transform:uppercase; color:#555; margin-top:.5rem; }
  .cv-head__lead{ margin-top:.7rem; max-width:62ch; color:#3d3d3d; font-size:10pt; line-height:1.45; }

  .section{ padding-block:.7rem; border:0; background:#fff !important; }
  .about__grid,.sec-head--split{ display:block; }
  .about__body{ display:block; }
  .display--md{ font-size:13pt; margin-bottom:.4rem; max-width:100%; }
  .display--lg{ font-size:17pt; }
  .display--xl{ font-size:19pt; max-width:none; margin:.4rem 0 .6rem; }
  .lead{ font-size:10pt; max-width:none; }
  .sec-head{ margin-bottom:.8rem; }
  .sec-head__note{ font-size:9.5pt; }

  .cards,.timeline,.stack__grid,.clients__grid,.contact__grid{
    display:grid; gap:.5rem; background:none; border:0;
  }
  .cards{ grid-template-columns:1fr 1fr; }
  .stack__grid{ grid-template-columns:1fr 1fr; }
  .clients__grid{ grid-template-columns:repeat(4,1fr); }
  .contact__grid{ grid-template-columns:1fr 1fr; }
  .stats{ grid-template-columns:repeat(4,1fr); margin-top:1rem; }

  .card,.pack,.job,.ccard,.clients__grid li{
    background:#fff !important; border:1px solid rgba(0,0,0,.16); padding:.7rem .8rem;
    break-inside:avoid; page-break-inside:avoid; min-height:0; backdrop-filter:none;
  }
  .job{ display:grid; grid-template-columns:.8fr 1.4fr; gap:1rem; }
  .job__head{ position:static; padding:0; }
  .job__company{ font-size:14pt; }
  .job__role{ font-size:10pt; }
  .card__title,.pack__title{ font-size:12pt; }
  .card__list li,.job__list li,.pack__tags li{ font-size:9.5pt; }
  .pack__tags li{ border:1px solid rgba(0,0,0,.2); padding:.2rem .45rem; }
  .about__facts li{ padding:.45rem 0; }
  .stat b{ -webkit-text-fill-color:#101010; color:#101010; background:none; font-size:22pt; }
  .stat span{ font-size:8.5pt; }
  .ccard__value{ font-size:12pt; }
  .clients__grid li{ font-size:9.5pt; padding:.35rem .5rem; }
  .footer{ background:#fff !important; border-top:1px solid rgba(0,0,0,.16); padding-block:.8rem; }
  .footer__name{ font-size:16pt; }
  .footer__nav{ display:none; }

  .reveal,.word > i,.char,.reveal-mask > span{ opacity:1 !important; transform:none !important; }
  .card::before,.job::after,.ccard::before{ display:none; }
  #expertise{ page-break-before:auto; }
  #experience,#stack,#contact{ page-break-before:always; }
}