/* ==========================================================================
   Fonts — self-hosted, no request leaves the origin (GDPR + speed).
   latin-ext carries the Romanian ă/î/ș/ț.
   Jost  : all UI and headings (geometric sans, holds up in wide uppercase)
   Fraunces: the wordmark (roman) and the script eyebrows (italic)
   ========================================================================== */
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("../fonts/jost-latin-ext-Fd9ExEZ.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("../fonts/jost-latin-kGYPfft.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/fraunces-600-latin-ext-V0b3c2l.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/fraunces-600-latin-H1dAKSW.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/fraunces-italic-latin-ext-7vh2SOP.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/fraunces-italic-latin-zEFQW-K.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
    --navy-950: #04182a;
    --navy-900: #072436;
    --navy-800: #0b3147;
    --navy-700: #114156;
    --teal-700: #0d5468;
    --teal-500: #17798f;
    --teal-300: #7fc4d2;

    --gold-300: #eddcb4;
    --gold-400: #e0c68f;
    --gold: #cfa961;
    --gold-600: #b48f47;

    --cream: #f8f6f1;
    --cream-200: #efeae0;
    --cream-300: #e2d9c8;

    --ink: #12222c;
    --muted: #63757f;
    --muted-light: rgba(255, 255, 255, .72);
    --white: #fff;

    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(4, 24, 42, .06), 0 2px 10px rgba(4, 24, 42, .06);
    --shadow: 0 6px 18px rgba(4, 24, 42, .12), 0 18px 44px rgba(4, 24, 42, .1);
    --shadow-lg: 0 18px 40px rgba(4, 24, 42, .22), 0 40px 90px rgba(4, 24, 42, .18);

    --font-body: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Fraunces', ui-serif, Georgia, serif;

    --container: 1240px;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --header-h: 92px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16.5px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--teal-700); text-underline-offset: 2px; }
a:hover { color: var(--gold-600); }

h1, h2, h3, h4 {
    font-family: var(--font-body);
    font-weight: 500;
    /* Uppercase Romanian needs room under the baseline: Ș and Ț hang a comma
       below it, which collided with the following line at 1.12. */
    line-height: 1.2;
    margin: 0 0 .5em;
    color: var(--navy-900);
}
h1 { font-size: clamp(2.1rem, 5.4vw, 4.2rem); text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }

p { margin: 0 0 1rem; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy-900); color: var(--white); padding: .75rem 1.25rem; z-index: 300; }
.skip-link:focus { left: 0; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Type helpers
   ========================================================================== */
/* Gold italic serif line that sits above the big uppercase headings. */
.script {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    color: var(--gold-600);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: .1rem;
}
.script--on-dark { color: var(--gold-400); }

.eyebrow {
    display: block;
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold-400);
    margin-bottom: 1.1rem;
}

.lead { font-size: clamp(1.02rem, 1.6vw, 1.15rem); color: var(--muted); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    font: inherit;
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1;
    padding: 1.05rem 1.9rem;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.btn__arrow {
    display: grid;
    place-items: center;
    width: 1.55rem; height: 1.55rem;
    border-radius: 50%;
    border: 1px solid currentColor;
    flex: none;
}
.btn__arrow svg { width: .7rem; height: .7rem; fill: none; stroke: currentColor; stroke-width: 2; }

/* Gold outline on a photo — the hero's primary call to action. */
.btn--gold-outline { border-color: var(--gold); color: var(--gold-300); background: rgba(7, 36, 54, .25); }
.btn--gold-outline:hover { background: var(--gold); color: var(--navy-900); border-color: var(--gold); }

.btn--gold { background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); color: var(--navy-900); }
.btn--gold:hover { background: linear-gradient(135deg, var(--gold-300), var(--gold)); color: var(--navy-950); }

.btn--navy { background: var(--navy-900); color: var(--white); }
.btn--navy:hover { background: var(--navy-800); color: var(--white); }

.btn--outline { border-color: var(--cream-300); color: var(--navy-900); background: transparent; }
.btn--outline:hover { border-color: var(--gold); color: var(--gold-600); }

.btn--outline-light { border-color: rgba(255, 255, 255, .4); color: var(--white); background: transparent; }
.btn--outline-light:hover { background: var(--white); color: var(--navy-900); }

.btn--sm { padding: .75rem 1.35rem; font-size: .76rem; }
.btn--block { width: 100%; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 120;
    background: var(--navy-900);
    transition: background-color .3s ease, box-shadow .3s ease;
}
/* On the homepage the header floats over the hero photo until you scroll. */
.site-header--overlay { background: transparent; }
.site-header--overlay.is-stuck { background: rgba(7, 36, 54, .96); backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(4, 24, 42, .35); }

.site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }

.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex: none; }
.brand__mark { width: 2.6rem; height: 2.6rem; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
/* The wordmark is set in caps; the setting stays "Yonika" so the browser tab,
   the schema.org block and the copyright line do not shout. Caps need air —
   the tight tracking that suits mixed case closes them up. */
/* Mixed case, a pixel above the surrounding scale, white against the gold of
   the mark and the tagline. */
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: calc(1.5rem + 1px); color: var(--white); letter-spacing: -.01em; }
.brand__tagline { font-family: var(--font-display); font-style: italic; font-size: .82rem; color: var(--gold-400); }

.site-nav { margin-left: auto; }
.site-nav__list { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.site-nav__link {
    color: rgba(255, 255, 255, .92);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 400;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding: .4rem 0;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
}
.site-nav__link:hover, .site-nav__link[aria-current='page'] { color: var(--gold-400); border-bottom-color: var(--gold); }

.header-actions { display: flex; align-items: center; gap: 1.5rem; }

.header-phone { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.header-phone svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--gold); stroke-width: 1.6; flex: none; }
.header-phone__text { display: flex; flex-direction: column; line-height: 1.25; }
.header-phone__number { color: var(--white); font-size: 1.05rem; font-weight: 500; white-space: nowrap; }
.header-phone__note { color: var(--gold-400); font-size: .72rem; white-space: nowrap; }
.header-phone:hover .header-phone__number { color: var(--gold-400); }

/* WhatsApp keeps its own green — it is a recognised brand affordance, and a
   gold version would read as just another decorative button. */
.btn-whatsapp {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: 50%;
    background: #25d366;
    color: #072436;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.btn-whatsapp:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37, 211, 102, .45); color: #072436; }
.btn-whatsapp svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }

/* The header copy of the social row: no rings, tighter, and it steps aside
   once the menu row gets tight — the drawer and the footer still carry it. */
.header-social { gap: .25rem; }
.header-social .social__item { width: 1.85rem; height: 1.85rem; border-color: transparent; color: rgba(255, 255, 255, .82); }
.header-social a.social__item:hover { border-color: transparent; background: rgba(207, 169, 97, .16); color: var(--gold-400); }

/* Inside the drawer the icons sit under the phone button; on wide screens the
   header copy is the one on show. Both hide rules are written through a parent
   (.site-nav / .site-header) on purpose: the base `.social { display: flex }`
   lives further down the file and would win a same-specificity tie. */
.site-nav .site-nav__social { display: none; }

.lang-switch { display: flex; gap: .1rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: .15rem; }
.lang-switch a {
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(255, 255, 255, .7);
}
.lang-switch a[aria-current='true'] { background: var(--gold); color: var(--navy-900); }

.nav-toggle {
    display: none;
    place-items: center;
    width: 2.7rem; height: 2.7rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    cursor: pointer;
    color: var(--gold-400);
    flex: none;
}
.nav-toggle svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.site-nav__phone { display: none; }

/* The menu labels are long ("Călătorii spirituale"), so tighten the type
   before the row runs out of room, then collapse. Keep the collapse
   breakpoint (1280px) in sync with the one in assets/app.js.

   The steps below are measured, not guessed. With the four social icons the
   row is wide: it needs ~1860px at full size, ~1715px tightened once (smaller
   type, phone note still there), ~1460px tightened twice (note dropped, icons
   shrunk) and ~1290px once the icons leave the header. Each threshold is that
   width plus ~50px, the room taken by the fixed "Solicită ofertă" tab pinned
   to the right edge — the language switch slides under it otherwise. */
@media (max-width: 1940px) {
    .site-nav__list { gap: 1.15rem; }
    .site-nav__link { font-size: .78rem; letter-spacing: .1em; }
    .header-actions { gap: 1rem; }
}

/* Five entries, two of them long ("Călătorii spirituale", "Wellness &
   Longevity"), so the last step before the hamburger drops the phone note and
   tightens the type once more — otherwise the row ends flush against the
   language switch at 1281px, the narrowest desktop width. */
@media (max-width: 1780px) {
    .header-phone__note { display: none; }
    .header-social { gap: .15rem; }
    .header-social .social__item { width: 1.6rem; height: 1.6rem; }
    .site-nav__list { gap: .95rem; }
    .site-nav__link { font-size: .75rem; letter-spacing: .09em; }
}

/* First thing to go when the row tightens: the header copy of the social
   icons, because the drawer and the footer both still carry them. Below this
   the language switch starts sliding under the fixed "Solicită ofertă" tab. */
@media (max-width: 1510px) {
    .site-header .header-social { display: none; }
}

@media (max-width: 1280px) {
    :root { --header-h: 74px; }

    .nav-toggle { display: grid; }
    .header-actions .header-phone { display: none; }

    /* Touch sizes for the two controls that stay in the bar. */
    .nav-toggle, .btn-whatsapp { width: 2.85rem; height: 2.85rem; }
    .lang-switch a { padding: .8rem .7rem; }

    /* Footer link lists are single lines of text; a little vertical padding
       turns a 24px line into something a thumb can land on. Scoped to the
       lists on purpose: `.footer-col a` also caught the social rings, whose
       `display: grid` is what centres the glyph inside them — they came out
       left-aligned and stretched. */
    .footer-col ul a { display: inline-block; padding-block: .45rem; }
    /* Two classes on purpose: `.social a` further down the file would otherwise
       win on specificity and keep the icons at 2.3rem. */
    .social .social__item { width: 2.6rem; height: 2.6rem; }
    .brand__name { font-size: calc(1.25rem + 1px); }

    .site-nav {
        position: fixed;
        inset: var(--header-h) 0 auto 0;
        background: var(--navy-900);
        box-shadow: var(--shadow);
        margin-left: 0;
        padding: 1rem var(--gutter) 1.6rem;
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
    }
    /* Pair every author `display:` with a [hidden] override — the UA rule
       `[hidden] { display: none }` loses to it and the menu never closes. */
    .site-nav[hidden] { display: none; }
    .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    /* Block, not inline: as an inline link the rule underneath was only as wide
       as the label — five separators of five different lengths — and only the
       words themselves answered to a tap, not the row around them. */
    .site-nav__link { display: block; padding: .95rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .site-nav__link:hover, .site-nav__link[aria-current='page'] { border-bottom-color: rgba(255, 255, 255, .1); }
    .site-nav__phone { display: flex; margin-top: 1.2rem; }
    .site-nav .site-nav__social { display: flex; margin-top: 1.2rem; }
}

/* Below ~430px the wordmark plus WhatsApp, language switch and menu button
   no longer fit on one line, so scale the row down rather than let it
   scroll sideways. */
@media (max-width: 430px) {
    .brand { gap: .5rem; }
    .brand__mark { width: 2.1rem; height: 2.1rem; }
    .brand__name { font-size: calc(1.05rem + 1px); }
    .brand__tagline { font-size: .68rem; }

    /* Thumb-sized, not eye-sized: the menu button and WhatsApp were 37px and
       35px, which is a miss on the first try. The gap gives back the width. */
    .header-actions { gap: .4rem; }
    .btn-whatsapp { width: 2.6rem; height: 2.6rem; }
    .btn-whatsapp svg { width: 1.25rem; height: 1.25rem; }
    .lang-switch a { padding: .75rem .5rem; font-size: .66rem; }
    .nav-toggle { width: 2.6rem; height: 2.6rem; }
    .nav-toggle svg { width: 1.15rem; height: 1.15rem; }
}

/* Smallest phones still in use (iPhone SE and similar). The gap between the
   wordmark and the action row is what tips it over, so that shrinks first. */
@media (max-width: 360px) {
    .site-header__inner { gap: .5rem; }
    .brand__name { font-size: calc(.92rem + 1px); }
    .brand__tagline { font-size: .62rem; }
    .header-actions { gap: .35rem; }
    /* The wordmark gives up the width here, not the controls: a 34px menu
       button on the narrowest phone is the one thing that must not shrink. */
    .lang-switch a { padding: .7rem .42rem; }
    .nav-toggle, .btn-whatsapp { width: 2.5rem; height: 2.5rem; }
}

/* Below ~350px the wordmark, its tagline and the three controls stop sharing a
   row — measured 334px of content in a 320px screen, so the page scrolled
   sideways. The tagline is the decorative half of the wordmark, so it goes. */
@media (max-width: 350px) {
    .brand__tagline { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--header-h));
    padding-top: var(--header-h);
    background: var(--navy-900);
    color: var(--white);
    isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* The video fades in over the poster once it actually starts, so a slow
   connection never shows a blank hero. */
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .9s ease;
}
.hero__video.is-playing { opacity: 1; }

/* Sits under the poster/video so there is never a flash of nothing. */
.hero__media--placeholder {
    background:
        radial-gradient(120% 90% at 78% 18%, #1d90a6 0%, rgba(29, 144, 166, 0) 55%),
        radial-gradient(90% 70% at 92% 78%, #0f6b81 0%, rgba(15, 107, 129, 0) 60%),
        linear-gradient(160deg, #0a3247 0%, #0d4a60 55%, #114156 100%);
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(100deg, rgba(4, 24, 42, .94) 0%, rgba(6, 32, 48, .8) 38%, rgba(7, 44, 62, .35) 68%, rgba(7, 44, 62, .12) 100%),
        linear-gradient(0deg, rgba(4, 24, 42, .55) 0%, rgba(4, 24, 42, 0) 45%);
}

.hero__inner { max-width: 42rem; padding-block: clamp(3.5rem, 9vw, 6rem) clamp(2.5rem, 5vw, 4rem); }

/* On a phone the hero fills the screen and the search card sits at its foot,
   so the video is not squeezed into a strip. svh keeps it clear of the
   browser's own chrome. */
@media (max-width: 700px) {
    .hero {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100svh;
    }
    /* Explicit classes, not :first-of-type — the first div child of .hero is
       the background media, so a positional selector matches the wrong one. */
    .hero__body {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
    }
    .hero__foot { flex: none; padding-bottom: 1rem; }
    .hero__inner { width: 100%; padding-block: 1.5rem; }
    .hero__lead { margin-bottom: 1.6rem; }
    .hero .eyebrow { margin-bottom: .8rem; }
}
.hero h1 { color: var(--white); margin-bottom: 1.1rem; font-weight: 400; }
.hero h1 em { font-style: normal; color: var(--gold-400); }
.hero__lead { font-size: clamp(1.02rem, 1.7vw, 1.18rem); color: rgba(255, 255, 255, .85); max-width: 26rem; margin-bottom: 2.2rem; }

/* Vertical "request an offer" tab pinned to the right edge. */
.offer-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 110;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    padding: 1.4rem .85rem;
    background: var(--navy-900);
    border: 1px solid rgba(207, 169, 97, .45);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    color: var(--gold-400);
    text-decoration: none;
    box-shadow: -6px 0 24px rgba(4, 24, 42, .3);
    transition: background-color .2s ease, color .2s ease;
}
.offer-tab:hover { background: var(--gold); color: var(--navy-900); }
.offer-tab svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.offer-tab span {
    writing-mode: vertical-rl;
    font-size: .76rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}
@media (max-width: 940px) { .offer-tab { display: none; } }

/* ==========================================================================
   Hero search bar
   ========================================================================== */
.searchbar {
    position: relative;
    z-index: 2;
    margin-bottom: clamp(-5rem, -6vw, -3rem);
    background: rgba(7, 40, 58, .62);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(207, 169, 97, .35);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.2rem;
    box-shadow: var(--shadow-lg);
}
.searchbar__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 0;
}
.searchbar__field { padding: .2rem 1.2rem; border-left: 1px solid rgba(255, 255, 255, .14); }
.searchbar__field:first-child { border-left: 0; padding-left: .6rem; }

.searchbar__label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
    margin-bottom: .35rem;
}
.searchbar__label svg { width: .95rem; height: .95rem; fill: none; stroke: var(--gold-400); stroke-width: 1.5; flex: none; }

.searchbar select {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
    border-radius: 0;
    padding: .35rem 1.4rem .5rem 0;
    color: var(--white);
    font-size: .95rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23e0c68f' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .2rem center;
    background-size: 11px;
    cursor: pointer;
}
.searchbar select:focus { outline: none; border-bottom-color: var(--gold); box-shadow: none; }
.searchbar select option { color: var(--ink); background: var(--white); }

.searchbar__submit { padding-left: 1.2rem; }

@media (max-width: 1080px) {
    .searchbar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0; }
    .searchbar__field { border-left: 0; padding-inline: .6rem; }
    .searchbar__submit { grid-column: 1 / -1; padding-left: .6rem; }
}
/* Phones: each filter becomes one compact row — label left, value right — so
   the card takes about half the height and leaves the video visible. */
@media (max-width: 700px) {
    .searchbar { padding: .35rem .95rem; margin-bottom: 0; }

    .searchbar__grid { grid-template-columns: 1fr; gap: 0; }

    .searchbar__field {
        display: grid;
        grid-template-columns: auto minmax(6rem, auto);
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: .5rem .2rem;
        border-left: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }
    .searchbar__field:first-child { padding-left: .2rem; }

    .searchbar__label { margin-bottom: 0; font-size: .68rem; }

    .searchbar select {
        width: auto;
        border-bottom: 0;
        /* Fills the row rather than sitting as a 29px strip inside it — the
           label is not tappable, so the select has to be the whole target. */
        padding: .62rem 1.1rem .62rem 0;
        text-align: right;
        text-align-last: right;
        background-position: right 0 center;
    }

    .searchbar__submit {
        display: flex;
        justify-content: center;
        padding: .85rem .2rem .55rem;
    }
}

/* Must sit after the block above, not with the other 360px header rules —
   equal specificity means source order decides. */
@media (max-width: 360px) {
    .searchbar__label { font-size: .61rem; letter-spacing: .08em; gap: .4rem; }
    .searchbar__field { grid-template-columns: auto minmax(5rem, auto); gap: .6rem; }
    .searchbar select { font-size: .88rem; }
}

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust {
    position: relative;
    z-index: 0;
    background: var(--navy-900);
    color: var(--white);
    padding-block: clamp(5.5rem, 9vw, 6.5rem) clamp(2.5rem, 4vw, 3rem);
}
/* Pages without a search bar overlapping it need no extra top room. */
.trust--flush { padding-block: clamp(2.5rem, 4vw, 3rem); }

.trust__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.trust__item { display: flex; gap: 1rem; padding: .4rem 1.6rem; border-left: 1px solid rgba(255, 255, 255, .13); }
.trust__item:first-child { border-left: 0; padding-left: 0; }
.trust__icon { flex: none; width: 2.6rem; height: 2.6rem; }
.trust__icon svg { width: 100%; height: 100%; fill: none; stroke: var(--gold); stroke-width: 1.2; }
.trust__title { font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--white); margin-bottom: .25rem; }
.trust__text { font-size: .88rem; color: rgba(255, 255, 255, .62); line-height: 1.55; margin: 0; }

@media (max-width: 760px) {
    .trust__item { border-left: 0; padding: .8rem 0; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.section--cream { background: var(--cream); }
.section--navy { background: var(--navy-900); color: rgba(255, 255, 255, .82); }
.section--navy h2 { color: var(--white); }

.section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1.2rem;
    margin-bottom: 2.4rem;
}
.section__head h2 { margin-bottom: 0; }
.section__head p { color: var(--muted); margin: .5rem 0 0; max-width: 42rem; }
.section--navy .section__head p { color: rgba(255, 255, 255, .7); }

.grid { display: grid; gap: 1.4rem; }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* ==========================================================================
   Destination cards (photo-led, price overlaid)
   ========================================================================== */
.dest-card {
    position: relative;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    color: var(--white);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}
.dest-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--white); }
.dest-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.dest-card:hover img { transform: scale(1.06); }
.dest-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 24, 42, .18) 0%, rgba(4, 24, 42, 0) 26%, rgba(4, 24, 42, .5) 55%, rgba(4, 24, 42, .84) 80%, rgba(4, 24, 42, .94) 100%);
}
/* The type inside the card is sized against the CARD, not the viewport: the
   same card is ~200px in a rail of eight and ~300px in a rail of four, and
   fixed rem values broke the price onto three lines at the narrow end. */
.dest-card { container-type: inline-size; }

.dest-card__body {
    position: absolute; inset-inline: 0; bottom: 0;
    padding: clamp(.7rem, 6.8cqw, 1.2rem) clamp(.65rem, 6.3cqw, 1.1rem);
}
.dest-card__price-label {
    display: inline-block;
    background: var(--gold);
    color: var(--navy-900);
    font-size: clamp(.5rem, 3.5cqw, .62rem);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: .2rem .55rem;
    border-radius: 3px;
    margin-bottom: .4rem;
}
/* One line, always: the number and "/ pers." are one price, not two facts. */
.dest-card__price {
    display: flex;
    align-items: baseline;
    gap: .3em;
    white-space: nowrap;
    font-size: clamp(1.1rem, 9.7cqw, 1.7rem);
    font-weight: 400;
    line-height: 1.1;
}
.dest-card__price small { font-size: clamp(.62rem, 4.4cqw, .78rem); color: rgba(255, 255, 255, .75); }
.dest-card__name {
    display: block;
    font-size: clamp(.7rem, 5.2cqw, .92rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.25;
    margin-top: .4rem;
    text-wrap: balance;
}
.dest-card__fav {
    position: absolute;
    top: .8rem; right: .8rem;
    width: 2.1rem; height: 2.1rem;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    color: var(--white);
}
.dest-card__fav svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* Deterministic gradient stand-ins so a photo-less demo still reads as design. */
.dest-card--g1 .dest-card__ph { background: linear-gradient(155deg, #0e7490 0%, #22a3b8 48%, #7fd0d9 100%); }
.dest-card--g2 .dest-card__ph { background: linear-gradient(155deg, #0b3147 0%, #1d6f8a 55%, #63b7c6 100%); }
.dest-card--g3 .dest-card__ph { background: linear-gradient(155deg, #1a5b60 0%, #2e8f7d 50%, #86c9a5 100%); }
.dest-card--g4 .dest-card__ph { background: linear-gradient(155deg, #143a52 0%, #3a6f8f 55%, #9db9cc 100%); }
.dest-card--g5 .dest-card__ph { background: linear-gradient(155deg, #26506b 0%, #4a86a0 52%, #b6cdd6 100%); }
.dest-card--g6 .dest-card__ph { background: linear-gradient(155deg, #0d4a60 0%, #18869b 50%, #8fd3dd 100%); }
.dest-card__ph { position: absolute; inset: 0; }

/* One row of cards on desktop, two per row on narrow screens.
   The cards hold a floor of 230px and the row scrolls past it. Squeezing every
   featured destination into the visible width instead (the old minmax(0, 1fr))
   meant the section got worse each time the client ticked "recomandată" — at
   eight cards each one was ~135px and the price broke over three lines. The
   full list is one click away, on the destinations page. */
.rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 1fr);
    gap: 1.4rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: .3rem;
    scrollbar-width: none;
    /* Room for the hover lift and its shadow, taken back with margin so the
       cards still line up with the container edges. */
    padding: .6rem .3rem 1.1rem;
    margin: -.6rem -.3rem -1.1rem;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

@media (max-width: 999px) {
    .rail {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .8rem;
        /* Nothing scrolls here, so the room reserved for the hover lift and
           the scroll gutter goes back. */
        overflow-x: visible;
        padding: 0;
        margin: 0;
    }
    /* Half a phone screen is narrow, so ease off the shape and the chrome —
       the type inside sizes itself off the card width. */
    .dest-card { aspect-ratio: 4 / 5; }
    .dest-card__price-label { padding: .15rem .4rem; }
    .dest-card__fav { width: 1.8rem; height: 1.8rem; top: .6rem; right: .6rem; }
    .dest-card__fav svg { width: .85rem; height: .85rem; }
}

.rail-dots { display: flex; justify-content: center; gap: .45rem; margin-top: 1.8rem; }
/* app.js hides these when the rail has nothing to scroll. The explicit rule is
   required: an author `display:` beats the browser's own [hidden] { display: none }. */
.rail-dots[hidden] { display: none; }
/* The rail no longer scrolls on small screens, so the dots would mean nothing. */
@media (max-width: 999px) { .rail-dots { display: none; } }
.rail-dots span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--cream-300); }
.rail-dots span[data-active] { background: var(--gold); width: 1.4rem; border-radius: 999px; }

/* ==========================================================================
   Package cards
   ========================================================================== */
.card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--cream-200);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-200); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.05); }
.card__media .dest-card__ph { position: absolute; inset: 0; }

.card__badges { position: absolute; top: .8rem; left: .8rem; display: flex; flex-wrap: wrap; gap: .35rem; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .7rem;
    border-radius: 3px;
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .93);
    color: var(--navy-900);
}
.pill--gold { background: var(--gold); color: var(--navy-900); }
.pill--navy { background: rgba(7, 36, 54, .88); color: var(--gold-300); }

.card__body { padding: 1.2rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.card__place { font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-500); margin-bottom: .45rem; }
.card__title { font-size: 1.12rem; font-weight: 500; margin-bottom: .5rem; text-transform: none; letter-spacing: 0; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--teal-700); }
.card__text { color: var(--muted); font-size: .92rem; margin-bottom: 1rem; }
.card__meta { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .82rem; color: var(--muted); margin-bottom: 1rem; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--cream-200); }

.price { line-height: 1.2; }
.price__label { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.price__value { font-size: 1.4rem; font-weight: 400; color: var(--navy-900); }
.price__note { display: block; font-size: .74rem; color: var(--muted); }

/* Type chips */
.type-list { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.type-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.2rem;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--cream-300);
    color: var(--navy-800);
    text-decoration: none;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.type-chip:hover { background: var(--navy-900); border-color: var(--navy-900); color: var(--gold-300); }

/* ==========================================================================
   Newsletter
   ========================================================================== */
.newsletter {
    position: relative;
    background: var(--navy-800);
    color: var(--white);
    padding-block: clamp(2.2rem, 4vw, 3rem);
    overflow: hidden;
}
.newsletter::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 140% at 8% 50%, rgba(23, 121, 143, .5) 0%, rgba(23, 121, 143, 0) 60%);
}
.newsletter__inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; }
.newsletter__icon { flex: none; width: 3.2rem; height: 3.2rem; color: var(--gold); }
.newsletter__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; }
.newsletter__copy { flex: 1 1 20rem; }
.newsletter__title { font-size: 1.05rem; letter-spacing: .16em; text-transform: uppercase; color: var(--white); margin: 0 0 .3rem; }
.newsletter__text { font-size: .9rem; color: rgba(255, 255, 255, .68); margin: 0; }
.newsletter__form { flex: 1 1 24rem; display: flex; gap: .7rem; flex-wrap: wrap; }
.newsletter__form input[type='email'] {
    flex: 1 1 14rem;
    background: rgba(255, 255, 255, .95);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: .95rem 1.1rem;
    font-size: .92rem;
    color: var(--ink);
}
.newsletter__form input[type='email']:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(207, 169, 97, .3); }
.newsletter__form .btn { border-radius: var(--radius-sm); flex: none; }
.newsletter__note { flex-basis: 100%; font-size: .78rem; color: rgba(255, 255, 255, .55); margin: 0; }

/* ==========================================================================
   Forms (shared)
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: .35rem; }
/* Author `display` beats the browser's own [hidden] rule, so say it again. */
.field[hidden] { display: none; }
/* Budget and its currency read as one control. */
.input-group { display: flex; gap: .4rem; }
.input-group > :first-child { flex: 1 1 auto; min-width: 0; }
.input-group > select { flex: 0 0 5.5rem; }
.field label { font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-800); }

input[type='text'], input[type='email'], input[type='tel'], input[type='number'],
input[type='search'], input[type='password'], select, textarea {
    font: inherit;
    font-size: .95rem;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--cream-300);
    border-radius: var(--radius-sm);
    padding: .7rem .85rem;
    width: 100%;
    transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(207, 169, 97, .22);
}
textarea { resize: vertical; min-height: 6rem; }
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2363757f' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 11px;
    padding-right: 2rem;
}

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem; }
.form-grid--stacked { grid-template-columns: 1fr; }
.form-row--full { grid-column: 1 / -1; }
.form-errors { list-style: none; padding: 0; margin: .3rem 0 0; color: #a5442a; font-size: .84rem; }
.form-note { font-size: .78rem; color: var(--muted); margin-top: .8rem; }
.form-card { background: var(--white); border: 1px solid var(--cream-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(1.25rem, 3vw, 2rem); }

.alert { padding: .9rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; font-size: .94rem; }
.alert--success { background: #e6f2ea; color: #1d5b3f; border: 1px solid #b8ddc7; }
.alert--error { background: #fbeae5; color: #8c3a1f; border: 1px solid #f0c9bb; }

/* ==========================================================================
   Listing filters
   ========================================================================== */
.filters { background: var(--white); border: 1px solid var(--cream-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.25rem 1.35rem; margin-bottom: 2rem; }
.filters__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: .9rem; align-items: end; }
.filters__actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.results-bar__count { font-weight: 500; color: var(--navy-800); }
.results-bar__sort { display: flex; align-items: center; gap: .5rem; }
.results-bar__sort label { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.results-bar__sort select { width: auto; }

.empty-state { text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1.5rem; background: var(--white); border: 1px solid var(--cream-200); border-radius: var(--radius); }
.empty-state p { color: var(--muted); max-width: 34rem; margin-inline: auto; }

.pagination { display: flex; justify-content: center; gap: .4rem; list-style: none; margin: 2.5rem 0 0; padding: 0; flex-wrap: wrap; }
.pagination a, .pagination span {
    display: grid; place-items: center;
    min-width: 2.5rem; height: 2.5rem; padding-inline: .6rem;
    border-radius: var(--radius-sm);
    text-decoration: none; font-weight: 400;
    color: var(--navy-800); background: var(--white); border: 1px solid var(--cream-300);
}
.pagination a:hover { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }
.pagination [aria-current='page'] { background: var(--gold); color: var(--navy-900); border-color: var(--gold); }

/* ==========================================================================
   Interior pages
   ========================================================================== */
.page-hero { position: relative; background: var(--navy-900); color: var(--white); overflow: hidden; isolation: isolate; }
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg, rgba(4, 24, 42, .93) 0%, rgba(6, 32, 48, .78) 45%, rgba(7, 44, 62, .42) 100%);
}
.page-hero__inner { padding-block: clamp(2.6rem, 6vw, 4.5rem); max-width: 48rem; }
.page-hero h1 { color: var(--white); font-weight: 400; }
.page-hero p { color: rgba(255, 255, 255, .82); margin-bottom: 0; }
.page-hero__facts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }

.breadcrumbs { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: .9rem; }
.breadcrumbs a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.breadcrumbs a:hover { color: var(--gold-400); }
.breadcrumbs .sep { margin-inline: .5rem; opacity: .5; }

.detail { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 980px) { .detail { grid-template-columns: minmax(0, 1fr); } }

.facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 1px; background: var(--cream-200);
    border: 1px solid var(--cream-200); border-radius: var(--radius);
    overflow: hidden; margin-bottom: 2rem;
}
.facts__item { background: var(--white); padding: 1rem 1.1rem; }
.facts__label { font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.facts__value { font-weight: 500; color: var(--navy-900); }

.prose { max-width: 46rem; }
.prose h2 { margin-top: 2.5rem; font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .35rem; }
.prose img { border-radius: var(--radius); margin-block: 1.2rem; }
.prose table { width: 100%; border-collapse: collapse; margin-block: 1.2rem; }
.prose th, .prose td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--cream-300); }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.checklist li { display: flex; gap: .6rem; align-items: start; }
.checklist li::before {
    content: '';
    flex: none; width: 1.15rem; height: 1.15rem; margin-top: .32rem; border-radius: 50%;
    background: rgba(207, 169, 97, .2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23b48f47' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.checklist--excluded li::before {
    background: var(--cream-200) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2398a3aa' stroke-width='2.2' stroke-linecap='round' d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center / 60% no-repeat;
}

.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem 2.5rem; }
.two-col--flush { margin-top: 2.5rem; }
.prose .two-col--flush h2 { margin-top: 0; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; }
.gallery img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.offer-box { position: sticky; top: calc(var(--header-h) + 1.5rem); background: var(--white); border: 1px solid var(--cream-200); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem; }
.offer-box__price { padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--cream-200); }
.offer-box__price .price__value { font-size: 2rem; }
.offer-box h2 { font-size: 1.2rem; }
.offer-box p { font-size: .88rem; color: var(--muted); }
@media (max-width: 980px) { .offer-box { position: static; } }

.contact-grid { display: grid; grid-template-columns: 1fr minmax(0, 1.25fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-list { padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.contact-list dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.contact-list dd { margin: 0; font-weight: 500; color: var(--navy-900); }
.contact-list a { color: var(--navy-900); text-decoration: none; }
.contact-list a:hover { color: var(--gold-600); }
.map-embed { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); margin-top: 1.5rem; }

.feature { padding: 1.6rem; background: var(--white); border: 1px solid var(--cream-200); border-radius: var(--radius); }
.feature h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.feature p { color: var(--muted); margin: 0; font-size: .92rem; }
.feature__num {
    display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
    background: rgba(207, 169, 97, .16); color: var(--gold-600);
    font-family: var(--font-display); font-weight: 600; margin-bottom: .9rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy-900); color: rgba(255, 255, 255, .72); margin-top: auto; }
.site-footer a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.site-footer a:hover { color: var(--gold-400); }

.footer-main { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }

.footer-col h3 {
    font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
    color: var(--white); margin-bottom: 1rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: .9rem; }

.footer-contact li { display: flex; align-items: center; gap: .65rem; }
.footer-contact svg { width: 1rem; height: 1rem; fill: none; stroke: var(--gold); stroke-width: 1.5; flex: none; }

.social { display: flex; gap: .6rem; }
/* Explicit colour, not inherited: the inert ones are spans, and a span inside
   the drawer would fall back to the body ink and vanish on navy. */
.social__item { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); color: var(--white); }
a.social__item:hover { border-color: var(--gold); background: rgba(207, 169, 97, .14); }
/* A network the agency has not given an address for yet: same ring, dimmed,
   and it does not pretend to be clickable. */
.social__item--inert { opacity: .45; cursor: default; }
/* A share of the ring, not a fixed size: the ring is 1.6rem in a tight
   header and 2.6rem in the footer, and a fixed 1rem glyph looked lost in the
   big one and crowded in the small one. */
.social svg { width: 62%; height: 62%; fill: currentColor; }

.legal-strip { border-top: 1px solid rgba(255, 255, 255, .1); padding-block: 1.2rem; font-size: .8rem; color: rgba(255, 255, 255, .5); }
.legal-strip dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .35rem 2rem; margin: 0 0 1rem; }
.legal-strip dt { font-weight: 500; color: rgba(255, 255, 255, .7); display: inline; }
.legal-strip dd { display: inline; margin: 0 0 0 .35rem; }
.legal-strip__row { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; align-items: center; }
.legal-strip__links { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ==========================================================================
   Preview lock
   ==========================================================================
   Cosmetic only — PreviewLockSubscriber is what actually keeps inner pages
   unreachable. This just stops the page from feeling broken by making links
   that would bounce back to the homepage inert. Phone, WhatsApp, the language
   switch and the newsletter all sit outside main and stay live. */
/* `.is-unlocked` is excluded here rather than overridden below: each :not()
   with an attribute selector adds specificity, so a separate override rule
   would lose and the allowed cards would stay dead. */
[data-preview-lock] main a[href]:not(.is-unlocked):not([href^="http"]):not([href^="tel:"]):not([href^="mailto:"]),
[data-preview-lock] .offer-tab,
[data-preview-lock] .site-footer a[href^="/"] {
    pointer-events: none;
    cursor: default;
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.page-shell { display: flex; flex-direction: column; min-height: 100vh; }
.text-muted { color: var(--muted); }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .card:hover, .dest-card:hover, .btn:hover { transform: none; }
}

/* ==========================================================================
   Cookie bar
   ========================================================================== */
/* A card in the corner rather than a curtain across the page. It only has to
   carry one decision, so it stays out of the way of the one the visitor came
   for. Hidden until app.js decides, and the [hidden] rule is spelled out
   because the author `display` below would otherwise beat it. */
.cookie-bar {
    position: fixed;
    z-index: 60;
    left: 1.2rem;
    bottom: 1.2rem;
    width: min(24rem, calc(100vw - 2.4rem));
    display: grid;
    gap: .9rem;
    padding: 1.15rem 1.25rem;
    background: var(--navy-900);
    color: rgba(255, 255, 255, .82);
    border: 1px solid rgba(207, 169, 97, .3);
    border-radius: var(--radius);
    box-shadow: 0 18px 40px rgba(4, 24, 42, .35);
}
.cookie-bar[hidden] { display: none; }

.cookie-bar__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--gold-400);
}
.cookie-bar__text { margin: 0; font-size: .84rem; line-height: 1.55; }
.cookie-bar__text a { color: var(--gold-400); text-decoration: underline; text-underline-offset: 2px; }

/* Both answers look the same weight on purpose: a refusal styled as the lesser
   button is not a free choice, and a regulator reads it the same way. */
.cookie-bar__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookie-bar__actions .btn { flex: 1 1 auto; justify-content: center; }
.cookie-bar__actions .btn--outline { color: var(--white); border-color: rgba(255, 255, 255, .45); }
.cookie-bar__actions .btn--outline:hover { border-color: var(--gold); color: var(--gold-400); }

@media (max-width: 560px) {
    .cookie-bar { left: .7rem; right: .7rem; bottom: .7rem; width: auto; padding: 1rem; }
}

/* The footer row that carries the ANPC artwork and the way back to this bar. */
.legal-strip__anpc { display: inline-flex; align-items: center; }
.legal-strip__anpc img { display: block; height: 2.6rem; width: auto; border-radius: 3px; }
.legal-strip__link-btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.legal-strip__link-btn:hover { color: var(--gold-400); }

/* ==========================================================================
   Agency documents
   ========================================================================== */
.doc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }

.doc-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1.15rem 1.25rem;
    background: var(--white);
    border: 1px solid var(--cream-300);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--ink);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.doc-card:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--shadow-sm); color: var(--ink); }

.doc-card__icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: rgba(207, 169, 97, .14); }
.doc-card__icon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--gold-600); stroke-width: 1.6; }

.doc-card__body { display: grid; gap: .18rem; min-width: 0; }
.doc-card__title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--navy-900); }
/* The registration line carries company, CUI and registry number, so it wraps
   rather than being clipped — these are numbers people check digit by digit. */
.doc-card__meta { font-size: .82rem; line-height: 1.4; color: var(--navy-800); opacity: .8; }
.doc-card__file { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-800); opacity: .55; }

.doc-card__arrow { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--cream-300); flex: none; }
.doc-card__arrow svg { width: .9rem; height: .9rem; fill: none; stroke: var(--gold-600); stroke-width: 1.5; }
.doc-card:hover .doc-card__arrow { border-color: var(--gold); background: rgba(207, 169, 97, .12); }

@media (max-width: 560px) {
    .doc-card { padding: 1rem; gap: .8rem; }
    .doc-card__icon { width: 2.5rem; height: 2.5rem; }
}

/* The build credit. Sits at the quiet end of the legal strip: same size and
   opacity as the copyright line, and it only warms up on hover. */
.made-by {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: rgba(255, 255, 255, .5);
    text-decoration: none;
    font-size: .78rem;
    transition: color .2s ease;
}
.made-by img { width: 1.4rem; height: auto; opacity: .85; transition: opacity .2s ease; }
.made-by__name { font-family: var(--font-display); font-weight: 600; letter-spacing: .04em; }
.made-by:hover { color: var(--white); }
.made-by:hover img { opacity: 1; }