/* ============================================================
   BRASS.studio — style.css (jerrythewebdev style)
   ============================================================ */
:root {
    --bg:      #090807;
    --bg2:     #131110;
    --accent:  #C89930;
    --accent2: #E5B84A;
    --accent3: #EDEAE2;
    --white:   #EDEAE2;
    --gray:    #8a8278;
    --gray2:   #1c1a16;
    --fd:      'Poppins', sans-serif;
    --fb:      'Inter', sans-serif;
    --expo:    cubic-bezier(.16,1,.3,1);
    --snap:    cubic-bezier(.87,0,.13,1);
    --glass:   rgba(255,255,255,.04);
    --glass-b: 1px solid rgba(255,255,255,.07);
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; pointer-events:none; }
html { scroll-behavior:auto; font-size:16px; }
body { font-family:var(--fb); background:var(--bg); color:var(--white); overflow-x:hidden; cursor:none; position:relative; }
a { color:inherit; text-decoration:none; }
img,video { display:block; max-width:100%; }

body::before {
    content:''; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.02;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:200px; mix-blend-mode:overlay;
}

/* ── FLOATING BLOBS ───────────────────────── */
#blobs {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    contain: layout style paint;
}
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.13;
    will-change: transform;
}
.blob-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #C89930, #8a6010);
    top: -180px; left: -150px;
    animation: blobFloat1 14s ease-in-out infinite;
}
.blob-2 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, #E5B84A, #C89930);
    top: 20vh; right: -120px;
    animation: blobFloat2 10s ease-in-out infinite;
    animation-delay: -3s;
}
.blob-3 {
    width: 360px; height: 360px;
    background: radial-gradient(circle, #a07020, #5a3e08);
    bottom: 18vh; left: 5%;
    animation: blobFloat1 16s ease-in-out infinite;
    animation-delay: -6s;
}
.blob-4 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, #C89930, #7a5010);
    bottom: -100px; right: 15%;
    animation: blobFloat2 11s ease-in-out infinite;
    animation-delay: -2s;
}
@keyframes blobFloat1 {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(40px,-50px) scale(1.06); }
    66%      { transform: translate(-25px,35px) scale(.94); }
}
@keyframes blobFloat2 {
    0%,100% { transform: translate(0,0) scale(1); }
    40%      { transform: translate(-35px,45px) scale(1.04); }
    70%      { transform: translate(20px,-30px) scale(.97); }
}

/* ACCENT STRIPS */
.brass-accent { width:100%; height:2px; display:block; background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent); opacity:.35; }
.brass-accent img { display:none; }

/* DECO CIRCLES */
#deco { position:fixed; inset:0; pointer-events:none; z-index:499; overflow:hidden; opacity:0; transition:opacity 1.2s ease; }
#deco.visible { opacity:1; }
.dc {
    position: absolute;
    border-radius: 50%;
    display: block;
    background: radial-gradient(circle, rgba(124,58,237,.07) 0%, transparent 70%);
    filter: blur(2px);
    animation: dcShimmer 8s ease-in-out infinite;
    will-change: transform, opacity;
}
.dc:nth-child(1) { animation-duration:9s;  animation-delay:0s; }
.dc:nth-child(2) { animation-duration:7s;  animation-delay:-2.5s; }
.dc:nth-child(3) { animation-duration:11s; animation-delay:-1s; }
.dc:nth-child(4) { animation-duration:8s;  animation-delay:-4s; }
.dc:nth-child(5) { animation-duration:10s; animation-delay:-3s; }
.dc:nth-child(6) { animation-duration:6s;  animation-delay:-1.5s; }
.dc:nth-child(7) { animation-duration:12s; animation-delay:-5s; }
@keyframes dcShimmer {
    0%   { transform:scale(1)    translateY(0px);   opacity:1; }
    33%  { transform:scale(1.08) translateY(-18px); opacity:.55; }
    66%  { transform:scale(.95)  translateY(10px);  opacity:.85; }
    100% { transform:scale(1)    translateY(0px);   opacity:1; }
}

.sec-tag {
    display:inline-flex; align-items:center; gap:12px;
    font-family:var(--fb); font-size:10px; font-weight:700; letter-spacing:.38em;
    text-transform:uppercase; color:var(--accent2); margin-bottom:28px;
}
.sec-tag::before { content:''; width:24px; height:1px; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.container { padding:0 56px; }

/* CURSOR */
#cur-dot {
    position:fixed; width:6px; height:6px; background:var(--accent2);
    border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
    box-shadow: 0 0 10px var(--accent2);
}
#cur-ring {
    position:fixed; width:34px; height:34px; border:1px solid rgba(124,58,237,.6);
    border-radius:50%; pointer-events:none; z-index:9997; transform:translate(-50%,-50%);
    transition:width .4s var(--expo),height .4s var(--expo),background .3s,border-color .3s;
}
#cur-ring.hov  { width:72px;  height:72px;  background:rgba(124,58,237,.08); border-color:var(--accent); }
#cur-ring.view { width:90px;  height:90px;  background:var(--accent);        border-color:var(--accent); }
#cur-ring.click{ width:20px;  height:20px; }

/* ═══════════════════════════════
   INTRO
   ═══════════════════════════════ */
#intro { position:fixed; inset:0; z-index:100; background:var(--bg); }

#sea-layer { position:absolute; inset:0; z-index:1; visibility:hidden; }
#sea-layer video { width:100%; height:100%; object-fit:cover; }

#c { position:absolute; inset:0; z-index:2; width:100%; height:100%; transform-origin:center center; opacity:1; }

#scroll-hint {
    position:absolute; bottom:48px; left:50%;
    transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:12px;
    z-index:10; pointer-events:none;
    opacity:0; animation:fadeInUp 1s var(--expo) 1.2s forwards;
}
#scroll-hint span { font-family:var(--fb); font-size:10px; font-weight:700; letter-spacing:.38em; text-transform:uppercase; color:rgba(241,245,249,.4); }
.sh-line { width:1px; height:52px; background:rgba(200,153,48,.3); position:relative; overflow:hidden; }
.sh-dot  { position:absolute; top:-8px; left:0; width:1px; height:8px; background:var(--accent2); animation:scrollDot 1.6s ease-in-out infinite; }

#intro-spacer { height:250vh; pointer-events:none; }

@keyframes scrollDot { 0%{top:-8px;opacity:1} 80%{top:52px;opacity:.6} 81%{top:-8px;opacity:0} 100%{top:-8px;opacity:1} }
@keyframes fadeInUp  { from{opacity:0;transform:translateX(-50%) translateY(16px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* HEADER */
#header {
    position:fixed; top:0; left:0; right:0; z-index:500;
    display:flex; align-items:center; justify-content:space-between; padding:32px 56px;
    transition:padding .5s var(--expo),background .5s,border-color .4s,opacity .5s;
    border-bottom:1px solid transparent; opacity:0; pointer-events:none;
}
#header.visible { opacity:1; pointer-events:auto; }
#header.scrolled {
    padding:18px 56px;
    background:rgba(13,13,26,.88);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-color:rgba(255,255,255,.07);
}
.h-logo { display:flex; align-items:center; }
.h-logo-img { height:72px; width:auto; display:block; }
.h-nav { display:flex; gap:44px; }
.h-link {
    font-family:var(--fb); font-size:13px; font-weight:400; letter-spacing:.04em;
    color:var(--gray); transition:color .3s; position:relative;
}
.h-link::after {
    content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px;
    background:linear-gradient(90deg, var(--accent), var(--accent2));
    transition:width .35s var(--expo);
}
.h-link:hover { color:var(--white); }
.h-link:hover::after { width:100%; }
.h-cta {
    font-family:var(--fb); font-size:12px; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; border:1px solid rgba(124,58,237,.45); padding:10px 24px;
    border-radius:100px; color:var(--accent3);
    transition:all .35s; display:flex; align-items:center; gap:8px;
    position:relative; overflow:hidden;
}
.h-cta::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg, var(--accent), var(--accent2));
    opacity:0; transition:opacity .35s; border-radius:100px;
}
.h-cta:hover { color:var(--white); border-color:transparent; box-shadow:0 0 24px rgba(124,58,237,.45); }
.h-cta:hover::before { opacity:1; }
.h-cta-arrow { position:relative; z-index:1; transition:transform .35s var(--expo); }
.h-cta:hover .h-cta-arrow { transform:translateX(4px); }
#burger { display:none; flex-direction:column; gap:6px; background:none; border:none; cursor:none; padding:4px; }
#burger span { display:block; width:24px; height:1.5px; background:var(--white); transition:transform .35s var(--expo),opacity .3s; }
#burger.open span:first-child { transform:translateY(7.5px) rotate(45deg); }
#burger.open span:last-child  { transform:translateY(-7.5px) rotate(-45deg); }

/* MOBILE MENU */
#mob-menu {
    position:fixed; inset:0; z-index:450;
    background:rgba(13,13,26,.96); backdrop-filter:blur(20px);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    transform:translateY(-100%); transition:transform .7s var(--snap);
}
#mob-menu.open { transform:translateY(0); }
.mob-link {
    font-family:var(--fd); font-weight:700; font-size:clamp(44px,10vw,80px);
    letter-spacing:-.03em; opacity:0; transform:translateY(24px);
    transition:color .3s,opacity .5s,transform .5s;
}
#mob-menu.open .mob-link { opacity:1; transform:translateY(0); }
#mob-menu.open .mob-link:nth-child(1){transition-delay:.05s}
#mob-menu.open .mob-link:nth-child(2){transition-delay:.1s}
#mob-menu.open .mob-link:nth-child(3){transition-delay:.15s}
#mob-menu.open .mob-link:nth-child(4){transition-delay:.2s}
.mob-link:hover { color:var(--accent2); }
.mob-mail { position:absolute; bottom:48px; font-size:13px; color:var(--gray); letter-spacing:.05em; }

/* MARQUEE */
.dbl-marquee { overflow:hidden; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.mq-row { display:flex; overflow:hidden; }
.mq-row--fwd .mq-track { animation:mqFwd 22s linear infinite; }
.mq-row--rev .mq-track { animation:mqRev 28s linear infinite; }
.mq-track {
    display:flex; align-items:center; gap:40px; font-family:var(--fd); font-weight:700;
    font-size:clamp(20px,3vw,36px); letter-spacing:-.01em; padding:18px 0;
    white-space:nowrap; flex-shrink:0; min-width:100%;
}
.mq-track b {
    background:linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    font-size:.6em;
}
.mq-row--fwd .mq-track { color:var(--white); }
.mq-row--rev .mq-track { color:rgba(241,245,249,.1); font-size:clamp(16px,2.2vw,28px); }
@keyframes mqFwd { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes mqRev { from{transform:translateX(-50%)} to{transform:translateX(0)} }

/* WORD REVEAL */
#manifesto {
    position:relative; height:100vh; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:40px;
    perspective: 900px;
}
.bd-prism {
    width:100%; height:clamp(160px,22vh,280px);
    position:relative;
    transform-style: preserve-3d;
}
.bd-face {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    background: transparent;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.bd-f1 { transform: rotateX(  0deg) translateZ(var(--bd-r, 80px)); }
.bd-f2 { transform: rotateX(-120deg) translateZ(var(--bd-r, 80px)); }
.bd-f3 { transform: rotateX(-240deg) translateZ(var(--bd-r, 80px)); }
.bd-gauge    { display:none; }
.bd-grid-lines { display:none; }
.bd-scan-line  { display:none; }
@keyframes bdScan { 0%,100%{top:18%;opacity:.8} 50%{top:82%;opacity:.4} }

.bd-text { position:relative; z-index:2; text-align:center; }
.bd-n { display:block; font-family:var(--fb); font-size:11px; font-weight:700; letter-spacing:.4em; text-transform:uppercase; color:var(--accent2); margin-bottom:24px; }
.bd-w { font-family:var(--fd); font-weight:700; font-size:clamp(56px,9vw,140px); letter-spacing:-.04em; line-height:.92; margin-bottom:16px; }
.bd-f1 .bd-w { color: var(--white); }
.bd-f2 .bd-w { color: var(--accent2); }
.bd-f3 .bd-w { color: var(--white); }
.bd-p { font-family:var(--fb); font-size:15px; font-weight:300; letter-spacing:.06em; color:var(--gray); }

.bd-dots { display:flex; gap:12px; }
.bd-dot {
    width:6px; height:6px; border-radius:50%;
    border:1px solid var(--gray); background:transparent;
    transition:background .4s,border-color .4s,transform .4s var(--expo),box-shadow .4s;
}
.bd-dot.active { background:var(--accent); border-color:var(--accent); transform:scale(1.4); box-shadow:0 0 10px var(--accent); }

/* LEISTUNGEN */
#leistungen { height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--bg); }
.ls-inner { display:flex; flex-direction:column; align-items:center; gap:52px; text-align:center; }
.ls-inner .sec-tag { margin-bottom:0; }
.ls-boards { position:relative; width:100%; height:clamp(54px,10vh,116px); display:flex; align-items:center; justify-content:center; }
.ls-board { display:flex; gap:5px; position:absolute; transition:opacity .2s; }
#lsBoardGfx { opacity:0; pointer-events:none; }
#lsBoardGfx.sf-active { opacity:1; pointer-events:auto; }
#lsBoardWeb.sf-hidden { opacity:0; pointer-events:none; }
.ls-tile {
    position:relative; width:clamp(36px,6vw,80px); height:100%;
    background:var(--glass); border:var(--glass-b); border-radius:8px;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    box-shadow:0 4px 20px rgba(0,0,0,.5); backdrop-filter:blur(8px);
}
.ls-ch { font-family:var(--fd); font-weight:700; font-size:clamp(30px,4.8vw,64px); line-height:1; color:var(--white); display:block; transition:color .2s; }
.ls-mid { position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(124,58,237,.3); transform:translateY(-50%); z-index:2; pointer-events:none; }
.ls-tile.sf-flipping .ls-ch { color:var(--accent2); }
.ls-tile.sf-gold .ls-ch { background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.ls-info-wrap { position:relative; width:clamp(280px,50vw,540px); min-height:160px; }
.ls-info { position:absolute; inset:0; opacity:0; transform:translateY(12px); transition:opacity .5s,transform .5s var(--expo); pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:20px; }
.ls-info.active { opacity:1; transform:translateY(0); pointer-events:auto; }
.ls-info-desc { font-family:var(--fb); font-size:14px; font-weight:300; line-height:1.8; color:var(--gray); }
.ls-tags { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.ls-tags span { font-family:var(--fb); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent3); border:1px solid rgba(124,58,237,.3); padding:6px 16px; border-radius:100px; background:rgba(124,58,237,.08); }
.ls-cta { display:inline-flex; align-items:center; gap:10px; font-family:var(--fb); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent2); transition:gap .35s var(--expo); }
.ls-cta:hover { gap:18px; }

/* ETHOS */
#ethos { padding: 0; }
.ethos-pin-outer { height: 350vh; }
.ethos-inner {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
.ethos-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    mix-blend-mode: overlay;
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}
.ethos-rule-top, .ethos-body, .ethos-rule-bot { position: relative; z-index: 1; }
.ethos-body {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 40px; text-align: center;
    padding: 0 56px;
}
.ethos-rule-top, .ethos-rule-bot {
    height: 1px; flex-shrink: 0;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent2) 70%, transparent 100%);
    opacity: .5;
    transform: scaleX(0); transform-origin: center;
}
.ethos-tag { font-family: var(--fb); font-size: 10px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--accent2); }
.ethos-quote {
    font-family: var(--fd); font-weight: 700;
    font-size: clamp(52px, 8.5vw, 130px);
    letter-spacing: -.04em; line-height: .9;
}
.ew { display: inline; opacity: 0.08; }
.ew-gold {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ethos-attr { font-family: var(--fb); font-size: 13px; font-weight: 300; letter-spacing: .12em; color: var(--gray); opacity: 0; }

/* STATEMENT */
#statement { padding: 80px 56px 160px; max-width: none; }
.st-hero { margin-bottom: 80px; }
.st-ln { overflow: hidden; position: relative; }
.st-ln .st-li {
    font-family: var(--fd); font-weight: 800;
    font-size: clamp(72px, 11.5vw, 196px);
    line-height: 1.05; letter-spacing: -.05em;
    display: block;
}
.st-ln-gold .st-li {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.st-foot { display: flex; gap: 64px; max-width: 100%; border-top: 1px solid rgba(255,255,255,.07); padding-top: 48px; }
.st-foot p { font-family: var(--fb); font-size: 15px; font-weight: 300; line-height: 1.85; color: var(--gray); flex: 1; }
.st-foot em { font-style: normal; color: var(--white); }
.st-gold {
    background:linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* APPROACH */
#approach { padding: 0 56px 160px; max-width: 1400px; margin: 0 auto; overflow: hidden; }
#approach .sec-tag { margin-top: 80px; margin-bottom: 16px; }
.ap-item { position: relative; }
.ap-item-line {
    height: 1px; background: rgba(255,255,255,.08);
    transform-origin: left; transform: scaleX(0);
}
.ap-item-grid {
    display: grid;
    grid-template-columns: clamp(64px, 7vw, 112px) 1fr 1fr;
    gap: 0 64px;
    padding: 56px 0;
    align-items: start;
}
.ap-n {
    font-family: var(--fd); font-weight: 700;
    font-size: clamp(48px, 5.5vw, 80px);
    line-height: 1; letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(200,153,48,.22);
    padding-top: 4px;
    transition: -webkit-text-stroke-color .5s var(--expo);
    white-space: nowrap;
}
.ap-item:hover .ap-n { -webkit-text-stroke-color: rgba(200,153,48,.8); }
.ap-title {
    font-family: var(--fd); font-weight: 700;
    font-size: clamp(36px, 3.5vw, 58px);
    letter-spacing: -.035em; line-height: .95;
}
.ap-desc {
    font-family: var(--fb); font-size: 14px; font-weight: 300;
    line-height: 1.85; color: var(--gray); max-width: 420px;
    padding-top: 10px;
}
.ap-item::after {
    content: '';
    position: absolute; bottom: 0; left: 0;
    width: 0; height: 1px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    transition: width .75s var(--expo);
}
.ap-item:hover::after { width: 100%; }

/* PROZESS */
#prozess { padding:0 56px 160px; max-width:1400px; margin:0 auto; }
.pz-headline { font-family:var(--fd); font-weight:700; font-size:clamp(52px,7vw,96px); line-height:.95; letter-spacing:-.04em; margin-bottom:80px; }
.pz-headline span {
    background:linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.pz-steps { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.06); }
.pz-step { padding:48px 40px 48px 0; border-right:1px solid rgba(255,255,255,.06); position:relative; }
.pz-step:last-child { border-right:none; padding-right:0; }
.pz-step + .pz-step { padding-left:40px; }
.pz-n { display:block; font-family:var(--fd); font-weight:700; font-size:clamp(52px,5.5vw,80px); line-height:1; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1px rgba(200,153,48,.22); margin-bottom:20px; transition:-webkit-text-stroke-color .6s var(--expo); }
.pz-step.in-view .pz-n { -webkit-text-stroke-color:rgba(200,153,48,.75); }
.pz-step h4 { font-family:var(--fd); font-weight:700; font-size:clamp(28px,2.5vw,38px); letter-spacing:-.025em; line-height:1; margin-bottom:16px; }
.pz-step p { font-family:var(--fb); font-size:13px; font-weight:300; line-height:1.8; color:var(--gray); }
.pz-line { position:absolute; top:0; left:0; right:0; height:2px; background:rgba(255,255,255,.06); overflow:hidden; }
.pz-line::after { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, var(--accent), var(--accent2)); transition:left .8s var(--expo); }
.pz-step.in-view .pz-line::after { left:0; }

/* ARBEITEN */
#arbeiten { padding:80px 0 0; }
#arbeiten .container { margin-bottom:40px; }
.sec-heading { font-family:var(--fd); font-weight:700; font-size:clamp(56px,7.5vw,100px); line-height:.95; letter-spacing:-.035em; }
.sec-heading span {
    background:linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.works-pin { overflow:hidden; padding-bottom:80px; }
.works-track { display:flex; gap:32px; padding:0 56px; will-change:transform; scrollbar-width:none; -ms-overflow-style:none; }
.works-track::-webkit-scrollbar { display:none; }
.w-card { flex-shrink:0; width:clamp(320px,28vw,460px); cursor:none; }
.w-img {
    width:100%; aspect-ratio:3/4; border-radius:16px; margin-bottom:20px;
    max-height:52vh;
    position:relative; overflow:hidden;
    background:var(--bg);
    transition:transform .6s var(--expo), box-shadow .6s;
    border:1px solid rgba(255,255,255,.08);
}
.w-img-photo {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:contain; object-position:center;
    display:block;
}
.w-img-logo {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:contain; object-position:center;
    padding:18% 12%;
    display:block;
}
.w-card:hover .w-img { transform:scale(.97); box-shadow:0 20px 60px rgba(124,58,237,.3); }
.w-num { position:absolute; top:20px; left:20px; font-family:var(--fb); font-size:11px; font-weight:700; letter-spacing:.22em; color:rgba(255,255,255,.22); }
.w-img-label { position:absolute; bottom:20px; left:20px; right:20px; font-family:var(--fd); font-weight:700; font-size:28px; letter-spacing:-.01em; color:rgba(255,255,255,.12); }
.w-meta .w-cat { display:block; font-family:var(--fb); font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent2); margin-bottom:8px; }
.w-meta h4 { font-family:var(--fd); font-weight:700; font-size:clamp(32px,3.5vw,48px); letter-spacing:-.025em; line-height:1.05; }

/* STUDIO */
#studio { padding:140px 56px; display:flex; gap:80px; align-items:flex-start; max-width:1400px; margin:0 auto; }
.studio-wrap { flex:1.2; }
.studio-statement { font-family:var(--fd); font-weight:700; font-size:clamp(64px,9vw,130px); line-height:1.1; letter-spacing:-.04em; margin-bottom:40px; }
.studio-statement .st-li-gold {
    background:linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.studio-body { max-width:480px; }
.studio-body p { font-family:var(--fb); font-size:16px; font-weight:300; line-height:1.8; color:var(--gray); margin-bottom:16px; }
.studio-cta { display:inline-block; margin-top:24px; font-family:var(--fb); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent2); transition:letter-spacing .35s var(--expo); }
.studio-cta:hover { letter-spacing:.18em; }
.studio-img-col { flex:.8; }
.studio-img-ph {
    width:100%; aspect-ratio:3/4; border-radius:16px;
    background:linear-gradient(160deg, rgba(124,58,237,.15) 0%, rgba(6,182,212,.08) 55%, rgba(124,58,237,.04) 100%);
    border:1px solid rgba(124,58,237,.2);
    display:flex; align-items:center; justify-content:center;
}
.studio-img-logo {
    width:60%; height:auto;
    opacity:.9;
    filter:drop-shadow(0 0 40px rgba(200,153,48,.25));
}

/* KONTAKT */
#kontakt { padding:160px 56px; max-width:1400px; margin:0 auto; }
.kt-heading {
    font-family:var(--fd); font-weight:700; font-size:clamp(72px,13vw,190px);
    line-height:.88; letter-spacing:-.045em; margin-bottom:48px;
}
.kt-heading .st-li-gold {
    background:linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.kt-email { display:inline-block; font-family:var(--fd); font-weight:700; font-size:clamp(24px,3.5vw,52px); letter-spacing:-.02em; margin-bottom:52px; transition:color .3s; position: relative; }
.kt-email:hover { color:var(--accent2); }
.kt-email::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .6s var(--expo); }
.kt-email:hover::after { width:100%; }
.kt-cta { display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.btn-gold {
    display:inline-flex; align-items:center; justify-content:center;
    padding:20px 52px;
    background:linear-gradient(135deg, var(--accent), var(--accent2));
    border-radius:100px; font-family:var(--fb); font-size:13px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:var(--white);
    position:relative; overflow:hidden; cursor:none;
    transition:box-shadow .35s, transform .35s;
    box-shadow:0 0 0 rgba(124,58,237,0);
}
.btn-gold::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg, var(--accent2), var(--accent));
    opacity:0; transition:opacity .5s var(--expo);
}
.btn-gold:hover { box-shadow:0 0 32px rgba(124,58,237,.7), 0 0 64px rgba(124,58,237,.25); transform:translateY(-2px); }
.btn-gold:hover::after { opacity:1; }
.btn-inner { position:relative; z-index:1; }
.kt-note { font-family:var(--fb); font-size:12px; font-weight:400; letter-spacing:.05em; color:var(--gray); }

/* FOOTER */
#footer { border-top:1px solid rgba(255,255,255,.06); padding-top:64px; }
.ft-top { display:flex; gap:56px; padding:0 56px 56px; border-bottom:1px solid rgba(255,255,255,.06); }
.ft-brand { flex-shrink:0; min-width:220px; align-self:flex-start; }
.ft-logo-img { height:224px; width:auto; display:block; }
.ft-cols { display:flex; gap:56px; flex:1; }
.ft-col { display:flex; flex-direction:column; gap:12px; flex:1; }
.ft-col h5 { font-family:var(--fb); font-size:10px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--accent2); margin-bottom:4px; }
.ft-col a { font-family:var(--fb); font-size:14px; font-weight:300; color:var(--gray); transition:color .3s; }
.ft-col a:hover { color:var(--white); }
.ft-wordmark { font-family:var(--fd); font-weight:700; font-size:clamp(80px,16vw,220px); letter-spacing:-.04em; line-height:1; color:rgba(255,255,255,.03); padding:32px 48px 0; overflow:hidden; white-space:nowrap; user-select:none; pointer-events:none; }
.ft-bottom { display:flex; justify-content:space-between; align-items:center; padding:20px 56px; }
.ft-bottom p { font-family:var(--fb); font-size:12px; color:var(--gray); }
.ft-legal { display:flex; gap:24px; }
.ft-legal a { font-family:var(--fb); font-size:12px; color:var(--gray); transition:color .3s; }
.ft-legal a:hover { color:var(--white); }

/* LINE REVEAL — mask-slide technique */
.st-line { display:block; overflow:hidden; padding-bottom:.22em; margin-bottom:-.22em; }
.st-li   { display:block; }
.st-li-gold {
    background:linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.reveal-tag,.reveal-h,.reveal-p,.pz-step,.ap-item { opacity:0; }

@media (max-width:1024px) {
    .ap-item-grid { grid-template-columns: clamp(52px,6vw,80px) 1fr; }
    .ap-desc { grid-column: 2; }
    .pz-steps { grid-template-columns:repeat(2,1fr); }
    .pz-step:nth-child(2) { border-right:none; padding-right:0; }
    .pz-step:nth-child(3) { padding-left:0; }
    .ls-board { gap:4px; }
    #studio { flex-direction:column; padding:80px 24px; }
    .studio-img-col { display:none; }
    .ft-top { flex-wrap:wrap; gap:40px; }
    .ft-cols { flex-wrap:wrap; gap:36px; }
}
@media (max-width:768px) {
    #header { padding:20px 24px; }
    #header.scrolled { padding:14px 24px; }
    .h-nav,.h-cta { display:none; }
    #burger { display:flex; }
    .h-logo-img { height:48px; }
    #statement { padding: 60px 24px 100px; }
    .st-foot { flex-direction: column; gap: 32px; }
    #approach { padding:0 24px 100px; }
    .ap-item-grid { grid-template-columns: 1fr; gap: 16px; }
    .ap-n { font-size: clamp(40px,10vw,60px); }
    .ethos-body { padding: 0 24px; }
    #prozess { padding:0 24px 100px; }
    .pz-steps { grid-template-columns:1fr; }
    .pz-step { border-right:none; padding-right:0; }
    .pz-step + .pz-step { padding-left:0; border-top:1px solid rgba(255,255,255,.06); padding-top:40px; }
    .works-track { padding:0 24px; }
    #kontakt { padding:80px 24px; }
    .ft-top,.ft-bottom { padding-left:24px; padding-right:24px; }
    .ft-wordmark { padding:24px 16px 0; }
    .container { padding:0 24px; }
    /* Mobile-spezifische Fixes */
    body { cursor:auto; }
    #cur-dot,#cur-ring { display:none; }
    #blobs,#deco { display:none; }
    .ft-logo-img { height:120px; }
    /* Arbeiten — nativer Horizontal-Scroll statt GSAP-Pin */
    .works-pin { overflow:visible; padding-bottom:40px; }
    .works-track { overflow-x:auto; scroll-snap-type:x mandatory; }
    .w-card { scroll-snap-align:start; width:clamp(280px,82vw,340px); }
}