/* ==========================================================================
   Inna Bajka – mikroszkoła
   Nowoczesny, responsywny szablon: cascade layers, custom properties,
   clamp(), :has(), popover, <dialog>, scroll-driven animations.
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* ---------- RESET ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  img, picture, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  p, h1, h2, h3 { overflow-wrap: break-word; }
}

/* ---------- TOKENS ---------- */
@layer tokens {
  :root {
    /* Paleta inspirowana logo: brąz pnia, oliwkowe liście, złote słońce */
    --c-bg: #fbf6ee;
    --c-bg-alt: #f4ebdd;
    --c-surface: #ffffff;
    --c-ink: #3b2a1e;
    --c-ink-soft: #6d5a4b;
    --c-brand: #7b4d2c;
    --c-brand-dark: #5b3620;
    --c-leaf: #7f9a3c;
    --c-leaf-soft: #e6ecd3;
    --c-sun: #e0a33a;
    --c-sky: #5c9fb5;
    --c-berry: #c9665a;
    --c-line: #eadfcd;
    --c-focus: #e0a33a;

    --ff-display: "Fraunces", Georgia, "Times New Roman", serif;
    --ff-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --fs-300: clamp(0.88rem, 0.85rem + 0.1vw, 0.94rem);
    --fs-400: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
    --fs-500: clamp(1.13rem, 1.05rem + 0.4vw, 1.3rem);
    --fs-600: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
    --fs-700: clamp(1.8rem, 1.45rem + 1.6vw, 2.8rem);
    --fs-800: clamp(2.3rem, 1.7rem + 2.8vw, 4.2rem);

    --space-xs: 0.5rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: clamp(2rem, 1.5rem + 2vw, 3rem);
    --space-xl: clamp(3.5rem, 2.5rem + 5vw, 7rem);

    --radius-s: 0.75rem;
    --radius-m: 1.25rem;
    --radius-l: 2rem;
    --radius-blob: 58% 42% 55% 45% / 45% 55% 45% 55%;

    --shadow-s: 0 1px 2px rgb(59 42 30 / .06), 0 2px 8px rgb(59 42 30 / .06);
    --shadow-m: 0 4px 12px rgb(59 42 30 / .08), 0 16px 40px rgb(59 42 30 / .10);

    --container: 72rem;
    --gutter: clamp(1rem, 4vw, 2rem);
    --header-h: 4.5rem;

    --ease: cubic-bezier(.2, .7, .2, 1);
  }
}

/* ---------- BASE ---------- */
@layer base {
  html {
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
    color-scheme: light;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }
  body {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    font-family: var(--ff-body);
    font-size: var(--fs-400);
    line-height: 1.7;
    color: var(--c-ink);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  @supports (overflow: clip) { html, body { overflow-x: clip; } }
  body:has(.lightbox[open]) { overflow: hidden; }

  h1, h2, h3 {
    font-family: var(--ff-display);
    font-weight: 600;
    line-height: 1.15;
    color: var(--c-brand-dark);
    text-wrap: balance;
    font-variation-settings: "opsz" 72;
  }
  p { text-wrap: pretty; }
  a { color: var(--c-brand); text-underline-offset: 0.2em; }
  a:hover { color: var(--c-brand-dark); }
  strong { font-weight: 800; }

  :focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 3px;
    border-radius: 4px;
  }
  ::selection { background: var(--c-sun); color: var(--c-ink); }
}

/* ---------- LAYOUT ---------- */
@layer layout {
  .container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }
  .container--narrow { --container: 48rem; }

  .section { padding-block: var(--space-xl); }

  .section__head {
    text-align: center;
    max-width: 44rem;
    margin: 0 auto var(--space-l);
  }
  .section__title { font-size: var(--fs-700); margin-bottom: var(--space-s); }
  .section__lead { color: var(--c-ink-soft); font-size: var(--fs-500); }
}

/* ---------- COMPONENTS ---------- */
@layer components {

  /* Skip link */
  .skip-link {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    padding: .75rem 1.25rem; border-radius: var(--radius-s);
    background: var(--c-brand); color: #fff; font-weight: 700;
    transition: top .2s;
  }
  .skip-link:focus { top: 1rem; color: #fff; }

  /* Eyebrow */
  .eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: var(--fs-300); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--c-leaf);
    margin-bottom: var(--space-xs);
  }
  .eyebrow::before {
    content: ""; width: 1.4rem; height: 2px; border-radius: 2px; background: currentColor;
  }
  .section__head .eyebrow::after {
    content: ""; width: 1.4rem; height: 2px; border-radius: 2px; background: currentColor;
  }

  .lead { font-size: var(--fs-500); color: var(--c-ink); }

  /* Icons */
  .icon { width: 1.2em; height: 1.2em; flex: none; }

  /* Buttons */
  .btn {
    --btn-bg: transparent; --btn-fg: var(--c-brand); --btn-bd: transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 2.9rem; padding: .7rem 1.4rem;
    border: 2px solid var(--btn-bd); border-radius: 999px;
    background: var(--btn-bg); color: var(--btn-fg);
    font-weight: 800; font-size: var(--fs-300); letter-spacing: .02em;
    text-decoration: none; white-space: nowrap;
    transition: transform .25s var(--ease), background-color .25s, color .25s, box-shadow .25s, border-color .25s;
  }
  .btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
  .btn:active { transform: translateY(0); }
  .btn--lg { min-height: 3.3rem; padding: .85rem 1.8rem; font-size: var(--fs-400); }
  .btn--block { width: 100%; }
  .btn--primary { --btn-bg: var(--c-brand); --btn-fg: #fff; box-shadow: 0 8px 20px -8px rgb(123 77 44 / .6); }
  .btn--primary:hover { --btn-bg: var(--c-brand-dark); box-shadow: 0 12px 24px -8px rgb(91 54 32 / .6); }
  .btn--outline { --btn-bd: var(--c-brand); }
  .btn--outline:hover { --btn-bg: var(--c-brand); --btn-fg: #fff; }
  .btn--ghost { --btn-fg: var(--c-brand); padding-inline: 1rem; }
  .btn--ghost:hover { --btn-bg: var(--c-bg-alt); }
  .btn--light { --btn-bg: #fff; --btn-fg: var(--c-brand-dark); }
  .btn--light:hover { --btn-bg: var(--c-sun); --btn-fg: var(--c-ink); }

  /* ---------- Header ---------- */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--c-bg) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s, box-shadow .3s;
  }
  .site-header.is-scrolled { border-color: var(--c-line); box-shadow: var(--shadow-s); }
  .site-header__inner {
    display: flex; align-items: center; gap: var(--space-s);
    min-height: var(--header-h);
  }

  .brand {
    display: flex; align-items: center; gap: .6rem;
    text-decoration: none; margin-right: auto;
  }
  .brand__mark { width: 3.1rem; height: 3.1rem; object-fit: contain; }
  .brand__identity { display: grid; justify-items: start; align-content: center; gap: .05rem; }
  .brand__wordmark { width: 7.5rem; height: auto; }
  .brand__identity small { font-family: var(--ff-body); font-size: .62rem; font-weight: 800; letter-spacing: .18em; color: var(--c-leaf); }
  .brand__text {
    display: grid; line-height: 1;
    font-family: var(--ff-display); font-weight: 700; font-size: 1.35rem; color: var(--c-brand-dark);
  }
  .brand__text small {
    font-family: var(--ff-body); font-size: .7rem; font-weight: 800; letter-spacing: .18em;
    text-transform: uppercase; color: var(--c-leaf); margin-top: .3rem;
  }

  /* Nav: mobile = popover panel, desktop = inline */
  .nav {
    inset: 0 0 0 auto; margin: 0;
    width: min(22rem, 88vw); height: 100dvh; max-height: none;
    padding: calc(var(--header-h) + 1rem) 1.5rem 2rem;
    border: 0; background: var(--c-surface); color: var(--c-ink);
    box-shadow: var(--shadow-m);
    flex-direction: column; gap: 1.5rem;
    transition: translate .35s var(--ease), opacity .35s, display .35s allow-discrete, overlay .35s allow-discrete;
    translate: 100% 0; opacity: 0;
  }
  .nav:popover-open { display: flex; translate: 0 0; opacity: 1; }
  @starting-style { .nav:popover-open { translate: 100% 0; opacity: 0; } }
  .nav::backdrop { background: rgb(59 42 30 / .35); backdrop-filter: blur(2px); }

  .nav__close {
    position: absolute; top: 1rem; right: 1rem;
    display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
    background: var(--c-bg-alt); color: var(--c-brand-dark);
  }
  .nav__close svg { width: 1.4rem; height: 1.4rem; }

  .nav__list { display: grid; gap: .25rem; }
  .nav__link {
    display: block; padding: .8rem 1rem; border-radius: var(--radius-s);
    font-weight: 700; font-size: 1.1rem; color: var(--c-ink); text-decoration: none;
    transition: background-color .2s, color .2s;
  }
  .nav__link:hover, .nav__link[aria-current="true"] { background: var(--c-bg-alt); color: var(--c-brand); }

  .header-phone { display: none; }

  .burger {
    position: relative; z-index: 60;
    display: grid; place-content: center; gap: 5px;
    width: 2.9rem; height: 2.9rem; border-radius: 50%;
    background: var(--c-surface); box-shadow: var(--shadow-s);
  }
  .burger span {
    display: block; width: 1.3rem; height: 2px; border-radius: 2px; background: var(--c-brand-dark);
    transition: transform .3s var(--ease), opacity .2s;
  }
  body:has(.nav:popover-open) .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body:has(.nav:popover-open) .burger span:nth-child(2) { opacity: 0; }
  body:has(.nav:popover-open) .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-languages { display: flex; align-items: center; gap: .3rem; flex: none; font-size: .76rem; font-weight: 800; color: var(--c-ink-soft); }
  .site-languages a { padding: .35rem .2rem; color: var(--c-ink-soft); text-decoration: none; }
  .site-languages a[aria-current="true"] { color: var(--c-brand-dark); border-bottom: 2px solid var(--c-sun); }
  .site-languages a:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
  @media (min-width: 72rem) {
    .burger, .nav__close { display: none; }
    .nav, .nav:popover-open {
      display: flex; position: static; inset: auto; translate: none; opacity: 1;
      flex-direction: row; align-items: center; gap: .5rem;
      width: auto; height: auto; padding: 0; overflow: visible;
      background: none; box-shadow: none;
    }
    .nav__list { display: flex; gap: .1rem; }
    .nav__link { padding: .5rem .5rem; font-size: .86rem; position: relative; white-space: nowrap; }
    .nav__link:hover, .nav__link[aria-current="true"] { background: none; }
    .nav__link::after {
      content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .25rem; height: 2px;
      border-radius: 2px; background: var(--c-sun);
      scale: 0 1; transition: scale .3s var(--ease);
    }
    .nav__link:hover::after, .nav__link[aria-current="true"]::after { scale: 1 1; }
  }
  @media (min-width: 72rem) and (max-width: 80rem) { .nav__cta { display: none; } }
  @media (min-width: 100rem) {
    .header-phone { display: inline-flex; }
  }

  .news { background: var(--c-bg-alt); }
  .news-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .news-card { border: 1px solid var(--c-line); border-radius: var(--radius-m); padding: clamp(1.2rem, 2vw, 1.8rem); background: var(--c-surface); box-shadow: var(--shadow-s); }
  .news-card time { display: block; margin-bottom: .65rem; color: var(--c-brand-dark); font-size: .85rem; font-weight: 800; }
  .news-card h3 { margin: 0 0 .65rem; font-family: var(--ff-display); font-size: clamp(1.2rem, 2vw, 1.55rem); }
  .news-card p { margin: 0; line-height: 1.65; }

  /* ---------- Hero ---------- */
  .hero {
    position: relative; isolation: isolate;
    padding-block: clamp(2rem, 1rem + 4vw, 5rem) var(--space-xl);
    background:
      radial-gradient(60rem 30rem at 85% 10%, rgb(224 163 58 / .16), transparent 60%),
      radial-gradient(40rem 30rem at 0% 90%, rgb(127 154 60 / .14), transparent 60%);
  }
  .hero__leaves {
    position: absolute; z-index: -1; width: clamp(10rem, 25vw, 20rem); height: auto; aspect-ratio: 1;
    right: -3rem; bottom: -2rem; color: var(--c-leaf); opacity: .12; rotate: -15deg;
  }
  .hero__grid { display: grid; gap: var(--space-l); align-items: center; }
  @media (min-width: 60rem) { .hero__grid { grid-template-columns: 1.05fr 1fr; } }

  .hero__title { font-size: var(--fs-800); margin-bottom: var(--space-m); letter-spacing: -.01em; }
  .hero__title em {
    font-style: italic; color: var(--c-brand);
    background: linear-gradient(transparent 62%, rgb(224 163 58 / .38) 62% 92%, transparent 92%);
    padding-inline: .1em;
  }
  .hero__lead { font-size: var(--fs-500); color: var(--c-ink-soft); max-width: 36rem; margin-bottom: var(--space-l); }
  .hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: var(--space-l); }
  .hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
  .hero__chips li {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .4rem .9rem; border-radius: 999px;
    background: var(--c-surface); box-shadow: var(--shadow-s);
    font-size: var(--fs-300); font-weight: 700; color: var(--c-ink-soft);
  }
  .hero__chips li::before {
    content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c-leaf);
  }
  .hero__chips li:nth-child(2)::before { background: var(--c-sun); }
  .hero__chips li:nth-child(3)::before { background: var(--c-berry); }

  .hero__media { position: relative; padding: 0 0 3rem 2rem; }
  .hero__photo { margin: 0; overflow: hidden; box-shadow: var(--shadow-m); }
  .hero__photo img { width: 100%; height: 100%; object-fit: cover; }
  .hero__photo--main {
    aspect-ratio: 4 / 4.2; border-radius: var(--radius-blob);
    animation: morph 14s ease-in-out infinite alternate;
  }
  .hero__photo--small {
    position: absolute; left: 0; bottom: 0; width: 42%;
    aspect-ratio: 1; border-radius: 50%;
    border: 6px solid var(--c-bg);
  }
  .hero__badge {
    position: absolute; right: 0; bottom: 1.5rem;
    display: grid; gap: .1rem; padding: .9rem 1.2rem; max-width: 12rem;
    background: var(--c-surface); border-radius: var(--radius-m); box-shadow: var(--shadow-m);
    font-size: var(--fs-300); line-height: 1.3; color: var(--c-ink-soft);
    animation: float 6s ease-in-out infinite;
  }
  .hero__badge strong { font-family: var(--ff-display); font-size: 1.35rem; color: var(--c-leaf); }

  @keyframes morph {
    50% { border-radius: 45% 55% 42% 58% / 55% 45% 58% 42%; }
    100% { border-radius: 52% 48% 60% 40% / 40% 60% 45% 55%; }
  }
  @keyframes float { 50% { translate: 0 -8px; } }

  /* ---------- About ---------- */
  .about__grid { display: grid; gap: var(--space-l); align-items: center; }
  @media (min-width: 60rem) { .about__grid { grid-template-columns: .9fr 1.1fr; gap: var(--space-xl); } }
  .about__media { position: relative; }
  .about__media > img:first-child {
    width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover;
    border-radius: var(--radius-l); box-shadow: var(--shadow-m);
  }
  .about__media::before {
    content: ""; position: absolute; inset: 1.5rem -1.5rem -1.5rem 1.5rem; z-index: -1;
    border-radius: var(--radius-l); background: var(--c-leaf-soft);
  }
  .about__logo {
    position: absolute; right: -1rem; top: -1.5rem; width: 6.5rem; height: 6.5rem;
    padding: .5rem; border-radius: 50%; background: var(--c-surface); box-shadow: var(--shadow-m);
  }
  .about__content > * + * { margin-top: var(--space-s); }
  .about__content { color: var(--c-ink-soft); }

  .quote {
    position: relative; margin-top: var(--space-m) !important;
    padding: 1.25rem 1.5rem 1.25rem 3.5rem;
    border-radius: var(--radius-m); background: var(--c-surface); box-shadow: var(--shadow-s);
    font-family: var(--ff-display); font-style: italic; font-size: var(--fs-500); line-height: 1.5;
    color: var(--c-brand-dark);
  }
  .quote::before {
    content: "\201C"; position: absolute; left: 1rem; top: .2rem;
    font-size: 4rem; line-height: 1; color: var(--c-sun);
  }

  /* ---------- Features ---------- */
  .features { background: var(--c-bg-alt); }
  .features__grid {
    display: grid; gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  }
  .feature {
    --accent: var(--c-leaf);
    container-type: inline-size;
    position: relative; overflow: hidden;
    padding: var(--space-l) var(--space-m) var(--space-m);
    border-radius: var(--radius-l); background: var(--c-surface); box-shadow: var(--shadow-s);
    transition: transform .35s var(--ease), box-shadow .35s;
  }
  .feature::after {
    content: ""; position: absolute; right: -2.5rem; top: -2.5rem; width: 7rem; height: 7rem; border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    transition: scale .5s var(--ease);
  }
  .feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-m); }
  .feature:hover::after { scale: 1.6; }
  .feature__icon {
    display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: var(--space-s);
    border-radius: 1rem; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 15%, white);
  }
  .feature__icon svg { width: 1.8rem; height: 1.8rem; }
  .feature h3 { font-size: var(--fs-600); margin-bottom: .5rem; }
  .feature p { color: var(--c-ink-soft); }

  /* ---------- Banner ---------- */
  .banner { padding-block: var(--space-xl) 0; }
  .banner__inner {
    display: grid; gap: var(--space-m); align-items: center;
    padding: clamp(2rem, 1rem + 4vw, 4rem);
    border-radius: var(--radius-l);
    color: #fdf5e8;
    background:
      radial-gradient(30rem 20rem at 100% 0%, rgb(224 163 58 / .45), transparent 60%),
      radial-gradient(25rem 18rem at 0% 100%, rgb(127 154 60 / .45), transparent 60%),
      var(--c-brand-dark);
    box-shadow: var(--shadow-m);
  }
  @media (min-width: 48rem) { .banner__inner { grid-template-columns: 1fr auto; } }
  .banner__title { color: #fff; font-size: var(--fs-700); margin-bottom: .5rem; }
  .banner p { max-width: 40rem; opacity: .9; }

  /* ---------- Public blog ---------- */
  .public-blog, .public-blog .container, .public-blog__feed, .public-blog__post, .public-blog__media { min-width: 0; max-width: 100%; }
  .public-blog__feed { display: grid; gap: 1.25rem; width: 100%; max-width: 58rem; margin-inline: auto; }
  .public-blog__status { text-align: center; color: var(--c-ink-soft); }
  .public-blog__status:empty { display: none; }
  .public-blog__post { overflow: hidden; border: 1px solid rgb(59 91 71 / .14); border-radius: var(--radius-l); background: #fff; box-shadow: var(--shadow-s); }
  .public-blog__post > time { display: block; padding: 1rem 1.25rem .25rem; color: var(--c-brand); font-size: var(--fs-300); font-weight: 800; }
  .public-blog__copy { padding: .65rem 1.25rem 1.15rem; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.65; }
  .public-blog__copy.is-collapsed:not(.is-expanded) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 6; }
  .public-blog__toggle, .public-blog__all { display: block; border: 0; color: var(--c-brand); background: transparent; font-weight: 800; cursor: pointer; }
  .public-blog__toggle { margin: -.8rem 1.25rem .9rem; padding: .25rem 0; }
  .public-blog__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem; width: 100%; overflow: hidden; background: var(--c-bg-alt); }
  .public-blog__media figure { min-width: 0; min-height: 0; width: 100%; height: 15rem; margin: 0; overflow: hidden; background: #e8ebe8; }
  .public-blog__media--1 { grid-template-columns: 1fr; }
  .public-blog__media--1 figure { height: min(32rem, 56vw); }
  .public-blog__photo { display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: zoom-in; }
  .public-blog__media img, .public-blog__media video, .public-blog__photo img { width: 100%; height: 100%; object-fit: cover; }
  .public-blog__all { width: 100%; padding: .8rem 1rem; border-top: 1px solid rgb(59 91 71 / .12); background: #f7faf7; }
  .public-blog__more { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: var(--space-l); }
  .blog-viewer { inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 3.5rem 1rem 1rem; overflow: auto; border: 0; border-radius: 0; background: rgb(10 14 13 / .95); color: #fff; }
  .blog-viewer::backdrop { background: rgb(12 16 14 / .88); }
  .blog-viewer:not([open]) { display: none; }
  .blog-viewer[open] { display: block; }
  .blog-viewer.is-single[open] { display: grid; grid-template-columns: minmax(44px, 1fr) minmax(0, 1400px) minmax(44px, 1fr); place-items: center; padding: 30px; overflow: hidden; }
  .blog-viewer__close { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 2; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: #fff; background: rgb(255 255 255 / .16); }
  .blog-viewer__close svg { width: 1.45rem; height: 1.45rem; }
  .blog-viewer__nav { z-index: 2; display: none; place-items: center; grid-row: 1; width: 48px; height: 64px; padding: 0; border: 0; border-radius: 12px; color: #234c3c; background: rgb(255 255 255 / .86); cursor: pointer; }
  .blog-viewer.is-single.has-multiple .blog-viewer__nav { display: grid; }
  .blog-viewer__nav--prev { grid-column: 1; }
  .blog-viewer__nav--next { grid-column: 3; }
  .blog-viewer__nav svg { width: 1.5rem; height: 1.5rem; }
  .blog-viewer__count { position: fixed; top: 1.65rem; left: 50%; z-index: 2; font-weight: 800; translate: -50% 0; }
  .blog-viewer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .blog-viewer__grid figure { min-width: 0; height: 190px; margin: 0; overflow: hidden; border-radius: 10px; background: #080a09; }
  .blog-viewer__grid img, .blog-viewer__grid video { width: 100%; height: 100%; object-fit: cover; }
  .blog-viewer__grid.is-single { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; width: 100%; min-width: 0; }
  .blog-viewer__grid.is-single figure { display: grid; place-items: center; width: 100%; height: auto; overflow: visible; background: transparent; }
  .blog-viewer__grid.is-single .public-blog__photo { display: grid; place-items: center; width: 100%; height: auto; }
  .blog-viewer__grid.is-single img { display: block; width: auto; max-width: 100%; height: auto; max-height: 88vh; object-fit: contain; border-radius: 10px; }
  @media (max-width: 40rem) {
    .public-blog__post > time { padding: .85rem 1rem .2rem; }
    .public-blog__copy { padding: .55rem 1rem 1rem; }
    .public-blog__media figure { height: 9.5rem; }
    .public-blog__media--1 figure { height: min(29rem, 105vw); }
    .blog-viewer { padding: 3.5rem 6px 6px; }
    .blog-viewer.is-single[open] { grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 6px; }
    .blog-viewer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-viewer__grid figure { height: 150px; }
    .blog-viewer__grid.is-single figure { height: auto; }
    .blog-viewer__grid.is-single img { max-height: 84vh; }
    .blog-viewer__nav { width: 40px; height: 56px; }
    .blog-viewer__close { top: 10px; right: 10px; color: #233e32; background: #fff; }
    .blog-viewer__count { top: auto; bottom: 18px; padding: 7px 12px; border-radius: 999px; background: rgb(17 27 23 / .8); }
  }

  /* ---------- Recruitment ---------- */
  .recruit__grid { display: grid; gap: var(--space-l); align-items: start; }
  @media (min-width: 60rem) { .recruit__grid { grid-template-columns: 1.1fr .9fr; gap: var(--space-xl); } }
  .recruit__content > * + * { margin-top: var(--space-s); }
  .recruit__content p { color: var(--c-ink-soft); }
  .recruit__content strong { color: var(--c-brand); }

  .steps { display: grid; gap: var(--space-s); counter-reset: step; position: relative; }
  .step {
    display: flex; gap: 1rem; align-items: flex-start;
    padding: 1.25rem; border-radius: var(--radius-m);
    background: var(--c-surface); box-shadow: var(--shadow-s);
    border: 1px solid var(--c-line);
  }
  .step__num {
    flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
    font-family: var(--ff-display); font-weight: 700; font-size: 1.25rem;
    color: #fff; background: var(--c-leaf);
  }
  .step:nth-child(2) .step__num { background: var(--c-sun); }
  .step:nth-child(3) .step__num { background: var(--c-brand); }
  .step h3 { font-size: var(--fs-500); margin-bottom: .2rem; }
  .step p { color: var(--c-ink-soft); font-size: var(--fs-300); }

  /* ---------- FAQ ---------- */
  .faq { background: var(--c-bg-alt); }
  .faq__list { display: grid; gap: .75rem; }
  .faq details {
    border-radius: var(--radius-m); background: var(--c-surface); box-shadow: var(--shadow-s);
    overflow: hidden; interpolate-size: allow-keywords;
  }
  .faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.15rem 1.4rem; cursor: pointer; list-style: none;
    font-weight: 800; font-size: var(--fs-500); color: var(--c-brand-dark);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: ""; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%;
    background: var(--c-leaf-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f9a3c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 1rem no-repeat;
    transition: rotate .3s var(--ease);
  }
  .faq details[open] summary::after { rotate: 45deg; }
  .faq details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .35s var(--ease), content-visibility .35s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
  .faq__body { padding: 0 1.4rem 1.25rem; color: var(--c-ink-soft); }

  /* ---------- Contact ---------- */
  .contact__grid { display: grid; gap: var(--space-l); }
  @media (min-width: 60rem) { .contact__grid { grid-template-columns: .85fr 1.15fr; gap: var(--space-xl); } }
  .contact__info > p { color: var(--c-ink-soft); }
  .contact__list { display: grid; gap: .75rem; margin-top: var(--space-m); }
  .contact__item {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.25rem; border-radius: var(--radius-m);
    background: var(--c-surface); box-shadow: var(--shadow-s);
    text-decoration: none; color: var(--c-ink);
    transition: transform .25s var(--ease), box-shadow .25s;
  }
  .contact__item:hover { transform: translateX(4px); box-shadow: var(--shadow-m); color: var(--c-ink); }
  .contact__item small { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-soft); }
  .contact__item strong { font-size: var(--fs-500); color: var(--c-brand-dark); }
  .contact__icon {
    flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
    color: #fff; background: var(--c-brand);
  }
  .contact__icon svg { width: 1.35rem; height: 1.35rem; }
  .contact__list li:nth-child(2) .contact__icon { background: #1877f2; }
  .contact__list li:nth-child(3) .contact__icon { background: var(--c-leaf); }

  /* Form */
  .form {
    display: grid; gap: 1.1rem;
    padding: clamp(1.25rem, .8rem + 2vw, 2.5rem);
    border-radius: var(--radius-l); background: var(--c-surface); box-shadow: var(--shadow-m);
  }
  .form__row { display: grid; gap: 1.1rem; }
  @media (min-width: 36rem) { .form__row { grid-template-columns: 1fr 1fr; } }
  .field { display: grid; gap: .35rem; }
  .field label { font-weight: 700; font-size: var(--fs-300); }
  .optional { font-weight: 400; color: var(--c-ink-soft); }
  .field input:not([type="checkbox"]), .field textarea {
    width: 100%; padding: .85rem 1rem;
    border: 2px solid var(--c-line); border-radius: var(--radius-s);
    background: var(--c-bg); font-size: 1rem;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
  }
  .field textarea { resize: vertical; min-height: 8rem; }
  .field input:focus, .field textarea:focus {
    outline: none; border-color: var(--c-leaf); background: #fff;
    box-shadow: 0 0 0 4px rgb(127 154 60 / .15);
  }
  .field.is-invalid input, .field.is-invalid textarea { border-color: var(--c-berry); }
  .field__error { min-height: 0; font-size: .85rem; font-weight: 700; color: var(--c-berry); }
  .field__error:empty { display: none; }
  .field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: .75rem; }
  .field--check input { width: 1.3rem; height: 1.3rem; margin-top: .2rem; accent-color: var(--c-brand); }
  .field--check label { font-weight: 400; }
  .field--check .field__error { grid-column: 1 / -1; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .form__status { font-weight: 700; text-align: center; }
  .form__status:empty { display: none; }
  .form__status.is-success { color: var(--c-leaf); }
  .form__status.is-error { color: var(--c-berry); }
  .form.is-sending button[type="submit"] { opacity: .7; pointer-events: none; }

  /* ---------- Footer ---------- */
  .site-footer {
    padding-block: var(--space-xl) 1.5rem;
    background: #2f2118; color: #d9cbb8;
  }
  .site-footer a { color: #f3e7d6; text-decoration: none; }
  .site-footer a:hover { color: var(--c-sun); }
  .site-footer__grid {
    display: grid; gap: var(--space-l);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }
  .site-footer__brand img {
    width: 7.5rem; padding: .4rem; border-radius: var(--radius-m); background: var(--c-bg); margin-bottom: 1rem;
  }
  .site-footer__brand p { max-width: 22rem; }
  .site-footer__heading { font-size: 1.1rem; color: #fff; margin-bottom: .75rem; }
  .site-footer ul { display: grid; gap: .4rem; }
  .site-footer__bottom {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    margin-top: var(--space-l); padding-top: 1.5rem;
    border-top: 1px solid rgb(255 255 255 / .1); font-size: var(--fs-300);
  }
  .to-top {
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: rgb(255 255 255 / .08);
  }

  /* ---------- FAB (mobile) ---------- */
  .fab {
    position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 40;
    display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%;
    color: #fff; background: var(--c-leaf); box-shadow: 0 10px 25px -6px rgb(127 154 60 / .7);
    translate: 0 6rem; transition: translate .4s var(--ease);
  }
  .fab svg { width: 1.5rem; height: 1.5rem; }
  .fab.is-visible { translate: 0 0; }
  .fab:hover { color: #fff; }
  @media (min-width: 60rem) { .fab { display: none; } }

  /* ---------- Reveal on scroll ---------- */
  .reveal { transition: opacity .8s var(--ease), translate .8s var(--ease); }
  .js .reveal:not(.is-visible) { opacity: 0; translate: 0 1.5rem; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .js .reveal, .js .reveal:not(.is-visible) {
        opacity: 1; translate: none; transition: none;
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;
      }
    }
  }
  @keyframes reveal { from { opacity: 0; translate: 0 1.5rem; } }
}

/* ---------- UTILITIES ---------- */
@layer utilities {
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---------- Podstrona: polityka prywatności ---------- */
@layer components {
  .page { padding-block: var(--space-xl); }
  .page h1 { font-size: var(--fs-700); margin-bottom: var(--space-m); }
  .page h2 { font-size: var(--fs-600); margin: var(--space-l) 0 var(--space-s); }
  .page p, .page li { color: var(--c-ink-soft); }
  .page ul { padding-left: 1.2rem; }
  .page > .container > * + * { margin-top: var(--space-s); }
}