/* ============================================================
   ITC — International Trade Center Mongolia
   Downtown Business Hub
   Global design system
   ------------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Typography
   4.  Layout (container / section / section-header)
   5.  Buttons
   6.  Utilities
   7.  Responsive breakpoints
   8.  Header / Navigation
   9.  Hero
   10. Key statistics
   11. Business ecosystem
   12. Office spaces
   13. Office opportunities
   14. Building advantages
   15. Location
   16. Retail & service
   17. Contact / lead form
   18. Visit ITC / location
   19. Site footer
   20. Privacy notice
   21. Touch targets
   22. Language accommodations
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {

    /* ---- Color ---- */
    --color-navy:        #0E2559;
    --color-deep-navy:   #081A3A;
    --color-ivory:       #F5F1E8;
    --color-cream:       #EDE5D6;
    --color-white:       #FFFFFF;
    --color-charcoal:    #1A1A1A;
    --color-gray:        #6B7280;
    --color-light-gray:  #E5E7EB;
    --color-gold:        #B79A63;

    /* ---- Semantic color roles ---- */
    --color-bg:              var(--color-white);
    --color-bg-alt:          var(--color-ivory);
    --color-bg-dark:         var(--color-deep-navy);
    --color-text:            var(--color-charcoal);
    --color-text-muted:      var(--color-gray);
    --color-text-inverse:    var(--color-ivory);
    --color-heading:         var(--color-navy);
    --color-heading-inverse: var(--color-white);
    --color-accent:          var(--color-gold);
    --color-border:          var(--color-light-gray);
    --color-border-dark:     rgba(245, 241, 232, 0.18);
    --color-focus:           var(--color-gold);

    /* ---- Typography ---- */
    /* Cyrillic is the primary script, so every face in this stack
       is one that actually ships Cyrillic: Segoe UI (Windows),
       SF Pro via system-ui/-apple-system (macOS, iOS), Roboto
       (Android), Noto Sans (Linux). No webfont is loaded — the
       site stays free of a third-party font request, and there
       is no flash of a Latin-only fallback rendering Cyrillic in
       a substituted face. "Inter" leads only so that an
       installed copy is honoured where one exists. */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI",
                 Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
    --font-body: var(--font-sans);
    --font-heading: var(--font-sans);

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* Fluid heading scale: min → preferred → max */
    --fs-hero:    clamp(2.5rem, 1.00rem + 5.00vw, 5.5rem);    /*  40 → 88 */
    --fs-display: clamp(2.75rem, 1.60rem + 4.20vw, 5.25rem);  /*  44 → 84 */
    --fs-h1:      clamp(2.25rem, 1.55rem + 2.60vw, 3.75rem);  /*  36 → 60 */
    --fs-h2:      clamp(1.75rem, 1.30rem + 1.70vw, 2.75rem);  /*  28 → 44 */
    --fs-h3:      clamp(1.25rem, 1.10rem + 0.55vw, 1.625rem); /*  20 → 26 */
    --fs-body-lg: 1.125rem;   /* 18 */
    --fs-body:    1rem;       /* 16 */
    --fs-small:   0.875rem;   /* 14 */
    --fs-eyebrow: 0.75rem;    /* 12 */

    --lh-tight:   1.05;
    --lh-heading: 1.15;
    --lh-snug:    1.35;
    --lh-body:    1.7;

    --ls-display: -0.03em;
    --ls-heading: -0.02em;
    --ls-body:     0;
    --ls-wide:     0.08em;
    --ls-eyebrow:  0.18em;

    /* ---- Spacing scale ---- */
    --space-2:   0.125rem;
    --space-4:   0.25rem;
    --space-8:   0.5rem;
    --space-12:  0.75rem;
    --space-16:  1rem;
    /* 20 and 28 were referenced by the hero composition but never
       declared, so `gap: var(--space-20)` was invalid at computed-value
       time and the gap silently fell back to 0 in three rules. */
    --space-20:  1.25rem;
    --space-24:  1.5rem;
    --space-28:  1.75rem;
    --space-32:  2rem;
    --space-40:  2.5rem;
    --space-48:  3rem;
    --space-64:  4rem;
    --space-80:  5rem;
    --space-96:  6rem;
    --space-128: 8rem;
    --space-160: 10rem;

    /* ---- Layout ---- */
    --container-max:     1440px;
    --container-narrow:  920px;
    --container-pad:     4rem;   /* desktop horizontal gutter */
    --section-pad-y:     var(--space-128);
    --header-height:     88px;
    --mobile-cta-height: 0px;
    --grid-gap:          var(--space-32);

    /* ---- Lines & corners (architectural: near-square) ---- */
    --radius-none: 0;
    --radius-sm:   2px;
    --radius-md:   3px;
    --border-hairline: 1px solid var(--color-border);

    /* ---- Elevation (used sparingly) ---- */
    --shadow-subtle: 0 1px 2px rgba(8, 26, 58, 0.04),
                     0 8px 24px rgba(8, 26, 58, 0.05);

    /* ---- Motion ---- */
    --ease:            cubic-bezier(0.22, 0.61, 0.36, 1);
    --duration-fast:   180ms;
    --duration-base:   280ms;
    --duration-slow:   520ms;

    /* ---- Depth ---- */
    --z-base:    1;
    --z-sticky:  100;
    --z-header:  200;
    --z-overlay: 300;
    --z-modal:   400;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}

body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--weight-regular);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease);
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

table {
    border-collapse: collapse;
    width: 100%;
}

hr {
    border: none;
    border-top: var(--border-hairline);
    margin: 0;
}

::selection {
    background-color: var(--color-navy);
    color: var(--color-ivory);
}

/* Accessible focus — visible only for keyboard users */
:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

:focus:not(:focus-visible) {
    outline: none;
}

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

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


/* ============================================================
   3. TYPOGRAPHY
   ------------------------------------------------------------
   Element defaults and matching utility classes, so any tag can
   carry any scale step without redefining styles.
   ============================================================ */

.display,
h1, .h1,
h2, .h2,
h3, .h3 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    font-weight: var(--weight-semibold);
    text-wrap: balance;
}

/* Display — hero and statement moments only */
.display {
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    font-weight: var(--weight-medium);
}

h1, .h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    font-weight: var(--weight-medium);
}

h2, .h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}

h3, .h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-heading);
}

/* Body scale */
.body-lg {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
}

.body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.text-sm,
small {
    font-size: var(--fs-small);
    line-height: var(--lh-snug);
}

/* Eyebrow / section label */
.eyebrow {
    display: inline-block;
    font-size: var(--fs-eyebrow);
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Rule-marked eyebrow, for section headers */
.eyebrow--rule {
    display: flex;
    align-items: center;
    gap: var(--space-16);
}

.eyebrow--rule::before {
    content: "";
    width: 40px;
    height: 1px;
    background-color: var(--color-accent);
    flex: none;
}

/* Measure limits — keeps long copy readable */
p {
    max-width: 68ch;
}

.text-inverse,
.text-inverse .display,
.text-inverse h1, .text-inverse .h1,
.text-inverse h2, .text-inverse .h2,
.text-inverse h3, .text-inverse .h3 {
    color: var(--color-heading-inverse);
}

.text-inverse .body-lg,
.text-inverse p {
    color: var(--color-text-inverse);
}

/* Inline text link */
.link {
    color: var(--color-navy);
    border-bottom: 1px solid var(--color-light-gray);
    padding-bottom: 1px;
    transition: border-color var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease);
}

.link:hover {
    color: var(--color-deep-navy);
    border-bottom-color: var(--color-gold);
}


/* ============================================================
   4. LAYOUT
   ============================================================ */

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

.container--narrow {
    max-width: var(--container-narrow);
}

/* Full-bleed container: gutters only, no max width */
.container--wide {
    max-width: none;
}

.section {
    padding-block: var(--section-pad-y);
    position: relative;
}

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

.section--alt {
    background-color: var(--color-bg-alt);
}

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

.section--dark {
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
}

.section--dark .display,
.section--dark h1, .section--dark .h1,
.section--dark h2, .section--dark .h2,
.section--dark h3, .section--dark .h3 {
    color: var(--color-heading-inverse);
}

.section--dark p,
.section--dark .body-lg {
    color: rgba(245, 241, 232, 0.78);
}

.section--bordered {
    border-top: var(--border-hairline);
}

.section-header .eyebrow {
    margin-bottom: var(--space-4);
}


/* ============================================================
   5. BUTTONS
   ------------------------------------------------------------
   Square-edged, wide-tracked, uppercase — corporate rather
   than consumer SaaS. No gradients, no drop shadows.
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-12);
    min-height: 56px;
    padding: var(--space-16) var(--space-40);
    border: 1px solid transparent;
    border-radius: var(--radius-none);
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--duration-base) var(--ease),
                border-color var(--duration-base) var(--ease),
                color var(--duration-base) var(--ease),
                transform var(--duration-fast) var(--ease);
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}

/* Primary — solid navy, the principal call to action */
.btn-primary {
    background-color: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-ivory);
}

.btn-primary:hover {
    background-color: var(--color-deep-navy);
    border-color: var(--color-deep-navy);
}

/* Secondary — gold accent, for a single supporting action */
.btn-secondary {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-deep-navy);
}

.btn-secondary:hover {
    background-color: var(--color-deep-navy);
    border-color: var(--color-deep-navy);
    color: var(--color-ivory);
}

/* Outline — quiet action on light surfaces */
.btn-outline {
    background-color: transparent;
    border-color: var(--color-navy);
    color: var(--color-navy);
}

.btn-outline:hover {
    background-color: var(--color-navy);
    color: var(--color-ivory);
}

/* Outline on navy / photographic surfaces */
.btn-outline--light {
    border-color: rgba(245, 241, 232, 0.45);
    color: var(--color-ivory);
}

.btn-outline--light:hover {
    background-color: var(--color-ivory);
    border-color: var(--color-ivory);
    color: var(--color-deep-navy);
}

/* Size modifiers */
.btn--sm {
    min-height: 44px;
    padding: var(--space-12) var(--space-24);
    font-size: var(--fs-eyebrow);
}

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

/* Group of adjacent actions */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16);
}


/* ============================================================
   6. UTILITIES
   ============================================================ */

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

/* Skip link — visible on keyboard focus */
.skip-link {
    position: absolute;
    top: var(--space-16);
    left: var(--space-16);
    z-index: var(--z-modal);
    padding: var(--space-12) var(--space-24);
    background-color: var(--color-navy);
    color: var(--color-ivory);
    font-size: var(--fs-small);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    transform: translateY(-200%);
    transition: transform var(--duration-fast) var(--ease);
}

.skip-link:focus-visible {
    transform: translateY(0);
}

.no-scroll {
    overflow: hidden;
}

.text-center { text-align: center; }
.text-accent { color: var(--color-accent); }
.text-muted  { color: var(--color-text-muted); }

.rule {
    height: 1px;
    background-color: var(--color-border);
    border: none;
}

.rule--accent {
    background-color: var(--color-gold);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}


/* ============================================================
   7. RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------
   Desktop is the base. Headings scale fluidly via clamp();
   these queries adjust rhythm, gutters and layout density.
   ============================================================ */

/* ---- Tablet — 1024px ---- */
@media (max-width: 1024px) {
    :root {
        --container-pad: 2.5rem;
        --section-pad-y: var(--space-96);
        --header-height: 76px;
    }
}

/* ---- Mobile — 768px ---- */
@media (max-width: 768px) {
    :root {
        --container-pad: 1.5rem;
        --section-pad-y: var(--space-80);
        --grid-gap: var(--space-24);
        --header-height: 68px;
    }

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

    .btn {
        min-height: 52px;
        padding-inline: var(--space-32);
    }
}

/* ---- Small mobile — 480px ---- */
@media (max-width: 480px) {
    :root {
        --container-pad: 1.25rem;
        --section-pad-y: var(--space-64);
    }

    body {
        font-size: 0.9375rem; /* 15 */
    }

    .eyebrow--rule::before {
        width: 24px;
    }

    /* Stacked, full-width actions read better on narrow screens */
    .btn-group {
        flex-direction: column;
        align-items: stretch;
    }

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


/* ============================================================
   8. HEADER / NAVIGATION
   ------------------------------------------------------------
   Transparent, laid over the hero. Hairline base rule only —
   no fill, no shadow, no pill-shaped nav items.
   ============================================================ */

.site-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--z-header);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--color-white);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-48);
    min-height: var(--header-height);
}

/* ---- Logo (temporary text lockup) ---- */

.logo {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: none;
    color: var(--color-white);
}

.logo__mark {
    font-size: 1.5rem;
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: 0.2em;
}

.logo__name {
    font-size: 0.625rem;
    font-weight: var(--weight-medium);
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

/* ---- Primary navigation ---- */

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-40);
}

.site-nav__link {
    position: relative;
    display: inline-block;
    padding-block: var(--space-8);
    font-size: 0.8125rem;
    font-weight: var(--weight-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.site-nav__link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background-color: var(--color-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-base) var(--ease);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
    color: var(--color-white);
}

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

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

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-32);
    flex: none;
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: 0.75rem;
    font-weight: var(--weight-medium);
    letter-spacing: 0.12em;
}

.lang-switch__link {
    color: rgba(255, 255, 255, 0.55);
}

.lang-switch__link:hover {
    color: var(--color-white);
}

.lang-switch__link.is-active {
    color: var(--color-white);
    font-weight: var(--weight-semibold);
}

.lang-switch__divider {
    color: rgba(255, 255, 255, 0.3);
}

/* ---- Hamburger (markup only — behaviour comes later) ---- */

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: calc(var(--space-12) * -1);
    color: var(--color-white);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 24px;
    height: 1px;
    background-color: currentColor;
    transition: transform var(--duration-base) var(--ease),
                opacity var(--duration-fast) var(--ease);
}

.nav-toggle__bars {
    position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    position: absolute;
}

.nav-toggle__bars::before {
    transform: translateY(-7px);
}

.nav-toggle__bars::after {
    transform: translateY(7px);
}

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

/* Laptop band: the full row (logo + six links + language + CTA)
   needs roughly 1350px. Between the nav's breakpoint and that,
   tighten the rhythm and drop the header CTA — which is repeated
   in the hero, every section and the footer — rather than let the
   page scroll sideways or lose its navigation. */
@media (min-width: 1025px) and (max-width: 1279px) {
    .site-header__inner {
        gap: var(--space-24);
    }

    .site-nav__list {
        gap: var(--space-16);
    }

    .site-nav__link {
        font-size: 0.75rem;
    }

    .site-header__cta {
        display: none;
    }
}

@media (max-width: 1024px) {
    .site-header__inner {
        gap: var(--space-24);
    }

    .site-header__cta {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .logo__mark {
        font-size: 1.375rem;
    }

    /* ---- Mobile menu panel ----
       The same <nav> the desktop uses, re-laid-out as a panel, so
       the links and their translation keys stay in one place. */
    /* display, not visibility/opacity: the closed panel leaves the
       tab order completely, and the links are focusable the moment
       the panel opens. */
    .site-nav {
        display: none;
        position: fixed;
        top: var(--header-height);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: var(--z-overlay);
        padding: var(--space-24) var(--container-pad) var(--space-64);
        background-color: var(--color-deep-navy);
        overflow-y: auto;
    }

    .site-header.is-open .site-nav {
        display: block;
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-nav__link {
        display: block;
        padding-block: var(--space-24);
        border-bottom: 1px solid var(--color-border-dark);
        font-size: 1rem;
        letter-spacing: 0.08em;
        white-space: normal;
    }

    /* The sliding underline belongs to the desktop row */
    .site-nav__link::after {
        display: none;
    }

    /* Bars become a cross while open */
    .site-header.is-open .nav-toggle__bars {
        background-color: transparent;
    }

    .site-header.is-open .nav-toggle__bars::before {
        transform: translateY(0) rotate(45deg);
    }

    .site-header.is-open .nav-toggle__bars::after {
        transform: translateY(0) rotate(-45deg);
    }
}

@media (max-width: 480px) {
    .site-header__actions {
        gap: var(--space-16);
    }

    .logo__name {
        font-size: 0.5625rem;
        letter-spacing: 0.14em;
    }
}


/* ============================================================
   9. HERO
   ------------------------------------------------------------
   Full-height architectural opening. The media layer holds the
   downtown ITC photograph (WebP, art-directed by srcset); the
   overlay layer above it keeps the type legible against it. The
   navy background colour is the fallback while the image loads.
   ============================================================ */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-block: calc(var(--header-height) + var(--space-64)) var(--space-128);
    background-color: var(--color-deep-navy);
    color: var(--color-ivory);
    overflow: hidden;
}

/* Layer 0 — photograph. The navy fill is only a loading fallback:
   if you see flat navy in the browser, the image 404'd. */
.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-navy);
    overflow: hidden;
}

.hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Layer 1 — flat legibility overlay, no gradient */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 26, 58, 0.45);
}

/* Layer 2 — content */
.hero__container {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Content is held to the left half so the tower and the downtown
   skyline behind it stay uncovered. */
.hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-32);
    max-width: 54%;
}

.hero__eyebrow {
    color: var(--color-gold);
}

.hero__eyebrow.eyebrow--rule::before {
    background-color: var(--color-gold);
}

.hero__title {
    margin: 0;
    font-size: var(--fs-hero);
    font-weight: var(--weight-regular);
    line-height: 0.95;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    color: var(--color-white);
}

.hero__title-line {
    display: block;
}

.hero__subtitle {
    max-width: none;
    font-size: 0.875rem;
    font-weight: var(--weight-medium);
    line-height: var(--lh-snug);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(245, 241, 232, 0.85);
}

/* Near-opaque ivory carries the description against the lighter
   overlay — contrast comes from the ink, not from a box or shadow. */
.hero__description {
    max-width: 54ch;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: rgba(245, 241, 232, 0.95);
}

.hero__actions {
    margin-top: var(--space-16);
}

/* Primary CTA sits on navy — lift it to ivory-on-gold weight */
.hero__cta.btn-primary {
    background-color: var(--color-ivory);
    border-color: var(--color-ivory);
    color: var(--color-deep-navy);
}

.hero__cta.btn-primary:hover {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-deep-navy);
}

/* ---- Scroll indicator ---- */

.hero__scroll-wrap {
    position: absolute;
    right: 0;
    bottom: var(--space-40);
    left: 0;
    z-index: 2;
}

.hero__scroll {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    font-size: var(--fs-eyebrow);
    font-weight: var(--weight-medium);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: rgba(245, 241, 232, 0.6);
}

.hero__scroll-line {
    display: block;
    width: 1px;
    height: 64px;
    background-color: rgba(245, 241, 232, 0.32);
    transition: height var(--duration-slow) var(--ease),
                background-color var(--duration-base) var(--ease);
}

.hero__scroll:hover {
    color: var(--color-ivory);
}

.hero__scroll:hover .hero__scroll-line {
    height: 80px;
    background-color: var(--color-gold);
}

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

/* Desktop only: settle the block just below true centre so it sits
   against the skyline rather than cutting the frame in half. */
@media (min-width: 1025px) {
    .hero__inner {
        margin-top: 24px;
    }
}

@media (max-width: 1024px) {
    .hero {
        padding-block: calc(var(--header-height) + var(--space-48)) var(--space-96);
    }

    .hero__inner {
        gap: var(--space-24);
        max-width: 70%;
    }

    .hero__scroll-line {
        height: 48px;
    }
}

@media (max-width: 768px) {
    /* Portrait crops lose the tower on a hard centre — bias left of centre */
    .hero__image {
        object-position: 48% center;
    }

    .hero__inner {
        max-width: 100%;
    }

    .hero__title {
        line-height: 1;
        letter-spacing: -0.025em;
    }

    .hero__subtitle {
        font-size: 0.8125rem;
        letter-spacing: 0.14em;
    }

    .hero__description {
        font-size: var(--fs-body);
        max-width: 46ch;
    }

    .hero__scroll-line {
        height: 36px;
    }
}

@media (max-width: 480px) {
    .hero {
        padding-block: calc(var(--header-height) + var(--space-40)) var(--space-80);
    }

    .hero__actions {
        width: 100%;
        margin-top: var(--space-8);
    }

    /* Reclaim the vertical room the stacked CTAs need */
    .hero__scroll-wrap {
        display: none;
    }
}

/* ---- Key statistics responsive ---- */

/* Desktop: tighten the composition and let the tower lead. */
@media (min-width: 1025px) {
    .stats.section {
        padding-block: var(--space-96) var(--space-80);
    }

    .stats .section-header {
        margin-bottom: var(--space-64);
    }
}


/* ============================================================
   11. BUSINESS ECOSYSTEM
   ------------------------------------------------------------
   Asymmetric editorial spread: statement and numbered register
   on the left, a full-height architectural plate on the right.
   Hierarchy is carried by type, hairlines and space — no cards.
   ============================================================ */

.eco__layout {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-80);
    row-gap: var(--space-80);
}

.eco__intro {
    grid-column: 1;
    grid-row: 1;
}

.eco__title {
    margin-top: var(--space-32);
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    color: var(--color-navy);
}

.eco__title-line {
    display: block;
}

.eco__lead {
    margin-top: var(--space-24);
    max-width: 42ch;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
}

/* The plate runs the full height of the text column beside it */
.eco__media {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    min-height: clamp(28rem, 46vw, 44rem);
    overflow: hidden;
}

/* Crop biased upward: lobby volume and mezzanine lead, the figures
   sit low in frame as scale reference rather than as subject. */
.eco__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

/* ---- Numbered register ---- */

.eco__list {
    grid-column: 1;
    grid-row: 2;
}

.eco-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-32);
    padding-block: var(--space-24);
    border-top: 1px solid var(--color-light-gray);
}

.eco-item:last-child {
    border-bottom: 1px solid var(--color-light-gray);
}

/* Understated folio numbering — the gold reads as a mark, not a label */
.eco-item__index {
    grid-row: 1 / span 2;
    font-size: 0.6875rem;
    font-weight: var(--weight-medium);
    line-height: 2.1;
    letter-spacing: var(--ls-eyebrow);
    color: var(--color-gold);
    font-variant-numeric: tabular-nums;
}

.eco-item__index::after {
    content: "—";
    margin-left: var(--space-8);
    letter-spacing: 0;
}

.eco-item__title {
    grid-column: 2;
    font-size: 1.375rem;
    font-weight: var(--weight-medium);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-navy);
}

.eco-item__text {
    grid-column: 2;
    margin-top: var(--space-8);
    font-size: var(--fs-body);
    line-height: var(--lh-snug);
    color: var(--color-text-muted);
}

/* ---- Business ecosystem responsive ---- */

/* Desktop: the plate spans both rows, and with auto-sized tracks its
   height was being distributed across them — inflating row 1 and
   pushing the register ~100px below the description. Making row 2
   flexible keeps that growth out of row 1, so the gap under the
   description is the row-gap alone and both columns end level. */
@media (min-width: 1025px) {
    .eco__layout {
        grid-template-rows: auto minmax(0, 1fr);
    }
}

@media (max-width: 1024px) {
    .eco__layout {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-64);
    }

    /* Source order carries the stack: intro, plate, register */
    .eco__intro,
    .eco__media,
    .eco__list {
        grid-column: 1;
        grid-row: auto;
    }

    .eco__media {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .eco__lead {
        max-width: 54ch;
    }
}

@media (max-width: 768px) {
    .eco__media {
        aspect-ratio: 3 / 2;
    }

    .eco-item {
        column-gap: var(--space-24);
        padding-block: var(--space-16);
    }

    .eco-item__title {
        font-size: 1.1875rem;
    }
}

@media (max-width: 480px) {
    .eco__title {
        margin-top: var(--space-24);
    }

    .eco-item {
        column-gap: var(--space-16);
    }

    .eco-item__index::after {
        margin-left: var(--space-8);
    }
}

.opps__list > li:last-child .opp {
    border-bottom: 1px solid var(--color-light-gray);
}


/* ============================================================
   16. RETAIL & SERVICE
   ------------------------------------------------------------
   Mirror of the ecosystem spread — plate left, register right —
   on cream, with the numeral set inline against each category
   rather than hanging in its own column.
   ============================================================ */

.rs__layout {
    display: grid;
    grid-template-columns: minmax(0, 58%) minmax(0, 1fr);
    align-items: stretch;
    column-gap: var(--space-80);
}

/* The plate takes its height from the register beside it */
.rs__media {
    overflow: hidden;
    min-height: clamp(26rem, 42vw, 38rem);
}

.rs__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.rs__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.rs__title {
    margin-top: var(--space-32);
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    color: var(--color-navy);
}

.rs__title-line {
    display: block;
}

.rs__lead {
    margin-top: var(--space-24);
    max-width: 46ch;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
}

/* ---- Categories ---- */

.rs__categories {
    width: 100%;
    margin-top: var(--space-48);
}

.rs-category {
    padding-block: var(--space-24);
    border-top: 1px solid var(--color-light-gray);
}

.rs-category:last-child {
    border-bottom: 1px solid var(--color-light-gray);
}

/* Numeral sits on the title's baseline, not in a hanging column */
.rs-category__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-16);
}

.rs-category__index {
    font-size: 0.6875rem;
    font-weight: var(--weight-medium);
    line-height: 1;
    letter-spacing: var(--ls-eyebrow);
    color: var(--color-gold);
    font-variant-numeric: tabular-nums;
}

.rs-category__title {
    font-size: 1.25rem;
    font-weight: var(--weight-medium);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-navy);
}

.rs-category__text {
    margin-top: var(--space-8);
    font-size: var(--fs-small);
    line-height: var(--lh-snug);
    color: var(--color-text-muted);
}

/* ---- Action ---- */

.rs__cta {
    position: relative;
    display: inline-block;
    margin-top: var(--space-40);
    font-size: var(--fs-small);
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-navy);
    transition: transform var(--duration-base) var(--ease);
}

.rs__cta::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -0.5rem;
    left: 0;
    height: 1px;
    background-color: var(--color-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-base) var(--ease);
}

.rs__cta:hover::after,
.rs__cta:focus-visible::after {
    transform: scaleX(1);
}

.rs__cta:hover {
    transform: translateX(4px);
}

.rs__arrow {
    margin-left: var(--space-8);
}

/* ---- Retail & service responsive ---- */

@media (max-width: 1024px) {
    .rs__layout {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-64);
    }

    .rs__media {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .rs__lead {
        max-width: 56ch;
    }
}

@media (max-width: 768px) {
    .rs__media {
        aspect-ratio: 3 / 2;
    }

    .rs__categories {
        margin-top: var(--space-32);
    }

    .rs-category {
        padding-block: var(--space-16);
    }

    .rs__cta {
        margin-top: var(--space-32);
    }
}

@media (max-width: 480px) {
    .rs__title {
        margin-top: var(--space-24);
    }

    .rs-category__head {
        gap: var(--space-12);
    }
}

/* ---- Interest selector ---- */

.interest {
    margin: 0;
    padding: 0;
    border: none;
}

.interest__legend {
    padding: 0;
    font-size: var(--fs-eyebrow);
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-gold);
}

.interest__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-32);
    margin-top: var(--space-24);
}

/* The label is the hit area — the whole row is clickable */
.interest__option {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    padding-block: var(--space-16);
    border-bottom: 1px solid var(--color-border-dark);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease);
}

.interest__option:hover {
    border-bottom-color: rgba(245, 241, 232, 0.4);
}

.interest__option:hover .interest__input {
    border-color: rgba(245, 241, 232, 0.75);
}

.interest__option:has(.interest__input:checked) {
    border-bottom-color: var(--color-gold);
}

/* Square mark, filled gold when chosen */
.interest__input {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 13px;
    height: 13px;
    margin: 0;
    border: 1px solid rgba(245, 241, 232, 0.45);
    border-radius: var(--radius-none);
    background-color: transparent;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease);
}

.interest__input:checked {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
}

.interest__text {
    font-size: var(--fs-small);
    font-weight: var(--weight-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(245, 241, 232, 0.82);
    transition: color var(--duration-fast) var(--ease);
}

.interest__option:hover .interest__text,
.interest__input:checked ~ .interest__text {
    color: var(--color-white);
}

/* ---- Fields ---- */

.contact__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-32);
    row-gap: var(--space-32);
    margin-top: var(--space-48);
}

.field--full {
    grid-column: 1 / -1;
}

.field__label {
    display: block;
    font-size: var(--fs-eyebrow);
    font-weight: var(--weight-medium);
    line-height: 1;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: rgba(245, 241, 232, 0.62);
}

.field__optional {
    letter-spacing: 0.06em;
    text-transform: none;
    color: rgba(245, 241, 232, 0.4);
}

/* Ruled, not boxed */
.field__input {
    display: block;
    width: 100%;
    padding: var(--space-12) 0;
    margin-top: var(--space-12);
    border: none;
    border-bottom: 1px solid rgba(245, 241, 232, 0.28);
    border-radius: var(--radius-none);
    background-color: transparent;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--color-white);
    transition: border-color var(--duration-base) var(--ease);
}

.field__input:hover {
    border-bottom-color: rgba(245, 241, 232, 0.5);
}

.field__input:focus {
    outline: none;
    border-bottom-color: var(--color-gold);
}

.field__input:focus-visible {
    outline: none;
}

/* Hints sit clearly below entered text in contrast */
.field__input::placeholder {
    color: rgba(245, 241, 232, 0.3);
    opacity: 1;
}

.field__input--area {
    resize: vertical;
    min-height: 3.5rem;
}

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

.field__error {
    margin-top: var(--space-8);
    font-size: var(--fs-small);
    line-height: var(--lh-snug);
    color: #E4A0A0;
}

.field__error[hidden] {
    display: none;
}

/* ---- Honeypot ---- */

/* Off-screen, not display:none — and out of the tab order */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Consent ---- */

.consent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-16);
    row-gap: var(--space-8);
    margin-top: var(--space-40);
}

/* Same square mark as the interest selector */
.consent__input {
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    margin: 0;
    margin-top: 0.3em;
    border: 1px solid rgba(245, 241, 232, 0.45);
    border-radius: var(--radius-none);
    background-color: transparent;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease);
}

.consent__input:checked {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
}

.consent__input[aria-invalid="true"] {
    border-color: #E4A0A0;
}

.consent__label {
    font-size: var(--fs-small);
    line-height: var(--lh-snug);
    color: rgba(245, 241, 232, 0.72);
    cursor: pointer;
}

.consent__link {
    grid-column: 2;
    justify-self: start;
    font-size: var(--fs-small);
    line-height: var(--lh-snug);
    color: rgba(245, 241, 232, 0.55);
    border-bottom: 1px solid rgba(245, 241, 232, 0.25);
    transition: color var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease);
}

.consent__link:hover {
    color: var(--color-ivory);
    border-bottom-color: var(--color-gold);
}

.consent__error {
    grid-column: 2;
}

/* ---- Action ---- */

.contact__error {
    margin-top: var(--space-24);
    font-size: var(--fs-small);
    line-height: var(--lh-snug);
    color: #E4A0A0;
}

.contact__error[hidden] {
    display: none;
}

.contact__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-32);
    margin-top: var(--space-48);
}

/* Navy-on-navy would vanish — invert to ivory */
.contact__submit.btn-primary {
    background-color: var(--color-ivory);
    border-color: var(--color-ivory);
    color: var(--color-deep-navy);
}

.contact__submit.btn-primary:hover {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-deep-navy);
}

.contact__arrow {
    margin-left: var(--space-4);
    transition: transform var(--duration-base) var(--ease);
}

.contact__submit:hover .contact__arrow {
    transform: translateX(3px);
}

.contact__note {
    flex: 1 1 16rem;
    max-width: 34ch;
    font-size: var(--fs-small);
    line-height: var(--lh-snug);
    color: rgba(245, 241, 232, 0.55);
}

/* ---- Success ---- */

.contact__success {
    padding-top: var(--space-32);
    border-top: 1px solid var(--color-border-dark);
}

.contact__success[hidden] {
    display: none;
}

.contact__success:focus {
    outline: none;
}

.contact__success-label {
    font-size: var(--fs-eyebrow);
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-gold);
}

.contact__success-title {
    margin-top: var(--space-24);
    font-size: var(--fs-h3);
    font-weight: var(--weight-medium);
    line-height: 1.2;
    letter-spacing: var(--ls-heading);
    color: var(--color-white);
}

.contact__success-text {
    margin-top: var(--space-12);
    max-width: 40ch;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
}

@media (max-width: 768px) {
    .interest__options {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact__fields {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-24);
        margin-top: var(--space-40);
    }

    .contact__actions {
        gap: var(--space-24);
        margin-top: var(--space-40);
    }
}

@media (max-width: 480px) {

    .contact__submit {
        display: flex;
        width: 100%;
    }

    .contact__note {
        max-width: none;
    }
}


/* ============================================================
   19. SITE FOOTER
   ------------------------------------------------------------
   Navy close: brand, navigation and contact on one hairline,
   ownership line beneath.
   ============================================================ */

/* Compact by intent — a closing rule, not another content band */
.site-footer {
    background-color: var(--color-deep-navy);
    color: var(--color-text-inverse);
    padding-block: var(--space-80) var(--space-40);
}

.footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-80);
    row-gap: var(--space-64);
}

/* ---- Brand ---- */

.footer__mark {
    font-size: 1.5rem;
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: 0.2em;
    color: var(--color-white);
}

.footer__name {
    margin-top: var(--space-16);
    font-size: var(--fs-small);
    line-height: 1.6;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(245, 241, 232, 0.72);
}

.footer__tagline {
    margin-top: var(--space-32);
    font-size: var(--fs-eyebrow);
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-gold);
}

/* ---- Columns ---- */

.footer__heading {
    font-size: var(--fs-eyebrow);
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-gold);
}

.footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    margin-top: var(--space-24);
}

.footer__link {
    display: inline-block;
    font-size: var(--fs-small);
    font-weight: var(--weight-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(245, 241, 232, 0.82);
}

.footer__link:hover {
    color: var(--color-gold);
}

.footer__phone {
    display: inline-block;
    margin-top: var(--space-24);
    font-size: 1.25rem;
    font-weight: var(--weight-medium);
    letter-spacing: 0.02em;
    color: var(--color-white);
    font-variant-numeric: tabular-nums;
}

.footer__phone:hover {
    color: var(--color-gold);
}

.footer__address {
    margin-top: var(--space-16);
    font-size: var(--fs-small);
    line-height: 1.7;
    color: rgba(245, 241, 232, 0.62);
}

.footer__cta {
    position: relative;
    display: inline-block;
    margin-top: var(--space-32);
    font-size: var(--fs-small);
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-white);
    transition: transform var(--duration-base) var(--ease);
}

.footer__cta::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -0.5rem;
    left: 0;
    height: 1px;
    background-color: var(--color-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-base) var(--ease);
}

.footer__cta:hover::after,
.footer__cta:focus-visible::after {
    transform: scaleX(1);
}

.footer__cta:hover {
    transform: translateX(4px);
}

.footer__arrow {
    margin-left: var(--space-8);
}

/* ---- Bottom line ---- */

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-24);
    margin-top: var(--space-64);
    padding-top: var(--space-32);
    border-top: 1px solid var(--color-border-dark);
}

.footer__copy,
.footer__group {
    font-size: var(--fs-eyebrow);
    font-weight: var(--weight-medium);
    line-height: 1.5;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: rgba(245, 241, 232, 0.45);
}

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

@media (max-width: 1024px) {
    .footer__top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-48);
    }

    .footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding-block: var(--space-64) var(--space-40);
    }

    .footer__top {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-48);
    }

    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-16);
        margin-top: var(--space-64);
    }
}


/* ============================================================
   20. PRIVACY NOTICE
   ------------------------------------------------------------
   Deliberately the lightest band on the page: narrow measure,
   tighter padding and a smaller heading than the contact
   section above it.
   ============================================================ */

.privacy__title {
    margin-top: var(--space-32);
    max-width: 20ch;
    font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
    font-weight: var(--weight-medium);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    color: var(--color-navy);
}

.privacy__lead {
    margin-top: var(--space-24);
    max-width: 68ch;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
}

.privacy__blocks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-48);
    row-gap: var(--space-40);
    margin-top: var(--space-48);
}

.privacy-block {
    padding-top: var(--space-24);
    border-top: 1px solid var(--color-light-gray);
}

/* Sentence case, at the architectural h3 step.
   These are the numbered headings of a legal document, and in
   Mongolian they are Cyrillic sentences — "Бид хэн бэ",
   "Бидний цуглуулдаг мэдээлэл". Set as 13px tracked-out
   uppercase they were the least readable type on the site.
   Same wording, same order, same numbering: only the setting
   changes. */
.privacy-block__title {
    font-size: var(--itc-fs-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--itc-navy-deep);
}

.privacy-block__text {
    margin-top: var(--space-12);
    max-width: 52ch;
    font-size: var(--itc-fs-body);
    line-height: var(--itc-lh-body);
    color: var(--itc-ink-soft);
}

.privacy-block__link {
    color: var(--color-navy);
    border-bottom: 1px solid var(--color-light-gray);
    transition: border-color var(--duration-fast) var(--ease);
}

.privacy-block__link:hover {
    border-bottom-color: var(--color-gold);
}

/* ---- Privacy responsive ---- */

@media (max-width: 768px) {
    .privacy__blocks {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-32);
        margin-top: var(--space-40);
    }

    .privacy__title {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .privacy__title {
        margin-top: var(--space-24);
    }
}


/* ============================================================
   21. TOUCH TARGETS
   ------------------------------------------------------------
   The text CTAs and the language buttons are 14–20px tall by
   design. Rather than pad them — which would move everything
   around them — an invisible ::before extends the hit area to a
   comfortable size. Purely additive: no element changes size,
   position or appearance.
   ============================================================ */

@media (max-width: 1024px) {
    .lang-switch__link,
    .consent__link {
        position: relative;
    }

    .lang-switch__link::before,
    .loc__cta::before,
    .rs__cta::before,
    .visit__cta::before,
    .footer__cta::before {
        content: "";
        position: absolute;
        inset: -15px -8px;
    }

    /* Smaller reach here so it cannot swallow taps meant for the
       consent label sitting directly above it. */
    .consent__link::before {
        content: "";
        position: absolute;
        inset: -8px -6px;
    }
}


/* ============================================================
   22. LANGUAGE ACCOMMODATIONS
   ------------------------------------------------------------
   Mongolian runs longer than English in a few places that were
   sized to fixed English strings. These are fit corrections
   only — no colour, type or layout changes.
   ============================================================ */

/* The switcher is a pair of buttons, not links — match the
   transition the global anchor rule used to provide. */
.lang-switch__link {
    transition: color var(--duration-fast) var(--ease);
}

/* Longer nav labels need the gap back. The header row also has to
   give up some of its own spacing, or the Mongolian nav plus the
   CTA push past the container and the page scrolls sideways. */
/* Mongolian nav labels run ~25% longer than the English, so the
   header row needs a tighter rhythm at every desktop band — and
   below 1440 it also gives up the CTA, which is repeated in the
   hero, in every section and in the footer. */
@media (min-width: 1025px) and (max-width: 1279px) {
    [lang="mn"] .site-header__inner {
        gap: var(--space-16);
    }

    [lang="mn"] .site-nav__list {
        gap: var(--space-8);
    }

    [lang="mn"] .site-nav__link {
        font-size: 0.6875rem;
        letter-spacing: 0.06em;
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    [lang="mn"] .site-header__cta {
        display: none;
    }

    [lang="mn"] .site-header__inner {
        gap: var(--space-24);
    }

    [lang="mn"] .site-nav__list {
        gap: var(--space-16);
    }

    [lang="mn"] .site-nav__link {
        font-size: 0.75rem;
    }
}

@media (min-width: 1440px) {
    [lang="mn"] .site-header__inner {
        gap: var(--space-24);
    }

    [lang="mn"] .site-nav__list {
        gap: var(--space-16);
    }

    [lang="mn"] .site-nav__link {
        font-size: 0.75rem;
    }
}

/* The retail CTA is the one label long enough to break a 360px
   line in Mongolian — let it wrap rather than push the page. */
@media (max-width: 480px) {
    [lang="mn"] .rs__cta {
        white-space: normal;
    }
}


/* ============================================================
   PRINT
   ============================================================ */

@media print {
    body {
        background: #fff;
        color: #000;
    }

    .section {
        padding-block: var(--space-32);
        break-inside: avoid;
    }
}


/* ============================================================
   PREMIUM REFINEMENT LAYER
   ============================================================
   Appended deliberately rather than edited in place: the design
   system above — navy / ivory / cream / gold, the fluid type
   scale, the semantic colour roles — is sound and is reused
   here in full. Nothing below introduces a colour, a font or a
   token of its own.

   What it changes is hierarchy and conversion:

     · hero depth, so the title reads against architecture
       instead of sitting on a flat scrim
     · one unmistakable primary action per screen
     · a persistent mobile conversion path
     · section rhythm and measure
     · form presentation

   No library, no gradients beyond a legibility scrim, no purple,
   no metallic gold. Motion is limited to what a reduced-motion
   preference can switch off.
   ============================================================ */

/* ---- Hero: depth instead of a flat scrim -------------------
   The old overlay was one even 45% navy wash across the whole
   photograph, which dulls the architecture as much as it helps
   the text. A directional scrim does the legibility work only
   where the words actually are, and leaves the tower and the
   skyline to read at full contrast. */
.hero__overlay {
    background-color: transparent;
    background-image:
        linear-gradient(
            100deg,
            rgba(8, 26, 58, 0.86) 0%,
            rgba(8, 26, 58, 0.72) 28%,
            rgba(8, 26, 58, 0.34) 56%,
            rgba(8, 26, 58, 0.16) 78%,
            rgba(8, 26, 58, 0.28) 100%
        ),
        /* A base of deep navy at the foot carries the scroll cue
           and keeps the fold edge from going muddy. */
        linear-gradient(
            to top,
            rgba(8, 26, 58, 0.55) 0%,
            rgba(8, 26, 58, 0.00) 38%
        );
}

/* Hold the crop on the building rather than the mathematical
   centre, so the tower survives a narrow viewport. */
.hero__image {
    object-position: 62% center;
}

/* Restraint: the headline is the loudest thing in the viewport,
   not the biggest. Slightly tighter than the raw hero scale, with
   the second line carried in gold so the positioning reads as two
   deliberate words rather than one long banner. */
.hero__title {
    max-width: 14ch;
}

.hero__title-line + .hero__title-line {
    color: var(--color-gold);
}

.hero__description {
    max-width: 46ch;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-snug);
    color: rgba(245, 241, 232, 0.88);
}

/* A single primary action. The outline button beside it is the
   quieter of the two by weight, not by size, so the tap target
   stays generous on touch. */
.hero__actions {
    gap: var(--space-16);
    align-items: center;
}

.hero__actions .btn {
    min-height: 52px;
}

/* ---- Conversion: one unmistakable primary action ------------ */

.btn-primary {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-deep-navy);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: #C8AC76;
    border-color: #C8AC76;
    color: var(--color-deep-navy);
}

/* ---- Persistent mobile conversion path ----------------------
   On a phone the inquiry form is a long way down a tall page and
   the phone number scrolls out of reach within one swipe of the
   hero. This keeps both one thumb away for the whole visit.
   Hidden on desktop, where the header nav already does the job,
   and hidden from print. */
.mobile-cta {
    display: none;
}

@media (max-width: 767px) {
    .mobile-cta {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 60;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        padding: 0 0 max(0px, env(safe-area-inset-bottom, 0px));
        background-color: rgba(8, 26, 58, 0.97);
        border-top: 1px solid rgba(183, 154, 99, 0.45);
    }

    .mobile-cta__link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-8);
        min-width: 0;
        /* 50px, down from 56: still well clear of the 44px touch
           minimum, and ~6px less of the page covered on every phone.
           A min-height, not a height: the box still grows for a
           wrapped label, so the bar has no fixed overall height and
           the measured value in --mobile-cta-height stays honest. */
        min-height: 50px;
        padding-block: var(--space-8);
        padding-inline: clamp(0.5rem, 3vw, var(--space-16));
        font-size: clamp(0.75rem, 2.8vw, var(--fs-small));
        font-weight: var(--weight-semibold);
        line-height: 1.25;
        letter-spacing: clamp(0.03em, 0.8vw, var(--ls-wide));
        text-transform: uppercase;
        text-align: center;
        text-decoration: none;
        overflow-wrap: break-word;
    }

    .mobile-cta__link--primary {
        background-color: var(--color-gold);
        color: var(--color-deep-navy);
    }

    .mobile-cta__link--call {
        color: var(--color-ivory);
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .mobile-cta__link:focus-visible {
        outline: 2px solid var(--color-ivory);
        outline-offset: -4px;
    }

    /* main.js publishes the bar's actual border-box height. That value
       includes wrapped labels and the device safe area, so clearance
       stays correct in either language and at every narrow width.

       The clearance sits on the footer rather than on <body>: a body
       padding-box paints --color-bg, so the reserved strip read as a
       pale band under the navy footer for the moment the bar was
       retracted over the contact section. On the footer the same
       space is navy, and it is the last painted element on the page,
       so nothing else needs the room. --mobile-cta-height is 0px on a
       page with no bar (privacy-policy.html), which leaves that
       footer at its normal --space-40. */
    .site-footer {
        padding-bottom: calc(var(--space-40) + var(--mobile-cta-height));
    }

    #contact-form {
        scroll-margin-block-start: calc(var(--header-height) + var(--space-16));
    }

    /* Retracted while the inquiry form is on screen.
       visibility (not display) so the bar can slide rather than blink,
       and so it leaves the tab order and the accessibility tree while
       away — a control a sighted user cannot see should not be the
       next thing a keyboard or screen-reader user lands on. The
       transform is what moves it; the global reduced-motion rule
       already collapses the duration for anyone who asks for that. */
    .mobile-cta {
        transition: transform var(--duration-base) var(--ease),
                    visibility var(--duration-base) var(--ease);
        will-change: transform;
    }

    .mobile-cta.is-retracted {
        transform: translateY(100%);
        visibility: hidden;
    }
}

@media print {
    .mobile-cta {
        display: none !important;
    }
}

/* ---- Section rhythm and measure -----------------------------
   Long-form paragraphs were running to the full container width
   on large screens, which is a tiring measure to read. Capping
   the body measure is the single change that most makes a page
   feel considered rather than assembled. */
.section-header__title,
.section__lead,
.stats__lead {
    max-width: 34ch;
}

.section-header__lead,
.section__text,
.eco__lead,
.office__lead,
.adv__lead,
.loc__lead,
.rs__lead {
    max-width: 62ch;
}

/* A hairline of gold under an eyebrow reads as a deliberate
   editorial rule; the existing eyebrow--rule already draws one,
   this only makes it consistent in weight. */
.eyebrow--rule::before {
    height: 1px;
}

/* ---- Form: the conclusion of the story, not an appendix -----
   The fields themselves are unchanged — this is presentation
   only, and the posted names, values and validation are exactly
   what the API already accepts. */

.contact__form .field__input,
.contact__form .field__select,
.contact__form .field__textarea {
    min-height: 48px;
    font-size: var(--fs-body);
}

.contact__form .field__label {
    font-size: var(--fs-small);
    letter-spacing: 0.02em;
}

/* An interest option is a decision, so give it the size of one.
   These are the four values the CRM contract depends on; only
   their presentation changes here. */
.interest__option {
    min-height: 52px;
}

.contact__submit,
.contact__form button[type="submit"] {
    min-height: 56px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--ls-wide);
}

/* Validation and success states need to be readable at a glance
   rather than decoded. */
.field__error {
    font-size: var(--fs-small);
}

.contact__success-title {
    font-size: var(--fs-h3);
}

/* ---- Focus: visible everywhere, on every surface ------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* On the dark sections gold-on-navy is too close; ivory carries
   the focus ring there instead. */
.section--dark a:focus-visible,
.section--dark button:focus-visible,
.hero a:focus-visible,
.hero button:focus-visible {
    outline-color: var(--color-ivory);
}

/* ---- Mobile pass -------------------------------------------- */

@media (max-width: 767px) {
    /* The hero held its content to 54% of the width for the
       desktop composition; on a phone that is a column two words
       wide. */
    .hero__inner {
        max-width: 100%;
        gap: var(--space-24);
    }

    /* The pinned CTA's measured height includes wrapped copy and any
       home-indicator inset, so the proof cards cannot settle behind it. */
    .hero {
        min-height: 88vh;
        min-height: 88svh;
        padding-bottom: calc(var(--space-64) + var(--mobile-cta-height));
    }

    .hero__title {
        max-width: 100%;
    }

    .hero__description {
        max-width: 100%;
    }

    /* Full-width actions: a stacked pair of centred pills reads as
       one clear choice, and both clear the 44px touch minimum. */
    .hero__actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* The scroll cue competes with the sticky bar on a short
       screen and says nothing the page does not. */
    .hero__scroll-wrap {
        display: none;
    }

    /* Nothing may push the viewport sideways. */
    html,
    body {
        overflow-x: hidden;
    }

    .container {
        width: 100%;
    }
}

@media (max-width: 430px) {
    /* Keep the body copy above the comfortable minimum even where
       a card or a table tried to shrink it. */
    .section__text,
    .eco-item__text,
    .adv-feature__text,
    .loc-proof__text,
    .opp__text {
        font-size: var(--fs-body);
    }
}

/* ---- Motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
   HERO REFINEMENT
   ============================================================
   The positioning is unchanged; its weight is not. The headline
   was filling the viewport, which reads as a campaign poster
   rather than a business destination. Roughly 20% off the type,
   a lighter scrim so the city stays visible, and one dominant
   action instead of two competing rectangles.
   ============================================================ */

/* ---- Type: about 20% down from the shared hero scale --------
   Was clamp(2.5rem, 1.00rem + 5.00vw, 5.5rem) → 40–88px.
   Now 34–70px, so the words still lead the page without
   occupying it. Scoped to the hero: the shared --fs-hero token
   is untouched for anything else that uses it. */
.hero__title {
    font-size: clamp(2.125rem, 1.05rem + 3.60vw, 4.375rem);
    max-width: 12ch;
    line-height: 0.98;
}

/* ---- Scrim: readable text, visible architecture -------------
   The previous pass ran to 86% navy at the left edge, which
   made half the photograph flat. This holds enough density
   behind the text column and releases the rest of the frame —
   the tower and the downtown skyline are the proof, so they
   have to be legible. */
.hero__overlay {
    background-image:
        linear-gradient(
            100deg,
            rgba(8, 26, 58, 0.72) 0%,
            rgba(8, 26, 58, 0.58) 26%,
            rgba(8, 26, 58, 0.28) 52%,
            rgba(8, 26, 58, 0.10) 74%,
            rgba(8, 26, 58, 0.20) 100%
        ),
        linear-gradient(
            to top,
            rgba(8, 26, 58, 0.42) 0%,
            rgba(8, 26, 58, 0.00) 32%
        );
}

/* ---- Composition -------------------------------------------
   A tighter, more even rhythm between the five elements, and a
   narrower column so the text never crowds the building. */
.hero__inner {
    max-width: 46%;
    gap: var(--space-20);
}

.hero__eyebrow {
    margin-bottom: var(--space-4);
}

/* The business statement carries the argument; it is the one
   line a visitor should actually read. */
.hero__statement {
    margin: 0;
    max-width: 30ch;
    font-size: clamp(1.0625rem, 0.95rem + 0.50vw, 1.375rem);
    font-weight: var(--weight-regular);
    line-height: var(--lh-snug);
    letter-spacing: -0.01em;
    color: rgba(245, 241, 232, 0.94);
}

/* Facts, set as a quiet rule of record rather than a claim. */
.hero__proof {
    margin: 0;
    padding-top: var(--space-16);
    border-top: 1px solid rgba(183, 154, 99, 0.42);
    max-width: 38ch;
    font-size: var(--fs-small);
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: rgba(245, 241, 232, 0.76);
}

/* ---- Actions: one dominant, one quiet ----------------------
   Not two rectangles of equal weight. The primary is the only
   filled control in the viewport; the phone is a text action
   that stays obviously tappable without competing. */
.hero__actions {
    display: flex;
    align-items: center;
    gap: var(--space-28);
    margin-top: var(--space-8);
    flex-wrap: wrap;
}

.hero__cta {
    min-height: 54px;
    padding-inline: var(--space-32);
    font-size: var(--fs-small);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

.hero__phone {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-height: 44px;
    justify-content: center;
    text-decoration: none;
    color: var(--color-ivory);
    border-bottom: 1px solid transparent;
}

.hero__phone-label {
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: rgba(245, 241, 232, 0.64);
}

.hero__phone-number {
    font-size: var(--fs-body-lg);
    font-weight: var(--weight-medium);
    letter-spacing: 0.01em;
}

.hero__phone:hover .hero__phone-number,
.hero__phone:focus-visible .hero__phone-number {
    color: var(--color-gold);
}

/* ---- Navigation: readable against a photograph --------------
   The bar sat light and small over the image. Slightly more
   size and weight, and a navy veil once the page scrolls, so it
   stays legible without becoming a heavy chrome band. */
.site-header {
    background-color: rgba(8, 26, 58, 0.22);
    backdrop-filter: none;
}

.site-header.is-scrolled,
.site-header--solid {
    background-color: rgba(8, 26, 58, 0.94);
}

.nav__link {
    font-size: 0.9375rem;
    font-weight: var(--weight-medium);
    letter-spacing: 0.01em;
    color: rgba(245, 241, 232, 0.92);
}

.nav__link:hover,
.nav__link:focus-visible {
    color: var(--color-gold);
}

.lang-switch__link {
    font-size: var(--fs-small);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    color: rgba(245, 241, 232, 0.70);
}

.lang-switch__link.is-active {
    color: var(--color-gold);
}

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

@media (max-width: 767px) {
    /* The headline must not own the screen. Architecture has to
       stay visible behind and below it. */
    .hero {
        min-height: 82vh;
        min-height: 82svh;
    }

    .hero__title {
        font-size: clamp(1.875rem, 1.30rem + 2.80vw, 2.75rem);
        max-width: 100%;
    }

    .hero__inner {
        max-width: 100%;
        gap: var(--space-16);
    }

    .hero__statement,
    .hero__proof {
        max-width: 100%;
    }

    .hero__proof {
        font-size: var(--fs-eyebrow);
        letter-spacing: 0.03em;
    }

    /* The pair is stacked at every phone width: the rule above
       already sets flex-direction: column, and the 430px block below
       repeats it with a tighter gap. So this sets the gap for the
       431–767 range and nothing else. The row-layout leftovers that
       used to sit here were all inert — width: 100% duplicated the
       rule above, and .hero__actions .btn already carries both
       justify-content: center and min-height: 52px at a specificity
       .hero__cta cannot reach. The flex shorthands could not apply
       either: .hero__actions is a column box whose height is its
       content, so there is never free or negative space to
       distribute. */
    .hero__actions {
        gap: var(--space-20);
    }
}

@media (max-width: 430px) {
    .hero__statement {
        font-size: var(--fs-body);
    }

    /* At the narrowest width the pair stacks rather than
       squeezing the number onto two lines. */
    .hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-16);
    }

    .hero__phone {
        align-items: flex-start;
    }
}


/* ============================================================
   ITC DESIGN SYSTEM — architectural navy, ivory, warm gold
   ============================================================
   The approved direction, expressed as reusable tokens and a
   small set of components. Nothing here is a one-off: every
   section below draws on the same scale, the same surfaces and
   the same glass recipe, which is what keeps a long page
   feeling like one building rather than a deck of slides.

   Budget, held deliberately:
     ~60%  ivory / warm neutral   — where reading happens
     ~30%  navy / architectural   — where photography leads
     ~10%  warm gold              — CTA, a number, an eyebrow,
                                    a selected state, an edge
   Gold is never a surface. The moment it becomes one it stops
   meaning "this matters".
   ============================================================ */

:root {
    /* ---- Architectural blues ---- */
    --itc-navy-deep:      #001D39;
    --itc-navy:           #0A4174;
    --itc-blue-corporate: #49769F;
    --itc-blue-muted:     #4E8EA2;
    --itc-blue-soft:      #6EA2B3;
    --itc-blue-light:     #7BBDE8;
    --itc-blue-pale:      #BDD8E9;

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

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

    /* ---- Ink ---- */
    --itc-ink:            #0F1B2A;
    --itc-ink-soft:       #3D4A5C;
    /* Darkened from #6B7A8D: that value measured 3.99:1 on the
       ivory surface, and this token labels real copy. #5E6C7E
       holds the same blue-gray character at 4.87:1 on ivory and
       5.35:1 on white, so every muted string clears AA. */
    --itc-ink-muted:      #5E6C7E;
    --itc-ink-inverse:    rgba(247, 244, 237, 0.92);
    --itc-ink-inverse-soft: rgba(247, 244, 237, 0.70);

    /* ---- Glass ----------------------------------------------
       One recipe, used everywhere glass appears, so the effect
       reads as a material rather than a filter someone applied
       twice. Tuned for navy backgrounds; the light variant
       below is for ivory sections. */
    --itc-glass-bg:       rgba(10, 65, 116, 0.32);
    --itc-glass-bg-strong: rgba(0, 29, 57, 0.52);
    --itc-glass-border:   rgba(189, 216, 233, 0.22);
    --itc-glass-highlight: rgba(255, 255, 255, 0.10);
    --itc-glass-blur:     14px;

    /* ---- Depth. Wide and soft, never a hard drop ---- */
    --itc-shadow-sm:  0 1px 2px rgba(0, 29, 57, 0.06);
    --itc-shadow-md:  0 6px 24px -8px rgba(0, 29, 57, 0.18);
    --itc-shadow-lg:  0 24px 60px -24px rgba(0, 29, 57, 0.34);
    --itc-shadow-glass: 0 20px 48px -20px rgba(0, 29, 57, 0.55);

    /* ---- Radius ---- */
    --itc-radius-sm: 4px;
    --itc-radius:    8px;
    --itc-radius-lg: 14px;

    /* ---- Type scale -----------------------------------------
       Mongolian Cyrillic is the primary script. It carries more
       vertical detail than Latin at the same size, so the body
       sizes sit slightly larger and the line height looser than
       a Latin-only page would use, and no Mongolian copy is set
       in tracked-out uppercase. */
    --itc-fs-display: clamp(2.25rem, 1.15rem + 3.70vw, 4.5rem);
    --itc-fs-h2:      clamp(1.75rem, 1.20rem + 1.90vw, 2.875rem);
    --itc-fs-h3:      clamp(1.1875rem, 1.05rem + 0.55vw, 1.5rem);
    --itc-fs-lead:    clamp(1.0625rem, 0.99rem + 0.34vw, 1.25rem);
    --itc-fs-body:    1.0625rem;
    --itc-fs-small:   0.9375rem;
    --itc-fs-micro:   0.75rem;
    --itc-fs-stat:    clamp(2rem, 1.35rem + 2.20vw, 3.25rem);

    --itc-lh-display: 1.02;
    --itc-lh-heading: 1.18;
    --itc-lh-body:    1.68;

    /* ---- Borders -------------------------------------------
       The same three hairlines the components were already
       drawing inline. Named here so a border is a decision made
       once rather than an rgba() retyped in twenty places. */
    --itc-border:        rgba(10, 65, 116, 0.10);
    --itc-border-strong: rgba(10, 65, 116, 0.20);
    --itc-border-dark:   rgba(189, 216, 233, 0.18);

    /* ---- Motion ---- */
    --itc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --itc-dur:  220ms;
}

/* ============================================================
   LEGACY TOKEN BRIDGE
   ------------------------------------------------------------
   The page grew a second palette while the redesign was in
   progress: `--color-*` (the original) and `--itc-*` (the
   approved architectural direction). Two palettes on one page
   is the single thing that made the site read as half-finished.

   Rather than delete `--color-*` — which is still referenced by
   ~160 rules across the header, hero, buttons, footer, the form
   and the whole Privacy Policy page — every legacy token is
   re-pointed at its `--itc-*` equivalent here. One palette
   renders; both names resolve; nothing breaks. Custom
   properties substitute at computed-value time, so declaring
   these after the `--itc-*` block is well-defined.

   The CRM is unaffected: the admin loads static/admin/css/crm.css,
   which carries its own tokens and never reads this file.

   Deliberately NOT collapsed: --color-navy and --color-deep-navy
   stay distinct values. .btn-primary uses the first as its rest
   state and the second on hover, so folding them together would
   silently remove the button's hover feedback.
   ============================================================ */

:root {
    /* Raw palette → architectural equivalents */
    --color-navy:        var(--itc-navy);        /* interactive navy surface */
    --color-deep-navy:   var(--itc-navy-deep);   /* dark ground + hover state */
    --color-ivory:       var(--itc-ivory);
    --color-cream:       var(--itc-ivory-warm);
    --color-white:       var(--itc-white);
    --color-charcoal:    var(--itc-ink);
    /* ink-soft, not ink-muted: this token sets body-weight muted
       copy, and ink-muted does not clear 4.5:1 on ivory. */
    --color-gray:        var(--itc-ink-soft);
    --color-light-gray:  var(--itc-border);
    --color-gold:        var(--itc-gold);

    /* Semantic roles that need to differ from the raw mapping */
    --color-heading:     var(--itc-navy-deep);   /* matches .itc-h2 exactly */
    --color-border:      var(--itc-border);
    --color-border-dark: var(--itc-border-dark);

    /* Type: one scale. The legacy steps become aliases of the
       architectural scale so a legacy <h2> and an .itc-h2 set
       the same size, weight and tracking. */
    --fs-display: var(--itc-fs-display);
    --fs-h1:      var(--itc-fs-display);
    --fs-h2:      var(--itc-fs-h2);
    --fs-h3:      var(--itc-fs-h3);
    --fs-body-lg: var(--itc-fs-lead);
    --fs-body:    var(--itc-fs-body);
    --fs-small:   var(--itc-fs-small);
    --fs-eyebrow: var(--itc-fs-micro);

    --lh-heading: var(--itc-lh-heading);
    --lh-body:    var(--itc-lh-body);

    --ls-heading: -0.02em;
    /* Mongolian Cyrillic loses shape when tracked out hard. The
       legacy 0.18em eyebrow is pulled back to the architectural
       0.14em, which is where the .itc-eyebrow already sits. */
    --ls-eyebrow: 0.14em;

    --ease: var(--itc-ease);
}

/* ============================================================
   TYPOGRAPHY PRIMITIVES
   ============================================================ */

.itc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    font-size: var(--itc-fs-micro);
    font-weight: 600;
    /* Latin-only eyebrows can take wide tracking; Mongolian ones
       get a restrained value so the Cyrillic stays readable. */
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--itc-gold);
}

.itc-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background-color: var(--itc-gold);
}

.itc-eyebrow--plain {
    letter-spacing: 0.08em;
}

.itc-display {
    margin: 0;
    font-size: var(--itc-fs-display);
    font-weight: 600;
    line-height: var(--itc-lh-display);
    letter-spacing: -0.025em;
}

.itc-h2 {
    margin: 0;
    font-size: var(--itc-fs-h2);
    font-weight: 600;
    line-height: var(--itc-lh-heading);
    letter-spacing: -0.02em;
    color: var(--itc-navy-deep);
}

.itc-h3 {
    margin: 0;
    font-size: var(--itc-fs-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--itc-navy-deep);
}

.itc-lead {
    margin: 1.25rem 0 0;
    max-width: 58ch;
    font-size: var(--itc-fs-lead);
    line-height: var(--itc-lh-body);
    color: var(--itc-ink-soft);
}

.itc-body {
    margin: 0;
    font-size: var(--itc-fs-body);
    line-height: var(--itc-lh-body);
    color: var(--itc-ink-soft);
}

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

/* A statistic is the one place a number should shout. */
.itc-stat {
    display: block;
    font-size: var(--itc-fs-stat);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--itc-gold);
    font-variant-numeric: tabular-nums;
}

/* On dark ground the primitives invert. */
.itc-dark .itc-h2,
.itc-dark .itc-h3,
.itc-dark .itc-display { color: var(--itc-ivory); }
.itc-dark .itc-lead,
.itc-dark .itc-body { color: var(--itc-ink-inverse-soft); }
.itc-dark .itc-micro { color: rgba(189, 216, 233, 0.62); }

/* ============================================================
   SECTIONS
   ============================================================ */

.itc-section {
    padding-block: clamp(4rem, 2.5rem + 5vw, 8rem);
}

.itc-section--ivory { background-color: var(--itc-ivory); }
.itc-section--warm  { background-color: var(--itc-ivory-warm); }
.itc-section--white { background-color: var(--itc-white); }

.itc-section--dark {
    background-color: var(--itc-navy-deep);
    color: var(--itc-ivory);
}

.itc-section__head {
    max-width: 62ch;
    margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.5rem);
}

/* ============================================================
   GLASS
   ============================================================
   One material. `backdrop-filter` is progressive enhancement:
   the base rule already carries a solid-enough tint that the
   card is legible and looks deliberate without it, which is
   what browsers lacking support (and anyone with reduced
   transparency) will see.
   ============================================================ */

.itc-glass {
    position: relative;
    background-color: var(--itc-glass-bg-strong);
    border: 1px solid var(--itc-glass-border);
    border-radius: var(--itc-radius);
    box-shadow: var(--itc-shadow-glass);
}

@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
    .itc-glass {
        background-color: var(--itc-glass-bg);
        -webkit-backdrop-filter: blur(var(--itc-glass-blur));
        backdrop-filter: blur(var(--itc-glass-blur));
    }
}

/* The edge reflection. One hairline, top only — more than this
   and it reads as a gradient rather than as light. */
.itc-glass::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--itc-glass-highlight) 18%,
        var(--itc-glass-highlight) 82%,
        transparent
    );
    pointer-events: none;
}

/* ============================================================
   HERO PROOF CARDS
   ============================================================ */

.itc-proof {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: clamp(2rem, 1.2rem + 2.2vw, 3.25rem);
    border-radius: var(--itc-radius);
    overflow: hidden;
}

.itc-proof__card {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1.125rem 1.25rem 1.25rem;
    border-radius: 0;
    border-inline-start: 0;
    border-block: 0;
    min-width: 0;
}

.itc-proof__card:first-child { border-inline-start: 1px solid var(--itc-glass-border); }
.itc-proof__card:last-child  { border-inline-end: 1px solid var(--itc-glass-border); }

.itc-proof__index {
    font-size: var(--itc-fs-micro);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--itc-gold);
    font-variant-numeric: tabular-nums;
}

.itc-proof__value {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--itc-ivory);
}

.itc-proof__label {
    font-size: var(--itc-fs-micro);
    line-height: 1.45;
    color: rgba(189, 216, 233, 0.72);
}

/* The tenants headline is the one h2 set in caps. .itc-h2 tracks at
   -0.02em, which is right for mixed case and closes caps up until
   they read as a block; caps want air instead. Line breaking needs
   nothing extra — every h2 already gets text-wrap: balance, so the
   headline splits evenly rather than orphaning a word, in either
   language and at every width. Scoped to this one heading. */
#tenants-title {
    letter-spacing: 0;
}

/* ============================================================
   TENANT LOGO WALL
   ============================================================
   Built to take real logo files later without a redesign: each
   cell is a fixed-height flex box, so an <img> dropped in will
   sit exactly where the wordmark sits now. Until the assets
   arrive the brand's own name is the mark — a real name set
   properly is honest, where an invented logo would not be.
   ============================================================ */

/* Five across, two deep, and every cell full.
   There are ten tenants, so the column count is chosen from the divisors
   of ten — 5, then 2 — rather than left to auto-fit. auto-fit was
   producing a ragged last row (six and four, or seven and three) with
   stranded empty cells at some widths; a fixed 5 can only ever resolve
   to two complete rows. */
/* One clean white panel, five across and two deep.
   The 1px gap over a tinted container background used to draw a hairline
   between every cell. With ten marks of ten different shapes those lines
   did no work — they fenced off whitespace rather than separating
   content — so the grid is now gapless and the panel is defined by its
   own outer edge alone. Column count stays a divisor of ten (5, then 2)
   so no row can ever come out ragged. */
.itc-logowall {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    background-color: var(--itc-white);
    border: 1px solid var(--itc-border-strong);
    border-radius: var(--itc-radius);
    overflow: hidden;
}

/* Equal cells, sized by a fixed row height rather than by aspect-ratio.
   aspect-ratio tied the cell's height to its width, so on a 1440 screen
   each cell grew to 147px while the mark inside it stayed capped at 68 —
   a small logo stranded in a tall empty box, and the wall read as mostly
   whitespace. A fixed height keeps all ten cells identical AND keeps
   them proportionate to what they hold, at every width. */
.itc-logowall__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 106px;
    padding: 1rem 1.25rem;
    background-color: var(--itc-white);
    text-align: center;
    transition: background-color var(--itc-dur) var(--itc-ease);
}

.itc-logowall__item:hover {
    background-color: var(--itc-ivory);
}

/* Slot for a real logo file. Height fixed so swapping the text
   fallback for an <img> changes nothing about the layout. */
/* One optical size for ten very different marks.
   `contain` with an auto width is what keeps every logo at its own
   proportions: a wide wordmark and a square badge both fit the same
   band without either being stretched to match the other.

   This is the band for a WIDE mark — CU's wordmark is the only logo of
   the ten that is wider than it is tall, and a wide mark needs more
   height than a square one to carry the same weight. Square badges are
   pulled back below. Neither is ever stretched: `contain` with an auto
   width means each keeps its own proportions exactly. */
.itc-logowall__img {
    max-height: 58px;
    max-width: 84%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* The consistent treatment for opaque marks.
   Only one of the ten logos (CU) arrived with a transparent background;
   the rest are flat tiles on their own brand colour, and nothing may be
   knocked out of them — removing a brand's background is redrawing its
   identity. So instead of fighting it, the tiles are made deliberate:
   the same corner radius and the same hairline on every one, so the wall
   reads as a row of brand badges rather than as a row of mistakes. The
   transparent CU mark simply sits on the cell and is unaffected by a
   radius it never fills. */
.itc-logowall__img--tile {
    /* Optical balance, not arithmetic balance. A 58px square badge next
       to a 58px-tall wordmark is roughly three times the ink and reads
       as much louder, so the squares come down to 46px. Both still just
       set a bound on `contain` — no logo is scaled on one axis, cropped,
       recoloured or redrawn. */
    max-height: 46px;
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--itc-border);
}

/* Golomt Bank's mark, until the bank supplies a real logo file.
   Set a step up from body small so it holds its own beside a 46px
   badge — a name set properly is a legitimate mark, and it should not
   look like the one cell where something failed to load. */
.itc-logowall__name {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
    color: var(--itc-navy-deep);
    text-wrap: balance;
    transition: color var(--itc-dur) var(--itc-ease);
}

.itc-logowall__item:hover .itc-logowall__name {
    color: var(--itc-gold-deep);
}

/* ============================================================
   TENANT DISCOVERY — tabs + cards
   ============================================================ */

.itc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.itc-tab {
    appearance: none;
    padding: 0.625rem 1.125rem;
    min-height: 44px;
    font-family: inherit;
    font-size: var(--itc-fs-small);
    font-weight: 600;
    color: var(--itc-ink-soft);
    background-color: transparent;
    border: 1px solid rgba(10, 65, 116, 0.20);
    border-radius: 999px;
    cursor: pointer;
    transition: color var(--itc-dur) var(--itc-ease),
                border-color var(--itc-dur) var(--itc-ease),
                background-color var(--itc-dur) var(--itc-ease);
}

.itc-tab:hover {
    border-color: var(--itc-gold);
    color: var(--itc-navy-deep);
}

/* Gold marks the selected state — one of its four jobs. */
.itc-tab[aria-selected="true"] {
    color: var(--itc-navy-deep);
    background-color: rgba(183, 154, 99, 0.16);
    border-color: var(--itc-gold);
}

/* Four across on the desktop design width. Explicit rather than
   auto-fill, which was resolving to four or five depending on the
   gap and left the last row ragged at ten cards. */
.itc-tenants {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
}

.itc-tenant {
    display: flex;
    flex-direction: column;
    background-color: var(--itc-white);
    border: 1px solid rgba(10, 65, 116, 0.10);
    border-radius: var(--itc-radius);
    box-shadow: var(--itc-shadow-sm);
    overflow: hidden;
    transition: transform var(--itc-dur) var(--itc-ease),
                box-shadow var(--itc-dur) var(--itc-ease);
}

/* Restrained lift: far enough to read as a response, not so far that
   ten cards on one screen start bouncing. The border warms to gold at
   the same time, which is the same selected-state language the category
   tabs already use. */
.itc-tenant:hover {
    transform: translateY(-4px);
    border-color: rgba(183, 154, 99, 0.45);
    box-shadow: var(--itc-shadow-lg);
}

/* Image slot. aspect-ratio rather than a fixed height, so a
   real photograph of any dimensions drops in cleanly later. */
.itc-tenant__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background-color: var(--itc-ivory-warm);
    overflow: hidden;
}

.itc-tenant__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms var(--itc-ease);
}

/* The brand chip.
   Sits on the photograph rather than in the card body, because the body
   is where the *words* live — name and category — and a logo repeated
   beside its own name is noise. `contain` inside a fixed-height chip
   means a square badge and a wide wordmark both sit correctly without
   either being distorted. Higher specificity than the rule above, so it
   opts out of the cover-crop the photograph uses. */
.itc-tenant__media .itc-tenant__logo {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    width: auto;
    height: 26px;
    max-width: 58%;
    padding: 0.3125rem 0.5rem;
    background-color: rgba(255, 255, 255, 0.94);
    border-radius: var(--itc-radius-sm);
    box-shadow: var(--itc-shadow-sm);
    object-fit: contain;
    box-sizing: content-box;
    transition: none;
}

/* The photograph lifts on hover; the chip must not ride with it. */
.itc-tenant:hover .itc-tenant__media .itc-tenant__logo {
    transform: none;
}

/* ---- Branded fallback -------------------------------------------
   For a confirmed tenant whose photograph has not been supplied.
   Deep navy, one gold rule, the brand name set properly — the same
   palette the dark sections use, so the card reads as a deliberate
   panel rather than as a hole in the grid.

   It is deliberately NOT a fake photograph and NOT a stand-in logo:
   it states the name and nothing else. It fills the same 16:10 box a
   photograph fills, so swapping the real asset in later changes
   nothing about the layout.
   ------------------------------------------------------------------ */
.itc-tenant__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 1.5rem 1.25rem;
    text-align: center;
    background-color: var(--itc-navy-deep);
    /* A slow diagonal lift, so the navy is not a flat block. */
    background-image: linear-gradient(
        135deg,
        rgba(10, 65, 116, 0.55) 0%,
        rgba(0, 29, 57, 0) 62%
    );
}

.itc-tenant__fallback-name {
    position: relative;
    padding-top: 0.875rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--itc-ivory);
    text-wrap: balance;
}

/* The single gold accent. One short rule above the name — the same
   gesture .itc-eyebrow makes, and gold's whole job on this page. */
.itc-tenant__fallback-name::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 2px;
    background-color: var(--itc-gold);
}

.itc-tenant:hover .itc-tenant__media img {
    transform: scale(1.045);
}

/* The body is the quiet half of the card, so it gets the space rather
   than more ink: a hairline separating it from the photograph, a wider
   gutter, and the two lines set far enough apart to read as label and
   name rather than as one block. */
.itc-tenant__body {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    padding: 1.25rem 1.375rem 1.5rem;
    border-top: 1px solid var(--itc-border);
}

.itc-tenant__cat {
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--itc-gold-deep);
}

/* Names run from "CU" to "Uzesgelent Surgery Clinic". balance keeps a
   two-line name from leaving one orphaned word on the second line. */
.itc-tenant__name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--itc-navy-deep);
    text-wrap: balance;
}

.itc-tenant__text {
    margin: 0;
    font-size: var(--itc-fs-small);
    line-height: 1.6;
    color: var(--itc-ink-muted);
}

/* ============================================================
   MEDIA SLOT — a placeholder that is obviously deliberate
   ============================================================
   Used where no real ITC photograph exists yet. It is an
   architectural block in the palette, labelled with the asset
   it is waiting for, so nobody mistakes it for a design choice
   and nobody has to guess what to supply. No stock photography
   is used anywhere on this site.
   ============================================================ */

.itc-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    min-height: 180px;
    padding: 1.5rem;
    text-align: center;
    background-color: var(--itc-navy);
    background-image: repeating-linear-gradient(
        135deg,
        rgba(189, 216, 233, 0.05) 0 1px,
        transparent 1px 12px
    );
    color: rgba(189, 216, 233, 0.80);
}

.itc-slot__mark {
    font-size: var(--itc-fs-micro);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--itc-gold);
}

.itc-slot__name {
    font-size: var(--itc-fs-small);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    color: rgba(189, 216, 233, 0.70);
    word-break: break-all;
}

/* ============================================================
   EDITORIAL FEATURE CARDS
   ============================================================ */

.itc-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

.itc-feature {
    display: flex;
    flex-direction: column;
    background-color: var(--itc-white);
    border: 1px solid rgba(10, 65, 116, 0.10);
    border-radius: var(--itc-radius);
    box-shadow: var(--itc-shadow-sm);
    overflow: hidden;
    transition: transform var(--itc-dur) var(--itc-ease),
                box-shadow var(--itc-dur) var(--itc-ease);
}

.itc-feature:hover {
    transform: translateY(-3px);
    box-shadow: var(--itc-shadow-md);
}

.itc-feature__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--itc-ivory-warm);
}

.itc-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms var(--itc-ease);
}

.itc-feature:hover .itc-feature__media img {
    transform: scale(1.02);
}

.itc-feature__body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.5rem 1.5rem 1.75rem;
}

/* ============================================================
   GLASS FEATURE GRID — the dark convenience section
   ============================================================ */

.itc-convenience {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 0.8rem + 2.4vw, 3rem);
    align-items: center;
}

.itc-convenience__media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--itc-radius-lg);
    overflow: hidden;
    box-shadow: var(--itc-shadow-lg);
}

.itc-convenience__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itc-convenience__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
}

.itc-glasscard {
    padding: 1.25rem 1.25rem 1.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    min-width: 0;
}

.itc-glasscard__title {
    margin: 0;
    font-size: var(--itc-fs-small);
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--itc-ivory);
}

/* Body copy, so it takes the body-small step rather than the
   12px micro step the labels use. */
.itc-glasscard__text {
    margin: 0;
    font-size: var(--itc-fs-small);
    line-height: 1.6;
    color: rgba(189, 216, 233, 0.78);
}

/* ============================================================
   CTA BAND
   ============================================================ */

.itc-cta {
    text-align: center;
}

.itc-cta__title {
    margin: 0 auto;
    max-width: 18ch;
}

.itc-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    margin-top: 2.25rem;
}

.itc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 54px;
    padding: 0 2rem;
    font-family: inherit;
    font-size: var(--itc-fs-small);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--itc-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--itc-dur) var(--itc-ease),
                color var(--itc-dur) var(--itc-ease),
                border-color var(--itc-dur) var(--itc-ease);
}

.itc-btn--gold {
    background-color: var(--itc-gold);
    color: var(--itc-navy-deep);
    border-color: var(--itc-gold);
}

.itc-btn--gold:hover,
.itc-btn--gold:focus-visible {
    background-color: var(--itc-gold-bright);
    border-color: var(--itc-gold-bright);
}

/* The arrow is the only moving part of the button. */
.itc-btn__arrow {
    transition: transform var(--itc-dur) var(--itc-ease);
}

.itc-btn:hover .itc-btn__arrow,
.itc-btn:focus-visible .itc-btn__arrow {
    transform: translateX(3px);
}

.itc-phonelink {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-height: 44px;
    justify-content: center;
    text-decoration: none;
}

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

.itc-phonelink__number {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--itc-navy-deep);
    transition: color var(--itc-dur) var(--itc-ease);
}

.itc-phonelink:hover .itc-phonelink__number {
    color: var(--itc-gold-deep);
}

.itc-dark .itc-phonelink__number { color: var(--itc-ivory); }
.itc-dark .itc-phonelink__label { color: rgba(189, 216, 233, 0.62); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .itc-convenience {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    /* Proof cards: 2×2, as specified. */
    .itc-proof {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .itc-proof__card:nth-child(odd)  { border-inline-start: 1px solid var(--itc-glass-border); }
    .itc-proof__card:nth-child(even) { border-inline-end: 1px solid var(--itc-glass-border); }

    /* Logo wall: two across, five deep.
       This replaces the horizontal scroll rail. The rail kept each mark
       a comfortable size, but it also meant most of the wall sat
       off-screen behind a gesture with no affordance — on a directory
       whose whole job is "these ten brands are here", the tenants a
       visitor never scrolls to might as well not be listed. Two columns
       divides ten exactly, so every cell is full and every brand is on
       the page. */
    /* Three across on a phone: ten marks in four rows instead of five,
       which keeps the whole wall inside roughly one thumb-scroll. Two
       columns made the cells wide and the logos small relative to them;
       three sizes each cell closer to the mark it holds. */
    .itc-logowall {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Ten does not divide by three, so the last row holds one. Placed
       in the middle column it reads as the end of a centred block
       rather than as a stray cell pushed against the left edge. The
       panel is gapless and white, so the two cells beside it are
       simply white — there is no visible hole to leave. */
    .itc-logowall__item:last-child {
        grid-column: 2;
    }

    .itc-logowall__item {
        min-height: 84px;
        padding: 0.75rem 0.5rem;
    }

    .itc-logowall__img {
        max-height: 44px;
    }

    .itc-logowall__img--tile {
        max-height: 36px;
    }

    /* The typographic mark steps back down with the cell it sits in. */
    .itc-logowall__name {
        font-size: 0.9375rem;
    }

    /* Tenant cards stay two up on a large phone. At seven, one column
       was fine; at ten it is a very long scroll, and the card survives
       halving because it carries only a picture, a category and a name.
       It drops back to one column at 480, where a two-up card is too
       narrow for a name like "Uzesgelent Surgery Clinic". */
    .itc-tenants {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .itc-cta__actions {
        flex-direction: column;
        gap: 1.25rem;
    }

    .itc-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    /* One column: below this a two-up tenant card is too narrow for the
       longer brand names to set without breaking awkwardly. */
    .itc-tenants {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Hero proof cards stay 2×2 — the layout is approved and unchanged.
       Only the spacing comes in, so that all four clear the fold and
       the pinned CTA bar on a 390px screen instead of the lower pair
       being pushed under it. Roughly 45px comes out of the block. */
    .itc-proof {
        margin-top: 1.75rem;
    }

    .itc-proof__card {
        gap: 0.25rem;
        padding: 0.875rem 0.9375rem 1rem;
    }

    .itc-proof__value {
        font-size: 1rem;
    }
}

@media (max-width: 430px) {
    .itc-convenience__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .itc-feature,
    .itc-tenant,
    .itc-feature__media img,
    .itc-tenant__media img,
    .itc-btn__arrow {
        transition: none !important;
        transform: none !important;
    }
}

/* Some users ask for less transparency as an accessibility
   setting; give them the solid surface instead of the blur. */
@media (prefers-reduced-transparency: reduce) {
    .itc-glass {
        background-color: var(--itc-navy-deep);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}


/* ============================================================
   ITC DESIGN SYSTEM — PART 2
   ------------------------------------------------------------
   The components the second half of the page needs. Every one
   of these is built from the tokens declared above; none of
   them introduces a colour, a type step or a radius of its own.

   Where a legacy section had a bespoke layout (.stats__grid,
   .office__features, .adv__features, .loc__proofs) the three
   numbered-list variants collapse into one .itc-marklist, and
   the two media-beside-text variants into one .itc-split.
   ============================================================ */


/* ------------------------------------------------------------
   EDITORIAL SPLIT — architectural photography beside content
   ------------------------------------------------------------ */

.itc-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 3vw, 4.5rem);
    align-items: center;
}

/* Wider media column, for the sections where the photograph
   carries the argument rather than illustrating it. */
.itc-split--media-lead {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

/* Media second in the source, first on screen: keeps the
   heading ahead of the image for a screen reader while letting
   the picture lead visually. */
.itc-split--reverse .itc-split__media {
    order: -1;
}

.itc-split__media {
    position: relative;
    border-radius: var(--itc-radius-lg);
    overflow: hidden;
    box-shadow: var(--itc-shadow-lg);
    background-color: var(--itc-ivory-warm);
}

.itc-split__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The frame the photograph is cropped into. Set per section so
   a portrait office shot and a landscape aerial both sit in a
   deliberate shape rather than dictating the row height. */
.itc-split__media--portrait  { aspect-ratio: 4 / 5; }
.itc-split__media--landscape { aspect-ratio: 4 / 3; }
.itc-split__media--wide      { aspect-ratio: 16 / 10; }

.itc-split__body {
    min-width: 0;
}

.itc-split__body > .itc-lead {
    max-width: 46ch;
}


/* ------------------------------------------------------------
   STATISTICS — the numbers, set as numbers
   ------------------------------------------------------------
   No icons. A statistic earns its space by being large, tabular
   and unadorned; an icon beside it only adds a second thing to
   read. One hairline grid, four cells, gold reserved for the
   unit rather than spent on the whole figure.
   ------------------------------------------------------------ */

.itc-statgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    background-color: var(--itc-border);
    border: 1px solid var(--itc-border);
    border-radius: var(--itc-radius);
    overflow: hidden;
}

.itc-statcard {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
    padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
    background-color: var(--itc-white);
    margin: 0;
}

.itc-statcard__value {
    margin: 0;
    font-size: var(--itc-fs-stat);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--itc-navy-deep);
    font-variant-numeric: tabular-nums;
}

/* A word standing where a figure normally stands takes a step
   down, so the row still reads as one line of numbers. */
.itc-statcard__value--word {
    font-size: clamp(1.375rem, 1.05rem + 1.1vw, 1.875rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.itc-statcard__unit {
    margin-left: 0.15em;
    font-size: 0.42em;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--itc-gold-deep);
}

.itc-statcard__label {
    margin: 0;
    font-size: var(--itc-fs-small);
    font-weight: 600;
    line-height: 1.4;
    color: var(--itc-ink);
}

.itc-statcard__note {
    margin: 0;
    font-size: var(--itc-fs-micro);
    line-height: 1.5;
    color: var(--itc-ink-muted);
}

/* dl source order is label-then-value; flex order puts the
   figure on top without disturbing the dt/dd pairing that
   makes the statistics a definition list to a screen reader. */
.itc-statcard__value { order: 1; }
.itc-statcard__label { order: 2; }
.itc-statcard__note  { order: 3; }


/* ------------------------------------------------------------
   MARK LIST — one numbered editorial list, used in three places
   ------------------------------------------------------------ */

.itc-marklist {
    display: grid;
    gap: clamp(1.25rem, 0.9rem + 1vw, 1.875rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.itc-mark {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.375rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--itc-border);
}

.itc-dark .itc-mark {
    border-top-color: var(--itc-border-dark);
}

.itc-mark__index {
    font-size: var(--itc-fs-micro);
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.12em;
    color: var(--itc-gold);
    font-variant-numeric: tabular-nums;
}

.itc-mark__title {
    margin: 0;
    font-size: var(--itc-fs-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--itc-navy-deep);
}

.itc-mark__text {
    grid-column: 2;
    margin: 0;
    font-size: var(--itc-fs-body);
    line-height: var(--itc-lh-body);
    color: var(--itc-ink-soft);
}

.itc-dark .itc-mark__title { color: var(--itc-ivory); }
.itc-dark .itc-mark__text  { color: var(--itc-ink-inverse-soft); }


/* ------------------------------------------------------------
   INQUIRY PATHS — the four routes into the lead form
   ------------------------------------------------------------
   Purchase, lease, retail/service and parking are four
   different conversations, so they get four addressable cards
   rather than one generic "contact us". Each carries a
   data-inquiry value that main.js maps onto the matching radio
   in the form, so on arriving at #contact the visitor finds
   their category already chosen.
   ------------------------------------------------------------ */

.itc-paths {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 0.7rem + 1vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.itc-path {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    align-content: start;
    height: 100%;
    padding: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
    background-color: var(--itc-white);
    border: 1px solid var(--itc-border);
    border-radius: var(--itc-radius);
    box-shadow: var(--itc-shadow-sm);
    text-decoration: none;
    transition: transform var(--itc-dur) var(--itc-ease),
                box-shadow var(--itc-dur) var(--itc-ease),
                border-color var(--itc-dur) var(--itc-ease);
}

.itc-path:hover,
.itc-path:focus-visible {
    transform: translateY(-3px);
    border-color: var(--itc-gold);
    box-shadow: var(--itc-shadow-md);
}

.itc-path__index {
    font-size: var(--itc-fs-micro);
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.12em;
    color: var(--itc-gold);
    font-variant-numeric: tabular-nums;
}

.itc-path__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.itc-path__title {
    margin: 0;
    font-size: var(--itc-fs-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--itc-navy-deep);
    transition: color var(--itc-dur) var(--itc-ease);
}

.itc-path:hover .itc-path__title {
    color: var(--itc-navy);
}

.itc-path__text {
    font-size: var(--itc-fs-small);
    line-height: 1.62;
    color: var(--itc-ink-soft);
}

.itc-path__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.375rem;
    font-size: var(--itc-fs-micro);
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--itc-gold-deep);
}

.itc-path__arrow {
    transition: transform var(--itc-dur) var(--itc-ease);
}

.itc-path:hover .itc-path__arrow,
.itc-path:focus-visible .itc-path__arrow {
    transform: translateX(3px);
}


/* ------------------------------------------------------------
   ADVANTAGES — glass on the dark architectural section
   ------------------------------------------------------------ */

.itc-advantages {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.875rem, 0.6rem + 0.9vw, 1.25rem);
    margin-top: clamp(2rem, 1.4rem + 2vw, 3.25rem);
    padding: 0;
    list-style: none;
}

/* .itc-glasscard supplies the material; this adds only the
   numeral, so there is still exactly one glass recipe. */
.itc-advantage__index {
    font-size: var(--itc-fs-micro);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--itc-gold);
    font-variant-numeric: tabular-nums;
}


/* ------------------------------------------------------------
   META LINE — an identifier and a link, closing a section
   ------------------------------------------------------------ */

.itc-metaline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--itc-border);
}

.itc-dark .itc-metaline {
    border-top-color: var(--itc-border-dark);
}

.itc-metaline__text {
    margin: 0;
    font-size: var(--itc-fs-small);
    line-height: 1.5;
    color: var(--itc-ink-muted);
}

.itc-dark .itc-metaline__text {
    color: rgba(189, 216, 233, 0.72);
}

.itc-arrowlink {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    font-size: var(--itc-fs-small);
    font-weight: 600;
    color: var(--itc-navy-deep);
    text-decoration: none;
    border-bottom: 1px solid var(--itc-gold);
    transition: color var(--itc-dur) var(--itc-ease);
}

.itc-arrowlink:hover {
    color: var(--itc-gold-deep);
}

.itc-dark .itc-arrowlink {
    color: var(--itc-ivory);
}

.itc-dark .itc-arrowlink:hover {
    color: var(--itc-gold-bright);
}

.itc-arrowlink__arrow {
    transition: transform var(--itc-dur) var(--itc-ease);
}

.itc-arrowlink:hover .itc-arrowlink__arrow,
.itc-arrowlink:focus-visible .itc-arrowlink__arrow {
    transform: translateX(3px);
}

.itc-arrowlinks {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-top: 2rem;
}


/* ------------------------------------------------------------
   BUTTON VARIANTS
   ------------------------------------------------------------ */

.itc-btn--navy {
    background-color: var(--itc-navy);
    color: var(--itc-white);
    border-color: var(--itc-navy);
}

.itc-btn--navy:hover,
.itc-btn--navy:focus-visible {
    background-color: var(--itc-navy-deep);
    border-color: var(--itc-navy-deep);
}

.itc-btn--outline {
    background-color: transparent;
    color: var(--itc-navy-deep);
    border-color: var(--itc-border-strong);
}

.itc-btn--outline:hover,
.itc-btn--outline:focus-visible {
    border-color: var(--itc-gold);
    color: var(--itc-gold-deep);
}


/* ------------------------------------------------------------
   CONTACT — the conversion section
   ------------------------------------------------------------
   Deep navy ground, and the form itself on a solid warm-ivory
   card. Glass is deliberately NOT used here: a form is the one
   place on the page where legibility beats material, and a
   blurred backdrop behind input text is a cost with no return.
   The card is the "warm ivory content area" of the approved
   direction, floated on the architecture with a soft shadow.

   Every selector below is an override scoped to .itc-formcard.
   Nothing in the form's markup contract changes: the ids, the
   name attributes, the submitted values, .interest__input,
   .field__error, .contact__submit-label and the honeypot stay
   exactly as the script and the CRM already expect them.
   ------------------------------------------------------------ */

.itc-contact {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 1.2rem + 3vw, 4rem);
    align-items: start;
}

/* Grid children default to min-width:auto, which lets a long
   unbroken string push the column wider than its track. */
.itc-contact__intro {
    min-width: 0;
}

.itc-contact__details {
    display: grid;
    gap: 0.5rem;
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--itc-border-dark);
}

.itc-contact__org {
    margin: 0;
    font-size: var(--itc-fs-body);
    font-weight: 600;
    color: var(--itc-ivory);
}

.itc-contact__place {
    margin: 0;
    font-size: var(--itc-fs-small);
    line-height: 1.6;
    color: rgba(189, 216, 233, 0.72);
}

.itc-formcard {
    padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    background-color: var(--itc-ivory);
    border: 1px solid var(--itc-border);
    border-radius: var(--itc-radius-lg);
    box-shadow: var(--itc-shadow-lg);
}

/* Safe-by-default form state. The notice is present and the submit
   control is disabled in HTML; main.js hides the notice and enables
   submission only after the JSON/CSRF handler has been attached. */
.itc-formcard .contact__script-required {
    margin: 0 0 1.5rem;
    padding: 0.875rem 1rem;
    border-inline-start: 3px solid var(--itc-gold);
    background-color: rgba(183, 154, 99, 0.12);
    font-size: var(--itc-fs-small);
    line-height: 1.55;
    color: var(--itc-ink-soft);
}

.itc-formcard .contact__script-required[hidden] {
    display: none;
}

.itc-formcard .contact__script-required p {
    margin: 0;
}

.itc-formcard .contact__script-required-en {
    margin-top: 0.5rem;
}

/* ---- Interest: four selectable tiles ---- */

.itc-formcard .interest__legend {
    font-size: var(--itc-fs-micro);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--itc-gold-deep);
}

.itc-formcard .interest__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.75rem;
    row-gap: 0.75rem;
    margin-top: 1rem;
}

.itc-formcard .interest__option {
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    min-height: 56px;
    background-color: var(--itc-white);
    border: 1px solid var(--itc-border-strong);
    border-radius: var(--itc-radius);
    transition: border-color var(--itc-dur) var(--itc-ease),
                background-color var(--itc-dur) var(--itc-ease);
}

.itc-formcard .interest__option:hover {
    border-color: var(--itc-gold);
}

.itc-formcard .interest__option:has(.interest__input:checked) {
    border-color: var(--itc-gold);
    background-color: rgba(183, 154, 99, 0.12);
}

.itc-formcard .interest__input {
    margin-top: 0.3em;
    border-color: var(--itc-border-strong);
}

.itc-formcard .interest__option:hover .interest__input {
    border-color: var(--itc-gold);
}

.itc-formcard .interest__input:checked {
    background-color: var(--itc-gold);
    border-color: var(--itc-gold);
}

/* Sentence case, no tracking: these four labels are Mongolian
   Cyrillic phrases, and tracked-out uppercase Cyrillic at 15px
   is the least readable setting available on the page. */
.itc-formcard .interest__text {
    font-size: var(--itc-fs-small);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.4;
    color: var(--itc-ink-soft);
}

.itc-formcard .interest__option:hover .interest__text,
.itc-formcard .interest__input:checked ~ .interest__text {
    color: var(--itc-navy-deep);
}

/* ---- Fields ---- */

.itc-formcard .contact__fields {
    column-gap: 1.25rem;
    row-gap: 1.25rem;
    margin-top: 1.75rem;
}

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

.itc-formcard .field__optional {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--itc-ink-muted);
}

.itc-formcard .field__input {
    margin-top: 0.5rem;
    padding: 0.75rem 0.875rem;
    background-color: var(--itc-white);
    border: 1px solid var(--itc-border-strong);
    border-radius: var(--itc-radius-sm);
    font-size: var(--itc-fs-body);
    color: var(--itc-ink);
    transition: border-color var(--itc-dur) var(--itc-ease),
                box-shadow var(--itc-dur) var(--itc-ease);
}

.itc-formcard .field__input:hover {
    border-color: var(--itc-blue-corporate);
}

.itc-formcard .field__input:focus {
    border-color: var(--itc-gold);
    box-shadow: 0 0 0 3px rgba(183, 154, 99, 0.18);
}

.itc-formcard .field__input::placeholder {
    color: var(--itc-ink-muted);
    opacity: 1;
}

.itc-formcard .field__input[aria-invalid="true"] {
    border-color: #B4483F;
}

.itc-formcard .field__error {
    font-size: var(--itc-fs-small);
    color: #B4483F;
}

/* ---- Consent ---- */

.itc-formcard .consent {
    margin-top: 1.75rem;
    column-gap: 0.75rem;
}

.itc-formcard .consent__input {
    border-color: var(--itc-border-strong);
}

.itc-formcard .consent__input:checked {
    background-color: var(--itc-gold);
    border-color: var(--itc-gold);
}

.itc-formcard .consent__input[aria-invalid="true"] {
    border-color: #B4483F;
}

.itc-formcard .consent__label {
    font-size: var(--itc-fs-small);
    line-height: 1.6;
    color: var(--itc-ink-soft);
}

.itc-formcard .consent__link {
    color: var(--itc-navy);
    border-bottom-color: var(--itc-border-strong);
}

.itc-formcard .consent__link:hover {
    color: var(--itc-gold-deep);
    border-bottom-color: var(--itc-gold);
}

/* ---- Action ---- */

.itc-formcard .contact__actions {
    gap: 1.25rem 1.75rem;
    margin-top: 1.75rem;
}

/* On ivory the submit inverts back to navy. */
.itc-formcard .contact__submit.btn-primary {
    background-color: var(--itc-navy);
    border-color: var(--itc-navy);
    color: var(--itc-white);
}

.itc-formcard .contact__submit.btn-primary:hover {
    background-color: var(--itc-navy-deep);
    border-color: var(--itc-navy-deep);
    color: var(--itc-white);
}

.itc-formcard .contact__note {
    font-size: var(--itc-fs-small);
    line-height: 1.55;
    color: var(--itc-ink-muted);
}

.itc-formcard .contact__error {
    font-size: var(--itc-fs-small);
    color: #B4483F;
}

/* ---- Success ---- */

.itc-formcard .contact__success {
    padding-top: 0;
    border-top: 0;
}

.itc-formcard .contact__success-label {
    font-size: var(--itc-fs-micro);
    letter-spacing: 0.12em;
    color: var(--itc-gold-deep);
}

.itc-formcard .contact__success-title {
    font-size: var(--itc-fs-h2);
    font-weight: 600;
    color: var(--itc-navy-deep);
}

.itc-formcard .contact__success-text {
    font-size: var(--itc-fs-lead);
    color: var(--itc-ink-soft);
}


/* ------------------------------------------------------------
   VISIT — address and map
   ------------------------------------------------------------ */

.itc-address {
    display: grid;
    gap: 0.375rem;
    margin: 2rem 0 0;
    padding-top: 1.75rem;
    border-top: 1px solid var(--itc-border);
    font-style: normal;
}

.itc-address__org {
    margin: 0;
    font-size: var(--itc-fs-body);
    font-weight: 600;
    color: var(--itc-navy-deep);
}

.itc-address__lines {
    margin: 0;
    font-size: var(--itc-fs-body);
    line-height: 1.7;
    color: var(--itc-ink-soft);
}

.itc-mapframe {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--itc-radius-lg);
    overflow: hidden;
    border: 1px solid var(--itc-border);
    box-shadow: var(--itc-shadow-md);
    background-color: var(--itc-ivory-warm);
}

.itc-mapframe iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ============================================================
   RESPONSIVE — PART 2
   ------------------------------------------------------------
   Breakpoints match the review set: 1440, 1024, 768, 430, 375.
   1440 is the design width and needs no override — the
   container max-width already holds the layout there.
   ============================================================ */

@media (max-width: 1200px) {
    /* Four statistics across stops being readable before the
       tablet breakpoint: the labels are Cyrillic phrases. */
    .itc-statgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    /* Three across between the desktop width and the tablet: four
       cards here would put the photograph below ~230px, where the
       brand chip starts crowding the frame. */
    .itc-tenants {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    /* Tablet: two across. */
    .itc-tenants {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .itc-split,
    .itc-split--media-lead {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked, the photograph returns above the text for every
       split, so the reading order is image then heading. */
    .itc-split--reverse .itc-split__media {
        order: 0;
    }

    .itc-split__media--portrait {
        aspect-ratio: 16 / 10;
    }

    .itc-split__body > .itc-lead {
        max-width: 62ch;
    }

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

@media (max-width: 767px) {
    .itc-statgrid,
    .itc-advantages,
    .itc-paths {
        grid-template-columns: minmax(0, 1fr);
    }

    .itc-formcard .interest__options {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The two-up name/phone row stacks: a half-width input on a
       phone is not wide enough for a Cyrillic placeholder. */
    .itc-formcard .contact__fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .itc-metaline {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }

    .itc-mapframe {
        aspect-ratio: 3 / 2;
    }

    /* The mobile conversion bar is pinned over the foot of the
       page; the last section needs room to clear it. */
    .itc-section:last-of-type {
        padding-bottom: clamp(5.5rem, 4rem + 8vw, 7rem);
    }
}

@media (max-width: 430px) {
    .itc-mark,
    .itc-path {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.5rem;
    }

    /* With one column the text no longer has a numeral beside
       it to sit against. */
    .itc-mark__text,
    .itc-path__body {
        grid-column: 1;
    }

    .itc-statcard {
        padding: 1.25rem 1.25rem 1.375rem;
    }

    .itc-mapframe {
        aspect-ratio: 1 / 1;
    }

    .itc-arrowlinks {
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 375px) {
    /* Nothing may overflow at the narrowest supported width:
       the statistic is the only type large enough to do it,
       and the logo wall the only intentional scroller. */
    .itc-statcard__value {
        font-size: 1.875rem;
    }

    /* "Оффисын боломжуудыг үзэх" is the longest button label on
       the page. Narrower padding and slightly tighter tracking
       keep it on one line at 375px instead of wrapping tracked
       uppercase across two. */
    .itc-btn {
        padding: 0 1.125rem;
        letter-spacing: 0.04em;
        text-align: center;
    }

    .itc-formcard {
        padding: 1.25rem 1rem 1.5rem;
    }

    /* The narrowest supported width. Three logo columns still fit — the
       cell is ~93px wide, leaving 77px of content once padding is taken,
       and the widest mark (the CU wordmark) measures 62px there. */
    .itc-logowall__item {
        min-height: 76px;
        padding: 0.625rem 0.4375rem;
    }

    .itc-logowall__img {
        max-height: 38px;
    }

    .itc-logowall__img--tile {
        max-height: 32px;
    }

    .itc-logowall__name {
        font-size: 0.8125rem;
    }
}


/* ============================================================
   MOTION — PART 2
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .itc-path,
    .itc-path__arrow,
    .itc-arrowlink__arrow {
        transition: none !important;
        transform: none !important;
    }
}


/* ------------------------------------------------------------
   SECTION MEDIA — a full-width architectural band
   ------------------------------------------------------------
   Used where the photograph belongs between the heading and
   the content rather than beside either. A wide crop, so it
   reads as architecture rather than as a hero repeated.
   ------------------------------------------------------------ */

.itc-section__media {
    position: relative;
    aspect-ratio: 21 / 9;
    margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem);
    border-radius: var(--itc-radius-lg);
    overflow: hidden;
    box-shadow: var(--itc-shadow-lg);
    background-color: var(--itc-ivory-warm);
}

.itc-section__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .itc-section__media { aspect-ratio: 16 / 10; }
}


/* ------------------------------------------------------------
   SPLIT BODY — vertical rhythm for stacked children
   ------------------------------------------------------------ */

.itc-split__body .itc-marklist {
    margin-top: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
}

/* A body column that stacks a photograph above the map. */
.itc-split__body > .itc-mapframe {
    margin-top: clamp(1rem, 0.7rem + 1vw, 1.5rem);
}

.itc-arrowlinks + .itc-arrowlinks {
    margin-top: 1.25rem;
}