@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f4f4f2;
  --ink:#0a0a0a;
  --muted:#6e6e6e;
  --glass-bg:rgba(255,255,255,0.55);
  --glass-border:rgba(255,255,255,0.7);
  --glass-shadow:0 20px 60px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.7);
  --pop-ease:cubic-bezier(0.34, 1.56, 0.64, 1);
  --max-width:1120px;
  --nav-dark:#111110;
  --nav-dark-2:#1c1c1a;
  --nav-active-bg:#f4f4f2;
  --nav-icon-muted:rgba(244,244,242,0.62);
  --nav-blue:#3d6bff;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img{ display:block; max-width:100%; }
::selection{ background:var(--ink); color:#fff; }

/* ---------- ambient blobs ---------- */
.blob{ position:fixed; border-radius:50%; filter:blur(70px); z-index:0; opacity:.5; pointer-events:none; }
.blob-1{ width:520px; height:520px; top:-160px; left:-140px; background:#dcdcda; }
.blob-2{ width:460px; height:460px; top:220px; right:-160px; background:#e9e9e6; }
.blob-3{ width:420px; height:420px; bottom:-140px; left:30%; background:#dedede; }

.wrap{ position:relative; z-index:1; width:min(var(--max-width), calc(100% - 40px)); margin:0 auto; }

/* ---------- glass base ---------- */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  border-radius:28px;
  position:relative;
  overflow:hidden;
}
.glass::before{
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(320px 320px at var(--mx,50%) var(--my,20%), rgba(255,255,255,0.55), transparent 60%);
  opacity:0; transition:opacity .4s ease;
}
.glass:hover::before{ opacity:1; }

.pop{ transition:transform .4s var(--pop-ease), box-shadow .4s ease; }
.pop:hover{ transform:translateY(-6px) scale(1.015); box-shadow:0 28px 70px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.8); }

/* =========================================================
   NAVBAR — clean floating pill, no gimmicks
   ========================================================= */
.navstage{
  position:fixed; top:24px; left:0; right:0; z-index:80;
  display:flex; justify-content:center; pointer-events:none;
}

.navbar{
  position:relative;
  pointer-events:auto;
  display:flex; align-items:center; gap:4px;
  padding:10px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--nav-dark-2), var(--nav-dark));
  box-shadow:0 22px 55px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.07);
}

.navbar a.nav-link{
  position:relative;
  display:flex; align-items:center; gap:9px;
  height:52px; padding:0 18px;
  border-radius:999px;
  text-decoration:none;
  color:var(--nav-icon-muted);
  font-weight:700; font-size:0.96rem;
  white-space:nowrap;
  transition:color .35s ease, background .35s var(--pop-ease), padding .35s var(--pop-ease), transform .3s ease;
}
.navbar a.nav-link svg{
  width:22px; height:22px; flex:none;
  stroke:currentColor; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .35s var(--pop-ease);
}
.navbar a.nav-link .label{
  max-width:0; overflow:hidden;
  opacity:0;
  transition:max-width .35s var(--pop-ease), opacity .25s ease;
}
.navbar a.nav-link:hover{
  color:#fff;
  background:rgba(255,255,255,0.09);
  transform:translateY(-2px);
}
.navbar a.nav-link:hover svg{ transform:scale(1.1); }
.navbar a.nav-link:hover .label{ max-width:140px; opacity:1; }
.navbar a.nav-link.active{
  color:var(--nav-dark);
  background:var(--nav-active-bg);
  box-shadow:0 10px 24px rgba(0,0,0,0.2);
}
.navbar a.nav-link.active .label{ max-width:140px; opacity:1; }
.navbar a.nav-link.active svg{ transform:scale(1.05); }

.navbar .nav-cta-orb{
  position:relative;
  margin-left:8px;
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg, var(--nav-blue), #6f93ff);
  color:#fff;
  text-decoration:none;
  box-shadow:0 12px 28px rgba(61,107,255,0.45);
  transition:transform .4s var(--pop-ease), box-shadow .4s ease;
}
.navbar .nav-cta-orb svg{
  width:22px; height:22px;
  stroke:#fff; fill:none; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
.navbar .nav-cta-orb:hover{
  transform:translateY(-4px) scale(1.06);
  box-shadow:0 18px 36px rgba(61,107,255,0.55);
}
.navbar .nav-cta-orb::after{
  content:attr(data-tip);
  position:absolute; top:130%; left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--nav-dark); color:#fff;
  font-size:0.74rem; font-weight:700; white-space:nowrap;
  padding:6px 11px; border-radius:8px;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.navbar .nav-cta-orb:hover::after{ opacity:1; transform:translateX(-50%) translateY(0); }

@media(max-width:900px){
  .navbar a.nav-link{ padding:0 13px; height:48px; }
  .navbar a.nav-link .label{ display:none; }
  .navbar a.nav-link.active{ padding:0 18px; }
  .navbar a.nav-link.active .label{ display:inline; max-width:100px; }
}
@media(max-width:640px){
  .navstage{ top:14px; }
  .navbar{ gap:0; padding:7px; }
  .navbar a.nav-link{ padding:0 10px; height:44px; }
  .navbar .nav-cta-orb{ width:44px; height:44px; margin-left:4px; }
}

/* ---------- hero (home, large) ---------- */
.hero{ padding:170px 0 40px; text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 26px;
  padding:0.5rem 1.1rem; border-radius:999px;
  color:var(--muted); font-weight:700; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase;
}
.hero h1{
  margin:0 auto; max-width:17ch;
  font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.035em; line-height:1.03;
  font-size:clamp(2.6rem, 6.4vw, 5.2rem);
}
.hero .lead{
  max-width:46ch; margin:26px auto 0; color:var(--muted); font-size:1.1rem; line-height:1.75;
}
.actions{ margin-top:38px; display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }

/* ---------- page hero (subpages, smaller) ---------- */
.page-hero{ padding:170px 0 60px; }
.page-hero .eyebrow{ margin-bottom:22px; }
.page-hero h1{
  margin:0; max-width:20ch;
  font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.03em; line-height:1.06;
  font-size:clamp(2.2rem, 5vw, 3.6rem);
}
.page-hero .lead{ max-width:56ch; margin:20px 0 0; color:var(--muted); font-size:1.05rem; line-height:1.75; }

/* ---------- buttons ---------- */
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:0.9rem 1.7rem; border-radius:999px;
  text-decoration:none; font-weight:700; font-size:0.96rem;
  transition:transform .4s var(--pop-ease), box-shadow .4s ease, background .3s ease, color .3s ease;
}
.button.primary{ background:var(--ink); color:#fff; border:1px solid var(--ink); }
.button.primary:hover{ transform:translateY(-4px) scale(1.03); box-shadow:0 20px 46px rgba(0,0,0,0.25); }
.button.secondary{ color:var(--ink); }
.button.secondary:hover{ transform:translateY(-4px) scale(1.03); }

/* ---------- hero visual panel ---------- */
.hero-panel{ margin:60px auto 0; max-width:920px; padding:8px; }
.hero-panel-inner{
  border-radius:22px; aspect-ratio:16/7; background:linear-gradient(150deg,#e7e7e4,#f6f6f4);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  color:var(--muted); font-weight:700; letter-spacing:0.04em; text-transform:uppercase; font-size:0.85rem;
}
.hero-panel-inner img{ width:100%; height:100%; object-fit:cover; }

/* ---------- section shell ---------- */
.section{ padding:100px 0; }
.section.tight{ padding:60px 0; }
.section-head{ max-width:56ch; margin:0 auto 56px; text-align:center; }
.section-head.left{ margin:0 0 44px; text-align:left; }
.section-head .kicker{
  display:block; margin-bottom:14px; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.14em; font-size:0.76rem; font-weight:800;
}
.section-head h2{
  margin:0; font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.025em; line-height:1.12;
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
}
.section-head p{ margin:16px 0 0; color:var(--muted); line-height:1.75; }

/* ---------- service / info cards ---------- */
.grid{ display:grid; gap:20px; }
.grid.cols-3{ grid-template-columns:1fr; }
.grid.cols-2{ grid-template-columns:1fr; }
@media(min-width:820px){
  .grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.card{ padding:38px 30px; }
.card .icon{
  width:46px; height:46px; border-radius:16px; margin-bottom:22px;
  background:rgba(10,10,10,0.06); display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:700; font-size:1.1rem;
}
.card h3{ margin:0 0 12px; font-family:'Fraunces',serif; font-weight:600; font-size:1.28rem; letter-spacing:-0.01em; }
.card p{ margin:0; color:var(--muted); line-height:1.75; font-size:0.97rem; }
.card a.card-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  font-weight:700; font-size:0.9rem; text-decoration:none; color:var(--ink);
}

/* ---------- featured work / feature split ---------- */
.feature{ display:grid; gap:0; align-items:stretch; padding:14px; }
@media(min-width:840px){ .feature{ grid-template-columns:1.05fr 0.95fr; } }
.feature.reverse{ direction:rtl; }
.feature.reverse > *{ direction:ltr; }
.feature-media{
  border-radius:22px; aspect-ratio:4/3; margin:6px; overflow:hidden;
  background:linear-gradient(150deg,#e9e9e6,#f7f7f5);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-weight:700; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.04em;
}
.feature-media img{ width:100%; height:100%; object-fit:cover; }
.feature-text{ padding:34px 30px; display:flex; flex-direction:column; justify-content:center; }
.feature-text .tag{
  display:inline-block; margin-bottom:16px; padding:0.4rem 0.9rem; border-radius:999px;
  background:rgba(10,10,10,0.06); color:var(--muted); font-size:0.78rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em;
  width:fit-content;
}
.feature-text h3{
  margin:0 0 14px; font-family:'Fraunces',serif; font-weight:600; font-size:clamp(1.5rem,2.4vw,1.9rem); letter-spacing:-0.02em; line-height:1.16;
}
.feature-text p{ margin:0 0 24px; color:var(--muted); line-height:1.75; max-width:44ch; }

/* ---------- list (bulleted) ---------- */
.list{ margin:0; padding:0; list-style:none; display:grid; gap:14px; }
.list li{
  position:relative; padding-left:28px; color:var(--muted); line-height:1.7; font-size:1rem;
}
.list li::before{
  content:''; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%; background:var(--ink);
}

/* ---------- steps (process flow) ---------- */
.steps{ display:grid; gap:16px; }
@media(min-width:820px){ .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.step{ padding:28px 24px; }
.step .n{ font-family:'Fraunces',serif; font-weight:700; font-size:1.6rem; color:var(--muted); margin-bottom:10px; display:block; }
.step h4{ margin:0 0 8px; font-weight:800; font-size:1rem; }
.step p{ margin:0; color:var(--muted); line-height:1.65; font-size:0.92rem; }

/* ---------- gallery ---------- */
.gallery{ display:grid; gap:18px; grid-template-columns:1fr; }
@media(min-width:780px){ .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.photo{ padding:6px; }
.photo-inner{ border-radius:20px; overflow:hidden; aspect-ratio:4/3; background:#e9e9e6; }
.photo-inner img{ width:100%; height:100%; object-fit:cover; }
.photo-caption{ padding:16px 14px 10px; color:var(--muted); font-size:0.92rem; line-height:1.6; }
.photo-caption strong{ display:block; color:var(--ink); margin-bottom:4px; font-weight:700; }

/* ---------- result / quote panel ---------- */
.result-panel{ padding:44px; text-align:center; }
.result-panel h3{ margin:0; font-family:'Fraunces',serif; font-weight:600; font-size:clamp(1.4rem,2.6vw,1.9rem); letter-spacing:-0.02em; }
.result-panel p{ margin:14px auto 0; max-width:52ch; color:var(--muted); line-height:1.75; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; gap:20px; }
@media(min-width:860px){ .contact-grid{ grid-template-columns:0.85fr 1.15fr; } }
.contact-list{ display:grid; gap:14px; padding:30px; align-content:start; }
.contact-item{ padding:16px 0; border-bottom:1px solid rgba(10,10,10,0.08); }
.contact-item:last-child{ border-bottom:0; }
.contact-item strong{ display:block; margin-bottom:4px; font-size:0.95rem; }
.contact-item span, .contact-item a{ color:var(--muted); text-decoration:none; font-size:0.95rem; }
.contact-item a:hover{ color:var(--ink); }

.form{ padding:34px; display:grid; gap:16px; }
.field-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media(min-width:600px){ .field-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
label{ display:grid; gap:8px; font-size:0.92rem; font-weight:700; }
input, textarea, select{
  width:100%; border-radius:16px; border:1px solid rgba(10,10,10,0.12);
  background:rgba(255,255,255,0.6); color:var(--ink); padding:14px 16px; font:inherit;
  transition:border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:rgba(10,10,10,0.35); box-shadow:0 0 0 4px rgba(10,10,10,0.06);
}
textarea{ min-height:150px; resize:vertical; }
.form-note{ margin:0; font-size:0.88rem; color:var(--muted); line-height:1.6; }

/* ---------- cta panel ---------- */
.cta-panel{ padding:70px 40px; text-align:center; }
.cta-panel h2{
  margin:0 auto; max-width:18ch; font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.03em;
  line-height:1.08; font-size:clamp(2rem,4.6vw,3.1rem);
}
.cta-panel p{ margin:20px auto 0; max-width:42ch; color:var(--muted); line-height:1.75; }
.cta-panel .actions{ margin-top:34px; }

/* ---------- footer ---------- */
.footer{
  padding:30px 0 50px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  color:var(--muted); font-size:0.88rem;
}
.footer a{ text-decoration:none; color:var(--muted); transition:color .25s ease; }
.footer a:hover{ color:var(--ink); }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- impressum text blocks ---------- */
.legal{ padding:8px; }
.legal-block{ padding:30px; margin-bottom:18px; }
.legal-block h3{ margin:0 0 12px; font-family:'Fraunces',serif; font-weight:600; font-size:1.2rem; }
.legal-block p, .legal-block li{ color:var(--muted); line-height:1.75; font-size:0.96rem; }
.legal-block a{ color:var(--ink); text-decoration:underline; }

@media(max-width:720px){
  .hero{ padding-top:150px; }
  .page-hero{ padding-top:140px; }
}