/* ==========================================================================
   GreeceAllAround — design system

   Ported from the Claude Design files, which carry no classes at all: every
   value there was an inline style attribute, and hover states were expressed
   as a non-standard `style-hover` attribute with no HTML equivalent. So this
   is authored, not converted.

   Two rules govern everything below.

   1. Logical properties only. `margin-inline-start`, never `margin-left`.
      Two of the nine languages are RTL, and mirroring by hand — or by a build
      step — means every new component is wrong until someone remembers it.
      Written this way, components are correct in RTL by default. The handful
      of properties with no logical form get an explicit [dir="rtl"] override
      sitting directly beneath the rule it corrects.

   2. Accent by context. Blue is the travel guide, terracotta is commerce,
      olive is the directory (phase 2). Sections set --accent; components read
      it. That is what lets one card component serve all three layers.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Brand — reverse-engineered from the design files, which had no :root
       block and repeated every literal inline. */
    --ga-navy: #0B3C5D;
    --ga-navy-70: #3D617C;
    --ga-blue: #1F6FB2;
    --ga-blue-25: #EAF5FB;
    --ga-blue-50: #DCEEF7;
    --ga-blue-fallback: #4E93C6;

    --ga-slate: #5B7386;
    --ga-slate-light: #7A96A8;

    --ga-border: #E3ECF2;
    --ga-border-soft: #EEF3F6;

    --ga-terracotta: #C96F4A;
    --ga-terracotta-dark: #B05E3C;
    --ga-terracotta-border: #EBD2C2;
    --ga-sand: #F5EDD3;

    --ga-olive: #6B7F3A;
    --ga-olive-dark: #55652E;
    --ga-olive-50: #EFF3E3;
    --ga-olive-border: #C9D8C2;

    --ga-saffron: #F2B33D;
    --ga-saffron-dark: #E4A32C;

    --ga-footer-text: #B9D4E6;
    --ga-footer-muted: #7FA3BD;

    --ga-white: #FFFFFF;

    /* The accent a section is currently in. Defaults to the guide layer. */
    --accent: var(--ga-blue);
    --accent-dark: var(--ga-navy);
    --accent-soft: var(--ga-blue-50);
    --accent-border: var(--ga-border);

    /* Type. Fraunces and Figtree cover Latin only; the per-script stacks in
       §2 replace them wholesale for Greek, Cyrillic, Hebrew and Arabic. */
    --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;

    /* Fluid scale. The designs were drawn at two fixed widths (1440 and 390)
       with no breakpoints and no intermediate behaviour, so the ramp between
       them is ours. clamp() keeps it continuous rather than stepping. */
    --text-h1: clamp(2rem, 1.35rem + 2.7vw, 3.5rem);      /* 32 → 56 */
    --text-h2: clamp(1.5rem, 1.19rem + 1.3vw, 2.25rem);   /* 24 → 36 */
    --text-h3: clamp(1.19rem, 1.06rem + 0.53vw, 1.5rem);  /* 19 → 24 */
    --text-lead: clamp(1rem, 0.94rem + 0.27vw, 1.19rem);  /* 16 → 19 */
    --text-body: 1rem;
    --text-sm: 0.875rem;
    --text-xs: 0.8125rem;
    --text-eyebrow: 0.8125rem;

    --leading-display: 1.15;
    /* Overridden per language in §2 — Hebrew and Arabic need more. */
    --leading-body: 1.5;

    /* Spacing — the design's ad-hoc values normalised to a 4px ramp. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Every shadow in the designs is navy-tinted rather than neutral black. */
    --shadow-card: 0 14px 32px rgb(11 60 93 / 0.12);
    --shadow-card-hover: 0 14px 32px rgb(11 60 93 / 0.14);
    --shadow-menu: 0 20px 40px rgb(11 60 93 / 0.12);
    --shadow-overlay: 0 30px 80px rgb(11 60 93 / 0.35);

    --content-max: 1320px;
    --gutter: clamp(1.125rem, 0.5rem + 2.5vw, 3.75rem);   /* 18 → 60 */

    --header-height: 4.75rem;
    --transition: 180ms ease-out;
}

/* --------------------------------------------------------------------------
   2. Per-script typography

   Driven by :lang() rather than [dir], because script and direction are not
   the same axis — Greek and Cyrillic are LTR but still need a different face.
   The stacks themselves come from Language.FontStack in the database, so
   adding a language does not require editing this file; these are the
   fallbacks that apply before that variable is set.
   -------------------------------------------------------------------------- */

:lang(el) { --font-sans: "Noto Sans", system-ui, sans-serif; --leading-body: 1.55; }
:lang(ru) { --font-sans: "Noto Sans", system-ui, sans-serif; --leading-body: 1.55; }

:lang(he) {
    --font-sans: "Noto Sans Hebrew", "Heebo", system-ui, sans-serif;
    /* Hebrew has no true italic; emphasis is weight and colour instead. */
    --leading-body: 1.7;
}

:lang(ar) {
    --font-sans: "Noto Sans Arabic", "Cairo", system-ui, sans-serif;
    --leading-body: 1.85;
}

/* Simplified Chinese. :lang(zh) also matches lang="zh-Hans"/"zh-CN". CJK needs more
   leading than Latin at the same size. */
:lang(zh) {
    --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --leading-body: 1.75;
}

/* Neither brand face covers these scripts, so the display face has to change
   too — otherwise headings silently fall back to a default at wrong metrics. */
:lang(he), :lang(ar), :lang(el), :lang(ru), :lang(zh) {
    --font-display: var(--font-sans);
}

/* Letter-spacing breaks Arabic cursive joining outright: it pulls apart
   letters that must remain connected. Eyebrows are the only place we track
   type, so they are the only place this has to be undone. */
:lang(ar) .eyebrow { letter-spacing: normal; }

/* --------------------------------------------------------------------------
   3. Reset and base
   -------------------------------------------------------------------------- */

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

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--ga-navy);
    background: var(--ga-white);
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: var(--leading-display);
    margin: 0;
    text-wrap: balance;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); font-weight: 500; }

p { margin: 0; text-wrap: pretty; }

a { color: var(--ga-blue); text-decoration: none; }
a:hover { color: var(--ga-navy); }

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

button { font: inherit; cursor: pointer; }

::placeholder { color: var(--ga-slate-light); opacity: 1; }

/* Focus was never designed — the source files have no focus styles at all, so
   keyboard users currently get whatever the browser supplies, on top of cards
   that are not focusable in the first place. */
:focus-visible {
    outline: 3px solid var(--ga-blue);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--space-4);
    z-index: 100;
    background: var(--ga-navy);
    color: var(--ga-white);
    padding: var(--space-3) var(--space-5);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.skip-link:focus { inset-block-start: 0; color: var(--ga-white); }

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

/* Latin text inside an RTL paragraph — partner domains, prices, URLs — must be
   isolated, or the bidi algorithm reorders the surrounding punctuation and
   renders things like "tour/example.partner//:https". */
.ltr-isolate {
    unicode-bidi: isolate;
    direction: ltr;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.container {
    /* inline-size:100% is load-bearing, not redundant. In normal block flow an
       auto-width box already fills its parent, but as a grid or flex item the
       auto inline margins below absorb the free space instead — the box shrinks
       to fit-content and centres itself. Without this, .container silently
       changes width depending on what its parent's display happens to be. */
    inline-size: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }

.section--sand { background: var(--ga-sand); }
.section--tint { background: var(--ga-blue-50); }
.section--navy { background: var(--ga-navy); color: var(--ga-footer-text); }

/* Accent scoping: a section declares which layer it belongs to, and every
   component inside inherits it. */
.accent-guide {
    --accent: var(--ga-blue);
    --accent-dark: var(--ga-navy);
    --accent-soft: var(--ga-blue-50);
    --accent-border: var(--ga-border);
}
.accent-commerce {
    --accent: var(--ga-terracotta);
    --accent-dark: var(--ga-terracotta-dark);
    --accent-soft: var(--ga-sand);
    --accent-border: var(--ga-terracotta-border);
}
.accent-directory {
    --accent: var(--ga-olive);
    --accent-dark: var(--ga-olive-dark);
    --accent-soft: var(--ga-olive-50);
    --accent-border: var(--ga-olive-border);
}

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Mobile card rails. The designs turn several grids into horizontal scrollers
   below 768px rather than stacking them. */
@media (max-width: 47.99em) {
    .grid--rail {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
        /* Bleed to the viewport edge so cards run off-screen as designed. */
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
    }
    .grid--rail::-webkit-scrollbar { display: none; }
    .grid--rail > * { flex: 0 0 min(80vw, 15rem); scroll-snap-align: start; }
}

/* --------------------------------------------------------------------------
   5. Section header — eyebrow + heading + optional "see all"
   Used roughly ten times across the designs.
   -------------------------------------------------------------------------- */

.section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-end: var(--space-8);
}

.eyebrow {
    font-size: var(--text-eyebrow);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-block-end: var(--space-2);
}

.section-header__sub {
    color: var(--ga-slate);
    font-size: var(--text-sm);
    margin-block-start: var(--space-2);
}

/* --------------------------------------------------------------------------
   6. Directional affordances

   The design bakes → ↗ ▾ into text nodes as literal characters (~45 of them).
   Under RTL a literal → points the wrong way, and it cannot be flipped by CSS
   because it is content, not decoration. So arrows are pseudo-elements here.
   -------------------------------------------------------------------------- */

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--accent);
}

.link-arrow::after {
    content: "→";
    transition: transform var(--transition);
}

[dir="rtl"] .link-arrow::after { content: "←"; }

.link-arrow:hover::after { transform: translateX(3px); }
[dir="rtl"] .link-arrow:hover::after { transform: translateX(-3px); }

/* Outbound marker. Mirrored in RTL so it still points away from the text. */
.link-external::after {
    content: "↗";
    font-size: 0.9em;
}
[dir="rtl"] .link-external::after { content: "↖"; }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    transition: background var(--transition), color var(--transition);
    /* The designs use 44px targets on mobile; keep that everywhere. */
    min-block-size: 2.75rem;
}

.btn--primary { background: var(--accent); color: var(--ga-white); }
.btn--primary:hover { background: var(--accent-dark); color: var(--ga-white); }

.btn--outline {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent-border);
}
.btn--outline:hover { background: var(--accent-soft); color: var(--accent-dark); }

.btn--saffron { background: var(--ga-saffron); color: var(--ga-navy); }
.btn--saffron:hover { background: var(--ga-saffron-dark); color: var(--ga-navy); }

.btn--block { inline-size: 100%; }

/* --------------------------------------------------------------------------
   8. Badges and pills
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.badge--floating {
    position: absolute;
    /* Logical: pins to the right edge under RTL without an override. */
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    background: rgb(255 255 255 / 0.92);
    color: var(--ga-navy);
    backdrop-filter: blur(4px);
}

.badge--bottom {
    inset-block-start: auto;
    inset-block-end: var(--space-3);
}

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */

.card {
    display: flex;
    flex-direction: column;
    background: var(--ga-white);
    border: 1px solid var(--ga-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    color: inherit;
    transition: transform var(--transition), box-shadow var(--transition);
}

/* Cards are anchors here. In the source they were div[cursor:pointer], which
   means they were neither keyboard-reachable nor crawlable — the destination
   grid had no links in it at all. */
a.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    color: inherit;
}

.card__media {
    position: relative;
    aspect-ratio: 3 / 2;
    background-color: var(--ga-blue-fallback);
    overflow: hidden;
}

.card__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* Product card image. Halved from the original 4:5 portrait to 8:5, so the picture
   is half as tall relative to its width — on the homepage strip and the marketplace.
   (This is the class the product card actually uses; the .card--product rules below
   are not applied because the partial renders a plain .card.) */
.card__media--tall { aspect-ratio: 8 / 5; }

/* Framed cards: the photo is inset within the white card with its own rounded
   corners, rather than bleeding to the card edge — the artboard look. */
.card--destination,
.card--product,
.card--story,
.card--island,
.card--highlight {
    padding: var(--space-2);
}
.card--destination .card__media,
.card--product .card__media,
.card--story .card__media,
.card--island .card__media,
.card--highlight .card__media {
    border-radius: var(--radius-sm);
}
.card--destination .card__body,
.card--product .card__body,
.card--story .card__body,
.card--island .card__body,
.card--highlight .card__body {
    padding-inline: var(--space-3);
    padding-block-start: var(--space-3);
}

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

.card__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-h3);
    line-height: 1.25;
}

.card__meta {
    font-size: var(--text-xs);
    color: var(--ga-slate);
}

.card__teaser {
    font-size: var(--text-sm);
    color: var(--ga-navy-70);
}

.card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-start: auto;
    padding-block-start: var(--space-3);
}

.card__price {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ga-terracotta);
}

/* Dashed call-to-action tile that closes several grids in the designs. */
.card--cta {
    border-style: dashed;
    border-color: var(--accent-border);
    background: var(--accent-soft);
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-6);
    text-align: start;
}

/* --------------------------------------------------------------------------
   10. Motion

   The designs specify card lift and slow hero pans with no reduced-motion
   guard anywhere.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    a.card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   11. Site header
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    background: var(--ga-white);
    border-block-end: 1px solid var(--ga-border);
}

.site-header__inner {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    min-block-size: var(--header-height);
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.logo { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ga-navy); }

/* Brand logo image, sized to the wordmark. The source is square with a little
   internal whitespace, so 2.5rem sits visually level with the text. */
.logo__mark {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    object-fit: contain;
    flex: none;
}

.logo__word { font-family: var(--font-display); font-weight: 600; font-size: 1.3125rem; }

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

.site-nav__item { position: static; }

.site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: 0;
    padding-block: var(--space-2);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ga-navy);
    border-block-end: 2px solid transparent;
}

.site-nav__link:hover,
.site-nav__link[aria-expanded="true"] { border-block-end-color: var(--accent); }
.site-nav__link.is-active { border-block-end-color: var(--accent); font-weight: 600; }

.site-nav__chevron {
    inline-size: 0; block-size: 0;
    border-inline: 4px solid transparent;
    border-block-start: 5px solid currentColor;
}

/* The mega panel spans the viewport and anchors to the header rather than to a
   magic pixel offset — the source hardcoded top:76px, which was already wrong
   whenever the announcement bar was showing. */
.megamenu {
    position: absolute;
    inset-inline: 0;
    background: var(--ga-white);
    border-block-end: 1px solid var(--ga-border);
    box-shadow: var(--shadow-menu);
    padding-block: var(--space-8) var(--space-10);
}

.megamenu[hidden] { display: none; }

.megamenu__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--space-10);
}

.megamenu__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.megamenu__links a { color: var(--ga-navy); font-size: var(--text-sm); }
.megamenu__links a:hover { color: var(--accent); }

/* No-JS fallback: keyboard focus alone opens the panel. */
.site-nav__item:focus-within .megamenu { display: block; }

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    /* Logical, so the cluster stays on the trailing edge under RTL. */
    margin-inline-start: auto;
}

.icon-btn {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%;
    color: var(--ga-slate-light);
    flex: none;
}
.icon-btn:hover { background: var(--ga-blue-50); color: var(--ga-navy); }
.icon-btn svg {
    inline-size: 1.25rem; block-size: 1.25rem;
    fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round;
}

/* --------------------------------------------------------------------------
   12. Language switcher
   -------------------------------------------------------------------------- */

.lang-switcher { position: relative; }

.lang-switcher__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ga-slate);
    min-block-size: 2.75rem;
}
.lang-switcher__trigger:hover { color: var(--ga-navy); }

.lang-switcher__chevron {
    inline-size: 0; block-size: 0;
    border-inline: 4px solid transparent;
    border-block-start: 5px solid currentColor;
}

.lang-switcher__menu {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    /* Anchors to the correct edge in both directions with no override. */
    inset-inline-end: 0;
    z-index: 50;
    min-inline-size: 12rem;
    max-block-size: 60vh;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: var(--space-2);
    background: var(--ga-white);
    border: 1px solid var(--ga-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-menu);
}
.lang-switcher__menu[hidden] { display: none; }

.lang-switcher__item {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--ga-navy);
    /* Each option carries its own dir in the markup; start respects it. */
    text-align: start;
}
.lang-switcher__item:hover { background: var(--ga-blue-50); }
.lang-switcher__item.is-current { font-weight: 600; background: var(--ga-blue-50); }
.lang-switcher__item.is-unavailable { color: var(--ga-slate-light); cursor: not-allowed; }
.lang-switcher__item.is-unavailable:hover { background: none; }

/* --------------------------------------------------------------------------
   13. Mobile navigation
   -------------------------------------------------------------------------- */

.mobile-toggle {
    display: none;
    background: none;
    border: 0;
    inline-size: 2.75rem;
    block-size: 2.75rem;
}

.mobile-toggle__bars,
.mobile-toggle__bars::before,
.mobile-toggle__bars::after {
    display: block;
    inline-size: 1.25rem;
    block-size: 2px;
    background: var(--ga-navy);
    border-radius: 2px;
}
.mobile-toggle__bars { position: relative; margin-inline: auto; }
.mobile-toggle__bars::before,
.mobile-toggle__bars::after { content: ""; position: absolute; }
.mobile-toggle__bars::before { inset-block-start: -6px; }
.mobile-toggle__bars::after { inset-block-start: 6px; inline-size: 0.875rem; }

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgb(11 60 93 / 0.45);
}
.mobile-menu[hidden] { display: none; }

.mobile-menu__panel {
    background: var(--ga-white);
    block-size: 100%;
    inline-size: min(20rem, 85vw);
    padding: var(--space-6);
    overflow-y: auto;
    /* Opens from the leading edge, so it comes in from the right under RTL. */
    margin-inline-end: auto;
    border-inline-end: 1px solid var(--ga-border);
    box-shadow: 24px 0 60px rgb(11 60 93 / 0.25);
}

/* box-shadow has no logical form, so this offset is mirrored by hand. It is one
   of only a handful of places in the whole stylesheet that needs a dir override. */
[dir="rtl"] .mobile-menu__panel { box-shadow: -24px 0 60px rgb(11 60 93 / 0.25); }

.mobile-menu__list,
.mobile-menu__sub { list-style: none; margin: 0; padding: 0; }
.mobile-menu__list > li { border-block-end: 1px solid var(--ga-border-soft); }
.mobile-menu__list a { display: block; padding-block: var(--space-3); color: var(--ga-navy); }
.mobile-menu__sub { padding-inline-start: var(--space-4); }
.mobile-menu__sub a { color: var(--ga-slate); font-size: var(--text-sm); }

@media (max-width: 63.99em) {
    .site-nav, .site-header__cta { display: none; }
    .mobile-toggle { display: block; }

    /* Match the mobile artboard: hamburger left, logo centred, search right. The
       language switcher and CTA move into the menu, so the header does not overflow
       the narrow viewport — which was pushing the hamburger off-screen. */
    .site-header__inner { gap: var(--space-3); }
    .mobile-toggle { order: -2; }
    .logo { order: -1; margin-inline: auto; }
    .site-header__actions { order: 0; margin-inline-start: 0; gap: var(--space-1); }
    .site-header__actions .lang-switcher { display: none; }
}

/* --------------------------------------------------------------------------
   14. Site footer
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--ga-navy);
    color: var(--ga-footer-text);
    padding-block: var(--space-12) var(--space-10);
    /* No top margin: the light-blue trust strip must meet the footer with no gap,
       as in the artboard. Pages that need breathing room before the footer supply
       it with their own last section. */
}

.site-footer a { color: var(--ga-footer-text); }
.site-footer a:hover { color: var(--ga-white); }

.site-footer__newsletter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block-end: var(--space-10);
    border-block-end: 1px solid rgb(255 255 255 / 0.14);
}

.site-footer__heading {
    font-family: var(--font-display);
    font-size: 1.625rem;
    color: var(--ga-white);
}
.site-footer__sub { font-size: var(--text-sm); margin-block-start: var(--space-2); }

.newsletter-form {
    display: flex;
    gap: var(--space-2);
    flex: 1;
    min-inline-size: min(100%, 22rem);
    max-inline-size: 30rem;
}

.newsletter-form__input {
    flex: 1;
    padding: var(--space-3) var(--space-5);
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.08);
    color: var(--ga-white);
    min-block-size: 2.75rem;
}
.newsletter-form__input::placeholder { color: var(--ga-footer-muted); }

.site-footer__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--space-10);
    padding-block: var(--space-10);
}

.site-footer__brandname {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1875rem;
    color: var(--ga-white);
}
.site-footer__colheading { color: var(--ga-white); }
.site-footer__links {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--space-3);
    font-size: var(--text-sm);
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid rgb(255 255 255 / 0.14);
    font-size: var(--text-xs);
    color: var(--ga-footer-muted);
}

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

/* Language codes, compact and dot-separated, inline after the copyright. */
.site-footer__copyright {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.site-footer__langs { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.site-footer__langs a {
    color: var(--ga-footer-muted);
    font-weight: 600;
    letter-spacing: 0.03em;
}
.site-footer__langs a::before { content: "·"; margin-inline-end: var(--space-2); }
.site-footer__langs a[aria-current] { color: var(--ga-white); }

/* --------------------------------------------------------------------------
   15. Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    display: grid;
    /* Home hero centres vertically (see .hero--home); destination/region heroes
       bottom-align via their own rule. */
    align-content: center;
    min-block-size: clamp(22rem, 45vw, 35rem);
    padding-block: var(--space-12);
    background-color: var(--ga-blue-fallback);
    background-size: cover;
    background-position: center;
    color: var(--ga-white);
    isolation: isolate;
}

/* The scrim runs from the inline-start edge so white text stays legible over a
   bright photo. In the source this was a fixed 90deg gradient, which under RTL
   darkened the empty side and left the headline sitting on open sky. Using a
   logical direction keyword ties it to the text instead. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to right,
        rgb(11 60 93 / 0.62) 0%,
        rgb(11 60 93 / 0.24) 55%,
        rgb(11 60 93 / 0.05) 100%);
}

[dir="rtl"] .hero::before {
    background: linear-gradient(
        to left,
        rgb(11 60 93 / 0.62) 0%,
        rgb(11 60 93 / 0.24) 55%,
        rgb(11 60 93 / 0.05) 100%);
}

.hero__content { max-inline-size: 48rem; }

.hero__title {
    color: var(--ga-white);
    text-shadow: 0 2px 24px rgb(11 60 93 / 0.25);
}

.hero__lede {
    margin-block-start: var(--space-4);
    max-inline-size: 34rem;
    font-size: var(--text-lead);
    color: var(--ga-blue-25);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    font-size: var(--text-xs);
    color: var(--ga-blue-50);
}
.breadcrumb a { color: inherit; text-decoration: underline; }
.breadcrumb li + li::before { content: "/"; margin-inline-end: var(--space-2); opacity: 0.6; }

/* --------------------------------------------------------------------------
   16. Quick facts bar
   -------------------------------------------------------------------------- */

.quickfacts {
    background: var(--ga-navy);
    color: var(--ga-footer-text);
    padding-block: var(--space-6);
}

.quickfacts__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--space-6);
    margin: 0;
}

.quickfacts__label {
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ga-footer-muted);
    margin: 0 0 var(--space-1);
}
.quickfacts__value { color: var(--ga-white); font-size: var(--text-sm); margin: 0; }

/* --------------------------------------------------------------------------
   17. Info panel and trust strip
   -------------------------------------------------------------------------- */

.info-panel {
    background: var(--ga-blue-50);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}

.info-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--space-8);
}

.info-panel__label {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    margin-block-end: var(--space-2);
}
.info-panel__text { font-size: var(--text-sm); color: var(--ga-navy-70); }

/* --------------------------------------------------------------------------
   18. Rating
   -------------------------------------------------------------------------- */

.rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--ga-slate);
}

/* Two stacked star rows clipped to a percentage, so a 4.2 renders as 4.2 rather
   than as five filled stars. */
.rating__stars {
    position: relative;
    display: inline-block;
    letter-spacing: 1px;
    color: var(--ga-border);
    /* Star glyphs are neutral-direction, so the row would flow right-to-left
       under RTL and the partial fill would clip from the wrong end. */
    direction: ltr;
}

.rating__fill {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--ga-saffron);
}

/* --------------------------------------------------------------------------
   19. Announcement bar
   -------------------------------------------------------------------------- */

.announcement {
    background: var(--ga-navy);
    color: var(--ga-blue-50);
    font-size: 0.8125rem;
    text-align: center;
    padding: var(--space-2) var(--space-6);
    letter-spacing: 0.02em;
}

.announcement a {
    color: var(--ga-saffron);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.announcement a:hover { color: var(--ga-white); }

/* --------------------------------------------------------------------------
   20. Hero search and filter chips
   -------------------------------------------------------------------------- */

.hero-search {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--ga-white);
    border-radius: var(--radius-pill);
    /* Asymmetric by design: the magnifier needs room on the leading edge while the
       button sits flush against the trailing edge. */
    padding: 6px;
    padding-inline-start: var(--space-6);
    max-inline-size: 35rem;
    box-shadow: 0 12px 32px rgb(11 60 93 / 0.25);
}

.hero-search__icon {
    flex: none;
    inline-size: 18px;
    block-size: 18px;
    fill: none;
    stroke: var(--ga-slate-light);
    stroke-width: 1.5;
    stroke-linecap: round;
}

.hero-search__input {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    color: var(--ga-navy);
    padding: var(--space-3) var(--space-4);
}

.hero-search__button {
    flex: none;
    background: var(--ga-terracotta);
    color: var(--ga-white);
    border: 0;
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-6);
    font-size: 0.9375rem;
    font-weight: 600;
    min-block-size: 2.75rem;
    transition: background var(--transition);
}
.hero-search__button:hover { background: var(--ga-terracotta-dark); }

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

.hero-chip {
    display: inline-block;
    background: rgb(255 255 255 / 0.16);
    border: 1px solid rgb(255 255 255 / 0.4);
    color: var(--ga-white);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(2px);
    transition: background var(--transition);
}
.hero-chip:hover { background: rgb(255 255 255 / 0.3); color: var(--ga-white); }

/* The design stacks the hero block with a 22px rhythm. */
.hero__content { display: flex; flex-direction: column; gap: 1.375rem; }

/* --------------------------------------------------------------------------
   21. Card sizing — matched to the artboard
   -------------------------------------------------------------------------- */

/* Destination card: fixed 200px media band, body is a row with the arrow
   pushed to the trailing edge. */
.card--destination .card__media { aspect-ratio: auto; block-size: 200px; }

.card--destination .card__body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 1.125rem 1.25rem 1.25rem;
}

.card--destination .card__title { font-size: 1.3125rem; }

.card--destination .card__teaser {
    font-size: var(--text-sm);
    margin-block-start: 3px;
    color: var(--ga-slate);
}

.card--destination .card__arrow {
    flex: none;
    color: var(--accent);
    font-size: 1.25rem;
    line-height: 1;
}
[dir="rtl"] .card--destination .card__arrow { transform: scaleX(-1); }

/* Product card: 4:5 media, no border in the design — the sand band separates it. */
.card--product { border-color: transparent; }
/* Half the previous image height: 4:5 (portrait) → 8:5 (landscape) halves the
   picture's height relative to its width, on the homepage strip and the marketplace. */
.card--product .card__media { aspect-ratio: 8 / 5; block-size: auto; }
.card--product .card__body { padding: 1rem 1.125rem 1.125rem; gap: var(--space-2); }
.card--product .card__title { font-family: var(--font-sans); font-size: 0.96875rem; font-weight: 600; }
.card--product .card__meta { font-size: 0.78125rem; }

.card--product .card__cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ga-terracotta);
    border: 1px solid var(--ga-terracotta-border);
    border-radius: 18px;
    padding: var(--space-2) 0.875rem;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}
a.card:hover .card__cta { background: var(--ga-terracotta); color: var(--ga-white); }
.card__cta-fixed { white-space: nowrap; }

/* Business card: 150px media, stacked body. */
.card--business .card__media { aspect-ratio: auto; block-size: 150px; }
.card--business .card__body { padding: 1.125rem 1.25rem 1.25rem; gap: var(--space-3); }
.card--business .card__title { font-size: 1.25rem; }

.card--business__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.card--business .card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-block-start: var(--space-1);
    border: 1px solid var(--ga-olive-border);
    color: var(--ga-olive-dark);
    border-radius: 18px;
    padding: 9px 0;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: background var(--transition);
}
a.card:hover .card--business .card__cta,
.card--business .card__cta:hover { background: var(--ga-olive-50); }

/* "Open now" — only rendered when opening hours say so. */
.badge--open {
    background: var(--ga-olive-50);
    color: var(--ga-olive);
    white-space: nowrap;
}
.badge--open::before { content: "●"; font-size: 0.7em; }

/* --------------------------------------------------------------------------
   22. Section rhythm from the artboard
   -------------------------------------------------------------------------- */

.section-header { align-items: baseline; margin-block-end: 0; }
.section-header h2 { margin-block-start: var(--space-2); }
.section__grid { margin-block-start: 2.25rem; }

.section--sand { padding-block: 4rem 4.5rem; }
.trust-strip { background: var(--ga-blue-50); padding-block: var(--space-12); }
.trust-strip__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-10);
}
.trust-strip__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.1875rem;
    margin-block-end: var(--space-2);
}
.trust-strip__body { font-size: var(--text-sm); color: var(--ga-navy-70); }

/* --------------------------------------------------------------------------
   23. Footer — brand column and exact grid from the artboard
   -------------------------------------------------------------------------- */

.site-footer__columns {
    /* The design uses 1.4fr for the brand column and 1fr for the three link
       columns; collapses to a single column on narrow screens. */
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
}

@media (max-width: 63.99em) {
    .site-footer__columns { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
}

.site-footer__blurb {
    font-size: 0.84375rem;
    line-height: 1.6;
    max-inline-size: 17.5rem;
    margin-block-start: var(--space-3);
}

/* --------------------------------------------------------------------------
   24. Destination / region pages
   -------------------------------------------------------------------------- */

.hero--home { align-content: center; min-block-size: clamp(30rem, 40vw, 35rem); }
.hero--destination { min-block-size: clamp(20rem, 36vw, 32.5rem); }
.hero--region { min-block-size: clamp(18rem, 33vw, 30rem); }

/* Destination heroes bottom-align their content, unlike the home hero which
   centres it. */
.hero--destination, .hero--region { align-content: end; }

/* About: a 1.6fr / 1fr split with the side column carrying an image and the
   "Good to know" box. */
.about-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-10);
    align-items: start;
}

@media (max-width: 47.99em) {
    .about-grid { grid-template-columns: 1fr; }
}

.about-grid__headline { margin-block: var(--space-2) var(--space-5); }

.prose { color: var(--ga-navy-70); font-size: var(--text-lead); }
.prose p { margin-block-end: var(--space-4); }
.prose strong { color: var(--ga-navy); }

.about-grid__side { display: flex; flex-direction: column; gap: var(--space-5); }

.about-grid__image {
    inline-size: 100%;
    block-size: 15rem;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.good-to-know {
    background: var(--ga-blue-50);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
}
.good-to-know__title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    margin-block-end: var(--space-3);
}
.good-to-know ul { margin: 0; padding-inline-start: var(--space-4); }
.good-to-know li { font-size: var(--text-sm); color: var(--ga-navy-70); margin-block-end: var(--space-2); }

/* Info panel heading (seasonal / getting around). */
.info-panel__heading {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    margin-block-end: var(--space-6);
}

/* Highlight card: taller media band per the artboard. */
.card--highlight .card__media { aspect-ratio: auto; block-size: 220px; }

/* Island tile: 190px media, arrow in the body row like the destination card. */
.card--island .card__media { aspect-ratio: auto; block-size: 190px; }
.card--island .card__body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.card--island .card__arrow { flex: none; color: var(--accent); font-size: 1.25rem; }
[dir="rtl"] .card--island .card__arrow { transform: scaleX(-1); }

/* Region map. */
.region-map {
    block-size: clamp(20rem, 40vw, 32.5rem);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--ga-border);
}
.region-map__label {
    background: var(--ga-white);
    border: 1px solid var(--ga-border);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ga-navy);
    box-shadow: 0 2px 6px rgb(11 60 93 / 0.15);
}

/* --------------------------------------------------------------------------
   25. Fixed-column grids

   auto-fit is right when a grid is always full (the homepage's 8 destinations),
   but it balloons a lone card to full width. Content pages have variable counts
   — one product, three islands — so they use explicit column counts, which keep
   every card at its designed proportion regardless of how many there are.
   -------------------------------------------------------------------------- */

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

@media (max-width: 63.99em) {
    .grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 47.99em) {
    /* On mobile these become the horizontal rail (via grid--rail) or stack. */
    .grid--cols-3:not(.grid--rail),
    .grid--cols-4:not(.grid--rail) { grid-template-columns: 1fr; }

    /* Product listings stay two-up on mobile, as in the artboard. */
    .grid--mobile-2 { grid-template-columns: 1fr 1fr !important; gap: var(--space-3); }
}

/* --------------------------------------------------------------------------
   26. Mobile bottom navigation

   The design's primary mobile nav. Fixed to the viewport bottom, hidden above
   the mobile breakpoint. Content clears it with padding applied to body only
   while it is visible.
   -------------------------------------------------------------------------- */

.bottom-nav { display: none; }

@media (max-width: 47.99em) {
    .bottom-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 50;
        background: var(--ga-white);
        border-block-start: 1px solid var(--ga-border);
        padding-block: var(--space-2) max(var(--space-2), env(safe-area-inset-bottom));
    }

    .bottom-nav__tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding-block: var(--space-1);
        color: var(--ga-slate-light);
        font-size: 0;
    }
    .bottom-nav__tab.is-active { color: var(--ga-blue); }

    .bottom-nav__icon {
        inline-size: 22px;
        block-size: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .bottom-nav__label { font-size: 0.65625rem; font-weight: 600; }

    /* Clear the fixed bar so the footer and last section are reachable. */
    body { padding-block-end: 4.25rem; }
    .site-footer { margin-block-end: 0; }
}

/* --------------------------------------------------------------------------
   27. Mobile refinements — match the 390px artboards

   The mobile designs are not just the desktop layout narrowed: quick facts
   collapse to two columns, the hero shortens and bottom-aligns, and section
   padding tightens. These bring the responsive build in line with them.
   -------------------------------------------------------------------------- */

@media (max-width: 47.99em) {
    .quickfacts__list { grid-template-columns: 1fr 1fr; gap: var(--space-4); }

    .hero { min-block-size: 25rem; }
    .hero--destination, .hero--region { min-block-size: 19rem; }

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

    /* The hero search stacks its button below the field on the narrowest screens
       rather than crushing it. */
    .hero-search { flex-wrap: wrap; border-radius: var(--radius-lg); }
    .hero-search__button { inline-size: 100%; }

    /* About grid: image and "good to know" move below the prose. */
    .about-grid__image { block-size: 12rem; }

    /* Info panels stack. */
    .info-panel { padding: var(--space-6); }
}

/* --------------------------------------------------------------------------
   28. Marketplace / culture / blog pages
   -------------------------------------------------------------------------- */

/* Tinted (non-image) page hero — marketplace and blog index. */
.page-hero {
    background: var(--ga-blue-50);
    padding-block: var(--space-12) var(--space-10);
}
.accent-commerce.page-hero { background: var(--ga-sand); }

.page-hero__title { margin-block: var(--space-4) var(--space-3); }
.page-hero__lede {
    font-size: var(--text-lead);
    color: var(--ga-navy-70);
    max-inline-size: 40rem;
}
.page-hero .breadcrumb { color: var(--ga-navy-70); }
.page-hero .breadcrumb a { color: var(--ga-navy-70); }

/* Article hero uses the image treatment. */
.hero--article { min-block-size: clamp(16rem, 30vw, 26rem); align-content: end; }

/* Filters. */
.filters { padding-block-start: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.filters__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.filters__label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ga-slate-light);
    inline-size: 5rem;
}
.filters__chips { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.filters__count { font-size: var(--text-sm); color: var(--ga-slate-light); }

.filter-chip {
    font-size: 0.84375rem;
    font-weight: 600;
    padding: var(--space-2) var(--space-4);
    border-radius: 18px;
    border: 1px solid var(--ga-border);
    background: var(--ga-white);
    color: var(--ga-navy);
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.filter-chip.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ga-white);
}

/* Maker-recruitment CTA tile, centred variant. */
.card--cta-center {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-3);
    border-color: #9CC8E8;
    background: #F2F8FC;
}
.card--cta-center .card__teaser { max-inline-size: 18rem; }

/* How it works — navy three-step band. */
.how-it-works { background: var(--ga-navy); color: var(--ga-footer-text); }
.how-it-works__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-10);
}
.how-it-works__step {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    color: var(--ga-white);
    margin-block-end: var(--space-2);
}
.how-it-works__body { font-size: var(--text-sm); color: var(--ga-footer-text); }

/* Story card: taller media band. */
.card--story .card__media { aspect-ratio: auto; block-size: 210px; }

/* Culture → marketplace cross-link band. */
.cross-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    flex-wrap: wrap;
}
.cross-link__title { font-family: var(--font-display); font-weight: 400; font-size: 1.625rem; }
.cross-link__body { font-size: var(--text-sm); color: var(--ga-slate); margin-block-start: var(--space-2); max-inline-size: 34rem; }

/* Article body. */
.article__body { max-inline-size: 44rem; padding-block: var(--space-10); }
.article__meta {
    display: flex; flex-wrap: wrap; gap: var(--space-3);
    align-items: center; font-size: var(--text-sm); color: var(--ga-slate);
    margin-block-end: var(--space-5);
}
.article__excerpt {
    font-size: var(--text-h3);
    font-family: var(--font-display);
    color: var(--ga-navy);
    line-height: 1.4;
    margin-block-end: var(--space-6);
}