/* ── RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --white:#ffffff;
  --off:#f5f3ef;
  --black:#0c0c0c;
  --text:#1a1a1a;
  --muted:#888;
  --border:#e8e6e2;
}
html{background:var(--white);}
body{font-family:'DM Sans',sans-serif;background:var(--white);color:var(--text);overflow-x:hidden;cursor:none;}
img{display:block;width:100%;height:100%;object-fit:cover;}
a{color:inherit;text-decoration:none;}

/* ── CURSOR ── */
#cur{position:fixed;top:0;left:0;z-index:9999;width:9px;height:9px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);will-change:transform;background:var(--black);transition:width .3s,height .3s;mix-blend-mode:difference;}
#cur-ring{position:fixed;top:0;left:0;z-index:9998;width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.3);pointer-events:none;transform:translate(-50%,-50%);will-change:transform;transition:width .5s cubic-bezier(.25,.46,.45,.94),height .5s cubic-bezier(.25,.46,.45,.94);mix-blend-mode:difference;}
body.ch #cur{width:14px;height:14px;}
body.ch #cur-ring{width:52px;height:52px;}
body.drag-active #cur{width:80px;height:80px;}
body.drag-active #cur-ring{opacity:0;}

/* ── NAV ── */
#main-nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;align-items:center;justify-content:space-between;padding:28px 52px;mix-blend-mode:difference;}
.nav-logo{font-family:'DM Sans',sans-serif;font-weight:500;font-size:14px;color:white;display:flex;align-items:center;}
.nav-dot{display:inline-block;width:6px;height:6px;background:white;border-radius:50%;margin-left:2px;}
.nav-links{display:flex;gap:36px;list-style:none;}
.nav-links a{font-size:12px;letter-spacing:.04em;color:white;opacity:.5;transition:opacity .3s;}
.nav-links a:hover,.nav-links a.active{opacity:1;}
.nav-links li{list-style:none;}

/* ── HERO ── */
#hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:140px 52px 80px;position:relative;overflow:hidden;background:var(--white);}
.hero-circle{position:absolute;border-radius:50%;background:rgba(0,0,0,.08);pointer-events:none;}
.hero-circle-1{width:220px;height:220px;top:18%;left:38%;}
.hero-circle-2{width:180px;height:180px;top:14%;left:52%;}
#drag-ball{position:absolute;right:-30px;top:50%;transform:translateY(-50%);width:120px;height:120px;background:var(--black);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:none;user-select:none;z-index:10;}
#drag-ball span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:white;text-align:center;line-height:1.4;}
.hero-title{font-family:'DM Serif Display',serif;font-size:clamp(56px,9vw,130px);line-height:.93;letter-spacing:-.03em;max-width:900px;position:relative;z-index:1;}
.hero-title .line{display:block;overflow:hidden;}
.hero-title .line-inner{display:block;transform:translateY(110%);}
.hero-title em{font-style:italic;}
.hero-bottom{display:flex;align-items:flex-start;justify-content:space-between;margin-top:72px;position:relative;z-index:1;}
.hero-desc-left,.hero-desc-right{max-width:380px;font-size:14px;line-height:1.8;color:var(--muted);font-weight:300;opacity:0;transform:translateY(20px);}
.hero-desc-right{text-align:right;margin-left:auto;}

/* ── SERVICES ── */
#services{background:var(--black);padding:160px 52px;position:relative;overflow:hidden;}
.services-inner{display:grid;grid-template-columns:480px 1fr;gap:80px;align-items:start;max-width:1300px;margin:0 auto;}
.services-img-title{font-family:'DM Serif Display',serif;font-size:clamp(36px,4vw,56px);letter-spacing:-.03em;color:white;margin-bottom:40px;}
.services-img-title .line{display:block;overflow:hidden;}
.services-img-title .line-inner{display:block;transform:translateY(105%);}
.services-sculpture{width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:#1a1a1a;}
.services-sculpture img{width:100%;height:100%;object-fit:cover;filter:grayscale(20%);transform:scale(1.05);transition:transform 8s ease;}
.services-sculpture-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 100%);}
.services-list{padding-top:140px;}
.service-category{border-top:1px solid rgba(255,255,255,.1);padding:28px 0;cursor:none;transition:border-color .3s;}
.service-category:hover{border-color:rgba(255,255,255,.35);}
.service-cat-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:16px;}
.service-cat-title{font-family:'DM Serif Display',serif;font-size:clamp(18px,2vw,26px);color:white;letter-spacing:-.02em;margin-bottom:14px;transition:color .3s;}
.service-category:hover .service-cat-title{color:rgba(255,255,255,.75);}
.service-items{display:flex;flex-direction:column;gap:6px;}
.service-item{font-size:13px;color:rgba(255,255,255,.38);font-weight:300;letter-spacing:.01em;transition:color .3s;position:relative;padding-left:16px;}
.service-item::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:1px;background:rgba(255,255,255,.2);}
.service-category:hover .service-item{color:rgba(255,255,255,.55);}

/* ── PROJECTS CTA ── */
#projects-cta{background:var(--black);padding:0 52px 160px;border-top:1px solid rgba(255,255,255,.06);}
.projects-cta-inner{display:flex;align-items:flex-end;justify-content:space-between;padding-top:80px;}
.projects-cta-title{font-family:'DM Serif Display',serif;font-size:clamp(48px,7vw,96px);letter-spacing:-.04em;line-height:.95;color:white;}
.projects-cta-title em{font-style:italic;}
.projects-cta-link{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:8px;margin-bottom:8px;transition:color .3s,gap .3s,border-color .3s;}
.projects-cta-link:hover{color:white;gap:20px;border-color:rgba(255,255,255,.4);}
.cta-arr{transition:transform .3s;}
.projects-cta-link:hover .cta-arr{transform:translateX(4px);}

/* ── CLIENTS ── */
#clients{background:var(--off);padding:160px 52px;}
.clients-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:80px;}
.clients-eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.clients-title{font-family:'DM Serif Display',serif;font-size:clamp(40px,5vw,64px);letter-spacing:-.03em;line-height:1;overflow:hidden;}
.clients-title-inner{display:block;transform:translateY(105%);}
.clients-sub{max-width:300px;font-size:13px;line-height:1.7;color:var(--muted);font-weight:300;text-align:right;}
.clients-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;background:var(--off);padding:0;}
.client-item{background:var(--white);padding:56px 32px;display:flex;align-items:center;justify-content:center;transition:background .4s,opacity .4s;cursor:none;min-height:160px;}
.client-item:hover{background:#fafafa;}
.client-name{font-family:'DM Sans',sans-serif;font-weight:300;font-size:clamp(12px,1.1vw,14px);letter-spacing:.08em;text-transform:uppercase;color:rgba(26,26,26,.4);text-align:center;transition:color .3s;}
.client-item:hover .client-name{color:rgba(26,26,26,.8);}
.client-logo{max-width:120px;max-height:40px;width:auto;height:auto;object-fit:contain;opacity:.35;filter:grayscale(100%);transition:opacity .4s,filter .4s;}
.client-item:hover .client-logo{opacity:.8;filter:grayscale(0%);}

/* ── PROCESS ── */
#process{background:var(--white);padding:160px 52px;border-top:1px solid var(--border);}
.process-header{margin-bottom:80px;}
.process-eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.process-title{font-family:'DM Serif Display',serif;font-size:clamp(40px,5vw,64px);letter-spacing:-.03em;line-height:1;max-width:600px;}
.process-title em{font-style:italic;}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.process-step{background:var(--white);padding:48px 36px;border-right:1px solid var(--border);}
.process-step:last-child{border-right:none;}
.step-num{font-family:'DM Serif Display',serif;font-size:clamp(40px,4vw,60px);letter-spacing:-.04em;color:rgba(0,0,0,.06);margin-bottom:24px;line-height:1;}
.step-title{font-family:'DM Serif Display',serif;font-size:clamp(18px,1.8vw,24px);letter-spacing:-.02em;margin-bottom:14px;}
.step-body{font-size:13px;line-height:1.75;color:var(--muted);font-weight:300;}

/* ── FOOTER ── */
#main-footer{background:var(--black);color:rgba(255,255,255,.8);padding:100px 52px;}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;margin-bottom:80px;}
.footer-logo{font-family:'DM Serif Display',serif;font-size:28px;letter-spacing:-.02em;color:white;margin-bottom:16px;}
.footer-tagline{font-size:13px;line-height:1.7;color:rgba(255,255,255,.3);max-width:260px;}
.f-col-title{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:20px;}
.f-links{list-style:none;padding:0;}
.f-links li{margin-bottom:10px;list-style:none;}
.f-links a{font-size:13px;color:rgba(255,255,255,.4);transition:color .3s;}
.f-links a:hover{color:rgba(255,255,255,.9);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding-top:32px;display:flex;justify-content:space-between;align-items:center;}
.footer-copy{font-size:11px;color:rgba(255,255,255,.18);}
.footer-socials{display:flex;gap:24px;}
.footer-socials a{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.22);transition:color .3s;}
.footer-socials a:hover{color:rgba(255,255,255,.8);}

/* ── REVEAL ── */
.rv{opacity:0;transform:translateY(44px);transition:opacity .9s cubic-bezier(.25,.46,.45,.94),transform .9s cubic-bezier(.25,.46,.45,.94);}
.rv.in{opacity:1;transform:translateY(0);}
.d1{transition-delay:.1s;}.d2{transition-delay:.2s;}.d3{transition-delay:.3s;}.d4{transition-delay:.4s;}

/* ── PORTFOLIO ── */
#portfolio{background:var(--white);}

.portfolio-wrap{
  display:flex;
  align-items:flex-start;
  max-width:1600px;
  margin:0 auto;
  padding:0 80px;
  gap:100px;
}

/* Text-Spalte */
.portfolio-text{
  flex:0 0 280px;
  min-width:280px;
  padding:160px 0 200px;
}
.p-item{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px 0;
}
.p-meta{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;
  transition:opacity .4s;opacity:.25;
}
.p-title{
  font-size:clamp(32px,3.5vw,48px);font-weight:600;
  letter-spacing:-.03em;line-height:1.05;margin-bottom:16px;
  transition:color .4s;color:rgba(0,0,0,.18);
}
.p-desc{
  font-size:15px;line-height:1.75;color:var(--muted);
  font-weight:300;max-width:280px;
  transition:opacity .4s;opacity:.25;
}
.p-item.is-active .p-meta{opacity:1;}
.p-item.is-active .p-title{color:var(--black);}
.p-item.is-active .p-desc{opacity:1;}

/* Sticky Bild-Spalte */
.portfolio-sticky{
  flex:1;
  position:sticky;
  top:50vh;
  transform:translateY(-50%);
  height:0;
  align-self:flex-start;
  display:flex;
  align-items:center;
}
.portfolio-frame{
  width:100%;
  aspect-ratio:16/9;
  border-radius:0;
  box-shadow:
    0 50px 120px rgba(0,0,0,.2),
    0 20px 48px rgba(0,0,0,.1),
    0 4px 16px rgba(0,0,0,.06);
  overflow:hidden;
  background:#111;
  position:relative;
}
.portfolio-placeholder{
  position:absolute;inset:0;
  background:linear-gradient(135deg,#141414,#222);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s;
}
.portfolio-placeholder span{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.2);
}
.portfolio-frame img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .7s cubic-bezier(.25,.46,.45,.94);
}