/**
 * ECOIA — دفاتر ما (نسخه ۳)
 * Poster Grid با عکس واقعی + Ken Burns Hover
 *
 * Hover effects روی هر کارت:
 *   1. Ken Burns — عکس zoom آرام (scale 1→1.10)
 *   2. Overlay — gradient کمی سبک‌تر می‌شود
 *   3. Body   — slide up (translateY 10px→0)
 *   4. Flag   — scale کوچک (1→1.18)
 *   5. Gold line — sweep از راست به چپ
 */

/* ════════════════════════════════════════════════════════════
   ۰. GLOBALS
════════════════════════════════════════════════════════════ */

.skip-link {
    position: absolute; top: -100%; right: 0;
    z-index: var(--z-preloader, 9999);
    background: var(--gold, #C8A951); color: var(--bg-void, #070707);
    padding: 8px 18px; font-size: 13px; font-weight: 700;
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    transition: top 200ms ease;
}
.skip-link:focus { top: 0; }

.offices-grid-section.section-pad,
.offices-network.section-pad {
    padding-top:    var(--section-pad, clamp(80px, 10vw, 140px));
    padding-bottom: var(--section-pad, clamp(80px, 10vw, 140px));
}

/* ════════════════════════════════════════════════════════════
   ① INNER HERO — مثل about.php
════════════════════════════════════════════════════════════ */

.inner-hero {
    position: relative; width: 100%;
    min-height: clamp(52vh, 70vh, 640px);
    display: flex; align-items: flex-end;
    padding-bottom: clamp(64px, 9vw, 108px);
    overflow: hidden; background-color: var(--bg-void, #070707);
    background-size: cover; background-position: center 30%;
}

.inner-hero.offices-hero.inner-hero--has-image {
    background-image: var(--offices-hero-img, none);
    background-position: center 35%;
}

.inner-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(ellipse 80% 60% at 30% 80%, rgba(200,169,81,0.08) 0%, transparent 60%),
        linear-gradient(160deg, rgba(200,169,81,0.04) 0%, transparent 45%),
        linear-gradient(to bottom, rgba(7,7,7,0.30) 0%, rgba(7,7,7,0.70) 55%, rgba(7,7,7,0.97) 100%);
    pointer-events: none;
}
.inner-hero--has-image::before {
    background:
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(200,169,81,0.10) 0%, transparent 70%),
        linear-gradient(to bottom, rgba(7,7,7,0.20) 0%, rgba(7,7,7,0.40) 35%, rgba(7,7,7,0.80) 65%, rgba(7,7,7,0.97) 100%);
}

/* grain */
.inner-hero::after {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 200px 200px; opacity: 0.032; pointer-events: none; mix-blend-mode: overlay;
}

.inner-hero__accent {
    position: absolute; top: 0; right: 0;
    width: 420px; height: 1px; z-index: 3; opacity: 0.7;
    background: linear-gradient(270deg, var(--gold, #C8A951) 0%, rgba(200,169,81,0.3) 60%, transparent 100%);
}
.inner-hero__accent::after {
    content: ''; position: absolute; top: 20px; right: 80px;
    width: 200px; height: 1px;
    background: linear-gradient(270deg, rgba(200,169,81,0.25) 0%, transparent 100%);
}

.inner-hero__content {
    position: relative; z-index: 10; width: 100%;
    max-width: var(--container-max, 1280px); margin: 0 auto;
    padding: 0 var(--container-pad, 24px);
    padding-top: clamp(110px, 15vw, 170px);
}

.breadcrumb {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: clamp(24px, 3.5vh, 36px);
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size: 13px; color: var(--text-secondary, #9A9590);
    position: relative; padding-bottom: 16px;
}
.breadcrumb::after {
    content: ''; position: absolute; bottom: 0; right: 0;
    width: 60px; height: 1px;
    background: linear-gradient(270deg, var(--gold, #C8A951), transparent); opacity: 0.5;
}
.breadcrumb a { color: var(--text-secondary); text-decoration: none; transition: color 400ms ease; }
.breadcrumb a:hover { color: var(--gold-light, #E8D5A0); }
.breadcrumb__sep { color: var(--gold); opacity: 0.5; font-size: 16px; }
.breadcrumb [aria-current="page"] { color: var(--text-primary, #F0EDE8); }

.inner-hero__title {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size: clamp(32px, 4.2vw, 58px); font-weight: 700;
    color: var(--text-primary, #F0EDE8); line-height: 1.25;
    margin: 0 0 18px 0; letter-spacing: -0.01em;
}
.inner-hero__subtitle {
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-size: clamp(18px, 2.3vw, 28px); font-style: italic;
    color: var(--gold-light, #E8D5A0); letter-spacing: 0.02em;
    margin: 0; opacity: 0.82;
}

/* ════════════════════════════════════════════════════════════
   ② STATS
════════════════════════════════════════════════════════════ */

.offices-stats {
    background: var(--bg-void, #070707);
    padding: clamp(44px, 6vw, 72px) 0; position: relative;
}
.offices-stats::before,
.offices-stats::after {
    content: ''; position: absolute; right: 0; left: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,81,0.22) 25%, rgba(200,169,81,0.22) 75%, transparent);
    pointer-events: none;
}
.offices-stats::before { top: 0; }
.offices-stats::after  { bottom: 0; }

.offices-stats__grid {
    display: flex; align-items: center; justify-content: center;
    gap: 0; flex-wrap: wrap;
}
.ofc-stat { flex: 1; min-width: 110px; text-align: center; padding: clamp(16px, 2.5vw, 26px) clamp(16px, 2.5vw, 32px); }
.ofc-stat__sep { width: 1px; height: 48px; flex-shrink: 0; background: linear-gradient(180deg, transparent, rgba(200,169,81,0.22), transparent); }
.ofc-stat__num {
    display: block;
    font-family: var(--font-body-en, 'Inter', sans-serif);
    font-size: clamp(30px, 3.8vw, 48px); font-weight: 800;
    color: var(--gold, #C8A951); line-height: 1; letter-spacing: -0.03em; margin-bottom: 6px;
}
.ofc-stat__label {
    display: block;
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size: clamp(11px, 1vw, 13px); color: var(--text-secondary, #9A9590);
}

/* ════════════════════════════════════════════════════════════
   ③ POSTER GRID — عکس + Ken Burns
════════════════════════════════════════════════════════════ */

.offices-grid-section {
    background: var(--bg-primary, #0A0A0A); position: relative; overflow: hidden;
}
.offices-grid-section::before {
    content: ''; position: absolute; top: 0;
    right: var(--container-pad, 24px); left: var(--container-pad, 24px); height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,81,0.20) 30%, rgba(200,169,81,0.20) 70%, transparent);
    pointer-events: none;
}

.offices-poster-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(8px, 1.2vw, 14px);
    margin-top: clamp(48px, 6.5vh, 80px);
}

/* ── کارت پایه ── */
.office-poster {
    position:       relative;
    height:         clamp(220px, 24vw, 300px);
    border-radius:  var(--radius-md, 4px);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor:         pointer;
    background:     var(--bg-card, #111111);

    /* ── isolation برای stacking context درست ── */
    isolation:      isolate;
}

/* مرکزی: دو ستون + بلندتر */
.office-poster--main {
    grid-column: span 2;
    height:      clamp(260px, 28vw, 360px);
}

/* EU Coming Soon: دو ستون */
.office-poster--coming {
    grid-column: span 2;
    cursor:      default;
    opacity:     0.55;
}

/* ── ① media container ── */
.office-poster__media {
    position: absolute;
    inset:    0;
    z-index:  1;
    background: linear-gradient(135deg, #0f0f0f 0%, #1c1c1c 100%); /* fallback */
    overflow: hidden;
}

/* ── ② Ken Burns: عکس zoom در hover ── */
.office-poster__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center;
    display:    block;
    transform:  scale(1.0);
    filter:     brightness(0.85) saturate(0.9);
    transition:
        transform  750ms cubic-bezier(0.16, 1, 0.3, 1),
        filter     600ms ease;
    will-change: transform;
}

.office-poster:not(.office-poster--coming):hover .office-poster__img {
    transform: scale(1.10);
    filter:    brightness(0.78) saturate(1.05);
}

/* مرکزی: zoom کمتر (چون بزرگ‌تر است) */
.office-poster--main:hover .office-poster__img {
    transform: scale(1.07);
}

/* ── fallback: flag emoji اگه عکس نباشد ── */
.office-poster__flag-fallback {
    width:      100%;
    height:     100%;
    display:    flex;
    align-items:     center;
    justify-content: center;
    font-size:  clamp(72px, 9vw, 110px);
    opacity:    0.08;
    filter:     blur(4px);
    user-select: none;
    transition: transform 750ms cubic-bezier(0.16, 1, 0.3, 1), opacity 600ms ease;
}
.office-poster:not(.office-poster--coming):hover .office-poster__flag-fallback {
    transform: scale(1.12);
    opacity:   0.14;
}
.office-poster--main .office-poster__flag-fallback { font-size: clamp(90px, 12vw, 150px); }

/* ── ③ overlay gradient — layer بین عکس و text ── */
.office-poster__overlay {
    position: absolute;
    inset:    0;
    z-index:  2;
    background: linear-gradient(
        to top,
        rgba(7,7,7,0.95)  0%,
        rgba(7,7,7,0.55)  40%,
        rgba(7,7,7,0.18)  75%,
        rgba(7,7,7,0.06)  100%
    );
    transition: background 600ms ease;
    pointer-events: none;
}

/* در hover overlay کمی سبک‌تر → عکس بیشتر دیده می‌شود */
.office-poster:not(.office-poster--coming):hover .office-poster__overlay {
    background: linear-gradient(
        to top,
        rgba(7,7,7,0.97)  0%,
        rgba(7,7,7,0.42)  35%,
        rgba(7,7,7,0.08)  70%,
        transparent       100%
    );
}

/* ── ④ gold bottom line — sweep از راست به چپ ── */
.office-poster::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    right:      0;
    left:       100%;           /* از بیرون شروع می‌کند */
    height:     3px;
    background: linear-gradient(270deg, var(--gold, #C8A951), rgba(200,169,81,0.25));
    z-index:    6;
    transition: left 550ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.office-poster:not(.office-poster--coming):hover::after {
    left: 0;
}

/* ── glow دنبال موس ── */
.office-poster__glow {
    position: absolute; inset: 0; z-index: 5; pointer-events: none;
}

/* ── badge مرکزی ── */
.office-poster__hq-badge {
    position:    absolute; top: 14px; right: 14px;
    display:     inline-flex; align-items: center; gap: 5px;
    padding:     4px 10px;
    border:      1px solid rgba(200,169,81,0.55); border-radius: 2px;
    background:  rgba(200,169,81,0.14); backdrop-filter: blur(4px);
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   10px; font-weight: 700; color: var(--gold, #C8A951);
    letter-spacing: 0.06em; z-index: 7;
}
.office-poster__hq-badge .icon { flex-shrink: 0; opacity: 0.80; }

/* ── badge coming soon ── */
.office-poster__soon-badge {
    position:    absolute; top: 14px; right: 14px;
    display:     inline-flex; align-items: center; gap: 5px;
    padding:     4px 10px;
    border:      1px dashed rgba(200,169,81,0.35); border-radius: 2px;
    background:  rgba(200,169,81,0.04);
    font-family: var(--font-body-en, 'Inter', sans-serif);
    font-size:   10px; font-weight: 700; color: var(--gold, #C8A951);
    letter-spacing: 0.12em; text-transform: uppercase; z-index: 7;
}
.office-poster__soon-badge .icon { flex-shrink: 0; opacity: 0.65; }

/* ── ⑤ body — slide up در hover ── */
.office-poster__body {
    position:   relative;
    z-index:    7;
    padding:    clamp(14px, 2vw, 20px) clamp(16px, 2.5vw, 24px);
    transform:  translateY(10px);
    transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.office-poster:not(.office-poster--coming):hover .office-poster__body {
    transform: translateY(0);
}

/* flag کوچک */
.office-poster__flag {
    display:       inline-block;
    font-size:     clamp(18px, 2vw, 22px);
    line-height:   1;
    margin-bottom: 8px;
    transition:    transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.office-poster:not(.office-poster--coming):hover .office-poster__flag {
    transform: scale(1.20);
}

/* شهر */
.office-poster__city {
    font-family:   var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:     clamp(14px, 1.4vw, 18px); font-weight: 700;
    color:         var(--text-primary, #F0EDE8); line-height: 1.3;
    margin-bottom: 4px;
    transition:    color 350ms ease;
}
.office-poster:not(.office-poster--coming):hover .office-poster__city {
    color: var(--gold-light, #E8D5A0);
}
.office-poster--main .office-poster__city { font-size: clamp(18px, 2vw, 24px); }

/* کشور */
.office-poster__country {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   clamp(11px, 0.95vw, 13px); color: var(--text-secondary, #9A9590);
    line-height: 1.4;
}

/* EU coming: city طلایی */
.office-poster--coming .office-poster__city { color: var(--gold, #C8A951); opacity: 0.8; }

/* focus-visible برای keyboard nav */
.office-poster:focus-visible {
    outline:        2px solid var(--gold, #C8A951);
    outline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════
   ④ OFFICES NETWORK
════════════════════════════════════════════════════════════ */

.offices-network {
    background: var(--bg-secondary, #0E0E0E); position: relative; overflow: hidden;
}
.offices-network::before {
    content: ''; position: absolute; top: 0;
    right: var(--container-pad, 24px); left: var(--container-pad, 24px); height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,81,0.20) 30%, rgba(200,169,81,0.20) 70%, transparent);
    pointer-events: none;
}
.offices-network__grid {
    display: grid; grid-template-columns: 1fr 1.2fr;
    gap: clamp(48px, 7vw, 96px); align-items: start;
}
.offices-network__title {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size: clamp(26px, 3.2vw, 42px); font-weight: 700;
    color: var(--text-primary, #F0EDE8); line-height: 1.25;
    margin-bottom: clamp(16px, 2.5vh, 22px); letter-spacing: -0.015em;
}
.offices-network__desc {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size: clamp(13px, 1.2vw, 16px); color: var(--text-secondary, #9A9590);
    line-height: 2; margin-bottom: clamp(24px, 4vh, 36px);
}
.offices-network__nums {
    display: flex; align-items: center; gap: clamp(24px, 4vw, 48px);
    padding-top: clamp(20px, 3vh, 28px); border-top: 1px solid rgba(200,169,81,0.10);
}
.offices-network__num-val {
    display: block; font-family: var(--font-body-en, 'Inter', sans-serif);
    font-size: clamp(26px, 3vw, 38px); font-weight: 800;
    color: var(--gold, #C8A951); line-height: 1; letter-spacing: -0.03em; margin-bottom: 4px;
}
.offices-network__num-label {
    display: block; font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size: clamp(11px, 1vw, 13px); color: var(--text-secondary, #9A9590);
}
.offices-network__countries-label {
    font-family: var(--font-body-en, 'Inter', sans-serif);
    font-size: 11px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase;
    color: var(--gold, #C8A951); margin-bottom: clamp(16px, 2.5vh, 24px);
    padding-bottom: 12px; border-bottom: 1px solid rgba(200,169,81,0.10); display: block;
}
.offices-network__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ofc-chip {
    display: inline-flex; align-items: center; padding: 6px 12px;
    border: 1px solid rgba(200,169,81,0.12); border-radius: 2px;
    background: rgba(200,169,81,0.03);
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size: clamp(11px, 0.9vw, 13px); color: var(--text-secondary, #9A9590);
    transition: border-color 300ms ease, background 300ms ease, color 300ms ease;
    cursor: default;
}
.ofc-chip:hover { border-color: rgba(200,169,81,0.35); background: rgba(200,169,81,0.07); color: var(--text-primary, #F0EDE8); }
.ofc-chip--more { color: var(--gold, #C8A951); opacity: 0.50; border-color: rgba(200,169,81,0.08); }

/* ════════════════════════════════════════════════════════════
   ⑤ CTA
════════════════════════════════════════════════════════════ */

.offices-cta { background: var(--bg-void, #070707); padding: clamp(88px, 12vw, 144px) 0; position: relative; overflow: hidden; }
.offices-cta__grain {
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 180px 180px; opacity: 0.022; pointer-events: none; mix-blend-mode: overlay;
}
.offices-cta::before {
    content: ''; position: absolute; top: 50%; right: 38%; transform: translateY(-50%);
    width: 500px; height: 500px; border-radius: 50%;
    background: radial-gradient(circle, rgba(200,169,81,0.07) 0%, transparent 65%); pointer-events: none;
}
.offices-cta::after {
    content: ''; position: absolute; top: 0;
    right: var(--container-pad, 24px); left: var(--container-pad, 24px); height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,81,0.22) 30%, rgba(200,169,81,0.22) 70%, transparent);
    pointer-events: none;
}

.offices-cta__inner {
    display: grid; grid-template-columns: 1fr 1.1fr;
    gap: clamp(48px, 7vw, 96px); align-items: center;
    position: relative; z-index: 1;
}
.offices-cta__eyebrow {
    font-family: var(--font-body-en, 'Inter', sans-serif);
    font-size: 11px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--gold, #C8A951); margin-bottom: clamp(18px, 2.8vh, 26px); display: block;
}
.offices-cta__title {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size: clamp(28px, 3.8vw, 52px); font-weight: 700;
    color: var(--text-primary, #F0EDE8); line-height: 1.25;
    margin-bottom: clamp(16px, 2.5vh, 24px); letter-spacing: -0.015em;
}
.offices-cta__title-em { font-style: normal; color: var(--gold, #C8A951); }
.offices-cta__sub {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size: clamp(13px, 1.2vw, 16px); color: var(--text-secondary, #9A9590);
    line-height: 2; margin-bottom: clamp(28px, 4.5vh, 40px); max-width: 400px;
}
.offices-cta__contacts { display: flex; flex-direction: column; gap: clamp(12px, 1.8vh, 18px); }

.ofc-contact-card {
    display: flex; align-items: center; gap: clamp(14px, 2vw, 20px);
    padding: clamp(16px, 2.5vw, 22px) clamp(18px, 2.8vw, 28px);
    background: var(--bg-card, #111111);
    border: 1px solid rgba(200,169,81,0.10); border-radius: var(--radius-md, 4px);
    text-decoration: none;
    transition: border-color 350ms ease, background 350ms ease;
}
.ofc-contact-card:hover { border-color: rgba(200,169,81,0.30); background: var(--bg-card-hover, #161616); }
.ofc-contact-card__icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    border: 1px solid rgba(200,169,81,0.18); border-radius: var(--radius-sm, 2px);
    background: rgba(200,169,81,0.05); color: var(--gold, #C8A951);
    transition: border-color 350ms ease, background 350ms ease;
}
.ofc-contact-card:hover .ofc-contact-card__icon { border-color: rgba(200,169,81,0.40); background: rgba(200,169,81,0.10); }
.ofc-contact-card__label {
    display: block; font-family: var(--font-body-en, 'Inter', sans-serif);
    font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold, #C8A951); opacity: 0.6; margin-bottom: 3px;
}
.ofc-contact-card__val {
    display: block; font-family: var(--font-body-en, 'Inter', sans-serif);
    font-size: clamp(12px, 1.1vw, 14px); color: var(--text-primary, #F0EDE8); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color 350ms ease;
}
.ofc-contact-card:hover .ofc-contact-card__val { color: var(--gold-light, #E8D5A0); }

/* دکمه */
.btn--gold { background: var(--gold, #C8A951); color: var(--bg-void, #070707); border: 1px solid var(--gold, #C8A951); font-weight: 700; transition: background 400ms ease, box-shadow 400ms ease, transform 300ms ease; }
.btn--gold:hover { background: var(--gold-bright, #F0E0A8); box-shadow: 0 0 32px rgba(200,169,81,0.45); transform: translateY(-2px); }
.btn--lg { padding: 14px 28px; font-size: var(--fs-body, 15px); gap: 10px; }

/* ════════════════════════════════════════════════════════════
   ⑥ RESPONSIVE
════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .offices-grid-section.section-pad, .offices-network.section-pad {
        padding-top: clamp(56px, 8vw, 80px); padding-bottom: clamp(56px, 8vw, 80px);
    }
    .offices-poster-grid   { grid-template-columns: repeat(3, 1fr); }
    .offices-network__grid { grid-template-columns: 1fr; gap: clamp(36px, 5vh, 52px); }
    .offices-cta__inner    { grid-template-columns: 1fr; gap: clamp(36px, 5vh, 52px); }
}

@media (max-width: 768px) {
    .offices-grid-section.section-pad, .offices-network.section-pad {
        padding-top: clamp(44px, 7vw, 64px); padding-bottom: clamp(44px, 7vw, 64px);
    }
    .inner-hero     { min-height: 44vh; padding-bottom: clamp(44px, 7vw, 72px); }
    .inner-hero__title { font-size: clamp(28px, 6.5vw, 42px); }

    .offices-poster-grid  { grid-template-columns: repeat(2, 1fr); gap: clamp(6px, 1.5vw, 10px); }
    .office-poster--main  { grid-column: span 2; height: clamp(200px, 38vw, 260px); }
    .office-poster--coming{ grid-column: span 2; }
    .office-poster        { height: clamp(170px, 35vw, 220px); }

    .ofc-stat__sep { display: none; }
    .ofc-stat      { min-width: 45%; }
    .offices-stats { padding: clamp(32px, 5vw, 52px) 0; }
}

@media (max-width: 480px) {
    .breadcrumb { font-size: 11px; }
    .offices-poster-grid  { grid-template-columns: 1fr 1fr; gap: 6px; }
    .office-poster        { height: clamp(140px, 40vw, 180px); }
    .office-poster--main  { grid-column: span 2; height: clamp(170px, 45vw, 210px); }
    .office-poster--coming{ grid-column: span 2; }
    .offices-cta__title   { font-size: clamp(24px, 6vw, 34px); }
}