/* =====================================================
   EIGHTEEN WRAPS V2 — POLISH MID-CENTURY PIN-UP
   ===================================================== */

:root {
    /* === BRAND COLORS === */
    --color-primary:        #0b2e1f;
    --color-primary-dark:   #08301e;
    --color-gold:           #d4af37;
    --color-gold-hover:     #b8922d;

    /* === NEW (Polish Mid-Century Pin-Up) === */
    --color-turquoise:      #3d6e75;
    --color-turquoise-dim:  #2e565c;
    --color-turquoise-light:#5a8c93;
    --color-cream:          #f1e2c4;
    --color-cream-dark:     #d9c39a;
    --color-sepia:          #4a3424;
    --color-rust:           #8b3a3a;

    /* === BG === */
    --bg-dark:              #0a1f16;
    --bg-darker:            #071510;

    /* === TYPO === */
    --font-display: 'Oswald', 'Inter', sans-serif;
    --font-script:  'Pacifico', cursive;
    --font-body:    'Inter', sans-serif;

    /* === MISC === */
    --radius-lg: 16px;
    --radius-md: 10px;
    --shadow-vintage: 0 14px 38px rgba(0,0,0,0.45);
    --transition: 0.3s ease;
}

* { box-sizing: border-box; }

/* Zabezpieczenie przed poziomym scrollem.
   MUSI być `clip`, nie `hidden`: `overflow-x: hidden` czyni z przodka kontener
   przewijania, co ŁAMIE `position: sticky` u potomków — przez to topbar przestawał
   się przyklejać i nie wracał przy scrollu w górę. `clip` przycina bez tworzenia
   kontenera, więc sticky działa. Przeglądarki bez wsparcia po prostu pomijają
   deklarację (brak przycięcia, ale sticky nadal sprawne). */
html, body { overflow-x: clip; }

body {
    font-family: var(--font-body);
    background: var(--bg-darker);
    color: #fff;
    margin: 0;
}

a { text-decoration: none; }

/* =====================================================
   PRIMITIVES
   ===================================================== */

/* PAPER GRAIN OVERLAY */
.paper-grain { position: relative; }
.paper-grain::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.18;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 2;
}

/* HALFTONE DOTS */
.halftone { position: relative; }
.halftone::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(212,175,55,0.15) 1px, transparent 1.6px);
    background-size: 8px 8px;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
}

/* SEPIA IMAGE */
.sepia-image {
    filter: sepia(0.55) contrast(1.05) saturate(0.85);
    transition: filter 0.5s ease;
}
.sepia-image:hover { filter: sepia(0) contrast(1) saturate(1); }

/* VINTAGE FRAME */
.vintage-frame {
    position: relative;
    padding: 14px;
    background: var(--color-turquoise);
    border: 1px solid var(--color-turquoise-light);
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,0.06),
        inset 0 0 0 3px var(--color-turquoise-dim),
        var(--shadow-vintage);
}
.vintage-frame.tilt-left  { transform: rotate(-1.2deg); }
.vintage-frame.tilt-right { transform: rotate(1deg); }
.vintage-frame img { display: block; width: 100%; height: auto; }

/* VINTAGE STAMP */
.stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold);
    border: 2px solid var(--color-gold);
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 12px;
    transform: rotate(-8deg);
    background: rgba(255,255,255,0.02);
    box-shadow: inset 0 0 0 1px rgba(212,175,55,0.3);
}
.stamp--rect      { border-radius: 4px; transform: rotate(-3deg); padding: 8px 14px; font-size: 11px; }
.stamp--turquoise { color: var(--color-turquoise-light); border-color: var(--color-turquoise-light); box-shadow: inset 0 0 0 1px rgba(90,140,147,0.3); }

/* CHAPTER MARK */
.chapter-mark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-gold);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.chapter-mark::before {
    content: "";
    width: 36px;
    height: 1px;
    background: var(--color-gold);
}
.chapter-mark .num {
    font-size: 32px;
    line-height: 1;
    color: var(--color-gold);
    font-weight: 500;
}

.chapter-mark--center {
    justify-content: center;
}
.chapter-mark--center::after {
    content: "";
    width: 36px;
    height: 1px;
    background: var(--color-gold);
}

/* DOUBLE RULE DIVIDER */
.double-rule {
    height: 5px;
    border-top: 1px solid var(--color-gold);
    border-bottom: 1px solid var(--color-gold);
    width: 80px;
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-turquoise);
    font-size: 13px;
    margin-bottom: 18px;
}
.kicker::before, .kicker::after {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--color-turquoise);
}
.kicker--gold { color: var(--color-gold); }
.kicker--gold::before, .kicker--gold::after { background: var(--color-gold); }

/* =====================================================
   TOPBAR
   ===================================================== */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 31, 22, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(212,175,55,0.18);
    padding: 14px 0;
    transition: transform 0.35s ease;
    will-change: transform;
}
/* Smart-hide: JS toggles this on scroll-down, removes on scroll-up (see topbar script in master). */
.topbar--hidden { transform: translateY(-100%); }
.topbar .brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.topbar .brand-logo {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.topbar .brand-logo img { max-width: 100%; max-height: 100%; }
.topbar .brand-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.14em;
    color: var(--color-gold);
    text-transform: uppercase;
    line-height: 1;
}
.topbar .brand-subtitle {
    font-family: var(--font-script);
    font-size: 14px;
    color: var(--color-turquoise-light);
    margin-top: 2px;
}
.topbar .nav-link,
.topbar a.nav-link {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    padding: 10px 14px;
    transition: var(--transition);
    position: relative;
    background: transparent;
    border: none;
}
.topbar a.nav-link:hover,
.topbar .nav-link:hover { color: var(--color-gold); }
.topbar .nav-link.active { color: var(--color-gold); }

/* Mobile menu */
#v2MobileMenu .nav-link {
    display: block;
    width: 100%;
    padding: 14px 4px;
    font-size: 15px;
    border-bottom: 1px solid rgba(212,175,55,0.10);
}
#v2MobileMenu .nav-link:last-of-type { border-bottom: none; }
#v2MobileMenu .phone-pill { width: 100%; }
/* Mobilne menu: rozwijana grupa "Usługi" (details) zamiast płaskiej listy 7 usług */
#v2MobileMenu .mobile-submenu { border-bottom: 1px solid rgba(212,175,55,0.10); }
#v2MobileMenu .mobile-submenu > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none;
    border-bottom: none;
}
#v2MobileMenu .mobile-submenu > summary::-webkit-details-marker { display: none; }
#v2MobileMenu .mobile-submenu > summary i { transition: transform 0.2s ease; flex: none; }
#v2MobileMenu .mobile-submenu[open] > summary i { transform: rotate(180deg); }
#v2MobileMenu .mobile-submenu__items { display: flex; flex-direction: column; padding-left: 16px; }
#v2MobileMenu .mobile-submenu__items .nav-link {
    font-size: 14px;
    opacity: 0.85;
    padding-top: 11px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(212,175,55,0.06);
}
#v2MobileMenu .mobile-submenu__items .nav-link:last-child { border-bottom: none; }

.topbar .dropdown-menu {
    background: var(--bg-dark);
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 6px;
    padding: 8px 0;
    min-width: 280px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}
.topbar .dropdown-item {
    color: rgba(255,255,255,0.8);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 10px 18px;
}
.topbar .dropdown-item:hover {
    background: rgba(212,175,55,0.1);
    color: var(--color-gold);
}

.phone-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-gold);
    color: var(--bg-darker);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
    transition: var(--transition);
}
.phone-pill:hover { background: #fff; color: var(--bg-dark); }

/* =====================================================
   BUTTONS
   ===================================================== */
.btn-vintage-solid {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-gold);
    color: var(--bg-darker);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 16px 32px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    border: 2px solid var(--color-gold);
    transition: var(--transition);
    box-shadow: 4px 4px 0 var(--color-turquoise-dim);
    cursor: pointer;
}
.btn-vintage-solid:hover {
    background: #fff;
    border-color: #fff;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--color-turquoise-dim);
    color: var(--bg-darker);
}

.btn-vintage-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: var(--color-turquoise-light);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 16px 32px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    border: 2px solid var(--color-turquoise-light);
    transition: var(--transition);
    cursor: pointer;
}
.btn-vintage-outline:hover {
    background: var(--color-turquoise);
    color: #fff;
    border-color: var(--color-turquoise);
}

.btn-vintage-cream {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-primary);
    color: var(--color-cream);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    border: 2px solid var(--color-primary);
    transition: var(--transition);
    cursor: pointer;
}
.btn-vintage-cream:hover {
    background: var(--color-turquoise);
    border-color: var(--color-turquoise);
}

/* =====================================================
   HERO (główny + per-usługa)
   ===================================================== */
.hero {
    position: relative;
    min-height: 92vh;
    overflow: hidden;
    isolation: isolate;
}
.hero--compact { min-height: 70vh; }

.hero__bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: sepia(0.45) contrast(1.05) saturate(0.85) brightness(0.55);
    z-index: 0;
}

/* Hero <img> (LCP candidate - priorytetyzowane przez Google przez fetchpriority='high') */
.hero__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: sepia(0.45) contrast(1.05) saturate(0.85) brightness(0.55);
    z-index: 0;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(7, 21, 16, 0.92) 0%,
        rgba(10, 31, 22, 0.78) 35%,
        rgba(10, 31, 22, 0.45) 65%,
        rgba(7, 21, 16, 0.85) 100%
    );
    z-index: 1;
}
.hero__inner {
    position: relative;
    z-index: 5;
    min-height: inherit;
    display: flex;
    align-items: center;
    padding: 80px 0;
}
.hero__content { max-width: 680px; }
.hero__kicker { margin-bottom: 28px; }
.hero__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 6.5vw, 78px);
    line-height: 0.98;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}
.hero__title .accent {
    color: var(--color-gold);
    display: block;
}
.hero__title .city {
    font-family: var(--font-script);
    font-size: 0.55em;
    font-weight: 400;
    color: var(--color-turquoise-light);
    text-transform: none;
    letter-spacing: 0;
    display: block;
    margin-top: -4px;
    margin-left: 6px;
}
.hero__lead {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    margin: 28px 0 40px;
    max-width: 560px;
}
.hero__note {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,0.7);
    margin: -24px 0 40px;
    max-width: 560px;
}
.hero__note strong { color: var(--color-gold); font-weight: 600; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__polaroid {
    position: relative;
    z-index: 5;
    display: none;
}
@media (min-width: 992px) {
    .hero__polaroid { display: block; max-width: 380px; margin-left: auto; }
}
.hero__polaroid img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
}
.hero__polaroid .caption {
    font-family: var(--font-script);
    font-size: 18px;
    color: #fff;
    text-align: center;
    margin-top: 12px;
    transform: rotate(-1.2deg);
}

.hero__stamp {
    position: absolute;
    right: 6%;
    bottom: 8%;
    z-index: 6;
    display: none;
}
@media (min-width: 1200px) { .hero__stamp { display: block; } }

/* =====================================================
   SECTION SHELLS
   ===================================================== */
.section {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
}
.section--cream {
    background: var(--color-cream);
    color: var(--color-sepia);
}
.section--cream h2,
.section--cream h3 { color: var(--color-primary); }

.section--dark {
    background: linear-gradient(180deg, var(--bg-darker) 0%, var(--bg-dark) 60%, var(--bg-darker) 100%);
}

.section--green {
    background: var(--color-primary);
    color: var(--color-cream);
}

.section__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 60px;
}

/* Odnośniki do pokrewnych usług (x-v2.crosslinks) — jedna sekcja, kolumny obok siebie. */
.crosslinks { padding: 64px 0; }
.crosslinks__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 40px;
}
.crosslinks__item + .crosslinks__item { border-left: 1px solid rgba(212,175,55,0.25); }
.crosslinks__icon {
    font-size: 30px;
    color: var(--color-gold);
    margin-bottom: 14px;
}
.crosslinks__text {
    font-size: 16px;
    line-height: 1.6;
    max-width: 420px;
    margin: 0 0 22px;
    flex-grow: 1;
}
@media (max-width: 767.98px) {
    .crosslinks { padding: 48px 0; }
    .crosslinks__item { padding: 0 8px; }
    .crosslinks__item + .crosslinks__item {
        border-left: 0;
        border-top: 1px solid rgba(212,175,55,0.25);
        margin-top: 32px;
        padding-top: 32px;
    }
}
.section__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(30px, 4vw, 46px);
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0 0 18px;
}
.section__title .script {
    font-family: var(--font-script);
    font-weight: 400;
    color: var(--color-rust);
    text-transform: none;
    font-size: 0.65em;
    display: inline-block;
    margin: 0 6px;
}
.section__title.text-light .script { color: var(--color-gold); }
.section__lead {
    font-size: 17px;
    line-height: 1.65;
    opacity: 0.85;
}
.section--cream .section__lead { color: var(--color-sepia); }

/* =====================================================
   TRUST STRIP — pas certyfikatów (kremowy)
   ===================================================== */
.trust-strip {
    position: relative;
    background: var(--color-cream);
    color: var(--color-sepia);
    padding: 36px 0;
    border-top: 5px double var(--color-gold);
    border-bottom: 5px double var(--color-gold);
}
.trust-strip__title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--color-sepia);
    text-align: center;
    margin-bottom: 22px;
}
.trust-strip__items {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px 28px;
}
.cert-stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-sepia);
    border: 2px solid var(--color-sepia);
    background: rgba(255,255,255,0.25);
    padding: 10px 18px;
    font-size: 12px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(74,52,36,0.3);
    transition: var(--transition);
}
.cert-stamp:nth-child(2n) { transform: rotate(-1.5deg); }
.cert-stamp:nth-child(3n) { transform: rotate(1deg); }
.cert-stamp:hover {
    background: var(--color-turquoise);
    color: var(--color-cream);
    border-color: var(--color-turquoise);
    transform: rotate(0deg) translateY(-2px);
}
.cert-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.cert-logo img {
    display: block;
    height: 56px;
    width: auto;
}
.cert-logo:hover {
    transform: translateY(-2px);
}

/* =====================================================
   NUMBERED CARDS (Why us / Process / Threats)
   ===================================================== */
.numbered-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--color-cream-dark);
    padding: 36px 28px 30px;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(74,52,36,0.08);
    height: 100%;
    transition: var(--transition);
}
.numbered-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(74,52,36,0.14);
    border-color: var(--color-turquoise);
}
.numbered-card__num {
    position: absolute;
    top: -22px;
    left: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-turquoise);
    color: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.05em;
    border: 3px solid var(--color-cream);
    box-shadow: 0 6px 14px rgba(46,86,92,0.4);
}
.numbered-card--dark {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(212,175,55,0.18);
    color: #fff;
}
.numbered-card--dark .numbered-card__num {
    background: var(--color-gold);
    color: var(--bg-darker);
    border-color: var(--bg-darker);
}
.numbered-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    margin: 14px 0 12px;
}
.numbered-card--dark .numbered-card__title { color: var(--color-gold); }
.numbered-card__text {
    color: var(--color-sepia);
    line-height: 1.6;
    opacity: 0.9;
    font-size: 15px;
}
.numbered-card--dark .numbered-card__text {
    color: rgba(255,255,255,0.78);
}

.voucher-nominal { padding-top: 30px; }
.voucher-nominal__amount {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 48px;
    line-height: 1;
    color: var(--color-gold);
}
.voucher-nominal__amount span {
    font-size: 20px;
    margin-left: 5px;
    font-weight: 600;
}
.voucher-nominal__label {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin: 8px 0 14px;
}

.voucher-rules-wrapper { max-width: 920px; margin: 0 auto; }
.voucher-rule-highlight {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 10px;
    background: rgba(212,175,55,0.08);
    border: 1px solid rgba(212,175,55,0.35);
    color: rgba(255,255,255,0.88);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 26px;
}
.voucher-rule-highlight i {
    color: var(--color-gold);
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}
.voucher-rule-highlight strong {
    display: block;
    color: var(--color-gold);
    font-weight: 800;
    margin-bottom: 4px;
    font-size: 16px;
}
.voucher-rules-list {
    list-style: none;
    counter-reset: voucher-rule;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}
.voucher-rules-list li {
    counter-increment: voucher-rule;
    position: relative;
    padding: 18px 22px 18px 64px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(212,175,55,0.14);
    border-radius: 8px;
    color: rgba(255,255,255,0.78);
    font-size: 14px;
    line-height: 1.65;
    transition: var(--transition);
}
.voucher-rules-list li:hover {
    border-color: rgba(212,175,55,0.28);
    transform: translateX(3px);
}
.voucher-rules-list li::before {
    content: counter(voucher-rule);
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212,175,55,0.1);
    border: 1px solid rgba(212,175,55,0.25);
    color: var(--color-gold);
    font-weight: 800;
    font-size: 13px;
}
.voucher-rules-list li strong { color: var(--color-gold); font-weight: 800; }

@media (max-width: 768px) {
    .voucher-rule-highlight { gap: 12px; padding: 18px; }
    .voucher-rules-list li { padding: 16px 16px 16px 56px; font-size: 13.5px; }
    .voucher-rules-list li::before { left: 14px; width: 28px; height: 28px; font-size: 12px; }
}

.signature {
    text-align: center;
    margin-top: 60px;
    font-family: var(--font-script);
    font-size: 26px;
    color: var(--color-rust);
    transform: rotate(-1.5deg);
}
.section--dark .signature { color: var(--color-gold); }

/* =====================================================
   PACKAGE CARDS (Pakiety usług)
   ===================================================== */
.package-card {
    position: relative;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(212,175,55,0.18);
    padding: 36px 28px;
    border-radius: 6px;
    height: 100%;
    color: #fff;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}
.package-card:hover {
    border-color: var(--color-gold);
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.4);
}
.package-card--featured {
    background: linear-gradient(180deg, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0.02) 100%);
    border-color: var(--color-gold);
    transform: scale(1.03);
}
.package-card--featured::before {
    content: "Polecane";
    position: absolute;
    top: -14px;
    right: 24px;
    background: var(--color-gold);
    color: var(--bg-darker);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 4px;
    transform: rotate(2deg);
}

.package-card__head {
    border-bottom: 1px solid rgba(212,175,55,0.18);
    padding-bottom: 20px;
    margin-bottom: 22px;
}
.package-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-gold);
    margin: 0 0 6px;
}
.package-card__subtitle {
    font-family: var(--font-script);
    font-size: 16px;
    color: var(--color-turquoise-light);
}
.package-card__lead {
    color: rgba(255,255,255,0.85);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 18px;
}
.package-card__subhead {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-turquoise-light);
    margin: 0 0 10px;
}
.package-card__list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}
.package-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    line-height: 1.5;
}
.package-card__list li i {
    color: var(--color-gold);
    flex: 0 0 16px;
    margin-top: 3px;
}

.package-card__effects {
    background: rgba(212,175,55,0.05);
    border-left: 3px solid var(--color-gold);
    padding: 14px 16px;
    margin-bottom: 24px;
}
.package-card__effects-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 4px;
}
.package-card__effects-text {
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.package-card__footer {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(212,175,55,0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.package-card__time {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-turquoise-light);
}
.package-card__btn {
    padding: 10px 18px;
    font-size: 12px;
    letter-spacing: 0.16em;
}

/* =====================================================
   PROCESS STEPS (numerowana oś czasu)
   ===================================================== */
.process-steps {
    counter-reset: step;
}
.process-step {
    position: relative;
    padding-left: 80px;
    padding-bottom: 36px;
    counter-increment: step;
}
.process-step::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    color: var(--color-gold);
    width: 60px;
}
.process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 28px;
    top: 56px;
    bottom: 12px;
    width: 1px;
    background: rgba(212,175,55,0.3);
}
.process-step h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 8px;
    color: #fff;
}
.process-step p {
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    margin: 0;
}
.section--cream .process-step h4 { color: var(--color-primary); }
.section--cream .process-step p { color: var(--color-sepia); }
.section--cream .process-step::after { background: rgba(74,52,36,0.2); }

/* =====================================================
   GALLERY GRID (Realizacje)
   ===================================================== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}
.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* =====================================================
   CONTACT SECTION
   ===================================================== */
.contact-section {
    background: linear-gradient(180deg, var(--bg-darker) 0%, var(--bg-dark) 60%, var(--bg-darker) 100%);
    color: #fff;
    padding: 100px 0;
}
.contact-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 8px;
    padding: 32px;
    height: 100%;
    transition: var(--transition);
}
.contact-card:hover {
    border-color: var(--color-gold);
    transform: translateY(-4px);
}
.contact-card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin: 0 0 18px;
}
.contact-card p { color: rgba(255,255,255,0.85); line-height: 1.6; margin-bottom: 8px; }
.contact-card strong { color: var(--color-turquoise-light); }
.contact-card a {
    color: var(--color-gold);
    transition: var(--transition);
}
.contact-card a:hover { color: #fff; }
.contact-card a.btn-vintage-solid,
.contact-card a.btn-vintage-solid:hover { color: var(--bg-darker); }
.contact-card iframe {
    border-radius: 6px;
    width: 100%;
    border: 0;
    min-height: 220px;
}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer {
    background: linear-gradient(180deg, var(--bg-dark), var(--bg-darker));
    padding: 80px 0 30px;
    border-top: 5px double var(--color-gold);
    color: rgba(255,255,255,0.7);
}
.site-footer .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
}
.site-footer h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin: 0 0 20px;
}
.site-footer .brand-block {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.site-footer .brand-block .brand-logo {
    width: 56px;
    height: 56px;
    display: flex; align-items: center; justify-content: center;
}
.site-footer .brand-block .brand-logo img { max-width: 100%; max-height: 100%; }
.site-footer .brand-block .brand-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.14em;
    color: var(--color-gold);
    text-transform: uppercase;
    line-height: 1;
}
.site-footer .brand-block .brand-subtitle {
    font-family: var(--font-script);
    font-size: 14px;
    color: var(--color-turquoise-light);
    margin-top: 2px;
}
.site-footer p { font-size: 14px; line-height: 1.6; }
.site-footer p a { color: rgba(255,255,255,0.75); transition: var(--transition); }
.site-footer p a:hover { color: var(--color-gold); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { padding: 4px 0; }
.site-footer ul li a { color: rgba(255,255,255,0.75); font-size: 14px; transition: var(--transition); }
.site-footer ul li a:hover { color: var(--color-gold); }

.site-footer .socials {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}
.site-footer .socials a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(212,175,55,0.08);
    border: 1px solid rgba(212,175,55,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    font-size: 18px;
    transition: var(--transition);
}
.site-footer .socials a:hover {
    background: var(--color-gold);
    color: var(--bg-darker);
    transform: translateY(-3px);
}

.footer-bottom {
    margin-top: 60px;
    padding-top: 24px;
    border-top: 1px solid rgba(212,175,55,0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    flex-wrap: wrap;
    gap: 12px;
}
.footer-bottom .made-in {
    font-family: var(--font-script);
    color: var(--color-turquoise-light);
    font-size: 16px;
}

/* =====================================================
   RELATED SERVICES — kafle na dole stron usług
   ===================================================== */
.related-services { padding-top: 80px; padding-bottom: 100px; }

.related-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 6px;
    padding: 36px 28px 28px;
    height: 100%;
    text-decoration: none;
    color: #fff;
    transition: var(--transition);
    overflow: hidden;
}
.related-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(61,110,117,0) 0%, rgba(212,175,55,0.05) 100%);
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
}
.related-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-gold);
    box-shadow: 0 18px 38px rgba(0,0,0,0.4);
    color: #fff;
}
.related-card:hover::after { opacity: 1; }
.related-card:hover .related-card__cta { color: #fff; }

.related-card__chapter {
    position: absolute;
    top: 16px;
    right: 22px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    color: var(--color-gold);
    opacity: 0.4;
    transition: var(--transition);
}
.related-card:hover .related-card__chapter { opacity: 1; }

.related-card__icon {
    color: var(--color-turquoise-light);
    font-size: 38px;
    margin-bottom: 18px;
    transition: var(--transition);
}
.related-card:hover .related-card__icon { color: var(--color-gold); }

.related-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gold);
    margin: 0 0 12px;
}

.related-card__text {
    color: rgba(255,255,255,0.78);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 22px;
    flex: 1;
}

.related-card__cta {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-turquoise-light);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    transition: var(--transition);
}

/* =====================================================
   BREADCRUMBS (retro signage)
   ===================================================== */
.v2-breadcrumbs {
    background: var(--bg-dark);
    border-bottom: 1px solid rgba(212,175,55,0.18);
    padding: 14px 0;
    font-family: var(--font-display);
}
.v2-breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.v2-breadcrumbs li {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
}
.v2-breadcrumbs li a {
    color: var(--color-turquoise-light);
    text-decoration: none;
    transition: var(--transition);
}
.v2-breadcrumbs li a:hover {
    color: var(--color-gold);
}
.v2-breadcrumbs li[aria-current="page"] {
    color: var(--color-gold);
    font-weight: 600;
}
.v2-breadcrumbs li.sep {
    color: var(--color-gold);
    opacity: 0.6;
    letter-spacing: 0;
    font-size: 10px;
}

/* =====================================================
   STICKY CTA (floating WhatsApp + mobile bottom bar)
   ===================================================== */

/* Desktop: pulsujacy WhatsApp FAB */
.sticky-cta-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 90;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-gold);
    color: var(--bg-darker);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 8px 24px rgba(212,175,55,0.4),
                0 2px 8px rgba(0,0,0,0.2);
    text-decoration: none;
    transition: var(--transition);
    animation: stickyCtaPulse 2.4s ease-in-out infinite;
}
.sticky-cta-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 32px rgba(212,175,55,0.55),
                0 4px 12px rgba(0,0,0,0.3);
    color: var(--bg-dark);
    animation: none;
}

@keyframes stickyCtaPulse {
    0%, 100% { box-shadow: 0 8px 24px rgba(212,175,55,0.4), 0 2px 8px rgba(0,0,0,0.2), 0 0 0 0 rgba(212,175,55,0.5); }
    50%      { box-shadow: 0 8px 24px rgba(212,175,55,0.4), 0 2px 8px rgba(0,0,0,0.2), 0 0 0 18px rgba(212,175,55,0); }
}

/* Mobile: bottom bar 2-column */
.sticky-cta-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: var(--bg-darker);           /* nieprzezroczyste — strona nie prześwituje */
    border-top: 1px solid rgba(212,175,55,0.35);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
}
/* subtelny separator między przyciskami — bez szczeliny (inset, nie zmienia layoutu) */
.sticky-cta-mobile__btn + .sticky-cta-mobile__btn {
    box-shadow: inset 1px 0 0 rgba(0,0,0,0.28);
}
.sticky-cta-mobile__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 4px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
}
.sticky-cta-mobile__btn i { font-size: 18px; }
.sticky-cta-mobile__btn--call {
    background: var(--color-primary);
    color: var(--color-gold);
}
.sticky-cta-mobile__btn--call:hover { background: var(--bg-dark); color: var(--color-gold); }
.sticky-cta-mobile__btn--whatsapp {
    background: var(--color-gold);
    color: var(--bg-darker);
}
.sticky-cta-mobile__btn--whatsapp:hover { background: #fff; color: var(--bg-dark); }

/* Nie nakladaj mobile bottom bara na contact section - dodaj padding bottom do body na mobile */
@media (max-width: 767.98px) {
    body { padding-bottom: 64px; }
}

/* =====================================================
   PREVIEW BANNER (banner ostrzegawczy że to /v2/)
   ===================================================== */
.preview-banner {
    background: var(--color-rust);
    color: #fff;
    text-align: center;
    padding: 8px 16px;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.preview-banner a {
    color: var(--color-gold);
    margin-left: 12px;
    text-decoration: underline;
}

/* =====================================================
   PRICE TABLE (cennik)
   ===================================================== */
.price-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 6px;
    overflow: hidden;
}
.price-table th {
    background: var(--color-primary);
    color: var(--color-gold);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 14px 18px;
    text-align: left;
}
.price-table td {
    padding: 14px 18px;
    color: rgba(255,255,255,0.85);
    border-top: 1px solid rgba(212,175,55,0.1);
    font-size: 14px;
}
.price-table tr:hover td { background: rgba(212,175,55,0.04); }
.price-table .price {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-gold);
    font-size: 16px;
    white-space: nowrap;
}
.price-table .price__gross {
    display: block;
    margin-top: 3px;
    font-family: var(--font-body, inherit);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.5);
}
/* Linki w nagłówkach cennika dziedziczą złoty kolor th (nie bootstrapowy niebieski). */
.price-table th a { color: inherit; }
.price-table th a:hover { text-decoration: underline; }
/* Mobile: tabela cennika przewijana w poziomie zamiast ucinana
   (body ma overflow-x:hidden, wiec szeroka tabela bez tego znika po prawej).
   Pierwsza kolumna zawijana i ograniczona, zeby kolumny cen wchodzily w kadr
   (widac, ze sa ceny) + zawsze widoczny zloty pasek przewijania. */
@media (max-width: 767px) {
    .price-table {
        display: block;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        scrollbar-width: thin;
        scrollbar-color: var(--color-gold) rgba(255,255,255,0.12);
    }
    .price-table::-webkit-scrollbar { height: 8px; -webkit-appearance: none; }
    .price-table::-webkit-scrollbar-thumb { background: var(--color-gold); border-radius: 4px; }
    .price-table::-webkit-scrollbar-track { background: rgba(255,255,255,0.12); border-radius: 4px; }
    .price-table th,
    .price-table td { padding: 10px 12px; }
    .price-table th:first-child,
    .price-table td:first-child { white-space: normal; max-width: 44vw; min-width: 40vw; }
    .price-table .price { font-size: 14px; }
    /* Tabele 2-kolumnowe (przyciemnianie) mieszczą się bez scrolla — pełna szerokość, bez cap/scroll. */
    .price-table.price-table--narrow { display: table; overflow-x: visible; white-space: normal; }
    .price-table.price-table--narrow th:first-child,
    .price-table.price-table--narrow td:first-child { max-width: none; min-width: 0; }
}

/* =====================================================
   VOUCHER
   ===================================================== */
.voucher-card {
    background: var(--color-cream);
    color: var(--color-sepia);
    padding: 40px;
    border-radius: 8px;
    border: 1px solid var(--color-cream-dark);
    box-shadow: 0 18px 40px rgba(0,0,0,0.4);
    position: relative;
}
.voucher-card::before {
    content: "✦ Eighteen Wraps ✦";
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-script);
    color: var(--color-rust);
    font-size: 14px;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 991px) {
    .hero { min-height: 80vh; }
    .hero__inner { min-height: 80vh; padding: 60px 0; }
    .hero__lead { font-size: 16px; }
    .btn-vintage-solid, .btn-vintage-outline { width: 100%; justify-content: center; }
    .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
    .package-card--featured { transform: none; }
    .section { padding: 70px 0; }
}
@media (max-width: 600px) {
    .site-footer .footer-grid { grid-template-columns: 1fr; }
}

/* FAQ accordion */
.faq { max-width: 820px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid rgba(11,46,31,0.15); }
.faq__q {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 4px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
    content: "+";
    font-size: 26px;
    line-height: 1;
    color: var(--color-gold);
    flex-shrink: 0;
}
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__a {
    padding: 0 4px 20px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-sepia);
}

/* Opinie / reviews */
.review-card {
    background: #f5efe2;
    border: 1px solid rgba(11, 46, 31, 0.12);
    border-radius: 6px;
    padding: 26px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.review-card__stars {
    color: var(--color-gold);
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 14px;
}
.review-card__text {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--color-sepia);
    flex: 1 0 auto;
    margin-bottom: 18px;
}
.review-card__author {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid rgba(11, 46, 31, 0.12);
    padding-top: 14px;
}
.review-card__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--color-primary);
}
.review-card__source {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: rgba(74, 52, 36, 0.7);
}
.review-card__source i { color: #4285F4; }

/* ============================================================
   BLOG
   ============================================================ */

/* Karty wpisów (lista + powiązane) */
.blog-card {
    background: #f5efe2;
    border: 1px solid rgba(11, 46, 31, 0.12);
    border-radius: 6px;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.blog-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 26px 24px;
    text-decoration: none;
}
.blog-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.blog-card__cat {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(212, 175, 55, 0.18);
    padding: 4px 10px;
    border-radius: 4px;
}
.blog-card__date {
    font-size: 13px;
    color: rgba(74, 52, 36, 0.7);
}
.blog-card__title {
    font-family: var(--font-display);
    font-size: 21px;
    line-height: 1.3;
    color: var(--color-primary);
    margin-bottom: 12px;
}
.blog-card__excerpt {
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-sepia);
    flex: 1 0 auto;
    margin-bottom: 18px;
}
.blog-card__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    color: var(--color-primary);
}
.blog-card__more i { transition: transform 0.2s ease; }
.blog-card:hover .blog-card__more i { transform: translateX(4px); }

/* Wariant ciemny (powiązane wpisy na section--dark) */
.blog-card--dark {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 175, 55, 0.22);
    box-shadow: none;
}
.blog-card--dark .blog-card__cat {
    color: var(--color-gold);
    background: rgba(212, 175, 55, 0.12);
}
.blog-card--dark .blog-card__date { color: rgba(255, 255, 255, 0.55); }
.blog-card--dark .blog-card__title { color: #f5efe2; }
.blog-card--dark .blog-card__more { color: var(--color-gold); }

/* Treść artykułu (prose) */
.blog-article {
    font-size: 17px;
    line-height: 1.8;
    color: var(--color-sepia);
}
.blog-article > *:first-child { margin-top: 0; }
.blog-article h2 {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1.25;
    color: var(--color-primary);
    margin: 42px 0 16px;
}
.blog-article h3 {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.3;
    color: var(--color-primary);
    margin: 32px 0 12px;
}
.blog-article p { margin: 0 0 20px; }
.blog-article a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-gold);
    text-underline-offset: 3px;
    font-weight: 600;
}
.blog-article a:hover { color: var(--color-gold); }
.blog-article ul,
.blog-article ol {
    margin: 0 0 20px;
    padding-left: 24px;
}
.blog-article li { margin-bottom: 8px; }
.blog-article ul li::marker { color: var(--color-gold); }
.blog-article blockquote {
    margin: 28px 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--color-gold);
    font-style: italic;
    color: var(--color-primary);
}
.blog-article img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 24px 0;
}
.blog-article strong { color: var(--color-primary); }
.blog-article hr {
    border: none;
    border-top: 1px solid rgba(11, 46, 31, 0.15);
    margin: 36px 0;
}

/* CTA pod artykułem */
.blog-cta {
    margin-top: 44px;
    padding: 30px 32px;
    background: var(--color-primary);
    border-radius: 8px;
    text-align: center;
}
.blog-cta p {
    color: #f5efe2;
    font-family: var(--font-display);
    font-size: 20px;
    margin-bottom: 18px;
}

/* Powrót do listy */
.blog-back {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid rgba(11, 46, 31, 0.15);
}
.blog-back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    color: var(--color-primary);
    text-decoration: none;
}
.blog-back a:hover { color: var(--color-gold); }

/* =====================================================
   CONTACT FORM (lead) — formularz + modal + stany
   ===================================================== */
.contact-lead { max-width: 720px; margin: 0 auto 46px; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-row { display: flex; gap: 16px; }
.cf-row .cf-field { flex: 1; }
.cf-field { margin-bottom: 18px; }
.cf-label {
    display: block; font-family: var(--font-display); font-size: 12px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-cream); margin-bottom: 8px;
}
.cf-req { color: var(--color-gold); }
.cf-input, .cf-select, .cf-textarea {
    width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(212,175,55,0.22);
    border-radius: 6px; padding: 13px 15px; color: #fff; font-family: var(--font-body);
    font-size: 15px; transition: var(--transition);
}
.cf-input::placeholder, .cf-textarea::placeholder { color: rgba(255,255,255,0.38); }
.cf-input:focus, .cf-select:focus, .cf-textarea:focus {
    outline: none; border-color: var(--color-gold); background: rgba(255,255,255,0.08);
    box-shadow: 0 0 0 3px rgba(212,175,55,0.15);
}
.cf-select { appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23d4af37'><path d='M7 10L2 4h10z'/></svg>");
    background-repeat: no-repeat; background-position: right 15px center;
}
/* Native dropdown list — theme it to match the vintage palette (dark list, cream text,
   gold for the selected row). Honored by Chrome/Edge/Firefox on desktop; Safari/macOS and
   mobile fall back to the OS-native picker (still readable, just not themed). */
.cf-select option { background: var(--color-primary-dark); color: var(--color-cream); }
.cf-select option:checked { background: var(--color-gold); color: var(--color-primary); }
.cf-textarea { resize: vertical; min-height: 96px; }
.cf-phone { display: flex; gap: 8px; }
.cf-phone .cf-prefix { flex: 0 0 auto; width: auto; min-width: 96px; padding-right: 34px; }
.cf-phone .cf-input { flex: 1 1 auto; min-width: 0; }
.cf-field--error { border-color: var(--color-rust) !important; }
.cf-error { display: block; color: #e8a0a0; font-size: 12.5px; margin-top: 6px; min-height: 1em; }
.cf-consent { display: flex; gap: 11px; align-items: flex-start; margin: 4px 0 6px; }
.cf-consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--color-gold); flex-shrink: 0; }
.cf-consent label { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.62); }
.cf-consent a { color: var(--color-gold); }
.cf-submit { width: 100%; justify-content: center; margin-top: 14px; }
.cf-submit:disabled { opacity: 0.6; cursor: default; transform: none; }
.cf-alt { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px;
    flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,0.55); }
.cf-alt a { color: var(--color-gold); font-weight: 500; }
.cf-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(212,175,55,0.5); }
.contact-form__success { text-align: center; padding: 24px 10px; }
.cf-ok-icon { width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center; font-size: 28px;
    color: var(--color-gold); background: rgba(212,175,55,0.15); border: 1px solid rgba(212,175,55,0.4); }
.contact-form__success h3 { font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: 0.1em; color: #fff; margin: 0 0 8px; }
.contact-form__success p { color: rgba(255,255,255,0.7); }
.contact-form__success a { color: var(--color-gold); }

/* MODAL */
.contact-modal__content { background: linear-gradient(180deg, var(--bg-dark), var(--bg-darker));
    border: 1px solid rgba(212,175,55,0.28); border-radius: 12px; color: #fff; }
.contact-modal__bar { display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid rgba(212,175,55,0.16); }
.contact-modal__bar h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 18px;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold); }
.contact-modal__bar h3 .script { font-family: var(--font-script); color: #fff; text-transform: none;
    font-size: 0.8em; letter-spacing: 0; }
.contact-modal__x { background: none; border: none; color: rgba(255,255,255,0.55); font-size: 24px; cursor: pointer; }
.contact-modal__x:hover { color: #fff; }
.contact-modal__body { padding: 22px; }
.contact-modal__lead { font-size: 13px; color: rgba(255,255,255,0.7); margin: 0 0 16px; }

/* ===== Door to Door — nav accent + amenities + FAQ ===== */
.nav-link--accent { color: var(--color-gold, #d4af37); }
.dtd-hotel__media { position: relative; display: block; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
.dtd-hotel__media:hover .dtd-hotel__img { transform: scale(1.03); }
.dtd-hotel__img { width: 100%; height: auto; display: block; transition: transform .4s ease; }
.dtd-hotel__badge { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: #1a1a1a; background: var(--color-gold, #d4af37); border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.dtd-hotel__desc { font-size: 16px; line-height: 1.7; margin: 0 0 20px; opacity: 0.9; }
.dtd-hotel__cta { margin-top: 4px; }
.dtd-amenities { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dtd-amenities li { display: flex; align-items: center; gap: 10px; font-weight: 500; padding: 10px 14px; background: rgba(255,255,255,0.6); border: 1px solid rgba(0,0,0,0.07); border-radius: 8px; transition: border-color .2s ease, transform .2s ease; }
.dtd-amenities li:hover { border-color: var(--color-gold, #d4af37); transform: translateY(-1px); }
.dtd-amenities li i { color: var(--color-gold, #d4af37); font-size: 20px; flex: none; }
@media (max-width: 575px) { .dtd-amenities { grid-template-columns: 1fr; } }
.dtd-faq { display: flex; flex-direction: column; gap: 12px; }
.dtd-faq__item { border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; background: rgba(255,255,255,0.5); overflow: hidden; }
.dtd-faq__q { cursor: pointer; list-style: none; padding: 16px 20px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dtd-faq__q::-webkit-details-marker { display: none; }
.dtd-faq__q i { transition: transform .2s ease; flex: none; }
.dtd-faq__item[open] .dtd-faq__q i { transform: rotate(180deg); }
.dtd-faq__a { padding: 0 20px 18px; line-height: 1.65; }

/* Sticky CTA — przycisk lead (mobile) */
.sticky-cta-mobile__btn--lead { background: var(--color-primary); color: var(--color-cream); }

@media (max-width: 560px) { .cf-row { flex-direction: column; gap: 0; } }

/* =====================================================
   REALIZACJE — kafelki jako „stos zdjęć" + lightbox
   ===================================================== */
.realizations-grid .realization-card { padding: 12px 16px 26px; }
.realization-stack { position: relative; display: block; }
/* kartki „pod spodem" — sugerują stos zdjęć */
.realization-stack__paper {
    position: absolute; inset: 0; border-radius: 4px;
    background: var(--color-cream); border: 1px solid var(--color-cream-dark);
    box-shadow: var(--shadow-vintage);
    transition: transform 0.35s ease;
}
.realization-stack__paper--back { z-index: 1; transform: rotate(-4deg) translate(-9px, 7px); }
.realization-stack__paper--mid  { z-index: 2; transform: rotate(3.2deg) translate(8px, 5px); }
.realization-stack__photo {
    position: relative; z-index: 3; display: block; margin: 0;
    transition: transform 0.35s ease;
}
.realization-stack__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
/* rozjazd „wachlarza" na hover */
.realization-stack:hover .realization-stack__paper--back { transform: rotate(-7deg) translate(-15px, 9px); }
.realization-stack:hover .realization-stack__paper--mid  { transform: rotate(6deg) translate(14px, 7px); }
.realization-stack:hover .realization-stack__photo { transform: translateY(-4px); }
/* licznik zdjęć */
.realization-stack__badge {
    position: absolute; top: 24px; left: 24px; z-index: 4;
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(7,21,16,0.8); color: var(--color-gold);
    font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.08em;
    padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(212,175,55,0.4);
}
/* lupa na hover (obszar zdjęcia = po paddingu 14px vintage-frame) */
.realization-stack__zoom {
    position: absolute; inset: 14px; z-index: 4;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 34px; background: rgba(7,21,16,0.35);
    opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.realization-stack:hover .realization-stack__zoom { opacity: 1; }
.realization-caption {
    text-align: center; font-family: var(--font-script); font-size: 20px;
    color: #fff; margin-top: 18px;
}

/* =====================================================
   LEGAL PAGES — polityka prywatności / regulamin
   ===================================================== */
.legal-page { background: var(--bg-darker); color: #fff; padding: 120px 0 80px; }
.legal-page__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
    font-size: clamp(28px, 4vw, 42px); margin: 14px 0 6px; }
.legal-page__updated { color: rgba(255,255,255,0.5); font-size: 13px; margin-bottom: 32px; }
.legal-page h2 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; font-size: 19px; color: var(--color-gold); margin: 30px 0 12px; }
.legal-page p, .legal-page li { color: rgba(255,255,255,0.82); line-height: 1.7; max-width: 760px; }
.legal-page ul { padding-left: 20px; }
.legal-page a { color: var(--color-gold); }
.legal-page__note { font-size: 13px; color: rgba(255,255,255,0.45); margin-top: 36px; }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.footer-legal a { color: rgba(255,255,255,0.6); font-size: 13px; }
.footer-legal a:hover { color: var(--color-gold); }

/* =====================================================
   LANG SUGGEST — pasek sugestii jezyka (JS-only, SEO-safe)
   ===================================================== */
.lang-suggest { display: flex; gap: 12px; align-items: center; justify-content: center;
    flex-wrap: wrap; padding: 10px 16px; background: var(--color-primary);
    color: var(--color-cream); font-family: var(--font-body); font-size: 14px;
    position: relative; z-index: 10; text-align: center; }
.lang-suggest[hidden] { display: none; }
.lang-suggest__go { color: var(--color-gold); font-weight: 600; text-decoration: underline;
    cursor: pointer; }
.lang-suggest__go:hover { color: var(--color-gold-hover); }
.lang-suggest__dismiss { background: none; border: none; color: var(--color-cream-dark);
    cursor: pointer; text-decoration: underline; font-size: 13px; font-family: var(--font-body); }
.lang-suggest__dismiss:hover { color: var(--color-cream); }

/* =====================================================
   MENU MOBILNE — nakładka na pełny ekran
   -----------------------------------------------------
   Menu rozwijane WEWNĄTRZ paska przyklejonego do góry ekranu jest na telefonach
   nie do przewinięcia: palec trafia w dokument pod spodem, więc dolne pozycje
   listy stają się dostępne dopiero, gdy strona w tle dojedzie do końca.

   Rozwiązanie nie walczy o zagnieżdżone przewijanie, tylko je rozdziela: rozwinięte
   menu staje się nakładką na cały ekran z własnym przewijaniem, a strona pod nim
   dostaje blokadę (klasa .menu-open, ustawiana skryptem js/v2/mobile-menu.js).
   Tło nie ma wtedy czego przewijać, więc nie ma o co konkurować.

   Warunkiem działania jest to, że menu leży w dokumencie POZA <header class="topbar">
   — pasek ma will-change i backdrop-filter, a każda z tych własności czyniłaby
   z niego układ odniesienia dla position: fixed (patrz komentarz w topbar.blade.php).
   ===================================================== */
@media (max-width: 991.98px) {
    #v2MobileMenu.collapse.show,
    #v2MobileMenu.collapsing {
        position: fixed;
        /* Nakładka celowo zaczyna się od GÓRY EKRANU, nie od dołu paska. Start od
           zmierzonej wysokości paska zostawia prześwit, przez który widać treść
           strony, ilekroć pomiar nie zgadza się co do piksela z realną wysokością
           (logo skaluje się do szerokości ekranu). Tło startuje od zera, a pasek
           rysuje się na nim, bo ma wyższą warstwę — luka nie ma z czego powstać. */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* Nad treścią (sekcje mają najwyżej kilka) i nad dolnym paskiem CTA (90),
           ale POD paskiem górnym (100), żeby hamburger zamykający pozostał widoczny. */
        z-index: 95;
        margin-top: 0;
        padding: 0 16px;
        /* Pierwsza pozycja startuje pod paskiem; przy przewijaniu lista przejeżdża
           pod nim, a pasek ma własne tło z rozmyciem, więc czyta się to czysto.
           Wartość zapasowa działa, gdyby skrypt nie wystartował. */
        padding-top: var(--topbar-h, 74px);
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        background: rgba(10, 31, 22, 0.985);
        backdrop-filter: blur(12px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    /* Bootstrap animuje rozwijanie zmianą wysokości. W nakładce (top/bottom) inline
       height z animacji wygrywa nad `bottom: 0`, więc panel na moment wylewa się
       poza ekran. Nakładka i tak nie potrzebuje animacji — wyłączamy ją. */
    #v2MobileMenu.collapsing {
        transition: none;
        height: auto !important;
    }

    /* Strona pod otwartym menu stoi. `overflow: hidden` na body nie wystarcza
       na iOS — dopiero position: fixed realnie zatrzymuje przewijanie; skrypt
       zapamiętuje i przywraca pozycję, żeby zamknięcie menu nie przenosiło
       użytkownika na górę strony. */
    html.menu-open, html.menu-open body {
        overflow: hidden;
    }
    html.menu-open body {
        position: fixed;
        top: calc(-1 * var(--menu-scroll-y, 0px));
        left: 0;
        right: 0;
        width: 100%;
    }
    /* Pasek jest `position: sticky`, a sticky wymaga przewijalnego przodka. Blokada
       powyżej odbiera body przewijanie i przesuwa je o -scrollY, więc przyklejony
       pasek degraduje do zwykłego i odjeżdża poza ekran razem z treścią — przy
       otwarciu menu na przewiniętej stronie znika hamburger, którym się je zamyka.
       Na czas otwartego menu przypinamy pasek wprost do okna. */
    html.menu-open .topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
}