/* Landing v2: everything that is not a drawn scene. Tokens (elevation, type, spacing) live in site.css.
   Design review 20.10.2026: three elevations only (L0 paper ground, L1 sheet, L2 plate, L3 float), penumbra shadows
   with the light from straight above, one size per type role, one left edge, two button tiers. Hover only for a mouse. */

/* ---------- type ---------- */
.h1 { font: 800 var(--fs-h1)/1.05 var(--sans); letter-spacing: -.025em; max-width: 18ch; text-wrap: balance; }
.h2 { font: 800 var(--fs-h2)/1.1 var(--sans); letter-spacing: -.018em; max-width: 22ch; text-wrap: balance; }
.h3 { font: 700 var(--fs-h3)/1.25 var(--sans); letter-spacing: -.005em; max-width: 30ch; text-wrap: balance; }
.lead { margin-top: var(--sp-head); max-width: 62ch; font: 500 var(--fs-lead)/1.55 var(--sans); color: var(--ink); text-wrap: pretty; }
/* the centred narrow column is gone: narrow blocks start at the page's one left edge and only limit their line length */
.narrow { max-width: calc(var(--wrap) + 2 * var(--gutter)); }
.narrow > * { max-width: 860px; }
@media (min-width: 1024px) { .h1 { line-height: 1.04; } .h2 { line-height: 1.08; } .h3 { line-height: 1.2; } }

/* ---------- buttons: two tiers. Primary = blue, only for «Разбор проекта» and the form submit; secondary = sheet ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 24px;
  background: var(--blue); color: #fff; border: 0; border-radius: 2px; font: 700 1rem/1.2 var(--sans); text-decoration: none; text-align: center; text-wrap: balance; cursor: pointer;
  box-shadow: var(--sh-btn); transition: transform var(--t-release) var(--ease-out), box-shadow var(--t-release) var(--ease-out), background-color 150ms ease;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--blue-deep); transform: translateY(-1px); } }
.btn:active { transform: translateY(1px); box-shadow: var(--sh-btn-press); transition-duration: var(--t-press); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible, video:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: .9375rem; }
.ico-arrow { width: 18px; height: 18px; flex: none; }
.cta-row { margin-top: var(--sp-lead); }
.cta-note { margin-top: 12px; max-width: 46ch; font-size: var(--fs-sm); line-height: 1.5; color: var(--soft); }

/* ---------- header: name, language menu, and from the second screen on (desktop) the call to action ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--header); display: flex; align-items: center; gap: 16px;
  padding: 0 max(var(--gutter), calc((100% - var(--wrap)) / 2));
  background: transparent; border-bottom: 1px solid transparent; transition: background-color .25s, border-color .25s, box-shadow .25s; }
.hdr.is-scrolled { background: var(--paper); border-color: var(--edge-1); box-shadow: 0 10px 22px -18px rgba(60, 50, 30, .35); }
.hdr-name { font: 600 1.25rem/1 var(--serif); margin-right: auto; white-space: nowrap; }
.hdr-lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 10px; list-style: none; cursor: pointer; border-radius: 2px;
  font: 600 var(--fs-label)/1 var(--mono); letter-spacing: .08em; color: var(--ink); border: 1px solid transparent; transition: border-color .15s, background-color .15s; }
.lang-btn::-webkit-details-marker { display: none; }
.lang-btn svg { width: 17px; height: 17px; color: var(--soft); }
.lang-btn .lang-caret { width: 11px; height: 11px; transition: transform .16s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .lang-btn:hover { border-color: var(--edge-2); } }
.hdr-lang[open] .lang-btn { border-color: var(--edge-2); background: var(--sheet); }
.hdr-lang[open] .lang-caret { transform: rotate(180deg); }
/* L3 float */
.lang-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 220px; margin: 0; padding: 6px; list-style: none; transform-origin: top right;
  background: var(--sheet); border: 1px solid var(--edge-2); border-radius: 2px; box-shadow: var(--hi), var(--sh-3); }
.lang-it { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 12px; text-decoration: none; font-weight: 600; border-radius: 2px; }
.lang-it b { min-width: 24px; font: 600 var(--fs-label)/1 var(--mono); letter-spacing: .08em; color: var(--soft); }
@media (hover: hover) and (pointer: fine) { a.lang-it:hover { background: var(--paper); } }
a.lang-it:active { color: var(--blue); }
.lang-it.is-cur { color: var(--blue); }
.lang-it.is-cur b { color: var(--blue); }
/* the header call to action: never on the first screen, never on phones (they have the dock at the bottom). site.js
   sets .is-past on [data-header] once the first screen is gone; hidden means not focusable either */
.hdr-cta { display: none; }
@media (min-width: 900px) {
  .hdr-cta { display: inline-flex; flex: none; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
    transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s 160ms, background-color 150ms ease, box-shadow var(--t-release) var(--ease-out); }
  .hdr.is-past .hdr-cta { opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s, background-color 150ms ease, box-shadow var(--t-release) var(--ease-out); }
  .hdr.is-past .hdr-cta:active { transform: translateY(1px); }
}
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 8px; background: var(--paper); padding: 8px 12px; z-index: 70; }

/* ---------- sections and spacing ---------- */
.sec { position: relative; padding: var(--sp-sec) 0; }
/* a section right after a pinned scene: the scene already ends at the bottom of a screen. GSAP wraps every pinned scene
   in .pin-spacer, so .scene + .sec alone never matched */
.scene + .sec, .pin-spacer + .sec { padding-top: var(--sp-after-scene); }

/* surfaces: L1 sheet (static content), L2 plate (media and the main sheets), media labels */
.sheet { background: var(--sheet) var(--grain); border: 1px solid var(--edge-1); box-shadow: var(--hi), var(--sh-1); }
.ai-badge, .tag { position: absolute; z-index: 2; font: 600 var(--fs-label)/1 var(--sans); letter-spacing: .01em; text-transform: none; padding: 6px 9px; border-radius: 2px; color: var(--sheet); background: rgba(38, 41, 47, .82); }
.ai-badge { right: 10px; bottom: 10px; }
.tag { left: 10px; top: 10px; }
.media { position: relative; overflow: hidden; background: var(--paper2); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media-contain { background: #fff; }
.media-contain img { object-fit: contain; padding: 12px; }
.ai-note, .footnote, .req { font: 500 var(--fs-sm)/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--soft); max-width: 70ch; }

/* step 3: around the pinned model scene; the model bridge line is gone (owner, 20.10), the section ends with the inset */
.sec-model-intro { padding-bottom: 24px; }
.inset { margin: 28px 0 0; padding: var(--pad-sheet); background: var(--plate) var(--grain); border: 1px solid var(--edge-2); box-shadow: var(--hi), var(--sh-2); }
.inset p { font: 600 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.45 var(--sans); max-width: 52ch; }

/* ---------- proof: film card ---------- */
#film { padding-bottom: clamp(16px, 2vw, 32px); }
.v2-ad #film { padding-bottom: var(--sp-sec); }
.proof-head { display: grid; }
/* one L2 sheet: the poster, mounted on it like a print, with the play bar under the picture (the bar never covers the
   poster's own title); the chapters beside it behind a hairline (under it on narrower screens) */
.film-card { margin-top: var(--sp-lead); display: grid; padding: 10px; background: var(--sheet) var(--grain); border: 1px solid var(--edge-2); box-shadow: var(--hi), var(--sh-2); }
@media (min-width: 761px) { .film-card { padding: 14px; } }
@media (min-width: 1200px) { .film-card { grid-template-columns: minmax(0, 1.6fr) minmax(380px, 1fr); align-items: stretch; } .film-poster { align-self: start; } }
.film-poster { position: relative; display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; border: 0; background: var(--ink); color: #fff; text-align: left; cursor: pointer; box-shadow: var(--sh-1); }
.film-pic { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper2); }
.film-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-out); }
.film-play { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 18px 10px 12px; background: var(--ink); color: #fff; font: 700 1rem/1.25 var(--sans); transition: background-color 150ms ease; }
.film-play-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--sheet); color: var(--ink); transition: transform var(--t-release) var(--ease-out); }
.film-play-ico svg { width: 16px; height: 16px; margin-left: 2px; }
.film-len { margin-left: auto; padding-left: 12px; font: 500 .8125rem/1 var(--mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: #C9CDD4; }
@media (max-width: 400px) { .film-play { gap: 10px; padding-right: 14px; font-size: .9375rem; } .film-play-ico { width: 34px; height: 34px; } }
@media (hover: hover) and (pointer: fine) { .film-poster:hover img { transform: scale(1.02); } .film-poster:hover .film-play { background: #1B1D22; } }
.film-poster:active .film-play-ico { transform: scale(.92); transition-duration: var(--t-press); }
.film-side { display: flex; flex-direction: column; margin-top: 10px; padding: 14px 6px 4px; border-top: 1px solid var(--edge-1); }
@media (min-width: 761px) { .film-side { margin-top: 14px; padding: 18px 10px 4px; } }
@media (min-width: 1200px) { .film-side { margin: 0 0 0 14px; padding: 8px 6px 0 18px; border-top: 0; border-left: 1px solid var(--edge-1); } }
.film-ch-label { margin-bottom: 8px; font: 700 1rem/1.3 var(--sans); }
/* chapters: the dialog keeps a scrolling list; in the card they are a grid that fills down the first column, then the
   second, with rows aligned across the columns and a hairline over each row */
.chaps { list-style: none; padding: 0; display: grid; gap: 2px; max-height: 420px; overflow-y: auto; scrollbar-width: thin; }
.chap { display: flex; gap: 10px; align-items: baseline; width: 100%; min-height: 44px; padding: 11px 10px; border: 0; border-radius: 2px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: 600 .9375rem/1.3 var(--sans); transition: background-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .chap:hover { background: var(--plate); } .chap:hover .chap-t { color: var(--blue); } }
.chap.is-cur { background: var(--plate); }
.chap:active { background: var(--paper2); }
.chap.is-cur .chap-t { color: var(--blue); }
.chap-t { flex: none; min-width: 2.9em; font: 500 .8125rem/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--soft); }
.film-side .chaps { flex: 1; display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 9), minmax(44px, auto)); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 0; max-height: none; overflow: visible; }
.film-side .chaps li { display: flex; border-top: 1px solid var(--edge-1); }
.film-side .chap { padding: 10px 6px; }
@media (min-width: 640px) and (max-width: 1199px) { .film-side .chaps { grid-template-rows: repeat(var(--rows3, 6), minmax(44px, auto)); grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; } }
/* wide: auto rows (fr rows would all take the height of the tallest one); the list stretches to the poster's height and
   the rows share the rest evenly */
@media (min-width: 1200px) { .film-side .chaps { align-content: stretch; } .film-side .chap { padding: 8px 6px; font-size: .875rem; } }
@media (max-width: 400px) { .film-side .chaps { column-gap: 10px; } .film-side .chap { gap: 8px; padding: 10px 2px; font-size: .875rem; } }

/* ---------- proof: gallery (materials) ---------- */
.gal-title { margin-top: var(--sp-sub); }
.sec-proof-rest .gal-title { margin-top: 0; }
.gal-exact { margin-top: var(--sp-head); max-width: 62ch; font: 600 var(--fs-lead)/1.5 var(--sans); color: var(--ink); }
.ai-note { margin-top: 10px; }
/* one column that never grows past the page: without minmax(0, 1fr) the rows' min-content widened it */
.gal { list-style: none; padding: 0; margin-top: var(--sp-lead); display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1024px) { .gal { gap: 56px; } }
.gal-group { position: relative; }
.gal-cap { margin: 0 0 12px; font: 700 1.0625rem/1.3 var(--sans); }
/* pictures are L2 plates: a fine frame drawn inside the picture and the plate shadow */
.gal-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 78vw); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gal-row::-webkit-scrollbar { display: none; }
.gal-row .media { aspect-ratio: 16 / 10; scroll-snap-align: start; outline: 1px solid rgba(38, 41, 47, .28); outline-offset: -1px; box-shadow: var(--sh-2); }
.gal-row .media-contain { aspect-ratio: 4 / 5; }
.gal-row .media-pair { aspect-ratio: 8 / 7; }
.gal-pair { max-width: 1040px; }
/* desktop: no strip of equal thumbnails. Four pictures: the first across the column, three under it; three pictures:
   two side by side and the long facade across under them; plans: three sheets in a row */
@media (min-width: 1024px) {
  .gal-row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; overflow: visible; margin: 0; padding: 0; }
  .gal-n1 { grid-template-columns: minmax(0, 1fr); }
  .gal-n2, .gal-n3:not(.gal-plans) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal-n4 > .media:first-child { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
  .gal-n3:not(.gal-plans) > .media:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 5; }
}
/* the pen opens each group: a dimension line (hairline with end ticks) runs across, the pictures uncover behind it.
   Start and end states here, the timing in motion.css */
.v2-rev .gal-group .gal-row { clip-path: inset(0 100% 0 0); }
.v2-rev .gal-group.is-in .gal-row { clip-path: inset(-16px -48px -64px -48px); }
@media (min-width: 1024px) {
  .gal-group::after { content: ''; position: absolute; left: 0; right: 0; bottom: -30px; height: 9px; border-inline: 1px solid rgba(38, 41, 47, .45);
    background: linear-gradient(rgba(38, 41, 47, .45), rgba(38, 41, 47, .45)) center / 100% 1px no-repeat; }
  .v2-rev .gal-group::after { transform: scaleX(0); transform-origin: left; }
  .v2-rev .gal-group.is-in::after { transform: scaleX(1); }
}

/* ---------- carousels on phones (owner, 20.10): one picture per screen, an arrow shows there is more, dots under it ---------- */
.car { position: relative; }
/* icon button, L3 float: look and place here; press, hover and the disabled state (fades away) in motion.css */
.car-btn { display: none; position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; place-items: center; padding: 0;
  border: 1px solid var(--edge-2); border-radius: 2px; background: rgba(251, 249, 244, .94); color: var(--ink); box-shadow: var(--hi), var(--sh-3); cursor: pointer; }
.car-btn svg { width: 20px; height: 20px; }
.car-prev { left: 8px; }
.car-next { right: 8px; }
.gal-dots { display: none; justify-content: center; align-items: center; gap: 6px; margin-top: 4px; pointer-events: none; }
.gal-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(38, 41, 47, .28); transition: width .2s var(--ease-out), background-color .2s; }
.gal-dots i.is-on { width: 18px; background: var(--ink); }
@media (max-width: 1023px) {
  .car .gal-row { grid-auto-columns: 100%; gap: 16px; margin: 0; padding: 0 0 22px; scroll-snap-type: x mandatory; }
  .car .gal-row .media { scroll-snap-align: center; box-shadow: var(--sh-1); }
  .car > .car-btn { display: grid; top: calc(50% - 11px); }
  .gal-dots { display: flex; }
}
/* tablets: one picture across 740 px; a plan sheet stays landscape there instead of a 4:5 sheet taller than the screen */
@media (min-width: 761px) and (max-width: 1023px) { .car .gal-plans .media-contain { aspect-ratio: 16 / 10; } }

/* ---------- proof: content factory (reels) ---------- */
.factory { margin-top: var(--sp-sub); }
.reels { margin: var(--sp-lead) calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 8px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 62vw); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.reels::-webkit-scrollbar { display: none; }
.reel { scroll-snap-align: start; }
.reel-phone { position: relative; aspect-ratio: 9 / 16; padding: 7px; border-radius: 26px; background: var(--ink); box-shadow: var(--sh-2); }
.reel-video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 19px; background: var(--paper2); cursor: pointer; }
.reel .ai-badge { right: 18px; bottom: 18px; }
.reel figcaption { margin-top: 12px; font: 600 .9375rem/1.3 var(--sans); color: var(--ink); }
.reel-still { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); object-fit: cover; border-radius: 19px; }
.factory > .cta-row { margin-top: var(--sp-lead); }
@media (max-width: 899px) {
  .car-reels .reels { grid-auto-columns: 100%; margin: var(--sp-lead) 0 0; padding: 0 0 22px; gap: 16px; }
  .car-reels .reel { scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; }
  .car-reels .reel-phone { width: min(100%, 300px); box-shadow: var(--sh-1); }
  .car-reels .reel figcaption { width: min(100%, 300px); }
  .car-reels > .car-btn { display: grid; }
}
.car-reels-dots .gal-dots { margin-top: 0; }
@media (min-width: 900px) {
  .reels { margin: var(--sp-lead) 0 0; padding: 0 0 24px; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 300px)); gap: 32px; overflow: visible; justify-content: start; }
  .car-reels-dots { display: none; }
}
/* wide screens: heading, text and the call on the left, the three phones on the right (the page's split) */
@media (min-width: 1100px) {
  .factory { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto auto 1fr; column-gap: clamp(40px, 5vw, 72px); align-items: start; }
  .factory > * { grid-column: 1; }
  .factory > .car-reels { grid-column: 2; grid-row: 1 / span 4; }
  .factory .reels { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* ---------- formats and terms ---------- */
/* the two formats are one sheet split by a hairline, not two boxes */
.fmt-grid { margin-top: var(--sp-lead); display: grid; background: var(--sheet) var(--grain); border: 1px solid var(--edge-1); box-shadow: var(--hi), var(--sh-1); }
@media (min-width: 900px) { .fmt-grid { grid-template-columns: 1fr 1fr; } }
.fmt, .fmt.sheet { position: relative; padding: var(--pad-sheet); background: none; border: 0; box-shadow: none; }
.fmt + .fmt { border-top: 1px solid var(--edge-1); }
@media (min-width: 900px) { .fmt + .fmt { border-top: 0; border-left: 1px solid var(--edge-1); } }
.fmt p { margin-top: 10px; color: var(--ink); max-width: 56ch; }
.terms { margin-top: var(--sp-lead); display: grid; gap: 24px 48px; }
@media (min-width: 900px) { .terms { grid-template-columns: 1fr 1fr; gap: 32px 64px; } }
.term-h { margin: 0 0 6px; font: 700 1.0625rem/1.3 var(--sans); color: var(--blue); }
.term-dont .term-h { color: var(--red-ink); }
.term ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.term li { position: relative; padding-left: 18px; }
.term li::before { content: ''; position: absolute; left: 1px; top: .62em; width: 6px; height: 6px; background: var(--blue); transform: rotate(45deg); }

/* ---------- about: a band of the second paper, the photo as a plate, two equal secondary buttons ---------- */
.sec-about { background: var(--paper2) var(--grid); border-block: 1px solid var(--edge-2); }
.about-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .about-grid { grid-template-columns: 5fr 6fr; gap: 72px; } }
.about-photo, .about-photo.sheet { overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper2); border: 1px solid var(--edge-2); box-shadow: var(--hi), var(--sh-2); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.about-name { font: 600 clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem)/1.02 var(--serif); }
.about-role { margin-top: 14px; max-width: 46ch; font: 700 var(--fs-lead)/1.4 var(--sans); }
.sign { width: 180px; height: 26px; margin-top: 6px; fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-dasharray: 420; stroke-dashoffset: 0; }
.v2-rev .sign { stroke-dashoffset: 420; }
.v2-rev .sign.is-in { stroke-dashoffset: 0; }
.about-links { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 440px; margin-top: 24px; }
/* secondary button: sheet, ink text, hairline edge, L1 shadow; same size for both */
.about-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 16px; background: var(--sheet); color: var(--ink);
  border: 1px solid var(--edge-2); border-radius: 2px; box-shadow: var(--hi), var(--sh-1); font: 600 1rem/1.2 var(--sans); text-decoration: none;
  transition: transform var(--t-release) var(--ease-out), box-shadow var(--t-release) var(--ease-out), border-color 150ms ease; }
.about-link span { flex: 1; }
.about-link .ico-l { width: 22px; height: 22px; flex: none; color: var(--ink); }
.ico-ext { width: 16px; height: 16px; flex: none; color: var(--soft); }
@media (hover: hover) and (pointer: fine) { .about-link:hover { transform: translateY(-1px); border-color: rgba(38, 41, 47, .4); box-shadow: var(--hi), var(--sh-2); } .about-link:hover .ico-ext { color: var(--ink); } }
.about-link:active { transform: translateY(1px); box-shadow: var(--sh-press); transition-duration: var(--t-press); }
.about-label { margin: 0 0 4px; font: 700 var(--fs-h3)/1.25 var(--sans); }
.sec-about .about-label { margin-top: var(--sp-sub); }
.skills { list-style: none; padding: 0; margin-top: 16px; display: grid; background: var(--sheet); border: 1px solid var(--edge-1); box-shadow: var(--hi), var(--sh-1); }
@media (min-width: 640px) { .skills { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .skills { grid-template-columns: repeat(3, 1fr); } }
.skill { padding: 20px; border-top: 1px solid var(--edge-1); }
.skill-n { display: block; color: var(--blue); margin-bottom: 10px; }
.skill b { display: block; font: 700 1.0625rem/1.3 var(--sans); }
.skill p { margin-top: 8px; font-size: .9375rem; line-height: 1.5; }
.about-foot { display: grid; gap: 16px; align-items: end; }
@media (min-width: 1024px) { .about-foot { grid-template-columns: 1fr auto; gap: 40px; } }
.projects { list-style: none; padding: 0; margin-top: 4px; display: grid; gap: 8px 40px; }
@media (min-width: 760px) { .projects { grid-template-columns: 1fr 1fr; } }
.projects li { max-width: 56ch; }
/* text links: the size of their line, 600, a fine blue underline, 44 px tall to tap */
.projects a, .ftr-req a, .lf-note a { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(30, 79, 216, .6); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.projects a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-lead); font-weight: 700; }
.projects a:active, .ftr-req a:active { color: var(--blue); }
.projects span { display: block; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.req { margin-top: 24px; }

/* ---------- start and questions ---------- */
/* the three steps are one sheet split by hairlines; the numbers are axis bubbles joined by a dashed axis line */
.start-steps { list-style: none; padding: 0; margin-top: var(--sp-lead); display: grid; background: var(--sheet) var(--grain); border: 1px solid var(--edge-1); box-shadow: var(--hi), var(--sh-1); }
@media (min-width: 900px) { .start-steps { grid-template-columns: repeat(3, 1fr); } }
.start-step { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 16px; align-items: start; align-content: start; padding: var(--pad-sheet); }
.start-step + .start-step { border-top: 1px solid var(--edge-1); }
.start-n { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--sheet); color: var(--ink); font: 600 .875rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.start-step p { padding-top: 6px; }
.start-step b { display: block; margin-bottom: 4px; }
/* phones: the axis runs down through the bubbles; wide screens: across */
.start-step::before, .start-step::after { content: ''; position: absolute; pointer-events: none; }
.start-step:not(:last-child)::before { left: calc(var(--pad-sheet) + 18px); top: calc(var(--pad-sheet) + 36px); bottom: 0; border-left: 1px dashed rgba(38, 41, 47, .32); }
.start-step:not(:first-child)::after { left: calc(var(--pad-sheet) + 18px); top: 0; height: var(--pad-sheet); border-left: 1px dashed rgba(38, 41, 47, .32); }
@media (min-width: 900px) {
  .start-step { grid-template-columns: 1fr; gap: 14px; }
  .start-step + .start-step { border-top: 0; border-left: 1px solid var(--edge-1); }
  .start-step p { padding-top: 0; }
  .start-step:not(:last-child)::before { left: calc(var(--pad-sheet) + 36px); right: 0; top: calc(var(--pad-sheet) + 18px); bottom: auto; border-left: 0; border-top: 1px dashed rgba(38, 41, 47, .32); }
  .start-step:not(:first-child)::after { left: 0; width: var(--pad-sheet); top: calc(var(--pad-sheet) + 18px); height: 0; border-left: 0; border-top: 1px dashed rgba(38, 41, 47, .32); }
}
/* questions: one sheet with hairlines; on wide screens the heading stays on the left while the list scrolls */
.faq-wrap { margin-top: var(--sp-sub); }
.faq-wrap .faq-title { margin: 0; }
@media (min-width: 1024px) {
  .faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; margin-top: calc(var(--sp-sub) + 24px); }
  .faq-wrap .faq-title { position: sticky; top: calc(var(--header) + 32px); }
  .faq-wrap .faq { margin-top: 0; }
}
.faq { margin-top: var(--sp-lead); max-width: 900px; background: var(--sheet) var(--grain); border: 1px solid var(--edge-1); box-shadow: var(--hi), var(--sh-1); }
.faq-item, .faq-item:last-child { border: 0; border-top: 1px solid var(--edge-1); background: none; box-shadow: none; }
.faq-item:first-child { border-top: 0; }
.faq-item[open] { background: var(--plate); }
.faq-item summary { list-style: none; cursor: pointer; min-height: 60px; padding: 18px 56px 18px 20px; position: relative; font: 700 var(--fs-body)/1.35 var(--sans); transition: color 150ms ease; }
@media (min-width: 761px) { .faq-item summary { font-size: 1.0625rem; padding-left: 24px; } }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:active { color: var(--blue); }
@media (hover: hover) and (pointer: fine) { .faq-item summary:hover { color: var(--blue); } }
.faq-item summary::after { content: ''; position: absolute; right: 20px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--blue), var(--blue)) center / 14px 2px no-repeat, linear-gradient(var(--blue), var(--blue)) center / 2px 14px no-repeat; transition: transform .22s var(--ease-out); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 56px 22px 20px; color: var(--ink); max-width: 68ch; }
@media (min-width: 761px) { .faq-item p { padding-left: 24px; } }

/* ---------- footer ---------- */
.ftr { padding: 48px 0 calc(104px + env(safe-area-inset-bottom)); border-top: 1px solid var(--edge-2); }
@media (min-width: 900px) { .ftr { padding-bottom: 56px; } }
.ftr-notes { list-style: none; padding: 0; display: grid; gap: 6px; font: 500 var(--fs-sm)/1.5 var(--sans); color: var(--soft); max-width: 80ch; }
.ftr-req { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; font: 500 var(--fs-sm)/1.5 var(--sans); color: var(--soft); }
.ftr-req a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- film dialog (layout and motion on phones: motion.css) ---------- */
.film-dlg { width: min(1400px, 96vw); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.film-dlg::backdrop { background: rgba(20, 22, 26, .9); }
.film-dlg-in { position: relative; display: grid; gap: 14px; background: var(--paper); padding: 12px; box-shadow: var(--sh-3); }
@media (min-width: 1024px) { .film-dlg-in { grid-template-columns: minmax(0, 1fr) 280px; } }
.film-video { width: 100%; max-height: 82svh; background: #000; }
.film-dlg-side { display: grid; gap: 12px; align-content: start; }
.film-dlg-side .chaps { max-height: 60svh; }
@media (max-width: 1023px) { .film-dlg-side .chaps { max-height: 26svh; } }
.film-close { position: absolute; right: 0; top: -52px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(241, 237, 227, .5); border-radius: 2px; background: transparent; color: var(--paper); cursor: pointer; }
.film-close svg { width: 18px; height: 18px; }
.film-close:active { background: rgba(241, 237, 227, .15); }

/* ---------- sticky call to action on phones: a dock on its own strip of paper (hairline edge, a soft shadow up the
   page), so the button never sits on top of text. Its slide in and out: motion.css ---------- */
.sticky-dock { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; padding: 10px var(--gutter) max(10px, env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--edge-2); box-shadow: 0 -14px 28px -20px rgba(60, 50, 30, .4);
  transform: translateY(110%); visibility: hidden; transition: transform 200ms var(--ease-out), visibility 0s 200ms; }
.sticky-dock.is-on { transform: none; visibility: visible; transition: transform 280ms var(--ease-drawer), visibility 0s; }
.sticky-dock .btn { width: 100%; min-height: 52px; }
@media (min-width: 900px) { .sticky-dock { display: none; } }

/* ---------- reveals: start and end states and timing of the rising media (film card, reels, photo) live in motion.css ---------- */

/* ---------- ad landing ---------- */
.ad-hero { padding: calc(var(--header) + 40px) 0 64px; }
.ad-hero-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 1024px) { .ad-hero-grid { grid-template-columns: 6fr 5fr; gap: 64px; } }
.ad-trust { list-style: none; padding: 0; margin-top: 28px; display: grid; gap: 8px; font: 600 .9375rem/1.4 var(--sans); color: var(--ink-2); }
.ad-trust li { padding-left: 22px; position: relative; }
.ad-trust li::before { content: ''; position: absolute; left: 0; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
.ad-loop { position: relative; border: 1px solid var(--edge-2); background: var(--ink); aspect-ratio: 16 / 9; box-shadow: var(--hi), var(--sh-2); }
.ad-loop-video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.ad-loop-open { position: absolute; left: 0; bottom: -58px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 0; border: 0; background: transparent; color: var(--ink); font: 700 1rem/1.2 var(--sans); cursor: pointer; }
.ad-loop-open:active { transform: translateY(1px); }
.ad-loop-open svg { width: 22px; height: 22px; color: var(--blue); }
.ad-hero-grid > .ad-loop { margin-bottom: 58px; }
.sides { list-style: none; padding: 0; margin-top: var(--sp-lead); display: grid; gap: var(--gap-card); }
@media (min-width: 900px) { .sides { grid-template-columns: 1fr 1fr; } }
.side { padding: var(--pad-sheet); }
.side-h { margin: 0 0 6px; font: 700 1rem/1.3 var(--sans); color: var(--blue); }
.side p:last-child { font: 600 1.125rem/1.4 var(--sans); }

/* ---------- first screen before the scene script (page.mjs heroPre) ----------
   hero.css styles the parts; here they stand where hero.js puts them: on desktop the column of clamp(420px, 40%,
   580px) at the left edge of the 1240 wrap, centred in the space under the header (6 px higher); on a phone 16 px from
   the edges, 14 px under the header. Gone as soon as the stage has the drawn scene. */
.hx-pre { z-index: 3; display: flex; flex-direction: column; justify-content: center; justify-content: safe center; padding: calc(var(--header) + 18px) 0 30px; pointer-events: none; }
.hx-pre .hx-copy { position: relative; left: auto; top: auto; width: clamp(420px, 40%, 580px); margin-left: max(40px, (100% - 1240px) / 2); pointer-events: auto; }
.scene-stage:not(:empty) + .hx-pre { display: none; }
@media (max-width: 760px) {
  .hx-pre { justify-content: flex-start; padding: calc(var(--header) + 14px) 16px 0; }
  .hx-pre .hx-copy { width: auto; margin-left: 0; }
}
/* sizes of the title and subtitle: hero.css (the h1 and lead of the type scale, the same before and after the script) */

/* ---------- text versions of the drawn scenes (page.mjs): without JavaScript only ---------- */
.st-road { list-style: none; padding: 0; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 0; font: 700 .9375rem/1.3 var(--sans); }
.st-road li + li::before { content: ''; display: inline-block; width: 22px; height: 2px; margin: 0 10px; vertical-align: middle; background: var(--blue); }
.st-list { margin-top: 20px; padding-left: 20px; display: grid; gap: 8px; }
.st-h3 { margin-top: 48px; }
.model-steps { margin: 0 0 40px; padding-left: 22px; display: grid; gap: 14px; }

/* ---------- legal notice and privacy policy ---------- */
.legal { padding-top: calc(var(--header) + clamp(40px, 6vw, 80px)); }
.legal-back { margin-bottom: 18px; color: var(--soft); }
.legal-back a { text-decoration: none; }
.legal-body { margin-top: 28px; max-width: 72ch; }
.legal-body h2 { margin: 32px 0 8px; font: 700 1.125rem/1.3 var(--sans); }
.legal-body p, .legal-body li { color: var(--ink); }
.legal-body p + p { margin-top: 10px; }
.legal-body ul { margin: 8px 0 0; padding-left: 20px; }
.legal-body a { text-decoration-color: var(--blue); text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---------- the chain without the scene (no JavaScript, «reduce motion»): drawing -> Blender -> pictures and film | presentation ---------- */
.chain { margin-top: var(--sp-sub); }
.scene-text > .wrap > .chain:first-child { margin-top: 0; }
.chain-row { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 34px; }
.chain-step { position: relative; }
.chain-step figure { margin: 0; }
.chain-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper2); border: 1px solid var(--edge-2); box-shadow: var(--hi), var(--sh-2); }
.chain-media img, .chain-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.chain-contain { background: #fff; }
.chain-contain img { object-fit: contain; }
.chain-media video { cursor: pointer; }
.chain-step figcaption { display: flex; gap: 10px; align-items: baseline; margin-top: 10px; font-size: .9375rem; line-height: 1.4; }
.chain-n { flex: none; color: var(--blue); }
/* arrows between the steps of a row: down on phones, right on wide screens */
.chain-step + .chain-step::before { content: ''; position: absolute; left: 50%; top: -28px; width: 14px; height: 22px; transform: translateX(-50%);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 22'%3E%3Cpath d='M7 1v19M1 14l6 6 6-6' fill='none' stroke='%231E4FD8' stroke-width='1.8'/%3E%3C/svg%3E"); }
.chain-branch { margin-top: 40px; padding-top: 22px; border-top: 1px dashed var(--line); }
.chain-bl { color: var(--blue); display: flex; align-items: center; gap: 10px; }
.chain-bl::before { content: ''; flex: none; width: 18px; height: 18px; border-left: 1.8px solid var(--blue); border-bottom: 1.8px solid var(--blue); transform: translateY(-5px); }
@media (min-width: 900px) {
  .chain-row { gap: 40px; }
  .chain-trunk { grid-template-columns: repeat(2, minmax(0, 380px)); }
  .chain-a { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chain-b { grid-template-columns: minmax(0, 640px); }
  .chain-step + .chain-step::before { left: -31px; top: calc((100% - 2.4em) / 2 - 11px); width: 22px; height: 14px; transform: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M1 7h19M14 1l6 6-6 6' fill='none' stroke='%231E4FD8' stroke-width='1.8'/%3E%3C/svg%3E"); }
}

/* ---------- the scroll wheel on the right edge (site.js draws and turns it; its motion and hit area: motion.css) ---------- */
.wheel { position: fixed; z-index: 55; right: 10px; top: 50%; width: 22px; height: 112px; margin-top: -56px; cursor: grab; touch-action: none;
  border-radius: 11px; box-shadow: 0 0 0 1.5px var(--ink), var(--sh-3); user-select: none; -webkit-user-select: none; }
.wheel canvas { display: block; border-radius: 11px; }
.wheel.is-drag { cursor: grabbing; }
/* the axle caps above and below, so it reads as a wheel in a slot */
.wheel::before, .wheel::after { content: ''; position: absolute; left: 50%; width: 30px; height: 6px; margin-left: -15px; background: var(--ink); border-radius: 2px; }
.wheel::before { top: -9px; }
.wheel::after { bottom: -9px; }
/* phones: thin enough to live in the 16px side gutter, so it never covers a picture or a button */
@media (max-width: 760px) { .wheel { right: 3px; width: 10px; height: 84px; margin-top: -42px; border-radius: 5px; box-shadow: 0 0 0 1px var(--ink), var(--sh-2); } .wheel canvas { border-radius: 5px; }
  .wheel::before, .wheel::after { width: 14px; margin-left: -7px; height: 4px; } .wheel::before { top: -7px; } .wheel::after { bottom: -7px; } }
@media print { .wheel { display: none; } }

/* apartment sheets (landscape PDF pages with areas): whole sheet on white */
.gal-row .media-sheet { aspect-ratio: 1414 / 1000; }
.media-sheet img { padding: 6px; }

/* the live presentation of the case: its own dark band with a big heading, the whole screenshot, a big button */
.sec-live { background: var(--ink); color: var(--paper); }
.sec-live .h2 { color: #fff; max-width: 24ch; }
.sec-live .lead { color: rgba(241, 237, 227, .86); max-width: 62ch; }
.live-shot { position: relative; display: block; margin-top: clamp(24px, 3vw, 40px); aspect-ratio: 16 / 10; overflow: hidden; background: #fff;
  border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 24px 60px -20px rgba(0,0,0,.6); }
.live-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { .live-shot:hover img { transform: scale(1.015); } }
.live-open { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px;
  background: var(--blue); color: #fff; font: 700 1rem/1.2 var(--sans); white-space: nowrap; box-shadow: var(--sh-btn, 0 8px 20px -8px rgba(30,79,216,.6)); }
.live-cta { margin-top: 24px; }
.live-btn { font-size: 1.0625rem; min-height: 56px; padding: 14px 26px; }
.sec-live .ico-ext { width: 16px; height: 16px; }
@media (max-width: 600px) { .live-open { display: none; } .live-btn { width: 100%; justify-content: center; } }

/* the virtual tour: the same big shot and button as the presentation, on a light band (22.10) */
.sec-tour { background: var(--paper2); color: var(--ink); }
.sec-tour .h2 { color: var(--ink); }
.sec-tour .lead { color: var(--ink); }
.sec-tour .live-shot { border-color: rgba(38, 41, 47, .18); box-shadow: var(--sh-2, 0 1px 2px rgba(38,41,47,.10), 0 6px 14px -6px rgba(60,50,30,.18), 0 24px 44px -20px rgba(60,50,30,.30)); }
.sec-tour .live-shot img { object-position: center; }
/* a source line under a gallery row (aerial frames, map) */
.gal-note { margin: 8px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--soft); }
/* the neighbourhood map and its list: whole, on white, two side by side on desktop */
.gal-row .media-map { aspect-ratio: 1326 / 926; background: #fff; }
.gal-row .media-map img { object-fit: contain; }
.gal-group .gal-note { font-size: .9375rem; color: var(--ink); max-width: 80ch; }

.area-list { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 4px; }

/* right to left (Arabic, 22.10.2026): text and columns mirror by themselves (grid, flex, text-align start); here the
   things placed by physical sides: carousel arrows swap sides and point the reading way, arrows in buttons point left,
   the bar that marks the current line sits on the right. Drawings, plans, maps and photos are not mirrored. */
[dir="rtl"] .car-prev { left: auto; right: 8px; }
[dir="rtl"] .car-next { right: auto; left: 8px; }
[dir="rtl"] .car-btn svg, [dir="rtl"] .ico-arrow { transform: scaleX(-1); }
[dir="rtl"] .ch-it.is-on { box-shadow: inset -2px 0 0 var(--blue); }
[dir="rtl"] .ch-it { padding: 5px 10px 5px 0; }
[dir="rtl"] .ch-in { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .ar-it.is-cur { box-shadow: inset -3px 0 0 var(--blue); }
[dir="rtl"] .area-list { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .film-play-ico svg { margin-left: 0; margin-right: 2px; transform: scaleX(-1); }
[dir="rtl"] .film-len { margin-left: 0; margin-right: auto; padding-left: 0; padding-right: 12px; }
/* the scene drawings are not mirrored: their labels keep the left-to-right anchoring they were laid out with
   (an Arabic word itself still runs right to left inside its label) */
[dir="rtl"] .scene svg text { direction: ltr; }
@media (min-width: 1200px) { [dir="rtl"] .film-side { margin: 0 14px 0 0; padding: 8px 18px 0 6px; border-left: 0; border-right: 1px solid var(--edge-1); } }
@media (min-width: 900px) { [dir="rtl"] .fmt + .fmt { border-left: 0; border-right: 1px solid var(--edge-1); } }
[dir="rtl"] .term li, [dir="rtl"] .ad-trust li { padding-left: 0; padding-right: 18px; }
[dir="rtl"] .ad-trust li { padding-right: 22px; }
[dir="rtl"] .term li::before { left: auto; right: 1px; }
[dir="rtl"] .start-step:not(:last-child)::before, [dir="rtl"] .start-step:not(:first-child)::after { left: auto; right: calc(var(--pad-sheet) + 18px); border-left: 0; border-right: 1px dashed rgba(38, 41, 47, .32); }
@media (min-width: 900px) {
  [dir="rtl"] .start-step + .start-step { border-left: 0; border-right: 1px solid var(--edge-1); }
  [dir="rtl"] .start-step:not(:last-child)::before { right: calc(var(--pad-sheet) + 36px); left: 0; border-right: 0; }
  [dir="rtl"] .start-step:not(:first-child)::after { right: 0; left: auto; border-right: 0; }
}
[dir="rtl"] .faq-item summary { padding: 18px 20px 18px 56px; }
[dir="rtl"] .faq-item summary::after { right: auto; left: 20px; }
[dir="rtl"] .faq-item p { padding: 0 20px 22px 56px; }
@media (min-width: 761px) { [dir="rtl"] .faq-item summary, [dir="rtl"] .faq-item p { padding-right: 24px; } }
[dir="rtl"] .st-list, [dir="rtl"] .legal-body ul { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .model-steps { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .hx-pre .hx-copy { margin-left: 0; margin-right: max(40px, (100% - 1240px) / 2); }

/* the owner's portrait (25.10.2026): an upright frame, the whole head in it */
.about-photo, .about-photo.sheet { aspect-ratio: 3 / 4; max-width: 420px; }
.about-photo img { object-position: 50% 30%; }