:root{
  --bg:#000; --txt:#f5f5f7; --grey:#86868b; --light:#d2d2d7; --dim:#48484a;
  --line:rgba(255,255,255,.1); --fill:rgba(255,255,255,.03);
  --sf:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --smooth:cubic-bezier(.16,1.06,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);font-family:var(--sf);line-height:1.4;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:#fff;color:#000}

/* ── hero / logo (smooth, slow, gentle bounce) ── */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6vh 6vw}
.logo-letters{font-size:clamp(72px,20vw,220px);font-weight:600;letter-spacing:-.05em;line-height:1;cursor:default;display:inline-flex}
.logo-letters span{display:inline-block;transition:transform 1.05s var(--smooth),color .7s var(--ease)}
.logo-letters span:nth-of-type(2){transition-delay:.05s}
.logo-letters span:nth-of-type(3){transition-delay:.1s}
.logo-letters span:nth-of-type(4){transition-delay:.15s}
.logo-letters:hover span{transform:translateY(-18px)}
.logo-letters .dot{color:var(--dim)}
.logo-letters:hover .dot{color:#fff;transform:translateY(-18px) scale(1.25)}

/* ── lead words (staggered fade-up on load) ── */
.lead{margin-top:28px;font-size:clamp(19px,2.6vw,28px);font-weight:400;color:var(--grey);line-height:1.45}
.lw{display:inline-block;opacity:0;transform:translateY(26px);animation:lwIn 1.05s var(--smooth) forwards}
@keyframes lwIn{to{opacity:1;transform:none}}

/* ── work ── */
.work{max-width:980px;margin:0 auto;padding:8vh 6vw}
.kicker{font-size:clamp(28px,5vw,56px);font-weight:600;letter-spacing:-.02em;margin-bottom:8vh;text-align:center}
.row{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;
  padding:36px 18px;border-top:1px solid var(--line);
  transition:background .6s var(--ease),padding-left .6s var(--ease),transform .4s var(--ease)}
.row:last-child{border-bottom:1px solid var(--line)}
.row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#fff;
  transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease)}
.row:active{transform:scale(.992)}
.row:hover{background:var(--fill);padding-left:34px}
.row:hover::before{transform:scaleY(1);transform-origin:top}
.cat{display:block;font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;font-weight:500;
  transition:color .5s var(--ease)}
.row:hover .cat{color:var(--light)}
.row-main h3{font-size:clamp(28px,4.5vw,48px);font-weight:600;letter-spacing:-.02em;
  transition:color .5s var(--ease),transform .55s var(--ease)}
.row:hover .row-main h3{color:#fff;transform:translateX(4px)}
.row-main p{margin-top:7px;font-size:clamp(15px,1.8vw,19px);color:var(--grey);transition:color .5s var(--ease)}
.row:hover .row-main p{color:var(--light)}
.arrow{font-size:clamp(22px,3vw,34px);color:var(--grey);opacity:.3;
  transition:transform .6s var(--smooth),opacity .5s var(--ease),color .5s var(--ease)}
.row:hover .arrow{transform:translateX(14px) rotate(-12deg);opacity:1;color:#fff}

/* ── cta ── */
.cta{text-align:center;padding:18vh 6vw}
.cta h2{font-size:clamp(34px,6vw,72px);font-weight:600;letter-spacing:-.03em;margin-bottom:42px}
.btn{display:inline-block;padding:16px 42px;border-radius:980px;background:#fff;color:#000;font-size:18px;font-weight:500;
  transition:transform .45s var(--smooth),box-shadow .45s var(--ease)}
.btn:hover{transform:scale(1.05);box-shadow:0 20px 55px -12px rgba(255,255,255,.4)}
.btn:active{transform:scale(.98)}

/* ── footer ── */
footer{border-top:1px solid var(--line);padding:30px 6vw;text-align:center}
.foot{font-size:13px;color:var(--dim)}
.foot a{color:var(--grey);transition:color .3s}
.foot a:hover{color:#fff}

/* ── reveal: fade up + text brightens from grey ── */
.r{opacity:0;transform:translateY(30px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.r.in{opacity:1;transform:none}
.r .row-main{opacity:.45;transition:opacity 1.1s var(--ease)}
.r.in .row-main{opacity:1}

@media(max-width:680px){.row-main p{display:none}.row{padding:28px 16px}.row:hover{padding-left:26px}}