/* ============================================================
   ITC — International Trade Center Mongolia
   WEBSITE V2 — stylesheet
   ------------------------------------------------------------
   Standalone. This file imports nothing and is imported by
   nothing; templates/css/style.css (production) is untouched and
   is never loaded on /v2/. The palette re-declares the approved
   ITC values under a --v2- prefix so the two sites remain one
   brand while staying completely independent as code.

   Colour budget, held deliberately:
     ~60%  ivory / warm neutral   — where reading happens
     ~30%  navy / architectural   — where photography leads
     ~10%  muted gold             — a CTA, an index, an edge
   Gold is never a surface. The moment it becomes one it stops
   meaning "this matters".

   One restrained dark glass panel belongs to the cinematic hero;
   the reading sections stay architectural and tactile.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */

:root {

    /* ---- Architectural navy ---- */
    --v2-navy-deep:   #001D39;
    --v2-navy:        #0A4174;
    --v2-navy-soft:   #123A5E;

    /* ---- Soft architectural gray ---- */
    --v2-slate:       #49769F;
    --v2-gray:        #8D9AA8;
    --v2-gray-pale:   #E4E7EB;

    /* ---- Warm ivory: the majority surface ---- */
    --v2-ivory:       #F7F4ED;
    --v2-ivory-warm:  #EFE9DC;
    --v2-white:       #FFFFFF;

    /* ---- Muted gold. Sparing by design ---- */
    --v2-gold:        #B79A63;
    --v2-gold-bright: #C9AC76;
    --v2-gold-deep:   #8E7647;

    /* ---- Ink ---- */
    --v2-ink:         #0F1B2A;
    --v2-ink-soft:    #3D4A5C;
    --v2-ink-muted:   #5E6C7E;   /* AA on ivory and on white */
    --v2-ink-inv:     rgba(247, 244, 237, 0.94);
    --v2-ink-inv-soft: rgba(247, 244, 237, 0.66);

    /* ---- Lines ---- */
    --v2-line:        1px solid rgba(15, 27, 42, 0.10);
    --v2-line-dark:   1px solid rgba(189, 216, 233, 0.18);
    --v2-line-gold:   1px solid rgba(183, 154, 99, 0.45);

    /* ---- Typography -----------------------------------------
       No webfont is requested. Mongolian Cyrillic is the primary
       script and every face in this stack actually ships it:
       Segoe UI (Windows), SF Pro via system-ui (macOS, iOS),
       Roboto (Android), Noto Sans (Linux). A webfont here would
       buy a little Latin personality and cost a third-party
       request plus a Cyrillic fallback flash — a bad trade on a
       page whose headline is a photograph.                     */
    --v2-font: "Inter", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;

    /* Sentence-case editorial display, kept fluid for both scripts. */
    --v2-fs-hero:    clamp(3rem, 4.5vw, 5.25rem);
    --v2-fs-h2:      clamp(1.625rem, 1.05rem + 2.2vw, 3rem);
    --v2-fs-h3:      clamp(1.375rem, 1.05rem + 1.4vw, 2.125rem);
    --v2-fs-lead:    clamp(1.0625rem, 0.99rem + 0.34vw, 1.25rem);
    --v2-fs-body:    1.0625rem;
    --v2-fs-small:   0.9375rem;
    --v2-fs-micro:   0.75rem;
    --v2-fs-index:   clamp(3rem, 5.5vw, 5.75rem);
    /* The showcase headline sits between h2 and h3: larger than a card
       heading because it is the voice of the section, smaller than the
       section title above it. */
    --v2-fs-showcase: clamp(1.5rem, 1.05rem + 1.75vw, 2.5rem);

    --v2-lh-display: 1.0;
    --v2-lh-heading: 1.16;
    --v2-lh-body:    1.68;

    --v2-ls-display: -0.035em;
    --v2-ls-heading: -0.02em;
    /* Tracked-out capitals are reserved for the one short Latin label
       per section. 0.20em read as decorative at small sizes, so the
       eyebrow was tightened; nothing else in the page is tracked out
       and no Mongolian is set in tracked capitals at all. */
    --v2-ls-eyebrow:  0.13em;

    /* ---- Layout ---- */
    /* A square photograph stays large without pushing the choice rail
       below the fold on short desktop screens. */
    --v2-stage-gap:  clamp(1.5rem, 3.2vw, 3.5rem);
    --v2-stage-col1: min(54svh, 44vw, 540px);
    --v2-copy-max: 52ch;
    --v2-thumb-size: clamp(3.25rem, 5vw, 4.375rem);

    --v2-max:        1440px;
    --v2-gutter:     clamp(1.25rem, 5vw, 4rem);
    --v2-section-y:  clamp(4.5rem, 9vw, 9rem);
    --v2-header-h:   64px;

    /* ---- Corners: architectural, near-square ---- */
    --v2-r-none: 0;
    --v2-r-sm:   2px;
    --v2-r:      4px;

    /* ---- Elevation: wide and soft, never a hard drop ---- */
    --v2-shadow:    0 24px 60px -28px rgba(0, 29, 57, 0.34);
    --v2-shadow-lg: 0 40px 90px -36px rgba(0, 29, 57, 0.48);

    /* ---- Motion ----------------------------------------------
       Four durations and two curves, used everywhere, so the page
       moves like one system rather than like six people's work.  */
    --v2-ease-out: cubic-bezier(0.16, 1, 0.30, 1);
    --v2-ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
    --v2-dur-xs: 160ms;
    --v2-dur-sm: 280ms;
    --v2-dur-md: 520ms;
    --v2-dur-lg: 820ms;
    /* The preview-to-stage flight. Shorter than the hero's entrance on
       purpose: an entrance plays once and can afford to be unhurried,
       while this one answers a click and has to feel like a response. At
       820ms it read as slightly slow to acknowledge the press. */
    --v2-dur-flight: 700ms;
    --v2-stagger: 70ms;

    /* ---- Depth ---- */
    --v2-z-field:  0;
    --v2-z-base:   1;
    --v2-z-header: 200;
}

@media (min-width: 1280px) {
    :root { --v2-header-h: 88px; }
}


/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchored sections must not land under the fixed header. */
    scroll-padding-top: var(--v2-header-h);
}

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

body.v2 {
    margin: 0;
    /* clip, not hidden: it prevents a stray horizontal scrollbar
       without turning the body into a scroll container, which
       would break the sticky header. */
    overflow-x: clip;
    background-color: var(--v2-ivory);
    color: var(--v2-ink);
    font-family: var(--v2-font);
    font-size: var(--v2-fs-body);
    line-height: var(--v2-lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: var(--v2-ls-heading); line-height: var(--v2-lh-heading); }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
    cursor: pointer;
}

/* One focus treatment for the whole page. Gold, offset, always
   visible — never removed, only replaced. */
:focus-visible {
    outline: 2px solid var(--v2-gold);
    outline-offset: 3px;
    border-radius: var(--v2-r-sm);
}

.v2-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 0.75rem 1.25rem;
    background: var(--v2-navy-deep);
    color: var(--v2-ink-inv);
    font-size: var(--v2-fs-small);
}
.v2-skip:focus { left: 0; }

/* Visually hidden, still announced. */
.v2-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

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

body.v2.is-locked { overflow: hidden; }


/* ------------------------------------------------------------
   3. TYPE COMPONENTS
   ------------------------------------------------------------ */

.v2-eyebrow {
    margin: 0 0 1.25rem;
    font-size: var(--v2-fs-micro);
    font-weight: 600;
    letter-spacing: var(--v2-ls-eyebrow);
    text-transform: uppercase;
    color: var(--v2-gold);
}

/* Mongolian is never set in tracked-out uppercase: Cyrillic loses
   too much word-shape. Sections whose eyebrow is Mongolian opt out. */
.v2-eyebrow--mn { text-transform: none; letter-spacing: 0.06em; }

.v2-h2 {
    font-size: var(--v2-fs-h2);
    max-width: 22ch;
}

.v2-lead {
    margin-top: 1.25rem;
    font-size: var(--v2-fs-lead);
    color: var(--v2-ink-soft);
    max-width: 52ch;
}


/* ------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------ */

.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.85rem 1.75rem;
    border-radius: var(--v2-r-sm);
    font-size: var(--v2-fs-small);
    font-weight: 600;
    /* Sentence case, not uppercase. "ТАЛБАЙ СОНИРХОХ" set in tracked
       capitals is exactly the decorative treatment Cyrillic reads
       worst in; the dictionary already stores these strings cased
       correctly, so the button simply stops overriding them. */
    letter-spacing: 0.01em;
    /* Transform + colour only. Nothing here moves a neighbour. */
    transition: background-color var(--v2-dur-xs) var(--v2-ease-out),
                color var(--v2-dur-xs) var(--v2-ease-out),
                border-color var(--v2-dur-xs) var(--v2-ease-out),
                transform var(--v2-dur-xs) var(--v2-ease-out);
}

.v2-btn--gold {
    background-color: var(--v2-gold);
    color: var(--v2-navy-deep);
    border: 1px solid var(--v2-gold);
}

.v2-btn--ghost {
    border: 1px solid currentColor;
    color: inherit;
}

@media (hover: hover) and (pointer: fine) {
    .v2-btn--gold:hover  { background-color: var(--v2-gold-bright); border-color: var(--v2-gold-bright); transform: translateY(-2px); }
    .v2-btn--ghost:hover { background-color: currentColor; transform: translateY(-2px); }
    .v2-btn--ghost:hover > * { color: var(--v2-navy-deep); }
}

.v2-btn:active { transform: translateY(0); }


/* ------------------------------------------------------------
   5. HEADER
   ------------------------------------------------------------ */

.v2-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--v2-z-header);
    padding-top: env(safe-area-inset-top, 0px);
    background-color: rgba(0, 22, 42, 0.12);
    border-bottom: 1px solid rgba(247, 244, 237, 0.22);
    color: var(--v2-ivory);
    transition: background-color var(--v2-dur-sm) var(--v2-ease-out),
                border-color var(--v2-dur-sm) var(--v2-ease-out),
                color var(--v2-dur-sm) var(--v2-ease-out);
}

.v2-header.is-stuck {
    background-color: var(--v2-ivory);
    border-bottom: var(--v2-line);
    color: var(--v2-ink);
    box-shadow: 0 10px 30px -24px rgba(0, 29, 57, 0.45);
}

.v2-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--v2-header-h);
}

.v2-logo {
    --v2-logo-size: 184px;
    position: relative;
    display: block;
    width: var(--v2-logo-size);
    height: calc(var(--v2-logo-size) * 0.294);
    flex: 0 0 auto;
}

.v2-logo__crop { position: absolute; inset: 0; overflow: hidden; }
.v2-logo__layer {
    position: absolute;
    top: calc(var(--v2-logo-size) * -0.3547);
    left: 0;
    width: var(--v2-logo-size);
    height: var(--v2-logo-size);
    background: url('/assets/v2/itc-logo-on-dark.png') 0 0 / 100% 100% no-repeat;
}
.v2-logo__layer--symbol { clip-path: inset(0 68% 0 0); }
.v2-logo__layer--wordmark { clip-path: inset(0 34% 0 30%); }
.v2-logo__layer--subtitle { clip-path: inset(0 0 0 65%); }
.v2-logo__layer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/assets/v2/itc-logo-on-light.png') 0 0 / 100% 100% no-repeat;
    opacity: 0;
    transition: opacity var(--v2-dur-sm) var(--v2-ease-out);
}
.v2-header.is-stuck .v2-logo__layer::after { opacity: 1; }

@media (max-width: 599px) { .v2-logo { --v2-logo-size: 151px; } }

.v2-header__actions { display: flex; align-items: center; gap: 1rem; }

.v2-lang { display: flex; align-items: center; gap: 0.4rem; }

.v2-lang__btn {
    padding: 0.35rem 0.2rem;
    font-size: var(--v2-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    opacity: 0.6;
    transition: opacity var(--v2-dur-xs) var(--v2-ease-out);
}
.v2-lang__btn.is-active { opacity: 1; color: var(--v2-gold); }
.v2-lang__div { opacity: 0.35; }

@media (hover: hover) and (pointer: fine) {
    .v2-lang__btn:hover { opacity: 1; }
}

.v2-header__cta { display: none; }

@media (min-width: 1280px) {
    .v2-header__cta { display: inline-flex; min-height: 40px; padding: 0.55rem 1.25rem; }
}

@media (hover: hover) and (pointer: fine) {
    .v2-header__cta:hover {
        background-color: var(--v2-gold);
        border-color: var(--v2-gold);
        color: var(--v2-navy-deep);
    }
}

/* ---- Navigation ---- */

.v2-nav__list { display: flex; }

.v2-nav__link {
    position: relative;
    display: inline-block;
    padding: 0.5rem 0;
    font-size: var(--v2-fs-small);
    letter-spacing: 0.01em;
}

/* scaleX underline: transform only, so it never reflows the row. */
.v2-nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background-color: var(--v2-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--v2-dur-xs) var(--v2-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .v2-nav__link:hover::after { transform: scaleX(1); }
}
.v2-nav__link:focus-visible::after { transform: scaleX(1); }

/* ---- Burger ---- */

.v2-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin-right: -0.5rem;
}

.v2-burger__bars,
.v2-burger__bars::before,
.v2-burger__bars::after {
    display: block;
    width: 22px; height: 1.5px;
    background-color: currentColor;
    transition: transform var(--v2-dur-sm) var(--v2-ease-out),
                opacity var(--v2-dur-xs) var(--v2-ease-out);
}
.v2-burger__bars { position: relative; }
.v2-burger__bars::before,
.v2-burger__bars::after { content: ""; position: absolute; left: 0; }
.v2-burger__bars::before { top: -7px; }
.v2-burger__bars::after  { top:  7px; }

.v2-header.is-open .v2-burger__bars { background-color: transparent; }
.v2-header.is-open .v2-burger__bars::before { transform: translateY(7px) rotate(45deg); }
.v2-header.is-open .v2-burger__bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile panel ---- */

@media (max-width: 1279px) {

    .v2-nav {
        position: fixed;
        inset: calc(var(--v2-header-h) + env(safe-area-inset-top, 0px)) 0 auto 0;
        max-height: calc(100svh - var(--v2-header-h));
        overflow-y: auto;
        background-color: var(--v2-navy-deep);
        color: var(--v2-ink-inv);
        border-bottom: var(--v2-line-dark);
        /* Slides on transform; height is never animated. */
        transform: translate3d(0, -12px, 0);
        opacity: 0;
        visibility: hidden;
        transition: transform var(--v2-dur-sm) var(--v2-ease-out),
                    opacity var(--v2-dur-sm) var(--v2-ease-out),
                    visibility 0s linear var(--v2-dur-sm);
    }

    .v2-header.is-open .v2-nav {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        visibility: visible;
        transition-delay: 0s, 0s, 0s;
    }

    .v2-nav__list { flex-direction: column; padding: 1rem var(--v2-gutter) 2rem; }

    .v2-nav__link {
        display: block;
        padding: 0.95rem 0;
        font-size: 1.125rem;
        border-bottom: var(--v2-line-dark);
    }
    .v2-nav__link::after { display: none; }
}

@media (min-width: 1280px) {
    .v2-burger { display: none; }
    .v2-nav__list { gap: 2rem; }
}


/* ------------------------------------------------------------
   6. DOWNTOWN ARRIVAL + ADDRESS OVERVIEW
   ------------------------------------------------------------ */

.v2-hero {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    overflow: hidden;
    background: var(--v2-navy-deep);
    color: var(--v2-ivory);
}

.v2-hero__media,
.v2-hero__media::after {
    position: absolute;
    inset: 0;
}

.v2-hero__media { z-index: -1; overflow: hidden; }
.v2-hero__media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 56%;
}
.v2-hero__media::after {
    content: "";
    background:
        linear-gradient(90deg, rgba(0, 17, 34, 0.92) 0%, rgba(0, 21, 41, 0.78) 37%, rgba(0, 21, 41, 0.26) 78%),
        linear-gradient(180deg, rgba(0, 17, 34, 0.45) 0%, rgba(0, 17, 34, 0.02) 44%, rgba(0, 17, 34, 0.72) 100%);
}

.v2-hero__content {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
    min-height: 100svh;
    padding-top: calc(var(--v2-header-h) + clamp(2.5rem, 6vh, 5rem));
    padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
}

.v2-hero__copy { min-width: 0; max-width: 900px; }
.v2-hero__edition {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 clamp(1.4rem, 3vh, 2.4rem);
    color: var(--v2-gold-bright);
    font-size: var(--v2-fs-micro);
    font-weight: 700;
    letter-spacing: 0.16em;
}
.v2-hero__edition::before {
    content: "";
    display: block;
    width: 32px;
    height: 1px;
    background: currentColor;
}
.v2-hero__title {
    margin: 0;
    font-size: clamp(3.7rem, 7.1vw, 7.4rem);
    font-weight: 650;
    line-height: 0.98;
    letter-spacing: -0.065em;
}
.v2-hero__line { display: block; overflow: hidden; padding: 0.04em 0 0.12em; margin: -0.04em 0 -0.12em; }
.v2-hero__line-in { display: block; width: max-content; max-width: 100%; }
.v2-hero__line--gold { color: var(--v2-gold-bright); }
.v2-hero__statement {
    max-width: 32ch;
    margin: clamp(1.4rem, 3vh, 2rem) 0 0;
    color: var(--v2-ivory);
    font-size: clamp(1.15rem, 1.3vw, 1.45rem);
    font-weight: 500;
    line-height: 1.5;
}
.v2-hero__proof {
    max-width: 60ch;
    margin: 0.9rem 0 0;
    color: rgba(247, 244, 237, 0.77);
    font-size: clamp(0.8rem, 0.95vw, 0.95rem);
    line-height: 1.5;
}
.v2-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem 2rem;
    margin-top: clamp(1.6rem, 3.6vh, 2.5rem);
}
.v2-hero__primary {
    min-width: 190px;
    min-height: 54px;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.v2-hero__phone {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.15rem 0;
    border-bottom: 1px solid rgba(201, 172, 118, 0.7);
}
.v2-hero__phone span { color: rgba(247, 244, 237, 0.72); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.13em; }
.v2-hero__phone strong { font-size: 1.16rem; font-weight: 600; letter-spacing: 0.015em; }

/* One controlled glass surface gives the large photograph a stable
   business proof panel. Its opaque fallback keeps contrast reliable. */
.v2-hero__glass {
    align-self: center;
    min-width: 0;
    padding: 1.5rem 1.65rem 1.65rem;
    border: 1px solid rgba(230, 232, 231, 0.27);
    background: rgba(0, 20, 40, 0.84);
    box-shadow: 0 20px 55px rgba(0, 15, 30, 0.18), inset 0 1px rgba(255, 255, 255, 0.09);
}
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
    .v2-hero__glass { background: rgba(0, 20, 40, 0.63); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
.v2-hero__glass-eyebrow {
    margin: 0 0 0.8rem;
    color: var(--v2-gold-bright);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
}
.v2-hero__facts { margin: 0; }
.v2-hero__facts > div { padding: 0.8rem 0; border-top: 1px solid rgba(247, 244, 237, 0.21); }
.v2-hero__facts dt { color: rgba(247, 244, 237, 0.72); font-size: 0.72rem; line-height: 1.3; }
.v2-hero__facts dd { margin: 0.18rem 0 0; color: #fff; font-size: clamp(1.05rem, 1.6vw, 1.42rem); font-weight: 600; line-height: 1.2; }
.v2-hero__facts dd span { font-size: 0.72em; }
.v2-hero__facts > div:last-child dd { max-width: 20ch; font-size: 1.03rem; }

.v2-hero__routes {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    min-width: 0;
    border: 1px solid rgba(247, 244, 237, 0.23);
    background: rgba(247, 244, 237, 0.23);
}
.v2-hero__route {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    min-height: 82px;
    padding: 0.75rem;
    background: rgba(0, 23, 45, 0.82);
    transition: background-color var(--v2-dur-sm) var(--v2-ease-out);
}
.v2-hero__route img { width: 56px; height: 56px; flex: 0 0 56px; object-fit: cover; }
.v2-hero__route span { display: flex; flex-direction: column; min-width: 0; gap: 0.2rem; }
.v2-hero__route small { color: var(--v2-gold-bright); font-size: 0.66rem; font-weight: 700; }
.v2-hero__route strong { font-size: clamp(0.72rem, 0.92vw, 0.9rem); font-weight: 600; line-height: 1.25; }
.v2-hero__route b { align-self: flex-start; margin-left: auto; color: var(--v2-gold-bright); font-weight: 400; }
@media (hover: hover) and (pointer: fine) {
    .v2-hero__route:hover { background: rgba(12, 48, 77, 0.96); }
    .v2-hero__phone:hover { color: var(--v2-gold-bright); }
}

@media (max-width: 1100px) {
    .v2-hero__content {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        align-content: space-between;
        gap: 2.25rem;
    }
    .v2-hero__glass { width: 100%; padding: 1.3rem 1.5rem; }
    .v2-hero__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
    .v2-hero__facts > div { min-width: 0; }
    .v2-hero__facts dd { font-size: clamp(1rem, 2.3vw, 1.35rem); }
    .v2-hero__routes { grid-column: 1; }
}

@media (max-width: 699px) {
    .v2-hero__media-img { object-position: 57% center; }
    .v2-hero__media::after {
        background: linear-gradient(90deg, rgba(0, 17, 34, 0.87), rgba(0, 19, 37, 0.62)),
                    linear-gradient(180deg, rgba(0, 17, 34, 0.22), rgba(0, 17, 34, 0.63));
    }
    .v2-hero__content {
        gap: 1.55rem;
        padding-top: calc(var(--v2-header-h) + 1.8rem);
        padding-bottom: 1.2rem;
    }
    .v2-hero__edition { margin-bottom: 1.25rem; }
    .v2-hero__title { font-size: clamp(2.3rem, 9.3vw, 4.25rem); letter-spacing: -0.057em; }
    .v2-hero__statement { max-width: 30ch; margin-top: 1.3rem; font-size: 1.075rem; }
    .v2-hero__proof { margin-top: 0.7rem; font-size: 0.78rem; }
    .v2-hero__actions { margin-top: 1.5rem; gap: 0.9rem 1.2rem; }
    .v2-hero__primary { min-width: 164px; min-height: 50px; padding-inline: 1.1rem; font-size: 0.83rem; }
    .v2-hero__glass { padding: 1rem 1.1rem; }
    .v2-hero__glass-eyebrow { margin-bottom: 0.45rem; }
    .v2-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem 1rem; }
    .v2-hero__facts > div { padding: 0.55rem 0; }
    .v2-hero__facts dd { font-size: 1rem; }
    .v2-hero__facts > div:last-child dd { font-size: 0.88rem; }
    .v2-hero__routes {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        scroll-snap-type: x proximity;
    }
    .v2-hero__route { flex: 0 0 190px; min-height: 75px; scroll-snap-align: start; }
    .v2-hero__route img { width: 47px; height: 47px; flex-basis: 47px; }
    .v2-hero__route strong { font-size: 0.78rem; }
}

@media (max-width: 359px) {
    .v2-hero__title { font-size: 2.18rem; }
    .v2-hero__primary { min-width: 150px; }
    .v2-hero__phone strong { font-size: 1.02rem; }
}

/* Entrance uses only opacity and transform. It never gates navigation
   or the CTA, and reduced-motion users receive the static composition. */
@media (prefers-reduced-motion: no-preference) {
    .v2-logo__layer--symbol { animation: v2-hero-reveal 500ms var(--v2-ease-out) 0ms both; }
    .v2-logo__layer--wordmark { animation: v2-hero-reveal 500ms var(--v2-ease-out) 90ms both; }
    .v2-logo__layer--subtitle { animation: v2-hero-reveal 500ms var(--v2-ease-out) 180ms both; }
    .v2-hero__edition { animation: v2-hero-reveal 560ms var(--v2-ease-out) 120ms both; }
    .v2-hero__line:first-child .v2-hero__line-in { animation: v2-hero-rise 700ms var(--v2-ease-out) 180ms both; }
    .v2-hero__line:nth-child(2) .v2-hero__line-in { animation: v2-hero-rise 700ms var(--v2-ease-out) 270ms both; }
    .v2-hero__statement { animation: v2-hero-reveal 560ms var(--v2-ease-out) 350ms both; }
    .v2-hero__proof { animation: v2-hero-reveal 540ms var(--v2-ease-out) 430ms both; }
    .v2-hero__actions { animation: v2-hero-action 480ms var(--v2-ease-out) both; }
    .v2-hero__glass { animation: v2-hero-reveal 600ms var(--v2-ease-out) 550ms both; }
    .v2-hero__routes { animation: v2-hero-reveal 600ms var(--v2-ease-out) 600ms both; }
    .v2-hero__media-img { animation: v2-hero-depth 15s ease-out both; }
}
@keyframes v2-hero-reveal {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes v2-hero-action {
    from { opacity: 0.82; transform: translate3d(0, 4px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes v2-hero-rise {
    from { transform: translate3d(0, 105%, 0); }
    to { transform: translate3d(0, 0, 0); }
}
@keyframes v2-hero-depth {
    from { transform: scale(1); }
    to { transform: scale(1.025); }
}

.v2-overview {
    position: relative;
    padding-block: clamp(4.25rem, 6.5vw, 6.75rem);
    background: var(--v2-white);
}
.v2-overview::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--v2-gutter);
    width: clamp(3rem, 6vw, 5rem);
    height: 2px;
    background: var(--v2-gold);
}

.v2-overview__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(2rem, 3.6vw, 4rem);
}

.v2-overview__heading h2 {
    max-width: 17ch;
    font-size: clamp(2.2rem, 4vw, 4.5rem);
    font-weight: 600;
    line-height: 1.13;
    letter-spacing: -0.04em;
}

.v2-overview__intro {
    align-self: end;
    max-width: 41ch;
    color: var(--v2-ink-soft);
    font-size: var(--v2-fs-lead);
}

.v2-overview__intro .v2-editorial-link {
    margin-top: 1.5rem;
    color: var(--v2-ink);
}

.v2-overview__facts {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
    margin: clamp(0.5rem, 1.5vw, 1.5rem) 0 0;
    padding-top: 1.2rem;
    border-top: var(--v2-line);
}

.v2-overview__facts > div { min-width: 0; }
.v2-overview__facts dt {
    margin-bottom: 0.55rem;
    color: var(--v2-ink-muted);
    font-size: var(--v2-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.v2-overview__facts dd {
    margin: 0;
    font-size: clamp(1.6rem, 2.5vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.1;
}
.v2-overview__facts dd span { font-size: 0.55em; }

@media (max-width: 699px) {
    .v2-overview__inner { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
    .v2-overview__facts { grid-column: 1; gap: 1.5rem 0.75rem; }
    .v2-overview__facts > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 379px) {
    .v2-overview__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ------------------------------------------------------------
   7. INTERACTIVE SHOWCASE
   ------------------------------------------------------------ */

.v2-showcase {
    position: relative;
    isolation: isolate;
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
    background-color: var(--v2-navy-deep);
    color: var(--v2-ink-inv);
    overflow: hidden;
}

/* The background treatment. One layer, one transition, driven by
   two custom properties the script rewrites on change — so the
   field shifts with the selection instead of animating on its own. */
.v2-showcase__field {
    position: absolute;
    inset: 0;
    z-index: var(--v2-z-field);
    background:
        radial-gradient(120% 90% at var(--v2-field-x, 22%) 18%,
            var(--v2-field-tint, rgba(10, 65, 116, 0.55)) 0%,
            rgba(0, 29, 57, 0) 62%);
    transition: background var(--v2-dur-md) var(--v2-ease-io);
}

.v2-showcase__inner { position: relative; z-index: var(--v2-z-base); }

.v2-showcase__head { margin-bottom: clamp(1.25rem, 2.4vw, 2rem); }
.v2-showcase__head .v2-eyebrow { margin-bottom: 0.6rem; }
.v2-showcase__head .v2-h2 {
    max-width: none;
    font-size: clamp(1.625rem, 3.1vw, 2.375rem);
    line-height: 1.12;
    text-transform: uppercase;
}
.v2-showcase__intro {
    display: none;
    margin-top: 0.6rem;
    max-width: 34ch;
    color: var(--v2-ink-inv-soft);
    font-size: var(--v2-fs-small);
    line-height: 1.45;
}
.v2-showcase.is-enhanced .v2-showcase__intro { display: block; }
.v2-showcase__intro-mobile { display: none; }

@media (max-width: 699px) {
    .v2-showcase__intro-wide { display: none; }
    .v2-showcase__intro-mobile { display: inline; }
}

/* The English title is longer; a slightly smaller setting keeps the
   section heading and the four choices in the same desktop view. */
html[lang="en"] .v2-showcase__head .v2-h2 {
    font-size: clamp(1.6rem, 2.1vw, 2rem);
}

/* ---- Stage ---- */

.v2-stage { display: grid; gap: clamp(3rem, 7vw, 5rem); }

/* The articles share row one; the choice rail takes row two in normal
   flow. The tallest article sets the stage height, so switching does
   not move the controls or the next section. */
.v2-showcase.is-enhanced .v2-stage { gap: 0; }

/* The resting state of an article that is not on stage, and therefore
   also the state the OUTGOING one travels to: displaced a little
   against the direction of travel, and faded. */
.v2-showcase.is-enhanced .v2-exp {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(calc(var(--v2-dir, 1) * -4%), 0, 0);
    transition: opacity var(--v2-dur-md) var(--v2-ease-out),
                transform var(--v2-dur-md) var(--v2-ease-io),
                visibility 0s linear var(--v2-dur-md);
}

/* The incoming article takes its final position INSTANTLY
   (transform 0s). That is deliberate: its movement is the FLIP the
   script runs on the frame below, flying it up from the preview the
   visitor pressed. If the article were also transitioning, the
   script would be measuring a moving target and the two movements
   would fight. The article only fades; the frame travels. */
.v2-showcase.is-enhanced .v2-exp.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity var(--v2-dur-sm) var(--v2-ease-out),
                transform 0s,
                visibility 0s linear 0s;
}

.v2-exp {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: center;
}

/* Tablet and desktop keep photography and information together. */
@media (min-width: 700px) {
    .v2-exp {
        grid-template-columns: var(--v2-stage-col1) minmax(0, 1fr);
        column-gap: var(--v2-stage-gap);
    }
    .v2-showcase.is-enhanced .v2-exp__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        max-width: var(--v2-copy-max);
    }
}

/* ---- Visual ---- */

.v2-exp__visual { position: relative; max-width: min(100%, 460px); }

@media (min-width: 700px) {
    .v2-exp__visual { max-width: none; }
}

@media (min-width: 700px) and (max-width: 1023px) {
    :root { --v2-stage-col1: min(40vw, 380px); }
    .v2-showcase { padding-block: clamp(2.25rem, 4vw, 3rem); }
}

@media (min-width: 1024px) {
    .v2-showcase { padding-block: clamp(1.5rem, 2vw, 2.25rem); }
    .v2-showcase__inner { max-width: 1220px; }
    .v2-showcase__head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 1.5rem;
        align-items: end;
        margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
    }
    .v2-showcase__head .v2-eyebrow { grid-column: 1 / -1; }
    .v2-showcase__head .v2-h2 { grid-column: 1; }
    .v2-showcase__intro { grid-column: 2; margin-top: 0; max-width: 24ch; }
}

@media (min-width: 1024px) and (max-height: 820px) {
    .v2-showcase { padding-block: 1.25rem; }
    .v2-showcase__head { margin-bottom: 1rem; }
}

@media (min-width: 1024px) and (max-height: 680px) {
    :root { --v2-thumb-size: 3.25rem; }
    .v2-showcase { padding-block: 0.625rem; }
    .v2-showcase__head { margin-bottom: 0.5rem; }
    .v2-showcase__head .v2-eyebrow { margin-bottom: 0.35rem; }
    .v2-showcase .v2-controls { margin-top: 0.75rem; }
}

.v2-exp__index {
    position: absolute;
    top: 0.08em;
    left: 0.08em;
    z-index: 2;
    font-size: var(--v2-fs-index);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(183, 154, 99, 0.55);
    pointer-events: none;
}

/* Without text-stroke the numeral would be transparent text on a dark
   field — i.e. gone. Fall back to a quiet solid gold instead. */
@supports not (-webkit-text-stroke: 1px currentColor) {
    .v2-exp__index { color: rgba(183, 154, 99, 0.30); }
}

.v2-exp__frame {
    position: relative;
    overflow: hidden;
    /* One square frame for four photographs of three different
       orientations. A square is the only ratio that treats a 2:3
       portrait and a 3:2 landscape with the same restraint; each
       image then fine-tunes its own object-position.

       The preview thumbnails are square for the same reason AND for
       one more: the flight from preview to stage is then a uniform
       scale, so the photograph is never stretched on the way. */
    aspect-ratio: 1 / 1;
    border-radius: var(--v2-r);
    background-color: var(--v2-navy);
    box-shadow: var(--v2-shadow-lg);

    /* transform-origin and the transform itself are written by the
       script during the flight and cleared on the next change. No
       will-change: four permanently promoted layers of this size cost
       real memory on a phone, and transform animations are composited
       without the hint anyway. */
}

.v2-exp__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Body ----
   Five levels, each doing one job: the experience label, the
   headline, the description, the action — with the large outlined
   numeral over the image carrying position. No tracked-out
   Mongolian, and uppercase only on the short Latin section label. */

.v2-exp__body { max-width: 46ch; }

.v2-exp__kicker {
    font-size: var(--v2-fs-small);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--v2-gold);
}

.v2-exp__title {
    margin-top: 0.7rem;
    font-size: var(--v2-fs-showcase);
    line-height: 1.14;
    color: var(--v2-white);
}

.v2-exp__text {
    margin-top: 1.1rem;
    color: var(--v2-ink-inv-soft);
}

.v2-exp__cta { margin-top: 2rem; }

@media (min-width: 700px) and (max-width: 1023px) {
    .v2-exp__title { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
    .v2-exp__text { font-size: var(--v2-fs-small); line-height: 1.55; }
}

/* The entire copy panel follows the image flight as one gesture. */
.v2-showcase.is-enhanced .v2-exp__body {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity var(--v2-dur-md) var(--v2-ease-out),
                transform var(--v2-dur-md) var(--v2-ease-out);
}

.v2-showcase.is-enhanced .v2-exp.is-active .v2-exp__body {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 190ms;
}

/* The copy begins inside the 700ms image flight and settles with it. */

/* ---- Controls ---- */

.v2-controls {
    grid-area: 2 / 1;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    column-gap: clamp(0.75rem, 1.2vw, 1rem);
    margin-top: clamp(0.875rem, 1.8vw, 1.25rem);
    padding-top: clamp(0.75rem, 1.2vw, 1rem);
    border-top: var(--v2-line-dark);
}

/* The arrows frame the four direct choices at tablet and desktop widths. */
.v2-arrow:first-of-type { grid-column: 1; grid-row: 1; }
.v2-arrow:last-of-type  { grid-column: 3; grid-row: 1; }

.v2-controls[hidden] { display: none; }

.v2-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border: var(--v2-line-dark);
    border-radius: var(--v2-r-sm);
    color: var(--v2-ink-inv);
    transition: background-color var(--v2-dur-xs) var(--v2-ease-out),
                border-color var(--v2-dur-xs) var(--v2-ease-out),
                color var(--v2-dur-xs) var(--v2-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .v2-arrow:hover { background-color: var(--v2-gold); border-color: var(--v2-gold); color: var(--v2-navy-deep); }
}

/* The previews keep both the image and the category readable. Their
   square frames remain the measured origins of the FLIP transition. */
.v2-thumbs {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.375rem, 0.8vw, 0.625rem);
}

.v2-thumb {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.4rem, 0.8vw, 0.65rem);
    min-width: 0;
    min-height: 72px;
    padding: 0.4rem 0.5rem;
    border: var(--v2-line-dark);
    border-radius: var(--v2-r-sm);
    color: var(--v2-ink-inv);
    text-align: left;
    background-color: rgba(255, 255, 255, 0.025);
    transition: color var(--v2-dur-sm) var(--v2-ease-out),
                background-color var(--v2-dur-sm) var(--v2-ease-out),
                border-color var(--v2-dur-sm) var(--v2-ease-out);
}
.v2-thumb::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px 0;
    height: 2px;
    background: var(--v2-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--v2-dur-md) var(--v2-ease-out);
}

.v2-thumb__frame {
    position: relative;
    display: block;
    flex: 0 0 var(--v2-thumb-size);
    width: var(--v2-thumb-size);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--v2-r-sm);
    background-color: var(--v2-navy);
    box-shadow: 0 0 0 1px rgba(189, 216, 233, 0.12);
    transition: box-shadow var(--v2-dur-sm) var(--v2-ease-out);
}

.v2-thumb__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.82;
    transition: opacity var(--v2-dur-sm) var(--v2-ease-out);
}

.v2-thumb__meta { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

.v2-thumb__label {
    font-size: clamp(0.75rem, 0.95vw, 0.875rem);
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.v2-thumb__num {
    font-size: var(--v2-fs-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--v2-gold);
    opacity: 0.85;
    transition: opacity var(--v2-dur-sm) var(--v2-ease-out);
}

/* One restrained gold edge communicates the selected experience. */
.v2-thumb.is-active {
    border-color: var(--v2-gold);
    color: var(--v2-white);
    background-color: rgba(183, 154, 99, 0.08);
}
.v2-thumb.is-active .v2-thumb__num { opacity: 1; }
.v2-thumb.is-active .v2-thumb__img { opacity: 1; }
.v2-thumb.is-active .v2-thumb__frame { box-shadow: 0 0 0 2px var(--v2-gold); }
.v2-thumb.is-active::after { transform: scaleX(1); }

@media (hover: hover) and (pointer: fine) {
    .v2-thumb:hover { color: var(--v2-white); background-color: rgba(255, 255, 255, 0.07); }
    .v2-thumb:hover .v2-thumb__img { opacity: 1; }
}

@media (min-width: 700px) and (max-width: 899px) {
    :root { --v2-thumb-size: 3.25rem; }
    .v2-thumb { padding: 0.35rem; }
    .v2-thumb__label { font-size: 0.75rem; }
}

/* On phones, four named images occupy the full row. The previous and
   next controls follow together underneath, with comfortable targets. */
@media (max-width: 699px) {
    :root { --v2-thumb-size: clamp(3rem, 13vw, 4rem); }
    .v2-controls { grid-template-columns: minmax(0, 1fr) 48px 48px; row-gap: 0.75rem; }
    .v2-thumbs { grid-column: 1 / -1; grid-row: 1; }
    .v2-arrow:first-of-type { grid-column: 2; grid-row: 2; }
    .v2-arrow:last-of-type  { grid-column: 3; grid-row: 2; }
    .v2-thumb {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        min-height: 110px;
        padding: 0.4rem 0.2rem;
        text-align: center;
    }
    .v2-thumb__meta { align-items: center; }
    .v2-thumb__label { font-size: 0.7rem; line-height: 1.15; }
    .v2-thumb__num { display: none; }
}


/* ------------------------------------------------------------
   8. ARCHITECTURE AND LOCATION
   ------------------------------------------------------------ */

.v2-architecture {
    padding-block: clamp(4.5rem, 6.8vw, 6.75rem);
    border-top: 1px solid rgba(15, 27, 42, 0.10);
    background: var(--v2-ivory-warm);
}

.v2-architecture__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: clamp(2rem, 5vw, 6rem);
    row-gap: clamp(2.25rem, 3.8vw, 3.75rem);
}

.v2-architecture__head { grid-column: 1 / -1; }
.v2-architecture__head h2 {
    max-width: 20ch;
    font-size: clamp(2.2rem, 4vw, 4.5rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.v2-architecture__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(340px, 42vw, 530px);
    margin: 0;
    padding: clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
    background-color: var(--v2-navy-deep);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 72px 72px;
}

.v2-architecture__visual img {
    width: 100%;
    max-height: 440px;
    object-fit: contain;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.18));
}

.v2-architecture__visual figcaption {
    position: absolute;
    left: 1.4rem;
    bottom: 1.2rem;
    color: var(--v2-ink-inv-soft);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.v2-architecture__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.v2-architecture__intro {
    max-width: 37ch;
    font-size: var(--v2-fs-lead);
    color: var(--v2-ink-soft);
}

.v2-architecture__list {
    display: grid;
    margin: 2rem 0 1.75rem;
    padding: 0;
    list-style: none;
}

.v2-architecture__list li {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.15rem 0;
    border-top: var(--v2-line);
}

.v2-architecture__list li:last-child { border-bottom: var(--v2-line); }
.v2-architecture__list li > span {
    color: var(--v2-gold-deep);
    font-size: var(--v2-fs-micro);
    font-weight: 700;
    letter-spacing: 0.09em;
}
.v2-architecture__list h3 { font-size: 1.125rem; }
.v2-architecture__list p {
    margin-top: 0.3rem;
    color: var(--v2-ink-muted);
    font-size: var(--v2-fs-small);
}
.v2-architecture__content .v2-editorial-link { align-self: flex-start; }

.v2-location {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    min-height: 650px;
    border-top: 1px solid rgba(183, 154, 99, 0.55);
    background: var(--v2-navy-deep);
    color: var(--v2-ink-inv);
}

.v2-location__image {
    position: relative;
    min-height: 650px;
    overflow: hidden;
}

.v2-location__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 44%;
}

.v2-location__image::after {
    content: "";
    position: absolute;
    inset: 55% 0 0;
    background: linear-gradient(transparent, rgba(0, 29, 57, 0.58));
}

.v2-location__image-caption {
    position: absolute;
    z-index: 1;
    left: clamp(1.25rem, 3vw, 3rem);
    bottom: 1.7rem;
    color: var(--v2-white);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.v2-location__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
    padding: clamp(3.5rem, 6vw, 7rem) clamp(2rem, 5vw, 6rem);
}

.v2-location__content h2 {
    max-width: 13ch;
    font-size: clamp(2.3rem, 4.1vw, 4.4rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.v2-location__content p:not(.v2-eyebrow) {
    max-width: 36ch;
    margin-top: 1.6rem;
    color: var(--v2-ink-inv-soft);
}

.v2-location__action {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding-top: 1.5rem;
    border-top: var(--v2-line-dark);
}
.v2-location__action p { margin: 0 !important; font-size: var(--v2-fs-small); }

@media (max-width: 899px) {
    .v2-architecture__inner { grid-template-columns: minmax(0, 1fr); }
    .v2-architecture__head { grid-column: 1; }
    .v2-architecture__visual { min-height: 380px; }
    .v2-location { grid-template-columns: minmax(0, 1fr); }
    .v2-location__image { min-height: 430px; }
    .v2-location__content { min-height: 430px; padding: 3rem var(--v2-gutter); }
}

@media (max-width: 599px) {
    .v2-architecture__visual { min-height: 290px; }
    .v2-architecture__visual img { max-height: 250px; }
    .v2-location__image { min-height: 320px; }
    .v2-location__content { min-height: 370px; gap: 2rem; padding-block: 2.5rem; }
}

/* The grid arrives first; the unaltered render follows by 20px. The
   city photograph reveals from its left edge without geometric movement. */
.v2-js .v2-architecture__visual[data-reveal] img {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity var(--v2-dur-lg) var(--v2-ease-out),
                transform var(--v2-dur-lg) var(--v2-ease-out);
}
.v2-js .v2-architecture__visual[data-reveal].is-in img {
    opacity: 1;
    transform: none;
    transition-delay: 140ms;
}
.v2-js .v2-location__image[data-reveal] {
    transform: none;
}
.v2-js .v2-location__image[data-reveal] img {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 900ms var(--v2-ease-io);
}
.v2-js .v2-location__image[data-reveal].is-in img { clip-path: inset(0 0 0 0); }
.v2-js .v2-location__content > div:first-child[data-reveal] { transform: translate3d(18px, 0, 0); }
.v2-js .v2-location__content > div:first-child[data-reveal].is-in { transform: none; }


/* ------------------------------------------------------------
   9. CONTACT
   ------------------------------------------------------------ */

.v2-contact {
    padding-block: clamp(4.5rem, 7vw, 7rem);
    border-top: 1px solid rgba(183, 154, 99, 0.40);
    background-color: var(--v2-ivory);
    color: var(--v2-ink);
}

.v2-contact__inner { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }

@media (min-width: 1024px) {
    .v2-contact__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: start; }
}

.v2-contact__details { margin-top: 2rem; padding-top: 1.5rem; border-top: var(--v2-line); }
.v2-contact__org { font-weight: 600; }
.v2-contact__place { margin-top: 0.4rem; color: var(--v2-ink-muted); font-size: var(--v2-fs-small); }

.v2-contact__phone { display: inline-flex; flex-direction: column; gap: 0.15rem; margin-top: 1.5rem; }

.v2-contact__phone-label {
    font-size: var(--v2-fs-micro);
    letter-spacing: var(--v2-ls-eyebrow);
    text-transform: uppercase;
    color: var(--v2-ink-muted);
}

.v2-contact__phone-number {
    font-size: 1.5rem;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color var(--v2-dur-xs) var(--v2-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .v2-contact__phone:hover .v2-contact__phone-number { border-bottom-color: var(--v2-gold); }
}

/* ---- Form ---- */

.v2-formcard {
    padding: clamp(1.5rem, 3.4vw, 2.5rem);
    background-color: var(--v2-white);
    border: 1px solid rgba(15, 27, 42, 0.18);
    border-top: 2px solid var(--v2-navy-deep);
    border-radius: var(--v2-r-sm);
}

.v2-form__jsnotice {
    margin-bottom: 1.5rem;
    padding: 0.9rem 1rem;
    border-left: 2px solid var(--v2-gold);
    background-color: var(--v2-ivory-warm);
    font-size: var(--v2-fs-small);
    color: var(--v2-ink-soft);
}
.v2-form__jsnotice[hidden] { display: none; }
.v2-form__jsnotice-en { margin-top: 0.5rem; }

.v2-interest { margin: 0 0 1.75rem; padding: 0; border: 0; }

.v2-interest__legend {
    padding: 0;
    margin-bottom: 0.9rem;
    font-size: var(--v2-fs-micro);
    font-weight: 600;
    letter-spacing: var(--v2-ls-eyebrow);
    text-transform: uppercase;
    color: var(--v2-ink-muted);
}

.v2-interest__options { display: grid; gap: 0.5rem; }

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

.v2-interest__option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    border: var(--v2-line);
    border-radius: var(--v2-r-sm);
    font-size: var(--v2-fs-small);
    cursor: pointer;
    transition: border-color var(--v2-dur-xs) var(--v2-ease-out),
                background-color var(--v2-dur-xs) var(--v2-ease-out);
}

.v2-interest__option:has(.interest__input:checked) {
    border-color: var(--v2-gold-deep);
    background-color: rgba(183, 154, 99, 0.10);
    box-shadow: inset 3px 0 0 var(--v2-gold);
}
.v2-interest__option:has(.interest__input:focus-visible) {
    outline: 2px solid var(--v2-gold-deep);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .v2-interest__option:hover { border-color: var(--v2-gray); }
}

.interest__input { accent-color: var(--v2-gold); width: 18px; height: 18px; flex: 0 0 auto; }

.v2-form__fields { display: grid; gap: 1.1rem; }

@media (min-width: 600px) {
    .v2-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v2-field--full { grid-column: 1 / -1; }
}

.v2-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }

.v2-field__label {
    font-size: var(--v2-fs-micro);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v2-ink-muted);
}

.v2-field__optional { text-transform: none; letter-spacing: 0; opacity: 0.8; }

.v2-field__input {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 0.9rem;
    font: inherit;
    font-size: var(--v2-fs-body);
    color: var(--v2-ink);
    background-color: var(--v2-white);
    border: var(--v2-line);
    border-radius: var(--v2-r-sm);
    transition: border-color var(--v2-dur-xs) var(--v2-ease-out),
                box-shadow var(--v2-dur-xs) var(--v2-ease-out);
}

.v2-field__input--area { min-height: 96px; resize: vertical; }

.v2-field__input:focus {
    outline: none;
    border-color: var(--v2-gold);
    box-shadow: 0 0 0 3px rgba(183, 154, 99, 0.18);
}
.v2-field__input:focus-visible {
    outline: 2px solid var(--v2-gold-deep);
    outline-offset: 1px;
    box-shadow: none;
}

.v2-field__input[aria-invalid="true"] { border-color: #A6432F; }

.field__error {
    margin-top: 0.3rem;
    font-size: var(--v2-fs-small);
    color: #A6432F;
}
.field__error[hidden] { display: none; }

/* Off-screen rather than display:none, so a bot that skips hidden
   inputs still fills it. */
.v2-hp {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.v2-consent {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.25rem 0.7rem;
    margin-top: 1.5rem;
}

.v2-consent__input { margin-top: 0.25rem; accent-color: var(--v2-gold); width: 18px; height: 18px; }
.v2-consent__label { font-size: var(--v2-fs-small); color: var(--v2-ink-soft); cursor: pointer; }

.v2-consent__link {
    grid-column: 2;
    font-size: var(--v2-fs-small);
    color: var(--v2-ink-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.v2-consent .field__error { grid-column: 2; }

.v2-form__actions { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1.75rem; }
.v2-form__submit { align-self: flex-start; min-height: 52px; padding-inline: 2.2rem; font-weight: 700; }
.v2-form__submit[disabled] { opacity: 0.55; cursor: not-allowed; }
.v2-form__note { font-size: var(--v2-fs-small); color: var(--v2-ink-muted); }

@media (max-width: 599px) {
    .v2-contact { padding-block: 3.75rem 4.5rem; }
    .v2-contact__inner { gap: 1.5rem; }
    .v2-contact__details { margin-top: 1.5rem; padding-top: 1.25rem; }
    .v2-contact__phone { margin-top: 1rem; }
    .v2-formcard { padding: 1.25rem; }
}

.v2-form__error { margin-top: 1rem; font-size: var(--v2-fs-small); color: #A6432F; }
.v2-form__error[hidden] { display: none; }

.v2-form__success { text-align: left; }
.v2-form__success[hidden] { display: none; }

.v2-form__success-label {
    font-size: var(--v2-fs-micro);
    font-weight: 600;
    letter-spacing: var(--v2-ls-eyebrow);
    text-transform: uppercase;
    color: var(--v2-gold);
}
.v2-form__success-title { margin-top: 0.75rem; font-size: var(--v2-fs-h3); font-weight: 600; }
.v2-form__success-text { margin-top: 0.75rem; color: var(--v2-ink-soft); }


/* ------------------------------------------------------------
   10. FOOTER
   ------------------------------------------------------------ */

.v2-footer {
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    background-color: var(--v2-navy-deep);
    color: var(--v2-ink-inv);
}

.v2-footer__inner { display: grid; gap: 2.5rem; padding-bottom: 2.5rem; }

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

.v2-footer__mark { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.06em; }
.v2-footer__name { margin-top: 0.5rem; font-size: var(--v2-fs-small); color: var(--v2-ink-inv-soft); }

.v2-footer__list { display: grid; gap: 0.6rem; font-size: var(--v2-fs-small); }
.v2-footer__list a { color: var(--v2-ink-inv-soft); transition: color var(--v2-dur-xs) var(--v2-ease-out); }

@media (hover: hover) and (pointer: fine) {
    .v2-footer__list a:hover { color: var(--v2-gold); }
}

.v2-footer__addr { font-size: var(--v2-fs-small); color: var(--v2-ink-inv-soft); }
.v2-footer__phone { display: inline-block; margin-top: 0.6rem; font-size: 1.25rem; font-weight: 600; }

.v2-footer__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-top: 1.75rem;
    border-top: var(--v2-line-dark);
    font-size: var(--v2-fs-micro);
    color: var(--v2-ink-inv-soft);
}

.v2-footer__preview { letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }


/* ------------------------------------------------------------
   11. SCROLL REVEAL
   ------------------------------------------------------------
   One-way, transform and opacity only, and never applied until
   the script has confirmed it is running (the .v2-js class).
   Without JavaScript the <noscript> block in the document head
   neutralises these rules, so nothing is ever left invisible.
   ------------------------------------------------------------ */

.v2-js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity var(--v2-dur-lg) var(--v2-ease-out),
                transform var(--v2-dur-lg) var(--v2-ease-out);
    transition-delay: var(--v2-reveal-delay, 0ms);
}

.v2-js [data-reveal].is-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.v2-js [data-reveal-role="eyebrow"]:not(.is-in) { transform: translate3d(0, 10px, 0); }
.v2-js [data-reveal-role="heading"]:not(.is-in) { transform: translate3d(0, 18px, 0); }
.v2-js [data-reveal-role="stats"]:not(.is-in) { transform: translate3d(0, 12px, 0); }
.v2-js [data-reveal-role="cta"]:not(.is-in) { transform: translate3d(0, 12px, 0); }

/* Real values are present in the DOM at every moment. Only their
   entrance is staggered; no simulated count can misstate a figure. */
.v2-js .v2-overview__facts > div {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity var(--v2-dur-md) var(--v2-ease-out),
                transform var(--v2-dur-md) var(--v2-ease-out);
}
.v2-js .v2-overview__facts.is-in > div { opacity: 1; transform: none; }
.v2-js .v2-overview__facts.is-in > div:nth-child(2) { transition-delay: 70ms; }
.v2-js .v2-overview__facts.is-in > div:nth-child(3) { transition-delay: 140ms; }


/* ------------------------------------------------------------
   12. REDUCED MOTION
   ------------------------------------------------------------
   Movement is removed; nothing is hidden. Every element still
   reaches its final state — the reveal observer keeps running and
   simply has nothing left to animate, and the showcase swaps
   instantly instead of sliding.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    :root {
        --v2-dur-xs: 1ms;
        --v2-dur-sm: 1ms;
        --v2-dur-md: 1ms;
        --v2-dur-lg: 1ms;
        --v2-dur-flight: 1ms;
        --v2-stagger: 0ms;
    }

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

    .v2-js [data-reveal],
    .v2-js .v2-overview__facts > div,
    .v2-showcase.is-enhanced .v2-exp,
    .v2-showcase.is-enhanced .v2-exp__body,
    .v2-showcase.is-enhanced .v2-exp__frame,
    .v2-showcase.is-enhanced .v2-exp__index,
    .v2-showcase.is-enhanced .v2-exp__kicker,
    .v2-showcase.is-enhanced .v2-exp__title,
    .v2-showcase.is-enhanced .v2-exp__text,
    .v2-showcase.is-enhanced .v2-exp__cta {
        transform: none !important;
        transition-delay: 0ms !important;
    }

    /* All entrance keyframes live in the no-preference query above.
       Explicit final states also cover engines that suppress animations. */
    .v2-logo__layer,
    .v2-hero__edition,
    .v2-hero__line-in,
    .v2-hero__statement,
    .v2-hero__proof,
    .v2-hero__actions,
    .v2-hero__glass,
    .v2-hero__routes,
    .v2-hero__media-img { opacity: 1 !important; transform: none !important; }
    .v2-reveal-image img,
    .v2-js .v2-architecture__visual img { opacity: 1 !important; transform: none !important; }
    .v2-js .v2-overview__facts > div { opacity: 1 !important; }
    .v2-js .v2-location__image[data-reveal] img { clip-path: none !important; }

    .v2-btn:hover,
    .v2-btn:active { transform: none !important; }
}


/* ------------------------------------------------------------
   13. FORCED COLOURS
   ------------------------------------------------------------
   The gold indicator and the tab underline are the only things
   carrying state by colour alone; in a forced-colours mode they
   are redrawn with system colours so the active item stays
   identifiable.
   ------------------------------------------------------------ */

@media (forced-colors: active) {
    .v2-nav__link::after { background-color: Highlight; }
    .v2-thumb.is-active .v2-thumb__frame { outline: 3px solid Highlight; }
    .v2-exp__index { -webkit-text-stroke-color: CanvasText; }
    .v2-btn { border: 1px solid ButtonText; }
}