@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Noto+Sans+Hebrew:wght@300;400;500;600;700&family=Noto+Sans+Georgian:wght@300;400;500;600;700&display=swap");

/* ==========================================================================
   GeoTravel — Nature Distilled x Editorial Grid
   Design tokens
   ========================================================================== */

:root {
    /* --- Semantic colour tokens (client brand palette) --- */
    --color-primary: #12372A;          /* Deep Forest   */
    --color-on-primary: #FFFFFF;
    --color-secondary: #315B4A;        /* Mountain Green*/
    --color-accent: #B66A2C;           /* Warm Terracotta */
    --color-accent-2: #D89A3E;         /* Sun Amber     */
    --color-background: #F7F3EA;       /* Cream         */
    --color-surface: #FFFFFF;
    --color-foreground: #202522;       /* Charcoal      */
    --color-muted: #E8D8B8;            /* Sand          */
    --color-muted-foreground: #5A6660; /* Stone Sage    */
    --color-border: #E0D6C2;           /* Sand Border   */
    --color-destructive: #A33528;
    --color-ring: #B66A2C;

    /* Accessibility-driven shades of the brand terracotta.
       -strong: fill behind white labels (4.9:1). -ink: link text on cream (5.7:1). */
    --color-accent-strong: #A55F26;
    --color-accent-ink: #8F4F1E;
    --color-primary-deep: #0C2A1F;
    --color-sand-shade: #CDBE99;
    --color-success: #2F6B4F;

    /* --- Composite / alpha colours --- */
    --color-hero-overlay: linear-gradient(180deg, rgba(18, 55, 42, 0.15) 0%, rgba(18, 55, 42, 0.45) 55%, rgba(18, 55, 42, 0.82) 100%);
    /* Same Deep Forest scrim, deepened over the top third only. The contact
       hero is the one sunset frame whose sky is lighter than the white header
       text sitting on it (~2:1); below 36% it rejoins the standard curve. */
    --color-hero-overlay-bright: linear-gradient(180deg, rgba(18, 55, 42, 0.66) 0%, rgba(18, 55, 42, 0.58) 20%, rgba(18, 55, 42, 0.35) 36%, rgba(18, 55, 42, 0.45) 55%, rgba(18, 55, 42, 0.82) 100%);
    --color-scrim: linear-gradient(to top, rgba(18, 55, 42, 0.78) 0%, rgba(18, 55, 42, 0.12) 60%, rgba(18, 55, 42, 0) 100%);
    --color-header-solid: rgba(18, 55, 42, 0.97);
    --color-on-dark-soft: rgba(255, 255, 255, 0.78);
    --color-on-dark-faint: rgba(255, 255, 255, 0.15);
    --color-on-dark-hairline: rgba(255, 255, 255, 0.12);
    --color-focus-halo: rgba(182, 106, 44, 0.28);
    --color-destructive-soft: rgba(163, 53, 40, 0.08);
    --color-success-soft: rgba(47, 107, 79, 0.08);

    /* Data-URI assets and blend bands keep their literals here so no raw
       colour appears outside :root. */
    --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235A6660' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --shine-band: linear-gradient(100deg, transparent 0, rgba(255, 255, 255, 0.4) 44%, rgba(255, 255, 255, 0.72) 50%, rgba(255, 255, 255, 0.4) 56%, transparent 100%);

    /* The single permitted decorative gradient */
    --gradient-warm: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-2) 100%);
    --gradient-placeholder: linear-gradient(148deg, var(--color-muted) 0%, var(--color-sand-shade) 46%, var(--color-secondary) 100%);

    /* --- Spacing scale --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 6rem;
    --space-section: 4rem;

    /* --- Radii --- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-pill: 999px;

    /* --- Shadows: two levels, medium and controlled --- */
    --shadow-card: 0 1px 2px rgba(32, 37, 34, 0.04), 0 8px 20px rgba(32, 37, 34, 0.07);
    --shadow-lift: 0 2px 4px rgba(32, 37, 34, 0.05), 0 16px 34px rgba(32, 37, 34, 0.11);

    /* --- Motion --- */
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-hover: 200ms;
    --dur-reveal: 450ms;

    /* --- Layout --- */
    --wrap: 1240px;
    --gutter: 1.25rem;
    --header-h: 76px;

    /* --- Type --- */
    --font-display: "Manrope", "Noto Sans Hebrew", "Noto Sans Georgian", sans-serif;
    --font-body: "Inter", "Noto Sans Hebrew", "Noto Sans Georgian", sans-serif;
}

@media (min-width: 768px) {
    :root {
        --gutter: 2rem;
        --space-section: 6rem;
    }
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    margin: 0;
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

@media (min-width: 768px) {
    body {
        font-size: 1.125rem;
    }
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    color: var(--color-primary);
    margin: 0 0 var(--space-4);
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.25rem, 5.2vw, 4.5rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

h3 {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
}

p {
    margin: 0 0 var(--space-4);
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--color-accent-ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--dur-hover) var(--ease-out);
}

a:hover {
    color: var(--color-primary);
}

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

ul,
ol {
    margin: 0 0 var(--space-4);
    padding-inline-start: 1.25rem;
}

li {
    margin-bottom: var(--space-2);
}

svg {
    flex: none;
}

:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

::selection {
    background: var(--color-muted);
    color: var(--color-primary);
}

/* Author rules like .card{display:flex} outbid the UA [hidden] rule, so the
   filtered-out cards would stay visible without this. */
[hidden] {
    display: none !important;
}

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

.skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    top: -100px;
    z-index: 1200;
    padding: var(--space-3) var(--space-5);
    background: var(--color-surface);
    color: var(--color-primary);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lift);
    font-weight: 600;
    text-decoration: none;
    transition: top 180ms var(--ease-out);
}

.skip-link:focus {
    top: var(--space-4);
}

/* ==========================================================================
   Multi-script typography
   ========================================================================== */

:lang(he),
:lang(ka) {
    letter-spacing: normal;
}

:lang(ka) {
    line-height: 1.85;
}

/* Uppercase eyebrow treatment applies to Latin & Cyrillic only. */
:lang(he) .eyebrow,
:lang(ka) .eyebrow,
[lang="he"] .eyebrow,
[lang="ka"] .eyebrow {
    text-transform: none;
    letter-spacing: 0.02em;
}

[dir="rtl"] .icon-arrow {
    transform: scaleX(-1);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

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

.wrap--narrow {
    max-width: 860px;
}

.section {
    padding-block: var(--space-section);
}

.section--tight {
    padding-block: calc(var(--space-section) * 0.7);
}

/* A section that continues the one above it (filter row → the list it filters)
   keeps the seam closed instead of opening a full section gap. */
.section--flush-top {
    padding-block-start: 0;
}

.section--white {
    background: var(--color-surface);
}

.section--sand {
    background: var(--color-muted);
}

.section--forest {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.section--forest h2,
.section--forest h3 {
    color: var(--color-on-primary);
}

.section--forest .section-head p {
    color: var(--color-on-dark-soft);
}

.section-head {
    max-width: 62ch;
    margin-bottom: var(--space-7);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: var(--space-3);
}

.section--forest .eyebrow,
.ctaband .eyebrow,
.hero .eyebrow {
    color: var(--color-accent-2);
}

.lede {
    font-size: 1.125rem;
    color: var(--color-muted-foreground);
    max-width: 62ch;
}

.section--sand .lede,
.section--sand .card-desc {
    color: var(--color-secondary);
}

.grid {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 640px) {
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .grid {
        gap: var(--space-6);
    }
}

/* ==========================================================================
   Film grain overlay
   ========================================================================== */

.grain {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: 0.875rem 1.875rem;
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-out),
        color var(--dur-hover) var(--ease-out),
        border-color var(--dur-hover) var(--ease-out),
        box-shadow var(--dur-hover) var(--ease-out),
        transform var(--dur-hover) var(--ease-out);
}

.btn--primary {
    background-color: var(--color-accent-strong);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-card);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background-image: var(--gradient-warm);
    color: var(--color-primary);
    box-shadow: var(--shadow-lift);
    transform: translateY(-2px);
}

.btn--secondary {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    transform: translateY(-2px);
}

.btn--on-dark {
    background-color: transparent;
    border-color: var(--color-on-primary);
    color: var(--color-on-primary);
}

.btn--on-dark:hover,
.btn--on-dark:focus-visible {
    background-color: var(--color-on-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
}

.btn--block {
    width: 100%;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* Ghost / text link with trailing arrow */
.link-ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-accent-ink);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color var(--dur-hover) var(--ease-out), gap var(--dur-hover) var(--ease-out);
}

.link-ghost .icon-arrow {
    transition: transform var(--dur-hover) var(--ease-out);
}

.link-ghost:hover,
.link-ghost:focus-visible {
    color: var(--color-primary);
    gap: var(--space-3);
}

.section--forest .link-ghost,
.hero .link-ghost {
    color: var(--color-accent-2);
}

.section--forest .link-ghost:hover,
.hero .link-ghost:hover {
    color: var(--color-on-primary);
}

/* --- Button Shine Sweep — one primary CTA per page --- */
.shine {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.shine::after {
    content: "";
    position: absolute;
    top: -25%;
    bottom: -25%;
    inset-inline-start: 0;
    width: 55%;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
    background: var(--shine-band);
    transform: translateX(-200%) skewX(-22deg);
}

.shine:hover::after,
.shine:focus-visible::after {
    animation: shine-sweep 600ms cubic-bezier(0.25, 0.6, 0.3, 1);
}

@keyframes shine-sweep {
    to {
        transform: translateX(320%) skewX(-22deg);
    }
}

/* ==========================================================================
   Tag pills & chips
   ========================================================================== */

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
}

.tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--color-muted);
    color: var(--color-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

.section--sand .tag {
    background: var(--color-surface);
}

.section--forest .tag {
    background: var(--color-on-dark-faint);
    color: var(--color-on-primary);
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0.5rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-secondary);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-out),
        color var(--dur-hover) var(--ease-out),
        border-color var(--dur-hover) var(--ease-out);
}

.chip:hover {
    border-color: var(--color-accent);
    color: var(--color-primary);
}

.chip[aria-pressed="true"],
.chip.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

/* ==========================================================================
   Placeholder image surfaces (awaiting licensed photography)
   ========================================================================== */

.frame {
    position: relative;
    overflow: hidden;
    background: var(--color-muted);
}

.frame--32 {
    aspect-ratio: 3 / 2;
}

.frame--43 {
    aspect-ratio: 4 / 3;
}

.frame--45 {
    aspect-ratio: 4 / 5;
}

.frame--169 {
    aspect-ratio: 16 / 9;
}

.ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background-image: var(--gradient-placeholder);
    color: var(--color-on-primary);
    transform: scale(1.001);
    backface-visibility: hidden;
    transition: transform 700ms cubic-bezier(0.19, 0.64, 0.13, 1);
    will-change: transform;
}

.ph svg {
    width: 40px;
    height: 40px;
    opacity: 0.55;
}

.ph::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* Image Hover Zoom — scale the media, never the frame */
.card:hover .ph,
.card:focus-within .ph,
.ms-card:hover .ph,
.ms-card:focus-within .ph {
    transform: scale(1.04);
}

.credit {
    display: block;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-muted-foreground);
    margin-top: var(--space-2);
}

.section--forest .credit {
    color: var(--color-on-dark-soft);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}

.card:hover,
.card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
}

.card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-5);
}

.card__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 var(--space-2);
    color: var(--color-primary);
}

.card-desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-muted-foreground);
    margin: 0 0 var(--space-4);
}

.card__body .link-ghost {
    margin-top: auto;
}

.card .eyebrow {
    margin-bottom: var(--space-2);
}

.card--dark {
    background: var(--color-primary-deep);
    border-color: var(--color-on-dark-hairline);
}

.card--dark .card__title {
    color: var(--color-on-primary);
}

.card--dark .card-desc {
    color: var(--color-on-dark-soft);
}

.card--dark .eyebrow {
    color: var(--color-accent-2);
}

/* Stretched link keeps whole card clickable without nesting anchors */
.stretch::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ==========================================================================
   Header
   ========================================================================== */

.header {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 1000;
    background: transparent;
    transition: background-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}

.header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--header-h);
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.header.is-condensed,
body.no-hero .header {
    background-color: var(--color-header-solid);
    box-shadow: var(--shadow-lift);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--color-on-primary);
    margin-inline-end: auto;
}

.brand img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-background);
    object-fit: cover;
}

.brand__name {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-on-primary);
}

.nav {
    display: none;
}

.nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__list li {
    margin: 0;
}

.nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-on-primary);
    text-decoration: none;
    position: relative;
    transition: color var(--dur-hover) var(--ease-out);
}

.nav__link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 10px;
    height: 1.5px;
    background: var(--color-accent-2);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur-hover) var(--ease-out);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
    transform: scaleX(1);
}

.nav__link:hover {
    color: var(--color-accent-2);
}

.lang {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--color-on-dark-faint);
    border-radius: var(--radius-pill);
}

.lang__btn {
    min-width: 38px;
    min-height: 34px;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-on-dark-soft);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}

.lang__btn:hover {
    color: var(--color-on-primary);
}

.lang__btn[aria-pressed="true"] {
    background: var(--color-on-primary);
    color: var(--color-primary);
}

/* Header CTA: outline while the header floats over the hero (keeps one
   terracotta CTA per viewport), terracotta pill once the header condenses.
   It is never hidden — only re-skinned. */
.header__cta {
    display: none;
    min-height: 44px;
    padding: 0.625rem 1.375rem;
    font-size: 0.9375rem;
    background-color: transparent;
    background-image: none;
    border-color: var(--color-on-primary);
    color: var(--color-on-primary);
    box-shadow: none;
}

.header.is-condensed .header__cta,
body.no-hero .header__cta {
    background-color: var(--color-accent-strong);
    border-color: transparent;
    color: var(--color-on-primary);
}

.header__cta:hover,
.header__cta:focus-visible {
    background-image: var(--gradient-warm);
    border-color: transparent;
    color: var(--color-primary);
    transform: translateY(-2px);
}

.burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--color-on-dark-faint);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-on-primary);
    cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-out);
}

.burger:hover {
    background: var(--color-on-dark-faint);
}

@media (min-width: 1024px) {
    .nav {
        display: block;
    }

    .header__cta {
        display: inline-flex;
    }

    .burger {
        display: none;
    }
}

/* Mobile slide-out menu */
.menu {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    padding: var(--space-4) var(--gutter) var(--space-8);
    background: var(--color-primary);
    color: var(--color-on-primary);
    transform: translateY(-100%);
    visibility: hidden;
    overflow-y: auto;
    transition: transform 320ms var(--ease-out), visibility 320ms linear;
}

.menu.is-open {
    transform: translateY(0);
    visibility: visible;
}

.menu__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-h);
    margin-bottom: var(--space-6);
}

.menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--color-on-dark-faint);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-on-primary);
    cursor: pointer;
}

.menu__list {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
}

.menu__list li {
    margin: 0;
    border-bottom: 1px solid var(--color-on-dark-hairline);
}

.menu__link {
    display: flex;
    align-items: center;
    min-height: 60px;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-on-primary);
    text-decoration: none;
}

.menu__link:hover {
    color: var(--color-accent-2);
}

.menu .lang {
    align-self: flex-start;
    margin-bottom: var(--space-6);
}

body.menu-open {
    overflow: hidden;
}

/* ==========================================================================
   Hero — full-bleed photography with parallax
   ========================================================================== */

.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    isolation: isolate;
    overflow: hidden;
    padding-top: calc(var(--header-h) + var(--space-8));
    padding-bottom: var(--space-9);
    min-height: 72vh;
    background-color: var(--color-primary);
}

.hero--compact {
    min-height: 52vh;
    padding-bottom: var(--space-8);
}

@media (min-width: 1024px) {
    .hero {
        min-height: 88vh;
    }

    .hero--about {
        min-height: 56vh;
    }

    .hero--funnel {
        min-height: 60vh;
    }

    .hero--faq,
    .hero--contact {
        min-height: 48vh;
    }
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

@media (min-width: 1024px) {
    .hero__media {
        background-attachment: fixed;
    }

    /* GSAP takes over the 0.75x rate on desktop; overscan hides the travel. */
    .hero.is-gsap-parallax .hero__media {
        background-attachment: scroll;
        inset: -20% 0;
        will-change: transform;
    }
}

/* Hero photography — one per page, per the image manifest */
.hero--home .hero__media {
    background-image: url("_uploads/ai_27f808cb05526659.jpg");
}

.hero--about .hero__media {
    background-image: url("_uploads/ai_2a376d5a5b52c050.jpg");
}

.hero--funnel .hero__media {
    background-image: url("_uploads/ai_e45425d535aac583.jpg");
}

.hero--faq .hero__media {
    background-image: url("_uploads/ai_b357adfc036131f7.jpg");
}

.hero--contact .hero__media {
    background-image: url("_uploads/ai_2b0cb905888df7b1.jpg");
}

/* Brand, nav links and the outlined header CTA are white and float over this
   photograph's brightest band, so this hero carries the deeper top scrim. */
.hero--contact .hero__overlay {
    background-image: var(--color-hero-overlay-bright);
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--color-hero-overlay);
}

.hero__inner {
    position: relative;
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
    color: var(--color-on-primary);
}

.hero h1 {
    color: var(--color-on-primary);
    max-width: 16ch;
    margin-bottom: var(--space-5);
}

.hero--compact h1 {
    max-width: 20ch;
}

.hero__sub {
    max-width: 54ch;
    font-size: 1.0625rem;
    color: var(--color-on-primary);
    margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
    .hero__sub {
        font-size: 1.1875rem;
    }
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.hero__credit {
    position: absolute;
    inset-inline-end: var(--gutter);
    bottom: var(--space-3);
    font-size: 0.75rem;
    color: var(--color-on-dark-soft);
    margin: 0;
    z-index: 1;
}

/* ==========================================================================
   Text Reveal Mask — line-level only (multi-script safe)
   ========================================================================== */

.rv-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.12em;
    margin-bottom: -0.04em;
}

.rv-line > span {
    display: block;
    transform: translateY(0);
}

.is-armed .rv-line > span {
    transform: translateY(115%);
}

.is-revealed .rv-line > span {
    transform: translateY(0);
    transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: var(--d, 0s);
}

/* Section headings wipe open as a block-level clip — no per-character
   splitting, so Hebrew RTL order and Georgian shaping stay intact. */
.mask-h2.is-armed {
    clip-path: inset(-0.15em -0.3em 100% -0.3em);
}

.mask-h2.is-revealed {
    clip-path: inset(-0.15em -0.3em -0.2em -0.3em);
    transition: clip-path 700ms cubic-bezier(0.19, 1, 0.22, 1);
}

/* ==========================================================================
   Scroll Fade-In / Staggered Entrance
   ========================================================================== */

.reveal {
    opacity: 1;
    transform: none;
}

.reveal.is-armed {
    opacity: 0;
    transform: translateY(20px);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
    transition-delay: var(--d, 0s);
}

.stagger > * {
    opacity: 1;
    transform: none;
}

.stagger.is-armed > * {
    opacity: 0;
    transform: translateY(20px);
}

.stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}

.stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 0.06s; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 0.12s; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 0.18s; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 0.24s; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 0.3s; }
.stagger.is-visible > *:nth-child(7) { transition-delay: 0.36s; }
.stagger.is-visible > *:nth-child(8) { transition-delay: 0.42s; }
.stagger.is-visible > *:nth-child(n + 9) { transition-delay: 0.48s; }

/* ==========================================================================
   Image Reveal Mask — featured editorial blocks
   ========================================================================== */

.imask {
    position: relative;
}

.imask .curtain {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--color-primary);
    transform: translateX(101%);
    transition: transform 900ms cubic-bezier(0.76, 0, 0.24, 1);
    pointer-events: none;
}

.imask.is-armed:not(.is-revealed) .curtain {
    transform: translateX(0);
}

.imask.is-armed:not(.is-revealed) .ph {
    transform: scale(1.12);
    clip-path: inset(0 100% 0 0);
}

.imask .ph {
    clip-path: inset(0 0 0 0);
    transition: transform 1000ms cubic-bezier(0.76, 0, 0.24, 1), clip-path 900ms cubic-bezier(0.76, 0, 0.24, 1);
}

[dir="rtl"] .imask .curtain {
    transform: translateX(-101%);
}

[dir="rtl"] .imask.is-armed:not(.is-revealed) .curtain {
    transform: translateX(0);
}

/* ==========================================================================
   Page Transition Fade
   ========================================================================== */

.page-shell {
    opacity: 1;
    transition: opacity 220ms var(--ease-out);
}

body.is-leaving .page-shell {
    opacity: 0;
}

/* ==========================================================================
   Home — search band
   ========================================================================== */

.searchband {
    position: relative;
    z-index: 2;
    margin-top: -3.5rem;
}

.searchband__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
    padding: var(--space-5);
}

@media (min-width: 768px) {
    .searchband__card {
        padding: var(--space-6);
    }
}

.searchband__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
    .searchband__row {
        flex-direction: row;
        align-items: flex-end;
    }

    .searchband__row .field {
        flex: 1;
        margin-bottom: 0;
    }
}

.searchband__hint {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    margin: 0;
}

/* ==========================================================================
   Home — rails, editorial blocks, seasons, map
   ========================================================================== */

.rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: var(--space-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Room for the card hover lift (-4px) and its shadow, which the
       scroll container would otherwise clip at the top edge. */
    padding-top: var(--space-2);
    padding-bottom: var(--space-4);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: thin;
}

.rail > * {
    scroll-snap-align: start;
}

@media (min-width: 640px) {
    .rail {
        grid-auto-columns: 44%;
    }
}

@media (min-width: 1024px) {
    .rail {
        grid-auto-columns: 30%;
        margin-inline: 0;
        padding-inline: 0;
    }
}

.feature {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 1024px) {
    .feature {
        grid-template-columns: 1.35fr 1fr;
        align-items: start;
    }
}

.feature__main {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.feature__caption {
    padding: var(--space-5);
}

.feature__side {
    display: grid;
    gap: var(--space-4);
}

.mini {
    position: relative;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}

.mini:hover,
.mini:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
}

.mini .frame {
    border-radius: var(--radius-md);
}

.mini h3 {
    font-size: 1.0625rem;
    margin-bottom: var(--space-1);
}

.mini p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-muted-foreground);
    margin: 0;
}

/* Experience grid */
.exp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (min-width: 640px) {
    .exp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.exp {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-5) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-primary);
    text-decoration: none;
    transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}

.exp:hover,
.exp:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
    border-color: var(--color-accent);
    color: var(--color-primary);
}

.exp svg {
    width: 24px;
    height: 24px;
    color: var(--color-accent);
}

.exp span {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
}

.exp small {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-secondary);
}

/* Season strip */
.season {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-6) var(--space-5) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}

.season:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
}

.season::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 4px;
    background-image: var(--gradient-warm);
}

.season h3 {
    font-size: 1.25rem;
    margin-bottom: var(--space-2);
}

.season p {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-muted-foreground);
    margin: 0;
}

.season__months {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-ink);
    margin-bottom: var(--space-2);
}

/* Uppercase + tracking is Latin/Cyrillic only, as with .eyebrow. */
:lang(he) .season__months,
:lang(ka) .season__months,
[lang="he"] .season__months,
[lang="ka"] .season__months {
    text-transform: none;
    letter-spacing: 0.02em;
}

/* Split feature (Taste Georgia / photography promise) */
.split {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}

@media (min-width: 1024px) {
    .split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-9);
    }

    .split--reverse .split__media {
        order: 2;
    }
}

.split__media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.section--forest .split__media {
    border-color: var(--color-on-dark-hairline);
}

/* Variant for a media column that already ships its own framed cards (the
   about-page photography cluster). The outer frame would clip the cards'
   shadows, double their radii and sit flush against the credit line. */
.split__media--bare {
    border: 0;
    border-radius: 0;
    overflow: visible;
}

/* Map preview */
.mapbox {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.mapbox svg {
    display: block;
    width: 100%;
    height: auto;
}

.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    list-style: none;
    padding: var(--space-5);
    margin: 0;
    border-top: 1px solid var(--color-border);
}

.map-legend li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-secondary);
}

.map-legend svg {
    width: 20px;
    height: 20px;
    color: var(--color-accent);
}

/* ==========================================================================
   Masonry gallery
   ========================================================================== */

.ms-grid {
    column-count: 2;
    column-gap: var(--space-4);
}

@media (min-width: 768px) {
    .ms-grid {
        column-count: 3;
    }
}

@media (min-width: 1200px) {
    .ms-grid {
        column-count: 4;
    }
}

.ms-grid--cluster {
    column-count: 2;
}

@media (min-width: 768px) {
    .ms-grid--cluster {
        column-count: 2;
    }
}

@media (min-width: 1200px) {
    .ms-grid--cluster {
        column-count: 2;
    }
}

.ms-card {
    position: relative;
    display: block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 var(--space-4);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    aspect-ratio: var(--ar, 3 / 2);
    text-decoration: none;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--dur-hover) var(--ease-out);
}

.ms-card:hover {
    box-shadow: var(--shadow-lift);
}

.ms-card figcaption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    padding: var(--space-5) var(--space-4) var(--space-4);
    background-image: var(--color-scrim);
    color: var(--color-on-primary);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
}

.ms-card figcaption small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-on-dark-soft);
    margin-top: 2px;
}

/* ==========================================================================
   CTA bands
   ========================================================================== */

.ctaband {
    position: relative;
    background: var(--color-primary);
    color: var(--color-on-primary);
    overflow: hidden;
}

.ctaband::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 5px;
    background-image: var(--gradient-warm);
}

.ctaband h2 {
    color: var(--color-on-primary);
}

.ctaband p {
    color: var(--color-on-dark-soft);
    max-width: 56ch;
    margin-inline: auto;
}

.ctaband__inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.ctaband__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-2);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
    padding: var(--space-5);
}

@media (min-width: 768px) {
    .form-card {
        padding: var(--space-7);
    }
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.field label,
.fieldset__legend {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.5;
}

.field .help {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-muted-foreground);
    margin: 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-foreground);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}

textarea {
    min-height: 140px;
    resize: vertical;
}

select {
    appearance: none;
    background-image: var(--icon-chevron);
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-inline-end: 2.75rem;
}

[dir="rtl"] select {
    background-position: left 1rem center;
    padding-inline-end: 2.75rem;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-muted-foreground);
    opacity: 1;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-focus-halo);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: var(--color-destructive);
}

.field__error {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-destructive);
    margin: 0;
}

.fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--space-5);
}

.fieldset__legend {
    display: block;
    padding: 0;
    margin-bottom: var(--space-3);
}

/* Selectable option cards / chips inside the funnel */
.opt-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .opt-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.opt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-height: 64px;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
}

.opt:hover {
    border-color: var(--color-accent);
}

.opt input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.opt__label {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
}

.opt__note {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-muted-foreground);
}

.opt:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-background);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

.opt:has(input:focus-visible) {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
}

.opt.is-checked {
    border-color: var(--color-accent);
    background: var(--color-background);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

/* Form result messages */
.form-msg {
    display: none;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-top: var(--space-5);
}

.form-msg.is-shown {
    display: flex;
}

.form-msg svg {
    width: 22px;
    height: 22px;
    margin-top: 2px;
}

.form-msg strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    margin-bottom: 2px;
}

.form-msg--ok {
    background: var(--color-success-soft);
    border-color: var(--color-success);
    color: var(--color-primary);
}

.form-msg--ok svg {
    color: var(--color-success);
}

.form-msg--err {
    background: var(--color-destructive-soft);
    border-color: var(--color-destructive);
    color: var(--color-destructive);
}

.form-msg--err svg {
    color: var(--color-destructive);
}

/* ==========================================================================
   Multi-step funnel
   ========================================================================== */

.funnel-page {
    display: none;
}

.funnel-page.active {
    display: block;
}

.steps {
    display: flex;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6);
}

.steps li {
    flex: 1;
    margin: 0;
}

.steps__mark {
    display: block;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--color-border);
    margin-bottom: var(--space-2);
    transition: background-color 260ms var(--ease-out);
}

.steps li.is-done .steps__mark,
.steps li.is-current .steps__mark {
    background: var(--color-accent);
}

.steps__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
    line-height: 1.4;
}

.steps li.is-current .steps__label {
    color: var(--color-primary);
}

.step-head {
    margin-bottom: var(--space-5);
}

.step-head h3 {
    margin-bottom: var(--space-2);
}

.step-head p {
    font-size: 0.9375rem;
    color: var(--color-muted-foreground);
    margin: 0;
}

.step-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.step-nav .btn {
    flex: 1;
    min-width: 140px;
}

@media (min-width: 640px) {
    .step-nav .btn {
        flex: 0 1 auto;
    }
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.faq-list {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin: 0;
}

.faq-list li {
    margin: 0;
}

.faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--dur-hover) var(--ease-out);
}

.faq-item:hover {
    box-shadow: var(--shadow-card);
}

.faq-item.is-hidden {
    display: none;
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    min-height: 60px;
    padding: var(--space-4) var(--space-5);
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: start;
    cursor: pointer;
    transition: color var(--dur-hover) var(--ease-out);
}

.faq-q:hover {
    color: var(--color-accent-ink);
}

.faq-q svg {
    width: 22px;
    height: 22px;
    color: var(--color-accent);
    transition: transform 200ms var(--ease-out);
}

.faq-q[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.faq-a {
    padding: 0 var(--space-5) var(--space-5);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-foreground);
}

.faq-a[hidden] {
    display: none;
}

.faq-a p {
    margin-bottom: var(--space-3);
}

.faq-a p:last-child {
    margin-bottom: 0;
}

.faq-group {
    margin-bottom: var(--space-8);
}

.faq-group.is-hidden {
    display: none;
}

.faq-group h3 {
    font-size: 1.125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: var(--space-4);
}

:lang(he) .faq-group h3,
:lang(ka) .faq-group h3 {
    text-transform: none;
}

/* ==========================================================================
   About page bits
   ========================================================================== */

.prose {
    max-width: 68ch;
}

.prose h2 {
    margin-top: var(--space-8);
}

.prose h2:first-child {
    margin-top: 0;
}

.dropcap::first-letter {
    float: inline-start;
    font-family: var(--font-display);
    font-size: 3.4em;
    line-height: 0.82;
    font-weight: 800;
    color: var(--color-accent-ink);
    margin-inline-end: 0.08em;
    margin-top: 0.06em;
}

.value {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.value__num {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-accent);
    letter-spacing: -0.03em;
}

.steps-visual {
    display: grid;
    gap: var(--space-4);
    counter-reset: sv;
}

@media (min-width: 768px) {
    .steps-visual {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.sv {
    position: relative;
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.sv__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: var(--space-3);
}

.sv h3 {
    font-size: 1.0625rem;
    margin-bottom: var(--space-2);
}

.sv p {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--color-muted-foreground);
    margin: 0;
}

.langs {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .langs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.langcard {
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.langcard__code {
    display: block;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.1;
    margin-bottom: var(--space-2);
}

.langcard__name {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-grid {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1.25fr 1fr;
        gap: var(--space-8);
        align-items: start;
    }
}

.info-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    margin: 0;
}

.info-list li:last-child {
    border-bottom: 0;
}

.info-list svg {
    width: 20px;
    height: 20px;
    color: var(--color-accent);
    margin-top: 4px;
}

.info-list dt,
.info-list .info-k {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
    line-height: 1.5;
}

:lang(he) .info-list .info-k,
:lang(ka) .info-list .info-k {
    text-transform: none;
}

.info-list .info-v {
    display: block;
    font-size: 1rem;
    color: var(--color-foreground);
    line-height: 1.6;
}

.quicklinks {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .quicklinks {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.quicklink {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: transparent;
    text-decoration: none;
    color: var(--color-primary);
    transition: border-color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
}

.quicklink:hover,
.quicklink:focus-visible {
    border-color: var(--color-accent);
    background: var(--color-surface);
    transform: translateY(-4px);
    color: var(--color-primary);
}

.quicklink strong {
    font-family: var(--font-display);
    font-size: 1.0625rem;
}

.quicklink span {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    line-height: 1.6;
}

/* ==========================================================================
   Privacy page
   ========================================================================== */

.pagehead {
    background: var(--color-muted);
    padding-top: calc(var(--header-h) + var(--space-8));
    padding-bottom: var(--space-8);
}

/* Stone Sage falls under 4.5:1 on the Sand band — the lede and the
   last-updated line both take Mountain Green here. */
.pagehead .lede,
.pagehead .credit {
    color: var(--color-secondary);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
    font-size: 0.875rem;
    color: var(--color-secondary);
}

.breadcrumb li {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.breadcrumb a {
    color: var(--color-secondary);
}

.breadcrumb a:hover {
    color: var(--color-primary);
}

.legal-layout {
    display: grid;
    gap: var(--space-7);
}

@media (min-width: 1024px) {
    .legal-layout {
        grid-template-columns: 260px 1fr;
        gap: var(--space-9);
        align-items: start;
    }

    .toc {
        position: sticky;
        top: calc(var(--header-h) + var(--space-5));
    }
}

.toc__title {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: var(--space-3);
}

:lang(he) .toc__title,
:lang(ka) .toc__title {
    text-transform: none;
}

.toc__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 1024px) {
    .toc__list {
        flex-direction: column;
        gap: 0;
    }
}

.toc__list li {
    margin: 0;
}

.toc__list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-secondary);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}

.toc__list a:hover {
    border-color: var(--color-accent);
    color: var(--color-primary);
}

@media (min-width: 1024px) {
    .toc__list a {
        border: 0;
        border-inline-start: 2px solid var(--color-border);
        border-radius: 0;
        background: transparent;
        padding-inline: var(--space-4);
        width: 100%;
    }

    .toc__list a:hover {
        border-inline-start-color: var(--color-accent);
    }
}

.legal {
    max-width: 72ch;
}

.legal h2 {
    font-size: 1.5rem;
    margin-top: var(--space-8);
    scroll-margin-top: calc(var(--header-h) + var(--space-5));
}

.legal h2:first-of-type {
    margin-top: 0;
}

.legal p,
.legal li {
    font-size: 1rem;
    line-height: 1.8;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
    background: var(--color-primary);
    color: var(--color-on-dark-soft);
    border-top: 1px solid var(--color-border);
    padding-block: var(--space-9) var(--space-6);
}

.footer__grid {
    display: grid;
    gap: var(--space-7);
    margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
    .footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* "Destinations & Regions" wraps to two lines while the other three
       headings do not — reserve two lines so all four lists share a baseline. */
    .footer__col h2 {
        min-height: 2.3em;
    }
}

@media (min-width: 1024px) {
    .footer__grid {
        grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

.footer__brand img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-background);
    margin-bottom: var(--space-4);
}

.footer__tagline {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-on-primary);
    margin-bottom: var(--space-3);
    max-width: 26ch;
}

.footer__blurb {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-on-dark-soft);
    max-width: 34ch;
}

.footer__col h2 {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-2);
    margin-bottom: var(--space-4);
}

:lang(he) .footer__col h2,
:lang(ka) .footer__col h2 {
    text-transform: none;
    letter-spacing: 0.02em;
}

.footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__col li {
    margin: 0;
}

.footer__col a,
.footer__meta a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-size: 0.9375rem;
    color: var(--color-on-dark-soft);
    text-decoration: none;
    transition: color var(--dur-hover) var(--ease-out);
}

.footer__col a:hover,
.footer__meta a:hover {
    color: var(--color-accent-2);
    text-decoration: underline;
}

.footer__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-on-dark-hairline);
}

.footer__meta nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__meta nav li {
    margin: 0;
}

.social {
    display: flex;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
    margin-inline-start: auto;
}

.social li {
    margin: 0;
}

.social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-on-dark-faint);
    border-radius: var(--radius-pill);
    color: var(--color-on-dark-soft);
    transition: color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}

.social a:hover {
    color: var(--color-accent-2);
    border-color: var(--color-accent-2);
}

.social svg {
    width: 20px;
    height: 20px;
}

/* Social row on a light surface (contact details card) */
.social--light {
    margin-inline-start: 0;
    margin-top: var(--space-5);
}

.social--light a {
    border-color: var(--color-border);
    color: var(--color-secondary);
}

.social--light a:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-ink);
}

.footer__legal {
    padding-top: var(--space-5);
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--color-on-dark-soft);
}

.footer__legal p {
    margin-bottom: var(--space-2);
}

.footer-signature {
    font-size: 0.75rem;
    text-align: center;
    color: var(--color-on-dark-soft);
    opacity: 0.85;
    margin: var(--space-5) 0 0;
}

.footer-signature a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.footer-signature a:hover {
    color: var(--color-on-primary);
}

/* ==========================================================================
   Reduced motion — collapse every entrance, parallax and sweep
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .is-armed .rv-line > span,
    .rv-line > span {
        transform: none !important;
    }

    .mask-h2,
    .mask-h2.is-armed,
    .mask-h2.is-revealed {
        clip-path: none !important;
    }

    .reveal,
    .reveal.is-armed,
    .stagger.is-armed > *,
    .stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }

    .imask .curtain {
        display: none;
    }

    .imask.is-armed:not(.is-revealed) .ph {
        transform: none !important;
        clip-path: none !important;
    }

    .shine::after {
        display: none;
    }

    .hero__media {
        background-attachment: scroll !important;
    }

    .card:hover,
    .card:focus-within,
    .mini:hover,
    .season:hover,
    .exp:hover,
    .quicklink:hover,
    .btn:hover {
        transform: none;
    }

    .card:hover .ph,
    .card:focus-within .ph,
    .ms-card:hover .ph {
        transform: none;
    }

    .grain {
        opacity: 0.04;
    }
}