@font-face{
  font-family:"Departure Mono";
  src:url("/fonts/DepartureMono-Regular.woff2") format("woff2"),
      url("/fonts/DepartureMono-Regular.woff")  format("woff");
  font-weight:400; font-style:normal; font-display:block;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("/fonts/SpaceGrotesk-Variable.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
}

:root{
  --red:#ED1C24;
  --ink:#16141a;
  --bg:#ffffff;
  --mute:#7d7984;
  --rule:#e6e3e0;

  --pixel:"Departure Mono", ui-monospace, monospace;
  --sans:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono:var(--sans);   /* numbers and meta lines: same face, tabular figures */

  /* Departure Mono is pixel-perfect at multiples of 11px, so every
     pixel-font size is a multiple of --gp. */
  --gp:11px;

  --gut:clamp(20px,2.6vw,40px);
}

*{box-sizing:border-box}
/* reserve the scrollbar's width even where nothing scrolls (the chamber),
   so the header doesn't slide sideways between pages */
html{ -webkit-text-size-adjust:100%; scrollbar-gutter:stable }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans);
  font-size:17px; line-height:1.6;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit }

/* the three type roles */
.px{ font-family:var(--pixel); font-weight:400; letter-spacing:.08em; line-height:1.4 }
.mono{ font-family:var(--mono); font-feature-settings:"tnum"; letter-spacing:.02em }

/* ---- chrome ----------------------------------------------------------- */
.chrome{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:clamp(18px,2.2vw,34px) var(--gut);
}
.brand{ display:flex; align-items:flex-end; gap:.9em; text-decoration:none }
.brand svg{ height:clamp(34px,4.2vw,56px); width:auto; display:block }
/* must match the copy in /index.html, or the logo jumps between pages */
.brand span{
  font-family:var(--pixel); font-size:var(--gp);
  letter-spacing:.2em; line-height:1.55;
  color:var(--red); margin-bottom:-.24em;
}
.contact{ text-align:right; font-family:var(--mono); font-size:12px; letter-spacing:.06em; line-height:2 }
.contact a{ color:var(--red); text-decoration:none; display:block; opacity:.75 }
.contact a:hover{ opacity:1; text-decoration:underline; text-underline-offset:.35em }
/* EN / DE switch; must match the copy in /index.html */
.lang{ display:flex; gap:.7em;
       font-family:var(--pixel); font-size:var(--gp); letter-spacing:.2em; line-height:2; color:var(--red) }
.lang b{ font-weight:400 }
.lang span{ opacity:.3 }
.contact .lang a{ display:inline; opacity:.5 }
.contact .lang a:hover{ opacity:1 }
/* two rows: phone + EN / DE switch, then the email under both */
.contact{ display:grid; grid-template-columns:auto auto; justify-content:end;
           column-gap:1.4em; align-items:baseline }
.contact a[href^="tel:"]{ grid-row:1; grid-column:1 }
.contact a[href^="mailto:"]{ grid-row:2; grid-column:1 / -1; justify-self:end }
.contact .lang{ grid-row:1; grid-column:2 }

/* ---- phones: one header row -------------------------------------------
   logo + tagline, EN / DE on the right, on the same baseline as DEV.
   Phone and email leave the header here; every page reaches /contact
   (the CTA, the chamber links), and it keeps the brand reading first.
   .contact dissolves (display:contents) so EN / DE joins the header
   grid. The logo is 3px per pixel cell (13 cells = 39px) and the tagline's
   two lines are 13px x 1.5 = 39px, so the text spans exactly the logo.
   Must match the copy in /index.html. */
@media (max-width:560px){
  .chrome{ display:grid; grid-template-columns:auto 1fr auto; gap:16px 20px;
           align-items:start; align-content:start }
  .brand{ grid-row:1; grid-column:1 / 3; gap:12px }
  .brand svg{ height:39px }
  .brand span{ font-size:13px; line-height:1.5; letter-spacing:.14em; white-space:nowrap }
  .contact{ display:contents; font-size:13px; letter-spacing:.04em }
  .contact .lang{ grid-row:1; grid-column:3; font-size:13px; line-height:1.5; margin-top:.24em }
  .contact a[href^="tel:"], .contact a[href^="mailto:"]{ display:none }
}

/* ---- page head -------------------------------------------------------- */
.wrap{ max-width:1180px; margin:0 auto; padding:0 var(--gut) }
.head{ padding:clamp(40px,7vw,110px) 0 clamp(28px,4vw,56px) }
.eyebrow{
  font-family:var(--pixel); font-size:var(--gp);
  color:var(--red); letter-spacing:.24em; margin:0 0 1.8em;
}
h1{
  margin:0; font-family:var(--pixel); font-weight:400;
  font-size:calc(var(--gp) * 3); line-height:1.1; letter-spacing:.02em;
}
@media (min-width:700px){  h1{ font-size:calc(var(--gp) * 4) } }
@media (min-width:1100px){ h1{ font-size:calc(var(--gp) * 8) } }
.lede{
  margin:1.4em 0 0; max-width:52ch; color:var(--mute);
  font-size:clamp(17px,1.45vw,21px); line-height:1.6;
}

/* section heading, small pixel caps */
h2.sec{
  margin:clamp(56px,7vw,104px) 0 1.8em; font-family:var(--pixel); font-weight:400;
  font-size:var(--gp); color:var(--red); letter-spacing:.24em;
}

/* a row of pixel blocks, the site's divider */
.pixrule{ display:flex; gap:5px; margin:clamp(28px,4vw,56px) 0 }
.pixrule i{ width:11px; height:11px; background:var(--red) }
.pixrule i:nth-child(n+4){ opacity:.28 }
.pixrule i:nth-child(n+8){ opacity:.12 }

/* outlined pixel tags */
.tags{ display:flex; flex-wrap:wrap; gap:6px }
.tags b{
  font-family:var(--pixel); font-weight:400; font-size:var(--gp); letter-spacing:.1em;
  border:1px solid var(--rule); padding:.35em .8em; color:var(--mute); line-height:1.4;
}

/* ---- engagement cards (shared by the two service chambers) ------------ */
.svc{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); gap:2px;
      background:var(--rule); border:1px solid var(--rule) }
/* column flex: the .stack row sits on the card's floor, level across the row */
.svc > article{ background:var(--bg); padding:clamp(24px,3vw,44px); position:relative;
                display:flex; flex-direction:column }
/* a red tag in the card's corner, same as the layer badges on /crew */
.svc .badge{ position:absolute; top:clamp(24px,3vw,44px); right:clamp(24px,3vw,44px);
             font-family:var(--pixel); font-size:var(--gp); letter-spacing:.24em;
             color:#fff; background:var(--red); padding:.2em .7em }
.svc h3{ margin:0; font-family:var(--pixel); font-weight:400; color:var(--red);
         font-size:calc(var(--gp) * 2); letter-spacing:.06em; line-height:1.2 }
.svc .price{ display:block; margin:1em 0 1.6em; font-family:var(--mono); font-size:13px;
             color:var(--mute); letter-spacing:.06em }
.svc p{ margin:0 0 1.6em; max-width:42ch }
.svc ul{ margin:0 0 1.6em; padding:0; list-style:none; color:var(--mute) }
.svc li{ padding-left:1.4em; position:relative; margin-bottom:.35em }
.svc li::before{ content:""; position:absolute; left:0; top:.62em;
                 width:7px; height:7px; background:var(--red) }
.svc .eg{ color:var(--mute); font-size:15px; border-left:3px solid var(--red); padding-left:1em }
/* pricing options inside a card: each one labelled, ruled apart */
.opts{ margin:0 0 1.6em; border:1px solid var(--rule) }
.opt{ padding:1em 1.1em }
.opt + .opt{ border-top:1px solid var(--rule) }
.opt .tag{ display:block; font-family:var(--pixel); font-size:var(--gp); letter-spacing:.14em;
           color:var(--red); margin-bottom:.5em }
.svc .opt p{ margin:0; color:var(--mute) }
.opt p b{ color:var(--ink); font-weight:500 }
.svc .eg b{ color:var(--red); font-weight:500 }
.stack{ display:flex; flex-wrap:wrap; gap:5px; border-top:1px solid var(--rule); padding-top:1.4em;
         margin-top:auto }
.stack b{ font-family:var(--mono); font-weight:400; font-size:12px; letter-spacing:.06em; color:var(--red);
          border:1px solid currentColor; padding:.3em .7em; opacity:.8 }

/* ---- case studies (shared) -------------------------------------------- */
.case{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(20px,4vw,64px);
  padding:clamp(28px,4vw,56px) 0;
  border-top:1px solid var(--rule);
  align-items:start;
}
.case:last-of-type{ border-bottom:1px solid var(--rule) }
.metric{
  font-family:var(--mono); font-weight:500; font-feature-settings:"tnum";
  color:var(--red); font-size:clamp(32px,4.6vw,60px); line-height:1;
  letter-spacing:-.03em; display:block;
}
.metric small{ display:block; font-family:var(--pixel); font-weight:400; font-size:var(--gp);
               letter-spacing:.16em; color:var(--mute); margin-top:1.2em }
.case-side{ margin:0; display:grid; gap:1.2em; align-content:start }
.case-side canvas{ display:block; width:100%; aspect-ratio:2 / 1; image-rendering:pixelated;
                   border:1px solid var(--rule) }
.anim-ro{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--mute);
          margin-top:-.6em; min-height:1.6em }
.tags b.status{ color:var(--mute) }
.tags b.status.live{ color:var(--red); border-color:var(--red) }
/* client identity, kept quiet: their mark small in our red, their name as they write it */
.client{ display:flex; align-items:center; gap:.55em; margin-bottom:1em }
.client svg{ height:18px; width:auto; display:block; color:var(--red) }
.client span{ font-size:15px; font-weight:500; color:var(--ink); line-height:1 }
.case h3{ margin:0; font-family:var(--sans); font-weight:500; font-size:clamp(20px,2vw,28px);
          line-height:1.3; letter-spacing:-.01em }
.case p{ color:var(--mute); margin:1em 0 0; max-width:48ch }
.case .tags{ margin-top:1.6em }
@media (max-width:760px){ .case{ grid-template-columns:1fr } }

/* ---- call to action --------------------------------------------------- */
.cta{
  margin-top:clamp(56px,7vw,104px); border:3px solid var(--red);
  padding:clamp(24px,3.4vw,48px);
  display:flex; flex-wrap:wrap; gap:1.4em 3em; align-items:center; justify-content:space-between;
}
.cta p{ margin:0; font-size:clamp(19px,1.8vw,26px); line-height:1.35; max-width:30ch; letter-spacing:-.01em }
.btn{
  font-family:var(--pixel); font-size:var(--gp); letter-spacing:.2em; line-height:1.4;
  background:var(--red); color:#fff; text-decoration:none; border:0; border-radius:0;
  padding:1.2em 2.2em; display:inline-block; cursor:crosshair;
}
.btn:hover{ background:var(--ink) }

/* ---- numbered steps: the ruled card grid, one cell per step ----------- */
.next{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:2px;
       background:var(--rule); border:1px solid var(--rule); margin:0; padding:0; list-style:none }
.next li{ background:var(--bg); padding:clamp(22px,2.6vw,36px) }
.next .no{ display:block; font-family:var(--pixel); font-size:calc(var(--gp) * 4); line-height:1; color:var(--red) }
.next h3{ margin:.9em 0 0; font-weight:500; font-size:clamp(19px,1.6vw,22px); letter-spacing:-.01em }
.next .t{ display:block; font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--red); margin-top:.4em }
.next p{ margin:.9em 0 0; color:var(--mute); max-width:32ch }

/* ---- FAQ: two questions, then ask our model ------------------------------ */
.faq details{ border-top:1px solid var(--rule); background:var(--bg) }
.faq details:last-child{ border-bottom:1px solid var(--rule) }
.faq summary{ list-style:none; cursor:crosshair; padding:1em 0; display:flex; gap:1em; align-items:center;
              justify-content:space-between; font-weight:500; font-size:16px }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; font-family:var(--pixel); color:var(--red); font-size:calc(var(--gp) * 2); line-height:1 }
.faq details[open] summary::after{ content:"\2212" }
.faq details p{ margin:0 0 1.2em; color:var(--mute); max-width:62ch; font-size:16px }
.faq a{ color:var(--red) }

/* the third row: a question box, answered by /api/ask (server.py) */
.ask-form{ display:flex; gap:0; margin:0 0 1em }
.ask-form input{ flex:1; min-width:0; font:inherit; font-size:16px; color:var(--ink); background:var(--bg);
                 border:1px solid var(--rule); border-right:0; border-radius:0; padding:.85em 1em; outline:none }
.ask-form input:focus{ border-color:var(--red); box-shadow:inset 0 0 0 1px var(--red) }
.ask-form .btn{ padding:0 1.6em }
.ask-form .btn:disabled{ opacity:.5; cursor:wait }
.ask-out{ border-left:3px solid var(--red); padding:.2em 0 .2em 1em; margin:0 0 1em }
.ask-out .who{ display:block; font-family:var(--pixel); font-size:var(--gp); letter-spacing:.18em; color:var(--red); margin-bottom:.5em }
.faq .ask-out .a{ margin:0; color:var(--ink); min-height:1.6em }
.ask-out.streaming .a::after, .ask-out.thinking .a::after{
  content:""; display:inline-block; width:.5em; height:1em; background:var(--red);
  vertical-align:-.12em; margin-left:.1em; animation:askblink .9s steps(1) infinite }
:lang(de) .ask-out.thinking .a::before{ content:"denkt nach" }
.ask-out.thinking .a::before{ content:"thinking"; color:var(--mute); font-family:var(--mono); font-size:13px; letter-spacing:.06em; margin-right:.4em }
@keyframes askblink{ 50%{ opacity:0 } }
.faq .ask-note{ font-size:13px; font-family:var(--mono); letter-spacing:.02em }

/* ---- heavy red box ----------------------------------------------------- */
.box{ border:3px solid var(--red); padding:clamp(24px,3.4vw,48px); background:var(--bg) }
.box h2{ margin:0 0 1.4em; color:var(--red); font-family:var(--pixel); font-weight:400;
         font-size:var(--gp); letter-spacing:.24em }
.box ol, .box ul{ margin:0; padding-left:1.4em }
.box li{ margin-bottom:.8em; max-width:58ch }

/* ---- three ways in: the service family, on every service page ---------- */
.family{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:2px;
         background:var(--rule); border:1px solid var(--rule) }
.family a{ background:var(--bg); padding:clamp(20px,2.4vw,32px); text-decoration:none; display:block; position:relative }
.family a:hover{ background:rgba(237,28,36,.04) }
.family b{ display:block; font-family:var(--pixel); font-weight:400; font-size:calc(var(--gp) * 2);
           letter-spacing:.06em; color:var(--red); line-height:1.2 }
.family span{ display:block; margin-top:.6em; font-weight:500 }
.family small{ display:block; margin-top:.4em; color:var(--mute); font-size:15px }
.family .here{ background:var(--red) }
.family .here:hover{ background:var(--red) }
.family .here b, .family .here span, .family .here small{ color:#fff }
.family .here::after{ content:"YOU ARE HERE"; position:absolute; top:clamp(20px,2.4vw,32px); right:clamp(20px,2.4vw,32px);
                      font-family:var(--pixel); font-size:var(--gp); letter-spacing:.2em; color:#fff; opacity:.8 }

/* ---- custom dropdown (assets/select.js) ------------------------------- */
.sel{ position:relative }
.sel select{ display:none }                  /* still submits; the button is what you see */
.sel-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1em;
  font:inherit; color:var(--ink); text-align:left; cursor:crosshair;
  background:var(--bg); border:1px solid var(--rule); border-radius:0; padding:.9em 1em;
}
.sel-btn:hover{ border-color:var(--mute) }
.sel-btn:focus-visible, .sel.open .sel-btn{ outline:none; border-color:var(--red); box-shadow:inset 0 0 0 1px var(--red) }
.sel-val{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sel.empty .sel-val{ color:var(--mute) }
.sel-caret{ width:10px; height:6px; flex:none; color:var(--red); transition:transform .15s }
.sel.open .sel-caret{ transform:scaleY(-1) }

.sel-list{
  position:absolute; left:0; right:0; top:calc(100% - 1px); z-index:20;
  margin:0; padding:4px 0; list-style:none; max-height:18em; overflow:auto;
  background:var(--bg); border:1px solid var(--red); box-shadow:inset 0 0 0 1px var(--red);
}
.sel-list li{ position:relative; padding:.65em 1em .65em 2.2em; cursor:crosshair; color:var(--ink) }
.sel-list li.on{ background:rgba(237,28,36,.08); color:var(--red) }
.sel-list li[aria-selected="true"]::before{
  content:""; position:absolute; left:1em; top:50%; width:7px; height:7px; margin-top:-3.5px;
  background:var(--red);
}

/* ---- footer ----------------------------------------------------------- */
.foot{
  margin-top:clamp(60px,9vw,140px);
  border-top:2px solid var(--red);
  padding:clamp(22px,3vw,40px) var(--gut);
  display:flex; justify-content:space-between; gap:1.4em 2em; flex-wrap:wrap;
  font-family:var(--pixel); font-size:var(--gp); line-height:1.6;
  color:var(--mute); letter-spacing:.12em;
}
.foot a{ color:var(--red); text-decoration:none }
.foot nav .sep{ opacity:.3 }
/* phones: the page links first, as a 3 x 2 grid in equal columns (slashes
   would orphan the last one), then the way back, then the legal line */
@media (max-width:560px){
  .foot{ flex-direction:column; gap:1.1em; padding-block:20px 24px }
  .foot nav{ order:1; display:grid; grid-template-columns:repeat(3, 1fr); gap:.35em 1em; max-width:360px }
  .foot nav .sep{ display:none }
  .foot .reload{ order:2 }
  .foot > span{ order:3 }
}
.foot a:hover{ text-decoration:underline; text-underline-offset:.35em }

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