/* ============ Hero ============ */
.hero{position:relative;background:var(--darker);height:calc(100svh - 6.75rem)}
@media(min-width:768px){.hero{height:85vh;min-height:45rem}}
.hero-inner{
  position:relative;z-index:20;height:100%;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{font-size:1.5rem;color:#fff;user-select:none}
.hero-claim{text-align:right;color:#fff;font-size:.75rem}
@media(min-width:640px){.hero-claim{font-size:1rem}}
.hero-claim p+p{margin-top:-.25rem;color:rgba(255,255,255,.5)}

/* ============ Logo marquee ============ */
.marquee-section{isolation:isolate;display:flex;overflow:hidden;padding:2.5rem 0 3.75rem}
@media(min-width:768px){.marquee-section{padding:5rem 0}}
.marquee-block{flex-shrink:0;width:100%}
.marquee{margin-top:1.75rem;position:relative;overflow:hidden;margin-inline:-1rem}
@media(min-width:640px){.marquee{margin-inline:-4rem}}
@media(min-width:768px){.marquee{margin-top:5rem;margin-inline:-2.25rem}}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:8rem;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%)}
.marquee::after{right:0;background:linear-gradient(to left,#fff 0%,rgba(255,255,255,0) 100%)}
.marquee-track{display:flex;gap:.375rem;width:max-content;animation:marquee 38s linear infinite}
.marquee-track ul{display:flex;gap:.375rem;flex-shrink:0;padding-right:.375rem}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-card{
  display:flex;align-items:center;justify-content:center;
  width:16rem;height:10rem;flex-shrink:0;border-radius:var(--radius);
  background:rgba(19,22,28,.05);
  color:var(--dark);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;
}
.logo-card .serif{font-family:Georgia,serif;font-weight:600;font-style:italic}
.logo-card .caps{text-transform:uppercase;letter-spacing:.18em;font-size:1rem;font-weight:600}

/* ============ Work grid ============ */
.work{padding-block:2.5rem 5rem}
@media(min-width:768px){.work{padding-block:12rem}}
.work-grid{margin-top:3.5rem;display:grid;gap:2.5rem .375rem}
@media(min-width:640px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.work-grid{grid-template-columns:repeat(3,1fr);row-gap:4rem}}
.card{display:block;text-align:left;cursor:pointer}
.card-media{
  display:block;position:relative;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:1/1.04;transition:border-radius .3s;
}
@media(min-width:768px){.card-media{aspect-ratio:1/1.3}}
.card:hover .card-media{border-radius:var(--radius-lg)}
.pxwrap{display:block;height:113%;will-change:transform;transition:transform .1s linear}
.card-media .fill{
  height:100%;transition:transform .45s var(--ease-out-quart);
  display:flex;align-items:center;justify-content:center;
}
.card:hover .card-media .fill{transform:scale(1.03)}
.card-media .fill span{
  color:rgba(255,255,255,.92);font-weight:700;font-size:clamp(1.4rem,2.2vw,2rem);letter-spacing:-.02em;
  text-shadow:0 2px 24px rgba(0,0,0,.25);
}
@media(min-width:1024px){
  .card.wide{grid-column:span 2;display:flex;flex-direction:column}
  .card.wide .card-media{flex:1 1 auto;aspect-ratio:2.1/1}
}
.card-media.outline{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.card-title{display:block;margin-top:1rem;font-weight:500}
.card-sub{display:block;line-height:1.25;color:var(--dark-subtle);transition:color .2s}
.card:hover .card-sub{color:var(--dark)}

/* project gradient fills */
.g-redbull{background:linear-gradient(120deg,#1d2440 0%,#27356e 42%,#8a2f2f 100%)}
.g-organics{background:linear-gradient(160deg,#0d3a26 0%,#1d6b40 55%,#d4b23a 115%)}
.g-volvo{background:linear-gradient(150deg,#0c1526 0%,#1e3a5f 60%,#557a9e 110%)}
.g-athlete{background:linear-gradient(150deg,#191919 0%,#3a3a42 60%,#7f8691 110%)}
.g-isar{background:linear-gradient(160deg,#05070d 0%,#101b33 55%,#3d2b63 110%)}
.g-alpha{background:linear-gradient(150deg,#111114 0%,#26262e 60%,#4c4c58 110%)}
.g-zeos{background:linear-gradient(120deg,#241436 0%,#54277c 55%,#9a5bd6 110%)}
.g-rewe{background:linear-gradient(150deg,#3a0d0d 0%,#8c1f1f 60%,#d2452e 110%)}
.g-zalando{background:linear-gradient(150deg,#f2f2f2 0%,#e2e2e6 60%,#cfd2da 110%)}
.g-zalando span{color:var(--dark)!important;text-shadow:none!important}
.g-tng{background:linear-gradient(150deg,#101820 0%,#1e3a3a 60%,#3f7d76 110%)}

/* ============ Services (sticky stack) ============ */
.services{position:relative;isolation:isolate}
@media(min-width:1024px){.services{padding-inline:2.25rem}}
.services-bg{position:absolute;inset:0;z-index:-10}
.services-bg-sticky{position:sticky;top:0;height:100vh;display:grid;overflow:hidden}
.services-bg-sticky .gradientfx{transition:filter 1s}
.services-titles{
  position:relative;z-index:1;display:none;width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:2.25rem;
  grid-template-columns:repeat(12,1fr);align-items:stretch;height:100%;padding-block:5rem;
}
@media(min-width:1024px){.services-titles{display:grid}}
.services-titles .col{grid-column:span 5;display:flex;flex-direction:column}
.services-titles h2{
  font-size:clamp(1.8rem,2.6vw,2.5rem);font-weight:500;color:rgba(255,255,255,.5);
  display:flex;height:50%;flex-direction:column;justify-content:flex-end;letter-spacing:-.02em;
}
.services-title-stack{position:relative;height:50%}
.services-title-stack span{
  position:absolute;inset:0;color:#fff;font-size:clamp(1.8rem,2.6vw,2.5rem);font-weight:500;letter-spacing:-.02em;
  opacity:0;transform:translateY(2.5rem);transition:opacity .3s,transform .3s;
}
.services-title-stack span.active{opacity:1;transform:none}
.service-row{width:100%;max-width:var(--container);margin-inline:auto;padding:3.75rem 1rem}
@media(min-width:640px){.service-row{padding-inline:4rem}}
@media(min-width:768px){.service-row{padding-inline:2.25rem}}
@media(min-width:1024px){
  .service-row{
    position:sticky;top:0;min-height:100vh;padding:5rem 0;
    display:grid;grid-template-columns:repeat(2,1fr);align-items:center;
  }
}
.service-row h2.m{font-size:1.5rem;font-weight:500;color:#fff;margin-bottom:2rem}
.service-row h2.m .pre{display:block;color:rgba(255,255,255,.5)}
@media(min-width:1024px){
  .service-row h2.m{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
  .service-card-wrap{grid-column:2}
}
.service-card{background:#fff;border-radius:var(--radius);overflow:hidden;padding:1.25rem 1rem 0;max-width:42.5rem}
@media(min-width:1024px){.service-card{border-radius:var(--radius-lg);padding-top:2rem}}
.service-visual{margin:0 1.25rem -0.75rem;border-radius:.5rem;overflow:hidden;position:relative;padding-top:41.84%}
@media(min-width:1024px){.service-visual{margin:0 3.5rem -0.75rem}}
.service-visual .viz{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.5rem}
.service-visual .viz i{display:block;border-radius:9999px;background:var(--dark)}
.service-body{padding:1.75rem 1.25rem 1.25rem}
@media(min-width:1024px){.service-body{padding:3rem 3.5rem}}
.service-body>p{font-size:1.0625rem;line-height:1.3;max-width:36.25rem}
.service-body .cap-label{margin-top:2.75rem;font-family:var(--font-mono);font-size:.8125rem;color:rgba(19,22,28,.8)}
.cap-grid{margin-top:.875rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.375rem;font-size:.8125rem;line-height:1.25}
@media(min-width:1024px){.cap-grid{gap:.5rem}}
.cap-grid li{position:relative;border-radius:.5rem;background:var(--gray-200);padding:.375rem .625rem .5rem}
@media(min-width:1024px){
  .cap-grid li{display:flex;align-items:baseline;gap:.5rem;padding:.625rem .625rem .75rem}
  .cap-grid li::before{content:"";width:.5rem;height:.5rem;flex-shrink:0;border-radius:50%;background:var(--dark);transform:translateY(-20%)}
}
.services-bg-sticky .gradientfx{filter:hue-rotate(0deg)}
.services[data-active="1"] .services-bg-sticky .gradientfx{filter:hue-rotate(40deg)}
.services[data-active="2"] .services-bg-sticky .gradientfx{filter:hue-rotate(110deg)}
.services[data-active="3"] .services-bg-sticky .gradientfx{filter:hue-rotate(200deg)}

/* ============ Horizontal carousels ============ */
.about{overflow:hidden;padding:3.75rem 0}
@media(min-width:768px){.about{padding:10rem 0}}
.hscroll{
  margin-top:2.5rem;display:flex;gap:.375rem;overflow-x:auto;overscroll-behavior-x:contain;
  padding-bottom:.5rem;cursor:grab;scrollbar-width:none;
  /* full bleed: cancel the container padding so slides run to the screen edge */
  margin-inline:-1rem;padding-inline:1rem;
}
@media(min-width:640px){.hscroll{margin-inline:-4rem;padding-inline:4rem}}
@media(min-width:768px){.hscroll{margin-inline:-2.25rem;padding-inline:2.25rem}}
.hscroll.dragging{cursor:grabbing;scroll-snap-type:none}
.hscroll::-webkit-scrollbar{display:none}
@media(min-width:1024px){.hscroll{margin-top:4rem}}
.about-card{
  flex-shrink:0;width:min(85vw,23.25rem);
  display:flex;flex-direction:column;aspect-ratio:1/1.23;
  border-radius:.5rem;border:1px solid rgba(0,0,0,.05);background:var(--gray-100);
  overflow:hidden;text-align:left;transition:border-radius .3s;
}
.about-card:hover{border-radius:var(--radius-lg)}
.about-media{width:100%;aspect-ratio:2000/1414;overflow:hidden}
.about-media .fill{width:100%;height:100%;transition:transform .45s var(--ease-out-quart)}
.about-card:hover .about-media .fill{transform:scale(1.03)}
.about-body{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:1.5rem 1.25rem}
.about-body .t{font-weight:500}
.about-body .t .l1{display:block;color:var(--dark-very-subtle);transition:color .2s}
.about-card:hover .about-body .t .l1{color:var(--dark-subtle)}
.about-body .t .l2{display:block;margin-top:-.125rem}
.about-foot{display:flex;justify-content:space-between;align-items:center}
.about-foot .num{font-family:var(--font-mono);font-size:.8125rem;color:rgba(19,22,28,.5);transition:color .2s}
.about-card:hover .about-foot .num{color:var(--dark)}
.about-foot svg{width:10px;height:10px}
.a1{background:linear-gradient(140deg,#c9c3b8,#8e8578)}
.a2{background:linear-gradient(140deg,#7d8a96,#4b5560)}
.a3{background:linear-gradient(140deg,#d8d4cd,#a49e93)}
.a4{background:linear-gradient(140deg,#3c4753,#182028)}
.a5{background:linear-gradient(140deg,#b8bfc7,#7c848d)}
.a6{background:linear-gradient(140deg,#a99f90,#6e6459)}

/* ============ Facts ============ */
.facts{padding-block:3.75rem}
@media(min-width:768px){.facts{padding-block:10rem}}
.facts>ul{margin-top:2rem}
@media(min-width:768px){.facts>ul{margin-top:3.5rem}}
.facts>ul>li{display:grid;gap:1rem .375rem;padding:1.75rem 0;border-top:1px solid rgba(0,0,0,.1)}
.facts>ul>li:first-child{border-top:0}
@media(min-width:640px){.facts>ul>li:first-child{border-top:1px solid rgba(0,0,0,.1)}}
@media(min-width:1024px){.facts>ul>li{grid-template-columns:repeat(2,1fr)}}
.facts h3{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:500;letter-spacing:-.02em}
.facts .fact-body{display:flex;justify-content:space-between;gap:2rem}
.facts .fact-body p{font-size:.875rem;color:var(--dark-subtle);max-width:36rem}
.facts .fact-body p em{font-style:normal;color:var(--dark)}
.fact-visual{order:0;width:7.75rem;flex-shrink:0}
@media(max-width:639px){.facts .fact-body{flex-direction:column-reverse}}
.avatar-stack{position:relative;width:7.75rem;height:7.75rem}
.avatar-stack i{
  position:absolute;top:0;left:0;width:6rem;height:6rem;border-radius:.5rem;
  border:3px solid #fff;display:block;
  transition:transform .6s var(--ease-out-quart),opacity .6s;
}
.av1{background:linear-gradient(140deg,#caa17e,#8f6b4c)}
.av2{background:linear-gradient(140deg,#96a5b4,#5c6a78)}
.av3{background:linear-gradient(140deg,#b8a6c9,#7a688e)}
.av4{background:linear-gradient(140deg,#9dbb9a,#5c7a5a)}
.av5{background:linear-gradient(140deg,#c9b6a0,#8a7660)}
.fact-tile{width:7.75rem;height:7.75rem;border-radius:.5rem;overflow:hidden;display:flex;align-items:center;justify-content:center}
.fact-tile.award{background:conic-gradient(from 200deg,#1d2440,#54277c,#0e5f8a,#1d2440);animation:spinbg 14s linear infinite}
@keyframes spinbg{from{filter:hue-rotate(0)}to{filter:hue-rotate(360deg)}}
.fact-tile.map{background:linear-gradient(140deg,#0c1526,#1e3a5f)}
.fact-tile.map::after{content:"CGN → BLN";color:rgba(255,255,255,.85);font-family:var(--font-mono);font-size:.7rem}
.fact-tile.bcorp{background:#fff;border:2px solid var(--dark)}
.fact-tile.bcorp span{
  width:4.6rem;height:4.6rem;border:3px solid var(--dark);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:2rem;
}

/* ============ People carousel ============ */
.people{overflow:hidden;padding:3.75rem 0}
@media(min-width:768px){.people{padding:10rem 0}}
.people .hscroll{margin-top:4rem;gap:1rem}
@media(min-width:768px){.people .hscroll{margin-top:6rem}}
.people figure{flex-shrink:0;width:min(80vw,34.5rem)}
@media(min-width:1024px){
  .people figure{width:28vw}
  .people figure:nth-child(2n){width:24vw}
  .people figure:nth-child(3n){width:31vw}
}
.people .ph{border-radius:var(--radius);overflow:hidden;aspect-ratio:2000/2668}
.people .pxx{display:block;width:112%;height:100%;will-change:transform}
.people .pxx .fill{width:100%;height:100%}
.people figcaption{margin-top:1rem;font-size:.875rem;line-height:1.25}
.people figcaption .ft{font-weight:500}
.people figcaption .fs{margin-top:.25rem;color:var(--dark-subtle)}
.p1{background:linear-gradient(160deg,#d9d5ce,#9f9a90)}
.p2{background:linear-gradient(160deg,#5a646e,#242b33)}
.p3{background:linear-gradient(160deg,#c8cdd4,#8d949d)}
.p4{background:linear-gradient(160deg,#4a5540,#1d241a)}
.p5{background:linear-gradient(160deg,#b9a893,#77664f)}
.p6{background:linear-gradient(160deg,#8b939c,#3f464e)}

/* ============ Contact ============ */
.contact{padding-block:5rem 10rem}
@media(min-width:768px){.contact{padding-block:5rem}}
.contact-box{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--darker);color:#fff}
@media(min-width:1024px){.contact-box{aspect-ratio:1/0.5;display:flex;flex-direction:column;justify-content:space-between}}
.contact-head{position:relative;z-index:10;padding:1.25rem 1rem 0}
@media(min-width:640px){.contact-head{padding:2rem}}
@media(min-width:1024px){.contact-head{padding:3.5rem 3rem}}
.contact-head h2{font-weight:500;font-size:clamp(1.5rem,2.6vw,2.25rem);letter-spacing:-.02em}
.contact-head h2 .pre{display:block;color:rgba(255,255,255,.5)}
.contact-head h2 .main{display:block;margin-top:.25rem}
.contact-cardrow{position:relative;z-index:10;margin-top:5rem;display:grid;gap:.375rem}
@media(min-width:768px){.contact-cardrow{margin-top:2.5rem}}
@media(min-width:1024px){.contact-cardrow{margin-top:0;grid-template-columns:repeat(12,1fr)}}
.contact-cardwrap{padding:0 .625rem .625rem}
@media(min-width:640px){.contact-cardwrap{padding:0 1.5rem 1.5rem}}
@media(min-width:768px){.contact-cardwrap{padding:.75rem}}
@media(min-width:1024px){.contact-cardwrap{grid-column:6/13;padding-left:0}}
@media(min-width:1280px){.contact-cardwrap{grid-column:7/13}}
.contact-card{color:var(--dark);background:#fff;border-radius:var(--radius);padding:1rem}
@media(min-width:640px){.contact-card{display:flex;justify-content:space-between}}
@media(min-width:768px){.contact-card{padding:.5rem}}
.contact-avatar{
  width:5rem;height:5rem;border-radius:.5rem;flex-shrink:0;
  background:linear-gradient(140deg,#b6c1cc,#5b6875);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.4rem;
}
@media(min-width:640px){.contact-avatar{order:2}}
@media(min-width:768px){.contact-avatar{width:10.9375rem;height:10.9375rem;font-size:2.4rem}}
.contact-info{margin-top:1.75rem;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between}
@media(min-width:640px){.contact-info{margin-top:0;padding:.75rem}}
.contact-info .name{display:block}
.contact-info .role{display:block;margin-top:-.125rem;color:var(--dark-very-subtle)}
.cta{margin-top:1.5rem;display:flex;align-items:center;gap:1.25rem;font-family:var(--font-mono);font-size:.8125rem}
.cta .btn{display:inline-block;border-radius:9999px;padding:.75rem 1.75rem;background:#000;color:#fff;transition:background .2s;white-space:nowrap}
@media(min-width:1024px){.cta .btn{padding-inline:1.25rem}}
.cta:hover .btn{background:rgba(0,0,0,.8)}
.cta .mail{color:rgba(19,22,28,.5);transition:color .2s}
.cta:hover .mail{color:var(--dark)}
.cta.gray .btn{background:rgba(0,0,0,.1);color:var(--dark)}
.cta.gray:hover .btn{background:rgba(0,0,0,.2)}

/* ============ Footer ============ */
footer{
  font-family:var(--font-mono);font-size:.8125rem;
  display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem 5rem;
  padding-top:4rem;padding-bottom:8rem;
}
@media(min-width:768px){footer{aspect-ratio:16/9}}
.footer-grid{display:grid;gap:.375rem;row-gap:2.5rem}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(4,1fr)}}
.footer-grid .flogo{font-size:1.35rem}
.footer-grid .subtle{color:var(--dark-subtle)}
.footer-grid address{font-style:normal}
.footer-grid address span{display:block;min-height:1.5rem}
.footer-grid nav{display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.footer-grid nav{display:block}}
@media(min-width:768px){.footer-grid nav ul+ul{margin-top:1.5rem}}
.footer-grid nav a{display:inline-flex;min-height:1.5rem;align-items:center}
.footer-grid nav a:hover{text-decoration:underline}
.claim{margin-top:5rem;width:100%;pointer-events:none;user-select:none}
.claim text{font-family:var(--font-sans);font-weight:600;letter-spacing:-.03em;fill:var(--dark)}

/* ============ Legal pages (Impressum / Datenschutz / AGB) ============ */
.legal-hero{position:relative;height:72vh;min-height:26rem;display:flex;align-items:center;overflow:hidden}
.legal-gradient{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 15% -10%,rgba(6,10,40,.55),transparent 60%),
    linear-gradient(180deg,#0c2fa5 0%,#2e63d8 48%,#c9b4e9 100%);
}
.legal-hero .container{position:relative;z-index:2;display:flex;justify-content:flex-end}
.legal-hero h1{color:#fff;font-size:1.5rem;font-weight:500;letter-spacing:-.02em}
.legal-content{padding-block:4rem 6rem}
.legal-content .inner{max-width:37rem}
.legal-content h2{font-size:1.0625rem;font-weight:600;margin-top:2.25rem}
.legal-content h2:first-child{margin-top:0}
.legal-content p{margin-top:.375rem;line-height:1.6}
.legal-content a{text-decoration:underline;text-underline-offset:2px}
/* legal pages: the nav is a single "back home" pill like the original */
.nav-back{padding:.375rem}
.nav-back a{
  display:flex;align-items:center;gap:.5rem;
  padding:.625rem 1.375rem .75rem;border-radius:9999px;
  font-size:.9375rem;font-weight:500;letter-spacing:-.00938rem;line-height:1.25;
  color:var(--dark-subtle);transition:color .2s;
}
.nav-back a:hover{color:var(--dark)}
.nav-back .arr{transition:transform .2s}
.nav-back a:hover .arr{transform:translateX(-2px)}