/* ============ MELIORA — Landing page ============ */
/* tokens + fonts come from meliora.css (loaded first) */

:root{
  --reveal-r:200px;
  --mx:-999px; --my:-999px;
  --accent:var(--vermilion);
  --nav-h:70px;            /* sticky nav height — sections account for it */
}

body{overflow-x:hidden;cursor:default;}
p,h1,h2,h3,h4,h5,h6,span,small,strong,em,li,div,section,article{cursor:default;}
a,button,[role="button"],label,select,input[type="range"],input[type="checkbox"],input[type="radio"]{cursor:pointer;}
a *,button *,[role="button"] *{cursor:pointer;}
input,textarea{cursor:text;}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--gut);}
section{position:relative;}
#hero,
#services,
#work,
#process,
#studio,
#contact{scroll-margin-top:86px;}

/* shared display heading */
.display{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:.92;
  margin:0;text-wrap:balance;}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);display:inline-flex;align-items:center;gap:12px;margin:0;}
.kicker::before{content:"";width:30px;height:1px;background:currentColor;opacity:.5;}
.kicker .num{color:var(--accent);}
.lead{font-size:clamp(18px,2vw,23px);line-height:1.45;color:var(--ink);max-width:54ch;text-wrap:pretty;}

/* buttons */
.btn{font-family:var(--text);font-weight:600;font-size:15px;padding:15px 28px;border-radius:99px;
  text-decoration:none;display:inline-flex;align-items:center;gap:10px;border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,color .25s,box-shadow .3s;cursor:pointer;}
.btn.solid{background:var(--ink);color:var(--paper);}
.btn.solid:hover{transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(22,20,15,.7);}
.btn.ghost{border-color:var(--line);color:var(--ink);background:transparent;}
.btn.ghost:hover{border-color:var(--ink);transform:translateY(-3px);}
.btn .arr{transition:transform .25s;}
.btn:hover .arr{transform:translate(3px,-3px);}

/* ============ cursor blob (signature) ============ */
.cursor-dot{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;
  background:var(--ink);pointer-events:none;z-index:10000;opacity:0;
  transform:translate(-50%,-50%);transition:opacity .18s ease,width .2s ease,height .2s ease;
  will-change:transform;}
.cursor-dot.on{opacity:1;}
.cursor-blob{position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;
  background:conic-gradient(from 0deg,#FF4D2E,#FFB323,#C2EA4B,#00B39A,#2440E8,#FF6FB5,#FF4D2E);
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%) scale(1);mix-blend-mode:normal;
  transition:opacity .3s;opacity:0;filter:blur(.3px);}
.cursor-blob.on{opacity:1;}
.cursor-blob.grow{transform:translate(-50%,-50%) scale(2.4);}
.custom-cursor-on,
.custom-cursor-on *{cursor:none!important;}
@media(hover:none){.cursor-dot,.cursor-blob{display:none;}}
@media(prefers-reduced-motion:reduce){.cursor-blob{display:none;}}

/* ============ pixel-art cursor (process steps) ============ */
/* a chunky pixel icon that snaps to the cursor while hovering a process step,
   tinted with that step's accent — the brand's blocky geometry, in motion.
   Outer node tracks the cursor instantly; inner art handles the pop, so the
   icon stays glued to the pointer without trailing. */
.pixel-cursor{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;
  will-change:transform;}
.pixel-cursor__art{display:block;width:34px;height:34px;color:var(--accent);
  image-rendering:pixelated;opacity:0;transform-origin:top left;
  transform:translate(13px,13px) scale(.55) rotate(-8deg);
  transition:opacity .14s ease,transform .24s cubic-bezier(.2,1.6,.4,1);
  filter:drop-shadow(0 2px 5px rgba(22,20,15,.28));}
.pixel-cursor.on .pixel-cursor__art{opacity:1;
  transform:translate(13px,13px) scale(1) rotate(0deg);}
@media(hover:none){.pixel-cursor{display:none;}}
@media(prefers-reduced-motion:reduce){.pixel-cursor{display:none;}}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);
  background:color-mix(in srgb,var(--paper) 80%,transparent);border-bottom:1px solid var(--line);
  transition:background .4s,border-color .4s;}
.nav .inner{display:flex;align-items:center;justify-content:space-between;height:70px;}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;
  font-size:21px;letter-spacing:-.03em;text-decoration:none;color:inherit;}
.brand .logo{width:28px;height:28px;}
.nav-links{display:flex;gap:30px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;}
.nav-links a{text-decoration:none;color:var(--muted);position:relative;padding:4px 0;transition:color .2s;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--accent);
  transition:width .3s cubic-bezier(.2,.8,.2,1);}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{width:100%;}
/* scrollspy: the link whose section is in view reads as "you are here" */
.nav-links a.is-active{color:var(--ink);}
.nav-links a.is-active::after{width:100%;}
.nav .btn{padding:11px 20px;font-size:13px;}
@media(max-width:900px){.nav-links{display:none;}}

/* ============ HERO ============ */
/* Hero fills exactly one screen minus the sticky nav, so the first scroll
   lands the next section squarely in view. */
.hero{min-height:calc(100svh - var(--nav-h));overflow:hidden;
  padding-block:clamp(28px,4vh,56px);display:flex;
  transition:background .5s,color .5s;}
.hero .inner{position:relative;z-index:2;width:100%;
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(20px,3.5vh,44px);}
/* wordmark + supporting copy form the centered mass between meta and ruler */
.hero-core{display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vh,40px);
  flex:1;min-height:0;}
.hero-spot{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle var(--reveal-r) at var(--mx) var(--my),
    color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%);
  display:none;opacity:0;transition:opacity .4s;}
.hero.lit .hero-spot{opacity:1;}
.hero-orbs{position:absolute;inset:-14% -8%;z-index:1;pointer-events:none;overflow:hidden;
  filter:blur(34px);opacity:.58;}
.hero-orb{position:absolute;width:clamp(140px,20vw,280px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, var(--orb-c,#FF4D2E) 0 18%, transparent 68%);
  mix-blend-mode:multiply;opacity:.46;will-change:transform;}
.orb-a{--orb-c:#FF4D2E;left:6%;top:16%;animation:heroOrbA 18s ease-in-out infinite alternate;}
.orb-b{--orb-c:#2440E8;right:8%;top:10%;animation:heroOrbB 22s ease-in-out infinite alternate;}
.orb-c{--orb-c:#00B39A;left:44%;bottom:8%;animation:heroOrbC 26s ease-in-out infinite alternate;}
@keyframes heroOrbA{
  from{transform:translate3d(-4vw,2vh,0) scale(.92);}
  to{transform:translate3d(18vw,13vh,0) scale(1.18);}
}
@keyframes heroOrbB{
  from{transform:translate3d(5vw,0,0) scale(1);}
  to{transform:translate3d(-20vw,18vh,0) scale(.86);}
}
@keyframes heroOrbC{
  from{transform:translate3d(-8vw,8vh,0) scale(.82);}
  to{transform:translate3d(12vw,-15vh,0) scale(1.12);}
}

.hero-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}

/* the painted wordmark — the colored M is the source the word grows from */
.hero-word{position:relative;display:flex;align-items:baseline;gap:.01em;line-height:.8;margin:0;
  font-family:var(--display);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(84px,21vw,300px);cursor:default;}

/* the M, shown as pure color-field geometry, baseline-aligned with the word.
   The glyph sits at y20–100 inside a 120 viewBox, so the box has ~16.7% empty
   space below it — we translate the box down by that share so the M's visual
   bottom lands exactly on the text baseline, level with "eliora". */
.hero-initial{flex:none;width:.92em;height:.92em;align-self:baseline;
  margin-right:-.085em;margin-left:-.05em;overflow:visible;
  transform:translateY(15.3%);
  -webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);
  animation:mRise 1s cubic-bezier(.2,.75,.2,1) .15s both;}
@keyframes mRise{
  from{-webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0);}
  to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);}}

/* the rest of the word keeps the cursor-paint reveal */
.hero-rest{position:relative;display:inline-block;}
.hero-rest .base{color:var(--ink);transition:color .5s;}
.hero-rest .paint{position:absolute;inset:0;
  background:linear-gradient(115deg,#FF4D2E,#FF6FB5 28%,#FFB323 46%,#C2EA4B 60%,#00B39A 74%,#2440E8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-mask:radial-gradient(circle var(--reveal-r) at var(--mx) var(--my),#000 0,#000 58%,transparent 80%);
  mask:radial-gradient(circle var(--reveal-r) at var(--mx) var(--my),#000 0,#000 58%,transparent 80%);
  pointer-events:none;}
.hero-rest .paint.auto{opacity:.88;
  -webkit-mask-image:radial-gradient(circle,#000 0,#000 46%,transparent 76%);
  mask-image:radial-gradient(circle,#000 0,#000 46%,transparent 76%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:clamp(184px,24vw,360px) clamp(184px,24vw,360px);
  mask-size:clamp(184px,24vw,360px) clamp(184px,24vw,360px);}
.hero-rest .paint.auto-a{animation:heroTextRevealA 14s ease-in-out infinite;}
.hero-rest .paint.auto-b{opacity:.65;
  -webkit-mask-size:clamp(140px,18vw,280px) clamp(140px,18vw,280px);
  mask-size:clamp(140px,18vw,280px) clamp(140px,18vw,280px);
  animation:heroTextRevealB 18s ease-in-out infinite;}
@keyframes heroTextRevealA{
  0%{-webkit-mask-position:-30% 62%;mask-position:-30% 62%;}
  25%{-webkit-mask-position:8% 28%;mask-position:8% 28%;}
  52%{-webkit-mask-position:54% 56%;mask-position:54% 56%;}
  78%{-webkit-mask-position:90% 30%;mask-position:90% 30%;}
  100%{-webkit-mask-position:128% 62%;mask-position:128% 62%;}
}
@keyframes heroTextRevealB{
  0%{-webkit-mask-position:112% 12%;mask-position:112% 12%;}
  28%{-webkit-mask-position:74% 72%;mask-position:74% 72%;}
  56%{-webkit-mask-position:32% 34%;mask-position:32% 34%;}
  82%{-webkit-mask-position:-4% 70%;mask-position:-4% 70%;}
  100%{-webkit-mask-position:-28% 48%;mask-position:-28% 48%;}
}

.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;}
.hero-copy{max-width:34ch;}
.hero-copy h2{font-family:var(--display);font-weight:700;font-size:clamp(24px,3.2vw,40px);
  letter-spacing:-.03em;line-height:1.02;margin:0 0 16px;}
.hero-copy h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);letter-spacing:0;}
.hero-copy p{margin:0;color:var(--muted);font-size:17px;line-height:1.5;max-width:42ch;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;}
.hero-hint{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:10px;align-self:flex-end;}
.hero-hint .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);
  animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.4}}

.hero-ruler{display:flex;flex-wrap:wrap;gap:8px 30px;padding-top:22px;
  border-top:1px solid var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);transition:border-color .5s;}
.hero-ruler b{color:var(--ink);font-weight:700;transition:color .5s;}

/* ---- DARK / SPECTRUM hero variant ---- */
.hero[data-hero="spectrum"]{background:var(--ink);color:var(--paper);}
.hero[data-hero="spectrum"] .hero-word .base{color:var(--paper);}
.hero[data-hero="spectrum"] .hero-meta,
.hero[data-hero="spectrum"] .hero-hint{color:rgba(244,241,234,.55);}
.hero[data-hero="spectrum"] .hero-copy p{color:rgba(244,241,234,.7);}
.hero[data-hero="spectrum"] .hero-ruler{border-top-color:rgba(244,241,234,.4);color:rgba(244,241,234,.55);}
.hero[data-hero="spectrum"] .hero-ruler b{color:var(--paper);}
.hero[data-hero="spectrum"] .btn.solid{background:var(--paper);color:var(--ink);}
.hero[data-hero="spectrum"] .btn.ghost{border-color:rgba(244,241,234,.3);color:var(--paper);}
.hero[data-hero="spectrum"] .btn.ghost:hover{border-color:var(--paper);}
.hero[data-hero="spectrum"] .hero-spot{
  background:radial-gradient(circle var(--reveal-r) at var(--mx) var(--my),
    color-mix(in srgb,var(--accent) 30%,transparent),transparent 70%);mix-blend-mode:screen;}
.hero[data-hero="spectrum"] .hero-orb{mix-blend-mode:screen;opacity:.5;}

/* ============ MARQUEE / clients ============ */
.marquee{border-block:1px solid var(--line);padding-block:26px;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee .track{display:flex;gap:64px;width:max-content;animation:scroll 32s linear infinite;}
.marquee:hover .track{animation-play-state:paused;}
.marquee .item{font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,34px);
  letter-spacing:-.02em;color:var(--muted);opacity:.55;transition:opacity .25s,color .25s;white-space:nowrap;
  display:flex;align-items:center;gap:14px;}
.marquee .item:hover{opacity:1;color:var(--ink);}
.marquee .item .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:0 0 auto;}
@keyframes scroll{to{transform:translateX(-50%)}}
.clients-label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);text-align:center;padding-top:clamp(40px,6vw,64px);}

/* ============ section frame ============ */
.section{padding-block:clamp(72px,11vw,150px);border-top:1px solid var(--line);}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;
  flex-wrap:wrap;margin-bottom:clamp(40px,6vw,64px);}
.section-head .display{font-size:clamp(34px,5.4vw,64px);}
.section-head p.note{color:var(--muted);max-width:38ch;margin:0;font-size:16px;}

/* ============ SERVICES (bento) ============ */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;}
.svc{position:relative;border:1px solid var(--line);border-radius:22px;padding:30px;overflow:hidden;
  background:#fff;display:flex;flex-direction:column;min-height:260px;isolation:isolate;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s;cursor:default;}
.svc::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s;
  background:var(--c,var(--accent));}
.svc:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px color-mix(in srgb,var(--c) 80%,#000);
  border-color:transparent;}
.svc:hover::before{opacity:1;}
.svc .svc-ico{width:54px;height:54px;color:var(--ink);transition:color .4s,transform .5s cubic-bezier(.2,.8,.2,1);}
.svc:hover .svc-ico{color:#fff;transform:rotate(-6deg) scale(1.08);}
.svc h3{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em;
  margin:auto 0 10px;transition:color .4s;}
.svc p{margin:0;color:var(--muted);font-size:15px;line-height:1.5;transition:color .4s;max-width:34ch;}
.svc .svc-num{position:absolute;top:26px;right:30px;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;color:var(--muted);transition:color .4s;}
.svc:hover h3,.svc:hover p,.svc:hover .svc-num{color:#fff;}
.svc:hover p{color:rgba(255,255,255,.82);}
.svc:hover .svc-num{color:rgba(255,255,255,.6);}
/* dark text colors for light accents */
.svc[data-light]:hover h3,.svc[data-light]:hover .svc-ico,.svc[data-light]:hover .svc-num{color:var(--ink);}
.svc[data-light]:hover p{color:rgba(22,20,15,.7);}
.svc[data-light]:hover .svc-num{color:rgba(22,20,15,.55);}
.svc.big{grid-column:span 6;}
.svc.reg{grid-column:span 3;}
.svc.wide{grid-column:span 4;}
@media(max-width:900px){.svc.big{grid-column:span 12;}.svc.reg,.svc.wide{grid-column:span 6;}}
@media(max-width:560px){.svc.reg,.svc.wide,.svc.big{grid-column:span 12;}}

/* feature svc with live art */
.svc.feature{grid-column:span 6;background:var(--ink);color:var(--paper);}
.svc.feature h3,.svc.feature .svc-num{color:var(--paper);}
.svc.feature p{color:rgba(244,241,234,.65);}
.svc.feature::before{display:none;}
.svc.feature .feat-art{position:absolute;right:-10%;bottom:-15%;width:60%;opacity:.9;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.svc.feature:hover .feat-art{transform:rotate(8deg) scale(1.06);}
.svc.feature:hover{transform:translateY(-6px);}

/* ---- Services as a single full-screen panel ---- */
/* Fills one full screen; top padding clears the pinned sticky nav so the
   whole section reads at once when scrolled to. The bento stretches to use
   the leftover height, its two rows sharing the space evenly. */
#services{display:flex;flex-direction:column;min-height:100svh;
  padding-block:calc(var(--nav-h) + clamp(20px,2.4vh,34px)) clamp(20px,2.4vh,34px);}
#services .wrap{flex:1;display:flex;flex-direction:column;min-height:0;}
#services .section-head{margin-bottom:clamp(20px,2.6vh,36px);}
/* keep the heading from eating the height the cards need */
#services .section-head .display{font-size:clamp(30px,4vw,52px);}
#services .bento{flex:1;min-height:0;grid-auto-rows:1fr;}
#services .svc{min-height:0;padding:clamp(22px,2.4vw,30px);}

/* Full-screen panels only make sense when there's room. On narrow screens the
   bento reflows into more rows, and on short viewports the content would crush —
   so we release hero + services back to natural flow and let them scroll. */
@media (max-width:900px), (max-height:680px){
  .hero{min-height:0;padding-block:clamp(40px,8vw,72px);}
  .hero .inner{justify-content:flex-start;}
  .hero-core{flex:0 1 auto;}
  #services{min-height:0;display:block;
    padding-block:clamp(72px,11vw,150px);}
  #services .wrap{display:block;}
  #services .bento{flex:none;grid-auto-rows:auto;}
  #services .svc{min-height:240px;}
}

/* ============ WORK / case studies ============ */
.work-list{display:flex;flex-direction:column;gap:18px;}
.work{position:relative;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#fff;
  display:grid;grid-template-columns:1fr 1.05fr;align-items:stretch;min-height:340px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;}
.work:hover{transform:translateY(-5px);box-shadow:0 32px 60px -34px rgba(22,20,15,.5);}
.work:nth-child(even){grid-template-columns:1.05fr 1fr;}
.work:nth-child(even) .work-art{order:-1;}
.work-info{padding:clamp(30px,4vw,52px);display:flex;flex-direction:column;justify-content:space-between;gap:30px;}
.work-tags{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);}
.work-tags span{border:1px solid var(--line);border-radius:99px;padding:5px 12px;}
.work-info h3{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.6vw,46px);
  letter-spacing:-.03em;line-height:1;margin:18px 0 14px;}
.work-info .desc{color:var(--muted);font-size:16px;line-height:1.5;margin:0;max-width:40ch;}
.work-foot{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.work-foot .go{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:700;
  transition:gap .25s;}
.work:hover .work-foot .go{gap:14px;}

/* art panel — grayscale until hover reveals color */
.work-art{position:relative;overflow:hidden;background:var(--paper-2);min-height:300px;}
.work-art image-slot{position:absolute;inset:0;width:100%;height:100%;filter:grayscale(1) contrast(.95);
  transition:filter .6s;}
.work:hover .work-art image-slot{filter:grayscale(0) contrast(1);}
.work-art .art-fallback{position:absolute;inset:0;display:grid;place-items:center;
  background:var(--c,var(--cobalt));}
.work-art .art-fallback svg{width:50%;filter:saturate(.15) opacity(.9);transition:filter .6s,transform .6s;}
.work:hover .work-art .art-fallback svg{filter:saturate(1);transform:scale(1.05) rotate(-3deg);}
.work-art .idx{position:absolute;top:22px;left:24px;font-family:var(--mono);font-size:12px;
  letter-spacing:.16em;color:#fff;mix-blend-mode:difference;z-index:2;}
@media(max-width:820px){.work,.work:nth-child(even){grid-template-columns:1fr;}
  .work:nth-child(even) .work-art{order:0;}}

/* ============ PROCESS ============ */
.process-section{height:500vh;height:500svh;padding:0;background:var(--paper);}
.process-sticky{position:sticky;top:var(--nav-h);min-height:calc(100vh - var(--nav-h));
  min-height:calc(100svh - var(--nav-h));
  display:flex;align-items:stretch;overflow:hidden;}
.process-shell{min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;
  gap:clamp(14px,2.2vh,26px);padding-block:clamp(22px,3vh,42px);}
.process-stage{position:relative;flex:1;min-height:0;display:grid;
  grid-template-columns:minmax(220px,.78fr) minmax(300px,1fr) minmax(230px,.72fr);
  gap:clamp(28px,4vw,70px);align-items:center;}
.process-copy,.process-details,.process-art{position:relative;z-index:1;}
.process-kicker{position:absolute;top:0;left:0;}
.process-panels,.process-details{position:relative;min-height:clamp(260px,44vh,470px);}
.process-panel,.process-detail{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;opacity:var(--step-opacity,0);pointer-events:none;
  transform:translateY(var(--step-y,36px));
  transition:opacity .08s linear,transform .08s linear;will-change:opacity,transform;}
.process-panel.is-before,.process-detail.is-before{transform:translateY(var(--step-y,-36px));}
.process-panel.is-active,.process-detail.is-active{opacity:var(--step-opacity,1);pointer-events:auto;
  transform:translateY(var(--step-y,0));}
.process-panel .s-num{font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--c,var(--accent));
  font-weight:700;margin-bottom:clamp(22px,4vh,44px);}
.process-panel .display{font-size:clamp(42px,6.5vw,86px);max-width:8ch;}
.process-detail{justify-content:flex-end;padding-bottom:clamp(20px,8vh,92px);}
.process-detail p{margin:0;max-width:29ch;font-size:clamp(17px,1.9vw,24px);line-height:1.16;
  letter-spacing:-.02em;color:var(--ink);}
.process-detail p + p{margin-top:18px;color:var(--muted);}
.process-art{justify-self:center;width:min(42vw,520px);max-height:min(68vh,600px);aspect-ratio:1;
  display:grid;place-items:center;isolation:isolate;}
.process-grid{position:absolute;inset:0;border:1px solid var(--line);z-index:0;
  background-color:color-mix(in srgb,var(--paper) 84%,#fff);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:calc(100% / 24) calc(100% / 24);}
.process-pixel-layer{position:absolute;inset:15%;z-index:3;display:grid;
  grid-template-columns:repeat(var(--px-cols,14),1fr);grid-template-rows:repeat(var(--px-rows,14),1fr);
  pointer-events:none;mix-blend-mode:multiply;}
.process-pixel-cell{opacity:0;background:var(--layer-c,var(--accent));
  transform:scale(.2);transform-origin:center;}
.process-pixel-layer.is-drawing .process-pixel-cell{
  animation:processPixelDraw .74s steps(3,end) var(--d,0s) both;}
.process-icon{position:absolute;width:74%;height:74%;color:var(--c,var(--accent));
  --px-main:var(--c,var(--accent));image-rendering:pixelated;shape-rendering:crispEdges;
  opacity:var(--step-opacity,0);pointer-events:none;z-index:2;
  clip-path:inset(var(--icon-clip,100%) 0 0 0);
  transform:translateY(var(--icon-y,44px)) scale(var(--icon-scale,.88));
  filter:drop-shadow(10px 10px 0 rgba(22,20,15,.14));
  transition:opacity .08s linear,transform .08s linear,clip-path .08s linear;
  will-change:opacity,transform,clip-path;}
.process-icon.is-before{transform:translateY(var(--icon-y,-44px)) scale(var(--icon-scale,.9));}
.process-icon.is-active{opacity:var(--step-opacity,1);pointer-events:auto;
  transform:translateY(var(--icon-y,0)) scale(var(--icon-scale,1));
  clip-path:inset(var(--icon-clip,0) 0 0 0);}
@keyframes processPixelDraw{
  0%{opacity:0;transform:scale(.15);}
  18%{opacity:.95;transform:scale(1);}
  52%{opacity:.95;transform:scale(1);}
  100%{opacity:0;transform:scale(.15);}
}
@keyframes processIconLayerIn{
  0%{opacity:1;clip-path:inset(100% 0 0 0);transform:translateY(18px) scale(.94);}
  22%{clip-path:inset(66% 0 0 0);}
  44%{clip-path:inset(34% 0 0 0);transform:translateY(0) scale(.98);}
  70%{clip-path:inset(0);transform:translateY(0) scale(1.025);}
  100%{opacity:1;clip-path:inset(0);transform:none;}
}
.process-rail{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);}
.process-step-hit{appearance:none;border:0;border-right:1px solid var(--line);background:transparent;
  color:var(--muted);cursor:pointer;text-align:left;padding:14px 16px 4px 0;position:relative;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  transition:color .25s;}
.process-step-hit:last-child{border-right:none;}
.process-step-hit::before{content:"";position:absolute;left:0;right:100%;top:-1px;height:2px;
  background:var(--c,var(--accent));transition:right .35s cubic-bezier(.2,.8,.2,1);}
.process-step-hit span{color:var(--c,var(--accent));font-weight:700;margin-right:10px;}
.process-step-hit:hover,.process-step-hit.is-active{color:var(--ink);}
.process-step-hit.is-active::before{right:0;}
.process-footer{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.process-footer span:nth-child(2){text-align:center;}
.process-footer span:nth-child(3),.process-footer span:nth-child(4){text-align:right;}
@media(max-width:980px){
  .process-stage{grid-template-columns:1fr minmax(260px,.82fr);grid-template-areas:"copy art" "details art";
    gap:clamp(20px,4vw,44px);}
  .process-copy{grid-area:copy;}
  .process-art{grid-area:art;width:min(44vw,380px);}
  .process-details{grid-area:details;min-height:180px;}
  .process-detail{justify-content:flex-start;padding-bottom:0;}
  .process-panel .display{font-size:clamp(38px,7vw,64px);}
}
@media(max-width:720px){
  .process-sticky{top:0;min-height:100vh;min-height:100svh;}
  .process-shell{min-height:100vh;min-height:100svh;padding-block:calc(var(--nav-h) + 18px) 18px;}
  .process-stage{grid-template-columns:1fr;grid-template-areas:"copy" "art" "details";gap:18px;}
  .process-kicker{position:relative;margin-bottom:18px;}
  .process-panels{min-height:150px;}
  .process-panel .s-num{margin-bottom:16px;}
  .process-panel .display{font-size:clamp(36px,13vw,58px);max-width:9ch;}
  .process-art{width:min(76vw,340px);max-height:36vh;}
  .process-pixel-layer{inset:12%;}
  .process-details{min-height:132px;}
  .process-detail p{font-size:16px;line-height:1.35;letter-spacing:0;max-width:34ch;}
  .process-detail p + p{margin-top:10px;}
  .process-rail{grid-template-columns:repeat(2,1fr);}
  .process-step-hit{padding:10px 8px 8px 0;font-size:10px;}
  .process-footer{grid-template-columns:1fr 1fr;font-size:10px;}
  .process-footer span:nth-child(n){text-align:left;}
  .process-footer span:nth-child(even){text-align:right;}
}
@media(max-height:680px) and (min-width:721px){
  .process-shell{gap:12px;padding-block:18px;}
  .process-panels,.process-details{min-height:250px;}
  .process-panel .display{font-size:clamp(36px,5.6vw,66px);}
  .process-detail{padding-bottom:24px;}
  .process-detail p{font-size:clamp(16px,1.6vw,20px);line-height:1.2;}
  .process-art{width:min(34vw,380px);}
}

/* ============ ABOUT / philosophy ============ */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center;}
@media(max-width:860px){.about{grid-template-columns:1fr;}}
.about .statement{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.4vw,54px);
  letter-spacing:-.03em;line-height:1.02;margin:0;text-wrap:balance;}
.about .statement .grad{background:linear-gradient(115deg,#FF4D2E,#FF6FB5 34%,#2440E8 70%,#00B39A);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;}
.about p{color:var(--muted);font-size:17px;line-height:1.6;margin:0 0 18px;max-width:48ch;}
.about .m-story{display:flex;align-items:center;gap:22px;margin-top:30px;padding-top:26px;
  border-top:1px solid var(--line);}
.about .m-story svg{width:70px;height:70px;flex:0 0 auto;color:var(--ink);}
.about .m-story .t{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--muted);
  line-height:1.6;}
.about .m-story .t b{color:var(--ink);font-family:var(--display);}
.stats{display:flex;gap:clamp(24px,4vw,48px);flex-wrap:wrap;margin-top:36px;}
.stat .n{font-family:var(--display);font-weight:700;font-size:clamp(36px,5vw,58px);letter-spacing:-.03em;
  line-height:1;}
.stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:8px;}

/* ============ CONTACT CTA ============ */
.cta{background:var(--ink);color:var(--paper);border-radius:32px;margin-block:clamp(40px,6vw,80px);
  padding:clamp(48px,8vw,110px) clamp(32px,5vw,80px);position:relative;overflow:hidden;text-align:center;}
.cta .cta-spot{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle 280px at var(--mx) var(--my),
    color-mix(in srgb,var(--accent) 40%,transparent),transparent 65%);mix-blend-mode:screen;opacity:0;
  display:none;transition:opacity .4s;}
.cta.lit .cta-spot{opacity:1;}
.cta .kicker{color:rgba(244,241,234,.55);justify-content:center;}
.cta h2{font-family:var(--display);font-weight:800;font-size:clamp(40px,8vw,108px);letter-spacing:-.04em;
  line-height:.92;margin:18px 0 0;position:relative;z-index:2;}
.cta h2 .grad{background:linear-gradient(115deg,#FF4D2E,#FF6FB5 30%,#FFB323 50%,#C2EA4B 64%,#00B39A 78%,#2440E8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;}
.cta .sub{color:rgba(244,241,234,.7);font-size:clamp(17px,2vw,21px);margin:24px auto 0;max-width:44ch;
  position:relative;z-index:2;}
.cta .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px;
  position:relative;z-index:2;}
.cta .btn.solid{background:var(--paper);color:var(--ink);}
.cta .btn.ghost{border-color:rgba(244,241,234,.3);color:var(--paper);}
.cta .btn.ghost:hover{border-color:var(--paper);}
.cta .mail{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:rgba(244,241,234,.6);
  margin-top:30px;position:relative;z-index:2;}
.cta .mail a{color:var(--paper);text-decoration:underline;text-underline-offset:4px;}

/* ============ FOOTER ============ */
.foot{border-top:1px solid var(--line);padding-block:clamp(48px,7vw,80px);}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;}
@media(max-width:780px){.foot-top{grid-template-columns:1fr 1fr;gap:36px 24px;}}
@media(max-width:480px){.foot-top{grid-template-columns:1fr;}}
.foot .lock{display:flex;align-items:center;gap:13px;font-family:var(--display);font-weight:700;
  font-size:clamp(30px,5vw,46px);letter-spacing:-.035em;}
.foot .lock .logo{width:.9em;height:.9em;}
.foot .tag{color:var(--muted);font-size:15px;margin:18px 0 0;max-width:30ch;}
.foot .col h5{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 16px;font-weight:400;}
.foot .col a{display:block;text-decoration:none;color:var(--ink);font-size:15px;margin-bottom:10px;
  transition:color .2s;width:fit-content;}
.foot .col a:hover{color:var(--accent);}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  margin-top:clamp(48px,7vw,80px);padding-top:26px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}

/* ============ reveal-on-scroll ============ */
.r{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
.r.in{opacity:1;transform:none;}

@media (hover:hover) and (pointer:fine){
  .r.in.svc:hover{transform:translateY(-6px);}
  .r.in.work:hover{transform:translateY(-5px);}
}

@media(prefers-reduced-motion:reduce){.r{opacity:1;transform:none;transition:none;}
  .marquee .track{animation:none;}
  .hero-orb,.hero-rest .paint.auto{animation:none;}
  .hero-rest .paint.auto{display:none;}
  .process-pixel-layer{display:none;}
  .process-icon.is-active{animation:none;clip-path:inset(0);}
  .hero-initial{animation:none!important;-webkit-clip-path:none;clip-path:none;}}

/* tweaks mount */
#tweaks-root{position:fixed;z-index:1000;}