/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--background);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  transition: background-color 0.2s ease, color 0.2s ease;
}
img { max-width: 100%; display: block; }
.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;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  margin: 0 0 1rem;
  color: var(--text);
  text-wrap: balance;
}
h2, h3 { font-family: var(--font-display); }
h1, .heading-condensed { font-family: var(--font-serif-condensed); }
h1 { font-size: var(--size-h1); font-weight: 600; line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--size-h2); font-weight: 600; line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--size-h3); font-weight: 500; line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h2.heading-condensed { font-weight: 600; line-height: 1.1; letter-spacing: var(--ls-h1); }
h4 { font-family: var(--font-body); font-size: var(--size-h4); font-weight: 600; line-height: 1.3; }

/* ---------- Scene: contact card -> hero ----------
   One sticky stage. js/main.js publishes the scroll progress as --p (0..1)
   on .scene and .site-nav and does nothing else per frame; every bit of
   choreography below is CSS derived from that one number:

     p 0.00-0.25  action buttons fall away
     p 0.04-0.26  card text fades
     p 0.05-0.80  the circular crop opens out to the full photo (and the
                  photo eases from a face close-up to the whole figure)
     p 0.55-0.85  hero copy arrives, nav slides down

   Only transform, opacity and one clip-path change while scrolling. The
   crop geometry (--top0 .. --z) is measured once per resize in JS, from the
   avatar that sits in the card, so the circle starts exactly on it.

   Default (no JS, reduced motion): no data-scene attribute, so none of the
   sticky rules apply and the section is two plain stacked blocks. */

#page-content {
  position: relative;
  background-color: var(--background);
}

.scene {
  --p: 0;
  --t: clamp(0, calc((var(--p) - 0.05) / 0.75), 1);
  --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t)));
  --actions-o: clamp(0, calc(1 - var(--p) * 4), 1);
  --text-o: clamp(0, calc(1 - (var(--p) - 0.04) * 4.6), 1);
  --hero-o: clamp(0, calc((var(--p) - 0.55) / 0.3), 1);
  --avatar-d: clamp(9rem, 30svh, 13rem);
  --photo-w: min(100vw, calc(100svh * 1000 / 1500));
  position: relative;
  background-color: var(--background-deep);
}
.scene__stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--background-deep);
}

/* Soft colour wash behind the card, from the photo itself, so the frosted
   buttons have something to refract. Pre-blurred and static: only its
   opacity ever changes. */
.scene__ambient {
  position: absolute;
  inset: -12%;
  z-index: 0;
  background: var(--hero-img, url('../img/arkadiusz-gorski-portret.webp?v=2')) 50% 12% / cover;
  filter: blur(64px) saturate(1.3);
  opacity: 0.32;
}
.scene__photo,
.scene__scrim { display: none; }

/* The card */
.scene__card {
  --scene-q: clamp(1.125rem, 1vw + 0.95rem, 1.5rem);
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: 5.5rem 1.5rem 3rem;
  text-align: center;
}
.scene__avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: var(--avatar-d);
  aspect-ratio: 1;
  margin-bottom: 0;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--surface);
}
/* Head-and-shoulders crop of the portrait: the square window is 380 source
   px wide, centred on (430, 265) of the 1000 x 1500 image. JS uses the same
   numbers for the expanding photo, so the two line up.
   width = 1000/380, left = -(430-190)/380, top = -(265-190)/380. */
.scene__avatar {
  position: absolute;
  left: -63.16%;
  top: -19.74%;
  width: 263.16%;
  max-width: none;
  height: auto;
}
.scene__org {
  margin: 0 0 2rem;
  font-size: var(--size-small);
  font-weight: 500;
  line-height: var(--lh-card);
  color: var(--text-secondary);
  text-wrap: balance;
}
.scene__status {
  margin: 0.5rem 0 0;
  font-size: var(--size-small);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-secondary);
  text-wrap: balance;
}
.scene__live {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  vertical-align: 0.1em;
  background-color: var(--call-green);
  animation: scene-live-blink 1.6s ease-in-out infinite;
}
@keyframes scene-live-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.scene__name {
  margin: 2rem 0 0.5rem;
  line-height: 1.2;
  font-size: clamp(2.25rem, 8vw + 0.25rem, 3.5rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.05;
  font-family: var(--font-display);
}
.scene__actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  width: min(100%, 24rem);
}
.scene__action {
  flex: 0 0 5.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: var(--size-small);
}
.scene__action--call { color: var(--text); }
.scene__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  color: var(--glass-ink);
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.scene__icon {
  width: 1.75rem;
  height: 1.75rem;
}
/* The call action is the one filled glyph (Lucide is outline-only, so the
   path is filled with currentColor). */
.scene__action--call .scene__icon { fill: currentColor; }
/* Frosted glass: a web approximation (translucent fill, blur, a hairline
   and an inner highlight), not a platform material. */
.scene__action--glass .scene__disc {
  border: 1px solid var(--glass-border);
  background-color: var(--glass-bg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}
.scene__action--call .scene__disc {
  position: relative;
  isolation: isolate;
  background-color: var(--call-green);
  color: #fff;
}
/* A thin ring plus a soft halo that shimmer around the call button. Both are
   the same conic gradient (two highlights, one seam-free loop), rotated:
   colour depends only on angle, so a plain transform moves the light around
   the circle and stays on the GPU. */
.scene__action--call .scene__disc::before,
.scene__action--call .scene__disc::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(
    rgb(175 255 208 / 0.95) 0%,
    rgb(31 157 85 / 0.12) 22%,
    rgb(31 157 85 / 0.6) 45%,
    rgb(175 255 208 / 0.95) 62%,
    rgb(31 157 85 / 0.12) 85%,
    rgb(175 255 208 / 0.95) 100%);
  animation: call-shimmer 7s linear infinite;
  will-change: transform;
}
.scene__action--call .scene__disc::before {
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}
.scene__action--call .scene__disc::after {
  filter: blur(10px);
  opacity: 0.5;
}
@keyframes call-shimmer {
  to { transform: rotate(360deg); }
}
/* No point animating it while the card is off screen. */
.scene[data-state="hero"] .scene__action--call .scene__disc::before,
.scene[data-state="hero"] .scene__action--call .scene__disc::after {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .scene__action--call .scene__disc::before,
  .scene__action--call .scene__disc::after,
  .scene__live { animation: none; }
}
.scene__action:active .scene__disc { transform: scale(0.94); }
.scene__action:focus-visible .scene__disc {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}
@media (prefers-reduced-transparency: reduce) {
  .scene__action--glass .scene__disc {
    background-color: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.scene__line {
  margin: 2rem 0 0;
  max-width: min(100%, 34rem);
  font-size: var(--scene-q);
  line-height: 1.3;
  color: var(--text-secondary);
  text-wrap: balance;
  font-family: var(--font-display);
}
/* The second line is sized so its width matches the first line's: at equal
   font size the bold sentence measures 0.91x the question, so it scales by
   the inverse. Keeps the two lines the same width at every viewport. */
.scene__line strong {
  display: block;
  margin-top: 0.375rem;
  color: var(--text);
  font-size: calc(var(--scene-q) * 1.0986);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--ls-h3);
}
@media (min-width: 360px) {
  .scene__line,
  .scene__line strong { white-space: nowrap; }
}
.scene__cue {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  color: var(--text);
  font-size: var(--size-small);
  pointer-events: none;
  opacity: clamp(0, calc(1 - var(--p) * 10), 1);
}
.scene__cue-icon {
  position: relative;
  display: block;
  width: 1.75rem;
  height: 1.75rem;
}
.scene__cue-icon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene__cue-icon > svg:first-child { opacity: 0.45; }
.scene__cue-sheen {
  color: var(--text);
  -webkit-mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
  mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  animation: scene-cue-sheen 2.6s ease-in-out infinite;
}
@keyframes scene-cue-sheen {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scene__cue-sheen { display: none; }
}

/* The hero copy (static fallback: a plain block over the photo) */
.scene__hero {
  position: relative;
  z-index: 4;
  padding: 4.5rem 0 4rem;
  background:
    linear-gradient(0deg, var(--background-deep) 0%, color-mix(in srgb, var(--background-deep) 72%, transparent) 100%),
    var(--hero-img, url('../img/arkadiusz-gorski-portret.webp?v=2')) 50% 12% / cover;
}

/* ----- Scene mode: one sticky stage, scroll-driven ----- */
:root[data-scene="on"] .scene {
  /* 100svh of stage + 100svh of travel + a short hold on the finished
     hero. svh, not dvh: the stage must not resize while the mobile
     address bar collapses mid-scroll. */
  height: 220svh;
}
:root[data-scene="on"] .scene__stage {
  position: sticky;
  top: 0;
  height: 100svh;
}
:root[data-scene="on"] .scene__photo {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(
    calc(var(--top0, 0px) * (1 - var(--e)))
    calc(var(--right0, 0px) * (1 - var(--e)))
    calc(var(--bottom0, 0px) * (1 - var(--e)))
    calc(var(--left0, 0px) * (1 - var(--e)))
    round calc(var(--r0, 0px) * (1 - var(--e))));
}
:root[data-scene="on"] .scene:not([data-ready]) .scene__photo { opacity: 0; }
.scene__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 10%;
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  transform:
    translate(calc(var(--tx, 0px) * (1 - var(--e))), calc(var(--ty, 0px) * (1 - var(--e))))
    scale(calc(1 + (var(--z, 1) - 1) * (1 - var(--e))));
  will-change: transform;
}
:root[data-scene="on"] .scene__scrim {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: var(--e);
  pointer-events: none;
  background: linear-gradient(to top,
    var(--background-deep) 0%,
    color-mix(in srgb, var(--background-deep) 90%, transparent) 32%,
    transparent 78%);
}
:root[data-scene="on"] .scene:not([data-ready]) .scene__avatar-wrap { opacity: 1; }
:root[data-scene="on"] .scene[data-ready] .scene__avatar-wrap { opacity: 0; }
:root[data-scene="on"] .scene__ambient { opacity: calc(0.32 * (1 - var(--e))); }
:root[data-scene="on"] .scene__card {
  position: absolute;
  inset: 0;
  min-height: 0;
  pointer-events: none;
}
:root[data-scene="on"] .scene[data-state="card"] .scene__card { pointer-events: auto; }
:root[data-scene="on"] .scene__org,
:root[data-scene="on"] .scene__status,
:root[data-scene="on"] .scene__name,
:root[data-scene="on"] .scene__line { opacity: var(--text-o); }
:root[data-scene="on"] .scene__actions {
  opacity: var(--actions-o);
  transform: translateY(calc((1 - var(--actions-o)) * 28px));
}
:root[data-scene="on"] .scene__hero {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-height, 4.5rem) + 1rem) 0 clamp(2rem, 6svh, 4rem);
  background: none;
  opacity: var(--hero-o);
  transform: translateY(calc((1 - var(--hero-o)) * 18px));
  pointer-events: none;
}
/* The floating tool buttons sit bottom-left on a phone; keep the last line clear. */
@media (max-width: 767px) {
  :root[data-scene="on"] .scene__hero { padding-bottom: 5.5rem; }
}
:root[data-scene="on"] .scene[data-state="hero"] .scene__hero { pointer-events: auto; }

/* Phone: the copy sits on top of the photograph, so in either theme it is
   read as light type on a dark scrim (the dark palette, scoped to the hero;
   dark theme already matches these values). */
@media (max-width: 899px) {
  :root[data-scene="on"] .scene__scrim {
    background: linear-gradient(to top,
      #17140F 0%,
      rgb(23 20 15 / 0.9) 34%,
      rgb(23 20 15 / 0.3) 72%,
      transparent 100%);
  }
  :root[data-scene="on"] .scene__hero {
    --text: #F3EFE6;
    --text-secondary: #C9C1B2;
    --text-muted: #A39A86;
    --border: #3A352C;
    --background-deep: #17140F;
    --accent-brass: #B08D57;
    --accent-brass-hover: #C9A227;
    color: var(--text);
  }
}

/* Steel tone, phone hero: same fixed dark palette, in steel values. */
@media (max-width: 899px) {
  :root[data-tone="steel"][data-scene="on"] .scene__scrim {
    background: linear-gradient(to top,
      #10131A 0%,
      rgb(16 19 26 / 0.9) 34%,
      rgb(16 19 26 / 0.3) 72%,
      transparent 100%);
  }
  :root[data-tone="steel"][data-scene="on"] .scene__hero {
    --text: #F0F2F5;
    --text-secondary: #C3CAD6;
    --text-muted: #98A2B3;
    --border: #2D3544;
    --background-deep: #10131A;
    --accent-brass: #B9875A;
    --accent-brass-hover: #D29A66;
  }
}

/* Wide screens: the portrait keeps its own proportions on the right (no
   enlargement past the photo's resolution), dark stage on the left, and the
   hero copy sits in that dark space. */
@media (min-width: 900px) {
  .scene__photo img {
    object-fit: contain;
    object-position: right center;
  }
  :root[data-scene="on"] .scene__scrim {
    background: linear-gradient(to right,
      var(--background-deep) 0,
      var(--background-deep) calc(100% - var(--photo-w)),
      transparent calc(100% - var(--photo-w) * 0.74));
  }
  :root[data-scene="on"] .scene__hero { align-items: center; }
  .scene__hero .container > * { max-width: min(100%, 38rem); }

  /* Smooth edge (the strip and the overlay below carry the photo's own transform, so
     they stay registered with it while the scroll animation settles): instead of a short gradient laid over the photo's left edge, the
     photo's own backdrop is carried on to the left (a strip made from its edge
     pixels, see --hero-fade in js/copy-review.js) and eased into the dark stage over
     one and a half photo widths. The strip is scaled with the photo (same height)
     and ends exactly where the photo starts, so there is no seam. */
  :root[data-hero-fade][data-scene="on"] .scene__scrim { display: none; }
  :root[data-hero-fade][data-scene="on"] .scene__photo::before {
    content: "";
    position: absolute;
    inset: 0;
    transform-origin: var(--ox, 50%) var(--oy, 50%);
    transform:
      translate(calc(var(--tx, 0px) * (1 - var(--e))), calc(var(--ty, 0px) * (1 - var(--e))))
      scale(calc(1 + (var(--z, 1) - 1) * (1 - var(--e))));
    background-image: var(--hero-fade);
    background-repeat: no-repeat;
    background-size: auto calc(var(--photo-w) * 1.5);
    background-position: right var(--photo-w) center;
  }
  /* The hero copy ends right at the photo, so the first fifth of the photo is
     darkened by the same amount the strip ends on (x0.60) and eases back to
     the untouched photo: the copy keeps its contrast and there is still no seam. */
  :root[data-hero-fade][data-scene="on"] .scene__photo::after {
    content: "";
    position: absolute;
    inset: 0;   /* same box as the photo, so the morph transform pivots on the same point */
    pointer-events: none;
    transform-origin: var(--ox, 50%) var(--oy, 50%);
    transform:
      translate(calc(var(--tx, 0px) * (1 - var(--e))), calc(var(--ty, 0px) * (1 - var(--e))))
      scale(calc(1 + (var(--z, 1) - 1) * (1 - var(--e))));
    background-image: linear-gradient(to right, rgb(0 0 0 / 0.400) 0%, rgb(0 0 0 / 0.394) 12%, rgb(0 0 0 / 0.359) 25%, rgb(0 0 0 / 0.290) 38%, rgb(0 0 0 / 0.200) 50%, rgb(0 0 0 / 0.110) 62%, rgb(0 0 0 / 0.041) 75%, rgb(0 0 0 / 0.006) 88%, rgb(0 0 0 / 0) 100%);
    background-repeat: no-repeat;
    background-size: calc(var(--photo-w) * 0.22) 100%;
    background-position: right calc(var(--photo-w) * 0.78) top;
  }
  /* Light theme: the copy is dark, so the strip and the overlay go light instead */
  :root[data-theme="light"][data-hero-fade][data-scene="on"] .scene__photo::before {
    background-image: var(--hero-fade-light);
  }
  :root[data-theme="light"][data-hero-fade][data-scene="on"] .scene__photo::after {
    background-image: linear-gradient(to right, rgb(255 255 255 / 0.400) 0%, rgb(255 255 255 / 0.394) 12%, rgb(255 255 255 / 0.359) 25%, rgb(255 255 255 / 0.290) 38%, rgb(255 255 255 / 0.200) 50%, rgb(255 255 255 / 0.110) 62%, rgb(255 255 255 / 0.041) 75%, rgb(255 255 255 / 0.006) 88%, rgb(255 255 255 / 0) 100%);
  }
}

.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.5rem;
}



.section-intro {
  font-size: var(--size-lead);
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto 2.5rem;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--lh-lead);
}

.text-center { text-align: center; }

.button-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--accent-brass);
  color: var(--background-deep);
  font-weight: 500;
  padding: 0.875rem 1.75rem;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  line-height: var(--lh-ui);
}
.button-primary:hover { background-color: var(--accent-brass-hover); }

/* Quiet-until-needed "emergency" affordance: no filled background (that stays
   reserved for the primary action), signals its distinct purpose via an icon
   and an availability dot, and only takes on color on hover/focus. */
.button-alert {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 0.875rem 1.5rem;
  border-radius: 2px;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.button-alert:hover,
.button-alert:focus-visible {
  border-color: var(--accent-brass);
  color: var(--accent-brass-text);
  background-color: color-mix(in srgb, var(--accent-brass) 8%, transparent);
}
.button-alert__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.button-alert--nav {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--text);
  font-weight: 500;
  line-height: var(--lh-ui);
}
.button-alert--nav:hover,
.button-alert--nav:focus-visible {
  border: 0;
  background: color-mix(in srgb, var(--text) 17%, transparent);
  color: var(--text);
}
.button-alert__dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--call-green);
  flex-shrink: 0;
}
.button-alert__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--call-green);
  animation: dot-pulse 2s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
@keyframes dot-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .button-alert__dot::after { animation: none; }
}

/* ---------- Navbar ----------
   Always `position: fixed` (not sticky) and living outside #page-content
   on purpose: it's its own independently-animated layer that slides down
   from above the viewport as the intro retreats (js/main.js), rather than
   being nested inside the element GSAP transforms for that transition --
   sticky positioning inside a transformed ancestor is undefined by the CSS
   spec and was the real cause of an earlier flash/redundant-scroll bug. */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: color-mix(in srgb, var(--background) 65%, transparent);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  transition: background-color 0.3s, border-color 0.3s, backdrop-filter 0.3s, -webkit-backdrop-filter 0.3s;
}
/* On the finished hero the bar is bare, so it cannot cover the portrait
   (js/main.js sets data-bare until the page scrolls on). */
:root[data-scene="on"] body:not(.nav-open) .site-nav[data-bare] {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
:root[data-scene="on"] body:not(.nav-open) .site-nav[data-bare] .site-nav__item::after { opacity: 0; }
/* While the scene plays the nav waits above the viewport and slides down as
   the hero arrives (p 0.55-0.85, published by js/main.js). Without the
   scene (--p unset, no JS, reduced motion) it is simply in place. */
:root[data-scene="on"] .site-nav {
  transform: translateY(calc((1 - clamp(0, calc((var(--p, 1) - 0.55) / 0.3), 1)) * -100%));
}
@media (prefers-reduced-transparency: reduce) {
  .site-nav {
    background-color: var(--background);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.site-nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 1.125rem 1.5rem;
}
.site-nav__logo { margin-right: auto; }
.site-nav__logo {
  display: block;
  flex-shrink: 0;
}
.site-nav__logo-img {
  display: block;
  height: 40px;
  width: auto;
}
.site-nav__logo-img--light { display: none; }
:root[data-theme="light"] .site-nav__logo-img--dark { display: none; }
:root[data-theme="light"] .site-nav__logo-img--light { display: block; }
.site-nav__links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.site-nav__links a {
  font-size: 0.875rem;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color 0.2s ease;
  font-weight: 500;
  line-height: var(--lh-ui);
}
.site-nav__links a:hover { color: var(--accent-brass-text); }
/* Each tab scrolls to its section on the landing page; where a full page
   exists, a small arrow next to the label opens it. The underline marks the
   section in view (landing) or the page you are on (detail pages). */
.site-nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}
.site-nav__detail {
  display: inline-flex;
  padding: 0.375rem;
  color: var(--text-muted);
  transition: color 0.2s ease, transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.site-nav__detail-icon { width: 0.875rem; height: 0.875rem; }
@media (hover: hover) and (pointer: fine) {
  .site-nav__detail:hover { color: var(--accent-brass-text); transform: translate(1px, -1px); }
}
.site-nav__item:has(a[aria-current]) > a:first-child { color: var(--text); }
.site-nav__item:has(a[aria-current])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.875rem;
  height: 1px;
  background: var(--text);
}
.site-nav__links a.site-nav__urgent { color: var(--accent-brass-text); }
.site-nav__links a.site-nav__urgent:hover { color: var(--accent-brass-hover); }
.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.site-tools {
  position: fixed;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.site-tools[hidden] { display: none; }

/* Theme toggle: just the icon of the mode it switches to (sun while dark, moon
   while light), no frame; it takes the brass colour on hover/focus. Its box is
   no taller than the "Pomoc 24/7" pill next to it. On small screens it moves
   into the menu (see .theme-toggle--menu). */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), color 0.2s ease;
}
.theme-toggle__sun,
.theme-toggle__moon {
  width: 1.125rem;
  height: 1.125rem;
}
.theme-toggle__moon { display: none; }
:root[data-theme="light"] .theme-toggle__sun { display: none; }
:root[data-theme="light"] .theme-toggle__moon { display: block; }
.theme-toggle:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover { color: var(--accent-brass-text); }
}
.theme-toggle--menu { display: none; border: 0; border-radius: 0; }
.theme-toggle:focus-visible,
.ds-panel__close:focus-visible,
.ds-panel__reset:focus-visible,
.ds-panel__export:focus-visible,
.ds-field input:focus-visible,
.ds-field select:focus-visible {
  outline: 2px solid var(--accent-brass);
  outline-offset: 2px;
}

.ds-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 220;
  width: min(26rem, 100vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  color: var(--text);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.28);
  font-family: var(--font-body);
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.ds-panel.is-open {
  transform: translateX(0);
}
.ds-panel[hidden] {
  display: none;
}
.ds-panel.is-open[hidden] {
  display: flex;
}
.ds-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.ds-panel__kicker {
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.ds-panel__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
}
.ds-panel__close {
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.ds-panel__lede {
  margin: 0;
  padding: 0.9rem 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 65ch;
}
.ds-panel__lede code {
  font-size: 0.75rem;
  color: var(--accent-brass-text);
}
.ds-panel__fields {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 1.25rem 1.25rem;
}
.ds-group {
  margin: 0 0 1.35rem;
}
.ds-group__title {
  margin: 0 0 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}
.ds-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 0.75rem;
  align-items: center;
  padding: 0.4rem 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.ds-field label {
  font-size: 0.8125rem;
  color: var(--text);
}
.ds-field__token {
  grid-column: 1 / -1;
  font-size: 0.6875rem;
  color: var(--text-muted);
}
.ds-field__control {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.ds-field input[type="color"] {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
}
.ds-field input[type="text"],
.ds-field input[type="number"],
.ds-field select {
  width: 7.5rem;
  height: 2rem;
  padding: 0 0.45rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.75rem;
}
.ds-field input[type="number"] { width: 4.5rem; }
.ds-field select { width: 11rem; }
.ds-panel__footer {
  display: flex;
  gap: 0.5rem;
  padding: 0.9rem 1.25rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.ds-panel__reset,
.ds-panel__export {
  flex: 1;
  height: 2.5rem;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.ds-panel__reset {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}
.ds-panel__export {
  border: 0;
  background: var(--accent-brass);
  color: var(--background-deep);
}
.ds-panel__export:hover { background: var(--accent-brass-hover); }
@media (prefers-reduced-motion: reduce) {
  .ds-panel { transition: none; }
}
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  margin-right: -0.5rem;
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
}
.nav-toggle svg { width: 1.5rem; height: 1.5rem; }
.nav-toggle__close { display: none; }
body.nav-open .nav-toggle__open { display: none; }
body.nav-open .nav-toggle__close { display: block; }
.nav-toggle:focus-visible { outline: 2px solid var(--accent-brass); outline-offset: -2px; }

/* ---------- Hero copy ---------- */
.scene__hero h1 {
  max-width: none;
  font-size: min(var(--size-h1), 9vw);
}
.scene__hero h1 span {
  display: block;
  white-space: nowrap;
}
/* Longer headline variants (the review versions) do not fit one line per span
   on a phone or tablet: let them wrap there. */
@media (max-width: 1100px) {
  .scene__hero h1 span { white-space: normal; }
}
@media (min-width: 900px) {
  /* The headline stays in the space left of the portrait: it wraps instead of
     running over the photo, where dark text on the grey backdrop and the dark
     suit is unreadable in the light tone. */
  .scene__hero .container > h1 { max-width: max(20rem, calc(100vw - var(--photo-w) * 0.9 - max(2rem, (100vw - 1160px) / 2 + 1.5rem))); }
  .scene__hero h1 { font-size: min(var(--size-h1), 3.8vw); }
  .scene__hero h1 span { white-space: normal; }
}
.hero__lead {
  font-size: var(--size-lead);
  color: var(--text-secondary);
  max-width: 52ch;
  margin-bottom: 2rem;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--lh-lead);
}
.hero__lead span { display: block; }
.hero__cta {
  display: grid;
  gap: 0.625rem;
  width: fit-content;
  justify-items: stretch;
}
.hero__cta .button-primary { justify-content: center; }
.free-note {
  margin: 0;
  text-align: center;
  font-size: var(--size-small);
  color: var(--text-muted);
}

/* ---------- Model Pracy / Reason to believe ---------- */
.reason-band {
  padding: var(--space-section-y) 0;
  background-color: var(--background-deep);
}
/* The claim gets its own band: tall and centred so it reads as the page's
   thesis, followed by the one action it leads to (a phone call) and a quieter
   encrypted alternative below a hairline. */
.claim {
  display: grid;
  align-items: center;
  min-height: 72vh;
  padding: var(--space-section-y-lg) 0;
  text-align: center;
}
.claim__text {
  max-width: 26ch;
  margin: 0 auto 3rem;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}
.claim__call { padding: 1rem 2rem; }
.claim__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  fill: currentColor;
}
.claim__alt {
  max-width: 34rem;
  margin: 2.5rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--size-card);
  line-height: var(--lh-card);
}
.claim__alt a {
  color: var(--text);
  border-bottom: 1px solid var(--accent-brass);
}
.claim__alt a:hover { color: var(--accent-brass-text); }
/* Values and way of working: a heading with a soft second half and a short
   description, then four numbered cards (hairline, tag, icon + title, text). */
.reason-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 2rem 4rem;
  align-items: start;
  margin-bottom: 5rem;
}
.reason-head h2 {
  margin: 0;
}
.reason-head h2 > span { display: block; }
@media (min-width: 1100px) {
  .reason-head h2 > span { white-space: nowrap; }
}
.reason-head__soft { color: var(--text-muted); }
.reason-head p {
  max-width: 40ch;
  margin: 0.5rem 0 0;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--size-note);
  letter-spacing: var(--ls-note);
  line-height: 1.8;
}
/* Principles as horizontal rows: number | icon + title | text. */
.principles {
  display: grid;
  border-bottom: 1px solid var(--border);
}
.principle {
  display: grid;
  grid-template-columns: 3rem minmax(0, 22rem) minmax(0, 1fr);
  gap: 0 2rem;
  align-items: start;
  padding: 2.25rem 0;
  border-top: 1px solid var(--border);
}
.principle__top { display: contents; }
.principle__num {
  padding-top: 0.375rem;
  font-family: var(--font-mono);
  font-size: var(--size-note);
  letter-spacing: var(--ls-note);
  line-height: var(--lh-note);
  color: var(--text-secondary);
}
.principle__num { grid-column: 1; grid-row: 1; }
.principle h3 {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
}
.principle__icon {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.05em;
  color: var(--accent-brass-text);
}
.principle p {
  grid-column: 3;
  grid-row: 1;
  max-width: 56ch;
  margin: 0;
  padding-top: 0.25rem;
  color: var(--text-secondary);
  font-size: var(--size-body);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---------- Specjalizacje: carousel ----------
   Native horizontal scroll-snap (touch, trackpad and keyboard just work); the
   track runs edge to edge while the first card lines up with the page
   container, and the next card peeks in to show there is more. js/carousel.js
   only wires the arrows and dots. */
.specjalizacje-section {
  padding: var(--space-section-y) 0;
}
.carousel {
  --carousel-inset: max(1.5rem, calc((100% - 1160px) / 2 + 1.5rem));
  margin-top: 0.5rem;
}
.carousel__track {
  position: relative;   /* offsetParent for the card positions in JS */
  display: flex;
  gap: 1.25rem;
  padding: 0.25rem var(--carousel-inset) 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--carousel-inset);
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible {
  outline: 2px solid var(--accent-brass);
  outline-offset: -2px;
}
.specjalizacje-card {
  flex: 0 0 min(84vw, 28rem);
  scroll-snap-align: start;
  /* One card: the figure and the text share a single ground and border. */
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--border);
}
.specjalizacje-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0.25rem 1.5rem 1.5rem;
}

/* Photo: large, with its own box so any shot can drop in. Placeholder until
   the photos exist; swap the span for an <img> as the first child. */
.specjalizacje-card__media {
  position: relative;
  overflow: hidden;
  /* The isometric figures are drawn in a 5:4 frame (see js/areas-art.js). */
  aspect-ratio: 5 / 4;
  margin-bottom: 1rem;
  background-color: transparent;
}
.specjalizacje-card__ph {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-width: 32ch;
  font-size: var(--size-small);
  line-height: 1.4;
  color: var(--text-muted);
}
/* Real photos: one warm, slightly dimmed grade so unrelated shots sit in the
   same palette. */
.specjalizacje-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: sepia(0.3) saturate(0.85) contrast(1.05) brightness(0.85);
}
.specjalizacje-card__media:has(img)::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--tone-shade), transparent 40%),
    var(--tone-tint);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.specjalizacje-card__media:has(img) .specjalizacje-card__ph { display: none; }
:root[data-theme="light"] .specjalizacje-card__media img {
  filter: sepia(0.2) saturate(0.9) brightness(0.95);
}
/* Steel tone: the generated area photos are warm brown; turn the sepia cast
   to a muted steel blue (sepia then a half-turn of hue, low saturation). */
:root[data-tone="steel"] .specjalizacje-card__media img {
  filter: sepia(0.3) hue-rotate(180deg) saturate(0.55) contrast(1.06) brightness(0.9);
}
:root[data-tone="steel"][data-theme="light"] .specjalizacje-card__media img {
  filter: sepia(0.3) hue-rotate(180deg) saturate(0.5) brightness(0.98);
}

.specjalizacje-card h3 {
  margin-bottom: 0.5rem;
  /* Room for two lines in every card, so the descriptions and the links
     start at the same height whether or not a title wraps. */
  min-height: calc(var(--lh-h3) * 2em);
}
.specjalizacje-card p {
  max-width: 44ch;
  margin: 0 0 1rem;
  color: var(--text-secondary);
  font-size: var(--size-card);
  line-height: var(--lh-card);
}
/* The card link is the same component as "Wszystkie specjalizacje"
   (.link-tertiary: no underline, same size and arrow), pinned to the bottom. */
.specjalizacje-card__link { margin-top: auto; align-self: flex-start; }

/* Isometric figures: one stroke in four weights, drawn from the page's own
   tokens so both themes and both tones follow. The plate is the card's
   ground; the bright stroke is the brass accent. */
.specjalizacje-card__media {
  --hairline-plate: var(--surface);
  --hairline-hi: var(--accent-brass-text);
  --hairline-edge: color-mix(in srgb, var(--text) 62%, var(--surface));
  --hairline-mid: color-mix(in srgb, var(--text) 36%, var(--surface));
  --hairline-lo: color-mix(in srgb, var(--text) 16%, var(--surface));
}
.hl-fig {
  position: absolute;
  inset: 1.25rem 2rem;   /* the figure sits small inside its card */
  aspect-ratio: auto;
}
:root[data-areas="bento"] .hl-fig { inset: 0.5rem; }
.hl-fig > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The last cards need room after them to reach the start edge, so the arrows
   and dots can step through every card (a flex item sized to the leftover). */
.carousel__track::after {
  content: "";
  flex: 0 0 max(0px, calc(100% - min(84vw, 28rem) - 1.25rem));
}

/* Bento: from tablet width the six areas sit in a matrix instead of the
   carousel (review menu: data-areas="bento"; the carousel is the default). */
@media (min-width: 900px) {
  :root[data-areas="bento"] .carousel__track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    max-width: calc(1160px + 3rem);
    margin: 0 auto;
    padding: 0.25rem 1.5rem 0.5rem;
    overflow: visible;
    scroll-snap-type: none;
  }
  :root[data-areas="bento"] .carousel__track::after { display: none; }
  :root[data-areas="bento"] .specjalizacje-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--surface);
    border: 1px solid var(--border);
    transition: border-color 0.2s ease;
  }
  :root[data-areas="bento"] .specjalizacje-card:hover { border-color: var(--accent-brass); }
  :root[data-areas="bento"] .specjalizacje-card__media {
    border: 0;
    margin: 0;
    background-color: transparent;
  }
  :root[data-areas="bento"] .specjalizacje-card__body { padding: 0.25rem 1.5rem 1.5rem; }
  :root[data-areas="bento"] .specjalizacje-card h3 { margin-bottom: 0.5rem; }
  :root[data-areas="bento"] .specjalizacje-card p { margin-bottom: 1.25rem; }

  /* The matrix: a wide tile, a tall one, two small, a wide one, a small one. */
  :root[data-areas="bento"] [data-area="akta"] { grid-column: 1 / span 2; flex-direction: row; align-items: center; }
  :root[data-areas="bento"] [data-area="miasto"] { grid-column: 3; grid-row: 1 / span 2; }
  :root[data-areas="bento"] [data-area="bramki"] { grid-column: 1 / span 2; flex-direction: row; align-items: center; }
  :root[data-areas="bento"] [data-area="akta"] .specjalizacje-card__media,
  :root[data-areas="bento"] [data-area="bramki"] .specjalizacje-card__media { flex: 0 0 52%; }
  :root[data-areas="bento"] [data-area="akta"] .specjalizacje-card__body,
  :root[data-areas="bento"] [data-area="bramki"] .specjalizacje-card__body { padding: 1.5rem 1.5rem 1.5rem 0; }
  :root[data-areas="bento"] [data-area="bramki"] { flex-direction: row-reverse; }
  :root[data-areas="bento"] [data-area="bramki"] .specjalizacje-card__body { padding: 1.5rem 0 1.5rem 1.5rem; }
  /* The tall tile lets its figure take the spare height. */
  :root[data-areas="bento"] [data-area="miasto"] .specjalizacje-card__media { aspect-ratio: auto; flex: 1 1 auto; min-height: 12rem; }

  /* Only the link to the full list stays under the matrix. */
  :root[data-areas="bento"] .carousel__dots,
  :root[data-areas="bento"] .carousel__arrows { display: none; }
  :root[data-areas="bento"] .carousel__controls { justify-content: center; margin-top: 1.5rem; }
}

/* Grid (the shipped layout): the six areas as equal cards, three across on
   desktop, two on tablets, one on phones. Nothing scrolls, so there are no
   dots or arrows; only the link to the full list stays under the cards.
   (review menu: data-areas="grid" | "bento" | "carousel") */
:root[data-areas="grid"] .carousel__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1.25rem;
  max-width: calc(1160px + 3rem);
  margin: 0 auto;
  padding: 0.25rem 1.5rem 0.5rem;
  overflow: visible;
  scroll-snap-type: none;
}
:root[data-areas="grid"] .carousel__track::after { display: none; }
:root[data-areas="grid"] .specjalizacje-card {
  flex: none;
  min-width: 0;
  transition: border-color 0.2s ease;
}
:root[data-areas="grid"] .specjalizacje-card:hover { border-color: var(--accent-brass); }
:root[data-areas="grid"] .specjalizacje-card__media { margin-bottom: 0.5rem; }
:root[data-areas="grid"] .hl-fig { inset: 0.5rem; }
:root[data-areas="grid"] .carousel__dots,
:root[data-areas="grid"] .carousel__arrows { display: none; }
:root[data-areas="grid"] .carousel__controls { justify-content: center; margin-top: 2rem; }
:root[data-areas="grid"] .carousel__lead .link-tertiary { flex: 0 1 auto; }
@media (max-width: 991px) {
  :root[data-areas="grid"] .carousel__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  :root[data-areas="grid"] .carousel__track { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
}

/* Controls: dots left, arrows right, both aligned with the page container. */
.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.75rem;
}
.carousel__lead {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.carousel__dots {
  display: flex;
  align-items: center;
}
.carousel__dot {
  position: relative;
  width: 1.5rem;       /* generous hit area around the small dot */
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.carousel__dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0;
  transform: translate(-50%, -50%);
  background-color: var(--border);
  transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.carousel__dot[aria-current="true"]::before {
  background-color: var(--text);
  transform: translate(-50%, -50%) scale(1.25);
}
.carousel__dot:focus-visible {
  outline: 2px solid var(--accent-brass);
  outline-offset: -4px;
}
.carousel__arrows {
  display: flex;
  gap: 0.75rem;
}
.carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--border);
  border-radius: 0;
  background-color: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.2s ease, background-color 0.2s ease;
}
.carousel__icon {
  width: 1.125rem;
  height: 1.125rem;
}
.carousel__arrow:active:not(:disabled) { transform: scale(0.94); }
.carousel__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.carousel__arrow:focus-visible {
  outline: 2px solid var(--accent-brass);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .carousel__arrow:hover:not(:disabled) { background-color: var(--border); }
}
@media (prefers-reduced-motion: reduce) {
  .carousel__dot::before,
  .carousel__arrow { transition: none; }
}

/* ---------- Sprawa pilna ---------- */
.sprawa-pilna-section {
  --siren-red: #FF3B4A;
  --siren-blue: #3D7BFF;
  /* Overall strength of the flashes (js/siren.js reads it). */
  --siren-peak: 1;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--space-section-y) 0;
  background-color: var(--background-deep);
}
:root[data-theme="light"] .sprawa-pilna-section {
  --siren-red: #E5303F;
  --siren-blue: #2F6BE8;
  --siren-peak: 0.6;
}

/* Police-light glow: the behaviour lives in js/siren.js (irregular bursts
   that travel around the perimeter, stronger while scrolling, exactly zero
   between flashes). Here there are only the two lights: a soft round blob
   each, centred on a point of the section's edge by JS, so half of it spills
   into the card. Invisible by default, and with reduced motion they simply
   never appear. */
.siren-rim {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.siren-rim__light {
  position: absolute;
  left: 0;
  top: 0;
  width: 560px;   /* keep in sync with R in js/siren.js */
  height: 560px;
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(-9999px, 0, 0);
  will-change: transform, opacity;
}
.siren-rim__light--red {
  background: radial-gradient(closest-side,
    var(--siren-red) 0%,
    color-mix(in srgb, var(--siren-red) 62%, transparent) 18%,
    color-mix(in srgb, var(--siren-red) 28%, transparent) 42%,
    color-mix(in srgb, var(--siren-red) 8%, transparent) 70%,
    transparent 100%);
}
.siren-rim__light--blue {
  background: radial-gradient(closest-side,
    var(--siren-blue) 0%,
    color-mix(in srgb, var(--siren-blue) 62%, transparent) 18%,
    color-mix(in srgb, var(--siren-blue) 28%, transparent) 42%,
    color-mix(in srgb, var(--siren-blue) 8%, transparent) 70%,
    transparent 100%);
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem 4rem;
  margin-bottom: 5rem;
}
.step {
  min-height: 15rem;
  border-top: 1px solid var(--border);
  padding-top: 2.25rem;
}
.step__num {
  display: block;
  font-size: var(--size-note);
  color: var(--text-secondary);
  margin-bottom: 2rem;
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: var(--lh-note);
  letter-spacing: var(--ls-note);
}
.step h3 {
  margin-bottom: 1.25rem;
}
.step p {
  color: var(--text-secondary);
  font-size: var(--size-card);
  margin: 0;
  line-height: 1.75;
}
/* Key phrases: a highlighter pass, not a link. Dark text on a bright brass
   wash, so it reads as marked-up text in both themes (about 10:1 against the
   page text colour it replaces) and never as something to click. */
.marker {
  background-color: transparent; /* the browser's default <mark> is yellow */
  color: #1C1A17;
  background-image: linear-gradient(#E6C27A, #E6C27A);
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 100% 100%;
  padding: 0.05em 0.3em;
  border-radius: 0.125rem;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .marker {
      background-size: 0% 100%;
      animation: marker-sweep linear both;
      animation-timeline: view();
      animation-range: entry 35% cover 45%;
    }
  }
}
@keyframes marker-sweep {
  to { background-size: 100% 100%; }
}
.guide-cta {
  display: flex;
  justify-content: center;
}
.sprawa-pilna-section .section-intro { max-width: none; }
.sprawa-pilna-section .section-intro span { display: block; }

/* ---------- Adwokat (bio) ---------- */
.bio-section {
  padding: var(--space-section-y) 0;
}
.bio-grid {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 896 / 1200;
  object-fit: cover;
  /* The portrait is cropped with the head on the vertical centre line, so the
     head stays centred at any width; narrow frames lose legs, not shoulders. */
  object-position: 50% 8%;
  border: 1px solid var(--border);
}
@media (min-width: 992px) {
  /* The photo runs from the left edge of the page to the text column and stays
     in view while the text scrolls: a full-height side panel, not a thumbnail.
     The wrapper is the panel; the whole figure stays in view (head and shoes): it is
     as wide as the photo's own ratio allows at this height, never wider than the
     column (--ar is set by js/copy-review.js from the chosen photo). */
  .bio-grid {
    /* wider than before: the photo's backdrop needs room to ease out before the text */
    --bio-gap: clamp(3rem, 12vw, 9rem);
    column-gap: var(--bio-gap);
  }
  .portrait-wrap {
    --bleed: calc(1.5rem - min(0px, (1160px - 100vw) / 2));
    --bio-h: calc(100svh - var(--nav-height, 5rem));
    --bio-w: min(calc(22rem + var(--bleed)), calc(var(--bio-h) * var(--ar, 0.7467)));
    position: sticky;
    top: var(--nav-height, 5rem);
    width: var(--bio-w);
    height: var(--bio-h);
    margin-left: calc(-1 * var(--bleed));
  }
  .portrait-wrap .portrait {
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    border-width: 0;
    object-position: 50% 0%;
  }
  /* The photo melts into the page in two layers (strips baked by blurring the photo's
     own right side, --bio-blend and --bio-fade in js/copy-review.js). ::before sits over
     the photo's last fifth: a blurred copy of it that fades in, so the sharp photo turns
     soft before it ends and there is no edge to find. ::after carries the blurred
     backdrop on to the right and eases it out before the text column starts. */
  .portrait-wrap::before,
  .portrait-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .portrait-wrap::before {
    left: 78%;
    width: 22%;
    background-image: var(--bio-blend, none);
  }
  .portrait-wrap::after {
    left: 100%;
    width: max(0px, calc(var(--bleed) + 22rem + var(--bio-gap) - var(--bio-w) - 1rem));
    background-image: var(--bio-fade, none);
  }
}
.bio-content h1,
.bio-content h2 {
  margin-bottom: 1.5rem;
}
.bio-intro {
  max-width: 52ch;
  margin-bottom: 2rem;
  font-size: var(--size-lead);
  line-height: var(--lh-lead);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-weight: 400;
}
.bio-content > p {
  max-width: 65ch;
  margin: 0 0 1em;
}
/* Cases and professional data share one spec-sheet pattern: a mono label on
   the left, the value on the right, hairlines between rows. Data is set in
   mono (it is a record), the case descriptions stay in the text face. */
.bio-group {
  margin: 0 0 0.5rem;
}
.bio-group__desc {
  max-width: 64ch;
  margin: 0 0 1.5rem;
  color: var(--text-secondary);
}
/* Desktop: the portrait stays put while the text column scrolls through three
   short panels (about, cases, professional data), each revealed as it enters. */
.bio-panel + .bio-panel { margin-top: 4rem; }
@media (min-width: 992px) {
  /* One line: sized to the text column. */
  .bio-content h1,
  .bio-content h2 { font-size: min(var(--size-h2), 3.7vw); white-space: nowrap; }
  /* The photo is pinned for the whole section: it starts flush with the top of
     the section, and the text begins 30% of a screen down and ends 30% before
     the end, so the photo is only released once the last button has risen
     to 30% from the bottom of the screen. */
  .bio-section { padding-block: 0; }
  .bio-content { padding-block: 30svh 10svh; }
  .bio-panel .credentials { margin-bottom: 0; }
  .bio-panel .button-alert { align-self: flex-start; }
}
/* Content eases in from the bottom edge of the viewport and out at the top
   (opacity and a small lift, no blur), driven by each element's own scroll position. Plain
   visible content is the default where view timelines are unsupported. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bio-content h1,
    .bio-content h2,
    .bio-group,
    .bio-group__desc,
    .credentials > div,
    .bio-content .button-alert {
      animation: edge-fade linear both;
      animation-timeline: view();
    }
  }
}
@keyframes edge-fade {
  0% { opacity: 0; transform: translateY(0.75rem); }
  18% { opacity: 1; transform: none; }
  82% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-0.75rem); }
}
.credentials {
  display: grid;
  margin: 0 0 1rem;
  border-top: 1px solid var(--border);
}
.credentials div {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: 1rem;
  padding: 0.875rem 0;
}
.credentials div + div {
  border-top: 1px solid var(--border);
}
/* In the About panels the rows breathe more: the text sat close to the rules. */
.bio-panel .credentials div {
  padding: 1.375rem 0;
}
.credentials dt {
  font-size: var(--size-note);
  color: var(--text-secondary);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--ls-note);
  line-height: 1.75;
  font-family: var(--font-mono);
}
.credentials dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text);
}
.credentials dd { text-wrap: pretty; }
.credentials dd a {
  color: var(--text);
  border-bottom: 1px solid var(--accent-brass);
}
.credentials dd a:hover { color: var(--accent-brass-text); }
/* Inline technical terms (standards) use the mono of the data sheets;
   journal titles use the serif so they stand out from running text. */
.tech {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: var(--ls-note);
  color: var(--text);
}
.pub {
  font-family: var(--font-serif);
  font-style: normal;
  color: var(--text);
}
.timeline {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline li {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  gap: 0.75rem;
}
.timeline li > span:first-child { color: var(--text-secondary); }
.credentials--prose dd {
  font-family: var(--font-body);
  font-size: var(--size-card);
  line-height: 1.6;
  color: var(--text-secondary);
}
.bio-content .button-alert,
.bio-content .button-primary { margin-top: 1.5rem; }
/* The booking button closes the About section. The band that once held the
   "first talk is free" line is gone, so the button stands on its own. */
.bio-cta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem 2rem;
  margin-top: 4rem;
}
.bio-cta__text { margin: 0; max-width: 34ch; line-height: 1.55; color: var(--text-secondary); }
.bio-cta__text strong { display: block; font-weight: 500; color: var(--text); }
.bio-content .bio-cta .button-primary { flex: none; margin-top: 0; }
@media (max-width: 640px) {
  .bio-cta { flex-direction: column; align-items: flex-start; }
}
.credentials .bio-todo {
  color: var(--text-muted);
  font-style: italic;
}

/* ---------- Strefa Wiedzy (minimal) ---------- */
.strefa-wiedzy-section {
  padding: var(--space-section-y) 0;
}
/* Same presence as the claim band: at least 72% of a screen, content centred. */
.sprawa-pilna-section,
.strefa-wiedzy-section {
  display: grid;
  align-items: center;
  min-height: 72vh;
}
.strefa-wiedzy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2.5rem;
}
/* Cards: the title, then a footer row with the category on the left and the
   reading time (clock + minutes) on the right. */
.knowledge-card {
  display: flex;
  flex-direction: column;
  min-height: 12rem;
  border-top: 1px solid var(--border);
  padding-top: 1.75rem;
}
.knowledge-card__time,
.knowledge-card__tag {
  font-family: var(--font-mono);
  font-size: var(--size-note);
  letter-spacing: var(--ls-note);
  line-height: var(--lh-note);
  color: var(--text-secondary);
}
.knowledge-card h3 {
  margin: 0;
  font-size: 1.375rem;
  /* Lighter and looser than the other h3s: these are long titles, and at the
     heading weight and a tight leading they read as a solid block. */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  /* Fill the card: balancing would pull every line in from the right edge. */
  text-wrap: pretty;
}
.knowledge-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.5rem;
}
.knowledge-card__tag {
  font-weight: 400;
  text-transform: uppercase;
}
.knowledge-card__time {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}
.knowledge-card__icon {
  width: 0.9375rem;
  height: 0.9375rem;
}
.knowledge-card:hover h3,
.knowledge-card:focus-visible h3 {
  text-decoration: underline;
  text-decoration-color: var(--accent-brass);
  text-underline-offset: 0.25em;
}

/* ---------- Rezerwacja: call button beside the Calendesk booking ---------- */
/* Left: heading, the number as a brass button, Signal note. Right: the
   Calendesk widget (a cross-origin iframe, so only its frame is styled here;
   colours inside are set in the Calendesk panel). */
.rezerwacja-section {
  padding: var(--space-section-y-lg) 0;
  background-color: var(--background-deep);
}
.rezerwacja-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 6rem);
  align-items: start;
}
.rezerwacja-content { max-width: 36rem; }
.rezerwacja-lede {
  margin: 1.25rem 0 2.25rem;
  max-width: 30rem;
  font-size: var(--size-lead);
  line-height: 1.5;
  text-wrap: balance;
  color: var(--text-secondary);
}
.rezerwacja-call {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 1.125rem 2rem 1.125rem 1.5rem;
  background-color: var(--accent-brass);
  color: var(--background-deep);
  border-radius: 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  letter-spacing: var(--ls-h3);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.rezerwacja-call:hover { background-color: var(--accent-brass-hover); }
.rezerwacja-call:active { transform: translateY(1px) scale(0.99); }
.rezerwacja-call:focus-visible { outline: 2px solid var(--accent-brass-text); outline-offset: 3px; }
.rezerwacja-call__icon { width: 1.75rem; height: 1.75rem; flex: none; }
.rezerwacja-signal {
  margin: 1.5rem 0 0;
  max-width: 30rem;
  font-size: var(--size-small);
  line-height: 1.6;
  color: var(--text-muted);
}
.calendesk-embed {
  align-self: stretch;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent-brass);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.5);
}
.calendesk-frame {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block;
  border: none;
  margin: 0;
  height: 620px;
}
@media (max-width: 479px) {
  /* the number and the icon must fit a 320 px screen on one line */
  .rezerwacja-call { gap: 0.75rem; padding-inline: 1.125rem 1.25rem; }
  .rezerwacja-call__icon { width: 1.5rem; height: 1.5rem; }
}


/* ---------- Contact switcher (booking / anonymous message) ---------- */
.contact-switch { min-width: 0; }
.contact-switch__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  margin-bottom: 1.25rem;
}
.contact-switch__tab {
  font-family: var(--font-body);
  font-size: var(--size-small);
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.875rem 1rem;
  background: transparent;
  color: var(--text-muted);
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.contact-switch__tab + .contact-switch__tab { border-left: 1px solid var(--border); }
.contact-switch__tab:hover { color: var(--text); }
.contact-switch__tab[aria-selected="true"] {
  background-color: var(--accent-brass);
  color: var(--background);
}
.contact-switch__tab:focus-visible { outline: 2px solid var(--accent-brass); outline-offset: 2px; }
.contact-switch__panel[hidden] { display: none; }
.contact-switch__intro {
  color: var(--text-secondary);
  font-size: var(--size-small);
  margin: 0 0 1.25rem;
}
.form-warning {
  padding: 1rem 1.25rem;
  font-size: var(--size-small);
  line-height: 1.55;
  color: #FFFFFF;
  background-color: var(--accent-alert);
  margin-bottom: 1.5rem;
}
.form-warning b { color: #FFFFFF; font-weight: 700;
  font-weight: 600;
}
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-form .button-primary { align-self: center; }
.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field label {
  font-size: var(--size-small);
  color: var(--text-muted);
}
.form-field input,
.form-field textarea {
  width: 100%;
  background-color: var(--background);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 0.875rem;
  border-radius: 2px;
  transition: border-color 0.2s ease;
}
.form-field input:hover,
.form-field textarea:hover,
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--accent-brass);
  outline: none;
}
.form-field textarea { resize: vertical; min-height: 5.5rem; }
.form-consent {
  font-size: var(--size-small);
  color: var(--text-muted);
  line-height: 1.6;
}
.form-consent a { border-bottom: 1px solid var(--accent-brass); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 3rem 0 1.5rem;
  background-color: var(--background-deep);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
}
.footer-grid h4 {
  margin-bottom: 1rem;
}
.footer-grid p, .footer-grid a {
  color: var(--text-secondary);
  font-size: var(--size-small);
  line-height: 1.8;
}
.footer-grid a:hover { color: var(--accent-brass-text); }
.footer-disclaimer {
  max-width: 65ch;
  margin-top: 1.5rem;
  font-size: var(--size-note);
  line-height: 1.6;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: var(--size-small);
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .strefa-wiedzy-grid,
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .reason-head { grid-template-columns: 1fr; margin-bottom: 3.5rem; }
  .principle { grid-template-columns: minmax(0, 1fr); gap: 1rem 2rem; }
  .principle__num { grid-column: 1; grid-row: 1; }
  .principle h3 { grid-column: 1 / -1; grid-row: 2; }
  .principle p { grid-column: 1 / -1; grid-row: 3; max-width: 60ch; padding-top: 0; }
  .rezerwacja-grid,
  .bio-grid { grid-template-columns: 1fr; }
  .bio-grid { gap: 2.5rem; }
  .credentials div { grid-template-columns: 1fr; gap: 0.25rem; }
  .portrait { max-width: 26rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1023px) {
  .site-nav__links { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-nav__actions .theme-toggle { display: none; }
  /* The underline belongs to the bar; in the opened menu the current page is just brighter. */
  .site-nav__item::after { display: none; }
}

@media (max-width: 767px) {
  .strefa-wiedzy-grid,
  .steps-grid { grid-template-columns: 1fr; }
  .site-nav__inner { padding: 1rem; }
  .site-nav__logo-img { height: 28px; }
  .site-nav__actions { gap: 0.25rem; }
  .button-alert--nav { padding: 0.5rem 0.625rem; gap: 0.5rem; font-size: 0.9375rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; }
}

@media (max-width: 359px) {
  .button-alert__hours { display: none; }
}

/* Phone and tablet menu: a full-height sheet under the bar. Rows are 56 px
   tall (44 px is the floor for a touch target); each tab is one big target
   with its "full page" arrow as a second one at the right. The page behind
   does not scroll while it is open. (The bar has a backdrop-filter, which
   makes it the containing block, so the sheet is absolute, not fixed.) */
body.nav-open { overflow: hidden; }
body.nav-open .site-nav__links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100dvh - 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px));
  background-color: var(--background);
}
body.nav-open .site-nav__item {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--border);
}
body.nav-open .site-nav__links a:not(.site-nav__detail) {
  display: flex;
  align-items: center;
  flex: 1;
  min-height: 3.5rem;
  font-size: 1.1875rem;
  color: var(--text);
}
body.nav-open .site-nav__item:has(a[aria-current]) > a:first-child { color: var(--accent-brass-text); }
body.nav-open .site-nav__detail {
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  padding: 0;
  margin-right: -1rem;
}
body.nav-open .site-nav__detail-icon { width: 1.25rem; height: 1.25rem; }
body.nav-open .theme-toggle--menu {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.875rem;
  width: 100%;
  height: auto;
  min-height: 3.5rem;
  padding: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--text-secondary);
}
body.nav-open .theme-toggle--menu svg { width: 1.25rem; height: 1.25rem; }
/* The one thing to do in a crisis sits at the bottom of the sheet, in thumb
   reach: the number and when someone answers. */
.site-nav__call { display: none; }
body.nav-open .site-nav__links a.site-nav__call {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  padding: 1rem 1.25rem;
  min-height: 4rem;
  white-space: normal;
  border-radius: 2px;
  background: color-mix(in srgb, var(--call-green) 80%, #000);  /* white text: 4.9:1 */
  color: #fff;
}
.site-nav__call-icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; fill: currentColor; }
.site-nav__call-text { display: flex; flex-direction: column; gap: 0.125rem; }
.site-nav__call-main { font-size: 1.1875rem; font-weight: 600; line-height: var(--lh-ui); }
.site-nav__call-sub { font-size: var(--size-small); line-height: var(--lh-ui); }

/* ---------- Desktop reveal ----------
   Desktop mode only: a phone visitor may be mid-crisis, so nothing there
   waits on an animation. Scroll-driven (no JS), and content is fully
   visible by default: browsers without animation-timeline, and anyone who
   prefers reduced motion, simply get the static page. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    main h2,
    .section-intro,
    .principle,
    .step,
    .bio-grid > *,
    .knowledge-card {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}

/* Anchored sections stop below the fixed nav. */
[data-section] { scroll-margin-top: var(--nav-height, 5rem); }
.link-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: var(--lh-ui);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.link-tertiary__icon {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .link-tertiary:hover { color: var(--accent-brass-text); }
  .link-tertiary:hover .link-tertiary__icon { transform: translateX(2px); }
}
.section-more {
  margin-top: 3.5rem;
  text-align: center;
}

/* Small screens: dots and arrows share the first row, the link gets its own. */
@media (max-width: 767px) {
  .carousel__controls { flex-wrap: wrap; row-gap: 0.5rem; }
  .carousel__lead { display: contents; }
  .carousel__arrows { order: 2; }
  .carousel__lead .link-tertiary { order: 3; flex: 0 0 100%; }
}

/* ---------- Phones ----------
   Found by measuring at 320, 375 and 812 x 375: bar controls under 44 px,
   centred paragraphs, a contact card taller than a short screen, a nowrap
   button wider than the viewport. Touch rules key on width or a coarse
   pointer so a narrow desktop window gets them too. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
a, button { -webkit-tap-highlight-color: color-mix(in srgb, var(--accent-brass) 22%, transparent); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Bar: logo, the call pill and the menu button are all 44 px targets. */
@media (max-width: 1023px) {
  .site-nav__logo { display: flex; align-items: center; min-height: 2.75rem; }
  .button-alert--nav { min-height: 2.75rem; padding-block: 0; }
}
@media (max-width: 767px) {
  .site-nav__inner { padding: 0.5rem 1rem; gap: 0.5rem; }
}

/* Short screens (small phones, and phones on their side): the contact card
   has to fit what it shows, so its pieces shrink with the height. In
   landscape js/main.js drops the scene altogether and the page is stacked. */
@media (max-height: 700px) {
  .scene { --avatar-d: clamp(6rem, 21svh, 9rem); }
  .scene__card { padding-top: 4.25rem; padding-bottom: 1.5rem; }
  .scene__name { margin-top: 1.125rem; font-size: clamp(1.875rem, 7vw, 2.75rem); }
  .scene__org { margin-bottom: 1.25rem; }
  .scene__disc { width: 3.75rem; height: 3.75rem; }
  .scene__line { margin-top: 1.125rem; }
}
@media (max-height: 640px) {
  .scene__cue { display: none; }
}

@media (max-width: 767px) {
  /* Reading: left edge, measure and size set for a thumb-scrolled column.
     Centred multi-line paragraphs have no edge to return to. */
  .text-center { text-align: left; }
  .section-intro { margin-left: 0; margin-right: 0; font-size: var(--size-body); line-height: var(--lh-body); text-wrap: pretty; }
  .hero__lead { font-size: 1.125rem; text-wrap: pretty; }
  h1, h2, h3 { text-wrap: balance; }
  .copy-sub { text-align: left; }

  /* A nowrap label wider than the screen stretched its whole container
     (329 px of button in a 296 px column at 320). Wrap, and fill the row. */
  .button-alert { white-space: normal; }
  .guide-cta .button-alert,
  .bio-content .button-alert {
    width: 100%;
    justify-content: center;
    text-align: center;
    min-height: 3rem;
  }
}

/* Touch targets (HIG: 44 x 44 pt). Inline links inside sentences are left
   alone; everything that stands on its own gets the height. */
@media (max-width: 1023px), (pointer: coarse) {
  .specjalizacje-card__link,
  .link-tertiary { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .carousel__dot { width: 1.75rem; }
  .contact-switch__tab { min-height: 2.75rem; }
  .footer-grid > div:nth-child(n+2) p br { display: none; }
  .footer-grid > div:nth-child(n+2) p a {
    display: block;
    padding-block: 0.6875rem;
  }
  .footer-grid > div:first-child p a { display: inline-block; padding-block: 0.6875rem; }
}
@media (max-width: 359px) {
  .scene__actions { gap: 0.25rem; }
  .scene__action { font-size: 0.8125rem; }
}

/* Hero "Napisz" action and the contact-form tab bar stay hidden for now; markup kept. */
.scene__action[data-hidden],
.contact-switch__tabs[data-hidden] { display: none; }

/* Hero action labels stay on one line ("Zapisz kontakt" is wider than the 5.25rem slot) */
.scene__label { white-space: nowrap; }

/* ---------- Partner tab ----------
   A tab on the right edge of the window that names a partner firm and opens its
   site in a new tab (docs/partner-tab.md). It is a reusable component: one
   <a class="partner-tab"> with a text span and the arrow. Brass fill with the
   page's deepest colour as text, so it reads in every tone and theme. Under
   768 px it moves into the phone menu (the --menu variant). */
.partner-tab {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 90;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.5625rem;
  background-color: var(--accent-brass);
  color: var(--background-deep);
  border-radius: 2px 0 0 2px;
  box-shadow: 0 0.5rem 1.5rem -0.5rem rgb(0 0 0 / 0.5);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-50%);
  transition: background-color 0.2s ease, padding 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.partner-tab:hover,
.partner-tab:focus-visible { background-color: var(--accent-brass-hover); padding-right: 0.8125rem; }
.partner-tab:focus-visible { outline: 2px solid var(--accent-brass-text); outline-offset: 2px; }
.partner-tab__text { writing-mode: vertical-rl; white-space: nowrap; letter-spacing: 0.02em; }
.partner-tab__name { font-weight: 700; }
.partner-tab__icon { width: 0.9375rem; height: 0.9375rem; flex: none; }
@media (min-width: 768px) {
  .partner-tab { display: flex; }
}
/* while the contact-card scene plays the tab waits, then fades in with the bar */
:root[data-scene="on"] .partner-tab { opacity: clamp(0, calc((var(--p, 1) - 0.7) / 0.15), 1); }
@media print { .partner-tab { display: none; } }

/* phone menu: a plain row in the sheet instead of the edge tab */
.partner-tab--menu { display: none; }
body.nav-open .site-nav__links a.partner-tab--menu {
  position: static;
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.5rem;
  padding: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  box-shadow: none;
  transform: none;
  color: var(--text);
  font-size: 1.1875rem;
}
body.nav-open .partner-tab--menu .partner-tab__text { writing-mode: horizontal-tb; }
body.nav-open .partner-tab--menu .partner-tab__label { color: var(--text-secondary); }
body.nav-open .partner-tab--menu .partner-tab__icon { width: 1.125rem; height: 1.125rem; color: var(--text-secondary); }
@media (min-width: 768px) {
  body.nav-open .site-nav__links a.partner-tab--menu { display: none; }
}