/* ============================================================
   CREX.MEDIA — „graph paper" design system (shared)
   paper #E0E0E0 · ink #171C18 · lemon #FFE500
   Anton (display) · DM Mono (text) · Inter Tight (card titles)
   ============================================================ */
:root{
  color-scheme: only light;
  --paper:#E0E0E0;
  --paper-2:#D6D6D1;
  --ink:#171C18;
  --ink-soft:#3A403B;
  --lemon:#FFE500;
  --white:#FFFFFF;
  --grid-line:rgba(23,28,24,.06);
  --panel:rgba(23,28,24,.055);
  --mono:'DM Mono',ui-monospace,'Menlo','Consolas',monospace;
  --disp:'Anton',Impact,sans-serif;
  --tight:'Inter Tight','Inter',sans-serif;
  --cell:26px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{
  font-family:var(--mono);
  font-size:15px;
  line-height:1.65;
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:var(--cell) var(--cell);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--lemon);color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}

.wrap{width:min(1180px,calc(100% - 48px));margin-inline:auto;position:relative}

/* ---------- display type ---------- */
.disp{
  font-family:var(--disp);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-.012em;
  line-height:.94;
  color:var(--ink);
}
.h-panel{
  display:block;
  background:var(--panel);
  padding:.55rem 1.4rem .7rem;
}
.perf{
  height:2px;
  background-image:repeating-linear-gradient(90deg,rgba(23,28,24,.4) 0 10px,transparent 10px 20px);
  margin-top:20px;
}

/* ---------- pills / buttons ---------- */
.pill{
  font-family:var(--mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 28px;
  border-radius:100px;
  border:2px solid var(--ink);
  background:var(--white);
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
}
.pill:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}
.pill:active{transform:translate(0,0);box-shadow:none}
.pill-lemon{background:var(--lemon)}
.pill-input{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.04em;
  padding:13px 24px;
  border-radius:100px;
  border:2px solid var(--ink);
  background:var(--white);
  color:var(--ink);
  min-width:0;
}
.pill-input::placeholder{color:rgba(23,28,24,.55)}

/* ---------- header ---------- */
header{
  position:sticky;
  top:0;
  z-index:60;
  padding:16px 0;
  pointer-events:none;
}
header .wrap{
  display:flex;
  align-items:center;
  gap:18px;
}
header .wrap>*{pointer-events:auto}
.logo{
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--white);
  padding:8px 14px 8px 10px;
  text-decoration:none;
  box-shadow:2px 2px 0 rgba(23,28,24,.18);
}
.logo .mark{width:26px;height:26px;image-rendering:pixelated;flex:none}
.logo b{
  font-weight:500;
  font-size:13px;
  line-height:1.25;
  letter-spacing:.02em;
  display:block;
}
.logo b span{display:block}
nav.menu{
  margin-inline:auto;
  background:var(--white);
  border-radius:100px;
  padding:6px;
  display:flex;
  box-shadow:2px 2px 0 rgba(23,28,24,.18);
}
nav.menu a{
  font-size:13px;
  letter-spacing:.05em;
  text-decoration:none;
  padding:8px 26px;
  border-radius:100px;
}
nav.menu a:hover{background:var(--paper)}
nav.menu a.act{background:var(--lemon)}
.hdr-cta{flex:none}
.lang-sw{
  flex:none;
  display:flex;
  gap:2px;
  background:var(--white);
  border-radius:100px;
  padding:4px;
  box-shadow:2px 2px 0 rgba(23,28,24,.18);
}
.lang-sw button{
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.06em;
  border:0;
  background:transparent;
  color:var(--ink);
  border-radius:100px;
  padding:6px 11px;
  cursor:pointer;
}
.lang-sw button:hover{background:var(--paper)}
.lang-sw button.on{background:var(--ink);color:var(--paper)}
/* mobile burger + menu panel (shown under 760px) */
.mburger{
  display:none;
  flex:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:46px;
  height:44px;
  background:var(--lemon);
  border:2px solid var(--ink);
  border-radius:10px;
  cursor:pointer;
  padding:0;
}
.mburger i{
  display:block;
  width:20px;
  height:3px;
  background:var(--ink);
  margin:2.5px 0;
  transition:transform .18s ease,opacity .18s ease;
}
.mburger.open i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.mburger.open i:nth-child(2){opacity:0}
.mburger.open i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mnav{
  position:fixed;
  top:66px;
  left:0;
  right:0;
  z-index:58;
  display:none;
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:var(--cell) var(--cell);
  border-bottom:2px solid var(--ink);
  padding:8px 24px 24px;
  box-shadow:0 14px 30px rgba(23,28,24,.14);
}
.mnav.open{display:block}
.mnav a{
  display:block;
  font-size:16px;
  letter-spacing:.04em;
  text-decoration:none;
  padding:14px 4px;
  border-bottom:2px dashed rgba(23,28,24,.35);
}
.mnav a.act{background:var(--lemon);padding-inline:10px}
.mnav a.pill{
  display:inline-flex;
  border-bottom:2px solid var(--ink);
  margin-top:18px;
  padding:13px 28px;
  font-size:13px;
}

/* ---------- hero (home: copy left, live previews right) ---------- */
.hero{
  min-height:calc(100svh - 100px);
  display:flex;
  align-items:center;
  padding:8px 0 60px;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,4.5vw,68px);
  align-items:center;
}
.hero-grid>*{min-width:0}
.hero-caption{
  font-size:14px;
  letter-spacing:.04em;
  margin-bottom:20px;
}
.hero h1{
  font-size:clamp(2.5rem,4.7vw,4.9rem);
}
.hero .h-panel{width:fit-content;padding:.55rem 1.1rem .7rem;margin-left:-1.1rem}
.hero .perf{width:min(400px,86%);margin:18px 0 26px}
.hero-sub{
  max-width:520px;
  margin:0 0 28px;
  font-size:15px;
}
.hero-form{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.hero-form .pill-input{width:230px}
.hero-note{
  margin-top:12px;
  font-size:12px;
  letter-spacing:.05em;
  color:var(--ink-soft);
}
.hero-lang{
  margin-top:18px;
  font-size:12.5px;
  letter-spacing:.03em;
}
.hero-lang b{font-weight:500;background:var(--lemon);padding:1px 6px}
/* stage */
.hero-stage{position:relative}
.stage-back{
  position:absolute;
  inset:26px -22px -22px 26px;
  background:var(--panel);
  border:2px solid var(--ink);
  border-radius:14px;
}
.hero-media{
  position:relative;
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:14px;
  overflow:hidden;
  box-shadow:8px 8px 0 rgba(23,28,24,.16);
}
.hero-bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:9px 12px;
  border-bottom:2px solid var(--ink);
  background:var(--white);
}
.hero-bar i{width:9px;height:9px;border-radius:50%;border:2px solid var(--ink);display:block}
.hero-bar i:nth-child(1){background:var(--lemon)}
.hero-bar .url{
  font-size:11px;
  letter-spacing:.06em;
  margin-inline:auto;
  background:var(--paper);
  border-radius:100px;
  padding:2px 14px;
}
.hero-shot{position:relative;aspect-ratio:16/11;background:var(--paper-2);overflow:hidden}
.site{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .7s ease;
}
.site.on{opacity:1}
.site img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
}
.site iframe{
  position:absolute;
  top:0;
  left:0;
  width:1280px;
  height:900px;
  border:0;
  transform-origin:top left;
  background:transparent;
  pointer-events:none;
}
.live-tag{
  position:absolute;
  left:12px;
  top:12px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--lemon);
  border:2px solid var(--ink);
  border-radius:100px;
  padding:3px 12px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
}
.live-tag i{
  width:7px;height:7px;border-radius:50%;background:var(--ink);
  animation:blink 1.2s steps(2,start) infinite;
}
@keyframes blink{50%{opacity:.15}}
body.static .live-tag i{animation:none}
.hero-badge{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:3;
  width:44px;
  height:44px;
  background:var(--lemon);
  border:2px solid var(--ink);
  border-radius:10px;
  display:grid;
  place-items:center;
  box-shadow:3px 3px 0 rgba(23,28,24,.3);
  transition:transform .15s ease;
}
.hero-badge:hover{transform:translateY(-3px)}
.hero-badge svg{width:22px;height:22px}

/* ---------- page hero (subpages) ---------- */
.page-hero{padding:26px 0 64px}
.crumbs{
  font-size:12.5px;
  letter-spacing:.05em;
  color:var(--ink-soft);
  margin-bottom:30px;
}
.crumbs a{text-decoration:none;border-bottom:1px dashed rgba(23,28,24,.4)}
.crumbs a:hover{color:var(--ink);border-color:var(--ink)}
.page-hero h1{font-size:clamp(2.5rem,5.8vw,5.4rem)}
.page-hero .h-panel{width:fit-content;margin-left:-1.4rem}
.page-hero .kwline{
  margin-top:16px;
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.page-hero .lead{max-width:660px;margin-top:28px;font-size:15px}
.page-hero .kwline+.lead{margin-top:18px}
.page-hero .lead b{font-weight:500;background:var(--lemon);padding:1px 6px}
.page-hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* ---------- featured strip ---------- */
.strip-outer{position:relative;margin:0 0 110px;overflow:hidden}
.strip{
  background:var(--ink);
  color:var(--white);
  padding:26px 0;
  position:relative;
  margin-inline:clamp(18px,4vw,52px);
}
.strip::before,.strip::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:70px;
  background-image:var(--noise-ink);
  background-size:36px 36px;
  image-rendering:pixelated;
}
.strip::before{left:-70px}
.strip::after{right:-70px;transform:scaleX(-1)}
.strip .wrap{
  display:flex;
  align-items:center;
  gap:14px clamp(16px,2.4vw,38px);
  flex-wrap:wrap;
  justify-content:center;
}
.strip .lbl{font-size:14px;letter-spacing:.14em}
.strip .wm{
  font-family:var(--tight);
  font-weight:700;
  font-size:16px;
  letter-spacing:.11em;
  white-space:nowrap;
  opacity:.92;
}
.strip .wm.serif{font-family:Georgia,'Times New Roman',serif;font-weight:600;letter-spacing:.2em}
.strip .wm.mono{font-family:var(--mono);font-weight:500;letter-spacing:.08em}
/* sliding strap variant */
.marq{overflow:hidden}
.marq-t{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:clamp(30px,4vw,58px);
  width:max-content;
  white-space:nowrap; /* stays one line even before/without flex styles */
  padding-left:clamp(30px,4vw,58px);
  animation:marq 32s linear infinite;
}
.marq-t>*{flex:none}
.marq-t:hover{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
body.static .marq-t{animation:none}
@media (prefers-reduced-motion:reduce){.marq-t{animation:none}}

/* ---------- sections common ---------- */
section{scroll-margin-top:90px}
.sec{padding:0 0 130px}
.sec-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,5vw,80px);
  align-items:start;
}
.sec h2.disp{font-size:clamp(2.4rem,5.6vw,4.6rem)}
.sec h2 .h-panel{width:fit-content}
.mono-copy p{margin-bottom:1.4em}
.mono-copy p:last-child{margin-bottom:0}
.comment-list{
  list-style:none;
  margin:1.4em 0;
}
.comment-list li{
  white-space:nowrap;
  font-size:14px;
  letter-spacing:.02em;
  line-height:2.1;
  color:var(--ink);
}
.comment-list li::before{content:"<!"}
.comment-list li::after{content:">"}
.comment-list li b{font-weight:500;background:var(--lemon);padding:1px 7px}
.sec-head{margin-bottom:46px}
.sec-head .h-panel{width:fit-content;margin-left:-1.4rem}
.sec-head .lead{max-width:640px;margin-top:24px;font-size:14.5px;color:var(--ink-soft)}

/* ---------- path / services cards ---------- */
.path-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(26px,4vw,64px);
  align-items:start;
}
.path-grid .head-cell h2{font-size:clamp(2.4rem,5.4vw,4.4rem)}
.svc{
  background:var(--ink);
  color:var(--paper);
  border-radius:12px;
  padding:26px 26px 30px;
  position:relative;
  max-width:480px;
}
.svc .lbl{
  display:block;
  background:var(--white);
  color:var(--ink);
  font-size:15px;
  font-weight:500;
  letter-spacing:.08em;
  padding:9px 14px;
  margin-bottom:20px;
  box-shadow:inset 0 0 0 2px var(--ink), 3px 3px 0 rgba(0,0,0,.35);
}
.svc p{font-size:14px;color:#D8DBD8;margin-bottom:20px}
.svc p b{color:var(--white);font-weight:500}
.svc a{
  font-size:14px;
  font-weight:500;
  color:var(--white);
  text-decoration:none;
  border-bottom:2px dashed var(--white);
  padding-bottom:3px;
}
.svc a:hover{color:var(--lemon);border-color:var(--lemon)}
.cell-r{justify-self:end}
.cell-r .svc{margin-left:auto}
.stagger-dn{margin-top:56px}
.path-close{
  max-width:440px;
  padding-top:26px;
}
.path-close p{margin-bottom:1.3em}
.path-close .pill{margin-top:4px}
/* services overview 2-col grid */
.svc-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
}
.svc-grid .svc{max-width:none}

/* pixel stamps */
.stamp{
  position:absolute;
  background:var(--lemon);
  border-radius:6px;
  outline:3px dashed var(--ink);
  outline-offset:-7px;
  padding:14px;
  display:grid;
  place-items:center;
  box-shadow:3px 3px 0 rgba(23,28,24,.25);
  z-index:2;
}
.stamp svg{display:block}
.rot-l{transform:rotate(-7deg)}
.rot-r{transform:rotate(6deg)}

/* ---------- pricing tiers ---------- */
.tiers{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin:44px 0 10px;
  align-items:start;
}
.tier{
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:14px;
  padding:26px 24px;
  position:relative;
  box-shadow:6px 6px 0 rgba(23,28,24,.12);
}
.tier.hot{background:var(--lemon)}
.tier .flag{
  position:absolute;
  top:-14px;
  right:18px;
  background:var(--ink);
  color:var(--paper);
  font-size:11px;
  letter-spacing:.08em;
  padding:4px 12px;
  border-radius:100px;
}
.tier .t-name{
  display:block;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.tier .t-price{
  font-family:var(--disp);
  font-size:2.7rem;
  line-height:1;
  margin:16px 0 2px;
}
.tier .t-per{font-size:12px;color:var(--ink-soft);margin-bottom:16px;display:block}
.tier ul{list-style:none;margin:0}
.tier li{
  padding:8px 0;
  border-top:1px dashed rgba(23,28,24,.3);
  font-size:13.5px;
}
.tier li::before{content:"+ ";font-weight:500}
.tier .pill{margin-top:20px;width:100%}
.tiers-note{font-size:12.5px;color:var(--ink-soft);letter-spacing:.03em;margin-top:18px}

/* ---------- steps ---------- */
.steps{margin:44px 0;border-top:2px solid var(--ink)}
.step{
  display:grid;
  grid-template-columns:90px 260px 1fr;
  gap:22px;
  padding:24px 0;
  border-bottom:2px solid var(--ink);
  align-items:baseline;
}
.step .no{font-family:var(--disp);font-size:2.1rem;line-height:1}
.step .nm{font-weight:500;font-size:15px}
.step p{font-size:14px;color:var(--ink-soft);max-width:560px}

/* ---------- facts ---------- */
.facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin:44px 0;
}
.fact{background:var(--panel);padding:26px 20px;text-align:center}
.fact b{
  display:block;
  font-family:var(--disp);
  font-weight:400;
  font-size:2.8rem;
  line-height:1;
  margin-bottom:8px;
}
.fact span{font-size:12.5px;letter-spacing:.06em;color:var(--ink-soft)}

/* ---------- included list ---------- */
.inc{list-style:none;margin:26px 0}
.inc li{
  padding:11px 0;
  border-bottom:1px dashed rgba(23,28,24,.3);
  font-size:14px;
}
.inc li::before{content:"+ ";font-weight:500}
.inc li b{font-weight:500;background:var(--lemon);padding:1px 6px}
.inc a{text-decoration:none;border-bottom:2px dashed var(--ink);padding-bottom:2px}
.inc a:hover{background:var(--lemon);border-bottom-style:solid}
.svc-index{columns:2;column-gap:40px;margin-top:20px}
.svc-index li{break-inside:avoid}
@media (max-width:560px){.svc-index{columns:1}}

/* ---------- generic 2 cols ---------- */
.cols2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,4.5vw,70px);
  align-items:start;
}
.cols2 h3{
  font-size:15px;
  font-weight:500;
  letter-spacing:.08em;
  margin-bottom:14px;
  display:inline-block;
  background:var(--white);
  box-shadow:inset 0 0 0 2px var(--ink);
  padding:7px 13px;
}
.cols2 p{font-size:14px;color:var(--ink-soft);margin-bottom:1.2em}

/* ---------- project group sliders ---------- */
.pgroup{margin-bottom:70px}
.pgroup-head{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.pgroup-head h2{font-size:clamp(1.5rem,3.1vw,2.3rem)}
.pgroup-head .h-panel{padding:.35rem .8rem .5rem;margin-left:-.8rem}
.pgroup-head .cnt{font-size:12.5px;letter-spacing:.1em;color:var(--ink-soft)}
.pgroup-head .sp{flex:1}
.pgroup-head .px-btn{width:46px;height:40px}
.pgroup-head .px-btn svg{width:26px;height:17px}
.see-more{
  font-size:13px;
  font-weight:500;
  text-decoration:none;
  border-bottom:2px dashed var(--ink);
  padding-bottom:3px;
  white-space:nowrap;
}
.see-more:hover{background:var(--lemon)}
.prow{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:min(430px,82%);
  gap:26px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:6px 6px 18px;
  scrollbar-width:thin;
  scrollbar-color:var(--ink) transparent;
}
.prow>*{scroll-snap-align:start}
.prow .pj-empty{margin:0;max-width:none}

/* ---------- projects filter pills ---------- */
.fpills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 40px}
.fpill{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.05em;
  padding:9px 18px;
  border:2px solid var(--ink);
  border-radius:100px;
  background:var(--white);
  color:var(--ink);
  cursor:pointer;
}
.fpill:hover{background:var(--paper)}
.fpill.sel{background:var(--ink);color:var(--white)}
.fpill i{font-style:normal;opacity:.55;margin-left:7px}
a.fpill{text-decoration:none;display:inline-block}
.pj-empty{
  border:2px dashed var(--ink);
  border-radius:14px;
  background:var(--panel);
  padding:44px 28px;
  text-align:center;
  max-width:640px;
  margin:10px auto;
}
.pj-empty .stamp{position:static;display:inline-grid;margin-bottom:20px}
.pj-empty p{font-size:14px;color:var(--ink-soft);max-width:460px;margin:0 auto 22px}

/* ---------- projects grid ---------- */
.pgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:38px 30px;
  margin-top:10px;
}
.pcard{
  display:block;
  text-decoration:none;
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:14px;
  overflow:hidden;
  box-shadow:6px 6px 0 rgba(23,28,24,.12);
  transition:transform .15s ease;
}
.pcard:hover{transform:translateY(-4px)}
.pcard-media{
  display:block;
  position:relative;
  aspect-ratio:16/10;
  border-bottom:2px solid var(--ink);
  background:var(--paper-2);
}
.pcard-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
}
.pcard.nolink{cursor:default}
.pcard.nolink:hover{transform:none}
.pcard.nolink:hover .pcard-bar{background:#DCDCD7}
.pcard-media.fit img{object-fit:contain;padding:14px}
.pcard-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:15px 20px;
  background:#DCDCD7;
  border-bottom:1px dashed rgba(23,28,24,.25);
}
.pcard:hover .pcard-bar{background:var(--lemon)}
.pcard-bar b{
  font-family:var(--tight);
  font-weight:600;
  font-size:1.02rem;
  letter-spacing:-.01em;
}
.pcard-bar svg{flex:none}
.pcard-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:12px 20px 16px;
}
.pcard-meta .chip{font-size:11.5px;padding:5px 10px}
.pcard-meta .pd{font-size:12px;color:var(--ink-soft);letter-spacing:.04em;margin-left:auto}

/* ---------- carousel (home) ---------- */
.proj h2{
  font-size:clamp(2.4rem,6.4vw,5.4rem);
  text-align:center;
  margin-bottom:56px;
}
.proj-grid{
  display:grid;
  grid-template-columns:1fr 250px;
  gap:clamp(24px,3.5vw,48px);
  align-items:start;
}
.proj-card{
  display:block;
  text-decoration:none;
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:14px;
  overflow:hidden;
  box-shadow:7px 7px 0 rgba(23,28,24,.14);
}
.proj-media{display:block;position:relative;aspect-ratio:16/10;background:var(--paper-2);border-bottom:2px solid var(--ink)}
.proj-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
  opacity:0;
  transition:opacity .45s ease;
}
.proj-media img.on{opacity:1}
.proj-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 22px;
  background:#DCDCD7;
}
.proj-title span{
  font-family:var(--tight);
  font-weight:600;
  font-size:clamp(1.05rem,2vw,1.45rem);
  letter-spacing:-.01em;
}
.proj-title svg{flex:none}
.proj-card:hover .proj-title{background:var(--lemon)}
.proj-rail{padding-top:8px}
.proj-date{font-size:14px;letter-spacing:.05em;margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  background:var(--ink);
  color:var(--white);
  font-size:13px;
  letter-spacing:.05em;
  padding:7px 13px;
  border-radius:4px;
}
.proj-count{
  margin-top:26px;
  font-size:13px;
  letter-spacing:.14em;
  color:var(--ink-soft);
}
.proj-nav{display:flex;gap:16px;margin-top:22px}
.proj-all{
  display:inline-block;
  margin-top:26px;
  font-size:13.5px;
  font-weight:500;
  text-decoration:none;
  border-bottom:2px dashed var(--ink);
  padding-bottom:3px;
}
.proj-all:hover{background:var(--lemon)}
.px-btn{
  width:52px;
  height:44px;
  background:var(--lemon);
  border:none;
  outline:3px dashed var(--ink);
  outline-offset:-6px;
  border-radius:4px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform .12s ease;
}
.px-btn:hover{transform:translateY(-3px)}
.px-btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* ---------- FAQ ---------- */
.faq{margin:44px 0;border-top:2px dashed rgba(23,28,24,.45);max-width:760px}
.faq details{border-bottom:2px dashed rgba(23,28,24,.45)}
.faq summary{
  cursor:pointer;
  font-weight:500;
  font-size:14.5px;
  padding:16px 0;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--disp);font-size:1.35rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .fa{font-size:14px;color:var(--ink-soft);padding:0 0 18px;max-width:640px}

/* ---------- contact ---------- */
.big-mail{
  font-family:var(--disp);
  font-size:clamp(1.9rem,5vw,4.2rem);
  letter-spacing:-.01em;
  text-decoration:none;
  border-bottom:5px solid var(--lemon);
  line-height:1.15;
  word-break:break-word;
}
.big-mail:hover{background:var(--lemon)}
.c-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin:48px 0;
}
.c-card{
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:14px;
  padding:24px 22px;
  box-shadow:5px 5px 0 rgba(23,28,24,.12);
}
.c-card .t{
  display:block;
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.c-card p{font-size:14px;color:var(--ink-soft)}
.c-card p b{font-weight:500;background:var(--lemon);padding:1px 6px;color:var(--ink)}
.cform{display:grid;gap:14px;max-width:560px}
.cform textarea{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.04em;
  line-height:1.6;
  padding:16px 22px;
  border-radius:22px;
  border:2px solid var(--ink);
  min-height:150px;
  resize:vertical;
  background:var(--white);
  color:var(--ink);
}
.cform textarea::placeholder{color:rgba(23,28,24,.55)}
.cform .pill{justify-self:start}

/* ---------- project notes (crawlable text) ---------- */
.pnotes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px clamp(28px,4vw,64px);
  margin-top:38px;
}
.pnote{padding:14px 0;border-top:1px dashed rgba(23,28,24,.3)}
.pnote h3{
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.05em;
  margin-bottom:6px;
}
.pnote h3 b{font-weight:500;background:var(--lemon);padding:1px 6px}
.pnote p{font-size:13px;color:var(--ink-soft);line-height:1.7}
@media (max-width:760px){.pnotes{grid-template-columns:1fr}}

/* ---------- case studies & articles ---------- */
body.en-only .lang-sw{display:none}
.case-media{
  border:2px solid var(--ink);
  border-radius:14px;
  overflow:hidden;
  box-shadow:7px 7px 0 rgba(23,28,24,.14);
  margin:40px 0;
  background:var(--paper-2);
}
.case-media img{width:100%;display:block}
.case-facts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.case-sec{max-width:760px;margin-bottom:34px}
.case-sec h2{
  font-size:14.5px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:var(--lemon);
  display:inline-block;
  padding:4px 12px;
  margin-bottom:14px;
}
.case-sec p{font-size:14px;color:var(--ink-soft);margin-bottom:12px}
.case-sec ul{list-style:none;margin:6px 0 12px}
.case-sec li{font-size:14px;color:var(--ink-soft);padding:4px 0}
.case-sec li::before{content:"+ ";font-weight:500;color:var(--ink)}
.case-links{display:flex;flex-wrap:wrap;gap:14px;margin:36px 0 8px}
.next-link{
  display:inline-block;
  margin-top:26px;
  font-size:13.5px;
  font-weight:500;
  text-decoration:none;
  border-bottom:2px dashed var(--ink);
  padding-bottom:3px;
}
.next-link:hover{background:var(--lemon)}
.a-meta{font-size:12.5px;letter-spacing:.06em;color:var(--ink-soft);margin:18px 0 0}
.prose h2.big{
  font-size:clamp(1.3rem,2.6vw,1.8rem);
  font-family:var(--tight);
  font-weight:700;
  background:none;
  padding:0;
  letter-spacing:-.01em;
  text-transform:none;
}
.mini-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:36px 0}
@media (max-width:960px){.mini-cases{grid-template-columns:1fr;max-width:460px}}

/* ---------- prose (legal) ---------- */
.prose{max-width:760px;padding-bottom:110px}
.prose .upd{
  font-size:12px;
  letter-spacing:.08em;
  color:var(--ink-soft);
  margin:26px 0 6px;
}
.prose h2{
  font-size:14.5px;
  font-weight:500;
  letter-spacing:.06em;
  margin:40px 0 14px;
  background:var(--lemon);
  display:inline-block;
  padding:4px 12px;
}
.prose p{font-size:14px;color:var(--ink-soft);margin-bottom:14px}
.prose ul{margin:0 0 16px 4px;list-style:none}
.prose li{
  font-size:14px;
  color:var(--ink-soft);
  padding:5px 0;
}
.prose li::before{content:"— "}
.prose a{color:var(--ink)}
.prose .ph{background:var(--white);box-shadow:inset 0 0 0 2px var(--ink);padding:1px 7px;font-weight:500;color:var(--ink)}

/* ---------- big CTA ---------- */
.cta{padding:0}
.cta-panel{
  position:relative;
  background:var(--ink);
  border-radius:22px;
  color:var(--white);
  padding:clamp(40px,6vw,76px) clamp(26px,6vw,80px);
  overflow:hidden;
}
.cta-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--noise-soft);
  background-size:44px 44px;
  image-rendering:pixelated;
  opacity:.5;
  pointer-events:none;
}
.cta-inner{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  gap:clamp(26px,5vw,70px);
  align-items:center;
}
.cta-panel h2{
  color:var(--white);
  font-size:clamp(2.2rem,5.2vw,4.6rem);
  margin-bottom:22px;
}
.cta-panel p{max-width:520px;font-size:14.5px;color:#D8DBD8;margin-bottom:18px}
.cta-panel .fine{font-size:13px;letter-spacing:.03em;color:#ADB3AE;margin-bottom:30px}
.cta-sticker{
  width:clamp(120px,14vw,170px);
  aspect-ratio:1;
  background:var(--lemon);
  border-radius:18px;
  outline:4px dashed var(--ink);
  outline-offset:-11px;
  display:grid;
  place-items:center;
  transform:rotate(7deg);
  box-shadow:0 0 0 2px rgba(255,229,0,.25), 8px 10px 0 rgba(0,0,0,.35);
}

/* ---------- footer ---------- */
.foot-clouds{height:110px;position:relative;margin-top:120px}
.foot-clouds svg{position:absolute;inset:0;width:100%;height:100%;display:block}
footer{
  background:var(--ink);
  color:var(--paper);
  padding:70px 0 34px;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:clamp(30px,4vw,60px);
  align-items:start;
}
.foot-brand .mark{width:44px;height:44px;image-rendering:pixelated;margin-bottom:16px}
.foot-brand p{font-size:14px;color:#C9CDC9;max-width:320px;margin-bottom:24px}
.foot-brand p b{color:var(--white);font-weight:500}
.foot-brand a{color:var(--lemon)}
.foot-form{display:flex;flex-direction:column;gap:12px;max-width:300px}
.foot-form .pill-input{background:var(--white)}
.tree{
  font-size:13.5px;
  line-height:2.05;
  letter-spacing:.01em;
  white-space:pre;
  color:#C9CDC9;
}
.tree a{color:inherit;text-decoration:none;border-bottom:1px dashed transparent}
.tree a:hover{color:var(--lemon);border-color:var(--lemon)}
.tree .t-head{color:var(--white);font-weight:500}
.foot-stamps{
  display:flex;
  gap:18px;
  margin-top:34px;
}
.foot-stamps .stamp{position:static;padding:11px}
.foot-legal{
  margin-top:60px;
  padding-top:22px;
  border-top:1px dashed rgba(224,224,224,.25);
  display:flex;
  flex-wrap:wrap;
  gap:14px 28px;
  align-items:center;
  font-size:12.5px;
  color:#9AA09B;
}
.foot-legal .cc{margin-right:auto}
.foot-legal a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-style:dashed}
.foot-legal a:hover{color:var(--lemon)}

/* ---------- decorative sprays ---------- */
.spray{
  position:absolute;
  background-image:var(--noise-lemon);
  background-size:40px 40px;
  image-rendering:pixelated;
  pointer-events:none;
  z-index:0;
}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
body.static .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .hero-shot img{transition:none}
  *{animation:none!important}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero{min-height:auto;padding:18px 0 76px}
  .hero-grid{grid-template-columns:1fr}
  .hero-stage{max-width:560px;justify-self:start;width:100%}
  .sec-grid,.path-grid,.cols2,.svc-grid{grid-template-columns:1fr}
  .cell-r .svc{margin-left:0}
  .stagger-dn{margin-top:0}
  .svc{max-width:none}
  .proj-grid{grid-template-columns:1fr}
  .proj-rail{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding-top:0}
  .proj-date{margin:0}
  .proj-count{margin:0}
  .proj-nav{margin:0;margin-left:auto}
  .proj-all{margin:0;width:100%}
  .cta-inner{grid-template-columns:1fr}
  .cta-sticker{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .tiers{grid-template-columns:1fr;max-width:520px}
  .facts{grid-template-columns:repeat(3,1fr)}
  .c-cards{grid-template-columns:1fr;max-width:520px}
  .pgrid{grid-template-columns:1fr}
  .step{grid-template-columns:70px 1fr;grid-template-rows:auto auto}
  .step p{grid-column:2}
}
@media (max-width:760px){
  nav.menu{display:none}
  /* fixed menu bar: logo pushed left, controls pushed right */
  header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:60;
    padding:10px 0;
    background-color:var(--paper);
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size:var(--cell) var(--cell);
    border-bottom:2px solid var(--ink);
    pointer-events:auto;
  }
  header .wrap{justify-content:space-between;gap:10px}
  body{padding-top:70px}
  .mburger{display:flex}
  .hdr-cta{display:none}
  .logo{box-shadow:none;padding-left:0;background:transparent}
  .logo b{font-size:12px}
  .lang-sw{margin-left:auto}
  .lang-sw button{font-size:10.5px;padding:5px 8px}
  .spray{display:none}
  .comment-list li{font-size:12.5px}
  .hero{padding-top:8px}
  .hero .h-panel{padding:.5rem .7rem .7rem;margin-left:-.7rem}
  .hero-stage{margin-right:14px}
  .page-hero .h-panel{padding:.5rem .7rem .7rem;margin-left:-.7rem}
  .sec-head .h-panel{margin-left:-.7rem}
  .strip-outer{margin-bottom:80px}
  .sec{padding-bottom:90px}
  .stamp{display:none}
  .foot-stamps .stamp{display:grid}
  .foot-grid{grid-template-columns:1fr}
  .tree{line-height:1.9}
  .hero-form .pill-input{width:100%;max-width:320px}
  .facts{grid-template-columns:1fr;max-width:380px}
}
/* ---------- preloader (pixel logo assembly) ---------- */
#pre{
  position:fixed;
  inset:0;
  z-index:200;
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:var(--cell) var(--cell);
  display:grid;
  place-items:center;
  transition:opacity .4s ease;
}
#pre.out{opacity:0;pointer-events:none}
.pre-inner{text-align:center}
.pre-grid{position:relative;width:130px;height:130px;margin:0 auto 20px}
.pre-grid i{
  position:absolute;
  width:10px;
  height:10px;
  background:var(--ink);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s ease;
}
.pre-grid i.lm{background:var(--lemon)}
#pre .pre-wm{font-weight:500;font-size:14px;letter-spacing:.04em;display:block}
#pre .pre-wm span{color:var(--ink-soft)}
body.preloading{overflow:hidden}

/* ---------- team ---------- */
.team{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin:46px 0 10px;
}
.tm{
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:14px;
  padding:24px 20px;
  text-align:center;
  box-shadow:5px 5px 0 rgba(23,28,24,.12);
  position:relative;
}
.tm canvas{width:72px;height:72px;image-rendering:pixelated;margin:4px auto 16px;display:block}
.tm b{
  font-family:var(--tight);
  font-weight:700;
  font-size:1.15rem;
  display:block;
  margin-bottom:8px;
  letter-spacing:.02em;
}
.tm p{font-size:12.5px;color:var(--ink-soft);line-height:1.6}
.tm .tag{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%) rotate(-2deg);
  background:var(--lemon);
  border:2px solid var(--ink);
  border-radius:100px;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.08em;
  padding:2px 12px;
  white-space:nowrap;
}

/* ---------- application wizard ---------- */
.wiz{max-width:880px}
.wiz-steps{display:flex;gap:10px;margin:0 0 34px;flex-wrap:wrap}
.wiz-step{
  font-size:12px;
  letter-spacing:.08em;
  padding:7px 15px;
  border:2px solid var(--ink);
  border-radius:100px;
  background:var(--white);
  opacity:.4;
}
.wiz-step.on{opacity:1;background:var(--lemon)}
.wiz-step.done{opacity:.8}
.wpane{display:none}
.wpane.on{display:block}
.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0}
.pick{
  position:relative;
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:14px;
  padding:18px;
  cursor:pointer;
  box-shadow:4px 4px 0 rgba(23,28,24,.12);
  transition:transform .12s ease;
}
.pick:hover{transform:translateY(-2px)}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick .bx{
  flex:none;
  width:22px;
  height:22px;
  border:2px solid var(--ink);
  border-radius:5px;
  background:var(--white);
  margin-top:2px;
}
.pick.sel{background:var(--lemon)}
.pick.sel .bx{background:var(--ink);box-shadow:inset 0 0 0 3px var(--lemon)}
.pick b{font-weight:500;font-size:14.5px;display:block;margin-bottom:4px}
.pick p{font-size:12.5px;color:var(--ink-soft)}
.pick svg{flex:none;margin-top:2px}
.wblock{
  border:2px solid var(--ink);
  border-radius:14px;
  background:var(--white);
  padding:24px;
  margin:22px 0;
  box-shadow:4px 4px 0 rgba(23,28,24,.12);
}
.wblock>.wt{
  font-size:13px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:var(--lemon);
  display:inline-block;
  padding:3px 11px;
  margin-bottom:18px;
}
.wlbl{
  display:block;
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:500;
  margin:16px 0 9px;
  color:var(--ink-soft);
}
.opt-row{display:flex;flex-wrap:wrap;gap:10px}
.opt{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.04em;
  padding:9px 17px;
  border:2px solid var(--ink);
  border-radius:100px;
  background:var(--white);
  color:var(--ink);
  cursor:pointer;
}
.opt:hover{background:var(--paper)}
.opt.sel{background:var(--ink);color:var(--white)}
.warea{
  width:100%;
  font-family:var(--mono);
  font-size:13px;
  line-height:1.6;
  letter-spacing:.03em;
  padding:14px 18px;
  border-radius:14px;
  border:2px solid var(--ink);
  min-height:88px;
  resize:vertical;
  background:var(--paper);
  color:var(--ink);
}
.warea::placeholder{color:rgba(23,28,24,.5)}
.wsel,.wdate{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.03em;
  padding:12px 18px;
  border-radius:100px;
  border:2px solid var(--ink);
  background:var(--white);
  color:var(--ink);
  width:100%;
}
.wrow2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wnav{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;align-items:center}
.wnav .sp{flex:1}
.wsum{
  border:2px dashed var(--ink);
  border-radius:14px;
  padding:20px 22px;
  background:var(--panel);
  font-size:13px;
  line-height:1.9;
  margin:24px 0;
}
.wsum .sl{display:block}
.wsum b{font-weight:500;background:var(--lemon);padding:0 6px}
.werr{color:#8A1F11;font-size:12.5px;margin-top:12px;display:none}
.werr.on{display:block}
.slotgrid{display:flex;flex-wrap:wrap;gap:10px}

@media (max-width:960px){
  .team{grid-template-columns:1fr 1fr}
  .pick-grid{grid-template-columns:1fr}
  .wrow2{grid-template-columns:1fr}
}
@media (max-width:560px){
  .team{grid-template-columns:1fr;max-width:340px}
}
@media (max-width:430px){
  .lang-sw button{padding:5px 6px}
}