/* BELÍK STEEL – draft 4. Clean-cut: square corners everywhere, hairlines, lots of white,
   steel greys and one spark orange. Northflank-clean, in light. Mobile first. */
:root {
  --bg: #fff;
  --soft: #f5f6f7;
  --line: #e2e5e8;
  --line-2: #c9cfd5;
  --ink: #12171c;
  --steel: #5b6670;
  --steel-2: #8b959e;
  --spark: #ff6a1a;
  --spark-ink: #c94f0c;
  --wrap: 1120px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--bg);
  --wpad: 1.25rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
body { margin: 0; padding-top: 52px; padding-bottom: 0; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2 { margin: 0; letter-spacing: -0.03em; line-height: 1.05; }
p { margin: 0; }
.mono { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }

/* placeholders for copy still to be written – meant to be seen (none left on the page) */
.ph { color: var(--spark-ink); font-family: var(--mono); font-size: .8em; letter-spacing: .04em;
  border: 1px dashed var(--spark); padding: .1em .45em; background: #fff8f3; }
.draft-bar { text-align: center; padding: .5rem 1rem; color: var(--steel); border-bottom: 1px solid var(--line); }
.draft-bar .ph { font-size: 1em; padding: 0 .3em; }

/* header */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 1.6rem; height: 52px; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.mark { width: 26px; height: 26px; flex: none; color: var(--ink); }
.wordmark { font-weight: 800; letter-spacing: .2em; font-size: .9rem; display: flex; gap: .45em; }
.wordmark b { font-weight: 400; color: var(--steel); }
.nav { display: none; gap: 1.8rem; }
.nav a { text-decoration: none; color: var(--steel); font-size: .92rem; }
.nav a:hover { color: var(--ink); }

/* buttons: square */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem 1.1rem;
  font: inherit; font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.btn-small { min-height: 36px; padding: .3rem .9rem; font-size: .86rem; }
.btn-spark { background: var(--spark); color: #fff; border-color: var(--spark); }
.btn-spark:hover { background: var(--spark-ink); border-color: var(--spark-ink); }
.btn-line { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; }

/* hero: words only, inside corner ticks */
.hero { position: relative; border-bottom: 1px solid var(--line); padding: 2.2rem 0 2.2rem;
}
.hero-in { position: relative; }
.hero h1 { font-size: clamp(1.6rem, 6.8vw, 3.7rem); font-weight: 720; max-width: 17ch; }
.hero h1::after { content: ""; display: block; width: 44px; height: 3px; background: var(--spark); margin-top: 1.1rem; }
.actions { display: grid; gap: .6rem; margin-top: 2rem; max-width: 380px; }
.towns { margin-top: 1.6rem; color: var(--steel); font-size: 1.05rem; }

/* sections */
.section { padding-top: 3rem; }
.head { display: grid; gap: .6rem; margin-bottom: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--ink); }
.head h2 { font-size: clamp(1.45rem, 5.8vw, 3rem); font-weight: 700; }
.section-lead { color: var(--steel); }

/* gallery: the six photos, square-cut, no labels */
/* whole photos, never cropped: columns take each at its own shape */
.gallery { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 6px; }
.shot { break-inside: avoid; margin-bottom: 6px; }
.shot button { all: unset; display: block; cursor: zoom-in; overflow: hidden; background: var(--soft); width: 100%; }
.shot button:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
.shot img { width: 100%; height: auto; transition: transform .4s; }
.shot button:hover img { transform: scale(1.025); }

/* contact */
.contact { display: grid; gap: 2.5rem; }
.lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lines li { border-bottom: 1px solid var(--line); }
.lines li > * { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .8rem 0; text-decoration: none; }
.lines span { color: var(--steel); }
.lines b { font-weight: 500; font-size: .95rem; letter-spacing: .04em; }
.lines a:hover b { color: var(--spark-ink); }
.consent a { color: var(--ink); }
.lines .copy { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; width: 100%; padding: 1rem 0; cursor: copy; }
.lines .copy:focus-visible { outline: 2px solid var(--spark); }
.lines .copy:hover b { color: var(--spark-ink); }

@media (hover: hover) and (pointer: fine) { [data-copy] { cursor: copy; } }
.toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 30; padding: .7rem 1rem;
  background: var(--ink); color: #fff; white-space: nowrap; }

.inquiry { display: grid; gap: 1rem; align-content: start; }
.row2 { display: grid; gap: 1rem; }
.inquiry label { display: grid; gap: .35rem; font-size: .88rem; color: var(--steel); }
.inquiry .opt { color: var(--steel-2); }
.inquiry input, .inquiry textarea { font: inherit; font-size: 1rem; padding: .7rem .8rem; border: 1px solid var(--line-2);
  background: #fff; color: var(--ink); width: 100%; }
.inquiry input:focus, .inquiry textarea:focus { outline: none; border-color: var(--ink); }
.file { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .4rem 1rem; padding: .9rem; border: 1px dashed var(--line-2); background: var(--soft); }
.file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file input:focus-visible + label { outline: 2px solid var(--spark); outline-offset: 2px; }
.file label.btn { display: inline-flex; font-size: .86rem; color: var(--ink); cursor: pointer; }
.file-name { color: var(--steel); font-size: .88rem; overflow-wrap: anywhere; }   /* the whole sentence shows; it wraps if it must */
.file .hint { grid-column: 1 / -1; color: var(--steel-2); font-size: .84rem; }
.inquiry .consent { grid-template-columns: auto 1fr; align-items: start; }
.inquiry .consent input { width: 18px; height: 18px; margin-top: .1rem; accent-color: var(--spark); }
.inquiry .btn { justify-self: start; }
.form-note { color: var(--spark-ink); }

/* privacy page */
.legal { padding-top: 4rem; max-width: 760px; }
.legal h1 { font-size: clamp(2rem, 7vw, 3rem); font-weight: 700; }
.legal h2 { font-size: 1.15rem; font-weight: 650; letter-spacing: -0.01em; margin: 2.2rem 0 .5rem; }
.legal p { color: var(--steel); max-width: 64ch; }
.legal a { color: var(--ink); }
.legal .stamp { margin-top: 2.5rem; color: var(--steel-2); }

/* address: the value copies, Mapy → opens the maps app */
.lines li.addr { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .8rem 0; }
.lines li.addr > span:first-child { color: var(--steel); }
.addr-r { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }
.lines li.addr .copy { all: unset; cursor: copy; }
.lines li.addr .copy:focus-visible { outline: 2px solid var(--spark); }
.lines li.addr .copy:hover b { color: var(--spark-ink); }
.maps { display: inline-flex; align-items: center; gap: .3rem; color: var(--spark-ink); text-decoration: none; font-family: var(--mono); font-size: .9rem; }
.maps:hover { text-decoration: underline; }

/* drawn arrows, centred exactly in their boxes */
.arr { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
.maps .arr { width: 15px; height: 15px; }
.more { margin-top: 1.4rem; gap: .6rem; }
.more .arr { transition: transform .2s; }
.more:hover .arr { transform: translateX(3px); }
.back { display: inline-flex; align-items: center; gap: .4rem; color: var(--steel); text-decoration: none; margin-bottom: 1.4rem; font-size: .92rem; }
.back:hover { color: var(--ink); }
.section h1 { font-size: clamp(2rem, 7vw, 3rem); font-weight: 700; }


.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* the honeypot: never seen */

/* colour bands: hero blue, gallery white, contact blue – the variables flip inside a blue band */
.band-blue { background: #1d5fd0; color: #fff; --ink: #fff; --steel: rgba(255,255,255,.82); --steel-2: rgba(255,255,255,.62);
  --line: rgba(255,255,255,.25); --line-2: rgba(255,255,255,.45); --soft: rgba(255,255,255,.1); --spark-ink: #ffc196; }
.band-blue .btn-line { background: transparent; color: #fff; border-color: #fff; }
.band-blue .btn-line:hover { background: #fff; color: #1d5fd0; }
.band-blue .inquiry input:not([type="checkbox"]), .band-blue .inquiry textarea { background: #fff; color: #12171c; border-color: #fff; }
.band-blue .inquiry input:focus, .band-blue .inquiry textarea:focus { border-color: var(--spark); }
.band-blue .file { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
.band-blue a { color: #fff; }
.hero { border-bottom: 0; }
.section { position: relative; padding-bottom: 3.5rem; }
.hero > .wrap, .section > .wrap { position: relative; z-index: 1; }

/* blueprint bands between the sections: magnified details of real drawings (tools/film.py), one at a time;
   as you scroll on, the detail moves away and a new one takes its place (mech.js). Labels never under 11 px. */
.stripe { position: relative; height: 180px; overflow: hidden; background-color: #1a55bf;
  border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.crop { position: absolute; inset: 0; display: flex; opacity: 0; transform: translateX(48px);
  transition: opacity .8s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.crop.on { opacity: 1; transform: none; }
.crop.off { opacity: 0; transform: translateX(-48px); }
.panel { flex: 1 1 0; min-width: 0; height: 100%; }
.panel + .panel { border-left: 1px dashed rgba(255,255,255,.4); }
.panel svg { display: block; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-opacity: .55; }   /* faded: never grabbing the eye */
.panel .p { stroke-width: 1.5; }
.panel .q, .panel .d { stroke-width: 1; }
.panel .t { stroke-width: 1.3; }
.panel .c { stroke-width: 1; stroke-opacity: .4; stroke-dasharray: 12 3 2 3; }
.panel circle { stroke-width: 1; }
.panel text { fill: #fff; fill-opacity: .62; font-family: var(--mono); font-size: 11px; letter-spacing: .03em;
  stroke: #1a55bf; stroke-opacity: 1; stroke-width: 4px; stroke-linejoin: round; paint-order: stroke; }   /* a halo in the band's blue: no line ever runs through a number */
/* the annotation draws itself in once, the first time a drawing shows */
.panel .fin[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.4,.1,.2,1) .3s; }
.panel text.fin { opacity: 0; transition: opacity .8s ease 1.1s; }
.crop.done .fin[pathLength] { stroke-dashoffset: 0; }
.crop.done text.fin { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .crop { transition: none; transform: none; } }

/* the company name, large, above the line */
.hero-name { display: block; font-size: clamp(2.7rem, 13.5vw, 7.2rem); font-weight: 800; letter-spacing: .01em; line-height: .95; margin-bottom: .9rem; }
.hero-line { display: block; font-size: clamp(1.2rem, 5vw, 2.3rem); font-weight: 650; line-height: 1.15; max-width: 22ch; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 4 · the maps button, standalone */
.details { display: grid; align-content: start; }
.maps-btn { justify-self: start; margin-top: 1rem; gap: .6rem; }
.maps-btn:hover .arr { transform: translateX(3px); }
.maps-btn .arr { transition: transform .2s ease; }

/* 2 · after sending: the form steps back, a check draws itself, a short thank-you */
.form-col { display: grid; }
.form-col > * { grid-area: 1 / 1; }
.inquiry.sent { opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.thanks { align-self: center; justify-self: center; text-align: center; padding: 2rem 0; }
.thanks[hidden] { display: none; }
.thanks .check { display: block; width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 2; margin: 0 auto 1rem; }
.thanks .check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.thanks.show .check .box { animation: draw .6s ease forwards; }
.thanks.show .check .tick { stroke: var(--spark); stroke-width: 3; animation: draw .45s ease .5s forwards; }
.thanks .thanks-big { font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 750; margin-bottom: .3rem; }
.thanks p { opacity: 0; transform: translateY(6px); }
.thanks.show p { animation: rise .45s ease forwards .75s; }
.thanks.show p + p { animation-delay: .9s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rise { to { opacity: 1; transform: none; } }

.consent.need { outline: 1px solid var(--spark); outline-offset: 6px; }
.consent.need span { color: #fff; }

@media (max-width: 480px) { .file { grid-template-columns: 1fr; } .file label.btn { justify-self: start; } }
.inquiry .bad { border-color: var(--spark) !important; box-shadow: 0 0 0 3px rgba(255,106,26,.25); }

/* STEEL in the hero: a dashed outline, no fill (an inline SVG drawn to the font's own size) */
.hero-name .steel-svg { display: inline-block; height: .95em; width: auto; vertical-align: -.17em; overflow: visible; }
.hero-name .steel-svg text { fill: #1d5fd0; stroke: #fff; stroke-width: 2.8; paint-order: stroke fill; stroke-linejoin: round; }
/* why the fill: some fonts (Android's Roboto) build letters from overlapping shapes, and a plain outline shows every
   inner joint. Stroked twice as wide and filled with the hero's blue on top, only the clean outer 1.4 px remains.
   Dashed instead: add  stroke-dasharray: 6 4.4;  (the outer half of each dash shows). */

/* required marks and the message under each field */
.req { color: #ff6b6b; font-weight: 700; margin-left: .1em; }
.err { display: block; min-height: 0; color: #ffd0c2; font-size: .82rem; line-height: 1.35; }
.err:empty { display: none; }
.err::before { content: "! "; color: #ff6b6b; font-weight: 700; }
.err-consent { margin-top: -.4rem; }
.inquiry label > span:first-child { display: block; }

/* the hero's three words, one after another, each with the drawn check */
.ticks { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .9rem; font-size: clamp(.98rem, 3.9vw, 1.6rem); font-weight: 650; }
.tk { display: inline-flex; align-items: center; gap: .45em; opacity: 0; transform: translateY(6px); animation: rise .45s ease forwards; animation-delay: calc(.35s + var(--i) * .55s); }
.tk .ck { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: #fff; stroke-width: 3; }
.tk .ck path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .45s ease forwards; animation-delay: calc(.4s + var(--i) * .55s); }
.tk .ck .tick { stroke: var(--spark); stroke-width: 5; animation-delay: calc(.7s + var(--i) * .55s); }
@media (prefers-reduced-motion: reduce) { .tk { opacity: 1; transform: none; animation: none; } .tk .ck path { stroke-dashoffset: 0; animation: none; } }

/* Instagram captions: two lines under a photo, all of it in the viewer */
.shot-cap { margin: .45rem .15rem .2rem; font-size: .86rem; line-height: 1.4; color: var(--steel);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.lb-cap { max-width: min(640px, calc(100vw - 32px)); margin: .8rem auto 0; color: #fff; font-size: .95rem; line-height: 1.5;
  text-align: center; white-space: pre-line; max-height: 22vh; overflow: auto; }
.lightbox[open] { grid-template-rows: auto auto; align-content: center; }

/* the gallery preview cut out: one dashed line around its outer edge */
.gallery { border: 1px dashed rgba(255,255,255,.6); padding: 8px; }
.band-blue .shot button { background: transparent; }

/* the whole-gallery button: kept in view at the right while the gallery scrolls past */
.more-wrap { position: sticky; bottom: 66px; z-index: 2; display: flex; justify-content: flex-end; margin-top: 1.4rem; pointer-events: none; }
.more-wrap .more { pointer-events: auto; background: #1d5fd0; margin-top: 0; box-shadow: 0 8px 24px -12px rgba(18,23,28,.35); }

/* one colour: the whole page blueprint blue, header included; the footer deep steel graphite */
.band-blue { --bg: #1d5fd0; }
.band-blue .top { background: rgba(29,95,208,.94); border-bottom-color: rgba(255,255,255,.16); }
.band-blue .footer { background: #1b1f24; }
.band-blue .footer .legal-line { color: rgba(255,255,255,.66); }
.band-blue .lightbox::backdrop { background: rgba(14,38,92,.96); }
.band-blue .lightbox button { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.band-blue .lightbox button:hover { background: #fff; color: #1d5fd0; }
.band-blue .toast { background: #12171c; }
.band-blue .shot button { background: rgba(255,255,255,.08); }
/* (the earlier inverting header, kept switched off) */
.top { transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.top.inv { background: rgba(29,95,208,.96); border-bottom-color: transparent; }
.top.inv .wordmark, .top.inv .wordmark b, .top.inv .nav a, .top.inv .mark { color: #fff; }
.top.inv .nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }

/* motion and feedback everywhere – short, precise, never in the way */
html { scroll-behavior: smooth; scroll-padding-top: 52px; }
.btn { transition: background-color .18s, color .18s, border-color .18s, transform .12s, box-shadow .18s; }
.btn:active { transform: scale(.97); }
.btn-spark:hover { box-shadow: 0 6px 18px -8px rgba(255,106,26,.7); }
.nav a, .lines b, .maps, .back, .footer a, .consent a { transition: color .18s; }
.maps .arr, .more .arr, .back .arr { transition: transform .2s ease; }
.maps:hover .arr, .more:hover .arr { transform: translateX(3px); }
.back:hover .arr { transform: translateX(-3px); }
.shot button { overflow: hidden; }
.shot img { transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .3s; }
.shot button:hover img { transform: scale(1.035); }
.shot button:active img { transform: scale(1.01); filter: brightness(.95); }
.inquiry input, .inquiry textarea { transition: border-color .18s, box-shadow .18s; }
.lightbox[open] { animation: lb-in .22s ease-out; }
.lightbox[open] img { animation: lb-img .28s cubic-bezier(.2,.7,.2,1); }
@keyframes lb-in { from { opacity: 0; } }
@keyframes lb-img { from { opacity: 0; transform: scale(.97); } }
.lightbox button { transition: background-color .18s, color .18s, transform .12s; }
.lightbox button:active { transform: scale(.94); }
.lb-next:hover .arr { transform: translateX(2px); }
.lb-prev:hover .arr { transform: translateX(-2px); }
.lightbox .arr { transition: transform .2s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* the bottom call bar appears only once the hero is out of view */
.call-bar { transform: translateY(110%); transition: transform .25s ease; }
.call-bar.show { transform: none; }
@media (prefers-reduced-motion: reduce) { .call-bar { transition: none; } }

/* footer */
.footer { margin-top: 0; background: #eff1f3; }
.footer a { text-decoration: none; border-bottom: 1px solid var(--line-2); }
.footer-in { display: grid; gap: 1.4rem; padding-top: 2.2rem; padding-bottom: calc(2.4rem + 50px); }   /* the call bar lies over this */
.footer .mono { color: var(--steel); line-height: 2; }

/* phones: the call button stays in reach */
.call-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; align-items: center;
  min-height: 50px; background: var(--spark); color: #fff; font-weight: 650; text-decoration: none; }

/* lightbox */
.lightbox { border: 0; padding: 0; margin: 0; inset: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100vh; height: 100dvh; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(255,255,255,.97); }
.lightbox img { display: block; max-width: calc(100vw - 24px); max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); width: auto; height: auto; object-fit: contain; margin: 0; }
.lightbox button { position: fixed; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; }
.lightbox button .arr { width: 20px; height: 20px; }
.lightbox button:hover { background: var(--ink); color: #fff; }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: calc(50% - 24px); }
.lb-next { right: 1rem; top: calc(50% - 24px); }

@media (min-width: 640px) {
  :root { --wpad: 1.6rem; }
  .actions { display: flex; max-width: none; }
  .row2 { grid-template-columns: 1fr 1fr; }
  .gallery { columns: 2; }
}
@media (min-width: 960px) {
  .footer-in { padding-bottom: 2.4rem; }
  .stripe { height: 240px; }
  .more-wrap { bottom: 20px; }
  :root { --wpad: 2rem; }
  body { padding-bottom: 0; }
  .call-bar { display: none; }
  .nav { display: flex; }
  .wrap { padding-left: 2rem; padding-right: 2rem; }
  .section { padding-top: 7rem; }
  .hero { padding: 7rem 0 6rem; }
    .hero h1 { max-width: 15ch; }
  .contact { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .footer-in { grid-template-columns: 1fr auto; align-items: end; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }