/* fonts, self-hosted (latin + latin-ext subsets of the Google Fonts files the page used): no third-party request, GDPR-clean in DACH */
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-italic-latin-ext.woff2) format("woff2");font-style:italic;font-weight:300 500;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-italic-latin.woff2) format("woff2");font-style:italic;font-weight:300 500;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-latin-ext.woff2) format("woff2");font-style:normal;font-weight:300 500;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-latin.woff2) format("woff2");font-style:normal;font-weight:300 500;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Red Hat Mono";src:url(fonts/redhatmono-latin-ext.woff2) format("woff2");font-style:normal;font-weight:400 500;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Red Hat Mono";src:url(fonts/redhatmono-latin.woff2) format("woff2");font-style:normal;font-weight:400 500;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Geist Pixel";src:url(fonts/geistpixel.woff2) format("woff2");font-weight:400;font-display:swap}
/* Kosmos v12 shell (v11 + the business layer: step eyebrow, CTA row, founder line, fact + bridge caption, method strip),
   after micro1's first screen: a full-bleed sky, nav left, wordmark centred, CTA right,
   the claim centred over the scene, a caption bottom-left, a thin scroll cue. Each draft sets --page and the scene. */
:root{
  --ink:rgba(255,255,255,.93);--ink-2:rgba(255,255,255,.74);--ink-3:rgba(255,255,255,.52);--line:rgba(255,255,255,.14);
  --amber:#f0a040;--amber-hi:#f6b45c;--on-amber:#1a1206;--page:#0e0f13;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;--mono:"Red Hat Mono",ui-monospace,Menlo,monospace;--pixel:"Geist Pixel","Red Hat Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.23,1,.32,1);--claim-top:24%;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--page);color:var(--ink);font:400 17px/1.5 var(--serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ol{margin:0;padding:0}
ol{list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

.hero{position:relative;height:100svh;min-height:620px;max-height:1100px;overflow:hidden;isolation:isolate}
.scene{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--sky,#222)}
.scene canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block}
.grain{position:absolute;inset:-60%;background:var(--grain);opacity:var(--grain-o,.09);mix-blend-mode:overlay;pointer-events:none;animation:grain 1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-9%,5%)}40%{transform:translate(6%,-8%)}60%{transform:translate(-4%,9%)}80%{transform:translate(8%,3%)}100%{transform:translate(0,0)}}
.fade{position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(rgba(0,0,0,0),var(--page));pointer-events:none}

.bar{position:absolute;inset:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:16px;padding:22px 28px}
.nav-l{display:grid;gap:3px;justify-items:start}
.nav-l a{font:400 13px/1.5 var(--mono);letter-spacing:.01em;color:var(--ink-2);text-decoration:none;transition:color .2s var(--ease)}
.nav-l a:hover{color:var(--ink)}
.mark{display:block;padding-top:2px}
.mark img{display:block;height:28px;width:auto}
.pill{justify-self:end;display:inline-flex;align-items:center;gap:12px;padding:4px 4px 4px 14px;border-radius:6px;background:var(--amber);color:var(--on-amber);
  font:500 13px/1 var(--mono);letter-spacing:.01em;text-decoration:none;transition:background-color .2s var(--ease)}
.pill:hover{background:var(--amber-hi)}
.pill i{display:grid;place-items:center;width:30px;height:30px;border-radius:4px;background:var(--on-amber);color:var(--amber);font-style:normal;transition:translate .3s var(--ease)}
.pill:hover i{translate:2px 0}
.pill:focus-visible{outline-color:var(--amber)}

.claim{position:absolute;left:0;right:0;top:var(--claim-top);padding:0 16px;text-align:center;pointer-events:none}
.claim h1{font:350 clamp(44px,6.4vw,100px)/1 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.claim h1 em{font-weight:300}
.claim h1 .dot{color:var(--amber)}
.claim .sub{margin:22px auto 0;max-width:40ch;font-size:clamp(17px,1.45vw,21px);line-height:1.4;color:var(--ink-2);text-wrap:pretty}
.caption{position:absolute;left:28px;bottom:24px;max-width:46ch;font:400 11.5px/1.55 var(--mono);letter-spacing:.01em;color:var(--ink-3)}
.caption b{font-weight:500;color:var(--ink-2)}
.cue{position:absolute;left:50%;bottom:0;width:1px;height:20%;background:linear-gradient(rgba(255,255,255,0) 10%,rgba(255,255,255,.28) 55%,rgba(255,255,255,0) 95%)}

.wrap{max-width:1320px;margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left,0px))}
@media (min-width:700px){.wrap{padding-inline:48px}}
.below{background:var(--page);padding:72px 0 0}
.below .eyebrow{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:28px}
.founder{margin-top:72px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:baseline;justify-content:space-between;padding-top:24px}
/* hairlines on the content edge, like the method rules, not across the gutter */
.founder,footer .wrap{background:linear-gradient(var(--line),var(--line)) 0 -24px/100% 1px no-repeat;background-origin:content-box;background-clip:border-box}
.founder p{font-size:clamp(20px,2vw,26px);line-height:1.3;max-width:40ch}
.founder .pill{justify-self:auto}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;margin-top:72px;padding-block:24px 32px;
  font:400 12px/1.5 var(--mono);letter-spacing:.02em;color:var(--ink-3)}
footer i{font-family:var(--serif);font-size:14px;color:var(--ink-2)}

@media (max-width:700px){
  .bar{grid-template-columns:auto 1fr;padding:18px 16px}
  .nav-l{display:none}
  .mark{padding-top:5px}.mark img{height:23px}
  .claim{--claim-top:27%}
  .caption{left:16px;right:16px;bottom:18px;font-size:10.5px}
  .cue{display:none}
}
@media (prefers-reduced-motion:reduce){.grain{animation:none}.pill i{transition:none}}

/* v12 business layer */
.claim .step{display:inline-flex;gap:12px;align-items:baseline;margin-bottom:24px;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.claim .step b{font-weight:500;color:var(--ink-2);letter-spacing:.06em}
.claim .act{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 26px;margin-top:30px;pointer-events:auto}
.claim .act .pill{justify-self:auto}
.more{font:500 13px/1 var(--mono);letter-spacing:.01em;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:4px;transition:color .2s var(--ease),border-color .2s var(--ease)}
.more:hover{color:var(--ink);border-color:var(--ink-3)}
.claim .cred{margin-top:18px;font:400 12px/1.5 var(--mono);letter-spacing:.01em;color:var(--ink-3)}
.caption .bridge{display:block;margin-top:10px;font:400 16px/1.4 var(--serif);letter-spacing:0;color:var(--ink-2);max-width:40ch}
.steps{position:absolute;right:28px;bottom:24px;display:flex;gap:20px;margin:0;padding:0;list-style:none;font:400 11.5px/1 var(--mono);letter-spacing:.01em;color:var(--ink-3)}
.steps li{display:flex;gap:7px;padding-top:9px;border-top:1px solid var(--line)}
.steps li[aria-current="step"]{color:var(--ink);border-top-color:var(--ink-2)}
.steps a{color:inherit;text-decoration:none}
.closing{margin-top:72px;font:350 clamp(30px,4vw,52px)/1.05 var(--serif);letter-spacing:-.02em}
.closing .dot{color:var(--amber)}
@media (max-width:1100px){.steps{display:none}}
@media (max-width:700px){.claim{--claim-top:20%}.claim .cred{display:none}.caption .bridge{font-size:14.5px}}

/* v16: the wordmark larger and lit, centred on the bar */
.bar{align-items:center}
.mark{padding-top:0}
.mark img{height:46px;filter:drop-shadow(0 0 22px rgba(255,255,255,.2))}
@media (max-width:700px){.mark img{height:31px}}

/* v22: About (the first section after the hero) and What we do (phase 1 discovery, phase 2 two paths as tabs), both
   ported from transformerz site-v3 into the Kosmos type and colour, copy verbatim. */

/* About: the statement in Red Hat Mono (site-v3 set it in a pixel face; this is the Kosmos equivalent), the paragraph in
   Newsreader, centred. The kosmos spark before the label lights as the section scrolls in, a small echo of the hero. */
.about{padding-block:clamp(56px,9vw,136px) clamp(104px,12vw,176px);text-align:center}
.about-eb{display:inline-flex;align-items:center;gap:11px;margin-bottom:clamp(28px,3.4vw,44px);font:400 13.5px/1 var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.about-m{max-width:23ch;margin-inline:auto;font:400 clamp(25px,3.4vw,48px)/1.2 var(--pixel);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.about-p{max-width:54ch;margin:clamp(28px,3.2vw,44px) auto 0;font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:var(--ink-2);text-wrap:pretty}

/* What we do: a window onto the night sky (canvas, drawn once per size, sticky so the content glides over a still sky),
   lifted off the page as it scrolls in. Hairline on top of the sky; amber only on the phase chips and the open path. */
.wwd{margin-top:128px}
.about + .wwd{margin-top:0}   /* About's own bottom padding is the gap (the method strip between them is gone) */
.wwd-box{position:relative;isolation:isolate;padding:clamp(48px,7vw,104px) clamp(20px,6vw,96px) clamp(24px,4vw,64px);border-radius:14px;
  background:#07080c;text-shadow:0 1px 16px rgba(6,7,11,.7)}
.wwd-box::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.075)}
.wwd-sky{position:absolute;inset:0;z-index:-1;overflow:clip;border-radius:inherit}
.wwd-sky canvas{position:sticky;top:0;display:block;width:100%;height:100vh;height:100lvh}
.wwd-sky::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,7,11,.55),rgba(6,7,11,.18) 50%,rgba(6,7,11,0) 80%)}
.wwd-head{margin-bottom:96px}
.wwd .eyebrow{margin-bottom:22px}
.wwd-head h2{max-width:18ch;font:350 clamp(34px,4.4vw,64px)/1.04 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.wwd-head h2 em{font-weight:300}
.wwd-head h2 .dot{color:var(--amber)}
.wwd-sub{margin-top:24px;max-width:46ch;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--ink-2)}
.phase{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 96px;align-items:end;margin-bottom:112px}
.ph{display:inline-flex;align-items:center;gap:14px;padding:4px 18px 4px 4px;border-radius:6px;background:rgba(6,7,11,.55);box-shadow:inset 0 0 0 1px var(--line);text-shadow:none}
.ph-k{padding:7px 10px;border-radius:4px;background:var(--amber);color:var(--on-amber);font:500 12.5px/1 var(--mono);letter-spacing:.02em}
.ph-t{font:400 18px/1.2 var(--serif);color:var(--ink)}
.phase h3{margin-top:24px;font:350 clamp(26px,2.6vw,38px)/1.1 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.phase-r,.phase-p{max-width:36ch;font-size:clamp(17px,1.35vw,19px);line-height:1.5;color:var(--ink-2)}
.ph-steps{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:24px}
.ph-steps li,.incs li{border-top:1px solid var(--line)}
.ph-steps li{display:grid;gap:8px;align-content:start;padding-top:16px}
.ph-steps .n{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.ph-steps h4{margin:6px 0 0;font:400 21px/1.2 var(--serif);letter-spacing:-.01em}
.ph-steps p,.incs p{font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.ph-steps p{max-width:32ch}
.paths{align-items:start}
.phase-p{margin-top:20px}
.tabs{display:grid;gap:6px;margin-top:36px;max-width:30em}
.tab{display:flex;align-items:center;gap:14px;width:100%;padding:8px 14px 8px 8px;border:0;border-radius:6px;background:none;color:var(--ink-3);
  font:500 13.5px/1.3 var(--mono);letter-spacing:.01em;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.tab i{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line);font-style:normal;
  transition:background-color .2s var(--ease),color .2s var(--ease)}
.tab:hover{color:var(--ink)}
.tab[aria-current]{background:rgba(6,7,11,.6);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.tab[aria-current] i{background:var(--amber);color:var(--on-amber);box-shadow:none}
.panels{display:grid;gap:24px}
/* scroll-spy: the heading and the A/B list stay put while both paths scroll past; the path in the middle of the screen
   is lit, the other one rests dimmed. A or B scrolls to its path. */
.paths .phase-l{position:sticky;top:clamp(88px,14vh,140px)}
.panel{scroll-margin-top:clamp(48px,14vh,140px)}
.spy .panel{transition:opacity .45s var(--ease)}
.spy .panel:not(.on){opacity:.4}
.panel{padding:36px 40px 12px;border-radius:8px;background:rgba(6,7,11,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);text-shadow:none}
.panel:focus-visible{outline-offset:2px}
.pl{font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.panel h4{margin:14px 0 0;font:350 clamp(24px,2vw,30px)/1.15 var(--serif);letter-spacing:-.015em}
.pd{margin-top:14px;max-width:44ch;font-size:17px;line-height:1.5;color:var(--ink-2)}
.pl.inc{margin-top:36px}
.pl-k{display:grid;place-items:center;width:24px;height:24px;border-radius:4px;background:var(--amber);color:var(--on-amber);
  font:500 12.5px/1 var(--mono);font-style:normal;letter-spacing:0}   /* the path letter, same amber box as the A/B list */
.incs{margin-top:16px}
.incs li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:24px;align-items:baseline;padding:20px 0}
.incs h5{margin:0;font:400 19px/1.25 var(--serif);letter-spacing:-.01em}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .below :is(.eyebrow,.about-eb,.pl)::before{animation:star-lit linear both;animation-timeline:view();animation-range:entry 50% cover 40%}
    .wwd-box{transform-origin:50% 0;animation:wwd-lift cubic-bezier(.5,1,.89,1) both;animation-timeline:view();animation-range:entry 0% entry 72%}
  }
}
@keyframes star-lit{from{opacity:.28}to{opacity:1;filter:drop-shadow(0 0 7px rgba(215,228,255,.75))}}
@keyframes wwd-lift{from{opacity:.15;transform:translateY(140px) scale(.9)}to{opacity:1;transform:none}}

@media (max-width:980px){.ph-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}}
@media (max-width:860px){.phase{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}.ph-steps{margin-top:12px}.paths .phase-l{position:static}}
@media (max-width:700px){
  .about-eb{font-size:12.5px}
  .wwd{margin-top:96px}.wwd-box{border-radius:10px}.wwd-head,.phase{margin-bottom:80px}
  .wwd-sky::after{background:rgba(6,7,11,.4)}
  .ph{padding-right:14px;gap:10px}.ph-t{font-size:16px}
  .tabs{margin-top:24px}.panel{padding:24px 18px 4px}
  .incs li{grid-template-columns:minmax(0,1fr);gap:6px;padding:16px 0}
}
@media (max-width:560px){.ph-steps{grid-template-columns:minmax(0,1fr);gap:22px}}
@media (prefers-reduced-motion:reduce){.tab,.tab i,.spy .panel{transition:none}}

/* BRAND RULE (Andreas, 2026-11-02): every eyebrow / section label on the site carries the kosmos star (lib/mark.svg) in
   front of it, like "about us". Set once here so every new eyebrow inherits it: give a label one of these classes. Below
   the hero the star lights as its section scrolls in (star-lit above); without support it is simply lit. */
.eyebrow,.pl{display:flex;align-items:center;gap:.75em}
.about-eb,.claim .step{display:inline-flex;align-items:center;gap:.75em}
:is(.eyebrow,.about-eb,.claim .step,.pl)::before{content:"";flex:none;width:1.15em;height:1.15em;background:url(mark.svg) center/contain no-repeat}
/* except the Path A / Path B labels: the amber letter chip is their mark (Andreas, 2026-11-02) */
.pl:has(.pl-k)::before{content:none}

/* Contact (2026-11-02, Andreas's reference): chip, a two-tone question, the reply promise, then the form on a raised plate
   in a cool glow (the hero gradient's blue). Every "Book discovery call" button lands here. */
.contact{position:relative;isolation:isolate;margin-top:144px;text-align:center}
.contact::before{content:"";position:absolute;z-index:-1;left:50%;top:34%;width:min(1200px,96vw);height:76%;translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(200,214,255,.13),rgba(200,214,255,.04) 62%,transparent);pointer-events:none}
.ct-chip{display:inline-flex;align-items:center;gap:14px;padding:4px 18px 4px 4px;border-radius:6px;background:rgba(6,7,11,.55);
  box-shadow:inset 0 0 0 1px var(--line);font:400 18px/1.2 var(--serif)}
.ct-chip span{padding:7px 10px;border-radius:4px;background:var(--amber);color:var(--on-amber);font:500 12.5px/1 var(--mono);letter-spacing:.02em}
.contact h2{margin-top:36px;font:350 clamp(40px,6vw,92px)/1.02 var(--serif);letter-spacing:-.03em;text-wrap:balance}
.contact h2 span{display:block;color:var(--ink-3)}
.ct-sub{max-width:44ch;margin:32px auto 0;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.ct-note{margin-top:14px}
.ct-form{display:grid;gap:28px;max-width:860px;margin:72px auto 0;padding:clamp(24px,5vw,64px);border-radius:14px;background:#090a0e;text-align:left;
  color-scheme:dark;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.12),0 40px 120px -40px rgba(0,0,0,.9)}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px}
.ct-form label{display:grid;gap:12px;font:400 16px/1.3 var(--serif);color:var(--ink)}
.ct-form :is(input,select,textarea){width:100%;padding:15px 18px;border:0;border-radius:6px;background-color:#121318;box-shadow:inset 0 0 0 1px var(--line);
  color:var(--ink);font:400 17px/1.4 var(--serif);transition:box-shadow .2s var(--ease)}
.ct-form textarea{min-height:140px;resize:vertical}
.ct-form ::placeholder{color:var(--ink-3)}
.ct-form select{appearance:none;padding-right:44px;background:#121318 no-repeat right 18px center/12px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='1.5'/%3E%3C/svg%3E")}
.ct-form select:invalid{color:var(--ink-3)}
.ct-form :is(input,select,textarea):focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--amber),0 0 0 3px rgba(240,160,64,.22)}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-submit{margin-top:8px;padding:18px;border:0;border-radius:6px;background:var(--amber);color:var(--on-amber);font:500 15px/1 var(--mono);
  letter-spacing:.02em;cursor:pointer;transition:background-color .2s var(--ease)}
.ct-submit:hover{background:var(--amber-hi)}
.ct-submit:disabled{opacity:.6;cursor:progress}
.ct-submit:focus-visible{outline-color:var(--amber)}
.ct-status{font-size:17px;line-height:1.5;color:var(--ink)}
.ct-status:empty{display:none}
.ct-status a{color:var(--amber)}
.ct-fine{margin-top:-14px;font:400 12px/1.5 var(--mono);color:var(--ink-3)}
.ct-form.sent > :not(.ct-status){display:none}
.bar .pill{white-space:nowrap}
@media (max-width:700px){.bar .pill .hd{display:none}.contact{margin-top:104px}.ct-row{grid-template-columns:minmax(0,1fr);gap:22px}.ct-form{gap:22px;margin-top:48px}}
@media (prefers-reduced-motion:reduce){.ct-form :is(input,select,textarea),.ct-submit{transition:none}}

/* Logos (2026-11-02): "Trusted by the best", one quiet row right under the hero. Every logo is set in white
   (brightness 0 + invert), so mixed brand colours read as one line; full strength on hover. */
.logos{padding-top:clamp(32px,5vw,72px);text-align:center}
.logos .eyebrow{display:inline-flex;margin-bottom:clamp(28px,3.4vw,44px)}
.logo-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin:0;padding:0;list-style:none;gap:clamp(28px,4vw,56px) clamp(32px,4vw,56px)}
.logo-row img{display:block;width:auto;height:calc(clamp(22px,2.4vw,32px) * var(--s,1));max-width:160px;object-fit:contain;filter:brightness(0) invert(1);
  opacity:.62;transition:opacity .2s var(--ease)}
.logo-row img:hover{opacity:1}
.logo-ph{display:grid;place-items:center;width:132px;height:40px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line);
  font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:700px){.logo-ph{width:96px;height:32px}}
@media (prefers-reduced-motion:reduce){.logo-row img{transition:none}}
/* Technology we build on (Andreas, 2026-11-02): its own raised box after What we do, apart from the customer row under
   the hero. The tools are what Kosmos builds with, never shown as customers or partners (FACTS D). Same surface as What
   we do, a faint dot grid that fades out to the edges, a thin starlight line on the top edge. */
.tech{margin-top:clamp(72px,9vw,128px);text-align:center}
.tech .eyebrow{display:inline-flex;margin-bottom:clamp(28px,3.4vw,44px)}
.logos-box{position:relative;isolation:isolate;padding:clamp(40px,5vw,72px) clamp(20px,5vw,72px);border-radius:14px;background:#07080c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.075)}
.logos-box::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.3px) 0 0/18px 18px;
  -webkit-mask:radial-gradient(ellipse 70% 80% at 50% 50%,#000 30%,transparent 100%);mask:radial-gradient(ellipse 70% 80% at 50% 50%,#000 30%,transparent 100%)}
.logos-box::after{content:"";position:absolute;top:0;left:20%;right:20%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,236,210,.45),transparent)}
@media (max-width:700px){.logos-box{border-radius:10px}}

/* Pixel accents (2026-11-02, Andreas: "everywhere a little bit but aesthetic"): Geist Pixel (OFL, from transformerz site-v3)
   for the machine voice only: "AI" in the hero and the closing line, the About statement, and the small counters and keys
   (step numbers, phase keys, path letters, the 24/7 chip). Everything else stays Newsreader / Red Hat Mono. */
.px{font-family:var(--pixel);font-style:normal;font-weight:400;letter-spacing:-.02em}
.claim h1 .px{font-size:.9em}
.ph-steps .n,.ph-k,.tab i,.pl-k,.ct-chip span{font-family:var(--pixel);font-weight:400;letter-spacing:.02em}
.ph-steps .n{font-size:16px}

/* Top bar (Andreas, 2026-11-02): as soon as the hero header has scrolled away, the logo, the nav and the CTA come back as
   one floating island: a dark glass plate detached from the edges, the same hairline and starlight top edge as the raised
   boxes, a soft drop shadow. It settles in once the stacked hero nav is out of view and leaves when it returns (script at
   the end of index.html). No JS: it never shows, the hero header is the nav. Phones: logo + CTA across the width. */
.topbar{position:fixed;z-index:50;top:calc(14px + env(safe-area-inset-top,0px));left:50%;display:flex;align-items:center;
  gap:clamp(24px,3vw,44px);width:max-content;max-width:calc(100% - 32px);padding:8px 8px 8px 20px;border-radius:14px;
  background:rgba(10,11,15,.74);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.08),0 18px 50px -12px rgba(0,0,0,.7);
  translate:-50% -14px;opacity:0;visibility:hidden;transition:translate .45s var(--ease),opacity .3s var(--ease),visibility 0s .45s}
.topbar::after{content:"";position:absolute;top:0;left:22%;right:22%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,236,210,.5),transparent)}
.topbar.on{translate:-50% 0;opacity:1;visibility:visible;transition:translate .45s var(--ease),opacity .3s var(--ease)}
.tb-mark{order:-1}
.tb-mark img{display:block;height:26px;width:auto}
.topbar .nav-l{display:flex;gap:4px}
.topbar .nav-l a{padding:9px 12px;border-radius:8px;transition:color .2s var(--ease),background-color .2s var(--ease)}
.topbar .nav-l a:hover{background:rgba(255,255,255,.06)}
.topbar .pill{white-space:nowrap}
html{scroll-padding-top:96px}
@media (max-width:700px){
  .topbar{left:12px;right:12px;width:auto;max-width:none;justify-content:space-between;padding:6px 6px 6px 14px;translate:0 -14px}
  .topbar.on{translate:0 0}
  .topbar .nav-l{display:none}.tb-mark img{height:22px}.topbar .pill .hd{display:none}}
@media (prefers-reduced-motion:reduce){.topbar,.topbar.on,.topbar .nav-l a{transition:none}}

/* the logo outside the hero (top bar, book, legal pages): the img is the wordmark alone and the turbine is ::before, so it
   turns as in the hero header: one turn a minute, counter-clockwise (Andreas 2026-11-11, "muss auf allen Seiten so sein").
   spark.svg is the mark alone in the lockup's box; the origin is the mark's centre (196, 254 of 2184 x 475), as on .mark .ts */
:is(.tb-mark,.doc-logo){position:relative}
:is(.tb-mark,.doc-logo)::before{content:"";position:absolute;inset:0;background:url(../spark.svg) 0 0/100% 100% no-repeat;transform-origin:8.974% 53.474%;animation:turn 60s linear infinite}
@keyframes turn{to{rotate:-1turn}}
@media (prefers-reduced-motion:reduce){:is(.tb-mark,.doc-logo)::before{animation:none}}