/* Self-hosted fonts, subset to Latin + Polish by tools/subset_fonts.py (no request to Google Fonts). */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/schibsted-grotesk-var-latin.6f1769d6e9.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/schibsted-grotesk-var-pl.37c60a3a58.woff2) format('woff2');unicode-range:U+0104-0107,U+0118-0119,U+0141-0144,U+015A-015B,U+0179-017C}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/inter-var-latin.d18c8711c4.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/inter-var-pl.1bd006d0d9.woff2) format('woff2');unicode-range:U+0104-0107,U+0118-0119,U+0141-0144,U+015A-015B,U+0179-017C}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/dm-mono-400-latin.293264a9d1.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/dm-mono-400-pl.80ce9e774f.woff2) format('woff2');unicode-range:U+0104-0107,U+0118-0119,U+0141-0144,U+015A-015B,U+0179-017C}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/dm-mono-500-latin.3f5649cbc8.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/dm-mono-500-pl.d9a021eed9.woff2) format('woff2');unicode-range:U+0104-0107,U+0118-0119,U+0141-0144,U+015A-015B,U+0179-017C}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/instrument-serif-italic-latin.cab1cc4b1e.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/instrument-serif-italic-pl.1efd21d01a.woff2) format('woff2');unicode-range:U+0104-0107,U+0118-0119,U+0141-0144,U+015A-015B,U+0179-017C}
:root{
  --ink:#06060a; --ink-rgb:6,6,10; --lead:#e8e2d8; --vig-mid:.58; --vig-edge:.94; --grain:.14; --grain-blend:overlay; --wash:none; --fg:#F2ECE3; --dim:#c9c4bb; --faint:#9e998f; --line:rgba(242,236,227,.12);
  --ember:255,69,0; --t:.3s ease;
  --orange:#FF4500; --amber:#FF8C00; --gold:#FFD700;
  --syne:'Syne',sans-serif; --head:'Schibsted Grotesk',sans-serif; --inter:'Inter',sans-serif; --mono:'DM Mono',monospace;
  --max:1160px; --pad:clamp(24px,5vw,76px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-padding-top:96px}
body{background:var(--wash),var(--ink);background-attachment:fixed;color:var(--fg);font-family:var(--inter);font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
#stage{position:fixed;inset:0;z-index:0;pointer-events:none}
#stage canvas{width:100%;height:100%;display:block}
.vig{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 90% 72% at 50% 47%,transparent 33%,rgba(var(--ink-rgb),var(--vig-mid)) 76%,rgba(var(--ink-rgb),var(--vig-edge)) 100%)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
main{position:relative;z-index:2}
:focus-visible{outline:2px solid var(--orange);outline-offset:4px;box-shadow:0 0 0 8px rgba(var(--ink-rgb),.85)}

/* nav — the only chrome; logo steps aside while the dust forms the mark */
nav{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--pad) 32px;background:linear-gradient(var(--ink) 72%,rgba(var(--ink-rgb),0))}
.logo{font-family:var(--syne);font-weight:800;font-size:20px;letter-spacing:-.04em;color:var(--fg);transition:opacity var(--t)}
.logo b{color:var(--orange)}
.navr{display:flex;gap:16px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.seg{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px}
.seg :is(button,a){background:none;border:0;font:inherit;letter-spacing:inherit;color:var(--faint);cursor:pointer;
  min-height:32px;padding:8px 12px;border-radius:999px;transition:color var(--t),background var(--t)}
.seg :is(button,a):active{opacity:.8}
.seg :is(button,a):is([aria-pressed="true"],[aria-current="true"]){color:var(--ink);background:var(--fg)}
@media (hover:hover){ .seg :is(button,a):not(:is([aria-pressed="true"],[aria-current="true"])):hover{color:var(--fg)} }

/* capsule: outlined ember, it lights up instead of jumping */
.pill{display:inline-flex;align-items:center;gap:12px;color:var(--fg);text-decoration:none;
  border:1px solid rgba(var(--ember),.7);border-radius:999px;
  background:linear-gradient(180deg,rgba(var(--ember),.16),rgba(var(--ember),.04));
  box-shadow:inset 0 1px 0 rgba(255,200,150,.12);
  transition:background var(--t),box-shadow var(--t),border-color var(--t),color var(--t)}
.pill:active{background:linear-gradient(180deg,rgba(var(--ember),.24),rgba(var(--ember),.10))}
.pill:focus-visible{border-color:var(--orange);
  background:linear-gradient(180deg,rgba(255,90,10,.34),rgba(255,60,0,.12));
  box-shadow:inset 0 1px 0 rgba(255,210,160,.22),0 0 0 4px rgba(var(--ember),.10),0 12px 44px rgba(var(--ember),.28)}
@media (hover:hover){ .pill:hover{border-color:var(--orange);
  background:linear-gradient(180deg,rgba(255,90,10,.34),rgba(255,60,0,.12));
  box-shadow:inset 0 1px 0 rgba(255,210,160,.22),0 0 0 4px rgba(var(--ember),.10),0 12px 44px rgba(var(--ember),.28)} }
.pill.sm{min-height:32px;padding:8px 16px}
.pill.lg{margin-top:48px;padding:16px 32px;font-family:var(--mono);font-size:12px;letter-spacing:.16em}
.pill.lg::after{content:'→';font-family:var(--inter)}

/* one left-aligned column for the whole page; only the dust mark sits on the centre axis */
section{padding:0 var(--pad);position:relative}
.wrap{max-width:var(--max);margin:0 auto;width:100%}
.scene{min-height:100svh;display:flex;align-items:center}
.eyebrow{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);
  display:flex;align-items:center;gap:16px;margin-bottom:32px;white-space:nowrap}
.eyebrow::before{content:'';flex:0 0 26px;height:1px;background:var(--orange);opacity:.75}
h1{font-family:var(--head);font-weight:700;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(42px,6.4vw,96px);max-width:min(13ch,62vw)}
h1 .lit{color:var(--orange)}
/* it40: AI / IT carry the pun — ink stays the lead's (16:1 dark, 14.7:1 light), the accent is only an ember bar under the letters,
   so "must work." stays the one orange hero; tapered ends = glow, not a link underline */
.hl{font-weight:700;padding-bottom:.1em;
  background:linear-gradient(90deg,rgba(255,69,0,.25),#FF4500 22%,#FF4500 78%,rgba(255,69,0,.25)) no-repeat 0 100%/100% .09em}
.pun{letter-spacing:.02em}
[data-theme="light"] .hl{background-image:linear-gradient(90deg,rgba(194,58,0,.3),#c23a00 22%,#c23a00 78%,rgba(194,58,0,.3))}
h2{text-wrap:balance}
.lead{margin-top:clamp(28px,3.2vw,44px);font-family:var(--head);font-weight:500;
  font-size:clamp(20px,1.1rem + .7vw,28px);line-height:1.3;letter-spacing:-.012em;color:var(--lead)}
.lead span{display:block}   /* two sentences, two cuts — one per line */
.offer{margin-top:24px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);line-height:2}
.offer i{font-style:normal;color:rgba(var(--ember),.8);padding:0 .5em}
/* one quiet entrance after the headline has caught — never hidden without JS */
.js .lead,.js .offer{transform:translateY(8px);   /* it36: legible from the first render — the entrance is a rise, not a reveal */
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.js .offer{transition-delay:.15s}
.hero-lit .lead,.hero-lit .offer{transform:none}
@media (max-width:640px){ .offer i{display:none} .offer span{display:block} }
h2{font-family:var(--head);font-weight:700;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(32px,4.4vw,60px);max-width:17ch}
h2 em{font-style:normal;color:var(--faint)}
.sub{margin-top:32px;color:var(--dim);font-size:16px;line-height:1.65;max-width:44ch}

/* services: one scene, a 3×3 grid on hairlines — no cards, no boxes */
#services{padding-top:18vh;padding-bottom:16vh;scroll-margin-top:96px}
.grid{margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(24px,3vw,48px)}
.svc{position:relative;padding:24px 8px 40px;border-top:1px solid var(--line);cursor:default;
  transition:border-color var(--t)}
.svc::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--t);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,30%),rgba(255,110,30,.13),transparent 70%)}
.svc .idx{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--orange);display:block;margin-bottom:16px}
.svc h3{font-family:var(--head);font-weight:700;font-size:clamp(20px,1.75vw,24px);letter-spacing:-.015em;line-height:1.15;transition:color var(--t)}
.svc p{margin-top:16px;color:var(--dim);font-size:16px;line-height:1.65;max-width:32ch;transition:color var(--t)}
@media (hover:hover){
  .svc:hover{border-color:var(--orange)}
  .svc:hover::before{opacity:1}
  .svc:hover p{color:var(--fg)}
}
.svc-group{grid-column:1/-1;margin:40px 0 4px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.svc-group:first-child{margin-top:0}
.daily{margin-top:40px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);line-height:2}

/* clients: no names, ever. The sectors are the image — bigger than the line above them */
#clients h2{max-width:20ch}
/* same hairline system as the services grid: one sector per column, never broken mid-name */
.sectors{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(24px,3vw,48px);list-style:none}
.sectors li{border-top:1px solid var(--line);padding:24px 8px 8px}
.sectors b{display:block;font-family:var(--head);font-weight:700;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(26px,2.6vw,38px);color:var(--fg);white-space:nowrap}
.sectors li>span{display:block;margin-top:16px;color:var(--dim);font-size:16px;line-height:1.65}
#clients .sub{margin-top:40px}
@media (max-width:900px){ .sectors{grid-template-columns:1fr} .sectors li{padding:20px 0 4px} }

#mark{min-height:230svh}   /* experiment: the burst gets its own screen before the window rises */
#end{min-height:calc(100svh - var(--foot-h,0px));display:flex;align-items:center}   /* it36: at the bottom of the page contact + footer share one screen */
#end h2{max-width:19ch}
.reg{margin-top:64px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--faint);line-height:2}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:900px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
  .grid{grid-template-columns:1fr} .svc{padding:22px 0 26px}
  .navr{gap:8px} .pill.sm{padding:8px 12px} .seg :is(button,a){padding:8px 10px}
  nav{padding-bottom:40px;background:linear-gradient(var(--ink) 80%,rgba(var(--ink-rgb),0))}
  h1{max-width:none}
}
/* ignition: words are split into spans that the scroll heats up — see ignite() */
.w{transition:none}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }
/* theme: dark (default) */
:root{
  --ink:#100e12; --ink-rgb:16,14,18; --vig-mid:.22; --vig-edge:.55; --grain:.10;
  --wash:radial-gradient(ellipse 70% 60% at 78% 32%,rgba(255,96,24,.10),transparent 70%),radial-gradient(ellipse 60% 50% at 10% 100%,rgba(255,140,60,.07),transparent 70%);
  --dim:#dcd6cc; --faint:#b0a99e; --lead:#f2ece3;
}
/* theme: light — ink on paper, nothing glows */
:root[data-theme="light"]{
  --ink:#f4f1eb; --ink-rgb:244,241,235; --vig-mid:0; --vig-edge:0; --grain:.07; --grain-blend:multiply; --wash:none; --kreda:#fbfaf7;
  --fg:#16130f; --dim:#3a352e; --faint:#5a544a; --line:rgba(22,19,15,.30); --lead:#1d1915; --accent-text:#b83200;
}
/* light (Leo/Ravi): paper thins dark type, so everything gets a notch heavier; orange as small text
   goes to ink-orange (#b83200, 5.2:1) — #FF4500 stays for dots, fills and the big “must work.” (#e63e00, 3.6:1) */
[data-theme="light"] body{font-weight:450}
[data-theme="light"] .sub,[data-theme="light"] .svc p,[data-theme="light"] .sectors li>span{font-size:17px}
[data-theme="light"] .eyebrow,[data-theme="light"] .offer,[data-theme="light"] .daily,[data-theme="light"] .reg,[data-theme="light"] .svc .idx{font-size:12px;font-weight:500;letter-spacing:.14em}
[data-theme="light"] h1 .lit{color:#e63e00}
[data-theme="light"] h2 em{color:var(--dim)}
[data-theme="light"] .svc,[data-theme="light"] .sectors li{border-top-color:rgba(22,19,15,.38)}
[data-theme="light"] .offer i{color:var(--accent-text)}
[data-theme="light"] .pill{border:1.5px solid #c23a00;background:linear-gradient(180deg,rgba(255,69,0,.10),rgba(255,69,0,.02));box-shadow:none}
[data-theme="light"] :focus-visible{outline-color:#b83200;box-shadow:none}
[data-theme="light"] .pill:active{background:#a32d00;color:#f3eee6}
[data-theme="light"] .svc::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,30%),rgba(184,50,0,.09),transparent 70%)}
@media (hover:hover){
  [data-theme="light"] .pill:hover{background:#c23a00;color:#f3eee6;border-color:#c23a00;
    box-shadow:0 1px 0 rgba(22,19,15,.25),0 10px 28px -12px rgba(140,40,0,.55)}
  [data-theme="light"] .svc:hover{border-color:#b83200}
  [data-theme="light"] .svc:hover h3,[data-theme="light"] .svc:hover p{color:var(--fg)}
  [data-theme="light"] .seg :is(button,a):not(:is([aria-pressed="true"],[aria-current="true"])):hover{color:var(--fg);background:rgba(22,19,15,.07)}
}
/* empty paper glows — so scenes get a firmer frame and the clients scene sits on a tonal band */
[data-theme="light"] .scene{min-height:min(100svh,780px);padding-block:clamp(96px,12vh,144px)}
[data-theme="light"] #clients{background:var(--kreda);border-block:1px solid rgba(22,19,15,.18)}   /* tint, not a wall: the globe still rises through it */
:root{--accent-text:var(--orange)}
[data-theme="light"] .eyebrow,[data-theme="light"] .svc .idx{color:var(--accent-text)}
[data-theme="light"] .eyebrow::before{background:var(--accent-text)}
[data-theme="light"] .seg :is(button,a):is([aria-pressed="true"],[aria-current="true"]){color:#f3eee6}

/* clients: the discretion line is the one serif voice on the page — a quiet signature, not a headline */
[hidden]{display:none!important}
.discreet{margin-top:56px;padding-left:24px;border-left:1px solid var(--accent-text)}
.discreet q{display:block;quotes:none;font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:clamp(26px,2.4vw,34px);line-height:1.15;letter-spacing:-.005em;color:var(--fg);text-wrap:balance}
.discreet span{display:block;margin-top:12px;color:var(--dim);font-size:15px;line-height:1.6;max-width:44ch}

/* contact form — hairline fields; the email address is never written out (spam) */
#end{align-items:flex-start;padding-block:clamp(96px,14vh,160px)}
#end .sub{max-width:46ch}
.form{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;max-width:760px}
.form .full{grid-column:1/-1}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.field label i{font-style:normal;color:var(--accent-text)}
.field input,.field textarea{width:100%;
  color:var(--fg);font:inherit;font-size:17px;line-height:1.5;padding:8px 0 10px;transition:border-color var(--t)}
.field textarea{min-height:120px;resize:vertical}
.err{margin-top:6px;min-height:1.4em;font-size:13px;line-height:1.4;color:#ff6b6b;visibility:hidden}   /* space is reserved: an error never shifts the form under the pointer */
.field[data-err] .err{visibility:visible}
[data-theme="light"] .err{color:#b4232a}

/* ===== the contact window (Design Crew 2026-10-09): one card on the whole page, only in #end.
   Dark: a pane of night glass. Light: the night window on paper — the one place that glows. */
.window{position:relative;isolation:isolate;width:100%;max-width:880px;padding:64px 72px 56px;border-radius:0;
  background:rgba(24,20,28,.82);border:1px solid rgba(242,236,227,.14);
  box-shadow:inset 0 1px 0 rgba(255,210,160,.07),0 40px 120px -48px rgba(255,69,0,.22)}
.window::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 88% 0%,rgba(255,96,24,.12),transparent 70%);opacity:var(--heat,1)}
.window .eyebrow{margin-bottom:24px}
.window h2{font-size:clamp(30px,3.6vw,56px);max-width:17ch}
.window h2:focus{outline:none} .window h2:focus-visible{outline:2px solid #FF4500;outline-offset:6px}
.window .sub{margin-top:20px}
.window .form{margin-top:40px;grid-template-columns:1fr 1fr;gap:24px 32px;max-width:none}
.window .field label{font:400 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.window .field label i{color:#FF4500}
.window .field input,.window .field textarea{min-height:48px;padding:12px 14px;border-radius:0;
  background:rgba(242,236,227,.04);border:1px solid rgba(242,236,227,.40);
  color:#F2ECE3;font:400 17px/1.5 var(--inter);scroll-margin-top:96px;
  transition:border-color .3s ease,background .3s ease,box-shadow .3s ease}
.window .field textarea{min-height:144px;resize:vertical}
@media (hover:hover){ .window .field input:hover,.window .field textarea:hover{border-color:rgba(242,236,227,.62);background:rgba(242,236,227,.06)} }
.window .field input:focus-visible,.window .field textarea:focus-visible,.window .field input:focus,.window .field textarea:focus{
  outline:none;border-color:#FF4500;box-shadow:0 0 0 1px #FF4500;background:rgba(255,69,0,.06)}
.window .field[data-err] input,.window .field[data-err] textarea{border-color:#ff6b6b;box-shadow:0 0 0 1px #ff6b6b}
.window .err{color:#ff6b6b}
.window .note-ok{font-size:15px;color:var(--dim)}
.window .linkish{color:var(--fg)}
.window .alt{font-size:14px;color:var(--faint)}
.window .send{gap:24px}
.window .pill.lg{min-height:48px;padding:14px 28px}
@media (max-width:1023px){ .window{padding:48px 40px 44px} }
@media (max-width:640px){
  #end{padding-block:80px 32px}
  .window{margin-inline:calc(16px - var(--pad));width:auto;padding:32px 20px 28px}
  .window .form{grid-template-columns:1fr;gap:20px;margin-top:32px}
  .window .send .pill{width:100%;justify-content:center}
}
/* popup (Krzysztof: „okno w sensie popup”) — the same night window, now over the film */
dialog.window{margin:auto;width:calc(100% - 32px);max-height:calc(100svh - 32px);overflow:auto;overscroll-behavior:contain;
  color:var(--fg);background:rgba(24,20,28,.97);--heat:1;padding:56px 64px 48px}
dialog.window::backdrop{background:rgba(6,6,10,.62)}

/* ===== easter egg: pull past the top a few times → "Save the planet." */
main{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.pulling main{transition:none}
#pull{position:fixed;left:50%;top:84px;z-index:6;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);opacity:0;transition:opacity .25s;pointer-events:none}
#pull i{display:block;width:120px;height:2px;background:var(--line);overflow:hidden}
#pull i b{display:block;height:100%;width:0;background:var(--accent-text)}
#pull.on{opacity:1}
#game{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--ink);color:var(--fg);overflow:hidden}
#game::backdrop{background:var(--ink)}
#game canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.ghud{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:20px var(--pad);
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);pointer-events:none}
.ghud b{color:var(--fg);font-weight:400}
.ghud .gx{pointer-events:auto}
.ghud b{display:inline-block;transition:transform .18s cubic-bezier(.2,0,0,1)}
.ghud b.pop{transform:scale(1.15);transition:none}
.ghud #gStreak{margin-left:10px;color:var(--accent-text);min-width:3ch}
.gcard #gBest.new{color:var(--accent-text);animation:gBestFlash .9s cubic-bezier(.2,0,0,1) 2}
@keyframes gBestFlash{0%,100%{opacity:1}40%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ .ghud b{transition:none} .gcard #gBest.new{animation:none} }
@media (max-width:480px){ .ghud #gStreak{position:absolute;left:var(--pad);top:46px;margin:0} }   /* phones: the streak sits under the score, the HUD line never grows */
@media (max-height:480px){ .gcard{bottom:14px} .gcard h2{font-size:26px} .gcard p{margin-top:6px;font-size:14px;line-height:1.45} .gcard .row{margin-top:10px} .gcard .pill{padding:10px 18px} }
.gcard{position:absolute;left:50%;bottom:9vh;transform:translateX(-50%);text-align:center;width:min(560px,calc(100% - 32px))}
.gcard h2{margin:0 auto;font-size:clamp(30px,4vw,52px);max-width:none}
.gcard p{margin-top:12px;color:var(--dim);font-size:16px;line-height:1.6}
.gcard .row{margin-top:24px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.gcard .pill{cursor:pointer;font:inherit;font-family:var(--mono);font-size:12px;letter-spacing:.16em;padding:12px 22px}
.gcard[hidden]{display:none!important}
.gcard #gHow2P{margin-top:2px}   /* it44: the fire line sits under the how-to as one block */
dialog.window .x{position:absolute;top:16px;right:16px;min-width:40px;min-height:40px;justify-content:center;font-size:20px;line-height:1;padding:0}
dialog.window h2{font-size:clamp(28px,3vw,44px);padding-right:48px}
#end{align-items:center}
#end .write{margin-top:40px}
#end .wrap{transition:opacity .25s cubic-bezier(.2,0,0,1)}
.fin-hold #end .wrap{opacity:0;pointer-events:none;transition:none}   /* hide at once (it was never really seen), fade back in .4 s */
@media (prefers-reduced-motion:reduce){ .fin-hold #end .wrap{opacity:1;pointer-events:auto} }
#end .write.lit{border-color:var(--orange);background:linear-gradient(180deg,rgba(255,90,10,.34),rgba(255,60,0,.12));
  box-shadow:inset 0 1px 0 rgba(255,210,160,.22),0 0 0 4px rgba(var(--ember),.10),0 12px 44px rgba(var(--ember),.28)}
[data-theme="light"] #end .write.lit{background:#c23a00;color:#f3eee6;border-color:#c23a00}
@media (max-width:640px){ dialog.window{margin:16px auto;width:calc(100% - 32px);padding:56px 20px 28px} }
@media (forced-colors: active){ .window{border:1px solid CanvasText} .window .field input,.window .field textarea{border-color:FieldText} }
.note-ok{font-size:15px;line-height:1.55;color:var(--dim)}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--fg);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .send{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.form .pill.lg{margin-top:0;cursor:pointer;font:inherit;font-family:var(--mono);font-size:12px;letter-spacing:.16em}
.alt{font-size:14px;color:var(--faint)}
.thanks{margin-top:48px;max-width:46ch}
.form-alert:empty{display:none}
.form-alert p{margin:0;color:var(--fg)}
.form-alert p+p{margin-top:6px;color:var(--dim);font-size:15px}
.form-alert{border-left:2px solid #ff6b6b;padding:4px 0 4px 14px}
.form[aria-busy="true"] .pill.lg{opacity:.6;cursor:progress}
.thanks b{display:block;font-family:var(--head);font-weight:600;font-size:clamp(22px,2vw,28px);letter-spacing:-.015em;color:var(--fg)}
.thanks span{display:block;margin-top:10px;color:var(--dim)}
.thanks small{display:block;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
@media (max-width:640px){ .form{grid-template-columns:1fr;gap:24px} }


/* ===== it42 — the contact window, compact (owner: "too big, and on white theme is dark").
   Dark: the same night glass + ember, only smaller. Light: paper, ink text, white fields with an ink outline.
   Fits 1440×900 without scrolling; on a phone it fits or scrolls inside, the Send row stays stuck to the bottom. */
dialog.window{--win-bg:#18141c;
  width:min(560px,calc(100% - 32px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(var(--vvh,100dvh) - 32px);
  margin:auto;padding:24px 32px 0;background:var(--win-bg);overflow:auto;overscroll-behavior:contain}
dialog.window .x{top:12px;right:12px;min-width:36px;min-height:36px;font-size:18px}
dialog.window .eyebrow{margin-bottom:8px}
dialog.window h2{font-size:28px;line-height:1.1;letter-spacing:-.02em;max-width:none;padding-right:0;margin-right:44px}
dialog.window h2:focus-visible{outline-offset:4px}
dialog.window .form{margin-top:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px 16px}
dialog.window .field label{margin-bottom:6px;font-size:11px;line-height:1.3}
dialog.window .field input,dialog.window .field textarea{min-height:42px;padding:8px 12px;font-size:16px;line-height:1.5;
  scroll-margin-top:24px;scroll-margin-bottom:96px}
dialog.window .field textarea{display:block;min-height:92px;max-height:188px;resize:none;overflow-y:auto;field-sizing:content}
dialog.window .field.full:not(:has(.err)){margin-bottom:20px}   /* same rhythm as the fields that reserve an error line */
dialog.window .err{margin-top:4px;min-height:16px;font-size:12.5px;line-height:1.3}
dialog.window .note-ok{font-size:13px;line-height:1.5}
dialog.window .form-alert p{font-size:14px} dialog.window .form-alert p+p{font-size:13px}
dialog.window .send{position:sticky;bottom:0;z-index:1;margin:4px -32px 0;padding:12px 32px 20px;background:var(--win-bg);gap:8px 20px}
dialog.window .pill.lg{min-height:44px;padding:11px 22px}
dialog.window .alt{font-size:13px}
dialog.window .thanks{margin-top:20px;padding-bottom:28px}
dialog.window .thanks b{font-size:22px}
@media (max-width:640px){
  dialog.window{width:calc(100% - 24px);padding:22px 18px 0;max-height:calc(100vh - 24px);max-height:calc(var(--vvh,100dvh) - 24px)}
  dialog.window h2{font-size:24px}
  dialog.window .send{margin-inline:-18px;padding:12px 18px 14px;box-shadow:0 -1px 0 var(--line)}
  dialog.window .send .pill{width:100%;justify-content:center}
  dialog.window .alt{width:100%;text-align:center}
}
/* light: paper window — ink on paper, ink-orange for small accents, the light-theme capsule */
[data-theme="light"] dialog.window{--win-bg:#f4f1eb;--fg:#16130f;--dim:#3a352e;--faint:#5a544a;--lead:#1d1915;--accent-text:#b83200;
  --line:rgba(22,19,15,.22);--ink-rgb:244,241,235;
  color-scheme:light;color:var(--fg);background:var(--win-bg);border:1px solid #16130f;
  box-shadow:0 2px 6px rgba(22,19,15,.10),0 32px 80px -32px rgba(22,19,15,.50)}
[data-theme="light"] dialog.window::before{display:none}
[data-theme="light"] dialog.window::backdrop{background:rgba(22,19,15,.46)}
[data-theme="light"] dialog.window .eyebrow{color:#b83200}
[data-theme="light"] dialog.window .eyebrow::before{background:#b83200}
[data-theme="light"] dialog.window .field label{color:#5a544a}
[data-theme="light"] dialog.window .field label i{color:#b83200}
[data-theme="light"] dialog.window .field input,[data-theme="light"] dialog.window .field textarea{
  background:#fff;border:1px solid rgba(22,19,15,.62);color:#16130f;box-shadow:none}
@media (hover:hover){ [data-theme="light"] dialog.window .field input:hover,[data-theme="light"] dialog.window .field textarea:hover{border-color:#16130f;background:#fff} }
[data-theme="light"] dialog.window .field input:focus,[data-theme="light"] dialog.window .field textarea:focus,
[data-theme="light"] dialog.window .field input:focus-visible,[data-theme="light"] dialog.window .field textarea:focus-visible{
  outline:2px solid #b83200;outline-offset:0;border-color:#b83200;box-shadow:none;background:#fff}
[data-theme="light"] dialog.window .field[data-err] input,[data-theme="light"] dialog.window .field[data-err] textarea{border-color:#b4232a;box-shadow:0 0 0 1px #b4232a}
[data-theme="light"] dialog.window .err{color:#b4232a}
[data-theme="light"] dialog.window .form-alert{border-left-color:#b4232a}
[data-theme="light"] dialog.window :focus-visible{outline-color:#b83200;box-shadow:none}
/* more contrast requested: light goes to bright paper + solid ink capsule; dark firms up labels and outlines */
@media (prefers-contrast: more){
  [data-theme="light"] dialog.window{--win-bg:#fbfaf7;--dim:#26221d;--faint:#3a352e;border:2px solid #16130f;box-shadow:none}
  [data-theme="light"] dialog.window .field label{color:#3a352e}
  [data-theme="light"] dialog.window .field input,[data-theme="light"] dialog.window .field textarea{border-color:#16130f}
  [data-theme="light"] dialog.window .pill{color:#F2ECE3!important;background:#16130f!important;border:2px solid #16130f!important;box-shadow:none!important}
  [data-theme="light"] dialog.window .pill:focus-visible{outline:2px solid #b83200;outline-offset:4px}
  :root:not([data-theme="light"]) dialog.window{--faint:#d2ccc2;--dim:#ebe5dc}
  :root:not([data-theme="light"]) dialog.window .field input,:root:not([data-theme="light"]) dialog.window .field textarea{border-color:rgba(242,236,227,.75)}
}

/* it42 — the mark: P1 geometry (docs/brand/logo), not Syne text. .logo keeps Syne for its hidden text (RULES syne-logo). */
.logo{display:inline-flex;align-items:center;line-height:1}
.logo .mark{display:block;height:.832em;width:6.549em;flex:none}
.reg .court{display:block;text-wrap:balance}   /* registry court + share capital (art. 206 KSH) — wraps in even lines */
/* footer — registration data, the LinkedIn card, the privacy policy */
footer{position:relative;z-index:2;padding:72px var(--pad) 40px;border-top:1px solid var(--line);background:var(--ink)}
.foot{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
.foot .logo{font-size:22px}
.foot .reg{margin-top:20px}
.li{display:grid;grid-template-columns:96px auto;gap:20px;align-items:center;text-decoration:none;color:var(--fg)}
.li svg{width:96px;height:96px;display:block;border-radius:14px;overflow:hidden}
.li .dots circle{fill:var(--orange);transition:opacity .45s, r .45s}
.li .bg{fill:var(--card)}
.li .in{font-family:var(--head);font-weight:700;font-size:44px;letter-spacing:-.04em;fill:var(--fg)}
.li b{display:block;font-family:var(--head);font-weight:600;font-size:18px;letter-spacing:-.01em}
.li .li-sub{display:block;margin-top:4px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.li b{color:var(--fg)}
.li:focus-visible .dots circle{opacity:1!important} .li:focus-visible b{color:var(--accent-text)}
@media (hover:hover){ .li:hover .dots circle{opacity:1!important} .li:hover b{color:var(--accent-text)} }
.fine{max-width:var(--max);margin:48px auto 0;display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.fine .linkish{color:var(--faint);text-transform:inherit;letter-spacing:inherit;font-family:inherit;font-size:inherit}
@media (hover:hover){ .fine .linkish:hover{color:var(--fg)} }
@media (max-width:760px){ .foot{grid-template-columns:1fr;align-items:start} }
@media (max-width:640px){ footer{padding-top:48px;padding-bottom:32px} .foot{gap:24px} .fine{margin-top:24px;row-gap:12px} }   /* it36 B4: contact + footer fit one phone screen */

/* privacy policy — a side panel over the film */
#privacy{margin:0 0 0 auto;height:100%;max-height:none;width:min(640px,100vw);border:0;padding:0;
  background:var(--ink);color:var(--fg);border-left:1px solid var(--line)}
#privacy::backdrop{background:rgba(0,0,0,.55)}
[data-theme="light"] #privacy::backdrop{background:rgba(22,19,15,.28)}
#privacy{overscroll-behavior:contain}
#privacy .ph{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 32px;background:var(--ink);border-bottom:1px solid var(--line)}
#privacy .ph b{font-family:var(--head);font-weight:600;font-size:18px}
#privacy .pb{padding:8px 32px 64px}
#privacy section{display:block;min-height:0;padding:24px 0;border-bottom:1px solid var(--line)}
#privacy h3{font-family:var(--head);font-weight:600;font-size:17px;letter-spacing:-.01em}
#privacy .pb div{margin-top:10px;color:var(--dim);font-size:15px;line-height:1.65}
#privacy a{color:var(--fg)}
:root{--card:#1a1720;color-scheme:dark} [data-theme="light"]{--card:#ebe7e0;color-scheme:light}
.again{margin-top:20px;font-size:14px}
@media (max-width:400px){ .eyebrow{white-space:normal} }
.skip{position:absolute;left:16px;top:-60px;z-index:20;padding:10px 14px;background:var(--fg);color:var(--ink);text-decoration:none;font-family:var(--mono);font-size:12px}
.skip:focus{top:12px}
a.logo{text-decoration:none}

/* theme switch — the same segment as EN | PL, icons only */
.theme-seg button{display:inline-flex;align-items:center;justify-content:center;min-width:32px}
.theme-seg svg{width:14px;height:14px}
/* narrow phones: four controls must fit next to the logo — tighten, never drop Contact */
@media (max-width:440px){
  nav{padding-left:16px;padding-right:16px}
  .logo{font-size:17px}
  .navr{gap:6px;letter-spacing:.08em}
  .seg{padding:2px}
  .seg :is(button,a){min-height:32px;padding:6px 8px}
  .theme-seg button{min-width:30px;padding:6px}
  .pill.sm{padding:7px 10px}
}
@media (max-width:375px){ .logo{font-size:15px} .navr{gap:4px;font-size:10px} .seg :is(button,a){padding:6px 7px} .pill.sm{padding:7px 8px} }
@media (max-width:340px){ nav{padding-left:12px;padding-right:12px} .logo{font-size:14px} .seg :is(button,a){padding:6px 6px} .theme-seg button{min-width:28px;padding:6px 4px} .pill.sm{padding:7px 7px} }   /* it36 B5: at 320 px the logo no longer touches the switches */
.theming *,.theming *::before{transition:none!important}   /* a theme swap is a cut, not a crossfade */
/* big screens (Design Crew, 2560×1440): the column moves left and stops before the globe, type keeps growing,
   the vignette lets go of the corners. Background colour untouched — the night isn't darker, the sky just got bigger. */
@media (min-width:1920px){
  .wrap,.foot,.fine{margin-left:clamp(0px,calc(9vw - var(--pad)),210px);margin-right:auto;
    max-width:max(880px,min(1180px,calc(78vw - 36.12*min(1vw,1vh) - 48px - 9vw)))}
  h1{font-size:min(128px,max(96px,5vw))}
  h2{font-size:min(76px,max(60px,3vw))}
  .sub,.svc p,.sectors li>span,[data-theme="light"] .sub,[data-theme="light"] .svc p,[data-theme="light"] .sectors li>span{font-size:18px}
  :root:not([data-theme="light"]){ --vig-mid:.16; --vig-edge:.38;
    --wash:radial-gradient(ellipse 80% 75% at 78% 42%,rgba(255,96,24,.12),transparent 72%),radial-gradient(ellipse 60% 50% at 10% 100%,rgba(255,140,60,.07),transparent 70%); }
}
/* it36 (B1, ADR 0008): on big screens the clients scene keeps growing with the frame instead of stopping at laptop sizes —
   H2 and sectors a step up, the discretion line closes the scene at the bottom. Background untouched. 1440/390 untouched. */
@media (min-width:1920px){
  #clients .wrap{min-height:78vh;display:flex;flex-direction:column;container-type:inline-size}
  #clients h2{font-size:min(100px,6.8vh)}
  .sectors b{font-size:52px}
  .sectors li>span,[data-theme="light"] .sectors li>span{font-size:20px}
  .discreet{margin-top:auto;padding-top:64px;padding-left:32px;border-left-width:2px}
  .discreet q{font-size:min(128px,8.6vh,9.6cqi);line-height:1.02;letter-spacing:-.01em;max-width:none}
  .discreet span{font-size:18px;margin-top:20px}
}
/* it42 */ @media (max-width:640px){ .foot .reg{font-size:11px;letter-spacing:.05em;line-height:1.75} .foot .reg .court{margin-top:4px}
  footer{padding-top:36px} .li{grid-template-columns:64px auto;gap:16px} .li svg{width:64px;height:64px;border-radius:10px} }   /* the court line must not push the contact H2 under the nav (it36 B4) */

#perf{position:fixed;left:12px;bottom:12px;z-index:50;font:11px/1.5 var(--mono);color:#fff;background:rgba(0,0,0,.72);padding:8px 10px;white-space:pre;pointer-events:none}
/* ===== production additions (prod/, ADR 0016). Everything above this line is the mockup 44 CSS, ported 1:1. ===== */

/* inline styles of the mockup moved to classes (CSP: style-src 'self', no 'unsafe-inline') */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.nojs{position:fixed;left:0;right:0;bottom:0;z-index:9;margin:0;padding:14px 20px;background:#16130f;color:#f2ece3;font:14px/1.5 var(--inter)}
.nojs a{color:inherit}

/* EN | PL are links now (one URL per language) — same look as the old buttons */
.seg a{display:inline-flex;align-items:center;text-decoration:none}

/* footer: policy link + privacy settings side by side */
.fine-r{display:flex;gap:8px 24px;flex-wrap:wrap}
.fine a.linkish{color:var(--faint)}
.fine-r .linkish{display:inline-flex;align-items:center;min-height:24px}   /* WCAG 2.5.8 target size: the two footer links wrap on phones */
@media (hover:hover){ .fine a.linkish:hover{color:var(--fg)} }

/* ===== consent banner (variant B: GA4 + Clarity, both only after consent). Not a modal: the page stays usable.
   Accept and Reject are the same button (size, weight, contrast) — [S5][S6]. Bottom-right on desktop, over the globe's side,
   so it never covers the H1, the lead or the contact button (left column); a slim bottom sheet on phones. ===== */
.consent{position:fixed;z-index:30;right:16px;bottom:16px;width:min(372px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;
  padding:18px 20px 16px;background:var(--card);color:var(--fg);border:1px solid var(--line);
  box-shadow:0 18px 48px rgba(0,0,0,.38);font:400 14px/1.55 var(--inter)}
.consent[hidden]{display:none}
.consent .c-h{font:600 16px/1.3 var(--head);letter-spacing:-.01em;color:var(--fg)}
.consent .c-h:focus{outline:none} .consent .c-h:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.consent .c-t{margin-top:6px;color:var(--dim)}
.consent .c-t a{color:var(--fg);text-underline-offset:3px}
.consent .c-row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;align-items:center}
.consent .c-btn{flex:1 1 120px;min-height:44px;padding:10px 14px;border:1px solid var(--fg);border-radius:999px;background:transparent;color:var(--fg);
  font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.consent .c-btn:active{opacity:.8}
@media (hover:hover){ .consent .c-btn:hover{border-color:var(--orange)} }
.consent .c-more{flex:1 0 100%;min-height:32px;background:none;border:0;padding:4px 0;font:inherit;font-size:13px;color:var(--fg);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.consent .c-opts{margin-top:12px;border-top:1px solid var(--line);padding-top:4px}
.consent .c-opts[hidden]{display:none}
.consent .c-opt{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:10px 0;cursor:pointer}
.consent .c-opt input{grid-row:1/3;width:20px;height:20px;margin-top:1px;accent-color:var(--orange);cursor:pointer}
.consent .c-opt b{font:600 14px/1.35 var(--head);color:var(--fg)}
.consent .c-opt span{font-size:13px;line-height:1.5;color:var(--dim)}
.consent .c-live{min-height:0;font-size:13px;color:var(--dim)}
[data-theme="light"] .consent{box-shadow:0 14px 40px rgba(22,19,15,.18)}
@media (max-width:640px){
  .consent{left:8px;right:8px;bottom:8px;width:auto;padding:14px 16px 12px;font-size:13px;line-height:1.5}
  .consent .c-h{font-size:15px}
  .consent .c-row{margin-top:10px}
  .consent .c-btn{min-height:44px;flex-basis:100px}
}
@media (forced-colors: active){ .consent{border:1px solid CanvasText} .consent .c-btn{border-color:ButtonText} }
@media (prefers-contrast: more){ .consent{border-color:var(--fg)} .consent .c-t,.consent .c-opt span{color:var(--fg)} }

/* ===== policy page (/en/privacy/, /pl/polityka-prywatnosci/) and 404: static, no canvas ===== */
.doc{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:120px var(--pad) 80px}
.doc h1{font-size:clamp(36px,5vw,64px);line-height:1.02}
.doc .meta{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);line-height:1.9}
.doc .draft{margin-top:20px;padding:12px 16px;border:1px solid var(--orange);color:var(--fg);font-size:14px}
.doc section{padding:28px 0;border-bottom:1px solid var(--line)}
.doc h2{font-size:clamp(20px,2vw,24px);letter-spacing:-.015em}
.doc .body{margin-top:12px;color:var(--dim);font-size:16px;line-height:1.7}
.doc .body p+p,.doc .body ul,.doc .body table{margin-top:10px}
.doc .body ul{padding-left:20px}
.doc a{color:var(--fg);text-underline-offset:3px}
.doc .back{display:inline-block;margin-top:40px}
.doc-nav{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--pad) 28px;background:linear-gradient(var(--ink) 72%,rgba(var(--ink-rgb),0))}
.pb .body,.doc .body{overflow-wrap:anywhere}
.ptable{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.ptable th,.ptable td{text-align:left;vertical-align:top;padding:8px 10px 8px 0;border-bottom:1px solid var(--line)}
.ptable th{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.ptable code{font-family:var(--mono);font-size:13px;color:var(--fg)}
#privacy .pb .body{margin-top:10px;color:var(--dim);font-size:15px;line-height:1.65}
#privacy .pb .body p+p,#privacy .pb .body ul,#privacy .pb .body table{margin-top:10px}
#privacy .pb .body ul{padding-left:20px}
#privacy .pb .meta{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);line-height:1.9}
#privacy .pb .draft{margin-top:12px;padding:10px 14px;border:1px solid var(--orange);font-size:13px}
#privacy .pb section h2{font-family:var(--head);font-weight:600;font-size:17px;letter-spacing:-.01em;max-width:none;line-height:1.3;text-wrap:wrap}
.doc section h2{max-width:none;line-height:1.25;text-wrap:wrap}
.nf{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.nf .both{display:grid;gap:40px;margin-top:8px}
.nf p.sub{margin-top:12px}
.nf .links{display:flex;gap:12px 24px;flex-wrap:wrap;margin-top:24px}

/* ===== print: text, company data, no canvas (checklist K3) ===== */
@media print{
  #stage,.vig,.grain,nav,.doc-nav,.consent,#pull,.skip,.nojs,dialog,.li svg,#mark{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  *{color:#000!important;text-shadow:none!important;box-shadow:none!important}
  .scene,#services,#end,section{min-height:0!important;padding:12px 0!important;opacity:1!important;transform:none!important}
  .wrap{opacity:1!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px}
}