/* =========================================================
   Self-hosted fonts — nothing is requested from Google, so no
   visitor IP ever leaves this site to fetch type.
   Latin subset only (covers German umlauts and ß).
   ========================================================= */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/space-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/space-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/space-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/space-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/inter-300.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-600.woff2') format('woff2')}

/* =========================================================
   Welde Websites — styles.css
   Palette sampled from the WW logo:
   ink #0A1628 · blue #1A6DFF · deep blue #10397E · silver #B5B9BE
   ========================================================= */

:root{
  --ink:#0A1628;
  --ink-2:#0D1D33;
  --ink-3:#112441;
  --line:rgba(181,185,190,.14);
  --line-strong:rgba(181,185,190,.28);

  --blue:#1A6DFF;
  --blue-soft:#4E8CFF;
  --blue-deep:#10397E;

  --silver:#B5B9BE;
  --text:#E8ECF2;
  --muted:#98A2B3;
  --stroke:rgba(181,185,190,.75);
  --card:linear-gradient(165deg, rgba(17,36,65,.7), rgba(10,22,40,.4));
  --card-flat:rgba(10,22,40,.5);

  --paper:#F4F6FA;
  --paper-2:#FFFFFF;

  --radius:18px;
  --radius-sm:12px;
  --maxw:1180px;

  --ff-display:'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --ff-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:92px}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,h5{font-family:var(--ff-display); font-weight:600; line-height:1.1; margin:0; letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}

.container{width:min(100% - 44px, var(--maxw)); margin-inline:auto}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blue); color:#fff; padding:12px 20px; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

/* subtle noise so flat navy doesn't look dead */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--ff-display); font-weight:500; font-size:15px;
  padding:13px 24px; border-radius:100px; border:1px solid transparent;
  cursor:pointer; transition:all .32s var(--ease); white-space:nowrap;
}
.btn-lg{padding:16px 32px; font-size:16px}
.btn-block{width:100%}
.btn .arrow{transition:transform .32s var(--ease)}
.btn:hover .arrow{transform:translateX(5px)}

.btn-primary{background:var(--blue); color:#fff; box-shadow:0 8px 30px -10px rgba(26,109,255,.7)}
.btn-primary:hover{background:#3d82ff; box-shadow:0 14px 40px -10px rgba(26,109,255,.9); transform:translateY(-2px)}

.btn-ghost{border-color:var(--line-strong); color:var(--text); background:transparent}
.btn-ghost:hover{border-color:var(--blue); color:#fff; background:rgba(26,109,255,.09); transform:translateY(-2px)}

:focus-visible{outline:2px solid var(--blue-soft); outline-offset:3px; border-radius:4px}

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0;
  transition:padding .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  padding:10px 0;
  background:rgba(10,22,40,.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
/* The header stays dark the whole way down the page — it never changes colour. */

/* IMPORTANT: backdrop-filter on the header makes it the containing block for
   any position:fixed child, which would trap the drawer and its backdrop
   inside the header's own box once the page is scrolled. Drop the blur while
   the menu is open so both position against the viewport as intended. */
body.nav-open .site-header{backdrop-filter:none; -webkit-backdrop-filter:none}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:24px}

.brand{display:flex; align-items:center; flex:0 0 auto}
.brand img{height:46px; width:auto; transition:transform .4s var(--ease), height .35s var(--ease)}
.brand:hover img{transform:translateY(-2px) scale(1.03)}
.site-header.scrolled .brand img{height:40px}

.nav{display:flex; align-items:center; gap:28px}

/* language switch */
.lang{
  display:flex; align-items:center; gap:6px; font-family:var(--ff-display); font-size:13px;
  padding:5px 12px; border:1px solid var(--line-strong); border-radius:100px;
}
.lang span{color:var(--line-strong); user-select:none}
.lang button{
  background:none; border:0; cursor:pointer; padding:6px 8px; margin:-4px 0; font:inherit; letter-spacing:.06em;
  color:var(--muted); transition:color .25s var(--ease);
}
.lang button:hover{color:var(--text)}
.lang button.active{color:var(--blue); font-weight:600}
.nav > a:not(.btn){
  font-size:15px; color:var(--muted); position:relative; padding:4px 0;
  transition:color .25s var(--ease);
}
.nav > a:not(.btn)::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--blue);
  transition:width .3s var(--ease);
}
.nav > a:not(.btn):hover,.nav > a.active{color:var(--text)}
.nav > a:not(.btn):hover::after,.nav > a.active::after{width:100%}
.nav-cta{margin-left:4px}

.menu-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer;
  padding:12px; margin-right:-12px;
  /* above the open drawer (z 110) so the X is always tappable */
  position:relative; z-index:130;
}
/* tap-anywhere-outside layer, sits under the drawer but over the page */
.nav-backdrop{
  position:fixed; inset:0; z-index:105; border:0;
  background:rgba(5,12,24,.55); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .35s var(--ease);
}
body.nav-open .nav-backdrop{opacity:1}
.menu-toggle span{width:24px; height:2px; background:var(--text); border-radius:2px; transition:all .3s var(--ease)}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative; padding:190px 0 0; overflow:hidden}
.hero-glow{
  position:absolute; top:-260px; left:50%; transform:translateX(-50%);
  width:1100px; height:800px; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(26,109,255,.30), rgba(16,57,126,.12) 42%, transparent 68%);
  filter:blur(20px);
}
.hero-inner{position:relative; z-index:2; text-align:center; padding-bottom:88px}

.eyebrow{
  font-family:var(--ff-display); font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--silver); margin-bottom:26px;
}
.hero-title{
  font-size:clamp(2.9rem, 7.4vw, 5.4rem);
  letter-spacing:-.035em; font-weight:600; margin-bottom:26px;
}
.grad{
  background:linear-gradient(100deg, var(--blue) 10%, var(--blue-soft) 55%, var(--silver) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  max-width:660px; margin:0 auto 40px; color:var(--muted); font-size:clamp(1rem,1.55vw,1.16rem);
  font-weight:300;
}
.hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

.hero-stats{
  display:flex; justify-content:center; gap:clamp(28px,6vw,76px); flex-wrap:wrap;
  margin-top:76px; padding-top:44px; border-top:1px solid var(--line);
}
.hero-stats li{display:flex; flex-direction:column; align-items:center}
.stat-value{display:flex; align-items:baseline; gap:2px}
.hero-stats .num,.hero-stats .suffix{
  font-family:var(--ff-display); font-size:clamp(2rem,4vw,2.9rem); font-weight:600; color:#fff; line-height:1;
}
.hero-stats .suffix{color:var(--blue)}
.hero-stats small{margin-top:12px; font-size:13px; color:var(--muted); letter-spacing:.02em}

/* ---------- marquee ---------- */
.marquee{
  position:relative; z-index:2; overflow:hidden; border-block:1px solid var(--line);
  background:rgba(13,29,51,.55); padding:20px 0;
}
.marquee-track{
  display:flex; align-items:center; width:max-content;
  animation:slide 34s linear infinite; will-change:transform;
}
/* Two identical halves, each with its own trailing gap, so translating by
   exactly -50% lands on the start of the second half — no seam, no gap. */
.marquee-group{display:flex; align-items:center; gap:34px; padding-right:34px}
.marquee-track span{
  font-family:var(--ff-display); font-size:clamp(1rem,2vw,1.35rem); font-weight:500;
  letter-spacing:-.01em; color:var(--silver); white-space:nowrap;
}
.marquee-track i{color:var(--blue); font-style:normal; font-size:.7rem}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- statement ---------- */
.statement{padding:clamp(72px,9vw,108px) 0}
.statement-text{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.5rem); line-height:1.32; letter-spacing:-.025em;
  max-width:920px; margin-inline:auto; text-align:center;
}
.statement-text em{color:var(--blue-soft); font-style:italic}

/* ---------- section shell ---------- */
.section{padding:clamp(74px,8.5vw,106px) 0; position:relative; z-index:2}
.section-alt{background:linear-gradient(180deg, rgba(13,29,51,.0), rgba(13,29,51,.75) 18%, rgba(13,29,51,.75) 82%, rgba(13,29,51,0))}

/* ---------- light sections (the white contrast band) ---------- */
.section-light{
  --text:#0A1628;
  --muted:#5A6779;
  --silver:#41506A;
  --line:rgba(10,22,40,.12);
  --line-strong:rgba(10,22,40,.20);
  --stroke:rgba(10,22,40,.38);
  --card:var(--paper-2);
  --card-flat:var(--paper-2);
  background:var(--paper);
  color:var(--text);
}
#work.section-light{padding-bottom:clamp(56px,6vw,72px)}
#process.section-light{padding-top:clamp(56px,6vw,72px)}
.section-light .work-card,
.section-light .service{box-shadow:0 2px 4px rgba(10,22,40,.04), 0 14px 40px -28px rgba(10,22,40,.35)}
.section-light .work-note a{color:var(--blue)}
.section-light .btn-ghost{border-color:var(--line-strong)}
.section-light .btn-ghost:hover{background:rgba(26,109,255,.07)}

.section-num{
  display:inline-block; font-family:var(--ff-display); font-size:12px; letter-spacing:.22em;
  color:var(--blue-soft); margin-bottom:16px;
}
.section-head{max-width:620px; margin-bottom:clamp(44px,6vw,70px)}
.section-head h2{font-size:clamp(2rem,4.4vw,3.1rem); margin-bottom:16px}
.section-head p{color:var(--muted); font-size:1.05rem; font-weight:300}

/* ---------- services ---------- */
.services{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px}
.service{
  position:relative; padding:38px 32px 34px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  overflow:hidden;
}
.service::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .4s var(--ease);
  background:radial-gradient(600px circle at 50% 0%, rgba(26,109,255,.14), transparent 60%);
}
.service:hover{transform:translateY(-6px); border-color:rgba(26,109,255,.45); box-shadow:0 24px 60px -30px rgba(26,109,255,.6)}
.service:hover::before{opacity:1}
.service-num{
  font-family:var(--ff-display); font-size:12px; letter-spacing:.2em; color:var(--blue-soft);
  display:block; margin-bottom:20px;
}
.service h3{font-size:1.42rem; margin-bottom:14px}
.service > p{color:var(--muted); font-size:.98rem; font-weight:300; margin-bottom:24px}
.service ul li{
  position:relative; padding-left:20px; font-size:.93rem; color:var(--silver);
  padding-block:7px; border-top:1px solid var(--line);
}
.service ul li:first-child{border-top:0}
.service ul li::before{
  content:''; position:absolute; left:2px; top:calc(50% - 2px);
  width:5px; height:5px; border-radius:50%; background:var(--blue);
}

.included{
  margin-top:26px; padding:30px 32px; border:1px dashed var(--line-strong); border-radius:var(--radius);
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 42px;
}
.included h4{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--blue-soft);
  font-weight:500;
}
.included ul{display:flex; flex-wrap:wrap; gap:12px 34px}
.included ul li{font-size:.92rem; color:var(--silver); position:relative; padding-left:20px}
.included ul li::before{content:'✓'; position:absolute; left:0; color:var(--blue); font-size:.85rem}

/* ---------- work ---------- */
.work-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:24px; align-items:start}
.work-card{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--card-flat); transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.work-card:hover{transform:translateY(-6px); border-color:rgba(26,109,255,.45)}
.work-cover{
  position:relative; aspect-ratio:16/10; display:grid; place-items:center; overflow:hidden;
  background:var(--ink-2);
}
/* screenshots keep their full width; the bottom is what gets cropped, so the
   client's logo and navigation always stay in frame */
.work-cover picture{display:contents}
.work-cover img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .6s var(--ease);
}
.work-card:hover .work-cover img{transform:scale(1.03)}
.work-cover::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(10,22,40,.55));
}
.work-mark{
  position:relative; z-index:2; font-family:var(--ff-display); font-size:3.4rem; font-weight:700;
  color:rgba(255,255,255,.16); letter-spacing:-.04em; transition:transform .5s var(--ease), color .5s var(--ease);
}
.work-card:hover .work-mark{transform:scale(1.12); color:rgba(255,255,255,.3)}
.cover-1{background:linear-gradient(135deg,#10397E,#1A6DFF)}
.cover-2{background:linear-gradient(135deg,#0D1D33,#10397E 60%,#4E8CFF)}
.cover-3{background:linear-gradient(135deg,#1A6DFF,#0A1628 75%)}
.cover-4{background:linear-gradient(135deg,#112441,#4E8CFF 120%)}
.work-meta{padding:24px 26px 26px}
.work-meta h3{font-size:1.2rem; margin-bottom:6px}
.work-role{
  font-family:var(--ff-display); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-soft); margin-bottom:12px !important;
}
.work-meta > p{color:var(--muted); font-size:.92rem; font-weight:300; margin-bottom:16px}
.work-visit{
  display:inline-block; margin-top:16px; font-family:var(--ff-display); font-size:13.5px;
  color:var(--blue); transition:transform .3s var(--ease);
}
.work-card:hover .work-visit{transform:translateX(4px)}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.tags span{
  font-size:11px; letter-spacing:.06em; padding:5px 12px; border-radius:100px;
  border:1px solid var(--line-strong); color:var(--silver);
}
.work-note{margin-top:36px; color:var(--muted); font-size:1rem}
.work-note a{color:var(--blue-soft); border-bottom:1px solid transparent; transition:border-color .3s}
.work-note a:hover{border-bottom-color:var(--blue-soft)}

/* ---------- process ---------- */
.process{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0}
.process li{padding:34px 28px 34px 0; border-top:1px solid var(--line-strong); position:relative}
.process li + li{padding-left:28px; border-left:1px solid var(--line)}
.process .step{
  font-family:var(--ff-display); font-size:2.6rem; font-weight:700; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1px var(--stroke); display:block; margin-bottom:18px;
  transition:color .4s var(--ease), -webkit-text-stroke-color .4s var(--ease);
}
.process li:hover .step{color:var(--blue); -webkit-text-stroke-color:transparent}
.process h3{font-size:1.15rem; margin-bottom:10px}
.process p{color:var(--muted); font-size:.94rem; font-weight:300}

/* ---------- about ---------- */
.about{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(36px,6vw,80px); align-items:center}
.about-photo{position:relative; isolation:isolate}
.about-photo picture{display:contents}
.about-photo img{position:relative; z-index:1;
  border-radius:var(--radius); width:100%; height:auto;
  filter:saturate(.92) contrast(1.04);
}
.about-photo::after{
  content:''; position:absolute; inset:0; border-radius:var(--radius); pointer-events:none; z-index:2;
  background:linear-gradient(180deg, rgba(26,109,255,.10), rgba(10,22,40,.42));
  mix-blend-mode:multiply;
}
.photo-frame{
  position:absolute; top:22px; left:22px; right:-22px; bottom:-22px;
  border:1px solid rgba(26,109,255,.55); border-radius:var(--radius); z-index:0;
}
.photo-badge{
  position:absolute; left:-16px; bottom:22px; z-index:3;
  display:flex; align-items:center; gap:10px; padding:10px 18px 10px 10px;
  background:rgba(10,22,40,.92); border:1px solid var(--line-strong); border-radius:100px;
  backdrop-filter:blur(10px);
}
.photo-badge img{width:34px; height:34px; border-radius:50%}
.photo-badge span{font-family:var(--ff-display); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--silver)}

.about-copy h2{font-size:clamp(1.9rem,4vw,2.9rem); margin-bottom:22px}
.about-copy .lead{font-size:1.14rem; color:var(--text); margin-bottom:18px; font-weight:300}
.about-copy > p{color:var(--muted); font-weight:300; margin-bottom:16px; font-size:1rem}
.about-copy blockquote{
  margin:30px 0; padding:22px 26px; border-left:2px solid var(--blue);
  background:rgba(26,109,255,.07); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-family:var(--ff-display); font-size:1.12rem; line-height:1.45; color:var(--text);
}
.about-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}

/* ---------- cta band ---------- */
.cta-band{position:relative; padding:clamp(72px,9vw,110px) 0; overflow:hidden}
.cta-band::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(700px circle at 50% 120%, rgba(26,109,255,.30), transparent 65%);
}
.cta-inner{position:relative; z-index:2; text-align:center; max-width:720px}
.cta-inner{margin-inline:auto}
.cta-inner h2{font-size:clamp(1.8rem,4vw,2.8rem); margin-bottom:18px}
.cta-inner p{color:var(--muted); font-weight:300; margin-bottom:32px}

/* ---------- contact ---------- */
.contact{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,5vw,64px)}
.info-row{
  display:flex; flex-direction:column; gap:4px; padding:22px 0; border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--ease);
}
a.info-row:hover{padding-left:8px}
.info-row:first-child{border-top:1px solid var(--line)}
.info-label{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--blue-soft)}
.info-value{font-family:var(--ff-display); font-size:1.05rem; color:var(--text)}
.socials{display:flex; gap:10px; flex-wrap:wrap; margin-top:28px}
.socials a{
  font-size:13px; padding:9px 18px; border:1px solid var(--line-strong); border-radius:100px;
  color:var(--silver); transition:all .3s var(--ease);
}
.socials a:hover{border-color:var(--blue); color:#fff; background:rgba(26,109,255,.1)}

.contact-form{
  padding:clamp(26px,3.4vw,38px); border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card);
}
/* "Book a call" banner — only visible once a call button has been clicked */
.call-note{
  display:none; align-items:center; gap:10px;
  margin:0 0 24px; padding:14px 18px 14px 16px;
  border-left:3px solid var(--blue); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:rgba(26,109,255,.10); color:var(--text);
  font-family:var(--ff-display); font-size:.95rem; line-height:1.45;
}
.contact-form.call-mode .call-note{display:flex; animation:noteIn .45s var(--ease) both}
@keyframes noteIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

.field label .opt{
  font-style:normal; font-size:11px; letter-spacing:.08em; color:var(--muted); text-transform:none;
}
.contact-form.call-mode .field label .opt{display:none}
.contact-form.call-mode #phone{border-color:rgba(26,109,255,.55)}

.field{margin-bottom:20px}
.field label{
  display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--silver); margin-bottom:9px; font-family:var(--ff-display);
}
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; font-family:var(--ff-body); font-size:15px; color:var(--text);
  background:rgba(10,22,40,.65); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  transition:border-color .28s var(--ease), background .28s var(--ease); resize:vertical;
}
.field select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B5B9BE' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.field option{background:#0D1D33; color:var(--text)}
.field input::placeholder,.field textarea::placeholder{color:#7C8AA3}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--blue); background:rgba(26,109,255,.06);
}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#FF6B6B}
.error{display:block; color:#FF8585; font-size:12.5px; margin-top:7px; min-height:0}
.form-note{margin-top:16px; font-size:14px; color:var(--muted); text-align:center}
.form-note.success{
  color:#4ED88C; font-family:var(--ff-display); font-weight:500; font-size:16px;
  letter-spacing:.01em; animation:noteIn .4s var(--ease) both;
}
.form-note.info{color:var(--muted)}
.form-note.fail{color:#FF8585}
.form-privacy{margin-top:18px; font-size:12.5px; color:var(--muted); text-align:center; line-height:1.5}
.form-privacy a{color:var(--blue-soft); border-bottom:1px solid transparent; transition:border-color .3s}
.form-privacy a:hover{border-bottom-color:var(--blue-soft)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line); padding:clamp(56px,7vw,80px) 0 30px; position:relative; z-index:2; background:rgba(10,22,40,.6)}
.footer-inner{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:40px}
.footer-brand img{height:50px; width:auto; margin-bottom:20px}
.footer-brand p{color:var(--muted); font-size:.93rem; font-weight:300; max-width:280px}
.footer-nav,.footer-contact{display:flex; flex-direction:column; gap:11px}
.site-footer h5{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--blue-soft);
  margin-bottom:6px; font-weight:500;
}
.footer-nav a,.footer-contact > a{color:var(--muted); font-size:.93rem; transition:color .25s, transform .25s; width:fit-content}
.footer-nav a:hover,.footer-contact > a:hover{color:var(--text); transform:translateX(3px)}
.footer-contact .socials{margin-top:14px}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-top:52px; padding-top:24px; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted);
}
.footer-bottom a:hover{color:var(--text)}
.footer-legal{display:flex; gap:8px; flex-wrap:wrap}

/* ---------- legal pages (Impressum / Datenschutz) ---------- */
.legal-page .site-header{position:sticky}
.legal{padding:clamp(110px,13vw,150px) 0 clamp(60px,8vw,90px); position:relative; z-index:2}
.legal-inner{max-width:760px}
.legal h1{font-size:clamp(2.1rem,4.6vw,3rem); margin-bottom:14px}
.legal-lead{color:var(--muted); font-size:1.05rem; font-weight:300; margin-bottom:44px}
.legal section{padding-top:34px; margin-top:34px; border-top:1px solid var(--line)}
.legal h2{font-size:1.22rem; margin-bottom:14px; color:var(--text)}
.legal p{color:var(--muted); font-weight:300; font-size:.97rem; margin-bottom:14px}
.legal p:last-child{margin-bottom:0}
.legal a{color:var(--blue-soft); border-bottom:1px solid transparent; transition:border-color .3s}
.legal a:hover{border-bottom-color:var(--blue-soft)}
.legal mark{
  background:rgba(255,193,7,.14); color:#FFD466; padding:1px 7px; border-radius:5px;
  font-weight:500; border:1px dashed rgba(255,193,7,.4);
}
.legal-note{
  font-size:.88rem; color:var(--silver); padding:12px 16px; border-left:2px solid var(--blue);
  background:rgba(26,109,255,.07); border-radius:0 8px 8px 0;
}
.legal-updated{margin-top:44px; padding-top:24px; border-top:1px solid var(--line); font-size:.9rem}
.legal-page .footer-bottom{margin-top:0}

/* ---------- reveal animation ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}
.reveal[data-delay="4"]{transition-delay:.36s}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .about{grid-template-columns:1fr; gap:44px}
  .about-photo{max-width:420px}
  .contact{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr; gap:34px}
}

@media (max-width:820px){
  .menu-toggle{display:flex}
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,84vw);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:6px;
    background:rgba(10,22,40,.97); backdrop-filter:blur(20px);
    padding:40px 34px; border-left:1px solid var(--line);
    transform:translateX(102%); transition:transform .45s var(--ease); z-index:110;
  }
  .nav.open{transform:none}
  .nav > a:not(.btn){font-family:var(--ff-display); font-size:1.5rem; color:var(--text); padding:12px 0}
  .nav .lang{margin-top:22px; font-size:15px; padding:8px 16px}
  .nav-cta{margin-top:18px; width:100%}
  body.nav-open{overflow:hidden}

  .hero{padding-top:150px}
  .process li,.process li + li{border-left:0; padding-left:0; padding-right:0}
  .included{flex-direction:column; align-items:flex-start; gap:14px}
}

@media (max-width:560px){
  body{font-size:16px}
  .hero-stats{gap:26px 40px; margin-top:56px}
  .footer-inner{grid-template-columns:1fr}
  .btn-lg{padding:15px 26px}
  .hero-actions .btn{width:100%}
  .about-cta .btn{width:100%}
}

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


/* ---------- print ---------- */
@media print{
  .site-header,.menu-toggle,.nav,.nav-backdrop,.marquee,.grain,.hero-glow,
  .cta-band,.contact-form,.btn{display:none !important}
  body{background:#fff; color:#000; font-size:11pt}
  .section,.hero,.statement{padding:16pt 0}
  .section-light{background:#fff}
  h1,h2,h3,h4,h5{color:#000}
  p,li,.legal p{color:#222}
  a{color:#000; text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9pt; color:#555}
  .reveal{opacity:1 !important; transform:none !important}
  .work-cover,.about-photo::after{display:none}
  section,article,.service,.work-card{break-inside:avoid}
}