/* ============================================================
   VALEDE STUDIO — shared stylesheet
   Tokens derived strictly from brief:
   Warm Ivory #F5F2EC / Near Black #171717 / Burgundy #6E2F32 / Muted Grey #66625F
   Display: Cormorant Garamond — Body/UI: Inter
   ============================================================ */

/* Шрифты самостоятельно размещены в /fonts — Google больше не участвует.
   Файлы .woff2 лежат в public_html/fonts/, этот файл — в public_html/css/,
   поэтому пути ниже начинаются с ../fonts/. */

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/inter-v20-latin_latin-ext-300.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter-v20-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/inter-v20-latin_latin-ext-600.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-300.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-italic.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-600.woff2') format('woff2');
}

:root{
  --ivory: #F5F2EC;
  --ivory-dim: #ECE7DC;
  --black: #171717;
  --burgundy: #6E2F32;
  --burgundy-soft: #6E2F3222;
  --burgundy-lit: #A45A5D;
  --grey: #66625F;
  --hair: #17171717;

  --display: 'Cormorant Garamond', serif;
  --body: 'Inter', sans-serif;

  --edge: clamp(24px, 5vw, 64px);
  --max: 1440px;

  --dur: 700ms;
  --ease: cubic-bezier(.16,.8,.24,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html,body{ background:var(--ivory); color:var(--black); }
body{
  font-family:var(--body);
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; background:none; border:none; cursor:pointer; color:inherit; }

::selection{ background:var(--burgundy); color:var(--ivory); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline:1.5px solid var(--burgundy); outline-offset:4px; }

/* ---------- type scale ---------- */
.eyebrow{
  font-family:var(--body);
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--grey);
}
.eyebrow em{ color:var(--burgundy); font-style:normal; }

/* service block index numbers (01–04) — 2.5x bigger */
.svc-block-num{
  font-size:27.5px;
  letter-spacing:.04em;
}

/* service description paragraphs — slightly smaller on mobile so they sit lighter under the heading */
@media (max-width:820px){
  .svc-desc{
    font-size:14.5px;
    line-height:1.7;
  }
}

h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--black);
}
.display-xl{ font-size:clamp(52px, 9vw, 132px); line-height:.96; font-weight:300; }
.display-lg{ font-size:clamp(38px, 5.4vw, 76px); line-height:1.02; font-weight:400; }
.display-md{ font-size:clamp(28px, 3.4vw, 44px); line-height:1.08; font-weight:400; }
.display-sm{ font-size:clamp(22px, 2.4vw, 30px); line-height:1.15; font-weight:500; }

p, .body-text{ font-family:var(--body); font-weight:400; color:var(--black); }
.lede{ font-family:var(--display); font-size:clamp(20px,2.2vw,26px); font-weight:400; line-height:1.45; color:var(--black); }
.muted{ color:var(--grey); }
.small{ font-size:13px; color:var(--grey); }

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--edge); }
.grid12{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(16px,2vw,28px); }
section{ position:relative; }
.rule{ height:1px; background:var(--hair); width:100%; }
.rule--burgundy{ background:var(--burgundy); height:1px; width:56px; }

.no-vw{ overflow:hidden; }

/* ---------- full-bleed video hero ---------- */
.hero-full{ position:relative; height:100vh; min-height:640px; max-height:1100px; overflow:hidden; background:var(--black); }
.hero-full video, .hero-full img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-full::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,23,23,.18) 0%, rgba(23,23,23,.12) 38%, rgba(23,23,23,.62) 82%, rgba(23,23,23,.88) 100%);
}
.hero-full__content{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:0 var(--edge) 96px; }
.hero-full__content .eyebrow{ color:#F5F2ECCC; }
.hero-full__content h1{ color:var(--ivory); max-width:18ch; }
.hero-full__mark{ position:absolute; top:22px; left:var(--edge); z-index:3; }
.hero-scroll{
  position:absolute; bottom:36px; right:var(--edge); z-index:2; color:var(--ivory);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; opacity:.75;
  display:flex; align-items:center; gap:10px;
}
.hero-scroll .line{ width:1px; height:28px; background:var(--ivory); opacity:.6; animation:scrollline 2.4s ease-in-out infinite; }
@keyframes scrollline{ 0%,100%{ transform:scaleY(1); transform-origin:top;} 50%{ transform:scaleY(.4); transform-origin:top;} }

@media (max-width:820px){
  .hero-full{ height:88vh; min-height:520px; }
  .hero-full__content{ padding-bottom:64px; }
  .hero-full video{ object-position: right center; }
}

/* подчёркнутые номера разделов (01, 02, 03…) */
.eyebrow-num{
  display:inline-block;
  color:var(--burgundy);
  border-bottom:2px solid var(--burgundy);
  padding-bottom:4px;
  line-height:1;
}

/* nav sitting over a dark hero: ivory until scrolled */
.nav--hero:not(.is-scrolled) .nav__mark,
.nav--hero:not(.is-scrolled) .nav__links a,
.nav--hero:not(.is-scrolled) .nav__lang{ color:var(--ivory); }
.nav--hero:not(.is-scrolled) .nav__burger span{ background:var(--ivory); }
.nav--hero:not(.is-scrolled) .nav__lang button{ opacity:.55; }
.nav--hero:not(.is-scrolled) .nav__lang button.is-active{ opacity:1; border-color:var(--ivory); }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--edge);
  mix-blend-mode:normal;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{ background:rgba(245,242,236,.86); backdrop-filter:blur(10px); border-color:var(--hair); }
.nav__mark{ font-family:var(--display); font-size:20px; letter-spacing:.03em; }
.nav__mark b{ font-weight:500; }
.nav__links{ display:flex; align-items:center; gap:36px; }
.nav__links a{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  position:relative; padding-bottom:3px; color:var(--black);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--burgundy);
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
.nav__links a:hover::after, .nav__links a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav__lang{ display:flex; gap:8px; align-items:center; font-size:12px; letter-spacing:.08em; font-weight:500; }
.nav__lang button{ opacity:.4; padding:2px 3px; }
.nav__lang button.is-active{ opacity:1; border-bottom:1px solid var(--burgundy); }
.nav__right{ display:flex; align-items:center; gap:28px; }
.nav__burger{ display:none; flex-direction:column; gap:5px; width:22px; }
.nav__burger span{ height:1px; background:var(--black); width:100%; }

@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
}

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:200; background:var(--ivory);
  display:flex; flex-direction:column; justify-content:center; gap:28px; padding:var(--edge);
  transform:translateY(-100%); transition:transform .5s var(--ease);
}
.drawer.is-open{ transform:translateY(0); }
.drawer a{ font-family:var(--display); font-size:38px; }
.drawer__close{ position:absolute; top:22px; right:var(--edge); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  padding-bottom:6px; border-bottom:1px solid var(--black);
  transition:border-color .3s var(--ease), color .3s var(--ease), gap .3s var(--ease);
}
.btn:hover{ border-color:var(--burgundy); color:var(--burgundy); gap:16px; }
.btn--ivory{ border-color:var(--ivory); color:var(--ivory); }
.btn--ivory:hover{ border-color:var(--burgundy); color:var(--burgundy); }

/* ---------- media placeholders (stand-ins for client photo/video) ---------- */
.media{
  position:relative; overflow:hidden; background:var(--black);
  aspect-ratio: var(--ar, 4/5);
}
.media img, .media video{ width:100%; height:100%; object-fit:cover; }
.media .ph{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:
    linear-gradient(155deg, #23201d 0%, #171717 55%, #0f0f0f 100%);
  color:var(--ivory);
}
.media .ph span{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; opacity:.55; }
.media .ph small{ font-size:10px; opacity:.35; }
.media--loop .ph::after{
  content:"⏵"; position:absolute; top:14px; right:16px; font-size:11px; opacity:.4;
}
.media__tag{
  position:absolute; left:16px; bottom:16px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory); opacity:.7;
}

/* full, uncropped video: no forced aspect-ratio, video shown entirely (letterboxed if needed) */
.media--natural{ aspect-ratio:auto; }
.media--natural video,
.media--natural img{ width:100%; height:auto; max-height:88vh; object-fit:contain; }

/* ---------- work: click-to-play video (no autoplay) ---------- */
.media--playable{ cursor:pointer; }
.media--playable::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:rgba(23,23,23,.24);
  transition:opacity .4s var(--ease);
}
.media--playable.is-playing::before{ opacity:0; }
.media__play{
  position:absolute; top:50%; left:50%; z-index:2;
  width:clamp(56px,6vw,76px); height:clamp(56px,6vw,76px);
  transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--ivory);
  border:1px solid var(--burgundy);
  color:var(--burgundy);
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), opacity .3s var(--ease), border-color .35s var(--ease);
}
.media__play svg{ width:36%; height:36%; margin-left:5%; fill:currentColor; }
.media--playable:hover .media__play{ background:var(--burgundy); color:var(--ivory); transform:translate(-50%,-50%) scale(1.06); }
.media--playable.is-playing .media__play{ opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.82); }
.media--playable video::-webkit-media-controls-panel{ background:linear-gradient(180deg, transparent, rgba(0,0,0,.55)); }

/* ---------- work: expandable project detail (MEHR ↓ / WENIGER ↑) ---------- */
.expand__toggle{
  display:inline-flex; align-items:center; gap:10px; margin-top:22px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--burgundy); padding-bottom:6px; border-bottom:1px solid var(--burgundy);
  transition:gap .3s var(--ease);
}
.expand__toggle:hover{ gap:16px; }
.expand__arrow{ display:inline-block; font-size:11px; transition:transform .4s var(--ease); }
.expand__toggle[aria-expanded="true"] .expand__arrow{ transform:rotate(180deg); }
.expand__label--open{ display:none; }
.expand__toggle[aria-expanded="true"] .expand__label--closed{ display:none; }
.expand__toggle[aria-expanded="true"] .expand__label--open{ display:inline; }

.expand__panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .6s var(--ease);
}
.project.is-open .expand__panel{ grid-template-rows:1fr; }
.expand__panel-inner{ overflow:hidden; min-height:0; }

.expand__text, .expand__subtext{
  padding-top:32px; font-size:16px; line-height:1.75; color:var(--black);
}
.expand__subhead{
  margin-top:28px; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--grey);
}

.expand__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,18px);
  margin-top:36px;
}
.expand__photo{ position:relative; overflow:hidden; background:var(--black); cursor:zoom-in; }
.expand__photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.expand__photo:hover img{ transform:scale(1.04); }

@media (max-width:820px){
  .expand__grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- work: fullscreen lightbox for expand__photo images ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:6vh 5vw;
  background:rgba(15,15,15,.94);
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility 0s linear .3s;
}
.lightbox.is-open{ opacity:1; visibility:visible; transition:opacity .3s var(--ease); }
.lightbox img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; box-shadow:0 30px 90px rgba(0,0,0,.55); }
.lightbox__close{
  position:absolute; top:22px; right:24px; z-index:2;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ivory); color:var(--black);
  border:1px solid var(--burgundy);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.lightbox__close:hover{ background:var(--burgundy); color:var(--ivory); transform:scale(1.06); }
.lightbox__close svg{ width:16px; height:16px; }
@media (max-width:600px){
  .lightbox{ padding:4vh 4vw; }
  .lightbox__close{ top:14px; right:14px; width:38px; height:38px; }
}

/* ---------- services list (block 02) — text scaled 1.5x, heading & button excluded ---------- */
.services-list--lg .eyebrow{ font-size:16.5px; }
.services-list--lg h3.display-sm{ font-size:clamp(33px,3.6vw,45px); }
.services-list--lg p.small{ font-size:19.5px; line-height:1.6; }

/* ---------- published magazine card (block 03) — text left, cover right on desktop ---------- */
.published-card{
  display:grid;
  grid-template-columns:1fr minmax(180px,260px);
  gap:clamp(24px,4vw,48px);
  align-items:center;
  text-decoration:none;
  color:inherit;
}
.published-card__info{ order:1; }
.published-card__cover{ position:relative; order:2; }
.published-card__cover .media{ background:var(--black); transition:transform .5s var(--ease); }
.published-card:hover .published-card__cover .media{ transform:translateY(-4px); }
.published-card__info .btn{ width:fit-content; }

@media (max-width:600px){
  .published-card{ grid-template-columns:1fr; }
  .published-card__info{ order:1; }
  .published-card__cover{ order:2; max-width:200px; margin-inline:auto; }
}


.studio-founder{
  display:grid;
  grid-template-columns:minmax(180px,31%) 1fr;
  gap:clamp(28px,4vw,56px);
  align-items:start;
  max-width:980px;
  margin-inline:auto;
}
.studio-founder__photo{ position:relative; }
.studio-founder__photo .media{ background:transparent; }
/* offset burgundy frame, echoes .wk-offset elsewhere on the site */
.studio-founder__photo::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:-14px; top:14px; right:14px; bottom:-14px;
  border:1px solid var(--burgundy);
}
.studio-founder__txt{
  position:relative;
  padding-left:clamp(28px,4vw,56px);
  margin-top:clamp(24px,6vw,64px);
}
/* the "bridge": a thin burgundy thread running out of the photo into the text */
.studio-founder__txt::before{
  content:"";
  position:absolute; z-index:1;
  left:0; top:.2em; bottom:56px;
  width:1px; background:var(--burgundy);
}
.studio-founder__txt::after{
  content:"";
  position:absolute; z-index:1;
  left:-1px; top:.2em;
  width:9px; height:9px; margin-left:-4px;
  border-radius:50%; background:var(--burgundy);
}

@media (max-width:820px){
  .studio-founder{ grid-template-columns:1fr; }
  .studio-founder__photo{ width:fit-content; margin-inline:auto; }
  .studio-founder__photo .media{ max-width:170px !important; }
  .studio-founder__photo::before{ left:-10px; top:10px; right:10px; bottom:-10px; }
  .studio-founder__txt{ padding-left:0; margin-top:56px; }
  .studio-founder__txt::before,
  .studio-founder__txt::after{ display:none; }
}

/* ---- Studio v2: headline + role on the left, photo on the right ---- */
.studio-founder--v2{
  grid-template-columns:1fr minmax(240px,38%);
  max-width:1080px;
  align-items:start;
}
.studio-founder--v2 .studio-founder__txt{
  order:1;
  padding-left:0;
  margin-top:0;
}
.studio-founder--v2 .studio-founder__txt::before,
.studio-founder--v2 .studio-founder__txt::after{ display:none; }
.studio-founder--v2 .studio-founder__photo{ order:2; }
.studio-founder--v2 .studio-founder__photo .media{ max-width:none; }

.studio-role{
  display:flex;
  gap:20px;
  margin-top:48px;
}
.studio-role__bar{
  flex:none;
  width:1px;
  background:var(--burgundy);
}
.studio-role__info p{ margin:0; line-height:1.5; }
.studio-role__info p + p{ margin-top:4px; }
.studio-role__name{
  color:var(--burgundy-lit);
  margin-top:10px !important;
  font-weight:500;
}

.studio-divider{
  height:1px;
  background:#F5F2EC26;
  width:100%;
  margin:64px 0;
}

.studio-body p{
  color:#F5F2ECCC;
  max-width:60ch;
  font-size:16px;
  line-height:1.8;
}

@media (max-width:820px){
  .studio-founder--v2{
    grid-template-columns:1fr minmax(110px,40%);
    gap:16px;
    max-width:none;
  }
  .studio-founder--v2 .studio-founder__txt{ order:1; padding-right:4px; }
  .studio-founder--v2 .studio-founder__photo{
    order:2;
    width:auto;
    margin-inline:0;
    margin-top:0;
  }
  .studio-founder--v2 .studio-founder__photo .media{ max-width:none !important; }
  .studio-founder--v2 .display-lg{ font-size:clamp(28px,7vw,38px); max-width:11ch !important; }
  .studio-role{ margin-top:32px; gap:14px; }
  .studio-role__info p{ font-size:12px; }
  .studio-role__name{ font-size:15px; }
  .studio-divider{ margin:48px 0; }
}

@media (max-width:420px){
  .studio-founder--v2{ grid-template-columns:1fr minmax(96px,38%); gap:12px; }
  .studio-founder--v2 .display-lg{ font-size:clamp(24px,7.6vw,32px); }
  .studio-role{ gap:10px; margin-top:24px; }
}

/* ---------- footer ---------- */
.footer{ background:var(--black); color:var(--ivory); padding:96px var(--edge) 32px; }
.footer .display-lg{ color:var(--ivory); }
.footer a:hover{ color:var(--burgundy); }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-top:64px; }
.footer__col span{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#F5F2EC66; margin-bottom:16px; }
.footer__col li{ margin-bottom:10px; font-size:14px; }
.footer__base{ display:flex; justify-content:space-between; align-items:center; margin-top:72px; padding-top:24px; border-top:1px solid #F5F2EC22; font-size:12px; color:#F5F2EC77; flex-wrap:wrap; gap:12px; }

@media (max-width:760px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
}

/* ---------- mobile composition (deliberately rebuilt, not a shrunk desktop grid) ---------- */
@media (max-width:820px){
  :root{ --edge: 20px; }
  .grid12{ display:block; }
  .grid12 > *{ grid-column:auto !important; margin-top:28px; }
  .grid12 > *:first-child{ margin-top:0; }
  header[style*="padding-top:180px"], header{ padding-top:132px !important; }
  .display-xl{ font-size:clamp(40px,11vw,58px); }
  .nav{ padding:16px var(--edge); }
  .nav__mark{ font-size:16px; }
  .footer{ padding:64px var(--edge) 24px; }
  .footer__base{ flex-direction:column; align-items:flex-start; }
  section[style*="padding:160px 0"], section[style*="padding:140px"]{ padding-top:80px !important; padding-bottom:64px !important; }
  .legal{ padding:132px 20px 80px; }
}

/* ---------- utility reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in{ opacity:1; transform:translateY(0); }

/* language visibility */
[data-en], [data-de]{}
html[lang="de"] [data-en]{ display:none !important; }
html[lang="en"] [data-de]{ display:none !important; }

/* ---------- work filter tabs ---------- */
.filter-tabs{ display:flex; gap:28px; flex-wrap:wrap; }
.filter-tab{
  font-family:var(--body);
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--grey);
  border-bottom:1px solid transparent;
  padding-bottom:6px;
  cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.filter-tab:hover{ color:var(--black); }
.filter-tab.is-active{ color:var(--black); border-color:var(--burgundy); }

.project{
  transition:opacity .5s var(--ease);
}
.project.is-hidden{
  display:none;
}
.filter-empty{
  display:none;
  padding:0 0 120px;
  text-align:center;
  color:var(--grey);
  font-size:14px;
}
.filter-empty.is-visible{ display:block; }

/* ---------- offset film + void (imported composition, project 02) ---------- */
.offset-block{
  display:grid; grid-template-columns:1fr 34%;
  gap:clamp(24px,5vw,72px); align-items:end;
}
.offset-block__txt{ position:relative; padding-bottom:clamp(10px,4vh,44px); }
.offset-block__txt > *{ position:relative; z-index:1; }
.offset-block__ix{
  position:absolute; left:-.05em; bottom:-.14em; z-index:0;
  font-family:var(--display); font-weight:300; line-height:.7; letter-spacing:-.03em;
  font-size:clamp(90px,13vw,180px); color:var(--burgundy-soft); pointer-events:none; user-select:none;
}
.offset-block__lede{ max-width:32ch; margin-top:14px; }

@media (max-width:820px){
  .offset-block{ grid-template-columns:1fr; gap:24px; }
  .offset-block__ix{ font-size:84px; bottom:-.08em; }
}

/* ---------- Selected Work — ported archetype system (from alt concept) ---------- */
.wk-head{
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--hair); padding-top:14px; margin-bottom:clamp(46px,8vh,110px);
}
.wk-head h2{ margin:0; }
.wk-n{
  font-family:var(--body); font-size:10.5px; font-weight:500; letter-spacing:.2em;
  color:var(--burgundy); vertical-align:super; margin-right:14px; text-transform:uppercase;
}

/* two cards per row on desktop, single column below --grid-bp */
.wk-grid{
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(28px,4vw,64px); row-gap:clamp(64px,8vw,120px);
  align-items:start;
}
.wk-grid > *{ margin-top:0 !important; }
/* stepped effect: 2nd card lower, 4th card lower + smaller */
.wk-grid > *:nth-child(2){ margin-top:clamp(90px,12vw,170px) !important; }
.wk-grid > *:nth-child(4){ margin-top:clamp(20px,3vw,50px) !important; }

.wk-cap{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-top:16px; }
.wk-cap .wk-d{ margin-left:auto; }
.wk-title-lg{ font-size:clamp(24px,2.6vw,40px) !important; }

.wk-ix{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  font-family:var(--display); font-weight:300; line-height:.7; letter-spacing:-.04em;
  color:var(--burgundy);
}
.wk-ix--pale{ color:var(--burgundy-soft); }
.wk-ix--lit{ color:var(--burgundy-lit); }

.wk-say em, .wk-a2 .body-text em{ font-style:italic; color:var(--burgundy); }

/* A1 — large cinematic frame: media offset right, giant ix bleeding off the left edge */
.wk-a1{ position:relative; }
.wk-a1 .wk-ix{ left:-.04em; top:-.30em; font-size:clamp(70px,11vw,150px); z-index:2; }
.wk-a1 .wk-m{ position:relative; z-index:1; margin-left:clamp(30px,7vw,90px); width:calc(100% - clamp(30px,7vw,90px)); max-width:340px; }
.wk-a1 .wk-cap{ position:relative; z-index:1; margin-left:clamp(30px,7vw,90px); }
/* full, uncropped video (e.g. portrait source) — aspect-ratio matches the source so no letterboxing */
.wk-m--contain{ background:var(--black); }
.wk-m--contain video{ object-fit:contain; }

/* A2 — small offset film + void: text block with pale ix bleeding under it, narrow film to the right */
.wk-a2{ display:grid; grid-template-columns:1fr 40%; gap:clamp(18px,3vw,40px); align-items:end; }
.wk-a2 .wk-txt{ position:relative; padding-bottom:clamp(8px,3vh,28px); }
.wk-a2 .wk-txt > *{ position:relative; z-index:1; }
.wk-a2 .wk-ix{ left:-.05em; bottom:-.16em; font-size:clamp(56px,8vw,104px); }
.wk-a2 .body-text{ max-width:28ch; margin-top:12px; }

/* A3 — vertical crop in an offset burgundy frame + giant ix overlapping the statement */
.wk-a3{ display:grid; grid-template-columns:38% 1fr; gap:clamp(18px,3.4vw,44px); align-items:center; }
.wk-a3 .wk-m{ width:100%; }
.wk-offset{ position:relative; }
.wk-offset::before{ content:""; position:absolute; z-index:2; pointer-events:none; left:-14px; top:14px; right:14px; bottom:-14px; border:1px solid var(--burgundy); }
.wk-say{ position:relative; }
.wk-a3 .wk-ix{ right:0; top:-.42em; font-size:clamp(84px,14vw,180px); }
.wk-say .display-md{ position:relative; z-index:1; margin:0; max-width:16ch; font-size:clamp(20px,2.2vw,32px); }
.wk-slate{ position:relative; z-index:1; display:block; margin-top:16px; }

/* A4 — dark cinematic card: full-height video within the cell, ix + caption on top */
.wk-a4{ position:relative; width:80%; margin-left:auto; }
.wk-a4 .wk-m{ width:100%; }
.wk-a4 .wk-over{ position:absolute; z-index:3; left:24px; bottom:22px; right:24px; color:var(--ivory); }
.wk-a4 .wk-over h3{ color:var(--ivory); font-size:clamp(24px,2.6vw,40px); }
.wk-a4 .wk-ix{ z-index:3; right:20px; top:20px; font-size:clamp(56px,8vw,104px); }

@media (max-width:820px){
  .wk-grid{ grid-template-columns:1fr; row-gap:72px; }
  .wk-grid > *:nth-child(2),
  .wk-grid > *:nth-child(4){ margin-top:0 !important; }
  .wk-a4{ width:100%; margin-left:0; }
  .wk-a1 .wk-ix{ font-size:92px; z-index:2; }
  .wk-a1 .wk-m{ margin-left:32px; width:calc(100% - 32px); max-width:220px; }
  .wk-a1 .wk-cap{ margin-left:32px; }
  .wk-a2{ grid-template-columns:1fr; gap:24px; }
  .wk-a2 .wk-m{ width:70%; margin-left:auto; }
  .wk-a2 .wk-ix{ font-size:84px; bottom:-.1em; }
  .wk-a3{ grid-template-columns:1fr; gap:24px; }
  .wk-a3 .wk-m{ width:64%; }
  .wk-offset::before{ left:-10px; top:10px; right:10px; bottom:-10px; }
  .wk-a3 .wk-ix{ font-size:140px; right:-.04em; top:-.34em; }
  .wk-say .display-md{ font-size:clamp(26px,6vw,40px); max-width:none; }
  .wk-a4 .wk-ix{ font-size:84px; }
}

/* legal pages */
.legal{ padding:180px var(--edge) 120px; max-width:820px; margin-inline:auto; }
.legal h2{ margin-top:48px; margin-bottom:14px; font-size:24px; }
.legal p, .legal li{ font-family:var(--body); color:var(--black); margin-bottom:12px; font-size:15px; line-height:1.7; }
.legal ul{ list-style:disc; padding-left:20px; margin-bottom:12px; }

/* ============================================================
   FEATURED CAMPAIGNS — coverflow slider
   ============================================================ */
.coverflow-section{
  padding:160px 0 180px;
  background:var(--black);
  color:var(--ivory);
  overflow:hidden;
}
.coverflow-section .eyebrow{ color:#F5F2EC88; }

.coverflow{
  position:relative;
  margin-top:64px;
  overflow:hidden;
}

/* light variant — used when the slider sits inside a white section */
.coverflow--light .coverflow__arrow{ color:var(--black); }
.coverflow--light .coverflow__dots button{ background:#17171744; }
.coverflow--light .coverflow__dots button[aria-current="true"]{ background:var(--burgundy-lit); }
.coverflow__stage{
  position:relative;
  height:min(46.6vw, 621px);
  max-height:660px;
  perspective:1600px;
  perspective-origin:50% 50%;
  touch-action:pan-y;
}
.coverflow__slide{
  position:absolute;
  top:0;
  left:50%;
  width:min(36vw, 480px);
  height:100%;
  will-change:transform, opacity;
  transition:transform .7s cubic-bezier(.22,1,.36,1), opacity .5s ease;
  cursor:pointer;
}
.coverflow__slide[data-active="true"]{ cursor:default; }
.coverflow__media{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.coverflow__media img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transition:transform .8s ease, filter .5s ease;
}
.coverflow__slide[data-active="true"] .coverflow__media:hover img{
  transform:scale(1.04);
}
.coverflow__explore{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--ivory);
  font-family:var(--body);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 60%, rgba(0,0,0,.05) 100%);
  opacity:0;
  transition:opacity .35s ease, background .35s ease;
  pointer-events:none;
}
.coverflow__slide[data-active="true"] .coverflow__media:hover .coverflow__explore{
  opacity:1;
  background:rgba(0,0,0,.32);
}
.coverflow__slide[data-active="true"] .coverflow__media:hover .coverflow__cap,
.coverflow__slide[data-active="true"] .coverflow__media:hover ~ .coverflow__tags{
  opacity:0;
}

.coverflow__cap{
  position:absolute;
  left:22px;
  bottom:20px;
  z-index:2;
  pointer-events:none;
  transition:opacity .3s ease;
}
.coverflow__slide[data-active="true"] .coverflow__cap{ opacity:1; }
.coverflow__slide:not([data-active="true"]) .coverflow__cap{ opacity:0; }
.coverflow__kicker{
  font-family:var(--body);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#F5F2ECBB;
}
.coverflow__title{
  font-family:var(--display);
  font-size:clamp(20px,2.6vw,30px);
  font-weight:500;
  color:var(--ivory);
  margin-top:2px;
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}

.coverflow__tags{
  position:absolute;
  right:22px;
  bottom:24px;
  z-index:2;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:58%;
  pointer-events:none;
  transition:opacity .3s ease;
}
.coverflow__slide:not([data-active="true"]) .coverflow__tags{ opacity:0; }
.coverflow__tags span{
  font-family:var(--body);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ivory);
  background:rgba(23,23,23,.55);
  border:1px solid rgba(245,242,236,.18);
  padding:6px 10px;
  backdrop-filter:blur(3px);
  white-space:nowrap;
}

.coverflow__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  display:flex;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  color:var(--ivory);
  font-family:var(--body);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  padding:12px;
  opacity:.72;
  transition:opacity .25s ease, transform .25s ease;
}
.coverflow__arrow:hover{ opacity:1; }
.coverflow__arrow--prev{ left:var(--edge); }
.coverflow__arrow--prev:hover{ transform:translateY(-50%) translateX(-3px); }
.coverflow__arrow--next{ right:var(--edge); }
.coverflow__arrow--next:hover{ transform:translateY(-50%) translateX(3px); }

.coverflow__dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:40px;
}
.coverflow__dots button{
  width:6px;
  height:6px;
  border-radius:50%;
  border:none;
  background:#F5F2EC44;
  padding:0;
  cursor:pointer;
  transition:background .3s ease, transform .3s ease;
}
.coverflow__dots button[aria-current="true"]{
  background:var(--burgundy-lit);
  transform:scale(1.5);
}

@media (max-width:820px){
  .coverflow-section{ padding:120px 0 130px; }
  .coverflow__stage{ height:min(98vw, 544px); }
  .coverflow__slide{ width:min(76vw, 420px); }
  .coverflow__arrow{ padding:8px; }
  .coverflow__arrow-label{ display:none; }
  .coverflow__arrow-icon{ font-size:18px; }
  .coverflow__arrow--prev{ left:8px; }
  .coverflow__arrow--next{ right:8px; }
  .coverflow__tags{ max-width:70%; }
  .coverflow__tags span{ font-size:9px; padding:5px 8px; }
}

@media (max-width:480px){
  .coverflow__stage{ height:min(109vw, 440px); }
  .coverflow__slide{ width:min(84vw, 340px); }
  .coverflow__title{ font-size:19px; }
}



/* ============================================================
   SERVICES PAGE — visual placeholder layouts
   (media assets to be supplied by client; .media/.ph pattern
   from the base stylesheet is reused throughout)
   ============================================================ */

.svc-tags{ margin-bottom:14px; }

/* ---- 01 — single wide image below the text ---- */
.svc-wide{ margin-top:64px; }
.svc-wide .media{ --ar:21/9; }
@media (max-width:820px){
  .svc-wide .media{ --ar:4/3; }
}

/* ---- 01 (variant) — single short vertical video, shown uncropped ---- */
.svc-wide--portrait{ display:flex; justify-content:center; }
.svc-wide--portrait .media{
  width:clamp(220px,26vw,420px);
}
.svc-wide--portrait .media video{ display:block; border-radius:2px; }
@media (max-width:820px){
  .svc-wide--portrait .media{ width:min(80vw,380px); }
}

/* ---- 01 (variant) — video sits inline under the headline, in the title column ---- */
.svc-wide--portrait-inline{ justify-content:flex-start; margin-top:32px; }
.svc-wide--portrait-inline .media{ width:66.6667%; }

/* ---- 02 — four-up: real / AI / product / video ---- */
.svc-quad{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,24px);
  margin-top:64px;
}
.svc-quad__cap{ margin-top:14px; }
@media (max-width:820px){
  .svc-quad{ grid-template-columns:1fr 1fr; row-gap:36px; }
}
@media (max-width:480px){
  .svc-quad{ grid-template-columns:1fr 1fr; }
}

/* ---- 03 — four connected visuals from one project (filmstrip) ---- */
.svc-filmstrip{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,24px);
  margin-top:64px;
}
.svc-filmstrip__cap{ margin-top:14px; }
.svc-filmstrip__n{ color:var(--burgundy); font-weight:500; margin-right:8px; }

@media (max-width:820px){
  .svc-filmstrip{
    display:flex; gap:16px; margin-top:36px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(var(--edge) * -1);
    padding-inline:var(--edge); padding-bottom:6px;
    scrollbar-width:none;
  }
  .svc-filmstrip::-webkit-scrollbar{ display:none; }
  .svc-filmstrip > *{ flex:0 0 78%; scroll-snap-align:start; }
}
@media (max-width:480px){
  .svc-filmstrip > *{ flex:0 0 86%; }
}

/* ---- 02/03 — фиксированное соотношение сторон, без чёрных полос ---- */
.svc-quad .media,
.svc-filmstrip .media{
  --ar:3/5;
}
.svc-quad .media img,
.svc-quad .media video,
.svc-filmstrip .media img,
.svc-filmstrip .media video{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---- 04 — editorial mix of formats (16:9 + pinned 1:1, two 9:16, one 9:16 video) ---- */
.svc-editorial{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.6vw,24px);
  margin-top:64px;
  align-items:end;
}
.svc-editorial__pin{
  grid-column:1/13; position:relative;
  --clip-w:clamp(84px,11vw,150px);
  --clip-left:clamp(24px,5vw,56px);
  --clip-top:clamp(-30px,-4.4vw,-20px);
}
.svc-editorial__pin .media{ --ar:16/9; }
.svc-editorial__clip{
  position:absolute; z-index:2;
  width:var(--clip-w);
  top:var(--clip-top);
  left:var(--clip-left);
  transform:rotate(-4deg);
  border:6px solid var(--ivory);
  box-shadow:0 18px 40px rgba(23,23,23,.32);
}
.svc-editorial__clip .media{ --ar:1/1; }
.svc-editorial__pinicon{
  position:absolute; z-index:3;
  top:calc(var(--clip-top) - 14px);
  left:calc(var(--clip-left) + var(--clip-w)/2);
  width:26px; height:26px;
  transform:translateX(-50%) rotate(8deg);
  color:var(--burgundy);
  filter:drop-shadow(0 2px 3px rgba(23,23,23,.35));
}
.svc-editorial__row{ display:contents; }
.svc-editorial__b{ grid-column:1/4; }
.svc-editorial__c{ grid-column:4/7; }
.svc-editorial__d{ grid-column:7/10; }
.svc-editorial__e{ grid-column:10/13; }
.svc-editorial__b .media,
.svc-editorial__c .media,
.svc-editorial__d .media,
.svc-editorial__e .media{ --ar:9/16; }
.svc-editorial__cap{ margin-top:14px; }

/* variant: row of 3 items, evenly filling the width (reads as centered, no leftover gap) */
.svc-editorial__row--three{
  display:grid;
  grid-column:1/13;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,24px);
}
.svc-editorial__row--three > *{ grid-column:auto; }

@media (max-width:820px){
  .svc-editorial{ display:block; margin-top:48px; }
  .svc-editorial > *{ margin-top:32px; }
  .svc-editorial > *:first-child{ margin-top:0; }
  .svc-editorial__pin{ margin-top:44px; --clip-w:76px; --clip-left:20px; --clip-top:-18px; }

  .svc-editorial__row{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:clamp(10px,2.6vw,16px);
  }
  .svc-editorial__row > *{ margin-top:0; }
  .svc-editorial__b,
  .svc-editorial__c,
  .svc-editorial__d,
  .svc-editorial__e{ grid-column:auto; }
  .svc-editorial__cap{ margin-top:10px; }

  /* 3-item row stays in a single row on mobile too */
  .svc-editorial__row--three{
    grid-template-columns:repeat(3,1fr);
    gap:clamp(6px,2vw,10px);
  }
}

/* ---------- services: process (Wie wir arbeiten) — staircase layout ---------- */
.svc-process{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:start;
  gap:clamp(24px,3vw,40px);
  margin-top:64px;
}
.svc-process__item{
  border-top:1px solid var(--black);
  padding-top:22px;
}
/* each step sits a little lower than the previous one — a descending staircase */
.svc-process__item:nth-child(1){ margin-top:0; }
.svc-process__item:nth-child(2){ margin-top:clamp(28px,4vw,64px); }
.svc-process__item:nth-child(3){ margin-top:clamp(56px,8vw,128px); }
.svc-process__item:nth-child(4){ margin-top:clamp(84px,12vw,192px); }
.svc-process__num{
  display:block;
  font-family:var(--display);
  font-weight:300;
  line-height:.72;
  letter-spacing:-.03em;
  font-size:clamp(64px,7.2vw,108px);
  color:var(--burgundy);
  margin-bottom:18px;
}
.svc-process__item h3{ margin-top:2px; }
.svc-process__item p{ margin-top:14px; line-height:1.7; color:var(--grey); max-width:26ch; }

.svc-process__cta{
  margin-top:96px;
  padding-top:56px;
  border-top:1px solid var(--hair);
  max-width:56ch;
}
.svc-process__cta .body-text{ color:var(--grey); }

@media (max-width:900px){
  .svc-process{ grid-template-columns:1fr 1fr; row-gap:48px; }
  .svc-process__item:nth-child(1){ margin-top:0; }
  .svc-process__item:nth-child(2){ margin-top:clamp(28px,5vw,56px); }
  .svc-process__item:nth-child(3){ margin-top:0; }
  .svc-process__item:nth-child(4){ margin-top:clamp(28px,5vw,56px); }
}
@media (max-width:600px){
  .svc-process{ grid-template-columns:1fr; row-gap:44px; margin-top:48px; }
  .svc-process__item:nth-child(n){ margin-top:0; }
  .svc-process__cta{ margin-top:64px; padding-top:40px; }
}