/* ==========================================================================
   Base — reset, typography, layout primitives, utilities
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 16px); overflow-x:clip; } /* GSAP pin-spacers round to whole px → 1px side-scroll at fractional DPR widths */
html.lenis, html.lenis body{ height:auto; }
body{
  margin:0; min-height:100vh;
  background:var(--page);
  color:var(--text);
  font:400 var(--fs-body)/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  transition:--page .8s var(--ease-out), --accent .8s var(--ease-out), --accent-fill .8s var(--ease-out);
}
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }
ul[role="list"],ol[role="list"]{ list-style:none; padding:0; }
[hidden]{ display:none !important; }

::selection{ background:var(--brand); color:#fff; }

/* Focus: visible, brand-bright 2px */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
:focus:not(:focus-visible){ outline:none; }

/* ---- Typography ------------------------------------------------------- */
.display, h1{
  font-family:var(--font-display); font-weight:650;
  font-size:var(--fs-display); line-height:1.02; letter-spacing:-0.03em;
  text-wrap:balance;
}
h2, .h2{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--fs-h2); line-height:1.06; letter-spacing:-0.02em;
  text-wrap:balance;
}
h3, .h3{
  font-family:var(--font-display); font-weight:500;
  font-size:var(--fs-h3); line-height:1.25; letter-spacing:-0.01em;
}
p{ text-wrap:pretty; }
.lead{ font-size:clamp(1.05rem, 1.3vw, 1.25rem); color:var(--text-2); line-height:1.6; max-width:60ch; }
.prose{ font-size:var(--fs-long); line-height:1.7; max-width:68ch; color:var(--text-2); }
.prose p + p{ margin-top:1.1em; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font:500 var(--fs-eyebrow)/1.2 var(--font-mono);
  text-transform:uppercase; letter-spacing:.18em; color:var(--cyan);
}
.eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; opacity:.7; }
.is-evl .eyebrow{ color:var(--evl-green); }
.is-hr .eyebrow{ color:var(--hr-cyan); }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.text-2{ color:var(--text-2); }
.text-3{ color:var(--text-3); }
.accent{ color:var(--accent); }

/* ---- Layout ----------------------------------------------------------- */
.container{ width:100%; max-width:calc(var(--max) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter); }
.container--prose{ max-width:calc(var(--prose) + var(--gutter)*2); }
.section{ position:relative; padding-block:var(--section-y); }
.section--raised{ background:var(--ink-900); }
.section__head{ display:grid; gap:20px; margin-bottom:clamp(40px, 6vw, 80px); max-width:820px; }
.stack{ display:grid; gap:var(--stack, 16px); }
.cluster{ display:flex; flex-wrap:wrap; gap:var(--cluster, 12px); align-items:center; }
.grid-3{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* ---- Utilities -------------------------------------------------------- */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{
  position:fixed; left:16px; top:-100px; z-index:1000;
  background:var(--brand); color:#fff; padding:12px 18px; border-radius:var(--r-2);
  font-weight:600; transition:top var(--dur-ui) var(--ease-out);
}
.skip-link:focus{ top:16px; }

/* Film grain overlay (SVG noise, 3%) */
.grain{
  position:fixed; inset:-50%; z-index:900; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Image placeholder until nano-banana renders exist (exact final ratio) */
.ph{
  position:relative; width:100%; overflow:hidden; border-radius:inherit;
  aspect-ratio:var(--ratio, 16/9);
  background:
    radial-gradient(120% 90% at 20% 15%, rgba(42,159,216,.35), transparent 55%),
    radial-gradient(90% 80% at 85% 80%, rgba(63,208,224,.22), transparent 60%),
    linear-gradient(160deg, #0d1a33 0%, #070d1a 60%, #050912 100%);
}
/* debug label: only on dev hosts (html.is-dev, set in <head>) — never shown to visitors */
.ph::after{ content:none; }
.is-dev .ph::after{
  content:attr(data-img); position:absolute; left:14px; bottom:12px;
  font:500 11px/1 var(--font-mono); letter-spacing:.14em; color:rgba(234,241,251,.45);
}
.ph--evl{
  background:
    radial-gradient(90% 70% at 70% 30%, rgba(81,255,140,.16), transparent 60%),
    radial-gradient(80% 60% at 20% 90%, rgba(63,208,224,.14), transparent 60%),
    linear-gradient(180deg, #121314 0%, #0A0A0B 100%);
}
.ph--aurora{
  background:
    radial-gradient(60% 50% at 25% 40%, rgba(4,111,164,.55), transparent 70%),
    radial-gradient(55% 45% at 70% 55%, rgba(110,80,220,.35), transparent 70%),
    radial-gradient(40% 40% at 55% 25%, rgba(63,208,224,.22), transparent 70%),
    #050912;
}

/* JS-motion gate: hide reveal targets only while JS is about to animate them.
   A failsafe in <head> drops .js-motion after 3s if core.js never boots. */
.js-motion [data-p1]:not(.is-split){ visibility:hidden; }

/* Reduced motion: simple 200ms fade only */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
  body{ transition:none; }
  .rm-fade{ animation:rmFade .2s ease-out both !important; animation-duration:.2s !important; }
}
@keyframes rmFade{ from{ opacity:0 } to{ opacity:1 } }

/* Scroll scenes move things sideways (scatter, slide-ins) — never let that create page-level horizontal scroll */
main > section, main > article, main > .pin-spacer > section{ overflow-x:clip; }
/* Long German compounds (e.g. "Datenschutzerklärung") must wrap on small screens */
h1, h2, h3, .display{ overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; }

/* Generated images (<picture class="pic">, emitted by src/lib.mjs → ph() once the file exists) */
.pic{ display:block; }
.pic img{ display:block; width:100%; height:auto; }

/* ---- Squircle corners -----------------------------------------------------------------------
   CSS `corner-shape` (Chromium 139+: Chrome, Edge, Opera, Samsung). Browsers without it keep the normal
   round corners, nothing else changes. A squircle with the same radius looks tighter than a circular
   arc, so the radius tokens grow by ~1.4× where it is supported. Circles (border-radius:50%) stay round:
   a 50% squircle would turn dots, rings and round buttons into rounded squares. Add new circular
   elements to the list below. */
@supports (corner-shape: squircle){
  :root{ --r-1:11px; --r-2:20px; --r-3:28px; --r-4:40px; }
  *, *::before, *::after{ corner-shape:squircle; }
  .burger,
  .modal__close,
  .btn.is-loading::after,
  .to-top,
  .cursor__dot,
  .cursor__ring,
  .milestone__dot,
  .share a,
  .share button,
  .contact-card__copy,
  .office-status__dot,
  .office-status[data-state="open"] .office-status__dot::after,
  .beacon__sweep,
  .beacon__sat,
  .wipe-scene__knob,
  .charger::before,
  .charger::after,
  .collab__glow,
  .collab-step__node,
  .collab__seal-icon,
  .values.is-orbit .values__core,
  .values.is-orbit .values__core picture,
  .values.is-orbit .values__core img,
  .ph--core,
  .values.is-orbit .value__icon,
  .hr-mark,
  .hr-vs__or,
  .hr-term__ring,
  .hr-qa summary i,
  .prod-charger::before,
  .consult.is-scene .consult__arrow,
  .consult__rail-dot,
  .consult__burst,
  .consult__orb,
  .charge .ph,
  .charge picture,
  .charge img,
  .hr-frame__bar i,
  .hr-wordmark img,
  .mega__mark--hr{ corner-shape:round; }
}