/* ==========================================================================
   ТРИУМФ — shell
   Nav, footer, hero stage, and the section components shared across pages.
   ========================================================================== */

/* ---------- Nav: one line at desktop, 68px tall ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:68px;
  display:flex; align-items:center;
  transition:background var(--mid) var(--ease), border-color var(--mid) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(10,11,12,0.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav-in{
  width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter);
  /* On a notched phone in landscape the fixed nav would otherwise sit under
     the sensor housing; env() is 0 anywhere without a cutout, so this is a
     no-op on the vast majority of visits. */
  padding-left:max(var(--gutter), env(safe-area-inset-left));
  padding-right:max(var(--gutter), env(safe-area-inset-right));
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
}
.mark{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-display);
  font-weight:700; font-size:0.98rem; letter-spacing:0.01em;
}
.mark svg{ width:19px; height:22px; flex:none; }
.nav-links{ display:flex; align-items:center; gap:30px; font-size:0.92rem; color:var(--fg-muted); }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--fg); }
.nav-right{ display:flex; align-items:center; gap:14px; }

.burger{
  display:none; width:42px; height:42px; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); border-radius:var(--r-pill);
  flex:none;
}
@media (hover: none) and (pointer: coarse){
  .burger{ width:44px; height:44px; }
}
.burger i{ display:block; width:16px; height:1.5px; background:var(--fg); transition:transform var(--fast) var(--ease); }
.burger i + i{ margin-top:5px; }
body.menu-open .burger i:first-child{ transform:translateY(3.25px) rotate(45deg); }
body.menu-open .burger i:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.sheet{
  position:fixed; inset:0; z-index:55;
  background:var(--bg);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--s6) var(--gutter) var(--s4);
  padding-left:max(var(--gutter), env(safe-area-inset-left));
  padding-right:max(var(--gutter), env(safe-area-inset-right));
  padding-bottom:max(var(--s4), env(safe-area-inset-bottom));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden;
  transition:opacity var(--mid) var(--ease), visibility 0s linear var(--mid);
}
body.menu-open .sheet{ opacity:1; visibility:visible; transition:opacity var(--mid) var(--ease); }
.sheet a{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2);
  padding-block:18px;
  border-bottom:1px solid var(--line);
  font-size:clamp(1.5rem, 7vw, 2.1rem); font-weight:600; letter-spacing:-0.02em;
  opacity:0; transform:translateY(12px);
}
body.menu-open .sheet a{
  opacity:1; transform:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.sheet a span{ font-family:var(--mono); font-size:0.7rem; color:var(--fg-dim); letter-spacing:0.1em; }
body.menu-open .sheet a:nth-child(1){ transition-delay:.05s; }
body.menu-open .sheet a:nth-child(2){ transition-delay:.10s; }
body.menu-open .sheet a:nth-child(3){ transition-delay:.15s; }
body.menu-open .sheet a:nth-child(4){ transition-delay:.20s; }
body.menu-open .sheet a:nth-child(5){ transition-delay:.25s; }
body.menu-open .sheet a:nth-child(6){ transition-delay:.30s; }
body.menu-open .sheet a:nth-child(7){ transition-delay:.35s; }

@media (max-width: 1020px){
  .nav-links{ display:none; }
  .nav-right .btn{ display:none; }
  .burger{ display:flex; }
}

/* ---------- Hero stage ---------- */
.stage{
  position:relative;
  /* Not a full 100dvh: a bottom-anchored hero at full height leaves a dead
     upper half. 90dvh keeps the composition tight and lets the next section
     signal itself at the fold. */
  min-height:90dvh;
  display:flex; align-items:flex-end;
  padding-block:var(--s6) var(--s5);
  overflow:hidden;
  isolation:isolate;
}
.stage--short{ min-height:76dvh; align-items:flex-end; }

.field{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  /* Painted first so the page never flashes flat black before WebGL is up,
     and so the composition survives entirely without WebGL. */
  background:
    radial-gradient(58% 46% at 22% 74%, rgba(163,47,54,0.20), transparent 70%),
    radial-gradient(72% 60% at 68% 26%, rgba(120,132,148,0.13), transparent 72%),
    linear-gradient(180deg, #0c0d0f 0%, #0a0b0c 60%, #08090a 100%);
  opacity:0; transition:opacity 1.4s var(--ease);
}
.field.ready, .field.is-live{ opacity:1; }
/* Scrim is only as heavy as the text needs. Kept light across the top two
   thirds so the field stays visible, and deep only under the copy. */
.stage::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,11,12,0.34) 0%, rgba(10,11,12,0.06) 30%,
             rgba(10,11,12,0.26) 58%, rgba(10,11,12,0.90) 100%);
}

.stage-in{ position:relative; width:100%; }
.stage-copy{ max-width:22ch; }
.stage .display{ margin-bottom:var(--s3); }
.stage .lead{ max-width:52ch; margin-bottom:var(--s4); }
.stage-cta{ display:flex; flex-wrap:wrap; gap:14px; }

/* Hero lockup: the positioning line reads first, the wordmark lands under it
   at full display scale. */
.stage-kicker{
  font-size:clamp(0.95rem, 0.85rem + 0.5vw, 1.35rem);
  font-weight:500;
  color:var(--fg-muted);
  letter-spacing:-0.01em;
  margin-bottom:var(--s2);
}
.wordmark{
  font-family:var(--font-display);
  font-size:clamp(3.4rem, 1.6rem + 9.4vw, 10.5rem);
  font-weight:700;
  line-height:0.92;
  letter-spacing:-0.03em;
  margin:0 0 var(--s3);
  color:var(--fg);
}

/* Hero meta rail: sits on the baseline of the hero, right side, desktop only.
   Real numbers about the firm, not decoration. */
.stage-rail{
  position:absolute; right:0; bottom:2px;
  display:grid; gap:var(--s3);
  text-align:right;
}
.stage-rail div b{ display:block; font-size:1.5rem; font-weight:700; letter-spacing:-0.03em; }
.stage-rail div span{ font-size:var(--t-xs); color:var(--fg-dim); }
@media (max-width: 1100px){ .stage-rail{ display:none; } }

/* ---------- Footer ---------- */
.foot{ border-top:1px solid var(--line); padding-block:var(--s5) var(--s4); background:var(--bg-sunken); }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s5); margin-bottom:var(--s5); }
.foot-h{ font-size:var(--t-sm); color:var(--fg-dim); margin-bottom:var(--s2); font-weight:500; letter-spacing:0; }
.foot-nav{ display:grid; gap:11px; font-size:0.94rem; color:var(--fg-muted); }
.foot-nav a:hover{ color:var(--fg); }
.foot-bot{ display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; font-size:var(--t-sm); color:var(--fg-dim); border-top:1px solid var(--line); padding-top:var(--s3); }
@media (max-width: 800px){ .foot-top{ grid-template-columns:1fr; gap:var(--s4); } }

/* ---------- Page head (inner pages) ---------- */
.phead{ padding-block:calc(68px + var(--s6)) var(--s5); position:relative; overflow:hidden; }
.phead .label{ margin-bottom:var(--s2); display:block; }
.phead .lead{ margin-top:var(--s3); }

/* ---------- Section header ---------- */
.shead{ margin-bottom:var(--s5); max-width:70ch; }
.shead .h2{ margin-bottom:var(--s2); }

/* ---------- Layout family A: numbered process rail ---------- */
.rail{ display:grid; gap:0; border-top:1px solid var(--line); }
.rail-row{
  display:grid; grid-template-columns:76px 1fr 1.15fr; gap:var(--s3);
  padding-block:var(--s4);
  border-bottom:1px solid var(--line);
  align-items:start;
  transition:background var(--fast) var(--ease);
}
.rail-row:hover{ background:rgba(255,255,255,0.02); }
.rail-row > .n{ font-family:var(--mono); font-size:var(--t-sm); color:var(--fg-dim); padding-top:5px; }
.rail-row .h3{ letter-spacing:-0.015em; }
@media (max-width: 860px){
  .rail-row{ grid-template-columns:52px 1fr; }
  .rail-row .body{ grid-column:2; }
}

/* ---------- Layout family B: asymmetric feature grid ---------- */
.grid-x{ display:grid; grid-template-columns:repeat(6, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.cell{ background:var(--bg); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); min-height:230px; }
.cell--wide{ grid-column:span 4; }
.cell--half{ grid-column:span 3; }
.cell--third{ grid-column:span 2; }
.cell--tone{ background:var(--bg-raised); }
/* Photography stays bright and saturated: these are real awards and real
   rooms, and washing them out would undersell them. */
.cell--art{ position:relative; overflow:hidden; padding:0; min-height:280px; }
.cell--art img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.12) contrast(1.06); }
.cell--field{ position:relative; overflow:hidden; }
.cell--field canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0; transition:opacity 1.2s var(--ease); }
.cell--field canvas.is-live{ opacity:1; }
.cell--field > *{ position:relative; z-index:1; }
.cell .kpi{ font-size:clamp(2rem, 1.4rem + 2vw, 3.1rem); font-weight:700; letter-spacing:-0.04em; line-height:1; }
@media (max-width: 900px){
  .grid-x{ grid-template-columns:1fr; }
  .cell--wide, .cell--half, .cell--third{ grid-column:span 1; }
}

/* ---------- Layout family C: split with sticky column ---------- */
.split{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--s6); align-items:start; }
.split-stick{ position:sticky; top:calc(68px + var(--s3)); }
@media (max-width: 940px){
  .split{ grid-template-columns:1fr; gap:var(--s4); }
  .split-stick{ position:static; }
}

/* ---------- Layout family D: horizontal scroll track ---------- */
.track-wrap{ overflow:hidden; }
.track{
  display:flex; gap:1px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding-inline:var(--gutter);
  margin-inline:calc(var(--gutter) * -1);
}
.track::-webkit-scrollbar{ display:none; }
.track-card{
  flex:0 0 min(84vw, 380px);
  scroll-snap-align:start;
  background:var(--bg-raised);
  border:1px solid var(--line);
  padding:var(--s4);
  display:flex; flex-direction:column; gap:var(--s2);
  min-height:300px;
}
.track-card .label{ margin-bottom:auto; }

/* На телефоне лента разворачивается в столбик. Прокрутка вбок на узком
   экране прячет половину карточек: указателя прокрутки не видно, и человек
   просто не догадывается, что там есть продолжение. */
@media (max-width: 700px){
  .track{
    display:grid; grid-template-columns:1fr; gap:1px;
    overflow-x:visible;
    scroll-snap-type:none;
    padding-inline:0;
    margin-inline:0;
  }
  .track-card{
    flex:none;
    min-height:0;
    scroll-snap-align:none;
  }
}

/* ---------- Layout family E: index list (many items, two columns) ---------- */
.index{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s6); }
.index a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding-block:17px; border-bottom:1px solid var(--line);
  color:var(--fg-muted);
}
.index a:hover{ color:var(--fg); }
.index a .arw{ color:var(--fg-dim); transition:transform var(--fast) var(--ease); }
.index a:hover .arw{ transform:translateX(3px); color:var(--fg); }
@media (max-width: 760px){ .index{ grid-template-columns:1fr; } }

/* ---------- Quote ---------- */
.quote{ display:grid; grid-template-columns:1fr 320px; gap:var(--s6); align-items:center; }
.quote blockquote{ margin:0; font-size:var(--t-h3); font-weight:500; line-height:1.45; letter-spacing:-0.015em; }
.quote figcaption{ margin-top:var(--s3); font-size:var(--t-sm); color:var(--fg-dim); }
.quote img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r); filter:saturate(1.1) contrast(1.04); }
@media (max-width: 860px){ .quote{ grid-template-columns:1fr; gap:var(--s4); } }

/* ---------- Closing CTA ---------- */
.close-cta{ position:relative; overflow:hidden; padding-block:var(--s7); border-top:1px solid var(--line); }
.close-cta canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0; transition:opacity 1.4s var(--ease); }
.close-cta canvas.is-live{ opacity:1; }
.close-cta::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,11,12,0.72), rgba(10,11,12,0.90)); }
.close-cta .wrap{ position:relative; z-index:2; }

/* ---------- Form ---------- */
.form{ display:grid; gap:var(--s3); max-width:540px; }
.field-row{ display:grid; gap:8px; }
.field-row label{ font-size:var(--t-sm); color:var(--fg); font-weight:500; }
.field-row input, .field-row textarea, .field-row select{
  width:100%;
  background:var(--bg-raised);
  border:1px solid var(--line-strong);
  border-radius:var(--r);
  color:var(--fg);
  padding:14px 16px;
  font:inherit; font-size:0.95rem;
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.field-row textarea{ min-height:130px; resize:vertical; }
.field-row input::placeholder, .field-row textarea::placeholder{ color:var(--fg-dim); }
.field-row input:focus, .field-row textarea:focus, .field-row select:focus{
  outline:none; border-color:var(--fg); background:#14161a;
}
.field-hint{ font-size:var(--t-xs); color:var(--fg-dim); }
.field-err{ font-size:var(--t-xs); color:var(--accent-hi); display:none; }
.field-row.bad input, .field-row.bad textarea{ border-color:var(--accent-hi); }
.field-row.bad .field-err{ display:block; }
.form-note{ font-size:var(--t-xs); color:var(--fg-dim); max-width:46ch; }
.form-ok{
  display:none; gap:12px; align-items:flex-start;
  border:1px solid var(--line-strong); border-left:2px solid var(--accent-hi);
  background:var(--bg-raised); padding:var(--s3); border-radius:var(--r);
}
.form-ok.on{ display:flex; }