@import url("fonts.css");

/* Variant 6 «Ночной проход». One dark theme for every page; one accent (the brand blue, lifted for the night).
   z-index scale: scene layers 1-12 inside the journey stage, index 20, header 40, menu 39, skip link 60. */
:root {
  --night: #08111f;
  --deep: #0f1c30;
  --deep-2: #152742;
  --line: rgb(233 238 245 / .14);
  --line-strong: rgb(233 238 245 / .32);
  --mist: #9aabc2;
  --moon: #e9eef5;
  --blue: #6c9be0;
  --blue-deep: #3f6fb6;
  --display: "Unbounded", "Golos Text", "Segoe UI", Arial, sans-serif;
  --text: "Golos Text", "Segoe UI", Arial, sans-serif;
  --pad: clamp(20px, 5vw, 88px);
  --header-h: 68px;
  --out: cubic-bezier(.23, 1, .32, 1);
  --mark: url("assets/brand/bonus-lockup-mask.png");
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body { margin: 0; background: var(--night); color: var(--moon); font: 400 17px/1.6 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
::selection { background: rgb(108 155 224 / .38); color: var(--moon); }
html { scrollbar-color: #2b3d58 var(--night); caret-color: var(--blue); }
a { text-underline-offset: .2em; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 60; background: var(--moon); color: var(--night); padding: 12px 16px; font-weight: 500; }
.skip-link:focus { top: 12px; }
.c6-noscript { padding: 120px var(--pad); }
.c6-wrap { max-width: 1680px; margin: 0 auto; padding-inline: var(--pad); }

/* ---------- type ---------- */
.c6-h1 { font: 300 clamp(34px, 3.7vw, 66px)/1.1 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.c6-h2 { font: 300 clamp(28px, 3.2vw, 56px)/1.12 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.c6-lead, .c6-sec-lead { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--mist); max-width: 34em; text-wrap: pretty; }
.c6-sec-lead { margin-top: 20px; }
.c6-plaque { display: grid; gap: 2px; font-size: 13.5px; line-height: 1.45; color: var(--mist); }
.c6-plaque span:first-child { color: var(--moon); }

/* ---------- controls: short, interruptible feedback (120-200 ms, ease-out) ---------- */
.c6-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 26px; border-radius: 2px; background: var(--blue); color: var(--night); font: 600 15px/1 var(--text); white-space: nowrap; transition: background-color .16s var(--out), transform .12s var(--out); }
.c6-btn:hover { background: #8db3ea; }
.c6-btn:active { transform: scale(.97); }
.c6-btn-sm { min-height: 42px; padding: 10px 18px; font-size: 14px; }
.c6-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; color: var(--moon); background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 100% 1px no-repeat; transition: color .16s var(--out), background-size .2s var(--out); }
.c6-link:hover { color: var(--blue); }
.c6-link-quiet { color: var(--moon); border-bottom: 1px solid var(--line-strong); }
.c6-round { min-height: 44px; padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 2px; font-size: 14px; font-weight: 500; transition: background-color .16s var(--out), border-color .16s var(--out), transform .12s var(--out); }
.c6-round:hover { border-color: var(--moon); background: rgb(233 238 245 / .06); }
.c6-round:active { transform: scale(.97); }
.c6-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }

/* ---------- header and menu ---------- */
.c6-header { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--header-h); display: flex; align-items: center; gap: 32px; padding: 0 max(var(--pad), env(safe-area-inset-right)) 0 max(var(--pad), env(safe-area-inset-left)); background: rgb(8 17 31 / .62); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line); }
.c6-brand { display: inline-flex; flex: none; padding: 6px 0; }
.c6-mark { display: block; width: 112px; aspect-ratio: 694 / 226; background: var(--moon); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.c6-nav { display: flex; gap: 28px; font-size: 15px; margin-right: auto; }
.c6-nav a { color: var(--mist); padding: 10px 0; transition: color .16s var(--out); }
.c6-nav a:hover { color: var(--moon); }
.c6-header-end { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.c6-phone { font-size: 15px; font-weight: 500; white-space: nowrap; }
.c6-menu-btn { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; font-size: 15px; font-weight: 500; }
.c6-menu-icon { width: 20px; height: 9px; border-block: 1.5px solid currentColor; transition: transform .2s var(--out); }
.c6-menu-btn[aria-expanded="true"] .c6-menu-icon { transform: scaleY(.2); }
.c6-menu { position: fixed; inset: var(--header-h) 0 0; z-index: 39; background: var(--night); padding: 32px var(--pad) 40px; overflow: hidden auto; display: grid; align-content: start; gap: 36px; animation: c6-menu-in .22s var(--out); }
.c6-menu.is-instant { animation: none; }
.c6-menu-main { display: grid; gap: 4px; }
.c6-menu-main a { display: block; padding: 8px 0; font: 300 clamp(28px, 7vw, 44px)/1.2 var(--display); }
.c6-menu-pages { display: grid; gap: 2px; }
.c6-menu-pages a { display: inline-flex; min-height: 44px; align-items: center; color: var(--mist); }
.c6-menu-pages a[aria-current] { color: var(--moon); }
.c6-menu-contact { display: grid; justify-items: start; gap: 4px; padding-top: 22px; border-top: 1px solid var(--line); }
.c6-menu-contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mist); }
.c6-menu-contact .c6-menu-phone { font-size: 22px; font-weight: 500; color: var(--moon); }
.c6-menu::before { content: ""; position: absolute; right: -6vw; bottom: -4vh; width: min(70vw, 420px); aspect-ratio: 1 / 1.5; border-radius: 999px 999px 0 0; border: 1px solid var(--line); pointer-events: none; }
body.c6-menu-open { overflow: hidden; }
@keyframes c6-menu-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- journey: static layout (no script, reduced motion) ---------- */
.c6-journey { position: relative; }
.c6-intro { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 4vw; padding: calc(var(--header-h) + 40px) var(--pad) 48px; overflow: hidden; }
.c6-intro::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 72% 52%, rgb(108 155 224 / .14), transparent 70%); pointer-events: none; }
.c6-intro-text { position: relative; max-width: 760px; }
.c6-intro .c6-lead { margin-top: 26px; }
.c6-place { margin-top: 36px; font-size: 15px; color: var(--mist); }
.c6-owl { position: relative; justify-self: center; width: min(100%, 520px, 62svh); height: auto; filter: drop-shadow(0 30px 60px rgb(0 0 0 / .45)); }
.c6-scene { position: relative; }
.c6-plane { position: relative; height: 82svh; min-height: 460px; overflow: hidden; background: var(--deep); }
.c6-plane img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos); }
.c6-shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 62% at 12% 88%, rgb(8 17 31 / .82) 0%, rgb(8 17 31 / .5) 50%, rgb(8 17 31 / 0) 100%), linear-gradient(0deg, rgb(8 17 31 / .9) 0%, rgb(8 17 31 / .4) 30%, rgb(8 17 31 / 0) 58%); }
.c6-copy { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(32px, 9vh, 96px); max-width: min(780px, 62vw); display: grid; justify-items: start; gap: 14px; }
.c6-copy .c6-h2 { font-size: clamp(28px, 3.4vw, 60px); }
.c6-copy-text { font-size: clamp(16px, 1.25vw, 19px); color: #c9d4e3; max-width: 34em; }
.c6-copy .c6-link { margin-top: -4px; }
.c6-copy .c6-plaque { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line-strong); }
.c6-line { display: block; }
.c6-index { display: none; }

/* ---------- journey: staged (GSAP sets the states; until then nothing stacked shows through) ---------- */
.is-cinematic .c6-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--night); }
.is-cinematic .c6-intro { position: absolute; inset: 0; z-index: 12; min-height: 0; background: none; pointer-events: none; }
.is-cinematic .c6-intro::before { display: none; }
.is-cinematic .c6-intro-text { pointer-events: auto; }
.is-cinematic .c6-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(48% 60% at 72% 52%, rgb(108 155 224 / .16), transparent 72%); }
.is-cinematic .c6-scene { position: absolute; inset: 0; pointer-events: none; }
.is-cinematic .c6-plane { position: absolute; inset: 0; height: auto; min-height: 0; visibility: hidden; background: transparent; }
/* the scene text is faded, not hidden: its link stays in the Tab order (main.js brings the scene forward on focus);
   only the text standing on screen takes the pointer */
.is-cinematic .c6-copy { opacity: 0; pointer-events: none; z-index: 2; }
.is-cinematic .c6-index { position: absolute; z-index: 20; right: var(--pad); top: 50%; transform: translateY(-50%); display: grid; gap: 2px; visibility: hidden; }
.c6-index button { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 40px; font-size: 13px; color: rgb(233 238 245 / .62); text-shadow: 0 1px 8px rgb(8 17 31 / .8); transition: color .16s var(--out); }
.c6-index button::after { content: ""; width: 18px; height: 1px; background: currentColor; transition: width .2s var(--out); }
.c6-index button:hover, .c6-index button[aria-current] { color: var(--moon); }
.c6-index button[aria-current]::after { width: 40px; background: var(--blue); height: 2px; }

/* ---------- six directions: one facade. A cornice and a plinth run across the whole composition, so the storeys
   (the choice), the window bay and the text stand on one wall between the same two lines. Each direction has its
   own window type, as the storeys of a Petersburg facade differ; the chosen window lights the wall and the text. ---------- */
@property --on { syntax: "<number>"; inherits: true; initial-value: 0; }
.c6-dirs { --t3: clamp(28px, 2.5vw, 44px); position: relative; padding: clamp(72px, 11vh, 130px) 0 clamp(72px, 10vh, 120px); background: var(--night); }
/* staged: the facade rises out of the dark over the last doorway, so the passage never ends on an empty frame */
.is-cinematic .c6-dirs { z-index: 2; margin-top: -46svh; padding-top: clamp(40px, 8vh, 90px); background: linear-gradient(180deg, rgb(8 17 31 / 0) 0, rgb(8 17 31 / .7) 18svh, var(--night) 40svh); }
.c6-house { --lit: 1; --dim: 1; --gap: clamp(32px, 3.6vw, 64px); position: relative; overflow-x: clip; display: grid; grid-template-columns: minmax(280px, 1fr) clamp(220px, 18vw, 290px) minmax(0, 1.3fr);
  grid-template-areas: "cornice cornice cornice" "floors bay panels" "plinth plinth plinth"; column-gap: var(--gap); margin-top: clamp(44px, 6vh, 76px); }
/* the wall: horizontal rustication, as on Petersburg ground floors, lit around the window and towards the text */
.c6-house::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(22% 62% at 44% 58%, rgb(108 155 224 / calc(var(--lit) * var(--dim) * .15)), rgb(108 155 224 / 0) 75%),
  radial-gradient(34% 58% at 64% 60%, rgb(108 155 224 / calc(var(--lit) * .05)), rgb(108 155 224 / 0) 75%),
  repeating-linear-gradient(180deg, rgb(233 238 245 / .045) 0 1px, rgb(233 238 245 / 0) 1px 42px);
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 10% 90%, #0000); mask-image: linear-gradient(90deg, #0000, #000 10% 90%, #0000); }
.c6-house > * { position: relative; }
.c6-cornice { grid-area: cornice; height: 9px; margin-bottom: clamp(28px, 4vh, 40px); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line);
  background: linear-gradient(rgb(233 238 245 / .09), rgb(233 238 245 / .09)) 0 3px / 100% 2px no-repeat; }   /* a profiled cornice: three lines */
.c6-plinth { grid-area: plinth; display: grid; grid-template-columns: subgrid; height: 18px; margin-top: clamp(28px, 4vh, 40px); border-top: 1px solid var(--line-strong); background: linear-gradient(180deg, rgb(233 238 245 / .04), rgb(233 238 245 / 0)); }
.c6-sill-light { grid-column: 2; height: 46px; margin-inline: -20%; background: radial-gradient(50% 100% at 50% 0, rgb(169 198 238 / calc(var(--lit) * .26)), rgb(169 198 238 / 0) 100%); }

/* the storeys: the window type and the full name; the chosen storey sends a sightline to the bay */
.c6-floors { grid-area: floors; display: grid; align-content: space-between; gap: 2px; }
.c6-floor { position: relative; display: flex; align-items: center; gap: 18px; min-height: 56px; padding: 6px 0; text-align: left; color: var(--mist); }
.c6-floor-name { font: 400 17px/1.3 var(--text); text-wrap: balance; transition: color .16s var(--out); }
.c6-floor::after { content: ""; flex: 1 1 20px; min-width: 20px; height: 1px; margin-right: calc(-1 * var(--gap) - 12px); background: linear-gradient(90deg, rgb(108 155 224 / .25), var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform .16s var(--out); }
.c6-floor[aria-selected="true"] .c6-floor-name { color: var(--moon); }
@media (hover: hover) { .c6-floor:hover .c6-floor-name { color: var(--moon); } .c6-floor:hover .c6-win-sm { --on: .5; } .c6-toc-item:hover { color: var(--moon); } }
.c6-floor[aria-selected="true"]::after { transform: scaleX(1); transition-duration: .32s; }
.c6-floor:focus-visible { outline-offset: 2px; }

/* window anatomy, shared by the small storey windows and the large one in the bay:
   .c6-glass carries the shape (inset/radius), the muntins (::after) and, inside, the light */
.c6-win { --on: .22; --glow: calc(var(--lit) * var(--on) * var(--dim, 1)); --bar: #0a1424; --bw: 1.5px; --fw: 2px; position: relative; display: block; flex: none; }
.c6-win-sm { width: 26px; height: 40px; }
.c6-floor[aria-selected="true"] .c6-win-sm { --on: 1; animation: c6-ignite .6s var(--out) both; }
.c6-glass { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r, 0); background: linear-gradient(180deg, #102038, #0a1424); box-shadow: inset 0 0 0 1px rgb(233 238 245 / .22); }
.c6-light { position: absolute; inset: 0; background: radial-gradient(120% 85% at 50% 22%, #f4f7fb 0%, #c9dbf3 24%, #6c9be0 60%, #22406a 100%); opacity: var(--glow); }
.c6-glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--fw) var(--bar); background: var(--bars, none); }
.c6-win::before { content: none; position: absolute; background: linear-gradient(180deg, rgb(233 238 245 / .34), rgb(233 238 245 / .14)); }
.c6-win-sm, .c6-win-sm .c6-glass { transition: --on .3s var(--out); }

/* the six types */
.c6-win[data-shape="pediment"] .c6-glass { top: 17%; --bars:
  linear-gradient(90deg, #0000 calc(50% - var(--bw) / 2), var(--bar) 0 calc(50% + var(--bw) / 2), #0000 0),
  linear-gradient(180deg, #0000 calc(38% - var(--bw) / 2), var(--bar) 0 calc(38% + var(--bw) / 2), #0000 0); }
.c6-win[data-shape="pediment"]::before { content: ""; top: 0; left: -9%; right: -9%; height: 12%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.c6-win[data-shape="arch"] .c6-glass { --r: 999px 999px 0 0; --bars:
  linear-gradient(90deg, #0000 calc(50% - var(--bw) / 2), var(--bar) 0 calc(50% + var(--bw) / 2), #0000 0),
  linear-gradient(180deg, #0000 calc(34% - var(--bw) / 2), var(--bar) 0 calc(34% + var(--bw) / 2), #0000 0),
  linear-gradient(180deg, #0000 calc(67% - var(--bw) / 2), var(--bar) 0 calc(67% + var(--bw) / 2), #0000 0); }
.c6-win[data-shape="arch"]::before { content: ""; z-index: 1; top: -4%; left: 43%; width: 14%; height: 11%; clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%); }   /* keystone */
.c6-win[data-shape="grid"] .c6-glass { top: 9%; --bars:
  linear-gradient(90deg, #0000 calc(33.3% - var(--bw) / 2), var(--bar) 0 calc(33.3% + var(--bw) / 2), #0000 0),
  linear-gradient(90deg, #0000 calc(66.6% - var(--bw) / 2), var(--bar) 0 calc(66.6% + var(--bw) / 2), #0000 0),
  linear-gradient(180deg, #0000 calc(25% - var(--bw) / 2), var(--bar) 0 calc(25% + var(--bw) / 2), #0000 0),
  linear-gradient(180deg, #0000 calc(50% - var(--bw) / 2), var(--bar) 0 calc(50% + var(--bw) / 2), #0000 0),
  linear-gradient(180deg, #0000 calc(75% - var(--bw) / 2), var(--bar) 0 calc(75% + var(--bw) / 2), #0000 0); }
.c6-win[data-shape="grid"]::before { content: ""; top: 0; left: -8%; right: -8%; height: 5%; }   /* flat lintel */
.c6-win[data-shape="segment"] .c6-glass { top: 6%; --r: 50% 50% 0 0 / 16% 16% 0 0; --bars:
  linear-gradient(90deg, #0000 calc(50% - var(--bw) / 2), var(--bar) 0 calc(50% + var(--bw) / 2), #0000 0),
  linear-gradient(180deg, #0000 calc(30% - var(--bw) / 2), var(--bar) 0 calc(30% + var(--bw) / 2), #0000 0); }
.c6-win[data-shape="oculus"] .c6-glass { inset: auto 0; bottom: 8%; aspect-ratio: 1; --r: 50%; --bars:
  linear-gradient(90deg, #0000 calc(50% - var(--bw) / 2), var(--bar) 0 calc(50% + var(--bw) / 2), #0000 0),
  linear-gradient(180deg, #0000 calc(50% - var(--bw) / 2), var(--bar) 0 calc(50% + var(--bw) / 2), #0000 0); }
.c6-win[data-shape="venetian"] .c6-glass { left: 24%; right: 24%; --r: 999px 999px 0 0; --bars:
  linear-gradient(180deg, #0000 calc(40% - var(--bw) / 2), var(--bar) 0 calc(40% + var(--bw) / 2), #0000 0); }
.c6-win[data-shape="venetian"]::before, .c6-win[data-shape="venetian"]::after { content: ""; position: absolute; bottom: 0; width: 18%; height: 60%;
  background: #0a1424; box-shadow: inset 0 0 0 1px rgb(233 238 245 / .22), inset 0 0 0 99px rgb(169 198 238 / calc(var(--glow) * .62)); }
.c6-win[data-shape="venetian"]::before { left: 0; }
.c6-win[data-shape="venetian"]::after { right: 0; }

/* the bay: two pilasters, the window between them sized from the bay (not the other way round), a sill */
.c6-bay { grid-area: bay; min-height: 360px; }
.c6-pilaster { position: absolute; top: 0; bottom: 30px; width: 14px; border-inline: 1px solid rgb(233 238 245 / .13); }
.c6-pilaster::before { content: ""; position: absolute; top: 0; left: -5px; right: -5px; height: 7px; border: 1px solid rgb(233 238 245 / .18); border-top-width: 2px; }   /* capital */
.c6-pilaster:first-child { left: 0; background: linear-gradient(90deg, rgb(233 238 245 / .02), rgb(169 198 238 / calc(var(--lit) * .1))); }
.c6-pilaster:nth-child(2) { right: 0; background: linear-gradient(270deg, rgb(233 238 245 / .02), rgb(169 198 238 / calc(var(--lit) * .1))); }
.c6-bay::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 22px; height: 8px; background: linear-gradient(180deg, rgb(233 238 245 / calc(.14 + var(--lit) * .2)), rgb(233 238 245 / .05)); }   /* sill */
.c6-win-lg { --bw: 4px; --fw: 5px; position: absolute; left: 50%; bottom: 30px; width: calc(100% - 92px); aspect-ratio: 5 / 8; translate: -50% 0; opacity: 0; transition: opacity .3s var(--out); }
.c6-win-lg.is-on { --on: 1; opacity: 1; transition: opacity .3s var(--out), --on .7s var(--out) .1s; }
.c6-win-lg.is-igniting { animation: c6-win-rise .42s var(--out) .1s both, c6-ignite .9s var(--out) .18s both; }
@keyframes c6-win-rise { from { opacity: 0; translate: -50% 12px; } to { opacity: 1; translate: -50% 0; } }
@keyframes c6-ignite { 0% { --on: .05; } 45% { --on: 1.3; } 100% { --on: 1; } }
/* the wall answers the lamp: a wider glow swells once around the bay */
.c6-bay-glow { position: absolute; left: 50%; top: 52%; width: 260%; aspect-ratio: 1.3; translate: -50% -50%; pointer-events: none;   /* decorative and wider than the bay: .c6-house clips it horizontally, so it never widens the page */
  background: radial-gradient(closest-side, rgb(108 155 224 / calc(var(--lit) * var(--dim) * .1)), rgb(108 155 224 / 0)); opacity: .7; }
.is-switching .c6-bay-glow { animation: c6-bay-swell .9s var(--out) .15s; }
@keyframes c6-bay-swell { 0% { opacity: .25; } 45% { opacity: 1; } 100% { opacity: .7; } }
.c6-win-lg .c6-glass { box-shadow:
  0 0 0 1px rgb(233 238 245 / .3),
  0 0 0 12px rgb(108 155 224 / calc(var(--glow) * .14)),
  0 0 0 13px rgb(233 238 245 / .16),
  0 0 calc(var(--glow) * 90px) rgb(108 155 224 / calc(var(--glow) * .34)); }   /* frame, lit reveal, outer edge, glow */
.c6-win-lg::before { z-index: 1; }
.c6-win-lg[data-shape="arch"]::before { top: calc(-4% - 10px); }
.c6-win-lg[data-shape="pediment"]::before { top: -12px; left: -14%; right: -14%; }
.c6-win-lg[data-shape="grid"]::before { top: -9px; left: -12%; right: -12%; height: 6%; }

/* the text of the chosen direction: title on the cornice line, the action on the sill line */
.c6-dir-panels { grid-area: panels; display: grid; }
.c6-dir-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; outline-offset: 8px; }
.c6-dir-title { font: 300 var(--t3)/1.14 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.c6-dir-tag { margin-top: 6px; max-width: 26em; font: 500 clamp(18px, 1.3vw, 21px)/1.45 var(--text); color: var(--moon); text-wrap: balance; }
.c6-dir-text { max-width: 32em; color: var(--mist); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.c6-dir-panel .c6-btn { margin-top: auto; }
.c6-dir-panel.is-in > * { animation: c6-fade .3s var(--out) both; }
.c6-dir-panel.is-in > :nth-child(2) { animation-delay: .04s; }
.c6-dir-panel.is-in > :nth-child(n + 3) { animation-delay: .08s; }
.is-instant .c6-win, .is-instant .c6-win-lg, .is-instant .c6-glass, .is-instant .c6-floor::after, .is-instant .c6-toc-item, .is-instant .c6-toc-item span, .is-instant .c6-toc-mark { transition: none; }
.is-instant .c6-win-sm, .is-instant .c6-win-lg, .is-instant .c6-bay-glow, .is-instant .c6-sheen::before, .is-instant .c6-article > *, .is-instant .c6-article-lede::before { animation: none !important; }
@keyframes c6-fade { from { opacity: 0; transform: translateY(8px); } }

/* ---------- private clients: an editorial spread. Two pages between a top and a bottom rule, a quiet fold between
   them; the contents on the left page choose the article on the right. ---------- */
.c6-private { --t3: clamp(28px, 2.5vw, 44px); overflow-x: clip; padding: clamp(80px, 13vh, 150px) 0; background: linear-gradient(180deg, var(--night), var(--deep) 22%, var(--deep)); }
.c6-spread { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.c6-rule, .c6-fold { position: absolute; display: block; pointer-events: none; }
.c6-rule { left: var(--pad); right: var(--pad); height: 1px; transform-origin: 0 50%; }
.c6-rule-top { top: 0; background: var(--line-strong); }
.c6-rule-bottom { bottom: 0; background: var(--line); transform-origin: 100% 50%; }
.c6-fold { top: 0; bottom: 0; left: calc(var(--pad) + (100% - 2 * var(--pad)) * 5 / 11); width: 1px; background: linear-gradient(180deg, var(--line), rgb(233 238 245 / .05)); transform-origin: 50% 0; }
.c6-spread-page { padding-block: clamp(40px, 6vh, 64px); }
.c6-spread-left { padding-right: clamp(36px, 5vw, 96px); }
.c6-spread-right { display: grid; align-content: start; position: relative; padding-left: clamp(36px, 5vw, 96px); background: linear-gradient(90deg, rgb(2 6 14 / .2), rgb(2 6 14 / 0) 56px); }   /* shade by the fold */
.c6-sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.c6-sheen::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; opacity: 0;
  background: linear-gradient(100deg, rgb(169 198 238 / 0), rgb(169 198 238 / .07) 50%, rgb(169 198 238 / 0)); }
.c6-sheen.is-on::before { animation: c6-sheen .7s var(--out); }
@keyframes c6-sheen { 0% { opacity: 0; transform: translateX(-40%); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(240%); } }
.c6-toc { --mark-y: 29px; position: relative; display: grid; margin-top: clamp(32px, 5vh, 48px); border-top: 1px solid var(--line); }
.c6-toc-mark { position: absolute; left: 0; top: -1px; width: 14px; height: 2px; background: var(--blue); transform: translateY(var(--mark-y)); transition: transform .42s var(--out); pointer-events: none; }
.c6-toc-item { position: relative; display: flex; align-items: center; min-height: 58px; padding: 14px 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--mist); font: 400 clamp(17px, 1.2vw, 19px)/1.35 var(--text); transition: color .16s var(--out); }
.c6-toc-item span { transition: transform .38s var(--out); }
.c6-toc-item[aria-selected="true"] { color: var(--moon); }
.c6-toc-item[aria-selected="true"] span { transform: translateX(28px); }
.c6-toc-item:focus-visible { outline-offset: 2px; }
.c6-article { display: grid; justify-items: start; align-content: start; gap: 0; outline-offset: 8px; }
.c6-article-title { font: 300 var(--t3)/1.14 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.c6-article-lede { position: relative; max-width: 25em; margin-top: 26px; padding-top: 22px; font: 400 clamp(19px, 1.5vw, 24px)/1.5 var(--text); color: var(--moon); text-wrap: pretty; }
.c6-article-text { max-width: 32em; margin-top: 16px; color: var(--mist); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.c6-article-lede::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--line-strong); transform-origin: 0 50%; }
.c6-article .c6-btn { margin-top: 34px; }
.c6-article.is-in > * { animation: c6-page .44s var(--out) both; }
.c6-article.is-in > :nth-child(2) { animation-delay: .05s; }
.c6-article.is-in > :nth-child(n + 3) { animation-delay: .1s; }
.c6-article.is-in .c6-article-lede::before { animation: c6-draw .6s var(--out) .08s both; }
@keyframes c6-page { from { opacity: 0; transform: translateX(-16px); } }
@keyframes c6-draw { from { transform: scaleX(0); } }

/* below 1024px: one column. The storeys become a list, then the bay and the text between cornice and plinth;
   the spread becomes contents, then the article. */
@media (max-width: 1023px) {
  .c6-house { grid-template-columns: minmax(0, 1fr); grid-template-areas: "floors" "cornice" "bay" "panels" "plinth"; margin-top: 32px; }
  .c6-house::before { background: radial-gradient(48% 30% at 50% 52%, rgb(108 155 224 / calc(var(--lit) * .14)), rgb(108 155 224 / 0) 75%), repeating-linear-gradient(180deg, rgb(233 238 245 / .04) 0 1px, rgb(233 238 245 / 0) 1px 36px); }
  .c6-floors { gap: 0; border-top: 1px solid var(--line); }
  .c6-floor { gap: 16px; min-height: 54px; padding: 7px 12px 7px 0; border-bottom: 1px solid var(--line); }
  .c6-floor::after { content: none; }
  .c6-floor[aria-selected="true"] { background: linear-gradient(90deg, rgb(108 155 224 / .12), rgb(108 155 224 / 0)); box-shadow: inset 2px 0 0 var(--blue); padding-left: 12px; }
  .c6-floor { padding-left: 12px; }
  .c6-floor-name { font-size: 16px; }
  .c6-win-sm { width: 22px; height: 34px; }
  .c6-cornice { margin: 36px 0 0; }
  .c6-bay { min-height: 0; height: 196px; }
  .c6-bay-glow { width: 150%; }   /* the bay is the full column here: a narrower swell stays inside the facade */
  .c6-pilaster { bottom: 22px; }
  .c6-pilaster:first-child { left: calc(50% - 84px); }
  .c6-pilaster:nth-child(2) { right: calc(50% - 84px); }
  .c6-bay::after { left: calc(50% - 70px); right: calc(50% - 70px); bottom: 16px; height: 6px; }
  .c6-win-lg { width: 96px; bottom: 22px; --bw: 3px; --fw: 4px; }
  .c6-win-lg .c6-glass { box-shadow: 0 0 0 1px rgb(233 238 245 / .3), 0 0 0 8px rgb(108 155 224 / calc(var(--glow) * .14)), 0 0 0 9px rgb(233 238 245 / .16), 0 0 calc(var(--glow) * 60px) rgb(108 155 224 / calc(var(--glow) * .34)); }
  .c6-win-lg[data-shape="arch"]::before { top: calc(-4% - 7px); }
  .c6-win-lg[data-shape="pediment"]::before, .c6-win-lg[data-shape="grid"]::before { top: -7px; }
  .c6-dir-panels { margin-top: 26px; }
  .c6-dir-panel { gap: 10px; }
  .c6-dir-panel .c6-btn { margin-top: 12px; }
  .c6-plinth { display: block; margin-top: 30px; }
  .c6-sill-light { display: none; }

  .c6-spread { grid-template-columns: minmax(0, 1fr); }
  .c6-fold { display: none; }
  .c6-spread-page { padding-block: 32px; }
  .c6-spread-left { padding-right: 0; border-bottom: 0; }
  .c6-spread-right { padding-top: 4px; padding-left: 0; background: none; }
  .c6-toc { margin-top: 28px; }
  .c6-toc-item { min-height: 54px; padding: 12px 0; }
  .c6-toc-item[aria-selected="true"] span { transform: translateX(24px); }
  .c6-article-lede { margin-top: 20px; padding-top: 18px; }
  .c6-article .c6-btn { margin-top: 28px; }
}
@media (max-width: 900px) {
  .c6-dirs, .c6-private { --t3: clamp(25px, 7vw, 32px); }
  .c6-dir-text, .c6-article-text { font-size: 16px; }
  .c6-article-lede { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .c6-dir-panel.is-in > *, .c6-article.is-in > *, .c6-article.is-in .c6-article-lede::before, .c6-win-sm, .c6-win-lg.is-igniting, .c6-bay-glow, .c6-sheen.is-on::before { animation: none !important; }
  .c6-toc-mark { transition: none; }
  .c6-win, .c6-win-lg, .c6-win-lg.is-on, .c6-glass, .c6-floor::after, .c6-floor-name, .c6-toc-item, .c6-toc-item span, .c6-toc-item::before { transition: none; }
}

/* ---------- experience: the company, the archive shelves, the documents, the people ---------- */
.c6-about { padding: clamp(80px, 14vh, 160px) 0 clamp(72px, 11vh, 120px); background: var(--deep); overflow: hidden; }
.c6-about-text { margin-top: 28px; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.55; max-width: 36em; color: #c9d4e3; }
.c6-principles { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 4vw; margin-top: clamp(48px, 7vh, 80px); }
.c6-principles strong { display: block; font: 300 clamp(56px, 6vw, 104px)/1 var(--display); color: var(--blue); margin-bottom: 10px; }
.c6-principles h3 { font: 500 19px/1.35 var(--text); margin-bottom: 8px; }
.c6-principles p { color: var(--mist); font-size: 16px; }
.c6-principles li:not(:first-child) { padding-top: clamp(20px, 3vw, 46px); }
.c6-h3 { font: 300 clamp(26px, 2.6vw, 44px)/1.12 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.c6-archive { margin-top: clamp(80px, 13vh, 150px); }
.c6-proof-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: end; gap: 16px 4vw; }
.c6-proof-fact { display: flex; align-items: baseline; gap: 18px; color: var(--mist); font-size: 16px; line-height: 1.5; max-width: 40em; }
.c6-proof-fact strong { flex: none; font: 300 clamp(56px, 6vw, 104px)/.9 var(--display); color: var(--blue); letter-spacing: -.03em; }
.c6-shelves-wrap { max-width: 1680px; margin: clamp(32px, 5vh, 56px) auto 0; padding: 0 var(--pad) 14px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #2b3d58 rgb(0 0 0 / 0); }
.c6-shelves { display: grid; grid-template-columns: repeat(20, minmax(44px, 1fr)); gap: 6px; align-items: end; min-width: 940px; margin: 0; padding: 0; list-style: none; }
.c6-shelf a { display: grid; gap: 8px; color: var(--mist); }
.c6-shelf-count, .c6-shelf-year { font: 400 12.5px/1 var(--text); text-align: center; transition: color .16s var(--out); }
.c6-shelf-count { color: var(--moon); }
.c6-shelf-body { position: relative; display: block; height: calc(var(--n) * 5px); overflow: hidden; border-top: 1px solid rgb(169 198 238 / .6); background: linear-gradient(180deg, rgb(108 155 224 / .2), rgb(108 155 224 / .05)); transition: background-color .2s var(--out); }
.c6-shelf-names { display: block; padding: 5px 4px; font: 400 8px/1.3 var(--text); color: rgb(201 212 227 / .5); overflow-wrap: anywhere; transition: color .2s var(--out); }
.c6-shelf a:hover .c6-shelf-body, .c6-shelf a:focus-visible .c6-shelf-body { background-color: rgb(108 155 224 / .22); }
.c6-shelf a:hover .c6-shelf-names, .c6-shelf a:focus-visible .c6-shelf-names { color: rgb(233 238 245 / .92); }
.c6-shelf a:hover .c6-shelf-year, .c6-shelf a:focus-visible .c6-shelf-year { color: var(--moon); }
.c6-letters { margin-top: clamp(90px, 14vh, 160px); }
.c6-letters-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 4vw; align-items: center; }
.c6-letters .c6-proof-head { grid-template-columns: 1fr; align-items: start; gap: 20px; }
.c6-letters .c6-proof-fact { flex-direction: column; gap: 10px; }
.c6-fan { position: relative; height: clamp(380px, 38vw, 560px); margin: 0; padding: 0; list-style: none; }
.c6-fan li { --spread: 1; position: absolute; left: 50%; bottom: 4%; width: clamp(140px, 13vw, 210px); z-index: var(--z); transform-origin: 50% 130%;
  transform: translateX(-50%) translateX(calc(var(--k) * var(--spread) * 5.4vw)) translateY(calc(var(--spread) * var(--k) * var(--k) * 7px)) rotate(calc(var(--k) * var(--spread) * 6.5deg)); }
.c6-fan li:hover, .c6-fan li:focus-within { z-index: 20; }
.c6-fan a { position: relative; display: block; border-radius: 2px; box-shadow: 0 26px 60px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .06); transition: transform .2s var(--out); }
.c6-fan a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgb(8 17 31 / 0) 50%, rgb(8 17 31 / .38)); pointer-events: none; }
.c6-fan a:hover, .c6-fan a:focus-visible { transform: translateY(-18px); }
.c6-fan img { width: 100%; height: auto; border-radius: 2px; background: #fff; }
.c6-about-foot { margin-top: clamp(64px, 10vh, 120px); }
.c6-arch-mini { flex: none; display: grid; place-items: center; width: 84px; aspect-ratio: 1 / 1.45; padding-bottom: 9%; overflow: hidden; border-radius: 999px 999px 2px 2px; background: radial-gradient(120% 80% at 50% 18%, #f4f7fb 0%, #c9dbf3 30%, #7fa6e3 70%, #3f6fb6 100%); box-shadow: 0 0 40px rgb(108 155 224 / .28); }
.c6-arch-mini img { width: 80%; height: auto; }
.c6-clients h3 { font: 500 15px/1.4 var(--text); color: var(--mist); margin-bottom: 14px; }
.c6-clients ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: #e9eef5; border-radius: 2px; }
.c6-clients li { padding: 16px 18px; display: grid; place-items: center; }
.c6-clients img { width: 100%; max-width: 160px; height: 56px; object-fit: contain; }

/* light spilling around an opening during a passage */
.c6-glow { position: absolute; left: 0; top: 0; z-index: 1; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(closest-side, rgb(233 238 245 / .5), rgb(169 198 238 / .22) 45%, rgb(108 155 224 / 0) 100%); }

/* ---------- Petersburg in detail: strip by default, ring on wide screens ---------- */
.c6-city { padding: clamp(80px, 14vh, 160px) 0 clamp(64px, 10vh, 120px); overflow: hidden; }
.c6-room { margin-top: clamp(36px, 6vh, 64px); }
.c6-ring { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--pad) 18px; scroll-padding-inline: var(--pad); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.c6-panel { flex: 0 0 min(84vw, 560px); scroll-snap-align: start; display: grid; gap: 12px; }
.c6-panel-btn { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: var(--deep-2); cursor: zoom-in; }
.c6-panel-btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--out); }
.c6-panel-btn:hover img { transform: scale(1.025); }
.c6-city-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 26px; }
.c6-city-caption { min-height: 42px; }
.c6-city-nav { display: flex; gap: 10px; margin-left: auto; }
.c6-room:not(.is-ring) + .c6-city-bar .c6-city-caption { display: none; }
.c6-room.is-ring { --pw: min(34vw, 600px); position: relative; height: calc(var(--pw) / 1.5 + 140px); perspective: 1100px; perspective-origin: 50% 50%; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.c6-room.is-ring.is-dragging { cursor: grabbing; }
.c6-room.is-ring::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--night) 0%, rgb(8 17 31 / 0) 16%, rgb(8 17 31 / 0) 84%, var(--night) 100%); }
.is-ring .c6-ring { position: absolute; left: 50%; top: 50%; width: var(--pw); height: calc(var(--pw) / 1.5); margin: calc(var(--pw) / -3) 0 0 calc(var(--pw) / -2); display: block; overflow: visible; padding: 0; transform-style: preserve-3d; scroll-snap-type: none; pointer-events: none; }
/* the ring box sits in front of the panels in 3D, so it must not take the clicks; renderRing() sets each visible panel to auto */
.is-ring .c6-panel { position: absolute; inset: 0; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: opacity .2s linear; }
.is-ring .c6-panel figcaption { display: none; }
.is-ring .c6-panel-btn { height: 100%; aspect-ratio: auto; cursor: inherit; box-shadow: 0 30px 80px rgb(0 0 0 / .45); }
.is-ring .c6-panel-btn img { -webkit-user-drag: none; pointer-events: none; }
.is-ring .c6-panel.is-front .c6-panel-btn { cursor: zoom-in; outline: 1px solid rgb(233 238 245 / .35); outline-offset: -1px; }
.is-ring .c6-panel-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

/* ---------- finale ---------- */
.c6-finale { position: relative; --fin-photo-h: 64svh; }
.c6-anchor { position: absolute; left: 0; top: calc(var(--fin-photo-h) - 24px); width: 1px; height: 1px; }
.c6-fin-photo { position: relative; height: var(--fin-photo-h); min-height: 360px; overflow: hidden; background: var(--deep); }
.c6-fin-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.c6-fin-photo .c6-shade { background: linear-gradient(0deg, var(--night) 0%, rgb(8 17 31 / 0) 40%); }
.c6-fin-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 5vw; padding: clamp(40px, 7vh, 72px) var(--pad) clamp(56px, 9vh, 96px); max-width: 1520px; margin: 0 auto; }
.c6-fin-arch { width: 104px; margin-bottom: 26px; }
.c6-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; align-content: start; padding-top: 12px; }
.c6-contacts dt { font-size: 14px; color: var(--mist); margin-bottom: 6px; }
.c6-contacts dd { display: grid; gap: 6px; }
.c6-contacts dd a { font-size: 21px; font-weight: 500; justify-self: start; }
.c6-contacts dd a:hover { color: var(--blue); }
.c6-contacts dd span { color: var(--mist); font-size: 15px; }
.c6-contacts-wide { grid-column: 1 / -1; }
/* the company's channels: compact outlined links, one line each, comfortable to tap and to reach by Tab */
.c6-social { display: flex; flex-wrap: wrap; gap: 8px; }
.c6-social a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--moon); font: 500 15px/1.2 var(--text); white-space: nowrap; transition: border-color .16s var(--out), background-color .16s var(--out); }
.c6-social a:hover { border-color: var(--moon); background: rgb(233 238 245 / .06); }
.c6-social a:active { transform: scale(.97); }
.c6-social-arrow { color: var(--mist); font-size: 13px; }
.c6-contacts .c6-social a { font-size: 15px; }
.c6-footer-end { display: grid; justify-items: end; gap: 12px; }
.c6-social-footer { justify-content: flex-end; }
.c6-social-footer a { min-height: 40px; padding: 8px 13px; font-size: 14px; color: var(--mist); }
.c6-social-footer a:hover { color: var(--moon); }
.c6-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.c6-fin-plaque { grid-column: 1 / -1; }
@media (min-width: 901px) {
  .is-cinematic .c6-finale { height: 220svh; --fin-photo-h: 100svh; }
  .is-cinematic .c6-anchor { top: calc(100% - 100svh); }
  .is-cinematic .c6-fin-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
  .is-cinematic .c6-fin-photo { position: absolute; inset: 0; height: auto; }
  .is-cinematic .c6-fin-photo .c6-shade { background: linear-gradient(90deg, rgb(8 17 31 / .95) 0%, rgb(8 17 31 / .88) 46%, rgb(8 17 31 / .2) 76%), linear-gradient(0deg, rgb(8 17 31 / .6), rgb(8 17 31 / 0) 40%); }
  .is-cinematic .c6-fin-panel { position: absolute; left: 0; top: var(--header-h); bottom: 0; width: min(58%, 900px); margin: 0; grid-template-columns: 1fr; align-content: center; gap: 36px; padding-block: 24px 40px; }
  .is-cinematic .c6-fin-arch { width: 92px; margin-bottom: 20px; }
}

/* ---------- photo failure ---------- */
.c6-fail { display: none; }
.is-failed > .c6-fail, .is-failed .c6-fail-inline { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; background: var(--deep-2); color: var(--moon); font-size: 16px; }
.is-failed img { visibility: hidden; }
.c6-retry { min-height: 44px; padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 2px; font-weight: 500; }
.c6-fail .c6-retry { pointer-events: auto; }
.is-cinematic .c6-plane.is-failed .c6-fail { pointer-events: auto; }

/* ---------- lightbox ---------- */
.c6-lightbox { width: min(1500px, 96vw); max-width: none; max-height: 96svh; padding: 0; border: 0; background: var(--night); color: var(--moon); overflow: hidden; }
html.c6-lb-lock { overflow: hidden; }   /* the page behind the photograph does not scroll (main.js keeps a classic scrollbar's gutter) */
.c6-lightbox { overscroll-behavior: contain; }
.c6-lightbox::backdrop { background: rgb(4 9 17 / .9); }
.c6-lightbox[open] { animation: c6-lb-in .24s var(--out); }
@keyframes c6-lb-in { from { opacity: 0; transform: scale(.97); } }
.c6-lb-frame { position: relative; background: #050b15; }
.c6-lb-frame img { width: 100%; height: min(78svh, calc(96vw / 1.5)); object-fit: contain; }
.c6-lb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 16px 20px 18px; }
.c6-lb-nav { display: flex; gap: 10px; }
.c6-lb-count { margin-left: auto; font-size: 14px; color: var(--mist); font-variant-numeric: tabular-nums; }

/* ---------- footer ---------- */
.c6-footer { padding: 56px var(--pad) 40px; border-top: 1px solid var(--line); background: var(--night); }
.c6-footer-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 56px; align-items: start; max-width: 1520px; margin: 0 auto; }
.c6-footer-nav { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.c6-footer-nav a, .c6-footer-contacts a { display: inline-flex; min-height: 44px; align-items: center; color: var(--mist); transition: color .16s var(--out); }
.c6-footer-nav a:hover, .c6-footer-contacts a:hover, .c6-footer-nav a[aria-current] { color: var(--moon); }
.c6-footer-contacts { display: grid; justify-items: end; }
.c6-footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; max-width: 1520px; margin: 32px auto 0; font-size: 13px; color: var(--mist); }

/* ---------- responsive ---------- */
@media (max-width: 1280px) { .c6-phone { display: none; } }
@media (max-width: 1100px) {
  .c6-nav { display: none; }
  .c6-menu-btn { display: inline-flex; }
  .c6-principles { grid-template-columns: 1fr 1fr; }
  .c6-principles li:first-child { grid-column: 1 / -1; }
  .c6-principles li:not(:first-child) { padding-top: 0; }
  .c6-clients ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .c6-about-foot { margin-top: 48px; }
  :root { --header-h: 60px; }
  .c6-mark { width: 96px; }
  .c6-intro { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding: calc(var(--header-h) + 28px) var(--pad) 20px; }
  .c6-owl { width: auto; height: min(32svh, 300px); align-self: center; }
  .is-cinematic .c6-index { display: none; }
  .c6-place { margin-top: 22px; }
  .c6-copy { max-width: none; bottom: 28px; gap: 10px; }
  .c6-copy .c6-h2 { font-size: clamp(25px, 7vw, 34px); }
  .c6-copy-text { font-size: 15.5px; }
  .c6-copy .c6-plaque { font-size: 12.5px; padding-top: 10px; margin-top: 4px; }
  .c6-fin-arch { width: 60px; margin-bottom: 16px; }
  .c6-proof-head { grid-template-columns: 1fr; align-items: start; }
  .c6-proof-fact { flex-direction: column; gap: 8px; }
  .c6-shelves { grid-template-columns: repeat(20, 40px); min-width: 0; }
  .c6-shelf-body { height: calc(var(--n) * 3.6px); }
  .c6-letters-grid { grid-template-columns: 1fr; gap: 28px; }
  .c6-fan { display: flex; gap: 14px; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px var(--pad) 22px; margin: 0 calc(var(--pad) * -1); scrollbar-width: none; }
  .c6-fan li { position: static; flex: 0 0 44vw; transform: none; scroll-snap-align: center; }
  .c6-fan a:hover, .c6-fan a:focus-visible { transform: none; }
  .c6-contacts { grid-template-columns: 1fr; gap: 22px; }
  .c6-fin-panel { grid-template-columns: 1fr; gap: 40px; }
  .c6-footer-grid { grid-template-columns: 1fr; }
  .c6-footer-contacts { justify-items: start; }
  .c6-footer-end { justify-items: start; }
  .c6-social-footer { justify-content: flex-start; }
  .c6-lb-frame img { height: min(70svh, calc(96vw / 1.5)); }
}
@media (max-width: 900px) and (orientation: portrait) {
  .c6-plane img { object-position: var(--pos-m, var(--pos)); }
}
@media (max-width: 560px) {
  .c6-header-end .c6-btn { display: none; }
  .c6-actions { gap: 10px 24px; margin-top: 26px; }
  .c6-principles { grid-template-columns: 1fr; gap: 32px; }
  .c6-clients ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c6-clients li { padding: 12px; }
  .c6-city-bar { justify-content: flex-end; }
  .c6-lb-bar { padding: 14px 12px 16px; }
  .c6-lb-nav { width: 100%; justify-content: space-between; }
}
@media (max-width: 900px) and (max-height: 700px) {
  .c6-intro .c6-lead { margin-top: 16px; font-size: 16px; }
  .c6-intro .c6-actions { margin-top: 20px; }
  .c6-place { margin-top: 18px; }
  .c6-owl { height: min(24svh, 200px); }
}

/* reduced motion: the static layout above is the whole page; only short state feedback remains */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .c6-menu, .c6-lightbox[open] { animation: none; }
  .c6-fan a { transition: none; }
  .c6-panel-btn img, .c6-btn, .c6-round { transition: none; }
  .c6-btn:active, .c6-round:active { transform: none; }
}

/* phones held sideways: text and owl side by side, the scene text kept compact */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 560px) {
  .c6-intro { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: none; align-content: center; padding-top: calc(var(--header-h) + 12px); }
  .c6-intro .c6-h1 { font-size: clamp(24px, 3.6vw, 34px); }
  .c6-owl { height: min(58svh, 240px); justify-self: center; }
  .c6-copy { bottom: 16px; max-width: 70vw; }
  .c6-copy .c6-h2 { font-size: clamp(22px, 3.4vw, 30px); }
  .c6-copy .c6-plaque { display: none; }
  .c6-fan li { flex-basis: calc(min(44vw, 62svh) * .75); }
  .c6-fin-owl { width: 56px; margin-bottom: 12px; }
}