@font-face{font-family:'Geist Mono';src:url('../fonts/geistmono.woff2') format('woff2');font-weight:400 600;font-display:swap;}@font-face{font-family:'Geist Mono';src:url('../fonts/geistmono-latin-ext.woff2') format('woff2');font-weight:400 600;font-display:swap;unicode-range:U+0100-017F;}
/*
 * SkinSkin - Phase 2 design system.
 * Source of truth: DESIGN.md (verified against reference/oliver-design-clean.html).
 * Palette, type, buttons, header, language switcher and Instagram section follow
 * Oliver's design exactly; content styling is applied to the homepage + shared
 * includes only. Inner pages keep the readable baseline (section 12) until the
 * homepage is approved.
 *
 * Contents:
 *   1. Fonts (@font-face, self-hosted)
 *   2. Design tokens (:root)
 *   3. Base + typography
 *   4. Utilities (wrappers, eyebrow, lead, reveal system)
 *   5. Buttons (all variants + lift/magnetic hooks)
 *   6. Header, navigation, language switcher, mobile menu
 *   7. Homepage sections (hero, press, procedures, results, vouchers,
 *      infusions teaser, reviews, membership, Instagram)
 *   8. Forms (.form-*) + waitlist
 *   9. Stats strip component (shared, 900px breakpoint)
 *  10. Footer
 *  11. Motion (keyframes, grain, cursor, reduced motion)
 *  12. Legacy baseline for not-yet-styled inner pages
 */

/* ------------------------------------------------------------------ */
/* 1. Fonts - copied programmatically from reference/assets/           */
/* ------------------------------------------------------------------ */

@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/fraunces-normal.woff2') format('woff2');
    font-weight: 300 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/fraunces-italic.woff2') format('woff2');
    font-weight: 300 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');
    font-weight: 300 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-017F;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-normal.woff2') format('woff2');
    font-weight: 300 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
    font-weight: 300 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-017F;
}
@font-face {
    font-family: 'Novatica';
    src: url('/assets/fonts/novatica-400.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Novatica';
    src: url('/assets/fonts/novatica-500.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    /* 600 reuses the 500 file - there is no separate 600 cut (DESIGN.md). */
    font-family: 'Novatica';
    src: url('/assets/fonts/novatica-500.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------------ */
/* 2. Design tokens                                                    */
/* ------------------------------------------------------------------ */

:root {
    /* Core palette */
    --ss-charcoal:   #121212;
    --ss-cream:      #ffffff;
    --ss-rose:       #9a6cf0;
    --ss-rose-soft:  #f3e6ff;
    --ss-sand:       #fde9dd;
    --ss-linen:      #fef4ec;
    --ss-stone:      #6f584a;
    --ss-mauve:      #9a6cf0;
    --ss-mauve-soft: #f3e6ff;
    --ss-mauve-deep: #5e3425;
    --ss-error:      #c0473b;

    /* Alpha conventions */
    --ss-hairline:      rgba(18, 18, 18, 0.12);
    --ss-card-border:   rgba(18, 18, 18, 0.08);
    --ss-cream-10:      rgba(255, 255, 255, 0.10);
    --ss-cream-25:      rgba(255, 255, 255, 0.25);
    --ss-cream-30:      rgba(255, 255, 255, 0.30);
    --ss-cream-40:      rgba(255, 255, 255, 0.40);

    /* Type */
    --ss-serif: 'Novatica', 'Inter', system-ui, sans-serif;
    --ss-sans:  'Novatica', 'Inter', system-ui, sans-serif;
    --ss-ui:    'Geist Mono', 'SFMono-Regular', Menlo, monospace;

    /* Motion */
    --ss-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Layout */
    --ss-wrap:          1600px;
    --ss-wrap-carousel: 1560px;
    --ss-wrap-reviews:  1400px;
    --ss-wrap-vouchers: 1280px;
    --ss-wrap-narrow:   1180px;
    --ss-gutter:        1.5rem;   /* px-6 */
    --ss-gutter-lg:     3rem;     /* lg:px-12 */

    /* Section rhythm (py-20 -> lg:py-28 and the larger py-24 -> lg:py-36) */
    --ss-section-y:     clamp(5rem, 3.4rem + 4vw, 7rem);
    --ss-section-y-big: clamp(6rem, 4rem + 5vw, 9rem);

    /* Radii */
    --ss-r-soft:     4px;
    --ss-r-btn-lg:   6px;
    --ss-r-card:     16px;
    --ss-r-voucher:  14px;
    --ss-r-carousel: 18px;
    --ss-r-tile:     14px;
    --ss-r-igcard:   20px;
}

/* ------------------------------------------------------------------ */
/* 3. Base + typography                                                */
/* ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--ss-sans);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ss-charcoal);
    background: var(--ss-cream);
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--ss-serif);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
}

p { margin: 0 0 1rem; }

::selection { background: var(--ss-rose); color: var(--ss-charcoal); }

:focus-visible {
    outline: 2px solid var(--ss-rose);
    outline-offset: 3px;
}

[hidden] { display: none !important; }

[id] { scroll-margin-top: 88px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
    left: 1rem; top: 1rem; z-index: 100; background: var(--ss-charcoal);
    color: var(--ss-cream); padding: .6rem 1rem; border-radius: var(--ss-r-soft);
    font-family: var(--ss-ui); font-size: 12px; text-transform: uppercase;
    letter-spacing: .16em; text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* 4. Utilities                                                        */
/* ------------------------------------------------------------------ */

.wrap {
    max-width: var(--ss-wrap);
    margin-inline: auto;
    padding-inline: var(--ss-gutter);
}
.wrap--carousel { max-width: var(--ss-wrap-carousel); }
.wrap--reviews  { max-width: var(--ss-wrap-reviews); }
.wrap--vouchers { max-width: var(--ss-wrap-vouchers); }
.wrap--narrow   { max-width: var(--ss-wrap-narrow); }
@media (min-width: 1024px) {
    .wrap { padding-inline: var(--ss-gutter-lg); }
}

.eyebrow {
    font-family: var(--ss-ui);
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .28em;
    color: var(--ss-rose);
    margin: 0 0 1.1rem;
}
.eyebrow--tight { letter-spacing: .2em; }
.eyebrow--stone { color: var(--ss-stone); }
.eyebrow--mauve { color: var(--ss-mauve); }

.lead {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ss-stone);
    max-width: 46ch;
}
.on-dark .lead, .lead--on-dark { color: rgba(255, 255, 255, 0.7); }

.accent-italic { font-style: normal; color: var(--ss-rose); }
.accent-italic--soft { font-style: normal; color: var(--ss-rose-soft); }
.accent-italic--mauve { font-style: normal; color: var(--ss-mauve); }

/* Display heading scale (Fraunces 300 everywhere) */
.h-display   { font-size: clamp(3rem, 1.9rem + 4.6vw, 6rem);    line-height: 1.0;  letter-spacing: -0.02em; }
.h-large     { font-size: clamp(3rem, 2.4rem + 2.4vw, 4.5rem);  line-height: 1.02; letter-spacing: -0.02em; }
.h-split     { font-size: clamp(2.25rem, 1.9rem + 1.6vw, 3.75rem); line-height: 1.1; }
.h-carousel  { font-size: clamp(2.2rem, 1.9rem + 1.3vw, 3.2rem); line-height: 1.12; }
.h-vouchers  { font-size: clamp(2.4rem, 2.1rem + 1.3vw, 3.4rem); line-height: 1.12; }

/* Scroll reveal - only once JS has registered (html.js), so no-JS never hides content. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .9s var(--ss-ease), transform .9s var(--ss-ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

.js [data-stagger] > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .9s var(--ss-ease), transform .9s var(--ss-ease);
    transition-delay: calc(var(--i, 0) * 85ms);
}
.js [data-stagger].is-visible > * { opacity: 1; transform: none; }

/* Scroll progress bar */
.scroll-progress {
    position: fixed; top: 0; left: 0; z-index: 60;
    height: 2px; width: 0;
    background: var(--ss-rose);
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* 5. Buttons                                                          */
/* ------------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--ss-ui);
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .18em;
    text-decoration: none;
    white-space: nowrap;
    padding: .875rem 1.75rem;             /* py-3.5 px-7 */
    border-radius: var(--ss-r-soft);
    border: 1px solid var(--ss-charcoal);
    background: var(--ss-charcoal);
    color: var(--ss-cream);
    cursor: pointer;
    transition: all .5s var(--ss-ease);
    /* magnetic offset written by JS into --mx / --my */
    transform: translate(var(--mx, 0px), var(--my, 0px));
}
.btn:hover {
    background: var(--ss-rose);
    border-color: var(--ss-rose);
    color: var(--ss-charcoal);
}

.btn--sm { padding: .75rem 1.5rem; }      /* header CTA: py-3 px-6 */

.btn--outline-dark {                      /* on dark backgrounds */
    background: transparent;
    border-color: var(--ss-cream-40);
    color: var(--ss-cream);
}
.btn--outline-dark:hover {
    background: var(--ss-cream);
    border-color: var(--ss-cream);
    color: var(--ss-charcoal);
}

.btn--outline-light,
.btn--ghost {                             /* secondary CTA on light backgrounds */
    background: transparent;
    border-color: rgba(18, 18, 18, 0.3);
    color: var(--ss-charcoal);
}
.btn--outline-light:hover,
.btn--ghost:hover {
    background: var(--ss-charcoal);
    border-color: var(--ss-charcoal);
    color: var(--ss-cream);
}

.btn--pill {                              /* Instagram pill */
    border-radius: 9999px;
    padding: .95rem 1.8rem;
    font-size: 12px;
    letter-spacing: .14em;
}
.btn--pill svg { width: 16px; height: 16px; }

/* Voucher buttons */
.ssv-btn {
    display: block;
    width: 100%;
    text-align: center;
    font-family: var(--ss-ui);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .16em;
    text-decoration: none;
    padding: .9rem 1.2rem;
    border-radius: var(--ss-r-btn-lg);
    border: 1px solid var(--ss-charcoal);
    background: var(--ss-charcoal);
    color: var(--ss-cream);
    cursor: pointer;
    transition: background .4s, color .4s, border-color .4s;
    transform: translate(var(--mx, 0px), var(--my, 0px));
}
.ssv-btn:hover { background: var(--ss-rose); border-color: var(--ss-rose); color: var(--ss-charcoal); }
.ssv-btn--light { background: var(--ss-cream); border-color: var(--ss-cream); color: var(--ss-charcoal); }
.ssv-btn--light:hover { background: var(--ss-rose); border-color: var(--ss-rose); color: var(--ss-charcoal); }

/* Form submit */
.ssb-submit {
    display: block;
    width: 100%;
    font-family: var(--ss-ui);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .18em;
    padding: 1rem 1.5rem;
    border-radius: var(--ss-r-soft);
    border: 1px solid var(--ss-charcoal);
    background: var(--ss-charcoal);
    color: var(--ss-cream);
    cursor: pointer;
    transition: background .4s, color .4s, border-color .4s;
    transform: translate(var(--mx, 0px), var(--my, 0px));
}
.ssb-submit:hover { background: var(--ss-rose); border-color: var(--ss-rose); color: var(--ss-charcoal); }

/* Icon arrow circles */
.icon-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 9999px;
    border: 1px solid rgba(18, 18, 18, 0.2);
    background: transparent;
    color: var(--ss-charcoal);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: all .4s var(--ss-ease);
}
.icon-arrow:hover:not(:disabled) { background: var(--ss-charcoal); border-color: var(--ss-charcoal); color: var(--ss-cream); }
.icon-arrow:disabled { opacity: .3; cursor: default; }
.on-dark .icon-arrow, .icon-arrow--on-dark { border-color: var(--ss-cream-30); color: var(--ss-cream); }
.on-dark .icon-arrow:hover:not(:disabled), .icon-arrow--on-dark:hover:not(:disabled) {
    background: var(--ss-cream); border-color: var(--ss-cream); color: var(--ss-charcoal);
}

/* Hover lift (pointer:fine only; magnetic follow comes from JS via --mx/--my). */
@media (hover: hover) and (pointer: fine) {
    .btn, .ssv-btn, .ssb-submit {
        transition: all .5s var(--ss-ease), transform .45s var(--ss-ease);
    }
    .btn:hover, .ssv-btn:hover, .ssb-submit:hover {
        transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 2px));
        box-shadow: 0 16px 30px -16px rgba(18, 18, 18, 0.45);
    }
}

/* ------------------------------------------------------------------ */
/* 6. Header, navigation, language switcher, mobile menu               */
/* ------------------------------------------------------------------ */

.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    transition: background .5s var(--ss-ease), border-color .5s var(--ss-ease);
    border-bottom: 1px solid transparent;
    background: transparent;
}
.site-header__inner {
    max-width: var(--ss-wrap);
    margin-inline: auto;
    padding: 1.25rem var(--ss-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
@media (min-width: 1024px) {
    .site-header__inner { padding-inline: var(--ss-gutter-lg); }
}

/* Two logos, toggled by header state */
.site-header__logo { display: inline-flex; align-items: center; }
.site-header__logo img { height: 26px; width: auto; }
.site-header__logo .logo--cream { display: none; }

/* Solid / scrolled state (default: every page without a hero) */
.site-header[data-state="solid"] {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom-color: var(--ss-hairline);
}

/* On-hero state: transparent header, cream text + logo */
.site-header[data-state="hero"] { background: transparent; border-bottom-color: transparent; }
.site-header[data-state="hero"] .logo--dark  { display: none; }
.site-header[data-state="hero"] .logo--cream { display: block; }

/* Desktop nav */
.site-nav__list {
    list-style: none;
    margin: 0; padding: 0;
    display: none;
    align-items: center;
    gap: 2.1rem;
}
@media (min-width: 1200px) {
    .site-nav__list { display: flex; }
}
.site-nav__item > a {
    font-family: var(--ss-ui);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .16em;
    text-decoration: none;
    white-space: nowrap;
    color: rgba(18, 18, 18, 0.8);
    position: relative;
    padding-bottom: 2px;
    transition: color .3s;
}
.site-nav__item > a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -5px;
    height: 1px;
    background: currentColor;
    opacity: .55;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ss-ease);
}
.site-nav__item > a:hover { color: var(--ss-rose); }
.site-nav__item > a:hover::after { transform: scaleX(1); }
.site-header[data-state="hero"] .site-nav__item > a { color: rgba(255, 255, 255, 0.9); }
.site-header[data-state="hero"] .site-nav__item > a:hover { color: var(--ss-rose); }

/* Procedures dropdown (desktop hover / focus) */
.site-nav__item--dropdown {
    position: relative;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.site-nav__dropdown-toggle {
    background: none; border: 0; padding: 0 0 0 .3rem; cursor: pointer;
    font-size: .7rem; line-height: 1; color: inherit;
    color: rgba(18, 18, 18, 0.8);
    transition: color .3s, transform .3s var(--ss-ease);
}
.site-header[data-state="hero"] .site-nav__dropdown-toggle { color: rgba(255, 255, 255, 0.9); }
.site-nav__submenu {
    list-style: none;
    margin: 0;
    position: absolute;
    top: calc(100% + 14px);
    left: -1.2rem;
    min-width: 280px;
    padding: .7rem 0;
    background: var(--ss-cream);
    border: 1px solid var(--ss-hairline);
    border-radius: 8px;
    box-shadow: 0 30px 60px -30px rgba(18, 18, 18, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .35s var(--ss-ease), transform .35s var(--ss-ease), visibility .35s;
    z-index: 60;
}
/* Hover bridge so the dropdown does not close crossing the gap */
.site-nav__item--dropdown::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 16px;
}
@media (min-width: 1200px) {
    .site-nav__item--dropdown:hover .site-nav__submenu,
    .site-nav__item--dropdown:focus-within .site-nav__submenu {
        opacity: 1; visibility: visible; transform: translateY(0);
    }
}
.site-nav__submenu a {
    display: block;
    padding: .55rem 1.4rem;
    font-family: var(--ss-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-decoration: none;
    color: rgba(18, 18, 18, 0.8);
    transition: color .3s, padding-left .3s var(--ss-ease);
}
.site-nav__submenu a:hover { color: var(--ss-rose); padding-left: 1.7rem; }

/* Header actions */
.site-header__actions { display: none; align-items: center; gap: 1.1rem; }
@media (min-width: 1200px) {
    .site-header__actions { display: flex; }
}

/* Language switcher pill (desktop) */
.lang-switch {
    position: relative;
    display: inline-flex;
    padding: 2px;
    border: 1px solid rgba(18, 18, 18, 0.15);
    border-radius: 9999px;
    font-family: var(--ss-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    transition: border-color .5s var(--ss-ease);
}
/* Sliding indicator. It is a REAL element (not ::before): the switcher flips
   data-lang on click and the indicator must glide 36px between the CZ and EN
   slots (DESIGN.md §6, 450ms editorial ease), and pseudo-elements do not
   reliably recalc/transition their transform on a runtime attribute change in
   Chromium, whereas a real element does (and main.js also nudges its inline
   transform on click as a belt-and-suspenders guarantee). */
.lang-switch__ind {
    position: absolute;
    top: 2px; bottom: 2px;
    left: 2px;
    width: 36px;
    border-radius: 9999px;
    background: var(--ss-charcoal);
    transform: translateX(0);
    transition: transform .45s var(--ss-ease), background .5s var(--ss-ease);
    pointer-events: none;
}
.lang-switch[data-lang="en"] .lang-switch__ind { transform: translateX(36px); }
.lang-switch a {
    position: relative;
    z-index: 1;
    width: 36px;
    padding: .38rem 0;
    text-align: center;
    text-decoration: none;
    color: rgba(18, 18, 18, 0.5);
    transition: color .3s;
}
.lang-switch a:hover { color: rgba(18, 18, 18, 0.8); }
.lang-switch a.is-active { color: var(--ss-cream); }
.site-header[data-state="hero"] .lang-switch { border-color: var(--ss-cream-25); }
.site-header[data-state="hero"] .lang-switch__ind { background: var(--ss-cream); }
.site-header[data-state="hero"] .lang-switch a { color: rgba(255, 255, 255, 0.7); }
.site-header[data-state="hero"] .lang-switch a:hover { color: var(--ss-cream); }
.site-header[data-state="hero"] .lang-switch a.is-active { color: var(--ss-charcoal); }

/* Header CTA follows state */
.site-header[data-state="hero"] .site-header__cta {
    background: transparent;
    border-color: var(--ss-cream-40);
    color: var(--ss-cream);
}
.site-header[data-state="hero"] .site-header__cta:hover {
    background: var(--ss-cream);
    border-color: var(--ss-cream);
    color: var(--ss-charcoal);
}

/* Burger */
.site-nav__burger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    background: none; border: 0; padding: 0;
    cursor: pointer;
}
@media (min-width: 1200px) {
    .site-nav__burger { display: none; }
}
.site-nav__burger span {
    display: block;
    width: 24px; height: 1.5px;
    background: var(--ss-charcoal);
    transition: transform .45s var(--ss-ease), opacity .3s, background .5s var(--ss-ease);
}
.site-header[data-state="hero"] .site-nav__burger span { background: var(--ss-cream); }
body.menu-open .site-nav__burger span { background: var(--ss-charcoal); }
body.menu-open .site-nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-open .site-nav__burger span:nth-child(2) { opacity: 0; }
body.menu-open .site-nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu panel */
.mobile-menu {
    position: fixed;
    inset: 0;
    top: 72px;
    z-index: 49;
    background: var(--ss-cream);
    padding: 1.5rem var(--ss-gutter) 3rem;
    overflow-y: auto;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .5s var(--ss-ease), opacity .5s var(--ss-ease);
}
body.menu-open .mobile-menu { transform: translateX(0); opacity: 1; pointer-events: auto; }
@media (min-width: 1200px) {
    .mobile-menu { display: none; }
}
.mobile-menu__list { list-style: none; margin: 0; padding: 0; }
.mobile-menu__list > li { border-bottom: 1px solid var(--ss-hairline); }
.mobile-menu__link {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 1.25rem 0;
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--ss-charcoal);
    text-decoration: none;
}
.mobile-menu__index {
    font-family: var(--ss-ui);
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--ss-rose);
}
.mobile-menu__sub-toggle {
    background: none; border: 0;
    margin-left: auto;
    padding: .5rem .25rem;
    font-size: .8rem;
    color: var(--ss-stone);
    cursor: pointer;
    transition: transform .35s var(--ss-ease);
}
li[data-open="true"] .mobile-menu__sub-toggle { transform: rotate(180deg); }
.mobile-menu__sub {
    list-style: none;
    margin: 0; padding: 0 0 1rem 2.1rem;
    display: none;
}
li[data-open="true"] > .mobile-menu__sub { display: block; }
.mobile-menu__sub a {
    display: block;
    padding: .5rem 0;
    font-family: var(--ss-ui);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-decoration: none;
    color: rgba(18, 18, 18, 0.75);
}
.mobile-menu__sub a:hover { color: var(--ss-rose); }
.mobile-menu__foot {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}
/* Mobile lang switcher: same pill, always the light/scrolled variant.
   (Addition over Oliver's design - his mobile menu has no switcher.) */
.mobile-menu .lang-switch { display: inline-flex; }

/* ------------------------------------------------------------------ */
/* 7. Homepage sections                                                */
/* ------------------------------------------------------------------ */

/* --- Hero ------------------------------------------------------- */
.hero {
    position: relative;
    height: 100svh;
    min-height: 640px;
    overflow: hidden;
    background: var(--ss-charcoal);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 25%;
    animation: kenburns 14s var(--ss-ease) both;
}
.hero__media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top,
        rgba(18, 18, 18, 0.85),
        rgba(18, 18, 18, 0.25) 50%,
        rgba(18, 18, 18, 0.4));
}
.hero__content {
    position: relative;
    z-index: 1;
    max-width: var(--ss-wrap);
    margin-inline: auto;
    height: 100%;
    padding: 0 var(--ss-gutter) 4rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
@media (min-width: 1024px) {
    .hero__content { padding: 0 var(--ss-gutter-lg) 6rem; }
}
.hero__chips { display: flex; flex-wrap: wrap; gap: .625rem; }
.hero__chip {
    font-family: var(--ss-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--ss-cream-30);
    border-radius: var(--ss-r-soft);
    padding: .375rem .875rem;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.hero__title {
    margin: 1.75rem 0 0;
    max-width: 56rem;
    font-size: clamp(2.9rem, 1.6rem + 5.4vw, 5.5rem);
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--ss-cream);
}
.hero__lead {
    margin: 1.75rem 0 0;
    max-width: 28rem;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
}
.hero__cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.hero__scrollcue {
    position: absolute;
    bottom: 2rem; left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: none;
}
@media (min-width: 1024px) {
    .hero__scrollcue { display: flex; }
}
.hero__scrollcue span {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 28px; height: 48px;
    padding: 8px;
    border: 1px solid var(--ss-cream-30);
    border-radius: 9999px;
}
.hero__scrollcue i {
    display: block;
    width: 4px; height: 8px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.7);
    animation: scrolldot 1.5s ease-in-out infinite;
}
/* Staggered entrance */
.js .hero .fade-up { opacity: 0; animation: fadeUp 1.1s var(--ss-ease) forwards; }

/* --- Press trust strip ------------------------------------------ */
.press { padding: 3.25rem 0; border-bottom: 1px solid var(--ss-hairline); }
.press__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem 3.5rem;
}
.press__label {
    font-family: var(--ss-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .28em;
    color: var(--ss-stone);
    margin: 0;
}
.press__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem 3rem;
}
.press__logos img {
    height: 22px;
    width: auto;
    opacity: .72;
    filter: grayscale(1);
    transition: opacity .4s var(--ss-ease);
}
.press__logos img:hover { opacity: 1; }
/* The Forbes source is a square PNG with large transparent padding; render it
   taller (padding collapses via negative margin) so the wordmark matches the
   other logos optically. */
.press__logos .press__logo--padded { height: 76px; margin-block: -27px; }
@media (min-width: 1024px) {
    .press__logos img { height: 26px; }
    .press__logos .press__logo--padded { height: 88px; margin-block: -31px; }
}

/* --- Section head pattern --------------------------------------- */
.section-head { max-width: 720px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head .lead { margin-top: 1.25rem; }

/* --- Procedures grid --------------------------------------------- */
.procedures { padding: var(--ss-section-y) 0; }
.procedures .section-head h2 { margin-bottom: 0; }
.proc-grid {
    margin-top: 3.25rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
}
@media (min-width: 640px)  { .proc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .proc-grid { grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } }

.proc-card {
    display: flex;
    flex-direction: column;
    background: var(--ss-cream);
    border: 1px solid var(--ss-card-border);
    border-radius: var(--ss-r-card);
    overflow: hidden;
    transition: transform .55s var(--ss-ease), box-shadow .55s var(--ss-ease), border-color .55s var(--ss-ease);
}
.proc-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--ss-sand);
}
.proc-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .55s var(--ss-ease);
}
.proc-card__media::after {                /* accent bar */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--accent, var(--ss-rose)), var(--tint, var(--ss-rose-soft)));
    transition: height .55s var(--ss-ease);
}
@media (hover: hover) {
    .proc-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 45px 70px -45px rgba(18, 18, 18, 0.45);
        border-color: rgba(18, 18, 18, 0.14);
    }
    .proc-card:hover .proc-card__media img { transform: scale(1.06); }
    .proc-card:hover .proc-card__media::after { height: 8px; }
}
.proc-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem;
    gap: .65rem;
}
@media (min-width: 1024px) { .proc-card__body { padding: 1.7rem; } }
.proc-card__label {
    font-family: var(--ss-ui);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--accent, var(--ss-stone));
    margin: 0;
}
.proc-card__name { margin: 0; font-size: 1.5rem; line-height: 1.08; }
.proc-card__name a { text-decoration: none; }
.proc-card__desc { font-size: 13.5px; line-height: 1.65; color: var(--ss-stone); margin: 0; }
.proc-card__price {
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: 1.4rem;
    margin: .25rem 0 0;
}
.proc-card__cta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: auto;
    padding-top: 1rem;
}
.proc-card__cta .btn {
    padding: .68rem 1.15rem;
    font-size: 11.5px;
    letter-spacing: .16em;
    flex: 1;
    white-space: nowrap;
}

/* --- Results: before/after comparison slider (Oliver RESULTS split) */
.ba {
    background: var(--ss-charcoal);
    color: var(--ss-cream);
}
.ba__grid { display: grid; }
@media (min-width: 1024px) {
    .ba__grid { grid-template-columns: 1fr 1fr; }
}
.ba__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem var(--ss-gutter);
}
@media (min-width: 1024px) {
    .ba__text { padding: 4rem 4rem; }
}
.ba__text h2 { color: var(--ss-cream); }
.ba__nav {
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.ba__case {
    margin-left: .75rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.ba__label {
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1.2;
}
.ba__count {
    font-family: var(--ss-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ss-cream-40);
}
.ba__viewer {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    background: #2a251f;
}
@media (min-width: 1024px) {
    .ba__viewer { aspect-ratio: auto; min-height: 680px; height: 100%; }
}
.ba__viewer img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.ba__before {
    position: absolute;
    inset: 0;
    height: 100%;
    overflow: hidden;
}
/* JS keeps this image at the full viewer width so the reveal never squashes it */
.ba__before img { max-width: none; }
.ba__chip {
    position: absolute;
    bottom: 1.25rem;
    z-index: 10;
    font-family: var(--ss-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    padding: .375rem .75rem;
    border-radius: var(--ss-r-soft);
}
.ba__chip--po { right: 1.25rem; background: rgba(18, 18, 18, 0.85); color: var(--ss-cream); }
.ba__chip--pred { left: 1.25rem; background: rgba(255, 255, 255, 0.85); color: var(--ss-charcoal); }
.ba__line {
    position: absolute;
    top: 0;
    z-index: 20;
    height: 100%;
    width: 2px;
    background: var(--ss-cream);
    transform: translateX(-50%);
}
.ba__handle {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 9999px;
    background: var(--ss-cream);
    color: var(--ss-charcoal);
    font-size: .875rem;
    letter-spacing: .1em;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Shared snap track.
   CLIENT OVERRIDE of Oliver's full-bleed tracks: each track lives inside the
   standard content container (its .wrap parent supplies the side padding), so
   cards never bleed to the viewport edge and there is no trailing dead space. */
.snap-track {
    display: flex;
    gap: 1.2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    padding-block: .5rem;
}
.snap-track::-webkit-scrollbar { display: none; }
.snap-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.snap-track.is-dragging > * { pointer-events: none; }
.snap-track > * { scroll-snap-align: start; flex-shrink: 0; }

/* Carousel progress bar */
.snap-progress {
    position: relative;
    height: 2px;
    margin-top: 2.25rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    overflow: hidden;
}
.snap-progress i {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 100%;
    background: var(--ss-cream);
    border-radius: 2px;
    transform-origin: left;
    transform: scaleX(0.3);
    transition: transform .1s linear;
}
.snap-progress--light { background: rgba(18, 18, 18, 0.12); }
.snap-progress--light i { background: var(--ss-charcoal); }

/* --- Popular treatments carousel (Oliver "Oblíbená ošetření") ----- */
.ssh { padding: 6rem 0; background: var(--ss-cream); overflow: hidden; }
@media (min-width: 1024px) { .ssh { padding: 8rem 0; } }
.ssh__head {
    max-width: var(--ss-wrap-carousel);
    margin: 0 auto 2.6rem;
    padding-inline: var(--ss-gutter);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}
@media (min-width: 1024px) { .ssh__head { padding-inline: var(--ss-gutter-lg); } }
.ssh__head .eyebrow { margin-bottom: .9rem; }
.ssh__head h2 { margin: 0; }
.ssh__nav { display: none; gap: .6rem; flex: none; }
@media (min-width: 768px) { .ssh__nav { display: flex; } }

.ssh-card {
    position: relative;
    display: block;
    width: 80vw;
    max-width: 430px;
    aspect-ratio: 4 / 5;
    border-radius: var(--ss-r-carousel);
    overflow: hidden;
    background: var(--ss-sand);
    text-decoration: none;
}
@media (min-width: 561px) { .ssh-card { width: 430px; } }
.ssh-card img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.3s var(--ss-ease);
}
@media (hover: hover) {
    .ssh-card:hover img { transform: scale(1.05); }
}
.ssh-card__num {
    position: absolute;
    top: 1.3rem; left: 1.3rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 9999px;
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: 1rem;
    color: var(--ss-cream);
}
.ssh-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
        rgba(18, 18, 18, 0.92),
        rgba(18, 18, 18, 0.2) 44%,
        rgba(18, 18, 18, 0) 66%);
}
.ssh-card__info {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 1.7rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    text-align: left;
}
.ssh-card__cat {
    font-family: var(--ss-ui);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ss-rose);
}
.ssh-card__name {
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: 1.75rem;
    line-height: 1.05;
    color: var(--ss-cream);
}
.ssh-card__price {
    font-family: var(--ss-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, 0.82);
}
.ssh__progressrow {
    max-width: var(--ss-wrap-carousel);
    margin: 0 auto;
    padding-inline: var(--ss-gutter);
}
@media (min-width: 1024px) { .ssh__progressrow { padding-inline: var(--ss-gutter-lg); } }

/* --- Vouchers (Oliver's snap track with chips + featured card) ---- */
.vouchers {
    background: rgba(228, 207, 198, 0.4);   /* roseSoft @ 40% */
    padding: var(--ss-section-y) 0;
    overflow: hidden;
}
.vouchers__head {
    text-align: center;
    max-width: 660px;
    margin: 0 auto 2.4rem;
    padding-inline: var(--ss-gutter);
}
.vouchers__head .eyebrow { margin-bottom: 1.1rem; }
.vouchers__head .lead { margin: 1.3rem auto 0; max-width: 46ch; }
.vouchers__nav {
    display: flex;
    justify-content: center;
    gap: .6rem;
    margin-bottom: 1.6rem;
}
.snap-track--vouchers {
    gap: 1.5rem;
    padding-block: 1rem 1.4rem;   /* top room for the featured badge (-13px) */
}

.ssv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 80vw;
    max-width: 330px;
    background: var(--ss-cream);
    border: 1px solid rgba(18, 18, 18, 0.09);
    border-radius: var(--ss-r-voucher);
    padding: 2.1rem 1.9rem;
    user-select: none;
    transition: transform .55s var(--ss-ease), box-shadow .55s var(--ss-ease), border-color .55s var(--ss-ease);
}
@media (min-width: 561px) { .ssv-card { width: 330px; } }
@media (hover: hover) {
    .ssv-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 45px 80px -50px rgba(18, 18, 18, 0.5);
        border-color: rgba(18, 18, 18, 0.16);
    }
}
.ssv-card--featured {
    background: var(--ss-charcoal);
    border-color: var(--ss-charcoal);
    color: var(--ss-cream);
}
.ssv-card--featured .ssv-name,
.ssv-card--featured .ssv-price { color: var(--ss-cream); }
.ssv-card--featured .ssv-tag,
.ssv-card--featured .ssv-li,
.ssv-card--featured .ssv-desc { color: rgba(255, 255, 255, 0.72); }
.ssv-card--featured .ssv-sep { background: rgba(255, 255, 255, 0.16); }
.ssv-card--featured .ssv-check { color: var(--ss-rose); }

.ssv-badge {
    position: absolute;
    top: -13px; left: 50%;
    transform: translateX(-50%);
    background: var(--ss-rose);
    color: var(--ss-charcoal);
    font-family: var(--ss-ui);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .16em;
    padding: .45rem 1rem;
    border-radius: 9999px;
    white-space: nowrap;
}
.ssv-chip {
    width: 52px; height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ssv-chip svg { width: 24px; height: 24px; color: #fff; }
.ssv-chip--basic  { background: linear-gradient(135deg, #decdc1, #b79e8d); }
.ssv-chip--glow   { background: linear-gradient(135deg, #fde9dd, #ecc3a6); }
.ssv-chip--clear  { background: linear-gradient(135deg, #e7d4ff, #c4a1f7); }
.ssv-chip--youth  { background: linear-gradient(135deg, #c99f87, #8b5a3f); }
.ssv-chip--hydro  { background: linear-gradient(135deg, #dfd0fa, #a98be9); }
.ssv-chip--custom { background: linear-gradient(135deg, #f3e0d0, #d2a987); }
.ssv-name {
    margin: 1.3rem 0 0;
    font-family: var(--ss-ui);
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ss-charcoal);
}
.ssv-tag {
    margin: .5rem 0 0;
    font-family: var(--ss-serif);
    font-style: normal;
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--ss-stone);
}
.ssv-sep { height: 1px; background: rgba(18, 18, 18, 0.1); margin: 1.4rem 0; }
.ssv-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.ssv-li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ss-stone);
}
.ssv-check { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--ss-rose); }
.ssv-desc {
    margin: 1.1rem 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ss-stone);
}
.ssv-price {
    margin-top: auto;
    padding-top: 1.6rem;
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: 2.4rem;
    line-height: 1.1;
    color: var(--ss-charcoal);
}
.ssv-price small {
    display: block;
    font-family: var(--ss-ui);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: .2rem;
}
.ssv-price small s { text-decoration-thickness: 1px; }
.ssv-card .ssv-btn { margin-top: 1.3rem; }
.vouchers__foot {
    text-align: center;
    margin: 2rem 0 0;
    padding-inline: var(--ss-gutter);
    font-size: 14px;
    color: var(--ss-stone);
}

/* --- Split sections (infusions teaser) ---------------------------- */
.split {
    display: grid;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .split { grid-template-columns: 1fr 1fr; }
}
.split__text {
    padding: 4rem var(--ss-gutter);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
@media (min-width: 1024px) {
    .split__text { padding: 6rem 4rem; }
}
.split__text h2 { margin: 0 0 1.25rem; max-width: 18ch; }
.split__text .btn { margin-top: 1.75rem; }
.split__media { position: relative; min-height: 420px; }
@media (min-width: 1024px) { .split__media { min-height: 640px; } }
.split__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
@media (max-width: 1023.98px) {
    .split--media-first .split__media { order: -1; }
}

/* --- Reviews ------------------------------------------------------ */
.reviews { background: var(--ss-sand); padding: var(--ss-section-y) 0; }
.reviews__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.reviews__head h2 { margin: 0; }

.reviews-carousel__track { list-style: none; margin: 0; padding: 0; }
.reviews-carousel__slide { display: none; }
.reviews-carousel__slide[data-active] { display: block; animation: fadeIn .6s var(--ss-ease); }
.reviews-carousel .review { margin: 0; max-width: 60ch; }
.review__stars {
    display: inline-flex;
    gap: .25rem;
    color: var(--ss-rose);
    font-size: 14px;
    letter-spacing: .1em;
    margin: 0 0 1.5rem;
}
.reviews-carousel blockquote {
    margin: 0 0 2rem;
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: clamp(1.6rem, 1.2rem + 1.8vw, 3rem);
    line-height: 1.28;
    letter-spacing: -0.01em;
}
.reviews-carousel blockquote::before { content: "\201E"; }
.reviews-carousel blockquote::after  { content: "\201C"; }
.review__author { font-family: var(--ss-serif); font-weight: 300; font-size: 1.25rem; }
.review__meta {
    font-family: var(--ss-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--ss-stone);
    margin-left: .75rem;
}
.reviews-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 2.5rem;
}
.reviews-carousel__nav { display: flex; gap: .75rem; }
.reviews-carousel__dots { display: flex; align-items: center; gap: .45rem; }
.reviews-carousel__dot {
    width: 6px; height: 6px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: rgba(18, 18, 18, 0.2);
    cursor: pointer;
    transition: width .45s var(--ss-ease), background .45s var(--ss-ease);
}
.reviews-carousel__dot:hover { background: rgba(18, 18, 18, 0.4); }
.reviews-carousel__dot.is-active { width: 40px; background: var(--ss-rose); }

/* --- Membership (dark photo bg) ----------------------------------- */
.membership {
    position: relative;
    overflow: hidden;
    background: var(--ss-charcoal);
    color: var(--ss-cream);
    padding: var(--ss-section-y-big) 0;
}
.membership__bg { position: absolute; inset: 0; }
.membership__bg img { width: 100%; height: 100%; object-fit: cover; }
.membership__bg::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 30%, rgba(18, 18, 18, 0.5)),
        linear-gradient(to bottom, rgba(18, 18, 18, 0.78), rgba(18, 18, 18, 0.55) 50%, rgba(18, 18, 18, 0.88));
}
.membership__inner {
    position: relative;
    z-index: 1;
    max-width: 42rem;
    margin-inline: auto;
    padding-inline: var(--ss-gutter);
    text-align: center;
}
.membership__badge {
    display: inline-block;
    font-family: var(--ss-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--ss-rose);
    border: 1px solid var(--ss-cream-25);
    border-radius: 9999px;
    padding: .45rem 1.1rem;
    margin-bottom: 1.75rem;
}
.membership h2 { color: var(--ss-cream); }
.membership .lead { margin-inline: auto; }
.membership__form {
    margin-top: 2.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}
.membership__form input[type="email"] {
    flex: 1 1 260px;
    max-width: 340px;
    font-family: var(--ss-sans);
    font-size: 14.5px;
    color: var(--ss-charcoal);
    background: var(--ss-cream);
    border: 1px solid rgba(18, 18, 18, 0.16);
    border-radius: var(--ss-r-soft);
    padding: .9rem 1rem;
}
.membership__form input[type="email"]:focus {
    outline: none;
    border-color: var(--ss-rose);
    box-shadow: 0 0 0 3px rgba(201, 155, 142, 0.18);
}
.membership__form .ssb-submit { width: auto; padding-inline: 1.75rem; }
.membership__label { position: absolute; left: -9999px; }

/* --- Instagram gallery (preserve Oliver's layout exactly) --------- */
.ig { padding: 6.5rem 0; }
@media (min-width: 1024px) { .ig { padding: 8rem 0; } }
.ig__board {
    max-width: var(--ss-wrap-carousel);
    margin-inline: auto;
    padding-inline: var(--ss-gutter);
    display: flex;
    align-items: center;
    gap: 1.1rem;
}
.ig__wing {
    flex: 1;
    display: flex;
    gap: 1.1rem;
}
.ig__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.ig__col--down { margin-top: 3.6rem; }
.ig__tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--ss-r-tile);
    overflow: hidden;
    background: var(--ss-sand);
}
.ig__tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ss-ease);
}
.ig__tile::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(18, 18, 18, 0);
    transition: background .5s var(--ss-ease);
}
.ig__tile svg {
    position: absolute;
    top: 50%; left: 50%;
    width: 30px; height: 30px;
    color: #fff;
    z-index: 1;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.8);
    transition: opacity .45s var(--ss-ease), transform .45s var(--ss-ease);
}
@media (hover: hover) {
    .ig__tile:hover img { transform: scale(1.07); }
    .ig__tile:hover::after { background: rgba(18, 18, 18, 0.26); }
    .ig__tile:hover svg { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.ig__card {
    flex: 0 0 340px;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
    background: #f3e6ff;
    border-radius: var(--ss-r-igcard);
    padding: 3.2rem 2rem;
    box-shadow: 0 34px 70px -50px rgba(18, 18, 18, 0.5);
}
.ig__card .eyebrow { margin: 0; letter-spacing: .2em; color: var(--ss-stone); }
.ig__title {
    font-size: clamp(2rem, 1.8rem + .8vw, 2.5rem);
    line-height: 1.1;
    margin: 0;
}
.ig__handle {
    font-size: 13px;
    color: var(--ss-stone);
    text-decoration: none;
    transition: color .3s;
}
.ig__handle:hover { color: var(--ss-rose); }

/* Mobile: custom treatment (Oliver's flat collapse was rejected in review).
   The card leads full-width, then all six tiles form a tight two-column grid
   whose right column is shifted down (.ig__tile--shift set in markup), so the
   staggered masonry character survives the stack with no voids. */
@media (max-width: 879.98px) {
    .ig { padding-bottom: 8.5rem; }          /* room for the shifted column */
    .ig__board {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .8rem;
    }
    .ig__wing, .ig__col { display: contents; }
    .ig__col--down { margin-top: 0; }
    .ig__card {
        grid-column: 1 / -1;
        order: -1;
        width: 100%;
        margin-bottom: 1.2rem;
        padding: 2.6rem 1.5rem;
    }
    .ig__tile--shift { transform: translateY(2.2rem); }
}

/* ------------------------------------------------------------------ */
/* 8. Forms (.form-*)                                                  */
/* ------------------------------------------------------------------ */

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
}
@media (min-width: 560px) {
    .form-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
    .form-grid .form-field--full { grid-column: 1 / -1; }
}
.form-field label {
    display: block;
    font-family: var(--ss-ui);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ss-stone);
    margin-bottom: .45rem;
}
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    font-family: var(--ss-sans);
    font-size: 14.5px;
    color: var(--ss-charcoal);
    background: #fff;
    border: 1px solid rgba(18, 18, 18, 0.16);
    border-radius: var(--ss-r-soft);
    padding: .78rem .9rem;
}
.form-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b635c' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.4rem;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--ss-rose);
    box-shadow: 0 0 0 3px rgba(201, 155, 142, 0.18);
}
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] { border-color: var(--ss-error); }
.form-consent {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: 12.5px;
    color: var(--ss-stone);
}
.form-consent input[type="checkbox"] {
    width: 16px; height: 16px;
    margin-top: .15rem;
    accent-color: var(--ss-rose);
}
.form-consent a { text-decoration: underline; }
.form-consent a:hover { color: var(--ss-rose); }
.form-card {
    background: var(--ss-cream);
    border: 1px solid var(--ss-card-border);
    border-radius: var(--ss-r-btn-lg);
    padding: 2rem;
    box-shadow: 0 30px 70px -50px rgba(18, 18, 18, 0.5);
}
@media (min-width: 1024px) { .form-card { padding: 2.6rem; } }

/* ------------------------------------------------------------------ */
/* 9. Stats strip (shared component; 900px breakpoint per DESIGN.md)   */
/* ------------------------------------------------------------------ */

.stats { background: var(--ss-linen); padding: 4.5rem 0; }
@media (min-width: 1024px) { .stats { padding: 6rem 0; } }
.stats__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 1.5rem;
    text-align: center;
}
.stats__num {
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: 3rem;
    line-height: 1;
    margin: 0 0 .5rem;
}
@media (min-width: 1024px) { .stats__num { font-size: 3.6rem; } }
.stats__num em { font-style: normal; color: var(--ss-rose); }
.stats__label {
    font-family: var(--ss-ui);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--ss-stone);
    margin: 0;
}
@media (min-width: 900px) {
    .stats__grid { grid-template-columns: repeat(4, 1fr); }
    .stats__item { position: relative; }
    .stats__item + .stats__item::before {
        content: "";
        position: absolute;
        left: 0; top: 50%;
        transform: translateY(-50%);
        width: 1px; height: 54px;
        background: var(--ss-hairline);
    }
}

/* ------------------------------------------------------------------ */
/* 10. Footer                                                          */
/* ------------------------------------------------------------------ */

.site-footer {
    background: var(--ss-charcoal);
    color: var(--ss-cream);
}
.site-footer__inner {
    max-width: var(--ss-wrap);
    margin-inline: auto;
    padding: 5rem var(--ss-gutter) 3rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem 2rem;
}
@media (min-width: 640px) {
    .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
    .site-footer__inner {
        grid-template-columns: 4fr 2.5fr 2.5fr 2.5fr 3fr;
        padding: 6rem var(--ss-gutter-lg) 3rem;
    }
}
.site-footer a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color .3s; }
.site-footer a:hover { color: var(--ss-rose); }
.site-footer h2 {
    font-family: var(--ss-ui);
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .28em;
    color: var(--ss-cream-40);
    margin: 0 0 1.5rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { padding: 0; margin: 0 0 .75rem; }
.site-footer__col a { font-size: 14px; }
.site-footer__brand img { height: 30px; width: auto; }
.site-footer__brand p { margin: .35rem 0; font-size: 14px; color: rgba(255, 255, 255, 0.8); }
.site-footer__brand p:first-of-type { margin-top: 1.5rem; }
.site-footer__brand .muted { color: rgba(255, 255, 255, 0.6); }
.site-footer__social a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    font-size: 14px;
}
.site-footer__hours li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 14px;
    padding-bottom: .75rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--ss-cream-10);
}
.site-footer__hours span:last-child { color: rgba(255, 255, 255, 0.6); }
.site-footer__bar {
    max-width: var(--ss-wrap);
    margin-inline: auto;
    padding: 2rem var(--ss-gutter) 2.5rem;
    border-top: 1px solid var(--ss-cream-10);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    font-size: 12px;
    color: var(--ss-cream-40);
}
@media (min-width: 1024px) {
    .site-footer__bar { padding-inline: var(--ss-gutter-lg); }
}
.site-footer__bar p { margin: 0; }
.site-footer__bar a { color: var(--ss-cream-40); }
.site-footer__bar a:hover { color: rgba(255, 255, 255, 0.8); }

/* ------------------------------------------------------------------ */
/* 11. Motion                                                          */
/* ------------------------------------------------------------------ */

@keyframes kenburns {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes scrolldot {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50%      { transform: translateY(10px); opacity: .35; }
}

/* Film grain (authored SVG noise tile, not from the reference file) */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 45;
    pointer-events: none;
    opacity: .045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
}

/* Custom cursor (element injected by JS on pointer:fine devices) */
.ss-cursor {
    position: fixed;
    top: 0; left: 0;
    z-index: 99;
    width: 28px; height: 28px;
    border: 1px solid rgba(201, 155, 142, 0.8);
    border-radius: 9999px;
    pointer-events: none;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
    transition: width .3s var(--ss-ease), height .3s var(--ss-ease),
                background .3s var(--ss-ease), border-color .3s var(--ss-ease);
    will-change: left, top;
}
.ss-cursor.is-active {
    width: 48px; height: 48px;
    background: rgba(201, 155, 142, 0.25);
    border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .js [data-reveal], .js [data-stagger] > * { opacity: 1 !important; transform: none !important; }
    .js .hero .fade-up, .js .phero .fade-up { opacity: 1 !important; animation: none !important; }
    body::after { display: none; }
    .ss-cursor { display: none !important; }
    .btn:hover, .ssv-btn:hover, .ssb-submit:hover { transform: none; box-shadow: none; }
}

/* ------------------------------------------------------------------ */
/* 12. Inner pages (design system applied to every non-homepage route) */
/* ------------------------------------------------------------------ */
/* Oliver's reference is a homepage one-pager + modals; it has no inner
   page layouts. These pages are therefore COMPOSED from the approved
   design system (prose typography, editorial media, cards, forms) so
   they read as native to the homepage. Content is untouched. */

.container { max-width: 1100px; margin-inline: auto; padding-inline: var(--ss-gutter); }
@media (min-width: 1024px) { .container { padding-inline: var(--ss-gutter-lg); } }

/* The header is fixed and solid on inner pages; give the content clearance. */
body:not(.has-hero) main { padding-top: 108px; }

/* Every inner article gets consistent vertical rhythm. */
.procedure, .infuze, .infuze-hub, .faq, .kariera, .legal, .contact, .error-page {
    padding-top: clamp(2.25rem, 1.4rem + 3vw, 4rem);
    padding-bottom: var(--ss-section-y);
}

/* --- Inner-page display headings ---------------------------------- */
.prose h1,
.infuze-hub > .container > h1,
.contact__head h1 {
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin: 0 0 1.3rem;
}
.prose h1 { max-width: 20ch; }
.legal .prose h1, .error-page .prose h1 { max-width: none; }

/* --- Prose reading column ----------------------------------------- */
.prose { max-width: 46rem; }
.legal .prose { max-width: 52rem; }
.prose > :first-child { margin-top: 0; }

.prose h2 {
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin: 2.6rem 0 1rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--ss-hairline);
}
.prose > h2:first-child,
.prose h1 + h2 { border-top: 0; padding-top: 0; margin-top: 1.6rem; }
.prose h3 {
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.25;
    margin: 1.9rem 0 .6rem;
}
.prose p { font-size: 1rem; line-height: 1.75; color: rgba(18, 18, 18, 0.85); margin: 0 0 1.1rem; }
.prose p strong { color: var(--ss-charcoal); font-weight: 500; }
.prose ul { list-style: none; margin: 0 0 1.3rem; padding: 0; }
.prose li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: .55rem;
    line-height: 1.7;
    color: rgba(18, 18, 18, 0.85);
}
.prose li::before {
    content: "";
    position: absolute;
    left: .1rem; top: .62em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ss-rose);
}
.prose a:not(.btn) {
    color: var(--ss-charcoal);
    text-decoration: underline;
    text-decoration-color: var(--ss-rose);
    text-underline-offset: 3px;
    transition: color .3s;
}
.prose a:not(.btn):hover { color: var(--ss-rose); }
.prose .btn { margin-top: .4rem; }

/* --- Inline hero image in prose ----------------------------------- */
.procedure__hero { margin: 2.4rem 0; }
.procedure__hero img {
    width: 100%; height: auto;
    display: block;
    border-radius: var(--ss-r-soft);
}

/* --- Before/after result gallery ---------------------------------- */
/* Collages keep their natural ratio (never cropped - they carry baked
   before/after labels). */
.ba-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .8rem;
    margin: 1.6rem 0 2.4rem;
    align-items: start;
}
@media (min-width: 640px) {
    .ba-gallery { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
}
.ba-gallery img {
    width: 100%; height: auto;
    border-radius: var(--ss-r-soft);
    background: var(--ss-sand);
}

/* --- Video embed -------------------------------------------------- */
.video__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 1.6rem 0;
    border-radius: var(--ss-r-soft);
    overflow: hidden;
    background: var(--ss-charcoal);
}
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Inline review card ------------------------------------------- */
.review {
    margin: 2.6rem 0;
    padding: 2rem 2.2rem;
    background: var(--ss-sand);
    border-radius: var(--ss-r-btn-lg);
}
.review blockquote {
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem);
    line-height: 1.42;
    color: var(--ss-charcoal);
    margin: 0 0 1.2rem;
}
.review figcaption {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    font-family: var(--ss-serif);
    font-size: 1.1rem;
    color: var(--ss-charcoal);
}
.review figcaption span[aria-label] { color: var(--ss-rose); font-size: .9rem; letter-spacing: 2px; }

/* --- Price table (laserova-epilace) ------------------------------- */
.price-table {
    width: 100%;
    max-width: 460px;
    border-collapse: collapse;
    margin: 1.4rem 0 2.4rem;
}
.price-table th {
    font-family: var(--ss-ui);
    font-size: 10.5px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ss-stone);
    text-align: left;
    padding: 0 .2rem .85rem;
    border-bottom: 1px solid var(--ss-charcoal);
}
.price-table td {
    padding: .9rem .2rem;
    border-bottom: 1px solid var(--ss-hairline);
    font-size: 1rem;
    color: rgba(18, 18, 18, 0.85);
}
.price-table td:last-child {
    text-align: right;
    font-family: var(--ss-serif);
    color: var(--ss-charcoal);
    white-space: nowrap;
}
.price-table th:last-child { text-align: right; }
.price-was { text-decoration: line-through; color: var(--ss-stone); margin-right: .5rem; }

/* --- Infusion hub (vitaminove-infuze) uses the shared card grid --- */
.infuze-hub .procedure__hero { margin: 0 0 2.6rem; }
.infuze-hub .proc-grid { margin-bottom: 2.5rem; }
.infuze-hub .proc-card { --accent: var(--ss-rose); --tint: var(--ss-rose-soft); }
.infuze-hub > .container > p:last-child { text-align: center; }

/* --- Career (kariera) --------------------------------------------- */
.positions { display: grid; gap: 1.2rem; margin-top: 1.8rem; }
.position {
    padding: 1.8rem 1.9rem;
    background: var(--ss-cream);
    border: 1px solid var(--ss-card-border);
    border-radius: var(--ss-r-card);
    transition: border-color .45s var(--ss-ease), box-shadow .45s var(--ss-ease);
}
@media (hover: hover) and (pointer: fine) {
    .position:hover {
        border-color: rgba(18, 18, 18, 0.16);
        box-shadow: 0 30px 60px -45px rgba(18, 18, 18, 0.45);
    }
}
.position h3 { margin: 0 0 .7rem; font-size: 1.35rem; }
.position p { color: rgba(18, 18, 18, 0.82); line-height: 1.7; }

/* --- Contact page ------------------------------------------------- */
.contact__head { max-width: 46rem; margin-bottom: 2rem; }
.contact__head .lead { margin-top: 1rem; }
.contact .procedure__hero { margin: 0 0 3rem; }
.contact .procedure__hero img { aspect-ratio: 21 / 9; object-fit: cover; }

.contact__grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
    .contact__grid { grid-template-columns: 0.85fr 1.15fr; gap: 3.5rem; align-items: start; }
}

.contact__info h2 { font-size: 1.3rem; margin: 0 0 1rem; }
.contact__info h2:not(:first-child) { margin-top: 2.2rem; }
.contact__info dl { margin: 0; }
.contact__info dt {
    font-family: var(--ss-ui);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ss-stone);
    margin-top: 1rem;
}
.contact__info dt:first-child { margin-top: 0; }
.contact__info dd { margin: .25rem 0 0; font-size: 1.05rem; }
.contact__info dd a,
.contact__info .social a { text-decoration: none; transition: color .3s; }
.contact__info dd a:hover,
.contact__info .social a:hover { color: var(--ss-rose); }
.contact__info p { color: rgba(18, 18, 18, 0.82); line-height: 1.7; }
.hours { list-style: none; padding: 0; margin: 0; max-width: 320px; }
.hours li {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--ss-hairline);
}
.hours li span:first-child { color: var(--ss-stone); }
.social { list-style: none; padding: 0; margin: 0; }

.contact__form {
    background: var(--ss-cream);
    border: 1px solid var(--ss-card-border);
    border-radius: var(--ss-r-btn-lg);
    padding: 2rem;
    box-shadow: 0 30px 70px -50px rgba(18, 18, 18, 0.5);
}
@media (min-width: 1024px) { .contact__form { padding: 2.6rem; } }
.contact__form > h2 { font-size: 1.5rem; margin: 0 0 .35rem; }
.contact__form > p { color: var(--ss-stone); font-size: 14px; margin: 0 0 1.5rem; }

.form-flash {
    padding: .9rem 1.1rem;
    border-radius: var(--ss-r-soft);
    font-size: 14px;
    margin: 0 0 1.3rem;
}
.form-flash--success { background: rgba(111, 131, 89, 0.14); color: #45542f; }
.form-flash--error { background: rgba(192, 71, 59, 0.12); color: var(--ss-error); }
.form-flash--info { background: var(--ss-sand); color: var(--ss-charcoal); }

.contact-form p { margin: 0 0 1.1rem; }
.contact-form p.hp { margin: 0; }
.contact-form > p > label {
    display: block;
    font-family: var(--ss-ui);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ss-stone);
    margin-bottom: .45rem;
}
.contact-form input:not([type="checkbox"]),
.contact-form select,
.contact-form textarea {
    width: 100%;
    font-family: var(--ss-sans);
    font-size: 14.5px;
    color: var(--ss-charcoal);
    background: #fff;
    border: 1px solid rgba(18, 18, 18, 0.16);
    border-radius: var(--ss-r-soft);
    padding: .78rem .9rem;
}
.contact-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b635c' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.4rem;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form :is(input, select, textarea):focus {
    outline: none;
    border-color: var(--ss-rose);
    box-shadow: 0 0 0 3px rgba(201, 155, 142, 0.18);
}
.contact-form .consent { margin-bottom: 1.4rem; }
.contact-form .consent label {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-family: var(--ss-sans);
    font-size: 12.5px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ss-stone);
    line-height: 1.5;
    margin: 0;
}
.contact-form .consent input[type="checkbox"] {
    flex: none;
    width: 16px; height: 16px;
    margin-top: .1rem;
    accent-color: var(--ss-rose);
}
.contact-form .consent a { text-decoration: underline; }
.contact-form .consent a:hover { color: var(--ss-rose); }
.contact-form button.btn { width: 100%; }

.contact__map { margin-top: 3.2rem; }
.contact__map h2 { font-size: 1.3rem; margin: 0 0 1rem; }
.contact__map iframe {
    display: block;
    width: 100%;
    border-radius: var(--ss-r-soft);
    filter: grayscale(0.25) contrast(1.02);
    transition: filter .5s var(--ss-ease);
}
.contact__map:hover iframe { filter: none; }
.contact__map-link {
    margin-top: .8rem;
    font-family: var(--ss-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
}
.contact__map-link a { text-decoration: none; color: var(--ss-rose); }
.contact__map-link a:hover { text-decoration: underline; }

/* --- 404 error page ----------------------------------------------- */
.error-page { text-align: center; padding-top: clamp(3.5rem, 2.5rem + 5vw, 6.5rem); }
.error-page .prose { max-width: 40rem; margin-inline: auto; }
.error-page .prose h1 { max-width: none; }
.error-page .prose h2 { border-top: 0; padding-top: 0; margin-top: 2.4rem; }
.error-page .prose ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.6rem;
    justify-content: center;
}
.error-page .prose li { padding-left: 0; }
.error-page .prose li::before { display: none; }
.error-page .prose li a { text-decoration: none; }
.error-page .prose li a:hover { color: var(--ss-rose); }
.error-page .btn { margin: .3rem; }

/* ------------------------------------------------------------------ */
/* 13. Procedure detail template (Phase 2.2 inner-page rebuild)        */
/* ------------------------------------------------------------------ */
/* Extends the homepage language onto the detail pages: charcoal split
   hero with the per-procedure accent bar, hairline editorial rows with
   an eyebrow rail (live ALL-CAPS headings render as Novatica eyebrows,
   sentence-case live headings as Fraunces displays), sand results band,
   charcoal video band, big-quote review, dark photo booking finale.
   Spec: DESIGN.md "Inner pages: procedure detail template". */

/* The hero band starts flush under the fixed header. */
body.has-band main { padding-top: 0; }

/* --- Hero: charcoal split ----------------------------------------- */
.phero {
    position: relative;
    background: var(--ss-charcoal);
    color: var(--ss-cream);
    padding-top: 76px;                     /* fixed header clearance */
    overflow: hidden;
}
.phero__grid { display: grid; }
@media (min-width: 1024px) {
    .phero__grid {
        grid-template-columns: 1.05fr 0.95fr;
        min-height: min(82vh, 780px);
    }
}
.phero__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 3.25rem var(--ss-gutter) 3.75rem;
}
@media (min-width: 1024px) {
    .phero__text { padding: 4.5rem 4rem; }
}
.phero__title {
    margin: 0;
    font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--ss-cream);
}
.phero__lead { margin-top: 1.6rem; max-width: 34rem; }
.phero__lead p {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 .9rem;
}
.phero__lead p:last-child { margin-bottom: 0; }
.phero__meta {
    width: 100%;
    margin: 2.2rem 0 0;
    padding-top: 1.6rem;
    border-top: 1px solid var(--ss-cream-10);
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem 3rem;
}
.phero__fact { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.phero__fact-label {
    font-family: var(--ss-ui);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ss-cream-40);
}
.phero__fact-value {
    margin: 0;
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: 1.45rem;
    line-height: 1.25;
}
.phero__fact--wide .phero__fact-value { font-size: 1.05rem; line-height: 1.5; max-width: 30ch; }
.phero__cta { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem; }
/* The booking CTA inverts to cream on the dark bands (the "dark CTA moment"). */
.phero .btn--book, .pbook .btn--book {
    background: var(--ss-cream);
    border-color: var(--ss-cream);
    color: var(--ss-charcoal);
}
.phero .btn--book:hover, .pbook .btn--book:hover {
    background: var(--ss-rose);
    border-color: var(--ss-rose);
    color: var(--ss-charcoal);
}
.phero__media { position: relative; min-height: 72vw; }
@media (min-width: 640px)  { .phero__media { min-height: 440px; } }
@media (min-width: 1024px) { .phero__media { min-height: 0; } }
.phero__media img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.phero__media::after {                     /* per-procedure accent bar */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--accent, var(--ss-rose)), var(--tint, var(--ss-rose-soft)));
}
.js .phero .fade-up { opacity: 0; animation: fadeUp 1.1s var(--ss-ease) forwards; }

/* --- Content: hairline editorial rows with eyebrow rail ------------ */
.pbody { padding: clamp(3.25rem, 2.2rem + 3vw, 5.25rem) 0 clamp(4rem, 3rem + 3vw, 6rem); }
.psec {
    display: grid;
    gap: 1.1rem 3rem;
    padding: 2.6rem 0;
    border-top: 1px solid var(--ss-hairline);
}
.pbody .psec:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 900px) {
    .psec { grid-template-columns: 280px minmax(0, 1fr); padding: 3.2rem 0; }
    .psec--cards { grid-template-columns: 1fr; }
}
.psec__label { margin: 0 0 .4rem; letter-spacing: .2em; line-height: 1.8; }
.psec__body > :first-child { margin-top: 0; }
.psec__body p {
    font-size: 1.02rem;
    line-height: 1.8;
    color: rgba(18, 18, 18, 0.85);
    margin: 0 0 1.1rem;
    max-width: 62ch;
}
.psec__body p:last-child { margin-bottom: 0; }
.psec__list { list-style: none; margin: 0; padding: 0; }
.psec__list li {
    padding: .95rem .1rem;
    border-bottom: 1px solid var(--ss-hairline);
    font-size: 15px;
    line-height: 1.55;
    color: rgba(18, 18, 18, 0.82);
}
@media (min-width: 640px) {
    .psec__list--cols {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 2.5rem;
    }
}
.psec__list + p { margin-top: 1.5rem; }
.psec__steps { list-style: none; margin: 0; padding: 0; }
.psec__steps li {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--ss-hairline);
}
.psec__steps li:last-child { border-bottom: 0; }
.psec__stepnum {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid rgba(18, 18, 18, 0.25);
    border-radius: 9999px;
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: .95rem;
    color: var(--ss-charcoal);
}
.psec__steptext {
    padding-top: .6rem;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(18, 18, 18, 0.82);
}
.psec__steps + p { margin-top: 1.5rem; }
.pcards { display: grid; gap: 1.4rem; }
@media (min-width: 760px) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem; } }
.pcard {
    background: var(--ss-linen);
    border-radius: var(--ss-r-card);
    padding: 2rem 2.1rem;
}
.pcard .eyebrow { margin-bottom: .9rem; }
.pcard p { margin: 0; font-size: 15px; line-height: 1.75; color: rgba(18, 18, 18, 0.85); }

/* --- Full-width content bands (results, video, review) ------------- */
.pband { padding: var(--ss-section-y) 0; }
.pband__head { max-width: 720px; margin-bottom: 2.4rem; }
.pband__head .lead { margin-top: 1rem; }
.pband__title {
    margin: 0;
    font-size: clamp(2rem, 1.55rem + 1.9vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
}
.pband--gallery { background: var(--ss-sand); }
.pgallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    align-items: start;
}
@media (min-width: 760px) {
    .pgallery { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem; }
}
.pgallery img {
    width: 100%; height: auto;             /* natural ratio, never cropped */
    border-radius: var(--ss-r-tile);
    background: var(--ss-linen);
}
.pband--video { background: var(--ss-charcoal); color: var(--ss-cream); }
.pband--video .pband__title { color: var(--ss-cream); }
.pvideos { display: grid; gap: 1.4rem; }
@media (min-width: 900px) {
    .pvideos--multi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem; }
}
.pvideos .video__frame { margin: 0; border-radius: var(--ss-r-tile); }
.pquote { display: grid; gap: 1.8rem 4rem; }
@media (min-width: 900px) {
    .pquote { grid-template-columns: minmax(240px, 0.7fr) 1.3fr; align-items: start; }
}
.pquote .pband__title { font-size: clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem); }
.pquote__fig { margin: 0; max-width: 60ch; }
.pquote__stars {
    margin: 0 0 1.4rem;
    color: var(--ss-rose);
    font-size: 15px;
    letter-spacing: .22em;
}
.pquote blockquote {
    margin: 0 0 1.6rem;
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2.1rem);
    line-height: 1.35;
    letter-spacing: -0.01em;
}
.pquote blockquote::before { content: "\201E"; }
.pquote blockquote::after  { content: "\201C"; }
.pquote figcaption { font-family: var(--ss-serif); font-weight: 300; font-size: 1.15rem; }

/* --- Booking finale: dark photo moment (membership overlay recipe) - */
.pbook {
    position: relative;
    overflow: hidden;
    background: var(--ss-charcoal);
    color: var(--ss-cream);
    padding: var(--ss-section-y-big) 0;
    text-align: center;
}
.pbook__bg { position: absolute; inset: 0; }
.pbook__bg img { width: 100%; height: 100%; object-fit: cover; }
.pbook__bg::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 30%, rgba(18, 18, 18, 0.5)),
        linear-gradient(to bottom, rgba(18, 18, 18, 0.78), rgba(18, 18, 18, 0.55) 50%, rgba(18, 18, 18, 0.88));
}
.pbook__inner {
    position: relative;
    z-index: 1;
    max-width: 42rem;
    margin-inline: auto;
    padding-inline: var(--ss-gutter);
}
.pbook__inner h2 { color: var(--ss-cream); margin: 0 0 .8rem; }
.pbook__price {
    margin: 0 0 2rem;
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.85);
}

/* --- Roll-out additions (Phase 2.2b) ------------------------------- */

/* Hero subtitle (Jalupro's live subheading) */
.phero__sub {
    margin: .9rem 0 0;
    font-family: var(--ss-serif);
    font-weight: 300;
    font-style: normal;
    font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
    line-height: 1.3;
    color: var(--ss-rose-soft);
}

/* Single-collage gallery (mezoterapie) keeps a sane width */
.pgallery--single { grid-template-columns: minmax(0, 680px); }

/* Pricing band (laserova-epilace, Q11 table) */
.pband--pricing { background: var(--ss-linen); }
.pband--pricing .price-table { max-width: 560px; margin: 0; }

/* Infusion hub: numbered hairline rows instead of six identical photo cards */
.ilist { list-style: none; margin: 0; padding: 0; }
.ilist li { border-bottom: 1px solid var(--ss-hairline); }
.ilist li:first-child { border-top: 1px solid var(--ss-hairline); }
.ilist__row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 1rem 1.4rem;
    align-items: start;
    padding: 1.6rem 0;
    text-decoration: none;
    transition: background .45s var(--ss-ease);
}
@media (min-width: 900px) {
    .ilist__row {
        grid-template-columns: 42px minmax(0, 340px) minmax(0, 1fr) auto;
        align-items: center;
        gap: 2rem;
        padding: 1.9rem 0;
    }
}
.ilist__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid rgba(18, 18, 18, 0.25);
    border-radius: 9999px;
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: .95rem;
    color: var(--ss-charcoal);
    transition: all .45s var(--ss-ease);
}
.ilist__name {
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: clamp(1.45rem, 1.3rem + .7vw, 1.9rem);
    line-height: 1.1;
    color: var(--ss-charcoal);
}
.ilist__desc {
    grid-column: 2;
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ss-stone);
    max-width: 52ch;
}
@media (min-width: 900px) { .ilist__desc { grid-column: auto; } }
.ilist__go {
    grid-column: 2;
    justify-self: start;
    font-family: var(--ss-ui);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--ss-charcoal);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: gap .45s var(--ss-ease), color .45s var(--ss-ease);
}
@media (min-width: 900px) { .ilist__go { grid-column: auto; justify-self: end; } }
@media (hover: hover) {
    .ilist__row:hover .ilist__num { background: var(--ss-charcoal); border-color: var(--ss-charcoal); color: var(--ss-cream); }
    .ilist__row:hover .ilist__go { gap: .9rem; color: var(--ss-rose); }
}

/* FAQ (co-musite-vedet): numbered question rows + chapter heads */
.pchapter { margin: 0 0 2.6rem; }
.pchapter .pband__title { max-width: 22ch; }
.pchapter__media { margin: 1.8rem 0 0; }
.pchapter__media img {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border-radius: var(--ss-r-tile);
}
.pfaq { list-style: none; margin: 0 0 4.5rem; padding: 0; }
.pfaq:last-child { margin-bottom: 0; }
.pfaq > li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 1.1rem 1.6rem;
    padding: 1.9rem 0;
    border-top: 1px solid var(--ss-hairline);
}
.pfaq__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid rgba(18, 18, 18, 0.25);
    border-radius: 9999px;
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: .95rem;
    color: var(--ss-charcoal);
}
.pfaq__q {
    margin: 0 0 .7rem;
    font-family: var(--ss-serif);
    font-weight: 300;
    font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
    line-height: 1.25;
    padding-top: .5rem;
}
.pfaq__a p { font-size: 1rem; line-height: 1.75; color: rgba(18, 18, 18, 0.85); margin: 0 0 1rem; max-width: 62ch; }
.pfaq__a p:last-child { margin-bottom: 0; }
.pfaq__a ul { list-style: none; margin: 0; padding: 0; }
.pfaq__a li {
    position: relative;
    padding: .55rem 0 .55rem 1.5rem;
    line-height: 1.65;
    color: rgba(18, 18, 18, 0.85);
    font-size: 15px;
}
.pfaq__a li::before {
    content: "";
    position: absolute;
    left: .1rem; top: 1.15em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ss-rose);
}

/* Career: positions as a 3-up card row on desktop */
.positions--grid { grid-template-columns: 1fr; }
@media (min-width: 900px) { .positions--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; } }
.positions--grid .position { display: flex; flex-direction: column; }
.positions--grid .position .btn { margin-top: auto; align-self: flex-start; }
.position .btn {
    padding: .68rem 1.15rem;
    font-size: 11.5px;
    letter-spacing: .16em;
}
.position > p { margin: 0 0 1.4rem; }

/* Contact page on the band system: hero replaces the old page head */
body.has-band .contact { padding-top: clamp(2.5rem, 1.8rem + 2.5vw, 4rem); }

h1 em, h2 em, h3 em, .lead em { font-style: normal; }


/* ===== Design polish dle skinskin_Manual.pdf ===== */
/* Hlavicka: navigace v BC Novatica (primarni hlas); tlacitka zustavaji Geist Mono */
.site-nav__item > a { font-family: var(--ss-sans); letter-spacing: .09em; }
.site-nav__submenu a { font-family: var(--ss-sans); }
.mobile-menu__sub a { font-family: var(--ss-sans); }
/* Vysledky: manualove parovani Chocolate + Nude Glow */
.ba { background: #5e3425; }
.ba .eyebrow, .ba .accent-italic { color: #fde9dd; }
/* Mikro-typografie: labely a tlacitka v Medium rezu */
.eyebrow { font-weight: 500; }
.btn { font-weight: 500; }
/* Brand detaily */
::selection { background: #9a6cf0; color: #ffffff; }
:focus-visible { outline: 2px solid #9a6cf0; outline-offset: 2px; }


/* Zarovnani polozek navigace na stred (dropdown toggle vychyloval baseline) */
.site-nav__item { display: inline-flex; align-items: center; }
.site-nav__item--dropdown { display: inline-flex; align-items: center; }
.site-nav__dropdown-toggle { display: inline-flex; align-items: center; }

/* ===== Laser epilation page (.epilace-page): center the video intro headline
   and the whole cenik block - title, table, booking button (client request).
   Scoped so the shared video band on other procedure pages is unaffected.
   (Re-applied after the v3 design merge - Oliver's export predates it.) ===== */
.epilace-page .pband--video .pband__head,
.epilace-page .pband--pricing .pband__head {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.epilace-page .pband--pricing .price-table { margin-left: auto; margin-right: auto; }
.epilace-page .pband--pricing .pband__cta { margin-top: 2.4rem; text-align: center; }

/* ===== Press logos as inline SVG (Oliver v3) ===== */
.press__logos svg{height:26px;opacity:.75;transition:opacity .3s}.press__logos svg:hover{opacity:1}

/* ===== Letni menu homepage section (Oliver v3, seasonal) ===== */
    #letni-menu{ background:#fde9dd; }
    #letni-menu .ssm-wrap{ max-width:1180px; margin:0 auto; padding:5.5rem 1.5rem; }
    @media(min-width:1024px){ #letni-menu .ssm-wrap{ padding:7rem 3rem; } }
    #letni-menu .ssm-eyebrow{ font-family:'Geist Mono',monospace; text-transform:uppercase; letter-spacing:.2em; font-size:11px; color:#9a6cf0; }
    #letni-menu .ssm-title{ font-family:'Novatica','Inter',system-ui,sans-serif; font-weight:400; line-height:1.05; color:#121212; font-size:2.2rem; margin:.9rem 0 0; }
    @media(min-width:1024px){ #letni-menu .ssm-title{ font-size:3rem; } }
    #letni-menu .ssm-title span{ color:#9a6cf0; }
    #letni-menu .ssm-lead{ margin-top:1.2rem; max-width:44ch; color:#6f584a; font-size:15px; line-height:1.7; }
    #letni-menu .ssm-list{ margin-top:2.4rem; border-top:1px solid rgba(18,18,18,.12); }
    #letni-menu a.ssm-row{ display:flex; align-items:center; gap:1.4rem; padding:1.3rem .4rem; border-bottom:1px solid rgba(18,18,18,.12); text-decoration:none; transition:padding-left .45s cubic-bezier(.22,1,.36,1); }
    @media(min-width:768px){ #letni-menu a.ssm-row:hover{ padding-left:1.4rem; } }
    #letni-menu .ssm-num{ font-family:'Geist Mono',monospace; font-size:.8rem; color:#9a6cf0; flex:none; }
    #letni-menu .ssm-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.3rem; }
    @media(min-width:900px){ #letni-menu .ssm-main{ flex-direction:row; align-items:baseline; gap:1.4rem; } }
    #letni-menu .ssm-name{ font-family:'Novatica','Inter',system-ui,sans-serif; font-size:1.2rem; line-height:1.15; color:#121212; white-space:nowrap; transition:color .35s; }
    #letni-menu a.ssm-row:hover .ssm-name{ color:#9a6cf0; }
    #letni-menu .ssm-benefit{ font-size:.9rem; line-height:1.55; color:#6f584a; }
    #letni-menu .ssm-arrow{ font-family:'Geist Mono',monospace; color:#6f584a; flex:none; transition:transform .35s, color .35s; }
    #letni-menu a.ssm-row:hover .ssm-arrow{ transform:translateX(6px); color:#9a6cf0; }
    #letni-menu .ssm-foot{ margin-top:2.2rem; display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
    #letni-menu .ssm-note{ font-family:'Geist Mono',monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:#6f584a; }

/* ===== Google reviews: badge + card grid + show-more (Oliver v3) ===== */
  .grev-badge{ display:flex; align-items:center; gap:1rem; margin-top:1.6rem; }
  .grev-g{ width:34px; height:34px; flex:none; }
  .grev-score{ display:flex; flex-direction:column; }
  .grev-score strong{ font-family:var(--ss-sans); font-weight:500; font-size:1.5rem; line-height:1; color:var(--ss-charcoal); }
  .grev-stars{ color:#FBBC04; font-size:.85rem; letter-spacing:.12em; }
  .grev-meta{ font-family:var(--ss-sans); font-size:.8rem; line-height:1.45; color:var(--ss-stone); }
  .grev-meta a{ color:var(--ss-charcoal); text-decoration:underline; text-underline-offset:2px; }
  .grev-meta a:hover{ color:var(--ss-rose); }
  .review__stars{ color:#FBBC04 !important; letter-spacing:.12em; }
  .review figcaption{ display:flex; align-items:center; gap:.7rem; }
  .review__avatar{ width:38px; height:38px; border-radius:999px; background:#f3e6ff; color:#9a6cf0; display:inline-flex; align-items:center; justify-content:center; font-family:var(--ss-sans); font-weight:500; font-size:1rem; flex:none; }
  .review__meta{ display:inline-flex; align-items:center; gap:.35rem; }
  .review__meta .grev-g{ width:13px; height:13px; }
.grevm{ display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:2.8rem; align-items:start; }
@media(min-width:700px){ .grevm{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1080px){ .grevm{ grid-template-columns:repeat(3,1fr); } }
.grevm-card{ background:#ffffff; border:1px solid rgba(18,18,18,.09); border-radius:18px; padding:1.6rem 1.7rem; margin:0; transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1), border-color .4s; }
.grevm-card:hover{ transform:translateY(-6px); box-shadow:0 26px 48px -34px rgba(18,18,18,.30); border-color:rgba(18,18,18,.16); }
.grevm-card:hover .grevm-stars{ letter-spacing:.2em; }
.grevm-stars{ transition:letter-spacing .45s cubic-bezier(.22,1,.36,1); }
.grevm-stars{ margin:0; color:#FBBC04; letter-spacing:.14em; font-size:.9rem; }
.grevm-card blockquote{ margin:0.9rem 0 1.2rem; font-family:var(--ss-sans); font-size:14.5px; line-height:1.7; color:var(--ss-charcoal); }
.grevm-card figcaption{ display:flex; align-items:center; gap:.75rem; }
.grevm-av{ width:40px; height:40px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--ss-sans); font-weight:500; flex:none; }
.grevm-who{ display:flex; flex-direction:column; line-height:1.3; flex:1; min-width:0; }
.grevm-who strong{ font-family:var(--ss-sans); font-weight:500; font-size:.92rem; color:var(--ss-charcoal); }
.grevm-date{ font-size:.78rem; color:var(--ss-stone); }
.grevm-card .grev-g{ width:16px; height:16px; flex:none; }
.grevm-cta{ margin-top:1.6rem; display:flex; justify-content:center; }
.grevm-more{ display:none; }
.grevm.show-all .grevm-more{ display:block; animation:grevmIn .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes grevmIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.grevm-morebtn{ font-family:'Geist Mono','SFMono-Regular',Menlo,monospace; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; padding:.9rem 1.5rem; border-radius:5px; cursor:pointer; background:transparent; color:var(--ss-charcoal); border:1px solid rgba(18,18,18,.25); transition:background .3s,color .3s,border-color .3s; }
.grevm-morebtn:hover{ background:var(--ss-charcoal); color:#ffffff; border-color:var(--ss-charcoal); }
.grevm-cta--more{ margin-top:.4rem; }

/* ===== Cookie consent banner (Oliver v3) ===== */
    #ss-cookies{ position:fixed; left:1.2rem; bottom:1.2rem; z-index:120; max-width:400px; background:#121212; color:#ffffff;
      border-radius:14px; padding:1.4rem 1.5rem; box-shadow:0 30px 70px -30px rgba(0,0,0,.6); font-family:'Novatica','Inter',system-ui,sans-serif; }
    #ss-cookies p{ margin:0; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.85); }
    #ss-cookies a{ color:#c9aef7; text-decoration:underline; text-underline-offset:2px; }
    #ss-cookies .row{ display:flex; gap:.7rem; margin-top:1.1rem; flex-wrap:wrap; }
    #ss-cookies button{ font-family:'Geist Mono','SFMono-Regular',Menlo,monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
      padding:.75rem 1.1rem; border-radius:5px; cursor:pointer; border:0; transition:background .3s,color .3s; }
    #ss-cookies .ok{ background:#ffffff; color:#121212; }
    #ss-cookies .ok:hover{ background:#9a6cf0; color:#ffffff; }
    #ss-cookies .min{ background:transparent; color:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.3); }
    #ss-cookies .min:hover{ color:#ffffff; border-color:#ffffff; }
    @media(max-width:520px){ #ss-cookies{ left:.8rem; right:.8rem; bottom:.8rem; max-width:none; } }