/* =====================================================================
   KVP-MEDIA · SHARED DESIGN SYSTEM
   Editorial studio look · paper / ink / signal-orange
===================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --paper:#ECE9E1;
  --paper-2:#E4E0D5;
  --paper-3:#DAD5C8;
  --card:#F3F1EA;
  --ink:#2E2A24;
  --ink-2:#221E18;
  --muted:#6E6A60;
  --muted-2:#928D80;
  --line:rgba(46,42,36,.15);
  --line-soft:rgba(46,42,36,.07);
  --paper-line:rgba(233,232,227,.15);
  --accent:#EE3A00;
  --accent-2:#FF5A2A;
  --r:3px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease2:cubic-bezier(.16,1,.3,1);
  --maxw:1440px;
  --pad:max(clamp(20px,4vw,64px), calc((100vw - var(--maxw)) / 2));
}

::selection{background:var(--accent);color:var(--paper)}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  background:var(--paper);color:var(--ink);
  line-height:1.6;overflow-x:hidden;cursor:none;
}
@media (pointer:coarse){body{cursor:auto}}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:0}

.wrap{max-width:var(--maxw);margin-inline:auto}

/* ---------- grain + cursor ---------- */
.grain{position:fixed;inset:-50%;z-index:9998;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-4%,-4%)}30%{transform:translate(3%,-2%)}
  50%{transform:translate(-2%,3%)}70%{transform:translate(4%,2%)}90%{transform:translate(-3%,4%)}}
.cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cur-dot{width:7px;height:7px;background:#fff;transform:translate(-50%,-50%)}
.cur-ring{width:38px;height:38px;border:1px solid rgba(255,255,255,.6);transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s}
.cur-ring.hov{width:60px;height:60px;background:rgba(255,255,255,.1);border-color:transparent}
@media (pointer:coarse){.cur-dot,.cur-ring,.grain{display:none}}

/* ---------- page transition ---------- */
.curtain{position:fixed;inset:0;z-index:9990;background:var(--ink);transform:translateY(0);
  display:flex;align-items:center;justify-content:center;pointer-events:none}
.curtain .cm{font-family:'Fraunces',serif;font-style:italic;color:var(--paper);font-size:clamp(1.6rem,5vw,3rem);
  opacity:0;transform:translateY(14px)}
.curtain.reveal{animation:curtain-up 1s var(--ease2) forwards}
.curtain.cover{transform:translateY(100%);animation:curtain-down .6s var(--ease2) forwards}
.curtain.cover .cm{animation:cm-in .6s .12s var(--ease) forwards}
@keyframes curtain-up{to{transform:translateY(-100%)}}
@keyframes curtain-down{to{transform:translateY(0)}}
@keyframes cm-in{to{opacity:1;transform:translateY(0)}}

/* ---------- typography helpers ---------- */
.serif{font-family:'Fraunces',Georgia,serif;font-weight:380;letter-spacing:-.015em}
.serif-i{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:380}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.02em;line-height:1.05}
.kicker{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:center;gap:.7em}
.kicker::before{content:"";width:24px;height:1px;background:var(--accent)}
.kicker.on-dark{color:var(--muted-2)}
.accent{color:var(--accent)}
.on-dark .accent,.accent-2{color:var(--accent-2)}

/* ---------- buttons / links ---------- */
.btn{--bg:var(--ink);--fg:var(--paper);position:relative;display:inline-flex;align-items:center;gap:.75em;
  background:var(--bg);color:var(--fg);padding:1.05em 1.7em;border:none;border-radius:60px;cursor:none;
  font-family:'Space Grotesk',sans-serif;font-size:.82rem;font-weight:600;letter-spacing:.03em;overflow:hidden;
  transition:transform .5s var(--ease),color .45s var(--ease);will-change:transform}
.btn span{position:relative;z-index:2}
.btn::after{content:"";position:absolute;z-index:1;inset:0;border-radius:60px;background:var(--accent);
  transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover{color:#fff}.btn:hover::after{transform:translateY(0)}
.btn .ar{transition:transform .45s var(--ease)}.btn:hover .ar{transform:translate(3px,-3px)}
.btn-light{--bg:var(--paper);--fg:var(--ink)}.btn-light:hover{color:#fff}
.btn-out{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn-out::after{background:var(--ink)}.btn-out:hover{color:var(--paper)}
.btn-out.on-dark{border-color:var(--paper-line);color:var(--paper)}
.btn-out.on-dark::after{background:var(--paper)}.btn-out.on-dark:hover{color:var(--ink)}
.tlink{position:relative;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:.5em}
.tlink::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.tlink:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.line-mask{display:block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.12em}
.line-mask>span{display:block;transform:translateY(140%);transition:transform 1s var(--ease)}
.line-mask.in>span{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .rv,.line-mask>span{opacity:1!important;transform:none!important;transition:none}
  .grain,.curtain{animation:none!important}.curtain{display:none}
}

/* ---------- nav ---------- */
nav.site{position:fixed;top:0;left:0;right:0;z-index:900;padding:clamp(15px,2.3vw,24px) var(--pad);
  display:flex;align-items:center;justify-content:space-between;
  transition:padding .5s var(--ease),background .5s,backdrop-filter .5s,border-color .5s;
  border-bottom:1px solid transparent}
nav.site.s{background:rgba(233,232,227,.74);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-color:var(--line-soft);padding-top:13px;padding-bottom:13px}
.brand{display:inline-flex;align-items:baseline;gap:.14em;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.5rem;letter-spacing:-.03em;line-height:1}
.brand .m{font-weight:400;color:var(--accent)}
.nav-mid{display:flex;gap:32px;align-items:center}
.nav-mid a{font-size:.8rem;font-weight:500;letter-spacing:.01em;color:var(--ink);opacity:.66;transition:opacity .35s;position:relative}
.nav-mid a:hover,.nav-mid a.active{opacity:1}
.nav-mid a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--accent)}
.nav-right{display:flex;align-items:center;gap:20px}
.nav-mail{font-size:.8rem;font-weight:600}
.burger{display:none;flex-direction:column;gap:6px;cursor:none;background:none;border:none;padding:4px;z-index:950}
.burger span{width:26px;height:2px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s}
.burger.o span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.o span:nth-child(2){opacity:0}
.burger.o span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:920;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;padding:90px var(--pad) 40px;overflow-y:auto;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);pointer-events:none}
.mobile-menu.open{clip-path:inset(0 0 0 0);pointer-events:auto}
.mobile-menu a{font-family:'Fraunces',serif;font-size:clamp(1.9rem,8.5vw,3.2rem);padding:.14em 0;
  display:flex;align-items:baseline;gap:.5em;border-bottom:1px solid var(--paper-line)}
.mobile-menu a .mi{font-family:'Space Grotesk';font-size:.78rem;color:var(--muted-2)}
.mobile-menu .mm-foot{margin-top:36px;display:flex;gap:18px;color:var(--muted-2);font-size:.82rem}
.mobile-menu .mm-foot a{font-family:'Space Grotesk';font-size:.82rem;border:none;padding:0;display:inline}

/* ---------- sections ---------- */
section{padding:clamp(58px,7vw,116px) var(--pad);position:relative}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(34px,4vw,58px)}
.sec-head .lead{max-width:430px;color:var(--muted);font-size:1.02rem;line-height:1.65}
.h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(2.1rem,5.2vw,4.4rem);line-height:1;letter-spacing:-.025em;margin-top:18px}
.h2 em{font-style:italic}

/* ---------- home hero ---------- */
header.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:140px var(--pad) clamp(30px,4vw,54px);position:relative;overflow:hidden}
.hero-top{position:absolute;top:clamp(94px,12vh,150px);left:var(--pad);right:var(--pad);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hero-loc{max-width:230px;font-size:.82rem;color:var(--muted);line-height:1.5;text-align:right}
.hero-h1{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(2.9rem,10vw,10.5rem);
  line-height:1.06;letter-spacing:-.035em;margin-bottom:clamp(26px,4vw,46px)}
.hero-h1 em{font-style:italic}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;
  padding-top:28px;border-top:1px solid var(--line)}
.hero-lead{max-width:430px;font-size:clamp(1rem,1.3vw,1.12rem);opacity:.78;line-height:1.62}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.scroll-hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:.64rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint .bar{width:1px;height:32px;background:var(--line);position:relative;overflow:hidden}
.scroll-hint .bar::after{content:"";position:absolute;inset:0;background:var(--accent);animation:scrolly 2.2s var(--ease) infinite}
@keyframes scrolly{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- marquee ---------- */
.marquee{background:var(--ink);color:var(--paper);padding:18px 0;overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;animation:scroll-x 34s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:'Fraunces',serif;font-size:clamp(1.2rem,2.3vw,1.9rem);font-style:italic;
  padding:0 .55em;display:inline-flex;align-items:center;gap:.7em}
.marquee-track span::after{content:"✷";font-style:normal;font-size:.65em;color:var(--accent-2)}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--paper);padding:clamp(26px,3vw,42px) clamp(20px,2vw,32px)}
.stat .n{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(2.3rem,4.8vw,3.9rem);line-height:1;letter-spacing:-.03em}
.stat .l{margin-top:10px;font-size:.82rem;color:var(--muted);line-height:1.45;max-width:180px}

/* ---------- service teasers (home) ---------- */
.teasers{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.teaser{background:var(--paper);padding:clamp(30px,3.2vw,46px);display:flex;flex-direction:column;gap:22px;
  position:relative;overflow:hidden;min-height:430px;transition:background .5s}
.teaser:hover{background:var(--card)}
.teaser .tnum{font-family:'Fraunces',serif;font-style:italic;color:var(--muted);font-size:1rem}
.teaser .ticon{width:46px;height:46px}
.teaser h3{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.02em;line-height:1.06}
.teaser p{font-size:.92rem;color:var(--muted);line-height:1.62}
.teaser ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin-top:auto}
.teaser ul li{font-size:.82rem;color:var(--muted);display:flex;gap:9px;align-items:center}
.teaser ul li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);flex-shrink:0}
.teaser .tgo{display:inline-flex;align-items:center;gap:.6em;font-size:.8rem;font-weight:600;margin-top:6px}
.teaser .tgo .c{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .45s,color .45s,border-color .45s}
.teaser:hover .tgo .c{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.teaser:hover .tgo .c svg{transform:translate(3px,-3px)}
.teaser .tgo .c svg{transition:transform .45s var(--ease)}

/* ---------- work / portfolio ---------- */
.work{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px)}
.wk{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--card);
  display:flex;flex-direction:column;min-height:300px;transition:transform .6s var(--ease)}
.wk:hover{transform:translateY(-6px)}
.wk .thumb{height:clamp(220px,24vw,270px);position:relative;overflow:hidden;background:var(--paper-2)}
.wk .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,0,0,.04),transparent)}
.wk-1{background:linear-gradient(135deg,#2b2b6b,#4f46e5 55%,#06b6d4)}
.wk-2{background:linear-gradient(135deg,#7a1f12,#ee3a00 55%,#ffb347)}
.wk-3{background:linear-gradient(135deg,#1f3a2e,#0f766e 55%,#84cc16)}
.wk-4{background:linear-gradient(135deg,#3a2140,#9333ea 55%,#ec4899)}
.wk .thumb .dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-size:14px 14px}
.wk .meta{padding:22px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.wk .tag{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.wk h4{font-family:'Fraunces',serif;font-weight:500;font-size:1.45rem;letter-spacing:-.015em}
.wk .res{margin-top:auto;display:flex;align-items:baseline;gap:.5em;border-top:1px solid var(--line);padding-top:14px}
.wk .res b{font-family:'Fraunces',serif;font-weight:400;font-size:1.5rem;color:var(--accent)}
.wk .res span{font-size:.82rem;color:var(--muted)}
.wk h4 .ext{font-size:.6em;color:var(--muted);vertical-align:middle;display:inline-block;transition:color .4s,transform .4s var(--ease)}
.wk:hover h4 .ext{color:var(--accent);transform:translate(2px,-2px)}
.wk .chips{display:flex;gap:6px;flex-wrap:wrap}
.wk .chips em{font-style:normal;font-size:.72rem;color:var(--muted-2);border:1px solid var(--line);border-radius:30px;padding:4px 11px}

/* ---------- split / mini about ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:center}
.split.dark{background:var(--ink)}
.bigquote{font-family:'Fraunces',serif;font-weight:380;font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1.28;letter-spacing:-.015em}
.bigquote em{font-style:italic;color:var(--accent)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink);color:var(--paper);text-align:center;padding:clamp(60px,7.5vw,112px) var(--pad)}
.cta-band h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(2.4rem,7vw,6rem);line-height:.96;letter-spacing:-.03em}
.cta-band h2 em{font-style:italic}.cta-band .dot{color:var(--accent-2)}
.cta-band p{color:#BCB8AD;max-width:480px;margin:22px auto 36px;line-height:1.7;font-family:'Inter',sans-serif}
.cta-band .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- subpage hero ---------- */
.sub-hero{padding:clamp(118px,14vh,168px) var(--pad) clamp(40px,4.5vw,64px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.crumb{display:flex;gap:10px;align-items:center;font-size:.76rem;color:var(--muted);margin-bottom:30px}
.crumb a:hover{color:var(--ink)}.crumb .sep{opacity:.5}
.sub-hero h1{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(2.6rem,8vw,7rem);line-height:1.0;letter-spacing:-.03em;max-width:14ch}
.sub-hero h1 em{font-style:italic}
.sub-hero .sh-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-top:clamp(28px,4vw,48px)}
.sub-hero .sh-lead{max-width:460px;font-size:clamp(1rem,1.3vw,1.14rem);opacity:.82;line-height:1.6}
.sub-hero .sh-num{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(3rem,7vw,6rem);color:var(--line);line-height:1}

/* ---------- content layout w/ sticky TOC ---------- */
.content{display:flex;align-items:flex-start;gap:clamp(34px,4vw,64px);padding:clamp(44px,5.5vw,84px) var(--pad)}
.toc{position:sticky;top:110px;flex:0 0 230px;display:flex;flex-direction:column;gap:2px}
.toc .tl{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.toc a{padding:11px 0;font-size:.97rem;color:var(--muted);border-bottom:1px solid var(--line-soft);transition:color .35s,padding-left .35s;display:flex;gap:11px}
.toc a .ti{font-family:'Fraunces',serif;font-style:italic;font-size:.86rem}
.toc a:hover,.toc a.active{color:var(--ink);padding-left:6px}
.toc a.active{color:var(--accent)}
.toc .toc-cta{margin-top:26px;align-self:flex-start;font-size:.92rem;padding:1.15em 2.3em}

/* ---------- prose ---------- */
.prose{flex:1 1 0%;min-width:0;max-width:760px}
.prose .blk,.prose section{padding:clamp(40px,5vw,70px) 0 0;scroll-margin-top:100px}
.prose .blk:first-child,.prose section:first-child{padding-top:0}
.prose h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:22px}
.prose h2 em{font-style:italic}
.prose h3{font-family:'Space Grotesk';font-weight:600;font-size:1.18rem;margin:34px 0 12px;letter-spacing:-.01em}
.prose p{font-family:'Inter',sans-serif;font-size:1.02rem;line-height:1.8;color:#3a382f}
.prose p+p{margin-top:15px}
.prose .kw{font-weight:600;color:var(--ink);font-family:'Space Grotesk'}
.prose ul{list-style:none;margin:18px 0;display:flex;flex-direction:column;gap:13px}
.prose ul li{position:relative;padding-left:28px;font-family:'Inter',sans-serif;font-size:1rem;line-height:1.55;color:#3a382f}
.prose ul li::before{content:"→";position:absolute;left:0;top:0;color:var(--accent);font-family:'Space Grotesk'}
.prose .callout{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:clamp(26px,3vw,40px);margin:34px 0}
.prose .callout .ck{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
.prose .callout p{color:#C9C5BA;font-size:1.05rem}
.prose .callout .big{font-family:'Fraunces',serif;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.25;color:var(--paper)}
.prose .callout .big em{font-style:italic;color:var(--accent-2)}
.prose .statline{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:34px 0}
.prose .statline .s{background:var(--paper);padding:24px 20px}
.prose .statline .s b{font-family:'Fraunces',serif;font-weight:400;font-size:2rem;display:block;line-height:1}
.prose .statline .s span{font-size:.78rem;color:var(--muted);display:block;margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chips span{font-size:.74rem;color:var(--muted);border:1px solid var(--line);border-radius:40px;padding:7px 14px;transition:border-color .4s,color .4s}
.chips span:hover{border-color:var(--accent);color:var(--ink)}

/* ---------- process steps ---------- */
.approach{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.ap{background:var(--paper);padding:clamp(28px,3vw,40px);min-height:230px;display:flex;flex-direction:column;justify-content:space-between;transition:background .5s}
.ap:hover{background:var(--card)}
.ap .pn{font-family:'Fraunces',serif;font-style:italic;font-size:1.1rem;color:var(--accent)}
.ap h4{font-family:'Fraunces',serif;font-weight:400;font-size:1.45rem;margin-bottom:10px;letter-spacing:-.015em}
.ap p{font-size:.85rem;color:var(--muted);line-height:1.6}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.q{background:var(--paper);padding:clamp(30px,3vw,44px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:330px}
.q .stars{color:var(--accent);font-size:.8rem;letter-spacing:3px}
.q blockquote{font-family:'Fraunces',serif;font-weight:380;font-size:clamp(1.12rem,1.5vw,1.4rem);line-height:1.4;letter-spacing:-.01em}
.q .who{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:20px}
.q .av{width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:600;flex-shrink:0}
.q .who .nm{font-size:.86rem;font-weight:600}.q .who .rl{font-size:.76rem;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(40px,6vw,90px);align-items:start}
.faq-list{border-top:1px solid var(--line)}
.fq{border-bottom:1px solid var(--line)}
.fq-q{width:100%;background:none;border:none;text-align:left;cursor:none;padding:clamp(20px,2.4vw,30px) 0;
  display:flex;align-items:center;justify-content:space-between;gap:24px;color:var(--ink);
  font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.12rem,2vw,1.65rem);letter-spacing:-.01em}
.fq-ic{flex-shrink:0;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;position:relative;transition:background .4s,border-color .4s}
.fq-ic::before,.fq-ic::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .4s var(--ease),background .4s}
.fq-ic::after{transform:translate(-50%,-50%) rotate(90deg)}
.fq.o .fq-ic{background:var(--accent);border-color:var(--accent)}
.fq.o .fq-ic::before,.fq.o .fq-ic::after{background:#fff}
.fq.o .fq-ic::after{transform:translate(-50%,-50%) rotate(0)}
.fq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.fq-a div{padding:0 0 clamp(22px,2.4vw,30px);max-width:620px;color:var(--muted);font-size:.98rem;line-height:1.75;font-family:'Inter',sans-serif}
.fq.o .fq-a{max-height:360px}

/* ---------- contact ---------- */
.contact{background:var(--ink);color:var(--paper)}
.contact .kicker{color:var(--muted-2)}
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px)}
.ct-left h1{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(2.4rem,6vw,5rem);line-height:1;letter-spacing:-.025em;margin:18px 0 28px}
.ct-left h1 em{font-style:italic}
.ct-left .lead{color:#BCB8AD;font-size:1.04rem;line-height:1.7;max-width:420px;margin-bottom:38px;font-family:'Inter',sans-serif}
.ct-info{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--paper-line)}
.ct-info a,.ct-info div{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--paper-line);font-size:.92rem}
.ct-info .cl{color:var(--muted-2)}.ct-info .cv{font-weight:500}
.ct-info a:hover .cv{color:var(--accent-2)}
form{display:grid;gap:0}
.fg{position:relative;border-bottom:1px solid var(--paper-line)}
.fg label{position:absolute;left:0;top:20px;font-size:1rem;color:var(--muted-2);pointer-events:none;
  transition:transform .35s var(--ease),font-size .35s,color .35s;font-family:'Inter',sans-serif}
.fg input,.fg select,.fg textarea{width:100%;background:none;border:none;outline:none;color:var(--paper);
  font-family:'Space Grotesk';font-size:1rem;padding:20px 0 14px;resize:none}
.fg select{cursor:none}.fg select option{background:#221E18;color:var(--paper)}
.fg textarea{min-height:90px}
.fg input:focus~label,.fg input:not(:placeholder-shown)~label,
.fg textarea:focus~label,.fg textarea:not(:placeholder-shown)~label,.fg.filled label{
  transform:translateY(-18px);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2)}
.fg input::placeholder,.fg textarea::placeholder{color:transparent}
.fg .bar{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.fg input:focus~.bar,.fg textarea:focus~.bar,.fg select:focus~.bar{transform:scaleX(1)}
form .btn{margin-top:30px;width:100%;justify-content:center}
.form-note{margin-top:16px;font-size:.76rem;color:var(--muted-2);text-align:center;font-family:'Inter'}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:var(--paper);padding:clamp(60px,8vw,110px) var(--pad) 36px;border-top:1px solid var(--paper-line)}
.ft-big{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(2.6rem,11vw,9rem);line-height:.9;letter-spacing:-.04em;margin-bottom:clamp(34px,5vw,70px)}
.ft-big em{font-style:italic}.ft-big .dot{color:var(--accent-2)}
.ft-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-top:48px;border-top:1px solid var(--paper-line)}
.ft-cols .lead{color:var(--muted-2);font-size:.9rem;line-height:1.6;max-width:280px;margin-bottom:22px;font-family:'Inter'}
.ft-soc{display:flex;gap:10px}
.ft-soc a{border:1px solid var(--paper-line);border-radius:40px;display:inline-flex;align-items:center;justify-content:center;padding:9px 17px;font-size:.72rem;font-weight:600;letter-spacing:.03em;white-space:nowrap;transition:background .4s,color .4s,border-color .4s}
.ft-soc a:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.ft-col h5{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px;font-weight:600}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.ft-col a{font-size:.88rem;color:#C9C5BA;transition:color .35s}.ft-col a:hover{color:var(--paper)}
.ft-seo{margin-top:56px;padding-top:28px;border-top:1px solid var(--paper-line);font-size:.78rem;line-height:1.8;color:var(--muted-2);font-family:'Inter'}
.ft-seo a{color:var(--muted)}.ft-seo a:hover{color:var(--paper)}
.ft-bot{margin-top:38px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.ft-bot .cp{font-size:.78rem;color:var(--muted-2)}
.ft-bot .lg{display:flex;gap:22px}.ft-bot .lg a{font-size:.78rem;color:var(--muted-2)}.ft-bot .lg a:hover{color:var(--paper)}

/* ---------- responsive ---------- */
@media (max-width:1200px){ .nav-right .nav-mail{display:none} }
@media (max-width:1040px){
  .nav-mid{display:none}
  .burger{display:flex}
  .nav-right .nav-mail{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .teasers{grid-template-columns:1fr}
  .work{grid-template-columns:1fr}
  .approach{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr}
  .faq{grid-template-columns:minmax(0,1fr);gap:30px}
  .content{flex-direction:column;align-items:stretch;gap:30px}
  .toc{position:static;flex:0 0 auto;flex-direction:row;flex-wrap:wrap;gap:8px}
  .toc .tl{flex-basis:100%;margin-bottom:2px}
  .toc a{border:1px solid var(--line);border-radius:30px;padding:8px 14px}
  .toc a:hover,.toc a.active{padding-left:14px}
  .toc a.active{border-color:var(--accent)}
  .ft-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:880px){
  body{cursor:auto}
  .nav-right .btn{display:none}
  .sec-head{grid-template-columns:minmax(0,1fr)}
  .split{grid-template-columns:minmax(0,1fr)}
  .ct-grid{grid-template-columns:minmax(0,1fr)}
  /* Hero auf Handy/Tablet im normalen Fluss (keine Ueberlappung) */
  header.hero{min-height:auto;justify-content:flex-start;padding-top:clamp(102px,22vw,132px);padding-bottom:40px}
  .hero-top{position:static;margin-bottom:22px}
  .hero-loc{text-align:left;max-width:none}
}
@media (max-width:600px){
  .stats{grid-template-columns:1fr}
  .approach{grid-template-columns:1fr}
  .prose .statline{grid-template-columns:1fr}
  .ft-cols{grid-template-columns:1fr}
  .hero-foot,.sub-hero .sh-foot{flex-direction:column;align-items:flex-start}
  .hero-loc{text-align:left}
  .scroll-hint{display:none}
}

/* ---------- eigene Bilder (mit automatischem Fallback) ---------- */
/* Portfolio-Thumbnails: Foto liegt über dem Farbverlauf. Fehlt die Datei,
   entfernt sich das <img> selbst (onerror) und der Verlauf bleibt sichtbar. */
.wk .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:3}
.wk .thumb svg.mock{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block}
.wk .thumb svg.mock *{transition:none}
/* Runde Avatare (Team): Foto überdeckt den Buchstaben, sonst bleibt der Buchstabe */
.avatar{position:relative;overflow:hidden}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
/* Allgemeiner Bildrahmen, falls du irgendwo ein Bild einsetzen willst */
.media-frame{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);background:var(--paper-2)}
.team-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(24px,3vw,48px);align-items:stretch}
.team-grid .media-frame{aspect-ratio:4/5;max-width:400px}
@media(max-width:820px){.team-grid{grid-template-columns:1fr}.team-grid .media-frame{max-width:340px;margin-inline:auto;aspect-ratio:3/4}}
.media-frame img{width:100%;height:100%;object-fit:cover;display:block}

/* =====================================================================
   DESIGN-UPGRADES · Aurora · Scroll-Progress · Tilt · Fokus · Status
===================================================================== */

/* Scroll-Fortschrittsbalken (per JS injiziert) */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));z-index:901;pointer-events:none;will-change:transform}

/* Sichtbarer Fokus-Rahmen (Tastatur/Accessibility + Politur) */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
a:focus-visible,button:focus-visible,.teaser:focus-visible,.wk:focus-visible{outline-offset:5px}

/* Verfügbarkeits-Pill im Hero */
.status{display:inline-flex;align-items:center;gap:9px;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;border:1px solid var(--line);border-radius:40px;padding:8px 14px;
  background:rgba(255,255,255,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--ink)}
.status .pulse{position:relative;width:8px;height:8px;border-radius:50%;background:#1f9d55;flex-shrink:0}
.status .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:#1f9d55;animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.65}100%{transform:scale(3.2);opacity:0}}

/* Aurora-Glow in dunklen Sektionen — dezent, weich, kein "Gradient-Brei" */
.cta-band,.contact{position:relative;isolation:isolate;overflow:hidden}
.cta-band::before,.contact::before{content:"";position:absolute;z-index:-1;width:65vw;height:65vw;max-width:900px;max-height:900px;
  left:50%;top:50%;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(238,58,0,.42), transparent 62%),
             radial-gradient(circle at 70% 68%, rgba(60,110,200,.28), transparent 60%);
  filter:blur(90px);opacity:.55;transform:translate(-52%,-52%);
  animation:aurora 18s ease-in-out infinite}
@keyframes aurora{0%,100%{transform:translate(-54%,-54%) rotate(0deg) scale(1)}
  50%{transform:translate(-46%,-48%) rotate(180deg) scale(1.22)}}

/* 3D-Tilt auf Karten (per JS, nur Desktop) */
.teaser{transition:background .5s var(--ease),transform .45s var(--ease)}
.wk,.teaser{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .status .pulse::after,.cta-band::before,.contact::before{animation:none}
  .progress{display:none}
}

/* ---------- Standorte-Grid ---------- */
.city-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.city-card{background:var(--paper);padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:6px;min-height:150px;justify-content:space-between;position:relative;transition:background .45s var(--ease)}
.city-card:hover{background:var(--card)}
.city-card::before{content:"";position:absolute;left:0;top:0;height:100%;width:0;background:var(--accent);transition:width .4s var(--ease)}
.city-card:hover::before{width:3px}
.city-card .cn{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.4rem,2vw,1.8rem);letter-spacing:-.01em}
.city-card .cs{font-size:.8rem;color:var(--muted)}
.city-card .cgo{font-size:.76rem;font-weight:600;letter-spacing:.04em;display:inline-flex;align-items:center;gap:.45em;margin-top:10px;transition:color .4s,gap .4s}
.city-card:hover .cgo{color:var(--accent);gap:.8em}
@media(max-width:880px){.city-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.city-grid{grid-template-columns:1fr}}

/* ---------- Blog ---------- */
.posts{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.post{background:var(--paper);display:grid;grid-template-columns:.5fr 1.5fr auto;gap:30px;align-items:center;padding:clamp(26px,3vw,42px) clamp(8px,1vw,16px);transition:background .45s,padding-left .5s var(--ease)}
.post:hover{background:var(--card);padding-left:24px}
.post .pcat{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.post .pdate{font-size:.78rem;color:var(--muted);margin-top:6px}
.post h3{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.015em;line-height:1.1}
.post p{font-size:.9rem;color:var(--muted);margin-top:8px;max-width:560px;line-height:1.6}
.post .parr{width:50px;height:50px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .4s,color .4s,border-color .4s}
.post:hover .parr{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.prose .answer{background:var(--card);border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0;padding:20px 24px;margin:8px 0 8px}
.prose .answer strong{font-family:'Space Grotesk'}
.post-meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:.82rem;margin-top:18px;border-top:1px solid var(--line);padding-top:18px}
@media(max-width:760px){.post{grid-template-columns:1fr;gap:10px}.post .parr{display:none}}

/* ---------- Förder-Banner (BAFA) ---------- */
.foerder-band{padding:clamp(40px,5vw,70px) var(--pad)}
.fb-inner{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);border-radius:var(--r);
  padding:clamp(28px,3.6vw,48px);display:flex;align-items:center;gap:clamp(24px,3vw,48px);flex-wrap:wrap;justify-content:space-between}
.fb-inner::before{content:"";position:absolute;z-index:0;width:380px;height:380px;right:-120px;top:-160px;border-radius:50%;
  background:radial-gradient(circle,rgba(238,58,0,.4),transparent 65%);filter:blur(50px)}
.fb-text{position:relative;z-index:1;flex:1;min-width:260px}
.fb-badge{display:inline-flex;align-items:center;gap:.5em;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--accent-2);border:1px solid var(--paper-line);border-radius:40px;padding:7px 13px}
.fb-text h3{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.5rem,2.6vw,2.3rem);letter-spacing:-.015em;line-height:1.1;margin:16px 0 8px}
.fb-text h3 em{font-style:italic;color:var(--accent-2)}
.fb-text p{color:#C9C5BA;font-family:'Inter';font-size:.96rem;line-height:1.65;max-width:580px}
.fb-text p strong{color:var(--paper);font-family:'Space Grotesk'}
.fb-cta{position:relative;z-index:1;flex-shrink:0}
@media(max-width:760px){.fb-cta{width:100%}.fb-cta .btn{width:100%;justify-content:center}}

/* ---------- Prozess-Schritte (einheitlich, nummeriert) ---------- */
.prose .steps{margin:22px 0;border-top:1px solid var(--line)}
.prose .steps .step{display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start;
  padding:18px 0;border-bottom:1px solid var(--line)}
.prose .steps .step .sn{font-family:'Fraunces',serif;font-style:italic;font-size:1.5rem;color:var(--accent);line-height:1.1}
.prose .steps .step strong{display:block;font-family:'Space Grotesk';font-weight:600;font-size:1.05rem;color:var(--ink);margin-bottom:3px}
.prose .steps .step p{margin:0;font-size:.96rem}
@media(max-width:520px){.prose .steps .step{grid-template-columns:40px 1fr;gap:14px}}

/* =====================================================================
   RESPONSIVE-FEINSCHLIFF · Overflow-Schutz · Mobile/Tablet (06/2026)
===================================================================== */
/* Fliesstext darf bei Bedarf umbrechen; Ueberschriften nur sanfte dt. Silbentrennung */
.prose p,.prose li,.prose blockquote,.prose .callout .big{overflow-wrap:break-word}
/* Grid-/Flex-Spalten duerfen schrumpfen (kein horizontaler Ueberlauf) */
.content,.ct-grid,.split,.sec-head,.faq,.hero-foot,.sub-hero .sh-foot,.fb-inner,.stat{min-width:0}

/* Handy (bis 600px): kompaktere, gleichmaessige Abstaende */
@media (max-width:600px){
  .prose .callout{padding:22px 20px}
  .ft-bot{flex-direction:column;align-items:flex-start;gap:14px}
  .chips span{font-size:.72rem;padding:6px 12px}
}