:root{
  --bg: #121212;
  --bg-panel: #191919;
  --bg-panel-2: #1f1f21;
  --ink: #EAEAEA;
  --ink-dim: #B0B0B0;
  --blue: #00A8E8;
  --red: #D92332;
  --grad: linear-gradient(90deg, var(--blue), var(--red));
  --line: rgba(234,234,234,0.12);
  --line-strong: rgba(234,234,234,0.22);
  /* Scales the side margins up on wide monitors instead of pinning
     content to a flat 32px inset regardless of screen width — that flat
     value is what made everything hug the left edge on a 27"+ display. */
  --gutter: clamp(32px, 6vw, 120px);
  --display: 'Archivo', sans-serif;
  --body: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; background:var(--bg); scroll-snap-type:y proximity; }

/* Elementor/Hello Elementor ship their own body/link defaults as
   explicit rules on the same bare tag selectors we use here — a
   specificity tie that Elementor was winning on load order, which is
   why sections without their own explicit background (like the footer)
   were showing through to a plain white background, and why plain links
   were picking up Elementor's default accent color instead of ours.
   !important on just these two foundational rules settles it without
   needing !important scattered through the rest of the file. */
body{
  background:var(--bg) !important;
  color:var(--ink) !important;
  font-family:var(--body);
  overflow-x:hidden;
}

::selection{ background:var(--blue); color:#0a0a0c; }

a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }

/* Elementor/Hello Elementor ship their own default heading color as an
   explicit rule, which beats plain inheritance from body — without this,
   any h1–h6 on the page silently goes dark instead of picking up our
   brand off-white. */
h1,h2,h3,h4,h5,h6{ color:var(--ink); }

.wrap{ max-width:1180px; margin:0 auto; padding:0 var(--gutter); }

.grad-text{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad-bar{ background:var(--grad); }

/* ---------- preshow loader ---------- */
#preshow{
  position:fixed; inset:0; background:#000; z-index:999;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .9s ease;
}
#preshow .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 40px 10px rgba(0,168,232,.45);
}
#preshow.done{ opacity:0; pointer-events:none; }

/* ---------- nav ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:34px var(--gutter);
  min-height:104px;
  background:linear-gradient(180deg, rgba(18,18,18,.88), transparent);
}
.brand{ display:flex; align-items:center; }
.brand-logo{
  height:clamp(38px, 3vw, 52px);
  width:auto;
}
nav.links{ display:flex; align-items:center; gap:clamp(28px, 2.4vw, 46px); }
nav.links a{
  font-size:clamp(15px, 0.95vw, 18px); color:var(--ink); position:relative; padding-bottom:2px;
}
nav.links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--blue); transition:width .3s ease;
}
nav.links a:hover::after{ width:100%; }

/* Hamburger toggle — hidden on desktop, shown only inside the mobile
   breakpoint below. */
.header-actions{ display:flex; align-items:center; gap:clamp(20px, 1.8vw, 34px); }

.search-toggle{
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; background:none !important; border:none !important;
  outline:none !important; box-shadow:none !important; -webkit-appearance:none; appearance:none;
  cursor:pointer; color:var(--ink); padding:0; transition:color .2s ease;
}
.search-toggle svg{ width:20px; height:20px; }
.search-toggle:hover{ color:var(--blue); }
.search-toggle:focus-visible{ outline:2px solid var(--blue) !important; outline-offset:3px; }

.search-overlay{
  position:fixed; inset:0; z-index:190;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease;
}
.search-overlay.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.search-close{
  position:absolute; top:34px; right:40px; background:none !important; border:none !important;
  outline:none !important; box-shadow:none !important; -webkit-appearance:none; appearance:none;
  color:var(--ink); font-size:32px; line-height:1; cursor:pointer; padding:0;
  transition:color .2s ease;
}
.search-close:hover{ color:var(--blue); }
.search-close:focus-visible{ outline:2px solid var(--blue) !important; outline-offset:3px; }
.search-form{
  width:min(700px, 88vw); display:flex; align-items:center; gap:18px;
  border-bottom:2px solid var(--line-strong); padding-bottom:18px;
  transition:border-color .2s ease;
}
.search-form:focus-within{ border-color:var(--blue); }
.search-form input{
  flex:1; min-width:0; background:transparent !important; border:none !important;
  outline:none !important; box-shadow:none !important; -webkit-appearance:none; appearance:none;
  border-radius:0; color:var(--ink); font-family:var(--display); font-weight:700;
  font-size:clamp(24px, 4vw, 40px);
}
.search-form input::placeholder{ color:var(--ink-dim); }
.search-submit{
  flex-shrink:0; background:none !important; border:none !important; outline:none !important;
  box-shadow:none !important; -webkit-appearance:none; appearance:none;
  color:var(--blue); cursor:pointer;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  transition:color .2s ease;
}
.search-submit:hover{ color:var(--red); }
.search-submit:focus-visible{ outline:2px solid var(--blue) !important; outline-offset:3px; }
.search-submit svg{ width:26px; height:26px; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:28px; height:22px; background:none; border:none; cursor:pointer;
  padding:0; position:relative; z-index:200;
}
.nav-toggle span{
  display:block; height:2px; width:100%; background:var(--ink);
  transition:transform .3s ease, opacity .3s ease;
}
header.menu-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
header.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
header.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 860px){
  header{ padding:20px 24px; min-height:auto; }
  .brand-logo{ height:34px; }
  .nav-toggle{ display:flex; }
  nav.links{
    position:fixed; inset:0; z-index:150;
    flex-direction:column; justify-content:center; align-items:center; gap:38px;
    background:var(--bg);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s ease;
  }
  nav.links.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
  nav.links a{ font-size:22px; }
  .search-close{ top:22px; right:24px; font-size:28px; }
}

/* ---------- hero ---------- */
#hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden;
  padding-top:150px; /* keeps content clear of the fixed header even in worst-case wrapping */
  background:#0e0e0e;
  scroll-snap-align:start;
}

/* Layer 1 — background. Currently a gradient; a <video> can be dropped in
   here later (see .hero-bg in front-page.php) without touching anything
   above it. */
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background: linear-gradient(180deg, #161616 0%, #0e0e0e 60%, #0e0e0e 100%);
  overflow:hidden;
}
.hero-bg video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s ease;
}
.hero-bg video.is-active{ opacity:1; }
/* Slightly oversized so the enforced pan never reveals an edge. Every
   clip pans left-to-right at the same speed regardless of what the
   original footage was doing — that shared direction is what makes a
   randomized mix of unrelated clips still read as one sequence. */
.hero-bg video.pans{ animation-name: heroPan; animation-timing-function: linear; animation-fill-mode: forwards; }
.hero-bg video.kenburns{ animation-name: heroKenBurns; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes heroPan{
  from{ transform: scale(1.12) translateX(-3%); }
  to{ transform: scale(1.12) translateX(3%); }
}
@keyframes heroKenBurns{
  from{ transform: scale(1.0); }
  to{ transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce){
  .hero-bg video.pans, .hero-bg video.kenburns{ animation:none; transform:none; }
}
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 96px);
  pointer-events:none;
}

/* Hero exit — dims and zooms slightly as the user scrolls into the next
   section, driven by a lightweight IntersectionObserver threshold (no
   scroll-position listener, no scroll-jacking library). */
#hero{ transition: opacity 1.1s ease; }
#hero.is-leaving .hero-bg,
#hero.is-leaving .hero-spot{
  opacity:.45; transform:scale(1.04); transition:opacity 1.1s ease, transform 1.1s ease;
}
@media (prefers-reduced-motion: reduce){
  #hero.is-leaving .hero-bg, #hero.is-leaving .hero-spot{ transform:none; }
}

.hero-audio-toggle{
  position:absolute; z-index:6; bottom:34px; right:var(--gutter);
  display:flex; align-items:flex-end; gap:3px;
  width:30px; height:22px; background:none !important; border:none !important;
  outline:none !important; box-shadow:none !important; -webkit-appearance:none; appearance:none;
  cursor:pointer; padding:0;
}
.hero-audio-toggle .bar{
  width:5px; background:var(--ink-dim); border-radius:1px;
  transition:background .2s ease, height .2s ease;
}
.hero-audio-toggle .bar:nth-child(1){ height:8px; }
.hero-audio-toggle .bar:nth-child(2){ height:16px; }
.hero-audio-toggle .bar:nth-child(3){ height:11px; }
.hero-audio-toggle:hover .bar{ background:var(--ink); }
.hero-audio-toggle:focus-visible{ outline:2px solid var(--blue) !important; outline-offset:4px; }
.hero-audio-toggle[aria-pressed="true"] .bar{ background:var(--blue); animation:heroBarLevel 900ms ease-in-out infinite; }
.hero-audio-toggle[aria-pressed="true"] .bar:nth-child(1){ animation-delay:-.6s; }
.hero-audio-toggle[aria-pressed="true"] .bar:nth-child(2){ animation-delay:-.2s; }
.hero-audio-toggle[aria-pressed="true"] .bar:nth-child(3){ animation-delay:-.9s; }
@keyframes heroBarLevel{
  0%, 100%{ height:6px; }
  50%{ height:18px; }
}
@media (prefers-reduced-motion: reduce){
  .hero-audio-toggle[aria-pressed="true"] .bar{ animation:none; height:14px; }
}

/* Layer 2 — cursor-reactive glow. Blended on top of whatever's in
   .hero-bg (gradient today, footage later) rather than replacing it. */
.hero-spot{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode:screen;
  background:
    radial-gradient(620px circle at var(--mx,50%) var(--my,40%), rgba(0,168,232,.30), transparent 55%),
    radial-gradient(620px circle at var(--mx,50%) var(--my,40%), rgba(217,35,50,.20) 0, transparent 70%);
}

/* Layer 3 — legibility scrim. This is what keeps the text readable no
   matter what's playing behind it, footage included — weighted toward
   the bottom-left where the text actually sits, not a flat tint. */
.hero-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(8,8,9,.92) 0%, rgba(8,8,9,.6) 42%, rgba(8,8,9,.08) 72%),
    linear-gradient(100deg, rgba(8,8,9,.55) 0%, rgba(8,8,9,.18) 55%, transparent 80%);
}

.hero-inner{ position:relative; z-index:3; padding:0 var(--gutter) 88px; }
.hero-kicker{
  font-family:var(--mono); font-size:14px; color:var(--blue);
  margin-bottom:22px; display:flex; align-items:center; gap:10px;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.hero-kicker .bar{ width:26px; height:1px; }
h1.hero-title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(44px, min(8.5vw, 12vh), 108px); line-height:0.96; letter-spacing:-0.01em;
  max-width:920px;
  color:var(--ink) !important; /* explicit — without this it silently inherits Elementor's default heading color instead of the brand off-white */
  text-shadow: 0 4px 28px rgba(0,0,0,.55);
}
.hero-sub{
  max-width:480px; margin-top:26px; font-size:18px; line-height:1.6;
  color:var(--ink-dim); font-weight:400;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.hero-row{ display:flex; align-items:center; gap:30px; margin-top:40px; }
.cta{
  position:relative; display:inline-flex; align-items:center; gap:12px;
  padding:15px 26px; background:var(--grad); color:#fff;
  font-family:var(--body); font-weight:600; font-size:15px;
  border-radius:2px; transition: transform .25s ease;
}
.cta:hover{ transform: translateY(-2px); }
.cta .cta-glow{
  position:absolute; inset:-1px; border-radius:2px;
  box-shadow:0 0 0 0 rgba(0,168,232,0); transition:box-shadow .3s ease;
}
.cta:hover .cta-glow{ box-shadow:0 0 30px 4px rgba(217,35,50,.30); }
.scroll-cue{
  font-family:var(--mono); font-size:11px; color:var(--ink-dim);
  display:flex; align-items:center; gap:10px;
}
.scroll-cue .ln{ width:1px; height:34px; background:var(--line-strong); position:relative; overflow:hidden; }
.scroll-cue .ln::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--blue); animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

/* Short-but-wide laptop screens (the common case: a 13–15" display at
   browser-chrome-reduced height) — without this, the 108px max title
   plus kicker/sub/button can add up to more than the viewport, and since
   the block is bottom-anchored, the overflow pushes the kicker text up
   behind the fixed header instead of the section just being taller. */
@media (max-height: 760px){
  h1.hero-title{ font-size:clamp(40px, min(7.5vw, 9vh), 82px); }
  .hero-sub{ margin-top:16px; font-size:15.5px; }
  .hero-row{ margin-top:24px; }
  #hero{ padding-top:120px; }
}

/* ---------- section shell ---------- */
.act{ position:relative; }
.act-head{ padding:120px var(--gutter) 56px; }
.act-eyebrow{
  font-family:var(--mono); font-size:14px; color:var(--blue);
  margin-bottom:16px; display:flex; align-items:center; gap:10px;
}
.act-eyebrow .bar{ width:26px; height:1px; }
.act-title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(34px, 4.6vw, 58px); line-height:1.02; max-width:640px;
}
.act-desc{ margin-top:18px; max-width:460px; color:var(--ink-dim); font-size:16.5px; line-height:1.65; }

/* ---------- services: horizontal rig walk-through ---------- */
#services{ background:var(--bg-panel); scroll-snap-align:start; }
.rig-pin{ height:100svh; overflow:hidden; position:relative; }
.rig-track{
  display:flex; height:100%; width:max-content;
  will-change:transform;
}
.rig-panel{
  width:100vw; height:100%; flex-shrink:0;
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  padding:0 var(--gutter); gap:40px; border-right:1px solid var(--line);
}
.rig-fig{
  height:60%; display:flex; align-items:center; justify-content:center;
  background:var(--bg-panel-2); border:1px solid var(--line);
}
.rig-fig svg{ width:46%; opacity:.95; }
.rig-index{ font-family:var(--mono); font-size:14px; color:var(--ink-dim); margin-bottom:18px; }
.rig-name{ font-family:var(--display); font-weight:800; font-size:clamp(28px,3.6vw,46px); }
.rig-copy{ margin-top:16px; max-width:400px; color:var(--ink-dim); font-size:16px; line-height:1.65; }
.rig-link{
  margin-top:26px; display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; position:relative; padding-bottom:2px; color:var(--blue);
}
.rig-link::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--grad);
}
.rig-hint{
  position:absolute; bottom:26px; left:var(--gutter); font-family:var(--mono);
  font-size:11px; color:var(--ink-dim); display:flex; align-items:center; gap:10px; z-index:5;
}
.rig-hint .track{ width:180px; height:2px; background:var(--line-strong); position:relative; }
.rig-hint .fill{ position:absolute; top:0; left:0; height:100%; width:0%; background:var(--grad); }

@media (max-width: 860px){
  .rig-pin{ height:auto; }
  .rig-track{
    display:flex; height:auto; width:auto; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .rig-panel{
    width:88vw; height:82svh; scroll-snap-align:center; grid-template-columns:1fr;
    grid-template-rows:auto 1fr; padding:48px 24px;
  }
  .rig-fig{ height:34%; order:2; }
  .rig-hint{ display:none; }
}

/* ---------- portfolio: snap reel ---------- */
#portfolio{ background:var(--bg); }
.reel-panel{
  min-height:100svh; scroll-snap-align:start; display:grid; grid-template-columns:1.1fr 1fr;
  border-top:1px solid var(--line); align-items:stretch;
}
.reel-panel:nth-child(even){ direction:rtl; }
.reel-panel:nth-child(even) > *{ direction:ltr; }
.reel-media{
  position:relative; overflow:hidden; min-height:340px;
}
.reel-media .tag{
  position:absolute; top:24px; left:24px; font-family:var(--mono); font-size:11px;
  color:var(--ink); background:rgba(0,0,0,.4); padding:6px 10px; border:1px solid var(--line-strong);
}
.reel-text{ display:flex; flex-direction:column; justify-content:center; padding:64px; }
.reel-cat{ font-family:var(--mono); font-size:14px; color:var(--blue); margin-bottom:14px; }
.reel-title{ font-family:var(--display); font-weight:800; font-size:clamp(30px,3.8vw,48px); }
.reel-desc{ margin-top:16px; color:var(--ink-dim); font-size:16px; line-height:1.65; max-width:380px; }
.reel-spec{ display:flex; gap:26px; margin-top:30px; }
.reel-spec div{ font-family:var(--mono); font-size:11px; color:var(--ink-dim); }
.reel-spec strong{ display:block; font-family:var(--display); font-size:20px; color:var(--blue); font-weight:700; }

@media (max-width: 860px){
  .reel-panel, .reel-panel:nth-child(even){ grid-template-columns:1fr; direction:ltr; }
  .reel-media{ min-height:240px; }
  .reel-text{ padding:40px 24px; }
}

/* ---------- team ---------- */
#team{ background:var(--bg-panel); }
.duo{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  margin:40px var(--gutter) 0;
}
.duo-card{ background:var(--bg-panel); padding:56px 44px; }
.duo-frame{
  aspect-ratio:4/5; background:
    linear-gradient(160deg, #201c1e, #101012 70%);
  border:1px solid var(--line); position:relative; overflow:hidden;
}
.duo-frame::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(220px circle at 70% 20%, rgba(217,35,50,.16), transparent 60%);
}
.duo-name{ font-family:var(--display); font-weight:800; font-size:24px; margin-top:22px; }
.duo-loc{ font-family:var(--mono); font-size:12px; color:var(--ink-dim); margin-top:6px; }
.duo-quote{
  grid-column:1 / -1; padding:56px 44px 64px; font-family:var(--display); font-weight:600;
  font-size:clamp(22px,2.8vw,32px); line-height:1.35; max-width:820px; color:var(--ink);
}
@media (max-width: 860px){ .duo{ grid-template-columns:1fr; } }

/* ---------- closer ---------- */
#closer{
  padding:140px var(--gutter) 0; text-align:center; background:
    radial-gradient(700px circle at 50% 0%, rgba(0,168,232,.10), transparent 60%), var(--bg);
}
.closer-title{
  font-family:var(--display); font-weight:800; font-size:clamp(34px,6vw,68px);
  max-width:760px; margin:0 auto; color:var(--ink);
}
.closer-cta{ margin-top:34px; display:flex; justify-content:center; }
/* ---------- standard inner pages (Kontakt, Impressum, etc.) ---------- */
.page-shell{ background:var(--bg); min-height:60vh; }

/* Deliberately its own, lighter-weight block — .act-head/.act-title are
   tuned for cinematic breaks between big visual sections on the
   homepage; reused as-is here they just left a large gap of dead space
   above a wall of legal text. This is sized for a document, not a
   "scene." */
.page-head{ padding:132px var(--gutter) 28px; }
.page-title{
  font-family:var(--display); font-weight:700; color:var(--ink);
  font-size:clamp(28px, 3.4vw, 42px); line-height:1.15; max-width:640px;
}
.search-summary{
  font-family:var(--mono); font-size:13px; color:var(--ink-dim); margin-top:14px;
}
.search-summary span{ color:var(--blue); }

.search-results{ display:flex; flex-direction:column; }
.search-result{
  display:block; padding:26px 0; border-bottom:1px solid var(--line);
  transition:opacity .2s ease;
}
.search-result:hover{ opacity:.8; }
.search-result-type{
  font-family:var(--mono); font-size:11px; color:var(--blue);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;
}
.search-result-title{
  font-family:var(--display); font-weight:700; font-size:22px; color:var(--ink);
}
.search-result-excerpt{ margin-top:8px; color:var(--ink-dim); font-size:15px; line-height:1.6; }

.pagination{ margin-top:28px; display:flex; gap:10px; flex-wrap:wrap; font-family:var(--mono); font-size:13px; }
.pagination .page-numbers{
  color:var(--ink-dim); padding:7px 12px; border:1px solid var(--line);
  border-radius:2px; transition:border-color .2s ease, color .2s ease;
}
.pagination .page-numbers.current{ color:var(--ink); border-color:var(--blue); }
a.page-numbers:hover{ color:var(--ink) !important; border-color:var(--blue); }

.page-content{
  padding:0 var(--gutter) 120px; max-width:680px; margin:0;
  color:var(--ink-dim); font-size:16px; line-height:1.75;
}
/* The intro paragraph was losing to Elementor's own widget-level text
   color, same cascade issue as the hero title and footer earlier — our
   wrapper's color was correct, but nothing forced it down onto the
   actual <p> tags inside it. */
.page-content p, .page-content li, .page-content span{ color:var(--ink-dim) !important; }
.page-content h1, .page-content h2, .page-content h3, .page-content h4{
  font-family:var(--display); font-weight:700; color:var(--ink);
  margin:1.6em 0 .6em; line-height:1.2;
}
.page-content h1:first-child, .page-content h2:first-child, .page-content h3:first-child{ margin-top:0; }
.page-content p{ margin:0 0 1.3em; }
.page-content a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.page-content a:hover{ color:var(--red); }
.page-content ul, .page-content ol{ margin:0 0 1.3em 1.3em; }
.page-content li{ margin-bottom:.4em; }
.page-content img{ max-width:100%; height:auto; border-radius:2px; margin:1.4em 0; }
.page-content hr{ border:none; border-top:1px solid var(--line); margin:2.4em 0; }
.page-content strong{ color:var(--ink); }
.page-content blockquote{
  border-left:2px solid var(--blue); padding-left:20px; margin:1.6em 0;
  color:var(--ink); font-style:normal;
}

/* Form fields — targets plain HTML inputs regardless of which plugin
   renders them (WPZOOM Forms, a block, or a shortcode), since none of
   those wrap fields in exotic markup. If WPZOOM Forms turns out to add
   its own wrapper classes that fight this, send a screenshot once it's
   live and these selectors can be tightened to match. */
.page-content input[type="text"],
.page-content input[type="email"],
.page-content input[type="tel"],
.page-content input[type="number"],
.page-content input[type="url"],
.page-content textarea,
.page-content select{
  width:100%; background:var(--bg-panel-2); border:1px solid var(--line-strong);
  color:var(--ink); padding:13px 16px; font-family:var(--body); font-size:15px;
  border-radius:2px; margin-bottom:16px; transition:border-color .2s ease;
}
.page-content input::placeholder, .page-content textarea::placeholder{ color:var(--ink-dim); opacity:.7; }
.page-content input:focus, .page-content textarea:focus, .page-content select:focus{
  outline:none; border-color:var(--blue);
}
.page-content textarea{ min-height:140px; resize:vertical; }
.page-content label{
  display:block; font-family:var(--mono); font-size:12px; color:var(--ink-dim);
  margin-bottom:8px; letter-spacing:.03em; text-transform:uppercase;
}
.page-content button[type="submit"],
.page-content input[type="submit"]{
  display:inline-flex; align-items:center; gap:10px; padding:15px 26px;
  background:var(--grad); color:#fff; border:none; font-family:var(--body);
  font-weight:600; font-size:15px; border-radius:2px; cursor:pointer;
  transition:transform .25s ease;
}
.page-content button[type="submit"]:hover,
.page-content input[type="submit"]:hover{ transform:translateY(-2px); }

footer{
  background:var(--bg); margin-top:110px; padding:52px 0 30px;
  border-top:1px solid transparent; border-image:var(--grad) 1;
}
.foot-grid{
  display:grid; grid-template-columns:1.1fr 1.4fr 1fr; gap:40px;
  padding-bottom:36px; border-bottom:1px solid var(--line);
}
.foot-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.foot-brand-logo{ height:30px; width:auto; }
.foot-brand-tag{ font-family:var(--mono); font-size:11px; color:var(--ink-dim); line-height:1.5; }
.foot-col-label{ font-family:var(--mono); font-size:11px; color:var(--blue); letter-spacing:.05em; margin-bottom:10px; }
.foot-note{ font-family:var(--body); font-size:14px; color:var(--ink-dim); line-height:1.65; }
.foot-links{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.foot-links a{ font-family:var(--body); font-size:14px; color:var(--ink-dim) !important; }
.foot-links a:hover{ color:var(--ink) !important; }
.foot-bottom{
  padding-top:20px; font-family:var(--mono); font-size:11px; color:var(--ink-dim);
}

.gisa{
  position:relative; color:var(--ink); cursor:help;
  border-bottom:1px solid var(--blue);
}
.gisa .tip{
  position:absolute; bottom:100%; left:0; margin-bottom:8px;
  padding:7px 11px; background:var(--bg-panel-2); border:1px solid var(--line-strong);
  border-radius:2px; font-family:var(--mono); font-size:11px; color:var(--ink);
  white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(4px); transition:opacity .2s ease, transform .2s ease;
  z-index:10;
}
.gisa:hover .tip, .gisa:focus .tip{ opacity:1; visibility:visible; transform:translateY(0); }

@media (max-width: 860px){
  .foot-grid{ grid-template-columns:1fr; gap:28px; }
}