/* Charleo site. Light by default; the corner toggle (js/theme.js) switches to dark and remembers it.
   The field shader in js/field.js reads the same colours from THEMES, keep both in step. */
@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --bg:#f3f2ee; --ink:#17181a; --muted:#5f5e5a; --rule:rgba(23,24,26,.16); --field-veil:rgba(243,242,238,.9);
  --error:#9b2c1f;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(20px,4.2vw,64px);
  color-scheme:light;
}
/* Set by js/theme.js from the toggle, a saved choice or ?theme=. */
:root[data-theme="dark"]{--bg:#0c0d0f;--ink:#ecebe7;--muted:#9a9894;--rule:rgba(236,235,231,.18);--field-veil:rgba(12,13,15,.9);--error:#f0a090;color-scheme:dark}
:root[data-theme="light"]{--bg:#f3f2ee;--ink:#17181a;--muted:#5f5e5a;--rule:rgba(23,24,26,.16);--field-veil:rgba(243,242,238,.9);--error:#9b2c1f;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:var(--gutter);top:12px;background:var(--bg);padding:6px 10px;z-index:10}

canvas#field{position:fixed;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.8s cubic-bezier(.25,.1,.25,1);z-index:0}
canvas#field.on{opacity:1}
.no-gl canvas#field{display:none}
.no-gl body{background-image:repeating-linear-gradient(to bottom,transparent 0 23px,var(--rule) 23px 24px)}

.page{position:relative;z-index:1;padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.screen{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr;padding-block:calc(var(--gutter)*.75) 0}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.wordmark{display:block;color:var(--ink);text-decoration:none}
.wordmark svg{height:24px;width:auto;display:block}
.nav a,.eyebrow,.foot,.foot a,.label,.note{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.nav a{text-decoration:none}
.nav a:hover,.foot a:hover{color:var(--ink)}

.hero{align-self:end;max-width:min(1120px,100%);padding-bottom:clamp(56px,11vh,120px)}
.eyebrow{display:block;margin-bottom:clamp(18px,2.6vh,28px);text-transform:uppercase}
h1{font-weight:500;font-size:clamp(42px,7.2vw,110px);line-height:1;letter-spacing:-.035em;margin:0;text-wrap:balance}
h1 span{display:block}
/* A deliberate pause between the decision and the build. */
h1 span+span{margin-top:.3em}
.legal h1 span+span{margin-top:0}
.sub{margin:clamp(20px,3vh,32px) 0 0;max-width:44ch;font-size:clamp(17px,1.3vw,20px);line-height:1.5;color:var(--muted)}
.contact-line{margin:clamp(24px,3.6vh,40px) 0 0;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;font-size:15px}
.contact-line a{text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px}
.contact-line a:hover{border-color:var(--ink)}
.contact-line .cta{font-weight:500}

/* Contact: second screen */
.contact{padding-block:clamp(72px,12vh,140px) clamp(48px,8vh,96px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(32px,6vw,96px);align-items:start}
.contact h2{font-weight:500;font-size:clamp(32px,4vw,56px);line-height:1.04;letter-spacing:-.03em;margin:0}
.contact .intro p{margin:18px 0 0;max-width:36ch;font-size:17px;line-height:1.5;color:var(--muted)}
form{display:grid;gap:18px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:8px;min-width:0}
.label{text-transform:uppercase}
input,textarea{font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:8px 0 10px;width:100%;transition:border-color .2s}
textarea{min-height:140px;resize:vertical;line-height:1.5}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--ink)}
input:focus-visible,textarea:focus-visible{outline:none;box-shadow:0 1px 0 0 var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.actions{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:6px}
button{font:inherit;font-size:15px;font-weight:500;color:var(--bg);background:var(--ink);border:0;border-radius:2px;padding:12px 22px;cursor:pointer}
button[disabled]{opacity:.5;cursor:default}
.note{max-width:52ch;line-height:1.6;letter-spacing:.02em}
.status{font-size:15px;min-height:1.5em;margin:0}
.status.err{color:var(--error)}

.foot{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-block:16px max(20px,env(safe-area-inset-bottom))}
.foot nav{display:flex;gap:20px}
.foot a{text-decoration:none}

/* Legal pages */
.legal{max-width:68ch;padding-block:clamp(48px,10vh,120px) clamp(48px,8vh,96px)}
.legal h1{font-size:clamp(36px,5vw,64px);margin-bottom:clamp(28px,4vh,48px)}
.legal h2{font-weight:600;font-size:18px;margin:36px 0 10px;letter-spacing:-.005em}
.legal p,.legal li{font-size:16px;line-height:1.6;color:var(--ink)}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 12px;padding-left:20px}
.legal .muted{color:var(--muted)}
.legal-top{padding-block:calc(var(--gutter)*.75) 0}

/* Entrance: type rises 10px and fades, staggered. */
.in{opacity:0;transform:translateY(10px);animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.35s}.d2{animation-delay:.55s}.d3{animation-delay:.65s}.d4{animation-delay:.74s}.d5{animation-delay:.9s}.d6{animation-delay:1s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.in{animation:none;opacity:1;transform:none}canvas#field{transition:none}}
.shot .in{animation:none;opacity:1;transform:none}.shot canvas#field{transition:none}

@media (max-width:760px){
  .contact{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
}
@media (max-width:600px){h1{font-size:clamp(38px,11vw,56px)}}

/* Language switch: EN | DE beside Contact */
.nav{display:flex;align-items:center;gap:22px}
.lang{display:flex;gap:2px}
.lang a{padding:4px 6px;border-radius:2px}
.lang a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}

/* Theme toggle: fixed bottom-right, clear of the phone's home indicator. */
.theme-toggle{position:fixed;z-index:5;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));
  width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--rule);background:var(--field-veil);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .2s}
.theme-toggle:hover{border-color:var(--ink)}
.theme-toggle svg{width:18px;height:18px;display:block}

/* Theme switch: colours ease for half a second while js/theme.js holds .theme-anim on <html>. */
.theme-anim,.theme-anim *{transition:color .5s ease,background-color .5s ease,border-color .5s ease !important}

/* The decision line steps back so "Then build it." carries the weight. */
.hero h1 span:first-child{color:var(--muted)}