/* CNE redesign — monochrome editorial/technical system
   Archivo (sans) + IBM Plex Mono (labels) · ink #141414 on white */

:root {
  --ink: #141414;
  --body: #555;
  --body-2: #666;
  --body-3: #777;
  --faint: #9a9a9a;
  --fainter: #b3b3b3;
  --line: #e6e6e6;
  --line-soft: #ededed;
  --hover-bg: #f7f7f7;
  --dark-body: #b0b0b0;
  /* accent — the CNE lime, carried over from the original site's hover state */
  --accent: #E0FE52;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  /* corner radius scale — matched to the rounded hero panel */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  /* vertical rhythm between the parts of a page head: header rule -> breadcrumb ->
     H1 -> lede -> section rule -> content. ONE value so every gap is equal.
     Maciej, review round 3: "decrease the spacing ... and make it equal". */
  --stack: clamp(24px, 2.2vw, 32px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: min(1240px, 92vw); margin: 0 auto; }

/* ---------- type ---------- */
.kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint);
}
.kicker--dark { color: #7a7a7a; }
.h1 { font-size: clamp(32px, 4.2vw, 54px); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.h1--home { font-size: clamp(40px, 6.4vw, 82px); line-height: .98; max-width: 14ch; }
.h2 { font-size: clamp(30px, 4vw, 52px); font-weight: 500; letter-spacing: -.02em; line-height: 1.04; }
.lede { font-size: clamp(16px, 1.45vw, 19px); line-height: 1.55; color: var(--body); max-width: 64ch; }
.prose p { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--body); max-width: 62ch; }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 22px; }
.prose ul { list-style: none; }
.prose li { font-size: clamp(15px, 1.35vw, 17px); line-height: 1.6; color: var(--body-2); border-top: 1px solid var(--line); padding: 14px 0; max-width: 70ch; }
.prose h2, .prose h3 { font-weight: 500; letter-spacing: -.01em; margin: 40px 0 16px; }
.prose h2 { font-size: clamp(22px, 2vw, 28px); }
.prose h3 { font-size: clamp(18px, 1.6vw, 22px); }
.prose strong { font-weight: 500; color: var(--ink); }
.mono-note { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--fainter); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff; padding: 15px 27px;
  font-size: 14px; font-weight: 500; text-decoration: none; border: 0; cursor: pointer; border-radius: var(--r-sm);
}
.btn:hover { background: var(--accent); color: var(--ink); }
.btn .arr { font-size: 16px; }
.btn--inverse { background: #fff; color: var(--ink); }
.btn--inverse:hover { background: var(--accent); color: var(--ink); opacity: 1; }
.link-u {
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink);
  font-size: 14px; font-weight: 500; text-decoration: none;
  border-bottom: 1px solid var(--ink); padding-bottom: 3px;
}
.link-u:hover { opacity: 1; box-shadow: inset 0 -6px 0 var(--accent); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.navbar { display: flex; justify-content: space-between; align-items: center; height: 70px; gap: 24px; }
.navbar .logo { display: flex; align-items: center; color: var(--ink); }
.navbar .logo svg { height: 26px; width: auto; display: block; }
.navbar nav { display: flex; align-items: center; gap: clamp(16px, 1.7vw, 26px); }
.navbar nav > a:not(.btn), .navbar nav .nav-item > .nav-link { font-size: 16px; text-decoration: none; color: var(--ink); white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow .15s ease; }
.navbar nav > a:not(.btn):hover, .navbar nav .nav-item > .nav-link:hover { opacity: 1; box-shadow: inset 0 -6px 0 var(--accent); }
.nav-end { display: flex; align-items: center; gap: 14px; }
.nav-end a.btn { padding: 11px 20px; font-size: 15px; }
.nav-end a.btn:hover { opacity: 1; }
/* toggle is CSS-only: no JS, so the menu still works if scripts fail */
.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; cursor: pointer; align-items: center; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform .18s ease, opacity .18s ease; }

/* ---------- sections ---------- */
.section { border-top: 1px solid var(--line); }
.section--flush { border-top: 0; }
.section .inner { padding: clamp(38px, 4.4vw, 64px) 0; }
.section .inner--top { padding-bottom: 0; }
.section .inner--stats { padding: clamp(56px, 7vw, 100px) 0; }
/* card grid under a section rule: top gap on the shared rhythm, bottom on the
   normal section value. Was an inline clamp(48px,6vw,80px) in the templates. */
.cards-band { padding: var(--stack) 0 clamp(48px, 4.4vw, 64px); }

/* hero */
.hero { padding: clamp(56px, 7vw, 100px) 0 clamp(40px, 5vw, 72px); }
.hero--sub { padding-top: var(--stack); padding-bottom: var(--stack); }
/* was style="max-width:16ch" inline in list.html, single.html and projects/list.html.
   16ch at the old 76px forced 3-4 line headlines. One place to tune it now. */
.hero--sub .h1 { max-width: 26ch; }
.hero .kicker { margin-bottom: clamp(28px, 4vw, 44px); }
.hero .lede { margin-top: var(--stack); font-size: clamp(15px, 1.2vw, 17px); }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; margin-top: clamp(32px, 4vw, 44px); }

/* hero with full-bleed background image (homepage) */
.hero-bg { position: relative; isolation: isolate; background: #0f0f0f; overflow: hidden; }
.hero-bg__media { display: block; position: absolute; inset: 0; z-index: 0; }
.hero-bg__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
  /* photo at original brightness — no filter, no overlay */
}
.hero--onimage {
  position: relative; z-index: 2;
  min-height: 100vh;
  min-height: 100svh; /* svh keeps mobile browser chrome from pushing the fold */
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 4.6vw, 76px) 0;
}
/* text sits on a solid panel — photo stays completely untouched */
.hero-panel {
  max-width: min(430px, 100%);
  padding: clamp(26px, 2.6vw, 42px) clamp(24px, 2.4vw, 40px) clamp(28px, 2.8vw, 44px);
}
/* translucent — the photo still reads through, but denser so it can be smaller */
.hero-panel--light { --panel-bg: rgba(255,255,255,.62); color: var(--ink); }
.hero-panel--light .lede { color: #333; }
.hero-panel .kicker { letter-spacing: .12em; margin-bottom: 14px; }
.hero-panel--light .kicker { color: #444; }
.hero-panel--dark .kicker { color: #d0d0d0; }
.hero-panel--dark { --panel-bg: rgba(15,17,20,.48); color: #fff; }

/* shape: sharp = hard rectangle, rounded = soft corners, soft = feathered, no edge */
.hero-panel { position: relative; }
.hero-panel > * { position: relative; z-index: 1; }
.hero-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0; background: var(--panel-bg);
}
.hero-panel--rounded::before { border-radius: var(--r-lg); }
.hero-panel--soft::before {
  inset: -2% -3%;
  /* fade reaches full transparency inside the box, so no edge is ever drawn */
  -webkit-mask-image: radial-gradient(74% 74% at 40% 50%, #000 0%, rgba(0,0,0,.92) 38%, rgba(0,0,0,.45) 70%, transparent 100%);
          mask-image: radial-gradient(74% 74% at 40% 50%, #000 0%, rgba(0,0,0,.92) 38%, rgba(0,0,0,.45) 70%, transparent 100%);
}
.hero-panel--soft.hero-panel--light { --panel-bg: rgba(255,255,255,.80); }
.hero-panel--soft.hero-panel--dark { --panel-bg: rgba(15,17,20,.62); }
.hero-panel--dark .kicker { color: rgba(255,255,255,.6); }
.hero-panel--dark .h1 { color: #fff; }
.hero-panel--dark .lede { color: rgba(255,255,255,.8); }
.hero-panel--dark .link-u { color: #fff; border-bottom-color: rgba(255,255,255,.85); }
/* tighter than the full-bleed hero so the CTAs stay above the fold on a laptop */
.hero-panel .h1--home { font-size: clamp(30px, 3.5vw, 46px); max-width: none; }
.hero-panel .lede { max-width: none; margin-top: clamp(16px, 1.8vw, 24px); font-size: clamp(14.5px, 1.15vw, 16px); }
.hero-panel .ctas { margin-top: clamp(20px, 2.2vw, 30px); }
@media (max-width: 760px) {
  .hero--onimage { min-height: 100svh; }
  /* keep the panel compact so more of the photo shows around it */
  .hero-panel { max-width: 90%; padding: 24px 20px 26px; }
  .hero-panel .h1--home { font-size: clamp(27px, 7.2vw, 33px); }
  .hero-panel .lede { font-size: 14.5px; }
}
.breadcrumb {
  padding: var(--stack) 0 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.breadcrumb a { text-decoration: none; color: var(--faint); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .cur { color: var(--ink); }

/* figure plate */
.fig-plate-wrap { padding: 0 0 clamp(56px, 7vw, 96px); }
.fig-plate {
  position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: repeating-linear-gradient(135deg, #fafafa 0, #fafafa 11px, #f2f2f2 11px, #f2f2f2 12px);
  aspect-ratio: 16/7; width: 100%; display: flex; align-items: center; justify-content: center;
}
.fig-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fig-plate .fig-id { position: absolute; top: 14px; left: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--fainter); }
.fig-plate .fig-cap {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); background: #fff; padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--r-sm);
}

/* two-col intro */
.intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); }
.intro .kicker { margin-bottom: 24px; }
.intro .prose { display: flex; flex-direction: column; gap: 22px; max-width: 62ch; }
.intro .prose p + p { margin-top: 0; }

/* section head */
.sec-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 16px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head .kicker { margin-bottom: 20px; }

/* card grid (home services) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
/* Two-column grid so the index number sits on the SAME BASELINE as the title's
   first line. Absolute positioning (round 3, first attempt) left it 10.5px high
   and reading as unrelated to the title. Baseline alignment is why this is a
   grid and not a flex column — do not "simplify" it back. */
.card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(18px, 1.7vw, 22px); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: baseline; column-gap: 18px; min-height: 150px; text-decoration: none; color: var(--ink); }
.card:hover { background: var(--hover-bg); box-shadow: inset 0 3px 0 var(--accent); }
/* the index number shares row 1 with the title instead of owning a line above it.
   In flow above the title it cost 39px of every card (its own 15px line + the 24px
   gap beneath) to show two characters. column-gap keeps it clear of the title text;
   measured worst-case clearance 19px, typical 30px.

   --num-lift is an OPTICAL correction, not a nudge. Sitting the number on the title's
   baseline is typographically correct but looks wrong at a 2:1 size ratio: Archivo 22/600
   has a 15.09px cap height, IBM Plex Mono 11px has 7.68px, so on a shared baseline the
   number's cap top lands 7.41px BELOW the title's cap top and it reads as sagging.
   Lifting by that 7.41 puts the two CAP TOPS on one line — a visible edge to align to.
   Verified with a zero-height inline baseline probe: cap-top delta 0.02px.
   Set --num-lift to 3.7px instead to centre the number on the title's cap height
   (optical centring, delta 0.01px) — the only other defensible value. */
.card { --num-lift: 3.7px; }
.card .num { grid-column: 2; grid-row: 1; position: relative; top: calc(-1 * var(--num-lift)); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--fainter); }
.card .t { grid-column: 1; grid-row: 1; margin-top: 0; padding-top: 0; min-height: 2.4em; font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.card .d { grid-column: 1 / -1; grid-row: 2; margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--body-3); }
.card--dark { background: var(--ink); color: #fff; }
.card--dark:hover { background: var(--accent); color: var(--ink); box-shadow: none; }
.card--dark:hover .num { color: #5f6b2a; }
.card--dark .num { color: #7a7a7a; }
/* the dark CTA card keeps its arrow on row 1 and drops its text to the bottom */
.card--dark .t { grid-column: 1 / -1; grid-row: 2; align-self: end; margin-top: 0; padding-top: 0; min-height: 0; }

/* numbered / titled rows */
.rows .row {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(20px, 4vw, 56px); border-top: 1px solid var(--line);
  padding: clamp(24px, 2.6vw, 34px) 0; align-items: start;
}
.rows .row .t { font-size: clamp(19px, 1.7vw, 23px); font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.rows .row .d { font-size: clamp(15px, 1.35vw, 17.5px); line-height: 1.6; color: var(--body-2); max-width: 64ch; }
.rows--num .row { grid-template-columns: auto minmax(0, 4fr) minmax(0, 7fr); gap: clamp(18px, 4vw, 56px); padding: clamp(26px, 2.8vw, 38px) 0; }
.rows--num .row:hover { background: var(--hover-bg); border-radius: var(--r-sm); box-shadow: inset 3px 0 0 var(--accent); }
.rows--num .row .num { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--fainter); padding-top: 6px; }
.rows--num .row .t { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; }

/* who grid */
.who-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
.who-grid .cell { border-top: 1px solid var(--ink); padding: 24px 0 28px; }
.who-grid .num { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--fainter); margin-bottom: 18px; }
.who-grid .t { font-size: clamp(21px, 2.2vw, 30px); font-weight: 500; letter-spacing: -.02em; line-height: 1.14; }
.rows-foot { margin: clamp(26px, 3vw, 38px) 0 0; font-size: clamp(15px, 1.2vw, 16.5px); line-height: 1.6; color: var(--body-3); max-width: 70ch; }
.who-grid a.cell { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s ease; }
.who-grid a.cell:hover { box-shadow: inset 0 3px 0 var(--accent); }
.who-grid a.cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.who-note { margin-top: clamp(32px, 4vw, 48px); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.6; color: var(--body-3); max-width: 60ch; }

/* process */
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(24px, 3vw, 40px); }
.process-grid .step { border-top: 1px solid var(--ink); padding-top: 22px; }
.process-grid .num { font-family: var(--mono); font-size: clamp(30px, 3vw, 44px); letter-spacing: -.02em; line-height: 1; }
.process-grid .t { margin-top: 24px; font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.process-grid .d { margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--body-3); }

/* stats */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(28px, 3vw, 44px); }
.stats-grid .stat { border-top: 1px solid var(--line); padding-top: 24px; }
.stats-grid .n { font-size: clamp(38px, 4.6vw, 66px); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.stats-grid .l { margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

/* tools strip (dark) */
.section--dark { background: var(--ink); color: #fff; }
.tools-inner { padding: clamp(48px, 6vw, 80px) 0; }
.tools-inner .kicker { color: #7a7a7a; margin-bottom: clamp(28px, 3vw, 40px); }
.tools-list { display: flex; flex-wrap: wrap; gap: 14px 12px; }
.tools-list span { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--line); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-sm); padding: 10px 16px; }

/* dark CTA */
.cta-dark { background: var(--ink); color: #fff; }
/* One row: copy left, button right. The meta column was deleted - with Offices
   and Standards gone it held a single Email, which is the third appearance of
   that address on the same screen. Bottom padding cut 128 -> 72 because the
   footer that follows is the same ink colour, so the two paddings stacked into
   232px of seamless empty dark. Mobile-first; desktop columns above 861px. */
.cta-dark .inner {
  padding: clamp(56px, 6vw, 84px) 0 clamp(44px, 4.6vw, 72px); display: grid;
  grid-template-columns: 1fr; gap: clamp(26px, 3vw, 40px); align-items: end;
}
@media (min-width: 861px) {
  .cta-dark .inner { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(40px, 5vw, 72px); }
  .cta-dark .cta-action { justify-self: end; }
}
.cta-dark .kicker { color: #7a7a7a; margin-bottom: clamp(24px, 3vw, 36px); }
.cta-dark h2 { font-size: clamp(34px, 5vw, 68px); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.cta-dark .lede { margin: clamp(24px, 3vw, 34px) 0 0; color: var(--dark-body); max-width: 56ch; }
.cta-dark .btn { margin-top: clamp(28px, 3.5vw, 40px); }
/* WhatsApp is the secondary action: a link, not a second button. Two filled
   buttons would split the click and imply the form and a chat are equivalent,
   which they are not - the form returns a scope we can quote against. */
.cta-dark .link-u { color: #fff; border-bottom-color: rgba(255,255,255,.85); }
.cta-wa { margin-top: 16px; }
.cta-action { display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 861px) { .cta-action { align-items: flex-end; } }

/* footer */
.site-footer { background: var(--ink); color: #fff; }
/* top padding cut 104 -> 72: see the note on .cta-dark .inner */
.site-footer .cols {
  padding: clamp(48px, 5vw, 72px) 0 clamp(40px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px 32px;
}
.site-footer svg { height: 30px; width: auto; display: block; color: #fff; }
.site-footer .tag { margin: 22px 0 0; font-size: 15px; line-height: 1.55; color: var(--faint); max-width: 30ch; }
.site-footer .col-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #6e6e6e; margin-bottom: 18px; }
.site-footer .cols a, .site-footer .cols .plain { display: block; padding: 7px 0; font-size: 14.5px; color: #cfcfcf; text-decoration: none; }
.site-footer .cols a:hover { color: #fff; }
.site-footer .legal { border-top: 1px solid rgba(255,255,255,.12); }
/* only when the footer follows the dark CTA, where there is otherwise no seam */
main:has(.cta-dark) + .site-footer .cols { border-top: 1px solid rgba(255,255,255,.12); }
.site-footer .legal .wrap {
  padding: 22px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #7a7a7a;
}

/* blog / plain article */
.article { padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 8vw, 120px); }
.article .meta { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 24px; }
.article h1 { font-size: clamp(32px, 4.4vw, 56px); font-weight: 500; letter-spacing: -.02em; line-height: 1.05; max-width: 22ch; margin-bottom: clamp(32px, 4vw, 48px); }
.article .prose img { border: 1px solid var(--line); border-radius: var(--r-md); margin: 32px 0; }
.article .prose h2 { border-top: 1px solid var(--line); padding-top: 28px; }

.list-rows .item { display: block; border-top: 1px solid var(--line); padding: clamp(24px, 2.6vw, 34px) 0; text-decoration: none; color: var(--ink); }
.list-rows .item:hover { background: var(--hover-bg); border-radius: var(--r-sm); box-shadow: inset 3px 0 0 var(--accent); }
.list-rows .item .t { font-size: clamp(20px, 1.9vw, 26px); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
.list-rows .item .d { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--body-2); max-width: 70ch; }

/* responsive */
@media (max-width: 860px) {
  .nav-burger { display: flex; }
  .navbar .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    text-align: left;
    background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 4px 4vw 12px;
    box-shadow: 0 18px 34px rgba(0,0,0,.07);
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .nav-toggle:checked ~ .wrap .nav-links { display: flex; }
  .navbar { position: static; }
  .navbar .nav-links > a, .navbar .nav-links .nav-item > .nav-link { display: block; padding: 15px 2px; font-size: 16px; border-bottom: 1px solid var(--line-soft); }
  .navbar .nav-links > a:last-child { border-bottom: 0; }
  /* burger becomes a close icon while the menu is open */
  .nav-toggle:checked ~ .wrap .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .wrap .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .wrap .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* dropdowns become accordions: the label navigates, the caret expands */
  .navbar .nav-links .nav-item { position: static; display: grid; grid-template-columns: 1fr 44px; align-items: center; height: auto; border-bottom: 1px solid var(--line-soft); }
  .navbar .nav-links .nav-item > .nav-link { border-bottom: 0; }
  .nav-item > .nav-link::after { display: none; }
  .sub-caret { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; }
  .sub-caret span { width: 8px; height: 8px; border-right: 2px solid var(--body-3); border-bottom: 2px solid var(--body-3); transform: translateY(-3px) rotate(45deg); transition: transform .18s ease; }
  .sub-toggle:checked ~ .sub-caret span { transform: translateY(2px) rotate(-135deg); }
  .nav-panel { grid-column: 1 / -1; display: none; padding: 0 0 12px 14px; }
  .nav-panel-all { margin: 10px 0 0 0; }
  .sub-toggle:checked ~ .nav-panel { display: block; }
  .nav-panel-list a { padding: 10px 0; font-size: 15px; white-space: normal; }
  .intro, .cta-dark .inner { grid-template-columns: 1fr; }
  .rows .row, .rows--num .row { grid-template-columns: 1fr; gap: 10px; }
  .rows--num .row .num { padding-top: 0; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
}

/* ---------- nav dropdown panels ---------- */
/* No JavaScript. Pointer users get hover; keyboard users get :focus-within, which
   works because the closed panel is clipped (clip-path) rather than hidden with
   visibility/display — its links stay in the tab order. The parent label stays a
   real link to the section landing page, and the panel repeats that page as an
   explicit "All services" row so touch users, who cannot hover, still reach it.

   IMPORTANT: the desktop behaviour is scoped to (min-width: 861px). These rules
   sit AFTER the max-width:860px block in this file, so unscoped they would win on
   mobile at equal specificity and kill the accordion. Do not unwrap them. */
.nav-item { position: relative; }
.sub-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-panel-list { list-style: none; margin: 0; padding: 0; }
.nav-panel-list li { break-inside: avoid; }
.nav-panel-list a { display: block; padding: 7px 0; font-size: 14.5px; line-height: 1.3; color: var(--body-3); text-decoration: none; box-shadow: inset 0 -2px 0 transparent; transition: color .12s ease, box-shadow .12s ease; }
.nav-panel-list a:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.nav-panel-all { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px 0 transparent; }
.nav-panel-all:hover { box-shadow: inset 0 -2px 0 var(--accent); }

@media (min-width: 861px) {
  .nav-item { display: flex; align-items: center; height: 70px; }
  .sub-caret { display: none; }
  .nav-item > .nav-link::after { content: ""; display: inline-block; margin-left: 7px; width: 5px; height: 5px; border-right: 1.5px solid var(--fainter); border-bottom: 1.5px solid var(--fainter); transform: translateY(-2px) rotate(45deg); }
  .nav-panel { position: absolute; top: 100%; left: -18px; z-index: 60; padding: 16px 20px 13px; background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: 0 18px 34px rgba(0,0,0,.09); opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); transition: opacity .14s ease, clip-path .16s ease; }
  .nav-item:hover > .nav-panel, .nav-item:focus-within > .nav-panel { opacity: 1; pointer-events: auto; clip-path: inset(0); }
  .nav-panel { max-height: calc(100vh - 90px); overflow-y: auto; }
  .nav-panel-list a { white-space: nowrap; }
  .nav-panel-all { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
}

/* ---------- contact page: denser than the rest of the site ---------- */
/* Contact page extras. The hero/section density that used to live here is now the
   site-wide default (Maciej R1 part 4) - only genuinely page-specific rules remain. */
[data-page="contact"] .section .inner--top { padding-bottom: 0; }
[data-page="contact"] .intro { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(22px, 3.2vw, 48px); }
[data-page="contact"] .intro .h2 { font-size: clamp(22px, 2.2vw, 30px); }
[data-page="contact"] .intro .prose { gap: 11px; }
[data-page="contact"] .intro .prose p { font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.5; }

/* ---------- contact page: form + contact card in one band ---------- */
/* Maciej R1. The page was three stacked half-empty bands with the form 1265px
   down; this puts the form and the card side by side so the primary action is
   above the fold. Mobile-first: the card comes FIRST on a phone, where tapping
   WhatsApp beats typing a brief with your thumbs, and the columns only appear
   at min-width 861px. Do NOT unscope — the max-width:860px block is earlier in
   this file and would lose. */
.contact-layout { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 3.6vw, 52px); }
.contact-form-col { order: 2; min-width: 0; }
.contact-card { order: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 2.4vw, 30px); align-self: start; }
.contact-form-col > .kicker { margin-bottom: clamp(16px, 1.8vw, 22px); }
.contact-layout .qform { max-width: none; }
.contact-layout .qform-grid { grid-template-columns: 1fr; gap: 20px; }

.contact-details { display: grid; gap: 17px; }
.contact-row dt { margin-bottom: 5px; }
.contact-row dd { margin: 0; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.45; color: var(--ink); }
.contact-row dd a { color: var(--ink); text-decoration: none; box-shadow: inset 0 -1px 0 var(--line); transition: box-shadow .12s ease; }
.contact-row dd a:hover { box-shadow: inset 0 -2px 0 var(--accent); }

.wa-block { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.wa-number { margin-top: 5px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.45; }  /* Maciej R1 part 4: was 23px/500 while every other value in the card is 17px/400. */
.wa-qr { display: none; margin-top: 16px; width: 132px; height: 132px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.wa-note { display: none; margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--body-3); max-width: 34ch; }
.wa-btn { margin-top: 16px; display: inline-flex; align-items: center; gap: 9px; }
.wa-btn svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

@media (min-width: 861px) {
  .contact-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 4vw, 72px); align-items: start; }
  .contact-form-col { order: 1; }
  .contact-card { order: 2; }
  .wa-qr { display: block; }
  .wa-note { display: block; }
}

/* ---------- imprint ---------- */
/* Mobile-first: offices stack, columns only above 861px. See the note on the
   contact layout — the max-width:860px block is earlier in this file. */
.imp-offices { display: grid; grid-template-columns: 1fr; gap: 22px 30px; margin-top: 4px; }
.imp-offices .kicker { margin-bottom: 7px; }
.imp-offices p { font-size: 14.5px; line-height: 1.55; }
[data-page="imprint"] .prose p { font-size: clamp(14.5px, 1.1vw, 16px); line-height: 1.55; max-width: 74ch; }
[data-page="imprint"] .prose p + p { margin-top: 14px; }
[data-page="imprint"] .prose h2 { font-size: clamp(17px, 1.5vw, 20px); margin: clamp(30px, 3vw, 40px) 0 12px; }
[data-page="imprint"] .prose h2:first-child { margin-top: 0; }
[data-page="imprint"] .imp-offices p + p { margin-top: 0; }
@media (min-width: 861px) {
  .imp-offices { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
}

/* ---------- about: text blocks + team ---------- */
/* Mobile-first; desktop columns above 861px only. The max-width:860px block is
   earlier in this file, so unscoped desktop rules here would win on phones. */
.about-block { display: grid; grid-template-columns: 1fr; gap: 14px; padding: clamp(26px, 3vw, 40px) 0; border-top: 1px solid var(--line); }
.about-block:first-child { padding-top: 0; border-top: 0; }
.about-block .prose p + p { margin-top: 16px; }

.team-head { margin-bottom: clamp(24px, 2.8vw, 36px); }
.team-grid { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 3.4vw, 44px); }
.team-member { display: grid; grid-template-columns: 1fr; gap: 16px; }
.team-photo img { display: block; width: 100%; max-width: 210px; height: auto; border-radius: var(--r-md); }
.team-name { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.team-role { margin-top: 5px; }
.team-bio { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--body-3); }

@media (min-width: 861px) {
  .about-block { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 3.4vw, 56px); }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4vw, 64px); }
  .team-member { grid-template-columns: 168px minmax(0, 1fr); gap: 24px; align-items: start; }
  .team-photo img { max-width: none; }
}

/* About page extras. Density is site-wide now; these are page-specific only. */
[data-page="about"] .hero .lede { max-width: 74ch; }
[data-page="about"] .h2 { font-size: clamp(20px, 2vw, 26px); }
[data-page="about"] .prose p { font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.6; max-width: 70ch; }

/* ---------- legal documents (privacy policy) ---------- */
.legal-updated { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
[data-page="privacy-policy"] .prose p { font-size: clamp(14.5px, 1.1vw, 16px); line-height: 1.6; max-width: 74ch; }
[data-page="privacy-policy"] .prose p + p { margin-top: 14px; }
[data-page="privacy-policy"] .prose h2 { font-size: clamp(17px, 1.5vw, 20px); margin: clamp(30px, 3vw, 40px) 0 12px; }
[data-page="privacy-policy"] .prose ul { margin: 12px 0 0; max-width: 74ch; }
[data-page="privacy-policy"] .prose li { font-size: clamp(14.5px, 1.1vw, 16px); padding: 11px 0; }
[data-page="privacy-policy"] .legal-updated { margin-bottom: 22px; }

/* ---------- projects: portfolio grid + project page ---------- */
/* Mobile-first; columns only above the 860px block. */
/* Framed as one shell, exactly like .card-grid on the section indexes (Maciej,
   round 3: "make the small frame in a similar way like in grid menu of services").
   Borders live on the cells; the grid draws only top+left and clips to the radius. */
.proj-grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.proj-card { display: block; text-decoration: none; color: var(--ink); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(18px, 1.7vw, 22px); }
.proj-card:hover { background: var(--hover-bg); box-shadow: inset 0 3px 0 var(--accent); }
/* no border on the image: it sits inside a bordered cell, two hairlines read as a mistake */
.proj-card__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); }
.proj-card__t { margin-top: 14px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.proj-card__d { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--body-3); }
.proj-card:hover .proj-card__t { box-shadow: inset 0 -2px 0 var(--accent); }

/* Hero with a stats column beside it. Mobile-first: stacked by default, two columns
   only at 861px+ (see the cascade note above). Used by /projects/ via hero_stats.
   Maciej asked for the mockup treatment "troche bardziej plaskie" - flatter - so the
   figures are 30/34px against the .stats-grid band's 66px. */
.hero-stats { display: flex; flex-direction: column; margin-top: 26px; }
.hero-stats > div { border-top: 1px solid var(--line); padding: 13px 0; }
.hero-stats dt { font-size: 30px; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.hero-stats dd { margin: 7px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

/* flex, not a fixed 3-col grid: the strip packs left and reads the same with 2, 3 or 4
   facts. It was repeat(3,1fr), which left a visible empty column when Client was removed. */
.proj-facts { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 2.4vw, 30px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proj-facts dt { margin-bottom: 5px; }
.proj-facts dd { margin: 0; font-size: clamp(14.5px, 1.15vw, 16px); line-height: 1.5; color: var(--ink); }

.proj-shots { display: grid; gap: clamp(16px, 2vw, 26px); padding: clamp(30px, 3.6vw, 52px) 0 0; }
.proj-shot { margin: 0; }
.proj-shot img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--line); }
.proj-shot figcaption { margin-top: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

.proj-body h2 { font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; margin: clamp(26px, 3vw, 36px) 0 10px; }
.proj-body h2:first-child { margin-top: 0; }
.proj-body p { font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.6; color: var(--body); max-width: 74ch; }
.proj-body p + p { margin-top: 14px; }

@media (min-width: 861px) {
  .proj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .58fr); column-gap: clamp(40px, 5vw, 84px); align-items: start; }
  .hero--split .hero-main { min-width: 0; }
  .hero--split .hero-stats { margin-top: 0; border-left: 1px solid var(--line); padding-left: clamp(30px, 3.2vw, 50px); }
  .hero--split .hero-stats > div:first-child { border-top: 0; padding-top: 0; }
  .hero--split .hero-stats dt { font-size: 34px; }
  .hero--split .lede { max-width: 46ch; }
  .proj-facts { flex-direction: row; flex-wrap: wrap; gap: 24px clamp(48px, 6vw, 96px); }
  .proj-facts > div { max-width: 42ch; }
}
@media (min-width: 601px) and (max-width: 860px) {
  .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- accent ---------- */
/* On white the lime is ~1.2:1 against the background, so it is never used as text
   there — only as fills, edges and underlines. On the ink sections it is ~15:1,
   so it is safe as text. */
.site-footer a:hover { color: var(--accent); opacity: 1; }
.tools-list span:hover { border-color: var(--accent); color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.navbar .nav-links > a:active, .navbar .nav-links .nav-item > .nav-link:active { background: var(--accent); }

/* ---------- transparent header over the homepage hero ---------- */
/* Gated on .js: without scripting the header stays solid, so nav text can never
   end up sitting unreadably over page content. */
.js .site-header--overlay {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent;
  transition: background .22s ease, border-color .22s ease;
}
.js .site-header--overlay.is-stuck { background: #fff; border-bottom-color: var(--line); }
/* the menu panel needs a solid bar behind it while open */
.js .site-header--overlay:has(.nav-toggle:checked) { background: #fff; border-bottom-color: var(--line); }
/* hero starts at the very top of the page and runs under the bar */
.js .site-header--overlay + main .hero--onimage { padding-top: calc(70px + clamp(40px, 4.6vw, 76px)); }

/* ---------- quote form ---------- */
/* anchor sits on the heading, not the section, so the jump ignores the section's top padding */
#quote { scroll-margin-top: 96px; }
.qform-lede { margin-bottom: clamp(28px, 3vw, 40px); }
.qform { max-width: 780px; }
.qform-gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.qform .field--full { grid-column: 1 / -1; }
.qform label {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--body-3); margin-bottom: 9px;
}
.qform label .opt { color: var(--fainter); letter-spacing: .1em; }
.qform input, .qform textarea {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 14px 15px; line-height: 1.45; -webkit-appearance: none;
}
.qform textarea { resize: vertical; min-height: 150px; }
.qform input:hover, .qform textarea:hover { border-color: var(--fainter); }
.qform input:focus, .qform textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent);
}
.qform .hint { margin-top: 9px; font-size: 13px; line-height: 1.5; color: var(--body-3); }
.qform-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px;
  margin-top: clamp(26px, 3vw, 36px);
}
.qform button[disabled] { opacity: .55; cursor: default; }
.qform-status { font-size: 14px; line-height: 1.5; color: var(--body); margin: 0; }
.qform-status.is-ok { color: var(--ink); font-weight: 500; }
.qform-status.is-err { color: #b3261e; }
@media (max-width: 700px) {
  .qform-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- careers: job pages ---------- */
/* Mobile-first, and no media query needed above the .job-meta strip — the
   max-width:860px block sits earlier in this file (see the note on .imp-offices). */
.job-meta {
  margin: var(--stack) 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--body-3);
}
.job-meta span { display: inline-flex; gap: 14px; }
.job-meta span:not(:last-child)::after { content: "\00b7"; color: var(--fainter); }

/* "Job information" — label/value pairs inside a block. Same hairline rhythm as
   .prose li, so the spec table reads as part of the same list system. */
.spec-row { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.spec-row:first-child { border-top: 0; padding-top: 0; }
.spec dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.spec dd { font-size: clamp(15px, 1.35vw, 17px); line-height: 1.55; color: var(--body-2); max-width: 62ch; }
@media (min-width: 861px) {
  .spec-row { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 24px; align-items: baseline; }
}

/* Portrait or square project drawings — an exploded axonometric is tall by
   nature, and at the full 1240px column it runs past the viewport. Cap the
   height and centre it instead. Opt-in per image with `tall: true`; landscape
   photographs keep the full-width treatment. No media query: width:auto keeps
   it inside the column on a phone too. */
.proj-shot--tall img { width: auto; max-width: 100%; max-height: 76vh; margin-inline: auto; }