:root{--primary:#B87333;--primary-active:#9e602a;--ink:#1A1A1A;--body:#555;--muted:#666;--muted-soft:#8a8a8a;--canvas:#FAFAFA;--soft:#F0EDE9;--card:#fff;--warm:#E0DCD9;--dark:#1A1A1A;--dark-2:#1E1E1E;--deep:#111;--foot:#0D0D0D;--hair:#E0DCD9;--font-display:"Cormorant Garamond",Georgia,serif;--font-sans:"DM Sans",system-ui,sans-serif;--max:1200px;--gut:clamp(48px,6vw,96px);--sec:96px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-sans);font-weight:300;font-size:15px;line-height:1.75}
img,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none;transition:color .2s}
a:hover{color:var(--primary)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:300;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,5.4vw,68px);line-height:1.05}
h2{font-size:clamp(32px,4vw,48px);line-height:1.1}
h3{font-size:26px;line-height:1.2}
h1 em,h2 em,h3 em{font-style:italic;color:var(--primary)}
p{margin:0;text-wrap:pretty}
strong{font-weight:500;color:var(--ink)}
.dark strong,.hero strong{color:#fff}
ul{margin:0;padding:0;list-style:none}
.skip{position:absolute;left:-9999px;top:0;background:var(--primary);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:16px;top:16px}
.container{max-width:var(--max);margin:0 auto}
.narrow{max-width:760px}
.band{padding:var(--sec) var(--gut)}
.dark{background:var(--dark);color:#fff}
.deep{background:var(--deep);color:#fff}
.soft{background:var(--soft)}
.canvas{background:var(--canvas)}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--primary);line-height:1.4}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--primary);flex-shrink:0}
.label{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.dark .label{color:rgba(255,255,255,.45)}
.sec-head{max-width:760px;display:flex;flex-direction:column;gap:18px;margin-bottom:56px}
.sec-head p{color:var(--muted);max-width:620px}
.dark .sec-head p{color:rgba(255,255,255,.62)}
.lead{font-size:17px;line-height:1.75;color:var(--body);max-width:640px}
.dark .lead,.hero .lead{color:rgba(255,255,255,.66)}
.prose{display:flex;flex-direction:column;gap:18px;color:var(--body);max-width:680px}
.dark .prose{color:rgba(255,255,255,.66)}
.btn{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:15px 30px;border:.5px solid transparent;transition:background .2s,border-color .2s,color .2s;cursor:pointer;font-family:var(--font-sans);border-radius:0;line-height:1}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-active);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.78)}
.btn-ghost:hover{border-color:rgba(255,255,255,.5);color:#fff}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.arrow{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);display:inline-flex;gap:8px;align-items:center}
.arrow::after{content:"→";transition:transform .2s}
.arrow:hover::after{transform:translateX(4px)}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;height:68px;padding:0 max(var(--gut),calc((100% - var(--max)) / 2));display:flex;align-items:center;justify-content:space-between;gap:24px;background:rgba(26,26,26,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:.5px solid rgba(255,255,255,.06);z-index:50}
.wm{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:.04em;color:#fff;line-height:1}
.wm span{color:var(--primary)}
.wm:hover{color:#fff}
.nav-links{display:flex;gap:28px}
.nav-links>a{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);padding-bottom:4px;border-bottom:1px solid transparent}
.nav-links>a:hover,.nav-links>a[aria-current]{color:#fff}
.nav-links>a[aria-current]{border-bottom-color:var(--primary)}
.btn-nav{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#fff;border:.5px solid rgba(184,115,51,.45);padding:10px 20px;transition:background .2s}
.btn-nav:hover{background:var(--primary);color:#fff}
.burger{display:none;background:none;border:0;padding:10px 0;cursor:pointer;flex-direction:column;gap:5px}
.burger span{width:22px;height:1px;background:#fff;display:block}
.menu{position:fixed;inset:0;background:var(--dark);z-index:100;padding:20px 24px;display:flex;flex-direction:column;overflow-y:auto}
.menu[hidden]{display:none}
.menu-top{display:flex;justify-content:space-between;align-items:center;height:44px}
.menu-close{background:none;border:0;color:#fff;font-size:30px;font-weight:200;cursor:pointer;line-height:1;padding:4px 8px}
.menu nav{display:flex;flex-direction:column;margin-top:32px}
.menu nav a{font-family:var(--font-display);font-size:32px;color:#fff;padding:14px 0;border-bottom:.5px solid rgba(255,255,255,.08)}
.menu nav a[aria-current]{color:var(--primary)}
.menu .btn{margin-top:32px;align-self:flex-start}
/* hero */
.hero{position:relative;background:var(--dark);color:#fff;padding:164px var(--gut) 104px;overflow:hidden}
.hero.sub{padding:148px var(--gut) 80px}
.hero .container{position:relative;display:flex;flex-direction:column;gap:26px}
.hero h1{max-width:960px;color:#fff}
.rings{position:absolute;display:block;width:640px;height:640px;background:url(../img/copper-rings.svg) center/contain no-repeat;top:-200px;right:-180px;opacity:.55;pointer-events:none}
.crumbs{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.crumbs a:hover{color:var(--primary)}
.crumbs li+li::before{content:"/";margin-right:8px;color:rgba(255,255,255,.25)}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 28px;padding-top:26px;margin-top:8px;border-top:.5px solid rgba(255,255,255,.08);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.hero-meta span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--primary);margin-right:10px;vertical-align:middle}
/* split */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
.split.wide-left{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.split.wide-right{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.split.center{align-items:center}
/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.06);border:.5px solid rgba(255,255,255,.06)}
.pillar{position:relative;background:var(--dark-2);padding:44px 36px 40px;display:flex;flex-direction:column;gap:18px;transition:background .2s}
.pillar::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.pillar:hover{background:#252525}
.pillar:hover::before{transform:scaleX(1)}
.pillar .num{font-family:var(--font-display);font-size:56px;line-height:1;color:rgba(184,115,51,.35)}
.pillar h3{color:#fff}
.pillar p{color:rgba(255,255,255,.6);font-size:14px}
.pillar .arrow{margin-top:auto;padding-top:12px}
.dots{display:flex;flex-direction:column;gap:10px}
.dots li{position:relative;padding-left:18px;font-size:14px;line-height:1.6;color:var(--body)}
.dots li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--primary)}
.dark .dots li{color:rgba(255,255,255,.7)}
.dots.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px}
/* service block (light) */
.svc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;padding:56px 0;border-top:.5px solid var(--hair)}
.svc:first-child{border-top:0;padding-top:0}
.svc .num{font-family:var(--font-display);font-size:20px;color:var(--primary)}
.svc-head{display:flex;flex-direction:column;gap:16px}
.svc-head p{color:var(--body)}
/* work cards */
.works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
.work{display:flex;flex-direction:column;gap:18px;position:relative}
.work .ph{overflow:hidden;background:var(--warm);aspect-ratio:16/10}
.work .ph img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.work:hover .ph img{opacity:.9}
.work .meta{display:flex;flex-direction:column;gap:8px;padding-bottom:14px;border-bottom:.5px solid var(--hair);position:relative}
.work .meta::after{content:"";position:absolute;left:0;bottom:-.5px;height:2px;width:100%;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.work:hover .meta::after{transform:scaleX(1)}
.work h3{font-size:28px}
.work:hover h3{color:var(--ink)}
.work .tags{font-size:12px;color:var(--muted)}
/* projects (referenzen) */
.project{padding:var(--sec) var(--gut);scroll-margin-top:68px}
.project-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;margin-bottom:48px;align-items:end}
.project-head .client{font-size:13px;font-weight:500;color:var(--ink)}
.dark .project-head .client{color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:.5px solid var(--hair);padding:6px 12px;line-height:1.4}
.dark .chips li{color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.14)}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.gallery figure{margin:0;grid-column:span 6;display:flex;flex-direction:column;gap:10px}
.gallery figure.w12{grid-column:span 12}
.gallery figure.w8{grid-column:span 8}
.gallery figure.w4{grid-column:span 4}
.gallery figure.w7{grid-column:span 7}
.gallery figure.w5{grid-column:span 5}
.gallery .ph{background:var(--warm);overflow:hidden;flex:1}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{font-size:12px;line-height:1.5;color:var(--muted)}
.gallery figcaption b{font-weight:500;color:var(--ink);margin-right:6px}
.dark .gallery figcaption{color:rgba(255,255,255,.5)}
.dark .gallery figcaption b{color:#fff}
/* index list of projects */
.toc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:.5px solid rgba(255,255,255,.1)}
.toc a{display:flex;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:.5px solid rgba(255,255,255,.1);font-family:var(--font-display);font-size:21px;color:#fff;margin-right:32px}
.toc a span{font-family:var(--font-sans);font-size:10px;letter-spacing:.18em;color:rgba(255,255,255,.35);align-self:center}
/* branchen */
.sectors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:.5px solid var(--hair);border-left:.5px solid var(--hair)}
.sector{padding:32px 24px 36px;border-right:.5px solid var(--hair);border-bottom:.5px solid var(--hair);display:flex;flex-direction:column;gap:14px;background:var(--card)}
.sector .num{font-family:var(--font-display);font-size:18px;color:var(--primary)}
.sector h3{font-size:22px}
.sector p{font-size:13px;line-height:1.7;color:var(--muted)}
/* steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.step{padding:0 28px 0 0;display:flex;flex-direction:column;gap:14px;border-top:.5px solid rgba(255,255,255,.1);padding-top:28px}
.step .num{font-family:var(--font-display);font-size:44px;line-height:1;color:rgba(184,115,51,.5)}
.step h3{font-size:22px;color:#fff}
.step p{font-size:14px;color:rgba(255,255,255,.58)}
/* modes */
.modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.mode{background:var(--card);border:.5px solid var(--hair);padding:40px 36px;display:flex;flex-direction:column;gap:14px;border-top:2px solid var(--primary)}
.mode p{color:var(--body)}
/* region */
.region{display:flex;flex-wrap:wrap;gap:0;border-top:.5px solid rgba(255,255,255,.1)}
.region li{font-family:var(--font-display);font-size:clamp(22px,2.4vw,30px);color:#fff;padding:14px 28px 14px 0;margin-right:28px;border-bottom:.5px solid rgba(255,255,255,.1)}
.region li small{font-family:var(--font-sans);font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-left:10px}
/* marquee */
.marquee{overflow:hidden;padding:30px 0;background:var(--deep);border-top:.5px solid rgba(255,255,255,.04);border-bottom:.5px solid rgba(255,255,255,.04)}
.marquee-track{display:flex;gap:80px;width:max-content;animation:marquee 32s linear infinite}
.marquee-track span{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);white-space:nowrap}
.marquee-track span::after{content:"·";margin-left:80px;color:var(--primary)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}
/* faq */
.faq{border-top:.5px solid var(--hair)}
.faq details{border-bottom:.5px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-family:var(--font-display);font-size:22px;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-sans);font-weight:200;font-size:26px;color:var(--primary);transition:transform .3s;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 48px 26px 0;color:var(--body);max-width:760px}
/* cta */
.cta{position:relative;overflow:hidden;text-align:center}
.cta .container{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px}
.cta h2{font-size:clamp(36px,5vw,56px);color:#fff;max-width:820px}
.cta .sub{font-family:var(--font-display);font-style:italic;font-size:20px;color:rgba(255,255,255,.55)}
.cta .rings{top:auto;bottom:-260px;right:auto;left:-200px}
/* portrait / about */
.portrait{position:relative}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--warm)}
.portrait::after{content:"";position:absolute;inset:0;transform:translate(18px,18px);border:.5px solid rgba(184,115,51,.35);z-index:-1}
.quote{font-family:var(--font-display);font-style:italic;font-size:clamp(24px,2.6vw,32px);line-height:1.35;color:var(--ink);padding-left:28px;border-left:2px solid var(--primary)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:8px}
.fact{background:var(--card);border:.5px solid var(--hair);padding:24px 22px}
.fact b{display:block;font-family:var(--font-display);font-weight:300;font-size:34px;color:var(--primary);line-height:1}
.fact span{display:block;margin-top:10px;font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.5}
/* figure generic */
.fig{margin:0;display:flex;flex-direction:column;gap:10px}
.fig img{width:100%;background:var(--warm)}
.fig-portrait img{background:radial-gradient(ellipse 50% 100% at 50% 100%,rgba(184,115,51,.9) 0%,rgba(184,115,51,.6) 30%,rgba(184,115,51,.3) 60%,rgba(184,115,51,.1) 82%,rgba(184,115,51,0) 100%);max-width:520px;margin:0 auto}
.fig figcaption{font-size:12px;color:var(--muted)}
.ki{display:inline-flex;align-items:center;gap:8px;font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.4}
.ki::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--primary)}
.dark .ki{color:rgba(255,255,255,.5)}
.ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
/* video */
.films{display:flex;flex-direction:column;gap:96px}
.film{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr);gap:48px;align-items:end}
.film.rev{grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr)}
.film.rev .film-media{order:2}
.film-media{position:relative}
.frame{position:relative;width:100%;aspect-ratio:4/3;background:#000;border:.5px solid rgba(255,255,255,.08)}
.frame.wide{aspect-ratio:16/9}
.frame iframe,.frame video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.film-text{display:flex;flex-direction:column;gap:14px;padding-bottom:6px}
.film-text h2{font-size:clamp(28px,3vw,38px);color:#fff}
.film-text p{font-size:14px;color:rgba(255,255,255,.6)}
/* offer */
.offer-box{background:var(--card);border:.5px solid var(--hair);border-top:2px solid var(--primary);padding:32px 30px 34px}
.offer-box .row{padding:18px 0;border-top:.5px solid var(--hair)}
.offer-box .row:first-of-type{border-top:0}
.offer-box b{display:block;font-family:var(--font-display);font-weight:300;font-size:34px;color:var(--primary);line-height:1}
.offer-box span{display:block;margin-top:9px;font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.shots figure{margin:0;position:relative;overflow:hidden;background:var(--warm)}
.shots figure.w{grid-column:span 3}
.shots img{width:100%;aspect-ratio:4/3;object-fit:cover}
.shots figure.w img{aspect-ratio:16/9}
.shots figcaption{position:absolute;left:0;bottom:0;font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(26,26,26,.78);padding:7px 13px;border-top:2px solid var(--primary)}
.flag{align-self:flex-start;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--primary);padding:7px 14px}
/* form */
.form{background:var(--card);border:.5px solid var(--hair);padding:40px;display:flex;flex-direction:column;gap:22px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form label{display:flex;flex-direction:column;gap:8px}
.form label>span{font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.form input,.form select,.form textarea{width:100%;font-family:var(--font-sans);font-weight:300;font-size:15px;line-height:1.6;color:var(--ink);background:var(--canvas);border:.5px solid var(--hair);border-radius:0;padding:14px 16px;outline:none;transition:border-color .2s,background .2s;-webkit-appearance:none;appearance:none}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--primary);background:#fff}
.form textarea{min-height:140px;resize:vertical}
.form .hp{position:absolute;left:-9999px}
.form .note{font-size:12px;color:var(--muted-soft)}
.form .msg{font-size:14px;padding:14px 16px;border:.5px solid var(--hair)}
.form .msg.ok{border-color:var(--primary);color:var(--ink)}
.form .msg.err{border-color:rgba(163,64,42,.4);color:#a3402a}
.info{background:var(--dark);color:#fff;padding:40px;position:relative;overflow:hidden}
.info .rings{width:420px;top:auto;bottom:-170px;right:-170px}
.info dl{margin:24px 0 0;position:relative}
.info dt{font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.35);padding-top:20px}
.info dd{margin:6px 0 0;padding-bottom:20px;border-bottom:.5px solid rgba(255,255,255,.08);font-family:var(--font-display);font-size:20px;line-height:1.4}
/* legal */
.legal{display:flex;flex-direction:column;gap:44px}
.legal section{display:flex;flex-direction:column;gap:16px;padding-top:40px;border-top:.5px solid var(--hair)}
.legal h2{font-size:clamp(24px,3vw,30px);display:flex;gap:16px;align-items:baseline}
.legal h2 span{font-size:17px;color:var(--primary);width:30px;flex-shrink:0}
.legal p,.legal li{color:var(--body);max-width:660px}
.legal address{font-style:normal;font-family:var(--font-display);font-size:20px;line-height:1.5;color:var(--ink)}
.legal a{color:var(--primary);border-bottom:.5px solid rgba(184,115,51,.35)}
/* footer */
.footer{background:var(--foot);color:#fff;padding:72px var(--gut) 32px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px}
.foot-brand{display:flex;flex-direction:column;gap:14px;max-width:340px}
.foot-brand .tag{font-family:var(--font-display);font-style:italic;font-size:16px;color:rgba(255,255,255,.45);line-height:1.4}
.foot-brand p{font-size:12px;line-height:1.7;color:rgba(255,255,255,.42)}
.foot-col h2{font-family:var(--font-sans);font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:16px}
.foot-col ul{display:flex;flex-direction:column;gap:10px}
.foot-col a,.foot-col li{font-size:13px;color:rgba(255,255,255,.6)}
.foot-col a:hover{color:var(--primary)}
.foot-bottom{padding-top:28px;border-top:.5px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:11px;color:rgba(255,255,255,.4)}
.foot-bottom nav{display:flex;gap:24px}
/* reveal (only with JS) */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
@media (max-width:1080px){.nav-links,.btn-nav{display:none}.burger{display:flex}.sectors{grid-template-columns:repeat(3,minmax(0,1fr))}.toc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){:root{--gut:24px;--sec:64px}.nav{padding:0 24px}.hero{padding:128px 24px 72px}.hero.sub{padding:120px 24px 60px}.split,.split.wide-left,.split.wide-right,.svc,.project-head,.film,.film.rev{grid-template-columns:minmax(0,1fr);gap:36px}.film.rev .film-media{order:0}.pillars,.works,.modes{grid-template-columns:minmax(0,1fr)}.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 0}.gallery figure,.gallery figure.w8,.gallery figure.w4,.gallery figure.w7,.gallery figure.w5{grid-column:span 12}.foot-top{grid-template-columns:1fr 1fr;gap:36px}.foot-brand{grid-column:span 2}.shots{grid-template-columns:repeat(2,minmax(0,1fr))}.shots figure.w{grid-column:span 2}.form{padding:28px 22px}.form .row2{grid-template-columns:1fr}.info{padding:32px 24px}.portrait::after{transform:translate(10px,10px)}}
@media (max-width:620px){.sectors,.toc,.steps,.dots.cols,.facts,.ba{grid-template-columns:minmax(0,1fr)}.shots{grid-template-columns:1fr}.shots figure.w{grid-column:span 1}.toc a{margin-right:0}.faq details p{padding-right:0}}

/* ===== v2: mega menu ===== */
:root{interpolate-size:allow-keywords}
.nav-links{align-self:stretch;align-items:stretch}
.nav-links>a,.dd-btn{display:flex;align-items:center;font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);padding:0;background:none;border:0;border-bottom:1px solid transparent;cursor:pointer;transition:color .2s,border-color .2s}
.dd{display:flex}
.dd-btn::after{content:"+";margin-left:8px;font-weight:300;font-size:14px;color:var(--primary);transition:transform .3s}
.dd.open .dd-btn,.dd-btn:hover{color:#fff}
.dd.open .dd-btn{border-bottom-color:var(--primary)}
.dd.open .dd-btn::after{transform:rotate(45deg)}
.dd.cur .dd-btn{color:#fff}
.mega{position:fixed;left:0;right:0;top:68px;background:var(--dark);border-top:.5px solid rgba(255,255,255,.06);border-bottom:.5px solid rgba(255,255,255,.08);padding:40px var(--gut) 44px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility 0s .25s}
.dd.open .mega{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
.mega-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 340px;gap:48px}
.mega-col{display:flex;flex-direction:column}
.mega-col .label{margin-bottom:12px;color:rgba(255,255,255,.4)}
.mega-col a{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 18px;margin:0 -18px;transition:background .2s}
.mega-col a::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;background:var(--primary);transform:scaleY(0);transform-origin:top;transition:transform .3s}
.mega-col a:hover,.mega-col a[aria-current]{background:rgba(255,255,255,.04)}
.mega-col a:hover::before,.mega-col a[aria-current]::before{transform:scaleY(1)}
.mega-col a b{font-family:var(--font-display);font-weight:300;font-size:22px;line-height:1.2;color:#fff}
.mega-col a span{font-size:13px;line-height:1.55;color:rgba(255,255,255,.5)}
.mega-card{background:rgba(255,255,255,.04);border:.5px solid rgba(255,255,255,.06);padding:28px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.mega-card .av{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:top}
.mega-card h3{font-size:24px;color:#fff}
.mega-card p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.55)}
.mega-card.ref{padding:0;background:none;border:0}
.mega-ref{display:flex;flex-direction:column;gap:10px;color:#fff}
.mega-ref img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:opacity .3s}
.mega-ref:hover img{opacity:.88}
.mega-ref b{font-family:var(--font-display);font-weight:300;font-size:24px;line-height:1.2;color:#fff}
.mega-ref:hover{color:#fff}
.menu .menu-group{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--primary);margin-top:28px;padding-bottom:4px}
.menu nav a.sub{font-size:24px;padding:11px 0}
.menu-tel{margin-top:18px;font-size:13px;color:rgba(255,255,255,.6)}
/* hero intro */
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.js .hero .container>*{animation:heroIn .8s ease both}
.js .hero .container>*:nth-child(2){animation-delay:.08s}.js .hero .container>*:nth-child(3){animation-delay:.16s}.js .hero .container>*:nth-child(4){animation-delay:.24s}.js .hero .container>*:nth-child(5){animation-delay:.32s}.js .hero .container>*:nth-child(6){animation-delay:.4s}
/* ===== bento ===== */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(250px,auto);gap:2px}
.bx{position:relative;background:var(--card);border:.5px solid var(--hair);padding:30px 28px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.bx.w2{grid-column:span 2}.bx.h2{grid-row:span 2}
.bx h3{font-size:24px}
.bx p{font-size:13px;line-height:1.65;color:var(--muted);max-width:420px}
.bx-vis{margin-top:auto;padding-top:18px}
.who{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted)}
.who img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:top}
.who b{display:block;font-weight:500;color:var(--ink)}
.pipe{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.pipe li{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-soft);border:.5px solid var(--hair);padding:9px 13px;line-height:1;transition:background .3s,color .3s,border-color .3s}
.pipe li.done{color:var(--ink);border-color:var(--primary)}
.pipe li.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pipe-bar{height:1px;background:var(--hair);margin-top:14px;position:relative}
.pipe-bar i{position:absolute;left:0;top:-.5px;height:2px;width:100%;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .6s ease}
.bx.img{padding:0;background:var(--ink);border-color:var(--ink);min-height:420px}
.wipe{position:absolute;inset:0}
.wipe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wipe .after{animation:wipe 9s ease-in-out infinite}
.wipe .line{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--primary);animation:wline 9s ease-in-out infinite}
.wipe .tag{position:absolute;top:18px;font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(26,26,26,.78);padding:7px 12px}
.wipe .tag.l{left:18px}.wipe .tag.r{right:18px;border-top:2px solid var(--primary)}
.bx.img:hover .after,.bx.img:hover .line{animation-play-state:paused}
@keyframes wipe{0%,12%{clip-path:inset(0 0 0 100%)}45%,62%{clip-path:inset(0 0 0 0)}92%,100%{clip-path:inset(0 0 0 100%)}}
@keyframes wline{0%,12%{left:100%}45%,62%{left:0}92%,100%{left:100%}}
.bx-cap{position:absolute;left:0;right:0;bottom:0;padding:24px 28px;background:rgba(26,26,26,.86);display:flex;flex-direction:column;gap:6px}
.bx-cap h3{color:#fff}.bx-cap p{color:rgba(255,255,255,.6)}
.sw{display:flex;gap:2px;height:110px}
.sw i{flex:1;position:relative;transition:flex .6s ease;font-style:normal}
.sw i.on{flex:3}
.sw i span{position:absolute;left:10px;bottom:9px;font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .3s}
.sw i.on span{opacity:1}
.aa{position:relative;height:120px;font-size:112px;line-height:1;color:var(--ink)}
.aa span{position:absolute;left:0;bottom:0}
.aa .s1{font-family:var(--font-display);font-weight:300;animation:swapA 6s infinite}
.aa .s2{font-family:var(--font-sans);font-weight:300;opacity:0;animation:swapA 6s -3s infinite}
.aa-cap{position:relative;height:16px;font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--primary)}
.aa-cap span{position:absolute;left:0;top:0}
.aa-cap .s1{animation:swapA 6s infinite}.aa-cap .s2{opacity:0;animation:swapA 6s -3s infinite}
@keyframes swapA{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
.chk{display:flex;flex-direction:column;border-top:.5px solid var(--hair)}
.chk li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:.5px solid var(--hair);font-size:13px;color:var(--muted-soft);transition:color .3s}
.chk li::after{content:"—";font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--hair);transition:color .3s}
.chk li.ok{color:var(--ink)}
.chk li.ok::after{content:"✓ geprüft";color:var(--primary)}
.chk-badge{align-self:flex-start;margin-top:14px;font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--ink);padding:8px 13px;opacity:.15;transition:opacity .4s,background .4s}
.chk-badge.on{opacity:1;background:var(--primary)}
.tick{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,3vw,40px);line-height:1.2}
.tick .win{display:block;height:1.2em;overflow:hidden}
.tk{display:block;transition:transform .6s ease}
.tk span{display:block;height:1.2em;font-style:italic;color:var(--primary)}
/* ===== reference slider ===== */
.rs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:56px}
.rs-head .sec-head{margin:0}
.rs-head .btn{flex-shrink:0;white-space:nowrap}
.rs-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(50% - 50vw);padding-right:var(--gut);cursor:grab;-webkit-user-select:none;user-select:none}
.rs-track::-webkit-scrollbar{display:none}
.rs-track.drag{scroll-snap-type:none;cursor:grabbing}
.rs-track.drag a{pointer-events:none}
.rs-card{flex:0 0 min(440px,80vw);scroll-snap-align:start;display:flex;flex-direction:column;gap:20px;color:#fff}
.rs-card:hover{color:#fff}
.rs-card .ph{aspect-ratio:4/3;overflow:hidden;background:#222}
.rs-card .ph img{width:100%;height:100%;object-fit:cover;transition:opacity .3s;-webkit-user-drag:none}
.rs-card:hover .ph img{opacity:.88}
.rs-card .meta{position:relative;display:flex;flex-direction:column;gap:10px;padding-bottom:20px;border-bottom:.5px solid rgba(255,255,255,.1)}
.rs-card .meta::after{content:"";position:absolute;left:0;bottom:-.5px;height:2px;width:100%;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.rs-card:hover .meta::after{transform:scaleX(1)}
.rs-card h3{font-size:28px;color:#fff}
.rs-card .client{font-size:12px;color:rgba(255,255,255,.45)}
.rs-card p{font-size:14px;line-height:1.7;color:rgba(255,255,255,.62)}
.rs-ctrl{display:flex;align-items:center;gap:28px;margin-top:44px}
.rs-hint{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4);white-space:nowrap}
.rs-prog{flex:1;height:1px;background:rgba(255,255,255,.12);position:relative}
.rs-prog i{position:absolute;top:-.5px;height:2px;background:var(--primary);transition:left .15s linear}
.rs-btns{display:flex;gap:8px}
.sq{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:.5px solid rgba(255,255,255,.22);background:none;color:#fff;font-family:var(--font-sans);font-size:17px;cursor:pointer;transition:background .2s,border-color .2s;border-radius:0}
.sq:hover:not(:disabled){background:var(--primary);border-color:var(--primary)}
.sq:disabled{opacity:.3;cursor:default}
/* ===== process ===== */
.proc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start}
.proc-media{position:sticky;top:108px;aspect-ratio:4/5;overflow:hidden;background:var(--warm)}
.proc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.proc-media img.on{opacity:1}
.proc-num{position:absolute;left:0;bottom:0;font-family:var(--font-display);font-weight:300;font-size:56px;line-height:1;color:#fff;background:var(--ink);padding:18px 24px 14px;border-top:2px solid var(--primary)}
.proc-steps>li{min-height:52vh;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:48px 0;border-top:.5px solid var(--hair);opacity:.32;transition:opacity .4s}
.proc-steps>li:last-child{border-bottom:.5px solid var(--hair)}
.proc-steps>li.on{opacity:1}
.proc-steps .num{font-family:var(--font-display);font-size:20px;color:var(--primary)}
.proc-steps h3{font-size:clamp(28px,3vw,36px)}
.proc-steps p{color:var(--body);max-width:480px}
.proc-steps .m{display:none}
.dark .proc-media{background:#222}
.dark .proc-num{background:var(--deep)}
.dark .proc-steps>li{border-color:rgba(255,255,255,.1)}
.dark .proc-steps h3{color:#fff}
.dark .proc-steps p{color:rgba(255,255,255,.62)}
/* ===== testimonials ===== */
.ts-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px;align-items:start}
.ts-wrap .sec-head{margin:0}
.ts{display:flex;flex-direction:column;gap:36px}
.ts-stage{display:grid}
.ts-slide{grid-area:1/1;display:flex;flex-direction:column;gap:28px;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease,visibility 0s .6s}
.ts-slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease,transform .6s ease}
.ts-stars{font-size:14px;letter-spacing:.12em;color:var(--primary)}
.ts-slide blockquote{margin:0;font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(24px,2.6vw,32px);line-height:1.4;color:#fff}
.ts-who{display:flex;align-items:center;gap:14px}
.ts-who i{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#B87333,#8A5520);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:500;letter-spacing:.08em;color:#fff}
.ts-who b{display:block;font-weight:500;font-size:14px;color:#fff}
.ts-who span{font-size:12px;color:rgba(255,255,255,.45)}
.ts-bar{display:flex;align-items:center;gap:24px}
.ts-count{font-size:11px;font-weight:500;letter-spacing:.16em;color:rgba(255,255,255,.4);white-space:nowrap}
.ts-count b{color:#fff;font-weight:500}
.ts-seg{flex:1;display:flex;gap:6px}
.ts-seg button{flex:1;height:18px;padding:0;background:none;border:0;cursor:pointer;position:relative}
.ts-seg button::before{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:rgba(255,255,255,.12)}
.ts-seg button b{position:absolute;left:0;right:0;top:8px;height:2px;background:var(--primary);transform:scaleX(0);transform-origin:left}
.ts-seg button.done b{transform:scaleX(1)}
.ts-seg button.on b{animation:seg 7s linear forwards}
.ts:hover .ts-seg button.on b{animation-play-state:paused}
@keyframes seg{to{transform:scaleX(1)}}
/* faq smooth */
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .35s ease,content-visibility .35s allow-discrete}
.faq details[open]::details-content{block-size:auto}
@media (max-width:1080px){.mega{display:none}.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bx.h2{grid-row:span 1}.bx.img{grid-column:span 2}}
@media (max-width:900px){.proc,.ts-wrap{grid-template-columns:minmax(0,1fr);gap:40px}.proc-media{display:none}.proc-steps>li{min-height:0;opacity:1;padding:36px 0}.proc-steps .m{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;margin-bottom:8px}.rs-head{flex-direction:column;align-items:flex-start;margin-bottom:40px}.rs-hint{display:none}}
@media (max-width:620px){.bento{grid-template-columns:minmax(0,1fr)}.bx.w2,.bx.img{grid-column:span 1}.bx.img{min-height:360px}}
@media (prefers-reduced-motion:reduce){.js .hero .container>*,.wipe .after,.wipe .line,.aa span,.aa-cap span{animation:none}.wipe .after{clip-path:inset(0 0 0 50%)}.wipe .line{left:50%}.aa .s2,.aa-cap .s2{opacity:0}.ts-slide,.tk,.proc-media img{transition:none}}

/* ===== v3: leistungen rows ===== */
.nav-links>a.cur{color:#fff;border-bottom-color:var(--primary)}
.svc2-list{display:flex;flex-direction:column}
.svc2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"head media";gap:72px;align-items:center;padding:72px 0;border-top:.5px solid var(--hair)}
.svc2:first-child{border-top:0;padding-top:0}
.svc2.rev{grid-template-areas:"media head"}
.svc2 .svc-head{grid-area:head}.svc2 .dots{margin-top:8px}.svc2 .btn{align-self:flex-start;margin-top:12px}.svc2-media{grid-area:media;position:relative}
.svc2 .num{font-family:var(--font-display);font-size:20px;color:var(--primary)}
.svc2-media img,.svc2-media video,.vframe{width:100%;aspect-ratio:5/4;object-fit:cover}
.vframe{position:relative;overflow:hidden;background:var(--ink)}.vframe iframe{position:absolute;top:0;left:50%;height:100%;width:auto;min-width:100%;max-width:none;aspect-ratio:16/9;border:0;transform:translateX(-50%)}
.iph{width:220px;margin:0 auto;padding:8px;background:#111;border-radius:38px}
.iph-scr{position:relative;background:#fff;border-radius:31px;overflow:hidden;aspect-ratio:9/19.5;padding:44px 0 0;color:#111;font-size:10px;line-height:1.4}
.iph-isl{position:absolute;top:10px;left:50%;width:70px;height:20px;border-radius:12px;background:#111;transform:translateX(-50%)}
.ig-next{margin:14px 12px 0;height:40px;background:#F0EDE9}
.ig-top{display:flex;align-items:center;gap:8px;padding:0 12px 8px}.ig-top b{font-weight:500;flex:1}.ig-top span{letter-spacing:1px}
.ig-av{width:24px;height:24px;border-radius:50%;background:#3E4A3A;border:1.5px solid var(--primary);color:#F3EBDD;font-style:normal;font-family:var(--font-display);font-size:13px;display:flex;align-items:center;justify-content:center}
.ig-post{position:absolute;inset:0;background:#3E4A3A;color:#F3EBDD;display:flex;flex-direction:column;justify-content:space-between;padding:16px}
.ig-k{font-size:7px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.ig-h{font-family:var(--font-display);font-weight:300;font-size:30px;line-height:1}.ig-h em{color:#E3B98A}
.iph .ig-img{position:relative;aspect-ratio:1;overflow:hidden;background:#EDEDED}.iph .ig-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;-webkit-mask-image:none;mask-image:none}
.iph svg{width:20px;height:20px;fill:none;stroke:#111;stroke-width:1.6;stroke-linejoin:round}
.ig-pop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;animation:igPop 5s infinite}
.ig-pop svg{width:72px;height:72px;fill:#fff;stroke:none}
.ig-bar{display:flex;gap:12px;padding:10px 12px 4px}
.ig-like{display:flex}.ig-like svg{animation:igLike 5s infinite}
.ig-cnt{padding:0 12px;position:relative;height:16px}.ig-cnt b{position:absolute;font-weight:500}.ig-n1{opacity:0;animation:igN 5s infinite}.ig-n0{animation:igN0 5s infinite}
.ig-cap{padding:2px 12px 0}.ig-cap b{font-weight:500}
@keyframes igPop{0%,30%{opacity:0;transform:scale(.4)}36%{opacity:1;transform:scale(1.15)}42%{transform:scale(1)}60%{opacity:1}70%,100%{opacity:0;transform:scale(1)}}
@keyframes igLike{0%,34%{fill:none;stroke:#111;transform:none}38%{fill:#ED4956;stroke:#ED4956;transform:scale(1.25)}44%,92%{fill:#ED4956;stroke:#ED4956;transform:none}100%{fill:none;stroke:#111}}
@keyframes igN{0%,34%{opacity:0}38%,92%{opacity:1}100%{opacity:0}}
@keyframes igN0{0%,34%{opacity:1}38%,92%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.ig-pop,.ig-like svg,.ig-n0,.ig-n1{animation:none}}
@media (max-width:1080px){.svc2-media img,.svc2-media video,.vframe{aspect-ratio:4/3}.svc2,.svc2.rev{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "media";gap:40px}}


/* ===== v3: process timeline ===== */
.tl-band{background:#222;color:#fff}
.tl-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.tl-head{position:sticky;top:140px;margin:0}
.tl-head h2{color:#fff}
.tl{position:relative;padding:0 0 0 64px;margin:0;list-style:none}
.tl-line{position:absolute;left:12px;top:14px;width:1px;background:rgba(255,255,255,.12)}
.tl-line i{position:absolute;inset:0;background:var(--primary);transform-origin:top;transform:scaleY(var(--p,0))}
.tl-step{position:relative;display:flex;flex-direction:column;gap:12px;min-height:52vh;padding-bottom:48px;opacity:.28;transition:opacity .5s}
.tl-step:last-child{min-height:0;padding-bottom:0}
.tl-step.on{opacity:1}
.tl-dot{position:absolute;left:-58px;top:8px;width:13px;height:13px;border-radius:50%;background:#222;border:1px solid rgba(255,255,255,.3);transition:background .4s,border-color .4s}
.tl-step.on .tl-dot{background:var(--primary);border-color:var(--primary)}
.tl-step .num{font-family:var(--font-display);font-size:56px;line-height:1;color:var(--primary)}
.tl-step h3{color:#fff;font-size:34px}
.tl-step p{color:rgba(255,255,255,.7);max-width:440px}
@media (max-width:900px){.tl-wrap{grid-template-columns:minmax(0,1fr);gap:40px}.tl-head{position:static}.tl{padding-left:44px}.tl-dot{left:-38px}.tl-step{min-height:40vh}}
@media (prefers-reduced-motion:reduce){.tl-step{opacity:1}}

.fader{position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--warm)}.fader img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;opacity:0;transition:opacity 1s ease}.fader img.on{opacity:1}
@media (max-width:1080px){.fader{aspect-ratio:4/3}}
.fader-bar{display:flex;gap:4px;margin-top:14px}.fader-bar i{flex:1;height:2px;background:var(--hair);position:relative;overflow:hidden}.fader-bar i::after{content:"";position:absolute;inset:0;background:var(--primary);transform:scaleX(0);transform-origin:left}.fader-bar i.done::after{transform:scaleX(1)}.fader-bar i.on::after{animation:fbar 3.5s linear forwards}@keyframes fbar{to{transform:scaleX(1)}}
.prose .lead-in{font-family:var(--font-display);font-style:italic;font-size:24px;line-height:1.4;color:var(--ink)}
.cta-light h2{color:var(--ink)}.cta-light .sub{color:var(--body)}

/* compare slider */
.cmp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.cmp-wrap{margin:0;display:flex;flex-direction:column;gap:14px}.cmp-wrap figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cmp{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--warm);user-select:none}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp-after{clip-path:inset(0 0 0 var(--x))}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.cmp-line i{position:absolute;top:50%;left:50%;width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;font-style:normal;font-size:16px;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%)}
.cmp-tag{position:absolute;top:14px;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(26,26,26,.7);padding:6px 10px;pointer-events:none}.cmp-tag.l{left:14px}.cmp-tag.r{right:14px}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.atmo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.atmo figure{margin:0}.atmo .big{grid-column:span 2}.atmo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}.atmo .big img{aspect-ratio:16/9}
@media (max-width:900px){.cmp-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.atmo{grid-template-columns:minmax(0,1fr)}.atmo .big{grid-column:span 1}}
.svc2 .actions{margin-top:12px}.svc2 .actions .btn{margin-top:0}

/* v4 */
.facts-list{margin:0;border-top:.5px solid var(--hair)}.facts-list dt{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--primary);padding-top:18px}.facts-list dd{margin:6px 0 0;padding-bottom:18px;border-bottom:.5px solid var(--hair);color:var(--ink)}.facts-list a{color:var(--primary)}
.modes2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.06)}.modes2 article{background:var(--dark-2);padding:36px 32px;display:flex;flex-direction:column;gap:14px}.modes2 .num{font-family:var(--font-display);font-size:40px;color:var(--primary);line-height:1}.modes2 h3{color:#fff}.modes2 p{color:rgba(255,255,255,.7)}
@media (max-width:900px){.modes2{grid-template-columns:minmax(0,1fr)}}
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd>a{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);padding-bottom:4px;border-bottom:1px solid transparent}
.nav-dd>a::after{content:"+";margin-left:6px;color:var(--primary)}
.nav-dd>a:hover,.nav-dd>a.cur{color:#fff}.nav-dd>a.cur{border-bottom-color:var(--primary)}
.nav-dd-panel{position:absolute;top:100%;left:-20px;min-width:260px;background:var(--dark);border:.5px solid rgba(255,255,255,.08);padding:10px 0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility 0s .2s}
.nav-dd:hover .nav-dd-panel,.nav-dd:focus-within .nav-dd-panel{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
.nav-dd-panel a{padding:11px 20px;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.75)}.nav-dd-panel a:hover,.nav-dd-panel a[aria-current]{color:var(--primary)}
.nav-cta{display:flex;align-items:center;gap:20px}
.nav-tel,.nav-wa{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}.nav-wa{color:var(--primary)}
@media (max-width:1280px){.nav-tel{display:none}}
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}.price{background:var(--card);border:.5px solid var(--hair);padding:36px 32px;display:flex;flex-direction:column;gap:12px}.price .pr{font-family:var(--font-display);font-size:44px;line-height:1;color:var(--ink)}.price .pr small{font-family:var(--font-sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--primary);margin-right:4px}.price p:last-child{color:var(--body);font-size:14px}
.ref-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:4px}.ref-links a{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}
@media (max-width:900px){.prices{grid-template-columns:minmax(0,1fr)}}
.hero h1.eyebrow{font-family:var(--font-sans);font-weight:500;font-size:11px;line-height:1.5;letter-spacing:.2em;text-transform:uppercase;color:var(--primary);max-width:none}
.hero-title{font-family:var(--font-display);font-weight:300;font-size:clamp(40px,5.4vw,68px);line-height:1.05;color:#fff;max-width:960px;margin:0;text-wrap:balance}.hero-title em{font-style:italic;color:var(--primary)}

.hero .container.hero-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:end}
.hero-copy{display:flex;flex-direction:column;gap:26px}
.hero-portrait{margin:0 0 -104px}.hero-portrait img{display:block;width:100%;height:auto}
@media (max-width:900px){.hero .container.hero-split{grid-template-columns:minmax(0,1fr)}.hero-portrait{max-width:360px;margin:0 auto -72px}}
.rs-light .rs-card,.rs-light .rs-card:hover{color:var(--ink)}
.rs-light .rs-card .ph{background:var(--warm)}
.rs-light .rs-card .meta{border-bottom-color:var(--hair)}
.rs-light .rs-card h3{color:var(--ink)}
.rs-light .rs-card .client{color:var(--muted)}
.rs-light .rs-card p{color:var(--body)}
.rs-light .rs-hint{color:var(--muted)}
.rs-light .rs-prog{background:var(--hair)}
.rs-light .sq{border-color:rgba(26,26,26,.25);color:var(--ink)}
.rs-light .sq:hover:not(:disabled){color:#fff}
.rs-light .btn-ghost{color:var(--ink);border-color:rgba(26,26,26,.3)}
.rs-light .btn-ghost:hover{color:var(--ink);border-color:var(--ink)}