/* ===========================================================
   GERÜST — generic structure/interaction demo
   Placeholder content only. Swap fonts, colors, copy and media
   for your own brand; the layout + animation logic stays intact.
=========================================================== */

@font-face{
  font-family:'Poppins';
  src:url('assets/fonts/poppins/Poppins-Light.ttf') format('truetype');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('assets/fonts/poppins/Poppins-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('assets/fonts/poppins/Poppins-Medium.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('assets/fonts/cormorant/CormorantGaramond-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('assets/fonts/cormorant/CormorantGaramond-Italic.ttf') format('truetype');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('assets/fonts/cormorant/CormorantGaramond-Medium.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap;
}

:root{
  --ink: #16130f;
  --surface: #1c1a18;      /* single dark ground, swap for your brand color */
  --surface-2: #262320;
  --cream: #f3efe8;
  --muted: #a39c8f;
  --accent: #8aa3c2;       /* placeholder accent — swap for your CI color */
  --accent-light: #b7c9dc;
  --hairline: rgba(243,239,232,0.14);
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-soft: cubic-bezier(.16,.8,.24,1);
  --ease-expo: cubic-bezier(.16,1,.3,1);
  --font-body: 'Poppins', sans-serif;
  --font-display: 'Cormorant Garamond', serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; }
body{
  font-family:var(--font-body);
  background:var(--surface);
  color:var(--cream);
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img,video{ max-width:100%; display:block; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--cream);
  border-radius:2px;
}

/* ---------- Header: no bar, logo + burger float free ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:220;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:42px clamp(28px, 6vw, 68px) 0;
  background:transparent;
  opacity:0;
  transform:translateY(-24px);
  transition:opacity 1.4s var(--ease-expo), transform 1.4s var(--ease-expo);
}
.site-header.in{ opacity:1; transform:none; }

.logo{ display:flex; align-items:center; line-height:1; }
.logo-img{
  height:22px;
  width:auto;
  display:block;
  opacity:1;
  transition:opacity .3s var(--ease);
}
.logo:hover .logo-img{ opacity:.72; }

.nav-right-wrap{ position:relative; display:flex; align-items:center; }
.nav-toggle{
  background:none; border:none; width:44px; height:44px; padding:0;
  position:relative; z-index:230; cursor:pointer;
}
.nav-toggle span{
  position:absolute; left:6px; right:6px; height:1px;
  background:var(--cream);
  transition:transform .4s var(--ease-expo), top .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span:nth-child(1){ top:19px; }
.nav-toggle span:nth-child(2){ top:25px; }

.nav-reveal{
  position:absolute;
  right:56px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:clamp(18px, 2.6vw, 32px);
  white-space:nowrap;
}
.nav-reveal a{
  position:relative;
  font-size:13px; letter-spacing:.4px;
  color:var(--cream);
  opacity:0; transform:translateX(30px); filter:blur(6px); pointer-events:none;
  transition:opacity .9s var(--ease-soft), transform 1s var(--ease-expo), filter .9s var(--ease-soft), color .3s var(--ease);
}
.nav-reveal a::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:var(--accent-light);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav-reveal a:hover{ color:var(--accent-light); }
.nav-reveal a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-reveal.open a{ opacity:1; transform:none; filter:blur(0); pointer-events:auto; }
.nav-reveal.open a:nth-child(1){ transition-delay:.04s; }
.nav-reveal.open a:nth-child(2){ transition-delay:.14s; }
.nav-reveal.open a:nth-child(3){ transition-delay:.24s; }
.nav-reveal.open a:nth-child(4){ transition-delay:.34s; }

@media (max-width:640px){
  .nav-reveal{
    position:fixed; inset:0; transform:none;
    z-index:225;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:30px;
    background:#000;
    padding:24px;
    border:none; box-shadow:none;
    opacity:0; visibility:hidden;
    transition:opacity .5s var(--ease-soft), visibility 0s linear .5s;
  }
  .nav-reveal.open{
    opacity:1; visibility:visible;
    transition:opacity .5s var(--ease-soft), visibility 0s linear 0s;
  }
  .nav-reveal a{ font-size:22px; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:52svh;
  display:flex; align-items:center; justify-content:center;
  padding:150px 24px 20px;
  text-align:center;
  overflow:hidden;
}
.hero-content{ max-width:960px; }
.hero h1{
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(24px, 3.6vw, 46px);
  line-height:1;
  letter-spacing:-0.01em;
}
.line-mask{ display:block; overflow:visible; padding-bottom:.08em; }
.line-inner{
  display:block;
  opacity:0; transform:translateY(16px);
  transition:opacity .9s var(--ease-soft) .05s, transform .9s var(--ease-soft) .05s;
}
.hero.revealed .line-inner{ opacity:1; transform:translateY(0); }
.hero h1 em{
  font-style:italic; font-weight:400; color:var(--accent-light); font-size:1.06em;
}

.hero-cycle{
  position:relative; display:block; width:100%;
  height:1.3em; font-size:1.06em; line-height:1.15; margin-top:.06em;
}
.hero-cycle-item{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-style:italic; font-weight:400; font-family:var(--font-display);
  text-transform:uppercase;
  color:var(--accent-light); white-space:nowrap;
  opacity:0; transform:translateX(30px); filter:blur(6px);
  pointer-events:none;
  transition:opacity .9s var(--ease-soft), transform 1s var(--ease-expo), filter .9s var(--ease-soft);
}
.hero-cycle-item.is-active{ opacity:1; transform:translateX(0); filter:blur(0); pointer-events:auto; }
.hero-cycle-item.is-leaving{
  opacity:0; transform:translateY(-20px); filter:blur(6px);
  transition:opacity .9s var(--ease-soft), transform 1s var(--ease-expo), filter .9s var(--ease-soft);
}
/* letters no longer animate on their own — one clean blur+fade on the
   whole word only, exactly like the nav menu links */
.hero-cycle-char{ display:inline-block; }
@media (max-width:420px){
  .hero-cycle{ height:2.5em; }
  .hero-cycle-item{ white-space:normal; text-align:center; line-height:1.22; padding:0 6px; }
}

.hero p{
  margin-top:18px;
  font-size:clamp(11px,.95vw,13px);
  line-height:1.75; color:var(--muted);
  opacity:0; transform:translateY(20px);
  transition:opacity 1s var(--ease-soft) 1.05s, transform 1s var(--ease-soft) 1.05s;
}
.hero.revealed p{ opacity:1; transform:none; }

/* ---------- Project grid: square, edge-to-edge, hover reveal ---------- */
.grid{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:4px;
}
.grid-col{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.grid-col-mid{ margin-top:clamp(40px, 6vw, 90px); }
.grid-item{ position:relative; cursor:pointer; display:block; aspect-ratio:4/5; overflow:hidden; }
.grid-item .media{
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--surface-2), #34302b);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--muted);
  overflow:hidden;
}
.grid-item .media img, .grid-item .media video{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease);
}
.grid-item:hover .media img, .grid-item:hover .media video{ transform:scale(1.035); }
.grid-item .video-toggle{
  position:absolute; left:14px; bottom:14px; z-index:3;
  width:32px; height:32px; border-radius:50%;
  background:rgba(10,9,8,.55); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.grid-item .video-toggle:hover{ background:rgba(10,9,8,.75); transform:scale(1.08); }
.grid-item .video-toggle::before{
  content:''; width:0; height:0; border-style:solid;
  border-width:6px 0 6px 10px; border-color:transparent transparent transparent var(--cream);
  margin-left:2px;
}
.grid-item .video-toggle.is-playing::before{
  width:3px; height:12px; border-style:solid double; border-width:0;
  border-left:4px solid var(--cream); border-right:4px solid var(--cream); margin-left:0;
}
.grid-item .overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:0 20px 20px;
  background:linear-gradient(to top, rgba(10,9,8,.6) 0%, rgba(10,9,8,0) 45%);
  opacity:0; transition:opacity .5s var(--ease-soft); pointer-events:none;
}
.grid-item .overlay span{
  display:inline-block; color:#fff; font-size:13px; letter-spacing:.4px; font-weight:500;
  transform:translateY(14px); transition:transform .5s var(--ease-soft);
}
.grid-item:hover .overlay{ opacity:1; }
.grid-item:hover .overlay span{ transform:translateY(0); }
@media (hover:none){
  .grid-item .overlay{ opacity:1; }
  .grid-item .overlay span{ transform:none; }
}
@media (max-width:900px){
  .grid{ flex-direction:column; align-items:stretch; gap:3px; }
  .grid-col{ display:contents; }
  .grid-item{ width:100%; }
}

/* scroll-reveal for grid columns */
[data-reveal]{
  opacity:0; transform:translateY(60px);
  transition:opacity 1.4s var(--ease-expo), transform 1.4s var(--ease-expo);
}
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ---------- Page hero (e.g. contact) — curtain-wipe reveal ---------- */
.page-hero{
  position:relative;
  background:var(--surface);
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:160px 24px 80px; text-align:center;
}
.page-hero h1{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(32px,5vw,56px); color:var(--muted); line-height:1.35;
}

/* Split layout: left-aligned text pinned while a form scrolls past on the right
   — used on the contact page and reused on the partners contact section */
.contact-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
  gap:clamp(24px, 6vw, 90px);
  padding:170px clamp(24px, 6vw, 64px) 120px;
  text-align:left;
}
.page-hero.contact-split{ min-height:0; }
.contact-left{
  position:sticky;
  top:170px;
  align-self:start;
}
.contact-split h1, .contact-split h2{ text-align:left; }
.contact-split h2{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(28px, 3.6vw, 44px); line-height:1.2; color:var(--muted);
}
.contact-left p{
  font-size:14px; line-height:1.85; color:var(--muted);
  max-width:420px; margin-top:22px;
}
.contact-right{ width:100%; }

#curated-connections.contact-split{ grid-template-columns:1fr 1.6fr; }
#curated-connections .contact-left h2{
  font-size:clamp(26px, 3vw, 38px);
  margin-bottom:6px;
}
@media (max-width:860px){
  .contact-split{ grid-template-columns:1fr; padding-top:120px; }
  .contact-left{ position:relative; top:0; }
}

/* Contact page: full-height split, heading pinned, form scrolls in its own
   masked container so fields dissolve into the background instead of
   being cut off as they pass under the heading's height. */
.contact-scroll{
  height:100svh;
  padding-top:0; padding-bottom:0;
  overflow:hidden;
}

/* Small hint that more content (the footer) follows below this
   full-height section, so the fade-out edge doesn't read as "the end". */
.scroll-cue{
  position:absolute; left:50%; bottom:26px; z-index:130;
  width:1px; height:34px;
  transform:translateX(-50%);
  overflow:hidden;
  pointer-events:none;
}
.scroll-cue::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent, var(--accent-light));
  animation:scrollCue 1.9s ease-in-out infinite;
}
@keyframes scrollCue{
  0%{ transform:translateY(-100%); }
  100%{ transform:translateY(100%); }
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue::after{ animation:none; transform:none; opacity:.5; }
}
.contact-scroll h1{
  text-transform:uppercase;
  font-size:clamp(34px, 5.4vw, 64px);
  line-height:1.15;
  letter-spacing:.01em;
}
.contact-scroll .contact-left{
  position:static;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding-top:130px;
}
.contact-scroll .contact-right{
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-x:contain;
  padding:130px 0 130px;
  -webkit-mask-image:linear-gradient(to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,1) 100px,
    rgba(0,0,0,1) calc(100% - 90px),
    rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,1) 100px,
    rgba(0,0,0,1) calc(100% - 90px),
    rgba(0,0,0,0) 100%);
}
.contact-scroll .field label{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:500;
}
@media (max-width:860px){
  .contact-scroll{ height:auto; overflow:visible; display:block; padding-top:130px; }
  .contact-scroll .contact-left{ height:auto; padding:0 0 10px; }
  .contact-scroll .contact-right{
    height:64vh;
    padding:56px 0 56px;
    -webkit-mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0, rgba(0,0,0,1) 56px,
      rgba(0,0,0,1) calc(100% - 44px), rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0, rgba(0,0,0,1) 56px,
      rgba(0,0,0,1) calc(100% - 44px), rgba(0,0,0,0) 100%);
  }
}
.heading-mask{ position:relative; display:block; overflow:hidden; }
.heading-text{
  display:inline-block; opacity:0; transform:translateY(14px);
  transition:opacity .9s var(--ease-soft) .3s, transform .9s var(--ease-soft) .3s;
}
.page-hero.revealed .heading-text{ opacity:1; transform:none; }
.curtain{
  position:absolute; inset:0; background:var(--surface);
  transform-origin:left; transform:scaleX(1);
  transition:transform 1.1s var(--ease-soft) .2s;
}
.page-hero.revealed .curtain{ transform:scaleX(0); }
h1 .heading-mask:nth-child(2) .heading-text{ transition-delay:.55s; }
h1 .heading-mask:nth-child(3) .heading-text{ transition-delay:.8s; }
h1 .heading-mask:nth-child(2) .curtain{ transition-delay:.4s; }
h1 .heading-mask:nth-child(3) .curtain{ transition-delay:.65s; }

/* ---------- Contact form — plain hairline ---------- */
.contact-form{ position:relative; width:100%; max-width:640px; margin:70px auto 0; text-align:left; }
.field{ margin-bottom:48px; }
.field label{ display:block; font-size:13px; color:var(--muted); margin-bottom:14px; }
.field input, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--hairline);
  color:var(--cream); font-family:var(--font-body); font-size:15px; padding:0 0 12px; resize:none;
  transition:border-color .3s var(--ease);
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent-light); }
.field textarea{ min-height:80px; }
.submit-btn{
  background:none; border:none; color:var(--cream); padding:0;
  font-family:var(--font-display); font-style:italic; font-size:22px; font-weight:500;
  transition:color .3s var(--ease), transform .3s var(--ease); cursor:pointer;
}
.submit-btn:hover{ color:var(--accent-light); transform:translateX(6px); }

/* Contact page: give Send its own frame so it reads as the form's action,
   not just another line of text. */
.contact-scroll .submit-btn,
.contact-split .submit-btn{
  margin-top:12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--hairline);
  border-radius:0;
  padding:15px 40px;
  font-family:var(--font-body); font-style:normal; font-size:12.5px;
  font-weight:500; letter-spacing:.8px; text-transform:uppercase;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.contact-scroll .submit-btn:hover,
.contact-split .submit-btn:hover{
  color:var(--cream); border-color:var(--accent-light);
  background:rgba(183,201,220,.08);
  transform:none;
}

.whatsapp-block{ margin-top:56px; }
.btn-outline, .whatsapp-cta{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--hairline);
  border-radius:0;
  padding:13px 22px;
  font-size:12.5px; letter-spacing:.6px; text-transform:uppercase;
  color:var(--muted);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.whatsapp-cta svg{ width:15px; height:15px; flex:none; }
.btn-outline:hover, .whatsapp-cta:hover{ color:var(--cream); border-color:var(--accent-light); }

/* horizontal marquee tag row */
.tag-row{
  position:relative; overflow:hidden; margin-top:40px;
  -webkit-mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.tag-track{
  display:flex; align-items:center; gap:16px;
  width:max-content;
  animation:tagScroll 20s linear infinite;
}
.tag-track span{ font-size:13px; letter-spacing:.5px; color:var(--muted); white-space:nowrap; }
.tag-track .tag-dot{ color:var(--accent-light); font-size:10px; }
@keyframes tagScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .tag-track{ animation:none; } }

/* ---------- Footer ---------- */
.site-footer{ position:relative; background:var(--surface); padding:90px clamp(20px,5vw,56px) 40px; }
.footer-cta{
  display:flex; align-items:center; gap:14px; justify-content:center;
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(22px, 3vw, 34px); color:var(--cream);
  padding-bottom:40px; margin-bottom:40px; border-bottom:1px solid var(--hairline);
  transition:color .3s var(--ease);
}
.footer-cta-arrow{ transition:transform .3s var(--ease); }
.footer-cta:hover{ color:var(--accent-light); }
.footer-cta:hover .footer-cta-arrow{ transform:translateX(8px); }
.footer-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px; margin-bottom:56px; }
.footer-col{ display:flex; flex-direction:column; gap:9px; font-size:12px; color:var(--muted); }
.footer-label{ font-size:9px; letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); margin-bottom:5px; }
.footer-col a{ color:var(--muted); transition:color .3s var(--ease); }
.footer-col a:hover{ color:var(--cream); }
.phone-tag{ font-family:var(--font-display); font-style:italic; font-size:11px; color:var(--accent-light); margin-right:6px; }
.footer-social{ display:flex; align-items:center; gap:10px; margin-top:2px; }
.footer-icon-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--surface-2); color:var(--muted);
  transition:color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.footer-icon-link svg{ width:15px; height:15px; }
.footer-icon-link:hover{ color:var(--cream); background:rgba(138,163,194,.18); transform:translateY(-2px); }
.footer-lang-switch{ margin-top:16px; }
.lang-switch{
  display:flex; align-items:center; gap:6px; font-size:12px; letter-spacing:1px;
  color:var(--muted); background:none; border:none; padding:0; cursor:pointer;
}
.lang-switch span{ padding:2px 3px; transition:color .25s ease; cursor:pointer; }
.lang-switch span.active{ color:var(--cream); border-bottom:1px solid var(--accent-light); }
.lang-switch span:not(.active):hover{ color:var(--cream); }
.lang-switch .lang-sep{ color:rgba(163,156,143,.5); cursor:default; }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:24px; border-top:1px solid var(--hairline); font-size:11px; color:var(--muted); flex-wrap:wrap; gap:10px; }
.footer-legal{ display:flex; gap:16px; flex-wrap:wrap; }
.footer-legal a{ color:var(--muted); transition:color .3s var(--ease); }
.footer-legal a:hover{ color:var(--cream); }

@media (max-width:640px){
  .footer-grid{ grid-template-columns:1fr; gap:26px; }
  .footer-bottom{ flex-direction:column; }
}

/* ---------- Studio page: scroll-linked opacity sections ---------- */
.studio-section{
  position:relative;
  min-height:82vh;
  display:flex; align-items:center;
  padding:100px clamp(24px, 6vw, 64px);
  background:var(--surface);
}
.studio-content{
  width:100%; max-width:820px; margin:0 auto;
  opacity:.45;
  transition:opacity .08s linear;
}
.studio-heading{
  font-family:var(--font-display); font-weight:500; font-style:italic;
  text-transform:uppercase;
  text-align:center;
  color:var(--accent-light);
  font-size:clamp(28px, 4.4vw, 52px);
  letter-spacing:.01em;
  margin-bottom:56px;
}

/* fixed right-hand section indicator */
.section-rail{
  position:fixed; right:28px; top:50%; transform:translateY(-50%);
  z-index:150;
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.rail-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--hairline);
  cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.rail-dot.active{ background:var(--accent-light); transform:scale(1.6); }
@media (max-width:760px){ .section-rail{ display:none; } }

/* accordion — dropdown list of services */
.accordion{ border-top:1px solid var(--hairline); }
.accordion-item{ border-bottom:1px solid var(--hairline); }
.accordion-item button{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; color:var(--cream); text-align:left;
  padding:24px 2px; font-family:var(--font-body); font-size:16px; cursor:pointer;
}
.accordion-item .plus{
  flex:none; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:300; color:var(--accent-light);
  transition:transform .4s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.accordion-item:hover .plus{ border-color:var(--accent-light); }
.accordion-item.open .plus{ transform:rotate(135deg); background:var(--accent-light); border-color:var(--accent-light); color:var(--surface); }
.accordion-item .panel{
  max-height:0; overflow:hidden;
  transition:max-height .5s var(--ease-soft);
}
.accordion-item .panel-inner{ padding:0 2px 26px; }
.accordion-item .panel p{ font-size:13.5px; line-height:1.8; color:var(--muted); max-width:640px; }

/* founder rows (about-us) */
.founder-row{ display:flex; align-items:center; gap:56px; margin:70px 0; }
.founder-row.reverse{ flex-direction:row-reverse; }
.founder-img{ flex:0 0 220px; aspect-ratio:4/5; overflow:hidden; background:var(--surface-2); }
.founder-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.founder-img .placeholder-label{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);
}
.founder-text{ flex:1; }
.founder-row .founder-text{ text-align:left; }
.founder-row.reverse .founder-text{ text-align:right; }
.founder-text h3{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:28px; color:var(--cream); margin-bottom:6px; }
.founder-text .role{ font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent-light); margin-bottom:16px; }
.founder-text p{ font-size:13px; line-height:1.8; color:var(--muted); }
.about-together{
  margin:0 auto; max-width:680px; text-align:center;
  font-family:var(--font-body); font-style:normal;
  font-size:15.5px; line-height:1.9; color:var(--muted);
  white-space:pre-line;
}

@media (max-width:760px){
  .founder-row, .founder-row.reverse{ flex-direction:column; gap:24px; text-align:left !important; margin:50px 0; }
  .founder-img{ flex-basis:auto; width:100%; max-width:220px; }
}

/* ---------- Partners page ---------- */
.partners-hero p{ max-width:560px; margin:20px auto 34px; font-size:13px; line-height:1.8; color:var(--muted); }

.info-section{
  position:relative;
  background:var(--surface);
  padding:110px clamp(24px,6vw,64px);
  text-align:center;
}
.info-section h2{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(26px,3.6vw,40px); color:var(--muted); margin-bottom:20px;
}
.info-section > p{ max-width:640px; margin:0 auto; font-size:13px; line-height:1.8; color:var(--muted); }

/* Partners hero: centered, same treatment as the rest of the site's
   page-hero headings — word-by-word reveal on the heading, fade-up on
   the intro paragraph, existing "Partner werden" button underneath. */
.partners-heading{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(32px, 5vw, 56px);
  line-height:1.2;
  color:var(--muted);
}
.heading-word{
  display:inline-block;
  opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease-expo), transform .7s var(--ease-expo);
}
.heading-word.in{ opacity:1; transform:translateY(0); }
p.partners-hero-right{
  opacity:0; transform:translateY(30px);
  transition:opacity 1.2s var(--ease-expo), transform 1.2s var(--ease-expo);
  max-width:560px; margin:20px auto 34px;
  font-size:13px; line-height:1.8; color:var(--muted);
}
p.partners-hero-right.in{ opacity:1; transform:none; }

/* Partners list: numbered editorial rows, sticky heading + masked scroll,
   reusing the same split/scroll mechanics as the contact page. */
.partner-list{ list-style:none; }
.partner-row{
  position:relative;
  display:flex; align-items:baseline; gap:22px;
  padding:26px 0;
  border-bottom:1px solid var(--hairline);
  border-top:1px solid transparent;
  transition:border-color .4s var(--ease);
  outline:none;
}
.partner-row:first-child{ border-top:1px solid var(--hairline); }
.partner-row::before{
  content:''; position:absolute; inset:0; z-index:0;
  opacity:0; transition:opacity .5s var(--ease);
  pointer-events:none;
}
.partner-row:hover::before, .partner-row:focus-visible::before{ opacity:1; }
.partner-row:nth-child(6n+1)::before{ background:linear-gradient(90deg, rgba(120,146,181,.12), transparent 70%); }
.partner-row:nth-child(6n+2)::before{ background:linear-gradient(90deg, rgba(89,105,125,.12), transparent 70%); }
.partner-row:nth-child(6n+3)::before{ background:linear-gradient(90deg, rgba(83,59,51,.16), transparent 70%); }
.partner-row:nth-child(6n+4)::before{ background:linear-gradient(90deg, rgba(183,201,220,.12), transparent 70%); }
.partner-row:nth-child(6n+5)::before{ background:linear-gradient(90deg, rgba(48,38,36,.2), transparent 70%); }
.partner-row:nth-child(6n+6)::before{ background:linear-gradient(90deg, rgba(201,168,106,.12), transparent 70%); }
.partner-row:hover, .partner-row:focus-visible{ border-bottom-color:var(--accent-light); }
.partner-num{
  position:relative; z-index:1;
  font-family:var(--font-body); font-size:11px; color:var(--muted); flex:none; width:24px;
}
.partner-name{
  position:relative; z-index:1;
  display:inline-block;
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(26px, 3.6vw, 42px);
  color:var(--muted);
  opacity:.68;
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .4s var(--ease);
}
.partner-row:hover .partner-name,
.partner-row:focus-visible .partner-name{
  opacity:1; color:var(--cream); transform:translateX(12px);
}
@media (hover:none){
  .partner-name{ opacity:1; }
}

/* ---------- Cookie banner: subtle, black, thin white line ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:400;
  width:100%;
  background:#0a0908;
  border-top:1px solid var(--hairline);
  padding:20px clamp(20px, 5vw, 56px);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  opacity:0; transform:translateY(100%); pointer-events:none;
  transition:opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
}
.cookie-banner.show{ opacity:1; transform:none; pointer-events:auto; }
.cookie-banner p{ font-size:12.5px; line-height:1.6; color:var(--muted); margin:0; flex:1 1 260px; }
.cookie-banner a{ color:var(--cream); text-decoration:underline; text-underline-offset:2px; }
.cookie-actions{ display:flex; gap:12px; flex:none; }
.cookie-btn{
  background:#000;
  border:1px solid rgba(255,255,255,.5);
  border-radius:0;
  color:#fff;
  padding:9px 18px;
  font-size:11px; letter-spacing:.6px; text-transform:uppercase;
  cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.cookie-btn:hover{ color:var(--accent-light); border-color:var(--accent-light); }
@media (max-width:480px){
  .cookie-banner{ padding:18px 20px; flex-direction:column; align-items:flex-start; }
  .cookie-actions{ width:100%; }
  .cookie-btn{ flex:1; text-align:center; }
}

/* ---------- Legal pages (Impressum, Datenschutz) ---------- */
.legal-page{
  position:relative;
  background:var(--surface);
  padding:170px clamp(24px, 6vw, 64px) 120px;
  max-width:760px;
  margin:0 auto;
}
.legal-page h1{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(22px, 2.4vw, 32px); color:var(--cream); margin-bottom:50px;
  text-align:left;
  line-height:1.25;
}

/* Split layout: heading pinned left, body text scrolls past on the right */
.legal-page.legal-split{
  display:grid;
  grid-template-columns:1fr 2.4fr;
  align-items:start;
  gap:clamp(24px, 6vw, 64px);
  max-width:1180px;
}
.legal-left{
  position:sticky;
  top:170px;
  align-self:start;
}

/* Fixed scroll-fade overlays: the right column's text dissolves into the
   background as it passes under the pinned heading / before the footer,
   instead of being cut off with a hard edge. Purely decorative — the
   gradient stops are the exact page background color, so once nothing is
   underneath (e.g. once the footer is in view) the band is invisible. */
.legal-fade{
  position:fixed;
  left:0; right:0;
  pointer-events:none;
  z-index:120;
}
.legal-fade-top{
  top:0; height:205px;
  background:linear-gradient(to bottom,
    var(--surface) 0%,
    var(--surface) 45%,
    rgba(28,26,24,0) 100%);
}
.legal-fade-bottom{
  bottom:0; height:130px;
  background:linear-gradient(to top,
    var(--surface) 0%,
    var(--surface) 30%,
    rgba(28,26,24,0) 100%);
}
.legal-left h1{
  margin-bottom:0;
  text-transform:uppercase;
  color:var(--accent-light);
  opacity:0;
  transform:translateX(-22px);
  filter:blur(5px);
  transition:opacity 1.5s var(--ease-soft), transform 1.7s var(--ease-expo), filter 1.4s var(--ease-soft);
}
.legal-left.in h1{ opacity:1; transform:translateX(0); filter:blur(0); }
.legal-right{ width:100%; }
@media (max-width:860px){
  .legal-page.legal-split{ grid-template-columns:1fr; padding-top:120px; }
  .legal-left{ position:relative; top:0; }
}

/* Small scroll-progress rail on the right edge for long legal pages */
.scroll-rail{
  position:fixed;
  top:170px; bottom:60px; right:18px;
  width:2px;
  background:var(--hairline);
  z-index:150;
}
.scroll-rail-thumb{
  position:absolute; left:0; right:0; top:0;
  width:2px;
  background:var(--accent-light);
  height:0%;
}
@media (max-width:640px){ .scroll-rail{ display:none; } }
.legal-page h2{
  font-family:var(--font-body); font-weight:500; font-size:15.5px;
  letter-spacing:.3px; color:var(--cream);
  margin:52px 0 16px; padding-bottom:10px; border-bottom:1px solid var(--hairline);
}
.legal-page h2:first-of-type{ margin-top:0; }
.legal-page p{ font-size:12.5px; line-height:1.85; color:var(--muted); margin-bottom:14px; }
.legal-page ul{ margin:0 0 14px; padding-left:20px; }
.legal-page li{ font-size:12.5px; line-height:1.85; color:var(--muted); list-style:disc; }
.legal-page a{ color:var(--cream); text-decoration:underline; text-underline-offset:2px; transition:color .3s var(--ease); }
.legal-page a:hover{ color:var(--accent-light); }
.legal-page .placeholder{ color:var(--accent-light); font-style:italic; }
.legal-page .legal-updated{ margin-top:50px; font-size:12px; color:var(--muted); }

/* ---------- About Us (Studio page): centered heading, founder cards ---------- */
.about-heading{ text-align:center; }
.intro-text-centered{
  max-width:680px; margin:0 auto 38px; text-align:center;
  font-family:var(--font-body); font-size:15.5px; line-height:1.9; color:var(--muted);
}
.hl{
  background-image:linear-gradient(var(--accent-light), var(--accent-light));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  transition:background-size 1.1s var(--ease-soft);
  color:var(--cream);
  padding-bottom:1px;
}
.scroll-fade-text.is-visible .hl{ background-size:100% 1px; }

.founders-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  max-width:820px; margin:0 auto 34px;
}
.founder-card{ position:relative; }
.founder-card-media{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:var(--surface-2);
}
.founder-card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease);
}
.founder-card:hover .founder-card-media img{ transform:scale(1.035); }
.founder-card-media .placeholder-label{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);
}
.founder-card-overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  padding:0 18px 18px;
  background:linear-gradient(to top, rgba(10,9,8,.62) 0%, rgba(10,9,8,0) 48%);
  opacity:0; transition:opacity .5s var(--ease-soft); pointer-events:none;
}
.founder-card:hover .founder-card-overlay,
.founder-card.open .founder-card-overlay{ opacity:1; }
.founder-card-name{
  font-family:var(--font-display); font-style:italic; font-size:19px; color:#fff;
  transform:translateY(14px); transition:transform .5s var(--ease-soft);
}
.founder-card-role{
  font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--accent-light);
  margin-top:4px; display:block;
  transform:translateY(14px); transition:transform .5s var(--ease-soft) .05s;
}
.founder-card:hover .founder-card-name, .founder-card.open .founder-card-name,
.founder-card:hover .founder-card-role, .founder-card.open .founder-card-role{ transform:translateY(0); }
@media (hover:none){
  .founder-card-overlay{ opacity:1; }
  .founder-card-name, .founder-card-role{ transform:none; }
}
.founder-card-toggle{
  position:absolute; top:12px; right:12px; z-index:3;
  width:30px; height:30px; border-radius:50%; border:none;
  background:rgba(10,9,8,.55); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  color:var(--cream); cursor:pointer;
  transition:background .3s var(--ease);
}
.founder-card-toggle .plus{
  font-size:16px; font-weight:300; line-height:1; display:block;
  transition:transform .4s var(--ease);
}
.founder-card.open .founder-card-toggle .plus{ transform:rotate(135deg); }
.founder-card-toggle:hover{ background:rgba(10,9,8,.8); }
.founder-card-bio{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease-soft); }
.founder-card-bio p{ padding-top:16px; font-size:12px; line-height:1.8; color:var(--muted); }
.founder-card.open .founder-card-bio{ max-height:420px; }
@media (max-width:600px){
  .founders-grid{ grid-template-columns:1fr; max-width:340px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.2s !important; animation-duration:.2s !important; }
  .hero-cycle-item{ transform:none !important; }
  .studio-content{ opacity:1 !important; }
}


/* ---------- Language-only elements ---------- */
.en-only{ display:none; }
html[lang="en"] .en-only{ display:block; }
.legal-note{ margin-top:18px; max-width:260px; font-size:12px; line-height:1.7; color:var(--muted); }


/* ---------- Studio: three pillars ---------- */
.studio-intro{
  max-width:620px; margin:0 0 44px;
  font-size:14.5px; line-height:1.9; color:var(--muted);
}
.acc-title{ display:flex; align-items:baseline; gap:18px; }
.acc-num{ font-size:11px; letter-spacing:1px; color:var(--accent-light); }
.accordion-item .panel p.pillar-lead{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(20px,2.4vw,26px); line-height:1.35; color:var(--cream);
  margin:0 0 14px;
}
.accordion-item .panel p + p{ margin-top:0; }
.pillar-list{
  list-style:none; margin-top:22px; max-width:640px;
  display:grid; grid-template-columns:1fr 1fr; gap:10px 28px;
}
.pillar-list li{
  position:relative; padding-left:16px;
  font-size:12.5px; line-height:1.6; color:var(--cream);
}
.pillar-list li::before{
  content:''; position:absolute; left:0; top:.8em; width:8px; height:1px; background:var(--accent-light);
}
@media (max-width:640px){ .pillar-list{ grid-template-columns:1fr; } }
.studio-both{ margin-top:64px; max-width:620px; }
.studio-both h3{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(24px,3vw,32px); color:var(--muted); margin-bottom:14px;
}
.studio-both p{ font-size:13.5px; line-height:1.85; color:var(--muted); margin-bottom:30px; }

/* ---------- About: two stacked intro paragraphs ---------- */
.intro-text-centered p + p{ margin-top:1.1em; }

/* ---------- Partners: descriptions ---------- */
.partner-body{ position:relative; z-index:1; display:flex; flex-direction:column; gap:8px; }
.partner-desc{ font-size:13px; line-height:1.7; color:var(--muted); max-width:420px; }
.partner-row:hover .partner-desc, .partner-row:focus-visible .partner-desc{ color:var(--cream); }

/* ---------- Contact: intro under the heading ---------- */
.contact-left .contact-intro{ margin-top:34px; }

/* ---------- Forms: confirmation ---------- */
.form-success{ display:none; padding:6px 0 30px; outline:none; }
.contact-form.is-sent .field,
.contact-form.is-sent .submit-btn{ display:none; }
.contact-form.is-sent .form-success{ display:block; }
.form-success h3{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(28px,3.4vw,40px); color:var(--cream); margin-bottom:16px;
}
.form-success p{ display:none; font-size:14px; line-height:1.85; color:var(--muted); max-width:460px; }
.form-success p a{ color:var(--accent-light); }
.contact-form.is-ok .form-success .fs-sent,
.contact-form.is-mailto .form-success .fs-mailto,
.contact-form.is-error .form-success .fs-error{ display:block; }
.contact-form.is-error .form-success h3{ display:none; }

/* ---------- Project grid: "Independent Concept" tag, top right, reads bottom to top ---------- */
.concept-tag{
  position:absolute; top:12px; right:10px; z-index:3;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-body); font-size:7.5px; font-weight:300; line-height:1;
  letter-spacing:.14em; white-space:nowrap;
  color:rgba(255,255,255,.85);
  pointer-events:none;
}
.concept-tag.on-light{ color:rgba(48,38,36,.82); }

/* Middle column holds four taller (2:3) tiles so all three columns end together */
.grid-col-mid .grid-item{ aspect-ratio:2/3; }
@media (max-width:900px){ .grid-col-mid .grid-item{ aspect-ratio:4/5; } }

.footer-note{ margin-top:14px; font-size:9.5px; line-height:1.7; letter-spacing:.02em; color:rgba(163,156,143,.7); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }