/* ---------------------------------------------------------------
   Ślusarstwo i Spawanie — Cieszyn
   Industrial dark-mode one-pager. Colors: charcoal #121212 / slate
   #1E1E1E base, safety-amber #FFB800 / #F5A623 accent.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Fonts — self-hosted (no requests to Google), latin + latin-ext
   subsets so Polish diacritics are covered. Archivo is a variable
   font: one file per subset serves every weight. Licenses (OFL)
   sit next to the files in assets/fonts/.
   --------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(../assets/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(../assets/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #121212;
  --bg-slate: #1E1E1E;
  --bg-slate-2: #181818;
  --bg-panel: #161616;
  --bg-panel-hover: #1a1a1a;
  --bg-alt: rgba(30, 30, 30, .55);
  --bg-footer: #0f0f0f;
  --amber: #FFB800;
  --amber-2: #F5A623;
  --ink: #ffffff;
  --ink-dim: #b9b9b9;
  --ink-dimmer: #a8a8a8;
  --ink-mute: #9a9a9a;
  --ink-mute-2: #8f8f8f;
  --ink-mute-3: #8b8b8b;
  --hairline: rgba(255, 255, 255, .08);
  --hairline-strong: rgba(255, 255, 255, .09);
  --content-gutter: max(3rem, 4vw);
  /* Width of the centered content column (header, hero, sections, footer). */
  --content-max: 77.5rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Archivo, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--ink); }

input, textarea, button, select { font-family: inherit; }

::selection { background: var(--amber); color: var(--bg); }

.mono { font-family: 'IBM Plex Mono', monospace; }

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

/* Visually hidden until focused — lets keyboard/screen-reader users jump
   straight past the header to the main content. */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 0.5rem;
  z-index: 100;
  background: var(--amber);
  color: var(--bg);
  font-weight: 800;
  font-size: 0.875rem;
  padding: 0.75rem 1.125rem;
  transition: top .15s ease;
}
.skip-link:focus { top: 0.5rem; }

@keyframes weldPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes sparkDrift { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-5.625rem); opacity: 0; } }

/* ---------------------------------------------------------------
   Page shell — grid-line background the spine and sections sit on
   --------------------------------------------------------------- */

.page {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,.028) 0 1px, transparent 1px 6rem),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.02) 0 1px, transparent 1px 6rem),
    var(--bg);
}

/* Pages with the spine hide the browser's own scrollbar so the two don't
   duplicate each other. Scrolling (wheel, touch, keyboard) is unaffected. */
html.has-spine { scrollbar-width: none; }
html.has-spine::-webkit-scrollbar { display: none; }

/* Glowing scroll spine, linking every section top to bottom */
.spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(0.375rem, 1.2vw, 1.125rem);
  width: 2px;
  background: rgba(255, 255, 255, .07);
  pointer-events: none;
  z-index: 1;
}
.spine__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, rgba(255,184,0,.15), var(--amber-2) 60%, var(--amber));
  box-shadow: 0 0 1rem rgba(255, 184, 0, .75);
}
.spine__dot {
  position: absolute;
  bottom: 0;
  left: -0.25rem;
  width: 0.625rem;
  height: 0.625rem;
  margin-bottom: -0.3125rem;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 1.5rem 0.25rem rgba(255, 184, 0, .85);
  animation: weldPulse 1.4s ease-in-out infinite;
}

/* ---------------------------------------------------------------
   Shared layout primitives
   --------------------------------------------------------------- */

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1rem, 4vw, 2.5rem);
  padding-left: var(--content-gutter);
}

.section {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--hairline);
}
.section--alt { background: var(--bg-alt); }

.eyebrow {
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
}
.eyebrow--hero {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.625rem;
}
.eyebrow__rule { width: 2.75rem; height: 1px; background: var(--amber); }

.section-title {
  margin: 0.875rem 0 0;
  font-size: clamp(1.875rem, 4.4vw, 3.125rem);
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: uppercase;
  line-height: 1;
}
.section-title--sm { font-size: clamp(1.875rem, 4.4vw, 2.875rem); }
.section-title--contact { margin-bottom: 2.5rem; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.875rem;
}
.section-note {
  margin: 0;
  max-width: 40ch;
  color: var(--ink-dimmer);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.btn {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.btn--primary {
  gap: 0.75rem;
  background: var(--amber);
  color: var(--bg);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1.125rem 1.75rem;
  border: none;
  box-shadow: 0 0 0 1px var(--amber), 0 0.875rem 2.5rem -0.875rem rgba(255, 184, 0, .7);
}
.btn--primary:hover { background: var(--amber-2); color: var(--bg); }
.btn--block { justify-content: center; width: 100%; }
/* Phone numbers and hyphenated words inside buttons never break mid-word. */
.btn .mono, .btn .nowrap { white-space: nowrap; }
.btn--ghost {
  gap: 0.625rem;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 1.125rem 1.625rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
}
.btn--ghost:hover { border-color: var(--amber); color: var(--amber); }
.btn--cta {
  background: var(--amber);
  color: var(--bg);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--amber);
}
.btn--cta:hover { background: var(--bg); color: var(--amber); }

.media-frame {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .12);
  background-image: repeating-linear-gradient(135deg, var(--bg-slate) 0 0.75rem, var(--bg-slate-2) 0.75rem 1.5rem);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.media-frame picture,
.portfolio-item picture {
  display: block;
  width: 100%;
  height: 100%;
}
.media-frame img,
.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-frame__label {
  position: relative;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: .1em;
  color: var(--ink-mute);
  text-align: center;
  padding: 0 1.5rem;
}
.media-frame__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 62% 38%, rgba(255, 184, 0, .22), transparent 55%);
}
.media-frame__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.875rem 1.125rem;
  background: var(--amber);
  color: var(--bg);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.spark {
  position: absolute;
  border-radius: 50%;
}
.spark--a {
  left: 62%; top: 42%;
  width: 0.1875rem; height: 0.1875rem;
  background: var(--amber);
  box-shadow: 0 0 0.75rem 0.1875rem rgba(255, 184, 0, .9);
  animation: sparkDrift 2.2s linear infinite;
}
.spark--b {
  left: 58%; top: 44%;
  width: 2px; height: 2px;
  background: var(--amber-2);
  box-shadow: 0 0 0.625rem 2px rgba(245, 166, 35, .9);
  animation: sparkDrift 3.1s linear .7s infinite;
}

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(18, 18, 18, .88);
  backdrop-filter: blur(0.625rem);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0.875rem clamp(1rem, 4vw, 2.5rem);
  padding-left: var(--content-gutter);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand__logo {
  display: block;
  height: 2.5rem;
  width: auto;
}

.badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid rgba(255, 184, 0, .4);
  padding: 0.3125rem 0.625rem;
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 2.4vw, 1.875rem);
  flex-wrap: wrap;
}
.nav > a:not(.btn) {
  color: #d6d6d6;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav > a:not(.btn):hover { color: var(--amber); }

/* Hamburger button — hidden on desktop, shown at the mobile breakpoint below. */
.nav-toggle {
  display: none;
  margin-left: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
}
.nav-toggle:hover { border-color: var(--amber); }
.nav-toggle__bar {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }
.nav-toggle.is-active .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-active .nav-toggle__bar:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); }

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */

.hero {
  position: relative;
  z-index: 2;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6.875rem) clamp(1rem, 4vw, 2.5rem) clamp(2.5rem, 6vw, 5.625rem);
  padding-left: var(--content-gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20.625rem, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero__copy { min-width: 0; }

.hero__title {
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 4.75rem);
  line-height: .96;
  font-weight: 900;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
}
.accent { color: var(--amber); }

.hero__lead {
  margin: 1.625rem 0 0;
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 52ch;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2.25rem;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 1px;
  margin-top: 2.75rem;
  background: var(--hairline-strong);
}
.stat { background: var(--bg); padding: 1.125rem 1rem; }
.stat__value {
  font-size: 1.875rem;
  font-weight: 900;
  color: var(--amber);
  letter-spacing: -.02em;
}
.stat__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute-2);
  margin-top: 0.375rem;
}

.hero__media { position: relative; min-width: 0; }
.media-frame--hero { aspect-ratio: 4 / 5; }
.media-frame__corner {
  position: absolute;
  right: -1px;
  top: -1px;
  width: 4rem;
  height: 4rem;
  border-top: 2px solid var(--amber);
  border-right: 2px solid var(--amber);
}

/* ---------------------------------------------------------------
   Services
   --------------------------------------------------------------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.9375rem, 1fr));
  gap: 1.125rem;
}

.service-card {
  position: relative;
  padding: 1.875rem 1.625rem 2.125rem;
  background: var(--bg-panel);
  border: 1px solid var(--hairline-strong);
  transition: border-color .2s, transform .2s, background .2s;
}
.service-card:hover {
  border-color: var(--amber);
  transform: translateY(-0.25rem);
  background: var(--bg-panel-hover);
}
.service-card::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--amber), transparent);
}
.service-card__no {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  letter-spacing: .16em;
  color: var(--amber);
}
.service-card__title {
  margin: 1.125rem 0 0;
  font-size: 1.3125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.service-card__desc {
  margin: 0.875rem 0 0;
  font-size: 0.90625rem;
  line-height: 1.65;
  color: #a5a5a5;
}

.tag-row {
  margin-top: 1.375rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #cfcfcf;
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 0.3125rem 0.5625rem;
}

/* ---------------------------------------------------------------
   Portfolio
   --------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 2.125rem 0 1.625rem;
}
.filter-btn {
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.71875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 0.6875rem 1.125rem;
  background: transparent;
  color: #cfcfcf;
  border: 1px solid rgba(255, 255, 255, .18);
}
.filter-btn.is-active {
  background: var(--amber);
  color: var(--bg);
  border-color: var(--amber);
}

.portfolio-hint { display: none; }
.portfolio-dots { display: none; }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 1rem;
}

.portfolio-item {
  position: relative;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  background-image: repeating-linear-gradient(135deg, var(--bg-slate) 0 0.75rem, var(--bg-slate-2) 0.75rem 1.5rem);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: border-color .2s;
}
.portfolio-item:hover { border-color: var(--amber); }
.portfolio-item[hidden] { display: none; }
.portfolio-item__open {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.portfolio-item__open:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}
.portfolio-item img { transition: transform .5s ease; }
.portfolio-item:hover img { transform: scale(1.04); }

/* Wide screens: fixed 3 columns with the first realization as a 2×2 hero
   tile (1 big + 5 small fills a clean 3×3). Only in the unfiltered view —
   filtered subsets are too short to wrap around a double-size tile. */
@media (min-width: 1001px) {
  .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
  .portfolio-grid:not(.is-filtered) .portfolio-item--featured {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
  }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

.portfolio-item__cap {
  pointer-events: none;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.875rem 1rem;
  background: linear-gradient(rgba(18,18,18,0), rgba(18,18,18,.94));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.portfolio-item__title {
  font-size: 0.90625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.portfolio-item__cat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
}

/* Lightbox (native <dialog>, opened from a portfolio tile) */
html.has-lightbox { overflow: hidden; }

.lightbox {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}
.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox::backdrop {
  background: rgba(10, 10, 10, .96);
}
.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  max-width: calc(100vw - 10rem);
}
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 7.5rem);
  width: auto;
  height: auto;
  border: 1px solid rgba(255, 255, 255, .12);
  background: var(--bg-slate);
}
.lightbox__cap {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.lightbox__title {
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.lightbox__meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
}
.lightbox__btn {
  position: absolute;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  padding: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--ink);
  background: rgba(18, 18, 18, .7);
  border: 1px solid rgba(255, 255, 255, .18);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.lightbox__btn[hidden] { display: none; }
.lightbox__btn:hover,
.lightbox__btn:focus-visible {
  color: var(--amber);
  border-color: var(--amber);
  outline: none;
}
.lightbox__close { top: 1.25rem; right: 1.25rem; font-size: 1.75rem; }
.lightbox__prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1.25rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 700px) {
  .lightbox[open] { padding-bottom: 4.5rem; }
  .lightbox__figure { max-width: calc(100vw - 1.5rem); }
  .lightbox__img { max-height: calc(100dvh - 10.625rem); }
  .lightbox__cap { flex-direction: column; align-items: center; gap: 0.375rem; text-align: center; }
  .lightbox__close { top: 0.75rem; right: 0.75rem; }
  .lightbox__prev,
  .lightbox__next { top: auto; bottom: 1rem; transform: none; }
  .lightbox__prev { left: calc(50% - 3.75rem); }
  .lightbox__next { right: calc(50% - 3.75rem); }
}

/* ---------------------------------------------------------------
   About / Process
   --------------------------------------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
  gap: clamp(2rem, 5vw, 3.75rem);
}

.about-lead {
  margin: 1.375rem 0 0;
  color: var(--ink-dimmer);
  font-size: 0.96875rem;
  line-height: 1.7;
  max-width: 48ch;
  text-wrap: pretty;
}

.reasons {
  display: grid;
  gap: 1px;
  margin-top: 2rem;
  background: var(--hairline-strong);
}
.reason {
  background: var(--bg-panel);
  padding: 1.125rem 1.25rem;
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.reason__bullet { color: var(--amber); font-weight: 900; font-size: 0.9375rem; }
.reason__title {
  font-size: 0.96875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.reason__desc {
  font-size: 0.875rem;
  color: #9d9d9d;
  margin-top: 0.375rem;
  line-height: 1.6;
}

.process {
  position: relative;
  margin: 1.625rem 0 0;
  padding-left: 2.125rem;
  list-style: none;
}
.process::before {
  content: "";
  position: absolute;
  left: 0.5625rem;
  top: 0.5rem;
  bottom: 1.25rem;
  width: 2px;
  background: linear-gradient(180deg, var(--amber), rgba(255, 184, 0, .15));
}
.process__step {
  position: relative;
  padding: 0 0 1.875rem;
}
.process__num {
  position: absolute;
  left: -2.125rem;
  top: 2px;
  width: 1.25rem; height: 1.25rem;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 2px solid var(--amber);
  color: var(--amber);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.625rem;
  font-weight: 500;
}
.process__title {
  font-size: 1.1875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.process__desc {
  font-size: 0.90625rem;
  color: #a2a2a2;
  margin-top: 0.5rem;
  line-height: 1.65;
  max-width: 42ch;
}

.media-frame--detail { aspect-ratio: 16 / 10; }

/* ---------------------------------------------------------------
   Contact
   --------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.125rem, 1fr));
  gap: 1.125rem;
}

.contact-card {
  background: var(--amber);
  color: var(--bg);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}
.contact-card__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .75;
}
.contact-card__phone {
  color: var(--bg);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  letter-spacing: -.02em;
  display: block;
  margin-top: 0.375rem;
}
.contact-card__phone:hover { color: var(--bg); }
.contact-card__divider { height: 1px; background: rgba(18, 18, 18, .25); }
.contact-card__text {
  font-size: 1rem;
  font-weight: 700;
  margin-top: 0.375rem;
  line-height: 1.5;
}
/* Address doubles as a Google Maps link — dark on amber, underlined so it
   reads as a link without relying on color. */
.contact-card__address {
  display: block;
  color: var(--bg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1875rem;
}
.contact-card__address:hover { color: var(--bg); text-decoration-thickness: 2px; }
.contact-card__hours {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.875rem;
  margin-top: 0.5rem;
  line-height: 1.9;
}
.contact-card__emergency {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.875rem;
  padding: 0.5rem 0.875rem;
  background: var(--bg);
  color: var(--amber);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.71875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.contact-card__emergency-dot {
  width: 0.4375rem; height: 0.4375rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0.625rem 2px rgba(255, 184, 0, .8);
  animation: weldPulse 1.4s ease-in-out infinite;
}
.contact-card__email {
  margin-top: auto;
  color: var(--bg);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(18, 18, 18, .4);
  align-self: flex-start;
}
.contact-card__email:hover { color: var(--bg); border-color: var(--bg); }

.contact-form {
  background: var(--bg-panel);
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-form__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--ink);
  padding: 0.9375rem 1rem;
  font-size: 0.9375rem;
  outline: none;
  width: 100%;
}
.contact-form textarea { resize: vertical; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--amber);
  /* Border + 1px ring = a 2px amber outline, clearly visible on the dark panel. */
  box-shadow: 0 0 0 1px var(--amber);
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.contact-form__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Information clause next to the submit button — no consent checkbox: the
   legal basis is answering the inquiry (GDPR art. 6(1)(b)), not consent. */
.contact-form__privacy {
  margin: 0;
  font-size: 0.78125rem;
  line-height: 1.55;
  color: var(--ink-mute-3);
}
.contact-form__privacy a { text-decoration: underline; }
.contact-form__note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  letter-spacing: .06em;
  color: var(--ink-mute-3);
}
.contact-form__note a { text-decoration: underline; white-space: nowrap; }

.map-frame {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .12);
  min-height: 18.75rem;
  overflow: hidden;
  /* Amber glow behind the iframe while it loads */
  background: radial-gradient(circle at 50% 45%, rgba(255, 184, 0, .14), var(--bg-slate) 60%);
}
/* Click-to-load placeholder shown until the visitor asks for the map. */
.map-frame__consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.75rem;
}
.map-frame__consent .contact-card__label { color: var(--amber); opacity: 1; }
.map-frame__note {
  margin: 0;
  max-width: 34ch;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-dim);
}
.map-frame__link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}
.map-frame__embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Google's map only ships a light theme — invert + hue-rotate back gives a
     dark map that sits next to our dark UI instead of a bright white rectangle. */
  filter: invert(90%) hue-rotate(180deg) brightness(.95) contrast(.9);
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */

.site-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--hairline);
  background: var(--bg-footer);
}
.site-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1.875rem clamp(1rem, 4vw, 2.5rem);
  padding-left: var(--content-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.71875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute-3);
}

/* ---------------------------------------------------------------
   Privacy policy page — plain long-form content on the same
   industrial shell as the rest of the site.
   --------------------------------------------------------------- */

.policy__updated {
  margin: 1.125rem 0 0;
  font-size: 0.75rem;
  letter-spacing: .08em;
  color: var(--ink-mute-3);
}

.policy__body {
  margin-top: 2.5rem;
  max-width: 68ch;
}
.policy__body h2 {
  margin: 2.5rem 0 0;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink);
}
.policy__body h2:first-child { margin-top: 0; }
.policy__body p {
  margin: 0.875rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--ink-dimmer);
}
.policy__body a { text-decoration: underline; }
.policy__body strong { color: var(--ink); font-weight: 700; }
.policy__body ul {
  margin: 0.875rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--ink-dimmer);
}
.policy__body li + li { margin-top: 0.375rem; }
.policy__body li::marker { color: var(--amber); }

.policy__back { margin-top: 3rem; }

/* ---------------------------------------------------------------
   Mobile view (<= 860px)
   Header collapses to a hamburger-driven off-canvas nav panel.
   --------------------------------------------------------------- */

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }

  /* Hero photo is portrait (4/5) on desktop, which turns into a screen-height
     slab on a phone. Shorten it so the fold shows copy + actions, not one photo. */
  .media-frame--hero { aspect-ratio: 4 / 3; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 39;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - 4.5rem);
    overflow-y: auto;
    background: var(--bg-slate-2);
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, .6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav > a:not(.btn) {
    padding: 1rem var(--content-gutter);
    border-bottom: 1px solid var(--hairline);
    font-size: 0.9375rem;
  }
  .nav > a.btn--cta {
    justify-content: center;
    margin: 1rem var(--content-gutter);
  }

  /* Lock background scroll while the panel is open. */
  body.nav-open { overflow: hidden; }
}

/* ---------------------------------------------------------------
   Small phones (<= 560px) — tighter gutters, decluttered header,
   forced single/three-column grids instead of relying on auto-fit
   minimums that get cramped at these widths.
   --------------------------------------------------------------- */

@media (max-width: 560px) {
  :root { --content-gutter: 1.5rem; }

  .badge { display: none; }

  .about-grid,
  .contact-grid { grid-template-columns: 1fr; }

  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat { padding: 1rem 0.75rem; }
  .stat__value { font-size: 1.375rem; }
  .stat__label { font-size: 0.59375rem; }

  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 380px) {
  .brand__logo { height: 2rem; }
}

/* ---------------------------------------------------------------
   Portfolio carousel (<= 700px)
   Realizacje stack into one long column on a phone; below this width
   the grid becomes a horizontal, swipeable scroll-snap row instead,
   with a hint line and dots to make the "swipe for more" affordance
   obvious without extra taps.
   --------------------------------------------------------------- */

@media (max-width: 700px) {
  .portfolio-hint {
    display: block;
    margin: -0.875rem 0 1.25rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.71875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }

  .portfolio-grid {
    display: flex;
    grid-template-columns: none;
    gap: 0.875rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--content-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }
  .portfolio-grid::-webkit-scrollbar { display: none; }

  .portfolio-item {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  .portfolio-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.125rem;
  }
  .portfolio-dots__dot {
    width: 0.4375rem;
    height: 0.4375rem;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .2);
    cursor: pointer;
  }
  .portfolio-dots__dot.is-active {
    background: var(--amber);
    box-shadow: 0 0 0.5rem 1px rgba(255, 184, 0, .7);
  }
}

@media (max-width: 480px) {
  .portfolio-item { flex-basis: 86%; }
}

/* Respect reduced-motion preference for the ambient animations */
@media (prefers-reduced-motion: reduce) {
  .spine__dot, .spark--a, .spark--b, .contact-card__emergency-dot { animation: none; }
  html { scroll-behavior: auto; }
  .nav { transition: none; }
  .portfolio-item img { transition: none; }
  .portfolio-item:hover img { transform: none; }
}

/* ---------------------------------------------------------------
   Large and ultrawide screens
   Every size in this file is in rem, so raising the root font size
   scales the whole design proportionally (type, spacing, grids).
   Steps need both width and height, so the hero still fits on the
   first screen (e.g. 2560×1080 stays at 100%, 2560×1440 gets 125%).
   Percentages keep the visitor's own browser font setting in play.
   --------------------------------------------------------------- */

@media (min-width: 1800px) and (min-height: 1100px) {
  html { font-size: 112.5%; }
}
@media (min-width: 2200px) and (min-height: 1300px) {
  html { font-size: 125%; }
}
@media (min-width: 3000px) and (min-height: 1700px) {
  html { font-size: 150%; }
}

/* Ultrawide (21:9 and wider): use more of the width instead of a narrow
   strip in the middle; the hero photo keeps its size so the hero stays
   within the first screen. */
@media (min-aspect-ratio: 2/1) and (min-width: 2200px) {
  :root { --content-max: 90rem; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); }
}