:root{
  --bg:#F6F3EC; --fg:#12110F; --muted:#6b675f; --line:rgba(18,17,15,.14);
  --violet:#5B3DF5; --lime:#C8F25A;
  --font:'Instrument Sans',system-ui,sans-serif; --mono:'DM Mono',ui-monospace,monospace;
  --pad:clamp(20px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html.lenis,html.lenis body{height:auto}
body{background:var(--bg);color:var(--fg);font-family:var(--font);overflow-x:hidden}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--violet)}
ul{list-style:none}
.mono,.eyebrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;text-transform:uppercase}
section{position:relative;padding:var(--pad)}
@media (hover:hover) and (pointer:fine){body,a{cursor:none}}

/* loader */
.loader{position:fixed;inset:0;z-index:100;background:var(--fg);color:var(--bg);display:flex;align-items:flex-end;justify-content:flex-end;padding:var(--pad)}
.loader__count{font-size:clamp(4rem,16vw,12rem);font-weight:700;line-height:.8}

/* cursor: small ring */
.cursor{position:fixed;top:0;left:0;z-index:90;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--violet);pointer-events:none}
@media (hover:none){.cursor{display:none}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad);mix-blend-mode:difference;color:#fff}
.nav__logo{font-weight:700}
.nav nav{display:flex;gap:6px;align-items:center}
.nav nav a{padding:8px 14px;font-size:.95rem}
.nav .pill{border:1px solid currentColor;border-radius:99px}

/* hero */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;gap:2.5rem;padding-top:140px;overflow:hidden}
.hero__title{font-size:clamp(2.8rem,8.6vw,8.4rem);line-height:.98;font-weight:700;letter-spacing:-.02em;position:relative;z-index:2}
.hero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;position:relative;z-index:2;border-top:1px solid var(--line);padding-top:1.5rem}
.hero__foot p{max-width:46ch;font-size:1.05rem;line-height:1.5;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:14px;background:var(--fg);color:var(--bg);padding:16px 26px;border-radius:99px;font-weight:500;transition:background .3s}
.btn i{font-style:normal;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--lime);color:#12110F;transition:transform .3s}
.btn:hover{background:var(--violet)}
.btn:hover i{transform:translateY(3px)}

/* headings */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:3rem;gap:1rem}
.section-head h2,.contact__title{font-size:clamp(2.4rem,7vw,6rem);letter-spacing:-.02em;line-height:1;font-weight:700}
.section-head .mono{color:var(--muted)}

/* projects list */
.projects{border-top:1px solid var(--line)}
.project{border-bottom:1px solid var(--line)}
.project a{display:grid;grid-template-columns:48px 1fr 190px 170px 60px 32px;gap:20px;align-items:center;padding:30px 0;transition:padding .4s cubic-bezier(.2,.8,.2,1),color .3s}
.project h3{font-size:clamp(1.4rem,2.8vw,2.4rem);font-weight:700;letter-spacing:-.015em;line-height:1.1}
.project p{color:var(--muted);margin-top:6px;max-width:52ch;font-size:.95rem}
.project__client{font-weight:500}
.project__n,.project__role,.project__year{color:var(--muted)}
.project__arrow{font-size:1.4rem;transition:transform .3s,color .3s;justify-self:end}
.projects:hover .project a{color:var(--muted)}
.projects .project a:hover{color:var(--fg);padding-left:16px}
.project a:hover .project__arrow{transform:translate(4px,-4px);color:var(--violet)}
.preview{position:fixed;top:0;left:0;width:260px;height:180px;border-radius:12px;overflow:hidden;pointer-events:none;z-index:40;opacity:0;scale:.8;background:var(--violet)}
.preview span{display:block;width:100%;height:100%;background:linear-gradient(135deg,rgba(255,255,255,.25),transparent 60%)}

/* clients */
.client-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.client-grid li{padding:clamp(28px,5vw,56px) 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:clamp(1rem,1.8vw,1.5rem);font-weight:700;letter-spacing:-.01em;text-align:center;color:var(--muted);transition:color .3s,background .3s}
.client-grid li:hover{color:var(--fg);background:rgba(91,61,245,.06)}
.client-grid li:first-child{color:var(--fg)}

/* about */
.about{min-height:100vh;display:flex;flex-direction:column;gap:2.5rem;justify-content:center;background:var(--fg);color:var(--bg)}
.about .mono{color:rgba(246,243,236,.6)}
.about__text{font-size:clamp(1.5rem,3.6vw,3.2rem);line-height:1.18;font-weight:500;letter-spacing:-.01em;max-width:24em}
.about__text .w{opacity:.2;display:inline-block;margin-right:.25em}
.portrait{position:absolute;top:var(--pad);right:var(--pad);width:clamp(140px,20vw,300px);aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--violet)}
.portrait img{width:100%;height:115%;object-fit:cover;display:block}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips li{border:1px solid rgba(246,243,236,.3);border-radius:99px;padding:9px 18px;font-size:.9rem;transition:background .3s,color .3s}
.chips li:hover{background:var(--lime);color:#12110F;border-color:var(--lime)}
.stats{display:flex;gap:clamp(2rem,6vw,6rem);flex-wrap:wrap}
.stats div{font-size:clamp(2.6rem,6vw,5rem);font-weight:700;line-height:1;color:var(--lime)}
.stats span{display:block;font:400 .75rem var(--mono);text-transform:uppercase;color:rgba(246,243,236,.6);margin-top:8px}
@media (max-width:700px){.portrait{position:relative;top:auto;right:auto;align-self:flex-end}}

/* contact */
.contact{min-height:90vh;display:flex;flex-direction:column;gap:2rem;justify-content:space-between;padding-top:120px;background:var(--violet);color:var(--bg)}
.contact__title{font-size:clamp(3rem,10vw,9.5rem)}
.contact__mail{align-self:flex-start;font-size:clamp(1.1rem,3vw,2.4rem);font-weight:500;border-bottom:2px solid var(--lime);padding-bottom:6px;transition:color .3s}
.contact__mail:hover{color:var(--lime)}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font:400 .8rem var(--mono);text-transform:uppercase}
footer a:hover{color:var(--lime)}

/* split text */
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em}
.char{display:inline-block;will-change:transform}

@media (max-width:900px){
  .project a{grid-template-columns:32px 1fr 24px;row-gap:6px}
  .project__client,.project__role,.project__year{grid-column:2}
  .project__arrow{grid-column:3;grid-row:1}
  .client-grid{grid-template-columns:repeat(2,1fr)}
  .nav nav a:not(.pill){display:none}
  }
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* experience */
.exp{border-top:1px solid var(--line)}
.exp__row{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:32px 0;border-bottom:1px solid var(--line)}
.exp__dates{color:var(--muted);padding-top:6px}
.exp__row h3{font-size:clamp(1.3rem,2.4vw,2rem);font-weight:700;letter-spacing:-.015em;line-height:1.15}
.exp__co{color:var(--violet);font-weight:500;margin:6px 0 12px}
.exp__pts{display:grid;gap:8px;max-width:70ch;color:var(--muted);line-height:1.5}
.exp__pts li{padding-left:16px;position:relative}
.exp__pts li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--lime);outline:1px solid var(--fg)}
@media (max-width:700px){.exp__row{grid-template-columns:1fr;gap:8px}}
.project a{grid-template-columns:48px 1fr 200px 170px 90px 32px}

/* ---- colour layer (home) ---- */
:root{--coral:#FF5A36;--sky:#7FD8FF;--amber:#FFB84D;--pink:#FF8FC7}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:1}
.hero::before{width:clamp(70px,9vw,140px);aspect-ratio:1;left:46%;top:20%;background:var(--sky)}
.hero::after{width:clamp(40px,5vw,80px);aspect-ratio:1;right:6%;bottom:30%;background:var(--amber)}
.hero__title em{background:linear-gradient(90deg,var(--violet),var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent}
.project a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--c,var(--violet));transition:width .35s cubic-bezier(.2,.8,.2,1);z-index:-1;opacity:.12}
.project a{position:relative;isolation:isolate}
.project a:hover::before{width:100%}
.project__n{display:inline-flex;align-items:center;gap:8px}
.project__n::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--c,var(--violet))}
.exp__pts li::before{background:var(--lime)}
.exp__row:nth-child(4n+2) .exp__pts li::before{background:var(--coral)}
.exp__row:nth-child(4n+3) .exp__pts li::before{background:var(--sky)}
.exp__row:nth-child(4n+4) .exp__pts li::before{background:var(--amber)}
.exp__row:nth-child(4n+2) .exp__co{color:#D63A12}
.exp__row:nth-child(4n+3) .exp__co{color:#0C7BA3}
.exp__row:nth-child(4n+4) .exp__co{color:#8A6A00}
.client-grid li:nth-child(4n+1):hover{background:rgba(91,61,245,.12)}
.client-grid li:nth-child(4n+2):hover{background:rgba(255,90,54,.14)}
.client-grid li:nth-child(4n+3):hover{background:rgba(200,242,90,.35)}
.client-grid li:nth-child(4n+4):hover{background:rgba(127,216,255,.3)}
.chips li:nth-child(4n+2):hover{background:var(--coral);border-color:var(--coral);color:#12110F}
.chips li:nth-child(4n+3):hover{background:var(--sky);border-color:var(--sky);color:#12110F}
.chips li:nth-child(4n+4):hover{background:var(--amber);border-color:var(--amber);color:#12110F}
.stats div:nth-child(2){color:var(--sky)}.stats div:nth-child(3){color:var(--pink)}
.contact{background:linear-gradient(135deg,var(--violet),#2563EB 70%,#5BE0D0)}
.btn i{background:linear-gradient(135deg,var(--lime),var(--sky))}
.loader{background:linear-gradient(135deg,var(--violet),#2563EB)}

/* ================= landing page v2 ================= */
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,4vw,60px);align-items:end;justify-content:initial;flex-direction:initial;padding-top:130px;}
.hero::before,.hero::after{display:none}
.hero__left{display:flex;flex-direction:column;gap:2rem;position:relative;z-index:2;align-self:end}
.hero__title{font-size:clamp(2.6rem,6.6vw,6.6rem);line-height:1;letter-spacing:-.0225em}
.eyebrow{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:99px;align-self:flex-start;color:var(--fg)}
.live{width:8px;height:8px;border-radius:50%;background:#1fbf6a;box-shadow:0 0 0 0 rgba(31,191,106,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(31,191,106,0)}100%{box-shadow:0 0 0 0 rgba(31,191,106,0)}}
.rot{display:block;position:relative;height:1.16em;overflow:hidden}
.rot__w{position:absolute;left:0;top:0;white-space:nowrap;background:linear-gradient(90deg,var(--violet),var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.1em;transform:translateY(110%)}
.rot__w:nth-child(2){background-image:linear-gradient(90deg,#2563EB,#5BE0D0)}
.rot__w:nth-child(3){background-image:linear-gradient(90deg,var(--coral),var(--amber))}
.rot__w:nth-child(4){background-image:linear-gradient(90deg,#C2185B,var(--violet))}
.hero__foot{border-top:0;padding-top:0}
.hero__art{position:relative;z-index:2;display:grid;place-items:center;align-self:center;min-height:clamp(380px,60vh,640px)}
.pcard{width:min(78%,380px);aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:var(--violet);rotate:-4deg;box-shadow:16px 16px 0 var(--lime);transition:rotate .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s}
.pcard:hover{rotate:0deg;box-shadow:22px 22px 0 var(--coral)}
.pcard img{width:100%;height:100%;object-fit:cover;display:block}
.chip{position:absolute;z-index:3}
.chip b{display:block;font-size:clamp(1.3rem,2.4vw,2rem);letter-spacing:-.02em;line-height:1;padding:14px 18px;border-radius:18px;box-shadow:0 12px 30px rgba(18,17,15,.14);animation:bob 5s ease-in-out infinite}
.chip small{display:block;font:400 .66rem var(--mono);text-transform:uppercase;letter-spacing:.03em;margin-top:6px;opacity:.8;max-width:13em}
.c-lime{left:-2%;top:12%}.c-lime b{background:var(--lime);color:#12110F}
.c-coral{right:-2%;top:30%}.c-coral b{background:var(--coral);color:#12110F;animation-delay:-1.2s}
.c-sky{left:2%;bottom:10%}.c-sky b{background:var(--sky);color:#12110F;animation-delay:-2.4s}
.c-violet{right:2%;bottom:2%}.c-violet b{background:var(--violet);color:#fff;animation-delay:-3.4s}
@keyframes bob{50%{transform:translateY(-10px)}}
@media (max-width:900px){.hero{grid-template-columns:1fr}.hero__art{min-height:380px;margin-top:1rem}}

/* ================= clients v2: wordmark marquee ================= */
.clients{padding-left:0;padding-right:0;overflow:hidden}
.clients .section-head{padding:0 var(--pad)}
.logos{display:grid;gap:18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos__row{overflow:hidden;white-space:nowrap}
.logos__track{display:inline-flex;will-change:transform}
.lg{display:inline-flex;align-items:center;gap:.4em;padding:.32em .85em;margin-right:18px;border-radius:99px;font-size:clamp(1.6rem,4.2vw,3.6rem);font-weight:700;letter-spacing:-.0175em;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.lg::before{content:"✦";font-size:.5em;opacity:.7}
.lg:hover{transform:translateY(-6px) rotate(-2deg);box-shadow:0 18px 30px rgba(18,17,15,.18)}
.lg:nth-child(6n+1){background:var(--violet);color:#fff}
.lg:nth-child(6n+2){background:var(--lime);color:#12110F}
.lg:nth-child(6n+3){border:2px solid var(--fg);background:transparent;font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:-.005em;font-size:clamp(1.3rem,3.4vw,2.9rem)}
.lg:nth-child(6n+4){background:var(--coral);color:#12110F}
.lg:nth-child(6n+5){background:var(--sky);color:#12110F}
.lg:nth-child(6n){background:var(--fg);color:var(--bg)}
.logos__row:nth-child(2) .lg:nth-child(6n+1){background:var(--amber);color:#12110F}
.logos__row:nth-child(2) .lg:nth-child(6n+2){background:var(--fg);color:var(--bg)}
.logos__row:nth-child(2) .lg:nth-child(6n+4){background:var(--violet);color:#fff}
.client-grid{display:none}

/* ================= consistency across pages ================= */
.chero__idx{color:var(--fg);align-self:flex-start}
body.case .contact{min-height:70vh;margin-top:0}
body.case .next{margin-top:clamp(60px,8vw,120px)}

/* ================= hero: self-drawing wireframe scene ================= */
.hero__left{align-self:center}
.hero__art{min-height:0;align-self:center;display:block}
.sketch{width:100%;height:auto;display:block;filter:drop-shadow(0 28px 44px rgba(18,17,15,.12));will-change:transform}
.sketch text{font-family:var(--mono)}
.sketch .dr{fill:none;stroke:var(--fg);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sketch .dr.an{stroke:#FF5A36;stroke-width:2}
.sketch .fl,.sketch .note,.sketch .sw,.sketch .aa,.sketch .cur,.sketch .selg,.sketch .pencil{opacity:0}


/* ================= new cursor: dot + trailing ring ================= */
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;border-radius:50%;opacity:0;mix-blend-mode:difference;transition:opacity .3s}
html.cursor-on .cursor,html.cursor-on .cursor-dot{opacity:1}
.cursor{z-index:90;width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid #fff;background:transparent;display:grid;place-items:center;
  transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),margin .35s cubic-bezier(.2,.8,.2,1),background .25s,opacity .3s}
.cursor-dot{z-index:91;width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff}
.cursor__label{font:500 .62rem var(--mono);color:#000;text-transform:uppercase;letter-spacing:.06em;opacity:0;transition:opacity .2s}
.cursor.is-link{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(255,255,255,.9)}
.cursor.is-view{width:92px;height:92px;margin:-46px 0 0 -46px;background:#fff}
.cursor.is-view .cursor__label{opacity:1}
.cursor.is-down{width:30px;height:30px;margin:-15px 0 0 -15px}
@media (hover:hover) and (pointer:fine){button,summary{cursor:none}}
@media (hover:none){.cursor,.cursor-dot{display:none}}

/* ================= header: blur background on scroll ================= */
.nav{mix-blend-mode:normal;color:var(--fg);border-bottom:1px solid transparent;transition:background .35s,border-color .35s,padding .35s,backdrop-filter .35s}
.nav.is-scrolled{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line);padding-top:12px;padding-bottom:12px}
.nav .pill:hover{background:var(--fg);color:var(--bg)}
.nav__burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:transparent;flex-direction:column;justify-content:center;align-items:center;gap:5px;color:inherit}
.nav__burger span{display:block;width:16px;height:2px;background:currentColor;border-radius:2px;transition:transform .35s,opacity .3s}
.nav.is-open .nav__burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav.is-open .nav__burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.nav.is-open{background:var(--bg);border-bottom-color:var(--line)}

/* ================= projects: parallax showcase ================= */
.work{padding-bottom:clamp(40px,6vw,80px)}
.pjs{display:flex;flex-direction:column;gap:clamp(70px,11vw,170px);margin-top:1rem}
.pj a{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center;position:relative}
.pj__media{grid-column:1/8;grid-row:1;position:relative;z-index:1;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.pj--r .pj__media{grid-column:6/13}
.pj__text{grid-column:8/13;grid-row:1;position:relative;z-index:2;display:flex;flex-direction:column;gap:16px}
.pj--r .pj__text{grid-column:1/6}
.pj__frame{position:relative;aspect-ratio:4/3;border-radius:24px;overflow:hidden;background:var(--c)}
.pj__img{position:absolute;left:0;top:-15%;width:100%;height:130%;object-fit:cover;display:block;will-change:transform}
.pj__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--c),transparent 65%);mix-blend-mode:multiply;opacity:.4;pointer-events:none}
.pj__tint{position:absolute;inset:0;transform:translate(5%,6%);border-radius:24px;background:var(--c);opacity:.55;z-index:-1;will-change:transform}
.pj__num{font-size:clamp(5rem,12vw,11rem);font-weight:700;letter-spacing:-.03em;line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--fg);margin-left:-32%;will-change:transform}
.pj--r .pj__num{margin-left:0;margin-right:-32%;align-self:flex-end}
.pj__meta{color:var(--muted)}
.pj__title{font-size:clamp(1.8rem,3.6vw,3.4rem);line-height:1.02;letter-spacing:-.02em;font-weight:700}
.pj__desc{color:var(--muted);max-width:30em;line-height:1.5}
.pj__stat{display:flex;align-items:baseline;gap:12px;border-top:1px solid var(--line);padding-top:16px;flex-wrap:wrap}
.pj__stat b{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.025em;color:var(--a);line-height:1}
.pj__stat span{color:var(--muted);font-size:.9rem}
.pj__cta{display:inline-flex;align-items:center;gap:12px;font-weight:600}
.pj__cta i{font-style:normal;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--c);color:#12110F;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.pj a:hover .pj__cta i{transform:translateX(6px) rotate(-45deg)}
.pj a:hover .pj__media{transform:scale(1.015)}

/* ================= responsive ================= */
img,svg{max-width:100%}
.section-head{flex-wrap:wrap}
@media (max-width:900px){
  .nav__burger{display:flex}
  .nav nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:6px var(--pad) 22px;background:var(--bg);border-bottom:1px solid var(--line);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s}
  .nav.is-open nav{clip-path:inset(0);visibility:visible;transition:clip-path .45s cubic-bezier(.2,.8,.2,1)}
  .nav nav a{display:block !important;padding:15px 0;font-size:1.25rem;border-bottom:1px solid var(--line)}
  .nav nav .pill{border:1px solid currentColor;border-radius:99px;text-align:center;margin-top:14px;border-bottom:1px solid currentColor}
  .pj a{display:flex;flex-direction:column;gap:22px;align-items:stretch}
  .pj__media,.pj--r .pj__media,.pj__text,.pj--r .pj__text{grid-column:auto}
  .pj__num,.pj--r .pj__num{margin:0;align-self:flex-start;font-size:clamp(4rem,18vw,6rem)}
  .contact{min-height:80vh}
}
@media (max-width:700px){
  :root{--pad:20px}
  .hero{padding-top:104px;min-height:auto;gap:2rem;padding-bottom:40px}
  .hero__title{font-size:clamp(2rem,9vw,3.4rem)}
  .eyebrow{font-size:.68rem}
  .lg{margin-right:12px}
  .about{min-height:auto;padding-top:60px;padding-bottom:60px}
  .about__text{font-size:clamp(1.35rem,6vw,1.9rem)}
  .stats{gap:1.8rem}
  .contact__title{font-size:clamp(2.4rem,13vw,4rem)}
  .contact__mail{font-size:clamp(1rem,4.8vw,1.4rem);word-break:break-all}
  footer{flex-direction:column;gap:.6rem}
  .loader__count{font-size:34vw}
}


/* ================= projects: professional card list ================= */
.plist-filters{display:flex;gap:8px;flex-wrap:wrap;margin:-1rem 0 1.8rem}
.plist-filters button{border:1px solid var(--line);background:transparent;border-radius:99px;padding:9px 18px;font:500 .86rem var(--font);color:var(--muted);transition:background .25s,color .25s,border-color .25s}
.plist-filters button:hover{color:var(--fg);border-color:var(--fg)}
.plist-filters button.is-on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.plist{display:flex;flex-direction:column;gap:16px}
.pitem__in{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(18px,3vw,36px);padding:clamp(16px,2vw,24px);background:#fff;border:1px solid var(--line);border-radius:22px;position:relative;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s}
.pitem__in::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:4px;border-radius:0 4px 4px 0;background:var(--a);transform:scaleY(.3);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.pitem__in:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--a) 45%,var(--line));box-shadow:0 24px 50px -26px rgba(18,17,15,.28)}
.pitem__in:hover::before{transform:scaleY(1)}
.pitem__side{display:flex;flex-direction:column;gap:10px;align-self:start}
.pitem__media{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--c)}
.pitem__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.pitem__in:hover .pitem__media img{transform:scale(1.08)}
.pitem__media::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--c),transparent 60%);mix-blend-mode:multiply;opacity:.35;pointer-events:none}
.pitem__n{position:absolute;left:10px;top:10px;z-index:2;background:#fff;color:#12110F;padding:5px 10px;border-radius:99px}
.pitem__chip{align-self:flex-start;border:1px solid var(--line);color:var(--muted);padding:5px 12px;border-radius:99px}
.pitem__body{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px);min-width:0}
.pitem__head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.pitem__meta{display:flex;flex-wrap:wrap;gap:4px 18px;color:var(--muted)}
.pitem__meta span:first-child{color:var(--fg)}
.pitem__cta{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.92rem}
.pitem__cta i{font-style:normal;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#12110F;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.pitem__in:hover .pitem__cta i{transform:translateX(5px) rotate(-45deg)}
.pitem__body>h3{font-size:clamp(1.5rem,2.8vw,2.5rem);letter-spacing:-.0225em;line-height:1.02;font-weight:700}
.pitem__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,40px);border-top:1px solid var(--line);padding-top:14px}
.pitem__cols h4{color:var(--a);margin-bottom:6px;font-weight:400}
.pitem__cols p{color:#52514e;line-height:1.5;font-size:.94rem}
.pitem__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;margin-top:auto;border-top:1px solid var(--line);padding-top:14px}
.pitem__stats{display:flex;gap:clamp(16px,3vw,40px);flex-wrap:wrap}
.pitem__stats b{display:block;font-size:clamp(1.4rem,2.4vw,2.1rem);letter-spacing:-.025em;line-height:1;color:var(--a)}
.pitem__stats span{display:block;font-size:.76rem;color:var(--muted);margin-top:4px;max-width:12em;line-height:1.3}
.pitem__tags{display:flex;flex-wrap:wrap;gap:6px}
.pitem__tags li{border:1px solid var(--line);border-radius:99px;padding:4px 11px;font-size:.74rem;color:var(--muted)}
@media (max-width:860px){
  .pitem__in{grid-template-columns:96px minmax(0,1fr);gap:14px;border-radius:18px}
  .pitem__chip{display:none}
  .pitem__cols{grid-template-columns:1fr}
}
@media (max-width:520px){
  .pitem__in{grid-template-columns:1fr}
  .pitem__media{aspect-ratio:16/9}
}

/* ---- more breathing room in project cards and section headings ---- */
.section-head{margin-bottom:clamp(2.2rem,4vw,3.4rem);gap:1.2rem}
.plist-filters{margin:-.4rem 0 2.4rem}
.plist{gap:22px}
.pitem__in{padding:clamp(22px,2.6vw,34px);gap:clamp(22px,3.4vw,48px)}
.pitem__body{gap:clamp(20px,2.4vw,30px)}
.pitem__head{padding-bottom:4px}
.pitem__meta{gap:6px 22px;line-height:1.5}
.pitem__body>h3{line-height:1.12;letter-spacing:-.02em;margin:2px 0 4px}
.pitem__cols{gap:clamp(20px,3.6vw,56px);padding-top:22px}
.pitem__cols h4{margin-bottom:12px;letter-spacing:.05em}
.pitem__cols p{line-height:1.65}
.pitem__foot{padding-top:22px;gap:20px 32px}
.pitem__stats{gap:clamp(22px,3.6vw,52px)}
.pitem__stats span{margin-top:8px;line-height:1.4}
.pitem__tags{gap:8px}
@media (max-width:860px){.pitem__in{padding:18px}.pitem__body{gap:18px}}

/* ---- background design behind the Work section ---- */
.work{position:relative;isolation:isolate;overflow:clip}
.work::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:radial-gradient(rgba(18,17,15,.2) 1.3px,transparent 1.4px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 70% at 50% 18%,#000 25%,transparent 78%);mask-image:radial-gradient(120% 70% at 50% 18%,#000 25%,transparent 78%)}
.work::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(34% 22% at 88% 12%,rgba(91,61,245,.28),transparent 70%),
    radial-gradient(30% 20% at 6% 46%,rgba(255,90,54,.22),transparent 70%),
    radial-gradient(36% 22% at 94% 78%,rgba(127,216,255,.34),transparent 70%),
    radial-gradient(28% 18% at 10% 96%,rgba(200,242,90,.32),transparent 70%)}
.work .section-head{position:relative}
.work .section-head::before{content:"WORK";position:absolute;right:-.02em;top:50%;transform:translateY(-56%);z-index:-1;font-size:clamp(7rem,22vw,20rem);font-weight:700;letter-spacing:.01em;line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(18,17,15,.14);pointer-events:none;white-space:nowrap}

/* ---- UX content version: supporting line under the hero headline ---- */
.hero__sub{max-width:34em;font-size:clamp(1.02rem,1.5vw,1.25rem);line-height:1.55;color:#3f3d39}
.hero__title{font-size:clamp(2.4rem,5.6vw,5.6rem);line-height:1.04}