/* Shared layout. One type scale and one set of breakpoints for all seven pages. */
:root {
  --ink: #080909;
  --ink-2: #121616;
  --ink-3: #202626;
  --paper: #f1f0eb;
  --paper-2: #d9d8d1;
  --muted: #adb2ae;
  --muted-strong: #c3c7c2;
  --muted-dark: #585e5a;
  --line: rgba(241,240,235,.18);
  --line-dark: rgba(8,9,9,.18);
  --accent: #b74300;
  --accent-bright: #ff782d;
  --surface-card: rgba(22,23,24,.90);
  --surface-border: rgba(241,240,235,.12);
  --surface-highlight: rgba(255,255,255,.14);
  --surface-radius: 10px;

  /* Single dark canvas: page-level tokens (legacy --ink/--paper/--accent stay for header/buttons). */
  --page-bg: #050505;
  --line-soft: rgba(241,240,235,.10);
  --ambient-warm: rgba(183,67,0,.075);
  --ambient-neutral: rgba(241,240,235,.035);
  --accent-on-dark: var(--accent-bright);
  --text-muted-on-dark: var(--muted);
  --max: 1600px;
  --gutter: clamp(20px, 3vw, 56px);
  --section-space: clamp(64px, 7vw, 112px);
  --header-clearance: 126px;
  --display: "Golos Text", Arial, sans-serif;
  --body: "Golos Text", Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-premium: cubic-bezier(.22, 1, .36, 1);
  --ease-depth: cubic-bezier(.25, 1.12, .38, 1.02);
  --lift-duration: 340ms;

  /* Depth system: radii — flat 2px on dark canvas; capsules/pills keep 999px. */
  --radius-control: 2px;
  --radius-card: 10px;
  --radius-surface: 12px;
  --radius-glass: 2px;

  /* Glass surfaces */
  --glass-blur: 20px;
  --glass-saturate: 140%;
  --glass-dark-bg: rgba(18,22,22,.68);
  --glass-dark-bg-fallback: #121616;
  --glass-dark-border: rgba(241,240,235,.18);
  --glass-dark-highlight: rgba(255,255,255,.08);
  --glass-light-bg: rgba(255,255,255,.55);
  --glass-light-bg-fallback: #f1f0eb;
  --glass-light-border: rgba(8,9,9,.1);
  --glass-light-highlight: rgba(255,255,255,.85);

  /* Depth system: elevation on dark surfaces.
     Soft, wide and low-alpha so plates float gently instead of reading as dark smudges.
     Each level = one tight contact shadow + one wide ambient shadow, blur and alpha grow with depth. */
  --shadow-dark-1: 0 1px 3px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.045);
  --shadow-dark-2: 0 2px 6px rgba(0,0,0,.14), 0 10px 26px rgba(0,0,0,.17), inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-dark-3: 0 6px 16px rgba(0,0,0,.16), 0 20px 48px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.055);
  --shadow-dark-4: 0 12px 32px rgba(0,0,0,.2), 0 40px 92px rgba(0,0,0,.26), 0 0 0 1px rgba(255,120,45,.14), inset 0 1px 0 rgba(255,255,255,.06);

  /* Depth system: elevation on light surfaces */
  --shadow-light-1: 0 1px 3px rgba(8,9,9,.07), 0 4px 12px rgba(8,9,9,.09), inset 0 1px 0 rgba(255,255,255,.6);
  --shadow-light-2: 0 2px 6px rgba(8,9,9,.08), 0 10px 26px rgba(8,9,9,.11), inset 0 1px 0 rgba(255,255,255,.65);
  --shadow-light-3: 0 6px 16px rgba(8,9,9,.09), 0 20px 48px rgba(8,9,9,.13), inset 0 1px 0 rgba(255,255,255,.7);
  --shadow-light-4: 0 12px 32px rgba(8,9,9,.11), 0 40px 92px rgba(8,9,9,.17), 0 0 0 1px rgba(255,120,45,.1), inset 0 1px 0 rgba(255,255,255,.75);
}
* { box-sizing: border-box; }
html { background: var(--page-bg); color-scheme: dark; scroll-padding-top: 100px; }
/* One dark canvas: the industrial field stays behind every section and never competes with content. */
body { margin: 0; isolation: isolate; background-color: var(--page-bg); color: var(--paper); font: 400 16px/1.6 var(--body); }
.ambient-grid-mask { position: fixed; z-index: -1; inset: 0; overflow: hidden; background: transparent; -webkit-mask-image: radial-gradient(140% 120% at 50% 38%, rgba(0,0,0,.5) 0%, rgba(0,0,0,.12) 58%, transparent 100%); mask-image: radial-gradient(140% 120% at 50% 38%, rgba(0,0,0,.5) 0%, rgba(0,0,0,.12) 58%, transparent 100%); pointer-events: none; }
  .ambient-grid-layer { position: absolute; inset: 0; background-image: linear-gradient(rgba(241,240,235,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(241,240,235,.018) 1px, transparent 1px); background-size: 96px 96px; pointer-events: none; }
.ambient-lights { position: fixed; z-index: -2; inset: 0; overflow: hidden; background: linear-gradient(180deg, #0b0c0c 0%, #070808 48%, #050505 100%); pointer-events: none; }
.ambient-lights::before, .ambient-lights::after { position: absolute; inset: 0; content: ""; pointer-events: none; }
.ambient-lights::before { background: radial-gradient(160% 130% at 12% -8%, rgba(166,77,36,.10) 0%, rgba(166,77,36,.035) 45%, transparent 78%); opacity: .65; animation: ambient-warm-breathe 52s ease-in-out infinite; }
.ambient-lights::after { background: radial-gradient(125% 110% at 100% 108%, rgba(120,130,135,.045) 0%, transparent 72%); opacity: .70; animation: ambient-neutral-breathe 67s ease-in-out -19s infinite; }
.ambient-light { position: absolute; inset: 0; background: none; pointer-events: none; }
@keyframes ambient-warm-breathe { 0%, 100% { opacity: .65; } 25% { opacity: .90; } 50% { opacity: .70; } 75% { opacity: .85; } }
@keyframes ambient-neutral-breathe { 0%, 100% { opacity: .70; } 25% { opacity: .84; } 50% { opacity: .66; } 75% { opacity: .80; } }
body::before { content: ""; pointer-events: none; }
body::after { position: fixed; z-index: -1; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); background-size: 220px 220px; opacity: .022; content: ""; pointer-events: none; }
body.menu-open, body.modal-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: wait; opacity: .7; }
:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 4px; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p, figure { margin-top: 0; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; overflow-wrap: break-word; }
h1 { font-size: clamp(38px, 4.6vw, 66px); margin-bottom: 24px; }
h2 { font-size: clamp(30px, 3vw, 40px); margin-bottom: 22px; }
h3 { font-size: clamp(22px, 2vw, 28px); margin-bottom: 14px; }
h4 { font-size: 24px; margin-bottom: 10px; }
h1 em, h2 em, h3 em { color: var(--accent-on-dark); font-style: normal; }
.frame { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); min-width: 0; }
.frame > *, .section-heading > *, .direction-grid > *, .bignum > *, .contact-band__grid > *, .contact-layout > *, .process-line > *, .service-grid > *, .wide-cta__inner > *, .footer-grid > *, .about-page__grid > * { min-width: 0; }
.section-pad { padding-block: var(--section-space); }
.section-pad--dark { background: transparent; }
.hub, .portfolio-page, .about-page, .contact-band, .process-preview, .detail-process, .finish-intro, .about-gallery, .projects-preview { background: transparent; color: var(--paper); }
/* A section may be its own frame (home), or contain a frame (inner pages). */
section.frame { max-width: none; padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); }
.skip-link { position: fixed; z-index: 1200; top: 8px; left: 16px; padding: 10px 16px; background: var(--paper); color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: none; }

/* Navigation fits inside its shell. The hero owns the clearance below it. */
.site-header { position: fixed; z-index: 400; top: 14px; left: 0; right: 0; width: min(calc(100% - 32px), 1440px); margin-inline: auto; }
.header-shell { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 66px; padding: 10px 12px 10px 20px; border: 1px solid var(--glass-dark-border); border-radius: var(--radius-glass); background: var(--glass-dark-bg-fallback); box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.header-shell::before { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: linear-gradient(115deg, rgba(255,255,255,.09), transparent 32%, transparent 62%, rgba(255,120,45,.06)); content: ""; pointer-events: none; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header-shell { background: rgba(12,16,16,.76); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
  /* Scrolled over light sections the blur mixes the light page with the dark glass.
     Densify the glass so active/hover nav text keeps >= 4.5:1 contrast. */
  .site-header.is-scrolled .header-shell { background: rgba(12,16,16,.94); }
}
/* Scrolled state: only the glass densifies; no orange ring, no extra shadow layers. */
.site-header.is-scrolled .header-shell { border-color: var(--glass-dark-border); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; transition: transform var(--lift-duration) var(--ease-depth); }
.brand img { width: 42px; height: 42px; object-fit: contain; transition: transform var(--lift-duration) var(--ease-depth), filter var(--lift-duration) var(--ease-depth); }
.brand__name { font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .12em; white-space: nowrap; }
.brand__name b { display: none; }
.desktop-nav { display: flex; align-items: center; flex: 0 0 auto; gap: clamp(24px, 2vw, 28px); margin-left: auto; }
.desktop-nav > a { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 36px; padding-block: 8px; color: var(--paper-2); font-size: 13px; font-weight: 500; line-height: 1.3; white-space: nowrap; transition: color 150ms var(--ease-depth); }
.desktop-nav > a:hover, .desktop-nav > a:focus-visible, .desktop-nav > a.is-current { color: var(--accent-bright); }
.desktop-nav > a.is-current::before { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 999px; background: var(--accent-bright); }
/* Magnetic pill rendered behind the desktop nav (created by app.js on capable pointers). */
.nav-magnet { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; visibility: hidden; transition: visibility 0s linear 180ms; }
.nav-magnet__shape { width: 100%; height: 100%; border-radius: 999px; background: var(--paper); box-shadow: 0 0 16px rgba(243,103,2,.55), 0 0 40px rgba(243,103,2,.22); transform: scale(.86); transition: transform 280ms var(--ease-depth); }
.nav-magnet.is-visible { visibility: visible; transition-delay: 0s; }
.nav-magnet.is-visible .nav-magnet__shape { transform: scale(1); }
.nav-magnet:not(.is-visible) .nav-magnet__shape { transform: scale(0); transition-duration: 180ms; }
/* Letter swap: two-glyph stacks roll inside a clipped per-character window. */
.letter-swap__char { display: inline-block; height: 1.3em; overflow: hidden; }
.letter-swap__stack { display: flex; flex-direction: column; transition: transform .45s cubic-bezier(.22,1,.36,1) calc(var(--i, 0) * 26ms); will-change: transform; }
.letter-swap__stack > span { display: block; flex: 0 0 1.3em; height: 1.3em; line-height: 1.3em; white-space: pre; }
/* Activation gate: desktop width, real pointer, motion allowed. Dark ink stays inside the gate. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .desktop-nav.is-magnet-ready > a.is-magnet,
  .desktop-nav.is-magnet-ready > a.is-magnet-covered { z-index: 3; color: var(--ink); }
  .desktop-nav.is-magnet-ready > a.is-magnet .letter-swap__stack { transform: translateY(-1.3em); }
  .desktop-nav.is-magnet-ready > a.is-magnet.is-current::before { background: var(--ink); }
}
/* Hard fallback: no pill, no rolled glyphs anywhere else. */
@media (hover: none), (pointer: coarse), (pointer: none), (prefers-reduced-motion: reduce), (max-width: 900px) {
  .nav-magnet { display: none; }
  .desktop-nav .letter-swap__stack { transform: none !important; transition: none !important; }
}
/* Capsule shell on desktop. */
@media (min-width: 901px) {
  /* Capsule edges align with the content frame (same --gutter and 1600px cap). */
  .site-header { width: min(calc(100% - 2 * var(--gutter)), 1600px); }
  .header-shell { border-radius: 999px; gap: 28px; }
}
.header-actions { display: flex; align-items: center; gap: 20px; flex: none; }
.header-phone { font-size: 13px; white-space: nowrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; max-width: 100%; padding: 12px 22px; border: 1px solid transparent; border-radius: var(--radius-control); font-size: 14px; line-height: 1.35; font-weight: 500; text-align: center; transition: background .2s, color .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button--small { min-height: 42px; padding: 10px 16px; font-size: 13px; }
.button--light { background: var(--paper); color: var(--ink); }
.button--accent { background: var(--accent); color: var(--paper); }
.button--accent:hover, .button--light:hover { background: var(--accent-bright); color: var(--ink); }
.button--outline { border-color: var(--accent); background: transparent; color: var(--paper); }
.button--outline:hover { background: var(--accent); color: var(--paper); }
.button--dark { background: var(--ink); color: var(--paper); }
.button--dark:hover { background: #293030; }
.button--full { width: 100%; }
.text-link { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; font-size: 14px; font-weight: 500; }
.text-link:hover { color: var(--accent-bright); }
.icon { position: relative; display: inline-block; width: 19px; height: 19px; flex: 0 0 19px; }
.icon::before, .icon::after { position: absolute; content: ""; }
.icon--arrow::before { top: 9px; left: 1px; width: 16px; height: 1.5px; background: currentColor; }
.icon--arrow::after { top: 5px; right: 1px; width: 8px; height: 8px; border-top: 1.5px solid; border-right: 1.5px solid; transform: rotate(45deg); }
.icon--down::before, .icon--up::before { top: 2px; left: 8px; width: 1.5px; height: 13px; background: currentColor; }
.icon--down::after, .icon--up::after { left: 5px; width: 7px; height: 7px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); }
.icon--down::after { bottom: 1px; }
.icon--up::after { top: 1px; transform: rotate(225deg); }
.icon--pin::before { inset: 1px 3px 2px; border: 1.5px solid; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.icon--pin::after { top: 6px; left: 8px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.icon--check::before { top: 4px; left: 2px; width: 14px; height: 8px; border-left: 2px solid; border-bottom: 2px solid; transform: rotate(-45deg); }
.menu-button { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 44px; height: 44px; border: 0; border-radius: var(--radius-control); background: #ffffff12; }
.menu-button span { width: 18px; height: 2px; background: currentColor; }
.menu-button.is-active span:first-child { transform: translateY(6px) rotate(45deg); }
.menu-button.is-active span:nth-child(2) { opacity: 0; }
.menu-button.is-active span:last-child { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { display: none; }

/* Content determines hero height; no viewport-sized empty area below the CTA. */
.hero, .detail-hero, .page-intro { position: relative; isolation: isolate; overflow: visible; background: transparent; }
/* The media wrappers only position the photo. The actual painters are the slider
   images and inner-page images, so the alpha fade lives on those layers rather
   than on a wrapper whose overflow/stacking context can clip it at the seam. */
.hero__media, .detail-hero__media, .page-intro__media { position: absolute; z-index: -3; inset: 0; overflow: visible; background: transparent; pointer-events: none; }
/* Ken Burns enlarges the painter beyond the hero box. Clip only the home
   painter so its visual bleed cannot become document overflow; the image's
   own alpha mask still provides the bottom fade. */
.hero--home .hero__media { overflow: clip; contain: paint; }
.hero__slide, .detail-hero__media img, .page-intro__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,.88) 78%, rgba(0,0,0,.45) 88%, transparent 100%); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,.88) 78%, rgba(0,0,0,.45) 88%, transparent 100%); mask-repeat: no-repeat; mask-size: 100% 100%; mask-mode: alpha; }
.hero__slide { opacity: 0; transition: opacity 900ms cubic-bezier(.4,0,.2,1); }
.hero__slide--active, .hero__slide--ken-burns { z-index: 1; opacity: 1; animation: hero-ken-burns 9s ease-in-out both; }
.hero__slide--leaving { z-index: 1; opacity: 1; }
.hero__slide--entering { z-index: 2; opacity: 0; }
.hero__slide--dissolve { opacity: 1; }
.slider-paused .hero__slide--active { animation-play-state: paused; }
  @keyframes hero-ken-burns { from { transform: scale(1.01); } to { transform: scale(1.035); } }
.hero__veil, .detail-hero__veil, .page-intro__veil { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(5,5,5,.94), rgba(5,5,5,.80) 55%, rgba(5,5,5,.30)); }
/* Home hero: ONE veil instead of three darkening layers. Photo breathes on the right,
   copy sits on the dark left edge. */
.hero--home .hero__veil { background: linear-gradient(90deg, rgba(5,5,5,.72) 0%, rgba(5,5,5,.25) 60%, rgba(5,5,5,0) 100%); }
/* Static vignette above the photo, below the copy (inner pages): grounds the hero into the dark canvas. */
.detail-hero::before, .page-intro::before { position: absolute; z-index: -1; inset: 0; width: auto; height: auto; border: 0; border-radius: 0; background: radial-gradient(130% 110% at 50% 0%, transparent 45%, rgba(0,0,0,.55) 100%); content: ""; pointer-events: none; animation: none; transform: none; }
/* Home hero is a full-viewport poster: photo fills the first screen, copy vertically centered. */
.hero--home { min-height: 100svh; display: flex; flex-direction: column; }
.hero--home .hero__inner { flex: 1 0 auto; align-content: center; padding-bottom: 96px; }
.hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: 36px 64px; padding-top: var(--header-clearance); padding-bottom: 30px; }
.hero__content { min-width: 0; max-width: 740px; }
.hero h1 { font-size: clamp(44px, 4.4vw, 62px); font-weight: 600; letter-spacing: -.02em; line-height: 1.06; margin-bottom: 22px; }
.hero h1 span { display: block; }
.hero__lead { max-width: 34em; margin-bottom: 30px; color: var(--paper); font-size: 22px; line-height: 1.35; }
.hero__actions, .detail-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.hero__project { align-self: end; justify-self: end; width: min(100%, 350px); padding: 12px; border: 1px solid var(--glass-dark-border); border-radius: var(--radius-surface); background: var(--glass-dark-bg-fallback); }
.hero__project img { width: 100%; height: auto; aspect-ratio: 1.8; object-fit: cover; border-radius: var(--radius-card); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero__project { background: rgba(8,9,9,.72); -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); }
  .slider-pause { background: rgba(8,9,9,.55); -webkit-backdrop-filter: blur(12px) saturate(130%); backdrop-filter: blur(12px) saturate(130%); }
}
.hero__project p { margin: 14px 6px 4px; font-size: 15px; }
.hero__project span { display: block; margin: 0 6px 5px; color: var(--muted); font-size: 12px; }
.hero__meta { position: absolute; right: var(--gutter); bottom: 24px; display: flex; align-items: center; gap: 20px; padding: 8px 14px; border-radius: var(--radius-control); background: rgba(5,5,5,.78); font-size: 12px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero__location { display: flex; align-items: center; gap: 12px; color: var(--paper-2); font-size: 12px; line-height: 1.4; }
.hero__location .icon { color: var(--accent); }
.hero__slider-controls { display: flex; gap: 8px; align-items: center; }
.slider-dot { position: relative; width: 32px; height: 28px; padding: 0; border: 0; background: transparent; }
.slider-dot::after { position: absolute; inset: 12px 0; background: #ffffff66; content: ""; }
.slider-dot.is-active::after { background: var(--accent); }
.slider-pause { min-height: 32px; padding: 4px 8px; border: 1px solid var(--line); background: #08090988; color: var(--paper-2); font-size: 11px; }
.hero__scroll { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--paper-2); }
.hero__scroll .icon { color: var(--accent); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--accent-bright); font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow__line { flex: 0 0 28px; height: 2px; background: currentColor; }
.section-heading { max-width: 740px; }
.section-heading__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 18px; }
.section-number { flex: none; margin-left: auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
/* Signature glyph before the number (injected by app.js). */
.section-number__mark { display: inline-block; width: 10px; height: 10px; margin-right: 8px; object-fit: contain; opacity: .8; vertical-align: -1px; }
.section-heading > p:last-child { max-width: 580px; margin-bottom: 0; color: var(--paper); font-size: 21px; line-height: 1.45; overflow-wrap: break-word; }
/* Section numbers bind to the right edge of the content grid: the heading simply
   spans the full frame width (title/description stay left, number goes right via
   margin-left:auto). Pages whose headings live inside two-column layouts
   (about, contacts) keep the compact heading. */
@media (min-width: 901px) {
  body[data-page="home"] .section-heading,
  body[data-page="metal"] .section-heading,
  body[data-page="finish"] .section-heading,
  body[data-page="portfolio"] .section-heading { max-width: none; }
}
.detail-hero__inner, .page-intro__inner { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 40px; padding-top: var(--header-clearance); padding-bottom: 52px; }
.detail-hero__copy, .page-intro__copy { min-width: 0; max-width: 780px; }
.detail-hero__copy > p:not(.eyebrow), .page-intro__copy > p:not(.eyebrow) { max-width: 580px; color: var(--paper-2); font-size: 17px; margin-bottom: 24px; }
.detail-hero__aside { flex: none; padding: 22px; border-left: 1px solid var(--line); min-width: 170px; }
.detail-hero__aside > span:first-child { font-size: 46px; line-height: 1.2; color: var(--accent-bright); }
.detail-hero__aside p { margin: 12px 0 0; font-size: 13px; color: var(--paper-2); }
.detail-hero__aside-line { display: block; width: 44px; height: 1px; margin-top: 24px; background: var(--accent); }
/* Ghost mark ("КС / WORKS", "2018 / — NOW") is hidden on the dark canvas. */
.page-intro__mark { display: none; }
.ticker { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; contain: paint layout; background: linear-gradient(180deg, rgba(18,22,22,0), rgba(18,22,22,.65) 30%, rgba(18,22,22,.65) 70%, rgba(18,22,22,0)); color: var(--paper-2); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker--after-hero { margin-block-start: clamp(20px, 3vw, 44px); }
.ticker b { font-size: 16px; font-weight: 400; color: var(--accent-bright); }
/* Signature glyph separator (replaces the ✳ characters in the ticker). */
.ticker__mark { flex: 0 0 auto; height: 14px; width: auto; margin: 0 2px; opacity: .8; }
.ticker__track { display: flex; align-items: center; width: max-content; max-width: 100%; min-width: 0; min-height: 48px; }
.ticker span { padding: 0 20px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.stats-bar { background: transparent; }
.stats-bar.section-pad { padding-block: 56px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.stat-item { display: flex; align-items: center; gap: 18px; padding-left: 22px; border-left: 1px solid var(--line-soft); }
.stat-item:first-child { border-left: 0; padding-left: 0; }
.stat-item__number { color: var(--accent-bright); font-size: clamp(28px, 3vw, 42px); line-height: 1.2; font-weight: 500; }
.stat-item__label { margin: 0; font-size: 13px; line-height: 1.5; color: var(--paper-2); }

/* Directions, process and existing project photographs. */
.hub .section-heading { display: grid; grid-template-columns: 1fr 1fr; max-width: none; align-items: end; gap: 8px 40px; }
.hub .section-heading__top { grid-column: 1 / -1; }
.hub .section-heading h2 { margin-bottom: 0; }
.direction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
 .direction-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); border: 1px solid var(--surface-border); background: linear-gradient(145deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.025) 42%, transparent 70%), var(--surface-card); color: var(--paper); border-radius: var(--surface-radius); overflow: hidden; box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.30), inset 0 1px 0 var(--surface-highlight); }
.direction-card__image { min-height: 260px; overflow: hidden; }
.direction-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.direction-card:hover img { transform: scale(1.045); }
/* Volume on the dark canvas comes from a 1px border + top glare, not shadows. Lift uses
   the independent `translate` property so it never fights GSAP's inline `transform`. */
.direction-card, .service-card, .work-card, .project, .cycle-card, .service-note, .finish-panel, .lead-form { transition: translate var(--lift-duration) var(--ease-depth), border-color var(--lift-duration) var(--ease-depth); }
.stats-grid .stat-item, .contact-facts > div, .about-stats .about-stat, .finish-intro__facts > span { transition: translate var(--lift-duration) var(--ease-depth), border-color var(--lift-duration) var(--ease-depth); }
.direction-card, .service-card, .work-card, .cycle-card, .lead-form, .finish-panel, .service-note { position: relative; isolation: isolate; }
.direction-card::before, .service-card::before, .work-card::before, .cycle-card::before, .lead-form::before, .finish-panel::before, .service-note::before { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: linear-gradient(150deg, rgba(255,255,255,.07), transparent 36%); content: ""; pointer-events: none; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .direction-card, .work-card, .cycle-card, .finish-panel, .about-stat, .finish-intro__facts, .lead-form { -webkit-backdrop-filter: blur(8px) saturate(1.08); backdrop-filter: blur(8px) saturate(1.08); }
}
.direction-card__body { padding: 26px; min-width: 0; }
.direction-card__number { color: var(--accent-bright); font-size: 13px; }
.direction-card h3 { margin: 18px 0 14px; font-size: clamp(22px, 1.8vw, 28px); }
.direction-card p { font-size: 15px; color: var(--muted-strong); }
.direction-card .text-link { color: var(--accent-bright); font-size: 13px; }
/* Manifest section: one giant statement, no cards. Old copy stays as a muted footnote. */
.statement { padding-block: clamp(160px, 16vw, 200px); }
.statement__headline { margin: 0 0 44px; color: var(--paper); font-size: clamp(56px, 7vw, 96px); font-weight: 600; line-height: 1.02; letter-spacing: -.02em; }
.statement__note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 48px; }
.statement__note p { flex: 1 1 380px; margin: 0; max-width: 34em; color: var(--muted); font-size: 16px; line-height: 1.6; }
.process-line { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 30px; border-top: 1px solid var(--line-soft); }
.process-line__item { padding: 24px 24px 0; border-left: 1px solid var(--line-soft); }
.process-line__item:first-child { border-left: 0; padding-left: 0; }
.process-line__item b { display: block; margin-bottom: 20px; font-size: 15px; font-weight: 500; color: var(--accent-bright); }
.process-line__item h3 { font-size: 23px; }
.process-line__item p { color: var(--muted-strong); font-size: 15px; margin-bottom: 0; }

/* Giant number: the only figure on the page that is allowed to shout. */
.bignum { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px clamp(40px, 6vw, 96px); }
.bignum__value { display: flex; align-items: baseline; margin: 0; color: var(--accent-bright); font-family: var(--display); font-size: clamp(120px, 14vw, 200px); font-weight: 600; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.bignum__text { display: grid; gap: 10px; max-width: 460px; }
.bignum__text p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; }

/* Full-bleed photo showcase: the laser-cut panel is the brand asset, the caption
   carries the type. Reveal is only on the caption, never on the media. */
.showcase { position: relative; isolation: isolate; height: 80vh; min-height: 480px; overflow: hidden; }
.showcase__media { position: absolute; z-index: 0; inset: 0; }
.showcase__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.03); }
.showcase::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(5,5,5,0) 40%, rgba(5,5,5,.85) 100%); content: ""; pointer-events: none; }
.showcase__caption { position: absolute; z-index: 2; right: 0; bottom: clamp(32px, 6vh, 64px); left: 0; }
.showcase__title { max-width: 900px; margin: 0 0 22px; color: var(--paper); font-family: var(--display); font-size: clamp(40px, 5.5vw, 72px); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; overflow-wrap: break-word; }
/* Wide CTA: dark section with a warm light behind the heading. The ::before glow is owned
   by the section (isolation keeps z-index -1 local), masked vertically so it never bleeds
   into neighbours; no overflow clipping so the section keeps its natural geometry. */
.wide-cta { position: relative; isolation: isolate; background: transparent; color: var(--paper); }
.wide-cta::before { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse 1000px 800px at 25% 50%, rgba(183,67,0,.08) 0%, rgba(183,67,0,.03) 42%, rgba(183,67,0,0) 100%); content: ""; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }
.wide-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; }
.wide-cta .eyebrow { color: var(--accent-bright); }
.wide-cta h2 { margin-bottom: 0; }
.wide-cta h2 em { color: var(--accent-bright); }
.wide-cta .button--light { background: var(--paper); color: var(--accent); }
.wide-cta .button--light:hover { background: var(--accent-bright); color: var(--ink); }
.projects-preview__heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.projects-preview__heading h2 { margin-bottom: 0; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
 .work-card { margin: 0; border: 1px solid var(--surface-border); border-radius: var(--surface-radius); overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.025) 42%, transparent 70%), var(--surface-card); color: var(--paper); box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.30), inset 0 1px 0 var(--surface-highlight); }
.work-card__image { display: block; overflow: hidden; }
.work-card img { width: 100%; height: auto; aspect-ratio: 1.45; object-fit: cover; transition: transform .6s var(--ease); }
.work-card a:hover img { transform: scale(1.04); }
.work-card figcaption { padding: 18px 20px; }
.work-card h3 { font-size: 22px; margin-bottom: 8px; color: var(--paper); }
.work-card p { font-size: 15px; color: var(--muted-strong); margin: 0; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 300px; gap: 18px; margin-top: 32px; }
.project { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-card); background: var(--ink-2); }
.project img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.project:hover img { transform: scale(1.04); }
.project--feature { grid-column: span 2; grid-row: span 2; }
.portfolio-grid .project--wide { grid-column: span 2; }
.project::after { position: absolute; inset: 30% 0 0; background: linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,.82) 55%, rgba(5,5,5,.98) 100%); content: ""; pointer-events: none; }
.project figcaption { position: absolute; z-index: 1; right: 20px; bottom: 20px; left: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px; }
.project figcaption span { grid-row: span 2; color: var(--paper); font-size: 14px; }
.project figcaption strong { color: var(--paper); font-size: 24px; line-height: 1.2; font-weight: 500; }
.project figcaption small { color: var(--paper-2); font-size: 12px; }

/* Catalogs keep text and images in normal flow. */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 28px 0 24px; }
.filter-button, .finish-tab { min-height: 42px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius-control); background: transparent; color: var(--paper-2); font-size: 13px; line-height: 1.4; }
.filter-button.is-active, .filter-button:hover, .finish-tab.is-active, .finish-tab:hover { border-color: var(--accent); background: var(--accent); color: var(--paper); }
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
 .service-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--surface-border); border-radius: var(--surface-radius); background: linear-gradient(145deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.025) 42%, transparent 70%), var(--surface-card); box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.30), inset 0 1px 0 var(--surface-highlight); }
.service-card__image { aspect-ratio: 1.65; overflow: hidden; }
.service-card__image img { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { padding: 22px 22px 0; }
.service-card__number { color: var(--accent-bright); font-size: 12px; }
.service-card h3 { margin: 14px 0 12px; font-size: 22px; line-height: 1.25; }
.service-card p { color: var(--muted-strong); font-size: 15px; margin: 0 0 22px; }
.service-card__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 18px 22px; border-top: 1px solid var(--line); }
.service-card__price { flex: 1 1 140px; color: var(--accent-bright); font-size: 13px; line-height: 1.5; }
/* Quiet hover link: hidden-ish by default, appears on card hover/focus. */
.service-card__open { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0; border: 0; background: none; font-size: 13px; opacity: .35; transition: opacity .25s var(--ease), color .25s var(--ease); }
.service-card__open .icon--arrow { transition: transform .25s var(--ease); }
.service-card:hover .service-card__open, .service-card:focus-within .service-card__open { opacity: 1; }
.service-card:hover .service-card__open .icon--arrow { transform: translateX(4px); }
.service-card__open:hover { color: var(--accent-bright); }
 .service-note { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 22px; margin-top: 28px; padding: 26px; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-card); background: linear-gradient(145deg, rgba(255,255,255,.055), transparent 40%), linear-gradient(180deg, rgba(255,120,45,.03), transparent 45%), rgba(18,22,22,.76); }
.service-note__icon { color: var(--accent-bright); text-align: center; }
.service-note strong { display: block; font-size: 21px; line-height: 1.3; font-weight: 600; margin-bottom: 8px; overflow-wrap: break-word; }
.service-note p { margin: 0; color: var(--muted-strong); font-size: 15px; }
.finish-intro__grid, .about-page__grid, .contact-band__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 40px; }
.finish-intro__copy, .about-page__copy, .contact-band__details { color: var(--muted); }
 .finish-intro__facts { display: flex; gap: 32px; padding: 20px 18px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-card); background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 55%), rgba(18,22,22,.76); }
.finish-intro__facts span { display: grid; gap: 6px; padding-bottom: 6px; font-size: 12px; color: var(--muted); }
.finish-intro__facts b { font-size: 28px; font-weight: 500; color: var(--accent-bright); }
.finish-tabs { display: flex; gap: 8px; margin: 28px 0 16px; max-width: 100%; overflow: auto; padding-bottom: 6px; }
.finish-tab { flex: none; }
 .finish-panel { border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-card); background: linear-gradient(145deg, rgba(255,255,255,.05), transparent 40%), linear-gradient(180deg, rgba(255,120,45,.03), transparent 45%), rgba(18,22,22,.76); }
.finish-panel__top { display: flex; align-items: start; justify-content: space-between; gap: 22px; padding: 24px; border-bottom: 1px solid var(--line); }
.finish-panel__top > div { min-width: 0; }
.finish-panel__top p { margin: 0; color: var(--muted); font-size: 14px; }
.finish-panel__top > span { flex: none; font-size: 12px; color: var(--accent-bright); }
.finish-table-wrap { max-height: min(640px, 72svh); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.finish-table { width: max(100%, 680px); border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.finish-table th, .finish-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.finish-table thead th { position: sticky; top: 0; z-index: 1; background: var(--ink-3); color: var(--paper-2); font-size: 12px; font-weight: 500; }
.finish-table thead th:first-child { width: 64%; }
.finish-table thead th:nth-child(2) { width: 12%; }
.finish-table tbody td:last-child { color: var(--accent-bright); }
.finish-row__open { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.finish-row__open:hover { text-decoration: underline; text-underline-offset: 3px; }
.finish-table__group th { color: var(--accent-bright); font-size: 15px; font-weight: 500; }

/* Company, contact and legal content. */
.about-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
 .about-stat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-card); padding: 18px; background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 55%), rgba(18,22,22,.76); }
.about-stat strong { font-size: 34px; font-weight: 600; color: var(--accent-bright); overflow-wrap: break-word; }
.about-stat span { color: var(--muted); font-size: 13px; }
.cycle-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
 .cycle-card { padding: 24px; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-card); background: linear-gradient(145deg, rgba(255,255,255,.065), transparent 34%), linear-gradient(180deg, rgba(255,120,45,.035), transparent 42%), rgba(18,22,22,.76); }
.cycle-card > span { color: var(--accent-bright); font-size: 14px; }
.cycle-card h3 { margin-top: 28px; font-size: 24px; }
.cycle-card p { color: var(--muted-strong); font-size: 15px; margin: 0; }
.about-gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.about-gallery__grid img { width: 100%; height: 250px; object-fit: cover; }
.about-gallery__grid img, .project img, .work-card img { filter: saturate(.9) contrast(1.03); }
.contact-page.section-pad, .legal-page.section-pad { padding-top: var(--header-clearance); }
.contact-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(30px, 5vw, 80px); }
.contact-page h1 { margin-bottom: 24px; }
.contact-phone { display: inline-flex; gap: 12px; align-items: center; margin-top: 24px; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.4; }
.contact-phone .icon { color: var(--accent-bright); }
.contact-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.contact-facts__label { font-size: 12px; color: var(--accent-bright); }
.contact-facts p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.contact-facts a { text-decoration: underline; }
.contact-band h2 { margin-bottom: 0; }
.contact-band__details p:last-child { margin-bottom: 0; }
.lead-form { padding: clamp(22px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--radius-card); background: linear-gradient(145deg, rgba(255,255,255,.05), transparent 40%), linear-gradient(180deg, rgba(255,120,45,.03), transparent 45%), rgba(18,22,22,.86); color: var(--paper); }
.lead-form__top { display: flex; gap: 16px; align-items: baseline; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.lead-form__top span { color: var(--accent-bright); font-size: 13px; }
.lead-form__top p { min-width: 0; margin: 0; font-size: 24px; line-height: 1.3; overflow-wrap: break-word; }
.lead-form label:not(.consent) { display: block; margin-bottom: 18px; color: var(--paper-2); font-size: 13px; }
.lead-form input:not([type="checkbox"]), .lead-form select, .lead-form textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--paper); font-size: 16px; }
.lead-form textarea { min-height: 80px; resize: vertical; }
.lead-form select option { background: var(--ink-2); }
.lead-form input::placeholder, .lead-form textarea::placeholder { color: #959d96; }
.lead-form input:focus, .lead-form textarea:focus, .lead-form select:focus { border-bottom-color: var(--accent); }
.consent { display: flex; align-items: start; gap: 10px; margin: 22px 0; font-size: 12px; color: var(--muted); }
.consent input { width: 18px; height: 18px; flex: none; margin: 2px 0 0; accent-color: var(--accent); }
.consent__box { display: none; }
.consent a { color: var(--paper); text-decoration: underline; }
.form-status { min-height: 20px; margin: 14px 0 0; font-size: 13px; color: var(--accent-bright); }
.legal-page__inner { max-width: 1100px; }
.legal-page h1 { font-size: clamp(28px, 3.2vw, 44px); overflow-wrap: anywhere; }
.legal-copy { max-width: 780px; margin-top: 30px; color: var(--muted); overflow-wrap: break-word; }
.legal-copy h2 { font-size: 26px; margin-top: 30px; color: var(--paper); }
.legal-copy a { color: var(--accent-bright); }

/* Modal stays above navigation and has its own scroll region. */
.service-modal { position: fixed; z-index: 900; inset: 0; display: grid; place-items: center; padding: 24px; }
.service-modal__backdrop { position: absolute; inset: 0; background: #040505db; }
.service-modal__dialog { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); width: min(860px, 100%); max-height: calc(100svh - 48px); overflow: auto; overscroll-behavior: contain; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-surface); box-shadow: var(--shadow-dark-4); }
.service-modal__media { background: var(--ink); }
.service-modal__image { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.service-modal__content { padding: 36px; min-width: 0; }
.service-modal__close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--ink); }
.service-modal__close::before, .service-modal__close::after { position: absolute; top: 19px; left: 11px; width: 18px; height: 2px; background: var(--paper); content: ""; transform: rotate(45deg); }
.service-modal__close::after { transform: rotate(-45deg); }
.service-modal__eyebrow { padding-right: 24px; color: var(--accent-bright); font-size: 12px; }
.service-modal__title { padding-right: 16px; font-size: 30px; }
.service-modal__description { color: var(--muted); font-size: 15px; }
.service-modal__facts { margin: 24px 0; padding-block: 18px; border-block: 1px solid var(--line); }
.service-modal__facts span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.service-modal__price { color: var(--accent-bright); font-size: 17px; line-height: 1.4; font-weight: 500; }
.service-modal__unit { color: var(--muted); font-size: 13px; margin: 12px 0 0; }
.site-footer { position: relative; padding: 48px 0 26px; background: transparent; }
/* Signature glyph watermark: same bracket, ghosted into the corner. */
.site-footer__mark { position: absolute; top: 44px; right: var(--gutter); width: 120px; height: 120px; object-fit: contain; opacity: .06; pointer-events: none; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; }
.brand--footer { margin-bottom: 18px; }
.footer-tagline { max-width: 280px; color: var(--muted); font-size: 14px; }
.footer-column { display: flex; flex-direction: column; align-items: start; gap: 10px; font-size: 13px; color: var(--muted); }
.footer-column p { margin-bottom: 0; }
.footer-column .footer-label { margin-bottom: 6px; color: var(--accent-bright); }
.footer-column a:hover { color: var(--paper); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); }
.footer-bottom a { text-decoration: underline; }
.floating-actions { position: fixed; z-index: 300; right: 20px; bottom: 20px; display: flex; gap: 8px; transition: opacity .25s var(--ease), visibility .25s var(--ease); }
/* Hidden (and inert, via app.js) while the site footer is on screen so it never
   overlaps the footer content or the privacy links. */
.floating-actions.is-near-footer { visibility: hidden; opacity: 0; pointer-events: none; }
.floating-actions__request { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 16px; background: var(--accent); color: var(--paper); border-radius: var(--radius-control); font-size: 13px; }
.floating-actions__top { display: none; place-items: center; width: 46px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--ink-2); }
.floating-actions__top.is-visible { display: grid; }

/* The floating "Рассчитать стоимость" CTA must never overlap an open mobile menu
   or duplicate the contacts form. Scoping via data-page (present on every <body>)
   avoids :has() and needs no HTML edits. */
body.menu-open .floating-actions,
body[data-page="contacts"] .floating-actions { display: none; }

/* Reveal visibility is owned by JS only while a short animation is running.
   A failed CDN request must never leave content hidden. */
.reveal { opacity: 1; }

/* Shared content surfaces: depth belongs to cards, never to the frozen desktop header. */
.direction-card, .service-card, .work-card, .cycle-card, .service-note, .finish-panel, .about-stat, .finish-intro__facts, .lead-form {
  border: 1px solid var(--surface-border);
  border-radius: var(--surface-radius);
  background: linear-gradient(145deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.025) 42%, transparent 70%), var(--surface-card);
  box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.30), inset 0 1px 0 var(--surface-highlight);
}
.service-card { border-radius: var(--surface-radius); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .direction-card, .work-card, .cycle-card, .finish-panel, .about-stat, .finish-intro__facts, .lead-form {
    -webkit-backdrop-filter: blur(8px) saturate(1.08);
    backdrop-filter: blur(8px) saturate(1.08);
  }
}

@media (min-width: 901px) {
  /* Desktop has the header CTA and the wide-cta band; the floating pill is mobile-only. */
  .floating-actions { display: none; }
}

@media (max-width: 1200px) {
  .header-phone { display: none; }
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .direction-card { grid-template-columns: 1fr; }
  .direction-card__image { min-height: 0; height: 220px; }
  .stat-item { flex-direction: column; align-items: start; gap: 6px; }
}
@media (max-width: 900px) {
  :root { --header-clearance: 110px; }
  .hero__slide, .detail-hero__media img, .page-intro__media img { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0,0,0,.88) 84%, rgba(0,0,0,.45) 92%, transparent 100%); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0,0,0,.88) 84%, rgba(0,0,0,.45) 92%, transparent 100%); mask-repeat: no-repeat; mask-size: 100% 100%; mask-mode: alpha; }
  .site-header { top: 10px; width: calc(100% - 24px); }
  .header-shell { min-height: 60px; padding: 8px 12px; }
  .brand img { width: 36px; height: 36px; }
  .desktop-nav, .header-actions > .button { display: none; }
   .menu-button { display: flex; border-radius: 999px; }
       .mobile-menu { position: fixed; z-index: 800; inset: 0; display: block; min-height: 100vh; min-height: 100dvh; overflow: auto; overscroll-behavior: contain; margin: 0; padding: max(28px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-left)) max(28px, env(safe-area-inset-bottom)); background: #101313; border: 1px solid rgba(241,240,235,.12); border-radius: 24px; box-shadow: 0 20px 48px rgba(0,0,0,.45), 0 0 36px rgba(166,77,36,.18); opacity: 0; transform: translateY(16px); transition: opacity 280ms cubic-bezier(.22,1,.36,1), transform 280ms cubic-bezier(.22,1,.36,1); }
      .mobile-menu.is-open { opacity: 1; transform: translateY(0); }
      .mobile-menu__close { display: grid; position: relative; z-index: 1; width: 48px; height: 48px; min-width: 48px; min-height: 48px; margin: 0 0 24px auto; place-items: center; border: 1px solid rgba(241,240,235,.2); border-radius: 999px; background: rgba(255,255,255,.08); color: var(--paper); }
      .mobile-menu__close span { position: absolute; width: 20px; height: 2px; background: currentColor; }
      .mobile-menu__close span:first-child { transform: rotate(45deg); } .mobile-menu__close span:last-child { transform: rotate(-45deg); }
  .mobile-menu nav { display: flex; flex-direction: column; }
    .mobile-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: clamp(22px,5.8vw,32px); line-height: 1.2; opacity: 0; transform: translateY(10px); transition: opacity 280ms cubic-bezier(.22,1,.36,1), transform 280ms cubic-bezier(.22,1,.36,1), color .25s var(--ease); }
    .mobile-menu.is-open a { opacity: 1; transform: translateY(0); }
    .mobile-menu:not([hidden]) a:nth-child(2) { transition-delay: 40ms; } .mobile-menu:not([hidden]) a:nth-child(3) { transition-delay: 70ms; } .mobile-menu:not([hidden]) a:nth-child(4) { transition-delay: 100ms; } .mobile-menu:not([hidden]) a:nth-child(5) { transition-delay: 130ms; }
   .mobile-menu a:hover, .mobile-menu a:focus-visible { background: rgba(255,120,45,.08); color: var(--accent-bright); }
   .mobile-menu a span { color: var(--accent-bright); font-size: 12px; }
   .mobile-menu p { margin: 20px 0 0; font-size: 13px; color: var(--muted); }
   .mobile-menu__contact { margin-top: 18px; padding-bottom: env(safe-area-inset-bottom); }
   .mobile-menu__contact a { min-height: 48px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
   .mobile-menu__contact a:last-child { border-bottom: 0; }
   .mobile-menu__contact-phone { color: var(--paper); }
   .mobile-menu__contact-phone span { margin-left: auto; color: var(--muted); font-size: 13px; }
   .mobile-menu__contact a[href*="wa.me"] { color: #8fd3a1; }
   .mobile-menu__contact a[href*="t.me"] { color: #85b9e8; }
   .mobile-menu__contact .mobile-menu__contact-cta { justify-content: center; margin-top: 12px; border: 1px solid var(--accent); border-radius: var(--radius-control); background: var(--accent); color: var(--paper); }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      .mobile-menu { background: rgba(16,19,19,.96); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); }
  }
  .hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .hero__project { display: none; }
  .hero__content { max-width: 600px; }
  .hero h1 { font-size: clamp(36px, 10vw, 48px); }
  .detail-hero__veil, .page-intro__veil { background: linear-gradient(90deg, rgba(5,5,5,.94), rgba(5,5,5,.82)); }
  .hero--home .hero__veil { background: linear-gradient(90deg, rgba(5,5,5,.88) 0%, rgba(5,5,5,.74) 100%); }
  .detail-hero__aside { display: none; }
  .hero__scroll { display: none; }
  .hero--home .hero__inner { padding-bottom: 128px; }
  .hero__meta { left: var(--gutter); right: var(--gutter); justify-content: flex-end; flex-wrap: wrap; gap: 12px 16px; bottom: 18px; }
  .hub .section-heading, .finish-intro__grid, .about-page__grid, .contact-band__grid, .contact-layout { grid-template-columns: 1fr; gap: 24px; }
  .hub .section-heading__top { grid-column: auto; }
  .bignum { grid-template-columns: 1fr; gap: 28px; }
  .statement { padding-block: clamp(120px, 18vw, 160px); }
  .showcase { height: 64vh; min-height: 420px; }
  .service-grid, .cycle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-line { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .process-line__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .service-note { grid-template-columns: 32px minmax(0, 1fr); }
  .service-note .button { grid-column: 2; justify-self: start; }
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 260px; }
  .portfolio-grid .project--feature { grid-row: auto; }
  .work-grid { gap: 14px; }
  .work-card figcaption { padding: 16px; }
  .work-card h3 { font-size: 20px; }
  .about-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wide-cta__inner { grid-template-columns: 1fr; gap: 24px; }
  .wide-cta__inner > .button { justify-self: start; }
  .contact-facts { margin-bottom: 16px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 580px) {
  :root { --gutter: 20px; --section-space: 44px; --header-clearance: 104px; }
  h1 { font-size: clamp(30px, 8.4vw, 42px); }
  h2 { font-size: clamp(28px, 7.5vw, 36px); }
  .hero h1 { font-size: clamp(36px, 10vw, 48px); }
  .hero__lead, .detail-hero__copy > p:not(.eyebrow), .page-intro__copy > p:not(.eyebrow) { font-size: 16px; }
  .hero__actions, .detail-hero__actions { align-items: start; flex-direction: column; gap: 16px; }
  .hero__inner { padding-bottom: 24px; }
  .hero__meta { gap: 16px; flex-wrap: wrap; }
  .hero__slider-controls { gap: 6px; }
  .slider-dot { width: 24px; }
  .hero__location { font-size: 11px; }
  .detail-hero__inner, .page-intro__inner { padding-bottom: 32px; }
  .eyebrow { font-size: 11px; letter-spacing: .12em; }
  .eyebrow__line { flex-basis: 20px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
  .stat-item { padding-left: 18px; }
  .stat-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat-item:nth-child(2n) { padding-right: 56px; }
  .stat-item__number { font-size: 30px; }
  .stat-item__label { font-size: 12px; }
  .direction-grid, .work-grid, .service-grid, .cycle-grid { grid-template-columns: 1fr; }
  .direction-card__image { height: 190px; }
  .direction-card__body { padding: 22px; }
  .direction-card h3 { margin-top: 12px; }
  .projects-preview__heading { flex-direction: column; align-items: start; gap: 18px; }
  .process-line__item { padding: 20px 16px 0; }
  .process-line__item h3 { font-size: 19px; }
  .process-line__item p { font-size: 13px; }
  .process-line__item b { margin-bottom: 14px; }
  .service-note { grid-template-columns: minmax(0, 1fr); padding: 22px; gap: 16px; }
  .service-note__icon { display: none; }
  .service-note .button { grid-column: auto; }
  .finish-intro__facts { flex-wrap: wrap; gap: 16px; padding-inline: 12px; }
  .finish-panel__top { flex-direction: column; padding: 18px; gap: 12px; }
  .finish-panel__top h4 { font-size: 22px; }
  .finish-table { font-size: 14px; }
  .finish-table th, .finish-table td { padding: 12px 8px; }
  .finish-table thead th { font-size: 11px; }
  .finish-table thead th:first-child { width: 58%; }
  .finish-table thead th:nth-child(2) { width: 14%; }
  .portfolio-grid { grid-template-columns: 1fr; grid-auto-rows: 270px; }
  .portfolio-grid .project--feature, .portfolio-grid .project--wide { grid-column: auto; }
  .project figcaption strong { font-size: 22px; }
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-stat strong { font-size: 28px; }
  .about-gallery__grid { gap: 12px; }
  .about-gallery__grid img { height: 180px; }
  .contact-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .contact-facts > :last-child { grid-column: 1 / -1; }
  .lead-form__top p { font-size: 22px; }
  .legal-page h1 { font-size: clamp(25px, 6.8vw, 34px); }
  .legal-copy h2 { font-size: 23px; }
  .service-modal { padding: 12px; }
  .service-modal__dialog { display: block; max-height: calc(100svh - 24px); }
  .service-modal__image { min-height: 0; height: 180px; }
  .service-modal__content { padding: 24px; }
  .service-modal__title { font-size: 26px; }
  .footer-grid { gap: 24px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-column { font-size: 12px; }
  .footer-bottom { flex-direction: column; gap: 10px; }
  .site-footer { padding-bottom: 96px; }
  .floating-actions { right: max(12px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); }
  .floating-actions__request { font-size: 11px; min-height: 40px; padding: 8px 13px; }
  .floating-actions__top { width: 40px; min-height: 40px; }
  .mobile-menu { padding: 18px 20px 28px; }
   .mobile-menu a { padding: 16px 0; }
  .direction-grid, .service-grid, .cycle-grid, .work-grid { gap: 22px; }
  .statement { padding-block: 104px; }
  .statement__headline { font-size: clamp(40px, 11vw, 56px); }
  .bignum__value { font-size: clamp(96px, 26vw, 120px); }
  .site-footer__mark { width: 72px; height: 72px; }
}
@media (max-width: 900px) {
  .ambient-lights::before { opacity: .52; animation-duration: 76s; }
  .ambient-lights::after { opacity: .56; animation-duration: 88s; }
  .hero__slide { transition-duration: 700ms; }
  .hero__slide--active, .hero__slide--ken-burns { animation-name: hero-ken-burns-mobile; }
}
@keyframes hero-ken-burns-mobile { from { transform: scale(1.005); } to { transform: scale(1.02); } }

@media (min-width: 901px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
 .direction-card, .service-card, .work-card { perspective: 1200px; transform: translate(var(--card-tx, 0), var(--card-ty, 0)) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg)); transition: translate var(--lift-duration) var(--ease-depth), border-color var(--lift-duration) var(--ease-depth); transform-style: preserve-3d; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-lights::before, .ambient-lights::after { animation: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* The industrial field remains fully static when motion is reduced. */
 .hero__slide--active, .hero__slide--ken-burns { animation: none !important; transform: none !important; }
  .ticker__track { width: 100%; flex-wrap: wrap; justify-content: center; }
  .ticker span { white-space: normal; padding: 8px 12px; font-size: 13px; }
  .ticker__track > [aria-hidden="true"] { display: none; }
  /* Static ticker reads edge-to-edge: no side fade. */
  .ticker { -webkit-mask-image: none; mask-image: none; }
   .detail-hero::before, .page-intro::before { animation: none; }
  .direction-card, .service-card, .work-card, .project, .cycle-card, .service-note, .finish-panel, .lead-form,
  .stats-grid .stat-item, .contact-facts > div, .about-stats .about-stat, .finish-intro__facts > span,
  .button:hover, .site-header .brand:hover { transform: none !important; translate: none !important; }
  .direction-card:hover img, .work-card a:hover img, .project:hover img { transform: none !important; }
  /* Hover must not lift instantly when motion is reduced. */
  .direction-card:hover, .service-card:hover, .cycle-card:hover, .service-note:hover, .finish-panel:hover, .lead-form:hover,
  .work-card:hover, .project:hover { translate: none !important; }
}
.button, .filter-button, .finish-tab, .service-card__open, .floating-actions__request { transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.filter-button:active, .finish-tab:active, .floating-actions__request:active { transform: translateY(1px); }
.button:active { transform: translateY(0); }

/* Hover elevation is pointer-only: touch devices keep a flat, stable layout. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .direction-card:hover, .service-card:hover, .cycle-card:hover, .service-note:hover, .finish-panel:hover, .lead-form:hover { translate: 0 -6px; border-color: rgba(255,120,45,.35); }
  .work-card:hover, .project:hover { translate: 0 -5px; border-color: rgba(255,120,45,.35); }
  .stats-grid .stat-item:hover, .contact-facts > div:hover, .about-stats .about-stat:hover, .finish-intro__facts > span:hover { translate: 0 -3px; }
  .header-actions .button--light:hover { transform: translateY(-3px); }
  .header-actions .button--light:active { transform: translateY(0); }
  .site-header .brand:hover { transform: translateY(-2px) rotate(-2deg); }
  .site-header .brand:hover img { filter: drop-shadow(0 10px 16px rgba(255,120,45,.4)); }
}
@media (hover: none), (pointer: coarse) {
  .direction-card:hover, .service-card:hover, .work-card:hover, .project:hover, .cycle-card:hover, .service-note:hover, .finish-panel:hover, .lead-form:hover,
  .stats-grid .stat-item:hover, .contact-facts > div:hover, .about-stats .about-stat:hover, .finish-intro__facts > span:hover,
  .button:hover, .site-header .brand:hover { transform: none; translate: none; }
  .direction-card:hover img, .work-card a:hover img, .project:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
     .direction-card, .work-card, .cycle-card, .finish-panel, .about-stat, .finish-intro__facts, .lead-form { -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
}