/* onas-v2.css, page-specific styles for o-nas.html.
   Inherits editorial vocabulary (.sn-r2-*) from single-portfolio-v2.css.
   Page-local selectors are all .sn-on2-*. */

.sn-on2-main {
 background: var(--bone-100);
 color: var(--fg-on-light-1);
}

.sn-on2-h-on-dark { color: var(--fg-on-dark-1); }
.sn-on2-lede-on-dark { color: var(--fg-on-dark-2); }

/* ── 01 · Co robimy ────────────────────────────────────────── */
.sn-on2-what {
 background: var(--bone-100);
 padding: 96px 0;
}
.sn-on2-what-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr);
 gap: clamp(40px, 5vw, 80px);
 align-items: start;
}
@media (max-width: 880px) {
 .sn-on2-what-grid { grid-template-columns: 1fr; gap: 32px; }
}
.sn-on2-what-h { margin: 0; }
.sn-on2-h-sub {
 display: block;
 font-weight: 600;
 font-size: clamp(22px, 2.4vw, 28px);
 color: var(--fg-on-light-2);
 font-style: normal;
 letter-spacing: -0.02em;
 margin-top: 4px;
}
.sn-on2-body {
 display: grid;
 gap: 20px;
}
.sn-on2-body p {
 margin: 0;
 font-size: var(--fs-body-lg);
 line-height: var(--lh-body);
 color: var(--fg-on-light-2);
 text-wrap: pretty;
}
.sn-on2-body p:first-child {
 font-size: 22px;
 color: var(--fg-on-light-1);
}

/* ── 02 · Historia ─────────────────────────────────────────── */
.sn-on2-history {
 background: var(--ink-900);
 color: var(--fg-on-dark-1);
 padding: 96px 0;
}
.sn-on2-timeline {
 list-style: none;
 margin: 56px 0 0;
 padding: 0;
 display: grid;
 gap: 28px;
}
.sn-on2-milestone {
 display: grid;
 grid-template-columns: 96px 1fr;
 gap: 28px;
 padding: 22px 0;
 border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sn-on2-milestone:last-child {
 border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
@media (max-width: 700px) {
 .sn-on2-milestone { grid-template-columns: 1fr; gap: 8px; }
}
.sn-on2-milestone-year {
 font-family: var(--font-display);
 font-weight: 900;
 font-style: italic;
 font-size: 36px;
 line-height: 1;
 color: var(--brass-500);
 letter-spacing: -0.025em;
 font-variant-numeric: tabular-nums;
}
.sn-on2-milestone-h {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 19px;
 line-height: var(--lh-heading);
 color: var(--bone-50);
 margin: 0 0 6px;
 letter-spacing: -0.005em;
}
.sn-on2-milestone-p {
 font-size: var(--fs-small);
 line-height: var(--lh-body);
 color: var(--fg-on-dark-2);
 margin: 0;
 text-wrap: pretty;
}

/* ── 02 · Oferta ───────────────────────────────────────────── */
.sn-on2-oferta {
 background: var(--ink-900);
 color: var(--fg-on-dark-1);
 padding: 96px 0;
}
.sn-on2-oferta .sn-r2-chap-head { color: var(--warm-gray); }
.sn-on2-oferta .sn-r2-h { color: var(--bone-50); }
.sn-on2-oferta .sn-r2-h em { color: var(--brass-400); }
.sn-on2-oferta .sn-r2-lede { color: var(--fg-on-dark-2); max-width: 64ch; }

.sn-on2-tech-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 24px;
 margin: 48px 0 56px;
}
@media (max-width: 960px) { .sn-on2-tech-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sn-on2-tech-grid { grid-template-columns: 1fr; } }

.sn-on2-tech {
 display: grid; gap: 12px;
 padding: 28px 24px;
 background: var(--ink-800);
 border: 1px solid rgba(255, 255, 255, 0.06);
 border-radius: var(--radius-tight);
}
.sn-on2-tech-glyph {
 font-family: var(--font-display);
 font-weight: 900;
 font-style: italic;
 font-size: 56px;
 line-height: 0.85;
 color: var(--brass-500);
 letter-spacing: -0.03em;
}
.sn-on2-tech-name {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 19px;
 line-height: var(--lh-heading);
 color: var(--bone-50);
 margin: 0;
}
.sn-on2-tech-desc {
 font-size: var(--fs-small);
 line-height: var(--lh-body);
 color: var(--fg-on-dark-2);
 margin: 0;
}

.sn-on2-cats {
 padding-top: 32px;
 border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sn-on2-cats-h {
 font-family: var(--font-body);
 font-size: var(--fs-nano);
 font-weight: 700;
 letter-spacing: var(--ls-loose);
 text-transform: uppercase;
 color: var(--brass-400);
 margin: 0 0 18px;
}
.sn-on2-cats-list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 14px 32px;
}
@media (max-width: 760px) { .sn-on2-cats-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sn-on2-cats-list { grid-template-columns: 1fr; } }
.sn-on2-cats-list li {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 17px;
 color: var(--fg-on-dark-1);
 letter-spacing: -0.005em;
 padding-left: 18px;
 position: relative;
}
.sn-on2-cats-list li::before {
 content: "•";
 position: absolute;
 left: 0;
 color: var(--brass-500);
 font-size: 22px;
 line-height: 1.2;
}

/* ── 03 · Historia ─────────────────────────────────────────── */

/* ── 05 · Wartości ─────────────────────────────────────────── */
.sn-on2-values {
 background: var(--bone-100);
 padding: 96px 0;
}
.sn-on2-vals {
 list-style: none;
 margin: 56px 0 0;
 padding: 0;
 display: grid;
 gap: 0;
}
.sn-on2-val {
 display: grid;
 grid-template-columns: 64px 1fr;
 gap: 24px;
 padding: 28px 0;
 border-top: 1px solid rgba(20, 17, 13, 0.10);
 align-items: start;
}
.sn-on2-val:last-child { border-bottom: 1px solid rgba(20, 17, 13, 0.10); }
.sn-on2-val-no {
 font-family: var(--font-display);
 font-weight: 900;
 font-style: italic;
 font-size: 36px;
 line-height: 1;
 color: var(--brass-500);
 letter-spacing: -0.025em;
}
.sn-on2-val-h {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 22px;
 line-height: var(--lh-heading);
 color: var(--ink-900);
 margin: 0 0 8px;
 letter-spacing: -0.01em;
}
.sn-on2-val-p {
 font-size: var(--fs-body);
 line-height: var(--lh-body);
 color: var(--fg-on-light-2);
 margin: 0;
 text-wrap: pretty;
 max-width: 64ch;
}

/* ── 06 · CTA: sekcja nad stopką używa bazowego .sn-r2-cta
   (single-portfolio-v2.css) — bez lokalnych nadpisań (L17). ── */

/* ── Hero · przyciski (CTA w hero) ──────────────────────────── */
.sn-r2-hero-actions {
 display: flex;
 gap: 12px;
 flex-wrap: wrap;
 margin-top: 28px;
}
.sn-r2-hero-actions .sn-r2-cta-primary {
 background: var(--brass-500);
 color: var(--ink-1000);
 border: 1px solid var(--brass-500);
 padding: 14px 26px;
 border-radius: var(--radius-tight);
 font-family: var(--font-heading);
 font-weight: 600;
 font-size: 13px;
 letter-spacing: var(--ls-cta);
 text-transform: uppercase;
 text-decoration: none;
 transition: background 200ms, border-color 200ms, transform 160ms;
}
.sn-r2-hero-actions .sn-r2-cta-primary:hover {
 background: var(--brass-400);
 border-color: var(--brass-400);
 transform: translateY(-1px);
}
.sn-r2-hero-actions .sn-btn-ghost {
 padding: 14px 26px;
 border-radius: var(--radius-tight);
 font-family: var(--font-heading);
 font-weight: 600;
 font-size: 13px;
 letter-spacing: var(--ls-cta);
 text-transform: uppercase;
 text-decoration: none;
 color: var(--fg-on-dark-1);
 border: 1px solid rgba(255, 255, 255, 0.22);
 transition: border-color 200ms, background 200ms;
}
.sn-r2-hero-actions .sn-btn-ghost:hover {
 border-color: rgba(255, 255, 255, 0.45);
 background: rgba(255, 255, 255, 0.04);
}

/* ── 02 · Dla kogo (dark, reużywa siatki .sn-on2-tech) ─────── */
.sn-on2-aud {
 background: var(--ink-900);
 color: var(--fg-on-dark-1);
 padding: 96px 0;
}
.sn-on2-aud .sn-r2-h { color: var(--bone-50); }
.sn-on2-aud .sn-r2-h em { color: var(--brass-400); }
.sn-on2-aud .sn-r2-lede { color: var(--fg-on-dark-2); max-width: 64ch; }
.sn-on2-aud .sn-on2-tech-grid { margin-bottom: 0; }

/* dopisek pod kafelkami technik */
.sn-on2-tech-note { margin-top: 36px; max-width: 70ch; }

/* ── 07 · Dane firmy (NAP) ─────────────────────────────────── */
.sn-on2-nap {
 background: var(--bone-100);
 padding: 80px 0;
}
.sn-on2-nap-grid {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
 gap: clamp(32px, 5vw, 80px);
 align-items: start;
 margin-top: 12px;
}
@media (max-width: 760px) {
 .sn-on2-nap-grid { grid-template-columns: 1fr; gap: 24px; }
}
.sn-on2-nap-body { display: grid; gap: 22px; }
.sn-on2-nap-addr {
 font-style: normal;
 font-size: 18px;
 line-height: 1.75;
 color: var(--fg-on-light-1);
}
.sn-on2-nap-addr strong {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 21px;
 letter-spacing: -0.01em;
}
.sn-on2-nap-addr a { color: var(--brass-700); text-decoration: none; }
.sn-on2-nap-addr a:hover { text-decoration: underline; }
.sn-on2-nap-note {
 font-size: var(--fs-body);
 line-height: var(--lh-body);
 color: var(--fg-on-light-2);
 margin: 0;
 max-width: 56ch;
 text-wrap: pretty;
}

/* ── FAQ (natywne <details>) ───────────────────────────────── */
.sn-on2-faq {
 background: var(--bone-100);
 padding: 0 0 96px;
}
.sn-on2-faq-list {
 max-width: 860px;
 margin: 40px 0 0;
}
.sn-on2-faq-item { border-top: 1px solid rgba(20, 17, 13, 0.10); }
.sn-on2-faq-item:last-child { border-bottom: 1px solid rgba(20, 17, 13, 0.10); }
.sn-on2-faq-q {
 list-style: none;
 cursor: pointer;
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 20px;
 padding: 22px 4px;
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 18px;
 line-height: 1.35;
 color: var(--ink-900);
 letter-spacing: -0.005em;
 transition: color 160ms;
}
.sn-on2-faq-q::-webkit-details-marker { display: none; }
.sn-on2-faq-q::after {
 content: "+";
 color: var(--brass-600);
 font-size: 26px;
 line-height: 1;
 flex-shrink: 0;
}
.sn-on2-faq-item[open] > .sn-on2-faq-q::after { content: "\2013"; }
.sn-on2-faq-q:hover { color: var(--brass-700); }
.sn-on2-faq-a {
 padding: 0 4px 24px;
 font-size: 15px;
 line-height: 26px;
 color: var(--fg-on-light-2);
 max-width: 760px;
 text-wrap: pretty;
}

/* ── Poprawki runda 2 (notatka głosowa 2026-06-28) ─────────── */

/* Hero: lede pod H1 jako normalny akapit (nie wielki italik 0.42em, który wyglądał jak błąd) */
.sn-on2-main .sn-r2-hero-h-sub {
 font-family: var(--font-body);
 font-style: normal;
 font-weight: 400;
 font-size: 17px;
 line-height: 1.55;
 letter-spacing: 0;
 color: var(--fg-on-dark-2);
 margin-top: 18px;
 max-width: 48ch;
}

/* Proces: wyrównanie lewej krawędzi do kontenera reszty strony (sn-container = 1280 / 48px) */
.sn-on2-main .proc__inner {
 max-width: 1280px;
 padding-left: 48px;
 padding-right: 48px;
}

/* Techniki: zdjęcia realizacji zamiast literek (zdjęcie sprzedaje lepiej niż ikona) */
.sn-on2-tech { overflow: hidden; }
.sn-on2-tech-img {
 display: block;
 width: calc(100% + 48px);
 margin: -28px -24px 4px;
 aspect-ratio: 1 / 1; /* kwadrat — poziomy kadr ucinał zdjęcia (Jarek 2026-07-11) */
 height: auto;
 object-fit: cover;
 border-radius: var(--radius-tight) var(--radius-tight) 0 0;
}

@media (max-width: 760px) {
 .sn-on2-main .proc__inner { padding-left: 28px; padding-right: 28px; }
}