/* SARGE — Hangar. Dark, image-first, bay colours via --c (stripe) / --ct (text). */

@font-face { font-family: Oswald; font-weight: 400; font-display: swap; src: url(fonts/oswald-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Oswald; font-weight: 400; font-display: swap; src: url(fonts/oswald-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Oswald; font-weight: 500; font-display: swap; src: url(fonts/oswald-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Oswald; font-weight: 500; font-display: swap; src: url(fonts/oswald-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Oswald; font-weight: 600; font-display: swap; src: url(fonts/oswald-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Oswald; font-weight: 600; font-display: swap; src: url(fonts/oswald-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Oswald; font-weight: 700; font-display: swap; src: url(fonts/oswald-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Oswald; font-weight: 700; font-display: swap; src: url(fonts/oswald-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(fonts/inter-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(fonts/inter-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(fonts/inter-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Tektur 800: one angular display face for numbers and stencil letters — full Cyrillic */
@font-face { font-family: Tektur; font-weight: 400 900; font-display: swap; src: url(fonts/tektur-cyrillic-800-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Tektur; font-weight: 400 900; font-display: swap; src: url(fonts/tektur-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --bg: #070707; --bg2: #0a0a0a; --line: #1a1a1a;
  --fg: #f4f4f4; --fg2: #c4c4c4; --fg3: #9a9a9a;
  --gold: #FAC200; --ice: #d8e4f0;
  --pad: clamp(16px, 3.9vw, 56px);
  --display: Oswald, "Arial Narrow", sans-serif;
  --stencil: Tektur, Oswald, sans-serif;
  --tab: 120px;
  --c: var(--gold); --ct: var(--fg);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 500 16px/1.5 Inter, system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { color: #fff; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: #000; padding: 10px 16px; }
.skip:focus { left: 8px; }

/* ── buttons ─────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px; font: 600 13px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.btn-gold { background: var(--gold); color: #000; }
.btn-gold:hover { background: #e0a913; color: #000; }
.btn-lg { height: 54px; padding: 0 30px; font-size: 14px; }
.btn-tg { text-transform: none; font-size: 14px; letter-spacing: .06em; }

/* ── nav ─────────────────────────────────────────────── */
.nav { height: 72px; display: flex; align-items: center; gap: 24px; padding: 0 var(--pad); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; background: rgba(7,7,7,.94); backdrop-filter: blur(8px); }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.wordmark { display: block; height: 19px; width: auto; color: var(--fg); }
.status { display: flex; align-items: center; gap: 9px; font: 500 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #f0b4b4; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #e03a3a; box-shadow: 0 0 10px #e03a3a; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; box-shadow: 0 0 2px #e03a3a; } }
.crumbs { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--fg3); }
.crumbs span[aria-hidden] { color: #444; }
.crumb-bay { color: var(--ct); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.nav-mail { font: 500 13px/1 var(--display); letter-spacing: .08em; color: var(--fg2); }

/* ── bays (hero): a slider — 4 fit on desktop, more scroll sideways ── */
.bays-wrap { position: relative; }
.bays { --h: min(720px, calc(100svh - 72px)); --per: min(var(--n, 4), 4); height: var(--h); min-height: 520px; display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bays::-webkit-scrollbar { display: none; }
.bay { flex: 0 0 calc(100% / var(--per)); scroll-snap-align: start; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 36px; border-right: 1px solid var(--line); background: linear-gradient(180deg, #151515, #070707); isolation: isolate; }
.bays-ctrl { position: absolute; z-index: 5; right: 24px; top: 26px; display: flex; gap: 2px; }
.bays-ctrl[hidden] { display: none; }
.bays-pos { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* announced, not shown: keeps the corner free for the bay icon row */
.bays-ctrl button { width: 44px; height: 44px; border: 0; background: var(--gold); color: #000; font: 400 22px/1 var(--display); cursor: pointer; }
.bays-ctrl button:disabled { background: rgba(7,7,7,.8); color: #555; cursor: default; }
.bay:last-child { border-right: 0; }
.bay::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: #262626; z-index: 2; transition: background .3s; }
.bay:hover::before, .bay:focus-visible::before, .bay--open::before { background: var(--gold); }
.bay-img { position: absolute; inset: 0; z-index: -2; }
.bay-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s; filter: saturate(.85); }
.bay:hover .bay-img img { transform: scale(1.04); filter: saturate(1); }
.bay-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,7,7,.4) 0%, rgba(7,7,7,.12) 40%, rgba(7,7,7,.92) 100%); }
.bay-top { display: flex; justify-content: space-between; align-items: center; font: 600 13px/1 var(--display); letter-spacing: .22em; }
.bay-code { display: inline-flex; align-items: center; gap: 14px; color: var(--gold); text-transform: uppercase; }
.bay-count { color: #d8d8d8; letter-spacing: .12em; text-transform: uppercase; }
/* stencil number: filled with the bay's light tone (no outlines, no rounding) */
.bay-num { font: 800 clamp(96px, 12.8vw, 184px)/.82 var(--stencil); color: var(--fg); margin-left: -4px; letter-spacing: -.03em; text-shadow: 0 2px 28px rgba(0,0,0,.55); transition: color .3s, transform .4s; }
.bay:hover .bay-num { transform: translateY(-4px); }
.bay-name { font: 600 clamp(28px, 3vw, 44px)/1 var(--display); text-transform: uppercase; color: #fff; }

/* open bay: chosen one wide, the rest narrow tabs (columns set inline per page) */
.bays--open { display: grid; overflow: visible; scroll-snap-type: none; }
.bays--open .bay { flex: none; }
.bay--tab { padding: 32px 0; align-items: center; }
.bay--tab .bay-top { display: none; }
.bay--tab .bay-num { font-size: 40px; margin: 0; }
.bay--tab .bay-name { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 22px; letter-spacing: .14em; color: #a8a8a8; }
.bay--tab:hover .bay-name { color: #fff; }
.bay--open { padding: 40px var(--pad); }
.bay-close { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px; border: 1px solid rgba(255,255,255,.2); background: rgba(7,7,7,.5); letter-spacing: .16em; text-transform: uppercase; color: #ddd; }
.bay-num--xl { position: absolute; right: var(--pad); top: 96px; font-size: clamp(160px, 22vw, 320px); z-index: -1; }
.bay-open-body { max-width: 560px; }
.bay-h1 { font: 700 clamp(56px, 7.8vw, 112px)/.9 var(--display); text-transform: uppercase; color: #fff; margin-bottom: 24px; }
.bay-pitch { font-size: 18px; color: #d0d0d0; margin-bottom: 28px; }

/* ── stats ───────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #262626; border-bottom: 1px solid var(--line); position: relative; background: var(--bg2); }
.stats--bay::before { content: ""; position: absolute; inset: -1px 0 auto; height: 2px; background: var(--c); }
.stat { padding: 40px 44px; border-right: 1px solid var(--line); }
.stat:first-child { padding-left: var(--pad); }
.stat:last-child { border-right: 0; }
.stat-v { font: 600 clamp(44px, 5.6vw, 80px)/.9 var(--display); color: var(--fg); white-space: nowrap; }
.stat-v em { font-style: normal; color: var(--fg2); }
.stat-l { margin-top: 14px; font: 500 13px/1.2 var(--display); letter-spacing: .18em; text-transform: uppercase; color: #b0b0b0; }

/* ── cases ───────────────────────────────────────────── */
.cases-head { padding: 56px var(--pad) 32px; display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.cases-back { width: 100%; font: 500 13px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--fg3); }
.cases-h { font: 600 clamp(36px, 3.9vw, 56px)/1 var(--display); text-transform: uppercase; }
.cases-count { font: 400 clamp(36px, 3.9vw, 56px)/1 var(--display); color: #555; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(240px, 22.2vw, 320px); grid-auto-flow: dense; gap: 2px; }
.tile { position: relative; overflow: hidden; background: #101010; animation: rise .5s ease both; }
.tile--big { grid-column: span 2; grid-row: span 2; }
.tile-link { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; }
.tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: transparent; z-index: 3; transition: background .3s; }
.tile:hover::before, .tile:focus-within::before { background: var(--gold); }
.tile-img { position: absolute; inset: 0; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.tile-img--empty { background: linear-gradient(160deg, #1a1a1a, #090909); }
.tile-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(7,7,7,.9) 100%); transition: background .3s; }
.tile-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; }
.code { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--display); letter-spacing: .16em; color: var(--fg3); }
.tile-title { font: 600 24px/1.1 var(--display); text-transform: uppercase; color: #fff; }
.tile--big .tile-link { padding: 36px; }
.tile--big .tile-title { font-size: clamp(28px, 2.8vw, 40px); }
.tile--big .code { font-size: 13px; }
.tile-more { display: inline-flex; align-items: center; gap: 8px; max-height: 0; opacity: 0; overflow: hidden; font: 600 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); transition: max-height .3s, opacity .3s, margin .3s; }
.chip { position: absolute; z-index: 2; top: 18px; right: 18px; padding: 6px 12px; background: rgba(7,7,7,.75); font: 600 13px/1.2 var(--display); color: #fff; }
.tile:hover .tile-img img, .tile:focus-within .tile-img img { transform: scale(1.05); }
.tile:hover .tile-link::after, .tile:focus-within .tile-link::after { background: linear-gradient(180deg, rgba(7,7,7,.2), rgba(7,7,7,.92)); }
.tile:hover .tile-more, .tile:focus-within .tile-more { max-height: 20px; opacity: 1; margin-top: 8px; }
.tile:hover, .tile:focus-within { outline: 2px solid var(--gold); outline-offset: -2px; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.tiles--row { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; }

.more { padding: 36px; display: flex; justify-content: center; align-items: center; gap: 14px; font: 500 12px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--fg3); }
.dots { display: flex; gap: 12px; }
.dots i { width: 6px; height: 6px; background: var(--gold); }
.dots i:nth-child(2) { opacity: .5; } .dots i:nth-child(3) { opacity: .2; }
.more.loading .dots i { animation: blink 1s infinite; }
.more.loading .dots i:nth-child(2) { animation-delay: .15s; } .more.loading .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .15; } }
.empty { padding: 0 var(--pad) 56px; color: var(--fg3); }

/* ── CTA ─────────────────────────────────────────────── */
.cta { border-top: 1px solid var(--line); padding: 72px var(--pad); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 48px; background: var(--bg2); }
.kicker { font: 600 13px/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.cta-h { font: 600 clamp(40px, 4.4vw, 64px)/1 var(--display); text-transform: uppercase; }
.cta-sub { margin-top: 14px; font: 400 clamp(22px, 2.2vw, 32px)/1.2 var(--display); color: var(--fg2); }
.cta-actions { display: flex; flex-direction: column; gap: 10px; min-width: 340px; }
.btn-tg-big { height: 72px; padding: 0 32px; background: var(--gold); color: #000; display: flex; align-items: center; gap: 16px; font: 600 26px/1.1 var(--display); }
.btn-tg-big:hover { background: #e0a913; color: #000; }
.btn-tg-big small { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.btn-mail { height: 52px; padding: 0 32px; border: 1px solid var(--ice); color: var(--ice); display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 500 16px/1 var(--display); letter-spacing: .04em; }
.btn-mail small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg3); }

/* ── case page ───────────────────────────────────────── */
.case-hero { height: min(760px, calc(100svh - 72px)); min-height: 480px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--pad); isolation: isolate; background: #0f0f0f; }
.case-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--c); z-index: 2; }
.case-hero-img { position: absolute; inset: 0; z-index: -2; }
.case-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.case-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,7,7,.1) 30%, rgba(7,7,7,.95) 100%); }
.case-cover-trigger { position: absolute; inset: 0; cursor: zoom-in; }
.case-cover-trigger:focus-visible { outline: 3px solid var(--c); outline-offset: -6px; }
.case-num { position: absolute; top: 40px; right: var(--pad); font-size: clamp(80px, 10.3vw, 148px); opacity: .9; }
.case-num, .case-hero-body { pointer-events: none; }
.case-hero-body { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 48px; }
.case-hero-body a, .case-hero-body button { pointer-events: auto; }
.case-meta { display: flex; align-items: center; gap: 14px; font: 600 14px/1 var(--display); letter-spacing: .2em; color: var(--fg); margin-bottom: 16px; }
.case-h1 { font: 700 clamp(48px, 6.7vw, 96px)/.92 var(--display); text-transform: uppercase; color: #fff; overflow-wrap: anywhere; }
.facts { display: flex; gap: 2px; }
.fact { display: flex; flex-direction: column-reverse; padding: 20px 28px; background: rgba(7,7,7,.72); }
.fact dd { font: 600 clamp(36px, 3.6vw, 52px)/.9 var(--display); color: #fff; }
.fact dt { margin-top: 10px; font: 500 12px/1.2 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--fg2); }
.case-lead { padding: 64px var(--pad); display: grid; grid-template-columns: 1fr minmax(280px, 420px); gap: 80px; border-bottom: 1px solid var(--line); }
.lead { font: 400 clamp(22px, 2.2vw, 32px)/1.3 var(--display); color: #ececec; max-width: 30em; }
.info { display: grid; grid-template-columns: 120px 1fr; row-gap: 14px; align-content: start; }
.info dt { font: 500 12px/1.6 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--fg3); }
.info dd { font-weight: 600; color: var(--fg); }
.info dd a { color: var(--ct); border-bottom: 1px solid color-mix(in srgb, var(--ct) 40%, transparent); }
.case-hero--bare { height: auto; min-height: 420px; }
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding-top: 2px; }
.g { position: relative; overflow: hidden; display: block; background: #111; }
.g6 { grid-column: span 6; height: clamp(320px, 47vw, 680px); }
.g3 { grid-column: span 3; height: clamp(260px, 32vw, 460px); }
.g2 { grid-column: span 2; height: clamp(220px, 22vw, 320px); }
.g-img, .g-img img { width: 100%; height: 100%; }
.g-img img { object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
a.g:hover .g-img img { transform: scale(1.03); }
.video .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border: 0; background: var(--gold); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.video .play:hover { background: #ffd23a; }
.video .play { box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 10px 32px rgba(0,0,0,.45); }
.video-link { z-index: 1; padding: 8px 12px; background: rgba(7,7,7,.75); left: 16px; bottom: 16px; }
.video-link { position: absolute; left: 24px; bottom: 20px; font: 500 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #ddd; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video--ext { display: block; }
.video--ext:hover .play { background: #ffd23a; }
.story { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); border-bottom: 1px solid var(--line); }
.story > div { padding: 48px 44px; border-right: 1px solid var(--line); }
.story > div:first-child { padding-left: var(--pad); }
.story > div:last-child { border-right: 0; }
.story h2 { font: 600 14px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.story p { font-size: 17px; color: #d4d4d4; }
.tags { padding: 24px var(--pad); display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 13px/1 var(--display); letter-spacing: .08em; color: var(--fg3); }
.related-head { padding: 48px var(--pad) 24px; display: flex; align-items: baseline; justify-content: space-between; }
.related-head h2 { font: 600 32px/1 var(--display); text-transform: uppercase; }
.related-head a { font: 600 12px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }

/* bay page: services chips under the h1 */
.bay-seo-h1 { font: 500 clamp(18px, 1.6vw, 22px)/1.35 var(--display); color: #e6e6e6; margin-bottom: 18px; max-width: 34em; }
.bay-services { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bay-services li { padding: 7px 12px; background: rgba(7,7,7,.6); border: 1px solid color-mix(in srgb, var(--ct) 40%, transparent); font: 500 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ct); }
.stats { grid-template-columns: repeat(var(--cols, 4), 1fr); }

/* tile without photo: stencil number on the bay colour */
.tile-img--empty { display: flex; align-items: center; justify-content: center; }
.tile-num { font: 800 clamp(64px, 7vw, 110px)/1 var(--stencil); color: var(--ct); opacity: .32; transform: translateY(-14%); }
.tile--big .tile-num { font-size: clamp(110px, 13vw, 220px); }

/* partners wall */
/* partners + press: same padded block, same heading as cases */
.press, .partners { padding: 56px var(--pad) 48px; border-top: 1px solid var(--line); }
.partners .partner-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.partners .partner { border: 0; height: 92px; box-shadow: inset -1px -1px 0 var(--line); }
[id] { scroll-margin-top: 80px; }
.partners-head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.partners-head h2 { font: 600 clamp(36px, 3.9vw, 56px)/1 var(--display); text-transform: uppercase; }
.partners-count { font: 400 clamp(36px, 3.9vw, 56px)/1 var(--display); color: #555; }
.partners-index { margin-left: auto; font: 600 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.partner-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px; }
.partner { position: relative; height: 84px; padding: 0 44px 0 20px; display: flex; align-items: center; background: #0d0d0d; border: 1px solid var(--line); transition: background .2s, border-color .2s; }
a.partner:hover { background: #141414; border-color: var(--gold); }
.partner-name { font: 600 16px/1.15 var(--display); letter-spacing: .02em; text-transform: uppercase; color: #e6e6e6; }
.partner--logo img { max-height: 40px; max-width: 100%; width: auto; filter: grayscale(1) brightness(1.6); opacity: .8; transition: filter .2s, opacity .2s; }
a.partner--logo:hover img { filter: none; opacity: 1; }
.partner--plain .partner-name { color: #9a9a9a; }
.partner-count { position: absolute; top: 10px; right: 12px; min-width: 22px; height: 22px; padding: 0 6px; display: flex; align-items: center; justify-content: center; background: #1c1c1c; font: 600 12px/1 var(--display); color: var(--gold); }
.partners-more { margin-top: 2px; }
.partners-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 12px; font: 600 13px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--fg2); }
.partners-more > summary::-webkit-details-marker { display: none; }
.partners-more > summary::before { content: "+"; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: var(--gold); color: #000; font-size: 18px; }
.partners-more[open] > summary::before { content: "−"; }
.partners-more .when-open, .partners-more[open] .when-closed { display: none; }
.partners-more[open] .when-open { display: inline; }
.partners[data-bay] .partners-head h2 { color: var(--ct); }

/* press */
.press-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.press-list a { display: grid; grid-template-columns: 220px 1fr 24px; gap: 24px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.press-list a:hover .press-title { color: var(--gold); }
.press-src { font: 600 12px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
.press-meta { display: grid; gap: 6px; }
.press-date { font: 400 12px/1.3 var(--display); color: var(--fg3); }
.press-title { font: 500 18px/1.35 var(--display); color: #e6e6e6; transition: color .2s; }
.press-go { color: var(--gold); }
.press-note { display: block; margin-top: 5px; color: var(--gold); font: 12px/1.4 Inter, system-ui, sans-serif; }
.press-context { display: block; margin-top: 5px; color: var(--fg3); font: 14px/1.5 Inter, system-ui, sans-serif; text-transform: none; }
.case .press { border-bottom: 0; }
/* client review: big quote right before the contacts */
.review { margin: 0; padding: 72px var(--pad) 64px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 96px minmax(0, 960px); gap: 8px 24px; }
.review-mark { grid-row: span 2; font: 800 140px/.8 var(--stencil); color: var(--gold); }
.review blockquote { margin: 0; }
.review blockquote p { font: 500 clamp(24px, 2.6vw, 38px)/1.3 var(--display); color: var(--fg); }
.review figcaption { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font: 600 13px/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.review figcaption b { font-weight: 600; color: var(--gold); }
.review figcaption span { color: var(--fg3); }
@media (max-width: 760px) { .review { grid-template-columns: 1fr; padding: 44px 16px 40px; } .review-mark { font-size: 90px; grid-row: auto; } }

/* partner pages */
.partner-head { padding: 64px var(--pad) 40px; border-bottom: 1px solid var(--line); }
.partner-head .kicker a { color: var(--gold); }
.partner-id { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.partner-logo { max-height: 72px; width: auto; filter: grayscale(1) brightness(1.6); }
.partner-h1 { font: 700 clamp(44px, 6vw, 88px)/.95 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.muted-num { color: #555; font-weight: 400; }
.partner-meta { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font: 500 14px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--fg2); }
.partner-bay { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--ct) 45%, transparent); color: var(--ct); }
.partner-site { color: var(--ice); }
.partner-index { padding: 40px var(--pad) 56px; columns: 3 300px; column-gap: 48px; }
.pi-group { break-inside: avoid; margin-bottom: 28px; }
.pi-letter { font: 800 44px/1 var(--stencil); color: var(--gold); opacity: .8; margin-bottom: 10px; }
.pi-group ul { list-style: none; margin: 0; padding: 0; }
.pi-item { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); }
span.pi-item .pi-name { color: #9a9a9a; }
.pi-item img { max-height: 28px; width: auto; align-self: flex-start; filter: grayscale(1) brightness(1.6); }
.pi-name { font: 600 18px/1.2 var(--display); text-transform: uppercase; }
.pi-group a:hover .pi-name { color: var(--gold); }
.pi-meta { font-size: 13px; color: var(--fg3); }
.more span[aria-hidden] { color: #444; }
.pager { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 0 var(--pad) 40px; font: 600 13px/1 var(--display); letter-spacing: .12em; color: var(--fg3); }
.pager[hidden] { display: none; }
.pager-l { margin-right: 10px; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; color: #666; }
.pager a, .pager span[aria-current] { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.pager a:hover { border-color: var(--fg3); color: var(--fg); }
.pager span[aria-current] { background: var(--fg); color: #000; border-color: var(--fg); }

/* ── header nav + quote ── */
.nav-links { display: flex; gap: 28px; margin-left: 12px; font: 500 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.nav-links a { color: var(--fg2); padding: 8px 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.nav-links a:hover { color: #fff; border-color: var(--gold); }

/* ── stats: highlighted, each one a link to its section ── */
.stat-l { color: #e2e2e2; }

/* ── colour photos with tonal contrast; accents are the brand yellow ── */
.tile-img, .bay-img { isolation: isolate; }
.tile-img img, .bay-img img { filter: contrast(1.08) brightness(.86); transition: filter .5s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.bay-img img { filter: contrast(1.1) brightness(.62); }
.bay .bay-shade { background: linear-gradient(180deg, rgba(7,7,7,.5) 0%, rgba(7,7,7,.3) 45%, rgba(7,7,7,.92) 100%); }
.tile:hover .tile-img img, .tile:focus-within .tile-img img, .bay:hover .bay-img img, .bay:focus-visible .bay-img img { filter: none; }
.tile-title, .bay-name { color: var(--fg); transition: color .3s; }
.bay-num { transition: color .3s, transform .4s; }
.bay:hover .bay-num, .bay:focus-visible .bay-num, .bay--open .bay-num { color: var(--gold); }
.tile:hover .tile-num, .tile:focus-within .tile-num { color: var(--gold); opacity: .6; }
.tile-more, .tile-more svg { color: #fff; }
.tile:hover, .tile:focus-within { outline-color: var(--gold); }

/* direction icon in its square — the bay's mark instead of a colour */
.ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1.5px solid var(--gold); color: var(--gold); background: rgba(7,7,7,.55); transition: background .3s, color .3s; }
.ico--lg { width: 52px; height: 52px; border-width: 2px; }
.ico--sm { width: 32px; height: 32px; }
.ico--xs { width: 22px; height: 22px; border-width: 1px; }
.bay:hover .ico, .bay:focus-visible .ico, .bay--open .ico, .tile:hover .ico, .tile:focus-within .ico, .case-hero .ico { background: var(--gold); color: #000; }
.bay-top { gap: 16px; justify-content: flex-start; }
.bay--tab .ico { margin: 18px 0 auto; }
.crumb-bay { display: inline-flex; align-items: center; gap: 8px; }
.crumb-bay .ico { width: 20px; height: 20px; }

/* lightbox */
.lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(0,0,0,.94); }
.lightbox img { width: 100%; height: 100%; object-fit: contain; }
.lb-count { position: absolute; bottom: 16px; left: 50%; translate: -50% 0; padding: 8px 12px; color: #fff; background: rgba(20,20,20,.8); }
.lightbox button { position: absolute; width: 56px; height: 56px; border: 0; background: rgba(20,20,20,.8); color: #fff; font: 400 32px/1 var(--display); cursor: pointer; }
.lb-close { top: 16px; right: 16px; } .lb-prev { left: 16px; top: 50%; translate: 0 -50%; } .lb-next { right: 16px; top: 50%; translate: 0 -50%; }

/* 404 */
.notfound { padding: 96px var(--pad); text-align: center; }
.notfound .bay-num { display: block; margin: 0 auto 24px; color: var(--gold); }
.notfound h1 { font: 600 48px/1 var(--display); text-transform: uppercase; margin-bottom: 32px; }

.case-project { padding: 0 var(--pad); margin: 24px 0 40px; }

/* footer + floating TG */
.foot { border-top: 1px solid var(--line); padding: 28px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 500 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.foot-name { color: var(--fg3); }
.foot-links { display: flex; flex-wrap: wrap; gap: 16px 32px; color: #b0b0b0; }
.tg-float { display: none; }

/* ── responsive ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 32px 24px; }
  .nav-mail { display: none; }
  .nav-links { gap: 18px; }
  .case-hero-body { grid-template-columns: 1fr; gap: 24px; }
  .cta { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .bays { --per: 2.2; }
}
@media (max-width: 760px) {
  .nav { height: 60px; gap: 12px; }
  .wordmark { height: 14px; }
  .status, .crumbs { font-size: 10px; letter-spacing: .1em; }
  .btn-tg { display: none; }
  .nav-links { display: none; }
  .tg-float { display: flex; position: fixed; right: 16px; bottom: 16px; z-index: 30; width: 60px; height: 60px; align-items: center; justify-content: center; background: var(--gold); color: #000; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
  .bays { --h: 70svh; --per: 1.3; min-height: 420px; }
  .bay { padding: 20px; }
  .bay-num { font-size: 104px; }
  .bay-name { font-size: 28px; }
  .bay-top { font-size: 11px; }
  .bays-ctrl { right: 12px; top: 22px; bottom: auto; }
  .bays-pos { display: none; }
  .bays--open { height: auto; min-height: 0; grid-template-columns: repeat(var(--tabs, 3), minmax(0, 1fr)) !important; }
  .bay--open { grid-column: 1 / -1; order: -1; min-height: 76svh; padding: 24px 16px; }
  .bay--tab { height: 64px; min-height: 0; padding: 0 12px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; border-top: 1px solid var(--line); }
  .bay--tab .bay-num { font-size: 22px; }
  .bay--tab .bay-name { writing-mode: horizontal-tb; transform: none; font-size: 13px; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bay-num--xl { font-size: 150px; right: 16px; top: 72px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat, .stat:first-child { padding: 24px 16px; border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 0; }
  .tiles, .tiles--row { grid-template-columns: 1fr; grid-auto-rows: 74vw; }
  .tile--big { grid-column: auto; grid-row: span 1; }
  .tile--big .tile-link, .tile-link { padding: 20px; }
  .tile-more { max-height: 20px; opacity: 1; margin-top: 4px; }
  .cta { padding: 48px 16px 96px; }
  .cta-actions { min-width: 0; }
  .case-hero { min-height: 82svh; }
  .case-num { top: 20px; }
  .facts { flex-wrap: wrap; }
  .fact { flex: 1 1 30%; padding: 14px 16px; }
  .case-lead { grid-template-columns: 1fr; gap: 32px; padding: 40px 16px; }
  .info { grid-template-columns: 96px 1fr; }
  .g6, .g3, .g2 { grid-column: span 6; height: 72vw; }
  .story { grid-template-columns: 1fr; }
  .story > div, .story > div:first-child { padding: 28px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .related-head h2 { font-size: 22px; }
  .partner-grid { grid-template-columns: 1fr 1fr; }
  .partner { height: 68px; padding: 0 36px 0 14px; }
  .partner-name { font-size: 14px; }
  .press, .partners { padding: 36px 16px 28px; }
  .partners .partner-grid { grid-template-columns: 1fr 1fr; }
  .press-list a { grid-template-columns: 1fr 20px; gap: 6px 12px; }
  .press-meta { grid-column: 1 / -1; }
  .partner-head { padding: 40px 16px 28px; }
  .bay-services li { font-size: 11px; padding: 6px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 760px) { .bays-ctrl { top: auto; bottom: 16px; right: 16px; } }

.partner-index-heading { display: flex; align-items: baseline; gap: 20px; }
.partner-index-heading .muted-num { font: 400 clamp(32px, 4vw, 56px)/1 var(--display); }