/* ==========================================================================
   SOS Touch — Option B "Dark Botanical"
   Desktop layout. Mobile breakpoints are not written yet.
   ========================================================================== */

:root {
    --bg: #121710;
    --bg-deep: #0C100A;
    --bg-panel: #0F140D;

    --line: #232C1D;
    --line-soft: #2C3626;
    --line-dotted: #3A4433;

    --cream: #F0E9D8;
    --text-strong: #BFC4B3;
    --text: #A8B09B;
    --muted: #7E8874;
    --dim: #55604A;

    --brass: #C2A35B;
    --brass-bright: #DDBE74;

    --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sans: 'Jost', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --page: 1280px;
    --gutter: 60px;
    --section-y: 70px;

    /* Shared inset for the full-bleed chrome (top bar, header) and the hero
       copy, so the logo, the nav and the hero headline all start on the same
       vertical line at every desktop width. Scales with the viewport but stops
       growing at 168px, which keeps ultra-wide screens from opening up a void
       on the left. */
    --frame-inset: clamp(60px, 6.2vw, 168px);

    /* The first screen is exactly: top bar + header + hero + trust strip.
       Both of these are pinned below (.topbar/.header heights and
       .trust min-height) so the hero can subtract them from the viewport and
       land the trust strip flush on the fold, with nothing of the section
       below peeking in. Update them together or the sum drifts. */
    --chrome-h: 118px;   /* 40 + 76 + the two 1px borders */
    --trust-h: 109px;
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-weight: 300;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: var(--serif);
    color: var(--cream);
    font-weight: 500;
    line-height: 1.1;
}

a { color: var(--brass); text-decoration: none; transition: color 0.2s ease; }
a:hover, a:focus-visible { color: var(--brass-bright); }

ul { list-style: none; }
img { max-width: 100%; display: block; }

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

.container { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.text-center { text-align: center; }

.kicker {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--brass);
}

.section__title { font-size: 52px; }

/* --- Buttons -------------------------------------------------------------- */

.btn {
    display: inline-block;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 16px 32px;
    border: 1px solid var(--brass);
    background: transparent;
    color: var(--brass);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:hover, .btn:focus-visible { background: var(--brass); color: var(--bg); }

.btn--primary { background: var(--brass); color: var(--bg); font-weight: 600; }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--brass-bright); border-color: var(--brass-bright); color: var(--bg); }

.btn--quiet { border: 0; border-bottom: 1px solid var(--dim); color: var(--cream); padding: 16px 4px; }
.btn--quiet:hover, .btn--quiet:focus-visible { background: transparent; color: var(--brass); border-bottom-color: var(--brass); }

.btn--full-width { display: block; width: 100%; text-align: center; }

/* --- Top bar -------------------------------------------------------------- */

.topbar { background: var(--bg-deep); border-bottom: 1px solid var(--line); }

.topbar__inner {
    padding: 0 var(--frame-inset);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar__meta {
    display: flex;
    align-items: center;
    gap: 26px;
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.topbar__meta a { color: var(--brass); }

.language-switcher { display: flex; align-items: center; gap: 4px; }

.language-switcher__btn {
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 4px 8px;
    transition: color 0.2s ease;
}

.language-switcher__btn:hover { color: var(--text-strong); }
.language-switcher__btn--active { color: var(--cream); font-weight: 500; }

/* --- Header --------------------------------------------------------------- */

.header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(18, 23, 16, 0.94);
    backdrop-filter: blur(8px);
    transition: border-color 0.25s ease;
    border-bottom: 1px solid transparent;
}

.header.scrolled { border-bottom-color: var(--line); }

.header__container {
    padding: 0 var(--frame-inset);
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__logo { display: flex; align-items: center; gap: 12px; }
.header__logo img { width: 28px; }
.header__logo span {
    font-family: var(--serif);
    font-size: 22px;
    letter-spacing: 0.2em;
    color: var(--cream);
}

.header__actions { display: flex; align-items: center; gap: 34px; }

.nav__list { display: flex; align-items: center; gap: 30px; }

.nav__link {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text);
    padding: 4px 0;
    border-bottom: 1px solid transparent;
}

.nav__link:hover, .nav__link:focus-visible { color: var(--cream); border-bottom-color: var(--brass); }

.header__toggle { display: none; background: none; border: 0; cursor: pointer; }
.header__toggle span { display: block; width: 22px; height: 1px; background: var(--cream); margin: 5px 0; }

/* --- Hero ----------------------------------------------------------------- */

.hero {
    display: grid;
    /* The copy column carries the type, so give it the slightly narrower half
       and let the photograph take the wider one. minmax(0, …) stops long words
       from forcing the grid wider than the viewport. */
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
    /* Fill exactly what is left of the first screen once the chrome and the
       trust strip have taken their share. No upper cap: a cap would end the
       hero early on a tall monitor and let the next section show above the
       fold, which is the thing this is here to prevent. */
    min-height: max(520px, calc(100vh - var(--chrome-h) - var(--trust-h)));
    border-top: 1px solid var(--line);
}

.hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Left inset matches the header, so the headline starts on the same line
       as the logo. The right inset only has to hold the copy off the seam. */
    padding: clamp(56px, 5vw, 88px) clamp(32px, 3vw, 72px)
             clamp(56px, 5vw, 88px) var(--frame-inset);
    width: 100%;
    min-width: 0;
}

/* The eyebrow carries the service and the district; the h1 carries the service
   and the city; the tagline carries the mood. Keeping them as three elements
   means the h1 can stay short and searchable without losing the line the page
   is actually sold on. */
.hero__eyebrow { margin-bottom: 22px; }

.hero__title {
    font-size: clamp(2.8rem, 4vw, 5.3rem);
    line-height: 1.02;
    letter-spacing: -0.012em;
    /* Short and deliberately not full-width: at 2560 the copy column is wide
       enough that an unconstrained headline would run to a single thin line. */
    max-width: min(100%, 16ch);
    text-wrap: balance;
}

.hero__tagline {
    font-family: var(--serif);
    font-size: clamp(1.25rem, 1.4vw, 1.55rem);
    line-height: 1.35;
    color: var(--brass);
    max-width: min(100%, 36ch);
    margin-top: 20px;
}

.hero__subtitle {
    font-size: clamp(16px, 1.05vw, 18px);
    line-height: 1.8;
    color: var(--text);
    /* ~55 characters a line: comfortable, and short enough that the block
       never crowds the photograph. */
    max-width: min(100%, 55ch);
    margin-top: 20px;
    margin-bottom: 38px;
}

.hero__cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.hero__media { position: relative; overflow: hidden; }
.hero__media img {
    /* Taken out of flow: a percentage height against an auto-height parent
       resolves to auto, so the portrait would render at its natural ratio and
       stretch the grid row (1350px at 2560px wide). Pinning it to the box lets
       object-fit do the work and leaves the hero's height to min-height. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The source is square (2048x2048) while this column is landscape, so the
       crop is vertical. 20% keeps headroom above the face at 2560px, where the
       visible band is tightest, and still holds the shirt logo in frame. */
    object-position: 50% 20%;
    filter: saturate(0.82) contrast(1.04) brightness(0.92);
}
.hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18,23,16,0.92) 0%, rgba(18,23,16,0.28) 38%, rgba(18,23,16,0) 100%);
}

/* --- Hero on narrow screens -----------------------------------------------
   NOTE: dormant for now. The page still ships <meta name="viewport"
   content="width=1280">, so a phone renders a scaled-down desktop and no
   width query below 1280 ever matches. These rules are written so the hero is
   ready the moment the page opts into device-width rendering; flipping that
   meta tag also exposes every other section, none of which has a mobile pass
   yet, so it is deliberately not flipped here.
   Scoped to .hero only -- no shared variable is redefined, so nothing outside
   this section changes. */
@media (max-width: 900px) {
    .hero {
        grid-template-columns: minmax(0, 1fr);
        /* the copy is first in the DOM, so stacking already reads text first */
        min-height: 0;
    }

    .hero__content {
        padding: clamp(34px, 9vw, 56px) clamp(20px, 6vw, 40px) clamp(26px, 7vw, 42px);
    }

    .hero__media {
        /* the image is absolutely positioned, so the box needs its own height */
        height: clamp(300px, 76vw, 440px);
    }

    .hero__media::after {
        /* the desktop scrim wipes left-to-right; stacked it has to fall from
           the top instead, or it lands across the face */
        background: linear-gradient(180deg, rgba(18, 23, 16, 0.55) 0%, rgba(18, 23, 16, 0) 45%);
    }

    .hero__media img { object-position: 50% 16%; }

    .hero__eyebrow { margin-bottom: 15px; font-size: 10px; letter-spacing: 0.2em; }
    .hero__title { max-width: 100%; font-size: clamp(2rem, 8.4vw, 2.9rem); }
    .hero__tagline { max-width: 100%; margin-top: 15px; }
    .hero__subtitle { max-width: 100%; margin-top: 15px; margin-bottom: 28px; }

    .hero__cta { gap: 14px; }

    /* 48px of height so the buttons stay a comfortable target */
    .hero__cta .btn {
        display: inline-flex;
        align-items: center;
        min-height: 48px;
        padding: 14px 26px;
    }

    .hero__cta .btn--quiet { padding-left: 4px; padding-right: 4px; }
}

/* --- Trust strip ---------------------------------------------------------- */

.trust {
    /* Pinned so the hero's first-screen arithmetic above stays exact. */
    min-height: var(--trust-h);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg-panel);
}

.trust__item { padding: 28px 40px; }
.trust__item + .trust__item { border-left: 1px solid var(--line); }
.trust__item:first-child { padding-left: var(--gutter); }
.trust__item:last-child { padding-right: var(--gutter); }

.trust__title { font-family: var(--serif); font-size: 25px; color: var(--cream); line-height: 1.2; margin-bottom: 3px; }
.trust__note { font-size: 12px; letter-spacing: 0.08em; color: var(--muted); line-height: 1.5; }

/* --- Treatments ----------------------------------------------------------- */

/* Variant 2: one banner per category and a typographic list, instead of a
   card-with-photograph per treatment. Thirteen treatments as thirteen big
   cards ran to several screens and needed thirteen photographs that do not
   exist. */
.offer__container {
    width: min(100% - 2 * var(--frame-inset), 1900px);
    margin-inline: auto;
}

.offer__tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 38px;
}

.offer__tab {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 13px 30px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.offer__tab:hover { color: var(--cream); }
.offer__tab--active { color: var(--brass); border-bottom-color: var(--brass); font-weight: 500; }

.offer__panel { margin-top: clamp(34px, 2.6vw, 54px); }
.offer__panel[hidden] { display: none; }

/* --- Category banner ------------------------------------------------------ */

.category-banner {
    margin: 0;
    width: 100%;
    /* A set height rather than aspect-ratio: it keeps the banner from becoming
       a 630px slab at 1900px wide, and reserves the box before the image
       arrives, so nothing shifts on load. */
    height: clamp(280px, 24vw, 520px);
    overflow: hidden;
    border: 1px solid var(--line);
}

.category-banner__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.85) brightness(0.92);
}

/* The source strips are ~2.6:1 while this box is ~3.6:1, so cover trims the
   height. Each is pulled up to keep the faces in frame: the child's face in
   the middle children panel and the man's face in the middle men panel both
   sit high in their photographs. */
[data-offer-panel="women"] .category-banner__image { object-position: 50% 48%; }
[data-offer-panel="kids"] .category-banner__image { object-position: 50% 34%; }
[data-offer-panel="men"] .category-banner__image { object-position: 50% 38%; }

.category-banner--pending {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(194, 163, 91, 0.05) 0%, rgba(194, 163, 91, 0) 60%),
        linear-gradient(160deg, #151B12 0%, #0C100A 100%);
}

.category-banner--pending img { width: 62px; height: auto; opacity: 0.3; }

.category-banner__pending {
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dim);
}

/* --- Category heading ----------------------------------------------------- */

.category-head {
    text-align: center;
    margin: clamp(28px, 2.2vw, 42px) auto 0 auto;
    max-width: 720px;
}

.category-head__title { font-size: clamp(30px, 2.2vw, 40px); }

.category-head__note {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
}

/* --- Treatment list ------------------------------------------------------- */

.treatment-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* Held to a readable measure: the leader line would run for 1900px
       otherwise, and the eye loses the row between name and price. */
    max-width: 1080px;
    margin: clamp(26px, 2vw, 40px) auto 0 auto;
    border-top: 1px solid var(--line);
}

/* Two columns only where a single one would leave the page very long. Rows
   still fill left-to-right, so the price order stays as listed. */
@media (min-width: 2100px) {
    .treatment-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(56px, 4vw, 104px);
        max-width: 1900px;
    }
}

.treatment-list__item {
    padding: clamp(20px, 1.4vw, 28px) 0;
    border-bottom: 1px solid var(--line);
    transition: border-color 0.25s ease;
}

.treatment-list__item:hover { border-bottom-color: var(--line-soft); }

.treatment-list__heading {
    display: flex;
    align-items: baseline;
    gap: 0;
}

.treatment-list__name {
    font-size: clamp(20px, 1.25vw, 26px);
    /* min-width:0 lets a long name wrap instead of shoving the price out of
       the row -- the price is a flex sibling, never absolutely positioned. */
    min-width: 0;
}

.treatment-list__leader {
    flex: 1 1 auto;
    min-width: 24px;
    border-bottom: 1px dotted var(--line-dotted);
    margin: 0 14px 7px 14px;
}

.treatment-list__price {
    font-family: var(--serif);
    font-size: clamp(20px, 1.25vw, 26px);
    color: var(--brass);
    white-space: nowrap;
    flex: 0 0 auto;
}

.treatment-list__duration {
    margin-top: 7px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}

.treatment-list__description {
    margin-top: 9px;
    max-width: 68ch;
    font-size: 15px;
    line-height: 1.75;
    color: var(--text);
}

/* --- Shared booking button ------------------------------------------------ */

.offer__cta-row {
    display: flex;
    justify-content: center;
    margin-top: clamp(32px, 2.4vw, 48px);
}

.offer__duration {
    max-width: 760px;
    margin: clamp(30px, 2.2vw, 44px) auto 0 auto;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--muted);
}

/* --- Vouchers ------------------------------------------------------------- */

.offer-card--voucher {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-top: clamp(38px, 2.8vw, 58px);
    padding: 30px 36px;
    border: 1px solid var(--line-soft);
    background: var(--bg-panel);
}

.offer-card--voucher .offer-card__title { font-size: 28px; margin-bottom: 6px; }
.offer-card--voucher .offer-card__description { font-size: 14px; line-height: 1.7; color: var(--text); }
.offer-card--voucher .btn { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    .offer__tab, .treatment-list__item { transition: none; }
}

/* --- About ---------------------------------------------------------------- */

.about { display: grid; grid-template-columns: 0.9fr 1.1fr; border-top: 1px solid var(--line); }

.about__aside {
    background: var(--bg-panel);
    padding: 68px 56px 68px var(--gutter);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about__aside img { width: 62px; margin-bottom: 28px; opacity: 0.9; }
.about__aside .section__title { font-size: 44px; line-height: 1.08; margin-top: 16px; }

.about__content {
    padding: 68px var(--gutter) 68px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about__content p { font-size: 16px; line-height: 1.85; color: var(--text-strong); margin-bottom: 22px; }

.about__signature { font-family: var(--serif); font-size: 26px; color: var(--brass); }
.about__role { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* --- Carousels (reviews + facebook) --------------------------------------- */

.reviews { background: var(--bg-deep); border-top: 1px solid var(--line); }
.blog { border-top: 1px solid var(--line); }

.reviews-carousel, .facebook-carousel { margin-top: 36px; }

.reviews-carousel__track,
.facebook-carousel__track {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
}

.review-slide, .facebook-slide {
    background: var(--cream);
    padding: 12px;
    flex: 0 0 auto;
    max-width: 100%;
    overflow: hidden;
}

.review-slide iframe, .facebook-slide iframe { display: block; max-width: 100%; border: 0; }

.reviews-carousel__controls,
.facebook-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

.reviews-carousel__btn, .facebook-carousel__btn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-soft);
    background: transparent;
    color: var(--text);
    font-size: 16px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.reviews-carousel__btn:hover, .facebook-carousel__btn:hover { border-color: var(--brass); color: var(--brass); }

.reviews__cta { margin-top: 36px; }

/* --- Blog ----------------------------------------------------------------- */

.blog-section { border-top: 1px solid var(--line); }

.blog-section__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; }
.blog-section__head .section__title { font-size: 44px; }

.blog-section__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    align-items: start;
}

.blog-card { background: var(--bg); padding: 34px 30px; height: 100%; }
.blog-card__index { font-family: var(--serif); font-size: 34px; color: var(--line-soft); line-height: 1; margin-bottom: 18px; }
.blog-card__title { font-size: 23px; line-height: 1.25; margin-bottom: 12px; }
.blog-card__excerpt { font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.blog-card__body { font-size: 14px; line-height: 1.8; color: var(--text-strong); }
.blog-card__body[hidden] { display: none; }
.blog-card__toggle { margin-top: 20px; padding: 11px 22px; font-size: 11px; }

/* --- Booking -------------------------------------------------------------- */

.booking { background: var(--bg-panel); border-top: 1px solid var(--line); }
.booking__intro { font-size: 16px; color: var(--text); max-width: 620px; margin: 18px auto 0 auto; }

.booking__embed {
    margin: 40px auto 0 auto;
    max-width: 900px;
    border: 1px solid var(--line-soft);
    background: var(--cream);
    padding: 12px;
}

.booking__embed iframe { display: block; width: 100%; height: 520px; border: 0; }

.booking__note { font-size: 13.5px; color: var(--muted); margin-top: 22px; }
.booking__link { margin-top: 20px; }

/* --- Contact -------------------------------------------------------------- */

.contact { border-top: 1px solid var(--line); }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin-top: 48px; }

.contact__notice {
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 14px;
    border-left: 2px solid var(--brass);
    background: var(--bg-panel);
    color: var(--text-strong);
}
.contact__notice[hidden] { display: none; }
.contact__notice--success { border-left-color: #8FA86A; }
.contact__notice--error { border-left-color: #C2705B; }

.form-group { margin-bottom: 22px; }

.form-group label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 9px;
}

.contact__form input,
.contact__form textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    color: var(--cream);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 300;
    padding: 9px 0;
    transition: border-color 0.2s ease;
}

.contact__form input:focus,
.contact__form textarea:focus {
    outline: none;
    border-bottom-color: var(--brass);
}

.contact__form textarea { resize: vertical; min-height: 96px; line-height: 1.7; }

.contact__info h3 { font-family: var(--serif); font-size: 30px; margin-bottom: 12px; }
.contact__info p { font-size: 15px; color: var(--text); margin-bottom: 24px; }
.contact__info-title { margin-top: 40px; }

.contact__list { margin-top: 20px; display: flex; flex-direction: column; gap: 15px; }
.contact__list li { display: flex; align-items: center; gap: 13px; }
.contact__list svg { flex: 0 0 auto; }
.contact__list a { font-size: 15px; color: var(--text-strong); }
.contact__list a:hover { color: var(--brass); }

.contact__socials { display: flex; align-items: center; gap: 14px; margin-top: 20px; }

.contact__socials a {
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease;
}

.contact__socials a:hover { border-color: var(--brass); }
.contact__socials svg { width: 17px; height: 17px; }

.contact__map { margin-top: 52px; border: 1px solid var(--line-soft); }
.contact__map iframe { display: block; width: 100%; height: 340px; border: 0; filter: grayscale(0.35) contrast(1.05); }

/* --- Footer --------------------------------------------------------------- */

.footer { background: var(--bg-deep); border-top: 1px solid var(--line); }

.footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 0;
}

.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__logo { width: 26px; opacity: 0.85; }
.footer__text p { font-size: 11.5px; letter-spacing: 0.08em; color: var(--muted); }
.footer__socials { display: flex; align-items: center; gap: 18px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}

/* SOS touch: women-first catalogue and responsive layout. */
:root { --text: #b6bdab; --muted: #9ba58f; --section-y: 88px; }
section[id] { scroll-margin-top: 90px; }
.hero__title { max-width: 14ch; }
.btn { border-radius: 2px; }
.header__actions { gap: 22px; }
.nav__list { gap: 22px; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 100; padding: 12px; background: var(--cream); color: var(--bg); }
.skip-link:focus { top: 12px; }
.section-intro { max-width: 630px; margin: 22px auto 0; font-size: 17px; }
.vouchers { background: #1b2418; border-block: 1px solid var(--line-soft); }
.vouchers .section__title { margin-top: 16px; }
.voucher-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; margin-top: 44px; }
.voucher-preview { position: relative; display: block; width: 100%; border: 0; background: var(--cream); cursor: zoom-in; overflow: hidden; }
.voucher-preview img { width: 100%; height: auto; transition: transform .4s; }
.voucher-preview:hover img { transform: scale(1.025); }
.voucher-sample { position: absolute; bottom: 10px; left: 10px; background: #121710e8; color: #f0e9d8; font: 9px var(--sans); letter-spacing: .1em; padding: 6px 9px; }
.voucher-card__caption { display: flex; align-items: center; gap: 13px; margin: 22px 0 12px; }
.voucher-card__caption h3 { font-size: 25px; }
.voucher-number { color: var(--brass); font-size: 11px; letter-spacing: .1em; }
.voucher-open { border: 0; border-bottom: 1px solid var(--brass); padding: 3px 0; background: none; color: var(--brass); font: 13px var(--sans); cursor: pointer; }
.voucher-note { max-width: 790px; margin: 40px auto 25px; text-align: center; font-size: 14px; }
.voucher-dialog { margin: auto; width: min(1100px,94vw); max-height: 94dvh; overflow: auto; padding: 20px; background: var(--bg); color: var(--cream); border: 1px solid var(--brass); }
.voucher-dialog::backdrop { background: #000c; backdrop-filter: blur(5px); }
.voucher-dialog__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.voucher-dialog__bar h2 { font-size: 26px; }
.voucher-dialog button { background: none; border: 1px solid var(--brass); color: var(--cream); padding: 12px; cursor: pointer; }
.voucher-dialog img { width: 100%; height: auto; }
.voucher-dialog p { text-align: center; margin-top: 12px; letter-spacing: .1em; font-size: 11px; }
body:has(dialog[open]) { overflow: hidden; }
.faq { background: #171e14; }
.faq .container { max-width: 1000px; }
.faq-list { margin-top: 36px; }
.faq details { border-bottom: 1px solid var(--line-soft); padding: 24px 0; }
.faq summary { cursor: pointer; font-family: var(--serif); color: var(--cream); font-size: 25px; }
.faq details p { max-width: 760px; margin-top: 16px; }
.contact__form-note { font-size: 14px; margin-bottom: 28px; }
.booking { background: radial-gradient(ellipse at top,#293021, var(--bg-panel) 75%); }
.booking__note { max-width: 680px; margin-inline: auto; }
.review-slide, .facebook-slide { min-width: 0; flex: 0 1 524px; }
@media (max-width: 1150px) {
 :root { --frame-inset: 32px; --gutter: 32px; }
 .header__toggle { display: block; padding: 12px; }
 .header__actions > .btn { padding: 12px 16px; }
 .nav { display: none; position: absolute; top: 76px; left: 0; right: 0; background: #121710; border-bottom: 1px solid var(--line-soft); padding: 24px var(--gutter); }
 .nav.nav-active { display: block; }
 .nav__list { flex-wrap: wrap; gap: 22px; }
 .topbar__meta { font-size: 10px; gap: 12px; }
 .language-switcher__btn { font-size: 10px; }
 .contact__grid { gap: 40px; }
 .voucher-grid { gap: 18px; }
 .voucher-card__caption h3 { font-size: 22px; }
 .trust__title { font-size: 21px; }
}
@media (max-width: 900px) {
 .hero__title { max-width: 18ch; }
 .hero__media { height: clamp(340px,65vw,560px); }
 .trust { grid-template-columns: 1fr; }
 .trust__item { padding: 20px var(--gutter); }
 .trust__item + .trust__item { border-left: 0; border-top: 1px solid var(--line); }
 .about { grid-template-columns: 1fr; }
 .about__aside { padding: 48px var(--gutter) 20px; }
 .about__content { padding: 24px var(--gutter) 48px; }
 .blog-section__grid { grid-template-columns: 1fr; }
 .contact__grid { grid-template-columns: 1fr; }
 .voucher-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; gap: 36px; }
 .voucher-card__caption h3 { font-size: 28px; }
 .offer-card--voucher { flex-direction: column; align-items: flex-start; gap: 24px; }
 .section__title, .blog-section__head .section__title { font-size: clamp(34px,6vw,48px); }
 .topbar__meta > span { display: none; }
}
@media (max-width: 600px) {
 :root { --frame-inset: 20px; --gutter: 20px; --section-y: 58px; }
 .topbar__inner { padding-inline: 12px; }
 .language-switcher__btn { padding: 8px 5px; letter-spacing: .02em; }
 .header__logo span { font-size: 18px; letter-spacing: .12em; }
 .header__logo { gap: 8px; }
 .header__logo img { width: 24px; }
 .header__actions { gap: 6px; }
 .header__actions > .btn { font-size: 9px; padding: 10px; letter-spacing: .04em; }
 .header__toggle { padding: 10px 4px 10px 10px; }
 .nav__list { flex-direction: column; align-items: flex-start; }
 .nav__link { display: block; padding: 8px 0; }
 .category-banner { height: 180px; }
 .offer__tab { padding: 13px 18px; font-size: 10px; }
 .treatment-list__name { font-size: 22px; }
 .treatment-list__leader { min-width: 10px; margin-inline: 8px; }
 .treatment-list__price { font-size: 22px; }
 .offer-card--voucher { padding: 25px; }
 .contact__list a { overflow-wrap: anywhere; }
 .footer__inner { align-items: flex-start; }
 .footer__socials { gap: 14px; }
 .voucher-dialog { padding: 12px; }
 .voucher-dialog__bar h2 { font-size: 21px; }
}