/* ==========================================================================
   SCHIMANSKI GMBH — design tokens
   A blunt, engineering-document look: fixed left rail, strict grid, technical
   labels, signal red for anything that matters. Concrete-lilac ground rather
   than paper — no white, no beige, no blue.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@400;700;900&family=Work+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  --ground:   #e2dee9;   /* concrete lilac */
  --ground-2: #d6d1e0;   /* recessed */
  --ground-3: #cbc5d6;   /* hover */
  --slab:     #17131f;   /* dark blocks */
  --ink:      #17131f;
  --ink-sft:  #5a5268;
  --ink-dim:  #877e96;
  --rule:     #b9b2c8;
  --signal:   #e0301f;   /* signal red */
  --signal-in:#ffffff;

  --display: 'Chivo', 'Arial Black', sans-serif;
  --body: 'Work Sans', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', ui-monospace, 'Courier New', monospace;

  --rail: 260px;
  --pad: clamp(20px, 4vw, 52px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
p{ margin:0; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:900;
  line-height:1.02;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  margin:0;
}
h4{ font-family:var(--body); margin:0; }

.mono{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ------------------------------- layout --------------------------------- */

.shell{ display:grid; grid-template-columns:var(--rail) 1fr; min-height:100vh; }

.rail{
  position:fixed; inset:0 auto 0 0; width:var(--rail);
  background:var(--slab); color:var(--ground);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:26px 22px; border-right:1px solid var(--slab); z-index:60;
}
.rail .brand{ text-decoration:none; display:block; }
.rail .brand .mk{ width:42px; height:42px; margin-bottom:14px; }
.rail .brand .nm{ font-family:var(--display); font-weight:900; font-size:21px; letter-spacing:-.01em; text-transform:uppercase; display:block; line-height:1; }
.rail .brand .co{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:#8d84a0; margin-top:6px; display:block; }

.rail nav ul{ list-style:none; margin:28px 0 0; padding:0; }
.rail nav li{ border-top:1px solid #2c2539; }
.rail nav li:last-child{ border-bottom:1px solid #2c2539; }
.rail nav a{
  display:flex; align-items:baseline; gap:10px; padding:11px 0;
  text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ground);
  transition:color .18s, padding-left .18s;
}
.rail nav a .ix{ font-family:var(--mono); font-size:10px; color:#8d84a0; }
.rail nav a:hover{ color:var(--signal); padding-left:6px; }

.rail .foot{ font-size:13px; color:#8d84a0; line-height:1.5; }
.rail .foot a{ text-decoration:none; }
.rail .foot .call{
  display:block; margin-bottom:14px; background:var(--signal); color:var(--signal-in);
  font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.01em;
  padding:11px 13px; text-align:center;
}
.rail .foot .call:hover{ opacity:.88; }

.main{ grid-column:2; }

/* mobile: rail collapses to a bar */
.railbar{ display:none; }
@media (max-width: 960px){
  .shell{ grid-template-columns:1fr; }
  .main{ grid-column:1; padding-top:64px; }
  .railbar{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    position:fixed; top:0; left:0; right:0; height:64px; z-index:70;
    background:var(--slab); color:var(--ground); padding:0 16px;
  }
  .railbar .nm{ font-family:var(--display); font-weight:900; font-size:18px; text-transform:uppercase; }
  .railbar .call{ background:var(--signal); color:var(--signal-in); font-weight:700; font-size:14px; padding:8px 12px; text-decoration:none; }
  .railbar .burger{ background:none; border:0; width:34px; height:34px; position:relative; cursor:pointer; }
  .railbar .burger span{ position:absolute; left:6px; right:6px; height:2px; background:var(--ground); transition:transform .2s; }
  .railbar .burger span:nth-child(1){ top:13px; }
  .railbar .burger span:nth-child(2){ top:21px; }
  .railbar .burger.open span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
  .railbar .burger.open span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

  .rail{ position:fixed; inset:64px 0 auto 0; width:100%; transform:translateY(-120%); transition:transform .3s ease; padding:18px 20px 26px; }
  .rail.open{ transform:translateY(0); }
  .rail .brand{ display:none; }
  .rail nav ul{ margin-top:0; }
  .rail nav a{ font-size:19px; padding:15px 0; }
}

/* ------------------------------- blocks --------------------------------- */

.block{ padding:clamp(44px,6vw,86px) var(--pad); border-bottom:1px solid var(--rule); }
.block.dark{ background:var(--slab); color:var(--ground); border-bottom-color:var(--slab); }
.block.dark .lead{ color:#a79ebb; }
.block.dark .rule{ border-color:#2c2539; }

.blk-head{ display:grid; grid-template-columns:110px 1fr; gap:clamp(16px,3vw,36px); margin-bottom:clamp(26px,4vw,44px); }
.blk-head .ix{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--signal); padding-top:10px; }
.blk-head h2{ font-size:clamp(28px,4.2vw,48px); max-width:17ch; }
.blk-head .lead{ margin-top:14px; color:var(--ink-sft); max-width:56ch; }
@media (max-width:700px){ .blk-head{ grid-template-columns:1fr; gap:8px; } .blk-head .ix{ padding-top:0; } }

/* ------------------------------- hero ----------------------------------- */

.hero{ padding:clamp(48px,7vw,96px) var(--pad); border-bottom:1px solid var(--rule); }
.hero .kick{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--signal); }
.hero h1{ font-size:clamp(40px,7.4vw,92px); margin-top:20px; max-width:15ch; }
.hero h1 .box{ background:var(--signal); color:var(--signal-in); padding:0 .12em; display:inline-block; }
.hero .lede{ margin-top:24px; font-size:18px; color:var(--ink-sft); max-width:52ch; }
.hero-actions{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:9px; padding:14px 24px;
  font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.01em;
  text-transform:uppercase; text-decoration:none; border:2px solid var(--ink); cursor:pointer;
}
.btn-solid{ background:var(--signal); border-color:var(--signal); color:var(--signal-in); }
.btn-solid:hover{ opacity:.88; }
.btn-out{ background:transparent; color:var(--ink); }
.btn-out:hover{ background:var(--ink); color:var(--ground); }

.specs{ margin-top:clamp(40px,5vw,66px); display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--ink); }
.spec{ padding:18px 18px 20px; border-right:1px solid var(--rule); }
.spec:last-child{ border-right:0; }
.spec .k{ font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-dim); }
.spec .v{ font-family:var(--display); font-weight:700; font-size:16px; margin-top:6px; text-transform:uppercase; }
@media (max-width:820px){ .specs{ grid-template-columns:1fr 1fr; } .spec{ border-bottom:1px solid var(--rule); } }
@media (max-width:480px){ .specs{ grid-template-columns:1fr; } .spec{ border-right:0; } }

/* ------------------------------- calculator (unique) -------------------- */

.calc{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(22px,3vw,44px); align-items:start; }
@media (max-width:900px){ .calc{ grid-template-columns:1fr; } }

.cgroup{ border-top:1px solid var(--rule); padding:18px 0; }
.cgroup:last-of-type{ border-bottom:1px solid var(--rule); }
.cgroup .q{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:12px; }
.opts{ display:flex; flex-wrap:wrap; gap:8px; }
.opt{
  font-family:var(--body); font-size:14px; font-weight:500;
  background:transparent; border:1.5px solid var(--rule); color:var(--ink);
  padding:9px 14px; cursor:pointer; transition:background .18s, border-color .18s, color .18s;
}
.opt:hover{ border-color:var(--ink); }
.opt[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--ground); }

.readout{ background:var(--slab); color:var(--ground); padding:26px 24px 28px; position:sticky; top:26px; }
.readout .t{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#8d84a0; }
.readout .big{
  font-family:var(--display); font-weight:900; font-size:clamp(40px,5vw,58px);
  line-height:1; margin-top:12px; color:var(--signal);
}
.readout .unit{ font-family:var(--display); font-weight:700; font-size:17px; color:var(--ground); margin-top:6px; text-transform:uppercase; }
.readout .brk{ list-style:none; margin:22px 0 0; padding:0; }
.readout .brk li{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid #2c2539; font-size:13.5px; color:#a79ebb; }
.readout .brk li b{ color:var(--ground); font-weight:600; }
.readout .disc{ margin-top:18px; font-size:12px; color:#8d84a0; line-height:1.5; }
@media (max-width:900px){ .readout{ position:static; } }

/* ------------------------------- services ------------------------------- */

.svc{ border-top:2px solid var(--ink); }
.svc-row{
  display:grid; grid-template-columns:70px 280px 1fr; gap:24px;
  padding-block:22px; border-bottom:1px solid var(--rule);
  transition:background .2s;
}
.svc-row:hover{ background:var(--ground-2); }
.svc-row .n{ font-family:var(--mono); font-size:10.5px; color:var(--signal); padding-top:6px; }
.svc-row h3{ font-size:19px; }
.svc-row p{ color:var(--ink-sft); font-size:15px; max-width:56ch; }
@media (max-width:860px){ .svc-row{ grid-template-columns:54px 1fr; gap:4px 16px; } .svc-row p{ grid-column:2; } }

/* ------------------------------- sectors -------------------------------- */

.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.cell{ background:var(--ground); padding:24px 20px 28px; min-height:160px; display:flex; flex-direction:column; justify-content:space-between; transition:background .2s; }
.cell:hover{ background:var(--ground-3); }
.cell .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--signal); }
.cell h3{ font-size:17px; margin-top:20px; }
@media (max-width:900px){ .grid4{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .grid4{ grid-template-columns:1fr; } }

/* ------------------------------- process -------------------------------- */

.phases{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#2c2539; border:1px solid #2c2539; }
.phase{ background:var(--slab); padding:24px 20px 28px; }
.phase .n{ font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--signal); }
.phase h3{ font-size:20px; margin:12px 0 10px; }
.phase p{ color:#a79ebb; font-size:14.5px; }
@media (max-width:900px){ .phases{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .phases{ grid-template-columns:1fr; } }

/* ------------------------------- studio --------------------------------- */

.two{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,52px); }
.two p{ color:var(--ink-sft); font-size:16.5px; max-width:52ch; }
.marks{ list-style:none; margin:0; padding:0; }
.marks li{ padding:17px 0; border-top:1px solid var(--rule); }
.marks li:last-child{ border-bottom:1px solid var(--rule); }
.marks h4{ font-size:15.5px; font-weight:600; }
.marks h4::before{ content:"//"; color:var(--signal); font-family:var(--mono); font-size:12px; margin-right:9px; }
.marks p{ color:var(--ink-sft); font-size:14.5px; padding-left:28px; margin-top:4px; }
@media (max-width:800px){ .two{ grid-template-columns:1fr; } }

/* ------------------------------- contact -------------------------------- */

.cgrid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(26px,5vw,60px); }
.info .row{ padding:15px 0; border-top:1px solid var(--rule); display:grid; grid-template-columns:88px 1fr; gap:14px; }
.info .row:last-child{ border-bottom:1px solid var(--rule); }
.info dt{ font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-dim); padding-top:4px; }
.info dd{ margin:0; font-size:15.5px; }
.info a{ text-decoration:none; box-shadow:inset 0 -2px 0 var(--signal); }

.form{ display:flex; flex-direction:column; gap:16px; }
.f{ display:flex; flex-direction:column; gap:6px; }
.f label{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); }
.f input,.f select,.f textarea{
  border:1.5px solid var(--rule); background:var(--ground-2);
  padding:11px 12px; font-size:15.5px; font-family:inherit; color:var(--ink);
}
.f input:focus,.f select:focus,.f textarea:focus{ outline:none; border-color:var(--signal); }
.f textarea{ resize:vertical; min-height:96px; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .f2{ grid-template-columns:1fr; } }
@media (max-width:800px){ .cgrid{ grid-template-columns:1fr; } }
.note{ font-size:12.5px; color:var(--ink-dim); }
.ok{ display:none; padding:12px 14px; background:var(--slab); color:var(--ground); font-size:14.5px; }
.ok.show{ display:block; }

/* ------------------------------- footer --------------------------------- */

.site-footer{ background:var(--slab); color:var(--ground); padding:40px var(--pad) 22px; }
.f-top{ display:grid; grid-template-columns:1.3fr .8fr .9fr; gap:30px; padding-bottom:28px; border-bottom:1px solid #2c2539; }
.f-brand{ font-family:var(--display); font-weight:900; font-size:19px; text-transform:uppercase; }
.f-tag{ margin-top:12px; color:#a79ebb; max-width:38ch; font-size:14px; }
.f-col h5{ margin:0 0 12px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--signal); font-weight:400; }
.f-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.f-col a,.f-col li{ text-decoration:none; font-size:14px; color:#a79ebb; }
.f-col a:hover{ color:var(--ground); }
.f-bot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:18px; font-family:var(--mono); font-size:10.5px; color:#8d84a0; }
.f-bot a{ color:#8d84a0; text-decoration:none; }
.f-bot a:hover{ color:var(--ground); }
@media (max-width:800px){ .f-top{ grid-template-columns:1fr; gap:24px; } }

/* ------------------------------- legal page ----------------------------- */

.legal-hero{ padding:clamp(40px,6vw,72px) var(--pad) 18px; }
.legal-hero h1{ font-size:clamp(32px,5vw,54px); margin-top:14px; }
.legal-date{ margin-top:12px; font-family:var(--mono); font-size:11px; color:var(--ink-dim); }

.legal-body{ padding:0 var(--pad) 70px; display:grid; grid-template-columns:230px 1fr; gap:clamp(24px,4vw,50px); }
.toc{ position:sticky; top:26px; align-self:start; }
.toc ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.toc a{ text-decoration:none; font-size:13px; color:var(--ink-sft); padding-left:11px; border-left:2px solid var(--rule); display:block; }
.toc a:hover{ color:var(--signal); border-left-color:var(--signal); }

.legal h2{ font-size:21px; margin:40px 0 11px; scroll-margin-top:26px; }
.legal h2:first-child{ margin-top:0; }
.legal p{ color:var(--ink-sft); margin-bottom:12px; max-width:66ch; }
.legal ul{ color:var(--ink-sft); padding-left:20px; margin-bottom:12px; max-width:66ch; }
.legal li{ margin-bottom:6px; }
.legal strong{ color:var(--ink); }
@media (max-width:860px){
  .legal-body{ grid-template-columns:1fr; }
  .toc{ position:static; margin-bottom:24px; }
  .toc ul{ flex-direction:row; flex-wrap:wrap; gap:12px; }
}